/* ==========================================================================
   Zeyad Alaa — cinematic portfolio
   Tokens → base → type → layout → components → sections → breakpoints.
   The default styles are the static layout (no JS, reduced motion, Save-Data).
   The pinned, scroll-driven film layout is added under html.motion (Phase 5).
   ========================================================================== */

/*
 * Fallback font metrics: while Instrument Sans/Serif load, these give the system fallback the same
 * advance width and vertical metrics, so the swap to the webfont causes no reflow (near-zero CLS).
 * Measured in Chromium with canvas measureText()/actualBoundingBox against the loaded webfonts, the
 * same technique tools like Fontaine use — see BUILD-PLAN.md Phase 6 for the numbers.
 */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 100.74%;
  ascent-override: 94.32%;
  descent-override: 21.84%;
}

@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman");
  size-adjust: 80.28%;
  ascent-override: 119.59%;
  descent-override: 27.41%;
}

/* --- Tokens: palette sampled from the three films & semantic surface system --- */
:root {
  /* Semantic Surface System (Dark → Neutral → Light) */
  --surface-dark: #08090b;             /* deep charcoal cinematic base */
  --surface-dark-elevated: #111316;    /* graphite raised surface / technical cards */
  --surface-dark-highlight: #171a1d;   /* dark card borders and intermediate depth */
  --surface-light: #f5f5f2;            /* soft warm off-white editorial */
  --surface-light-elevated: #fafaf8;   /* raised editorial surface */
  --surface-neutral: #e9eef0;          /* cool neutral intermediate tone */
  --surface-neutral-alt: #f1f3f2;      /* soft neutral stone */

  /* Legacy aliases mapped into semantic tokens */
  --studio: var(--surface-light);
  --studio-hi: var(--surface-light-elevated);
  --void: var(--surface-dark);
  --night: var(--surface-dark-elevated);

  --ink: #0a0e0d;
  --ink-2: #4a5250;
  --teal-ink: #0e5f5e;
  --bone: #e6e4df;
  --bone-2: #9aa3a1;
  --teal: #2ea8a7;                     /* screen glow / accent */
  --amber: #d99a4e;                    /* the one warm spark */

  --serif: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-mega: clamp(4.5rem, 26.5vw, 34rem); /* "Zeyad Alaa" is 3.32em wide: this spans the content width */
  --fs-display: clamp(3rem, 8vw, 8.5rem);
  --fs-title: clamp(2.75rem, 6.2vw, 6.5rem);
  --fs-statement: clamp(2.25rem, 5.2vw, 5.5rem);
  --fs-h3: clamp(1.75rem, 3.4vw, 3.25rem);
  --fs-stat: clamp(3.5rem, 7vw, 7rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --margin: clamp(16px, 4vw, 64px);
  --gutter: clamp(16px, 2vw, 32px);
  --section: clamp(6rem, 14vh, 12rem);
  --header-h: 64px;
  --radius-media: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Each section declares its light; components read these. */
[data-tone="day"] {
  --bg: var(--surface-light);
  --bg-raised: var(--surface-light-elevated);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --accent: var(--teal-ink);
  --line: rgb(10 14 13 / 0.12);
  --line-strong: rgb(10 14 13 / 0.28);
  --focus: var(--ink);
}

[data-tone="neutral"] {
  --bg: var(--surface-neutral);
  --bg-raised: var(--surface-light);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --accent: var(--teal-ink);
  --line: rgb(10 14 13 / 0.12);
  --line-strong: rgb(10 14 13 / 0.28);
  --focus: var(--ink);
}

[data-tone="night"] {
  --bg: var(--surface-dark);
  --bg-raised: var(--surface-dark-elevated);
  --fg: var(--bone);
  --fg-2: var(--bone-2);
  --accent: var(--teal);
  --line: rgb(230 228 223 / 0.12);
  --line-strong: rgb(230 228 223 / 0.28);
  --focus: var(--teal);
}

/* The page-level light follows the section under the header (script.js). */
html {
  --h-fg: var(--ink);
  --h-shade: rgb(245 245 242 / 0.85);
  --h-focus: var(--ink);
  --grain: 0.24;
  background: var(--surface-light);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-theme="neutral"] {
  --h-fg: var(--ink);
  --h-shade: rgb(233 238 240 / 0.85);
  --h-focus: var(--ink);
  --grain: 0.26;
  background: var(--surface-neutral);
  color-scheme: light;
}

html[data-theme="night"] {
  --h-fg: var(--bone);
  --h-shade: rgb(8 9 11 / 0.78);
  --h-focus: var(--teal);
  --grain: 0.38;
  background: var(--surface-dark);
  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
figure,
dl,
dd,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--teal);
  color: var(--void);
}

:focus-visible {
  outline: 2px solid var(--focus, var(--teal));
  outline-offset: 3px;
  border-radius: 3px;
}

main:focus {
  outline: none;
}

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

/* Film grain: one fixed tile over everything, no blend modes (cheap to composite). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("assets/img/grain.png") 0 0 / 256px 256px repeat;
  opacity: var(--grain);
}

/* --- Type ------------------------------------------------------------------ */
.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.statement {
  font-family: var(--serif);
  font-size: var(--fs-statement);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.title {
  font-family: var(--serif);
  font-size: var(--fs-title);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lead {
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* --- Layout ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* --- Components ------------------------------------------------------------ */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--ext {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;
  vertical-align: -0.02em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 26px 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

.btn .icon {
  transition: transform 0.4s var(--ease-out);
}

.btn:hover .icon--arrow {
  transform: translateX(4px);
}

.btn:hover .icon--ext {
  transform: translate(2px, -2px);
}

.btn--primary {
  background: var(--fg);
  color: var(--bg);
}

.btn--primary:hover {
  border-color: var(--accent);
  background: var(--accent);
}

[data-tone="day"] .btn--primary:hover {
  color: var(--studio);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--fg);
}

.text-btn {
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  background: none;
  font-size: var(--fs-small);
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out);
}

.text-btn:hover {
  color: var(--fg);
  text-decoration-color: currentColor;
}

.no-js [data-copy] {
  display: none;
}

/* A short teal tick: the site's one structural mark (pillars, principles, lists, index). */
.tick {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--teal);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}

.tags li {
  white-space: nowrap;
}

.tags li:not(:last-child)::after {
  content: "·";
  margin-inline: 0.55em;
  opacity: 0.6;
}

.proof {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.proof a {
  color: var(--fg);
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.3s var(--ease-out);
}

.proof a:hover {
  text-decoration-color: currentColor;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 30px;
  padding: 5px 13px;
  border: 1px solid var(--chip-line, var(--line-strong));
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--fg);
}

.chip__status {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chip-ink, var(--fg));
}

.chip[data-status="built"] {
  --chip-line: var(--teal);
  --chip-ink: var(--teal);
}

.chip[data-status="prototype"] {
  --chip-line: var(--bone-2);
}

.chip[data-status="demo"] {
  --chip-line: var(--amber);
  --chip-ink: var(--amber);
}

.chip:is([data-status="experiment"], [data-status="concept"], [data-status="planned"], [data-status="adapter"]) {
  --chip-ink: var(--fg-2);
  border-style: dashed;
}

.chip[data-status="note"] {
  padding-inline: 0;
  border-color: transparent;
  color: var(--fg-2);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--studio);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* --- Header ---------------------------------------------------------------- */
.site-header {
  --focus: var(--h-focus);
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: var(--header-h);
  padding-inline: var(--margin);
  color: var(--h-fg);
  transition: color 0.5s var(--ease-out);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -24px;
  z-index: -1;
  background: linear-gradient(var(--h-shade), transparent);
  pointer-events: none;
}

.brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 32px);
  margin-left: auto;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
  padding-inline: 4px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}

.site-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.availability {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.availability__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgb(217 154 78 / 0.2);
}

/* --- Scenes (static layout: still frame + type; the film arrives in motion mode) --- */
.scene {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}

.scene__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.scene__media {
  position: relative;
  grid-area: 1 / 1;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}

/* The film: poster(s) plus the canvas the frame engine draws into. Transitions move this as one piece. */
.scene__film {
  position: absolute;
  inset: 0;
}

.scene__poster,
.scene__poster img {
  width: 100%;
  height: 100%;
}

/* Motion-only pieces stay out of the static layout. */
.scroll-cue,
.rail,
.scene__canvas,
.scene__poster--start {
  display: none;
}

.hud__tc:empty {
  display: none;
}

.scene__poster img {
  object-fit: cover;
  object-position: var(--focal-x, 50%) 50%;
}

.scene__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud {
  z-index: 2;
  grid-area: 1 / 1;
  align-self: start;
  display: grid;
  gap: 6px;
  padding: calc(var(--header-h) + 10px) var(--margin) 0;
  color: var(--fg-2);
}

.hud p {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Hero — SC 01, The Turn */
.scene--turn {
  --focal-x: 47%;
}

.scene--turn .scene__shade {
  background: radial-gradient(130% 95% at 50% 38%, transparent 58%, rgb(10 14 13 / 0.1) 100%);
}

.hero__card {
  z-index: 2;
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--gutter);
  row-gap: clamp(10px, 1.8vh, 22px);
  padding: 0 var(--margin) clamp(18px, 4vh, 44px);
  color: var(--ink);
}

.hero__name {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-inline-start: -0.045em;
  font-family: var(--serif);
  font-size: var(--fs-mega);
  line-height: 0.8;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.hero__role,
.hero__meta {
  grid-row: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero__role {
  grid-column: 1;
}

.hero__meta {
  grid-column: 2;
  text-align: right;
}

.hero__beats {
  grid-row: 2;
  grid-column: 1;
  padding-block: clamp(6rem, 18vh, 12rem);
  background: var(--bg);
}

.beat--physics {
  grid-column: 1 / span 8;
}

.beat--code {
  grid-column: 5 / span 8;
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
}

.beat--ai {
  grid-column: 2 / span 9;
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
}

.beat--now {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--gutter);
  row-gap: clamp(1.75rem, 4vh, 2.75rem);
  margin-top: clamp(5rem, 16vh, 10rem);
}

.beat--now .display {
  grid-column: 1 / span 11;
}

.beat--now .lead {
  grid-column: 1 / span 5;
}

.beat--now .actions {
  grid-column: 7 / span 6;
  justify-content: flex-end;
}

/* SC 02 — The Build */
.scene--build {
  --focal-x: 57%;
}

/* Scrims fade the still fully into the night page at both edges, and keep overlay text AA over the screens. */
.scene--build .scene__shade {
  background:
    linear-gradient(180deg, rgb(7 12 11 / 1) 0%, rgb(7 12 11 / 0) 24%),
    linear-gradient(90deg, rgb(7 12 11 / 0.82) 0%, rgb(7 12 11 / 0.5) 34%, rgb(7 12 11 / 0) 62%),
    linear-gradient(0deg, rgb(7 12 11 / 1) 0%, rgb(7 12 11 / 0.6) 22%, rgb(7 12 11 / 0) 52%);
}

.build__intro {
  z-index: 2;
  grid-area: 1 / 1;
  align-self: end;
  max-width: min(100%, 64rem);
  padding: 0 var(--margin) clamp(40px, 9vh, 96px);
}

.build__label {
  margin-bottom: clamp(1rem, 3vh, 1.75rem);
  color: var(--accent);
}

.pillars {
  grid-row: 2;
  grid-column: 1;
  padding-block: var(--section);
  background: var(--bg);
}

.pillars__list {
  row-gap: 64px;
}

.pillar {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pillar::before {
  content: "";
  width: 32px;
  height: 2px;
  margin-bottom: 6px;
  background: var(--teal);
}

.pillar__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  font-stretch: 85%;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pillar__line {
  max-width: 36ch;
  color: var(--fg-2);
}

.pillar .proof {
  margin-top: auto;
  padding-top: 6px;
}

/* SC 03 — The Walk (contact) */
.scene--walk .scene__shade {
  background:
    linear-gradient(180deg, rgb(7 12 11 / 1) 0%, rgb(7 12 11 / 0) 22%),
    linear-gradient(0deg, rgb(7 12 11 / 1) 0%, rgb(7 12 11 / 0.88) 30%, rgb(7 12 11 / 0) 68%),
    radial-gradient(110% 90% at 50% 35%, transparent 55%, rgb(7 12 11 / 0.6) 100%);
}

.contact__card {
  z-index: 2;
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--margin) clamp(32px, 7vh, 80px);
}

.contact__card > * {
  grid-column: 1 / span 9;
}

.contact__label {
  color: var(--accent);
}

.contact__title {
  margin-top: clamp(14px, 2.4vh, 22px);
}

.contact__title em {
  color: var(--amber);
}

.contact__lead {
  margin-top: clamp(18px, 3vh, 28px);
}

.contact__card .actions {
  margin-top: clamp(22px, 4vh, 36px);
}

.contact__meta {
  margin-top: clamp(18px, 3vh, 28px);
  color: var(--fg-2);
}

/* --- Stats strip ------------------------------------------------------------ */
.facts {
  padding-block: clamp(4rem, 11vh, 7.5rem);
  background: var(--bg-raised);
  color: var(--fg);
}

.facts__title {
  color: var(--fg-2);
}

/* Hairlines between cells come from the 1px gaps showing the list's background. */
.facts__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vh, 3rem);
  border-block: 1px solid var(--line-strong);
  background: var(--line);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3.4vh, 34px) var(--gutter) clamp(20px, 3vh, 28px);
  background: var(--bg-raised);
}

/* The first cell of each row lines up with the page grid (5 per row here, 3 and 2 below). */
.fact:nth-child(5n + 1) {
  padding-left: 0;
}

.fact__num {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--fs-stat);
  font-weight: 500;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.fact__suffix {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--accent);
  margin-inline-start: 2px;
  user-select: none;
}

.fact__label {
  max-width: 20ch;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.fact__src {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

a.fact__src:hover {
  text-decoration: underline;
}

/* --- Tools & Technology Stack Marquee --------------------------------------- */
.stack-marquee {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(2rem, 5vh, 3.25rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
  position: relative;
}

.marquee-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.marquee-row__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-track--left {
  animation: marquee-left 34s linear infinite;
}

.marquee-track--right {
  animation: marquee-right 38s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
  list-style: none;
  margin: 0;
  padding-left: 0;
  flex-shrink: 0;
}

@keyframes marquee-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marquee-right {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.tech-pill:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  color: var(--teal);
  background: var(--bg-raised);
  box-shadow: 0 4px 12px rgba(46, 168, 167, 0.15);
}

.tech-pill__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track--left,
  .marquee-track--right {
    animation: none;
  }
  .marquee-row__viewport {
    overflow: hidden;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .marquee-track {
    flex-wrap: wrap;
    width: 100%;
  }
  .marquee-group[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 640px) {
  .marquee-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .marquee-row__viewport {
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  }
}

/* --- Mission ------------------------------------------------------------------ */
.mission {
  background: var(--bg);
  color: var(--fg);
}

/* The day copy only exists for the lights-out wipe in motion mode. */
.mission__layer--day {
  display: none;
}

.mission__layer--night {
  padding-block: clamp(8rem, 26vh, 16rem);
}

.mission__label {
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
  color: var(--accent);
}

.mission__text {
  max-width: 16.5em;
}

.mission__first {
  display: block;
}

.mission__em {
  font-style: italic;
  color: var(--accent);
}

.mission__layer--day .mission__em {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: clamp(4px, 0.5vw, 8px);
}

.nowrap {
  white-space: nowrap;
}

/* --- Story (Editorial light with crisp architectural boundary) --- */
.story {
  position: relative;
  padding-block: var(--section);
  background: var(--surface-light);
  color: var(--fg);
  border-top: 1px solid var(--line);
}

.story__grid {
  align-items: start;
  row-gap: 48px;
}

/* --- Story reel: a horizontal filmstrip by default; html.motion below turns it into a single-frame,
   auto-advancing carousel. This base layer alone is the complete no-JS / reduced-motion / Save-Data page:
   every slide and caption is already in the DOM, so there is nothing broken to fall back from. */
.reel {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  grid-column: 1 / span 5;
}

.reel__stage {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  margin: 0;
}

.reel__slide {
  flex: 0 0 auto;
  width: min(70%, 320px);
  margin: 0;
  scroll-snap-align: start;
}

.reel__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--bg-raised);
}

.reel__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.reel__slide[data-pan] .reel__media img {
  object-position: 50% 24%;
}

.reel__cap {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.story__body {
  grid-column: 7 / span 6;
}

.story__label {
  margin-bottom: 20px;
  color: var(--accent);
}

.chain {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  border-top: 1px solid var(--line);
}

.chain li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.chain__word {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.chain__cap {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--fg-2);
  text-align: right;
}

.story__copy {
  display: grid;
  gap: 1.1em;
  max-width: 56ch;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  color: var(--fg-2);
}

.story__copy p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg);
}

.principles {
  display: grid;
  gap: 26px;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}

.principle {
  display: grid;
  gap: 6px;
}

.principle::before {
  content: "";
  width: 32px;
  height: 2px;
  margin-bottom: 8px;
  background: var(--teal);
}

.principle__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.principle__body {
  color: var(--fg-2);
}

/* --- Services & Work sections --- */
.services {
  position: relative;
  padding-block: var(--section);
  background: var(--surface-light);
  color: var(--fg);
}

.work {
  padding-top: clamp(6rem, 14vh, 10rem);
  padding-bottom: var(--section);
  background: var(--surface-dark-elevated);
  color: var(--fg);
  border-top: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 22px;
  margin-bottom: clamp(3.5rem, 11vh, 7rem);
}

.section-head > * {
  grid-column: 1 / span 8;
}

.section-head__label {
  color: var(--accent);
}

.section-head > .lead {
  grid-column: 1 / span 6;
}

.section-head > .legend {
  grid-column: 1 / -1;
  margin-top: 10px;
}

/* --- Services ------------------------------------------------------------------ */
.offer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 28px;
  padding-block: clamp(2.5rem, 7vh, 4rem);
  border-top: 1px solid var(--line);
}

.offer:last-child {
  border-bottom: 1px solid var(--line);
}

.offer__main {
  grid-column: 1 / span 6;
}

.offer__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  font-stretch: 85%;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.offer__promise {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--fg-2);
}

.offer__detail {
  grid-column: 8 / span 5;
}

.offer__label {
  margin-bottom: 10px;
  color: var(--fg-2);
}

.offer__list li {
  position: relative;
  padding: 7px 0 7px 24px;
}

.offer__list li::before {
  content: "";
  position: absolute;
  top: 1.2em;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--teal);
}

.offer .proof {
  margin-top: 16px;
}

/* --- Selected work ----------------------------------------------------------- */
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.work__index {
  grid-column: 1 / span 3;
}

.work__index ol {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  display: grid;
  gap: 2px;
}

.work__index a {
  position: relative;
  display: block;
  padding: 10px 0 10px 26px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--fg-2);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

.work__index a::before {
  content: "";
  position: absolute;
  top: calc(10px + 0.68em);
  left: 0;
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transition: width 0.35s var(--ease-out), opacity 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}

.work__index a:hover,
.work__index a[aria-current="true"] {
  color: var(--fg);
}

.work__index a[aria-current="true"]::before {
  width: 18px;
  height: 2px;
  background: var(--teal);
  opacity: 1;
}

.work__list {
  grid-column: 4 / -1;
  display: grid;
  gap: clamp(7rem, 20vh, 13rem);
}

/* Case cards: alternating dark / white backgrounds */
.case {
  scroll-margin-top: calc(var(--header-h) + 24px);
  position: relative;
  border-radius: var(--radius-card, 20px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.case[data-tone="night"] {
  background: var(--surface-dark, #0d0f12);
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.6);
}

.case[data-tone="day"] {
  --bg: #ffffff;
  --bg-raised: #f3f5f4;
  --fg: #0a0e0d;
  --fg-2: #48524f;
  --bone: #0a0e0d;
  --bone-2: #48524f;
  --line: rgba(10, 14, 13, 0.12);
  --line-strong: rgba(10, 14, 13, 0.22);
  --chip-line: rgba(10, 14, 13, 0.2);
  --chip-ink: #0a0e0d;
  background: #ffffff;
  color: var(--fg);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 52px -16px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.case[data-tone="day"] .case__title {
  color: #0a0e0d;
}

.case[data-tone="day"] .case__kicker {
  color: var(--teal-dark, #1c6b6a);
}

.case[data-tone="day"] .case__detail {
  color: var(--fg);
}

.case[data-tone="day"] .case__facts dt {
  color: #55605d;
}

.case[data-tone="day"] .case__facts dd {
  color: #0a0e0d;
}

.case[data-tone="day"] .case__credit {
  color: #55605d;
}

.case[data-tone="day"] .case__link a {
  color: #0a0e0d;
}

.case[data-tone="day"] .chip {
  background: #f7f9f8;
  color: #0a0e0d;
}

.case[data-tone="day"] .chip[data-status="built"] {
  --chip-line: #1c6b6a;
  --chip-ink: #1c6b6a;
}

.case[data-tone="day"] .chip[data-status="demo"] {
  --chip-line: #a05a00;
  --chip-ink: #a05a00;
}

.case[data-tone="day"] .chip[data-status="prototype"] {
  --chip-line: rgba(10, 14, 13, 0.25);
  --chip-ink: #333a38;
}

.case[data-tone="day"] .chip:is([data-status="experiment"], [data-status="concept"], [data-status="planned"], [data-status="adapter"]) {
  --chip-ink: #48524f;
  border-style: dashed;
}

.case[data-tone="day"] .tags li {
  background: #f0f2f1;
  color: #1a2220;
  border-color: rgba(10, 14, 13, 0.12);
}

.case[data-tone="day"] .case__figure figcaption {
  color: #48524f;
}

.case__frame-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.case__frame--gattai {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(46, 168, 167, 0.25);
  border-radius: var(--radius-media);
  background: var(--surface-dark);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.6);
  display: block;
}

/* --- Gattai: the wordmark on a premium dark stage, not a screenshot ------------------------------------ */
.stage--gattai {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 22px);
  padding: 20px;
  background:
    radial-gradient(ellipse 46% 62% at 50% 44%, rgba(46, 168, 167, 0.22), transparent 72%),
    repeating-linear-gradient(0deg, rgb(230 228 223 / 0.045) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgb(230 228 223 / 0.045) 0 1px, transparent 1px 32px),
    var(--surface-dark);
  transition: background 0.5s var(--ease-out);
}

.stage--gattai::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 min(18vw, 120px) min(6vw, 40px) rgb(0 0 0 / 0.55);
  pointer-events: none;
}

.case__frame--gattai:hover .stage--gattai {
  background:
    radial-gradient(ellipse 50% 68% at 50% 44%, rgba(46, 168, 167, 0.34), transparent 72%),
    repeating-linear-gradient(0deg, rgb(230 228 223 / 0.06) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgb(230 228 223 / 0.06) 0 1px, transparent 1px 32px),
    var(--surface-dark);
}

.stage__mark {
  width: min(44%, 320px);
  height: auto;
  position: relative;
  z-index: 1;
}

.stage__sweep {
  fill: url(#ga-sweep-grad);
}

.stage__tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.8125rem, 1.3vw, 0.9375rem);
  color: var(--bone-2);
  z-index: 1;
}

.stage__modules {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-2);
  opacity: 0.6;
  text-align: center;
  z-index: 1;
}

.case__frame-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 9, 11, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
  z-index: 2;
}

.case__frame--gattai:hover .case__frame-badge {
  background: rgba(46, 168, 167, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  color: #08090b;
}

.case__frame--gattai .case__frame-badge .icon--ext {
  width: 12px;
  height: 12px;
}

.case__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--bg-raised);
}

.case__frame .comp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case__frame--video {
  background: var(--surface-dark);
}

.case__frame--dentomind {
  border-color: rgb(46 168 167 / 0.22);
  box-shadow: 0 20px 48px -16px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(46 168 167 / 0.1);
}

.case__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background-color: var(--surface-dark);
}

.case__video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(8 9 11 / 0.15) 0%, transparent 20%, transparent 80%, rgb(8 9 11 / 0.35) 100%);
  border-radius: inherit;
}

.case__figure figcaption {
  max-width: 60ch;
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.case__body {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

.case__head {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.case__kicker {
  color: var(--fg-2);
}

.case__title {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 5.2vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.case__head .chips {
  margin-top: 10px;
}

.case__detail {
  grid-column: 5 / span 5;
}

.case__facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}

.case__facts > div:last-child {
  border-bottom: 1px solid var(--line);
}

.case__facts dt {
  padding-top: 0.4em;
  color: var(--fg-2);
}

.case__credit {
  margin-top: 22px;
  font-size: var(--fs-small);
}

.case__stack {
  margin-top: 10px;
}

.case__link {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.case__link a {
  color: var(--fg);
}

/* Case compositions: diagrams drawn in SVG, hairlines stay 1px at any size. */
.comp {
  overflow: visible;
}

.comp text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.12em;
  fill: var(--bone-2);
}

.comp .t-serif {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  fill: var(--bone);
}

.comp .t-italic {
  font-style: italic;
}

.comp .t-accent {
  fill: var(--teal);
}

.comp .t-muted {
  opacity: 0.55;
}

.comp .ln {
  fill: none;
  stroke: var(--bone);
  stroke-opacity: 0.3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.comp .ln--faint {
  stroke-opacity: 0.14;
}

.comp .ln--dash {
  stroke-dasharray: 3 7;
}

.comp .ln--accent {
  stroke: var(--teal);
  stroke-opacity: 0.9;
}

.comp .ln--solid {
  stroke-opacity: 0.6;
}

.comp .node {
  fill: var(--void);
  stroke: var(--bone);
  stroke-opacity: 0.7;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.comp :is(.node--gate, .node--lit) {
  fill: var(--teal);
  stroke: var(--teal);
  stroke-opacity: 1;
}

.comp .gate {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.comp .slice {
  fill: none;
  stroke: var(--bone);
  stroke-opacity: calc(0.85 - var(--i) * 0.065);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.comp .slice--marked {
  stroke: var(--teal);
  stroke-opacity: 0.95;
}

.comp .teeth {
  fill: none;
  stroke: var(--bone);
  stroke-opacity: 0.85;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 17;
}

.comp .cell {
  fill: var(--teal);
  fill-opacity: 0.85;
}

.comp .cell--pending {
  fill: none;
  stroke: var(--bone-2);
  stroke-dasharray: 2 2;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- Footer ------------------------------------------------------------------- */
.site-footer {
  overflow: hidden;
  padding-block: clamp(5rem, 14vh, 9rem) 28px;
  background: var(--bg);
  color: var(--fg);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 40px;
}

.footer__col {
  grid-column: span 2;
}

.footer__col:first-child {
  grid-column: 1 / span 3;
}

.footer__col h2 {
  margin-bottom: 16px;
  color: var(--fg-2);
}

.footer__col li + li {
  margin-top: 8px;
}

.footer__col a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease-out);
}

.footer__col a:hover {
  background-size: 100% 1px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__link .icon--social {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.75;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.footer__link:hover .icon--social {
  opacity: 1;
  transform: translateY(-1px);
}

.footer__colophon {
  grid-column: 9 / span 4;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.footer__colophon a {
  color: var(--fg);
}

.footer__mark {
  margin-top: clamp(4rem, 12vh, 8rem);
  margin-inline-start: -0.04em;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 26.5vw, 34rem); /* bookends the hero name at the same width */
  line-height: 0.78;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--bone);
  /* 3.2:1 at this size (large text, WCAG AA) — still reads as a faint watermark, not a heading. */
  opacity: 0.4;
}

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  color: var(--fg-2);
}

/* --- Breakpoints ---------------------------------------------------------------- */
@media (max-aspect-ratio: 9/10) {
  .scene {
    --focal-x: 50%;
  }
}

@media (max-width: 1199px) {
  .availability__more {
    display: none;
  }
}

@media (max-width: 1080px) {
  .facts__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fact:last-child {
    grid-column: span 2;
  }

  .fact:nth-child(5n + 1) {
    padding-left: var(--gutter);
  }

  .fact:nth-child(3n + 1) {
    padding-left: 0;
  }

  .pillar {
    grid-column: 1 / -1;
  }

  .pillar__line {
    max-width: 52ch;
  }

  .reel {
    grid-column: 1 / span 5;
  }

  .story__body {
    grid-column: 6 / span 7;
  }

  .offer__main {
    grid-column: 1 / span 7;
  }

  .work__index {
    display: none;
  }

  .work__list {
    grid-column: 1 / -1;
  }

  .case__head,
  .case__detail {
    grid-column: 1 / -1;
  }

  .case__frame--dentomind .case__video {
    object-position: 48% 50%;
  }

  .footer__col,
  .footer__col:first-child {
    grid-column: span 4;
  }

  .footer__colophon {
    grid-column: 1 / span 8;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 56px;
  }

  .brand {
    font-size: 1.3rem;
  }

  .site-nav {
    gap: 16px;
  }

  .site-nav a {
    font-size: 0.8125rem;
  }

  .availability__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Phones: the name leads, the role and base sit under it, clear of the chest embroidery. */
  .hud__credit {
    display: none;
  }

  .hero__card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .hero__name {
    grid-row: 1;
    margin-bottom: 10px;
    font-size: 30vw;
    line-height: 0.82;
  }

  .hero__role,
  .hero__meta {
    grid-column: 1;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-align: left;
  }

  .hero__role {
    grid-row: 2;
  }

  .hero__meta {
    grid-row: 3;
  }

  .hero__first,
  .hero__last {
    display: block;
  }

  .beat--physics,
  .beat--code,
  .beat--ai,
  .beat--now .display,
  .beat--now .lead,
  .beat--now .actions {
    grid-column: 1 / -1;
  }

  .beat--now .actions {
    justify-content: flex-start;
  }

  .actions .btn {
    flex: 1 1 auto;
  }

  .facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact:last-child {
    grid-column: span 2;
  }

  .fact:nth-child(3n + 1) {
    padding-left: var(--gutter);
  }

  .fact:nth-child(2n + 1) {
    padding-left: 0;
  }

  /* The portrait poster puts the white T-shirt behind the card: a taller, denser scrim keeps it AA. */
  .scene--walk .scene__shade {
    background:
      linear-gradient(180deg, rgb(7 12 11 / 1) 0%, rgb(7 12 11 / 0) 18%),
      linear-gradient(0deg, rgb(7 12 11 / 1) 0%, rgb(7 12 11 / 0.93) 42%, rgb(7 12 11 / 0.6) 58%, rgb(7 12 11 / 0) 74%);
  }

  .reel {
    position: static;
  }

  .reel,
  .story__body,
  .section-head > *,
  .section-head > .lead,
  .offer__main,
  .offer__detail,
  .contact__card > * {
    grid-column: 1 / -1;
  }

  .chain li {
    flex-direction: column;
    gap: 2px;
  }

  .chain__cap {
    text-align: left;
  }

  .case__frame--dentomind {
    aspect-ratio: 4 / 3;
  }

  .case__frame--dentomind .case__video {
    object-position: 42% 50%;
  }

  .case__facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .comp text {
    font-size: 23px;
  }

  .comp .t-serif {
    font-size: 32px;
  }

  .footer__col,
  .footer__col:first-child {
    grid-column: span 6;
  }

  .footer__col:first-child,
  .footer__colophon {
    grid-column: 1 / -1;
  }

  .footer__base {
    flex-direction: column;
    gap: 6px;
  }
}

/* --- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Motion layout (html.motion): the pinned film, the lights-out and the type
   that moves with the camera. Only applies when script.js has GSAP and the
   visitor has not asked for reduced motion or Save-Data.
   ========================================================================== */

/* Split text: every word sits in a mask taller than its line, so risers and descenders survive. */
.split {
  display: inline;
}

.w {
  display: inline-block;
  overflow: hidden;
  padding: 0.1em 0.06em 0.18em;
  margin: -0.1em -0.06em -0.18em;
  vertical-align: top;
}

.w__i {
  display: inline-block;
}

/* Pinned scenes: a tall section and a sticky, full-height stage. Frames play while it is pinned. */
html.motion .scene {
  height: var(--scene-h, 100svh);
}

html.motion .scene--turn {
  --scene-h: 400svh;
}

html.motion .scene--build {
  --scene-h: 500svh;
}

html.motion .scene--walk {
  --scene-h: 380svh;
}

html.motion .scene__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}

html.motion .scene__stage > * {
  grid-area: 1 / 1;
}

html.motion .scene__media {
  height: 100%;
  min-height: 0;
}

html.motion .scene__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

html.motion .scene__stage[data-ready] .scene__canvas {
  opacity: 1;
}

html.motion .scene__poster--start {
  display: block;
}

html.motion .scene__poster--end {
  display: none;
}

/* The build and walk films fade/scale in and out on their own layer; the turn's film never transforms. */
html.motion :is(.scene--build, .scene--walk) .scene__film {
  will-change: transform, opacity;
}

/* Hero: the title card, then three lines timed to the turn. */
html.motion .hero__card {
  z-index: 3;
}

html.motion .hero__name {
  margin-bottom: 0.1em;
}

html.motion .scroll-cue {
  z-index: 3;
  display: block;
  align-self: center;
  justify-self: end;
  margin-right: var(--margin);
  color: var(--fg-2);
  pointer-events: none;
}

.scroll-cue__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scroll-cue__line {
  width: 1px;
  height: 56px;
  background: currentColor;
  transform-origin: top;
  animation: cue 2.4s var(--ease-out) infinite;
}

.scroll-cue__label {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

html.motion .hero__beats {
  z-index: 3;
  padding: 0;
  background: none;
  pointer-events: none;
}

html.motion .hero__beats > .wrap {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  padding: 0;
}

html.motion .beat {
  position: absolute;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

/* Below his head in every frame of the turn, and clear of the centre where he stands. */
html.motion .beat--physics {
  top: 40%;
  left: var(--margin);
  width: min(33vw, 30rem);
}

html.motion .beat--code {
  top: 40%;
  right: var(--margin);
  width: min(33vw, 30rem);
  text-align: right;
}

html.motion .beat--ai {
  top: 40%;
  left: var(--margin);
  width: min(34vw, 30rem);
  text-align: left;
}

/* A studio-grey veil rises behind the last line, so it reads cleanly over the sweatshirt and its embroidery. */
.hero__veil {
  display: none;
}

html.motion .hero__veil {
  z-index: 2;
  display: block;
  background: linear-gradient(0deg, rgb(214 216 215 / 0.92) 0%, rgb(214 216 215 / 0.7) 26%, rgb(214 216 215 / 0) 58%);
  opacity: 0;
  pointer-events: none;
}

html.motion .beat--now {
  right: var(--margin);
  bottom: clamp(24px, 6vh, 64px);
  left: var(--margin);
}

html.motion .hero__beats a {
  pointer-events: auto;
}

/* The stats band slides over the last frame of the turn, like the next card in a deck. */
html.motion .facts {
  position: relative;
  z-index: 4;
  margin-top: -100vh;
  margin-top: -100svh;
}

/* Mission, lights out: the statement exists twice, and one circle clips the night copy over the day copy. */
html.motion .mission {
  height: 240svh;
  background: var(--studio);
}

html.motion .mission__stage {
  position: sticky;
  top: 0;
  display: grid;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

html.motion .mission__layer {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  padding-block: 0;
  background: var(--bg);
  color: var(--fg);
}

html.motion .mission__layer--night {
  clip-path: circle(0% at 50% 50%);
  /* Scrubbed continuously for the whole 240svh pin: worth its own compositor layer. */
  will-change: clip-path;
}

/* SC 02: the pillars take turns over the film, and the rail says which one. */
html.motion .build__intro,
html.motion .pillars {
  z-index: 3;
}

html.motion .pillars {
  align-self: end;
  padding: 0 var(--margin) clamp(40px, 9vh, 96px);
  background: none;
  pointer-events: none;
}

html.motion .pillars .wrap {
  max-width: none;
  padding: 0;
}

html.motion .pillars__list {
  grid-template-columns: minmax(0, 44rem);
  row-gap: 0;
}

html.motion .pillar {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}

html.motion .pillar::before {
  display: none;
}

html.motion .pillar__title {
  font-size: clamp(2.25rem, 4.6vw, 4.5rem);
  font-stretch: 75%;
  font-weight: 400;
}

html.motion .pillar a {
  pointer-events: auto;
}

html.motion .rail {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.rail span {
  width: 32px;
  height: 2px;
  background: rgb(230 228 223 / 0.3);
  transition: width 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}

.rail span.is-active {
  width: 52px;
  background: var(--teal);
}

/* SC 03: the invitation assembles while he walks. */
html.motion .contact__card {
  z-index: 3;
}

/* Story chain: the active link lights up as it passes the middle of the screen. */
html.motion .chain__word {
  transition: color 0.5s var(--ease-out);
}

/* De-emphasis reads through the colour step alone (15.5:1 active -> 7.6:1 inactive), both AA-safe at this
   size, rather than opacity — a plain opacity dim of inactive text measured under the 3:1 large-text floor. */
html.motion .chain li:not(.is-active) .chain__word {
  color: var(--fg-2);
}

html.motion .chain li.is-active .chain__word {
  color: var(--fg);
}

/* Gattai's stage: a slow light sweep across the wordmark, clipped to the letterforms themselves. */
html.motion .stage__sweep {
  animation: ga-sweep 7s ease-in-out infinite;
}

@keyframes ga-sweep {
  0%, 45% {
    transform: translateX(0);
  }
  75%, 100% {
    transform: translateX(1180px);
  }
}

@media (prefers-contrast: more) {
  html.motion .stage__sweep {
    animation: none;
  }
}

/* --- Story reel, motion mode: the base filmstrip becomes a single-frame, auto-advancing carousel. The base
   layer (style.css above) is left untouched underneath — these rules only ever apply once html.motion has
   already been set, before first paint, so there is no flash of the wrong layout. */
html.motion .reel__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  display: block;
  overflow: hidden;
  overscroll-behavior-x: initial;
  scroll-snap-type: none;
  padding-bottom: 0;
  border-radius: var(--radius-media);
  background: var(--surface-dark);
  box-shadow: 0 20px 48px -16px rgb(0 0 0 / 0.4);
}

html.motion .reel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  scroll-snap-align: none;
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  will-change: clip-path, transform, opacity;
}

html.motion .reel__slide.is-active {
  opacity: 1;
  clip-path: inset(0 0 0 0%);
  z-index: 1;
}

html.motion .reel__media,
html.motion .reel__media img,
html.motion .reel__video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

html.motion .reel__video {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

html.motion .reel__video.is-ready {
  opacity: 1;
}

/* The caption stays in the DOM for its text content (script.js mirrors it into .reel__caption below); showing
   it here too, inside the absolutely-stacked slide, would double it up. */
html.motion .reel__cap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

html.motion .reel__ui {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
}

/* Shared pause/play control — the reel's inline toggle and DentoMind's frame-corner overlay both use it. */
.play-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}

.play-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.play-toggle .icon {
  width: 13px;
  height: 13px;
}

.play-toggle__play {
  fill: currentColor;
  stroke: none;
}

.play-toggle--overlay {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  background: rgba(8, 9, 11, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.play-toggle--overlay:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.reel__bars {
  display: flex;
  flex: 1 1 auto;
  min-width: 120px;
  gap: 5px;
}

.reel__bar {
  flex: 1 1 0;
  height: 32px;
  min-width: 24px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  forced-color-adjust: none;
}

.reel__bar-track {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}

.reel__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
}

.reel__bar.is-done .reel__bar-fill {
  width: 100%;
}

.reel__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.reel__count {
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.reel__caption {
  color: var(--fg);
}

.reel__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--fg-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.reel__hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reel__hint-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Diagrams: the pipeline runner and the stages it has passed. */
.comp .node {
  transition: fill 0.35s var(--ease-out), stroke 0.35s var(--ease-out);
}

.comp .runner {
  fill: var(--teal);
}

/* The header steps aside while reading down and returns on the way up. */
.site-header {
  transition: color 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

html.motion .site-header.is-hidden {
  transform: translateY(-110%);
}

.site-header:focus-within {
  transform: none !important;
}

/* Grain jumps six times a second, like film; the tile overhangs the screen so no edge shows. */
html.motion body::after {
  inset: -64px;
  animation: grain 1s steps(1, end) infinite;
}

html.motion.lite body::after {
  inset: 0;
  animation: none;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-38px, 22px); }
  33% { transform: translate(24px, -40px); }
  50% { transform: translate(-20px, -14px); }
  67% { transform: translate(40px, 34px); }
  83% { transform: translate(-12px, 44px); }
  100% { transform: translate(0, 0); }
}

/* Cursor (fine pointers, motion mode): a dot, a trailing ring, and a label on the contact buttons. */
.cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 95;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__dot,
.cursor__ring,
.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: currentColor;
}

.cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.cursor__label {
  margin: -6px 0 0 30px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

.cursor.has-label .cursor__label {
  opacity: 1;
}

html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

/* Portrait screens: shorter pins, text in the lower part of the frame. */
@media (max-aspect-ratio: 9/10) {
  html.motion .scene--turn {
    --scene-h: 340svh;
  }

  html.motion .scene--build {
    --scene-h: 420svh;
  }

  html.motion .scene--walk {
    --scene-h: 330svh;
  }

  html.motion .mission {
    height: 200svh;
  }

  html.motion :is(.beat--physics, .beat--code, .beat--ai) {
    top: auto;
    right: var(--margin);
    bottom: 30%;
    left: var(--margin);
    width: auto;
    text-align: left;
  }

  html.motion .scroll-cue {
    display: none;
  }
}


/* --- PageUI system film: screenshot → component tree ----------------------------------------------------- */
.flow-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--bg-raised);
}

.flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Below the site's mobile breakpoint, the card is too narrow for the reference 1280-unit canvas to stay
   legible when shrunk to fit. Rather than shrink it, the frame becomes a pannable window onto the diagram at
   its full designed size — the same markup and the same running animation, just explored by scroll instead
   of taken in at a glance. The toggle stays anchored to the viewport as the content scrolls under it. */
@media (max-width: 720px) {
  /* .case is a grid item in .work__list; its default min-width:auto would otherwise let the 1280px-wide
     .flow below stretch the whole card past its track, instead of scrolling inside .flow__scroll. */
  .case {
    min-width: 0;
  }

  .flow-frame {
    aspect-ratio: auto;
    height: 260px;
  }

  /* The scrolling element is a wrapper *inside* the frame, not the frame itself — the toggle button sits
     outside it as a sibling, so it stays anchored to the frame's own box instead of panning with the SVG
     (an absolutely-positioned descendant of a scroll container scrolls with that container's content; only
     a descendant of a non-scrolling ancestor stays put). */
  .flow__scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .flow {
    position: static;
    width: 1280px;
    max-width: none; /* overrides the global img/svg/video { max-width: 100% } reset */
    height: 720px;
  }
}

.flow__toggle {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  background: rgba(8, 9, 11, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.flow__toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* --- shared furniture: grid, cell frames, titles, connectors, token ---------------------------------------- */
.pu-grid path {
  stroke: #1c232b;
  stroke-width: 1;
}

.pu-cell {
  fill: #0c0e11;
  stroke: #1c232b;
  stroke-width: 1.2;
}

.pu-cell-title {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: #5d6866;
}

.pu-conn {
  fill: none;
  stroke: #2a3339;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pu-conn.is-active {
  stroke: #2ea8a7;
}

.pu-token {
  fill: #2ea8a7;
  filter: none;
  opacity: 0;
}

/* --- cell A: screenshot ------------------------------------------------------------------------------------ */
.pu-a-panel {
  fill: #0e1216;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-a-sub {
  fill: #161c20;
}

.pu-a-bone {
  fill: #e6e4df;
}

.pu-a-hero {
  fill: #141a1e;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-a-btn {
  fill: #2ea8a7;
}

.pu-a-btn-ghost {
  fill: none;
  stroke: #3a4348;
  stroke-width: 1;
}

.pu-a-card {
  fill: #141a1e;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-a-chart {
  fill: #141a1e;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-a-line1 {
  fill: none;
  stroke: #2ea8a7;
  stroke-width: 1.6;
}

.pu-a-line2 {
  fill: none;
  stroke: #e6e4df;
  stroke-width: 1.2;
  opacity: 0.35;
}

.pu-a-scanline {
  stroke: #2ea8a7;
  stroke-width: 1;
  opacity: 0.8;
}

.pu-a-bezel {
  fill: none;
  stroke: #3a4348;
  stroke-width: 2;
}

.pu-a-notch {
  fill: #3a4348;
}

.pu-a-webbar {
  fill: #161c20;
  stroke: #2a3339;
  stroke-width: 1;
}

.pu-a-addr {
  fill: #0e1216;
  stroke: #2a3339;
  stroke-width: 1;
}

.pu-a-webframe {
  fill: none;
  stroke: #3a4348;
  stroke-width: 2;
}

.pu-a-tag {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: #2ea8a7;
}

/* --- cell B: weighted vote ---------------------------------------------------------------------------------- */
.pu-b-tick {
  fill: #9aa3a1;
}

.pu-b-threshold {
  stroke: #3a4348;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.pu-b-threshold-lbl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: #5d6866;
}

.pu-b-track {
  fill: #141a1e;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-b-bar {
  fill: #2ea8a7;
}

.pu-b-bin-lbl {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #9aa3a1;
}

.pu-b-result {
  font-family: var(--sans);
  font-size: 21px;
  font-style: italic;
  fill: #e6e4df;
}

/* --- cell C: adapter hot-swap ------------------------------------------------------------------------------- */
.pu-c-boundary {
  fill: none;
  stroke: #2a3339;
  stroke-width: 1;
}

.pu-c-boundary-lbl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: #5d6866;
}

.pu-c-base {
  fill: #141a1e;
  stroke: #2ea8a7;
  stroke-width: 1.2;
}

.pu-c-base-txt1 {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 600;
  fill: #e6e4df;
}

.pu-c-base-txt2 {
  font-family: var(--sans);
  font-size: 16px;
  fill: #9aa3a1;
}

.pu-c-socket {
  fill: #0e1216;
  stroke: #3a4348;
  stroke-width: 1.5;
}

.pu-c-cart rect {
  fill: #141a1e;
  stroke: #3a4348;
  stroke-width: 1;
}

.pu-c-cart text {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  fill: #9aa3a1;
  text-anchor: middle;
  transform: translate(0, 4px);
}

.pu-c-cart.is-docked rect {
  fill: #16302f;
  stroke: #2ea8a7;
}

.pu-c-cart.is-docked text {
  fill: #e6e4df;
}

.pu-c-tag {
  fill: none;
  stroke: #3a4348;
  stroke-width: 1;
}

.pu-c-tags text {
  font-family: var(--sans);
  font-size: 16px;
  fill: #9aa3a1;
}

/* --- cell D: self-healing parser ----------------------------------------------------------------------------- */
.pu-d-panel {
  fill: #0e1216;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-d-filename {
  font-family: var(--sans);
  font-size: 16px;
  fill: #5d6866;
}

.pu-d-rule {
  stroke: #232c31;
  stroke-width: 1;
}

.pu-d-line,
.pu-d-flag {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 19px;
  fill: #9aa3a1;
}

.pu-d-flag {
  fill: #e6e4df;
}

#pu-d-json-web {
  opacity: 0;
}

.pu-d-underline {
  fill: #d99a4e;
}

.pu-d-flagtxt {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #d99a4e;
}

.pu-d-healer-ring {
  fill: none;
  stroke: #2ea8a7;
  stroke-width: 1.5;
  opacity: 0.5;
}

.pu-d-healer-dot {
  fill: #2ea8a7;
}

.pu-d-healer-lbl {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: #9aa3a1;
}

.pu-d-valid circle {
  fill: none;
  stroke: #2ea8a7;
  stroke-width: 1.5;
}

.pu-d-check {
  fill: none;
  stroke: #2ea8a7;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pu-d-validtxt {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #2ea8a7;
}

/* --- cell E: normalised boxes ---------------------------------------------------------------------------------- */
.pu-e-screen {
  fill: #0e1216;
  stroke: #232c31;
  stroke-width: 1;
}

.pu-e-box {
  fill: none;
  stroke: #2ea8a7;
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pu-e-lbl {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  fill: #2ea8a7;
}

.pu-e-ruler {
  stroke: #3a4348;
  stroke-width: 1;
}

.pu-e-arrowhead {
  fill: #3a4348;
}

.pu-e-axislbl {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.08em;
  fill: #5d6866;
}

/* --- cell F: component tree --------------------------------------------------------------------------------- */
#pu-f-tree-web {
  opacity: 0;
}

.pu-f-edge {
  fill: none;
  stroke: #3a4348;
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pu-f-node rect {
  fill: #141a1e;
  stroke: #3a4348;
  stroke-width: 1;
}

.pu-f-node--root rect {
  stroke: #2ea8a7;
}

.pu-f-node circle {
  fill: #2ea8a7;
}

.pu-f-node--root circle {
  fill: #d99a4e;
}

.pu-f-node text {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 18px;
  fill: #e6e4df;
}

/* --- text-fit guard: every label above stays inside its box at the reference 1280x720 scale ----------------- */

/* --- EduScan system film: document analysis to grounded tutor (Day tone) ----------------- */
.flow-frame--eduscan {
  background: #fbfcfb;
}

.flow--eduscan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.es-cell {
  fill: #ffffff;
  stroke: #dce4e1;
  stroke-width: 1.2;
}

.es-cell-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: #485654;
}

.es-cell-sub {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: #0e5f5e;
}

.es-conn {
  fill: none;
  stroke: #b6cec9;
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.es-conn.is-active {
  stroke: #1c6b6a;
}

.es-token {
  fill: #1c6b6a;
  opacity: 0;
}

.es-doc-desk {
  fill: #edf2f0;
  stroke: #d5e0dc;
  stroke-width: 1;
}

.es-sheet {
  fill: #ffffff;
  stroke: #cdd8d5;
  stroke-width: 1;
}

.es-text-line {
  stroke: #2b3937;
  stroke-width: 2;
  stroke-linecap: round;
}

.es-ocr-box {
  fill: none;
  stroke: #1c6b6a;
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.7;
}

.es-seg-outline {
  fill: none;
  stroke: #0e5f5e;
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  stroke-dashoffset: 0;
  opacity: 0.85;
}

.es-math-plate {
  fill: #f0f7f6;
  stroke: #c0dad6;
  stroke-width: 1;
}

.es-math-text {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  fill: #0e5f5e;
}

.es-bracket {
  fill: none;
  stroke: #1c6b6a;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.es-scan-line {
  stroke: #1c6b6a;
  stroke-width: 1.8;
}

.es-subcard {
  fill: #ffffff;
  stroke: #d5e0dc;
  stroke-width: 1;
}

.es-subcard--highlight {
  stroke: #1c6b6a;
  stroke-width: 1.2;
}

.es-subcard-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #50615e;
}

.es-pill-bg {
  fill: #e8f3f2;
  stroke: #1c6b6a;
  stroke-width: 0.8;
}

.es-pill-text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  fill: #0e5f5e;
}

.es-badge-line {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px;
  fill: #435250;
}

.es-metric-card {
  fill: #f8faf9;
  stroke: #dbe4e1;
  stroke-width: 1;
}

.es-metric-main {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  fill: #0a0e0d;
}

.es-metric-side {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  fill: #70807e;
}

.es-token-chip {
  fill: #edf4f3;
  stroke: #b6d7d4;
  stroke-width: 0.8;
}

.es-token-text {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9.5px;
  fill: #0e5f5e;
}

.es-token-line {
  stroke: #1c6b6a;
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
}

.es-box-inner {
  fill: #f8faf9;
  stroke: #dbe4e1;
  stroke-width: 1;
}

.es-box-bold {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  fill: #0a0e0d;
}

.es-box-mono {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  fill: #70807e;
}

.es-badge-mono {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px;
  fill: #70807e;
}

.es-sum-t1 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  fill: #0a0e0d;
}

.es-sum-t2 {
  font-family: var(--sans);
  font-size: 10px;
  fill: #435250;
}

.es-chunk-pill {
  fill: #ffffff;
  stroke: #cdd8d5;
  stroke-width: 0.8;
}

.es-chunk-text {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  fill: #0e5f5e;
}

.es-embed-model {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  fill: #0e5f5e;
}

.es-embed-dim {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  fill: #70807e;
}

.es-vglyph-box {
  fill: #edf5f4;
  stroke: #c0dad6;
  stroke-width: 0.8;
}

.es-vglyph-text {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9px;
  fill: #0e5f5e;
}

.es-db-coll {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  fill: #70807e;
}

.es-layer-txt {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  fill: #0e5f5e;
}

.es-radar-ring {
  fill: none;
  stroke: #1c6b6a;
  stroke-width: 1;
  opacity: 0.5;
}

.es-score-box {
  fill: #ffffff;
  stroke: #cdd8d5;
  stroke-width: 0.8;
}

.es-score-box--top {
  fill: #e4f2f0;
  stroke: #1c6b6a;
  stroke-width: 1;
}

.es-score-label {
  font-family: var(--sans);
  font-size: 10.5px;
  fill: #435250;
}

.es-score-label--top {
  font-weight: 700;
  fill: #0e5f5e;
}

.es-score-val {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px;
  fill: #70807e;
}

.es-score-val--top {
  font-weight: 700;
  fill: #0e5f5e;
}

.es-query-txt {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  fill: #0a0e0d;
}

.es-query-sub {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  fill: #70807e;
}

.es-router-badge {
  fill: #e8f3f2;
  stroke: #1c6b6a;
  stroke-width: 1;
}

.es-router-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  fill: #0e5f5e;
}

.es-router-ghost {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9px;
  fill: #70807e;
  opacity: 0.75;
}

.es-ans-txt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  fill: #0a0e0d;
}

.es-cite-box {
  fill: #f0f7f6;
  stroke: #1c6b6a;
  stroke-width: 0.9;
}

.es-cite-t1 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  fill: #0e5f5e;
}

.es-cite-t2 {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9.5px;
  fill: #435250;
}

.es-tool-head {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  fill: #50615e;
}

.es-wave-bar {
  stroke: #1c6b6a;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.es-tool-sub {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  fill: #0e5f5e;
}

.es-exp-card {
  fill: #fdfbf7;
  stroke: #b35200;
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}

.es-exp-title {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  fill: #0a0e0d;
}

.es-exp-pill {
  fill: #fbeee4;
}

.es-exp-pill-txt {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  fill: #b35200;
}

.es-exp-body {
  font-family: var(--sans);
  font-size: 10.5px;
  fill: #435250;
}

.es-exp-foot {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9.5px;
  fill: #70807e;
}

.es-export-txt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  fill: #0a0e0d;
}