/* =====================================================================
   Super Save Protocol — public website stylesheet
   ---------------------------------------------------------------------
   Direction: "Institutional editorial".
   A warm bond-paper canvas, deep navy ink slabs, one registry blue for
   action, and restrained verdict colours (verdigris = clear, amber =
   suspect, stamp = duplicate) used only where they carry meaning.

   Display : Newsreader    — editorial serif, quiet authority
   Text/UI : Inter         — modern, neutral, excellent at small sizes
   Data    : IBM Plex Mono — fingerprints, references, record locators

   Structure
     01  Tokens
     02  Reset & base type
     03  Primitives (wrap, eyebrow, lede, buttons)
     04  Header & navigation
     05  Sections & page heroes
     06  Home hero + collision readout
     07  Member strip
     08  Cards, grids, lists
     09  Editorial modules (numbered features, steps, facts)
     10  Legend, panels, key/value readouts
     11  Contact & forms
     12  Legal documents
     13  CTA band
     14  Footer
     15  Cookie consent
     16  Motion
     17  Responsive
     18  Print & reduced motion
   ===================================================================== */

/* =====================================================================
   01  TOKENS
   ===================================================================== */
:root {
  color-scheme: dark;   /* native controls, scrollbars and form widgets */

  /* --------------------------------------------------------------
     Dark "vault" palette. The page ground is deep navy-black, the
     accent is the registry gold taken straight from the SSP mark on
     the backdrop photograph, and the verdict colours are lifted so
     they still read against a dark ground.
     -------------------------------------------------------------- */

  /* Ink — the darkest step: header, footer, inset panels */
  --ink:        #04090F;
  --ink-2:      #0A121C;
  --ink-3:      #16273A;

  /* Canvas — the page ground */
  --canvas:     #070E17;
  --paper:      #0B1420;
  --paper-2:    #09111B;
  --white:      rgba(19, 30, 45, .88);   /* card / panel / field fill */

  /* Photo band — sections carrying the backdrop */
  --photo:      #070E17;

  /* Action — registry gold (kept on the --blue-* names so every
     existing rule inherits the new accent without being rewritten) */
  --gold:       #E0B65C;
  --gold-2:     #F1D08C;
  --gold-deep:  #B98A32;
  --blue:       #E0B65C;
  --blue-2:     #F1D08C;
  --blue-ink:   #E6C275;
  --blue-soft:  rgba(224, 182, 92, .10);

  /* Verdict colours — brightened for a dark ground */
  --verdigris:  #3FCFB5;
  --amber:      #E8B45C;
  --stamp:      #FF8E99;

  /* Text on canvas */
  --head:       #F4F7FB;
  --text:       #DCE5EF;
  --slate:      #A6B6C8;
  --slate-2:    #7F91A5;

  /* Text on ink */
  --on-ink:     #E9EEF5;
  --on-ink-2:   rgba(233, 238, 245, .80);
  --on-ink-3:   rgba(233, 238, 245, .64);
  --on-ink-4:   rgba(233, 238, 245, .52);

  /* Lines — hairlines carry a trace of the gold */
  --line:       rgba(226, 190, 116, .15);
  --line-2:     rgba(226, 190, 116, .08);
  --line-ink:   rgba(255, 255, 255, .10);

  /* Radii — restrained */
  --r-xs:       4px;
  --r-sm:       8px;
  --r:          12px;
  --r-lg:       18px;

  /* Elevation — soft, wide, low opacity */
  --sh-sm:      0 2px 6px -2px rgba(0, 0, 0, .45), 0 10px 30px -18px rgba(0, 0, 0, .7);
  --sh:         0 4px 14px -6px rgba(0, 0, 0, .5), 0 28px 62px -34px rgba(0, 0, 0, .85);
  --sh-lg:      0 40px 90px -46px rgba(0, 0, 0, .95);

  /* Measure */
  --wrap:       1240px;
  --narrow:     780px;
  --measure:    68ch;

  /* Rhythm */
  --sp:         clamp(72px, 9vw, 128px);
  --sp-tight:   clamp(52px, 6vw, 84px);

  /* Type */
  --f-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* =====================================================================
   02  RESET & BASE TYPE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
::selection { background: rgba(224, 182, 92, .28); color: #fff; }

a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4, h5 { margin: 0; color: var(--head); }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.06;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; }

h3, h4, h5 {
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.3;
}
h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); }
h4 { font-size: 1.02rem; }

h1 em, h2 em { font-style: italic; font-weight: 400; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--head); }
.mono { font-family: var(--f-mono); }

:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  border-radius: 3px;
}
.slab--ink :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.legal-hero :focus-visible,
.site-header :focus-visible,
.mobile-nav :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold-2); }

.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 300;
  background: var(--gold); color: #050B12; padding: 12px 20px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
}
.skip-link:focus { left: 14px; text-decoration: none; }

/* =====================================================================
   03  PRIMITIVES
   ===================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}
.narrow { max-width: var(--narrow); }
.center { text-align: center; }
.measure { max-width: var(--measure); }

/* ---- Eyebrow: the section locator ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px; flex: 0 0 26px;
  background: currentColor; opacity: .55;
}
.eyebrow--light { color: #EBCB86; }
.eyebrow--plain::before { display: none; }
h2.eyebrow { font-family: var(--f-mono); font-weight: 500; font-size: 11px; line-height: 1.4; }

/* ---- Lede ---- */
.lede {
  font-size: clamp(1.06rem, 1.35vw, 1.19rem);
  line-height: 1.66;
  color: var(--slate);
  max-width: 60ch;
}
.lede--light { color: var(--on-ink-2); }

.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-2);
  max-width: 72ch;
}

/* ---- Spacing helpers (keep the views free of inline CSS) ---- */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #10121A; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #F8DFA6, var(--gold-2));
  color: #10121A; box-shadow: 0 10px 26px -12px rgba(224,182,92,.6);
}

.btn--dark { background: var(--ink); color: #fff; border-color: var(--line); }
.btn--dark:hover { background: var(--ink-3); color: #fff; box-shadow: 0 8px 24px -14px rgba(0,0,0,.8); }

.btn--light {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #10121A; font-weight: 600;
}
.btn--light:hover {
  background: linear-gradient(180deg, #F8DFA6, var(--gold-2));
  color: #10121A; box-shadow: 0 10px 28px -14px rgba(224,182,92,.65);
}

.btn--ghost { background: rgba(255,255,255,.04); color: var(--text); border-color: rgba(226,190,116,.32); }
.btn--ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(224,182,92,.45); color: var(--head); box-shadow: var(--sh-sm); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.26); }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.46); color: #fff; }

.btn--lg { min-height: 52px; padding: 14px 30px; font-size: 15.5px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ---- Text link with a rule that extends on hover ---- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--blue-ink);
}
.link-arrow::after {
  content: ""; width: 18px; height: 1px; background: currentColor;
  transition: width .28s var(--ease);
}
.link-arrow:hover { text-decoration: none; color: var(--blue); }
.link-arrow:hover::after { width: 30px; }
.link-arrow--light { color: #EBCB86; }
.link-arrow--light:hover { color: #fff; }

/* =====================================================================
   03b  JUSTIFIED PROSE
   Justification is applied to running text only — never to headings,
   labels, data readouts, buttons or anything centred. `hyphens: auto`
   does the heavy lifting so narrow columns do not open up rivers.
   ===================================================================== */
.hero__lede,
.lede,
.note,
.card p,
.block p,
.step__body p,
.contact-block p,
.legend__row p,
.person p,
.footer-about p,
.doc-card span,
.legal-body p,
.legal-body li,
.legal-body__intro p,
.legal-foot p,
.legal-body td {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Centred contexts keep their alignment. */
.cta-band .lede,
.center .lede, .center p,
.slab__head--center .lede,
.page-hero__inner--center .lede,
.strip .strip__item {
  text-align: center;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Very short measures read worse justified than ragged. */
@media (max-width: 400px) {
  .card p, .block p, .step__body p, .contact-block p, .legend__row p, .doc-card span {
    text-align: left;
  }
}

/* =====================================================================
   04  HEADER & NAVIGATION
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header--solid {
  background: rgba(4, 9, 15, .92);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgba(226,190,116,.16);
  box-shadow: 0 10px 40px -26px rgba(0,0,0,1);
}

.site-header__inner {
  display: flex; align-items: center; gap: 28px;
  height: 84px;
  transition: height .3s var(--ease);
}
.site-header--solid .site-header__inner { height: 66px; }

/* ---- Brand ---- */
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: 0 0 32px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--f-display); font-weight: 500; font-size: 18px;
  letter-spacing: -.015em; color: #fff;
}
.brand__sub {
  margin-top: 2px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: #D9AF57;
}

/* ---- Desktop nav ---- */
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a {
  position: relative; padding: 6px 0;
  font-size: 14.5px; font-weight: 450;
  color: rgba(233,238,245,.72);
  transition: color .2s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover { color: #fff; text-decoration: none; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-actions .btn { min-height: 42px; padding: 10px 20px; font-size: 14px; }

/* ---- Mobile toggle ---- */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm); color: #fff;
  transition: background-color .2s var(--ease);
}
.nav-toggle:hover { background: rgba(255,255,255,.13); }

/* ---- Mobile drawer ---- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(2, 5, 9, .72);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(400px, 88vw);
  display: flex; flex-direction: column;
  padding: 22px 28px 34px;
  background: var(--ink);
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(101%);
  transition: transform .38s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.mobile-nav__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-nav__label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-ink-4);
}
.nav-close {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm); color: #fff;
}
.nav-close:hover { background: rgba(255,255,255,.14); }

.mobile-nav__links { display: flex; flex-direction: column; padding: 4px 0; }
.mobile-nav__links a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 17px 0;
  font-family: var(--f-display); font-size: 24px; font-weight: 400;
  letter-spacing: -.015em; color: var(--on-ink);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobile-nav__links a:hover { color: #fff; text-decoration: none; }
.mobile-nav__links a[aria-current="page"] { color: var(--blue-ink); }
.mobile-nav__links a span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--on-ink-4);
}
.mobile-nav .btn { margin-top: 26px; width: 100%; }
.mobile-nav__foot {
  margin-top: auto; padding-top: 30px;
  font-size: 14px; line-height: 1.7; color: var(--on-ink-3);
}
.mobile-nav__foot a { color: var(--on-ink-2); }
.mobile-nav__foot a:hover { color: #fff; }

/* =====================================================================
   05  SECTIONS & PAGE HEROES
   ===================================================================== */
.slab { position: relative; padding: var(--sp) 0; }
.slab--tight { padding: var(--sp-tight) 0; }
.slab--canvas { background: var(--canvas); }
.slab--paper  { background: var(--paper); }
.slab--white  { background: var(--paper-2); }
.slab--ink    { background: var(--ink); color: var(--on-ink-2); }
.slab--ink h1, .slab--ink h2, .slab--ink h3, .slab--ink h4 { color: #fff; }
.slab--ink strong { color: #fff; }
.slab--ink a { color: #EBCB86; }

.slab__head { max-width: 62ch; margin-bottom: clamp(40px, 4.6vw, 64px); }
.slab__head h2 + .lede { margin-top: 22px; }
.slab__head--wide { max-width: 78ch; }
.slab__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.slab__head--center .eyebrow { justify-content: center; }
.slab__head--center .lede { margin-left: auto; margin-right: auto; }
.slab__head--flush { margin-bottom: 0; }

.slab__head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(40px, 4.6vw, 64px);
}
.slab__head-row .slab__head { margin-bottom: 0; }

/* ---- Page hero (About / Services / How / Contact / Legal / 404) ---- */
.page-hero,
.legal-hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--on-ink-2);
  padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px);
}
.page-hero::before,
.legal-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(226,190,116,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,190,116,.05) 1px, transparent 1px);
  background-size: 100% 38px, 38px 100%;
  -webkit-mask-image: radial-gradient(130% 100% at 78% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(130% 100% at 78% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .wrap, .legal-hero .wrap { position: relative; z-index: 1; }
.page-hero h1, .legal-hero h1 { color: #fff; }
.page-hero h1 { max-width: 16ch; }
.legal-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); max-width: 20ch; }
.page-hero .lede, .legal-hero .lede { margin-top: 26px; }
.page-hero__inner { max-width: 62ch; }
.page-hero__inner--center {
  max-width: 56ch; margin-left: auto; margin-right: auto; text-align: center;
}
.page-hero__inner--center h1 { max-width: none; }
.page-hero__inner--center .eyebrow { justify-content: center; }
.page-hero__inner--center .lede { margin-left: auto; margin-right: auto; }

.page-hero__meta,
.legal-hero__meta {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-ink-4);
}

.hero-back {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 22px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #E6C275;
}
.hero-back:hover { color: #F8DFA6; text-decoration: none; }

/* Anchor jump targets sit under the sticky header */
[id] { scroll-margin-top: 90px; }

/* =====================================================================
   06  HOME HERO + COLLISION READOUT
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--on-ink-2);
  padding: clamp(52px, 6.5vw, 88px) 0 clamp(84px, 10vw, 128px);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(226,190,116,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,190,116,.05) 1px, transparent 1px);
  background-size: 100% 38px, 38px 100%;
  -webkit-mask-image: radial-gradient(120% 95% at 72% 4%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 95% at 72% 4%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; left: 45%; top: -34%;
  width: 900px; height: 900px; max-width: 120vw;
  background: radial-gradient(circle, rgba(224,182,92,.16), transparent 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(48px, 5vw, 76px); align-items: center;
}
/* The hero column stops at just over half the measure. The right half is
   deliberately left empty so the backdrop photograph — the mark, the podium,
   the skyline — is the thing occupying it. */
@media (min-width: 1040px) {
  .hero__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
  .hero { min-height: clamp(520px, 74vh, 780px); display: grid; align-items: center; }
  .hero > .hero__inner { width: 100%; }
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.7rem, 5.2vw, 4.4rem);
  line-height: 1.04; letter-spacing: -.026em;
}
.hero h1 em { color: #FF8E99; font-style: italic; white-space: nowrap; }
.hero__lede {
  margin-top: 26px; max-width: 50ch;
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  line-height: 1.66; color: var(--on-ink-2);
}
.hero__cta { margin-top: 36px; }
.hero__note {
  margin-top: 34px; padding-top: 24px; max-width: 46ch;
  border-top: 1px solid rgba(255,255,255,.09);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ink-4); line-height: 2;
}

/* ---- Collision readout: the signature element ---- */
.readout {
  background: linear-gradient(176deg, rgba(19,28,40,.93) 0%, rgba(6,12,20,.95) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226,190,116,.24);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.readout__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-3);
}
.readout__live { display: inline-flex; align-items: center; gap: 8px; color: #3FCFB5; }
.readout__dot {
  width: 6px; height: 6px; border-radius: 50%; background: #3FCFB5;
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,207,181,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(63,207,181,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,207,181,0); }
}

.rec { padding: 20px 22px; }
.rec + .rec { border-top: 1px dashed rgba(255,255,255,.12); }
.rec__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.rec__who { font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.rec__tag {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ink-4); white-space: nowrap;
  border: 1px solid rgba(255,255,255,.14); padding: 3px 9px; border-radius: 999px;
}
.rec__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 20px; }
.rec__f { min-width: 0; }
.rec__k {
  display: block; margin-bottom: 4px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--on-ink-4);
}
.rec__v {
  font-family: var(--f-mono); font-size: 12.5px; color: var(--on-ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec__v mark { background: rgba(176,50,63,.3); color: #FFB6BD; border-radius: 2px; padding: 0 3px; }

.readout__verdict {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(176,50,63,.16), rgba(176,50,63,.04));
}
.score {
  font-family: var(--f-display); font-weight: 400; font-size: 42px;
  color: #FF8E99; line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.score small { font-size: 15px; opacity: .6; }
.verdict-meta { flex: 1; min-width: 160px; }
.verdict-meta strong {
  display: block; margin-bottom: 4px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-3);
}
.verdict-meta span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--on-ink-2); }
.stamp {
  font-family: var(--f-mono); font-weight: 500; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: #FF8E99; border: 1.5px solid rgba(255,142,153,.75);
  padding: 7px 14px; border-radius: var(--r-xs);
  transform: rotate(-3deg);
}
.stamp--land { opacity: 0; }
.readout.is-live .stamp--land { animation: stampIn .55s cubic-bezier(.2,1.4,.4,1) both .45s; }
.no-js .stamp--land, .readout.is-live .stamp--land { opacity: 1; }
@keyframes stampIn {
  from { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  to   { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.readout__reasons {
  display: grid; gap: 10px;
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.reason {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.2px; line-height: 1.5; color: var(--on-ink-3);
}
.reason svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 3px; color: #FF8E99; }

/* =====================================================================
   07  MEMBER STRIP
   ===================================================================== */
.strip {
  background: var(--ink-2);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 30px 0;
}
.strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 16px 40px;
}
.strip__label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-ink-4);
}
.strip__item {
  font-size: 13px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-ink-3);
}

/* =====================================================================
   08  CARDS, GRIDS, LISTS
   ===================================================================== */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.grid--wide { gap: 32px 40px; }

/* Open, borderless information block — the default premium layout */
.block { padding-top: 26px; border-top: 1px solid var(--line); }
.block h3 { margin-bottom: 10px; }
.block p { font-size: 15.5px; color: var(--slate); }
.slab--ink .block { border-top-color: var(--line-ink); }
.slab--ink .block p { color: var(--on-ink-2); }
.block__idx {
  display: block; margin-bottom: 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue);
}
.slab--ink .block__idx { color: #EBCB86; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card h3, .card__h { margin-bottom: 10px; }
.card__h { font-family: var(--f-body); font-weight: 600; font-size: 1.08rem; letter-spacing: -.014em; }
.card p { font-size: 15.5px; color: var(--slate); }
.card--hover:hover {
  border-color: rgba(224,182,92,.42);
  box-shadow: var(--sh-sm);
  transform: translateY(-3px);
}
.card--ink {
  background: rgba(255,255,255,.028);
  border-color: var(--line-ink);
  color: var(--on-ink-2);
}
.card--ink p { color: var(--on-ink-2); }
.card--ink.card--hover:hover { border-color: rgba(226,190,116,.4); background: rgba(255,255,255,.05); }

.card__code {
  display: inline-block; margin-bottom: 18px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-soft);
  padding: 5px 11px; border-radius: 999px;
}
.card--ink .card__code { color: #EBCB86; background: rgba(226,190,116,.14); }

.card__icon {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 20px;
  background: var(--blue-soft); color: var(--blue);
}
.card__icon svg { width: 21px; height: 21px; }
.card__icon--verdigris { background: rgba(63,207,181,.13); color: var(--verdigris); }
.card__icon--stamp { background: rgba(255,142,153,.13); color: var(--stamp); }
.card__icon--amber { background: rgba(232,180,92,.14); color: var(--amber); }

/* ---- Tick list ---- */
.tick-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.tick-list li {
  position: relative; padding-left: 24px;
  font-size: 15px; line-height: 1.55; color: var(--slate);
}
.tick-list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--verdigris);
}
.slab--ink .tick-list li { color: var(--on-ink-2); }
.slab--ink .tick-list li::before { border-color: var(--verdigris); }

/* =====================================================================
   09  EDITORIAL MODULES
   ===================================================================== */
.split { display: grid; gap: clamp(36px, 4.5vw, 72px); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--flip > *:first-child { order: 2; }
@media (max-width: 939px) { .split--flip > *:first-child { order: 0; } }
.split--top { align-items: start; }
@media (min-width: 940px) {
  .split--aside { grid-template-columns: 200px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
}

/* ---- Numbered module heading (Services) ---- */
.mod__num {
  display: block; margin-bottom: 10px;
  font-family: var(--f-display); font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.03em;
  color: rgba(226,190,116,.20);
}
.slab--ink .mod__num { color: rgba(226,190,116,.22); }

/* ---- Ordered sequence ---- */
.steps { display: grid; }
.step {
  display: grid; gap: 12px 32px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .step { grid-template-columns: 116px minmax(0, 1fr) minmax(0, .74fr); align-items: start; }
}
.step__n {
  padding-top: 7px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
}
.step__body h3 { margin-bottom: 10px; }
.step__body p { font-size: 15.5px; color: var(--slate); }
.step__out {
  padding: 16px 18px;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.8;
  color: var(--slate); word-break: break-word;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.step__out b { color: var(--head); font-weight: 600; }
.slab--ink .step { border-color: var(--line-ink); }
.slab--ink .step__n { color: #EBCB86; }
.slab--ink .step__body p { color: var(--on-ink-2); }
.slab--ink .step__out {
  background: rgba(255,255,255,.03); border-color: var(--line-ink);
  border-left-color: var(--gold); color: var(--on-ink-2);
}
.slab--ink .step__out b { color: #fff; }

/* ---- Definition table ---- */
.dl { border-top: 1px solid var(--line); }
.dl__row {
  display: grid; gap: 4px 32px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .dl__row { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; } }
.dl__k {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate-2);
}
.dl__v { margin: 0; font-size: 16px; color: var(--text); }

/* ---- Pull quote ---- */
.pull {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.32;
  letter-spacing: -.018em; color: var(--head); max-width: 26ch;
}
.slab--ink .pull { color: #fff; }
.pull em { font-style: italic; }

/* ---- Portrait figure (leadership) ---- */
.portrait { margin: 0; max-width: 200px; }
.portrait img {
  width: 100%; height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--paper);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  object-position: 50% 30%;
}
.portrait figcaption {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.portrait figcaption strong {
  font-family: var(--f-display); font-weight: 500; font-size: 1.1rem;
  letter-spacing: -.018em; color: var(--head); line-height: 1.25;
}
.portrait figcaption span {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-2);
}
@media (min-width: 940px) {
  .split--top > .portrait { position: sticky; top: 104px; }
}
@media (max-width: 939px) {
  .portrait { max-width: 150px; }
}

/* ---- Person (leadership team) ---- */
.person { padding-top: 26px; border-top: 1px solid var(--line); }
.person h3 { margin-bottom: 6px; }
.person__role {
  margin: 0 0 12px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue);
}
.person p { font-size: 15px; color: var(--slate); }
.slab--ink .person { border-top-color: var(--line-ink); }
.slab--ink .person p { color: var(--on-ink-2); }
.slab--ink .person__role { color: #EBCB86; }

/* =====================================================================
   10  LEGEND, PANELS, KEY/VALUE
   ===================================================================== */
.legend { display: grid; border-top: 1px solid var(--line); }
.legend__row {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.legend__band {
  padding: 6px 0; border-radius: var(--r-xs); text-align: center;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em;
}
.band--clear   { background: rgba(63,207,181,.13);  color: var(--verdigris); }
.band--suspect { background: rgba(232,180,92,.14);  color: var(--amber); }
.band--dup     { background: rgba(255,142,153,.13); color: var(--stamp); }
.legend__row p { margin: 0; font-size: 15px; color: var(--slate); }

/* ---- Data panel ---- */
.panel {
  background: var(--ink);
  border: 1px solid rgba(226,190,116,.20);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--sh);
}
.slab--ink .panel { background: rgba(255,255,255,.03); box-shadow: none; }
.panel__title {
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-3);
}
.kv { display: grid; gap: 12px; }
.kv__row {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  font-family: var(--f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.kv__k { color: var(--on-ink-4); letter-spacing: .06em; }
.kv__v { color: var(--on-ink); text-align: right; }
.kv__v--ok   { color: #3FCFB5; }
.kv__v--bad  { color: #FF8E99; }
.kv__v--warn { color: #E8B45C; }
.panel__note {
  margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--slate-2);
}

/* =====================================================================
   11  CONTACT & FORMS
   ===================================================================== */
.contact-grid { display: grid; gap: 44px; }
@media (min-width: 980px) {
  .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; }
}

.form-shell {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: var(--sh-sm);
}
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--text); }
.req { color: var(--stamp); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 15.5px; color: var(--head);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-2); }
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A6B6C8' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: rgba(255,255,255,.06);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(224,182,92,.18);
}
.field__hint { font-size: 13px; line-height: 1.55; color: var(--slate-2); }
.field-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.checkline {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.8px; line-height: 1.6; color: var(--slate);
}
.checkline input {
  width: 18px; height: 18px; margin-top: 3px; flex: 0 0 18px;
  accent-color: var(--blue);
}
.hp { position: absolute; left: -9999px; }

.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid; border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.6;
}
.notice svg { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 3px; }
.notice--ok   { background: rgba(63,207,181,.09);  border-color: rgba(63,207,181,.34);  color: #7FE3CE; }
.notice--err  { background: rgba(255,142,153,.09); border-color: rgba(255,142,153,.34); color: #FFB6BD; }
.notice--info { background: var(--blue-soft); border-color: rgba(224,182,92,.30); color: var(--blue-ink); }
.notice ul { margin: 8px 0 0; padding-left: 20px; }

.contact-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-block:first-child { padding-top: 0; }
.contact-block:last-child { border-bottom: 0; }
.contact-block h3 { font-size: .95rem; margin-bottom: 8px; }
.contact-block p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--slate); }

/* =====================================================================
   12  LEGAL DOCUMENTS
   ===================================================================== */
.legal-layout {
  display: grid; gap: 40px; min-width: 0;
  padding: clamp(52px, 6vw, 80px) 0 clamp(64px, 8vw, 104px);
}
.legal-layout > * { min-width: 0; }
.legal-toc {
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 16px;
}
.legal-toc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; list-style: none;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slate-2);
}
.legal-toc__summary::-webkit-details-marker { display: none; }
.legal-toc__summary svg { flex: 0 0 14px; width: 14px; height: 14px; transition: transform .25s var(--ease); }
.legal-toc[open] .legal-toc__summary svg { transform: rotate(180deg); }
.legal-toc[open] .legal-toc__summary { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) {
  .legal-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; }
  .legal-toc {
    position: sticky; top: 104px;
    max-height: calc(100vh - 140px); overflow-y: auto;
    background: transparent; border: 0; border-radius: 0;
    padding: 0 8px 0 0;
  }
  /* On desktop the list is always visible; the disclosure is a mobile affordance. */
  .legal-toc__summary { display: none; }
  .legal-toc__title { display: block; }
}
.legal-toc__title {
  display: none;
  margin: 0 0 8px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slate-2);
}
.legal-toc a { overflow-wrap: anywhere; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 12px;
  font-size: 13.6px; line-height: 1.45; color: var(--slate);
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto; padding-top: 2px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-2);
}
.legal-toc a:hover { background: rgba(255,255,255,.05); color: var(--head); text-decoration: none; }
.legal-toc a.is-active {
  background: rgba(224,182,92,.10); color: var(--head);
  border-left-color: var(--gold); font-weight: 500;
}

.legal-body { max-width: 72ch; font-size: 16.5px; min-width: 0; overflow-wrap: break-word; }
.legal-body a { overflow-wrap: anywhere; }
.legal-body section {
  padding-bottom: 40px; margin-bottom: 40px;
  border-bottom: 1px solid var(--line-2);
  scroll-margin-top: 104px;
}
.legal-body section:last-of-type { border-bottom: 0; }
.legal-body h2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline;
  margin-bottom: 18px;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -.018em;
  overflow-wrap: break-word;
}
.legal-body h2 .n {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; color: var(--blue);
}
.legal-body h3 { font-size: 1.02rem; margin: 26px 0 10px; }
.legal-body p, .legal-body li { color: var(--text); }
.legal-body ul, .legal-body ol { margin: 0 0 1.1em; padding-left: 24px; }
.legal-body li { margin-bottom: 10px; }
.legal-body li::marker { color: var(--slate-2); }
.table-scroll {
  margin: 18px 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
}
.table-scroll:focus-visible { outline-offset: 0; }
.legal-body table {
  width: 100%; min-width: 520px; margin: 0;
  border-collapse: collapse; font-size: 14.5px;
  background: var(--white);
}
.legal-body th, .legal-body td {
  padding: 13px 15px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-2);
  overflow-wrap: break-word;
}
.legal-body th {
  background: var(--paper);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--head);
}
.legal-body tr:last-child td { border-bottom: 0; }
.legal-body__intro {
  padding: 24px 26px; margin-bottom: 44px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 16px; color: var(--slate);
}

.legal-foot {
  margin-top: 48px; padding: 26px 28px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); font-size: 15px; color: var(--slate);
}

/* ---- Legal index ---- */
.doc-group { margin-bottom: 56px; }
.doc-index { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.doc-card {
  display: block; padding: 24px 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.doc-card:hover {
  border-color: rgba(224,182,92,.42); transform: translateY(-3px);
  box-shadow: var(--sh-sm); text-decoration: none;
}
.doc-card h2, .doc-card h3, .doc-card strong {
  display: block; margin: 0 0 7px;
  font-family: var(--f-body); font-weight: 600; font-size: 16px;
  letter-spacing: -.014em; color: var(--head);
}
.doc-card span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--slate); }

/* ---- Sitemap columns ---- */
.map-col h2 {
  margin-bottom: 6px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-body); font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
}
.map-col ul { list-style: none; margin: 0; padding: 0; }
.map-col li { border-bottom: 1px solid var(--line-2); }
.map-col a { display: block; padding: 11px 0; font-size: 15px; color: var(--slate); }
.map-col a:hover { color: var(--blue); text-decoration: none; }

/* =====================================================================
   13  CTA BAND
   ===================================================================== */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: var(--ink); color: var(--on-ink-2);
  padding: clamp(72px, 8.5vw, 116px) 0;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 50% 0%, rgba(224,182,92,.18), transparent 65%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 22ch; margin: 0 auto 20px; }
.cta-band .lede { margin: 0 auto 36px; text-align: center; color: var(--on-ink-2); }
.cta-band .btn-row { justify-content: center; }
.cta-band .eyebrow { justify-content: center; }

/* =====================================================================
   14  FOOTER
   ===================================================================== */
.site-footer {
  background: #03080D; color: var(--on-ink-3);
  font-size: 15px; padding: clamp(56px, 7vw, 88px) 0 0;
}
.footer-grid { display: grid; gap: 44px; padding-bottom: 56px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px 40px; } }
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, .8fr)); gap: 48px 36px; }
}
.footer-about p {
  margin-top: 20px; max-width: 36ch;
  font-size: 14.5px; line-height: 1.7; color: var(--on-ink-3);
}
.footer-about address {
  margin-top: 20px; font-style: normal;
  font-size: 14px; line-height: 1.75; color: var(--on-ink-4);
}
.footer-about address a { color: var(--on-ink-3); }
.footer-about address a:hover { color: #fff; }
.footer-col__title {
  margin: 0 0 18px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: 14.5px; color: var(--on-ink-3); }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding: 24px 0 34px;
  border-top: 1px solid rgba(226,190,116,.14);
  font-size: 13px; color: var(--on-ink-4);
}
.footer-bottom .mono { font-size: 12px; letter-spacing: .1em; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal-links a { color: var(--on-ink-4); font-size: 13px; }
.footer-legal-links a:hover { color: #fff; text-decoration: none; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm);
  color: var(--on-ink-3);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }

/* =====================================================================
   15  COOKIE CONSENT
   ===================================================================== */
.cookie-bar {
  position: fixed; left: 20px; bottom: 20px; z-index: 140;
  width: min(560px, calc(100vw - 40px));
  padding: 24px 26px; display: none;
  background: rgba(16,26,39,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.9);
}
.cookie-bar.is-open { display: block; animation: cookieIn .45s var(--ease) both; }
@keyframes cookieIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cookie-bar__title {
  margin: 0 0 8px;
  font-family: var(--f-body); font-weight: 600; font-size: 15.5px;
  letter-spacing: -.01em; color: var(--head);
}
.cookie-bar p { margin-bottom: 18px; font-size: 14.2px; line-height: 1.6; color: var(--slate); }
.cookie-bar .btn { min-height: 42px; padding: 10px 20px; font-size: 14px; }
.cookie-bar .btn-row { gap: 10px; }

/* =====================================================================
   16  MOTION
   ===================================================================== */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.js .reveal-stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .35s; }

/* =====================================================================
   16b  BACKDROP
   ---------------------------------------------------------------------
   The SSP vault photograph is the page's recurring image. It appears
   three or four times on a full page — under the hero, again on every
   second section, and once more under the closing band — so the page
   reads as banded: a quiet flat section, then a photographic one.

   The scrim is angled, not flat: it stays near-solid on the left where
   the headline and running copy sit, then opens up across the right so
   the mark, the podium and the skyline are properly legible rather than
   reduced to texture. A soft fade at the top and bottom edge keeps each
   photographic band from cutting hard against the flat one above it.
   ===================================================================== */
:root {
  --backdrop: url("../img/ssp_backdrop_only.jpg");
}

/* ---- Home hero ---- */
.hero {
  background-color: var(--ink);
  background-image:
    linear-gradient(96deg,
      rgba(4, 9, 15, .95) 0%,
      rgba(4, 9, 15, .84) 30%,
      rgba(4, 9, 15, .42) 58%,
      rgba(4, 9, 15, .50) 100%),
    var(--backdrop);
  background-size: cover, cover;
  background-position: center, 64% center;
  background-repeat: no-repeat, no-repeat;
}

/* ---- Interior page heroes (About / Services / How / Contact / Legal / 404) ---- */
.page-hero,
.legal-hero {
  background-color: var(--ink);
  background-image:
    linear-gradient(96deg,
      rgba(4, 9, 15, .95) 0%,
      rgba(4, 9, 15, .86) 34%,
      rgba(4, 9, 15, .46) 62%,
      rgba(4, 9, 15, .56) 100%),
    var(--backdrop);
  background-size: cover, cover;
  background-position: center, 62% center;
  background-repeat: no-repeat, no-repeat;
}
/* Centred heroes carry copy across the full width, so the scrim goes radial:
   dark under the words, open at the edges. */
.page-hero:has(.page-hero__inner--center) {
  background-image:
    radial-gradient(62% 96% at 50% 50%,
      rgba(4, 9, 15, .93) 0%,
      rgba(4, 9, 15, .78) 60%,
      rgba(4, 9, 15, .58) 100%),
    var(--backdrop);
  background-position: center, center;
}

/* ---- Every second section carries the backdrop ---- */
main > section.slab:nth-of-type(odd) { background-color: var(--photo); overflow: hidden; }
main > section.slab:nth-of-type(odd)::before {
  content: "";
  /* Bled slightly past the edges because the layer is blurred: a mid-page band
     carries copy in both columns, so the photograph is thrown a little out of
     focus. It stays clearly present, but stops competing with the text. */
  position: absolute; inset: -10px; z-index: 0;
  pointer-events: none;
  filter: blur(2.5px);
  background-image:
    /* edge fade, so the band blends into the flat sections above and below */
    linear-gradient(180deg,
      rgba(7, 14, 23, .94) 0%,
      rgba(7, 14, 23, 0) 16%,
      rgba(7, 14, 23, 0) 84%,
      rgba(7, 14, 23, .94) 100%),
    /* reading scrim: heaviest under the left column, lifting across the right */
    linear-gradient(96deg,
      rgba(5, 11, 19, .95) 0%,
      rgba(5, 11, 19, .89) 32%,
      rgba(5, 11, 19, .76) 62%,
      rgba(5, 11, 19, .79) 100%),
    var(--backdrop);
  background-size: cover, cover, cover;
  background-position: center, center, 60% center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
main > section.slab:nth-of-type(odd) > .wrap { position: relative; z-index: 1; }

/* The ink slab already paints itself dark; keep its own fill under the photo
   so the banding stays consistent when it lands on an odd position. */
main > section.slab--ink:nth-of-type(odd) { background-color: var(--ink); }

/* ---- Closing band ---- */
/* Centred copy again, so the scrim is radial: heaviest behind the words,
   lifting towards the edges where the mark and the light trails read. */
.cta-band {
  background-color: var(--ink);
  background-image:
    radial-gradient(56% 90% at 50% 50%,
      rgba(4, 9, 15, .955) 0%,
      rgba(4, 9, 15, .86) 58%,
      rgba(4, 9, 15, .58) 100%),
    var(--backdrop);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* A hairline of gold separates a photographic band from the flat one above. */
main > section.slab:nth-of-type(odd),
.cta-band,
.strip {
  border-top: 1px solid rgba(226, 190, 116, .12);
}

/* ---- Small screens ----
   The columns stack, so copy now runs the full width and the angled scrim
   no longer has a clear side to open. Each band switches to a vertical
   scrim: light at the top where the photograph reads, heavier further down
   where the text sits. */
@media (max-width: 1039px) {
  /* `cover` on a tall stacked hero crops the photograph to a narrow vertical
     sliver, which loses the mark entirely. Sizing to the full width instead
     keeps the whole composition readable as a plate, with the scrim shading
     it out as the copy begins. */
  .hero,
  .page-hero,
  .legal-hero {
    background-image:
      linear-gradient(180deg,
        rgba(4, 9, 15, .36) 0%,
        rgba(4, 9, 15, .70) 15%,
        rgba(4, 9, 15, .92) 30%,
        rgba(4, 9, 15, .95) 55%,
        rgba(4, 9, 15, .96) 100%),
      var(--backdrop);
    background-size: cover, 118% auto;
    background-position: center, center top;
  }
  .page-hero:has(.page-hero__inner--center) {
    background-image:
      linear-gradient(180deg,
        rgba(4, 9, 15, .36) 0%,
        rgba(4, 9, 15, .70) 15%,
        rgba(4, 9, 15, .92) 30%,
        rgba(4, 9, 15, .95) 55%,
        rgba(4, 9, 15, .96) 100%),
      var(--backdrop);
    background-position: center, center top;
  }

  main > section.slab:nth-of-type(odd)::before {
    background-image:
      linear-gradient(180deg,
        rgba(7, 14, 23, .95) 0%,
        rgba(7, 14, 23, .84) 34%,
        rgba(7, 14, 23, .84) 66%,
        rgba(7, 14, 23, .95) 100%),
      var(--backdrop);
    background-size: cover, 130% auto;
    background-position: center, center;
  }
  .cta-band {
    background-image:
      linear-gradient(180deg,
        rgba(4, 9, 15, .84) 0%,
        rgba(4, 9, 15, .92) 50%,
        rgba(4, 9, 15, .90) 100%),
      var(--backdrop);
    background-size: cover, 130% auto;
    background-position: center, center;
  }
}

/* =====================================================================
   17  RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* The nav carried margin-left:auto — without it the actions must push right. */
  .header-actions { margin-left: auto; }
}
@media (max-width: 720px) {
  .header-actions .btn--primary { display: none; }
  .site-header__inner, .site-header--solid .site-header__inner { height: 68px; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  .legal-body { font-size: 16px; }
  .legal-body h2 { grid-template-columns: 1fr; gap: 4px; }
  .legal-body h2 .n { font-size: 11.5px; }
  .legal-body section { padding-bottom: 32px; margin-bottom: 32px; }
  .legal-body__intro, .legal-foot { padding: 20px; }
  .legal-hero__meta, .page-hero__meta { gap: 6px 20px; font-size: 10.5px; }
  .doc-card { padding: 20px 22px; }
  h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
  h2 { font-size: clamp(1.65rem, 6.6vw, 2rem); }
  .hero h1 { font-size: clamp(2.15rem, 9vw, 2.75rem); }
  .hero h1 em { white-space: normal; }
  .rec__grid { grid-template-columns: 1fr; }
  .readout__verdict { gap: 14px; }
  .card { padding: 24px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .legend__row { grid-template-columns: 1fr; gap: 10px; }
  .legend__band { justify-self: start; padding: 5px 18px; }
  .cookie-bar { left: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 20px; }
  .mobile-nav__links a { font-size: 21px; padding: 15px 0; }
  .footer-bottom { gap: 12px; }
}

/* =====================================================================
   18  PRINT & REDUCED MOTION
   ===================================================================== */
@media print {
  .site-header, .site-footer, .cookie-bar, .legal-toc,
  .cta-band, .mobile-nav, .nav-scrim, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .legal-hero, .page-hero, .hero { background: #fff; color: #000; padding: 0 0 18pt; }
  .legal-hero::before, .page-hero::before, .hero::before, .hero::after,
  main > section.slab:nth-of-type(odd)::before { display: none; }
  main > section.slab, main > section.slab:nth-of-type(odd) {
    background: #fff !important; border-top: 0 !important; color: #000;
  }
  main > section.slab h1, main > section.slab h2,
  main > section.slab h3, main > section.slab h4,
  main > section.slab p, main > section.slab li { color: #000; }
  .legal-hero h1, .page-hero h1, .hero h1 { color: #000; }
  .legal-hero__meta, .page-hero__meta { color: #444; }
  .legal-layout { display: block; padding: 0; }
  .legal-body { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}