/* =============================================================================
   YOUR STUDIO — style.css
   Structure:
   01 Theme tokens        08 Hero               15 Process (stack)
   02 Reset & base        09 Global presence    16 Why us
   03 Typography          10 Featured work      17 Founder
   04 Utilities           11 Case study         18 Contact
   05 Components          12 Studio lab         19 Footer
   06 Preloader & cursor  13 Capabilities       20 Enquiry modal
   07 Header & menu       14 Team               21 Motion preferences
   ============================================================================= */

/* ----------------------------------------------------------------------------
   01 — THEME TOKENS
   ---------------------------------------------------------------------------- */

/* 1. Option A — Premium Dark (Default) */
:root,
[data-theme="premium-dark"],
[data-theme="dark"] {
  --bg-primary: #0A0A0A;
  --bg-surface: #111114;
  --bg-card-hover: #16161A;
  --text-primary: #F5F5F5;
  --text-secondary: #777777;
  --text-dim: #5E5E5E;
  --accent: #B8FF3D; /* Electric Lime - status dots, active states, button hover outlines */
  --accent-secondary: #B8FF3D;
  --border-subtle: rgba(245, 245, 245, 0.08);
  --border-strong: rgba(245, 245, 245, 0.16);
  --border-hover: rgba(245, 245, 245, 0.28);
  --glass-bg: rgba(10, 10, 10, 0.78);
  --on-accent: #0A0A0A;
  --accent-ink: var(--accent); /* accent used as small text */
  --dim-mix: 30%; /* strength of de-emphasised large text */
  --device-shell: #1A1A1E;
  /* Component tokens (overridden per theme) */
  --name-color: #FFFFFF;
  --role-color: #9E9EA4;
  --badge-bg: rgba(0, 0, 0, 0.5);
  --badge-fg: #FFFFFF;
  --badge-border: rgba(255, 255, 255, 0.12);
  --photo-vignette: rgba(0, 0, 0, 0.28);
  --device-shadow: rgba(0, 0, 0, 0.85);
  --card-shadow: rgba(0, 0, 0, 0.45);
  --mbp-shadow: 0 45px 90px -15px rgba(0, 0, 0, 0.95), 0 20px 35px -8px rgba(0, 0, 0, 0.8);
  --wm-stroke: rgba(255, 255, 255, 0.22);
  --wm-stroke-hover: rgba(255, 255, 255, 0.5);
  --wm-opacity: 0.9;
  /* Dot-matrix globe */
  --globe-land: #D4D4D4;               /* silver-grey points */
  --globe-land-min: 0.22;
  --globe-land-max: 0.78;
  --globe-grid: rgba(245, 245, 245, 0.07);
  --globe-sphere: rgba(245, 245, 245, 0.025);
  --globe-arc: #B8FF3D;
  --globe-pulse: #B8FF3D;
  color-scheme: dark;
}

/* 2. Option B — Editorial Warm Sand (High Contrast Edition) */
[data-theme="warm-sand"],
[data-theme="sand"] {
  --bg-primary: #EDEAE3;               /* Matte warm architectural paper base */
  --bg-surface: #E2DDD4;               /* Subtle elevated card surface */
  --bg-card-hover: #D7D1C6;            /* Interactive card hover */

  /* Typography - Razor Sharp Contrast */
  --text-primary: #121110;             /* Ultra-deep obsidian ink (100% crisp headings & body) */
  --text-secondary: #4A4642;           /* Deep warm charcoal for subtext & mono labels (no washed-out gray) */
  --text-dim: #6E6862;                 /* Smallest metadata */

  /* Accents & Outlines */
  --accent: #D9532F;                   /* Architectural Terracotta / Burnt Orange */
  --accent-secondary: #121110;         /* Solid black secondary accent */
  --border-subtle: rgba(18, 17, 16, 0.16);  /* Sharp, visible container borders */
  --border-strong: rgba(18, 17, 16, 0.28);
  --border-hover: rgba(18, 17, 16, 0.35);
  --glass-bg: rgba(237, 234, 227, 0.85);
  --on-accent: #121110;                /* ink on terracotta ≈ 4.7:1 (white would be ≈ 4.0:1) */
  --accent-ink: #A93C1A;               /* deeper terracotta for small text: ≈ 5.2:1 on paper */
  --dim-mix: 55%;                      /* dimmed headings stay ≥ 3:1 on paper */
  --device-shell: #121110;             /* dark, defined frames that pop on paper */

  --name-color: #121110;
  --role-color: #4A4642;
  --badge-bg: rgba(237, 234, 227, 0.86); /* paper glass: dark text stays legible over any photo */
  --badge-fg: #121110;
  --badge-border: rgba(18, 17, 16, 0.16);
  --photo-vignette: rgba(18, 17, 16, 0.14);
  --device-shadow: rgba(18, 17, 16, 0.38);
  --card-shadow: rgba(18, 17, 16, 0.14);
  --mbp-shadow: 0 45px 90px -15px rgba(18, 17, 16, 0.45), 0 20px 35px -8px rgba(18, 17, 16, 0.32);
  --wm-stroke: rgba(18, 17, 16, 0.28);
  --wm-stroke-hover: rgba(18, 17, 16, 0.6);
  --wm-opacity: 0.85;
  --globe-land: #121110;               /* deep ink points, 0.35–0.7 */
  --globe-land-min: 0.35;
  --globe-land-max: 0.7;
  --globe-grid: rgba(18, 17, 16, 0.08);
  --globe-sphere: rgba(18, 17, 16, 0.03);
  --globe-arc: #D9532F;
  --globe-pulse: #D9532F;
  color-scheme: light;
}

/* 3. Option C — Modern Tech (Preserved) */
[data-theme="modern-tech"],
[data-theme="tech"] {
  --bg-primary: #0B1020;
  --bg-surface: #11182E;
  --bg-card-hover: #151E38;
  --text-primary: #FFFFFF;
  --text-secondary: #8E9BB5;
  --text-dim: #66728C;
  --accent: #5C7CFF;
  --accent-secondary: #24D6C7;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-hover: rgba(255, 255, 255, 0.28);
  --glass-bg: rgba(11, 16, 32, 0.78);
  --on-accent: #FFFFFF;
  --device-shell: #161E36;
  --globe-land: #4FC3E8;               /* cyan points */
  --globe-land-min: 0.22;
  --globe-land-max: 0.85;
  --globe-grid: rgba(92, 124, 255, 0.13);
  --globe-sphere: rgba(92, 124, 255, 0.05);
  --globe-arc: #5C7CFF;                /* electric blue arcs */
  --globe-pulse: #24D6C7;              /* aqua pulses */
  color-scheme: dark;
}

:root {
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --container: 1680px;
  --header-h: 84px;
  --header-h-compact: 64px;
  --section-y: clamp(4rem, 8vw, 7rem); /* editorial rhythm: 64–112px per edge, so section seams stay ≤ 224px */
  --radius: 18px;
  --radius-sm: 10px;

  --surface-glass: var(--glass-bg);
  --text-faint: color-mix(in srgb, var(--text-primary) 45%, transparent);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-primary);
  scroll-padding-top: var(--header-h-compact);
  overflow-x: hidden; /* no horizontal page scroll, ever */
}
@supports (overflow-x: clip) {
  html {
    overflow-x: clip; /* same result without creating a scroll container (keeps position: sticky intact) */
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

html.is-locked,
html.is-locked body {
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   03 — TYPOGRAPHY
   ---------------------------------------------------------------------------- */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-size: clamp(2.5rem, 8.4vw, 10rem);
}

.display--xl {
  font-size: clamp(3rem, 10vw, 11rem);
  line-height: 0.88;
}

.display--lg {
  font-size: clamp(2.4rem, 7vw, 7.5rem);
}

.display--md {
  font-size: clamp(2rem, 4.6vw, 4.5rem);
  line-height: 0.95;
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
}

.display .serif {
  font-size: 1.08em;
  line-height: 0.8;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------------------------
   04 — UTILITIES
   ---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1300;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--bg-primary);
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus {
  transform: none;
}

/* Elements revealed on scroll start hidden only when JS is running */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
}
.js.no-motion [data-reveal],
.js.libs-failed [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
   05 — COMPONENTS
   ---------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}

.btn span[aria-hidden] {
  display: inline-block;
  transition: transform 0.5s var(--ease);
}
.btn:hover span[aria-hidden] {
  transform: translateX(4px);
}

.btn--solid {
  background: var(--text-primary);
  color: var(--bg-primary);
  border: 1px solid var(--text-primary);
}
.btn--solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 36px -6px var(--accent);
}

.btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.btn--ghost:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px -10px var(--accent);
}

.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.6875rem;
}

.btn--lg {
  min-height: 64px;
  padding: 0 34px;
  font-size: 0.8125rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tag--live {
  color: var(--text-primary);
}
.tag--sm {
  padding: 5px 10px;
  font-size: 0.5625rem;
}

.status-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  vertical-align: middle;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.link-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.6s var(--ease), color 0.3s;
  padding-bottom: 2px;
}
.link-line:hover,
.link-line:focus-visible {
  background-size: 100% 1px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-bottom: 22px;
  margin-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--border-subtle);
}
.section-num {
  color: var(--text-primary);
}
.section-head .tag {
  margin-left: auto;
}

/* ----------------------------------------------------------------------------
   06 — PRELOADER & CURSOR
   ---------------------------------------------------------------------------- */
/* Editorial preloader. Theme-aware (tokens are set in <head> before first paint); shown only when JS
   runs and removed from the DOM after the curtain lifts. GSAP drives the clip-path exit. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow: hidden;
  pointer-events: auto;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
}
.js .preloader {
  display: block;
}

.preloader__content {
  position: absolute;
  inset: 0;
  padding: clamp(16px, 3vw, 36px) var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Accent hairline that rides the curtain's lower edge during the exit (GSAP moves it with the clip) */
.preloader__edge {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 100%;
  height: 1px;
  transform: translateY(-100%);
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0;
}

/* Corner metadata: crisp 11px mono, quietly tracked */
.preloader__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.preloader__meta span:last-child {
  text-align: right;
}
.preloader__meta b {
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.preloader__meta b.is-ready {
  color: var(--accent-ink);
}

/* Centre: lockup → hairline → counter */
.preloader__center {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.preloader__lockup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.22em;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
}
/* Each word rises through its own mask */
.preloader__mask {
  display: inline-block;
  overflow: hidden;
  padding: 0.04em 0.08em 0.12em; /* room for the italic's overhang and descenders */
  margin: 0 -0.08em;
}
.preloader__word {
  display: inline-block;
  will-change: transform;
}
.preloader__word--sans {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.preloader__word--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em; /* optical match: the serif's x-height runs small beside tracked caps */
  letter-spacing: -0.01em;
}

/* Single 1px accent hairline + bracketed tabular counter */
.preloader__gauge {
  width: min(78vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.preloader__track {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  overflow: hidden;
}
.preloader__line {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.preloader__count {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.preloader__count span {
  color: var(--text-primary);
}

@media (max-width: 599px) {
  .preloader__meta {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
  }
  .preloader__meta span:last-child {
    text-align: left;
  }
  .preloader__meta--bottom {
    text-align: right;
    align-items: flex-end;
  }
  .preloader__meta--bottom span:last-child {
    text-align: right;
  }
}

/* Magnetic fluid cursor (desktop, fine pointer only). JS adds .has-cursor after the preloader. */
.kw-cursor,
.kw-cursor-dot {
  display: none;
}
.has-cursor .kw-cursor,
.has-cursor .kw-cursor-dot {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
  will-change: transform;
}
.kw-cursor {
  opacity: 0;
  transition: opacity 0.3s;
}
.kw-cursor.is-visible {
  opacity: 1;
}
/* The shape morphs (circle → hover → magnet outline → label pill) around the pointer position */
.kw-cursor__shape {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid color-mix(in srgb, var(--text-primary) 70%, transparent);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(1);
  transition:
    width 0.45s var(--ease), height 0.45s var(--ease), border-radius 0.45s var(--ease),
    border-color 0.3s, background-color 0.3s, transform 0.35s var(--ease), padding 0.45s var(--ease);
}
.kw-cursor.is-hover .kw-cursor__shape {
  width: 56px;
  height: 56px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.kw-cursor.is-soft .kw-cursor__shape {
  width: 72px;
  height: 72px;
  border-color: color-mix(in srgb, var(--text-primary) 45%, transparent);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.kw-cursor.is-magnet .kw-cursor__shape {
  /* width/height/radius are set inline to hug the hovered control */
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.kw-cursor.is-label .kw-cursor__shape {
  width: auto;
  min-width: 88px;
  height: 36px;
  padding: 0 16px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kw-cursor.is-down .kw-cursor__shape {
  transform: translate(-50%, -50%) scale(0.86);
}
.kw-cursor.is-text {
  opacity: 0;
}
.kw-cursor__label {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-primary);
}
.kw-cursor.is-label .kw-cursor__label {
  display: block;
}
.kw-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1.5px var(--bg-primary); /* halo keeps the dot visible on any theme or image */
  transition: opacity 0.2s;
}
.has-cursor.cursor-label-on .kw-cursor-dot,
.has-cursor.cursor-text-on .kw-cursor-dot {
  opacity: 0;
}
/* Never on touch devices */
@media (hover: none) and (pointer: coarse) {
  .kw-cursor,
  .kw-cursor-dot {
    display: none !important;
  }
}

.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor label {
  cursor: none;
}
.has-cursor input,
.has-cursor textarea {
  cursor: text;
}

/* ----------------------------------------------------------------------------
   07 — HEADER & MENU
   ---------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  /* Stacking: menu 900 < header 1000 < enquiry modal 1100 < cursor 1200 < skip link 1300 < preloader */
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s;
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: height 0.5s var(--ease);
}

.site-header.is-compact {
  background: var(--surface-glass);
  border-bottom-color: var(--border-subtle);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.site-header.is-compact .site-header__inner {
  height: var(--header-h-compact);
}
/* Menu open: the header becomes a solid, theme-coloured mask so scrolled menu links pass cleanly underneath */
.menu-open .site-header {
  background: var(--bg-primary);
  border-bottom-color: var(--border-subtle);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark {
  transition: transform 0.8s var(--ease);
}
.brand:hover .brand__mark {
  transform: rotate(-12deg) scale(1.08);
}

.status-pill {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
  white-space: nowrap;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Theme switcher — segmented control with sliding indicator.
   Phones show colour swatches; ≥768px shows DARK / TITANIUM / TECH labels. */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
  transition: border-color 0.4s var(--ease), background-color 0.6s var(--ease);
}
.theme-switch:hover {
  border-color: var(--border-strong);
}
.theme-switch__indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--ind-w, 0px);
  transform: translateX(var(--ind-x, 3px));
  border-radius: 999px;
  background: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px -6px var(--accent);
  transition: transform 0.55s var(--ease), width 0.55s var(--ease), background-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
  pointer-events: none;
}
.theme-switch.no-indicator-anim .theme-switch__indicator {
  transition: none;
}
.theme-switch__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  min-width: 32px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color 0.4s var(--ease);
}
.theme-switch__btn:hover {
  color: var(--text-primary);
}
.theme-switch__btn[aria-checked="true"] {
  color: var(--bg-primary);
}
.theme-switch__btn:focus-visible {
  outline-offset: 1px;
}
.theme-switch__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-fg) 50%);
  border: 1px solid var(--border-strong);
}
.theme-switch__label {
  display: none;
}
.theme-switch__btn[aria-checked="true"] .theme-switch__label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}

/* Interface sound toggle — SOUND [OFF] / SOUND [ON] */
.sound-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.sound-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.sound-toggle__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sound-toggle__state {
  min-width: 4.6ch; /* [Off] / [On] swap without shifting the header */
}
.sound-toggle[aria-pressed="true"] {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.sound-toggle[aria-pressed="true"] .sound-toggle__dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 2px var(--accent);
}
.sound-toggle[aria-pressed="true"] .sound-toggle__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@media (min-width: 600px) {
  .sound-toggle {
    display: inline-flex;
  }
}
/* 600–1023px: compact toggle (dot + state); the header CTA appears from 900px so nothing collides */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .site-header .sound-toggle {
    padding: 0 12px;
  }
  .site-header .sound-toggle .sound-toggle__label {
    display: none;
  }
}
.header-cta {
  display: none;
}
@media (min-width: 900px) {
  .header-cta {
    display: inline-flex;
  }
}
/* The menu copy is always visible (the header copy is hidden on phones) */
.sound-toggle--menu {
  display: inline-flex;
  height: 44px;
  padding: 0 18px;
  font-size: 0.6875rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 6px 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.4s var(--ease);
}
.menu-toggle:hover {
  border-color: var(--accent);
}
.menu-toggle__icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-primary);
}
.menu-toggle__icon i {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: var(--bg-primary);
  transition: transform 0.5s var(--ease), top 0.5s var(--ease);
}
.menu-toggle__icon i:first-child {
  top: 12px;
}
.menu-toggle__icon i:last-child {
  top: 18px;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child {
  top: 15px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child {
  top: 15px;
  transform: rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  visibility: hidden;
  pointer-events: none;
}
.menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.menu__panel {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  overflow-y: auto;
  overscroll-behavior: contain; /* scrolling the menu never chains to the page behind */
  -webkit-overflow-scrolling: touch;
  clip-path: inset(0 0 100% 0);
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 96px 96px;
}
.no-motion .menu.is-open .menu__panel,
.libs-failed .menu.is-open .menu__panel {
  clip-path: none;
}

.menu__grid {
  min-height: 100%;
  display: grid;
  gap: 48px;
  /* First link starts comfortably below the header (never less than header height + 24px) */
  padding-top: max(clamp(6rem, 14vh, 10rem), calc(var(--header-h) + 24px));
  padding-bottom: 40px;
}

.menu__nav ol li {
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
}
.menu__nav .mono {
  color: var(--text-secondary);
  min-width: 2ch;
}
.menu__link {
  font-size: clamp(2.1rem, 6.4vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transition: transform 0.6s var(--ease), color 0.4s;
}
.menu__nav a:hover .menu__link,
.menu__nav a:focus-visible .menu__link {
  transform: translateX(14px);
  color: var(--accent);
}

.menu__aside {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.menu__block .eyebrow {
  margin-bottom: 14px;
}

.theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s;
}
.theme-option:hover {
  border-color: var(--border-strong);
}
.theme-option[aria-checked="true"] {
  border-color: var(--accent);
}
.theme-option__chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--chip-bg) 50%, var(--chip-fg) 50%);
  border: 1px solid var(--border-strong);
}

.clocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.clock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clock__city,
.clock__offset {
  color: var(--text-secondary);
}
.clock__offset {
  font-size: 0.5625rem;
}
.clock__time {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.menu__email {
  display: inline-block;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.menu__cta {
  display: flex;
  width: fit-content;
}

/* ----------------------------------------------------------------------------
   08 — HERO
   ---------------------------------------------------------------------------- */
/* Exactly one viewport: meta + headline at the top, lede + CTAs pinned to the bottom edge */
.hero {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  height: 100vh;
  min-height: 100svh;
  height: 100svh; /* mobile: excludes the collapsing browser toolbar */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* never less than the fixed header height + a little air */
  padding-top: max(clamp(5rem, 10vh, 7rem), calc(var(--header-h) + 16px));
  padding-bottom: clamp(2rem, 4vh, 3rem);
  isolation: isolate;
  overflow: hidden;
}
/* Short or narrow screens: keep 100svh as the minimum but let content grow rather than clip */
@media (max-height: 640px), (max-width: 599px) {
  .hero {
    height: auto;
  }
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__canvas canvas {
  width: 100% !important;
  height: 100% !important;
}
.hero__canvas.is-static {
  background-image: radial-gradient(color-mix(in srgb, var(--text-primary) 30%, transparent) 1px, transparent 1.3px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%);
  mask-image: linear-gradient(to top, #000 10%, transparent 70%);
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg-primary) 0%, transparent 28%, transparent 62%, var(--bg-primary) 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, color-mix(in srgb, var(--bg-primary) 70%, transparent) 100%);
}

.hero__content {
  position: relative;
  flex: 1; /* fills the viewport frame; the hero's own padding provides the edges */
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-secondary);
}

/* Balanced editorial scale: three explicit lines (see index.html) instead of four heavy ones */
.hero__title {
  font-size: clamp(2.5rem, 5.2vw, 5.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  margin-top: clamp(16px, 4vh, 44px); /* clear the (KW) meta row above */
  margin-bottom: 2rem !important;
}
.hero__title .line__inner {
  text-wrap: balance; /* if a line must wrap on small screens, split it evenly */
}
@media (max-width: 767.98px) {
  .hero__title {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }
}
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.line__inner {
  display: block;
  will-change: transform;
}
.hero__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.01em;
}

.hero__bottom {
  margin-top: auto; /* pinned to the bottom boundary of the 100vh frame */
  display: grid;
  gap: 28px;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border-subtle);
}

.hero__lede {
  max-width: 44ch;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  color: var(--text-secondary);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scroll-indicator {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(140px, 22vh, 220px);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}
.scroll-indicator .mono {
  writing-mode: vertical-rl;
}
.scroll-indicator__track {
  position: relative;
  width: 1px;
  height: 64px;
  background: var(--border-strong);
  overflow: hidden;
}
.scroll-indicator__track span {
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--accent);
  animation: scroll-cue 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  to {
    top: 120%;
  }
}

/* ----------------------------------------------------------------------------
   09 — GLOBAL PRESENCE
   ---------------------------------------------------------------------------- */
.global {
  padding-top: clamp(48px, 6vw, 88px); /* flows straight on from the 100vh hero */
  overflow: hidden;
}

.global__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.global__head {
  margin-bottom: 0;
}

.global__col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.global__big {
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.global__big .serif {
  text-transform: none;
}
.global__small {
  margin-top: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.global__globe {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
}
#globe-canvas {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  cursor: grab;
  touch-action: pan-y; /* horizontal drag rotates; vertical swipe still scrolls the page */
  -webkit-user-select: none;
  user-select: none;
}
#globe-canvas.is-dragging {
  cursor: grabbing;
}
.global__legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 0.5625rem;
}
.global__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
}
.legend-dot--accent {
  background: var(--globe-arc);
  box-shadow: 0 0 8px var(--globe-arc);
}
.legend-line {
  width: 18px;
  height: 1px;
  background: var(--globe-arc);
}

.marquee {
  margin-top: var(--section-y);
  border-block: 1px solid var(--border-subtle);
  padding-block: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__group span {
  padding-inline: clamp(18px, 3vw, 40px);
  font-size: clamp(1.25rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__group i {
  font-style: normal;
  color: var(--accent);
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
}
@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ----------------------------------------------------------------------------
   10 — FEATURED WORK (DEVICES)
   ---------------------------------------------------------------------------- */
/* Pinned stage: exactly one viewport tall; script.js pins .work__pin and scrubs the 3D timeline. */
.work {
  position: relative;
}
.work__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  padding-top: calc(var(--header-h-compact) + 14px);
  background:
    radial-gradient(70% 60% at 50% 72%, color-mix(in srgb, var(--bg-surface) 95%, transparent) 0%, var(--bg-primary) 70%);
}

.work__head {
  margin-bottom: 0;
  padding-bottom: 14px;
}
/* Narrowest phones only: let the long project tag wrap instead of running past the gutter */
@media (max-width: 359.98px) {
  .work__head .tag {
    max-width: 100%;
    white-space: normal;
  }
}

/* Titles (left) + meta (right) float above the stage */
.work__overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h-compact) + 84px);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  pointer-events: none;
}
.work__titles {
  position: relative;
}
.wt {
  margin: 0;
  font-size: clamp(2.2rem, 6.6vw, 7.75rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wt + .wt {
  position: absolute;
  left: 0;
  top: 0;
}
.wt .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.wt .line > span {
  display: block;
  will-change: transform;
}
.wt .serif {
  font-size: 1.08em;
  line-height: 0.8;
}
/* Before JS runs (and in the static fallback) only the first title shows */
.wt--2 .line > span,
.wt--3 .line > span {
  transform: translateY(110%);
}

.work__meta {
  display: none;
  margin: 0;
  gap: 16px;
  text-align: right;
}
.work__meta dd {
  margin: 4px 0 0;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 3D stage */
.stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-top: 24vh;
  perspective: 1300px;
  perspective-origin: 50% 35%;
}
.stage__floor {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 8%;
  height: 22%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--text-primary) 7%, transparent), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.scene {
  --lw: min(64vw, 52vh);
  position: relative;
  width: var(--lw);
  height: calc(var(--lw) * 0.625);
  transform-style: preserve-3d;
  /* Static pose (reduced motion / no GSAP); script.js takes over with inline transforms.
     Negative rotateX = camera above the table, looking down onto the deck. */
  transform: rotateX(-18deg) rotateY(-2deg); /* = the animated end pose, so focus poses match */
}
.d3 {
  position: absolute;
  transform-style: preserve-3d;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: var(--bg-primary);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============ 16" pro notebook — space gray aluminium ============
   Real-chassis proportions: the deck is as deep as the display is tall and exactly as wide as the lid.
   The lid hinges on its bottom edge; the deck folds 90deg toward the viewer (the "table" plane).
   Space gray reads against every theme: lighter than the Dark/Tech page, darker than Warm Sand. */
.laptop {
  --al-hi: #A7A8AC; /* anodised aluminium: highlight → body → shade */
  --al: #8D8E92;
  --al-lo: #6F7074;
  inset: 0;
}
.laptop__lid {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(18deg); /* lid open ~108deg */
}
.laptop__bezel,
.laptop__back {
  position: absolute;
  inset: 0;
  border-radius: 14px 14px 4px 4px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Front: black glass, ultra-thin uniform bezels, framed by the aluminium rim */
.laptop__bezel {
  padding: 1.15%;
  background: #050506;
  box-shadow:
    inset 0 0 0 1.5px var(--al-lo),
    inset 0 1px 0 1.5px rgba(255, 255, 255, 0.28),
    var(--mbp-shadow);
}
.laptop__bezel .screen {
  border-radius: 9px 9px 2px 2px;
}
/* Lid's lower aluminium edge: separates the display glass from the hinge barrel below it */
.laptop__bezel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.1%; /* inside the 1.15% bottom bezel — never over the screen */
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, var(--al-hi), var(--al-lo));
  pointer-events: none;
}
/* Camera notch cut into the top bezel */
.laptop__notch {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 7.2%;
  height: 3.4%;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: #050506;
}
.laptop__notch i {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 11%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3A4A5C 0%, #111821 55%, #05070A 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Studio light reflection across the glass — never blocks the UI underneath */
.device-glare {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 28%, transparent 55%);
}
.laptop__glare {
  inset: 1.15%;
  border-radius: 9px 9px 2px 2px;
}
/* Back of the lid: bead-blasted space gray with the studio mark */
.laptop__back {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--al-hi) 0%, var(--al) 55%, var(--al-lo) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.45);
  transform: rotateY(180deg) translateZ(1px);
}
.laptop__back svg {
  width: 11%;
}

/* Deck (top case) */
.laptop__base {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100%;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  transform-style: preserve-3d;
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--al-hi) 0%, var(--al) 55%, var(--al-lo) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    var(--mbp-shadow); /* falls on the "table" plane: front-edge and hinge contact shadow */
}
/* Display hinge: dark barrel across the rear of the deck, directly under the screen */
.laptop__base::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0.6%;
  height: 4.6%;
  border-radius: 999px;
  background: linear-gradient(180deg, #08080A 0%, #222326 30%, #4A4B50 55%, #2A2B2E 75%, #0E0E10 100%);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.35), /* machined lip where the barrel meets the lid */
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.35);
}
/* Recessed keyboard well */
.mbp-keys {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 6.5%;
  height: 46%;
  padding: 0.8% 0.9%;
  border-radius: 1.4% / 3%;
  background: #18181A;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.22);
}
.mbp-keys__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mbp-keys__svg rect {
  fill: #0B0B0D;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.5;
}
.mbp-keys__svg rect.mbp-touchid {
  fill: #16161A;
  stroke: rgba(255, 255, 255, 0.2);
}
.mbp-keys__svg text {
  fill: #E6E7EA;
  font-family: var(--font-sans);
  font-size: 8.6px;
  font-weight: 600;
  dominant-baseline: central;
}
.mbp-keys__svg text.mbp-legend--sm {
  font-size: 5.2px;
  fill: #C4C5C9;
}
/* Speaker grilles — micro-dot perforation either side of the keyboard */
.mbp-speaker {
  position: absolute;
  top: 6.5%;
  height: 46%;
  width: 7.2%;
  border-radius: 3px;
  background-image: radial-gradient(circle, rgba(10, 10, 12, 0.7) 0 0.75px, transparent 0.95px);
  background-size: 3.4px 3.4px;
}
.mbp-speaker--l {
  left: 2.4%;
}
.mbp-speaker--r {
  right: 2.4%;
}
/* Force Touch trackpad: glass, a shade lighter than the deck */
.mbp-trackpad {
  position: absolute;
  left: 27.5%;
  right: 27.5%;
  top: 57%;
  bottom: 7%;
  border-radius: 2.4% / 5%;
  background: linear-gradient(180deg, #A4A5A9, #96979B);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Front lip facing the viewer, with the thumb scoop */
.laptop__lip {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3.2%;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--al), #55565A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.mbp-scoop {
  position: absolute;
  left: 50%;
  top: 0;
  width: 13%;
  height: 60%;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #45464A, #5E5F63);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

/* Contact shadows: soft ellipses lying on the table plane under the standing tablet and phone */
.tablet::before,
.phone::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: calc(100% + 1px); /* 1px under the table plane so the laptop deck always wins the depth test */
  height: 34%;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  background: radial-gradient(closest-side, var(--device-shadow), transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* ============ Pro tablet (flat edges) — left, behind the laptop ============ */
.tablet {
  width: calc(var(--lw) * 0.33);
  height: calc(var(--lw) * 0.44);
  left: calc(var(--lw) * -0.46); /* right edge sits just left of the laptop — no overlap, even mid-swing */
  bottom: 0; /* stands on the table plane, behind the hinge */
  transform: translateZ(-70px) rotateY(14deg); /* = the animated end pose */
}
.tablet__bezel {
  position: absolute;
  inset: 0;
  padding: 3.4%;
  border-radius: 7% / 5.25%;
  background: #040405;
  box-shadow:
    0 0 0 1.5px #2B2B2F,
    0 0 0 2.5px #141416,
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 70px -20px var(--device-shadow);
}
.tablet__bezel .screen {
  border-radius: 4.2% / 3.1%;
}
.tablet__cam {
  position: absolute;
  z-index: 3;
  right: 1.2%;
  top: 50%;
  width: 1.3%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34414F, #07090C 70%);
}
.tablet__bezel .device-glare {
  inset: 3.4%;
  border-radius: 4.2% / 3.1%;
}

/* ============ Pro phone (titanium frame, Dynamic Island) — right, foreground ============ */
.phone {
  width: calc(var(--lw) * 0.17);
  height: calc(var(--lw) * 0.37); /* ~2.17:1, the real handset ratio */
  right: calc(var(--lw) * -0.25); /* clear of the deck's perspective-widened front corner at every size */
  bottom: 0;
  transform: translateZ(210px) rotateY(-16deg); /* = the animated end pose */
}
.phone__bezel {
  position: absolute;
  inset: 0;
  padding: 4.2%;
  border-radius: 17% / 8.2%;
  background: #040405;
  /* two-tone titanium band around the black glass */
  box-shadow:
    0 0 0 1.5px #A29E96,
    0 0 0 3px #57544F,
    0 0 0 3.5px #2A2927,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 60px -16px var(--device-shadow);
}
.phone__bezel .screen {
  border-radius: 13.5% / 6.4%;
}
.phone__bezel .device-glare {
  inset: 4.2%;
  border-radius: 13.5% / 6.4%;
}
.phone__notch {
  position: absolute;
  z-index: 3;
  top: 3.6%;
  left: 50%;
  width: 31%;
  height: 3.3%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.phone__notch i {
  position: absolute;
  right: 9%;
  top: 50%;
  height: 62%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2E3B49, #050608 70%);
}
/* Titanium side buttons */
.phone__btn {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6E6B66, #A29E96);
}
.phone__btn--action { left: -4.5px; top: 17%; height: 5%; }
.phone__btn--vol-up { left: -4.5px; top: 25%; height: 8%; }
.phone__btn--vol-down { left: -4.5px; top: 35%; height: 8%; }
.phone__btn--power { right: -4.5px; top: 27%; height: 12%; background: linear-gradient(90deg, #A29E96, #6E6B66); }

/* ============ Device focus system ============
   .scene[data-focus] (0 desktop · 1 tablet · 2 mobile) selects a pose for each .dfocus wrapper.
   Wrappers move with transform only (GPU), easing on the site's --ease curve; --focus (0 → 1) is a
   registered number, so emphasis (screen brightness, contact shadow, screen glow) eases with the move.
   The devices inside keep their own intro animation; the wrapper's idle float uses the separate
   `translate` property, so focus, float and intro never fight over the same transform. */
@property --focus {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Section-scoped lighting per theme: only shadow temperature, glow and ambient strength change.
   The theme palettes themselves are untouched. */
.work {
  --glow-k: 0.14; /* Dark: subtle green screen glow */
  --ambient-k: 0.07;
}
[data-theme="warm-sand"] .work {
  --device-shadow: rgba(84, 56, 32, 0.34); /* warm, soft paper shadows */
  --mbp-shadow: 0 45px 90px -15px rgba(84, 56, 32, 0.38), 0 20px 35px -8px rgba(66, 44, 24, 0.3);
  --glow-k: 0.07;
  --ambient-k: 0.05;
}
[data-theme="tech"] .work {
  --device-shadow: rgba(2, 6, 24, 0.88); /* navy-tinted shadows */
  --mbp-shadow: 0 45px 90px -15px rgba(2, 6, 24, 0.95), 0 20px 35px -8px rgba(2, 6, 24, 0.8);
  --glow-k: 0.16;
  --ambient-k: 0.1;
}

/* Ambient light pooled behind the devices, in the theme accent; cross-fades with the theme */
.stage__ambient {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 34%;
  bottom: 4%;
  background-color: var(--accent);
  opacity: var(--ambient-k);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
  transition: background-color 0.6s var(--ease), opacity 0.6s var(--ease);
  pointer-events: none;
}

.dfocus {
  --focus: 0;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.25s var(--ease), --focus 1.25s var(--ease);
  animation: dev-float 6.5s ease-in-out infinite;
}
.dfocus--tablet {
  animation-duration: 7.4s;
  animation-delay: -2.4s;
}
.dfocus--phone {
  animation-duration: 5.8s;
  animation-delay: -1.1s;
}
@keyframes dev-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--lw, 400px) * -0.009); }
}

/* Emphasis follows --focus: inactive screens sit back under a light shade, the active one is crisp.
   An overlay (opacity only) rather than a filter: the screens hold running animations, and a filtered
   layer would repaint with every frame of them. */
.dfocus .screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--screen-shade);
  opacity: calc(1 - var(--focus));
}
.work {
  --screen-shade: rgba(0, 0, 0, 0.24);
}
[data-theme="warm-sand"] .work {
  --screen-shade: rgba(18, 17, 16, 0.14);
}
[data-theme="tech"] .work {
  --screen-shade: rgba(2, 6, 24, 0.28);
}
/* Nothing in the section animates while it is off screen (Devices toggles .is-offscreen) */
.work.is-offscreen .dfocus,
.work.is-offscreen .nx *,
.work.is-offscreen .nx *::after {
  animation-play-state: paused;
}
.dfocus .tablet::before,
.dfocus .phone::before {
  opacity: calc(0.4 + 0.55 * var(--focus));
}
/* Screen glow in the theme accent (never on the chassis) + focus-weighted drop shadows */
.dfocus .laptop__bezel {
  box-shadow:
    inset 0 0 0 1.5px var(--al-lo),
    inset 0 1px 0 1.5px rgba(255, 255, 255, 0.28),
    var(--mbp-shadow),
    0 0 calc(var(--lw) * 0.1) calc(var(--lw) * -0.02) color-mix(in srgb, var(--accent) calc(var(--focus) * var(--glow-k) * 100%), transparent);
}
.dfocus .tablet__bezel {
  box-shadow:
    0 0 0 1.5px #2B2B2F,
    0 0 0 2.5px #141416,
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 70px -20px color-mix(in srgb, var(--device-shadow) calc(55% + 45% * var(--focus)), transparent),
    0 0 calc(var(--lw) * 0.08) calc(var(--lw) * -0.015) color-mix(in srgb, var(--accent) calc(var(--focus) * var(--glow-k) * 100%), transparent);
}
.dfocus .phone__bezel {
  box-shadow:
    0 0 0 1.5px #A29E96,
    0 0 0 3px #57544F,
    0 0 0 3.5px #2A2927,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 60px -16px color-mix(in srgb, var(--device-shadow) calc(55% + 45% * var(--focus)), transparent),
    0 0 calc(var(--lw) * 0.07) calc(var(--lw) * -0.012) color-mix(in srgb, var(--accent) calc(var(--focus) * var(--glow-k) * 100%), transparent);
}
/* Glass reflections carry a faint tint of the scene's ambient light */
.dfocus .device-glare {
  background: linear-gradient(
    130deg,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 14%, #fff) 9%, transparent) 0%,
    rgba(255, 255, 255, 0.02) 28%,
    transparent 55%
  );
}

/* Lid thickness: the back panel sits ~1% of the lid width behind the glass, and the aluminium top
   edge between them is visible from the camera's slightly elevated position */
.laptop__back {
  transform: rotateY(180deg) translateZ(calc(var(--lw) * 0.01));
}
.laptop__lid::after {
  content: "";
  position: absolute;
  left: 0.6%;
  right: 0.6%;
  top: 0;
  height: calc(var(--lw) * 0.01);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--al-hi), var(--al));
}

/* Theme switch: the screen UI cross-fades with the page (zero specificity — never overrides an
   element's own transition) */
:where(.scene .nx, .scene .nx *) {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 0.6s;
  transition-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .dfocus {
    transition: none;
    animation: none;
  }
}

/* Footer row: device steps · note · CTA */
.work__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3vw, 32px);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 32px;
}
.work__steps {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.work__steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.5s var(--ease);
}
.work__steps li .mono {
  padding: 3px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  letter-spacing: 0.04em;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.work__steps li.is-active {
  color: var(--text-primary);
}
.work__steps li.is-active .mono {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}
/* Selector buttons inherit the step typography; the li carries .is-active */
.work__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.4s var(--ease);
}
.work__step:hover {
  color: var(--text-primary);
}
.work__step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.work__note {
  display: none;
  max-width: 40ch;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
  justify-self: center;
}

/* Stage 3 "component layers": dashed outlines fade in on the screen UI as --wire goes 0 → 1 */
.scene {
  --wire: 0;
}
/* Laptop only: at tablet/phone scale the dashed outlines read as clutter, not structure */
.laptop .nx__bar,
.laptop .nx__side,
.laptop .nx__head,
.laptop .nx__hero,
.laptop .nx__kpi,
.laptop .nx__row,
.laptop .nx__controls {
  outline: 1px dashed color-mix(in srgb, var(--accent) calc(var(--wire) * 55%), transparent);
  outline-offset: 0.6cqi;
}

/* ≥1024px: pinned 3D stage */
@media (min-width: 1024px) {
  .scene {
    /* Viewed from above, the group (lid + deck + side devices) is ~1.05 lw tall and ~1.9 lw wide */
    --lw: min(38vw, 580px, 52vh);
    /* The deck hangs ~0.4 lw below the screen box the grid centres, so lift the box to centre the whole group.
       (top, not transform: GSAP owns the scene's transform) */
    top: calc(var(--lw) * -0.08);
  }
  /* Device focus poses (x / depth in --lw units). The active device comes forward and grows slightly;
     the others step back and shrink a touch but stay fully visible. Rotation stays within ±6deg. */
  .dfocus--laptop {
    /* scale from the deck's FRONT edge (deck depth = 0.625 lw toward the viewer), so emphasis grows the
       laptop up and back instead of pushing its front edge down toward the footer */
    transform-origin: 50% 100% calc(var(--lw) * 0.625);
  }
  .dfocus--tablet {
    transform-origin: -29.5% 100%; /* the tablet's own foot (it sits left of the scene box) */
  }
  .dfocus--phone {
    transform-origin: 116.5% 100%;
  }
  .scene[data-focus="0"] .dfocus--laptop {
    --focus: 1;
    transform: translate3d(0, 0, 0) scale(1.04); /* grows from its feet: emphasis without pushing the deck toward the footer */
  }
  .scene[data-focus="0"] .dfocus--tablet,
  .scene[data-focus="0"] .dfocus--phone {
    transform: translate3d(0, 0, calc(var(--lw) * -0.08)) scale(0.95);
  }
  /* Focus 1 / 2: the active device moves to the front-centre slot — forward past the front edge of the
     deck (so it never intersects it), lifted a touch, turned square to the viewer — while the laptop
     steps back. Centred, it also clears the left-aligned headline. */
  .scene[data-focus="1"] .dfocus--laptop {
    /* steps back AND right: receding objects rise on screen, and headline line 2 is the widest */
    transform: translate3d(calc(var(--lw) * 0.24), 0, calc(var(--lw) * -0.3)) scale(0.9);
  }
  .scene[data-focus="1"] .dfocus--tablet {
    --focus: 1;
    transform: translate3d(calc(var(--lw) * 0.8), calc(var(--lw) * -0.05), calc(var(--lw) * 0.72)) rotateY(-12deg) scale(1.12);
  }
  .scene[data-focus="1"] .dfocus--phone {
    transform: translate3d(calc(var(--lw) * 0.2), 0, calc(var(--lw) * -0.14)) scale(0.92);
  }
  .scene[data-focus="2"] .dfocus--laptop {
    transform: translate3d(calc(var(--lw) * -0.05), 0, calc(var(--lw) * -0.3)) scale(0.9);
  }
  .scene[data-focus="2"] .dfocus--tablet {
    transform: translate3d(calc(var(--lw) * -0.02), 0, calc(var(--lw) * -0.2)) scale(0.9);
  }
  .scene[data-focus="2"] .dfocus--phone {
    --focus: 1;
    transform: translate3d(calc(var(--lw) * -0.62), calc(var(--lw) * -0.1), calc(var(--lw) * 0.2)) rotateY(14deg) scale(1.38);
  }  .stage {
    padding-top: 12vh;
  }
  .work__meta {
    display: grid;
  }
  .work__foot {
    grid-template-columns: auto 1fr auto;
  }
  .work__note {
    display: block;
  }
}

/* Short desktop viewports (e.g. 1366×700, 1280×720): the deeper deck and ~20° camera pitch need more
   vertical room, so the scene scales from a smaller share of the height to clear the headline above. */
@media (min-width: 1024px) and (max-height: 760px) {
  .scene {
    --lw: min(38vw, 560px, 48vh);
  }
}

/* Narrow desktops: the headline column reaches further across, so the tablet tucks in slightly
   (still a clear gap from the laptop) to stay off the "& built." line */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .tablet {
    left: calc(var(--lw) * -0.415);
  }
  .dfocus--tablet {
    transform-origin: -25% 100%;
  }
}

/* <1024px: no pin. The three devices share one stage: the active device is centred and dominant,
   the other two sit partly behind it on either side (smaller, dimmer, farther back). The selector,
   swipes and scroll position all move focus. Sized in container units of the stage, so it scales
   from tablet down to phone without a horizontal scroll. */
@media (max-width: 1023.98px) {
  .work__pin {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-top: clamp(64px, 10vw, 96px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }
  .work__overlay {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
    pointer-events: auto;
  }
  .wt {
    white-space: normal;
    font-size: clamp(2.1rem, 9vw, 4.5rem);
  }
  .work__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    text-align: left;
  }
  .stage {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: clamp(300px, 84vw, 560px);
    padding: 0;
    margin-top: clamp(20px, 4vw, 40px);
    perspective: 1100px;
    perspective-origin: 50% 40%;
    container-type: inline-size;
    overflow-x: clip; /* inactive devices may peek at the edges; the page never scrolls sideways */
    touch-action: pan-y; /* vertical scrolling stays native; horizontal swipes change device */
  }
  .stage__floor {
    left: 8%;
    right: 8%;
    bottom: 4%;
    height: 20%;
  }
  .stage__ambient {
    left: 8%;
    right: 8%;
    top: 18%;
    bottom: 0;
  }
  .scene {
    position: absolute;
    inset: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
  }
  .dfocus {
    inset: auto;
    left: 50%;
    bottom: 12%;
    width: var(--dw);
    margin-left: calc(var(--dw) / -2);
    transform-origin: 50% 100%;
  }
  .dfocus--laptop {
    --dw: min(66cqi, 520px); /* leaves room for the tablet and phone to show past its edges */
  }
  .dfocus--tablet {
    --dw: min(40cqi, 290px);
  }
  .dfocus--phone {
    --dw: min(24cqi, 175px);
  }
  .d3 {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none !important;
    transform-style: flat;
    opacity: 1 !important;
  }
  .laptop {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .laptop__lid {
    transform: none !important;
  }
  .laptop__back,
  .laptop__lid::after {
    display: none;
  }
  /* Flat front view: the deck reads as the front lip, thumb scoop centred */
  .laptop__base {
    top: 100%;
    left: -4%;
    right: -4%;
    height: 12px;
    transform: none;
    transform-style: flat;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 30px -12px var(--device-shadow);
  }
  .laptop__base::before,
  .laptop__base i,
  .mbp-keys,
  .mbp-speaker,
  .mbp-trackpad,
  .tablet::before,
  .phone::before {
    display: none;
  }
  .laptop__lip {
    top: 0;
    height: 100%;
    transform: none;
  }
  .mbp-scoop {
    width: 16%;
  }
  .tablet {
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .phone {
    height: auto;
    aspect-ratio: 9 / 19.5;
  }
  .screen {
    clip-path: none !important;
  }

  /* Poses: active centred and forward; inactive partly behind on either side */
  .scene[data-focus="0"] .dfocus--laptop {
    --focus: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  .scene[data-focus="0"] .dfocus--tablet {
    transform: translate3d(-36cqi, 0, -160px) rotateY(10deg) scale(0.66);
  }
  .scene[data-focus="0"] .dfocus--phone {
    transform: translate3d(37cqi, 0, -160px) rotateY(-10deg) scale(0.7);
  }
  .scene[data-focus="1"] .dfocus--tablet {
    --focus: 1;
    transform: translate3d(0, 0, 0) scale(1.14);
  }
  .scene[data-focus="1"] .dfocus--laptop {
    transform: translate3d(27cqi, 0, -200px) rotateY(-10deg) scale(0.5);
  }
  .scene[data-focus="1"] .dfocus--phone {
    transform: translate3d(-31cqi, 0, -160px) rotateY(10deg) scale(0.7);
  }
  .scene[data-focus="2"] .dfocus--phone {
    --focus: 1;
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  .scene[data-focus="2"] .dfocus--laptop {
    transform: translate3d(-27cqi, 0, -200px) rotateY(10deg) scale(0.5);
  }
  .scene[data-focus="2"] .dfocus--tablet {
    transform: translate3d(30cqi, 0, -160px) rotateY(-10deg) scale(0.62);
  }

  .work__foot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 4px;
    grid-template-columns: 1fr auto;
  }
  .work__steps {
    grid-column: 1 / -1; /* the selector gets its own full-width row */
    justify-content: space-between;
  }
  .work__step {
    min-height: 40px; /* comfortable tap target */
  }
  .work__note {
    display: block;
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 52ch;
    text-align: left;
  }
  .work__cta {
    min-height: 36px;
    padding: 0 14px;
  }
}

.work__intro,
.lab__intro,
.team__intro,
.process__intro {
  display: grid;
  gap: 28px;
  align-items: end;
}
.work__lede,
.lab__lede,
.team__lede,
.process__lede,
.case__lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--text-secondary);
}

/* Product UI inside the device screens — "Nexus-OS" concept dashboard.
   Everything is sized from --u (a container-query unit relative to each screen), so the
   same markup renders crisply as the desktop dashboard, the tablet view and the phone app. */
.cui {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene .cui {
  bottom: auto;
  min-height: 100%;
}
.nx {
  --u0: 1cqi; /* desktop: 1u = 1% of the screen width (× --fit, see Device layouts) */
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 2.4);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background:
    radial-gradient(120% 60% at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}
.nx b,
.nx em {
  font-style: normal;
}

/* Mono micro-label */
.nx__label,
.nx__kicker,
.nx__crumbs,
.nx__concept,
.nx__region,
.nx__time,
.nx__state,
.nx__axis,
.nx__build,
.nx__row--head,
.nx__toggle,
.nx__tag,
.nx__live,
.nx__nav,
.nx__status {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 1.32);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Phone status bar (phone layout only) */
.nx__status {
  display: none;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nx__sig {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(var(--u) * 0.35);
}
.nx__sig i {
  width: calc(var(--u) * 0.45);
  border-radius: 1px;
  background: currentColor;
}
.nx__sig i:nth-child(1) { height: calc(var(--u) * 0.6); }
.nx__sig i:nth-child(2) { height: calc(var(--u) * 0.9); }
.nx__sig i:nth-child(3) { height: calc(var(--u) * 1.2); }
.nx__sig i:nth-child(4) { height: calc(var(--u) * 1.5); }
.nx__sig svg {
  width: calc(var(--u) * 2.6);
  margin-left: calc(var(--u) * 0.6);
}

/* App / browser bar */
.nx__bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding-bottom: calc(var(--u) * 1.4);
  border-bottom: 1px solid var(--border-subtle);
}
.nx__dots {
  display: inline-flex;
  gap: calc(var(--u) * 0.6);
}
.nx__dots i {
  width: calc(var(--u) * 0.95);
  height: calc(var(--u) * 0.95);
  border-radius: 50%;
  background: var(--border-strong);
}
.nx__crumbs {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  color: var(--text-secondary);
}
.nx__crumbs b {
  color: var(--text-primary);
  font-weight: 600;
}
.nx__crumbs em {
  padding: calc(var(--u) * 0.15) calc(var(--u) * 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--accent-ink);
}
.nx__concept {
  white-space: nowrap;
  margin-left: auto;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
}
.nx__avatars {
  display: inline-flex;
  align-items: center;
}
.nx__avatars i,
.nx__avatars b {
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  margin-left: calc(var(--u) * -0.7);
  border-radius: 50%;
  border: max(1px, calc(var(--u) * 0.22)) solid var(--bg-primary);
  box-shadow: 0 0 0 1px var(--accent);
}
.nx__avatars i:nth-child(1) { background: linear-gradient(135deg, #C9B8A6, #6F5E52); }
.nx__avatars i:nth-child(2) { background: linear-gradient(135deg, #9FB4C7, #43566B); }
.nx__avatars i:nth-child(3) { background: linear-gradient(135deg, #B9C79F, #57663F); }
.nx__avatars b {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 0.95);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}

/* Layout: sidebar + main */
.nx__body {
  display: grid;
  grid-template-columns: calc(var(--u) * 15) 1fr;
  gap: calc(var(--u) * 2.2);
}
.nx__side {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.5);
  padding-right: calc(var(--u) * 1.6);
  border-right: 1px solid var(--border-subtle);
}
.nx__logo {
  width: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 1.4);
  color: var(--accent);
}
.nx__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.7);
  color: var(--text-secondary);
}
.nx__nav i {
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * 0.3);
  border: 1px solid currentColor;
}
.nx__nav.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.nx__nav.is-active i {
  border-color: var(--accent);
  background: var(--accent);
}
.nx__main {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.8);
  min-width: 0;
}

.nx__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.nx__kicker {
  color: var(--text-secondary);
}
.nx__title {
  margin-top: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 3.2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nx__live {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 1);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 999px;
  color: var(--accent-ink);
}
.nx__live i,
.nx__pin i,
.nx__svc i {
  position: relative;
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 calc(var(--u) * 1) var(--accent);
}
.nx__live i::after,
.nx__pin i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Hero chart */
.nx__hero {
  display: grid;
  grid-template-columns: calc(var(--u) * 17) 1fr;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.8);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--u) * 1.2);
  background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
}
.nx__hero-meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.7);
}
.nx__label {
  color: var(--text-secondary);
}
.nx__big {
  font-size: calc(var(--u) * 4.6);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.nx__big small,
.nx__value small {
  margin-left: calc(var(--u) * 0.3);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
}
.nx__delta {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 1.3);
  color: var(--accent-ink);
}
.nx__chart {
  position: relative;
  height: calc(var(--u) * 16);
  overflow: hidden;
}
.nx__grid {
  position: absolute;
  inset: 0 0 calc(var(--u) * 2.2) 0;
  width: 100%;
  height: calc(100% - var(--u) * 2.2);
}
.nx__grid path {
  stroke: var(--border-subtle);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.nx__wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: calc(100% - var(--u) * 2.2);
  animation: nx-scroll 16s linear infinite;
}
.nx__wave svg {
  width: 100%;
  height: 100%;
}
.nx__area {
  fill: var(--accent);
  fill-opacity: 0.12;
}
.nx__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.nx__line--ghost {
  stroke: var(--text-secondary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}
@keyframes nx-scroll {
  to {
    transform: translateX(-50%);
  }
}
.nx__pin {
  position: absolute;
  right: calc(var(--u) * 1.4);
  top: 30%;
}
.nx__pin i {
  display: block;
}
.nx__axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-style: normal;
  color: var(--text-secondary);
}
.nx__axis i {
  font-style: normal;
}

/* KPI micro-cards */
.nx__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 1.2);
}
.nx__kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 4.6);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--u) * 1);
  background: var(--bg-surface);
  overflow: hidden;
}
.nx__value {
  font-size: calc(var(--u) * 3.4);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.nx__state {
  color: var(--text-secondary);
}
.nx__state--ok {
  color: var(--accent-ink);
}
.nx__state--ok::before {
  content: "● ";
  color: var(--accent);
}
.nx__spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--u) * 3.6);
}
.nx__spark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: nx-draw 4.8s var(--ease) infinite;
}
.nx__kpi:nth-child(2) .nx__spark path {
  stroke: var(--text-secondary);
  animation-delay: 0.6s;
}
.nx__kpi:nth-child(3) .nx__spark path {
  animation-delay: 1.2s;
}
@keyframes nx-draw {
  0% { stroke-dashoffset: 130; }
  45%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -130; }
}

/* Data rows */
.nx__rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--u) * 1);
  overflow: hidden;
}
.nx__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.5fr;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  border-top: 1px solid var(--border-subtle);
  font-size: calc(var(--u) * 1.5);
}
.nx__row--head {
  border-top: 0;
  color: var(--text-secondary);
  background: var(--bg-surface);
}
.nx__svc {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  font-weight: 500;
  white-space: nowrap;
}
.nx__svc i {
  width: calc(var(--u) * 0.6);
  height: calc(var(--u) * 0.6);
  box-shadow: none;
}
.nx__region,
.nx__time {
  color: var(--text-secondary);
}
.nx__time {
  text-align: right;
}
.nx__tag {
  justify-self: start;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-primary);
}
.nx__tag--accent {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.nx__tag--solid {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* Control strip */
.nx__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding-top: calc(var(--u) * 0.4);
}
.nx__toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  color: var(--text-secondary);
}
.nx__toggle i {
  position: relative;
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 1.6);
  border-radius: 999px;
  background: var(--border-strong);
}
.nx__toggle i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--u) * 0.2);
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  border-radius: 50%;
  background: var(--text-primary);
  transform: translateY(-50%);
}
.nx__toggle.is-on {
  color: var(--text-primary);
}
.nx__toggle.is-on i {
  background: var(--accent);
}
.nx__toggle.is-on i::after {
  left: auto;
  right: calc(var(--u) * 0.2);
  background: var(--on-accent);
}
.nx__build {
  margin-left: auto;
  color: var(--text-secondary);
}

/* Phone tab bar (phone layout only) */
.nx__tabbar {
  display: none;
  justify-content: space-around;
  padding: calc(var(--u) * 1.4) 0 calc(var(--u) * 0.6);
  border-top: 1px solid var(--border-subtle);
}
.nx__tabbar i {
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 0.7);
  border: 1px solid var(--border-strong);
}
.nx__tabbar i.is-active {
  border-color: var(--accent);
  background: var(--accent);
}

/* ---- Per-theme screen palettes: tokens are overridden only inside the device UI ---- */
/* Dark: charcoal glass, neon lime primary + coral secondary series, glowing badges */
[data-theme="dark"] .nx {
  --nx-alt: #FF6B57;
}
[data-theme="dark"] .nx__line { filter: drop-shadow(0 0 3px var(--accent)); }
[data-theme="dark"] .nx__line--ghost,
[data-theme="dark"] .nx__kpi:nth-child(2) .nx__spark path { stroke: var(--nx-alt); opacity: 0.9; }
[data-theme="dark"] .nx__tag--accent,
[data-theme="dark"] .nx__live { box-shadow: 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--accent) 45%, transparent); }
/* Warm Sand: warm off-white paper, terracotta-red + dark gray charts, clean sans */
[data-theme="warm-sand"] .nx {
  --bg-primary: #F4F1EA;
  --bg-surface: #ECE7DD;
}
[data-theme="warm-sand"] .nx__line--ghost,
[data-theme="warm-sand"] .nx__kpi:nth-child(2) .nx__spark path { stroke: #3A3733; opacity: 0.85; }
/* Tech: cool gray-navy, cyan telemetry, monospace throughout, dense grid */
[data-theme="tech"] .nx {
  --accent: #38D6E8;
  --accent-ink: #38D6E8;
  --bg-primary: #0E141C;
  --bg-surface: #151D28;
  font-family: var(--font-mono);
}
[data-theme="tech"] .nx__title,
[data-theme="tech"] .nx__big,
[data-theme="tech"] .nx__value { letter-spacing: -0.02em; }
[data-theme="tech"] .nx__line--ghost { stroke: #8DA2B5; stroke-dasharray: none; }
[data-theme="tech"] .nx__chart,
[data-theme="tech"] .nx__kpi {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: calc(var(--u) * 2) calc(var(--u) * 2);
}

/* ---- Device layouts --------------------------------------------------------------------------
   Chosen by DEVICE, not by screen width: the mockup screens are small at every viewport, so a
   width-based container query handed the laptop the tablet layout. Every size in the UI is a
   multiple of --u = --u0 (per device) × --fit; ConceptUI.fit() in script.js sets --fit so each
   dashboard fills its frame exactly — nothing overflows, nothing is clipped. */
.nx {
  --u: calc(var(--u0, 1cqi) * var(--fit, 1));
}

/* Tablet (expanded responsive view) + phone (stacked) share the single-column structure */
.tablet .nx__dots,
.tablet .nx__side,
.tablet .nx__crumb-root,
.tablet .nx__sep,
.tablet .nx__build,
.phone .nx__dots,
.phone .nx__side,
.phone .nx__crumb-root,
.phone .nx__sep,
.phone .nx__build {
  display: none;
}
.tablet .nx__body,
.tablet .nx__hero,
.phone .nx__body,
.phone .nx__hero {
  grid-template-columns: 1fr;
}
.tablet .nx__region,
.tablet .nx__row--head span:nth-child(2) {
  display: none;
}

/* ---- Tablet: header, full-width chart, 2-up KPIs + wide KPI, three service rows ---- */
.tablet .nx {
  --u0: 2.3cqi;
}
.tablet .nx__chart {
  height: calc(var(--u) * 15);
}
.tablet .nx__kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tablet .nx__kpi--wide {
  grid-column: 1 / -1;
}
.tablet .nx__row {
  grid-template-columns: 1.5fr 1fr 0.4fr;
}
.tablet .nx__row:nth-child(n + 5),
.tablet .nx__controls {
  display: none;
}

/* ---- Phone companion app: status bar, title, chart, two stacked KPIs, tab bar ---- */
.phone .nx {
  --u0: 4.8cqi;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 1.6) calc(var(--u) * 1);
}
.phone .nx__status {
  display: flex;
}
.phone .nx__avatars,
.phone .nx__crumbs em,
.phone .nx__kpi--wide,
.phone .nx__rows,
.phone .nx__controls {
  display: none;
}
.phone .nx__bar {
  padding-bottom: calc(var(--u) * 1);
}
.phone .nx__head {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.8);
}
.phone .nx__title {
  font-size: calc(var(--u) * 3);
}
.phone .nx__hero {
  padding: calc(var(--u) * 1.4);
}
.phone .nx__big {
  font-size: calc(var(--u) * 4.4);
}
.phone .nx__chart {
  height: calc(var(--u) * 14);
}
.phone .nx__axis i:nth-child(2),
.phone .nx__axis i:nth-child(4) {
  display: none;
}
.phone .nx__kpis {
  grid-template-columns: 1fr;
}
.phone .nx__value {
  font-size: calc(var(--u) * 4);
}
.phone .nx__tabbar {
  display: flex;
  margin-top: auto; /* docks to the bottom edge of the screen */
}


/* ----------------------------------------------------------------------------
   11 — CASE STUDY
   ---------------------------------------------------------------------------- */
.case {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}
.case__lede {
  margin-top: 28px;
}

.case__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: clamp(56px, 8vw, 120px);
}

.case__indicator {
  position: sticky;
  top: var(--header-h-compact);
  z-index: 5;
  margin-inline: calc(var(--gutter) * -1);
  padding: 14px var(--gutter);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.case__indicator-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.case__indicator-label,
.case__steps {
  display: none;
}
.case__indicator-num {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.case__indicator-title {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.case__progress {
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  overflow: hidden;
}
.case__progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 0.8s var(--ease);
}

.case__chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(88px, 12vw, 180px);
}

.chapter__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.chapter__head .mono {
  color: var(--text-secondary);
}
.chapter__head h3 {
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.chapter__lead {
  max-width: 34ch;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.chapter__body {
  max-width: 60ch;
  margin-top: 18px;
  color: var(--text-secondary);
}

.chapter__fig {
  margin-top: clamp(32px, 4vw, 56px);
}
.chapter__fig figcaption {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 0.625rem;
}
.chapter__fig figcaption span {
  color: var(--text-primary);
}

.fig-frame {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: clamp(20px, 3vw, 40px);
  overflow: hidden;
}

/* Fig 01 — framing */
.fig-challenge {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.fc-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}
.fc-node .mono {
  color: var(--text-secondary);
}
.fc-node b {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.fc-node--center {
  border-color: var(--accent);
}
.fc-node--center .mono {
  color: var(--accent-ink);
}
.fc-lines {
  display: none;
}

/* Fig 02 — information architecture tree (real nodes, 1px connectors) */
.fig-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ft-root {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.ft-root b {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ft-tag {
  color: var(--accent-ink);
}
.ft-meta {
  color: var(--text-secondary);
}
.ft-root::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 28px;
  background: var(--border-strong);
}
.ft-branches {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-strong);
}
.ft-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-col::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 1px;
  height: 22px;
  background: var(--border-strong);
}
.ft-col::after {
  /* spine linking the branch to its nodes */
  content: "";
  position: absolute;
  left: 0;
  top: 38px;
  bottom: 22px;
  width: 1px;
  background: var(--border-strong);
}
.ft-branch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-primary);
}
.ft-branch i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.5625rem;
  background: var(--accent);
  color: var(--on-accent);
}
.ft-node {
  position: relative;
  display: flex;
  gap: 8px;
  margin-left: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: 0.8125rem;
  line-height: 1.35;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.ft-node::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--border-strong);
}
.ft-node .mono {
  flex-shrink: 0;
  padding-top: 2px;
  color: var(--accent-ink);
}
.ft-node:hover {
  border-color: var(--accent);
  transform: translateX(3px);
}
@media (max-width: 767.98px) {
  .ft-branches {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 0;
    border-top: 0;
  }
  .ft-col::before {
    display: none;
  }
}

/* Fig 03 — design system: real tokens + working components */
.fig-system {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.fig-system > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}
.fs-h {
  color: var(--text-secondary);
}
.fs-h em {
  font-style: normal;
  color: var(--text-dim);
}
.fs-pair {
  display: flex;
  align-items: center;
  gap: 18px;
}
.fs-pair b {
  font-size: clamp(3.5rem, 6vw, 5.25rem);
  font-weight: 400;
  line-height: 0.85;
}
.fs-pair ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.625rem;
}
.fs-pair li {
  display: flex;
  gap: 10px;
}
.fs-pair li span {
  flex: 0 0 7.5em; /* fixed role column; the gap guarantees separation regardless of letter-spacing */
  color: var(--text-secondary);
}
.fs-scale {
  border-top: 1px solid var(--border-subtle);
}
.fs-scale li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.fs-scale li > .mono {
  flex-shrink: 0;
  font-size: 0.5625rem;
  color: var(--text-secondary);
}
.fs-s1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 0.9;
}
.fs-s2 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.fs-s3 {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.fs-s4 {
  font-size: 0.6875rem;
}

.fs-palette ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fs-palette li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fs-palette i {
  aspect-ratio: 1.7;
  margin-bottom: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
}
.fs-palette b {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.fs-palette span {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* Live toggle */
.fs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
}
.fs-toggle input,
.fs-seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fs-toggle__track {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.3s var(--ease);
}
.fs-toggle__track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform 0.35s var(--ease), background-color 0.3s;
}
.fs-toggle input:checked + .fs-toggle__track {
  background: var(--accent);
}
.fs-toggle input:checked + .fs-toggle__track i {
  transform: translateX(18px);
  background: var(--on-accent);
}
.fs-toggle input:focus-visible + .fs-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Live segmented control */
.fs-seg {
  display: inline-flex;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.fs-seg label {
  cursor: pointer;
}
.fs-seg span {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.fs-seg input:checked + span {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.fs-seg input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Live input with micro-validation (pure CSS :valid / :invalid) */
.fs-field {
  position: relative;
  padding-top: 14px;
}
.fs-field input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
}
.fs-field label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.fs-field input:focus {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.fs-msg {
  display: none;
  margin-top: 8px;
  font-size: 0.5625rem;
}
.fs-msg--ok {
  color: var(--accent-ink);
}
.fs-msg--err {
  color: var(--text-primary);
}
.fs-field input:valid:not(:placeholder-shown) ~ .fs-msg--ok,
.fs-field input:invalid ~ .fs-msg--err {
  display: block;
}

.fs-grid__cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 56px;
}
.fs-grid__cols i {
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fs-grid__spans {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  font-size: 0.5625rem;
}
.fs-grid__spans span {
  padding: 7px 8px;
  border-radius: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .fig-system {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fs-palette ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Fig 04 — code */
.fig-code {
  padding: 0;
  background: color-mix(in srgb, var(--bg-surface) 70%, var(--bg-primary));
}
.code__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.5625rem;
}
.code__bar i,
.browser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.code__bar span,
.browser__bar span {
  margin-left: 10px;
}
.code {
  margin: 0;
  padding: clamp(18px, 3vw, 32px);
  overflow-x: auto;
  font-size: clamp(0.6875rem, 1.1vw, 0.875rem);
  line-height: 1.8;
  letter-spacing: 0;
  text-transform: none;
  white-space: pre;
  color: var(--text-primary);
}
.code .c {
  color: var(--text-secondary);
}
.code .k {
  color: var(--accent-ink);
}
.code .s {
  color: var(--accent-secondary);
}
.code .n {
  color: var(--text-primary);
  font-weight: 500;
}

/* Line numbers + richer token palette (inline .ln spans keep the <pre> line breaks intact) */
.code {
  counter-reset: ln;
}
.code .ln {
  counter-increment: ln;
}
.code .ln::before {
  content: counter(ln);
  display: inline-block;
  width: 2.4ch;
  margin-right: 1.8ch;
  text-align: right;
  color: var(--text-dim);
  -webkit-user-select: none;
  user-select: none;
}
.code .f {
  color: color-mix(in srgb, var(--accent-ink) 55%, var(--text-primary));
  font-weight: 500;
}
.code .p {
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
}
.code .v {
  color: var(--text-primary);
}
.code .t {
  font-style: italic;
  color: color-mix(in srgb, var(--accent-ink) 45%, var(--text-secondary));
}
.code__bar em {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-style: normal;
}
.code__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.5625rem;
  color: var(--text-secondary);
}
.code__foot span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.code__foot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Fig 05 — final browser */
.fig-final {
  padding: clamp(14px, 3vw, 40px);
}
.browser {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-primary);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.5625rem;
  white-space: nowrap;
  overflow: hidden;
}
.browser__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
}


/* Fig 05 — editorial final-product preview over imagery (text sits on a photo, so it stays light in every theme) */
.ff-screen {
  background: radial-gradient(80% 90% at 70% 40%, #2A2730, #0A0A0A); /* shown if the image can't load */
}
.ff-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ff-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.4cqi 4.4cqi;
  color: #F5F5F5;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.74) 0%, rgba(10, 10, 10, 0.2) 58%, rgba(10, 10, 10, 0.32) 100%),
    linear-gradient(to top, rgba(10, 10, 10, 0.62), transparent 42%);
}
.ff-nav {
  display: flex;
  align-items: center;
  gap: 3cqi;
  font-size: max(7px, 1.35cqi);
}
.ff-nav b {
  margin-right: auto;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.ff-nav span {
  color: rgba(245, 245, 245, 0.8);
}
.ff-menu {
  padding: 0.6cqi 1.6cqi;
  border: 1px solid rgba(245, 245, 245, 0.45);
  border-radius: 999px;
}
.ff-copy > .mono:first-child {
  font-size: max(7px, 1.3cqi);
  color: rgba(245, 245, 245, 0.78);
}
.ff-copy p {
  margin: 1.4cqi 0 2.4cqi;
  font-size: 6.2cqi;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.ff-copy .serif {
  color: #FFFFFF;
}
.ff-cta {
  display: inline-flex;
  align-items: center;
  gap: 1cqi;
  padding: 1.1cqi 2.6cqi;
  border-radius: 999px;
  background: #F5F5F5;
  color: #0A0A0A;
  font-size: max(7px, 1.3cqi);
}
.ff-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1cqi 3cqi;
  padding: 1.2cqi 1.8cqi;
  border: 1px solid rgba(245, 245, 245, 0.22);
  border-radius: 1cqi;
  background: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: max(6px, 1.2cqi);
  color: rgba(245, 245, 245, 0.92);
}
.ff-hud span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 1cqi;
}
.ff-hud span:last-child {
  margin-left: auto;
  color: rgba(245, 245, 245, 0.65);
}
.ff-hud i {
  position: relative;
  width: max(5px, 0.8cqi);
  height: max(5px, 0.8cqi);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 1cqi var(--accent);
}
/* ----------------------------------------------------------------------------
   12 — STUDIO LAB
   ---------------------------------------------------------------------------- */
.lab {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}

.lab__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(48px, 6vw, 88px);
}

.lab-card {
  perspective: 1200px;
}
.lab-card__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), border-color 0.4s;
  overflow: hidden;
}
.lab-card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--text-primary) 8%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.lab-card:hover .lab-card__inner {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.lab-card:hover .lab-card__inner::after {
  opacity: 1;
}
.lab-card.is-tilting .lab-card__inner {
  transition: transform 0.12s linear, border-color 0.4s;
}

.lab-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.lab-card__visual {
  position: relative;
  height: clamp(160px, 18vw, 230px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  overflow: hidden;
  transform: translateZ(40px);
}
.lab-card__visual svg {
  width: 100%;
  height: 100%;
}

.lab-card__title {
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  transform: translateZ(28px);
}
.lab-card__desc {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  transform: translateZ(20px);
}
.lab-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  font-size: 0.5625rem;
}
.lab-card__stack li {
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* Lab visual: fintech — ticker tape, candlesticks, glowing trend line, depth chart */
.lv-fintech {
  display: flex;
  flex-direction: column;
}
.lv-fintech svg {
  flex: 1;
  min-height: 0;
}
.lv-tape {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.5625rem;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lv-tape__track {
  display: inline-flex;
  gap: 18px;
  padding: 7px 0;
  animation: lv-tape 22s linear infinite;
}
.lv-tape b {
  font-weight: 500;
  color: var(--text-primary);
}
.lv-tape em {
  font-style: normal;
}
.lv-tape .up {
  color: var(--accent-ink);
}
.lv-tape .dn {
  color: var(--text-secondary);
}
@keyframes lv-tape {
  to {
    transform: translateX(-50%);
  }
}
.lv-grid line {
  stroke: var(--border-subtle);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lv-candles rect {
  fill: var(--text-primary);
}
.lv-candles rect.down {
  fill: transparent;
  stroke: var(--text-secondary);
  vector-effect: non-scaling-stroke;
}
.lv-candles line {
  stroke: var(--text-faint);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lv-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px var(--accent));
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.lab-card:hover .lv-line,
.lab-card.is-inview .lv-line {
  stroke-dashoffset: 0;
}
.lv-depth {
  vector-effect: non-scaling-stroke;
}
.lv-depth--bid {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke: var(--accent);
  stroke-width: 1;
}
.lv-depth--ask {
  fill: color-mix(in srgb, var(--text-primary) 8%, transparent);
  stroke: var(--text-secondary);
  stroke-width: 1;
}
.lv-mid {
  stroke: var(--border-strong);
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.lv-last {
  fill: var(--accent);
  animation: lv-blink 1.6s ease-in-out infinite;
}
@keyframes lv-blink {
  50% {
    opacity: 0.35;
  }
}
.lv-price {
  position: absolute;
  left: 61%;
  top: 30%;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-variant-numeric: tabular-nums;
  background: var(--accent);
  color: var(--on-accent);
  transition: background-color 0.3s;
}
.lv-price.is-down {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* Lab visual: spatial — isometric wireframe mesh */
.lv-spatial {
  display: grid;
  place-items: center;
  perspective: 700px;
}
.lv-floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -35%;
  height: 95%;
  background-image:
    linear-gradient(var(--border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  transform: rotateX(68deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 85%);
  mask-image: linear-gradient(to top, #000 15%, transparent 85%);
  animation: lv-floor 5s linear infinite;
}
@keyframes lv-floor {
  to {
    background-position: 0 22px;
  }
}
.lv-orbit {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  transform: rotateX(72deg);
}
.lv-cube {
  position: relative;
  width: 84px;
  height: 84px;
  transform-style: preserve-3d;
  animation: cube 16s linear infinite;
}
.lv-cube i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--text-primary);
  background:
    linear-gradient(var(--border-strong) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--border-strong) 1px, transparent 1px) 0 0 / 14px 14px,
    color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.lv-cube i:nth-child(1) { transform: translateZ(42px); }
.lv-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(42px); }
.lv-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(42px); }
.lv-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(42px); }
.lv-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(42px); border-color: var(--accent); }
.lv-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(42px); }
.lv-cube--inner {
  position: absolute;
  width: 36px;
  height: 36px;
  animation: cube-rev 9s linear infinite;
}
.lv-cube--inner i {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.lv-cube--inner i:nth-child(1) { transform: translateZ(18px); }
.lv-cube--inner i:nth-child(2) { transform: rotateY(180deg) translateZ(18px); }
.lv-cube--inner i:nth-child(3) { transform: rotateY(90deg) translateZ(18px); }
.lv-cube--inner i:nth-child(4) { transform: rotateY(-90deg) translateZ(18px); }
.lv-cube--inner i:nth-child(5) { transform: rotateX(90deg) translateZ(18px); }
.lv-cube--inner i:nth-child(6) { transform: rotateX(-90deg) translateZ(18px); }
@keyframes cube {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to { transform: rotateX(-22deg) rotateY(360deg); }
}
@keyframes cube-rev {
  from { transform: rotateX(30deg) rotateY(360deg) rotateZ(0deg); }
  to { transform: rotateX(30deg) rotateY(0deg) rotateZ(360deg); }
}
.lv-shadow {
  position: absolute;
  bottom: 16%;
  left: 50%;
  width: 110px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  filter: blur(8px);
}
.lv-spatial__label,
.lv-graph__label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 0.5rem;
  color: var(--text-secondary);
}
.lv-graph__label {
  left: auto;
  right: 10px; /* bottom-right is the graph's empty corner */
}

/* Lab visual: neural knowledge graph (nodes/edges generated in script.js) */
.lv-edges line {
  stroke: var(--border-strong);
  stroke-width: 0.8;
}
.lv-flow line {
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 3 11;
  animation: lv-flow 1.4s linear infinite;
}
@keyframes lv-flow {
  to {
    stroke-dashoffset: -28;
  }
}
.lv-nodes circle {
  fill: var(--bg-primary);
  stroke: var(--text-primary);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: lv-node 2.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.lv-nodes circle.is-hot {
  fill: var(--accent);
  stroke: var(--accent);
  filter: drop-shadow(0 0 3px var(--accent));
}
@keyframes lv-node {
  50% {
    transform: scale(1.35);
  }
}

/* Lab visual: kinetic type — live variable-font weight slider */
.lv-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.lv-type__word {
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: font-weight 0.2s ease-out, letter-spacing 0.2s ease-out;
}
.lv-type__word .serif {
  color: var(--accent);
  font-weight: 400;
}
.lv-type__ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(86%, 260px);
  font-size: 0.5625rem;
  color: var(--text-secondary);
}
.lv-type__ctrl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 67%), var(--border-strong) var(--fill, 67%));
  outline: none;
}
.lv-type__ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--text-primary);
  cursor: grab;
}
.lv-type__ctrl input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--text-primary);
  cursor: grab;
}
.lv-type__ctrl input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lv-type__ctrl output {
  min-width: 3ch;
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   13 — CAPABILITIES
   ---------------------------------------------------------------------------- */
.services {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}

/* Editorial index: one full-width row per discipline — meta | title | stack pills | arrow.
   Every row is an accordion trigger; its drawer holds the tagline, deliverables and visual. */
.services__list {
  --svc-ic: clamp(18px, 1.6vw, 24px);
  --svc-meta: calc(var(--svc-ic) + 34px); /* index + glyph column; the drawer copy aligns past it */
  --svc-gap: clamp(14px, 2.4vw, 40px);
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--border-subtle);
}
.service {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}
/* Accent hairline draws in under the hovered / focused / open row */
.service::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease);
}
.service:hover::after,
.service:focus-within::after,
.service.is-open::after {
  transform: scaleX(1);
}
.service__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: var(--svc-meta) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--svc-gap);
  padding: clamp(20px, 2.6vw, 36px) 0;
  text-align: left;
}
.service__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}
.service__idx {
  min-width: 2.4ch;
  font-size: 0.625rem;
  transition: color 0.3s;
}
.service__num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--svc-ic);
  height: var(--svc-ic);
  transition: color 0.3s, transform 0.6s var(--ease);
}
.service__num svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.service__name {
  font-family: var(--font-display, var(--font-serif));
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  transition: transform 0.7s var(--ease), color 0.4s;
}
.service__stack {
  display: none; /* desktop only */
  gap: 6px;
  font-size: 0.5625rem;
}
.service__stack i {
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-style: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: border-color 0.3s, color 0.3s;
}
/* Diagonal arrow: on hover the glyph exits up-right and a fresh one slides in from bottom-left */
.service__arrow {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(38px, 3.4vw, 48px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-secondary);
  transition: color 0.3s, background-color 0.4s var(--ease), border-color 0.3s, transform 0.6s var(--ease);
}
.service__arrow span,
.service__arrow::after {
  transition: transform 0.55s var(--ease);
}
.service__arrow::after {
  content: "\2197";
  position: absolute;
  transform: translate(-150%, 150%);
}
.service__trigger:hover .service__name,
.service__trigger:focus-visible .service__name {
  transform: translateX(12px);
}
.service__trigger:hover .service__meta,
.service__trigger:focus-visible .service__meta,
.service.is-open .service__meta {
  color: var(--accent-ink);
}
.service__trigger:hover .service__stack i {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.service__trigger:hover .service__arrow,
.service__trigger:focus-visible .service__arrow {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.service__trigger:hover .service__arrow span,
.service__trigger:focus-visible .service__arrow span {
  transform: translate(150%, -150%);
}
.service__trigger:hover .service__arrow::after,
.service__trigger:focus-visible .service__arrow::after {
  transform: translate(0, 0);
}
.service.is-open .service__arrow {
  transform: rotate(90deg); /* ↗ becomes ↘: the drawer is open */
}

/* Drawer */
.service__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease);
}
.service.is-open .service__panel {
  grid-template-rows: 1fr;
}
.service__panel-inner {
  overflow: hidden;
  padding-left: calc(var(--svc-meta) + var(--svc-gap));
}
.service__panel-inner p {
  max-width: 52ch;
  color: var(--text-secondary);
}
.service__panel-inner .svc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 18px;
  font-size: 0.5625rem;
}
.svc-pills li {
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  text-transform: uppercase;
}
/* Mobile: the bespoke visual stacks full-bleed under the copy */
.service__panel-inner > .svc-v {
  width: auto;
  aspect-ratio: 8 / 5;
  margin-left: calc(-1 * (var(--svc-meta) + var(--svc-gap)));
  margin-bottom: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background:
    radial-gradient(color-mix(in srgb, var(--text-primary) 12%, transparent) 1px, transparent 1.3px) 0 0 / 18px 18px,
    var(--bg-primary);
}

/* ---- Service visual modules (pure SVG, theme-token driven; cloned into the desktop card) ---- */
.svc-v {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.svc-v svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--font-mono);
  font-size: 10px;
}
/* "Illustrative" / "Sample data" marker on any module that shows numbers */
.svc-v .v-sample rect {
  fill: var(--bg-primary);
  stroke: var(--border-strong);
  stroke-dasharray: 2 2;
}
.svc-v .v-sample text {
  fill: var(--text-secondary);
  font-size: 7px;
  letter-spacing: 0.12em;
}
.svc-v .v-card rect,
.svc-v .v-card line {
  fill: var(--bg-surface);
  stroke: var(--border-strong);
  stroke-width: 1;
}
.svc-v .v-card line { fill: none; }
.svc-v .v-label {
  fill: var(--text-secondary);
  font-size: 8.5px;
  letter-spacing: 0.06em;
}
.svc-v .v-label--r { text-anchor: end; }
.svc-v .v-label--accent { fill: var(--accent-ink); }
.svc-v .v-note {
  fill: var(--text-faint);
  font-size: 7.5px;
  letter-spacing: 0.12em;
}
.svc-v .v-grid-line,
.svc-v .v-grid-lines line {
  fill: none;
  stroke: var(--border-subtle);
  stroke-dasharray: 2 4;
}
.svc-v .v-dot { fill: var(--border-strong); }
.svc-v .v-live,
.svc-v .v-pulse {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: svc-pulse 1.8s ease-in-out infinite;
}
.svc-v .v-caret {
  fill: var(--accent);
  animation: svc-blink 1.1s steps(1) infinite;
}
.svc-v .v-line-txt { fill: var(--text-primary); opacity: 0.85; }
.svc-v .v-line-txt--dim { opacity: 0.28; }
.svc-v .v-handle {
  stroke: var(--text-faint);
  stroke-width: 1;
}
.svc-v .v-ctrl {
  fill: var(--bg-primary);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.svc-v .v-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 3 7;
  animation: svc-dash 1.2s linear infinite;
}
.svc-v .v-node rect {
  fill: var(--bg-primary);
  stroke: var(--border-strong);
}
.svc-v .v-node text {
  fill: var(--text-primary);
  font-size: 10px;
}
.svc-v .v-node .v-sub { fill: var(--text-secondary); font-size: 7px; letter-spacing: 0.1em; }
.svc-v .v-node--hot rect { fill: var(--accent); stroke: var(--accent); }
.svc-v .v-node--hot text { fill: var(--on-accent); }
.svc-v .v-btn rect { fill: transparent; stroke: var(--border-strong); }
.svc-v .v-btn text { fill: var(--text-primary); font-family: var(--font-sans); font-size: 10px; font-weight: 500; }
.svc-v .v-btn--pri rect { fill: var(--accent); stroke: var(--accent); }
.svc-v .v-btn--pri text { fill: var(--on-accent); }
.svc-v .v-btn--dis rect { stroke-dasharray: 3 3; }
.svc-v .v-btn--dis text { fill: var(--text-faint); }

/* 01 — code card, AST tokens (hover reveals the node type), edge ping */
.svc-v--code .v-code text {
  fill: var(--text-secondary);
  font-size: 10.5px;
  white-space: pre;
}
.svc-v--code .v-ln { fill: var(--text-faint); }
.svc-v--code .tk { cursor: help; transition: fill 0.25s; }
.svc-v--code .tk--kw { fill: var(--text-primary); font-weight: 600; }
.svc-v--code .tk--fn,
.svc-v--code .tk--tag { fill: var(--accent-ink); }
.svc-v--code .tk--str,
.svc-v--code .tk--num { fill: var(--text-primary); font-style: italic; }
.svc-v--code .tk--id { fill: var(--text-primary); }
.svc-v--code .tk:hover { fill: var(--accent); text-decoration: underline; }
.svc-v--code .v-spark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  --len: 200;
  animation: svc-draw 2.4s var(--ease) both;
}
.svc-v--code .v-bar { fill: var(--accent); }
.svc-v--code .v-bar--dim { fill: var(--text-faint); }
.svc-v--code .v-badge rect { fill: var(--accent); }
.svc-v--code .v-badge__big {
  fill: var(--on-accent);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 02 — 12-col grid, golden split, type scale, bezier pen path */
.svc-v--layout .v-cols rect { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
.svc-v--layout .v-block { fill: color-mix(in srgb, var(--text-primary) 10%, transparent); stroke: var(--border-strong); }
.svc-v--layout .v-block--hero { fill: color-mix(in srgb, var(--text-primary) 16%, transparent); }
.svc-v--layout .v-block--soft { fill: transparent; stroke-dasharray: 3 3; }
.svc-v--layout .v-phi { stroke: var(--accent); stroke-dasharray: 4 3; }
.svc-v--layout .v-bez {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 520;
  animation: svc-draw 2.2s var(--ease) both;
}
.svc-v--layout .v-anchor { fill: var(--bg-primary); stroke: var(--text-primary); stroke-width: 1.4; }
.svc-v--layout .v-ts { fill: var(--text-primary); font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.04em; }
.svc-v--layout .v-ts--1 { font-size: 46px; }
.svc-v--layout .v-ts--2 { font-size: 30px; }
.svc-v--layout .v-ts--3 { font-size: 20px; }
.svc-v--layout .v-ts--4 { font-size: 13px; font-weight: 450; }
.svc-v--layout .v-ts--5 { font-size: 9px; font-weight: 450; }

/* 03 — candlesticks, trend, KPI pill, unit-economics nodes */
.svc-v--growth .v-candles rect { fill: var(--text-primary); }
.svc-v--growth .v-candles rect.down { fill: var(--bg-surface); stroke: var(--text-secondary); }
.svc-v--growth .v-candles line { stroke: var(--text-faint); }
.svc-v--growth .v-trend {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  --len: 340;
  animation: svc-draw 2s var(--ease) both;
}
.svc-v--growth .v-kpi rect { fill: var(--accent); }
.svc-v--growth .v-kpi text { fill: var(--on-accent); font-size: 10.5px; font-weight: 600; }

/* 04 — specimen, kerning guides, logo construction, swatches */
.svc-v--brand .v-guide { stroke: var(--border-strong); stroke-dasharray: 2 3; }
.svc-v--brand .v-guide--base { stroke: var(--accent); stroke-dasharray: none; }
.svc-v--brand .v-wordmark {
  fill: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 62px;
  font-weight: 640;
  letter-spacing: -0.045em;
}
.svc-v--brand .v-kern line { stroke: var(--accent); stroke-width: 1; }
.svc-v--brand .v-kern text { fill: var(--accent-ink); font-size: 8px; }
.svc-v--brand .v-construct line,
.svc-v--brand .v-construct circle,
.svc-v--brand .v-construct rect { fill: none; stroke: var(--border-strong); stroke-dasharray: 2 3; }
.svc-v--brand .v-mark {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 7;
  stroke-linecap: round;
}
.svc-v--brand .sw { stroke: var(--border-strong); }
.svc-v--brand .sw--1 { fill: #121110; }
.svc-v--brand .sw--2 { fill: #B8FF3D; }
.svc-v--brand .sw--3 { fill: #D9532F; }
.svc-v--brand .sw--4 { fill: #EDEAE3; }
.svc-v--brand .sw-t { fill: #121110; font-size: 10px; font-weight: 600; }
.svc-v--brand .sw-t--light { fill: #EDEAE3; }
.svc-v--brand .sw-c { font-size: 7.5px; font-weight: 400; }

/* 05 — component matrix */
.svc-v--ui .v-toggle rect { fill: var(--border-strong); }
.svc-v--ui .v-toggle circle { fill: var(--bg-primary); }
.svc-v--ui .v-toggle.is-on rect { fill: var(--accent); }
.svc-v--ui .v-toggle.is-on circle { fill: var(--on-accent); }
.svc-v--ui .v-seg > rect:first-child { fill: var(--bg-primary); stroke: var(--border-strong); }
.svc-v--ui .v-seg__on { fill: var(--text-primary); }
.svc-v--ui .v-seg__t { fill: var(--text-secondary); font-family: var(--font-sans); font-size: 10px; }
.svc-v--ui .v-seg__t--on { fill: var(--bg-primary); font-weight: 600; }
.svc-v--ui .v-field rect:first-child { fill: var(--bg-primary); stroke: var(--accent); stroke-width: 1.5; }
.svc-v--ui .v-field text { fill: var(--text-primary); font-family: var(--font-sans); font-size: 11px; }
.svc-v--ui .v-spec line { stroke: var(--accent); }
.svc-v--ui .v-spec text { fill: var(--accent-ink); font-size: 8px; }
.svc-v--ui .v-modal > rect:first-child { fill: var(--bg-primary); stroke: var(--border-strong); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)); }
.svc-v--ui .v-modal__h { fill: var(--text-primary); font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.svc-v--ui .v-check rect { fill: var(--accent); }
.svc-v--ui .v-check path { fill: none; stroke: var(--on-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 06 — graph editor, timeline, waveform, playhead */
.svc-v--motion .v-tc {
  fill: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.svc-v--motion .v-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 520;
  animation: svc-draw 2.2s var(--ease) both;
}
.svc-v--motion .v-curve--ghost { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; animation: none; }
.svc-v--motion .v-key { fill: var(--bg-primary); stroke: var(--text-primary); }
.svc-v--motion .v-key--on,
.svc-v--motion .v-keys rect { fill: var(--accent); stroke: var(--accent); }
.svc-v--motion .v-ruler line { stroke: var(--border-strong); }
.svc-v--motion .v-ruler text { fill: var(--text-faint); font-size: 7.5px; }
.svc-v--motion .v-clip { fill: color-mix(in srgb, var(--text-primary) 12%, transparent); stroke: var(--border-strong); }
.svc-v--motion .v-clip--accent { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); }
.svc-v--motion .v-wave rect {
  fill: var(--text-secondary);
  transform-box: fill-box;
  transform-origin: center;
  animation: svc-wave 1.6s ease-in-out infinite alternate;
}
.svc-v--motion .v-wave rect:nth-child(3n) { animation-delay: -0.4s; }
.svc-v--motion .v-wave rect:nth-child(3n + 1) { animation-delay: -0.9s; }
.svc-v--motion .v-playhead {
  animation: svc-scrub 8s linear infinite;
}
.svc-v--motion .v-playhead line { stroke: var(--accent); stroke-width: 1.5; }
.svc-v--motion .v-playhead path { fill: var(--accent); }

/* 07 — app screens, push notification, sync queue */
.svc-v--app .v-phone rect:first-child { fill: var(--bg-surface); stroke: var(--border-strong); stroke-width: 1.5; }
.svc-v--app .v-phone--back rect { fill: color-mix(in srgb, var(--bg-surface) 60%, transparent); stroke-dasharray: 3 3; }
.svc-v--app .v-island { fill: var(--text-primary); }
.svc-v--app .v-row rect:first-child { fill: var(--bg-primary); stroke: var(--border-subtle); }
.svc-v--app .v-notif > rect { fill: var(--bg-primary); stroke: var(--border-strong); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16)); }
.svc-v--app .v-notif__icon { fill: var(--accent); }
.svc-v--app .v-notif__h { fill: var(--text-primary); font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; }
.svc-v--app .v-q { fill: var(--border-strong); }
.svc-v--app .v-q--done { fill: var(--accent); }
.svc-v--app .v-notif { animation: svc-drop 3.6s var(--ease) infinite; }

@keyframes svc-pulse { 50% { transform: scale(1.5); opacity: 0.5; } }
@keyframes svc-blink { 50% { opacity: 0; } }
@keyframes svc-dash { to { stroke-dashoffset: -20; } }
@keyframes svc-draw { from { stroke-dashoffset: var(--len, 520); } to { stroke-dashoffset: 0; } }
@keyframes svc-wave { to { transform: scaleY(0.35); } }
@keyframes svc-scrub { from { transform: translateX(50px); } to { transform: translateX(450px); } }
@keyframes svc-drop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-v *,
  .svc-v .v-playhead { animation: none !important; }
  .svc-v--motion .v-playhead { transform: translateX(250px); }
}

/* Floating cursor preview (#service-floating-preview). GSAP owns x / y / scale / opacity;
   it only exists for fine pointers — touch devices use the drawers instead. */
.sfp {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 360px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-subtle));
  box-shadow:
    0 40px 90px -24px var(--card-shadow),
    0 0 60px -30px color-mix(in srgb, var(--accent) 50%, transparent);
  will-change: transform, opacity;
}
.sfp__stage {
  position: absolute;
  inset: 0 0 28px;
  background: radial-gradient(color-mix(in srgb, var(--text-primary) 10%, transparent) 1px, transparent 1.3px) 0 0 / 16px 16px;
}
.sfp__stage > .svc-v {
  position: absolute;
  inset: 8px 10px;
  width: auto;
}
.sfp__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sfp__count {
  color: var(--accent-ink);
}
.sfp__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (hover: none), (pointer: coarse) {
  .sfp {
    display: none;
  }
}

/* Motion module: CSS 3D wireframe cube (shares the Lab cube styles) composed over the SVG scene */
.svc-cube {
  position: absolute;
  z-index: 1;
  left: 9%;
  top: 9%;
  width: 44%;
  height: 52%;
  display: grid;
  place-items: center;
  perspective: 700px;
  pointer-events: none;
}
.svc-cube .lv-cube {
  width: 64px;
  height: 64px;
}
.svc-cube .lv-cube i:nth-child(1) { transform: translateZ(32px); }
.svc-cube .lv-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(32px); }
.svc-cube .lv-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(32px); }
.svc-cube .lv-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(32px); }
.svc-cube .lv-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(32px); }
.svc-cube .lv-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(32px); }
.svc-cube .lv-cube--inner {
  position: absolute;
  width: 28px;
  height: 28px;
}
.svc-cube .lv-cube--inner i:nth-child(1) { transform: translateZ(14px); }
.svc-cube .lv-cube--inner i:nth-child(2) { transform: rotateY(180deg) translateZ(14px); }
.svc-cube .lv-cube--inner i:nth-child(3) { transform: rotateY(90deg) translateZ(14px); }
.svc-cube .lv-cube--inner i:nth-child(4) { transform: rotateY(-90deg) translateZ(14px); }
.svc-cube .lv-cube--inner i:nth-child(5) { transform: rotateX(90deg) translateZ(14px); }
.svc-cube .lv-cube--inner i:nth-child(6) { transform: rotateX(-90deg) translateZ(14px); }
.svc-cube .lv-orbit {
  width: 120px;
  height: 120px;
}
.svc-v--brand .v-wordmark--serif {
  font-family: var(--font-serif);
  font-size: 118px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.services__hint {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.5625rem;
}
.services__hint-line {
  width: 28px;
  height: 1px;
  background: var(--accent);
}

/* ----------------------------------------------------------------------------
   14 — TEAM
   ---------------------------------------------------------------------------- */
.team {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}

/* 2 columns on phones and tablets (2×4), 4 columns from 1024px (4×2) */
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
  margin-top: clamp(48px, 6vw, 88px);
}

/* Portrait card — hairline frame, editorial grade, blended bottom edge */
.member__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-surface);
  isolation: isolate;
}

.member__photo img,
.founder__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Subtle editorial grade instead of monochrome: slightly muted, slightly deeper */
  filter: saturate(0.95) contrast(1.06) brightness(0.98);
}

.member__photo img {
  transform: scale(1.001);
  transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.member:hover .member__photo img,
.member:focus-within .member__photo img {
  filter: saturate(1.02) contrast(1.05) brightness(1);
  transform: scale(1.03);
}

/* Blend the light studio backdrops into the dark page: soft edge vignette + bottom fade into the card surface.
   The surface colour follows the active theme (rgba(17, 17, 20, 0.95) on Dark). */
.member__photo::after,
.founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--bg-surface) 95%, transparent) 100%),
    radial-gradient(ellipse 120% 90% at 50% 30%, transparent 55%, var(--photo-vignette) 100%);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.member:hover .member__photo::after,
.member:focus-within .member__photo::after {
  opacity: 0.85;
}

.member__photo.is-fallback img {
  display: none;
}
.member__photo.is-fallback::before,
.founder__photo.is-fallback::before {
  content: attr(data-monogram);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text-faint);
  background:
    radial-gradient(color-mix(in srgb, var(--text-primary) 12%, transparent) 1px, transparent 1.3px) 0 0 / 16px 16px,
    linear-gradient(160deg, var(--bg-surface), var(--bg-primary));
}

.member__exp {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.5625rem;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-font-smoothing: antialiased;
}

/* Info: name + role stacked (never squeezed side by side), specialty below */
.member__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  min-width: 0;
}
.member__info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--name-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member__info p {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--role-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member__spec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--role-color);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="warm-sand"] .member__info h3,
[data-theme="sand"] .member__info h3 {
  font-weight: 700;
}
/* Narrow 2-column cards: let text wrap (balanced) instead of truncating; pills use their short form */
@media (max-width: 767.98px) {
  .member__info h3 {
    font-size: 1rem;
    white-space: normal;
    overflow: visible;
    text-wrap: balance;
  }
  .member__info p,
  .member__spec {
    white-space: normal;
    overflow: visible;
  }
  .member__spec {
    align-items: flex-start;
    line-height: 1.5;
  }
  .member__spec::before {
    margin-top: 0.35em;
  }
  .member__exp {
    left: 8px;
    top: 8px;
    padding: 5px 8px;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }
  .member__exp-long {
    display: none; /* "5 Years Experience" → "5 Years" */
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .team__grid {
    gap: 40px 20px;
  }
}
.member__spec::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent); /* lime on Dark, amber on Titanium, blue on Tech */
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ----------------------------------------------------------------------------
   15 — PROCESS (STICKY STACK)
   ---------------------------------------------------------------------------- */
.process {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}

.stack {
  margin-top: clamp(48px, 6vw, 88px);
  padding-bottom: 6vh;
}
/* Mobile: cards are taller than the viewport once the visual stacks on top, so they flow normally.
   The sticky stack starts at 768px (see responsive block). */
.stack__card {
  position: relative;
  top: calc(var(--header-h-compact) + 20px + var(--i) * 14px);
}
.stack__card + .stack__card {
  margin-top: 16px;
}

.stack__inner {
  display: grid;
  grid-template-columns: 1fr;
  min-height: min(64vh, 540px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: 0 -24px 60px -20px var(--card-shadow);
  overflow: hidden;
  transform-origin: 50% 0;
  will-change: transform;
}

.stack__side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  overflow: hidden;
  background:
    radial-gradient(color-mix(in srgb, var(--text-primary) 10%, transparent) 1px, transparent 1.3px) 0 0 / 20px 20px;
}
.stack__side > .mono {
  position: relative;
  z-index: 1;
}
/* Watermark numeral sits behind the visual module for depth */
.stack__num {
  position: absolute;
  z-index: 0;
  right: -0.04em;
  bottom: -0.14em;
  font-size: clamp(7rem, 16vw, 15rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: color-mix(in srgb, var(--text-primary) 7%, transparent);
  pointer-events: none;
}
.stack__phase {
  display: block;
  margin-top: 14px;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ---- Process visual modules (share the .svc-v token styles from Capabilities) ---- */
.pv {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
}
.pv .pv-rings circle,
.pv .pv-axis line {
  fill: none;
  stroke: var(--border-strong);
  stroke-dasharray: 2 4;
}
.pv .pv-sweep {
  transform-box: view-box;
  transform-origin: 130px 156px;
  animation: pv-spin 6s linear infinite;
}
.pv .pv-sweep path {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: var(--accent);
  stroke-width: 1;
}
.pv .pv-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: pv-ring 2.8s var(--ease) infinite;
}
.pv .pv-core { fill: var(--accent); }
.pv .pv-blips circle { fill: var(--text-secondary); }
.pv .pv-blips .is-hot {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}
.pv .pv-tag rect {
  fill: var(--bg-primary);
  stroke: var(--border-strong);
}
.pv .pv-tag text {
  fill: var(--text-primary);
  font-size: 7.2px;
  letter-spacing: 0.06em;
}
.pv .pv-tag.is-hot rect { fill: var(--accent); stroke: var(--accent); }
.pv .pv-tag.is-hot text { fill: var(--on-accent); font-weight: 600; }

/* 02 — IA blueprint */
.pv--define {
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 20px 20px;
  border-radius: var(--radius-sm);
}
.pv .pv-wires path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.2;
}
.pv .pv-glow path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 26 180;
  filter: drop-shadow(0 0 4px var(--accent));
  animation: pv-travel 2.6s linear infinite;
}
.pv .pv-glow path:nth-child(2) { animation-delay: -0.9s; }
.pv .pv-glow path:nth-child(3) { animation-delay: -1.7s; }
.stack__inner:hover .pv-glow path { stroke-width: 3; animation-duration: 1.4s; }
.pv .pv-leaves line { stroke: var(--border-strong); stroke-dasharray: 2 3; }
.pv .pv-leaves circle { fill: var(--accent); }

/* 03 — design workbench */
.pv .pv-optic { stroke: var(--accent); stroke-width: 1; }
.pv .pv-optic--h { stroke-dasharray: 3 3; }
.pv .pv-base line { stroke: var(--border-strong); stroke-dasharray: 2 3; }
.pv .pv-aa {
  fill: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.pv .pv-token__k { fill: var(--text-secondary); font-size: 8.5px; }
.pv .pv-token__v { fill: var(--text-primary); font-size: 10px; font-weight: 600; }
.pv .sw { stroke: var(--border-strong); }
.pv .sw--1 { fill: #121110; }
.pv .sw--3 { fill: #D9532F; }
.pv .sw--4 { fill: #EDEAE3; }
.pv .pv-contrast__aa { fill: #121110; font-family: var(--font-sans); font-size: 36px; font-weight: 600; letter-spacing: -0.04em; }
.pv .pv-contrast rect { fill: #121110; }
.pv .pv-contrast text { fill: #EDEAE3; font-size: 9px; font-weight: 600; }
.pv .pv-contrast__sub { fill: #121110; font-size: 7px; letter-spacing: 0.1em; }

/* 04 — code engine */
.pv--build .v-code text { font-size: 9.6px; }
.pv .pv-status {
  fill: var(--text-primary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* 05 — QA HUD */
.pv .pv-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 8;
  stroke-linecap: round;
}
.pv .pv-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 99 100;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent));
}
.pv .pv-ring .pv-track,
.pv .pv-ring .pv-arc { stroke-width: 5; }
.pv .pv-ring .pv-arc {
  stroke-dasharray: 100 100;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}
.pv .pv-ticks line { stroke: var(--text-faint); }
.pv .pv-needle { stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; }
.pv .pv-score { fill: var(--text-primary); font-family: var(--font-sans); font-size: 38px; font-weight: 600; letter-spacing: -0.04em; }
.pv .pv-ring__v { fill: var(--text-primary); font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
.pv .pv-device rect { fill: color-mix(in srgb, var(--text-primary) 4%, transparent); stroke: var(--border-strong); stroke-dasharray: 3 3; }
.pv .pv-pass { fill: var(--accent-ink); font-size: 10px; font-weight: 600; }
.pv .pv-device--scan rect { stroke: var(--accent); stroke-dasharray: none; }
.pv .pv-corners path { fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* 06 — edge deployment */
.pv .pv-graticule ellipse,
.pv .pv-graticule line { fill: none; stroke: var(--border-subtle); }
.pv .pv-dotnode { fill: var(--accent); }
.pv .pv-ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: pv-ring 2.4s var(--ease) infinite;
}
.pv .pv-region:nth-of-type(2) .pv-ping { animation-delay: 0.8s; }
.pv .pv-region:nth-of-type(3) .pv-ping { animation-delay: 1.6s; }
.pv .pv-region__t { fill: var(--text-primary); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; }
.pv .pv-ready rect {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
  animation: pv-glowpulse 2.4s ease-in-out infinite;
}
.pv .pv-ready text { fill: var(--on-accent); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; }

@keyframes pv-spin { to { transform: rotate(360deg); } }
@keyframes pv-ring {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(3); opacity: 0; }
}
@keyframes pv-travel { to { stroke-dashoffset: -206; } }
@keyframes pv-glowpulse { 50% { opacity: 0.82; } }
.stack__card:first-child .stack__side .mono::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.stack__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(20px, 3vw, 40px);
}
.stack__main h3 {
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.stack__main p {
  max-width: 44ch;
  margin-top: 16px;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--text-secondary);
}
.stack__main ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--border-subtle);
  font-size: 0.625rem;
}
.stack__main li {
  padding: 14px 16px;
  background: var(--bg-surface);
}

/* ----------------------------------------------------------------------------
   16 — WHY US
   ---------------------------------------------------------------------------- */
.why {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}

.why__statement {
  font-size: clamp(1.8rem, 4.6vw, 4.75rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.why__statement .word {
  display: inline-block;
  color: var(--text-primary);
  opacity: 0.16;
  will-change: opacity;
}
.no-motion .why__statement .word,
.libs-failed .why__statement .word {
  opacity: 1;
}
.why__statement .word.is-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.why__list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--border-subtle);
}
.why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-subtle);
}
/* Hairline 16px glyph in a quiet frame; takes the theme accent */
.why__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--accent-ink);
  transition: border-color 0.4s, background-color 0.4s;
}
.why__icon svg {
  width: 16px;
  height: 16px;
}
.why__item:hover .why__icon {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.why__item h3 {
  align-self: center;
}
.why__item h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.why__item p {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* ----------------------------------------------------------------------------
   17 — FOUNDER
   ---------------------------------------------------------------------------- */
.founder {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}

.founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.founder__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.founder__photo {
  border-color: var(--border-subtle);
  isolation: isolate;
}
/* Same editorial grade as the team. Only the filter transitions — the transform is driven by the GSAP scroll parallax. */
.founder__photo img {
  transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.founder__photo:hover img {
  filter: saturate(1.05) contrast(1.05) brightness(1);
}
.founder__photo.is-fallback img {
  display: none;
}
.founder__photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2; /* above the blend overlay */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 48px 18px 18px;
  color: #F5F5F5;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent);
}
.founder__photo figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.founder__body .eyebrow {
  margin-bottom: 18px;
}
.founder__name {
  margin-bottom: clamp(28px, 4vw, 48px);
}
.founder__quote p {
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.founder__cite {
  display: block;
  margin-top: 18px;
  color: var(--text-secondary);
  font-style: normal;
}
.founder__facts {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border-subtle);
}
.founder__facts li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.founder__facts .mono {
  color: var(--text-secondary);
  padding-top: 3px;
}
.founder__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

/* ----------------------------------------------------------------------------
   18 — CONTACT
   ---------------------------------------------------------------------------- */
.contact {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}
.contact__title {
  max-width: 14ch;
}
.contact__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
}
.contact__direct {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
.contact__direct .eyebrow {
  margin-bottom: 12px;
}
.copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.contact__email {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  word-break: break-all;
}
.copy-btn {
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.5625rem;
  transition: border-color 0.3s, color 0.3s;
}
.copy-btn:hover,
.copy-btn.is-copied {
  border-color: var(--accent);
}
.contact__meta {
  font-size: 1.125rem;
  line-height: 1.4;
}

/* ----------------------------------------------------------------------------
   19 — FOOTER
   ---------------------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(3rem, 6vh, 6rem) !important; /* clearance so the watermark never sinks into the edge */
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.footer__brand p {
  max-width: 32ch;
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.footer__col .eyebrow {
  margin-bottom: 16px;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a,
.footer__btn {
  font-size: 0.9375rem;
}
.footer__clocks li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 220px;
  font-variant-numeric: tabular-nums;
}
.footer__clocks .mono {
  color: var(--text-secondary);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-block: 24px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.footer__top {
  color: var(--text-secondary);
  transition: color 0.3s;
}
.footer__top:hover {
  color: var(--text-primary);
}
/* Full phrase always fits: sized so "LET'S WORK TOGETHER" stays inside the viewport at every width */
.footer__watermark {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 2rem 0 0 0 !important;
  padding: 0 2vw;
  font-size: clamp(1.6rem, 8.5vw, 10.5rem) !important; /* min lowered from 2.5rem so phones (320–470px) fit too */
  font-weight: 600;
  line-height: 1.05 !important;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  user-select: none;

  /* Architectural outline stroke — hollow letters; stroke + opacity come from the active theme */
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--wm-stroke);
  text-stroke: 1.5px var(--wm-stroke);
  opacity: var(--wm-opacity);
  letter-spacing: -0.03em;
  transition: -webkit-text-stroke-color 0.4s ease, opacity 0.4s ease;
}
.footer__watermark:hover {
  -webkit-text-stroke: 1.5px var(--wm-stroke-hover);
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   20 — PROJECT INQUIRY MODAL (3-step stepper)
   ---------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  /* Follows the visible viewport when a virtual keyboard opens (JS sets --vvh / --vvt on mobile) */
  top: var(--vvt, 0px);
  bottom: auto;
  height: var(--vvh, 100dvh);
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}
.modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.modal.is-open .modal__backdrop {
  opacity: 1;
}
.modal__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-primary);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.9s var(--ease);
}
.modal.is-open .modal__panel {
  transform: none;
}
/* GSAP drives the choreography when available; CSS transitions are the fallback */
.modal--gsap .modal__panel,
.modal--gsap.is-open .modal__panel {
  transform: none;
  transition: none;
}
.modal--gsap .modal__backdrop {
  transition: none;
}

.modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h-compact);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.modal__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Site logo (same .brand as the header) followed by the "Start a project" label */
.modal__head-start {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  min-width: 0;
}
@media (max-width: 479.98px) {
  /* logo + label + [Close] don't fit on one line on small phones: the logo takes the label's place */
  .modal__head-start .modal__brand {
    display: none;
  }
}
.modal__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-primary);
  transition: border-color 0.3s, color 0.3s;
}
.modal__close:hover,
.modal__close:focus-visible {
  border-color: var(--accent);
}

.modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-top: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.modal__intro .eyebrow {
  margin-bottom: 18px;
}
.modal__lede {
  max-width: 38ch;
  margin-top: 24px;
  color: var(--text-secondary);
}
.modal__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.modal__direct > .mono {
  color: var(--text-secondary);
}
.modal__book {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.modal__book span {
  display: inline-block;
  color: var(--accent-ink);
  transition: transform 0.5s var(--ease);
}
.modal__book:hover span {
  transform: translateX(4px);
}
.modal__mail {
  color: var(--text-secondary);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Stepper progress */
.pim__progress {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.pim__steps {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pim__steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.4s var(--ease);
}
.pim__steps li .mono {
  padding: 3px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pim__steps li.is-active,
.pim__steps li.is-done {
  color: var(--text-primary);
}
.pim__steps li.is-active .mono {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}
.pim__steps li.is-done .mono {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pim__bar {
  height: 1px;
  margin-top: 16px;
  background: var(--border-subtle);
  overflow: hidden;
}
.pim__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0.3333);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
}

/* Steps */
.pim__step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pim__step[hidden] {
  display: none;
}
.pim__q {
  display: block;
  padding: 0;
  margin-bottom: 12px;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--text-primary);
  outline: none;
}
.pim__q .mono {
  display: block;
  margin-bottom: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.14em;
}
.pim__hint {
  margin-bottom: 22px;
  color: var(--text-secondary);
}
.pim__optional {
  color: var(--text-dim);
}

/* Pill badges (multi / single select) */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  position: relative;
  cursor: pointer;
}
.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pill span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pill span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pill:hover span {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.pill input:checked + span {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}
.pill input:checked + span::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.pill input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.pill:active span {
  transform: scale(0.97);
}
.pills--tiers {
  display: grid;
  grid-template-columns: 1fr;
}
.pill--tier span {
  width: 100%;
  min-height: 60px;
  border-radius: 14px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pills--sm .pill span {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.85rem;
}

/* Floating-label fields (no browser-default borders) */
.ff {
  position: relative;
  margin-bottom: 8px;
}
.ff input,
.ff textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: 26px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 0.3s var(--ease);
}
.ff textarea {
  min-height: 132px;
  resize: vertical;
}
.ff label {
  position: absolute;
  left: 0;
  top: 26px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--text-secondary);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.ff input:focus + label,
.ff input:not(:placeholder-shown) + label,
.ff textarea:focus + label,
.ff textarea:not(:placeholder-shown) + label {
  transform: translateY(-22px) scale(0.62);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ff input:focus,
.ff textarea:focus {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent); /* thicker custom focus line */
}
.ff input:focus + label,
.ff textarea:focus + label {
  color: var(--accent-ink);
}
.ff input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  transition: background-color 9999s 0s; /* keep autofill from painting a yellow box */
}
.ff.has-error input,
.ff.has-error textarea {
  border-bottom-color: var(--accent);
}
.pim__timeline {
  margin-top: 20px;
}
.pim__timeline .pim__hint {
  margin-bottom: 12px;
}

.field__error {
  min-height: 1.2em;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.field__error:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* Navigation row */
.pim__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.pim__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text-secondary);
  transition: color 0.3s;
}
.pim__back:hover,
.pim__back:focus-visible {
  color: var(--text-primary);
}
.pim__back[hidden] {
  display: none;
}
.pim__next {
  margin-left: auto;
}
.form-status {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
/* A delivery message gets its own full-width row above Back / submit, so nothing gets squeezed */
.pim__nav {
  flex-wrap: wrap;
}
.form-status:not(:empty) {
  order: -1;
  flex-basis: 100%;
}
.form-status:empty {
  display: none;
}
.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}
/* Delivery states on the submit button (script.js → Form.setLabel). The longer labels may wrap. */
.pim__next[data-state="sending"],
.pim__next[data-state="sent"],
.pim__next[data-state="failed"] {
  white-space: normal;
  text-align: center;
  max-width: min(100%, 360px);
  line-height: 1.3;
}
.pim__next[data-state="sending"] {
  cursor: progress;
}
.pim__next[data-state="sent"] {
  pointer-events: none;
}
.pim__next[data-state="failed"] {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--accent);
}
.pim__next:disabled {
  cursor: default;
}

/* Success screen */
.pim__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-top: clamp(8px, 2vw, 24px);
  outline: none;
}
.pim__done[hidden] {
  display: none;
}
.pim__done-mark {
  width: 56px;
  height: 56px;
  color: var(--accent);
}
.pim__done-mark svg {
  width: 100%;
  height: 100%;
}
.pim__done-title {
  font-size: clamp(2.4rem, 5.2vw, 4.75rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.pim__done-text {
  max-width: 30ch;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pim__done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 600px) {
  .pills--tiers {
    grid-template-columns: 1fr 1fr;
  }
}

/* Phones: the step navigation stays reachable above the keyboard / at the bottom of the sheet */
@media (max-width: 767.98px) {
  .modal__body {
    gap: 32px;
  }
  .modal__lede {
    display: none; /* intro stays short so step 1 is visible without scrolling */
  }
  .modal__direct {
    margin-top: 20px;
  }
  .pim__nav {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-primary);
  }
  .pim__next {
    min-height: 52px;
    padding: 0 22px;
  }
  .ff input,
  .ff textarea,
  .ff label {
    font-size: 1rem; /* ≥16px prevents iOS zoom-on-focus */
  }
}

/* ----------------------------------------------------------------------------
   RESPONSIVE — 480 / 768 / 1024 / 1280 / 1920
   ---------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stack__main ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .theme-switch__label {
    display: inline;
  }
  .theme-switch__swatch {
    display: none;
  }
  .theme-switch__btn {
    padding: 0 13px;
  }
  .hero__bottom {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .scroll-indicator {
    display: flex;
  }
  .global__grid {
    grid-template-columns: 1fr 1fr;
  }
  .global__head {
    grid-column: 1 / -1;
  }
  .global__globe {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .global__col {
    grid-template-columns: 1fr;
  }
  .lab__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fig-challenge {
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }
  .fc-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .fc-lines path {
    fill: none;
    stroke: var(--border-strong);
    stroke-dasharray: 4 6;
    vector-effect: non-scaling-stroke;
  }
  .fig-system {
    grid-template-columns: repeat(2, 1fr);
  }
  .stack__card {
    position: sticky;
  }
  .stack__card + .stack__card {
    margin-top: 22vh;
  }
  .stack__inner {
    grid-template-columns: 5fr 7fr;
  }
  .stack__side {
    border-bottom: 0;
    border-right: 1px solid var(--border-subtle);
  }
  .pv {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
  .why__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }
  .contact__direct {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1360px) {
  .status-pill {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .menu__grid {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    align-items: start;
  }
  .menu__aside {
    padding-top: 12px;
  }
  .global__grid {
    grid-template-columns: 1fr minmax(360px, 1.3fr) 1fr;
  }
  .global__globe {
    grid-column: auto;
    grid-row: auto;
  }
  .global__col--right {
    text-align: right;
  }
  .global__col--right .global__small {
    justify-content: flex-end;
  }
  .work__intro,
  .lab__intro,
  .team__intro,
  .process__intro {
    grid-template-columns: 7fr 5fr;
  }

  .case__layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 112px);
  }
  .case__indicator {
    top: calc(var(--header-h-compact) + 40px);
    align-self: start;
    margin: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
  }
  .case__indicator-inner {
    display: block;
  }
  .case__indicator-label {
    display: block;
    color: var(--text-secondary);
  }
  .case__indicator-num {
    margin-top: 6px;
    font-size: clamp(5rem, 8vw, 8rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
  }
  .case__indicator-title {
    margin-top: 10px;
    font-size: 1.5rem;
  }
  .case__steps {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    border-top: 1px solid var(--border-subtle);
  }
  .case__steps a {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    transition: color 0.3s, padding 0.5s var(--ease);
  }
  .case__steps .is-active a {
    color: var(--text-primary);
    padding-left: 8px;
  }
  .case__steps .is-active .mono {
    color: var(--accent-ink);
  }
  .case__progress {
    margin-top: 24px;
  }

  /* Capabilities index: full-width rows gain the stack pills; drawers split copy | visual */
  .service__trigger {
    grid-template-columns: var(--svc-meta) minmax(0, 1fr) auto auto;
  }
  .service__stack {
    display: inline-flex;
  }
  .services__hint {
    display: inline-flex;
  }
  .service__panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .service__panel-inner > .svc-v {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-left: 0;
  }

  .team__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .founder__grid {
    grid-template-columns: 5fr 7fr;
  }
  .lab__grid {
    gap: 20px;
  }
  .why__list {
    grid-template-columns: repeat(5, 1fr);
    border-top: 0;
  }
  .why__item {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 28px 24px 28px 0;
    border-bottom: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .why__item p {
    grid-column: 1;
  }
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .modal__body {
    grid-template-columns: 5fr 7fr;
    gap: clamp(48px, 6vw, 112px);
  }
  .modal__intro {
    position: sticky;
    top: calc(var(--header-h-compact) + 48px);
    align-self: start;
  }
}

@media (min-width: 1280px) {
  .lab__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1920px) {
  :root {
    --container: 1840px;
  }
  body {
    font-size: 17px;
  }
}

/* Tight phones (320–379px) */
@media (max-width: 379px) {
  .menu-toggle__text {
    display: none;
  }
  .menu-toggle {
    padding: 0 5px;
  }
  .brand__name {
    font-size: 0.8125rem;
  }
  .btn--lg {
    min-height: 56px;
    padding: 0 24px;
  }
  .hero__meta span:last-child {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
   21 — MOTION PREFERENCES
   ---------------------------------------------------------------------------- */
@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;
  }
  .marquee__track {
    animation: none;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .why__statement .word {
    opacity: 1;
  }
}

/* Touch devices: no hover-only affordances */
@media (hover: none) {
  .lab-card__inner {
    transform: none !important;
  }
  /* No hover on touch: show portraits at natural vibrancy */
  .member__photo img,
  .founder__photo img {
    filter: saturate(1) contrast(1.05) brightness(0.98);
  }
}