/* ═══════════════════════════════════════════════════════════
   HERO VARIATION — photographic banner
   Loaded after acme.css, only on index-hero-image.html.
   Everything below the hero is untouched.
   ═══════════════════════════════════════════════════════════ */

/* ── the banner ─────────────────────────────────────────── */
/* The header is sticky, so it sits IN flow — the photo would start below it
   and the transparent navbar would just show page background. Pull the hero
   up by the header height and pad the content back down. */
.hero-photo-page{--hdr-h:124px}          /* 42 bar + 78 navbar + 1px border, plus slack */
@media(max-width:991.98px){ .hero-photo-page{--hdr-h:126px} }   /* 44px bar on touch */

/* The utility bar was solid ink sitting on top of the photo, so the join
   between the two read as an arbitrary hairline across the page. Let the
   photo run all the way up and float the bar on it instead. */
.hero-photo-page .util{background:transparent;position:relative;z-index:1031;border:0}
.hero--photo{
  background:var(--charcoal);color:var(--paper);position:relative;overflow:clip;
  margin-block-start:calc(var(--hdr-h) * -1);
  min-height:min(880px,94vh);display:flex;align-items:center;
  padding-block:calc(var(--hdr-h) + clamp(50px,8vh,96px)) clamp(56px,7vw,96px);
}
.hero--photo::before{content:none}          /* the photo replaces the teal glow */
.hero--photo .container{position:relative;z-index:1}

.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* Two scrims: one horizontal so the copy side stays dark enough to read,
   one vertical to seat the header and hand off to the ink marquee below. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(13,13,13,.95) 0%, rgba(13,13,13,.88) 34%,
                              rgba(13,13,13,.58) 66%, rgba(13,13,13,.40) 100%),
    linear-gradient(to bottom, rgba(13,13,13,.72) 0%, rgba(13,13,13,.10) 26%,
                               rgba(13,13,13,.20) 62%, rgba(13,13,13,.86) 100%);
}
html[dir="rtl"] .hero-bg{transform:scaleX(-1)}   /* flip photo and scrim together */

/* ── hero type on a dark ground ─────────────────────────── */
.hero--photo .eyebrow{color:var(--brass-lo)}
.hero--photo .eyebrow::before{background:var(--brass-lo)}
.hero--photo .h-xl em{color:var(--brass-lo)}
.hero--photo .lede{color:rgba(250,250,247,.80)}
.hero--photo .hero-meta{border-block-start-color:rgba(250,250,247,.22)}
.hero--photo .hero-meta small{color:rgba(250,250,247,.66)}
.hero--photo .hero-meta b{color:var(--paper)}

/* the ledger now sits on a photograph, so it needs an edge and some glass */
.hero--photo .ledger{
  background:rgba(13,13,13,.74);border:1px solid rgba(250,250,247,.17);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.72);
}

/* ── transparent header over the banner ─────────────────── */
/* every property that differs between the two header states is transitioned,
   so the handover reads as a fade rather than a flash */
.hero-photo-page .navbar.site .navbar-brand,
.hero-photo-page .navbar.site .nav-link,
.hero-photo-page .navbar.site .navbar-brand span,
.hero-photo-page .navbar.site .navbar-toggler{transition:color .34s var(--ease),border-color .34s var(--ease)}
.hero-photo-page .navbar.site .navbar-toggler b::before,
.hero-photo-page .navbar.site .navbar-toggler b::after{transition:background-color .34s var(--ease),transform .38s var(--ease),top .28s var(--ease)}

.hero-photo-page .navbar.site:not(.stuck){
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-block-end-color:transparent;
}
.hero-photo-page .navbar.site:not(.stuck) .navbar-brand,
.hero-photo-page .navbar.site:not(.stuck) .nav-link{color:var(--paper)}
.hero-photo-page .navbar.site:not(.stuck) .navbar-brand span{
  color:rgba(255,255,255,.62);border-inline-start-color:rgba(255,255,255,.28)}
/* reversed lockup over the banner — one colour flip, the orange is untouched */
.hero-photo-page .navbar.site:not(.stuck) .acme-logo{color:var(--white)}
.hero-photo-page .navbar.site:not(.stuck) .nav-link::after{background:var(--brass-lo)}
/* the deck specifies an orange website CTA, so it stays orange over the
   banner too — black-on-orange holds up against the photograph */
.hero-photo-page .navbar.site:not(.stuck) .navbar-toggler{border-color:rgba(250,250,247,.34)}
.hero-photo-page .navbar.site:not(.stuck) .navbar-toggler b::before,
.hero-photo-page .navbar.site:not(.stuck) .navbar-toggler b::after{background:var(--paper)}
.hero-photo-page .navbar.site:not(.stuck) :focus-visible{outline-color:var(--brass-lo)}

@media(max-width:991.98px){
  .hero--photo{min-height:0;padding-block:calc(var(--hdr-h) + clamp(40px,6vh,64px)) clamp(48px,7vw,80px)}
  .hero-bg img{object-position:50% 55%}
  /* stacked layout means the copy sits over the whole frame, so darken evenly */
  .hero-bg::after{background:linear-gradient(to bottom, rgba(13,13,13,.86) 0%, rgba(13,13,13,.78) 45%, rgba(13,13,13,.92) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img{transform:none!important}
}

/* ── short desktop viewports ─────────────────────────────
   The three-sentence tagline plus the stat rail does not clear the fold on a
   768px-tall laptop. Rather than shrink the headline for everyone, compress
   the hero only where vertical room is actually short. */
@media(min-width:992px) and (max-height:850px){
  .hero--photo{min-height:0;padding-block:calc(var(--hdr-h) + clamp(24px,3vh,44px)) clamp(40px,5vh,64px)}
  .hero--photo .h-xl{font-size:clamp(1.7rem,2.7vw,2.5rem)}
  .hero--photo .lede{font-size:1rem;line-height:1.6}
  .hero--photo .hero-cta{margin-block-start:24px}
  .hero--photo .hero-meta{margin-block-start:28px;padding-block-start:20px;gap:20px 26px}
  .hero--photo .rule-arrow{margin-block-end:18px}
  .hero--photo .ledger-row{padding-block:15px}
  .hero--photo .ledger-hd,.hero--photo .ledger-ft{padding-block:14px}
}

/* the photo is oversized so it can travel without exposing an edge; the scrim
   stays put on .hero-bg, which also carries the RTL flip */
.hero-bg img[data-plx]{position:absolute;inset-block-start:-9%;inset-inline-start:0;
  width:100%;height:118%;will-change:transform;
  transform:translate3d(0,var(--plx,0px),0)}
@media(max-width:767.98px){ .hero-bg img[data-plx]{position:static;inset:auto;height:100%;transform:none} }
@media(prefers-reduced-motion:reduce){ .hero-bg img[data-plx]{transform:none} }