/* Symbasis design system v4: film bands and floating panels. Contract: docs/PAGE-RHYTHM.md
   (the band and panel vocabulary, the nine stacks) and content/BRAND.md 2 to 5. Documented in
   docs/DESIGN-SYSTEM.md. Rules that never bend: teal means the client's side, violet means the
   Symbasis side; the gradient appears only on the Wordmark and the Rule; teal is never text on
   white (teal-ink is); violet-ink is the one accent for actions; every text pair 4.5:1 or
   better; one UI face only, Hanken Grotesk. Built from spikes/one-orbit-v4/index.html. */

/* 1. Tokens: v4's :root exactly, plus the tone steps, print and reading-mode tokens the kit needs
   that v4 did not carry (BLUEPRINT.md 5.5 names kept where they still apply). */
:root {
  --white: #FFFFFF;
  --raised: #F3F4F7;
  --navy: #010A22;
  --navy-2: #0B1440;
  --navy-3: #151E4D;
  --teal: #01E5D7;
  --teal-deep: #0AD0CC;
  --teal-ink: #087F78;
  --violet: #9554FF;
  --violet-deep: #8F45FD;
  --violet-ink: #6B2FD6;
  --slate: #5B6170;
  --mist: #B1B3B8;
  --violet-tint: #F2ECFF;
  --teal-tint: #E8FBF9;
  --gradient: linear-gradient(90deg, #05BCA6, #813DEB);
  --accent: var(--violet-ink);
  --ink: var(--navy);
  --ground: var(--white);
  --hairline: #E5E7EC;
  --hairline-navy: rgba(255, 255, 255, 0.14);
  --eyebrow-white: rgba(1, 10, 34, 0.6);
  --r-panel: 24px;
  --r-card: 20px;
  --inset: 24px;
  --pad-desktop: 96px;
  --pad-mobile: 40px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 400ms;
  /* bounded by the space actually left in a 100vh hero after the header, the lead line, the
     button and the vertical padding, not a vh guess: at 3 lines and 1.15 line-height this keeps
     the whole hero-copy block inside 100vh down to 800px tall (measured at 1280x800, 1440x900,
     1920x1080; see docs/DESIGN-SYSTEM.md 2) */
  --fs-display: clamp(2.75rem, min(6.4vw, 8.6vh), 6.5rem);
  --fs-band2: clamp(2.5rem, 5.5vw, 4.5rem);
  --fs-panel-head: clamp(1.85rem, 3.6vw, 2.75rem);
  --fs-small-head: 1.375rem;
  --fs-fact: clamp(3rem, 9vw, 6.5rem);
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --wrap-wide: 78rem;
  --wrap-narrow: 34rem;
  /* body type scale, an 18px floor (kept from the Stage 4 system; v4's body copy sits on it) */
  --t-body: 1.125rem; --t-lead: 1.25rem; --t-label: 0.875rem; --t-h3: 1.375rem;
  --lh-body: 1.6;
  font-variant-numeric: tabular-nums;
}

/* Typeface: Hanken Grotesk, variable, weights 300 to 500, self-hosted, synchronous preload in
   layout.html. Display, headings and body run at 300; labels at 400; nothing is bold. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2-variations'), url('/assets/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  /* optional, not swap: the font is preloaded synchronously so it is normally ready in time, but
     a late swap on a slow connection reflows the display headline (different fallback metrics)
     and delays LCP past its own paint; optional uses the fallback for that paint if the font is
     not ready within its ~100ms block period, with no later swap, so the hero never repaints late */
  font-display: optional;
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: 'Hanken Grotesk', "Helvetica Neue", Arial, sans-serif;
  font-weight: 300; font-size: var(--t-body); line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-weight: 300; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
p, ul, ol, table, figure, dl { margin: 0 0 var(--s-4); }
ul, ol { padding-left: 1.25em; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--accent); }
strong { font-weight: 500; }
::selection { background: var(--violet-ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding-inline: var(--s-6); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.accent { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--violet-ink); color: var(--white);
  padding: var(--s-2) var(--s-4); z-index: 200; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.rule-img { display: inline-block; width: 80px; height: 6px; }
button { font: inherit; }
.lead { font-size: var(--t-lead); font-weight: 300; color: var(--slate); max-width: 60ch; }

/* Diamond bullets: the one bullet mark used everywhere on white (plus-rows, includes, editorial) */
.diamond-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.diamond-list li { position: relative; padding-left: var(--s-5); color: var(--slate); }
.diamond-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--violet-ink); transform: rotate(45deg); }

/* Breadcrumbs. A plain white bar in normal flow on pages without a hero (the fixed header there
   is always solid, see .site-header default rule above). On has-hero pages the header floats
   transparently over the first band's own image, so the crumbs bar is taken out of flow and
   floated the same way (same top-left dark scrim the hero copy already sits in), instead of
   colliding with the fixed header as a solid white strip. */
.crumbs { padding-block: var(--s-4); background: var(--white); border-bottom: 1px solid var(--hairline); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-label); color: var(--slate); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: var(--mist); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--violet-ink); }
.crumbs li[aria-current] { color: var(--navy); }
body.has-hero .crumbs {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  background: none; border-bottom: none;
  padding-top: calc(64px + var(--s-5)); padding-bottom: 0;
}
body.has-hero .crumbs ol { color: var(--mist); }
body.has-hero .crumbs a { color: var(--white); }
body.has-hero .crumbs a:hover, body.has-hero .crumbs a:focus-visible { color: var(--teal); }
body.has-hero .crumbs li[aria-current] { color: var(--white); }

/* ===================== Header: transparent over the hero, blurred navy on scroll ===================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-block: var(--s-4);
  background: linear-gradient(to bottom, rgba(1, 10, 34, 0.5), transparent);
  border-bottom: 1px solid transparent;
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out), backdrop-filter 300ms var(--ease-out);
}
.site-header.scrolled {
  background: rgba(1, 10, 34, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-navy);
}
/* pages whose top band is not a full-bleed hero (band-plain, or when JS has not yet measured
   scroll) still need the header readable: force the scrolled treatment by default, the hero
   pages override with the transparent start state via body.has-hero */
.site-header { background: rgba(1, 10, 34, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--hairline-navy); }
body.has-hero .site-header:not(.scrolled) { background: linear-gradient(to bottom, rgba(1, 10, 34, 0.5), transparent); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.wordmark-link { display: block; }
.wordmark-img { width: 140px; height: auto; }
.header-nav { display: flex; align-items: center; gap: var(--s-6); }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-5); }
.nav-links a {
  color: var(--mist); text-decoration: none; font-size: 0.875rem; font-weight: 400;
  transition: color var(--dur) var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current] { color: var(--white); }
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--hairline-navy); border-radius: 10px;
  color: var(--white); cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 759px) {
  .nav-toggle { display: inline-flex; }
  .header-nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: var(--s-4); padding: var(--s-5) var(--s-6); margin: 0;
    background: rgba(1, 10, 34, 0.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline-navy);
  }
  .header-nav .nav-links.open { display: flex; }
  .header-nav .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .site-header .header-cta { display: none; }
}

/* ===================== Pills, text links, discs (v4 UI details) ===================== */
.btn-pill {
  display: inline-flex; align-items: center; gap: var(--s-4); background: var(--violet-ink); color: var(--white);
  border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem var(--s-6); font-weight: 400; font-size: 0.9375rem;
  text-decoration: none; border: none; cursor: pointer; min-height: 44px;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn-pill:hover, .btn-pill:focus-visible { transform: translateY(-1px); background: var(--violet); box-shadow: 0 10px 28px -8px rgba(149, 84, 255, 0.55); }
.btn-pill.on-light { background: var(--violet-ink); }
.pill-disc {
  width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--violet-ink); flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease-out);
}
.btn-pill:hover .pill-disc { transform: translateX(3px); }
.text-link {
  display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; font-weight: 400; color: var(--violet-ink);
  min-height: 44px;
}
.text-link .tl-arrow, .text-link .arrow-disc { transition: transform 220ms var(--ease-out); flex: none; }
.text-link:hover .tl-arrow, .text-link:focus-visible .tl-arrow,
.text-link:hover .arrow-disc, .text-link:focus-visible .arrow-disc { transform: translateX(4px); }
.arrow-disc { width: 32px; height: 32px; border-radius: 50%; background: var(--violet-tint); color: var(--violet-ink); display: inline-flex; align-items: center; justify-content: center; }
.on-navy.text-link { color: var(--white); }
.on-navy.text-link .tl-arrow, .on-navy.text-link .arrow-disc { color: var(--teal); }
.on-navy .arrow-disc { background: rgba(255, 255, 255, 0.12); }

.pause-pill {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: var(--s-3);
  background: rgba(11, 20, 64, 0.55); color: var(--white); border: 1px solid var(--hairline-navy);
  border-radius: 999px; padding: 0.3rem var(--s-4) 0.3rem 0.3rem; font-size: 0.8125rem; font-weight: 400;
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-height: 44px;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pause-pill:hover { background: rgba(11, 20, 64, 0.8); border-color: rgba(255, 255, 255, 0.32); }
.pause-disc { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pause-pill svg[hidden] { display: none; }
.pause-pill-hero { right: var(--s-5); bottom: var(--s-6); }
.pause-pill-band { top: calc(6.5rem); right: var(--s-5); }
.pause-pill-portrait { top: var(--s-3); right: var(--s-3); padding: 0.2rem var(--s-3) 0.2rem 0.2rem; font-size: 0.75rem; }
.pause-pill-portrait .pause-disc { width: 22px; height: 22px; }

/* ===================== BAND: full-bleed film, navy-lit render, scrim, white type ===================== */
.band {
  position: relative; overflow: hidden; isolation: isolate; color: var(--white);
  display: flex; align-items: center; background: var(--navy);
}
.band-media { position: absolute; top: -6%; bottom: -6%; left: 0; right: 0; z-index: 0; overflow: hidden; will-change: transform; }
.band-media img {
  position: absolute; inset: -2% -2%; width: 104%; height: 104%; object-fit: cover;
  animation: drift 30s var(--ease-out) infinite alternate;
}
.band-media.paused img { animation-play-state: paused; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.0); } }
.band-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wrap.band-content { position: relative; z-index: 2; width: 100%; }
h1.display, h2.display {
  font-size: var(--fs-display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--white); margin: 0 0 var(--s-5); text-wrap: balance;
}
.band .lead-band { font-size: 1rem; font-weight: 300; color: var(--mist); max-width: 46ch; margin: 0 0 var(--s-6); padding-left: var(--s-4); border-left: 2px solid var(--hairline-navy); }
.band-eyebrow { font-size: 1rem; font-weight: 300; color: rgba(255, 255, 255, 0.7); margin: 0 0 var(--s-3); }

/* band-hero-orbit: 100vh, the One Orbit canvas, home only */
.band-hero-orbit { height: 100vh; height: 100svh; }
.band-hero-orbit .band-scrim {
  background:
    linear-gradient(100deg, rgba(1, 10, 34, 0.94) 0%, rgba(1, 10, 34, 0.8) 36%, rgba(1, 10, 34, 0.32) 60%, rgba(1, 10, 34, 0.05) 78%),
    linear-gradient(180deg, rgba(1, 10, 34, 0.3), rgba(1, 10, 34, 0.6) 88%);
}
#orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }
.band-hero-orbit .band-content { z-index: 3; padding-block: clamp(4rem, 10vh, 7rem) clamp(2rem, 6vh, 4rem); }
.hero-copy { max-width: 60%; }
@media (max-width: 899px) { .hero-copy { max-width: 100%; } }

/* band-hero-still: 72vh (60vh with .band-short on /contact/ and /404), a still render, no canvas
   or Pause pill, only the 6px parallax */
.band-hero-still { min-height: 72vh; padding-block: var(--s-8); }
.band-hero-still.band-short { min-height: 60vh; }
.band-hero-still .band-scrim {
  background:
    linear-gradient(100deg, rgba(1, 10, 34, 0.9) 0%, rgba(1, 10, 34, 0.72) 40%, rgba(1, 10, 34, 0.28) 66%, rgba(1, 10, 34, 0.08) 84%),
    linear-gradient(180deg, rgba(1, 10, 34, 0.28), rgba(1, 10, 34, 0.55) 90%);
}
.band-hero-still .hero-copy { max-width: 62%; }
@media (max-width: 899px) { .band-hero-still .hero-copy { max-width: 100%; } }

/* band-line: one large light statement line, one accent word, one pill; the CTA band, once, last
   before the footer */
.band-line { min-height: 60vh; padding-block: var(--s-8); }
.band-line .band-scrim {
  background:
    linear-gradient(100deg, rgba(1, 10, 34, 0.88) 0%, rgba(1, 10, 34, 0.62) 42%, rgba(1, 10, 34, 0.15) 66%, transparent 82%),
    linear-gradient(180deg, rgba(1, 10, 34, 0.25), rgba(1, 10, 34, 0.55) 90%);
}
.band-line-copy { max-width: 62%; }
@media (max-width: 899px) { .band-line-copy { max-width: 100%; } }
h2.band-statement { font-size: var(--fs-band2); font-weight: 300; color: var(--white); line-height: 1.15; margin: 0 0 var(--s-6); text-wrap: balance; }

/* band-fact: one sourced number, its label, its source and date, once per page */
.band-fact { min-height: 46vh; padding-block: var(--s-7); text-align: left; }
.band-fact .band-scrim { background: linear-gradient(180deg, rgba(1, 10, 34, 0.7), rgba(1, 10, 34, 0.86)); }
.fact-number { font-size: var(--fs-fact); font-weight: 300; line-height: 1; color: var(--white); margin: 0 0 var(--s-3); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fact-label { font-size: 1.25rem; font-weight: 300; color: var(--mist); margin: 0 0 var(--s-4); max-width: 40ch; }
.fact-source { display: block; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); padding-top: var(--s-3); border-top: 1px solid var(--hairline-navy); }

/* band-quote: the translucent glass-card holding a statement, home only, carries the lock */
.band-quote { min-height: 80vh; padding-block: var(--s-8); }
.band-quote .band-scrim {
  background:
    radial-gradient(60% 60% at 78% 45%, rgba(21, 30, 77, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(1, 10, 34, 0.45), rgba(1, 10, 34, 0.75) 90%);
}
.band-quote-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-7); text-align: center; }
.glass-card {
  position: relative; width: 100%; max-width: 56rem; text-align: left; overflow: hidden;
  background: rgba(1, 10, 34, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-navy); border-radius: var(--r-panel);
  padding: var(--s-8) clamp(1.75rem, 6vw, var(--s-8));
  display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center;
  box-shadow: 0 40px 90px -30px rgba(1, 10, 34, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.glass-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 60% at 8% -10%, rgba(255, 255, 255, 0.14), transparent 55%);
}
.glass-card > * { position: relative; z-index: 1; }
@media (min-width: 760px) { .glass-card { grid-template-columns: 1fr 220px; } }
.quote-mark { font-size: 4rem; line-height: 1; color: var(--violet); display: block; margin-bottom: var(--s-3); font-weight: 300; }
.quote-text { font-size: 1.375rem; font-weight: 300; line-height: 1.5; color: var(--white); margin: 0; max-width: 46ch; text-wrap: pretty; }
.band-quote-closing { font-size: var(--fs-band2); font-weight: 300; color: var(--white); margin: 0; text-wrap: balance; }
.band-quote-actions { margin: 0; }

/* band-strip: three short honest facts in a row, hairline separated, no pill; /contact/ only */
.band-strip { min-height: 40vh; padding-block: var(--s-7); }
.band-strip .band-scrim { background: linear-gradient(180deg, rgba(1, 10, 34, 0.65), rgba(1, 10, 34, 0.82)); }
.fact-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .fact-strip { grid-template-columns: repeat(3, 1fr); } }
.fact-strip li { padding-top: var(--s-4); border-top: 1px solid var(--hairline-navy); color: var(--white); font-size: 1.0625rem; font-weight: 300; }
.fact-strip li span { display: block; color: var(--mist); font-size: 0.8125rem; margin-top: var(--s-2); }

/* band-plain: navy, no rendered image, no scrim, just the title; /privacy/ only */
.band-plain { min-height: 36vh; padding-block: var(--s-8); }
.band-plain h1.display { margin-bottom: 0; }

/* ===================== PANEL: white floating panel, the client's side ===================== */
.panel-shell { position: relative; background: transparent; padding: var(--inset); }
.panel {
  position: relative; background: var(--white); border-radius: var(--r-panel);
  padding: var(--pad-mobile); box-shadow: 0 40px 90px -30px rgba(1, 10, 34, 0.45);
}
@media (min-width: 760px) { .panel { padding: var(--pad-desktop); } }
.panel-eyebrow { font-size: 1rem; font-weight: 300; color: var(--eyebrow-white); margin: 0 0 var(--s-3); }
.panel-head { font-size: var(--fs-panel-head); margin: 0 0 var(--s-5); max-width: 34ch; text-wrap: balance; }
.panel-hr { border: none; border-top: 1px solid var(--hairline); margin: 0 0 var(--s-7); }
.panel h3.small-head { font-size: var(--fs-small-head); font-weight: 300; margin: 0 0 var(--s-4); color: var(--navy); }
.panel p.body { color: var(--slate); margin: 0 0 var(--s-6); max-width: 52ch; }

/* panel-method: portrait left, plus-rows right; home only */
.method-grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr; }
@media (min-width: 860px) { .method-grid { grid-template-columns: minmax(260px, 400px) 1fr; align-items: start; } }
.portrait-frame { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 4; background: var(--navy); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.plus-rows { list-style: none; margin: 0; padding: 0; }
.plus-row { border-top: 1px solid var(--hairline); }
.plus-row:last-child { border-bottom: 1px solid var(--hairline); }
.plus-row summary { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-5); cursor: pointer; list-style: none; -webkit-appearance: none; min-height: 44px; }
.plus-row summary::-webkit-details-marker { display: none; }
.dock-light {
  width: 44px; height: 44px; border-radius: 50%; flex: none; margin-right: 20px;
  background: radial-gradient(circle at 32% 28%, #F3F4F7, var(--hairline) 75%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
}
.plus-row[data-body="0"].docked .dock-light { background: radial-gradient(circle at 32% 28%, #E4D6FF, var(--violet) 55%, var(--violet-ink) 100%); box-shadow: 0 0 0 4px var(--violet-tint), 0 4px 14px rgba(149, 84, 255, 0.4); }
.plus-row[data-body="1"].docked .dock-light { background: radial-gradient(circle at 32% 28%, #9CFFF5, var(--teal) 55%, var(--teal-deep) 100%); box-shadow: 0 0 0 4px #E8FBF9, 0 4px 14px rgba(1, 229, 215, 0.4); }
.plus-row[data-body="2"].docked .dock-light { background: radial-gradient(circle at 32% 28%, #6E7BC4, var(--navy-3) 60%, var(--navy) 100%); box-shadow: 0 0 0 1px rgba(149, 84, 255, 0.4), 0 0 0 4px #F3F4F7, 0 4px 14px rgba(21, 30, 77, 0.4); }
.row-label { flex: 1; font-size: 1.0625rem; font-weight: 400; color: var(--navy); }
.row-toggle { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--violet-ink); transition: transform var(--dur) var(--ease-out); }
.plus-row[open] .row-toggle { transform: rotate(45deg); }
.row-body { padding: 0 0 var(--s-6) 64px; }
.row-body p.statement { font-weight: 300; font-size: 1.125rem; color: var(--navy); margin: 0 0 var(--s-4); max-width: 48ch; }
.row-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.row-body li { position: relative; padding-left: var(--s-5); color: var(--slate); font-size: 0.9375rem; }
.row-body li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--violet-ink); transform: rotate(45deg); }

/* traveler bodies: dock from the hero orbit into a plus-row */
.traveler {
  position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: none; z-index: 30; opacity: 0;
  transition: opacity var(--dur) var(--ease-out), transform 900ms var(--ease-out);
  box-shadow: 0 2px 8px rgba(1, 10, 34, 0.3);
}
.traveler.visible { opacity: 1; }
.traveler-0 { background: radial-gradient(circle at 32% 30%, #E4D6FF, var(--violet) 45%, var(--violet-ink) 100%); }
.traveler-1 { background: radial-gradient(circle at 32% 30%, #9CFFF5, var(--teal) 45%, var(--teal-deep) 100%); }
.traveler-2 { background: radial-gradient(circle at 32% 30%, #6E7BC4, var(--navy-3) 60%, var(--navy) 100%); box-shadow: 0 0 0 1px rgba(149, 84, 255, 0.4), 0 2px 8px rgba(1, 10, 34, 0.3); }

/* panel-steps: numbered 01 to 04, tabular numerals, each with a four-item check-grid; home only */
.step-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.step-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-5); align-items: start; }
.step-num { display: block; font-size: 2.25rem; font-weight: 300; line-height: 1; color: var(--violet-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.step-label { display: block; font-size: 1rem; font-weight: 400; color: var(--navy); margin-top: var(--s-2); }
.check-grid {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-5);
  background: var(--violet-tint); border-radius: 12px; padding: var(--s-4) var(--s-5);
}
@media (min-width: 560px) { .check-grid { grid-template-columns: repeat(4, 1fr); } }
.check-item { display: flex; align-items: center; gap: var(--s-2); font-size: 0.8125rem; color: var(--navy); }
.check-item svg { flex: none; color: var(--violet-ink); }
.check-item svg path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 500ms var(--ease-out); }
.step-row.in-view .check-item svg path { stroke-dashoffset: 0; }
.step-row.in-view .check-item:nth-child(1) svg path { transition-delay: 60ms; }
.step-row.in-view .check-item:nth-child(2) svg path { transition-delay: 140ms; }
.step-row.in-view .check-item:nth-child(3) svg path { transition-delay: 220ms; }
.step-row.in-view .check-item:nth-child(4) svg path { transition-delay: 300ms; }

/* panel-cards: two-up work-card, compact (home, under a .panel-hr) or --large (/work/) */
.work-cards { display: grid; gap: var(--s-6); grid-template-columns: 1fr; margin-bottom: var(--s-7); }
@media (min-width: 700px) { .work-cards { grid-template-columns: 1fr 1fr; } }
.work-card-img { border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--s-4); aspect-ratio: 4 / 3; background: var(--navy-2); box-shadow: 0 24px 48px -24px rgba(1, 10, 34, 0.35); transition: box-shadow 500ms var(--ease-out); }
.work-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.work-card:hover .work-card-img, .work-card:focus-within .work-card-img { box-shadow: 0 32px 64px -24px rgba(1, 10, 34, 0.5); }
.work-card:hover .work-card-img img, .work-card:focus-within .work-card-img img { transform: scale(1.035); }
.work-card h3 { font-size: 1.25rem; font-weight: 400; margin: 0 0 var(--s-2); color: var(--navy); }
.work-card p.fact { color: var(--slate); margin: 0 0 var(--s-3); font-size: 0.9375rem; }
.work-cards--large .work-card-img { aspect-ratio: 16 / 10; }
.work-cards--large .work-card h3 { font-size: 1.5rem; }
.work-cards--large .card-facts { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-1); font-size: 0.9375rem; color: var(--slate); }

.featured-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 860px) { .featured-grid { grid-template-columns: minmax(220px, 300px) 1fr; align-items: start; } }

/* panel-ledger: the In and Out ledger restyled into a panel; no motion signature; /services/websites/ only */
.panel-ledger .ledger-tool { border-top: 1px solid var(--hairline); }
.panel-ledger .lrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); padding-block: var(--s-5); border-bottom: 1px solid var(--hairline); }
.panel-ledger .lrow .in { color: var(--teal-ink); }
.panel-ledger .lrow .out { color: var(--navy); }
.panel-ledger .col-h { display: block; font-size: var(--t-label); color: var(--slate); margin-bottom: var(--s-1); }

/* panel-split: image one side, copy the other; handedness fixed per page with .panel-split--right */
.split-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .split-grid { grid-template-columns: 1fr 1fr; } }
.panel-split--right .split-grid { direction: rtl; }
.panel-split--right .split-grid > * { direction: ltr; }
.split-media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-2); box-shadow: 0 24px 48px -24px rgba(1, 10, 34, 0.35); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.record-strip { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); border-top: 1px solid var(--hairline); padding-top: var(--s-5); }
.record-strip li { display: flex; align-items: center; gap: var(--s-3); font-size: 0.9375rem; color: var(--slate); }

/* panel-week: a hairline ladder of five weekday rows; /services/social-media/ only */
.week-ladder { list-style: none; margin: 0; padding: 0; }
.week-ladder li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
.week-ladder li:last-child { border-bottom: 1px solid var(--hairline); }
.week-ladder .day { font-weight: 400; color: var(--navy); }
.week-ladder p { margin: 0; color: var(--slate); }

/* panel-includes: diamond bullets plus an honest note; /services/social-media/ only */
.includes-note { padding-top: var(--s-4); border-top: 1px solid var(--hairline); color: var(--slate); font-size: 0.9375rem; }

/* panel-checks: a real table of checks; /work/ only */
.table-checks { width: 100%; border-collapse: collapse; }
.table-checks th, .table-checks td { text-align: left; padding: var(--s-4); border-bottom: 1px solid var(--hairline); }
.table-checks th { font-weight: 400; color: var(--slate); font-size: var(--t-label); }
.table-checks td { color: var(--navy); }
.table-checks .tick { color: var(--violet-ink); }

/* panel-record: a definition list of build-record facts, the live link, the before thumbnail */
.record-dl { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-6); }
.record-dl dt { color: var(--slate); font-size: var(--t-label); }
.record-dl dd { margin: 0; color: var(--navy); }
.before-thumb { border-radius: var(--r-card); overflow: hidden; box-shadow: 0 24px 48px -24px rgba(1, 10, 34, 0.35); }
.before-thumb img { width: 100%; height: auto; }
.before-thumb figcaption { margin-top: var(--s-3); font-size: 0.875rem; color: var(--slate); }

/* panel-portraits: the three discipline portraits in a row, a label and two lines under each; /about/ only */
.portraits-row { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .portraits-row { grid-template-columns: repeat(3, 1fr); } }
.portrait-col .portrait-frame { margin-bottom: var(--s-4); }
.portrait-col .p-label { font-weight: 400; color: var(--navy); margin: 0 0 var(--s-2); }
.portrait-col p { color: var(--slate); margin: 0; font-size: 0.9375rem; }

/* panel-editorial: narrow prose, diamond bullets, no image; About, Privacy */
.editorial { max-width: 34rem; }
.editorial p { color: var(--slate); }

/* panel-ladder: numbered 01 to 04 as plain hairline rows, no check grids; /about/ only */
.ladder-rows { list-style: none; margin: 0; padding: 0; }
.ladder-rows li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
.ladder-rows li:last-child { border-bottom: 1px solid var(--hairline); }
.ladder-rows .l-num { color: var(--violet-ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.ladder-rows p { margin: 0; color: var(--slate); }

/* panel-form: copy left, the form right; /contact/ only */
.form-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 860px) { .form-grid { grid-template-columns: minmax(220px, 340px) 1fr; align-items: start; } }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field label { font-size: var(--t-label); color: var(--slate); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: var(--s-3) var(--s-4); border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--white); color: var(--navy); min-height: 44px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 2px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { padding: var(--s-4); border-radius: 8px; margin-top: var(--s-4); display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: var(--teal-tint); color: var(--teal-ink); }
.form-msg.err { background: #FDEAEA; color: #9B2C2C; }

/* panel-links: three text links with arrow discs, nothing else; /404 only */
.links-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }

/* The lock: home only, at the glass card's right */
.lock-stage { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.lock-body { position: absolute; width: 16px; height: 16px; border-radius: 50%; top: 50%; left: 50%; box-shadow: 0 2px 10px rgba(1, 10, 34, 0.4); transition: transform 1200ms var(--ease-out), opacity 1200ms var(--ease-out); }
.lock-body-0 { background: radial-gradient(circle at 32% 30%, #E4D6FF, var(--violet) 45%, var(--violet-ink) 100%); transform: translate(-96px, -62px); }
.lock-body-1 { background: radial-gradient(circle at 32% 30%, #E4D6FF, var(--violet-deep) 50%, var(--violet-ink) 100%); transform: translate(82px, -76px); }
.lock-body-2 { background: radial-gradient(circle at 32% 30%, #6E7BC4, var(--navy-3) 60%, var(--navy) 100%); box-shadow: 0 0 0 1px rgba(149, 84, 255, 0.4), 0 2px 10px rgba(1, 10, 34, 0.4); transform: translate(-76px, 82px); }
.lock-body.lock-client { background: radial-gradient(circle at 32% 30%, #9CFFF5, var(--teal) 45%, var(--teal-deep) 100%); width: 18px; height: 18px; transform: translate(70px, 70px); }
.lock-stage.locked .lock-body-0 { transform: translate(-28px, -50%); opacity: 0; }
.lock-stage.locked .lock-body-1 { transform: translate(28px, -50%); opacity: 0; }
.lock-stage.locked .lock-body-2 { transform: translate(-50%, 28px); opacity: 0; }
.lock-stage.locked .lock-client { transform: translate(-50%, -50%); opacity: 0; }
.lock-mark { position: absolute; top: 50%; left: 50%; width: 116px; height: 116px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; margin: 0; transition: transform 1200ms var(--ease-out), opacity 1200ms var(--ease-out); filter: drop-shadow(0 0 30px rgba(149, 84, 255, 0.45)) drop-shadow(0 0 16px rgba(1, 229, 215, 0.3)); }
.lock-stage.locked .lock-mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lock-specular { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 900ms var(--ease-out) 500ms; pointer-events: none; }
.lock-specular-teal { transform: translate(-33px, -32px); }
.lock-specular-violet { transform: translate(27px, 29px); }
.lock-stage.locked .lock-specular { opacity: 1; }

/* Scroll reveal: a considered fade and rise, real content without JavaScript either way (this
   utility is forced to its visible end state under reduced motion and no-js below) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }
.reveal.d4 { transition-delay: 360ms; }
.plus-row.reveal:nth-child(2) { transition-delay: 80ms; }
.plus-row.reveal:nth-child(3) { transition-delay: 160ms; }
.step-row.reveal:nth-child(2) { transition-delay: 60ms; }
.step-row.reveal:nth-child(3) { transition-delay: 120ms; }
.step-row.reveal:nth-child(4) { transition-delay: 180ms; }

/* Footer */
.site-footer { background: var(--navy); color: var(--mist); padding-block: var(--s-6); }
.footer-row { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.footer-mark { width: 40px; height: 40px; }
.footer-row .rule-img { width: 70px; }
.footer-row p { margin: 0; font-size: 0.875rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-left: auto; }
.footer-links a { color: var(--mist); text-decoration: none; font-size: 0.8125rem; font-weight: 400; transition: color var(--dur) var(--ease-out); min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--white); }
.footer-modes { display: flex; gap: var(--s-3); align-items: center; }
.footer-modes button { background: transparent; border: 1px solid var(--hairline-navy); color: var(--mist); border-radius: 999px; padding: 0.35rem var(--s-4); font-size: 0.75rem; min-height: 40px; cursor: pointer; }
.footer-modes button[aria-pressed="true"] { color: var(--white); border-color: var(--white); }

/* ===================== Reading modes ===================== */
html.bigger-text { --t-body: 1.25rem; --fs-display: clamp(3rem, min(6.8vw, 9vh), 7rem); }
html.bigger-text .lead, html.bigger-text p.body { font-size: 1.25rem; }
html.high-contrast { --slate: #2B2E38; --mist: #EDEFF3; --hairline: #B9BCC5; --hairline-navy: rgba(255, 255, 255, 0.35); }
html.high-contrast .band-scrim { filter: saturate(0.9) brightness(0.92); }
html.high-contrast .band-scrim::after { content: ""; position: absolute; inset: 0; background: rgba(1, 10, 34, 0.18); }

/* ===================== Reduced motion: static end states throughout ===================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .band-media img { animation: none !important; transform: scale(1.02); }
  .traveler { display: none !important; }
  .pause-pill { display: none !important; }
  .plus-row[data-body="0"] .dock-light { box-shadow: 0 0 0 4px var(--violet-tint); }
  .plus-row[data-body="1"] .dock-light { box-shadow: 0 0 0 4px #E8FBF9; }
  .plus-row[data-body="2"] .dock-light { box-shadow: 0 0 0 4px #F3F4F7; }
  .lock-body { opacity: 0 !important; }
  .lock-mark { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
  .lock-specular { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .check-item svg path { stroke-dashoffset: 0 !important; }
}

/* No-JS: real HTML on first load. The details rows, images and text all work; the canvas and
   the docking, header-scroll, pause and lock scripts are enhancement only, so without JS this
   forces the same settled end state reduced motion forces above. */
html:not(.js) .traveler, html:not(.js) .pause-pill, html:not(.js) .nav-toggle { display: none !important; }
html:not(.js) .header-nav .nav-links { display: flex !important; position: static !important; flex-direction: row !important; background: none !important; backdrop-filter: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }
html:not(.js) #orbit-canvas { display: none; }
html:not(.js) .lock-body { opacity: 0 !important; }
html:not(.js) .lock-mark { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
html:not(.js) .lock-specular { opacity: 1 !important; }
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
html:not(.js) .check-item svg path { stroke-dashoffset: 0 !important; }
html:not(.js) .form-msg.fallback { display: block; }
html:not(.js) .lrow input { display: none; }

/* ===================== Print: keep the text, drop the bands' images ===================== */
@media print {
  .site-header, .pause-pill, .nav-toggle, .band-media, .band-scrim, #orbit-canvas, .lock-stage, .footer-modes { display: none !important; }
  .band { background: var(--white) !important; color: var(--navy) !important; min-height: 0 !important; padding-block: var(--s-5) !important; }
  .band h1.display, .band h2.display, .band .band-eyebrow, .band .lead-band, h2.band-statement, .band-quote-closing, .fact-number, .fact-label, .fact-source, .quote-text { color: var(--navy) !important; }
  .panel-shell { padding: 0; }
  .panel { box-shadow: none; padding: var(--s-5) 0; }
  .glass-card { background: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; }
  a { text-decoration: underline; }
  .site-footer { background: var(--white) !important; color: var(--navy) !important; }
}