/* ── self-hosted fonts (no third-party CDN; satisfies CSP font-src 'self') ── */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-italic-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-italic-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-text-400-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-text-400-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-text-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-text-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golos-text-500-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golos-text-500-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golos-text-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golos-text-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-text-600-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-text-600-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-text-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-text-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-text-700-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-text-700-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-text-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-text-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ─────────────────────────────────────────────────────────
   Every dimension below is expressed in `u` — one pixel of
   the reference mockup measured at 1024px wide. The page is
   therefore a 1:1 mirror of the mockup at 1024 and scales
   proportionally above it.
   ───────────────────────────────────────────────────────── */
:root{
  /* One continuous fluid unit across every viewport: no breakpoint where
     type jumps or shrinks. Tuned so body text reads ~15px on a small phone,
     16px on a laptop and 18px on a large desktop. */
  --u:clamp(1.25px,calc(0.0272vw + 1.043px),1.78px);
  --teal:#01313B;
  --teal-2:#0B4655;
  --band:#0B2A2B;
  --gold:#C9A466;
  /* used for small caps labels, so it must clear 4.5:1, not 3:1. */
  --gold-d:#8A6E33;
  --ink:#0F3A4C;
  --ink-2:#1B3D4D;
  --body:#4A5B62;
  /* #7C8B92 measured 3.52:1 on white — below AA for small text. */
  --muted:#66747A;
  --cream:#FAF8F4;
  --line:#E6E2DA;
  /* ── semantic tokens ────────────────────────────────────────────────
     Everything that changes between light and dark goes through these.
     A literal colour left in a rule is a rule that cannot switch, so the
     surfaces below are deliberately named by role, not by hue. */
  --page:#FFFFFF;        /* page background            */
  --surface:#FFFFFF;     /* cards, panels, menus       */
  --surface-2:#F7F9FA;   /* section gradient end       */
  --surface-3:#FBFAF8;   /* news band                  */
  --surface-4:#F7F6F3;   /* news band, gradient end    */
  --tint:#F1EEE9;        /* tile circles               */
  --promo:#F1EDE7;       /* promo block                */
  --logo:#074D59;
  --logo-sub:#3E6971;
  --nav-ink:#2C444F;
  --shadow-s:var(--shadow-s);
  --shadow-m:var(--shadow-m);
  --shadow-l:var(--shadow-l);
  --hero-veil:248,249,249;  /* hero scrim, as r,g,b   */
  --hero-ink:#09323C;
  --hero-ink-2:#33545F;
  --hero-eyebrow:#0C3947;
  --eyebrow-ink:#0B4655;   /* section eyebrows            */
  --link-ink:#01313B;      /* inline links e.g. mailto    */
  /* Clears 4.5:1, not just 3:1 — the numerals carry a small "yr" suffix
     that is below the large-text threshold. */
  --watermark:#7E7155;
  --thead-ink:#0F3A4C;
  /* Icon paint. Kept separate from --teal: --teal is a *surface* colour in
     dark mode (#07222A) and painting 1.6px strokes with it makes every icon
     vanish into the card behind it. --mark is the logo's outer ring; --mark-c
     is the small disc at its centre, which must match the masthead surface. */
  --icon:#01313B;
  --mark:#0B6070;
  --mark-c:#FFFFFF;
  --ecg-base:rgba(11,70,85,.14);
  --ff:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --fd:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(78*var(--u))}
body{margin:0;font-family:var(--ff);color:var(--body);background:var(--page);
  font-size:calc(11.5*var(--u));line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
svg{max-width:100%}
:focus-visible{outline:calc(2*var(--u)) solid var(--gold);outline-offset:calc(2*var(--u))}
.w{width:min(95vw,calc(950*var(--u)));margin:0 auto}

/* ══ 1 · utility bar — 24u ══ */
.util{background:var(--teal);color:rgba(255,255,255,.82);font-size:calc(9*var(--u));letter-spacing:.04em}
/* 28u, not 24u: the row has to contain the search pill (24u) with clear
   space above and below it. At 24u the pill overhung the bar on both
   edges at every width and its border was clipped by the section edge. */
.util .in{min-height:calc(28*var(--u));display:flex;align-items:center;flex-wrap:wrap;
  gap:calc(4*var(--u)) calc(14*var(--u))}
.util .vals{display:flex;align-items:center;gap:calc(14*var(--u))}
.util .vals span{position:relative}
.util .vals span+span::before{content:"|";position:absolute;left:calc(-9*var(--u));opacity:.4}
.util .rt{margin-left:auto;display:flex;align-items:center;gap:calc(22*var(--u))}
.util .rt i{font-style:normal;display:inline-flex;align-items:center;gap:calc(5*var(--u));white-space:nowrap}
.util svg{width:calc(11*var(--u));height:calc(11*var(--u));stroke:currentColor;fill:none;stroke-width:1.7}

/* ══ 2 · masthead — 73u ══ */
.mast{background:var(--surface);position:sticky;top:0;z-index:70}

/* ── home: transparent header over the hero, solid on scroll ───────────
   Both bars are fixed so the video starts at pixel zero and runs behind
   them. At scroll-top they carry no panel of their own — just a gradient
   scrim and a blur — and every label switches to white. Past the first
   40px they take their normal surfaces back.
   The scrim is not decoration. The reference site can sit on an 8% tint
   because its hero is a night skyline; this render is bright daylight, so
   white text over it needs real darkening to stay legible. The gradient is
   strongest at the very top, where the type sits, and gone by the bottom
   edge so it never reads as a bar. */
/* The overlay header is a WIDE-screen treatment only. On a phone the search
   pill wraps to full width and the header grows to ~250px — overlaid, it
   swallowed most of the banner. Narrow screens keep the ordinary solid bar
   in normal flow, so the video gets the whole banner to itself. */
@media (min-aspect-ratio:3/2){
  body.home .util,body.home .mast{position:fixed;left:0;right:0;
    transition:background .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease)}
  body.home .util{top:0;z-index:81}
  body.home .mast{top:var(--util-h,44px);z-index:80}

  /* --- transparent state (scroll-top) --- */
  body.home:not(.nav-in) .util,
  body.home:not(.nav-in) .mast{background:transparent;box-shadow:none}
  /* The scrim runs to 1.5x the header height so it is still near full strength
     behind the wordmark — which sits at the BOTTOM of the bars, the point the
     first version under-darkened — and only fades out well below them.
     It hangs off .mast, NOT .util: .util has the higher z-index, so a pseudo
     element inside it painted over the whole masthead and blanked the logo,
     the nav and the button. On .mast it sits below that bar's own content and
     still under .util, which is exactly where a scrim belongs. */
  body.home:not(.nav-in) .mast::before{content:"";position:fixed;left:0;right:0;top:0;
    height:calc(var(--hdr-h,160px) * 1.5);pointer-events:none;z-index:-1;
    background:linear-gradient(180deg,rgba(3,19,25,.80) 0%,rgba(3,19,25,.76) 34%,
      rgba(3,19,25,.66) 58%,rgba(3,19,25,.40) 78%,rgba(3,19,25,.12) 92%,rgba(3,19,25,0) 100%);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  body.home:not(.nav-in) .util{color:rgba(255,255,255,.94)}
  body.home:not(.nav-in) .logo b,
  body.home:not(.nav-in) .logo em{color:#fff}
  body.home:not(.nav-in) .logo i{color:rgba(255,255,255,.97)}
  body.home:not(.nav-in) .logo .mk{--mark:#FFFFFF;--mark-c:transparent}
  body.home:not(.nav-in) nav.main a{color:#fff}
  body.home:not(.nav-in) nav.main a:hover{color:var(--gold)}
  body.home:not(.nav-in) .burg{color:#fff}
  body.home:not(.nav-in) .thm,
  body.home:not(.nav-in) .sbtn{color:#fff;border-color:rgba(255,255,255,.55)}
  body.home:not(.nav-in) .thm svg,
  body.home:not(.nav-in) .sbtn svg{stroke:#fff}

  /* --- solid state (scrolled) --- */
  body.home.nav-in .mast{box-shadow:0 calc(4*var(--u)) calc(30*var(--u)) rgba(9,40,50,.10)}
}

@media (prefers-reduced-motion:reduce){
  body.home .util,body.home .mast{transition:none}
}

.mast .in{height:calc(73*var(--u));display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:calc(12*var(--u))}
.logo .mk{width:calc(56*var(--u));height:calc(56*var(--u));flex:none}
.logo b{display:block;font-size:calc(19*var(--u));font-weight:700;letter-spacing:.055em;color:var(--logo);line-height:1.06}
.logo em{display:block;font-style:normal;font-size:calc(9.6*var(--u));font-weight:500;letter-spacing:.1em;color:var(--logo);line-height:1.3}
.logo i{display:block;font-style:italic;font-family:var(--fd);font-size:calc(12*var(--u));color:var(--logo-sub);margin-top:calc(2*var(--u))}
nav.main{margin-left:auto;display:flex;align-items:center;gap:calc(22*var(--u))}
nav.main a{position:relative;font-size:calc(11*var(--u));font-weight:500;color:var(--nav-ink);
  padding-block:calc(8*var(--u));transition:color .3s}
nav.main a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:calc(2*var(--u));
  background:var(--gold);transition:left .4s var(--ease),right .4s var(--ease)}
nav.main a:hover{color:var(--gold-d)}
nav.main a:hover::after,nav.main a.on::after{left:calc(2*var(--u));right:calc(2*var(--u))}
.cta{margin-left:calc(30*var(--u));display:inline-flex;align-items:center;gap:calc(9*var(--u));flex:none;
  height:calc(32*var(--u));padding-inline:calc(20*var(--u));border-radius:999px;background:var(--gold);
  color:#23180B;font-size:calc(11*var(--u));font-weight:600;transition:background .35s,color .35s}
.cta:hover{background:var(--gold-d);color:#fff}
.cta .ic{transition:transform .4s var(--ease)}
.cta:hover .ic{transform:translateX(calc(4*var(--u)))}
.burg{display:none;margin-left:auto;background:none;border:0;cursor:pointer;color:var(--teal);font-size:calc(20*var(--u));padding:calc(6*var(--u))}

/* ══ 3 · hero — 401u ══ */
.hero{position:relative;height:calc(401*var(--u));overflow:hidden;background:var(--teal)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 52%}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(101deg,rgba(var(--hero-veil),.975) 0%,rgba(var(--hero-veil),.95) 30%,rgba(var(--hero-veil),.88) 44%,
                          rgba(var(--hero-veil),.42) 57%,rgba(var(--hero-veil),.10) 66%,rgba(var(--hero-veil),0) 74%)}
.hero .w{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-left:calc(18*var(--u))}

/* ── hero video ─────────────────────────────────────────────────────────
   The clip is 1920x882 (2.18:1). The poster carries the same frame, so the
   two are interchangeable and nothing shifts when the video fades in.
   The video is layered OVER the poster and only becomes visible once it is
   genuinely playing — that way a blocked autoplay, a slow network or a
   refused download all degrade to a still image rather than a black box. */
/* Hero sizing is decided by the viewport's ASPECT RATIO, not its width —
   width alone put a 768px tablet in the widescreen case.

   The clip is 16:9, which matches screen shape closely, so it simply COVERS
   the hero at every size. The earlier contain-plus-blurred-fill treatment
   existed only because the previous clip was 2.18:1 and cover would have
   thrown away a quarter of its width; with a 16:9 source that workaround is
   dead weight and it is gone.

   Wide viewports (3/2 and wider): the hero is exactly one screen, so nothing
   below it can peek above the fold. 100dvh not 100vh — mobile browsers shrink
   the viewport as their chrome retracts, and 100vh leaves a gap.

   Squarer viewports: the hero stops trying to be a whole screen and becomes a
   banner, because a full-height hero there would crop the frame too hard. */
.hero.vid{height:56dvh;min-height:calc(230*var(--u));max-height:560px}
.hero.vid .bg,.hero.vid .vmedia{object-fit:cover;object-position:50% 46%;z-index:2}
.hero.vid .vmedia{z-index:3}
.hero.vid::after{z-index:4}

@media (min-aspect-ratio:3/2){
  .hero.vid{height:100vh;height:100dvh;max-height:none;min-height:calc(380*var(--u))}
  .hero.vid .bg,.hero.vid .vmedia{object-position:50% 50%}
}
/* The old hero scrim was a hard angled veil built to carry a headline over
   the render. With the headline gone it only hides the building, so the
   video hero replaces it with a soft base gradient: enough to seat the
   stats card and separate the button, nothing more. The button carries its
   own solid background (5.98:1), so no scrim is needed for contrast. */
.hero.vid::after{background:linear-gradient(0deg,
  rgba(6,30,37,.52) 0%, rgba(6,30,37,.24) 22%, rgba(6,30,37,.06) 40%, rgba(6,30,37,0) 58%)}
.hero .vmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;z-index:2;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero.playing .vmedia{opacity:1}
/* Text sits above the video; the scrim already sits at z-index 2 via ::after,
   so lift both it and the content clear of the media layer. */
.hero.vid::after{z-index:3}

/* Pause control. WCAG 2.2.2 (Level A) requires a way to stop anything that
   moves automatically for more than five seconds. The loop is 5.96s, so this
   is mandatory, not decorative. */
.vpp{position:absolute;right:calc(26*var(--u));bottom:calc(58*var(--u));z-index:6;opacity:0;transition:opacity .35s,background .3s,border-color .3s;
  width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(8,32,39,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:grid;place-items:center;transition:background .3s,border-color .3s}
.hero:hover .vpp,.vpp:focus-visible{opacity:1}
.vpp:hover{background:rgba(8,32,39,.66);border-color:rgba(255,255,255,.8)}
.vpp:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vpp svg{grid-area:1/1;width:calc(11*var(--u));height:calc(11*var(--u));fill:#fff}
.vpp .vp-play{display:none}
.hero.paused .vpp .vp-play{display:block}
.hero.paused .vpp .vp-pause{display:none}

/* Phones now get the clip too (a smaller encode -- see site.js), so the pause
   control has to be reachable there. A touch device has no hover, so the
   reveal-on-hover rule above would leave WCAG 2.2.2 with no mechanism at all:
   show it permanently wherever hover is not available. */
@media (hover:none),(pointer:coarse){
  .vpp{opacity:1}
}
@media (max-width:760px){
  .vpp{right:calc(14*var(--u));bottom:calc(14*var(--u));
    width:calc(34*var(--u));height:calc(34*var(--u))}
}

@media (prefers-reduced-motion:reduce){
  .hero .vmedia{display:none}
  .vpp{display:none}
}
.hero .eyebrow{font-size:calc(9.5*var(--u));font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--hero-eyebrow);margin:0 0 calc(16*var(--u))}
.rot{display:grid;margin:0 0 calc(17*var(--u))}
.rot .ln{grid-area:1/1;align-self:center;margin:0;font-family:var(--fd);font-weight:500;
  font-size:calc(46*var(--u));line-height:1.135;letter-spacing:.002em;color:var(--hero-ink);max-width:calc(482*var(--u));
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.rot .ln.on{opacity:1;pointer-events:auto}
.rot .wd{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(calc(6*var(--u)));
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.rot .ln.on .wd{opacity:1;transform:none;filter:blur(0);transition-delay:calc(var(--i)*.07s)}
.hero .sub{margin:0 0 calc(20*var(--u));font-size:calc(11*var(--u));line-height:1.6;color:var(--hero-ink-2);max-width:calc(355*var(--u))}
.hero .btns{display:flex;gap:calc(22*var(--u))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(9*var(--u));
  height:calc(35*var(--u));padding-inline:calc(20*var(--u));border-radius:999px;
  font-size:calc(11*var(--u));font-weight:600;transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.btn .ic{transition:transform .4s var(--ease)}
.btn:hover .ic{transform:translateX(calc(4*var(--u)))}
.btn.g{background:var(--gold);color:#23180B}
.btn.g:hover{background:var(--gold-d);color:#fff;transform:translateY(calc(-1.5*var(--u)))}
.btn.o{background:rgba(255,255,255,.72);color:var(--ink-2);border:calc(1*var(--u)) solid rgba(15,58,76,.3)}
.btn.o:hover{background:var(--surface);border-color:var(--ink-2);transform:translateY(calc(-1.5*var(--u)))}
/* ══ 4 · figures card — 101u, overlaps hero by 21u ══ */
.stats{position:relative;z-index:6;margin-top:calc(-21*var(--u))}
/* The video hero earns its full frame: the card only just overlaps it, so the
   roads and the moving traffic along the bottom edge stay visible. */
.hero.vid+.stats{margin-top:calc(20*var(--u))}
.stats .card{background:var(--cream);border-radius:calc(9*var(--u));
  box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) var(--shadow-m);
  height:calc(101*var(--u));display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stats .s{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding-inline:calc(10*var(--u))}
.stats .s+.s::before{content:"";position:absolute;left:0;top:calc(24*var(--u));bottom:calc(24*var(--u));
  width:1px;background:var(--line)}
.stats .s svg{width:calc(22*var(--u));height:calc(22*var(--u));stroke:var(--icon);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:calc(9*var(--u))}
.stats .v{font-size:calc(19*var(--u));font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.stats .v i{font-style:normal;font-size:.62em;color:var(--gold-d);margin-left:calc(1*var(--u))}
.stats .v.sm{font-size:calc(13*var(--u));text-align:center;line-height:1.25}
.stats .k{font-size:calc(9.5*var(--u));color:var(--muted);margin-top:calc(6*var(--u));text-align:center}

/* ══ 5 · quick tiles + promo — 162u ══ */
.quick{padding-top:calc(6*var(--u));padding-bottom:calc(8*var(--u))}
.quick .in{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:calc(24*var(--u));align-items:start}
.tiles{padding-top:calc(26*var(--u))}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:calc(6*var(--u))}
.tile{text-align:center}
.tile .cr{width:calc(44*var(--u));height:calc(44*var(--u));margin:0 auto calc(12*var(--u));border-radius:50%;
  background:var(--tint);display:grid;place-items:center;transition:background .4s var(--ease),transform .4s var(--ease)}
.tile .cr svg{width:calc(22*var(--u));height:calc(22*var(--u));stroke:var(--icon);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.tile:hover .cr{background:var(--teal);transform:translateY(calc(-3*var(--u)))}
.tile:hover .cr svg{stroke:var(--gold)}
.tile b{display:block;font-size:calc(9.5*var(--u));font-weight:600;color:var(--ink);line-height:1.35}
.promo{position:relative;height:calc(148*var(--u));border-radius:calc(8*var(--u));overflow:hidden;background:var(--promo);
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr)}
.promo .tx{padding:calc(14*var(--u)) calc(6*var(--u)) calc(14*var(--u)) calc(20*var(--u));position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center}
.promo h3{margin:0 0 calc(7*var(--u));font-family:var(--fd);font-weight:500;font-size:calc(17*var(--u));
  line-height:1.16;color:var(--ink)}
.promo p{margin:0 0 calc(11*var(--u));font-size:calc(9*var(--u));line-height:1.5;color:var(--body)}
.promo .play{display:inline-flex;align-items:center;gap:calc(9*var(--u));font-size:calc(9.5*var(--u));font-weight:600;color:var(--ink)}
.promo .play i{width:calc(25*var(--u));height:calc(25*var(--u));border-radius:50%;background:var(--teal);color:var(--gold);
  display:grid;place-items:center;font-style:normal;font-size:calc(9*var(--u));padding-left:calc(2*var(--u));
  transition:transform .4s var(--ease)}
.promo:hover .play i{transform:scale(1.1)}
.promo .ph{position:relative}
.promo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 44%}
.promo .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--promo) 0%,rgba(241,237,231,.4) 40%,transparent 76%)}

/* ══ 6 · services — 221u ══ */
.svc{padding-block:calc(12*var(--u)) calc(26*var(--u));background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
.svc .in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:calc(26*var(--u));align-items:start}
.eyebrow{font-size:calc(9.5*var(--u));font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--eyebrow-ink);margin:0 0 calc(12*var(--u))}
h2.tt{margin:0 0 calc(14*var(--u));font-family:var(--fd);font-weight:500;font-size:calc(30*var(--u));
  line-height:1.16;color:var(--ink)}
p.body{margin:0 0 calc(16*var(--u));font-size:calc(11*var(--u));line-height:1.62;color:var(--body)}
.lnk{display:inline-flex;align-items:center;gap:calc(7*var(--u));font-size:calc(9.5*var(--u));font-weight:600;
  color:var(--ink);padding-bottom:calc(4*var(--u));border-bottom:calc(1.4*var(--u)) solid var(--gold);
  transition:color .35s,gap .35s var(--ease)}
.lnk:hover{color:var(--gold-d);gap:calc(12*var(--u))}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(9*var(--u))}
.cards4 .imgnote{grid-column:1/-1;margin:calc(7*var(--u)) 0 0;font-size:calc(9.5*var(--u));line-height:1.5;color:var(--muted);letter-spacing:.01em}
.c4{min-height:calc(183*var(--u));background:var(--surface);border-radius:calc(6*var(--u));overflow:hidden;box-shadow:0 calc(2*var(--u)) calc(9*var(--u)) var(--shadow-s);
  display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s}
.c4:hover{transform:translateY(calc(-4*var(--u)));box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) var(--shadow-m)}
/* flex:none is load-bearing. .c4 is a flex column with a fixed height, so
   without it the image box SHRINKS to make room for the caption — by a
   different amount per card, since the captions differ in length. The four
   images were rendering at 114/133/152/112px instead of a uniform height. */
.c4 .ph{height:calc(110*var(--u));flex:none;overflow:hidden;background:var(--teal)}
.c4 .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.c4:hover .ph img{transform:scale(1.06)}
.c4 .bd{padding:calc(9*var(--u)) calc(11*var(--u)) calc(11*var(--u));display:flex;flex-direction:column;flex:1}
.c4 h4{margin:0 0 calc(4*var(--u));font-size:calc(11*var(--u));font-weight:700;color:var(--ink);line-height:1.25}
.c4 p{margin:0 0 calc(8*var(--u));font-size:calc(9*var(--u));line-height:1.45;color:var(--muted)}
.c4 .lnk{margin-top:auto;align-self:flex-start;font-size:calc(9*var(--u));padding-bottom:calc(3*var(--u))}

/* ══ 7 · heritage band ══════════════════════════════════════════════════
   Rebuilt from the supplied composite. The photograph is cropped to its
   right-hand portion and the teal panel plus every line of type is live
   HTML, so the copy stays editable, selectable, translatable and legible
   at any width — none of which a flattened image can do.
   Reference geometry, measured at 2172x724:
     left margin 130 (5.99%) · eyebrow y99 · title y151 · body y322
     stats y435 · button y551
   ══════════════════════════════════════════════════════════════════════ */
/* aspect-ratio alone. Pairing it with min-height was a trap: at 1024px the
   min-height raised the box to 396px, and the 3:1 ratio then forced the
   WIDTH to 1189px — 165px wider than the viewport. With min-height:auto
   (the default) content taller than the ratio grows the box downward
   instead, which is what we want. */
.band{position:relative;overflow:hidden;background:#012D31;aspect-ratio:2172/724}
@media (max-width:1100px){ .band{aspect-ratio:auto} }
.band .bg{position:absolute;top:0;right:0;height:100%;width:51.9%;
  object-fit:cover;object-position:50% 50%}
/* The veil that carries the photo back into the panel. Stops are matched to
   the composite so the seam lands inside the archway, not on the tilework. */
.band::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,#012D31 0%,#012D31 43%,rgba(1,45,49,.96) 47%,
    rgba(1,45,49,.70) 50.5%,rgba(1,45,49,.28) 54.5%,rgba(1,45,49,.05) 59%,transparent 64%)}
/* 88% gives a 6% gutter at ANY width, which is what the artwork uses. The
   site container caps at 950u, so on a wide screen it would have pushed the
   text to a 14% margin and broken the composition. */
.band .w{position:relative;z-index:3;height:100%;width:88%;max-width:none;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(26*var(--u))}

.band .beyebrow{display:flex;align-items:center;gap:calc(13*var(--u));
  margin:0 0 calc(23*var(--u));font-size:calc(9.6*var(--u));font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(232,240,238,.82)}
.band .beyebrow i{display:block;width:calc(88*var(--u));height:1px;
  background:rgba(201,164,102,.55)}

.band .btitle{margin:0 0 calc(16.5*var(--u));width:fit-content;max-width:100%;
  font-family:var(--fd);font-weight:500;
  /* The two-column split leaves the title ~42% of the viewport. At 42u it
   outgrew that below ~1400px and ran onto the archway, so the size is
   capped against viewport width as well as the unit scale. */
  font-size:min(calc(42*var(--u)),4vw);line-height:1.07;letter-spacing:.004em;color:#fff}
.band .btitle em{font-style:normal;color:var(--gold);display:block}

.band .bbody{margin:0 0 calc(22*var(--u));font-size:calc(10*var(--u));line-height:1.78;
  color:rgba(233,240,238,.90);max-width:calc(348*var(--u))}

.band .bstats{display:flex;align-items:center;gap:calc(20*var(--u));
  margin:0 0 calc(34*var(--u))}
.band .bs{display:flex;align-items:center;gap:calc(9*var(--u));position:relative}
.band .bs+.bs{padding-left:calc(20*var(--u))}
.band .bs+.bs::before{content:"";position:absolute;left:0;top:calc(3*var(--u));
  bottom:calc(3*var(--u));width:1px;background:rgba(201,164,102,.38)}
.band .bs svg{width:calc(29*var(--u));height:calc(29*var(--u));flex:none;
  fill:none;stroke:var(--gold);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
/* Cormorant defaults to old-style figures, which drop the 0 below the
   baseline and make a stat row look unsteady. The artwork uses lining
   figures, so ask for them explicitly. */
.band .bs b{display:block;font-family:var(--fd);font-size:calc(29*var(--u));
  font-weight:600;line-height:1;color:#fff;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0}
.band .bs i{display:block;font-style:normal;font-size:calc(9.4*var(--u));
  line-height:1.3;margin-top:calc(3*var(--u));color:rgba(228,237,235,.78)}

.band .brow{display:flex;align-items:center;gap:calc(24*var(--u));flex-wrap:wrap}
.band .brow .btn.g{flex:none}
.band .bvals{display:flex;align-items:center;gap:calc(17*var(--u));margin:0;
  padding-left:calc(24*var(--u));position:relative;
  font-size:calc(9*var(--u));font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(228,237,235,.80)}
.band .bvals::before{content:"";position:absolute;left:0;top:calc(-6*var(--u));
  bottom:calc(-6*var(--u));width:1px;background:rgba(255,255,255,.28)}
.band .bvals span{position:relative}
.band .bvals span+span::before{content:"|";position:absolute;left:calc(-11*var(--u));
  opacity:.45}

/* ── narrower: the photo cannot hold its own column, so it becomes a
      backdrop behind the full-width panel ── */
@media (max-width:1100px){
  .band{aspect-ratio:auto;min-height:0}
  .band .bg{width:100%;object-position:72% 50%}
  .band::after{background:linear-gradient(180deg,rgba(1,45,49,.94),rgba(1,45,49,.90)),
    linear-gradient(90deg,#012D31 0%,rgba(1,45,49,.86) 55%,rgba(1,45,49,.78) 100%)}
  .band .w{padding-block:calc(40*var(--u))}
  .band .btitle{font-size:calc(38*var(--u))}
  .band .bbody{max-width:none}
}
@media (max-width:620px){
  .band .btitle{font-size:calc(31*var(--u))}
  .band .bstats{flex-wrap:wrap;gap:calc(12*var(--u)) calc(16*var(--u))}
  .band .bs+.bs{padding-left:calc(16*var(--u))}
  .band .beyebrow i{width:calc(40*var(--u))}
  .band .brow{gap:calc(14*var(--u))}
  .band .bvals{padding-left:0;flex-wrap:wrap;gap:calc(12*var(--u))}
  .band .bvals::before{display:none}
}

/* ── disclosure volumes + link metadata ─────────────────────────────────
   A download link carries its page count and file size. One of these files
   is 139 MB; sending someone into that on a phone with no warning is not
   acceptable on a public disclosure page. */
.dsz{font-size:calc(8.4*var(--u));font-weight:500;letter-spacing:.04em;
  color:var(--muted);margin-left:calc(2*var(--u))}
.lnk .dsz{border-bottom:0}

/* A translation that has not been delivered is NOT a link. It renders as
   plain, non-interactive text so the site never offers a file it cannot
   serve — and screen readers are told so via aria-disabled. */
.lnk.soon{display:inline-flex;align-items:center;gap:calc(7*var(--u));
  font-size:calc(9.5*var(--u));font-weight:600;color:var(--muted);
  padding-bottom:calc(4*var(--u));border-bottom:calc(1.4*var(--u)) dashed var(--line);
  cursor:default}
.lnk.soon .dsz{font-style:italic;color:var(--muted);opacity:.85}
.lnk.soon:hover{color:var(--muted);gap:calc(7*var(--u))}

.vol{margin-top:calc(16*var(--u));padding-left:calc(14*var(--u));
  border-left:calc(2*var(--u)) solid var(--line)}
.vol b{display:block;font-size:calc(10.4*var(--u));font-weight:700;color:var(--ink);
  line-height:1.35;margin-bottom:calc(3*var(--u))}
.vol>span{display:block;font-size:calc(9.6*var(--u));line-height:1.6;color:var(--body);
  margin-bottom:calc(9*var(--u));max-width:calc(520*var(--u))}
.vol .dl{margin-top:0}
@media (max-width:760px){
  .vol{padding-left:calc(11*var(--u))}
  .dsz{display:block;margin-left:0}
}

/* ══ 8 · credentials row — 91u ══ */
.creds{height:calc(91*var(--u));background:var(--surface);display:flex;align-items:center}
.creds .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cred{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(8*var(--u));
  justify-items:center;padding-inline:calc(6*var(--u))}
/* Laurel bracket. Sized to the 26x40 viewBox aspect (0.65) so the wreath
   is never squashed, and set larger than the old 23x30 so the leaves are
   legible rather than reading as a blur at arm's length. */
.cred svg{width:calc(24.6*var(--u));height:calc(52.0*var(--u));color:var(--gold);flex:none}
.cred svg.r{transform:scaleX(-1)}
.cred .tx{text-align:center}
.cred b{display:block;font-size:calc(9.4*var(--u));font-weight:700;letter-spacing:.035em;color:var(--ink);line-height:1.3}
.cred span{display:block;font-size:calc(9.4*var(--u));color:var(--body);line-height:1.4;margin-top:calc(2*var(--u))}

/* ══ 9 · news row — 185u ══ */
.news{height:calc(185*var(--u));background:linear-gradient(180deg,var(--surface-3) 0%,var(--surface-4) 100%);display:flex;align-items:center}
.news .in{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,2fr);gap:calc(11*var(--u));align-items:center}
.news .hd .eyebrow{margin-bottom:calc(9*var(--u))}
.news .hd h2{margin:0 0 calc(14*var(--u));font-family:var(--fd);font-weight:500;font-size:calc(23*var(--u));
  line-height:1.15;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:calc(13*var(--u))}
.arrows{display:flex;gap:calc(8*var(--u))}
.arrows button{width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:calc(11*var(--u));line-height:1;
  transition:background .35s,color .35s,border-color .35s}
.arrows button:hover{background:var(--teal);color:var(--gold);border-color:var(--teal)}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24*var(--u))}
.c3{background:var(--surface);border-radius:calc(6*var(--u));overflow:hidden;box-shadow:0 calc(2*var(--u)) calc(9*var(--u)) var(--shadow-s);
  transition:transform .45s var(--ease),box-shadow .45s}
.c3:hover{transform:translateY(calc(-4*var(--u)));box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) var(--shadow-m)}
.c3 .ph{height:calc(88*var(--u));overflow:hidden;background:var(--teal)}
.c3 .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.c3:hover .ph img{transform:scale(1.05)}
.c3 .bd{padding:calc(10*var(--u)) calc(12*var(--u)) calc(13*var(--u))}
.c3 .dt{display:block;font-size:calc(9*var(--u));color:var(--muted)}
.c3 h4{margin:calc(6*var(--u)) 0 calc(11*var(--u));font-size:calc(11*var(--u));font-weight:600;color:var(--ink);line-height:1.35}
.c3 .lnk{font-size:calc(9*var(--u));padding-bottom:calc(3*var(--u))}

/* ══ 10 · footer — 89u ══ */
footer{height:calc(89*var(--u));background:var(--teal);color:#fff;display:flex;align-items:center}
footer .in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(16*var(--u))}
footer .logo b,footer .logo em{color:#fff}
footer .logo i{color:rgba(255,255,255,.8)}
footer .tag{margin:0;justify-self:center;font-family:var(--fd);font-size:calc(17*var(--u));color:rgba(255,255,255,.95);white-space:nowrap}
footer .soc{justify-self:end;display:flex;align-items:center;gap:calc(12*var(--u))}
footer .soc span{font-size:calc(12.5*var(--u));color:rgba(255,255,255,.92);margin-right:calc(4*var(--u))}
footer .soc svg{width:calc(16*var(--u));height:calc(16*var(--u));fill:#fff;opacity:.94;transition:opacity .3s,transform .3s var(--ease)}
footer .soc a:hover svg{opacity:1;transform:translateY(calc(-2*var(--u)))}
.legal{background:var(--teal);color:rgba(255,255,255,.55);font-size:calc(8.6*var(--u));text-align:center;
  padding-bottom:calc(10*var(--u))}

/* reveal */
.rv{opacity:0;transform:translateY(calc(16*var(--u)));transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.vis{opacity:1;transform:none}

/* ── below the mirror range: stack for usability ── */
/* ══ TABLET — 1200px and below: keep two columns, drop to one only
      where a column would be too narrow to read ══ */
@media (max-width:1200px){
  .w{width:min(94vw,calc(950*var(--u)))}
  .svc .in{grid-template-columns:minmax(0,1fr);gap:calc(20*var(--u))}
  .cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .news .in{grid-template-columns:minmax(0,1fr);gap:calc(18*var(--u))}
  .news .hd{display:flex;align-items:center;gap:calc(20*var(--u));flex-wrap:wrap}
  .news .hd h2{border-bottom:0;padding-bottom:0;margin-bottom:0}
  .news .hd .eyebrow{margin-bottom:0}
  .news,.creds,.band,.phero{height:auto}
  .band .w,.phero .w{padding-block:calc(34*var(--u))}
  .news{padding-block:calc(28*var(--u))}
  .creds{padding-block:calc(22*var(--u))}
  nav.main{gap:calc(15*var(--u))}
  .cta{margin-left:calc(18*var(--u));padding-inline:calc(15*var(--u))}
}

/* ══ SMALL TABLET / LARGE PHONE — 900px and below ══ */
@media (max-width:900px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);flex-direction:column;
    align-items:stretch;gap:0;padding:calc(6*var(--u)) 4vw calc(14*var(--u));
    box-shadow:0 calc(10*var(--u)) calc(22*var(--u)) rgba(15,58,76,.14);z-index:80}
  nav.main.open{display:flex}
  nav.main a{padding-block:calc(13*var(--u));border-bottom:1px solid var(--line)}
  nav.main a::after{display:none}
  .mast .in{position:relative}
  .burg{display:block}
  .cta{display:none}
  .hero{height:auto}
  .hero .w{padding-block:calc(40*var(--u)) calc(54*var(--u));padding-left:0}
  .hero::after{background:linear-gradient(180deg,rgba(247,248,248,.95) 0%,rgba(247,248,248,.86) 55%,rgba(247,248,248,.55) 100%)}
  .rot .ln{font-size:calc(34*var(--u));max-width:100%}
  .stats{margin-top:calc(-14*var(--u))}
  .stats .card{height:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats .s{padding-block:calc(17*var(--u))}
  .stats .s+.s::before{display:none}
  .stats .s:nth-child(n+4){border-top:1px solid var(--line)}
  .quick .in{grid-template-columns:1fr;gap:calc(20*var(--u))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(16*var(--u));padding-top:0}
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c4{height:auto}
  .band .w{padding-left:0}
  .band .stack{position:static;transform:none;text-align:left;margin-top:calc(16*var(--u))}
  .band p{max-width:none}
  .lede,.split,.cgrid,.facts,.struct,.terms,.cards3{grid-template-columns:1fr}
  .split img{height:calc(200*var(--u))}
  .terms .t+.t::before{left:calc(22*var(--u));right:calc(22*var(--u));top:0;bottom:auto;width:auto;height:1px}
  .creds .in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(18*var(--u))}
  .cta-strip .btn{margin-left:0}
  footer .in{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:calc(15*var(--u))}
  footer .tag{white-space:normal;text-align:center}
  footer .soc{justify-self:center}
  .rtab,.rtab tbody,.rtab tr,.rtab td{display:block;width:100%}
  .rtab thead{display:none}
  .rtab td{border-bottom:0;padding-block:calc(4*var(--u))}
  .rtab td:first-child{width:auto}
  .rtab tr{border-bottom:1px solid var(--line);padding-block:calc(12*var(--u))}
}

/* ══ PHONE — 620px and below ══ */
@media (max-width:620px){
  .w{width:92vw}
  .util .in{height:auto;flex-wrap:wrap;padding-block:calc(7*var(--u));row-gap:calc(5*var(--u))}
  .util .vals{flex-wrap:wrap;row-gap:calc(4*var(--u))}
  .util .rt{margin-left:0;gap:calc(13*var(--u));flex-wrap:wrap}
  .rot .ln{font-size:calc(30*var(--u))}
  .phero h1{font-size:calc(28*var(--u))}
  h2.tt{font-size:calc(25*var(--u))}
  .stats .card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .s:nth-child(n+3){border-top:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards4{grid-template-columns:1fr}
  .promo{height:auto;grid-template-columns:1fr}
  .promo .ph{min-height:calc(120*var(--u))}
  .promo .ph::after{background:linear-gradient(0deg,#F1EDE7 0%,transparent 72%)}
  .creds .in{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr;gap:calc(8*var(--u))}
  .doc .dn{font-size:calc(24*var(--u))}
  .dl{gap:calc(14*var(--u))}
  .hero .btns{flex-direction:column;align-items:stretch}
  .cta-strip .in{flex-direction:column;align-items:flex-start}
}

/* ══ TOUCH DEVICES — meet the 44px minimum target ══ */
@media (pointer:coarse){
  .btn,.cta{min-height:44px}
  nav.main a{min-height:44px;display:flex;align-items:center}
  .lnk,.tile,.arrows button{min-height:44px}
  .lnk{align-items:center}
  .tile .cr{width:calc(48*var(--u));height:calc(48*var(--u))}
  .arrows button{width:44px;height:44px}
  footer .soc a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ══ VERY LARGE SCREENS — keep the measure readable ══ */
@media (min-width:2200px){
  .w{width:min(90vw,calc(950*var(--u)))}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .rot .ln,.rot .wd{transition:none!important}
  .rot .ln:first-child,.rot .ln:first-child .wd{opacity:1!important;transform:none;filter:none}
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES
   ══════════════════════════════════════════════════════════ */
/* Page hero. It used a heavy dark scrim with white type while the HOME hero
   used a light scrim with dark type — so in light mode the inner pages read as
   though the site had switched to dark mode. The scrim now follows the theme,
   exactly as the home hero does, and the type colour follows with it. */
.phero{position:relative;height:calc(210*var(--u));overflow:hidden;background:var(--page)}
.phero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.phero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(94deg,rgba(var(--hero-veil),.96) 0%,rgba(var(--hero-veil),.93) 26%,
    rgba(var(--hero-veil),.78) 38%,rgba(var(--hero-veil),.38) 48%,
    rgba(var(--hero-veil),.10) 56%,rgba(var(--hero-veil),0) 64%)}
.phero .w{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-left:calc(11*var(--u))}
.phero .eyebrow{color:var(--hero-eyebrow);margin-bottom:calc(11*var(--u))}
.phero h1{margin:0;font-family:var(--fd);font-weight:500;font-size:calc(40*var(--u));line-height:1.1;
  color:var(--hero-ink);max-width:min(calc(360*var(--u)),46vw);text-wrap:balance}
.crumb{margin:calc(13*var(--u)) 0 0;font-size:calc(9.5*var(--u));color:var(--hero-ink-2)}
.crumb a{border-bottom:1px solid var(--gold-d);transition:color .3s}
.crumb a:hover{color:var(--gold)}
.crumb span{margin-inline:calc(7*var(--u));opacity:.5}

.sec{padding-block:calc(34*var(--u))}
.sec.alt{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
.sec.cream{background:var(--cream)}
.lede{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.6fr);gap:calc(34*var(--u));align-items:start}
.lede p{margin:0 0 calc(13*var(--u));font-size:calc(12*var(--u));line-height:1.7;color:var(--body)}
.lede p:last-child{margin-bottom:0}

/* structure cards */
.struct{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14*var(--u));margin-top:calc(26*var(--u))}
.sc{background:var(--surface);border:1px solid var(--line);border-radius:calc(6*var(--u));padding:calc(20*var(--u)) calc(18*var(--u));
  display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.sc:hover{transform:translateY(calc(-4*var(--u)));box-shadow:0 calc(12*var(--u)) calc(26*var(--u)) rgba(15,58,76,.13);border-color:#D6CDBC}
.sc .ic{width:calc(38*var(--u));height:calc(38*var(--u));margin-bottom:calc(14*var(--u));color:var(--gold-d)}
.sc b{display:block;font-size:calc(9.6*var(--u));font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:calc(7*var(--u))}
.sc h3{margin:0 0 calc(8*var(--u));font-family:var(--fd);font-size:calc(19*var(--u));font-weight:600;color:var(--ink);line-height:1.2}
.sc p{margin:0;font-size:calc(10*var(--u));line-height:1.6;color:var(--muted)}

/* term band */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--teal);color:#fff;
  border-radius:calc(7*var(--u));overflow:hidden}
.terms .t{padding:calc(24*var(--u)) calc(22*var(--u));position:relative}
.terms .t+.t::before{content:"";position:absolute;left:0;top:calc(22*var(--u));bottom:calc(22*var(--u));
  width:1px;background:rgba(255,255,255,.18)}
.terms .yr{font-size:calc(34*var(--u));font-weight:700;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.terms .yr i{font-style:normal;font-size:.38em;margin-left:calc(3*var(--u));color:rgba(255,255,255,.8);font-weight:600}
.terms b{display:block;margin:calc(11*var(--u)) 0 calc(5*var(--u));font-size:calc(11.5*var(--u));font-weight:700}
.terms span{font-size:calc(9.6*var(--u));color:rgba(255,255,255,.72);line-height:1.55}

/* responsibility table */
.rtab{width:100%;border-collapse:collapse;margin-top:calc(22*var(--u));font-size:calc(10.5*var(--u))}
.rtab th{text-align:left;font-size:calc(9.4*var(--u));font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--thead-ink);padding:calc(10*var(--u)) calc(12*var(--u));border-bottom:calc(1.6*var(--u)) solid var(--gold)}
.rtab td{padding:calc(13*var(--u)) calc(12*var(--u));border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.rtab td:first-child{font-weight:600;color:var(--ink);width:30%}
.rtab tr:hover td{background:#F7FAFB}

/* CTA strip */
.cta-strip{background:var(--band);color:#fff;padding-block:calc(30*var(--u));position:relative;overflow:hidden}
.cta-strip .in{display:flex;align-items:center;gap:calc(26*var(--u));flex-wrap:wrap;position:relative;z-index:2}
.cta-strip h2{margin:0;font-family:var(--fd);font-weight:500;font-size:calc(26*var(--u));line-height:1.2;color:#fff}
.cta-strip p{margin:calc(7*var(--u)) 0 0;font-size:calc(10.5*var(--u));color:rgba(255,255,255,.8);max-width:calc(360*var(--u))}
.cta-strip .btn{margin-left:auto;flex:none}

@media (max-width:1000px){
  .phero{height:auto}
  .phero .w{padding-block:calc(34*var(--u));padding-left:0}
  .phero h1{font-size:calc(31*var(--u))}
  .lede,.struct,.terms{grid-template-columns:1fr}
  .struct{gap:calc(12*var(--u))}
  .terms .t+.t::before{left:calc(22*var(--u));right:calc(22*var(--u));top:0;bottom:auto;width:auto;height:1px}
  .rtab td:first-child{width:auto}
  .rtab,.rtab tbody,.rtab tr,.rtab td{display:block;width:100%}
  .rtab thead{display:none}
  .rtab td{border-bottom:0;padding-block:calc(4*var(--u))}
  .rtab tr{border-bottom:1px solid var(--line);padding-block:calc(11*var(--u))}
  .cta-strip .btn{margin-left:0}
}

/* ── document list (Disclosures) ───────────────────────── */
.docs{display:grid;gap:calc(13*var(--u));margin-top:calc(24*var(--u))}
.doc{display:grid;grid-template-columns:minmax(calc(48*var(--u)),auto) minmax(0,1fr);gap:calc(18*var(--u));
  background:var(--surface);border:1px solid var(--line);border-left:calc(4*var(--u)) solid var(--gold);
  border-radius:calc(5*var(--u));padding:calc(20*var(--u)) calc(22*var(--u));
  transition:transform .45s var(--ease),box-shadow .45s,border-left-color .45s}
.doc:hover{transform:translateX(calc(4*var(--u)));box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) var(--shadow-s);
  border-left-color:var(--teal)}
.doc .dn{font-family:var(--fd);font-size:calc(34*var(--u));font-weight:500;color:var(--watermark);line-height:1;
  font-variant-numeric:tabular-nums;transition:color .45s}
.doc:hover .dn{color:var(--gold)}
.doc h3{margin:0 0 calc(7*var(--u));font-family:var(--fd);font-size:calc(21*var(--u));font-weight:600;
  color:var(--ink);line-height:1.18}
.doc p{margin:0 0 calc(15*var(--u));font-size:calc(10.5*var(--u));line-height:1.65;color:var(--body);max-width:calc(560*var(--u))}
.dl{display:flex;gap:calc(20*var(--u));flex-wrap:wrap}
.dl .lnk{font-size:calc(9.6*var(--u));padding-bottom:calc(4*var(--u))}
.fine{margin:calc(20*var(--u)) 0 0;font-size:calc(9.6*var(--u));color:var(--muted);line-height:1.6}

/* ── contact ───────────────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14*var(--u));margin-top:calc(24*var(--u))}
.cc{background:var(--surface);border:1px solid var(--line);border-radius:calc(6*var(--u));padding:calc(22*var(--u));
  transition:transform .45s var(--ease),box-shadow .45s}
.cc:hover{transform:translateY(calc(-4*var(--u)));box-shadow:0 calc(12*var(--u)) calc(26*var(--u)) var(--shadow-s)}
.cc b{display:block;font-size:calc(9.6*var(--u));font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:calc(9*var(--u))}
.cc h3{margin:0 0 calc(8*var(--u));font-family:var(--fd);font-size:calc(20*var(--u));font-weight:600;color:var(--ink)}
.cc p{margin:0 0 calc(12*var(--u));font-size:calc(10.5*var(--u));line-height:1.65;color:var(--body)}
.cc a.mailto{font-size:calc(11.5*var(--u));font-weight:600;color:var(--link-ink);
  border-bottom:calc(1.4*var(--u)) solid var(--gold);padding-bottom:calc(3*var(--u));word-break:break-word;
  transition:color .3s}
.cc a.mailto:hover{color:var(--gold-d)}
.steps{counter-reset:s;display:grid;gap:calc(12*var(--u));margin-top:calc(22*var(--u))}
.step{counter-increment:s;display:grid;grid-template-columns:calc(30*var(--u)) minmax(0,1fr);gap:calc(14*var(--u));
  align-items:start}
.step::before{content:counter(s);display:grid;place-items:center;width:calc(30*var(--u));height:calc(30*var(--u));
  border-radius:50%;background:var(--teal);color:var(--gold);font-size:calc(11*var(--u));font-weight:700}
.step b{display:block;font-size:calc(11.5*var(--u));color:var(--ink);margin-bottom:calc(4*var(--u))}
.step span{font-size:calc(10.2*var(--u));line-height:1.6;color:var(--body)}

/* ── about page ────────────────────────────────────────── */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(30*var(--u));align-items:center}
.split img{width:100%;height:calc(260*var(--u));object-fit:cover;border-radius:calc(6*var(--u))}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1*var(--u));
  background:var(--line);border:1px solid var(--line);border-radius:calc(6*var(--u));overflow:hidden;margin-top:calc(22*var(--u))}
.facts .f{background:var(--surface);padding:calc(18*var(--u)) calc(20*var(--u))}
.facts .v{font-size:calc(24*var(--u));font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.facts .v i{font-style:normal;font-size:.5em;color:var(--gold-d);margin-left:calc(3*var(--u))}
.facts .k{margin-top:calc(7*var(--u));font-size:calc(9.8*var(--u));color:var(--muted)}

@media (max-width:1000px){
  .doc{grid-template-columns:1fr;gap:calc(8*var(--u))}
  .doc .dn{font-size:calc(24*var(--u))}
  .cgrid,.split,.facts{grid-template-columns:1fr}
  .split img{height:calc(200*var(--u))}
}
footer .soc .fmail{font-size:calc(11.5*var(--u));color:#fff;
  border-bottom:calc(1.4*var(--u)) solid var(--gold);padding-bottom:calc(3*var(--u));transition:color .3s}
footer .soc .fmail:hover{color:var(--gold)}

/* ══════════════════════════════════════════════════════════
   SCROLL BEHAVIOUR
   ══════════════════════════════════════════════════════════ */


/* masthead condenses once the page moves */
.mast{transition:box-shadow .4s var(--ease),background .4s}
.mast .in{transition:height .38s var(--ease)}
.logo .mk,.logo b,.logo em,.logo i{transition:all .38s var(--ease)}
.mast.shift{box-shadow:0 calc(6*var(--u)) calc(22*var(--u)) var(--shadow-s)}
.mast.shift .in{height:calc(56*var(--u))}
.mast.shift .logo .mk{width:calc(42*var(--u));height:calc(42*var(--u))}
.mast.shift .logo b{font-size:calc(16*var(--u))}
.mast.shift .logo em{font-size:calc(8.6*var(--u))}
.mast.shift .logo i{font-size:0;opacity:0;margin-top:0}

/* section stepper — a proportional scroll map: every dot sits at the
   position its section actually occupies in the document, so the rail
   is a true miniature of the page rather than evenly spaced decoration */
.step-rail{position:fixed;right:calc(22*var(--u));top:50%;transform:translateY(-50%);
  z-index:60;height:min(56vh,calc(520*var(--u)));width:calc(11*var(--u));
  opacity:0;pointer-events:none;
  /* Appearing is deliberately near-instant: the rail must be there the moment
     the page moves. Disappearing is slow and delayed, so it never flickers
     between wheel ticks. A transition belongs to the state being entered. */
  transition:opacity .1s linear,transform .12s var(--ease)}
.step-rail.on{opacity:1;pointer-events:auto;transform:translateY(-50%)}
/* idle = the reader has stopped scrolling; the rail steps out of the way */
.step-rail.on.idle{opacity:0;pointer-events:none;
  transform:translateY(-50%) translateX(calc(16*var(--u)));
  transition:opacity .55s var(--ease) .1s,transform .55s var(--ease) .1s}
.step-rail .track{position:absolute;left:50%;top:0;bottom:0;width:calc(1.6*var(--u));
  transform:translateX(-50%);background:rgba(11,70,85,.2);border-radius:2px}
.step-rail .fill{position:absolute;left:50%;top:0;width:calc(4*var(--u));height:0;
  transform:translateX(-50%);background:rgba(201,164,102,.34);
  border-left:calc(1.6*var(--u)) solid var(--gold);border-radius:2px;
  transition:top .12s linear,height .12s linear}
.step-rail a{position:absolute;right:0;display:flex;align-items:center;justify-content:flex-end;
  gap:calc(10*var(--u));color:var(--teal);text-decoration:none;transform:translateY(-50%)}
.step-rail .lb{font-size:calc(9.4*var(--u));font-weight:600;letter-spacing:.04em;white-space:nowrap;
  opacity:0;transform:translateX(calc(6*var(--u)));pointer-events:none;
  background:rgba(255,255,255,.95);padding:calc(4*var(--u)) calc(9*var(--u));
  border-radius:calc(2*var(--u));box-shadow:0 calc(3*var(--u)) calc(10*var(--u)) var(--shadow-m);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.step-rail a:hover .lb,.step-rail a:focus-visible .lb{opacity:1;transform:none}
.step-rail .dt{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;flex:none;
  background:#fff;box-shadow:0 0 0 calc(2*var(--u)) rgba(11,70,85,.35);
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.step-rail a.done .dt{background:var(--gold);box-shadow:0 0 0 calc(2*var(--u)) var(--gold)}
/* section is on screen right now, even if not the primary one */
.step-rail a.inview .dt{box-shadow:0 0 0 calc(2*var(--u)) var(--gold);background:rgba(201,164,102,.45)}
.step-rail a.cur .dt{background:var(--gold);transform:scale(1.45);
  box-shadow:0 0 0 calc(2.5*var(--u)) rgba(201,164,102,.42)}
.step-rail a:hover .dt{box-shadow:0 0 0 calc(3*var(--u)) rgba(11,70,85,.3)}

/* reveals: directional + staggered children */
.rv{opacity:0;transform:translateY(calc(20*var(--u)));
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.from-l{transform:translateX(calc(-26*var(--u)))}
.rv.from-r{transform:translateX(calc(26*var(--u)))}
.rv.vis{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(calc(16*var(--u)));
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stagger.vis>*{opacity:1;transform:none}
.stagger.vis>*:nth-child(1){transition-delay:.04s}
.stagger.vis>*:nth-child(2){transition-delay:.11s}
.stagger.vis>*:nth-child(3){transition-delay:.18s}
.stagger.vis>*:nth-child(4){transition-delay:.25s}
.stagger.vis>*:nth-child(5){transition-delay:.32s}
.stagger.vis>*:nth-child(6){transition-delay:.39s}

/* Reading-progress hairline, pinned under the masthead.
   It is the ONLY scroll indicator at or below 1140px, because the ECG rail
   needs a side gutter and is not painted there. The swap is driven by the
   .rail-live class the rail sets on <html> when it is genuinely on screen,
   not by a breakpoint — the rail also drops out when the gutter is too
   narrow, which no media query can know about. */
.prog{position:fixed;top:0;left:0;height:calc(3*var(--u));width:100%;z-index:90;
  background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-d),var(--gold));
  transform-origin:left center;transition:width .08s linear}
html.rail-live .prog{display:none}

@media (max-width:1140px){ .step-rail{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .prog,.step-rail{display:none}
  .mast .in,.logo .mk,.logo b,.logo em,.logo i{transition:none!important}
  .stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════
   ECG SCROLL RAIL
   ══════════════════════════════════════════════════════════ */
.step-rail{width:calc(22*var(--u));right:calc(14*var(--u))}
/* free a little gutter on laptop widths so the rail has somewhere to live */
@media (min-width:1200px){ .w{width:min(90vw,calc(950*var(--u)))} }
.step-rail .track,.step-rail .fill{display:none}
.ecg{position:absolute;left:0;top:0;height:100%;width:calc(16*var(--u));overflow:visible}
.ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ecg .base{stroke:var(--ecg-base);stroke-width:1.1}
.ecg .live{stroke:rgba(201,164,102,.8);stroke-width:1.7}
.ecg .head{fill:var(--gold);r:3.6;
  opacity:.9;animation:none}
.ecg .ring{fill:none;stroke:var(--gold);stroke-width:1.8;opacity:0;r:3.4}
.ecg .ring2{fill:none;stroke:var(--gold);stroke-width:.9;opacity:0;r:3.4}
/* A real double-thump — lub, then a softer dub, then diastole.
   Deliberately quiet: 2.6px resting, never more than 4.6px.
   Runs 4 cycles (3.87s) then stops, which keeps it under the
   five-second threshold in WCAG SC 2.2.2 Pause, Stop, Hide. */
@keyframes lubdub{
  0%{r:3.4;opacity:.9}
  5%{r:6.4;opacity:1}
  14%{r:3.6;opacity:.92}
  24%{r:5.2;opacity:.96}
  34%{r:3.4;opacity:.9}
  100%{r:3.4;opacity:.9}
}
/* the ring is what the eye actually catches: a ripple leaving the dot */
@keyframes ripple{
  0%{r:3.4;opacity:.78;stroke-width:1.8}
  45%{r:21;opacity:0;stroke-width:.4}
  100%{r:3.4;opacity:0}
}
@keyframes ripple2{
  0%{r:3.4;opacity:0}
  20%{r:3.4;opacity:.58;stroke-width:1.4}
  66%{r:16;opacity:0;stroke-width:.4}
  100%{r:3.4;opacity:0}
}
.ecg .head.beating{animation:lubdub 968ms ease-out 4}
.ecg .ring.beating{animation:ripple 968ms ease-out 4}
.ecg .ring2.beating{animation:ripple2 968ms ease-out 4}
.step-rail a{right:calc(-2*var(--u))}
.step-rail .dt{width:calc(8*var(--u));height:calc(8*var(--u));background:#fff;
  box-shadow:0 0 0 calc(1.8*var(--u)) rgba(11,70,85,.3)}
.step-rail a.done .dt,.step-rail a.inview .dt{background:var(--gold);
  box-shadow:0 0 0 calc(1.8*var(--u)) var(--gold)}
.step-rail a.cur .dt{background:var(--gold);transform:scale(1.4);
  box-shadow:0 0 0 calc(2.4*var(--u)) rgba(201,164,102,.45)}
@media (prefers-reduced-motion:reduce){
  .ecg .live{filter:none}
  .ecg .head{filter:none;animation:none!important}
  .ecg .ring{display:none}
  .step-rail.on.idle{transform:translateY(-50%)}
}

/* specialty tags (About · The Setting) */
.tags{display:flex;flex-wrap:wrap;gap:calc(8*var(--u));margin-top:calc(18*var(--u))}
.tags span{display:inline-flex;align-items:center;padding:calc(6*var(--u)) calc(13*var(--u));
  border:1px solid var(--gold);border-radius:calc(40*var(--u));background:rgba(201,164,102,.08);
  font-size:calc(9.6*var(--u));font-weight:600;letter-spacing:.04em;color:var(--ink);white-space:nowrap}

/* "see 02" pointer on the grievance card (not a separate document) */
/* The Grievance Mechanism is not a fourth document — it lives inside the
   Stakeholder Engagement Plan. It used to carry the text "see 02" in the
   numeral slot, which read as a broken 01/02/03 sequence rather than as a
   pointer. An upward arrow says "it is in the one above" without a false
   number and without words to translate into Uzbek and Russian. */
.doc .dn.note{display:flex;align-items:flex-start;justify-content:center;padding-top:calc(4*var(--u))}
.doc .dn.note svg{width:calc(26*var(--u));height:calc(26*var(--u));fill:none;stroke:var(--gold-d);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.doc:hover .dn.note svg{transform:translateY(calc(-3*var(--u)))}
@media (prefers-reduced-motion:reduce){ .doc:hover .dn.note svg{transform:none} }
@media (max-width:760px){ .doc .dn.note svg{width:calc(21*var(--u));height:calc(21*var(--u))} }

/* ══════════════════════════════════════════════════════════
   SITE SEARCH  (utility bar)
   ══════════════════════════════════════════════════════════ */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Collapsed by default: a single icon that morphs open on demand and seals
   itself shut again when the visitor moves on. Width, radius and the inner
   controls are animated together on one curve so it reads as one object
   changing shape, not a box appearing beside a button. */
.srch{position:relative;display:flex;align-items:center;gap:calc(6*var(--u));
  height:calc(24*var(--u));padding:0 calc(7*var(--u));border-radius:calc(20*var(--u));
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  width:calc(232*var(--u));
  transition:width .34s cubic-bezier(.32,.72,0,1),
             padding .34s cubic-bezier(.32,.72,0,1),
             border-radius .34s cubic-bezier(.32,.72,0,1),
             border-color .2s var(--ease), background .2s var(--ease)}
.srch:focus-within{border-color:var(--gold);background:rgba(255,255,255,.12)}

/* ── sealed state ───────────────────────────────────────────────────── */
.srch.min{width:calc(24*var(--u));padding:0;border-radius:50%;
  background:rgba(255,255,255,.07)}
/* Fading the inner controls is not enough — they keep their layout width and
   spill out of the 24u circle, widening the document. They have to be
   collapsed to zero as well. (Clipping the pill instead would also work, but
   a round clip cuts the corner mark that shows a query is being held.) */
.srch.min .ghost,.srch.min input,.srch.min .qk,.srch.min .qx{
  opacity:0;pointer-events:none}
.srch.min input,.srch.min .qk,.srch.min .qx{
  width:0;min-width:0;padding:0;margin:0;border-width:0}

.sbtn{flex:none;width:calc(22*var(--u));height:calc(22*var(--u));padding:0;margin:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:none;
  color:#fff;cursor:pointer;transition:color .2s var(--ease),transform .2s var(--ease)}
.srch:not(.min) .sbtn{cursor:default}
/* No scale on hover: the button is flush to the row, so growing it is
   another way to poke outside the bar. Colour alone carries the state. */
.sbtn:hover{color:var(--gold)}
.sbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.srch .si{width:calc(12.5*var(--u));height:calc(12.5*var(--u));
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.8}
.sbtn:hover .si,.srch:focus-within .si{opacity:1}
.srch:focus-within .si{stroke:var(--gold)}

/* The ghost sits exactly under the input and shows the predicted word. The
   input is transparent-backed and painted on top, so the typed characters
   cover the identical characters beneath and only the completion shows. */
.srch .ghost,.srch input{font:inherit;font-size:calc(9.6*var(--u));letter-spacing:.01em;
  line-height:calc(24*var(--u));height:calc(24*var(--u))}
.srch .ghost,.srch input,.srch .qk,.srch .qx{opacity:1;
  transition:opacity .2s var(--ease) .1s,width .34s cubic-bezier(.32,.72,0,1)}
.srch .ghost{position:absolute;left:calc(31*var(--u));top:0;right:calc(24*var(--u));
  color:rgba(255,255,255,.34);pointer-events:none;white-space:pre;overflow:hidden}
.srch input{flex:1;min-width:0;background:none;border:0;color:#fff;padding:0;
  position:relative;z-index:1;caret-color:var(--gold)}
.srch input::placeholder{color:rgba(255,255,255,.52)}
.srch input:focus{outline:none}
.srch .qk{flex:none;font-family:var(--ff);font-size:calc(8*var(--u));line-height:1;
  padding:calc(2.5*var(--u)) calc(5*var(--u));border-radius:calc(4*var(--u));
  border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.6);background:none}
.srch:focus-within .qk{display:none}
.srch .qx{flex:none;width:calc(15*var(--u));height:calc(15*var(--u));border:0;padding:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  font-size:calc(11*var(--u));line-height:1;display:grid;place-items:center}
.srch .qx:hover{background:var(--gold);color:var(--teal)}
/* `display:grid` above outranks the [hidden] attribute's UA display:none,
   so the clear button has to be switched off explicitly. */
.srch .qx[hidden]{display:none}

/* A held query survives the collapse; the icon says so with a mark. */
.srch.min.held{border-color:rgba(201,164,102,.55);background:rgba(201,164,102,.14)}
.srch.min.held .si{stroke:var(--gold);opacity:1}
.srch.min.held::after{content:"";position:absolute;top:calc(1.5*var(--u));right:calc(1.5*var(--u));
  width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 calc(1.2*var(--u)) var(--teal)}

/* ── results panel ─────────────────────────────────────────────────── */
.sres{position:absolute;top:calc(100% + 7*var(--u));right:0;width:calc(400*var(--u));
  max-width:92vw;max-height:min(70vh,calc(430*var(--u)));overflow-y:auto;z-index:120;
  background:var(--surface);border:1px solid var(--line);border-radius:calc(9*var(--u));
  box-shadow:0 calc(18*var(--u)) calc(44*var(--u)) var(--shadow-l);
  text-align:left;color:var(--body)}
.sres[hidden]{display:none}

.sfix{margin:0;padding:calc(9*var(--u)) calc(14*var(--u));font-size:calc(9.4*var(--u));
  line-height:1.5;color:var(--body);background:var(--cream);border-bottom:1px solid var(--line)}
.sfix b{color:var(--ink)}
.smsg{margin:0;padding:calc(15*var(--u)) calc(14*var(--u));font-size:calc(9.8*var(--u));
  line-height:1.6;color:var(--muted)}

.schips{display:flex;flex-wrap:wrap;align-items:center;gap:calc(5*var(--u));
  padding:calc(9*var(--u)) calc(14*var(--u));border-bottom:1px solid var(--line)}
.slbl{font-size:calc(8.6*var(--u));font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-right:calc(2*var(--u))}
.schip{font:inherit;font-size:calc(9.2*var(--u));padding:calc(3*var(--u)) calc(9*var(--u));
  border-radius:calc(20*var(--u));border:1px solid var(--line);background:var(--surface);
  color:var(--ink);cursor:pointer;transition:all .15s var(--ease)}
.schip:hover,.schip:focus-visible{background:var(--teal);border-color:var(--teal);color:var(--gold)}

.slist{padding:calc(5*var(--u)) 0}
.srow{display:block;padding:calc(9*var(--u)) calc(14*var(--u));text-decoration:none;
  border-left:calc(2.5*var(--u)) solid transparent}
.srow:hover,.srow.on{background:var(--cream);border-left-color:var(--gold)}
.spage{display:block;font-size:calc(8.4*var(--u));font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-d)}
.stit{display:block;font-family:var(--fd);font-size:calc(13.5*var(--u));font-weight:600;
  color:var(--ink);line-height:1.3;margin:calc(2*var(--u)) 0 calc(3*var(--u))}
.ssnip{display:block;font-size:calc(9.3*var(--u));line-height:1.6;color:var(--body)}
.ssnip mark{background:rgba(201,164,102,.34);color:var(--ink);font-weight:600;
  border-radius:calc(2*var(--u));padding:0 calc(1.5*var(--u))}

/* ── narrow screens: the field takes the row, the panel goes full width ─ */
@media (max-width:760px){
  .srch,.srch.min{width:100%;height:calc(28*var(--u));padding:0 calc(9*var(--u));
    border-radius:calc(20*var(--u))}
  .srch.min .ghost,.srch.min input{opacity:1;pointer-events:auto}
  .srch.min input{width:auto;padding:0}
  .srch .ghost,.srch input{font-size:calc(11*var(--u));line-height:calc(28*var(--u));
    height:calc(28*var(--u))}
  .srch .ghost{left:calc(34*var(--u))}
  .srch .si{width:calc(14*var(--u));height:calc(14*var(--u))}
  .srch .qk{display:none}
  .sres{width:calc(100vw - 24px);right:auto;left:50%;transform:translateX(-50%);
    max-height:64vh}
}
@media (prefers-reduced-motion:reduce){
  .srch,.schip,.sbtn,.srch .ghost,.srch input,.srch .qk,.srch .qx{transition:none}
}

/* ══════════════════════════════════════════════════════════
   DARK MODE
   Follows the operating system, and a header toggle overrides it.
   The dark values appear twice on purpose: once for "OS says dark and the
   visitor has not chosen light", once for "visitor explicitly chose dark".
   A single combined selector cannot express that, and getting it wrong is
   how a manual choice silently stops working.
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  color-scheme:dark;
  --page:#0A1418;
  --surface:#0F1D22;
  --surface-2:#0C181C;
  --surface-3:#0E1A1F;
  --surface-4:#0B171B;
  --tint:#16272D;
  --promo:#122127;
  --cream:#0C181D;
  --line:#22373E;
  --ink:#E9F2F1;
  --ink-2:#D3E4E3;
  --body:#A6BFC1;
  --muted:#7C9598;
  --logo:#8FD5D8;
  --logo-sub:#8CB0B4;
  --nav-ink:#C6D9D9;
  /* Gold is lifted slightly: #C9A466 on a near-black page falls below 4.5:1
     for small text, which is a real accessibility failure, not a nicety. */
  --gold:#D9BC83;
  --gold-d:#C9A466;
  --teal:#07222A;
  --teal-2:#0B3A47;
  --band:#061A1D;
  --shadow-s:rgba(0,0,0,.45);
  --shadow-m:rgba(0,0,0,.6);
  --shadow-l:rgba(0,0,0,.72);
  /* The hero photographs stay untouched; only the scrim over them deepens,
     so light type keeps its contrast without dimming the imagery. */
  --hero-veil:6,20,24;
  --hero-ink:#EAF3F2;
  --hero-ink-2:#B9CFD1;
  --hero-eyebrow:#9FD3D6;
  --eyebrow-ink:#8FCBD2;
  --link-ink:#9AD2D8;
  --watermark:#568A99;
  --thead-ink:#D3E4E3;
  --icon:#7FC0C9;
  --mark:#5FB2BE;
  --mark-c:#0F1D22;
  --ecg-base:rgba(143,203,210,.20);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0A1418;
  --surface:#0F1D22;
  --surface-2:#0C181C;
  --surface-3:#0E1A1F;
  --surface-4:#0B171B;
  --tint:#16272D;
  --promo:#122127;
  --cream:#0C181D;
  --line:#22373E;
  --ink:#E9F2F1;
  --ink-2:#D3E4E3;
  --body:#A6BFC1;
  --muted:#7C9598;
  --logo:#8FD5D8;
  --logo-sub:#8CB0B4;
  --nav-ink:#C6D9D9;
  /* Gold is lifted slightly: #C9A466 on a near-black page falls below 4.5:1
     for small text, which is a real accessibility failure, not a nicety. */
  --gold:#D9BC83;
  --gold-d:#C9A466;
  --teal:#07222A;
  --teal-2:#0B3A47;
  --band:#061A1D;
  --shadow-s:rgba(0,0,0,.45);
  --shadow-m:rgba(0,0,0,.6);
  --shadow-l:rgba(0,0,0,.72);
  /* The hero photographs stay untouched; only the scrim over them deepens,
     so light type keeps its contrast without dimming the imagery. */
  --hero-veil:6,20,24;
  --hero-ink:#EAF3F2;
  --hero-ink-2:#B9CFD1;
  --hero-eyebrow:#9FD3D6;
  --eyebrow-ink:#8FCBD2;
  --link-ink:#9AD2D8;
  --watermark:#568A99;
  --thead-ink:#D3E4E3;
  --icon:#7FC0C9;
  --mark:#5FB2BE;
  --mark-c:#0F1D22;
  --ecg-base:rgba(143,203,210,.20);
}
:root[data-theme="light"]{ color-scheme:light }

/* ── theme toggle (utility bar) ──────────────────────────────────────── */
.thm{flex:none;width:calc(24*var(--u));height:calc(24*var(--u));padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:none;
  color:#fff;cursor:pointer;transition:color .2s var(--ease)}
.thm:hover{color:var(--gold)}
.thm:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.thm svg{grid-area:1/1;width:calc(13*var(--u));height:calc(13*var(--u));
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;
  transition:opacity .25s var(--ease),transform .35s var(--ease)}
.thm .moon{opacity:0;transform:rotate(-40deg) scale(.7)}
.thm .sun {opacity:1;transform:none}
/* Show the icon for the mode you would switch TO — the conventional reading,
   and the aria-label says it in words for anyone who reads it differently. */
:root[data-theme="dark"] .thm .sun{opacity:0;transform:rotate(40deg) scale(.7)}
:root[data-theme="dark"] .thm .moon{opacity:1;transform:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .thm .sun{opacity:0;transform:rotate(40deg) scale(.7)}
  :root:not([data-theme="light"]) .thm .moon{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .thm svg{transition:none} }

/* ── dark-mode corrections for surfaces that are dark in BOTH themes ──── */
:root[data-theme="dark"] .mast,
:root[data-theme="dark"] .creds{border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .c4,
:root[data-theme="dark"] .c3,
:root[data-theme="dark"] .sc,
:root[data-theme="dark"] .cc,
:root[data-theme="dark"] .doc,
:root[data-theme="dark"] .sres{border:1px solid var(--line)}
:root[data-theme="dark"] .stats .card{border:1px solid var(--line)}
:root[data-theme="dark"] .promo .ph::after{
  background:linear-gradient(90deg,var(--promo) 0%,rgba(18,33,39,.4) 40%,transparent 76%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mast,
  :root:not([data-theme="light"]) .creds{border-bottom:1px solid var(--line)}
  :root:not([data-theme="light"]) .c4,
  :root:not([data-theme="light"]) .c3,
  :root:not([data-theme="light"]) .sc,
  :root:not([data-theme="light"]) .cc,
  :root:not([data-theme="light"]) .doc,
  :root:not([data-theme="light"]) .sres{border:1px solid var(--line)}
  :root:not([data-theme="light"]) .stats .card{border:1px solid var(--line)}
  :root:not([data-theme="light"]) .promo .ph::after{
    background:linear-gradient(90deg,var(--promo) 0%,rgba(18,33,39,.4) 40%,transparent 76%)}
}
@media (max-width:760px){ .thm{width:calc(26*var(--u));height:calc(26*var(--u))} }

/* The outline button sits on the hero photo. Its light translucent fill was
   written for a light scrim; under the dark scrim it became light-on-light —
   measured 1.36:1, i.e. effectively unreadable. It needs to invert with the
   scrim, not with the page. */
:root[data-theme="dark"] .btn.o{background:rgba(6,20,24,.62);color:#E9F2F1;
  border-color:rgba(233,242,241,.45)}
:root[data-theme="dark"] .btn.o:hover{background:rgba(6,20,24,.85);color:#fff;
  border-color:var(--gold)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.o{background:rgba(6,20,24,.62);color:#E9F2F1;
    border-color:rgba(233,242,241,.45)}
  :root:not([data-theme="light"]) .btn.o:hover{background:rgba(6,20,24,.85);color:#fff;
    border-color:var(--gold)}
}

/* Narrow viewports: the page-hero text spans the full width, so a horizontal
   scrim leaves the end of the headline unprotected. Swap in a vertical veil
   over the text band. Must sit after the base .phero::after rule to win. */
/* At and below 1200px the headline spans the full width, so no scrim can both
   protect the text and leave the photograph legible. Stack instead: the image
   runs as a full-bleed band at full contrast, the text sits below it on the
   page background, where contrast is the ordinary solid-background case. */
@media (max-width:1200px){
.phero{height:auto;display:block;background:var(--page)}
.phero::after{display:none}
.phero .bg{position:static;width:100%;height:auto;aspect-ratio:16/7;
  max-height:calc(190*var(--u));object-fit:cover;object-position:50% 52%;display:block}
.phero .w{height:auto;padding-block:calc(24*var(--u)) calc(6*var(--u));padding-left:0}
.phero h1{max-width:none}
}

/* ══ CSP-safe utilities ══ ════════════════════════════════════════════════
   The Content-Security-Policy is style-src 'self' with no unsafe-inline,
   so a style="" attribute on an element is blocked by the browser and
   silently does nothing. CSP hashes do not apply to style ATTRIBUTES
   (only to <style> blocks), and 'unsafe-hashes' would weaken the policy,
   so every one-off inline style lives here as a class instead. */
.sprite{position:absolute}
.unit{font-size:.4em;letter-spacing:.06em}
.mt-sm{margin-top:calc(14*var(--u))}
.mt-md{margin-top:calc(20*var(--u))}
.mt-lg{margin-top:calc(22*var(--u))}
.nt0{border-top:0}

/* ══ masthead tools + phone header ══ ══════════════════════════════════════
   The utility strip is desktop furniture: three context labels, a location
   line and two controls. On a 375px phone it wrapped to four rows and pushed
   the brand and the banner below the fold, so below 900px it is removed and
   the page starts at the logo. Search and the theme switch were inside it, so
   they moved into the masthead permanently rather than being duplicated. */
.mtools{display:flex;align-items:center;gap:calc(16*var(--u));
        margin-left:calc(22*var(--u));flex:none}

/* The pill was drawn for the teal strip — white on translucent white. On the
   masthead's light surface that is invisible, so it is restated in ink. */
.mast .srch{border-color:rgba(15,58,76,.24);background:rgba(15,58,76,.045)}
.mast .srch:focus-within{border-color:var(--gold);background:rgba(15,58,76,.07)}
.mast .srch input{color:var(--ink)}
.mast .srch input::placeholder{color:rgba(15,58,76,.5)}
.mast .srch .ghost{color:rgba(15,58,76,.3)}
.mast .srch .qk{border-color:rgba(15,58,76,.25);color:rgba(15,58,76,.55)}
.mast .srch .qx{background:rgba(15,58,76,.14);color:var(--teal)}
.mast .sbtn,.mast .thm{color:var(--teal)}
.mast .sbtn svg,.mast .thm svg{stroke:var(--teal)}

/* Over the hero the masthead is transparent, so the pill goes back to white. */
@media (min-aspect-ratio:3/2){
  body.home:not(.nav-in) .mast .srch{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
  body.home:not(.nav-in) .mast .srch input{color:#fff}
  body.home:not(.nav-in) .mast .srch input::placeholder{color:rgba(255,255,255,.55)}
  body.home:not(.nav-in) .mast .srch .ghost{color:rgba(255,255,255,.34)}
  body.home:not(.nav-in) .mast .srch .qk{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6)}
}

@media (max-width:900px){
  .util{display:none}
  .mtools{margin-left:auto;gap:calc(10*var(--u))}
  .burg{margin-left:calc(4*var(--u))}
  /* Opened, the field has nowhere to go inside a 375px row, so it drops to a
     full-width bar under the header instead of squeezing the logo out. */
  .mast .srch:not(.min){position:absolute;left:0;right:0;top:calc(100% + 8*var(--u));
    width:auto;height:calc(40*var(--u));border-radius:calc(20*var(--u));
    padding:0 calc(14*var(--u));background:var(--surface);
    border-color:rgba(15,58,76,.3);
    box-shadow:0 calc(8*var(--u)) calc(22*var(--u)) rgba(15,58,76,.18);z-index:90}
  .mast .srch:not(.min) input,.mast .srch:not(.min) .ghost{
    height:calc(40*var(--u));line-height:calc(40*var(--u))}
}

/* ══ phone masthead + iOS video visibility ══ ═══════════════════════════
   iOS will not autoplay a muted video that is not visible on screen, and
   pauses one that becomes invisible — WebKit, "New <video> Policies for iOS":
   the element must be "visible on-screen", and when it "becomes non-visible…
   it will pause". Holding the clip at opacity:0 until the 'playing' event
   therefore deadlocks on iOS: it could not play until it was shown, and it
   was not shown until it played. Desktop Chrome does not enforce this, which
   is why the bug was phone-only.
   The video is now always painted and the POSTER sits on top, fading out once
   playback is real. Same guarantee as before — never a black rectangle — with
   the causality the right way round. */
.hero.vid .vmedia{opacity:1;z-index:2}
.hero.vid .bg{z-index:3;opacity:1;transition:opacity .55s var(--ease)}
.hero.vid.playing .bg{opacity:0}
@media (prefers-reduced-motion:reduce){ .hero.vid .bg{transition:none} }

@media (max-width:900px){
  /* The field used to occupy its own row in the utility strip, so an older
     rule forces `.srch, .srch.min { width:100% }` below 760px. In the
     masthead that flattens the logo to a 123px column and four wrapped
     lines. Sealed, it is an icon; opened, it drops below the bar. */
  .mast .srch,.mast .srch.min{width:calc(30*var(--u));flex:none;padding:0;border-radius:50%}

  /* The bar has to grow with its contents rather than clip them. */
  .mast .in{height:auto;min-height:calc(58*var(--u));
            padding-block:calc(9*var(--u));gap:calc(10*var(--u))}

  /* Two lines of brand, not four. The italic project line is repeated in the
     footer and is the first thing to give way at phone width. */
  .logo{min-width:0;flex:1 1 auto}
  .logo i{display:none}
  .logo .mk{width:calc(42*var(--u));height:calc(42*var(--u))}
  .logo b{font-size:calc(17*var(--u));white-space:nowrap}
  .logo em{font-size:calc(8.4*var(--u));letter-spacing:.07em}
  .mtools{flex:none;margin-left:auto;gap:calc(10*var(--u))}
  .burg{margin-left:calc(2*var(--u))}

  /* Opened: a full-width bar under the header, not a squeeze inside it. */
  .mast .srch:not(.min){position:absolute;left:0;right:0;top:calc(100% + 4*var(--u));
    width:auto;height:calc(40*var(--u));border-radius:calc(20*var(--u));
    padding:0 calc(14*var(--u));background:var(--surface);
    border-color:rgba(15,58,76,.3);
    box-shadow:0 calc(8*var(--u)) calc(22*var(--u)) rgba(15,58,76,.18);z-index:90}
  .mast .srch:not(.min) input,.mast .srch:not(.min) .ghost{
    height:calc(40*var(--u));line-height:calc(40*var(--u));opacity:1;width:auto}
}