/* =============================================================================
   STEADYSHIELD LEGAL — Design System
   Taken from the logo's navy (#052651): a midnight-navy ground in dark mode, a
   cool paper ground with navy ink in daylight, and one lifted blue of the same
   hue as the accent in both. Editorial serif for statements, geometric sans for UI.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --logo:       #052651;   /* the logo's navy — the hue everything is drawn from */

  --ink:        #030c1b;   /* midnight navy — base ground */
  --navy:       #061631;   /* primary surface */
  --navy-2:     #0a1d3d;   /* raised surface */
  --charcoal:   #0f2447;   /* secondary surface */
  --line:       rgba(150, 180, 225, 0.15);
  --line-soft:  rgba(150, 180, 225, 0.08);

  --platinum:   #d3ddec;   /* primary text on dark */
  --silver:     #8e9fbb;   /* secondary text */
  --silver-dim: #5d6e8c;   /* tertiary / meta */
  --accent:     #7fa8e8;   /* the logo navy, lifted to read on midnight */
  --accent-rgb: 127, 168, 232;
  --white:      #f3f7fd;

  --focus:      #8fb3ea;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 80px);

  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
  --step-3:  clamp(2rem, 1.4rem + 3vw, 3.6rem);
  --step-4:  clamp(2.6rem, 1.5rem + 5.4vw, 6rem);
  --step-5:  clamp(3.2rem, 1.6rem + 8vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur: 0.6s;

  /* --- Theme-sensitive surfaces (overridden by [data-theme="light"]) --- */
  --surface:      var(--ink);
  --surface-2:    var(--navy-2);
  --glass:        rgba(6, 22, 49, 0.55);
  --glass-strong: rgba(3, 12, 27, 0.74);
  --glass-soft:   rgba(6, 22, 49, 0.4);
  --hover-wash:   rgba(127, 168, 232, 0.06);
  --shadow-md:    0 20px 50px rgba(0, 4, 14, 0.45);
  --shadow-lg:    0 40px 90px rgba(0, 4, 14, 0.55);
  --shadow-xl:    0 60px 140px rgba(0, 4, 14, 0.65);
  --panel-wash:   linear-gradient(120deg, rgba(10, 29, 61, 0.9), rgba(6, 22, 49, 0));
  --doc-face:     linear-gradient(180deg, rgba(13, 34, 70, 0.9), rgba(6, 22, 49, 0.8));
  --scrim:        rgba(1, 6, 16, 0.72);
  --photo-tint:   #5a78a6;
  --danger:       #d1897b;
  --danger-line:  #c07a6b;

  --z-nav: 100;
  --z-rail: 90;
  --z-dock: 130;
  --z-panel: 300;
  --z-overlay: 400;
  --z-toast: 600;
}

/* ---------- Light palette — "Daylight" ----------
   Cool paper ground with the logo's navy as the ink, and the WebGL stage
   running against it. */
html[data-theme="light"] {
  --paper:      #f2f5fa;   /* the page ground, readable from inside a dark island */
  --ink:        #f2f5fa;
  --navy:       #ffffff;
  --navy-2:     #f8fafd;
  --charcoal:   #e2e9f3;
  --line:       rgba(5, 38, 81, 0.15);
  --line-soft:  rgba(5, 38, 81, 0.07);

  --platinum:   #0b2446;
  --silver:     #465a7a;
  --silver-dim: #6a7b97;
  --accent:     #1f4e96;   /* the logo navy, one step brighter so it reads as blue */
  --accent-rgb: 31, 78, 150;
  --white:      #052651;   /* the strongest ink is the logo itself */

  --focus:      #1f4e96;

  --surface:      #ffffff;
  --surface-2:    #f8fafd;
  --glass:        rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(242, 245, 250, 0.86);
  --glass-soft:   rgba(255, 255, 255, 0.6);
  --hover-wash:   rgba(5, 38, 81, 0.04);
  --shadow-md:    0 18px 40px rgba(5, 38, 81, 0.1);
  --shadow-lg:    0 34px 70px rgba(5, 38, 81, 0.14);
  --shadow-xl:    0 50px 110px rgba(5, 38, 81, 0.18);
  --panel-wash:   linear-gradient(120deg, rgba(5, 38, 81, 0.06), rgba(5, 38, 81, 0));
  --doc-face:     linear-gradient(180deg, #ffffff, #eef3fa);
  --scrim:        rgba(3, 16, 38, 0.42);
  --photo-tint:   #46618c;
  --danger:       #a4483a;
  --danger-line:  #b45c4c;
}

/* Cinematic bands stay dark on the light palette — deliberate inverted islands.
   The finale is excluded in daylight (see below): it is the one band the stage
   renders through, so keeping it opaque would hide the closing rings. */
html[data-theme="light"] .courtroom,
html[data-theme="light"] .finale,
html[data-theme="light"] .footer {
  --ink:        #030c1b;
  --navy:       #061631;
  --navy-2:     #0a1d3d;
  --line:       rgba(150, 180, 225, 0.15);
  --line-soft:  rgba(150, 180, 225, 0.08);
  --platinum:   #d3ddec;
  --silver:     #8e9fbb;
  --silver-dim: #5d6e8c;
  --accent:     #7fa8e8;
  --accent-rgb: 127, 168, 232;
  --white:      #f3f7fd;
  --surface:    #030c1b;
  --surface-2:  #0a1d3d;
  --hover-wash: rgba(127, 168, 232, 0.06);
  background-color: #030c1b;
  color: var(--platinum);
}

html[data-theme="light"] body {
  background:
    radial-gradient(900px 600px at 78% 6%, rgba(31, 78, 150, 0.12), transparent 62%),
    radial-gradient(760px 620px at 10% 72%, rgba(5, 38, 81, 0.08), transparent 64%),
    var(--ink);
  background-attachment: fixed;
}
/* On a paper page the courtroom's flat fill met its neighbours as a 1px step —
   a seam, not a design choice. Dark mode never showed it because the sections
   either side were already dark.

   These strips sit above the pinned scene (the bench is opaque and lands right
   on the section's bottom edge, so fading the background behind it achieved
   nothing) and only bite while a section edge is crossing the viewport. */
html[data-theme="light"] .courtroom::before,
html[data-theme="light"] .courtroom::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 4;
  height: clamp(130px, 20vh, 260px); pointer-events: none;
}
html[data-theme="light"] .courtroom::before {
  top: 0;
  background: linear-gradient(180deg, var(--paper), rgba(242, 245, 250, 0));
}
html[data-theme="light"] .courtroom::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--paper), rgba(242, 245, 250, 0));
}
html[data-theme="light"] .scales__stage::before {
  background: radial-gradient(circle, rgba(31, 78, 150, 0.12), transparent 70%);
}
html[data-theme="light"] .jscales__shaft {
  background: linear-gradient(180deg, rgba(31, 78, 150, 0.12), rgba(31, 78, 150, 0.03) 46%, transparent 78%);
}

/* ---------- Daylight mode ----------
   The paper palette above, with the stage live. The ground is
   pulled a shade cleaner and the wash is thinned so the seal keeps its
   contrast instead of sitting in a haze. */
html[data-mode="daylight"] body {
  background:
    radial-gradient(1100px 780px at 74% 10%, rgba(31, 78, 150, 0.14), transparent 64%),
    radial-gradient(820px 680px at 8% 76%, rgba(5, 38, 81, 0.08), transparent 66%),
    linear-gradient(180deg, #f8fafd, var(--ink) 55%, #e9eff7);
  background-attachment: fixed;
}
/* The finale is the one inverted island daylight releases, so the closing
   rings render against paper rather than behind an opaque black band. */
html[data-mode="daylight"] .finale {
  --ink:        #f2f5fa;
  --navy:       #ffffff;
  --navy-2:     #f8fafd;
  --line:       rgba(5, 38, 81, 0.15);
  --line-soft:  rgba(5, 38, 81, 0.07);
  --platinum:   #0b2446;
  --silver:     #465a7a;
  --silver-dim: #6a7b97;
  --accent:     #1f4e96;
  --accent-rgb: 31, 78, 150;
  --white:      #052651;
  --surface:    #ffffff;
  --surface-2:  #f8fafd;
  --hover-wash: rgba(5, 38, 81, 0.04);
  background-color: transparent;
  color: var(--silver);
}
/* Light ground for the no-WebGL / pre-live fallback panel. */
html[data-mode="daylight"] .stage-fallback {
  background:
    radial-gradient(1200px 800px at 72% 18%, rgba(31, 78, 150, 0.14), transparent 60%),
    radial-gradient(900px 700px at 20% 80%, rgba(5, 38, 81, 0.08), transparent 62%),
    linear-gradient(180deg, #f8fafd, var(--navy) 60%, #e9eff7);
}
html[data-mode="daylight"] .stage-fallback::after {
  background: radial-gradient(circle at 68% 42%, rgba(5, 38, 81, 0.1), transparent 22%);
}

/* Theme swap should read as a dissolve, not a flash. */
html.theme-anim body,
html.theme-anim .nav,
html.theme-anim .panel,
html.theme-anim .card,
html.theme-anim .trust__item,
html.theme-anim .doc {
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease),
              border-color 0.5s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--platinum);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: rgba(var(--accent-rgb), 0.25); color: var(--white); }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  padding: 10px 16px; background: var(--navy-2); border: 1px solid var(--line);
  border-radius: 6px; transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(90px, 14vh, 200px); z-index: 2; }
.display { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
.display em { font-style: italic; font-weight: 300; color: var(--white); }

.eyebrow, .section-index {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-dim);
  font-weight: 500;
}
.section-index { margin-bottom: clamp(20px, 4vh, 44px); }
.section-head { max-width: 60ch; margin-bottom: clamp(40px, 8vh, 90px); }
.section-head h2 { font-size: var(--step-3); color: var(--platinum); }

.lede { font-size: var(--step-1); color: var(--silver); font-weight: 300; max-width: 46ch; }

.pill-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin-top: 32px; }
.pill-row li {
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 100px; color: var(--silver);
}

/* ---------- WebGL stage ---------- */
.stage {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.stage.is-live { opacity: 1; }
.stage-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 1s var(--ease);
  background:
    radial-gradient(1200px 800px at 72% 18%, rgba(31, 78, 150, 0.3), transparent 60%),
    radial-gradient(900px 700px at 20% 80%, rgba(5, 38, 81, 0.45), transparent 62%),
    linear-gradient(180deg, var(--ink), var(--navy) 60%, var(--ink));
}
.stage-fallback::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 68% 42%, rgba(127, 168, 232, 0.12), transparent 22%);
  filter: blur(2px);
}
body.no-webgl .stage-fallback { opacity: 1; }

/* =============================================================================
   CINEMATIC INTRO
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: grid; place-items: center;
  transition: opacity 1s var(--ease), visibility 1s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* Already played this tab — decided in <head>, so it never paints at all. */
html.intro-seen .intro { display: none; }
body.intro-lock { overflow: hidden; height: 100vh; }

/* Two entrances share the overlay; data-intro (set in <head>, confirmed by
   main.js) shows only the parts of the one that is playing. */
html[data-intro="seal"] .intro { background: transparent; }
html[data-intro="seal"] .intro__canvas,
html[data-intro="seal"] .intro__vignette,
html[data-intro="seal"] .intro__shock,
html[data-intro="seal"] .intro__brand,
html:not([data-intro="seal"]) .intro__film { display: none; }

/* ---------- The seal ----------
   Painted from the theme tokens, so the same sequence is ink and blue on
   paper in daylight, platinum and light blue on midnight. */
.intro {
  --intro-halo: rgba(var(--accent-rgb), 0.2);
  --intro-edge: rgba(0, 0, 0, 0.55);
  --seal: min(62vmin, 430px);
}
html[data-theme="light"] .intro {
  --intro-halo: rgba(var(--accent-rgb), 0.16);
  --intro-edge: rgba(5, 38, 81, 0.12);
}
.intro__film { position: absolute; inset: 0; z-index: 1; overflow: hidden; }

/* The ground is two doors that meet at the centre line, each carrying its half
   of one vignette, so the page is revealed by them parting. */
.intro__door { position: absolute; top: 0; bottom: 0; width: 50.5%; }
.intro__door--l {
  left: 0;
  background: radial-gradient(120% 95% at 100% 50%, transparent 45%, var(--intro-edge)), var(--ink);
}
.intro__door--r {
  right: 0;
  background: radial-gradient(120% 95% at 0% 50%, transparent 45%, var(--intro-edge)), var(--ink);
}

/* Everything drawn is hidden until the script has set each piece's start pose. */
.intro__stage { position: absolute; inset: 0; visibility: hidden; }

.intro__seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--accent) 50%, transparent);
}
/* The pieces GSAP scales or moves are centred with left/top, never the CSS
   `translate` property: GSAP folds that into its own x/y, and the seal's flight
   to the nav would then overwrite the centring and land off target. */
.intro__glow {
  position: absolute; width: 130vmin; height: 130vmin;
  left: calc(50% - 65vmin); top: calc(50% - 65vmin); border-radius: 50%;
  background: radial-gradient(circle, var(--intro-halo), transparent 60%);
}

.intro__cards { position: absolute; inset: 0; }
.intro__rule {
  position: absolute; left: 8vw; right: 8vw; top: 50%; height: 1px; margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
}
.intro__spark {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 22px 6px var(--intro-halo);
}
.intro__card { position: absolute; inset: 0; }
/* Each card is two windows on the rule: the word rises out from behind it,
   its index drops out beneath it, and both slip back the way they came. */
.intro__clip {
  position: absolute; left: var(--gutter); right: var(--gutter);
  overflow: hidden; text-align: center;
}
.intro__clip--up { bottom: 50%; padding: 0.1em 0 clamp(10px, 1.8vh, 20px); }
.intro__clip--down { top: 50%; padding: clamp(12px, 2.2vh, 22px) 0 4px; }
.intro__say {
  display: inline-block; white-space: nowrap;
  font-family: var(--serif); font-weight: 300; line-height: 1;
  font-size: clamp(2.7rem, 10.5vw, 8.5rem); letter-spacing: -0.01em;
  color: var(--platinum);
}
.intro__say b { font-weight: 300; color: var(--accent); }
.intro__say-n {
  display: inline-block; font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.3em; padding-left: 0.3em; color: var(--silver-dim);
}

.intro__seal {
  position: absolute; width: var(--seal); height: var(--seal);
  left: calc(50% - var(--seal) / 2); top: calc(50% - var(--seal) / 2);
}

/* ---------- Seal artwork ----------
   One drawing, used twice: the intro strikes it and the hero keeps it. Stroke
   widths are in viewBox units, so both copies match line for line at any size. */
.seal-art { overflow: visible; color: var(--platinum); }
.seal-art .s-line {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.seal-art .s-ring, .seal-art .s-ring-in { stroke-linecap: butt; }
.seal-art .s-thin { stroke-width: 0.8; stroke: var(--silver); }
.seal-art .s-accent { stroke: var(--accent); }
.seal-art .s-node { fill: var(--accent); }
.seal-art .s-fill { fill: var(--accent); }
.seal-art .s-glint { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
.seal-art .s-legend {
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 3.4px;
  fill: currentColor;
}
.seal-art .s-legend--sub {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; letter-spacing: 0.6px; fill: var(--silver);
}
.intro__shock-ring {
  position: absolute; width: calc(var(--seal) * 0.91); height: calc(var(--seal) * 0.91);
  left: calc(50% - var(--seal) * 0.455); top: calc(50% - var(--seal) * 0.455);
  border-radius: 50%; border: 1px solid var(--accent);
}
.intro__motto {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(50% + var(--seal) / 2 + clamp(12px, 3vh, 30px));
  text-align: center; text-transform: uppercase; color: var(--silver);
  font-size: clamp(0.62rem, 0.56rem + 0.3vw, 0.8rem);
  letter-spacing: clamp(0.16em, 0.9vw, 0.42em); font-weight: 500;
}

/* Safety net: if the script never takes the overlay over, it must not trap
   the page. Far longer than the sequence itself, so it never cuts one short. */
html[data-intro="seal"] .intro { animation: intro-release 0.6s ease 15s forwards; }
@keyframes intro-release { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 30%, rgba(0,0,0,0.7) 78%, #000 100%);
}
.intro__shock {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
  border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  pointer-events: none; opacity: 0;
}

.intro__brand {
  position: relative; z-index: 3; text-align: center;
  opacity: 0;
}
.intro__word {
  display: block; font-family: var(--serif); font-weight: 300;
  color: var(--white); line-height: 1;
  font-size: clamp(2.8rem, 9vw, 7rem); letter-spacing: 0.02em;
  clip-path: inset(0 0 100% 0);
}
.intro__word--sub {
  font-size: clamp(0.9rem, 2.4vw, 1.4rem); letter-spacing: 0.72em;
  text-transform: uppercase; color: var(--silver); margin-top: 1.4em;
  padding-left: 0.72em;
}

.intro__skip {
  position: absolute; right: var(--gutter); bottom: 34px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--silver); transition: color 0.3s var(--ease);
}
.intro__skip:hover { color: var(--white); }

.sound-toggle {
  position: fixed; z-index: 150; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--silver);
  background: var(--glass-soft); backdrop-filter: blur(8px);
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.sound-toggle:hover { color: var(--white); border-color: var(--silver); }
.sound-toggle--intro { left: var(--gutter); bottom: 30px; }
.sound-toggle .sound-toggle__off { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__on { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__off { display: block; }

/* Persistent sound toggle after intro */
.sound-toggle--fixed { right: var(--gutter); bottom: 26px; left: auto; }

/* =============================================================================
   CUSTOM CURSOR
   ========================================================================== */
/* Always white, inverted against whatever is beneath it, so it reads on the
   paper ground, the dark bands, photos and the stage alike. It can't follow the
   theme tokens: on the light palette --white is near-black, and near-black under
   `difference` comes out as the paper itself — an invisible pointer.
   The native pointer is hidden, so nothing may ever paint over this one:
   it sits above toasts, dialogs and the drawer. */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference;
  translate: -50% -50%;
  transition: opacity 0.2s var(--ease);
}
.cursor { width: 8px; height: 8px; background: #fff; }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid rgba(255, 255, 255, 0.75);
  transition: opacity 0.2s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease),
              background 0.35s var(--ease);
}
body.cursor-hover .cursor-ring { width: 68px; height: 68px; background: rgba(255, 255, 255, 0.1); }
body.cursor-hover .cursor { width: 5px; height: 5px; }
body.cursor-down .cursor-ring { width: 30px; height: 30px; }
/* Out of sight until the pointer first moves, and while it is off the page. */
body.cursor-away .cursor, body.cursor-away .cursor-ring { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
}
body.use-cursor, body.use-cursor * { cursor: none; }

/* =============================================================================
   SCROLL RAIL
   ========================================================================== */
.scroll-rail {
  position: fixed; right: 0; top: 0; bottom: 0; width: 2px; z-index: 90;
  background: var(--line-soft);
}
.scroll-rail span {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: linear-gradient(var(--silver), var(--accent));
}

/* =============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav[data-state="scrolled"] {
  background: var(--glass-strong);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav[data-state="hidden"] { transform: translateY(-100%); transition: transform 0.5s var(--ease); }
.nav__inner {
  width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: clamp(14px, 2vh, 22px); gap: clamp(16px, 2vw, 30px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--platinum); }
.brand__mark { color: var(--silver); display: grid; place-items: center; flex: none; }
.brand__mark img { width: 34px; height: 34px; display: block; }
/* The seal is drawn in navy ink; on the dark ground it has to be lifted out
   to platinum rather than sat on a white plate. */
html[data-theme="dark"] .brand__mark img,
html[data-mode="dark"] .brand__mark img { filter: invert(1) brightness(1.5) saturate(0); opacity: 0.86; }
.brand:hover .brand__mark img { opacity: 1; }
.footer__mark { display: block; margin-bottom: 18px; width: 72px; height: 72px; }
html[data-theme="dark"] .footer__mark,
html[data-mode="dark"] .footer__mark { filter: invert(1) brightness(1.5) saturate(0); opacity: 0.8; }
html[data-theme="light"] .courtroom .footer__mark,
html[data-theme="light"] .footer .footer__mark { filter: invert(1) brightness(1.5) saturate(0); opacity: 0.8; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.02em; }
.brand__sub {
  font-size: 0.6rem; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--silver-dim); margin-top: 4px;
}

.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.nav__link {
  font-size: var(--step--1); letter-spacing: 0.06em; color: var(--silver);
  position: relative; padding-block: 6px; white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--platinum); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover { color: var(--platinum); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--platinum); }

.nav__burger {
  display: none; width: 40px; height: 40px; position: relative;
}
.nav__burger span {
  position: absolute; left: 9px; width: 22px; height: 1.4px; background: var(--platinum);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 23px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; border-radius: 100px;
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; position: relative; overflow: hidden;
  transition: color 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
  white-space: nowrap;
}
.btn svg { transition: transform 0.4s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(5px); }
.btn--solid { background: var(--platinum); color: var(--ink); }
.btn--solid:hover { background: var(--white); }
.btn--line { border: 1px solid var(--line); color: var(--platinum); }
.btn--line:hover { border-color: var(--silver); background: var(--hover-wash); }
.btn--ghost { border: 1px solid var(--line); color: var(--platinum); padding: 12px 22px; }
.nav__cta { padding: 11px 20px; letter-spacing: 0.09em; }
.btn--ghost:hover { border-color: var(--silver); background: var(--hover-wash); }

/* =============================================================================
   MOBILE MENU
   ========================================================================== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--gutter);
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path 0.6s var(--ease-in-out);
  pointer-events: none;
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); pointer-events: auto; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 300;
  padding-block: 10px; color: var(--silver); transition: color 0.3s var(--ease);
  opacity: 0; transform: translateY(20px);
}
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: none; transition: opacity 0.5s var(--ease) var(--d, 0s), transform 0.5s var(--ease) var(--d, 0s), color 0.3s; }
.mobile-menu__nav a:hover { color: var(--white); }
.mobile-menu__cta { align-self: flex-start; margin-top: 30px; }
.mobile-menu__meta { margin-top: 30px; font-size: var(--step--1); letter-spacing: 0.3em; text-transform: uppercase; color: var(--silver-dim); }

/* =============================================================================
   HERO
   ========================================================================== */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; }
.hero__inner { position: relative; z-index: 3; text-align: left; }
.hero__inner .eyebrow { margin-bottom: 28px; max-width: 34ch; }
.hero__title {
  font-size: var(--step-5);
  color: var(--platinum);
  margin-bottom: clamp(24px, 4vh, 40px);
  max-width: 12ch;
}
.hero__lede { max-width: 38ch; margin-bottom: clamp(32px, 5vh, 48px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 34px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  font-size: var(--step--1); letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver-dim);
}
.hero__scroll-line { width: 60px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--silver);
  transform: translateX(-100%); animation: scrollPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollPulse { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* ---------- Hero seal ----------
   Planes stacked in one 3D space: .hseal__scroll carries the perspective and
   the scroll exit, .hseal__tilt turns with the pointer, and each layer is set
   back or forward by its data-z (script-applied, with a matching scale so the
   planes line up exactly at rest and only separate when the seal turns).
   Anything given opacity or a filter sits on a leaf, never on a preserve-3d
   element, which would flatten the depth. */
.hero__art {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  --hs-glow: rgba(var(--accent-rgb), 0.16);
  --hs-beam: rgba(var(--accent-rgb), 0.13);
}
html[data-theme="light"] .hero__art {
  --hs-glow: rgba(var(--accent-rgb), 0.14);
  --hs-beam: rgba(var(--accent-rgb), 0.12);
}
.hseal {
  --hs: min(36vw, 540px, 60vh);
  position: absolute; width: var(--hs); height: var(--hs);
  left: calc(73% - var(--hs) / 2); top: calc(52% - var(--hs) / 2);
}
.hseal__scroll { position: absolute; inset: 0; perspective: 1400px; }
.hseal__tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.hseal__layer, .hseal__back { position: absolute; inset: 0; }
.hseal__svg, .hseal__bezel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Before it enters — through the whole intro — it isn't rendered at all, so it
   adds no layers while the intro and the WebGL stage are busy. */
.hseal.is-dormant .hseal__scroll { display: none; }

.hseal__halo {
  position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, var(--hs-glow), transparent 64%);
}
/* A pool of light falling on the seal from above, breathing slowly. Plain
   gradients only — a blurred, clipped shaft cost a full-size filter pass. */
.hseal__light {
  position: absolute; left: 10%; right: 10%; top: -70%; bottom: 8%;
  background: radial-gradient(50% 100% at 50% 0%, var(--hs-beam), transparent 100%);
  animation: hseal-breathe 9s ease-in-out infinite;
}
@keyframes hseal-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Two bezels turning against each other — a watchmaker's precision, slowly. */
.hseal__bezel { color: var(--silver); animation: hseal-turn 140s linear infinite; }
.hseal__bezel--rev { animation-duration: 95s; animation-direction: reverse; }
@keyframes hseal-turn { to { transform: rotate(360deg); } }
.hseal__bezel .b-ticks { fill: none; stroke: var(--line); stroke-width: 6; }
.hseal__bezel .b-ticks--major { stroke: var(--silver-dim); stroke-width: 12; }
.hseal__bezel .b-hair { fill: none; stroke: var(--line); stroke-width: 0.8; }
.hseal__bezel .b-seg { stroke: var(--silver-dim); stroke-width: 0.9; opacity: 0.7; }
.hseal__bezel .b-orbit, .hseal__bezel .b-dot { fill: var(--accent); }

.hseal__ripple {
  position: absolute; inset: 4.5%; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0;
}

.hseal__dust i {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px;
  border-radius: 50%; background: var(--accent); opacity: 0;
  animation: hseal-mote var(--t) linear var(--d) infinite;
}
@keyframes hseal-mote {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 0.55; }
  60%  { opacity: 0.35; }
  100% { opacity: 0; transform: translate(14px, -120px); }
}
.hseal.is-paused *, .hseal.is-paused { animation-play-state: paused; }

/* Held back until the script has decided how it enters (JS adds .is-live
   immediately). If the script never arrives, show it complete after a moment. */
html.js .hseal:not(.is-live) { visibility: hidden; animation: hseal-release 0s linear 5s forwards; }
@keyframes hseal-release { to { visibility: visible; } }

/* Below the two-column width the seal becomes a watermark, bleeding off the
   right edge behind the copy. */
@media (max-width: 899px) {
  .hero__art { opacity: 0.22; }
  .hseal { --hs: min(104vw, 600px); left: calc(80% - var(--hs) / 2); top: calc(40% - var(--hs) / 2); }
}

/* =============================================================================
   PHOTOGRAPHS
   Real photographs of the chambers inside a drawn, two-colour page. The office
   is painted in bright pinks and yellows, so every photograph is toned into
   the logo's blue — luminance kept, colour replaced — and returns to full
   colour on hover. On touch screens, with no hover, the tone is lighter and
   some of the real colour always shows. The treatment is a frame, not a disguise.
   ========================================================================== */
.photo { position: relative; display: block; margin: 0; overflow: hidden; isolation: isolate; border-radius: 4px; background: var(--charcoal); }
.photo picture { display: block; width: 100%; height: 100%; }
.photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.97);
  transition: filter 0.9s var(--ease), transform 1.4s var(--ease);
}
.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--photo-tint); mix-blend-mode: color; opacity: 0.85;
  transition: opacity 0.9s var(--ease);
}
/* The office walls are white; on the midnight ground they glare, so the tone
   is pulled down a step in dark mode. */
html:not([data-theme="light"]) .photo img { filter: grayscale(1) contrast(1.12) brightness(0.8); }
.photo:hover img { filter: none; transform: scale(1.04); }
.photo:hover::after { opacity: 0; }
/* html-qualified to outrank the dark-mode tone above */
@media (hover: none) {
  html .photo img { filter: grayscale(0.45) contrast(1.04); }
  .photo::after { opacity: 0.45; }
}
/* a caption laid over the foot of the photograph */
.photo__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 44px 16px 14px; color: #f3f7fd;
  background: linear-gradient(180deg, transparent, rgba(3, 12, 27, 0.72));
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Inside the chambers: the reel ---------- */
.reel { position: relative; z-index: 2; padding-block: clamp(60px, 10vh, 130px) clamp(30px, 5vh, 60px); }
.reel__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px;
  flex-wrap: wrap; margin-bottom: clamp(26px, 5vh, 54px);
}
.reel__head .section-index { margin-bottom: 18px; }
.reel__title { font-size: var(--step-3); color: var(--platinum); max-width: 20ch; }
.reel__note { font-size: var(--step--1); color: var(--silver-dim); letter-spacing: 0.04em; }
@media (hover: none) { .reel__note { display: none; } }

.reel__viewport {
  --reel-gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reel__viewport::-webkit-scrollbar { display: none; }
/* The trailing padding matches the gap, so two copies of the set measure
   exactly twice one copy and a -50% slide lands seamlessly on the start. */
.reel__track {
  display: flex; gap: var(--reel-gap); width: max-content;
  list-style: none; margin: 0; padding: 0 var(--reel-gap) 0 0;
}
.reel__item { flex: none; height: clamp(220px, 36vh, 360px); }
.reel__item--wide { aspect-ratio: 4 / 3; }
.reel__item--tall { aspect-ratio: 3 / 4; }
.reel__item .photo { height: 100%; }

.reel.is-looping .reel__viewport { overflow: hidden; }
.reel.is-looping .reel__track { animation: reel-loop 90s linear infinite; }
.reel.is-looping .reel__viewport:hover .reel__track { animation-play-state: paused; }
@keyframes reel-loop { to { transform: translateX(-50%); } }

/* =============================================================================
   SCALES
   ========================================================================== */
.scales__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.scales__stage { aspect-ratio: 1; display: grid; place-items: center; color: var(--silver); position: relative; }
.scales__stage::before {
  content: ""; position: absolute; inset: 10%;
  background: radial-gradient(circle, rgba(63,82,120,0.18), transparent 70%);
  filter: blur(30px);
}
.scales__title { font-size: var(--step-3); color: var(--platinum); margin-bottom: 28px; }

/* ---------- Motion primitives ----------
   Shared by every drawn section piece, so a new one is a handful of lines
   rather than a fresh timeline. A piece marks its container `data-io`
   (initReveal adds `.is-in` when it scrolls into view) and tags its own parts
   with these classes; `--d` staggers each part, `--dur` overrides its speed.

   Every drawn path carries pathLength="1", so the dash maths is identical
   whatever the real geometry is — nothing to measure, and the artwork can be
   redrawn freely without touching the CSS. */
.mo-draw {
  fill: none; stroke: currentColor; stroke-width: var(--w, 1.5);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.mo-fade { opacity: 0; }
[data-io].is-in .mo-draw { animation: mo-draw var(--dur, 0.85s) var(--ease) var(--d, 0s) forwards; }
[data-io].is-in .mo-fade { animation: mo-fade var(--dur, 0.5s) var(--ease) var(--d, 0s) forwards; }
@keyframes mo-draw { to { stroke-dashoffset: 0; } }
@keyframes mo-fade { to { opacity: 1; } }

/* Nothing ever gets `.is-in` without script, so show the finished state. */
.no-js .mo-draw { stroke-dashoffset: 0; }
.no-js .mo-fade { opacity: 1; }

/* ---------- Scales of justice ----------
   Draws itself in when the section arrives, then the beam tips and settles into
   equilibrium — a damped swing rather than a loop, so it reads as "measured"
   and comes to rest. Only a slow residual breath keeps it alive afterwards. */
.jscales { position: relative; width: min(100%, 340px); }
.jscales__svg { width: 100%; height: auto; overflow: visible; }

.jscales__bar { stroke: var(--platinum); --w: 2; }
.jscales__dish { stroke: var(--platinum); }
.jscales__finial, .jscales__pivot, .jscales__cap { fill: var(--accent); }

/* the soft shaft of light the whole section sits in */
.jscales__shaft {
  position: absolute; left: 50%; top: -14%; width: 62%; height: 128%;
  translate: -50% 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.04) 46%, transparent 78%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(14px);
}

.scales__stage.is-in .jscales__shaft { animation: mo-fade 1.4s var(--ease) 0.9s forwards; }

/* The beam swings; each pan runs the same curve inverted, about its own
   suspension point, so it stays level while riding the beam. The small delay
   on the pan is the chain lag — it keeps the counter-rotation from looking
   mechanically perfect. */
.jscales__beam, .jscales__pan { transform-box: view-box; }
.jscales__beam { transform-origin: 130px 60px; }
.jscales__pan { transform-origin: var(--o); }
.scales__stage.is-in .jscales__beam {
  animation: ss-scale-tip 4.6s var(--ease-in-out) 1.25s both,
             ss-scale-breathe 9s ease-in-out 5.85s infinite;
}
.scales__stage.is-in .jscales__pan {
  animation: ss-scale-tip-inv 4.6s var(--ease-in-out) 1.33s both,
             ss-scale-breathe-inv 9s ease-in-out 5.93s infinite;
}

@keyframes ss-scale-tip {
  0%   { transform: rotate(-11deg); }
  26%  { transform: rotate(6.4deg); }
  48%  { transform: rotate(-3.8deg); }
  66%  { transform: rotate(2.2deg); }
  80%  { transform: rotate(-1.2deg); }
  91%  { transform: rotate(0.55deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ss-scale-tip-inv {
  0%   { transform: rotate(11deg); }
  26%  { transform: rotate(-6.4deg); }
  48%  { transform: rotate(3.8deg); }
  66%  { transform: rotate(-2.2deg); }
  80%  { transform: rotate(1.2deg); }
  91%  { transform: rotate(-0.55deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ss-scale-breathe {
  0%, 100% { transform: rotate(-0.8deg); }
  50%      { transform: rotate(0.8deg); }
}
@keyframes ss-scale-breathe-inv {
  0%, 100% { transform: rotate(0.8deg); }
  50%      { transform: rotate(-0.8deg); }
}

.no-js .jscales__shaft { opacity: 1; }

/* =============================================================================
   ABOUT
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.about__title { font-size: var(--step-4); color: var(--platinum); }
.about__lead { position: sticky; top: 18vh; }
.about__body { display: flex; flex-direction: column; gap: 26px; font-size: var(--step-1); font-weight: 300; color: var(--silver); padding-top: 10px; }
.about__body p { max-width: 44ch; }
/* ---------- About: the shield, struck in three ----------
   A draughtsman's construction rather than a finished emblem — guides first,
   then one stroke per link in the chain below (knowledge and strategy down the
   shoulders, protection closing the point), blue at the joints, the wordmark's
   arrow struck last. It reads as something built, which is the section's claim. */
/* Sized from viewport height, not width: the lead column is sticky, so the
   title plus the stage has to clear `top: 18vh` on a short screen or the
   shield's point hangs below the fold and never scrolls into view. */
.about__stage {
  margin-top: clamp(22px, 4vh, 48px);
  height: clamp(226px, 33vh, 318px);
  color: var(--silver);
}
.ashield { height: 100%; width: auto; overflow: visible; }
/* Colour has to land on the paths, not their group: .mo-draw sets
   `stroke: currentColor` directly on each path, which beats anything inherited. */
.ashield__guide .mo-draw { stroke: var(--line); --w: 1; }
.ashield__arm { stroke: var(--platinum); --w: 1.8; }
.ashield__mark .mo-draw { stroke: var(--accent); --w: 1.7; }
.ashield__node { fill: var(--accent); }

/* A short dash chased around the whole silhouette — one pass, then a long
   pause, so it registers as a highlight rather than a spinner. */
.ashield__glint {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 0.055 0.945; stroke-dashoffset: 1; opacity: 0;
}
[data-io].is-in .ashield__glint { animation: ab-glint 9s linear 3s infinite; }
@keyframes ab-glint {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  5%   { opacity: 0.85; }
  36%  { stroke-dashoffset: 0; opacity: 0.85; }
  42%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---------- About: the chain builds left to right ---------- */
.about__chain { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.about__chain span {
  font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--platinum);
  opacity: 0; transform: translateY(7px);
}
.about__chain i {
  position: relative; width: 40px; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left;
}
/* the blue bead that lands once its rule has drawn */
.about__chain i::after {
  content: ""; position: absolute; right: -1px; top: 50%; margin-top: -2px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0;
}
.about__chain.is-in span { animation: ab-link 0.6s var(--ease) var(--d, 0s) forwards; }
.about__chain.is-in i { animation: ab-rule 0.5s var(--ease) var(--d, 0s) forwards; }
.about__chain.is-in i::after { animation: mo-fade 0.4s var(--ease) var(--d2, 0s) forwards; }
.about__chain span:nth-child(1) { --d: 0s; }
.about__chain i:nth-child(2)    { --d: 0.18s; --d2: 0.6s; }
.about__chain span:nth-child(3) { --d: 0.44s; }
.about__chain i:nth-child(4)    { --d: 0.62s; --d2: 1.04s; }
.about__chain span:nth-child(5) { --d: 0.88s; }
@keyframes ab-link { to { opacity: 1; transform: none; } }
@keyframes ab-rule { to { transform: scaleX(1); } }

/* ---------- About: the team, and the door ----------
   A tall photograph with a square one pinned over its corner, framed in the
   page colour so it reads as a print laid on top. Each unveils downward when
   the pair scrolls in. */
.about__photos {
  position: relative; max-width: 540px; margin-top: clamp(10px, 2vh, 24px);
  padding-bottom: 16%;
}
.about__photo--main { width: 76%; aspect-ratio: 4 / 5; }
.about__photo--inset {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1;
  border: 6px solid var(--surface); border-radius: 6px; box-shadow: var(--shadow-lg);
}
.about__photos-note { font-size: var(--step--1); color: var(--silver-dim); max-width: 40ch; margin-top: -6px; }
.js .about__photo { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .about__photo--inset { transition-delay: 0.3s; }
.js .about__photos.is-in .about__photo { clip-path: inset(0 0 0 0); }

.no-js .about__chain span { opacity: 1; transform: none; }
.no-js .about__chain i { transform: scaleX(1); }
.no-js .about__chain i::after { opacity: 1; }

/* =============================================================================
   PRACTICE AREAS — large interactive panels
   ========================================================================== */
.panels { border-top: 1px solid var(--line); margin-top: 20px; }
.panel {
  position: relative; display: grid;
  grid-template-columns: 80px 1fr auto; align-items: center; gap: clamp(16px, 4vw, 60px);
  padding: clamp(24px, 4vh, 44px) var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
  transition: background 0.5s var(--ease);
}
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--panel-wash);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.panel:hover::before, .panel:focus-visible::before, .panel.is-open::before { opacity: 1; }
.panel__no { font-size: var(--step--1); color: var(--silver-dim); letter-spacing: 0.1em; }
.panel__title {
  font-family: var(--serif); font-weight: 400; font-size: var(--step-2); color: var(--silver);
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.panel:hover .panel__title, .panel:focus-visible .panel__title, .panel.is-open .panel__title {
  color: var(--white); transform: translateX(10px);
}
.panel__desc {
  grid-column: 2 / 3; max-width: 52ch; color: var(--silver-dim);
  font-size: var(--step-0); font-weight: 300;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.6s var(--ease), opacity 0.4s var(--ease), margin 0.5s var(--ease);
}
.panel:hover .panel__desc, .panel:focus-visible .panel__desc, .panel.is-open .panel__desc {
  max-height: 8em; opacity: 1; margin-top: 16px;
}
.panel__icon { color: var(--silver-dim); opacity: 0.4; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.panel__icon svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.panel:hover .panel__icon, .panel:focus-visible .panel__icon, .panel.is-open .panel__icon {
  opacity: 1; transform: rotate(-6deg) scale(1.08); color: var(--accent);
}

/* =============================================================================
   CINEMATIC COURTROOM
   ========================================================================== */
.courtroom { padding: 0; height: 300vh; }
.courtroom__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.courtroom__scene { position: absolute; inset: 0; perspective: 1000px; }
.courtroom__light {
  position: absolute; left: 50%; top: -20%; width: 60vw; height: 120vh;
  transform: translateX(-50%) rotate(8deg);
  background: linear-gradient(180deg, rgba(170, 198, 240, 0.16), transparent 70%);
  filter: blur(40px);
}
.courtroom__bench {
  position: absolute; left: 50%; bottom: -6%; width: min(86vw, 1180px); height: 46vh;
  transform: translateX(-50%);
  /* A mask clips box-shadow too, so the outer shadow that used to soften the
     bench's top edge had to go — the fade is built into the fill instead. */
  background:
    linear-gradient(180deg, rgba(13, 31, 61, 0) 0, #0d1f3d 15%, #050f22 100%);
  /* Hard left/right borders made this read as a card rather than a bench
     receding into the room — mask the sides so it dissolves into the dark. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.courtroom__bench::after {
  content: ""; position: absolute; inset: 19% 8% auto 8%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(170,198,240,0.14), transparent);
}
.courtroom__dust { position: absolute; inset: 0; }
.courtroom__dust::before, .courtroom__dust::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(170,198,240,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(170,198,240,0.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(170,198,240,0.35), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(170,198,240,0.4), transparent);
  animation: dustDrift 22s linear infinite;
}
.courtroom__dust::after { animation-duration: 34s; animation-direction: reverse; opacity: 0.6; }
@keyframes dustDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-40px,-60px,0); }
}
.courtroom__text { position: relative; z-index: 3; text-align: center; }
.courtroom__line--lead {
  font-family: var(--serif); font-weight: 300; font-size: var(--step-3);
  color: var(--platinum); max-width: 22ch; margin-inline: auto;
}
.courtroom__words { display: flex; flex-direction: column; gap: 4px; margin-top: 8vh; }
.courtroom__words span {
  font-family: var(--serif); font-size: var(--step-3); color: var(--white); font-weight: 300;
  opacity: 0; transform: translateY(30px);
}

/* =============================================================================
   FLOATING DOCUMENTS
   ========================================================================== */
.docs__field {
  position: relative; height: 70vh; margin-top: 40px;
  perspective: 1200px;
  /* 0 = the scatter authored per-doc, 1 = collated. Driven by scroll; inherits
     down to each .doc, which interpolates between its two poses. */
  --c: 0;
  --step: clamp(66px, 8.4vw, 124px);
  --vstep: clamp(15px, 2.1vw, 30px);
}
/* Too narrow for a horizontal cascade — five cards would need more width than
   the screen has, and each tag ends up clipped by the next card. File them
   downward instead: every tag sits at the top of its own card, so a vertical
   offset leaves all five readable. */
@media (max-width: 700px) {
  .docs__field { --step: 0px; --vstep: clamp(46px, 12vw, 60px); }
}
/* Collated pose: a filed cascade rather than a squared pile, so every document
   stays legible and hoverable once the section has resolved. */
.doc:nth-child(1) { --sx: calc(var(--step) * -2); --sy: calc(var(--vstep) * -2); --sr: -1.5deg; }
.doc:nth-child(2) { --sx: calc(var(--step) * -1); --sy: calc(var(--vstep) * -1); --sr: 1deg; }
.doc:nth-child(3) { --sx: 0px;                    --sy: 0px;                     --sr: -0.6deg; }
.doc:nth-child(4) { --sx: var(--step);            --sy: var(--vstep);            --sr: 1.4deg; }
.doc:nth-child(5) { --sx: calc(var(--step) * 2);  --sy: calc(var(--vstep) * 2);  --sr: -1deg; }

[data-io].is-in .doc.mo-fade { animation: mo-fade 0.7s var(--ease) var(--d2, 0s) forwards; }
.doc {
  position: absolute; left: 50%; top: 50%;
  width: clamp(150px, 20vw, 230px); aspect-ratio: 3 / 4;
  /* Resolved once here so the hover rule can reuse the same position and only
     override the rotation and scale. */
  --tx: calc(var(--x) * (1 - var(--c)) + var(--sx, 0px) * var(--c));
  --ty: calc(var(--y) * (1 - var(--c)) + var(--sy, 0px) * var(--c));
  --tr: calc(var(--r) * (1 - var(--c)) + var(--sr, 0deg) * var(--c));
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) translate(var(--px, 0px), var(--py, 0px)) rotate(var(--tr));
  background: var(--doc-face);
  border: 1px solid var(--line);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.6s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.doc::before {
  content: ""; position: absolute; inset: 20px 20px auto 20px; height: 60%;
  background: repeating-linear-gradient(180deg, var(--line-soft) 0 1px, transparent 1px 14px);
}
.doc:hover {
  border-color: var(--silver);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) translate(var(--px, 0px), var(--py, 0px)) rotate(0deg) scale(1.06);
  z-index: 5;
}
.doc__tag { font-family: var(--serif); font-size: var(--step-0); color: var(--platinum); position: relative; z-index: 1; }
.doc__meta { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-dim); }
.docs__note { margin-top: 30px; font-size: var(--step--1); color: var(--silver-dim); }

/* =============================================================================
   OUR APPROACH — horizontal scroll
   ========================================================================== */
.approach { padding: 0; min-height: 100vh; }
.approach__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.approach.is-static .approach__pin { position: static; height: auto; padding-block: 90px; }
.approach.is-static .approach__track { flex-wrap: wrap; transform: none !important; }
.approach__head { position: absolute; top: clamp(90px, 14vh, 150px); left: 0; right: 0; }
.approach__head h2 { font-size: var(--step-3); color: var(--platinum); max-width: 16ch; }
.approach__track { display: flex; gap: clamp(30px, 6vw, 90px); padding-inline: var(--gutter); will-change: transform; }
.step {
  flex: 0 0 min(72vw, 420px);
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.step__no { font-family: var(--serif); font-size: var(--step-2); color: var(--silver-dim); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: var(--step-2); color: var(--white); margin: 10px 0 16px; }
.step p { color: var(--silver); font-weight: 300; max-width: 34ch; }
.step--final { display: grid; place-items: center; border: 0; flex-basis: min(72vw, 420px); }
.step--final h3 { font-size: var(--step-3); text-align: center; }
.approach__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(50px, 9vh, 90px); height: 1px; background: var(--line); }
.approach__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--silver), var(--accent)); }

/* =============================================================================
   TRUST
   ========================================================================== */
.trust__title { font-size: var(--step-3); color: var(--platinum); max-width: 24ch; margin-bottom: clamp(40px, 8vh, 80px); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trust__item { background: var(--surface); padding: clamp(24px, 4vw, 44px); }
.trust__item h3 { font-family: var(--serif); font-weight: 400; font-size: var(--step-1); color: var(--white); margin-bottom: 12px; }
.trust__item p { color: var(--silver); font-weight: 300; font-size: var(--step-0); }
.shots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 22px); margin-block: clamp(20px, 4vh, 40px) clamp(28px, 4vh, 48px);
}
.shots__item { margin: 0; }
.shots__item .photo { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.shots__item figcaption {
  margin-top: 12px; font-size: var(--step--1); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--silver-dim);
}
@media (max-width: 860px) { .shots { grid-template-columns: 1fr; } }

.trust__note { margin-top: 30px; font-size: var(--step--1); color: var(--silver-dim); max-width: 60ch; }

/* =============================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes__viewport { overflow: hidden; margin-top: 20px; }
.quotes__track { display: flex; will-change: transform; transition: transform 0.8s var(--ease); }
.quote {
  flex: 0 0 100%; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px;
}
.quote p {
  font-family: var(--serif); font-weight: 300; font-size: var(--step-3);
  color: var(--platinum); max-width: 20ch; line-height: 1.2;
}
.quote cite { font-style: normal; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-dim); }
.quotes__nav { display: flex; align-items: center; gap: 16px; margin-top: 50px; }
.quotes__btn { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; color: var(--silver); transition: color 0.3s, border-color 0.3s; }
.quotes__btn:hover { color: var(--white); border-color: var(--silver); }
.quotes__disclaimer { font-size: var(--step--1); color: var(--silver-dim); margin-left: auto; max-width: 40ch; }

/* =============================================================================
   INSIGHTS
   ========================================================================== */
.insights__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card {
  position: relative; background: var(--surface); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 18px; min-height: 320px;
  transition: background 0.5s var(--ease), transform 0.5s var(--ease);
}
.card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.card:hover { background: var(--surface-2); transform: translateY(-6px); }
.card:hover::after { transform: scaleX(1); }
.card__cat { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.card__title { font-family: var(--serif); font-weight: 400; font-size: var(--step-1); color: var(--platinum); margin-top: auto; }
.card__foot { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--silver-dim); }
.insights__note { margin-top: 24px; font-size: var(--step--1); color: var(--silver-dim); }

/* =============================================================================
   CONTACT
   ========================================================================== */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.contact__title { font-size: var(--step-4); color: var(--platinum); margin-bottom: 28px; }
.contact__lead .lede { margin-bottom: 48px; }
.contact__info { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact__info dt { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-dim); margin-bottom: 8px; }
.contact__info dd { color: var(--silver); font-weight: 300; }
.contact__info a:hover { color: var(--white); }

.contact__form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 2px; color: var(--white); transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--silver); }
.field select option { background: var(--navy); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger-line); }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step--1); color: var(--silver); }
.consent input { margin-top: 3px; accent-color: var(--accent); }
.privacy-note { font-size: var(--step--1); color: var(--silver-dim); max-width: 54ch; }
.privacy-note a { color: var(--silver); text-decoration: underline; text-underline-offset: 3px; }
.form-status { font-size: var(--step--1); min-height: 1.4em; }
.form-status.is-ok { color: var(--accent); }
.form-status.is-err { color: var(--danger); }

/* =============================================================================
   FINALE
   ========================================================================== */
.finale { padding: 0; height: 260vh; background: linear-gradient(180deg, transparent, var(--ink) 30%); }
.finale__pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.finale__text { text-align: center; position: relative; z-index: 3; }
.finale__name { font-size: var(--step-4); color: var(--white); opacity: 0; }
.finale__tag {
  font-size: var(--step--1); letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--silver); margin-top: 24px; opacity: 0;
}

/* =============================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; z-index: 2; background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(60px, 10vh, 120px); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.footer__brand .brand__name { font-size: 1.6rem; display: block; }
.footer__brand .brand__sub { font-size: 0.62rem; letter-spacing: 0.44em; text-transform: uppercase; color: var(--silver-dim); }
.footer__brand p { margin-top: 20px; color: var(--silver-dim); font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; }
.footer__col h4 { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-dim); margin-bottom: 18px; font-weight: 500; }
.footer__col a { display: block; padding-block: 6px; color: var(--silver); font-size: var(--step-0); transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--white); }
.footer__social { display: flex; flex-direction: column; }
.footer__base { margin-top: clamp(50px, 9vh, 90px); padding-top: 30px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.footer__disclaimer { color: var(--silver-dim); font-size: var(--step--1); max-width: 80ch; }
.footer__copy { color: var(--silver-dim); font-size: var(--step--1); }

/* =============================================================================
   REVEAL ANIMATION PRIMITIVES
   ========================================================================== */
.reveal-lines { }
.reveal-lines .line-inner { display: block; }
[data-reveal] { opacity: 0; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1120px) { .nav__cta { display: none; } }

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .about__grid { grid-template-columns: 1fr; }
  .about__lead { position: static; }
  .contact__grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .scales__grid { grid-template-columns: 1fr; }
  .scales__stage { max-width: 360px; }
  .panel { grid-template-columns: 50px 1fr; }
  .panel__icon { display: none; }
  .panel__desc { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --step-5: clamp(2.6rem, 12vw, 4rem); }
  .field-row { grid-template-columns: 1fr; }
  .contact__info { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .quotes__disclaimer { display: none; }
  .btn { white-space: normal; text-align: center; padding: 15px 22px; letter-spacing: 0.08em; font-size: 0.72rem; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .nav__cta { display: none; }
  .courtroom { height: 220vh; }
  .finale { height: 200vh; }
}

/* =============================================================================
   REDUCED MOTION — beautiful static experience
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .intro { display: none; }
  body.intro-lock { overflow: auto; height: auto; }
  .stage { display: none; }
  .stage-fallback { opacity: 1; }
  .cursor, .cursor-ring, .scroll-rail { display: none; }
  /* The blanket rule above zeroes durations but not DELAYS, so any piece built
     on the primitives would sit in its start pose for the length of its
     stagger. State the finished pose outright instead. */
  .mo-draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .mo-fade { opacity: 1 !important; animation: none !important; }
  .jscales__shaft { opacity: 1 !important; animation: none !important; }
  .ashield__glint { animation: none !important; opacity: 0 !important; }
  .about__chain span { opacity: 1 !important; transform: none !important; animation: none !important; }
  .about__chain i { transform: scaleX(1) !important; animation: none !important; }
  .about__chain i::after { opacity: 1 !important; animation: none !important; }
  .jscales__beam, .jscales__pan { transform: none !important; animation: none !important; }
  .hseal__bezel, .hseal__light { animation: none !important; }
  .hseal__dust, .hseal__ripple { display: none; }
  .js .about__photo { clip-path: none !important; }
  .photo img { transform: none !important; }
  .courtroom, .approach, .finale { height: auto; min-height: 0; }
  .courtroom__pin, .approach__pin, .finale__pin { position: static; height: auto; padding-block: clamp(90px, 16vh, 160px); }
  .approach__track { flex-wrap: wrap; transform: none !important; }
  .courtroom__scene { display: none; }
  .docs__field { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }
  .doc { position: static; transform: none !important; width: clamp(150px, 30vw, 210px); }
  .doc:hover { transform: none !important; }
  .courtroom {
    background:
      radial-gradient(1000px 500px at 50% 0%, rgba(170, 198, 240, 0.06), transparent 70%),
      linear-gradient(180deg, var(--ink), #061532 50%, var(--ink));
  }
  .panel__title { color: var(--platinum); }
  .courtroom__words span, .finale__name, .finale__tag, [data-reveal], .intro__brand { opacity: 1 !important; transform: none !important; }
  .panel__desc { max-height: none; opacity: 1; margin-top: 16px; }
  .hero__scroll-line::after { animation: none; }
}

/* Static fallback when the motion library is unavailable */
.courtroom.is-static, .finale.is-static, .approach.is-static { height: auto; min-height: 0; }
.approach.is-static .approach__progress { display: none; }
.courtroom.is-static .courtroom__pin,
.finale.is-static .finale__pin { position: static; height: auto; padding-block: clamp(90px, 16vh, 160px); }
.courtroom.is-static .courtroom__words span,
.finale.is-static .finale__name,
.finale.is-static .finale__tag { opacity: 1; transform: none; }
/* the atmospheric layer relies on a pinned containing block — drop it when unpinned */
.courtroom.is-static .courtroom__scene { display: none; }
.courtroom.is-static {
  background:
    radial-gradient(1000px 500px at 50% 0%, rgba(170, 198, 240, 0.06), transparent 70%),
    linear-gradient(180deg, var(--ink), #061532 50%, var(--ink));
}

/* Non-JS fallback */
.no-js .intro { display: none; }
.no-js .stage { display: none; }
.no-js .stage-fallback { opacity: 1; }
.no-js [data-reveal], .no-js .reveal-lines { opacity: 1; }