/* ═══════════════════════════════════════════════════════════════════════════
   SaferSmart Zones™ — design system
   Light mode is built on #FFFFFF. Dark mode is built on the brand navy #071C42.
   Photography leads. The SSZ hairline wave is the signature motif, used in five
   places only. Motion is a small reusable vocabulary, never per-element.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Brand primitives ─────────────────────────────────────────────────── */
:root {
  --navy-950: #030A18;
  --navy-900: #04122E;
  --navy-800: #071C42;   /* brand navy */
  --navy-700: #0B2650;
  --navy-600: #113463;

  --teal-200: #A5F3EC;
  --teal-300: #5EEAD9;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;   /* AA-safe as text on white */
  --teal-800: #115E56;

  --indigo-500: #6366F1; /* secondary, reserved */
  --amber: #96430A;      /* darkened: AA on its own 9% tint, not just on white */

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shell: 1280px;
  --gutter: clamp(20px, 4vw, 52px);
  --section-y: clamp(72px, 9vw, 148px);

  /* Motion — one curve, a few durations. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s;
  --t-mid: .32s;
  --t-theme: .2s;
  --t-reveal: .8s;
  --stagger: 90ms;

  --boot-base: 40ms;
}

/* ── 2. Themes ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --page: #FFFFFF;
  --page-tint: #F6F8FA;
  --fg: #071C42;
  color-scheme: light;
  --shadow-sm: 0 1px 2px rgba(7,28,66,.05);
  --shadow-md: 0 1px 2px rgba(7,28,66,.04), 0 10px 24px -10px rgba(7,28,66,.14);
  --shadow-lg: 0 2px 6px rgba(7,28,66,.05), 0 28px 56px -20px rgba(7,28,66,.20);
  --ring: rgba(15,118,110,.28);
}
:root[data-theme="dark"] {
  --page: #071C42;
  --page-tint: #0A2350;
  --fg: #EDF3FF;
  color-scheme: dark;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 36px 66px -22px rgba(0,0,0,.7);
  --ring: rgba(45,212,191,.32);
}

/* ── 3. Bands ────────────────────────────────────────────────────────────────
   `data-band` rescopes the semantic tokens so a component renders correctly on
   a white section or a navy one, in either theme. Components read only these.
   `--wave-*` travels with the band, so the line field restyles on theme change
   without the animation ever restarting.
   ────────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] [data-band="light"] {
  --bg: #FFFFFF; --bg-2: #F6F8FA;
  --ink: #071C42; --ink-soft: #47566D; --ink-mute: #5C6A80;
  --edge: #E3E8EE; --edge-soft: #EFF2F6;
  --surface: #FFFFFF; --surface-2: #F6F8FA;
  --tone: var(--teal-700); --tone-bright: var(--teal-600);
  --wave-color: #0D9488; --wave-alpha: .13;
}
:root[data-theme="light"] [data-band="dark"] {
  --bg: var(--navy-800); --bg-2: var(--navy-900);
  --ink: #FFFFFF; --ink-soft: #BCCAE2; --ink-mute: #93A4C1;
  --edge: rgba(255,255,255,.14); --edge-soft: rgba(255,255,255,.08);
  --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.08);
  --tone: var(--teal-400); --tone-bright: var(--teal-300);
  --wave-color: #2DD4BF; --wave-alpha: .34;
}
:root[data-theme="dark"] [data-band="light"] {
  --bg: var(--navy-800); --bg-2: #0A2350;
  --ink: #EDF3FF; --ink-soft: #AFC0DC; --ink-mute: #9AA9C4;
  --edge: rgba(255,255,255,.13); --edge-soft: rgba(255,255,255,.07);
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075);
  --tone: var(--teal-400); --tone-bright: var(--teal-300);
  --wave-color: #2DD4BF; --wave-alpha: .26;
}
:root[data-theme="dark"] [data-band="dark"] {
  --bg: var(--navy-900); --bg-2: #061634;
  --ink: #FFFFFF; --ink-soft: #B3C3DD; --ink-mute: #8698B6;
  --edge: rgba(255,255,255,.11); --edge-soft: rgba(255,255,255,.06);
  --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07);
  --tone: var(--teal-400); --tone-bright: var(--teal-300);
  --wave-color: #2DD4BF; --wave-alpha: .30;
}

/* ── 4. Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.62;
  color: var(--fg); background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Theme switch animates only the colour properties that actually change. */
body, .section, .hero, .feature, .bleed, .masthead, .mega, .footer,
.panel__media, .review, .form, .field input, .field select, .field textarea,
.seg, .seg__btn, .who span, .flow__step, .hw__point, .principle,
.wire__hub, .wire__out, .bleed__card, .wave {
  transition: background-color var(--t-theme) ease, border-color var(--t-theme) ease,
              color var(--t-theme) ease, opacity var(--t-theme) ease;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tone, var(--teal-700)); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 999;
  padding: 10px 18px; border-radius: var(--r-md);
  background: var(--teal-700); color: #fff; font-weight: 700;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 2; }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--tone); display: inline-block; }

/* ── 5. The SSZ wave field ───────────────────────────────────────────────────
   Paths are generated and animated in waves.js. Here it is only positioned and
   tinted. Never interactive, never above content.
   ────────────────────────────────────────────────────────────────────────── */
.wave {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  opacity: var(--wave-alpha);
  /* Fades at the edges so lines never collide with the layout's boundaries. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wave__svg { width: 100%; height: 100%; }
.wave__svg path { stroke: var(--wave-color); transition: stroke var(--t-theme) ease; }

.wave--hero { z-index: 0; }
.wave--panel { opacity: calc(var(--wave-alpha) * .8); }
.wave--flow  { opacity: calc(var(--wave-alpha) * .55); }
.wave--cta   { opacity: calc(var(--wave-alpha) * 1.05); }

/* ── 6. Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: var(--ink, var(--fg)); text-wrap: balance;
}
h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.26; }

.eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tone); margin-bottom: 18px;
}

.section__title { font-size: clamp(30px, 3.5vw, 50px); }
/* Oversized statement type: tight leading, few words, strong line breaks.
   Sized to hold each line on one row inside a half-width column. */
.statement { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.04; letter-spacing: -.038em; }
.statement .clipline { display: block; }

.section__lede {
  font-size: clamp(16.5px, 1.15vw, 19px); line-height: 1.62;
  color: var(--ink-soft); max-width: 60ch; text-wrap: pretty;
}
.section__title + .section__lede, .statement + .section__lede { margin-top: 22px; }
p + p, .section__lede + p { margin-top: 16px; }
.feature__copy p, .about__body p, .bleed__cols p { color: var(--ink-soft); font-size: 15.5px; }
.accent { color: var(--tone); }

.note {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-mute);
  border-left: 2px solid var(--edge); padding-left: 14px; margin-top: 22px;
}
.note strong { color: var(--tone); font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }

/* Type C's hairline: a short rule that draws in ahead of the copy. */
.rule {
  display: block; height: 1.5px; width: 56px; margin-bottom: 22px;
  background: var(--tone); transform-origin: left center;
}

/* Overflow wrapper for the clip-up statement entrance. */
.clipline { display: block; overflow: hidden; padding-bottom: .06em; }

/* ── 7. Branded entrance ─────────────────────────────────────────────────────
   Navy → a line travels → more lines emerge → the mark resolves inside them →
   the field expands and hands off to the hero, which is already running the
   same preset. Driven by CSS animations with a forwards fill, so it clears even
   if the JS never runs; the visitor is never held behind it.
   ────────────────────────────────────────────────────────────────────────── */
.boot {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--navy-800);
  --wave-color: #2DD4BF; --wave-alpha: .5;
  animation: bootOut .36s var(--ease) .92s forwards;
}
:root[data-theme="dark"] .boot { background: var(--navy-900); }
:root[data-boot="warm"] .boot { display: none; }
.boot.is-done { display: none; }

.boot__wave {
  position: absolute; inset: 0; opacity: var(--wave-alpha);
  /* The field opens left to right: one line becomes many. */
  animation: bootSweep .72s var(--ease) .06s backwards, bootExpand .9s var(--ease) .5s both;
}
.boot__wave .wave__svg path { animation: bootLine .5s ease backwards; animation-delay: calc(.18s + var(--li) * 55ms); }

.boot__mark { position: relative; color: #fff; z-index: 2; }
.boot__mark svg { width: clamp(92px, 13vw, 140px); height: auto; }
.boot__mark { animation: bootMark .55s var(--ease) .38s backwards; }

@keyframes bootSweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bootLine  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bootMark  { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bootExpand { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes bootOut   { to { opacity: 0; visibility: hidden; } }

:root[data-boot="cold"] { --boot-base: 820ms; }
:root[data-boot="warm"] { --boot-base: 40ms; }

/* ── 8. Hero entrance ────────────────────────────────────────────────────── */
.hero__el { animation: heroIn .8s var(--ease) backwards; animation-delay: calc(var(--boot-base) + var(--n, 0) * 70ms); }
.hero__media.hero__el { animation-name: heroImg; animation-duration: 1s; }
.hero__title .hero__el { animation-name: heroLine; animation-duration: .9s; }
[data-hero="1"] { --n: 1; } [data-hero="2"] { --n: 2; } [data-hero="3"] { --n: 3; }
[data-hero="4"] { --n: 4; } [data-hero="5"] { --n: 5; } [data-hero="6"] { --n: 6; }
[data-hero="7"] { --n: 7; }
@keyframes heroIn   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroLine { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes heroImg  { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }

/* `backwards`, not `both`: once the entrance ends the element falls back to its
   own opacity, so a later theme switch re-tints the field instead of being
   pinned to the value captured when the animation started. */
.hero__wave { animation: heroWave 1.1s var(--ease) backwards; animation-delay: calc(var(--boot-base) - 300ms); }
@keyframes heroWave { from { opacity: 0; } to { opacity: var(--wave-alpha); } }

/* The masthead itself only fades. A transform on it — like a backdrop-filter —
   would make it the containing block for the fixed mobile drawer. */
.masthead { animation: fadeIn .5s var(--ease) backwards; animation-delay: calc(var(--boot-base) - 200ms); }
.brand, .masthead__actions, .nav__list { animation: navIn .6s var(--ease) backwards; animation-delay: calc(var(--boot-base) - 160ms); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes navIn  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── 9. Entrance vocabulary ──────────────────────────────────────────────────
   Four types only. A: editorial text. B: photography mask. C: hairline draw.
   D: large statement clipping up. Everything else reuses one of them.
   ────────────────────────────────────────────────────────────────────────── */
[data-reveal] {
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease),
              clip-path var(--t-reveal) var(--ease), stroke-dashoffset 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* A — editorial text */
[data-reveal="text"] { opacity: 0; transform: translateY(22px); }
[data-reveal="card"] { opacity: 0; transform: translateY(24px); }

/* B — photography: mask opens, image settles out of a slight scale */
[data-reveal="image"] { opacity: 0; }
[data-reveal="image"] .mask { clip-path: inset(0 0 100% 0); }
[data-reveal="image"] .mask img { transform: scale(1.045); }
.mask { clip-path: inset(0 0 0 0); }
.mask img { transition: transform 1.1s var(--ease), opacity .5s ease; }

/* C — hairline draws across */
[data-reveal="line"] { transform: scaleX(0); }
[data-reveal="thread"] path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* D — large statement clips upward */
[data-reveal="statement"] .clipline > * { display: block; opacity: 0; transform: translateY(105%); transition: inherit; }
[data-reveal="statement"] .clipline:nth-child(2) > * { transition-delay: 90ms; }

[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal="image"].is-revealed .mask { clip-path: inset(0 0 0 0); }
[data-reveal="image"].is-revealed .mask img { transform: none; }
[data-reveal="thread"].is-revealed path { stroke-dashoffset: 0; }
[data-reveal="statement"].is-revealed .clipline > * { opacity: 1; transform: none; }

/* ── 10. Image placeholders ──────────────────────────────────────────────── */
/* The LQIP sits on the wrapper as a background. An <img> paints nothing until it
   decodes, so the blur shows through and is replaced in place — no white flash,
   no layout shift, and crucially no dependency on JS or a transition completing
   for the photograph to be visible at all. */
.ph { display: block; position: relative; overflow: hidden; line-height: 0; background-size: cover; background-position: center; }
.ph img { opacity: 1; }
.ph--hero { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAADQAAAAD/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwAHBwcHBwcMBwcMEQwMDBEXERERERceFxcXFxceJB4eHh4eHiQkJCQkJCQkKysrKysrMjIyMjI4ODg4ODg4ODg4/9sAQwEJCQkODQ4ZDQ0ZOyghKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/90ABAAC/9oADAMBAAIRAxEAPwDktA1yGw0dEYyNJuOxUOF9fm/lXHa5PqF9eyXN2N3mMSpH3R/9YVrWMaiyWIZ6kg+lVEURk4ye2CSRRe+5Lico9vKxyg4pv2af0/Wuuyp520fL6UrD5T//2Q=="); }
.ph--redlight { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAADwAAAAD/wAARCAAPABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwAHBwcHBwcMBwcMEQwMDBEXERERERceFxcXFxceJB4eHh4eHiQkJCQkJCQkKysrKysrMjIyMjI4ODg4ODg4ODg4/9sAQwEJCQkODQ4ZDQ0ZOyghKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/90ABAAC/9oADAMBAAIRAxEAPwD0XxBf6Xptuk0oLxyNgFGBHrz68c1579r0m7eS5gTeBOCrZ4GFHQH3zzWTZaZp17HLCqbCyYB3MQCOMgZ6806402DRlhis/wB4LuZYSsmSBuB+bionXb90unRinzM1LwQi7kDS8ZG3ByMbR/Wq2Lb/AJ6GuVvbK8tZvJlmfIHGHPSqflT/APPaT/vs1h7WXdmvJH+U/9k="); }
.ph--construction { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAADQAAAAD/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwAHBwcHBwcMBwcMEQwMDBEXERERERceFxcXFxceJB4eHh4eHiQkJCQkJCQkKysrKysrMjIyMjI4ODg4ODg4ODg4/9sAQwEJCQkODQ4ZDQ0ZOyghKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/90ABAAC/9oADAMBAAIRAxEAPwDgbITwa2r3uRHvb5N3Yg44/GuqvNV02GMeUsoKOpxgc4OcfjXKyWEdxcrduzbhjAzwMVryWbXkUT+YUK5bgDk5x/SreMqxjZMI4SnJ3aLcni6xjbbcRMXxyR0qP/hMdL/54vXO3DtA4jbEhA+8QMnBIqv9pP8AcX8qFjatingaf9XP/9k="); }

/* ── 11. Masthead ────────────────────────────────────────────────────────────
   Integrated with the hero at rest; surface, blur and a hairline resolve in as
   the page moves. Never jumps between states.
   ────────────────────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 110;
  background: color-mix(in srgb, var(--page) 0%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color .45s ease, border-color .45s ease,
              box-shadow .45s ease, backdrop-filter .45s ease;
}
.masthead.is-stuck {
  background: color-mix(in srgb, var(--page) 84%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: color-mix(in srgb, var(--fg) 11%, transparent);
  box-shadow: var(--shadow-sm);
}
/* backdrop-filter makes an element the containing block for its fixed-position
   descendants, which would trap the drawer inside the header. Drop it when open. */
.masthead.is-drawer { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--page); }

.masthead__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); min-height: 78px; transition: min-height .45s var(--ease); }
.masthead.is-stuck .masthead__inner { min-height: 66px; }

.brand { display: flex; align-items: center; color: var(--fg); flex: none; }
/* The official lockup is one piece of artwork — mark and wordmark in a fixed
   relationship — so it is sized by height and never re-composed in CSS. Every
   fill is currentColor, so it takes --fg here and white in the footer. */
.brand__logo { height: 30px; width: auto; display: block;
               transition: color var(--t-fast) ease, height .45s var(--ease); }
.masthead.is-stuck .brand__logo { height: 26px; }
.brand:hover .brand__logo { color: var(--teal-600); }
.brand--lg .brand__logo { height: 36px; }

/* The mark alone, for the loader. */
.brand__mark { width: 50px; height: auto; transition: color var(--t-fast) ease, width .45s var(--ease); }

/* The sprite holds the <defs> the lockups reference. It must stay in the layout
   tree — display:none stops <use> resolving in some engines — but occupy nothing. */
.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav__item { position: relative; }
.nav__item--drawer { display: none; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.008em;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav__link:hover, .nav__item.is-open .nav__link {
  color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.nav__caret { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform var(--t-fast) var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.masthead__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* ── 12. Segmented controls ──────────────────────────────────────────────── */
.seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 10px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-pressed="true"] { background: var(--page); color: var(--fg); box-shadow: var(--shadow-sm); }
.seg__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.seg--compact .seg__btn { padding: 6px 9px; }
.seg--compact.seg--theme .seg__btn { padding: 6px 8px; }

.burger {
  display: none; width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background: none; border-radius: var(--r-md); place-items: center;
}
.burger span { display: block; width: 16px; height: 2px; background: var(--fg); border-radius: 2px; margin: 4px auto; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 13. Mega menu ───────────────────────────────────────────────────────── */
.mega {
  position: fixed; left: 0; right: 0;
  background: var(--page); border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-9px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
  z-index: 105;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner { padding-block: 30px 36px; }
.mega__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mega__list a {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border-radius: var(--r-lg); border: 1px solid transparent;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.mega__list a:hover { background: var(--page-tint); border-color: color-mix(in srgb, var(--fg) 10%, transparent); transform: translateY(-2px); }
.mega__num { font-family: var(--font-mono); font-size: 12px; color: var(--teal-700); flex: none; padding-top: 2px; }
:root[data-theme="dark"] .mega__num { color: var(--teal-400); }
.mega__list strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.014em; }
.mega__list em { display: block; font-style: normal; font-size: 13.5px; line-height: 1.52; color: color-mix(in srgb, var(--fg) 62%, transparent); margin-top: 4px; }

/* ── 14. Buttons ─────────────────────────────────────────────────────────── */
.btn {
  --btn-py: 12px; --btn-px: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.008em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { --btn-py: 9px; --btn-px: 16px; font-size: 13.5px; }
.btn--lg { --btn-py: 14px; --btn-px: 28px; font-size: 15.5px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--teal-700); color: #fff; }
.btn--primary:hover { background: var(--teal-800); box-shadow: var(--shadow-md); transform: translateY(-1px); }
:root[data-theme="dark"] .btn--primary { background: var(--teal-500); color: #04202B; }
:root[data-theme="dark"] .btn--primary:hover { background: var(--teal-400); }
[data-band="dark"] .btn--primary { background: var(--teal-400); color: #042A26; }
[data-band="dark"] .btn--primary:hover { background: var(--teal-300); }

.btn--outline { border-color: color-mix(in srgb, currentColor 26%, transparent); color: var(--ink, var(--fg)); background: transparent; }
.btn--outline:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); transform: translateY(-1px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 14.5px; font-weight: 700; color: var(--tone);
}
.link-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-mid) var(--ease); }
a.link-arrow:hover svg, .panel:hover .link-arrow svg { transform: translateX(5px); }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--edge); color: var(--ink-mute);
}
.tag--amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 34%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
:root[data-theme="dark"] .tag--amber { color: #F0B860; }

/* ── 15. Sections ────────────────────────────────────────────────────────── */
.section { background: var(--bg); color: var(--ink); padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--tint { background: var(--bg-2); }
.section--navy { background: var(--navy-800); }
:root[data-theme="dark"] .section--navy { background: var(--navy-900); }

.section__head { margin-bottom: clamp(38px, 4.5vw, 68px); max-width: 780px; }
.section__head--split {
  max-width: none; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 72px); align-items: end;
}
.section__foot { margin-top: clamp(38px, 4.5vw, 64px); display: flex; justify-content: center; }

/* ── 16. Hero ────────────────────────────────────────────────────────────────
   Back: wave field. Middle: photography. Front: type and CTA.
   ────────────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--bg); color: var(--ink); position: relative; overflow: hidden;
  padding-block: clamp(40px, 5vw, 80px) clamp(28px, 3vw, 48px);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 4vw, 56px); align-items: center;
}
/* Sized so each line holds on one row at laptop widths — three lines, never four. */
.hero__title {
  font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.042em;
  margin-bottom: 26px; text-wrap: initial;
}
.hero__lede { font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.6; color: var(--ink-soft); max-width: 48ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__media { margin: 0; position: relative; z-index: 1; }
.hero__media .ph { border-radius: var(--r-xl); border: 1px solid var(--edge); box-shadow: var(--shadow-lg); }
.hero__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero__media figcaption { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--ink-mute); max-width: 52ch; }

.hero__zones {
  list-style: none; padding: 0; margin-top: clamp(44px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
}
.hero__zones li + li { border-left: 1px solid var(--edge); }
.hero__zones a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 22px clamp(14px, 2vw, 28px) 4px;
  font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); transition: color var(--t-fast) ease;
}
.hero__zones a:hover { color: var(--tone); }
.hero__zoneNum { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--tone); }

/* ── 17. Use-case panels ─────────────────────────────────────────────────── */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 34px); }
.panel { display: flex; flex-direction: column; position: relative; }
/* The hairline that carries the eye from one use case to the next. */
.panel__thread {
  display: block; height: 1px; width: 100%; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 12%, transparent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger));
}
.panel[data-reveal].is-revealed .panel__thread { transform: scaleX(1); }

.panel__media {
  display: block; overflow: hidden; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--edge);
  aspect-ratio: 4 / 3;
  transition: border-color var(--t-mid) ease, box-shadow var(--t-mid) ease;
}
.panel__media .ph, .panel__media img { width: 100%; height: 100%; }
.panel__media img { object-fit: cover; transition: transform .7s var(--ease), opacity .5s ease; }
.panel:hover .panel__media { border-color: color-mix(in srgb, var(--tone) 45%, var(--edge)); box-shadow: var(--shadow-md); }
.panel:hover .panel__media img.is-loaded { transform: scale(1.02); }

.panel__body { padding-top: 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.panel__cat {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.panel__num { color: var(--tone); }
.panel h3 { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.026em; }
.panel h3 a { transition: color var(--t-fast) ease; }
.panel:hover h3 a { color: var(--tone); }
.panel p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.panel .link-arrow { margin-top: auto; padding-top: 8px; }

.photo-pending {
  width: 100%; height: 100%; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 22px; background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--ink) 4%, transparent) 11px 22px),
    var(--surface-2);
}
.photo-pending__tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--edge); color: var(--ink-mute);
}
.photo-pending__brief { font-size: 12.5px; line-height: 1.55; color: var(--ink-mute); max-width: 46ch; }
.photo-pending__brief strong { color: var(--ink-soft); }
.photo-pending--tall { min-height: 440px; border-radius: var(--r-xl); border: 1px solid var(--edge); }

/* ── 18. Hardware-agnostic ───────────────────────────────────────────────── */
.hw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
.hw__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hw__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.hw__point { background: var(--bg); padding: 24px 22px; }
.hw__point h3 { font-size: 16.5px; margin-bottom: 8px; }
.hw__point p { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); }

.sources { margin-top: clamp(52px, 6vw, 88px); padding-top: clamp(38px, 4.5vw, 64px); border-top: 1px solid var(--edge); }
.sources__title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tone); text-align: center; margin-bottom: 34px; }

/* Camera sources joined to the platform by the SSZ hairline. */
.wire { display: grid; justify-items: center; color: var(--tone); }
.wire__in { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--wire-cols, 4), minmax(0, 1fr)); gap: 14px; width: 100%; }
.wire__in li {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 22px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--edge);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.wire__in svg { width: 24px; height: 24px; fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wire__links { width: 100%; height: 76px; opacity: .85; }
.wire__links--out { height: 40px; }
.wire__hub {
  width: 100%; padding: 20px; border-radius: var(--r-lg); text-align: center;
  background: color-mix(in srgb, var(--tone) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent);
  font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.wire__out {
  padding: 12px 22px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--edge);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}

/* ── 19. Why / reasons ───────────────────────────────────────────────────── */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--edge); }
.reason { padding: clamp(26px, 3vw, 42px) 0; border-bottom: 1px solid var(--edge); padding-right: clamp(20px, 4vw, 64px); }
.reason:nth-child(even) { padding-left: clamp(20px, 4vw, 64px); padding-right: 0; border-left: 1px solid var(--edge); }
.reason h3 { font-size: 20px; margin-bottom: 10px; }
.reason p { font-size: 15px; line-height: 1.62; color: var(--ink-soft); max-width: 46ch; }

/* ── 20. Flow ────────────────────────────────────────────────────────────── */
.flow__source {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--tone) 34%, var(--edge));
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.flow__source svg { width: 17px; height: 17px; fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.flow__wrap { position: relative; }
/* The line the six stages sit on; draws across as the section enters. */
.flow__thread { width: 100%; height: 54px; color: var(--tone); opacity: .55; }
.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(var(--flow-cols, 6), minmax(0, 1fr)); gap: 1px;
  background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden;
}
.flow__step { background: var(--bg); padding: 26px 20px 28px; }
.section--tint .flow__step { background: var(--bg-2); }
.flow__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); }
.flow__step h3 { font-size: 17px; margin: 10px 0 8px; }
.flow__step p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.flow__step--human { background: color-mix(in srgb, var(--tone) 9%, var(--bg)); }
.flow__badge {
  display: inline-block; margin-top: 14px; max-width: 100%; overflow-wrap: break-word;
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--tone); color: #fff; font-weight: 500;
}
/* Where --tone resolves to a bright teal, navy reads better than white. */
:root[data-theme="dark"] .flow__badge, [data-band="dark"] .flow__badge { color: var(--navy-900); }

/* The stage that belongs to a person, in either layout. */
.story__step--human { background: color-mix(in srgb, var(--tone) 9%, var(--bg)); }

/* ── 21. Feature sections ────────────────────────────────────────────────── */
.feature { background: var(--bg); color: var(--ink); padding-block: var(--section-y); position: relative; overflow: hidden; }
.feature.section--tint { background: var(--bg-2); }
.feature__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.feature--reverse .feature__media { order: 2; }
.feature--reverse .feature__copy { order: 1; }
.feature__media { margin: 0; }
.feature__media .ph { border-radius: var(--r-xl); border: 1px solid var(--edge); box-shadow: var(--shadow-md); }
.feature__media img { width: 100%; }
.feature__num { color: var(--ink-mute); }
.feature__copy .section__title { font-size: clamp(28px, 3vw, 44px); }
.feature__copy .link-arrow { margin-top: 24px; }

.marks { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 24px; }
.marks li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.marks li::before {
  content: ""; position: absolute; left: 0; top: .44em;
  width: 13px; height: 7px; border-left: 2px solid var(--tone); border-bottom: 2px solid var(--tone);
  transform: rotate(-45deg);
}
.marks li strong { color: var(--ink); font-weight: 700; }
.marks--lg { gap: 13px; }
.marks--lg li { font-size: 15.5px; }

/* ── 22. Full-bleed use case ─────────────────────────────────────────────────
   Breaks the container: photography runs edge to edge with the copy sitting on
   a raised card over it.
   ────────────────────────────────────────────────────────────────────────── */
.bleed { position: relative; background: var(--navy-900); color: var(--ink); isolation: isolate; overflow: hidden; }
:root[data-theme="light"] .bleed { background: var(--navy-800); }

/* The photograph runs edge to edge and uninterrupted — this asset carries its
   own overlay graphics, so nothing is set on top of it. It fades into the band
   below, and the copy overlaps that fade. */
.bleed__media { position: relative; width: 100%; margin: 0; z-index: 0; }
.bleed__media .ph { width: 100%; height: clamp(300px, 44vw, 600px); }
.bleed__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.bleed__media::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 62%; z-index: 1;
  background: linear-gradient(180deg, transparent 0%,
                                      color-mix(in srgb, var(--navy-900) 55%, transparent) 38%,
                                      color-mix(in srgb, var(--navy-900) 92%, transparent) 72%,
                                      var(--navy-900) 100%);
}
:root[data-theme="light"] .bleed__media::after {
  background: linear-gradient(180deg, transparent 0%,
                                      color-mix(in srgb, var(--navy-800) 55%, transparent) 38%,
                                      color-mix(in srgb, var(--navy-800) 92%, transparent) 72%,
                                      var(--navy-800) 100%);
}
.bleed__inner { position: relative; z-index: 2; margin-top: clamp(-110px, -6.5vw, -56px); padding-bottom: clamp(56px, 6vw, 104px); }
.bleed__card { max-width: 960px; }
.bleed__card .eyebrow { color: var(--teal-300); }
.bleed__card .rule { background: var(--teal-300); }
.bleed__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); margin-top: 28px; }
.bleed__cols .section__lede, .bleed__cols p, .bleed__cols .marks li { color: rgba(255,255,255,.82); }
.bleed__cols .note { color: rgba(255,255,255,.6); border-left-color: rgba(255,255,255,.2); }

/* ── 23. Split layouts ───────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--reverse .split__copy { order: 2; }
.split--reverse .split__panel { order: 1; }
.split__copy .section__title { font-size: clamp(28px, 3vw, 44px); }
.split__panel { margin: 0; }
.agency-img { width: 100%; border-radius: var(--r-xl); }

.review { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-md); }
:root[data-theme="light"] [data-band="light"] .review { background: #FFFFFF; }
.review__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--edge); }
.review__title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.review__rows { margin: 4px 0 20px; }
.review__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--edge-soft); }
.review__rows dt { font-size: 12.5px; color: var(--ink-mute); }
.review__rows dd { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); text-align: right; }
.review__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.review__thumb {
  aspect-ratio: 4 / 3; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--edge);
  display: grid; place-items: center; text-align: center; padding: 4px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.review__actions .btn { cursor: default; }
.review__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.review__note { margin-top: 16px; font-size: 11.5px; color: var(--ink-mute); }

.who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.who span {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--edge); color: var(--ink-soft);
}

/* ── 24. Principles ──────────────────────────────────────────────────────── */
.principles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.principle { padding-top: 22px; border-top: 2px solid var(--tone); }
.principle h3 { font-size: 17px; margin-bottom: 9px; }
.principle p { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); }

/* ── 25. Final CTA ───────────────────────────────────────────────────────── */
.cta__head { max-width: 900px; margin-bottom: clamp(40px, 5vw, 72px); }
.cta__title { font-size: clamp(36px, 5.2vw, 76px); line-height: 1.0; letter-spacing: -.045em; }
.cta__title + .section__lede { margin-top: 24px; }
.cta__region {
  display: flex; align-items: center; gap: 10px; margin-top: 26px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tone-bright);
}
.cta__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-details { margin-top: 30px; display: grid; gap: 0; border-top: 1px solid var(--edge); }
.contact-details > div { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.contact-details dt { flex: none; width: 80px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.contact-details dd { font-family: var(--font-mono); font-size: 13px; color: var(--tone); }

.form {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-xl); padding: clamp(22px, 2.4vw, 32px);
  display: grid; gap: 15px; box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: grid; gap: 7px; }
.field > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.field > span i { font-style: normal; opacity: .68; text-transform: none; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--edge);
  border-radius: var(--r-md); color: var(--ink);
  font-size: 14.5px; resize: vertical;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-theme) ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tone); box-shadow: 0 0 0 3px var(--ring); }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(1em + 2px), calc(100% - 14px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #FF8A5B; box-shadow: 0 0 0 3px rgba(255,138,91,.18); }
.form__note { font-size: 11.5px; color: var(--ink-mute); text-align: center; }
.form__done { display: grid; place-items: center; gap: 12px; text-align: center; padding: clamp(30px, 5vw, 56px) 24px; animation: heroIn .55s var(--ease) both; }
.form__done svg { width: 42px; height: 42px; fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.form__done h3 { font-size: 21px; }
.form__done p { font-size: 14.5px; color: var(--ink-soft); max-width: 40ch; }

/* ── 26. About ───────────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.region { margin-top: 28px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); border-left: 3px solid var(--tone); }
.region h3 { font-size: 17px; margin-bottom: 8px; }
.region p { font-size: 14.5px; color: var(--ink-soft); margin-top: 0; }

/* ── 27. Footer ──────────────────────────────────────────────────────────── */
.footer { background: var(--navy-900); color: rgba(255,255,255,.66); padding-block: clamp(48px, 5vw, 76px) 0; }
:root[data-theme="dark"] .footer { background: #030A18; }
.footer .brand { color: #fff; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); padding-bottom: 48px; }
.footer__tag { font-size: 14px; line-height: 1.6; margin-top: 18px; max-width: 32ch; color: rgba(255,255,255,.58); }
.footer__region { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.footer__col h4 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-300); margin-bottom: 16px; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer__col li { font-size: 14px; color: rgba(255,255,255,.55); }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.62); transition: color var(--t-fast) ease; }
.footer__col a:hover { color: #fff; }
.footer__cta { margin-top: 18px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: 22px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12.5px; color: rgba(255,255,255,.6);
}
.footer__meta { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__meta a { transition: color var(--t-fast) ease; }
.footer__meta a:hover { color: var(--teal-300); }

/* ── 28. Responsive ──────────────────────────────────────────────────────────
   Every track is minmax(0, …): a bare `1fr` resolves its minimum to `auto`,
   so one long unbreakable word widens the column past the viewport.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1240px) { .masthead__actions .seg--lang .seg__btn { padding: 6px 7px; } }

@media (max-width: 1180px) {
  .flow { grid-template-columns: repeat(var(--flow-cols-md, 3), minmax(0, 1fr)); }
  .flow__thread { display: none; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .hw { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .bleed__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .nav, .masthead__actions .btn, .masthead__actions .seg { display: none; }
  .burger { display: grid; }
  .masthead__inner { justify-content: space-between; }

  .nav.is-mobile {
    display: block; position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    background: var(--page); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px var(--gutter) 60px;
    animation: drawerIn .34s var(--ease) both;
  }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  .nav.is-mobile .nav__list { flex-direction: column; align-items: stretch; gap: 2px; animation: none; }
  .nav.is-mobile .nav__link { width: 100%; justify-content: space-between; font-size: 17px; padding: 15px 12px; }
  .nav.is-mobile .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; display: none; }
  .nav.is-mobile .nav__item.is-open .mega { display: block; }
  .nav.is-mobile .mega__inner { padding: 2px 0 14px; }
  .nav.is-mobile .mega__list { grid-template-columns: minmax(0, 1fr); }

  .nav.is-mobile .nav__item--drawer { display: block; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--edge); }
  .drawer__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
  .nav.is-mobile .seg { display: flex; width: 100%; margin-bottom: 22px; }
  .nav.is-mobile .seg__btn { flex: 1; padding: 11px 8px; font-size: 12.5px; }
  .nav.is-mobile .seg__btn b { font-weight: 600; margin-right: 6px; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 88px; }
  .hero__inner, .feature__inner, .split, .cta__inner, .about,
  .section__head--split { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature__media, .split--reverse .split__panel { order: 1; }
  .feature--reverse .feature__copy, .split--reverse .split__copy { order: 2; }
  .section__head--split { align-items: start; gap: 18px; }
  .panels { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .reason, .reason:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .agency-img { max-width: 560px; }
  .wire__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wire__links { height: 56px; }
  .bleed__inner { padding-block: clamp(90px, 22vw, 180px) clamp(40px, 8vw, 72px); }
}

@media (max-width: 720px) {
  :root { --section-y: clamp(56px, 12vw, 88px); }
  .flow, .principles, .form__row, .footer__cols, .review__thumbs,
  .hw__points { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { gap: 28px; }
  .hero__zones { grid-template-columns: minmax(0, 1fr); }
  .hero__zones li + li { border-left: 0; border-top: 1px solid var(--edge); }
  .hero__zones a { padding: 16px 0; }
  .hero__cta .btn, .hw__cta .btn { width: 100%; }
  .mega__list { grid-template-columns: minmax(0, 1fr); }
  .contact-details > div { flex-direction: column; gap: 4px; }
  .contact-details dt { width: auto; }
  .wire__in { grid-template-columns: minmax(0, 1fr); }
  .wire__links { height: 40px; }
  /* Mobile keeps the reveal but drops the stagger and eases the amplitude. */
  [data-reveal] { transition-delay: 0ms !important; }
  .wave { opacity: calc(var(--wave-alpha) * .75); }
}

/* ── 29. Reduced motion ──────────────────────────────────────────────────────
   Mandatory: static wave field, instant entrance, no masks, no stagger.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  [data-reveal], [data-reveal="statement"] .clipline > * { opacity: 1 !important; transform: none !important; }
  [data-reveal="image"] .mask { clip-path: none !important; }
  [data-reveal="thread"] path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .panel__thread { transform: scaleX(1) !important; }
  .hero__el, .masthead, .brand, .masthead__actions, .nav__list, .hero__wave { animation: none !important; }
  .ph img { opacity: 1 !important; }
  .panel:hover .panel__media img { transform: none !important; }
  .boot { display: none !important; }
}

/* ── 30. Print ───────────────────────────────────────────────────────────── */
@media print {
  .masthead, .form, .footer__cols, .boot, .wave { display: none; }
  .section, .hero, .feature, .bleed { background: #fff !important; color: #000 !important; padding-block: 20px; }
  .bleed__media { display: none; }
  [data-reveal], .hero__el, [data-reveal="statement"] .clipline > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   31. MULTI-PAGE COMPONENTS
   Added for the full site. Everything below reuses the existing token set, so
   each component works on either band in either theme without a variant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero (inner pages) ─────────────────────────────────────────────── */
.phero {
  position: relative; overflow: hidden;
  background: var(--bg); color: var(--ink);
  padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 72px);
}
.phero__inner { max-width: 980px; }
.phero__title {
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.045em;
  margin-bottom: 26px;
}
.phero__title .clipline { display: block; }
.phero__lede { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.58; color: var(--ink-soft); max-width: 62ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.phero--compact { padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.phero__media { margin: clamp(40px, 5vw, 72px) 0 0; }
.phero__media .ph { width: 100%; height: clamp(260px, 34vw, 460px); }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

/* Inner-page entrance: same ladder as the homepage, one beat quicker. */
.phero__el { animation: heroIn .72s var(--ease) backwards; animation-delay: calc(40ms + var(--n, 0) * 65ms); }
.phero__title .phero__el { animation-name: heroLine; animation-duration: .85s; }
[data-p="1"] { --n: 1; } [data-p="2"] { --n: 2; } [data-p="3"] { --n: 3; }
[data-p="4"] { --n: 4; } [data-p="5"] { --n: 5; } [data-p="6"] { --n: 6; }

/* ── Section utility ─────────────────────────────────────────────────────── */
.section--flush { padding-top: clamp(24px, 3vw, 48px); }
.hero__zones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .hero__zones--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__zones--4 li:nth-child(3) { border-left: 0; }
  .hero__zones--4 li:nth-child(n+3) { border-top: 1px solid var(--edge); } }
@media (max-width: 720px) { .hero__zones--4 { grid-template-columns: minmax(0, 1fr); }
  .hero__zones--4 li + li { border-left: 0; border-top: 1px solid var(--edge); } }
.note--center { max-width: 76ch; margin-inline: auto; text-align: left; }
.tbv { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--tone); }

/* ── Numbered story / path / model / program strips ──────────────────────── */
.story, .path, .prog {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px; background: var(--edge);
  border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden;
}
.story { grid-template-columns: repeat(var(--story-cols, 5), minmax(0, 1fr)); }
.path  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.prog  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story__step, .path__step, .prog__step { background: var(--bg); padding: 26px 20px 28px; }
.section--tint .story__step, .section--tint .path__step, .section--tint .prog__step { background: var(--bg-2); }
.story__num, .path__num, .prog__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); }
.story__step h3, .path__step h3, .prog__step h3 { font-size: 17px; margin: 10px 0 8px; }
.story__step p, .path__step p, .prog__step p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.prog__step h3 { font-size: 19px; }
.prog__step p { font-size: 14px; }
.path__step--human { background: color-mix(in srgb, var(--tone) 9%, var(--bg)); }
.section--tint .path__step--human { background: color-mix(in srgb, var(--tone) 9%, var(--bg-2)); }

/* ── Reason / capability / org / program cards ───────────────────────────── */
.reason__num { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); margin-bottom: 12px; }

.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.cap { padding: 28px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) ease; }
:root[data-theme="light"] [data-band="light"] .cap { background: #fff; }
.cap:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 42%, var(--edge)); }
.cap__num { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); margin-bottom: 16px; }
.cap h3 { font-size: 21px; }
.cap__lead { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 6px 0 10px; }
.cap p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.orgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.org { background: var(--bg); padding: 26px 24px; }
.section--tint .org { background: var(--bg-2); }
.org h3 { font-size: 17.5px; margin-bottom: 8px; }
.org p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.ptypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.ptype { display: block; padding: 30px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) ease, box-shadow var(--t-mid) ease; }
:root[data-theme="light"] [data-band="light"] .ptype { background: #fff; }
.ptype:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 45%, var(--edge)); box-shadow: var(--shadow-md); }
.ptype__num { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); margin-bottom: 14px; }
.ptype h3 { font-size: clamp(20px, 1.8vw, 25px); margin-bottom: 10px; }
.ptype p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.ptype__tag { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--edge); color: var(--ink-mute); }

/* ── Three-layer panels ──────────────────────────────────────────────────── */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.layer { display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) ease, box-shadow var(--t-mid) ease; }
:root[data-theme="light"] [data-band="light"] .layer { background: #fff; }
.layer:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone) 45%, var(--edge)); box-shadow: var(--shadow-md); }
.layer__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); }
.layer__icon { width: 46px; height: 46px; margin: 18px 0 16px; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); }
.layer__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.layer h3 { font-size: clamp(21px, 2vw, 27px); margin-bottom: 10px; }
.layer p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.layer__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--tone); }
.layer__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-mid) var(--ease); }
.layer:hover .layer__go svg { transform: translateX(5px); }

/* ── Model cards ─────────────────────────────────────────────────────────── */
.model { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.model__card { padding-top: 24px; border-top: 2px solid var(--tone); }
.model__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--tone); }
.model__card h3 { font-size: clamp(24px, 2.4vw, 34px); margin: 10px 0 12px; letter-spacing: -.03em; }
.model__card p { font-size: 15px; line-height: 1.62; color: var(--ink-soft); }

/* ── Fact / split lists ──────────────────────────────────────────────────── */
.factlist, .splitlist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--edge); }
.factlist li, .splitlist li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--edge); align-items: baseline; }
.factlist__k, .splitlist__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); }
.factlist__v, .splitlist__v { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.splitlist__v { font-weight: 400; color: var(--ink-soft); }

/* ── Architecture diagram ────────────────────────────────────────────────── */
.arch { display: grid; grid-template-columns: minmax(0,1fr) 90px minmax(0,1.1fr) 90px minmax(0,.7fr); gap: 0; align-items: center; color: var(--tone); }
.arch__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }
.arch__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.arch__list li { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.arch__link { width: 100%; height: 190px; opacity: .8; }
.arch__hub { padding: 24px; border-radius: var(--r-lg); text-align: center; background: color-mix(in srgb, var(--tone) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent); }
.arch__hubTitle { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.arch__hubList { list-style: none; padding: 0; display: grid; gap: 6px; }
.arch__hubList li { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.arch__col--out .arch__list li { background: color-mix(in srgb, var(--tone) 10%, transparent); border-color: color-mix(in srgb, var(--tone) 34%, transparent); text-align: center; }

/* ── Technology cards ────────────────────────────────────────────────────── */
.techs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.tech { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); overflow: hidden; transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) ease; }
:root[data-theme="light"] [data-band="light"] .tech { background: #fff; }
.tech:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 42%, var(--edge)); }
.tech__media { margin: 0; aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--surface-2); border-bottom: 1px solid var(--edge); padding: 18px; }
.tech__media img { max-height: 100%; width: auto; }
.tech__media--icon svg { width: 64px; height: 64px; fill: none; stroke: var(--tone); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tech__body { padding: 24px; }
.tech__cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.tech h3 { font-size: 21px; margin-bottom: 10px; }
.tech p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ── Region bar, cards, map ──────────────────────────────────────────────── */
.regionbar { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3vw, 44px); padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); border-left: 3px solid var(--tone); font-size: 14.5px; color: var(--ink-soft); }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.regionCard { padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); }
.regionCard__k { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.namap { width: 100%; height: auto; color: var(--tone); }
.namap__ca, .namap__us { fill: color-mix(in srgb, var(--tone) 10%, transparent); }
.namap__us { fill: color-mix(in srgb, var(--tone) 18%, transparent); }
.split__cap { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--ink-mute); }

/* ── Contact list ────────────────────────────────────────────────────────── */
.contacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.contacts__item { background: var(--bg); padding: 24px 22px; }
.section--tint .contacts__item { background: var(--bg-2); }
.contacts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.contacts dd { margin: 0; }

/* ── CTA variants ────────────────────────────────────────────────────────── */
.cta__solo { max-width: 920px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ── Steps (ordered, inline) ─────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding-left: 40px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  border-radius: 999px; padding: 2px 7px;
}

/* ── News ────────────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 44px); }
.filter {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--edge); color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.filter:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--edge)); color: var(--ink); }
.filter.is-active { background: var(--tone); border-color: var(--tone); color: #fff; }
:root[data-theme="dark"] .filter.is-active, [data-band="dark"] .filter.is-active { color: var(--navy-900); }

.feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; margin-bottom: clamp(36px, 4vw, 64px); }
.feat__media { display: block; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--edge); aspect-ratio: 16 / 11; }
.feat__media .ph, .feat__media img { width: 100%; height: 100%; }
.feat__media img { object-fit: cover; transition: transform .7s var(--ease); }
.feat:hover .feat__media img { transform: scale(1.02); }
.feat__meta, .post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.feat__cat, .post__cat { color: var(--tone); }
.feat h2 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.03em; margin-bottom: 14px; }
.feat p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin-bottom: 18px; }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.post { display: flex; flex-direction: column; }
.post__media { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--edge); aspect-ratio: 4 / 3; margin-bottom: 18px; background: var(--surface-2); }
.post__media .ph, .post__media img { width: 100%; height: 100%; }
.post__media img { object-fit: cover; transition: transform .7s var(--ease); }
.post:hover .post__media img { transform: scale(1.02); }
.post h3 { font-size: 19.5px; margin-bottom: 10px; letter-spacing: -.022em; }
.post h3 a { transition: color var(--t-fast) ease; }
.post:hover h3 a { color: var(--tone); }
.post p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.post .link-arrow { margin-top: 16px; font-size: 13.5px; }
.posts__empty { margin-top: 28px; text-align: center; font-size: 15px; color: var(--ink-mute); }
.post.is-hidden, .feat.is-hidden { display: none; }

/* ── Footer additions ────────────────────────────────────────────────────── */
.footer__h2 { margin-top: 26px; }
.footer__langs button { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: rgba(255,255,255,.62); transition: color var(--t-fast) ease; }
.footer__langs button:hover { color: #fff; }
.footer__brand .footer__cta { margin-top: 22px; }

/* ── Current nav item ────────────────────────────────────────────────────── */
.nav__link.is-current { color: var(--fg); }
.nav__link.is-current::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1.5px;
  background: var(--tone); border-radius: 2px;
}
.nav__item { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   32. MEGA MENU — three destination panels
   ═══════════════════════════════════════════════════════════════════════════ */
.mega__wave { opacity: calc(var(--wave-alpha) * .7); }
.mega__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.6fr); gap: clamp(28px, 4vw, 64px); padding-block: 40px 46px; position: relative; z-index: 2; }
.mega__lead .eyebrow { margin-bottom: 14px; }
.mega__leadTitle { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.16; color: var(--fg); margin-bottom: 18px; }

/* Belt and braces: a mega menu rendered without its lead column must span both
   tracks, not crush three cards into the narrow first one. */
.mega__inner > .mega__panels:only-child { grid-column: 1 / -1; }
.mega__panels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mega__panel > a {
  display: flex; flex-direction: column; height: 100%;
  padding: 24px 22px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.mega__panel > a:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); border-color: color-mix(in srgb, var(--teal-600) 45%, transparent); transform: translateY(-3px); }
:root[data-theme="dark"] .mega__panel > a:hover { border-color: color-mix(in srgb, var(--teal-400) 45%, transparent); }
.mega__icon { width: 42px; height: 42px; margin: 14px 0 14px; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--teal-600) 12%, transparent); border: 1px solid color-mix(in srgb, var(--teal-600) 26%, transparent); }
:root[data-theme="dark"] .mega__icon { background: color-mix(in srgb, var(--teal-400) 12%, transparent); border-color: color-mix(in srgb, var(--teal-400) 26%, transparent); }
.mega__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--teal-700); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .mega__icon svg { stroke: var(--teal-400); }
.mega__panel strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.024em; color: var(--fg); }
.mega__panel em { display: block; font-style: normal; font-size: 13.5px; line-height: 1.52; color: color-mix(in srgb, var(--fg) 62%, transparent); margin-top: 8px; flex: 1; }
.mega__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--teal-700); }
:root[data-theme="dark"] .mega__go { color: var(--teal-400); }
.mega__go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-mid) var(--ease); }
.mega__panel > a:hover .mega__go svg { transform: translateX(4px); }

/* Panels resolve with a slight stagger once the menu opens. */
.mega__panel { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mega__panel:nth-child(2) { transition-delay: 50ms; }
.mega__panel:nth-child(3) { transition-delay: 100ms; }
.nav__item.is-open .mega__panel { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   33. PAGE TRANSITION — a thin SSZ line crosses, then the next page resolves
   ═══════════════════════════════════════════════════════════════════════════ */
.xfade {
  position: fixed; inset: 0; z-index: 380; pointer-events: none;
  background: var(--page); opacity: 0;
  transition: opacity .22s ease;
}
.xfade.is-out { opacity: 1; pointer-events: auto; }
.xfade__line {
  position: absolute; top: 50%; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--teal-500) 30%, var(--teal-300) 50%, var(--teal-500) 70%, transparent);
  transform: scaleX(0); transform-origin: left center;
}
.xfade.is-out .xfade__line { transform: scaleX(1); transition: transform .34s var(--ease); }

/* ═══════════════════════════════════════════════════════════════════════════
   34. MULTI-PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .story { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .caps  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .techs, .layers, .model { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch { grid-template-columns: minmax(0,1fr); gap: 0; justify-items: stretch; }
  .arch__link { height: 46px; transform: rotate(90deg) scaleX(.3); }
  .mega__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 960px) {
  .phero__title { font-size: clamp(34px, 7vw, 52px); }
  .story, .path, .prog, .techs, .layers, .model { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .ptypes { grid-template-columns: minmax(0, 1fr); }
  .factlist li, .splitlist li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mega__panels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .story, .path, .prog, .caps, .techs, .layers, .model,
  .orgs, .contacts, .posts, .regions { grid-template-columns: minmax(0, 1fr); }
  .phero__cta .btn, .cta__actions .btn { width: 100%; }
  .filters { gap: 6px; }
  .filter { padding: 8px 13px; font-size: 12.5px; }
  .arch__link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phero__el { animation: none !important; }
  .mega__panel { opacity: 1 !important; transform: none !important; }
  .xfade { display: none !important; }
}

/* ── Region panel (Contact) ──────────────────────────────────────────────────
   A schematic statement of operating region. Deliberately not a map: an
   inaccurate outline would mislead, and precision adds nothing here.
   ────────────────────────────────────────────────────────────────────────── */
.regionpanel {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--edge);
}
.regionpanel__wave { opacity: calc(var(--wave-alpha) * .8); }
.regionpanel__eyebrow, .regionpanel__foot { position: relative; z-index: 2; }
.regionpanel__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 22px;
}
.regionpanel__list { position: relative; z-index: 2; list-style: none; padding: 0; display: grid; gap: 0; }
.regionpanel__list li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0; border-top: 1px solid var(--edge);
}
.regionpanel__list li:last-child { border-bottom: 1px solid var(--edge); }
.regionpanel__code {
  font-family: var(--font-mono); font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500; letter-spacing: -.02em; color: var(--tone); line-height: 1;
}
.regionpanel__name { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.regionpanel__foot { margin-top: 20px; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   35. ELEMENTOR BRIDGE
   Makes Elementor-generated markup inherit the SSZ token system instead of
   fighting it, and keeps the editor usable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Elementor's container is the section wrapper in this build. Give it the same
   background and colour resolution a hand-written .section would get. */
.elementor-section,
.e-con,
.e-con-inner { --shell-pad: var(--gutter); }

.e-con[data-band],
.elementor-section[data-band] { background-color: var(--bg); color: var(--ink); }

/* Elementor sets its own container width; align it with --shell so an
   Elementor row and a theme .shell line up on the same grid. */
.e-con { --container-max-width: var(--shell); }

/* SSZ widgets bring their own section padding; stop Elementor doubling it. */
.elementor-widget-container > .ssz-section { margin: 0; }

.ssz-section { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); }
.ssz-section--pad { padding-block: var(--section-y); }
.ssz-section--navy { background: var(--navy-800); }
:root[data-theme="dark"] .ssz-section--navy { background: var(--navy-900); }
.ssz-section--tint { background: var(--bg-2); }

/* Editor: reveal states must not hide content from the person editing it.
   Elementor adds this class to the preview body. */
.elementor-editor-active [data-reveal],
.elementor-editor-active [data-reveal="statement"] .clipline > *,
.elementor-editor-preview [data-reveal],
.elementor-editor-preview [data-reveal="statement"] .clipline > * {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}
.elementor-editor-active .hero__el,
.elementor-editor-active .phero__el,
.elementor-editor-preview .hero__el,
.elementor-editor-preview .phero__el { animation: none !important; opacity: 1 !important; }
.elementor-editor-active .boot,
.elementor-editor-preview .boot { display: none !important; }

/* Elementor's own entrance animations are disabled in favour of the SSZ
   motion framework, so the two never run on the same element. */
.elementor-invisible { visibility: visible !important; }

/* WordPress prose inside a theme-rendered page. */
.ssz-prose { max-width: 72ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.ssz-prose > * + * { margin-top: 1.1em; }
.ssz-prose h2 { font-size: clamp(24px, 2.4vw, 34px); color: var(--ink); margin-top: 1.8em; }
.ssz-prose h3 { font-size: clamp(19px, 1.8vw, 24px); color: var(--ink); margin-top: 1.6em; }
.ssz-prose a { color: var(--tone); text-decoration: underline; text-underline-offset: 3px; }
.ssz-prose ul, .ssz-prose ol { padding-left: 1.3em; }
.ssz-prose li + li { margin-top: .4em; }
.ssz-prose img { border-radius: var(--r-lg); }
/* A pull-quote is a held moment in the middle of the argument, so it gets a
   panel rather than an indent — an indent alone disappears at reading size. */
.ssz-prose blockquote {
	margin-block: 1.8em;
	padding: clamp(22px, 2.6vw, 32px);
	border-radius: var(--r-lg);
	border: 1px solid var(--edge);
	border-left: 3px solid var(--tone);
	background: var(--surface-2);
	font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; letter-spacing: -.014em;
	color: var(--ink);
}
.ssz-prose blockquote > * + * { margin-top: .8em; }
.ssz-prose blockquote cite,
.ssz-prose blockquote footer {
	display: block; margin-top: 16px; font-style: normal;
	font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-mute);
}

.ssz-article { max-width: 860px; }
.ssz-article__media { margin: clamp(28px, 4vw, 48px) 0; }
.ssz-article__media .ph { border-radius: var(--r-xl); border: 1px solid var(--edge); }

.ssz-pagination { margin-top: clamp(34px, 4vw, 56px); display: flex; justify-content: center; gap: 8px; }
.ssz-pagination .page-numbers {
	padding: 9px 15px; border-radius: var(--r-md);
	border: 1px solid var(--edge); color: var(--ink-soft); font-size: 14px; font-weight: 600;
}
.ssz-pagination .page-numbers.current { background: var(--tone); border-color: var(--tone); color: #fff; }

/* Language selector rendered as links rather than buttons. */
.seg--lang a.seg__btn { text-decoration: none; }
.seg__btn.is-active { background: var(--page); color: var(--fg); box-shadow: var(--shadow-sm); }

/* Footer menus come from wp_nav_menu, which emits its own <ul>. */
.footer__col ul.menu, .footer__col ul { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0; }
.footer__meta ul.menu { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; margin: 0; }

/* Skip link needs to outrank Elementor's z-index stack. */
.skip-link { z-index: 100000; }

/* ═══════════════════════════════════════════════════════════════════════════
   36. TOKEN BASELINE FOR ELEMENTOR CONTENT
   Elementor containers an editor adds sit outside any SSZ section, so without a
   baseline every var() would resolve to nothing and the content would render
   unstyled. Declaring the light-band set on <body> guarantees a valid context;
   any SSZ section with [data-band] overrides it as a nearer ancestor.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] body {
	--bg: #FFFFFF; --bg-2: #F6F8FA;
	--ink: #071C42; --ink-soft: #47566D; --ink-mute: #5C6A80;
	--edge: #E3E8EE; --edge-soft: #EFF2F6;
	--surface: #FFFFFF; --surface-2: #F6F8FA;
	--tone: var(--teal-700); --tone-bright: var(--teal-600);
	--wave-color: #0D9488; --wave-alpha: .13;
}
:root[data-theme="dark"] body {
	--bg: var(--navy-800); --bg-2: #0A2350;
	--ink: #EDF3FF; --ink-soft: #AFC0DC; --ink-mute: #9AA9C4;
	--edge: rgba(255,255,255,.13); --edge-soft: rgba(255,255,255,.07);
	--surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075);
	--tone: var(--teal-400); --tone-bright: var(--teal-300);
	--wave-color: #2DD4BF; --wave-alpha: .26;
}

/* An SSZ widget renders a complete <section>. Neutralise the container around
   it so there is no double padding and full-bleed sections really do bleed. */
.e-con > .e-con-inner > .elementor-widget-ssz-hero,
.e-con > .e-con-inner > [class*="elementor-widget-ssz-"],
.e-con > [class*="elementor-widget-ssz-"] { width: 100%; max-width: 100%; }

[class*="elementor-widget-ssz-"] > .elementor-widget-container { overflow: visible; }
[class*="elementor-widget-ssz-"] .ssz-section,
[class*="elementor-widget-ssz-"] .bleed { width: 100%; }

/* Containers holding an SSZ section must not clip the wave field or a bleed. */
.e-con:has(> .e-con-inner > [class*="elementor-widget-ssz-"]) { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CANVAS
   The page colour lives on <html>, not <body>.

   Elementor's Site Settings background is emitted as a background-IMAGE on
   <body>. A kit inherited from a previous site can carry a white→white
   gradient, which paints over the theme's page colour — invisible in light
   mode, and in dark mode a white strip behind the deliberately transparent
   masthead: the menu "stays white" until the page scrolls and the masthead
   fills in. <html> is the one element Elementor never styles, so it is the
   only reliable place for the canvas.
   ═══════════════════════════════════════════════════════════════════════════ */
html { background: var(--page); transition: background-color var(--t-theme) ease; }
:root[data-theme] body { background-color: transparent; background-image: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE — the individual post

   Two measures on one page. The masthead and the lead image run the full shell
   because they are looked at; the body runs at ~68ch because it is read. The
   sidebar is sticky so related reading and the demo card stay reachable through
   a long piece without the reader hunting for the bottom of the page.
   ═══════════════════════════════════════════════════════════════════════════ */
.article { padding-bottom: clamp(56px, 7vw, 104px); background: var(--bg); }

.article__head { position: relative; padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 38px); overflow: hidden; }
.article__wave { opacity: calc(var(--wave-alpha) * .8); }
.article__headInner { text-align: center; position: relative; z-index: 2; }

/* Breadcrumb */
.crumbs { margin-bottom: 18px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center;
             gap: 6px 10px; font-size: 12.5px; color: var(--ink-mute); }
.crumbs li { display: flex; align-items: center; gap: 10px; max-width: 46ch; }
.crumbs li + li::before { content: "/"; color: var(--edge); }
.crumbs a { color: var(--ink-mute); transition: color var(--t-fast) ease; }
.crumbs a:hover { color: var(--tone); }
.crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Category chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.article__chips { justify-content: center; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  background: color-mix(in srgb, var(--tone) 9%, transparent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tone); transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.chip:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); border-color: var(--tone); }

.article__title {
  font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.032em;
  color: var(--ink); max-width: 22ch; margin-inline: auto;
}
.article__lede { margin-top: 20px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6;
                 color: var(--ink-soft); max-width: 62ch; margin-inline: auto; }

.article__rule { display: block; height: 1px; width: min(420px, 60%); margin: clamp(24px, 3vw, 36px) auto 0;
                 background: var(--edge); transform-origin: center; }

.article__meta { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
                 font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ink-mute); }
.article__metaItem { display: inline-flex; align-items: center; gap: 7px; }
.article__metaItem svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4;
                         stroke-linecap: round; stroke-linejoin: round; }

/* Lead image */
.article__lead { margin: clamp(26px, 3.5vw, 44px) 0 clamp(34px, 4.5vw, 60px); }
.article__lead .ph { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--edge); }
.article__lead img { width: 100%; height: auto; display: block; }
.article__lead .cap { margin-top: 12px; text-align: center; }

/* Body + sidebar */
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
                 gap: clamp(32px, 5vw, 76px); align-items: start; }
.article__body { min-width: 0; }
.article .ssz-prose { max-width: 68ch; font-size: 17.5px; line-height: 1.72; }

.article__pages { margin-top: 28px; display: flex; gap: 8px; font-family: var(--font-mono); font-size: 13px; }

.article__foot { margin-top: clamp(30px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--edge);
                 display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.article__footLabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
                      text-transform: uppercase; color: var(--ink-mute); }

.article__side { min-width: 0; }
.article__sideInner { position: sticky; top: 96px; display: grid; gap: 18px; }

.sidecard { border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 24px 22px; background: var(--surface-2); }
.sidecard__title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 16px; }

.sidelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.sidelist li + li { border-top: 1px solid var(--edge-soft); }
.sidelist a { display: grid; gap: 5px; padding: 13px 0; }
.sidelist li:first-child a { padding-top: 0; }
.sidelist li:last-child a { padding-bottom: 0; }
.sidelist__cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--tone); }
.sidelist__title { font-size: 15px; font-weight: 700; line-height: 1.36; letter-spacing: -.016em;
                   color: var(--ink); transition: color var(--t-fast) ease; }
.sidelist a:hover .sidelist__title { color: var(--tone); }
.sidelist__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }

.sidecard--cta { position: relative; overflow: hidden; background: var(--navy-800); border-color: transparent; padding: 26px 24px; }
:root[data-theme="dark"] .sidecard--cta { background: var(--navy-900); }
.sidecard__wave { opacity: calc(var(--wave-alpha) * .9); }
.sidecard__body { position: relative; z-index: 2; }
.sidecard__ctaTitle { font-size: 21px; font-weight: 800; letter-spacing: -.026em; line-height: 1.18;
                      color: var(--ink); margin: 12px 0 10px; }
.sidecard__ctaText { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; }

/* Prev / next */
.article__pager { margin-top: clamp(44px, 5vw, 72px); display: grid;
                  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pager { display: grid; gap: 7px; padding: 22px 24px; border: 1px solid var(--edge); border-radius: var(--r-lg);
         background: var(--surface); transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease); }
.pager:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--edge)); transform: translateY(-2px); }
.pager--next { text-align: right; grid-column: 2; }
.pager--prev:only-child { grid-column: 1; }
.pager__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
                text-transform: uppercase; color: var(--ink-mute); }
.pager__title { font-size: 16px; font-weight: 700; line-height: 1.34; letter-spacing: -.018em; color: var(--ink); }

.article__comments { margin-top: clamp(44px, 5vw, 72px); }

.section--tight { padding-block: clamp(34px, 4vw, 56px); }

/* Prose additions for real article bodies */
.ssz-prose h2 + *, .ssz-prose h3 + * { margin-top: .7em; }
.ssz-prose figure { margin-block: 1.8em; }
.ssz-prose figure img { width: 100%; height: auto; }
.ssz-prose figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 11px;
                        letter-spacing: .06em; color: var(--ink-mute); text-align: center; }
.ssz-prose strong { color: var(--ink); font-weight: 700; }
.ssz-prose hr { border: 0; height: 1px; background: var(--edge); margin-block: 2.2em; }
.ssz-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ssz-prose th, .ssz-prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--edge); }
.ssz-prose th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
                text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.ssz-prose code { font-family: var(--font-mono); font-size: .88em; padding: 2px 6px; border-radius: 5px;
                  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ssz-prose pre { padding: 20px; border-radius: var(--r-lg); overflow-x: auto;
                 background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--edge); }
.ssz-prose pre code { background: none; padding: 0; }

@media (max-width: 1040px) {
  .article__grid { grid-template-columns: minmax(0, 1fr); }
  .article__sideInner { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .article__sideInner { grid-template-columns: minmax(0, 1fr); }
  .article__pager { grid-template-columns: minmax(0, 1fr); }
  .pager--next { grid-column: 1; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM

   A portrait, a name, a role, a short bio, and the two links a public-sector
   reader actually uses to make contact. The photo frame is square and fixed, so
   a mixed set of supplied images stays orderly however they were shot.
   ═══════════════════════════════════════════════════════════════════════════ */
.team { display: grid; grid-template-columns: repeat(var(--team-cols, 3), minmax(0, 1fr));
        gap: clamp(20px, 2.6vw, 34px); }

.member { display: flex; flex-direction: column; }

.member__photo {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--edge); background: var(--surface-2); margin-bottom: 18px;
}
.member__photo .ph, .member__photo img { width: 100%; height: 100%; }
.member__photo img { object-fit: cover; transition: transform .7s var(--ease); }
.member:hover .member__photo img { transform: scale(1.03); }

/* No portrait yet: the frame still holds its place rather than collapsing. */
.member__photo--pending { display: grid; place-items: center; padding: 18px; text-align: center; }
.member__photo--pending span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}

.member__name { font-size: 19px; font-weight: 800; letter-spacing: -.022em; line-height: 1.2; color: var(--ink); }
.member__role {
  margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tone);
}
.member__bio { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); flex: 1; }

.member__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.member__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--surface);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
}
.member__link:hover { border-color: var(--tone); color: var(--tone); background: color-mix(in srgb, var(--tone) 8%, transparent); }
.member__link svg { width: 14px; height: 14px; flex: none; }
.member__link svg.is-stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.member__link svg.is-fill { fill: currentColor; }

@media (max-width: 1040px) { .team { grid-template-columns: repeat(var(--team-cols-md, 2), minmax(0, 1fr)); } }
@media (max-width: 640px)  { .team { grid-template-columns: minmax(0, 1fr); } }

/* Text for assistive tech only — "Email" repeated down a team grid needs the
   name attached to it or a screen-reader user hears the same link six times. */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMS — the catalogue

   A program is a thing an agency deploys, so each tile has to answer four
   questions in the order a reader asks them: what is the challenge, what is the
   program, what can SSZ actually detect or support, and how do I act on it.
   The tile is built in that order and nothing else competes for the position.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.pfilter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
/* On a phone the row scrolls rather than wrapping to four lines and pushing
   the programmes below the fold. */
@media (max-width: 720px) {
  .pfilter {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pfilter::-webkit-scrollbar { display: none; }
  .pfilter .filter { flex: none; scroll-snap-align: start; }
}

.pfilter__count {
  font-family: var(--font-mono); font-size: 10px; opacity: .75;
  margin-left: 7px; font-variant-numeric: tabular-nums;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.pgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  position: relative;
}
@media (max-width: 1040px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* Filtering: collapse rather than blink, so the grid reflows instead of
   snapping. Height is not animatable here, so the tile fades and lifts out. */
.ptile.is-filtered { display: none; }
.ptile.is-entering { animation: ptileIn .42s var(--ease) backwards; }
@keyframes ptileIn { from { opacity: 0; transform: translateY(10px); } }

/* ── Tile ────────────────────────────────────────────────────────────────── */
.ptile {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-xl); overflow: hidden;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.ptile:hover, .ptile:focus-within {
  border-color: color-mix(in srgb, var(--tone) 50%, var(--edge));
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* The SSZ line, drawn along the top edge as the tile is engaged. */
.ptile::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--tone-bright), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.ptile:hover::after, .ptile:focus-within::after { transform: scaleX(1); }

.ptile__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-2); border-bottom: 1px solid var(--edge);
}
.ptile__media .ph, .ptile__media img { width: 100%; height: 100%; }
.ptile__media img { object-fit: cover; transition: transform .8s var(--ease); }
.ptile:hover .ptile__media img { transform: scale(1.04); }

.ptile__cat {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--navy-900) 74%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.ptile__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }

.ptile__title {
  font-size: clamp(19px, 1.7vw, 23px); font-weight: 800;
  letter-spacing: -.026em; line-height: 1.18; color: var(--ink);
}
.ptile__sub {
  margin-top: 7px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tone);
}
.ptile__desc { margin-top: 14px; font-size: 14px; line-height: 1.62; color: var(--ink-soft); }

/* Custom markers: a short SSZ rule rather than a browser bullet. */
.ptile__marks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.ptile__marks li {
  position: relative; padding-left: 20px;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
}
.ptile__marks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 1.5px; border-radius: 2px; background: var(--tone);
}

.ptile__ctas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 20px; }
.ptile__ctas .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 400px) { .ptile__ctas .btn { flex: 1 1 100%; } }

/* The whole tile is clickable, but the buttons must win the click. */
.ptile__open {
  position: absolute; inset: 0; z-index: 1; border: 0; padding: 0;
  background: none; cursor: pointer; color: transparent; font-size: 0;
}
.ptile__ctas, .ptile__cat { position: relative; z-index: 2; }
.ptile__open:focus-visible { outline: 2px solid var(--tone); outline-offset: -4px; }

/* ── Expanded programme ──────────────────────────────────────────────────── */
/* A closed <dialog> is hidden by the user-agent stylesheet's display:none.
   Declaring display:grid on .pmodal overrides that, so the dialog stays in the
   layout when shut: a full-viewport fixed overlay at z-index 300 that swallows
   every click on the page, with its empty panel showing as a thin line. The
   display rule has to be conditional on [open]. */
.pmodal:not([open]) { display: none; }

.pmodal {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: end center;
  padding: 0; border: 0; background: none; max-width: none; max-height: none;
  width: 100%; height: 100%; overflow: visible;
}
.pmodal::backdrop { background: color-mix(in srgb, var(--navy-900) 62%, transparent); backdrop-filter: blur(3px); }
.pmodal[open] .pmodal__panel { animation: pmodalIn .42s var(--ease) backwards; }
@keyframes pmodalIn { from { opacity: 0; transform: translateY(26px); } }

.pmodal__panel {
  width: min(880px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--edge); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 861px) {
  .pmodal { place-items: center; padding: 32px; }
  .pmodal__panel { border-bottom: 1px solid var(--edge); border-radius: var(--r-xl); }
}

.pmodal__close {
  position: sticky; top: 0; float: right; margin: 12px 12px 0 0; z-index: 4;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--edge); background: var(--surface); color: var(--ink);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.pmodal__close:hover { border-color: var(--tone); color: var(--tone); }
.pmodal__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.pmodal__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--edge); }
.pmodal__media img, .pmodal__media video, .pmodal__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

.pmodal__body { padding: clamp(24px, 3.4vw, 44px); }
.pmodal__cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--tone); }
.pmodal__title { margin-top: 12px; font-size: clamp(24px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pmodal__sub { margin-top: 10px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; color: var(--ink-soft); }
.pmodal__lede { margin-top: 20px; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); }

.pmodal__block { margin-top: clamp(26px, 3vw, 38px); }
.pmodal__h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 14px;
}
.pmodal__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pmodal__list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); }
.pmodal__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 1.5px; border-radius: 2px; background: var(--tone); }

.pmodal__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.pmodal__steps li { background: var(--bg); padding: 16px 18px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pmodal__steps b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--tone); }
.pmodal__steps span { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.pmodal__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3vw, 40px);
                padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--edge); }

/* Share glyph. Buttons in this system carry no icon rules of their own, so an
   inline SVG would default to 54px and paint solid black. */
.ptile__ctas .btn svg, .pmodal__ctas .btn svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ptile__ctas .btn, .pmodal__ctas .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ── Copy confirmation ───────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 400;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  padding: 11px 20px; border-radius: 999px;
  background: var(--navy-900); color: #fff;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  box-shadow: var(--shadow-lg);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Touch targets. 44px is the figure both platform guidelines land on, and a
   filter chip at 38px is exactly the control people mis-tap on a moving bus. */
@media (max-width: 720px) {
  .pfilter .filter { min-height: 44px; padding-inline: 18px; }
  .ptile__ctas .btn { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ptile, .ptile::after, .ptile__media img, .toast { transition: none; }
  .ptile.is-entering, .pmodal[open] .pmodal__panel { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENTOR GLOBAL COLOURS

   Elementor's globals are fixed hex values, and a fixed hex cannot serve two
   themes: a text global of SSZ navy is right in light mode and invisible on a
   navy background in dark. Elementor writes them into widget rules
   (.elementor-widget-text-editor { color: var(--e-global-color-text) }), which
   is how an article body ends up navy-on-navy while everything the theme
   rendered around it is correct.

   Remapping the globals onto the band tokens makes Elementor-authored content
   obey the same rules as everything else. Declared on [data-band] rather than
   once on :root so the value re-resolves inside a navy section instead of being
   substituted a single time at the top of the document.

   Specificity is deliberate: Elementor's own declarations land on
   .elementor-kit-N (0,1,0) and its stylesheet loads after this one, so the
   selectors here have to carry more weight than a single class.
   ═══════════════════════════════════════════════════════════════════════════ */
:root [data-band],
:root[data-theme] body {
	--e-global-color-primary: var(--ink);
	--e-global-color-secondary: var(--tone);
	--e-global-color-text: var(--ink-soft);
	--e-global-color-accent: var(--tone);
}

/* ── Read more ───────────────────────────────────────────────────────────────
   A clamped block plus a button the script adds only when the text actually
   overflows. -webkit-line-clamp is the one reliable way to clamp to a line
   count rather than a pixel height, which matters when the type resizes.
   ────────────────────────────────────────────────────────────────────────── */
[data-readmore] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--readmore-lines, 4);
  overflow: hidden;
}
[data-readmore].is-open {
  -webkit-line-clamp: unset;
  display: block;
}

.readmore {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tone);
  transition: color var(--t-fast) ease;
}
.readmore::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.readmore[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 1px; }
.readmore:hover { color: var(--tone-bright); }
.readmore:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; border-radius: 2px; }

/* The bio is the flexible row in a member card; clamping it keeps every card
   in a row the same height regardless of how much anyone wrote. */
.member__bio[data-readmore] { flex: none; }
.member .readmore { margin-top: 8px; }

@media print {
  [data-readmore] { -webkit-line-clamp: unset; display: block; }
  .readmore { display: none; }
}

/* ── Rich supporting copy ────────────────────────────────────────────────────
   Supporting-copy blocks accept HTML, so their contents may be paragraphs, a
   list, or a link. The wrapper is a div — a <p> inside a <p> is invalid and the
   browser closes the outer one early, dropping the class from everything after
   the first break. These rules make the children inherit the block's type, and
   collapse the outer margins so a one-paragraph block sits exactly where it did
   before any of this existed.
   ────────────────────────────────────────────────────────────────────────── */
.section__lede > p, .note > p, .hero__lede > p, .feature__body > p,
.member__bio > p, .ptile__desc > p, .step__body > p, .reason__body > p,
.sidecard__ctaText > p, .cta__lede > p {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.section__lede > p + p, .note > p + p, .hero__lede > p + p, .feature__body > p + p,
.member__bio > p + p, .ptile__desc > p + p, .step__body > p + p, .reason__body > p + p,
.sidecard__ctaText > p + p, .cta__lede > p + p { margin-top: .9em; }

/* Links inside supporting copy read as links without shouting. */
.section__lede a, .note a, .hero__lede a, .feature__body a, .member__bio a,
.ptile__desc a, .step__body a, .reason__body a, .cta__lede a {
  color: var(--tone);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) ease;
}
.section__lede a:hover, .note a:hover, .hero__lede a:hover, .feature__body a:hover,
.member__bio a:hover, .ptile__desc a:hover, .step__body a:hover,
.reason__body a:hover, .cta__lede a:hover { color: var(--tone-bright); }

/* Lists, for the occasional inline list in supporting copy. */
.section__lede ul, .feature__body ul, .step__body ul, .reason__body ul,
.section__lede ol, .feature__body ol, .step__body ol, .reason__body ol {
  margin: .8em 0 0; padding-left: 1.25em;
}
.section__lede li + li, .feature__body li + li,
.step__body li + li, .reason__body li + li { margin-top: .35em; }

/* The step and reason bodies were bare <p> before; keep their type. */
.step__body, .reason__body { font: inherit; }
.flow__step .step__body, .story__step .step__body {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
}
.reason .reason__body {
  font-size: 15px; line-height: 1.62; color: var(--ink-soft); max-width: 46ch;
}
.feature__body { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }

/* Submission failed validation. The form stays on screen with the message above
   it, so nothing typed is lost. */
.form__error {
  padding: clamp(16px, 2vw, 22px);
  margin-bottom: 22px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--amber, #96430A) 40%, transparent);
  background: color-mix(in srgb, var(--amber, #96430A) 7%, transparent);
  color: var(--ink);
  font-size: 15px; line-height: 1.6;
}
.form__actions { margin-top: 26px; }