/* ==========================================================================
   HITCO — poster hero (homepage hero VARIANT B). Everything under `.phero`.

   Composition, straight from the client's final art: a full-bleed composite
   with the HQ on the physical LEFT and a graded navy field on the right; an
   editorial deck (headline / lede / ghost CTA) standing in that field; a
   `‹ 01 —— 03 ›` pager below it; and the stat bar riding up over the hero's
   floor so the two read as one dark block.

   ART — uploads/poster/finalhomeposter.webp, 1640×959 (1.71:1).
   It REPLACED homeposter.png (1535×764, 2.01:1, facade centred), which is why
   the deck moved from the left to the right: the new art bakes the clear lane
   into the image on the right-hand side, so the deck goes where the art left
   room for it. homeposter.png is kept on disk as the previous cut only.
   NOT posterbuilding.png: that file is a cut-out on a baked white ground (PNG
   colour-type 2, no alpha), and a hero that has to be dark cannot be built on
   an opaque white plate. See get_poster_slides() in models/home_model.php.

   WHY PHYSICAL AND NOT LOGICAL, everywhere in this file:
   the photograph does not mirror — flipping it would reverse the HITCO signage
   on the facade — so the clear field the text stands in cannot mirror either,
   and neither may anything positioned against it. The deck and the pager sit on
   the physical RIGHT in BOTH locales. Text inside the deck still runs
   right-to-left in fa; only the *placement* is pinned. Same call as
   `.hist-hero` on /about/history; see md/frontend.md §RTL / LTR.

   NOTE on tokens: the spacing scale is --s-1..6, 8, 10, 12, 16, 20, 24, 32.
   There is no --s-7/9/14 — a missing custom property kills the WHOLE
   declaration silently.
   ========================================================================== */

/* Page-local palette and geometry. On `:root` DELIBERATELY, not on `.phero`:
   `.phero + .statbar` styles a SIBLING of the hero, custom properties do not
   inherit sideways, and every value below is used by both. Declared on `.phero`
   these had to be restated in the stat-bar block, and they promptly drifted —
   `--sb-lift` was left at the old 92px there and the card hung off the fold,
   while `--ph-green` was missed entirely and the stat glyphs shipped grey.
   Scoping is not lost by doing this: the whole file is loaded only when the
   poster hero is the chosen homepage hero. */
:root {
  /* Sampled from finalhomeposter.png's own bottom-right corner (#0a2348), NOT
     picked by eye: the floor gradient and the stat-bar band have to resolve to
     the exact navy the art ends on or the hero shows a horizontal seam where
     the two meet. Re-sample if the art is ever replaced. The previous art was
     a colder, darker #071a2c. */
  --ph-navy: var(--c-band); /* the shared dark surface */
  --ph-wash: 8, 30, 62; /* rgb() parts of the scrim, so alpha can vary */
  /* On-dark accent. --c-green (#349b47) is the brand green and is used as-is on
     light grounds; at 60% luminance against this navy it goes muddy, so the
     hero uses a lifted tint of the same hue family for type and hairlines. */
  --ph-green: var(--c-on-dark-accent);
  --ph-green-soft: rgba(122, 197, 85, 0.5);
  /* How far the stat bar lifts into the hero. Larger than the card (~96px) ON
     PURPOSE — the card has to finish ABOVE the hero's bottom edge, or the
     "one screenful" the user asked for loses its last rows.
     176, not 128: the AI assistant launcher is `position:fixed`, 22px off the
     bottom and off the inline-end edge, ~40px tall, and at 128 the card's last
     38px sat underneath it. That bites whenever the card is wider than the
     launcher's clear space — which is any viewport at or below ~1280px even
     with the narrowed card. 176 finishes the card ~19px clear of it and still
     inside the fold. */
  --sb-lift: 176px;
}

.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* EXACTLY one screen, and the chrome is NOT subtracted: the topbar and header
     are lifted on top of this hero (see the overlay block at the end of this
     file) instead of sitting above it, so nav + hero + stat bar are one
     screenful — the user's "کل منو و اسلایدر توی یه نگاه دیده بشه".
     svh, not vh: mobile browser chrome must not push the stat bar off-screen. */
  min-block-size: 100svh;
  /* Top padding clears the overlaid chrome so the headline cannot slide under
     the nav. Bottom padding keeps the pager clear of the lifted stat bar and of
     the AI assistant launcher (`position:fixed`, inset-block-end:22px,
     z-index 90 — at the fold it paints over anything in that band). */
  padding-block: calc(var(--topbar-h) + var(--header-h) + var(--s-8))
    calc(var(--sb-lift) + var(--s-16));
  background: var(--ph-navy);
}

/* -------------------------------------------------------------------- art */
/* Full width, BOTTOM-ANCHORED, and sized to the source's own aspect ratio so
   the art is shown at roughly 1:1 and is not blown up.

   1640×959 is 1.71:1, close enough to a desktop viewport that on anything from
   ~1.71:1 up (1920×1080 is 1.78) the clamp lands on 100% and the art is a true
   full bleed with only a little vertical crop. The old 2.01:1 art could not do
   that — it had to be floated at its own height with navy above it — so if the
   art is ever swapped back, the divisor here has to go back with it.
   The 62% floor still stands so a tall narrow viewport cannot reduce the art
   to a strip. */
.phero__art {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: clamp(62%, calc(100vw / 1.71), 100%);
  z-index: 0;
  pointer-events: none;
  /* Dissolves the art's top edge into the navy above it, for the viewports
     where the clamp does NOT reach 100% and the art floats. The source's top
     band is deep navy sky, so this reads as the sky deepening rather than as a
     seam. Masked, not overlaid with a navy gradient: an overlay has to match
     --ph-navy exactly and breaks silently the moment the ground changes.
     Shorter than the old 18% — the building's roofline starts at ~20% of this
     source and a longer fade eats into it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
}
/* Stacked and cross-faded rather than translated: the deck slides, the art
   does not, so a track would only fight the still building. */
.phero__shot {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* cover, not contain: contain would letterbox and leave the hero half empty.
     At 1.71:1 against a ~1.78:1 desktop the crop is VERTICAL and small, so the
     x term barely matters here and `center` keeps the composition the designer
     shipped: building left, clear navy right, deck standing in the clear side.
     The y term is what to reach for on short screens — the bottom of the source
     is forecourt paving and the top is empty sky, so both ends are cheap.
     Do NOT push x off centre on desktop: the art's clear lane is baked in at a
     fixed position, and sliding the image sideways slides the lane out from
     under the deck. The narrow breakpoints below shift it only because there
     the deck no longer shares the width with the building. */
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.phero__shot.is-active {
  opacity: 1;
}

/* Three separate layers, not one gradient: an overall navy tint that sets the
   whole frame's key, a horizontal wash that carries the text lane, and a floor
   that seats the stat bar. One gradient on the section would have to span its
   full height and could not do any of the three properly — gotcha 2 in
   md/frontend.md. */
.phero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Barely there. The user's note was that the right-hand side had gone so dark
     the building was unreadable, and this is the only layer that covers ALL of
     it — the scrim is released well before the facade, so anything spent here is
     spent on the photograph. Do not push these past ~.2 without re-checking. */
  background: linear-gradient(
    180deg,
    rgba(var(--ph-wash), 0.2) 0%,
    rgba(var(--ph-wash), 0.04) 34%,
    rgba(var(--ph-wash), 0.16) 100%
  );
}

/* Top cap. The overlaid nav sits on whatever the art happens to put there, so
   white nav labels need their own guaranteed ground. A short fade from the top
   edge does it without darkening the hero as a whole. Lighter than it was —
   this art's top band is already deep navy rather than daylit sky. */
.phero__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: calc(var(--topbar-h) + var(--header-h) + 60px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 21, 44, 0.6) 0%,
    rgba(6, 21, 44, 0) 100%
  );
}

/* Legibility wash under the text lane. Anchored `to left` — physical, for the
   reason at the top of this file: the deck is on the RIGHT now, so this is the
   mirror of what it used to be.
   Much lighter than the old version on purpose. The art already ships a graded
   navy field on the right, so this only has to guarantee a floor under the type
   for the viewports where the crop nudges the building rightwards; anything
   heavier just flattens a gradient the designer already drew. It is fully
   released by 55%, i.e. before the facade, so it never dims the building. */
.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(var(--ph-wash), 0.55) 0%,
    rgba(var(--ph-wash), 0.44) 24%,
    rgba(var(--ph-wash), 0.24) 40%,
    rgba(var(--ph-wash), 0) 55%
  );
}

/* Separate strip so the hero's last ~260px resolve to flat --ph-navy. That is
   what lets the stat bar lift into the hero with no visible seam: the band it
   lands on and the band `.phero + .statbar` paints below the hero are the
   same colour. */
.phero__floor {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 200px;
  z-index: 1;
  pointer-events: none;
  /* Only the last ~10% is solid. Taller or denser and it climbs into the
     building's base, which is the other half of "the right-hand side is too
     dark to read". */
  background: linear-gradient(
    to top,
    var(--ph-navy) 10%,
    rgba(10, 35, 72, 0) 100%
  );
}

/* Dot-mesh flourish in the empty lower-RIGHT of the frame — it follows the
   deck, because the empty quarter of the art is the side the deck stands in and
   the other side is now the building. Two radial layers: the dots themselves,
   and a soft ellipse used via mask to fade them out on all sides — a plain
   gradient overlay would have to match the navy exactly and would break the
   moment the scrim's alpha changed.
   Written physical-right for LTR and re-pinned for RTL, same as the lane. */
.phero__specks {
  position: absolute;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  inline-size: min(46%, 620px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.34) 1px,
    transparent 1.4px
  );
  background-size: 22px 22px;
  /* 82%, mirroring the old 18%: the ellipse sits at the outer edge of the box,
     which is the screen's right edge here. */
  -webkit-mask-image: radial-gradient(
    ellipse 70% 55% at 82% 72%,
    #000 0%,
    transparent 70%
  );
  mask-image: radial-gradient(
    ellipse 70% 55% at 82% 72%,
    #000 0%,
    transparent 70%
  );
}
/* Physical right in Persian too — the flourish belongs to the artwork. */
[dir="rtl"] .phero__specks {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

/* ------------------------------------------------------------------- deck */
.phero__inner {
  position: relative;
  z-index: 2;
  inline-size: 100%;
}
/* The deck stands in the clear navy field on the RIGHT of the art, in both
   locales. Only the placement is pinned — the copy inside still runs
   right-to-left in fa.

   The width is what keeps it off the building. The art's facade (plus the tree
   in front of it) ends at ~58% of the source, and at full bleed the source maps
   1:1 onto the viewport, so the deck's left edge must not cross that. `%` here
   resolves against the 1192px container, not the viewport: 38% ≈ 450px, so on
   1920 the lane runs 1130→1580px, i.e. 59%→82% of the screen — clear of the
   facade by a hair, which is exactly how the art was drawn. Widening this is
   what would put type over glass. */
.phero__lane {
  position: relative;
  max-inline-size: min(38%, 450px);
  /* LTR: the block starts at the container's left, so it needs to be pushed
     over. RTL: `margin-inline-start` resolves to margin-RIGHT, which would push
     it back to the left — and it is already flush right there anyway, since
     under RTL the inline axis starts at the right edge. Hence the reset. */
  margin-inline-start: auto;
}
[dir="rtl"] .phero__lane {
  margin-inline-start: 0;
}

/* The lane runs to the SCREEN's right edge, not the container's.
   `.phero__inner` is a plain `.container` (1400px, centred), so on a 1920px
   screen the deck stopped at x≈1560 and left a ~350px band of bare navy between
   the type and the window edge — the only thing in the frame with no reason to
   be there. A container exists to line body copy up with the header; a
   full-bleed hero has no such obligation, and closing the band was chosen over
   keeping the deck's right edge aligned with the brand mark above it.

   Desktop only. Below 901px the lane is full width and the container's normal
   gutters are already the right ones. */
@media (min-width: 901px) {
  .phero__inner {
    max-inline-size: none;
    /* --gutter, not a copied clamp: the topbar and the header row above use the
       same token, and the deck standing on a different edge from the chrome
       directly above it is the whole thing this was meant to fix. */
    padding-inline: var(--gutter);
  }
  /* ⚠️ This 34% now resolves against the VIEWPORT, not against the 1192px
     container — the rule above changed the percentage base, so the number is
     NOT comparable to the 38% in the block above.
     What has to hold is the lane's INNER (left) edge: the facade plus its tree
     end at ~58% of the art, the art is full-bleed, so 58% of the art is 58% of
     the screen. 34% + a ≤96px gutter lands that edge at ~62% at every width
     from 1101px up. Push this past ~36% and the headline walks onto glass. */
  .phero__lane {
    max-inline-size: min(34%, 660px);
  }
  /* The lane is ~45% wider than it was, so the headline can carry the extra
     size the comp's proportions imply. Capped rather than raised across the
     board: `--t-*` steps are shared, and the short-viewport block below still
     has to be able to pull this back down. */
  .phero__title {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
  }
}

/* All three slides share ONE grid cell, so the deck is always as tall as the
   longest of them and the pager below it never moves when the slide changes.
   Hidden slides are `visibility:hidden`, not `display:none` — display:none
   collapses them out of the cell and the deck goes back to jumping. It also
   takes them out of the tab order for free. */
.phero__deck {
  display: grid;
}
.phero__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  gap: var(--s-5);
  visibility: hidden;
  pointer-events: none;
}
.phero__slide.is-active {
  visibility: visible;
  pointer-events: auto;
}

.phero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
}
/* Two-tone, per the comp: statement in white, promise in the accent green. */
.phero__l1 {
  font-weight: 700;
  color: #fff;
}
.phero__l2 {
  font-weight: 700;
  color: var(--ph-green);
}

.phero__lede {
  margin: 0;
  /* 48ch, not the 42ch this started at: the comp's lede is two lines and IRANSans
     runs narrow, so 42ch broke it onto three. */
  max-inline-size: 48ch;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.76);
}

/* Ghost pill: transparent, green hairline, white label. */
.phero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 15px 32px;
  margin-block-start: var(--s-2);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  background: transparent;
  border: 1px solid var(--ph-green-soft);
  transition: background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.phero__cta:hover {
  background: var(--ph-green);
  border-color: var(--ph-green);
  color: var(--ph-navy);
}
.phero__cta:active {
  transform: translateY(1px);
}

/* The `chevron` glyph points DOWN, so a caret is a rotation, not a mirror.
   It sits on the trailing edge of the label and points along the reading
   direction — logical here, because it belongs to the text, not to the art. */
.phero__cta-chev {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  transform: rotate(-90deg);
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .phero__cta-chev {
  transform: rotate(90deg);
}
.phero__cta:hover .phero__cta-chev {
  transform: rotate(-90deg) translateY(3px);
}
[dir="rtl"] .phero__cta:hover .phero__cta-chev {
  transform: rotate(90deg) translateY(3px);
}

/* Entrance for the incoming slide. Not `.reveal` — that is scroll-driven and
   the hero is above the fold, which would leave it blank on first paint. */
.phero__slide.is-active > * {
  animation: phero-in 620ms var(--ease) both;
}
.phero__slide.is-active > *:nth-child(2) {
  animation-delay: 70ms;
}
.phero__slide.is-active > *:nth-child(3) {
  animation-delay: 140ms;
}
@keyframes phero-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------------- pager */
/* ‹ 01 ——— 03 › — the rule between the numbers doubles as the autoplay
   progress track, so one control says both "where you are" and "how long
   until it moves". */
.phero__pager {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-block-start: var(--s-16);
  /* Physical order in both locales — the row is pinned to artwork that does not
     mirror, and the comp shows ‹ on the left in Persian. `direction:ltr` also
     stops the flex row itself from reversing. */
  direction: ltr;
}
/* …but the row still has to sit under the text it belongs to. `direction:ltr`
   above also parks the row at the lane's LEFT edge, and in fa the deck above it
   is right-aligned, which left the pager floating away from its own column.
   Aligning the row's end is the fix that does not disturb the ‹ › order. */
[dir="rtl"] .phero__pager {
  justify-content: flex-end;
}

.phero__arw {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.phero__arw:hover {
  background: var(--ph-green);
  border-color: var(--ph-green);
  color: var(--ph-navy);
}
.phero__arw svg {
  inline-size: 17px;
  block-size: 17px;
}

/* The pair always reads ‹ › on screen. What flips per locale is which button is
   which: in RTL "next" travels leftwards, so order and glyph swap together. */
.phero__arw--prev {
  order: 1;
}
.phero__arw--next {
  order: 3;
}
[dir="rtl"] .phero__arw--prev {
  order: 3;
}
[dir="rtl"] .phero__arw--next {
  order: 1;
}
.phero__arw--prev svg {
  transform: rotate(90deg);
}
.phero__arw--next svg {
  transform: rotate(-90deg);
}
[dir="rtl"] .phero__arw--prev svg {
  transform: rotate(-90deg);
}
[dir="rtl"] .phero__arw--next svg {
  transform: rotate(90deg);
}

.phero__count {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.phero__n--now {
  color: var(--ph-green);
}
.phero__n--total {
  color: rgba(255, 255, 255, 0.45);
}

.phero__bar {
  inline-size: 64px;
  block-size: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.phero__bar-fill {
  display: block;
  inline-size: 0;
  block-size: 100%;
  border-radius: 1px;
  background: var(--ph-green);
}
/* Restarted by JS re-adding `.is-running`, so the fill tracks the real
   autoplay clock instead of drifting from it. */
.phero__bar.is-running .phero__bar-fill {
  animation: phero-progress var(--slide-ms, 6500ms) linear forwards;
}
.phero.is-paused .phero__bar-fill {
  animation-play-state: paused;
}
@keyframes phero-progress {
  from {
    inline-size: 0;
  }
  to {
    inline-size: 100%;
  }
}

/* The comp has no dot rail, but the visible pager is aria-hidden (it is a
   graphic) and the dots are the slide list's only real control. Kept in the
   accessibility tree and reachable by keyboard, painted out of the layout —
   `display:none` would remove them from both. */
.phero__dots {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* …and brought back on screen if one is actually focused, so a keyboard user
   never operates a control they cannot see. */
.phero__dots:focus-within {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  order: 4;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.phero__dot {
  inline-size: 8px;
  block-size: 8px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  transition: background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.phero__dot[aria-current="true"] {
  background: var(--ph-green);
  transform: scale(1.3);
}

/* ------------------------------------------------------- stat bar seating */
/* The card lifts into the hero's floor. slider.css owns `.statbar` for the
   classic hero (light card, its own -104px lift); this block overrides it only
   when the poster hero is the one on the page.
   The top --sb-lift of the section must stay transparent — it is over the hero
   — and everything below it paints the same navy the floor resolves to, so the
   two meet with no seam. */
.phero + .statbar {
  margin-block-start: calc(var(--sb-lift) * -1);
  /* ⚠️ This read `var(--s-14)` for a long time. There is no --s-14 on the
     scale (--s-1..6, 8, 10, 12, 16, 20, 24, 32), so the WHOLE declaration was
     invalid and silently dropped — the section was exactly as tall as the card
     and the padding never existed. It went unnoticed because the hero paints
     over the gap: `.phero` is `position:relative`, so it is a positioned
     element and covers the *background and text* of the plain `.section` that
     follows. What the visitor reads as the gap under the fold is therefore
     `--sec-y` MINUS however far this section's bottom edge sits above the
     hero's. Raising --sb-lift by 48px ate exactly that much of it, so the 48px
     the declaration was always meant to add is now real and the rhythm below
     the fold is unchanged. */
  padding-block: 0 var(--s-12);
  background: linear-gradient(
    to bottom,
    rgba(10, 35, 72, 0) 0,
    rgba(10, 35, 72, 0) var(--sb-lift),
    var(--ph-navy) var(--sb-lift),
    var(--ph-navy) 100%
  );
}

/* Dark glass, matching the comp: the card sits half on the photograph, so it
   is translucent rather than a solid fill. */
.phero + .statbar .statbar__inner {
  /* Narrower than its own container, on the user's call: the deck above now
     runs the full width of the screen, and a card that did the same turned the
     whole fold into two edge-to-edge bands. A compact centred card reads as an
     object floating on the photograph again, which is what the comp shows.
     ⚠️ There is a floor, and it is set by ENGLISH, not by Persian.
     `.statbar__label` is `white-space:nowrap` + `text-overflow:ellipsis`, so a
     cell that is too narrow does not wrap — it silently truncates. 1040px
     shipped "Subsidiary compani…" and "Consumers worldw…" while every Persian
     label still fitted. 1160px over five columns is 232px a cell, which clears
     the longest English label with a little room; check /en, not /fa, before
     taking this any lower. */
  max-inline-size: 1160px;
  margin-inline: auto;
  background: rgba(10, 32, 52, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
}
.phero + .statbar .statbar__item {
  border-inline-end-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 1000px) {
  .phero + .statbar .statbar__item:nth-child(-n + 3) {
    border-block-end-color: rgba(255, 255, 255, 0.12);
  }
}
@media (max-width: 620px) {
  .phero + .statbar .statbar__item:nth-child(-n + 4) {
    border-block-end-color: rgba(255, 255, 255, 0.12);
  }
}
/* Glyph only, no plate — the comp's icons sit directly on the glass. */
.phero + .statbar .statbar__icon {
  background: transparent;
  color: var(--ph-green);
  inline-size: 40px;
  block-size: 40px;
}
.phero + .statbar .statbar__icon svg {
  inline-size: 26px;
  block-size: 26px;
}
.phero + .statbar .statbar__value {
  color: #fff;
}
.phero + .statbar .statbar__label {
  color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------- overlaid chrome (nav) */
/*
 * The user asked for the nav to sit ON the banner, exactly as the comp shows,
 * and for nav + hero + stat bar to be one screenful.
 *
 * CLAUDE.md rule 4 locks the header — this is the explicit request that lifts
 * that lock, and the change is scoped as tightly as it can be: **this file is
 * loaded only when the poster hero is the chosen homepage hero**, so no other
 * page, and not even the classic-hero homepage, sees a line of it.
 * `navigation.css` and `partials/header.php` were NOT edited. If the client
 * switches `config('home.hero')` to 'classic', the normal white header comes
 * back on its own.
 *
 * The chrome is lifted onto the hero by pulling the HERO up underneath it, not
 * by taking the header out of flow: `.header` stays `position:sticky`, so it
 * still pins to the top on scroll exactly as it does everywhere else.
 */
.phero {
  margin-block-start: calc((var(--topbar-h) + var(--header-h)) * -1);
}

.topbar {
  position: relative;
  z-index: 101;
  background: transparent;
}

/* The chrome's own width is NOT set here. `.topbar__inner` and `.header__inner`
   run to `--gutter` on EVERY page — the user asked for it site-wide — so that
   rule lives in `navigation.css`, which owns them. All this file still does to
   the chrome is make it transparent over the photograph. */

/* `:not(.is-solid)` on every rule, so the solid state is simply the absence of
   these and navigation.css's own values apply untouched. */
.header:not(.is-solid) {
  background: transparent;
  border-block-end-color: transparent;
}
.header:not(.is-solid) .brand__txt b {
  color: #fff;
}
.header:not(.is-solid) .brand__txt span {
  color: rgba(255, 255, 255, 0.68);
}
.header:not(.is-solid) .nav__btn {
  color: rgba(255, 255, 255, 0.92);
}
.header:not(.is-solid) .nav__btn:hover,
.header:not(.is-solid) .nav__btn[aria-expanded="true"] {
  color: #fff;
  border-block-end-color: var(--ph-green);
}
.header:not(.is-solid) .nav__btn.is-active {
  color: var(--ph-green);
  border-block-end-color: var(--ph-green);
}
.header:not(.is-solid) .icon-btn {
  color: #fff;
}
.header:not(.is-solid) .icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.header:not(.is-solid) .lang-switch {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}
.header:not(.is-solid) .lang-switch:hover {
  color: var(--ph-navy);
  background: #fff;
  border-color: #fff;
}

/* `.is-solid` is the ONLY switch, and hero-poster.js owns it. It is applied
   both on scroll and while a mega panel is open — a panel is an opaque white
   sheet hanging off the header's bottom edge, and over it the white labels
   above would be invisible.
   This was tried as `.header:has([data-mega][aria-expanded="true"])` first and
   is deliberately not: that rule outranks `.header:not(.is-solid)` on the
   header itself, but NOT the descendant rules above it, so the background went
   white while every label stayed white with it. One class avoids the whole
   specificity question. */

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .phero__lane {
    max-inline-size: min(60%, 560px);
  }
  /* The box is squarer than 1.71:1 here, so the crop turns horizontal and the
     art loses width. Take it off the RIGHT (x below 50%): that side is the flat
     navy field, which the scrim can stand in for, whereas the left is the
     building and cropping it would cut into the facade. The lane widens above,
     so the deck now overlaps the building's right flank — that is what the
     scrim is for at this size. */
  .phero__shot {
    object-position: 34% center;
  }
  /* …and it has to do real work again, because the field it used to only
     reinforce is the part being cropped away. */
  .phero__scrim {
    background: linear-gradient(
      to left,
      rgba(var(--ph-wash), 0.86) 0%,
      rgba(var(--ph-wash), 0.72) 34%,
      rgba(var(--ph-wash), 0.4) 52%,
      rgba(var(--ph-wash), 0) 68%
    );
  }
}

@media (max-width: 900px) {
  /* The building can no longer share the width with the text, so the art goes
     behind it and the scrim goes near-solid. The photograph stays full-bleed —
     this hero is dark by design, so unlike the old light version there is no
     need to drop the art to a band. */
  .phero {
    min-block-size: 0;
    align-items: flex-start;
    --sb-lift: 0px;
    /* The chrome is still overlaid here, so the top pad still has to clear it —
       only the "one screenful" constraint is dropped, because a phone cannot
       fit the nav, a headline, a lede, a CTA, a pager and five stats at once
       without making all of them too small to use. */
    padding-block: calc(var(--topbar-h) + var(--header-h) + var(--s-8))
      var(--s-12);
  }
  .phero__pager {
    margin-block-start: var(--s-12);
  }
  .phero__lane {
    max-inline-size: none;
    /* Full width now, so there is no side to pin it to. */
    margin-inline-start: 0;
  }
  .phero__specks {
    inline-size: 100%;
  }
  /* The text now runs the full width, so there is no clear field to protect and
     the crop can go back to the middle of the building. */
  .phero__shot {
    object-position: center center;
  }
  /* Near-uniform rather than a sweep — the text now runs the full width, so
     there is no clear side to release into. Kept under the desktop values on
     purpose: stacked on the tint, anything higher blacks the building out
     entirely instead of just sinking it. */
  .phero__scrim {
    background: linear-gradient(
      to left,
      rgba(var(--ph-wash), 0.66) 0%,
      rgba(var(--ph-wash), 0.54) 60%,
      rgba(var(--ph-wash), 0.42) 100%
    );
  }
  .phero__title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
  .phero__lede {
    max-inline-size: none;
  }
  /* Card back below the hero and on its own navy band. */
  .phero + .statbar {
    --sb-lift: 0px;
    margin-block-start: 0;
    padding-block: var(--s-10) var(--s-12);
    background: var(--ph-navy);
  }
}

@media (max-width: 640px) {
  .phero__pager {
    gap: var(--s-4);
    margin-block-start: var(--s-10);
  }
  .phero__count {
    gap: var(--s-3);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
  }
  .phero__bar {
    inline-size: 44px;
  }
  .phero__arw {
    inline-size: 40px;
    block-size: 40px;
  }
  .phero__arw svg {
    inline-size: 15px;
    block-size: 15px;
  }
  .phero__cta {
    padding: 13px 24px;
  }
}

/* Short desktop viewports — 1366×768 and 1280×800 are still extremely common.
   `min-block-size:100svh` is a MINIMUM: the hero's own content (cleared chrome
   + deck + pager + the stat bar's reserve) has an intrinsic height of ~856px,
   so on a 768px screen the hero simply grew and pushed the stat bar under the
   fold — which loses exactly the "one screenful" this was built for.
   A HEIGHT query, not a width one: the constraint is vertical, and 1366×768 and
   1920×1080 are the same width class but very different problems.
   `min-width:901px` keeps it clear of the phone layout below, where the hero is
   deliberately allowed to be taller than the screen. */
@media (min-width: 901px) and (max-height: 880px) {
  .phero {
    padding-block: calc(var(--topbar-h) + var(--header-h) + var(--s-4))
      calc(var(--sb-lift) + var(--s-6));
  }
  .phero__title {
    font-size: clamp(1.7rem, 3.3vw, 2.5rem);
  }
  .phero__slide {
    gap: var(--s-4);
  }
  .phero__lede {
    font-size: var(--t-sm);
  }
  .phero__cta {
    padding: 12px 26px;
  }
  .phero__pager {
    margin-block-start: var(--s-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phero__shot {
    transition: none;
  }
  .phero__slide.is-active > * {
    animation: none;
  }
  .phero__bar.is-running .phero__bar-fill {
    animation: none;
    inline-size: 100%;
  }
}