/* =====================================================================
   SECTION: Header  (States 1 of 3 — static layout only)
   --------------------------------------------------------------------
   DELIBERATE EXCEPTION to the body grid system. Header-only traits:
     • 60px padding (top white bar) / 30px padding (frosted bar),
       not the body's 30px page margin.
     • Fixed block heights (100px / 70px), not square blocks.
     • Lives outside the normal modular section stack.
   Do NOT generalise any of this to body sections.
   --------------------------------------------------------------------
   Editable content vs fixed structure noted inline as // CONTENT / // STRUCTURE
   for the later WordPress / ACF conversion.
   ===================================================================== */

/* ---- Shared 4-block row primitive ----------------------------------- */
/* STRUCTURE: a row of four equal blocks spanning full width.            */
.hdr-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 across; on the 12-col grid each = 3 cols */
  column-gap: var(--gutter);               /* 30px gutter between blocks */
  width: 100%;
  position: relative;                      /* containing block for absolute strap */
}

.hdr-block {
  display: flex;
  flex-direction: column;
  /* Defaults per brief §4: top-aligned vertically, left here is header-specific
     because the sketch shows logo top-left, copy top-left, buttons top-right
     of the row — but content inside each block is top-aligned. */
  justify-content: flex-start;
}

/* =====================================================================
   1. TOP WHITE BAR  (State 1)
   4-block row · 100px-tall blocks · 60px padding all round · solid white
   ===================================================================== */
.ew-header__topbar {
  background: var(--bar-fill);          /* STRUCTURE: solid white */
  padding: var(--hdr-pad);              /* STRUCTURE: 60px all round */
}
.ew-header__topbar .hdr-block {
  min-height: var(--hdr-block-h);       /* STRUCTURE: 100px tall blocks */
}

/* Block 1: logo, top-left */
.hdr-logo {
  align-items: flex-start;              /* left */
}
.hdr-logo__img {
  height: var(--logo-h);                /* STRUCTURE: 100px logo */
  width: auto;
}

/* Block 3: wordmark (Logo_4) — absolute overlay so it is truly centred
   on the full header row width, not just within column 3 of 4. Removed
   from grid flow so CTA stays pinned to column 4 (see .hdr-cta above). */
.hdr-strap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;                 /* pass clicks through to grid blocks */
}
/* Wordmark SVG wrapper — height-constrained, colour-inheriting via currentColor */
.hdr-wordmark__svgwrap {
  display: block;
  height: 35px;
  color: var(--c1);
  /* no transition here: colour animates only during scroll engine (see is-engine rule) */
}
.hdr-wordmark__svgwrap .hdr-logo__svg {
  display: block;
  height: 100%;
  width: auto;
}
/* Mobile logo: hidden on desktop, revealed at ≤600px.
   Double-class selector (0,0,2,0) beats the base .hdr-logo__svgwrap
   { display: block } rule (0,0,1,0) that appears later in this file. */
.hdr-logo__svgwrap.hdr-logo__svgwrap--mobile {
  display: none;
}

/* Block 4: buttons, top-RIGHT of the row. Pinned to col 4 so the absolute
   strap (removed from grid flow) doesn't shift the CTA left. */
.hdr-cta {
  align-items: flex-end;                /* right edge of the block */
  grid-column: 4;
}
.hdr-cta__group {
  display: flex;
  gap: 15px;                            /* 15px between the two buttons */
}

/* =====================================================================
   2. HERO SECTION  (State 1)
   Full-bleed image filling remaining viewport height below the top bar.
   Three stacked rows: spacer (100px) / tagline (flex) / metadata (100px).
   ===================================================================== */
/* Full-viewport background image layer. Fixed behind the header content.
   Fills the whole viewport so it is full-bleed in States 1-2; the white
   top bar covers its top strip in State 1. Translates off in State 3. */
.ew-header__bg {
  position: relative;                  /* anchor the View project overlay button */
  background: var(--c1);                /* neutral behind the image while it loads */
}
.ew-header.is-engine .ew-header__bg {
  position: absolute;
  inset: 0;                            /* full viewport */
  z-index: 0;
  overflow: hidden;
}
/* Image fills the box on both axes, centred, cropping rather than gapping.
   object-fit:cover = fills width, or fills height when the box is taller
   than the image is wide. Never a gap regardless of container size.
   object-position animates so the visible crop shifts: centred in State 1,
   moving up, to bottom-anchored by State 3. */
.ew-header__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;        /* State 1: centred */
}
.ew-header.is-engine .ew-header__bg-img {
  transition: object-position var(--dur) var(--ease);
}
/* State 2: crop shifts up a little (shows lower part of the image). */
.ew-header.is-state-2 .ew-header__bg-img {
  object-position: center 70%;
}
/* State 3: bottom-anchored. Moves up faster on the 2->3 leg (70% -> 100%). */
.ew-header.is-state-3 .ew-header__bg-img {
  object-position: center bottom;
}
/* A/B crossfade stacking: A is always on top, B preloads the next image below. */
.ew-header__bg-img--a { z-index: 2; }
.ew-header__bg-img--b { z-index: 1; }

/* Black overlay for text legibility. 20% in State 1, fades to 5% in State 2.
   z-index: 3 keeps it above both A and B image layers. */
.ew-header__bg-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.20;
  z-index: 3;
}
.ew-header.is-engine .ew-header__bg-overlay {
  transition: opacity var(--dur) var(--ease);
}
.ew-header.is-state-2 .ew-header__bg-overlay,
.ew-header.is-state-3 .ew-header__bg-overlay {
  opacity: 0.05;
}

/* Hero content sits above the image. The hero no longer paints a bg. */
.ew-header__hero {
  position: relative;
  height: calc(100vh - (var(--hdr-block-h) + (2 * var(--hdr-pad))));
  display: flex;
  flex-direction: column;
  padding: var(--hdr-pad);
  overflow: visible;
  z-index: 1;
}

/* The project cursor replaces the pointer over the visible hero image only
   while the staged header is in States 1 and 2. */
.ew-header.is-state-1 .ew-header__hero,
.ew-header.is-state-2 .ew-header__hero {
  cursor: none;
}

/* Top bar sits above the image too. */
.ew-header__topbar { position: relative; z-index: 2; }

/* (Hero spacer row removed — tagline module now fills the top.) */

/* Middle row: 2 blocks, stretches to fill leftover height */
.hdr-hero-mid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 across = 6 cols each */
  column-gap: var(--gutter);
  flex: 1 1 auto;                          /* STRUCTURE: absorbs remaining height */
}
.hdr-hero-mid__block {
  display: flex;
  flex-direction: column;
  justify-content: center;             /* tagline vertically centred */
  align-items: flex-start;             /* left */
}
.hdr-tagline {
  color: var(--text-on-dark);          /* white over image */
  margin: 0;
  white-space: nowrap;                 /* honour the explicit <br>; never auto-wrap */
}
/* The headline is allowed to extend past its 6-col block toward centre,
   as in the sketch. The middle row must not clip it. */
.hdr-hero-mid { overflow: visible; }
.hdr-hero-mid__block:first-child { overflow: visible; }

/* Bottom metadata row: 4 blocks, 100px tall, content bottom-left */
.hdr-hero-meta .hdr-block {
  min-height: var(--hdr-block-h);
  justify-content: flex-end;           /* bottom-aligned vertically */
  align-items: flex-start;             /* left horizontally */
  color: var(--text-on-dark);          /* white over image */
}
.hdr-hero-meta {
  position: relative;
  top: 0;
}
.hdr-meta__label {                     /* first line: default_body */
  margin: 0;
}
/* Frosted backing hugging each metadata pair. The filter lives directly on
   the box so it reliably samples the hero image behind it. */
.hdr-meta__frost {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  background: transparent;
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  border: 0.5px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0),
    inset 0 -1px 0 rgba(255, 255, 255, 0);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease),
    -webkit-backdrop-filter var(--dur) var(--ease);
}
.ew-header.is-state-2 .hdr-meta__frost,
.ew-header.is-state-3 .hdr-meta__frost {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.50);
  box-shadow: none;
}
/* Metadata value: animate the wght/wdth axes smoothly.
   font-variation-settings itself is not interpolatable, so we register
   the axis values as animatable @property custom properties and feed them
   into font-variation-settings. This tweens the weight rather than hard-cutting.
   (Build Brief §2 — motion smooth and purposeful.) */
@property --meta-wght {
  syntax: "<number>";
  inherits: false;
  initial-value: 600;        /* bold_body weight (State 1) */
}
@property --meta-wdth {
  syntax: "<number>";
  inherits: false;
  initial-value: 85;         /* bold_body width (State 1) */
}
.hdr-meta__value {
  --meta-wght: var(--bold-body-wght);
  --meta-wdth: var(--bold-body-wdth);
  font-size: var(--bold-body-size);
  line-height: var(--bold-body-lh);
  font-variation-settings: "wght" var(--meta-wght), "wdth" var(--meta-wdth);
  margin: 0;
}

/* =====================================================================
   3. FROSTED BAR  (built now, hidden in State 1; used in States 2–3)
   Same 4-block structure; 70px blocks, 70px logo, 30px padding,
   10% frost background. Hidden until the scroll engine reveals it.
   ===================================================================== */
.ew-header__frostbar {
  background: rgba(255, 255, 255, 0.03);            /* 3% tint (lighter) */
  -webkit-backdrop-filter: blur(3.2px);
  backdrop-filter: blur(3.2px);
  padding: var(--frost-pad);                        /* 30px all round */
  border: 0.5px solid rgba(255, 255, 255, 0.50);    /* 0.5px white @ 50% (frost states) */
  /* Hidden in the static State 1 build; the scroll engine will position it. */
  display: none;
}
.ew-header__frostbar .hdr-block { min-height: var(--frost-block-h); }
/* Inline-SVG logo: fills are currentColor, so the logo colour follows the
   wrapper's `color` and can animate. White on frost (States 1-2) -> Colour 1
   grey once the bar turns solid white (State 3). */
.hdr-logo__svgwrap {
  display: block;
  height: var(--logo-h-sm);
  color: var(--c6);                        /* white on frost by default */
  /* no transition here: colour animates only during scroll engine (see is-engine rule) */
}
/* Top-bar (State 1) logo: inline SVG, grey (--c1) to match the buttons.
   Scoped to the topbar so it beats the base frost rule. */
.ew-header__topbar .hdr-logo__svgwrap--top {
  height: 115px;
  color: var(--c1);
}
/* Topbar wordmark: larger than the frostbar version, top-aligned with logo + buttons.
   flex-direction:column (from .hdr-block) means justify-content is the vertical axis
   and align-items is horizontal — so flex-start here = top, center here = centred. */
.ew-header__topbar .hdr-strap {
  align-items: center;
  justify-content: flex-start;
}
.ew-header__topbar .hdr-wordmark__svgwrap {
  height: 44px;
}
.hdr-logo__svg {
  display: block;
  height: 100%;
  width: auto;
}
.ew-header__frostbar .hdr-strap,
.ew-header__frostbar .hdr-cta { color: var(--text-on-dark); }       /* white on frost */
/* Wordmark in frostbar: white on frost by default */
.ew-header__frostbar .hdr-wordmark__svgwrap { color: var(--text-on-dark); }
/* In the frost bar (State 2), the filled "Get in touch" button reverses:
   white fill with grey (--c1) text. */
.ew-header__frostbar .btn--filled {
  background: var(--c6);
  border-color: var(--c6);
  color: var(--c1);
}

/* =====================================================================
   SCROLL ENGINE — fixed stage, three states (1 → 2 → 3) + release
   --------------------------------------------------------------------
   The header is pinned to the viewport. A "stage" layer holds the image,
   top bar and hero (plus the white fill behind them). The frosted bar
   sits outside the stage so it can settle at the top on its own.

   State 3 translates the ENTIRE stage up by one viewport, carrying the
   white fill with it, so the body is revealed beneath as a single move.

   A state class on .ew-header drives transforms; CSS transitions animate
   them. JS flips the class on a gated, deliberate scroll.
   ===================================================================== */

/* Pin the header to the viewport while the engine is active. */
.ew-header.is-engine {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 100;
  overflow: hidden;
  background: transparent;            /* the stage carries the white fill */
}

/* The stage: full-viewport moving layer. White fill lives here so it
   travels up with everything else in State 3. */
.ew-header.is-engine .ew-header__stage {
  position: absolute;
  inset: 0;
  background: var(--c6);              /* white fill — moves with the stage */
  z-index: 1;
}

/* Animatable axis props on the metadata value (smooth weight tween). */
.ew-header.is-engine .hdr-meta__value {
  transition:
    transform var(--dur) var(--ease),
    opacity   var(--dur) var(--ease),
    font-size var(--dur) var(--ease),
    --meta-wght var(--dur) var(--ease),
    --meta-wdth var(--dur) var(--ease);
  will-change: transform, opacity, font-size, --meta-wght;
}

/* Logo + wordmark colour transitions: only animate during scroll engine so
   viewport resize causes an instant swap, not a 1600ms fade. */
.ew-header.is-engine .hdr-logo__svgwrap,
.ew-header.is-engine .hdr-wordmark__svgwrap {
  transition: color var(--dur) var(--ease);
}

/* Shared eased transition on the moving parts. */
.ew-header.is-engine .ew-header__stage,
.ew-header.is-engine .ew-header__topbar,
.ew-header.is-engine .ew-header__hero,
.ew-header.is-engine .hdr-hero-mid,
.ew-header.is-engine .hdr-hero-meta,
.ew-header.is-engine .ew-header__frostbar {
  transition:
    transform var(--dur) var(--ease),
    top       var(--dur) var(--ease),
    bottom    var(--dur) var(--ease),
    gap       var(--dur) var(--ease),
    opacity   var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color     var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease),
    -webkit-backdrop-filter var(--dur) var(--ease);
  will-change: transform, opacity;
}

/* Hero fills the area under the top bar. */
.ew-header.is-engine .ew-header__hero {
  height: calc(100vh - (var(--hdr-block-h) + (2 * var(--hdr-pad))));
  /* A transform hint here creates a backdrop root and prevents the metadata
     glass from sampling the sibling hero photograph. */
  will-change: auto;
}
.ew-header.is-engine .hdr-hero-meta {
  will-change: top, bottom;
}

/* The frosted bar is a positioned layer ABOVE the stage. Starts fully below
   the bottom edge and rises into view (no fade). */
.ew-header.is-engine .ew-header__frostbar {
  display: block;
  position: absolute;
  left: 0; right: 0;
  bottom: 0;                          /* park point: bottom of viewport */
  transform: translateY(100%);        /* start just off the bottom edge */
  z-index: 2;                         /* over the stage */
}

/* ---- STATE 1: landing. Stage at rest, frosted bar hidden below. ------- */
/* (No transforms needed; natural static layout.) */

/* ---- STATE 2: top bar + tagline gone; meta centred; values grown;
        frosted bar settled at the bottom; stage/image stays put. -------- */
.ew-header.is-state-2 .ew-header__topbar {
  transform: translateY(-100%);     /* moves up and out, no fade (header solid) */
}
.ew-header.is-state-2 .hdr-hero-mid {
  transform: translateY(-60%);      /* tagline fades off with a small move */
  opacity: 0;
}
/* Metadata rises to the vertical centre of the space ABOVE the frosted bar
   (between the top of the page and the top of the bar), not the full
   viewport centre. Shift up by half the bar height accordingly. */
.ew-header.is-state-2 .hdr-hero-meta {
  top: calc(
    -50vh
    + (var(--hdr-block-h) / 2)
    + var(--hdr-pad)
    - ((var(--frost-block-h) + (2 * var(--frost-pad))) / 2)
  );
}
/* Value line grows bold_body -> default_title; label unchanged. */
.ew-header.is-state-2 .hdr-meta__value {
  --meta-wght: var(--default-title-wght);
  --meta-wdth: var(--default-title-wdth);
  font-size: var(--default-title-size);
  line-height: var(--default-title-lh);
}
/* Frosted bar settles into view at the bottom (over the stage). */
.ew-header.is-state-2 .ew-header__frostbar {
  transform: translateY(0);
}

/* ---- STATE 3: the WHOLE stage (image + hero + white fill) translates up
        as one unit, revealing the body beneath. The frosted bar rises to
        the top and turns solid white. ----------------------------------- */
.ew-header.is-state-3 .ew-header__stage {
  transform: translateY(-100vh);      /* entire scene leaves upward together */
}
/* Keep the top bar moved out as the stage moves (it left in State 2). */
.ew-header.is-state-3 .ew-header__topbar {
  transform: translateY(-100%);
}
.ew-header.is-state-3 .hdr-hero-mid {
  transform: translateY(-60%);
  opacity: 0;
}
/* Metadata: keep it where State 2 had it as the stage rises (carried off by
   the stage's own -100vh). Same transform as State 2. */
.ew-header.is-state-3 .hdr-hero-meta {
  top: calc(
    -50vh
    + (var(--hdr-block-h) / 2)
    + var(--hdr-pad)
    - ((var(--frost-block-h) + (2 * var(--frost-pad))) / 2)
  );
}
.ew-header.is-state-3 .hdr-meta__value {
  --meta-wght: var(--default-title-wght);
  --meta-wdth: var(--default-title-wdth);
  font-size: var(--default-title-size);
  line-height: var(--default-title-lh);
}
/* Frosted bar travels up to the top (transform-only, so it tweens) and
   becomes a solid white bar. */
.ew-header.is-state-3 .ew-header__frostbar {
  transform: translateY(calc(-100vh + var(--frost-block-h) + (2 * var(--frost-pad))));
  background: transparent;             /* no fill; content scrolls behind */
  border-color: transparent;          /* no stroke in State 3/4 */
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
.ew-header.is-state-3 .ew-header__frostbar .hdr-strap,
.ew-header.is-state-3 .ew-header__frostbar .hdr-cta {
  color: var(--text-on-light);
}
/* Logo + wordmark: white on frost -> EW Grey as the bar turns solid white. */
.ew-header.is-state-3 .ew-header__frostbar .hdr-logo__svgwrap,
.ew-header.is-state-3 .ew-header__frostbar .hdr-wordmark__svgwrap {
  color: var(--c1);
}

/* ---- RELEASED: hand off to native scroll. The frosted bar stays pinned
        at the top exactly where the State 3 transform left it; the stage
        is off-screen above. No flicker: the released position is identical
        to the transformed one, and transitions are suppressed during the
        instantaneous class swap (via .is-snapping). ---------------------- */
.ew-header.is-released {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: auto;
  overflow: visible;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.ew-header.is-released .ew-header__stage {
  /* Keep the composited hero scene alive off-screen. Recreating it from
     display:none during reverse entry caused a small visual hitch. */
  transform: translateY(-100vh);
  visibility: hidden;
  pointer-events: none;
}
.ew-header.is-released .ew-header__frostbar {
  position: absolute;
  top: 0; bottom: auto;
  left: 0; right: 0;
  transform: none;                     /* identical to where State 3 ended */
  opacity: 1;
  background: transparent;             /* no fill; content scrolls behind */
  border-color: transparent;          /* no stroke in State 3/4 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.ew-header.is-released .ew-header__frostbar .hdr-strap,
.ew-header.is-released .ew-header__frostbar .hdr-cta {
  color: var(--text-on-light);
}
.ew-header.is-released .ew-header__frostbar .hdr-logo__svgwrap,
.ew-header.is-released .ew-header__frostbar .hdr-wordmark__svgwrap {
  color: var(--c1);
}

/* Snapping helper: kill all transitions for one frame during a class swap
   so the released<->state-3 handoff never animates or flickers. */
.ew-header.is-snapping,
.ew-header.is-snapping * {
  transition: none !important;
}

/* Reversing 3 -> 1 in one fluid movement: double the duration so the longer
   travel takes proportionally longer. Overriding --dur cascades into every
   transition/animation that references it on the header and the body. */
.ew-header.is-reversing {
  --dur: var(--dur-reverse);
}

/* Body content moves up in lockstep with the menu bar as it travels from the
   bottom of the viewport to the top (the 2->3 transition). It starts just
   below the bar's bottom-of-screen position and rises to rest below the bar
   at the top, so the menu feels attached to the top of the page content.
   No fade. The distance equals the bar's travel: (100vh - barHeight). */
#scaffold,
main {
  transition: transform var(--dur) var(--ease);
}
body.is-revealing #scaffold,
body.is-revealing main {
  animation: ew-body-rise var(--dur) var(--ease) forwards;
}
@keyframes ew-body-rise {
  from {
    transform: translateY(calc(
      100vh - (var(--frost-block-h) + (2 * var(--frost-pad)))
    ));
  }
  to { transform: translateY(0); }
}
/* Reverse: body moves back DOWN with the bar (mirror of the rise), at the
   doubled reverse duration when going 3 -> 1 in one fluid movement. */
body.is-reversing #scaffold,
body.is-reversing main {
  animation: ew-body-sink var(--dur-reverse) var(--ease) forwards;
}
@keyframes ew-body-sink {
  from { transform: translateY(0); }
  to {
    transform: translateY(calc(
      100vh - (var(--frost-block-h) + (2 * var(--frost-pad)))
    ));
  }
}

/* =====================================================================
   Reduced motion: no choreography. Land straight in the State 3 layout —
   a solid white top bar, normal scroll.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .ew-header.is-engine,
  .ew-header.is-engine * {
    transition: none !important;
  }
}

/* =====================================================================
   RESPONSIVE — Mobile hero (≤820px)
   At ≤820px the 3-stage engine is bypassed. header-engine.js applies
   is-released immediately and uses IntersectionObserver to toggle
   is-scrolled-past when the hero stage exits the viewport.

   - Header is position:static — stage scrolls naturally (no hijacking).
   - Topbar is hidden — frostbar IS the nav on mobile.
   - Frostbar is position:fixed in the root stacking context at z-100.
     No parent stacking context = no N1-class invisibility bug possible.
   - Frostbar starts transparent over the hero, transitions to white via
     is-scrolled-past once the hero has scrolled fully offscreen.
   ===================================================================== */
@media (max-width: 820px) { /* --bp-soft */
  /* First body section sits flush against the hero with no gap (the section-gap
     system only fires on .module + .module, not before the first one).
     Add the same gap as between sections so it feels consistent. */
  .ew-header.is-released ~ .body-flow {
    padding-top: var(--section-gap);
  }

  /* Header flows in document — hero stage scrolls naturally */
  .ew-header.is-released {
    position: static;
    height: auto;
    overflow: visible;
    background: transparent;
    pointer-events: auto;
  }
  /* Stage stays visible — no translateY off-screen.
     position:relative makes it the positioning context for the absolute bg. */
  .ew-header.is-released .ew-header__stage {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    position: relative;
  }
  /* Hero fills full viewport — topbar is no longer in the nav.
     This sets the stage's flow height so the absolute bg can fill it. */
  .ew-header.is-released .ew-header__hero {
    height: 100svh;
  }
  /* Background fills the stage — matches is-engine behaviour without the engine */
  .ew-header.is-released .ew-header__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }
  /* Topbar is redundant — frostbar IS the always-visible mobile nav */
  .ew-header.is-released .ew-header__topbar {
    display: none;
  }
  /* Frostbar layout: compact mobile row, horizontal logo, hide desktop icon */
  .ew-header.is-released .ew-header__frostbar .hdr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
  }
  .ew-header.is-released .ew-header__frostbar .hdr-block[aria-hidden="true"] { display: none; }
  .ew-header.is-released .ew-header__frostbar .hdr-logo__svgwrap:not(.hdr-logo__svgwrap--mobile) {
    display: none;
  }
  .ew-header.is-released .ew-header__frostbar .hdr-logo__svgwrap.hdr-logo__svgwrap--mobile {
    display: block;
    height: 32px;
  }

  /* Frostbar: fixed white nav bar — always visible from page load.
     display:block overrides the base display:none (normally revealed by is-engine).
     padding + min-height:0 match the interior page header compact sizing. */
  .ew-header.is-released .ew-header__frostbar {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 100;
    pointer-events: auto;
    transform: none;
    opacity: 1;
    background: var(--c6);
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 14px var(--page-margin);
  }
  .ew-header.is-released .ew-header__frostbar .hdr-block {
    min-height: 0;
  }
  /* Dark logo and buttons on white bar */
  .ew-header.is-released .ew-header__frostbar .hdr-logo__svgwrap,
  .ew-header.is-released .ew-header__frostbar .hdr-wordmark__svgwrap {
    color: var(--c1);
  }
  .ew-header.is-released .ew-header__frostbar .btn--outline {
    color: var(--c1);
    border-color: var(--c1);
  }
  .ew-header.is-released .ew-header__frostbar .btn--filled {
    background: var(--c1);
    border-color: var(--c1);
    color: var(--c6);
  }
}

/* =====================================================================
   RESPONSIVE — Round 1  (header / hero)
   Sizes the static bars + hero for small screens.
   ===================================================================== */
@media (max-width: 600px) {
  :root {
    --hdr-pad: 20px;
    --hdr-block-h: 46px;
    --frost-pad: 14px;
    --mobile-frostbar-h: calc(var(--frost-block-h) + (2 * var(--frost-pad)));
    --mobile-meta-stage1-h: 160px;
    --mobile-meta-stage2-h: 255px;
  }

  /* ---- Top white bar: logo left, buttons right; drop spacer + strap ---- */
  .ew-header__topbar { padding: 20px var(--page-margin); }
  .ew-header__topbar .hdr-row {
    display: flex; align-items: center; justify-content: space-between; column-gap: 16px;
  }
  .ew-header__topbar .hdr-block { min-height: 0; }
  .ew-header__topbar .hdr-strap,
  .ew-header__topbar .hdr-block[aria-hidden="true"] { display: none; }
  /* Hide desktop icon logo; show mobile horizontal logo */
  .ew-header__topbar .hdr-logo__svgwrap--top { display: none; }
  .hdr-logo__svgwrap.hdr-logo__svgwrap--mobile { display: block; height: 36px; }
  .ew-header__topbar .hdr-logo__svgwrap.hdr-logo__svgwrap--mobile { color: var(--c1); }
  .hdr-cta__group { gap: 10px; }
  .hdr-cta__group .btn--filled { display: none; }

  /* ---- Frosted bar (scroll states): same compaction ---- */
  .ew-header__frostbar { padding: 14px var(--page-margin); }
  .ew-header__frostbar .hdr-row {
    display: flex; align-items: center; justify-content: space-between;
  }
  .ew-header__frostbar .hdr-block[aria-hidden="true"] { display: none; }
  /* Hide desktop icon logo in frostbar; mobile logo inherits from topbar rule above */
  .ew-header__frostbar .hdr-logo__svgwrap:not(.hdr-logo__svgwrap--mobile) { display: none; }
  .ew-header__frostbar .hdr-logo__svgwrap.hdr-logo__svgwrap--mobile { height: 32px; }

  /* ---- Hero: left-aligned headline centred in the space above the bottom
     metadata stack. Desktop geometry is untouched above this breakpoint. ---- */
  .ew-header__hero,
  .ew-header.is-engine .ew-header__hero {
    height: calc(100svh - (var(--hdr-block-h) + (2 * var(--hdr-pad))));
    padding: 0 var(--page-margin);
  }

  .hdr-hero-mid {
    position: absolute;
    top: 0;
    right: var(--page-margin);
    bottom: calc(var(--page-margin) + var(--mobile-meta-stage1-h));
    left: var(--page-margin);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
  .hdr-hero-mid__block {
    align-items: flex-start;
    justify-content: center;
    width: 100%;
  }
  .hdr-hero-mid__block[aria-hidden="true"] { display: none; }
  .hdr-tagline { text-align: left; }

  .hdr-hero-meta {
    position: absolute;
    left: var(--page-margin);
    right: var(--page-margin);
    width: auto;                       /* let left/right set the width (.hdr-row's 100% overflowed by one margin) */
    bottom: var(--page-margin);
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transform: none;
  }
  .hdr-hero-meta .hdr-block {
    min-height: 0;
    flex: 0 0 auto;
  }
  .hdr-hero-meta .hdr-block[aria-hidden="true"] { display: none; }
}

@media (max-width: 481px) {
  :root {
    --hdr-block-h: 40px;
  }

  .hdr-logo__svgwrap.hdr-logo__svgwrap--mobile { height: 32px; }
  .hdr-cta__group { flex-wrap: nowrap; justify-content: flex-end; }
}