/* ==========================================================================
   Sterling Financial Services — design system
   Editorial/broadsheet direction: heavy display type, hairline rules, warm
   beige and red accents on white, one navy block and one near-black block.

   Every value here comes from the approved design. Do not "tidy" the letter-
   spacing or the 1px grid gaps — the hairline grid motif depends on them.
   ========================================================================== */

/* /assets/fonts.css is linked ahead of this file, not @imported — an @import
   costs an extra round trip before any face starts downloading. */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --navy: #1E2660;
  --navy-darker: #161C4A;
  --red: #E5252A;
  --gold: #d4a949;
  --cream: #faf7f0;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --cream-card: #faf7f0;
  --ink: #161616;
  --ink-secondary: #4A4A4A;
  --ink-tertiary: #8A8A8A;
  --rule: #D4D0C8;
  --ok: #2F6B4A;
  --flag: #B4763A;
  --flag-bg: #FDF8F1;
  --sand: #F1E7D6;
  --sand-soft: #FAF5EC;
  --red-soft: #FCEDEC;
  --gold-soft: #F7EBD3;

  --f-display: 'Archivo Black', 'Helvetica Neue', sans-serif;
  --f-data: 'Anton', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-italic: 'Instrument Serif', Georgia, serif;

  /* The scrolled nav bar. Brand navy in both themes: against the light paper
     it is the darkest thing on screen, and against the dark paper (#0A0E1F)
     it is a clearly lifted band. */
  --nav-solid: #1E2660;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --wash: radial-gradient(820px 420px at 1% -20%, var(--sand-soft), transparent 68%),
          radial-gradient(620px 380px at 99% -6%, var(--red-soft), transparent 64%);
}

/* --navy is the "primary ink" token, not literally navy: it inverts to white
   in dark mode. Hard-coded #1E2660 (CMA band) and #161616 (CTA panel) stay
   dark in both themes by design. */
html[data-theme="dark"] {
  --paper: #0A0E1F;
  --card: #111735;
  --cream-card: #111735;
  --cream: #0F1531;
  --ink: #EAECF5;
  --ink-secondary: #A7AFCB;
  --ink-tertiary: #7A83A5;
  --rule: #242C55;
  --navy: #FFFFFF;
  --navy-darker: #DDE2F2;
  --red: #FF5B5F;
  /* The permitted/✓ green. It was the one token with no dark value, so it
     stayed at its light #2F6B4A and sat almost invisibly on the dark card in
     the scope panel and on the completed form-progress segment. */
  --ok: #4FAE7C;
  --flag-bg: #241B10;
  --sand: #141A3A;
  --sand-soft: #0E1330;
  --red-soft: #2A1517;
  --gold-soft: #241D10;
}

html[lang="ar"] { --f-body: 'Cairo', system-ui, sans-serif; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  background-repeat: no-repeat;
  color: var(--navy);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The nav bar is transparent at rest, and it sits above the page header rather
   than over it, so the page's opening background has to be painted by <body>
   or a seam shows where the nav band ends and the header begins. The washes
   therefore live here, not on the header, and run behind both.

   Pages whose header is a flat colour instead of a wash (What we do, Our
   scope) tint the bar itself — see data-nav below. */
body[data-top="hero"] {
  background:
    radial-gradient(880px 520px at 2% -8%, var(--sand-soft), transparent 68%),
    radial-gradient(680px 460px at 98% 0%, var(--red-soft), transparent 64%),
    var(--paper);
}
body[data-top="wash"] { background: var(--wash), var(--paper); }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }

/* The nav is sticky and 78px tall, so an anchor target would otherwise land
   underneath it. The prototype never hit this — it routed in JavaScript and
   always scrolled to the top. These are real URLs now. */
[id] { scroll-margin-top: 100px; }

/* Dark mode has no white logo variant yet, so the wordmark is knocked out. */
html[data-theme="dark"] .logo { filter: brightness(0) invert(1); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-size: 14px; font-weight: 500;
}
.skip:focus { left: 0; color: var(--paper); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* The recurring section header: big h2 left, supporting paragraph right. */
.hdr-row {
  display: flex; gap: 48px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 44px;
}
.hdr-row .support { font-size: 17px; line-height: 1.55; color: var(--ink-secondary); max-width: 400px; }

/* The wash is on <body> so it can run behind the nav bar — see data-top. */
.page-head { padding: 34px 0 44px; }
.page-head--tall { padding-bottom: 56px; }
.page-head--flush { padding-bottom: 0; }

.crumb {
  display: flex; gap: 8px; align-items: center; margin-bottom: 38px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.crumb a { color: var(--ink-tertiary); }
.crumb a:hover { color: var(--red); }
.crumb .here { color: var(--navy); }

.head-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: end; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  color: var(--ink-tertiary); display: block;
}
.mono {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.mono-link {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.mono-link:hover { color: var(--navy); }

.h1-home {
  font-family: var(--f-display); font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.04; letter-spacing: -.038em; margin: 18px 0 22px; color: var(--navy);
}
.h1-home > span { display: block; }
.h1-page {
  font-family: var(--f-display); font-size: clamp(36px, 5.4vw, 68px);
  line-height: .95; letter-spacing: -.04em; color: var(--navy);
}
.h1-wide { font-size: clamp(38px, 6vw, 78px); line-height: .94; }
.h2-sec {
  font-family: var(--f-display); font-size: clamp(34px, 5.2vw, 66px);
  line-height: .95; letter-spacing: -.03em; color: var(--navy); max-width: 660px;
}
.h2-mid {
  font-family: var(--f-display); font-size: clamp(28px, 3.8vw, 46px);
  line-height: .98; letter-spacing: -.03em; color: var(--navy);
}
.h3-sub {
  font-family: var(--f-display); font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.02; letter-spacing: -.03em; color: var(--navy);
}
.red { color: var(--red); }
.red-light { color: #FF6B6E; }

.lead { font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 580px; }
.intro { font-size: 17px; line-height: 1.65; color: var(--ink-secondary); }
.body-16 { font-size: 16.5px; line-height: 1.6; color: var(--ink-secondary); }

.italic { font-family: var(--f-italic); font-style: italic; }
.pull {
  font-family: var(--f-italic); font-style: italic; color: var(--ink);
  border-left: 3px solid var(--red); padding-left: 20px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 6px; border: 0;
  font-family: var(--f-body); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .22s var(--ease),
              background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(0) scale(.985); box-shadow: 0 4px 10px -6px rgba(30, 38, 96, .5); }
.btn .arrow { color: var(--red); }

.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover {
  background: var(--navy-darker); color: var(--paper);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 26px -10px rgba(30, 38, 96, .65), 0 0 0 1px rgba(30, 38, 96, .06);
}

.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover {
  background: var(--ink); color: var(--paper);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 24px -12px rgba(30, 38, 96, .45);
}

/* On the near-black CTA panel, which does not follow the theme — so neither
   can this. Literal cream, not var(--cream): the token resolves to #0F1531 in
   dark mode, which put a near-black button on a near-black panel. */
.btn-cream { background: #faf7f0; color: #161616; }
.btn-cream:hover {
  background: #fff; color: #161616; transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 24px -12px rgba(30, 38, 96, .45);
}
.btn-onDark { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.btn-onDark:hover {
  background: #fff; color: #161616; transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 24px -12px rgba(30, 38, 96, .45);
}

.link-outline-onDark {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; padding: 8px 12px;
  transition: background .18s ease, color .18s ease;
}
.link-outline-onDark:hover { background: #fff; color: #1E2660; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
/* At the top of the page the bar is transparent, so it reads as part of the
   page rather than a tray sitting on it. Once the page scrolls it turns into a
   solid navy bar and its contents invert to white.

   Everything inside the bar reads its colours from these four custom
   properties, so the whole inversion is one rule rather than a dozen. The
   `body[data-nav="ondark"]` case is for pages whose header is already navy
   (Our scope) — there the bar has to be inverted from the very top. */
.nav {
  --nav-fg: var(--ink-secondary);
  --nav-fg-strong: var(--navy);
  --nav-hover-bg: color-mix(in srgb, var(--rule) 24%, transparent);
  --nav-border: var(--rule);

  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Matched to the .18s colour transitions on the bar's contents. If the bar
     lagged behind them you would get white text on a light bar for a beat. */
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck {
  background: var(--nav-solid);
  border-bottom-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -18px rgba(10, 14, 31, .55);
}
/* Pages that open on a flat-colour header tint the bar to match, so the bar
   and the header read as one surface. Our scope opens navy, What we do cream.
   :not(.is-stuck) so these never out-specify the scrolled state. */
body[data-nav="ondark"] .nav:not(.is-stuck) { background: var(--nav-solid); }
body[data-nav="cream"] .nav:not(.is-stuck) { background: var(--cream); }

.nav.is-stuck,
body[data-nav="ondark"] .nav {
  --nav-fg: rgba(255, 255, 255, .78);
  --nav-fg-strong: #fff;
  --nav-hover-bg: rgba(255, 255, 255, .12);
  --nav-border: rgba(255, 255, 255, .35);
}
/* One property, so this replaces the dark-theme rule rather than stacking a
   second invert on top of it. */
.nav.is-stuck .logo,
body[data-nav="ondark"] .nav .logo { filter: brightness(0) invert(1); }

.nav-strip {
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0 34%, var(--gold) 34% 58%, var(--navy) 58% 100%);
}
/* The navy third of the strip would vanish against a navy bar. */
.nav.is-stuck .nav-strip,
body[data-nav="ondark"] .nav-strip {
  background: linear-gradient(90deg, var(--red) 0 34%, var(--gold) 34% 58%, rgba(255, 255, 255, .22) 58% 100%);
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; min-height: 75px; padding: 11px clamp(12px, 1.6vw, 26px);
}
/* Fades with the bar. Snapping the invert would put a white logo on a light
   bar for the length of the background transition. */
.nav-bar .logo { height: 44px; width: auto; transition: filter .2s ease; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-link, .nav-links summary {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px;
  border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--nav-fg);
  white-space: nowrap; transition: background .18s ease, color .18s ease;
}
.nav-link:hover, .nav-links summary:hover, .nav-link[aria-current="page"] {
  color: var(--nav-fg-strong); background: var(--nav-hover-bg);
}
/* The dropdown chevron. It sat at 9px because the old .caret rule painted a
   red blinking bar over it, so its real size never showed. Unmasked it reads
   as a speck: the ▾ in the markup is U+25BE, whose ink is only 3px tall at
   11px, so no font-size fixes it. Drawn with borders instead — crisp at any
   DPI, and it matches the language picker's stroked chevron. The glyph itself
   is zeroed rather than removed, so the markup still degrades to a caret with
   CSS off. */
.nav-links summary .caret {
  font-size: 0; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  color: var(--nav-fg); opacity: .75;
}
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--card); border: 1.5px solid var(--rule); border-radius: 11px; padding: 6px;
  box-shadow: 0 20px 48px rgba(16, 20, 45, .2); z-index: 150;
  display: flex; flex-direction: column;
}
.nav-drop-menu a { padding: 10px 11px; border-radius: 7px; font-size: 13.5px; color: var(--ink); }
.nav-drop-menu a:hover { background: var(--cream); color: var(--ink); }

.nav-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.nav-burger {
  display: none; width: 40px; height: 40px; border: 1.5px solid var(--nav-border);
  border-radius: 8px; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; color: var(--nav-fg-strong);
  transition: transform .2s var(--ease), border-color .18s ease, box-shadow .22s ease, color .18s ease;
}
.nav-burger:hover { border-color: var(--nav-fg-strong); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(30, 38, 96, .5); }
.nav-burger .bl { display: block; width: 17px; height: 1.8px; background: currentColor; border-radius: 2px; position: relative; transition: background .18s ease; }
.nav-burger .bl::before, .nav-burger .bl::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.8px;
  background: currentColor; border-radius: 2px; transition: transform .28s var(--ease);
}
.nav-burger .bl::before { top: -5.5px; }
.nav-burger .bl::after { top: 5.5px; }
.nav-burger.open .bl { background: transparent; }
.nav-burger.open .bl::before { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open .bl::after { transform: translateY(-5.5px) rotate(-45deg); }

.nav-panel {
  display: none;
  border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  background: var(--paper); padding: 8px clamp(12px, 1.6vw, 26px) 18px;
  max-height: calc(100vh - 78px); overflow-y: auto;
}
.nav-panel.open { display: block; }
.nav-panel .np-link {
  display: block; padding: 14px 4px; font-size: 16px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
}
.nav-panel .np-link:hover { color: var(--red); }
.nav-panel .btn { width: 100%; margin-top: 14px; }

/* Language picker ---------------------------------------------------------- */
.lang { position: relative; flex-shrink: 0; }
/* Flag-first: no chip and no "EN" label, just the current flag at a size you
   can actually read plus the disclosure arrow. The 38px height is kept even
   though the border is gone, so the hit target still matches the theme
   switch beside it. */
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 5px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--nav-fg); transition: background .18s ease, color .18s ease;
}
.lang-btn:hover { background: var(--nav-hover-bg); color: var(--nav-fg-strong); }
/* The flag is the label now. Kept in the DOM rather than deleted so the
   markup still says which language is current. */
.lang-btn .lang-code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lang-btn .flag { width: 34px; height: 17px; border-radius: 3px; }
.lang-btn .chev { width: 11px; height: 11px; opacity: .8; }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 9px); right: 0; min-width: 180px;
  background: var(--card); border: 1.5px solid var(--rule); border-radius: 11px; padding: 6px;
  box-shadow: 0 20px 48px rgba(16, 20, 45, .2); z-index: 140;
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--f-body); font-size: 13.5px; color: var(--ink);
}
.lang-menu button:hover { background: var(--cream); }
.lang-menu .native { font-size: 11.5px; color: var(--ink-tertiary); }
.flag {
  width: 21px; height: 14px; border-radius: 2.5px; overflow: hidden; flex-shrink: 0;
  display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
html[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .20); }
.flag svg { width: 100%; height: 100%; display: block; }
.chev { width: 9px; height: 9px; color: currentColor; opacity: .7; flex-shrink: 0; }
.lang-menu .chev { color: var(--ink-tertiary); opacity: 1; }
.tick { width: 14px; height: 14px; color: var(--navy); flex-shrink: 0; }
.lang-menu button:not([aria-selected="true"]) .tick { display: none; }

/* Theme switch ------------------------------------------------------------- */
.theme-sw {
  position: relative; width: 66px; height: 38px; flex-shrink: 0; padding: 0;
  border: 1.5px solid var(--nav-border); border-radius: 99px; background: transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .22s ease, border-color .22s ease;
}
.theme-sw:hover { border-color: var(--nav-fg-strong); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(30, 38, 96, .45); }
.theme-sw .ghost { position: absolute; top: 11px; width: 13px; height: 13px; color: #8A8A8A; pointer-events: none; transition: opacity .3s ease; }
.theme-sw .ghost-sun { left: 9px; opacity: 0; }
.theme-sw .ghost-moon { right: 9px; opacity: .55; }
html[data-theme="dark"] .theme-sw .ghost-sun { opacity: .55; }
html[data-theme="dark"] .theme-sw .ghost-moon { opacity: 0; }
.theme-sw .knob {
  position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .20); background: #1E2660;
  transition: transform .42s ease, background .3s ease;
}
html[data-theme="dark"] .theme-sw .knob { background: #d4a949; transform: translateX(28px); }
.theme-sw .knob span { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity .26s ease, transform .42s ease; }
.theme-sw .knob .i-sun { opacity: 1; }
.theme-sw .knob .i-moon { opacity: 0; transform: rotate(70deg); }
html[data-theme="dark"] .theme-sw .knob .i-sun { opacity: 0; transform: rotate(70deg); }
html[data-theme="dark"] .theme-sw .knob .i-moon { opacity: 1; transform: none; }
.theme-sw .ghost svg { width: 13px; height: 13px; display: block; }
.theme-sw .knob svg { width: 15px; height: 15px; display: block; color: var(--paper); }
html[data-theme="dark"] .theme-sw .knob svg { color: #141833; }

/* On the navy bar the light-theme knob is navy-on-navy, so it flips to white.
   The dark-theme knob is already gold and reads fine, so it keeps its colour —
   these selectors out-specify the plain html[data-theme="dark"] rules above,
   which is why the dark case has to be restated rather than left to inherit. */
.nav.is-stuck .theme-sw .knob,
body[data-nav="ondark"] .theme-sw .knob { background: #fff; }
.nav.is-stuck .theme-sw .knob svg,
body[data-nav="ondark"] .theme-sw .knob svg { color: #1E2660; }
html[data-theme="dark"] .nav.is-stuck .theme-sw .knob,
html[data-theme="dark"] body[data-nav="ondark"] .theme-sw .knob { background: #d4a949; }
html[data-theme="dark"] .nav.is-stuck .theme-sw .knob svg,
html[data-theme="dark"] body[data-nav="ondark"] .theme-sw .knob svg { color: #141833; }
.nav.is-stuck .theme-sw .ghost,
body[data-nav="ondark"] .theme-sw .ghost { color: rgba(255, 255, 255, .75); }

/* The primary button is navy-filled, which disappears on a navy bar. */
.nav.is-stuck .nav-tools .btn-primary,
body[data-nav="ondark"] .nav-tools .btn-primary { background: #fff; color: #1E2660; }
.nav.is-stuck .nav-tools .btn-primary:hover,
body[data-nav="ondark"] .nav-tools .btn-primary:hover {
  background: var(--cream); color: #1E2660;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .nav.is-stuck .nav-tools .btn-primary:hover,
html[data-theme="dark"] body[data-nav="ondark"] .nav-tools .btn-primary:hover { background: #EAECF5; }

/* --------------------------------------------------------------------------
   Hairline grid — the signature card motif. The 1px gaps read as interior
   rules. Never rebuild these as separate rounded cards with shadows.
   -------------------------------------------------------------------------- */
.hgrid {
  display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: 18px; overflow: hidden;
}
.hgrid > * { background: var(--card); }
.hgrid-2 { grid-template-columns: 1fr 1fr; }
.hgrid-3 { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   Home hero

   Two columns: the copy and the four proof tiles on the left, one tall
   photograph on the right. The frame is not given an aspect ratio — it
   stretches to whatever height the left column ends up being, which is what
   makes it the largest thing on the page. Below 980px the columns stack and
   the frame goes back to a 4:5 portrait crop.
   -------------------------------------------------------------------------- */
.g-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 68px; align-items: stretch; }

.hero-media { display: flex; flex-direction: column; min-width: 0; }
.hero-frame { position: relative; flex: 1; display: flex; flex-direction: column; }
.hero-frame > .frame { flex: 1; display: flex; flex-direction: column; }
.hero-frame .frame-media { flex: 1; min-height: 560px; }

.hero-disc {
  position: absolute; top: -20px; right: -16px; width: 136px; height: 136px;
  border-radius: 50%; background: var(--gold-soft);
}
.hero-seal {
  position: absolute; left: -18px; bottom: 70px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 14px; padding: 13px 16px;
  box-shadow: 0 20px 44px -24px rgba(30, 38, 96, .5);
}

/* --------------------------------------------------------------------------
   Hero footage

   Three layers in one frame: the still, the clip over it, and a scrim over
   both. The still is the whole hero below the 980px split and under reduced
   motion, where the <video> is display:none and never requested at all.
   -------------------------------------------------------------------------- */
.frame-media.has-video {
  background: #161C4A;   /* literal: it sits under the footage, so it stays dark in both themes */
}
/* The still. Not matched by the .frame-media > img rule above — this one is
   wrapped in a <picture> for the WebP/JPEG choice, so it is a grandchild. */
.hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 34%;   /* keeps the spire in the 4:5 mobile crop */
}
/* Styled on the class alone, not `.frame-media > video`. The two rules that
   switch this off — the 980px stack and reduced motion — are single-class
   selectors too, so a descendant selector here would out-specify them and the
   clip would keep rendering where it must not. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.04);   /* holds the orange back against the navy palette */
  /* Transparent until it is actually running. A <video> with no frames yet is
     not a transparent element — it paints an opaque box — so without this the
     panel is a flat rectangle over the still for as long as the clip takes to
     arrive, which is deliberately not soon. site.js adds .is-playing on the
     first `playing` event, and if playback is refused the still simply stays. */
  opacity: 0; transition: opacity .7s var(--ease);
}
.hero-video.is-playing { opacity: 1; }

/* On the desktop split this is depth and edge definition only: no text sits on
   the footage, and the headline is on the page background at full contrast.
   Below 760px it becomes a genuine legibility scrim and is replaced wholesale
   — the phone layout reverses the headline out over the clip. */
.hero-video-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(30, 38, 96, .30) 0%, transparent 32%,
    transparent 62%, rgba(30, 38, 96, .44) 100%);
}
html[data-theme="dark"] .hero-video-scrim {
  background: linear-gradient(180deg,
    rgba(10, 14, 31, .44) 0%, transparent 36%,
    transparent 60%, rgba(10, 14, 31, .58) 100%);
}

/* The 2x2 proof block, on the same 580px measure as the paragraph above it. */
.g-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 44px; max-width: 580px;
}
.stat {
  display: flex; align-items: flex-start; gap: 13px; min-width: 0;
  background: color-mix(in srgb, var(--sand-soft) 82%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  border-radius: 14px; padding: 18px 18px 17px;
}
.stat-bar { width: 3px; height: 42px; background: var(--red); border-radius: 2px; flex-shrink: 0; margin-top: 3px; }
.stat-n { font-family: var(--f-data); font-size: 36px; color: var(--navy); line-height: 1; }
.stat-l {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-secondary); margin-top: 6px;
}
.stat-s { font-size: 12px; color: var(--ink-tertiary); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Row and card patterns that carry a hover state
   -------------------------------------------------------------------------- */
.service-rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.row-service {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) 40px; gap: 36px;
  align-items: baseline; padding: 30px 4px; border-bottom: 1px solid var(--rule); color: var(--navy);
  transition: background .18s ease;
}
.row-service:hover { background: var(--cream); color: var(--navy); }
.row-service h3 { font-family: var(--f-display); font-size: 27px; line-height: 1.02; letter-spacing: -.03em; }
.row-service p { font-size: 15.5px; line-height: 1.6; color: var(--ink-secondary); }
.row-service .arrow { font-family: var(--f-mono); font-size: 15px; color: var(--red); justify-self: end; }

.inst-card {
  padding: 30px 28px; min-height: 210px; display: flex; flex-direction: column;
  justify-content: space-between; color: var(--navy); transition: background .18s ease;
}
.inst-card:hover { background: var(--cream); color: var(--navy); }
/* Partner marks are supplied by each institution in their own colours, so the
   tile they sit on is a literal light beige in both themes — the same
   deliberate exception the CMA band and the CTA panel make. Recolouring or
   inverting a third-party logo to suit our dark mode is not ours to do. */
.logo-tile {
  width: 100%; height: 62px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 10px; background: #F7EBD3; display: flex; align-items: center;
  justify-content: center; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 22px;
}
.logo-tile img { max-width: 76%; max-height: 32px; width: auto; height: auto; object-fit: contain; }
/* Saxo ships a stacked wordmark-over-tagline lockup; the other two are single
   lines. Give it the extra height so the three read at a similar optical size. */
.logo-tile img.is-stacked { max-height: 44px; max-width: 46%; }

/* The 16:9 logo panel at the head of each institution card. Absolutely
   positioned, so the parent's padding does not apply — the inset reproduces
   the 20px 26px breathing room the handoff specifies. */
/* Centred by flex, not by inset: an absolutely positioned replaced element
   resolves width:auto to its INTRINSIC size, so pinning all four sides left
   each mark sitting at the top-left of the tile instead of filling it. The
   tile's own 20px 26px padding is the breathing room. */
.inst-logo-tile { background: #F7EBD3; display: flex; align-items: center; justify-content: center; }
.inst-logo { width: auto; height: auto; max-width: 100%; max-height: 74%; object-fit: contain; }
/* Saxo's stacked wordmark-over-tagline lockup is nearly square next to two
   single-line marks, so it is capped by height rather than width. */
.inst-logo.is-stacked { max-height: 100%; max-width: 72%; }

/* --------------------------------------------------------------------------
   Image frames and slots
   -------------------------------------------------------------------------- */
.frame {
  position: relative; border-radius: 22px; border: 1px solid var(--rule);
  overflow: hidden; background: var(--sand-soft);
  box-shadow: 0 26px 64px -34px rgba(30, 38, 96, .38);
}
.frame-cap { height: 4px; }
.cap-rgn { background: linear-gradient(90deg, var(--red) 0 36%, var(--gold) 36% 60%, var(--navy) 60% 100%); }
.cap-ngr { background: linear-gradient(90deg, var(--navy) 0 28%, var(--gold) 28% 50%, var(--red) 50% 100%); }
.cap-grn { background: linear-gradient(90deg, var(--gold) 0 26%, var(--red) 26% 52%, var(--navy) 52% 100%); }
.cap-gr  { background: linear-gradient(90deg, var(--gold) 0 44%, var(--red) 44% 100%); }
.cap-ngr2 { background: linear-gradient(90deg, var(--navy) 0 34%, var(--gold) 34% 58%, var(--red) 58% 100%); }
.frame-media { position: relative; }
/* Both shapes, because a <picture> puts the <img> one level deeper. */
.frame-media > img,
.frame-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The process-section cut-out. It is anchored to the foot of the disc and
   clipped by it, so the waist crop lands where the circle has narrowed to
   nothing and never reads as a severed torso. */
.process-portrait {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 92%; width: auto;
}

/* Placeholder standing in for photography that does not exist yet. Replace the
   whole .slot element with an <img> / <picture> once the shot lands. */
.slot {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--rule) 90%, var(--ink-tertiary));
  border-radius: 12px; margin: 10px; background: transparent;
}
.slot-id { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.slot-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-tertiary); max-width: 40ch; line-height: 1.6; }
.slot--circle { border-radius: 50%; margin: 0; }
.slot--tile { margin: 0; border: 0; }

/* The image brief printed under every slot, so the prompt sits beside the
   placeholder it belongs to. Delete it when the real asset goes in. */
.brief {
  font-family: var(--f-mono); font-size: 10.5px; line-height: 1.65; letter-spacing: .03em;
  color: var(--ink-tertiary); margin-top: 13px; max-width: 92ch;
}

/* --------------------------------------------------------------------------
   The founder card — home and /since-1989
   -------------------------------------------------------------------------- */
/* width + max-width, not max-width alone: the stacked layout below gives it an
   auto inline margin, and an auto margin on a grid item drops it out of stretch
   and back to fit-content — which here is the width of the name plate. */
.founder-card {
  position: relative; width: 100%; max-width: 470px; border-radius: 22px;
  border: 1px solid var(--rule); overflow: hidden; background: var(--cream-card);
  box-shadow: 0 26px 64px -34px rgba(30, 38, 96, .38);
}

/* The portrait is a cut-out on transparency, so it has to bring its own light
   with it. His suit is within a few points of the dark paper, and on that paper
   a bare cut-out loses its whole outline. The disc under it is that light, and
   it stays in the light theme too — it is what lifts the figure off the card
   instead of letting the shoulders bleed into the border. */
.founder-media { position: relative; aspect-ratio: 940 / 1138; }
.founder-media::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 52% at 50% 40%,
    #FFFFFF 0%, color-mix(in srgb, #FFFFFF 62%, transparent) 56%, transparent 76%);
}
html[data-theme="dark"] .founder-media::before {
  background: radial-gradient(58% 52% at 50% 40%,
    #F2EEE6 0%, color-mix(in srgb, #F2EEE6 44%, transparent) 56%, transparent 76%);
}
.founder-media > picture > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}

.founder-plate {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 20px 26px 23px; border-top: 1px solid var(--rule); background: var(--card);
}
.founder-name { font-family: var(--f-display); font-size: 21px; letter-spacing: -.02em; color: var(--navy); }
.founder-role {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-tertiary); margin-top: 7px;
}
.founder-year { font-family: var(--f-data); font-size: 26px; line-height: 1; color: var(--red); }

/* The three figures under the founder copy on the home page. Same hairline
   grid as .strip-4, at a third of the scale. */
.founder-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); margin-top: 34px;
}
.founder-stats > div { background: var(--paper); padding: 18px 4px 17px; }
.founder-stats .n { font-family: var(--f-data); font-size: 30px; line-height: 1; color: var(--navy); }
.founder-stats .l {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-tertiary); margin-top: 10px; line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Amber blocks — legal blanks awaiting counsel sign-off. Visible on purpose.
   Never fill a [CONFIRM] in with a plausible-looking value.
   -------------------------------------------------------------------------- */
.amber { border: 2px dashed var(--flag); border-radius: 16px; background: var(--flag-bg); padding: 24px 26px; }
.amber-lg { border-radius: 18px; padding: 28px 32px; }
.amber-label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--flag); margin-bottom: 10px;
}
/* A chip sits inline in a sentence, so it must be allowed to wrap — the long
   ones are wider than a phone. box-decoration-break keeps both fragments
   looking like chips rather than one chip and one bare strip of colour. */
.confirm {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 400;
  background: var(--flag); color: #fff; padding: 2px 7px; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.confirm-xs { font-size: 11px; padding: 2px 6px; border-radius: 3px; }

.risk-strip {
  background: var(--flag-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--flag) 40%, transparent);
  padding: 18px 0;
}
.risk-strip .wrap { display: flex; gap: 14px; align-items: flex-start; }
.risk-chip {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--flag); color: #fff; padding: 5px 9px; border-radius: 4px; flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FAQ rows
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:last-child.no-rule { border-bottom: 0; }
.faq summary {
  display: flex; justify-content: space-between; gap: 24px; padding: 24px 4px;
  font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em;
  color: var(--navy); line-height: 1.25;
}
.faq summary .plus { font-family: var(--f-mono); font-size: 22px; color: var(--red); }
.faq p { font-size: 15.5px; line-height: 1.7; color: var(--ink-secondary); margin: 0 0 22px; max-width: 78ch; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.seg { display: flex; gap: 6px; margin-bottom: 26px; }
.seg span { flex: 1; height: 4px; border-radius: 99px; background: var(--rule); }
.seg span.done { background: var(--ok); }
.seg span.now { background: var(--red); }

.step h3 { font-family: var(--f-display); font-size: 26px; letter-spacing: -.025em; color: var(--navy); margin-bottom: 6px; }
.step > p { font-size: 14px; color: var(--ink-secondary); margin-bottom: 22px; line-height: 1.55; }
.field { margin-bottom: 18px; }
.field > label, .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.field-label .opt { font-weight: 400; color: var(--ink-tertiary); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips-col { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }

/* Hidden radio + label. Keyboard-navigable as-is. */
.chip-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-r + label {
  display: inline-block; border: 1.5px solid var(--rule); background: var(--paper);
  border-radius: 8px; padding: 11px 15px; font-size: 14px; color: var(--ink-secondary);
  cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.chips-col .chip-r + label { display: block; padding: 12px 15px; }
.chip-r + label:hover { border-color: var(--navy); color: var(--navy); }
.chip-r:checked + label { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.chip-r.danger + label:hover { border-color: var(--red); color: var(--red); }
.chip-r.danger:checked + label { background: var(--red); border-color: var(--red); color: #fff; }
.chip-r:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; border: 1.5px solid var(--rule); border-radius: 8px;
  font-family: inherit; font-size: 15px; color: var(--navy); background: var(--paper);
}
input[type="text"], input[type="email"], input[type="tel"] { height: 46px; padding: 0 14px; }
textarea { height: 96px; padding: 12px 14px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--navy); }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--ink-secondary); line-height: 1.55; margin-bottom: 6px; }
.consent input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: #1E2660; }

.step-actions { display: flex; gap: 10px; margin-top: 26px; align-items: center; }
.step-actions .spacer { flex: 1; }

.hard-stop {
  border: 2px solid var(--red); border-radius: 14px; padding: 26px;
  background: color-mix(in srgb, var(--red) 6%, var(--paper)); margin-top: 20px;
}
.hard-stop h4 { font-family: var(--f-display); font-size: 21px; color: var(--red); letter-spacing: -.02em; margin-bottom: 10px; }
.hard-stop p { font-size: 14.5px; color: var(--ink-secondary); line-height: 1.6; }

.form-error {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  border: 1.5px solid var(--red); background: color-mix(in srgb, var(--red) 6%, var(--paper));
  color: var(--red); font-size: 13.5px; line-height: 1.55;
}
input.field-invalid, textarea.field-invalid { border-color: var(--red); }

/* Bot trap. Off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.slot-pill {
  border: 1.5px solid var(--rule); background: var(--paper); border-radius: 8px;
  padding: 12px 8px; text-align: center; font-family: var(--f-mono); font-size: 12.5px;
  color: var(--ink-secondary);
}
.slot-pill.taken { opacity: .35; text-decoration: line-through; color: var(--ink-tertiary); }

.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee-band {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 26px 0; margin-top: 64px; background: var(--sand-soft);
}
.marquee-mask {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee-track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; animation: sc 38s linear infinite; }
.marquee-track span {
  font-family: var(--f-display); font-size: 25px; letter-spacing: -.02em; color: var(--navy);
  padding: 0 32px; white-space: nowrap; display: flex; align-items: center; gap: 32px; opacity: .85;
}
.marquee-track span i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@keyframes sc { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* The hero typewriter's cursor. Named for the typewriter specifically: the
   nav's "Services ▾" glyph is also class="caret", and when this rule was
   called .caret that chevron inherited the red bar and the blink. */
.type-caret {
  display: inline-block; width: .055em; height: .74em; margin-left: .05em;
  background: var(--red); transform: translateY(.02em);
  animation: blink 1.05s steps(1, end) infinite;
}

/* --------------------------------------------------------------------------
   Footer, floats
   -------------------------------------------------------------------------- */
.footer {
  padding: 72px 0 34px; border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--sand-soft) 0%, var(--paper) 58%);
}
.footer-risk { border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px; background: var(--cream-card); margin-bottom: 30px; }
.footer-risk h2 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 11px; }
.footer-risk p { font-size: 13px; line-height: 1.7; color: var(--ink-secondary); }
.footer-risk p + p { margin-top: 10px; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 42px; margin-bottom: 40px; }
.footer-cols .logo { height: 42px; width: auto; }
.footer-cols h2 {
  font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--ink-tertiary);
  text-transform: uppercase; margin-bottom: 15px; font-family: var(--f-mono);
}
.footer-cols nav, .footer-cols .stack { display: flex; flex-direction: column; }
.footer-cols a, .footer-cols .stack span { font-weight: 500; font-size: 14px; color: var(--ink-secondary); padding: 5px 0; }
.footer-cols a:hover { color: var(--red); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; padding-top: 24px;
  margin-top: 30px; border-top: 1px solid var(--rule); font-size: 12.5px;
  color: var(--ink-tertiary); flex-wrap: wrap; gap: 12px;
}
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-badges span {
  padding: 5px 11px; border: 1px solid var(--rule); border-radius: 6px;
  font-size: 11.5px; font-family: var(--f-mono); letter-spacing: .05em;
}
.footer-badges span.on { border-color: var(--red); color: var(--red); }

.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 56px; height: 56px;
  border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .7);
  transition: transform .22s var(--ease), box-shadow .22s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 30px -12px rgba(37, 211, 102, .75); }
.wa-float:active { transform: translateY(0) scale(.97); }
.wa-float svg { width: 29px; height: 29px; fill: #fff; }

/* --------------------------------------------------------------------------
   Phone app shell — the parts that only exist below 760px

   Direction 2a from the handoff. These four are inert above the breakpoint:
   the tab bar is not rendered, and the three hero pieces either vanish or
   drop out of the box tree. All of their geometry lives in the 760px block
   at the foot of this file.
   -------------------------------------------------------------------------- */
.mtabs { display: none; }
.rail-head, .hero-licence { display: none; }
/* display:contents, so above 760px this wrapper is not a box at all and the
   eyebrow, headline and subtitle remain direct children of .hero-copy —
   the desktop hero is unchanged by its existence. */
.hero-lede { display: contents; }

/* --------------------------------------------------------------------------
   Responsive. The prototype had no content breakpoints; these are the ones
   called out in the handoff as the production fix.
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-btn-desktop { display: none !important; }
}

@media (max-width: 980px) {
  .g-hero { grid-template-columns: 1fr; gap: 44px; }
  /* Stacked, there is no left column to match, so the frame goes back to the
     portrait crop rather than stretching to an arbitrary height. */
  .hero-frame .frame-media { flex: none; min-height: 0; aspect-ratio: 4/5; }
  /* Poster only on a phone. Combined with preload="none" and the matching
     981px gate in site.js, no video byte is ever requested down here. */
  .hero-video { display: none; }
  .g-stats { max-width: none; }
  .g-cma { grid-template-columns: 1fr !important; gap: 34px !important; }
  .g-cma .ruled { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; }
}

@media (max-width: 900px) {
  .g-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .strip-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .strip-4 > * { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 860px) {
  .wrap { padding: 0 24px; }
  .head-split { grid-template-columns: 1fr; gap: 26px; }
  .g-service { grid-template-columns: 1fr !important; gap: 26px !important; }
  .g-service .sticky-col { position: static !important; }
  .g-2 { grid-template-columns: 1fr !important; }
  .hgrid-2, .hgrid-3 { grid-template-columns: 1fr; }
  .g-about { grid-template-columns: 1fr !important; gap: 44px !important; }
  /* Once the two columns stack, the card would otherwise stretch to the full
     width of the wrap and the portrait with it. It stays at its own width and
     centres instead. */
  .founder-card { margin-inline: auto; }
  .g-form { grid-template-columns: 1fr !important; }
  .row-service { grid-template-columns: 1fr 40px !important; gap: 12px !important; }
  .row-service p { grid-column: 1 / -1; }
  .g-teaser { grid-template-columns: 1fr !important; gap: 26px !important; }
  .g-book { grid-template-columns: 1fr !important; gap: 26px !important; }
  .h2-sec { font-size: clamp(32px, 8vw, 44px); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 520px) {
  /* Keep the bar on one row: logo, language, theme, burger. Without this the
     nav wraps and eats a third of a phone screen. */
  .nav-bar { gap: 10px; }
  .nav-bar .logo { height: 34px; }
  /* The arrow stays: with no chip around it, it is the only thing marking
     this as a menu rather than a decorative flag. */
  .lang-btn { padding: 0 2px; gap: 5px; }
  .lang-btn .flag { width: 28px; height: 14px; }
}

@media (max-width: 600px) {
  .g-stats { grid-template-columns: 1fr !important; }
  .g-4 { grid-template-columns: 1fr !important; }
  .strip-4 { grid-template-columns: 1fr !important; }
  .wrap { padding: 0 20px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .cta-panel h2 { font-size: clamp(30px, 9vw, 40px) !important; }
}

/* --------------------------------------------------------------------------
   Phone app shell — direction 2a

   Below 760px the page stops being a narrowed desktop layout and becomes an
   app: a 52px top bar carrying nothing but the wordmark and two controls, a
   four-tab bar pinned to the bottom, two horizontal swipe rails, and a hero
   that runs edge to edge with the Dubai footage behind the headline. Spec:
   disposable files/design_handoff_sterling_site 2/MOBILE-2A.md.

   Four deliberate departures from that spec, all for production reasons:

   1. The tab bar is position:fixed, not a flex sibling of a height-locked
      scroller. The handoff's shell would stop the mobile URL bar collapsing
      on scroll — about 60px of screen given up permanently — and would break
      scroll restoration, pull-to-refresh and #anchor links. <body> carries
      the matching padding-bottom instead, which is the trade.
   2. The footer keeps its link columns. The bar reaches four of eight
      routes; the prototype only ever had four screens.
   3. The language control keeps the site's flag button rather than the drawn
      "EN" text pill, sized to the same 34px target.
   4. The bar keeps the site's invert-on-scroll behaviour rather than the
      permanently frosted bar in the drawing. That inversion is deliberate
      elsewhere and a phone has no reason to contradict it.

   Placement in this file is load-bearing. It must stay after the 980px block,
   which switches the clip off for the tablet band, and before the
   reduced-motion block, which switches it off again and has to win.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ---- Shell ------------------------------------------------------------ */
  /* Room for the fixed tab bar: 7 + 52 + 12 + 1, plus the home indicator. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .wrap { padding: 0 20px; }

  .nav-bar { min-height: 52px; padding: 0 14px; gap: 10px; flex-wrap: nowrap; }
  .nav-bar .logo { height: 29px; }
  .nav-burger, .nav-panel { display: none !important; }

  .lang-btn { height: 34px; }
  .lang-btn .flag { width: 26px; height: 13px; }
  /* The 66px sliding switch will not fit beside the wordmark in a 52px bar, so
     down here it collapses into the handoff's 34px circular button: the track
     becomes the circle, the two ghost glyphs go, and the knob — which already
     carries both icons and already swaps them by theme — fills it. The dark
     theme's slide has to be cancelled or the knob leaves the circle. */
  .theme-sw { width: 34px; height: 34px; border-radius: 50%; }
  .theme-sw .ghost { display: none; }
  .theme-sw .knob { inset: 1.5px; width: auto; height: auto; }
  html[data-theme="dark"] .theme-sw .knob { transform: none; }

  /* ---- Tab bar ---------------------------------------------------------- */
  .mtabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; gap: 4px;
    padding: 7px 6px max(12px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(14px); border-top: 1px solid var(--rule);
  }
  .mtab {
    flex: 1; min-height: 52px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; border-radius: 11px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-tertiary);
    transition: background .18s ease, color .18s ease, transform .18s var(--ease);
  }
  .mtab:active { transform: scale(.97); }
  .mtab-i {
    width: 21px; height: 21px; display: block; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  /* The label carries the state as colour, the icon as a red stroke. The
     9.5px label is deliberately small — the icon does the recognising. */
  .mtab[aria-current="page"] {
    color: var(--navy); background: color-mix(in srgb, var(--rule) 26%, transparent);
  }
  .mtab[aria-current="page"] .mtab-i { stroke: var(--red); }

  .wa-float {
    right: 16px; bottom: calc(88px + env(safe-area-inset-bottom));
    width: 48px; height: 48px;
  }
  .wa-float svg { width: 25px; height: 25px; }

  /* ---- Section rhythm --------------------------------------------------- */
  /* Desktop leaves 88–104px between sections. On a 390px screen that is a
     screenful of nothing every time, so the page steps down to the handoff's
     26–28px. The sections carry their padding as inline styles and have no
     classes of their own, hence !important — the same pattern this file
     already uses against the inline grids. */
  main > section { padding: 28px 0 0 !important; margin-top: 0 !important; }
  main > section:last-of-type { padding-bottom: 32px !important; }
  /* The three full-bleed bands need their own bottom padding back — with the
     blanket rule above, their colour would stop hard against the last line of
     text inside them. :has() rather than new classes, because the sections
     carry inline styles and nothing else to hook. */
  main > section:has(> .wrap > .g-cma) { padding: 24px 0 26px !important; margin-top: 28px !important; }
  main > section:has(.process-disc) { padding: 26px 0 !important; margin-top: 28px !important; }
  main > section:has(.cta-panel) { padding-bottom: 4px !important; }
  /* An auto-scrolling band of names is noise at this size, and the 2a home
     order does not include it. */
  .marquee-band { display: none; }

  /* ---- Type ------------------------------------------------------------- */
  .h1-page, .h1-wide { font-size: 30px; line-height: .98; letter-spacing: -.035em; }
  .h2-sec { font-size: 26px; line-height: 1; max-width: none; }
  .h2-mid { font-size: 24px; }
  .h3-sub { font-size: 20px; }
  .lead { font-size: 15px; line-height: 1.6; }
  .intro, .body-16 { font-size: 14.5px; line-height: 1.6; }
  .hdr-row { gap: 11px; margin-bottom: 16px !important; }
  .hdr-row .support { font-size: 14.5px; max-width: none; }
  .head-split { gap: 14px !important; }
  .page-head { padding: 22px 0 26px !important; }
  .page-head--tall { padding-bottom: 30px !important; }
  .page-head--flush { padding-bottom: 0 !important; }
  /* Our scope is the one page whose header is a bare styled <header>. */
  body[data-nav="ondark"] main > header { padding: 22px 0 28px !important; }

  /* ---- Hero ------------------------------------------------------------- */
  /* The one place the composition genuinely changes. .hero-media leaves the
     flow and runs the full viewport width behind the copy; .hero-lede holds
     the same 532px open in normal flow, so the paragraph, buttons and stat
     rail beneath it need no offsets of their own.

     532px is measured, not chosen — much under it and the headline block
     climbs into the licence chip. */
  .hero-head { padding: 0 !important; }
  .g-hero { position: relative; display: block; gap: 0; }
  .hero-media {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 532px; z-index: 0;
  }
  .hero-disc, .hero-seal, .hero-frame .frame-cap { display: none; }
  /* No frame down here — the photograph is the screen. The shadow is an
     inline style on the element, so it needs the !important. */
  .hero-frame > .frame {
    border: 0; border-radius: 0; background: none; box-shadow: none !important;
  }
  .hero-frame .frame-media { flex: 1; min-height: 0; aspect-ratio: auto; }
  /* Back on. The 980px rule switched it off for the tablet band above, where
     the panel is still a stacked still a long way down the page. */
  .hero-video { display: block; }
  /* Now a legibility scrim and not merely depth — the headline sits on it.
     One gradient for both themes: the type over it is white either way. Dark
     at both ends because that is where the type is, and the skyline is left to
     read through the middle, which is the only part with nothing over it. */
  .hero-video-scrim,
  html[data-theme="dark"] .hero-video-scrim {
    background: linear-gradient(178deg,
      rgba(10, 14, 31, .74) 0%, rgba(10, 14, 31, .60) 30%,
      rgba(10, 14, 31, .14) 55%,
      rgba(10, 14, 31, .58) 82%, rgba(10, 14, 31, .95) 100%);
  }
  /* The licence is the first thing on the screen, before the firm's own name. */
  .hero-licence {
    display: block; position: absolute; top: 18px; left: 20px; z-index: 2;
    font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: #fff; background: rgba(229, 37, 42, .92);
    padding: 6px 10px; border-radius: 99px;
  }

  /* The headline block sits at the top of the footage. The licence chip above
     it is absolutely positioned and so contributes no height of its own — the
     72px top padding is measured to clear it and leave a gap. The subtitle is
     the one thing left at the bottom: margin-top:auto on it eats the slack, so
     the skyline shows through between the two. */
  .hero-lede {
    display: flex; flex-direction: column; justify-content: flex-start;
    position: relative; z-index: 1; min-height: 532px;
    margin: 0 -20px; padding: 72px 20px 22px;
  }
  .hero-lede .h1-home {
    font-size: 34px; line-height: .98; letter-spacing: -.035em; color: #fff; margin: 0;
  }
  /* Hard-coded rather than var(--red): this sits on the photograph in both
     themes, and the light-theme token (#E5252A) sinks into the scrim. */
  .hero-lede .h1-home .red { color: #FF5B5F; }
  /* margin-top:auto is what holds this at the foot of the footage now that the
     headline has gone to the top. Instrument Serif ships one weight, so the
     extra heft is a hairline stroke in the text's own colour rather than
     font-weight, which would only get us the browser's synthetic bold. */
  .hero-lede .italic {
    font-size: 18px !important; line-height: 1.35 !important; max-width: none !important;
    margin: auto 0 0 !important; color: #fff !important;
    -webkit-text-stroke: .4px currentColor;
  }
  /* The word is fixed at "Introductions" down here — site.js does not start
     the typewriter below 760px, because a headline that reflows on top of a
     photograph moves around under the reader. */
  .type-caret { display: none; }

  .hero-copy .lead { margin: 20px 0 0 !important; }
  .hero-cta { flex-direction: column; gap: 9px !important; margin-top: 17px !important; }
  .hero-cta .btn { width: 100%; height: 50px; border-radius: 11px; font-size: 15px; font-weight: 600; }

  /* ---- Swipe rails ------------------------------------------------------ */
  /* The proof tiles and the institution grid become horizontal rails. The last
     card is meant to peek past the right edge — that peek is the only thing
     telling you the rail scrolls, so it must not be centred or padded away. */
  .g-stats, .inst-rail {
    display: flex; gap: 11px; max-width: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px 4px;
    /* Without this the snapport starts at the scrollport edge, so the browser
       immediately scrolls the first card over the 20px inset to snap it —
       the rail opens with its first card cut off against the screen edge. */
    scroll-padding-left: 20px;
  }
  .g-stats::-webkit-scrollbar, .inst-rail::-webkit-scrollbar { display: none; }
  .g-stats > *, .inst-rail > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* Only the swipe hint lives in here now, so it is pushed to the end rather
     than spaced against a label that is no longer there. */
  .rail-head {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
    margin: 26px 0 12px; font-family: var(--f-mono); font-size: 10px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ink-tertiary);
  }
  .rail-swipe { color: var(--red); letter-spacing: .04em; text-transform: none; }

  .stat {
    width: 172px; flex-direction: column; gap: 0;
    background: var(--sand-soft); border-radius: 15px; padding: 15px 15px 14px;
  }
  .stat-bar { display: none; }
  .stat-n { font-size: 30px; }
  .stat-l { font-size: 9.5px; letter-spacing: .09em; margin-top: 7px; }

  /* Three columns still fit on a phone — the labels are two words each and are
     allowed to wrap onto a second line rather than the row breaking apart. */
  .founder-stats .n { font-size: 25px; }
  .founder-stats .l { font-size: 9px; letter-spacing: .08em; margin-top: 8px; }

  /* .hgrid paints its hairlines with a 1px gap over a --rule background; a
     rail has no hairlines, so that scaffolding is stripped and each card
     carries its own border instead. */
  .inst-rail { background: none; border: 0; border-radius: 0; }
  .inst-rail .inst-card {
    width: 228px; min-height: 0; padding: 0; justify-content: flex-start;
    background: var(--card); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  }
  .inst-rail .logo-tile {
    height: 96px; margin-bottom: 0; padding: 16px 20px;
    border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  }
  .inst-rail .logo-tile img { max-height: 44px; max-width: 84%; }
  .inst-rail .logo-tile img.is-stacked { max-height: 56px; max-width: 56%; }
  /* The card's two text blocks are unclassed divs with inline type sizes, so
     they are addressed by position and overridden with !important. */
  .inst-rail .inst-card > div:not(.logo-tile) { padding: 0 15px; }
  .inst-rail .inst-card > div:nth-child(2) { padding-top: 14px; }
  .inst-rail .inst-card > div:nth-child(2) > div:first-child { font-size: 9px !important; margin-bottom: 6px !important; }
  .inst-rail .inst-card > div:nth-child(2) > div:last-child { font-size: 18px !important; }
  .inst-rail .inst-card > div:last-child {
    padding-bottom: 15px; font-size: 12.5px !important; margin-top: 5px !important;
  }

  /* ---- CMA band --------------------------------------------------------- */
  .g-cma { gap: 20px !important; }
  .g-cma .ruled { padding-top: 20px !important; }

  /* ---- Service rows ----------------------------------------------------- */
  /* Title over description in one column with the arrow beside them, rather
     than the 860px arrangement that drops the description onto its own row
     and leaves the arrow stranded on the line above. */
  .row-service {
    grid-template-columns: minmax(0, 1fr) 22px !important;
    gap: 3px 12px !important; padding: 15px 2px !important;
    min-height: 64px; align-items: center;
  }
  .row-service h3 { grid-column: 1; font-size: 17px; line-height: 1.15; }
  .row-service p { grid-column: 1 !important; font-size: 13px; line-height: 1.45; }
  .row-service .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 16px; }

  /* ---- Process ---------------------------------------------------------- */
  /* The portrait comes back — it was hidden here before because at 214px it
     was half a phone screen. At the handoff's 96px it earns its place. */
  .process-disc { display: block !important; width: 96px !important; height: 96px !important; }
  /* The red accent rule crossing the portrait was drawn against the 214px
     disc, so at 96px it shot off the left edge of the screen. */
  .process-disc > div:last-child { left: -6px !important; bottom: 15px !important; width: 38px !important; }
  /* That header is a wrapping flex row of heading, supporting line and disc.
     At this width all three take a row each and the portrait ends up alone in
     a band of its own, so the heading is pinned full-width and the supporting
     line sits beside the disc instead. */
  .wrap > div:has(> .process-disc) {
    gap: 16px !important; margin-bottom: 22px !important; align-items: center !important;
  }
  .wrap > div:has(> .process-disc) > h2 { flex: 1 1 100% !important; font-size: 26px !important; max-width: none !important; }
  /* An explicit basis, not auto: at auto the paragraph's content width fills
     the line on its own and pushes the disc onto a third row. */
  .wrap > div:has(> .process-disc) > p {
    flex: 1 1 150px !important; min-width: 0; font-size: 14px !important; max-width: none !important;
  }
  .g-4 { gap: 14px !important; }
  .g-teaser { margin-top: 24px !important; padding: 20px 17px !important; border-radius: 16px !important; gap: 18px !important; }

  /* ---- FAQ -------------------------------------------------------------- */
  .faq summary { font-size: 15.5px; min-height: 52px; align-items: center; gap: 14px; padding: 15px 2px; }
  .faq summary .plus { font-size: 19px; }
  .faq p { font-size: 13.5px; line-height: 1.65; margin-bottom: 16px; }

  /* ---- CTA panel -------------------------------------------------------- */
  .cta-panel { padding: 32px 22px !important; border-radius: 20px !important; }
  .cta-panel h2 { font-size: 29px !important; line-height: 1 !important; letter-spacing: -.035em; }
  .cta-panel .btn { width: 100%; height: 48px; border-radius: 10px; font-size: 14.5px; }

  /* ---- Amber blocks, risk strip, hairline stacks ------------------------ */
  .amber, .amber-lg { padding: 16px 15px !important; border-radius: 12px !important; }
  /* The chip is 145px of a 350px line, which leaves the warning itself in a
     column six words wide. It goes above the text down here instead. */
  .risk-strip { padding: 13px 0; }
  .risk-strip .wrap { flex-direction: column; gap: 8px; }
  .risk-chip { align-self: flex-start; font-size: 9px; padding: 4px 7px; }
  .risk-strip p { font-size: 12px !important; line-height: 1.6 !important; }
  .hgrid { border-radius: 16px; }
  /* The four-figure strip on /since-1989 sets its numerals at 60px inline. One
     to a row on a phone, that is a screen and a half of four numbers, so they
     come down to the same 30px the stat rail uses. */
  .strip-4 > div { padding: 18px 4px !important; }
  .strip-4 > div > div:first-child { font-size: 30px !important; }
  /* The hairline-stack cells carry 30px 26px inline — a seventh of the screen
     in padding on each side. The institutions rail is excluded: its cards run
     their logo header to the card edge and pad the text block instead. */
  .hgrid:not(.inst-rail) > div { padding: 18px 17px !important; min-height: 0 !important; }
  /* Body copy on the inner pages is set inline at 17–19px. Mono notes opt out
     via their own inline font-family — those are small on purpose. */
  .g-service p:not([style*="f-mono"]),
  .head-split p:not([style*="f-mono"]) { font-size: 15px !important; line-height: 1.6 !important; }

  /* ---- Enquiry form ----------------------------------------------------- */
  .chip-r + label {
    display: flex; align-items: center; min-height: 50px;
    padding: 12px 15px; border-radius: 9px; font-size: 14px;
  }

  /* ---- Footer ----------------------------------------------------------- */
  /* The columns stay, against §2.10 of the handoff. The tab bar reaches four
     of the eight routes; without these, /institutions, /questions, /contact
     and /since-1989 are unreachable from every page but home. The prototype
     could drop them because it only ever had four screens. */
  .footer { padding: 26px 0 30px; }
  .footer-risk { padding: 16px; margin-bottom: 22px; }
  .footer-risk p { font-size: 12px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-bottom: 24px; }
  .footer-cols > *:first-child { grid-column: 1 / -1; }
  .footer-cols .logo { height: 34px; }
  .footer-cols a, .footer-cols .stack span { font-size: 13px; padding: 4px 0; }
  .footer-bottom { font-size: 11.5px; margin-top: 22px; padding-top: 18px; }
}

/* --------------------------------------------------------------------------
   Motion — arrival

   Nothing here runs unless <html> carries the `js` class, which the inline
   bootstrap in each <head> adds before first paint — the same trick, for the
   same reason, as the theme. With JavaScript off the class never appears, no
   element is ever hidden, and the pages render exactly as they did before this
   section existed.

   Two systems:

   1. The home hero plays a fixed timeline on load. It hangs off classes the
      markup already had, so there are no animation hooks in the HTML. The one
      exception is .h1-line, which exists because a mask and the thing that
      slides out of it cannot be the same element.

   2. Everything else rises as it is scrolled to. The hidden state below is
      written against the same selector list site.js observes, rather than
      against an attribute that file adds — an attribute applied after parse
      would let the page paint and then hide itself. The two lists have to stay
      in step; the copy in site.js carries the warning.

   The whole section sits inside `no-preference`, so under reduced motion none
   of it exists at all and the block after this one is left with nothing to
   undo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* Every one of these declares `from` only. The implicit `to` is then the
     element's own computed style, so none of them has to restate a transform
     or an opacity that the rest of this file already sets. */
  @keyframes rv-rise   { from { opacity: 0; transform: translateY(var(--rv-y, 18px)); } }
  @keyframes rv-fade   { from { opacity: 0; } }
  @keyframes rv-mask   { from { transform: translateY(106%); } }
  @keyframes rv-wipe   { from { transform: scaleX(0); } }
  @keyframes rv-pop    { from { opacity: 0; transform: scale(var(--rv-s, .78)); } }
  @keyframes rv-settle { from { transform: scale(1.06); } }
  /* The radius has to travel with the clip, or the corners square off for the
     length of the wipe and snap round at the end. 22px is .frame's own
     border-radius; the phone layout drops that to 0 and --rv-r follows. */
  @keyframes rv-open {
    from { clip-path: inset(100% 0 0 0 round var(--rv-r, 22px)); }
    to   { clip-path: inset(0 0 0 0 round var(--rv-r, 22px)); }
  }

  /* ---- The bar --------------------------------------------------------- */
  /* On every page, not just home. The tri-colour rule draws itself across the
     top of the window and the bar beneath it lifts into place. */
  html.js .nav-strip { transform-origin: left center; animation: rv-wipe .6s var(--ease) both; }
  html.js .nav-bar { --rv-y: 8px; animation: rv-rise .55s var(--ease) .06s both; }

  /* ---- The home hero, in order ----------------------------------------- */
  /* One timeline, read top to bottom. The numbers are the whole design: the
     headline lands before the photograph opens, the photograph is still
     settling when the buttons arrive, and the proof tiles come last so the
     figures inside them tick into a hero that has already assembled. */
  /* The mask. .h1-home > span is already display:block, so it takes the
     overflow directly; .h1-line is what actually moves. The padding and the
     matching negative margin push the clip edge clear of the descenders in
     "regulated" without moving the line an inch. */
  html.js .h1-home > span { overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
  html.js .h1-line { display: inline-block; animation: rv-mask .78s var(--ease) both; }
  html.js .h1-home > span:nth-child(1) .h1-line { animation-delay: .22s; }
  html.js .h1-home > span:nth-child(2) .h1-line { animation-delay: .32s; }
  html.js .h1-home > span:nth-child(3) .h1-line { animation-delay: .42s; }

  html.js .hero-lede .italic { animation: rv-rise .62s var(--ease) .5s both; }
  html.js .hero-copy .lead,
  html.js .hero-cta { animation: rv-rise .62s var(--ease) .56s both; }

  /* The photograph opens from its bottom edge while the still behind it
     settles out of a 1.06 crop. Only the clip is animated on .frame — its
     opacity is left alone, so the still is a painted element from the first
     frame and stays where the browser expects to find the LCP. */
  html.js .hero-frame > .frame { animation: rv-open .9s var(--ease) .42s both; }
  html.js .hero-poster { animation: rv-settle 1.4s var(--ease) .42s both; }

  html.js .hero-disc { animation: rv-pop .6s var(--ease) .7s both; }
  html.js .hero-seal { --rv-s: .85; animation: rv-pop .55s var(--ease) .9s both; }

  html.js .rail-head { animation: rv-rise .55s var(--ease) .74s both; }
  html.js .g-stats .stat { --rv-y: 16px; animation: rv-rise .6s var(--ease) both; }
  /* These four delays are also in site.js, as the data-count-delay on the
     figures inside tiles 1 to 3 — that is what makes a number start ticking as
     its tile lands rather than before it. Change one, change both. */
  html.js .g-stats .stat:nth-child(1) { animation-delay: .78s; }
  html.js .g-stats .stat:nth-child(2) { animation-delay: .84s; }
  html.js .g-stats .stat:nth-child(3) { animation-delay: .90s; }
  html.js .g-stats .stat:nth-child(4) { animation-delay: .96s; }

  /* ---- Scroll reveals --------------------------------------------------- */
  /* This list is duplicated in site.js as REVEAL_SEL. Both wrappers are
     :where(), which zeroes their specificity: the hidden state and the .is-in
     that cancels it then sit at 0-1-1 and 0-2-1, so .is-in always wins however
     long the list grows. The sections on this site carry no classes of their
     own, only inline padding, which is why these hang off inner containers.

     The two exclusions are the two places that run their own show: the hero
     above, and the enquiry form, which shows and hides its four steps itself
     and would strand a hidden step behind an observer that never fires. */
  html.js :where(
    main > header:not(.hero-head) > .wrap > *,
    .hdr-row,
    .service-rows > .row-service,
    .hgrid > *,
    .strip-4 > *,
    .g-4 > *,
    .g-cma > *,
    .g-2 > *,
    .g-about > *,
    .frame,
    .faq > details,
    .cta-panel,
    .pull,
    .g-teaser,
    .marquee-band
  ):where(:not(.hero-head *, #enquiry *, .rev-block *)) {
    opacity: 0; transform: translateY(22px);
    transition: opacity .72s var(--ease), transform .72s var(--ease);
    /* Set by site.js from the element's position among its siblings, so a
       three-card grid cascades and a lone panel does not wait its turn. */
    transition-delay: calc(var(--rv-i, 0) * 90ms);
  }
  html.js .is-in { opacity: 1; transform: none; }

  /* ---- Phone ------------------------------------------------------------ */
  @media (max-width: 760px) {
    /* No frame down here — .hero-frame > .frame drops its radius to 0 in the
       app-shell block above, and the clip has to drop it too. */
    html.js .hero-frame > .frame { --rv-r: 0px; }
    /* Shorter travel on a 390px screen, where 22px is a real distance. */
    html.js .hero-lede .italic,
    html.js .hero-copy .lead,
    html.js .hero-cta,
    html.js .nav-bar { --rv-y: 12px; }
    html.js :where(.hdr-row, .frame, .cta-panel, .pull, .marquee-band) { transform: translateY(14px); }
    /* The proof tiles are a horizontal swipe rail down here, inside an
       overflow-x container. A vertical offset on the cards would push a
       scrollbar out of it, so they only fade. */
    html.js .g-stats .stat { animation-name: rv-fade; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .type-caret { animation: none; }
  /* A 16.5s timelapse is motion by definition. The poster stands in for it. */
  .hero-video { display: none; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Compliance review mode

   Internal working material. None of this is published copy, and none of it
   is in the HTML a visitor receives: the blocks are built by
   /review/blocks.js, which site.js only fetches once the footer switch is
   turned on. What ships in the page is the switch itself and these rules.

   The visual language is the one the site already uses for anything awaiting
   sign-off — the dashed amber .amber box — recoloured by decision so a long
   page of blocks can be read at a glance: green approved, navy approved with
   changes, red rejected, amber referred.
   ========================================================================== */

/* Leaving the mode hides the furniture rather than tearing it down, so a
   reviewer toggling back and forth keeps their scroll position and their
   half-typed note. None of it was ever in the served HTML, so hiding it and
   removing it amount to the same thing as far as View Source is concerned. */
body:not(.review-on) :is(.rev-block, .rev-banner, .rev-dock, .rev-modal) { display: none !important; }

/* ---- The footer entry --------------------------------------------------- */
.rev-entry { border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 22px; }
.rev-entry-h {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.rev-entry-h:hover { color: var(--navy); }
.rev-entry-h .rev-entry-tag {
  background: var(--flag); color: #fff; border-radius: 4px; padding: 3px 7px;
  letter-spacing: .1em;
}
.rev-entry-h .rev-entry-ttl { flex: 1; }
.rev-entry-h .rev-chev { width: 12px; height: 12px; transition: transform .22s var(--ease); }
.rev-entry-h[aria-expanded="true"] .rev-chev { transform: rotate(180deg); }

.rev-entry-b { display: none; padding: 16px 0 4px; max-width: 78ch; }
.rev-entry-b.is-open { display: block; }
.rev-entry-b p {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-secondary); margin-bottom: 12px;
}

/* The switch. A real button with aria-pressed, not a checkbox — it performs an
   action rather than recording a value in a form. */
.rev-switch {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 6px;
  background: none; border: 1.5px solid var(--rule); border-radius: 999px;
  padding: 7px 16px 7px 9px; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-secondary);
  transition: border-color .18s ease, color .18s ease;
}
.rev-switch:hover { border-color: var(--flag); color: var(--navy); }
.rev-switch .rev-sw {
  width: 32px; height: 18px; border-radius: 999px; background: var(--rule);
  position: relative; flex-shrink: 0; transition: background .2s ease;
}
.rev-switch .rev-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--paper);
  transition: transform .2s var(--ease);
}
.rev-switch[aria-pressed="true"] { border-color: var(--flag); color: var(--flag); }
.rev-switch[aria-pressed="true"] .rev-sw { background: var(--flag); }
.rev-switch[aria-pressed="true"] .rev-sw::after { transform: translateX(14px); }

/* ---- The banner --------------------------------------------------------- */
/* Deliberately not sticky. It scrolls away, and the fixed dock carries the
   exit that is always on screen — otherwise the mode has no reachable way out
   once a reviewer is a few blocks down a long page. */
.rev-banner { background: var(--flag); color: #fff; padding: 12px 0; }
.rev-banner .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rev-banner b { font-size: 13px; letter-spacing: -.01em; }
.rev-banner-txt { font-size: 12.5px; line-height: 1.5; flex: 1; min-width: 240px; opacity: .92; }
.rev-banner-count {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  background: rgba(255, 255, 255, .18); border-radius: 4px; padding: 4px 9px; white-space: nowrap;
}
.rev-banner-x {
  background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  border-radius: 6px; padding: 5px 12px; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
}
.rev-banner-x:hover { background: #fff; color: var(--flag); }

/* ---- A block ------------------------------------------------------------ */
.rev-block {
  max-width: 1280px; margin: 34px auto; padding: 0 32px;
}
.rev-block > * { border-left: 2px dashed var(--flag); border-right: 2px dashed var(--flag); }
.rev-block .rev-bar { border-top: 2px dashed var(--flag); border-radius: 16px 16px 0 0; }
.rev-block .rev-notebox { border-bottom: 2px dashed var(--flag); border-radius: 0 0 16px 16px; }
.rev-block:not(:has(.rev-notebox.is-open)) .rev-actions {
  border-bottom: 2px dashed var(--flag); border-radius: 0 0 16px 16px;
}

.rev-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--flag-bg); padding: 15px 24px;
}
.rev-tag {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  border-radius: 4px; padding: 4px 8px; color: #fff; flex-shrink: 0;
}
.rev-tag.is-live { background: var(--ok); }
.rev-tag.is-partial { background: var(--flag); }
.rev-tag.is-absent { background: var(--ink-tertiary); }
.rev-ttl {
  font-family: var(--f-display); font-size: 17px; letter-spacing: -.02em;
  color: var(--navy); flex: 1; min-width: 200px;
}
.rev-use {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .07em;
  color: var(--ink-tertiary); text-align: right;
}

.rev-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); padding: 0; border-top: 1px solid var(--rule);
}
.rev-meta > div { background: var(--cream-card); padding: 18px 22px; }
.rev-meta h6 {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--flag); margin-bottom: 8px;
}
.rev-meta p { font-size: 13px; line-height: 1.65; color: var(--ink-secondary); }
.rev-meta .rev-gap { margin-top: 8px; color: var(--red); }

.rev-body { background: var(--paper); padding: 28px 26px; }
.rev-body .h3-sub { margin: 10px 0 0; }
.rev-lede {
  font-size: 15.5px; line-height: 1.65; color: var(--ink-secondary);
  max-width: 74ch; margin-top: 14px;
}
/* Wording that is already published, or is proposed verbatim. Set apart so a
   reviewer can tell copy from commentary about copy. */
.rev-quote {
  border-left: 3px solid var(--flag); padding: 4px 0 4px 18px; margin-top: 14px;
  font-size: 15.5px; line-height: 1.7; color: var(--ink); max-width: 78ch;
}
.rev-quote[dir="rtl"] { border-left: 0; border-right: 3px solid var(--flag); padding: 4px 18px 4px 0; text-align: right; }
.rev-note-p {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-tertiary);
  max-width: 78ch; margin-top: 14px;
}
.rev-grid { margin-top: 22px; }
.rev-grid > div { padding: 22px 20px; }
.rev-grid h4 {
  font-family: var(--f-display); font-size: 18px; letter-spacing: -.02em;
  color: var(--navy); margin-bottom: 9px;
}
.rev-grid p { font-size: 13.5px; line-height: 1.6; color: var(--ink-secondary); }
.rev-num {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.rev-num.rev-ok { color: var(--ok); }
.rev-num.rev-bad { color: var(--red); }
.rev-eg {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-secondary);
  padding: 8px 0; border-top: 1px solid var(--rule);
}

/* ---- Decision controls -------------------------------------------------- */
.rev-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--cream-card); padding: 15px 22px; border-top: 1px solid var(--rule);
}
.rev-lbl {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-tertiary); margin-right: 4px;
}
.rev-dbtn {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
  background: var(--paper); border: 1.5px solid var(--rule); color: var(--ink-secondary);
  border-radius: 6px; padding: 7px 13px; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.rev-dbtn:hover { border-color: var(--navy); color: var(--navy); }
.rev-dbtn[data-d="yes"].is-on { background: var(--ok); border-color: var(--ok); color: #fff; }
.rev-dbtn[data-d="mod"].is-on { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.rev-dbtn[data-d="no"].is-on { background: var(--red); border-color: var(--red); color: #fff; }
.rev-dbtn[data-d="ask"].is-on { background: var(--flag); border-color: var(--flag); color: #fff; }
.rev-status {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-tertiary); margin-left: auto;
}

.rev-notebox { display: none; background: var(--cream-card); padding: 0 22px 18px; }
.rev-notebox.is-open { display: block; }
.rev-notebox label {
  display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 8px;
}
.rev-notebox textarea {
  width: 100%; font-family: var(--f-body); font-size: 14px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; padding: 11px 13px; resize: vertical;
}
.rev-notebox textarea:focus { outline: 2px solid var(--flag); outline-offset: 1px; border-color: transparent; }

/* Recolour the whole block once it is decided, so a page of them scans. */
.rev-block[data-decision="yes"] > * { border-left-color: var(--ok); border-right-color: var(--ok); }
.rev-block[data-decision="yes"] .rev-bar { border-top-color: var(--ok); }
.rev-block[data-decision="yes"] .rev-notebox,
.rev-block[data-decision="yes"]:not(:has(.rev-notebox.is-open)) .rev-actions { border-bottom-color: var(--ok); }

.rev-block[data-decision="mod"] > * { border-left-color: var(--navy); border-right-color: var(--navy); }
.rev-block[data-decision="mod"] .rev-bar { border-top-color: var(--navy); }
.rev-block[data-decision="mod"] .rev-notebox,
.rev-block[data-decision="mod"]:not(:has(.rev-notebox.is-open)) .rev-actions { border-bottom-color: var(--navy); }

.rev-block[data-decision="no"] > * { border-left-color: var(--red); border-right-color: var(--red); }
.rev-block[data-decision="no"] .rev-bar { border-top-color: var(--red); }
.rev-block[data-decision="no"] .rev-notebox,
.rev-block[data-decision="no"]:not(:has(.rev-notebox.is-open)) .rev-actions { border-bottom-color: var(--red); }
.rev-block[data-decision="no"] .rev-body { opacity: .5; }

/* ---- The dock ----------------------------------------------------------- */
/* Bottom left: the WhatsApp float owns the bottom right, and on a phone the
   tab bar owns the bottom edge entirely. */
.rev-dock {
  position: fixed; left: 22px; bottom: 22px; z-index: 120; width: 268px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 22px 50px -22px rgba(30, 38, 96, .5);
  overflow: hidden;
}
.rev-dock.is-shut .rev-dock-b { display: none; }
.rev-dock-h {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--flag); color: #fff; padding: 11px 14px; font-size: 12.5px;
}
.rev-x {
  background: none; border: 0; color: currentColor; font-size: 19px; line-height: 1;
  cursor: pointer; padding: 0 2px; opacity: .8;
}
.rev-x:hover { opacity: 1; }
.rev-dock-b { padding: 14px; }
.rev-dock-bar {
  display: flex; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--rule); margin-bottom: 12px;
}
.rev-dock-bar i { display: block; width: 0; transition: width .3s var(--ease); }
.rev-dock-bar i[data-bar="yes"] { background: var(--ok); }
.rev-dock-bar i[data-bar="mod"] { background: var(--navy); }
.rev-dock-bar i[data-bar="no"] { background: var(--red); }
.rev-dock-bar i[data-bar="ask"] { background: var(--flag); }
.rev-dock-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-secondary); padding: 4px 0;
}
.rev-dock-row b { font-family: var(--f-data); font-size: 17px; color: var(--navy); }
.rev-dock-row[data-row="yes"] b { color: var(--ok); }
.rev-dock-row[data-row="no"] b { color: var(--red); }
.rev-dock-row[data-row="ask"] b { color: var(--flag); }
.rev-dock-here {
  font-family: var(--f-mono); font-size: 10px; line-height: 1.6; letter-spacing: .04em;
  color: var(--ink-tertiary); border-top: 1px solid var(--rule); margin-top: 9px; padding-top: 9px;
}
.rev-dock-export { width: 100%; margin-top: 11px; }
.rev-dock-exit {
  width: 100%; margin-top: 7px; background: none; border: 1px solid var(--rule);
  border-radius: 6px; padding: 8px; cursor: pointer;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.rev-dock-exit:hover { border-color: var(--red); color: var(--red); }

/* ---- The export modal --------------------------------------------------- */
.rev-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 31, .6); padding: 24px;
  align-items: center; justify-content: center;
}
.rev-modal.is-open { display: flex; }
.rev-modal-box {
  background: var(--paper); border-radius: 16px; width: min(760px, 100%);
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
}
.rev-modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--rule); color: var(--navy);
}
.rev-modal-h h4 { font-family: var(--f-display); font-size: 17px; letter-spacing: -.02em; }
.rev-modal-b { padding: 20px; overflow-y: auto; }
.rev-modal-b pre {
  font-family: var(--f-mono); font-size: 12px; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: 10px; padding: 18px;
}
.rev-modal-f { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---- Narrow ------------------------------------------------------------- */
@media (max-width: 900px) {
  .rev-meta { grid-template-columns: 1fr; }
  .rev-use { text-align: left; width: 100%; }
}
@media (max-width: 760px) {
  .rev-block { padding: 0 18px; }
  .rev-body { padding: 22px 18px; }
  .rev-grid { grid-template-columns: 1fr; }
  .rev-status { margin-left: 0; width: 100%; }
  /* The tab bar owns the bottom edge, so the dock sits above it and goes
     full width rather than floating in a corner it would have to share.
     72px is the reserve <body> already carries for the bar at this width. */
  .rev-dock { left: 12px; right: 12px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---- Print -------------------------------------------------------------- */
/* The export sheet is the record that gets signed, so printing prints that
   and nothing else. */
@media print {
  .rev-modal.is-open ~ *, .rev-banner, .rev-dock { display: none !important; }
  .rev-modal.is-open {
    position: static; display: block; background: none; padding: 0;
  }
  .rev-modal.is-open .rev-modal-box { max-height: none; box-shadow: none; }
  .rev-modal.is-open .rev-modal-f, .rev-modal.is-open .rev-x { display: none; }
  body.review-on > *:not(.rev-modal) { display: none !important; }
  .rev-modal-b pre { border: 0; background: none; padding: 0; }
}

/* ==========================================================================
   SCOPE STRIP  ·  review item 18, "PLEASE KEEP PROMINENTLY ON THE WEBSITE."

   One line, on every page, immediately above the footer. It used to live in
   the closing CTA of two pages only. Do not move it back inside a section:
   scripts/check.mjs asserts it sits between </main> and the footer on all of
   them, and compares the markup byte for byte so one copy cannot drift.
   ========================================================================== */
.scope-strip {
  background: var(--navy); color: #fff;
  border-top: 3px solid var(--red);
}
.scope-strip .wrap {
  padding-top: 16px; padding-bottom: 16px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; text-align: center; line-height: 1.7;
}
@media (max-width: 560px) {
  .scope-strip .wrap { font-size: 10.5px; letter-spacing: .06em; }
}

/* ==========================================================================
   VERBATIM LEGAL PAGES  ·  /risk-disclosure and /disclaimer

   The text on those two pages is reproduced from the existing Sterling site
   without a character changed (review item 19). Everything here is
   presentation only — restyle it freely, but never edit the markup's text.
   ========================================================================== */
.legal-doc {
  max-width: 78ch;
  border-top: 1px solid var(--rule);
  padding-top: 34px;
}
.legal-h {
  font-family: var(--f-display); font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.1; letter-spacing: -.03em; color: var(--navy);
  margin: 52px 0 18px; padding-top: 34px; border-top: 1px solid var(--rule);
}
.legal-p {
  font-size: 15.5px; line-height: 1.8; color: var(--ink-secondary);
  margin: 0 0 18px;
}
/* The source runs a bold lead-in straight into the sentence with no space.
   That is how the approved text reads, so it is set as a block instead of
   being "fixed" with a space that is not in the original. */
.legal-p > strong:first-child {
  display: block; color: var(--navy); font-weight: 600;
  font-size: 16.5px; line-height: 1.4; margin-bottom: 6px;
}
.legal-p > strong:first-child + br { display: none; }
.legal-list {
  margin: 0 0 18px; padding-left: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.legal-list li {
  font-size: 15.5px; line-height: 1.8; color: var(--ink-secondary);
}
.legal-list li strong { color: var(--navy); font-weight: 600; }

/* The legal titles are long sentences carried over verbatim, not headlines
   written to fit — they get their own size so they do not swallow the page. */
.h1-legal {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 26ch;
}