/* ─────────────── Tokens — extrain petrol system (matches aiaugmented.extrain.io) ─────────────── */
:root{
  /* deep teal-black foundation, tuned to the brand */
  --paper:#070f14;
  --paper-2:#0a1820;
  --paper-3:#0d1b22;
  --paper-4:#142932;

  --ink:#e6e6e6;
  --ink-2:#c9bab0;        /* warm cream — secondary text on dark */
  --ink-3:#a3c0bf;        /* mist teal — tertiary text */
  --muted:#7d8a8a;
  --muted-2:#4e5a5a;

  --line:rgba(230,230,230,.08);
  --line-2:rgba(230,230,230,.18);
  --line-3:rgba(230,230,230,.40);

  /* extrain brand palette — petrol / sage / sand */
  --petrol:#036784;       /* primary brand */
  --sage:#9abfbf;         /* secondary teal */
  --sand:#ccb8ac;         /* warm beige */
  --cream:#c9bab0;
  --mist:#a3c0bf;

  --accent:oklch(0.50 0.09 215);    /* ≈ #036784 petrol */
  --accent-ink:oklch(0.42 0.10 218);
  --accent-2:oklch(0.78 0.04 200);  /* ≈ #9abfbf sage */
  --accent-3:oklch(0.80 0.04 60);   /* ≈ #ccb8ac sand */
  --accent-soft:oklch(0.30 0.06 215);

  --grad: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 50%, var(--accent) 100%);
  --font-serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);
}

/* inverse sections — bright cream island on dark default */
.inverse{ --paper:#f1ece7; --paper-2:#e8dfd6; --paper-3:#ddd1c4; --paper-4:#c8b9a8; --ink:#0c1018; --ink-2:#1d2230; --ink-3:#3a4153; --muted:#6b7488; --muted-2:#9aa2b3; --line:rgba(12,16,24,.10); --line-2:rgba(12,16,24,.20); --line-3:rgba(12,16,24,.40); --accent:oklch(0.42 0.10 218); --accent-2:oklch(0.45 0.08 215); --accent-3:oklch(0.55 0.07 60); --accent-soft:oklch(0.92 0.02 200);}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;font-size:16px;line-height:1.5;font-weight:400}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:screen}

/* ─────────────── Phase rail (signature interaction grammar) ─────────────── */
.phase-rail{position:fixed;top:50%;right:26px;left:auto;transform:translateY(-50%);z-index:40;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;opacity:0;transition:opacity .6s ease .8s}
.phase-rail.is-visible{opacity:1}
.phase-rail-track{position:relative;display:flex;flex-direction:column;gap:54px;padding:18px 0;pointer-events:auto}
.phase-rail-line{position:absolute;right:6px;left:auto;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg, rgba(241,236,231,.04) 0%, rgba(241,236,231,.22) 20%, rgba(241,236,231,.22) 80%, rgba(241,236,231,.04) 100%)}
/* right-edge rail: label sits left of the dot, dot flush to the screen edge */
.phase-mark{position:relative;display:grid;grid-template-columns:auto 14px;gap:14px;align-items:center;color:rgba(241,236,231,.42);text-decoration:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;transition:color .35s ease}
.phase-mark .ph-num{order:2;display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;border:1px solid rgba(241,236,231,.34);background:#03080b;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:9px;letter-spacing:0;color:rgba(241,236,231,.7);transition:border-color .35s ease, background .35s ease, color .35s ease, transform .5s cubic-bezier(.22,1,.36,1)}
.phase-mark .ph-label{order:1;text-align:right;opacity:0;transform:translateX(6px);transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1), color .35s ease;white-space:nowrap;text-shadow:0 1px 12px rgba(3,8,11,.6)}
.phase-mark:hover{color:#f1ece7}
.phase-mark:hover .ph-label,
.phase-rail:hover .phase-mark .ph-label{opacity:1;transform:translateX(0)}
.phase-mark.is-active{color:#f1ece7}
.phase-mark.is-active .ph-num{border-color:var(--sage);background:var(--petrol);color:#f1ece7;transform:scale(1.25);box-shadow:0 0 18px -2px rgba(154,191,191,.55)}
/* active state reads from the highlighted dot; labels reveal only on hover so
   they never overlap body text (German labels run long) */
.phase-mark.is-active .ph-label{color:#f1ece7}
.phase-mark + .phase-mark::before{content:"";position:absolute;right:6px;left:auto;bottom:calc(100% + 6px);height:48px;width:1px;background:linear-gradient(180deg, rgba(241,236,231,0) 0%, rgba(241,236,231,.22) 100%);pointer-events:none}
.inverse .phase-mark{color:rgba(12,16,24,.5)}
.inverse .phase-mark .ph-num{background:#f1ece7;color:rgba(12,16,24,.7);border-color:rgba(12,16,24,.4)}
.inverse .phase-mark.is-active{color:rgba(12,16,24,.95)}
.inverse .phase-mark.is-active .ph-num{background:var(--petrol);color:#f1ece7;border-color:var(--petrol)}
@media (max-width: 1024px){ .phase-rail{display:none} }
@media (prefers-reduced-motion: reduce){ .phase-mark, .phase-mark .ph-num, .phase-mark .ph-label{transition:none} }

/* ─────────────── Container & helpers ─────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:2}
.full{padding:0 var(--pad-x)}

.rule{height:1px;background:var(--line);margin:0}
.rule-ink{height:1px;background:var(--ink);margin:0}

/* ─────────────── Type ─────────────── */
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.02em;line-height:1.02}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-0.01em}
.serif-i{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.005em}
.display{font-family:var(--font-sans);font-weight:500;letter-spacing:-0.045em;line-height:.92}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:500}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-right:10px;transform:translateY(-1px)}
.lead{font-size:clamp(17px,1.25vw,21px);line-height:1.55;color:var(--ink-3);max-width:54ch;font-weight:400}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.amp{font-family:var(--font-serif);font-style:italic;color:var(--accent);font-weight:400}

p{margin:0;text-wrap:pretty}

/* ─────────────── Nav ─────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0;background:color-mix(in oklab, var(--paper) 70%, transparent);backdrop-filter:blur(10px) saturate(120%);transition:background .35s ease, border-color .35s}
.nav.scrolled{background:color-mix(in oklab, var(--paper) 88%, transparent);backdrop-filter:blur(14px) saturate(120%);mix-blend-mode:normal;border-bottom:1px solid var(--line)}
.inverse .nav.scrolled{background:color-mix(in oklab, var(--paper) 88%, transparent)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-weight:600;font-size:18px;letter-spacing:-0.03em;color:var(--ink)}
.brand-logo{display:inline-flex;align-items:center;line-height:0}
.brand-logo svg{height:clamp(40px, 4.4vw, 56px);width:auto;display:block;overflow:visible}
@media (max-width: 720px){ .brand-logo svg{height:38px} }
.brand-sand{fill:var(--sand);transition:fill .4s ease, transform .6s cubic-bezier(.22,1,.36,1);transform-origin:center}
.brand-sage{fill:var(--sage);transition:fill .4s ease, transform .6s cubic-bezier(.22,1,.36,1) .04s;transform-origin:center}
.brand-petrol{fill:var(--mist);transition:fill .4s ease, transform .6s cubic-bezier(.22,1,.36,1) .08s;transform-origin:center}
.brand-wordmark{fill:var(--ink);transition:fill .4s ease}
.brand-wordmark.brand-nio{fill:var(--sage)}
.inverse .brand-petrol{fill:var(--petrol)}
.inverse .brand-wordmark{fill:#0c1018}
.inverse .brand-wordmark.brand-nio{fill:var(--petrol)}
.brand:hover .brand-sand{transform:translateY(-2px)}
.brand:hover .brand-sage{transform:translateY(-2px)}
.brand:hover .brand-petrol{transform:translateY(-2px)}
.nav-links{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.nav-links a{padding:8px 12px;position:relative;color:var(--ink-2);transition:color .2s}
.nav-links a .num{color:var(--muted);margin-right:6px;font-size:10px}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover .num{color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:14px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;background:color-mix(in oklab, var(--paper) 30%, transparent);backdrop-filter:blur(8px) saturate(140%)}
.lang-btn{color:var(--muted);padding:2px 4px;border-radius:999px;font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:1;transition:color .2s, background .2s;cursor:pointer}
.lang-btn:hover{color:var(--ink-2)}
.lang-btn.is-active{color:var(--ink);background:color-mix(in oklab, var(--mist) 18%, transparent)}
.lang-btn:focus-visible{outline:1px solid var(--mist);outline-offset:2px}
.lang-sep{color:var(--muted-2);font-size:10px;user-select:none}
@media (max-width: 1180px){ .nav-links{display:none} }
@media (max-width: 720px){ .nav-cta .btn{display:none} }

/* ─────────────── Buttons ─────────────── */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 18px 12px 22px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:0;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  transition:transform .25s ease, background .2s, color .2s;
  white-space:nowrap;font-family:var(--font-sans);
}
.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn .arr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid currentColor;font-size:11px}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-ghost{border-color:transparent;padding-left:6px;padding-right:6px}
.btn-ghost:hover{background:transparent;color:var(--accent)}
.btn-sm{padding:8px 12px 8px 16px;font-size:12px}
.btn-sm .arr{width:18px;height:18px;font-size:10px}

/* ─────────────── Signature pillars ─────────────── */
.pillars{padding:96px 0 56px;position:relative}
.pillars-rule{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:48px}
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pillar{padding:28px 28px 28px 0;border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:18px;position:relative}
.pillar:first-child{border-left:0;padding-left:0}
.pillar-num{display:flex;align-items:baseline;gap:6px;font-family:var(--font-sans);font-weight:500;letter-spacing:-0.05em;line-height:.9;color:var(--ink)}
.pillar-num span{font-size:clamp(64px,8vw,124px);background:linear-gradient(180deg, var(--ink) 0%, var(--ink) 60%, color-mix(in oklab, var(--ink) 80%, var(--accent)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pillar-num em{font-style:normal;font-size:clamp(20px,1.8vw,28px);color:var(--accent);font-weight:500;letter-spacing:-0.02em}
.pillar-cap{font-family:var(--font-serif);font-size:clamp(17px,1.4vw,21px);line-height:1.25;color:var(--ink-2);letter-spacing:-0.005em;max-width:22ch;text-wrap:pretty}
.pillar-cap b{color:var(--ink);font-weight:400;font-style:italic;color:var(--accent)}
.pillar-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
@media (max-width:980px){.pillars-grid{grid-template-columns:repeat(2,1fr)}.pillar{padding:24px 18px;border-left:1px solid var(--line);border-top:1px solid var(--line)}.pillar:first-child{border-left:0}.pillar:nth-child(2){border-left:1px solid var(--line)}.pillar:nth-child(1),.pillar:nth-child(2){border-top:0}}
@media (max-width:560px){.pillars-grid{grid-template-columns:1fr}.pillar,.pillar:nth-child(2){border-left:0;border-top:1px solid var(--line);padding-left:0}.pillar:first-child{border-top:0}}

.eyebrow.pill{padding:7px 14px 7px 12px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in oklab, var(--paper-2) 50%, transparent);display:inline-flex;align-items:center;gap:2px;backdrop-filter:blur(8px);position:relative;isolation:isolate}
.eyebrow.pill::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 60%, transparent), transparent 50%, color-mix(in oklab, var(--accent-3) 35%, transparent) 100%);-webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85}
.eyebrow.pill .dot{margin-right:8px}
.spot{position:fixed;inset:0;pointer-events:none;z-index:3;mix-blend-mode:screen;opacity:0;transition:opacity .4s ease}
.spot.on{opacity:1}
.spot::before{
  content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);
  width:680px;height:680px;transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,
    color-mix(in oklab, var(--accent) 32%, transparent) 0%,
    color-mix(in oklab, var(--accent-2) 14%, transparent) 22%,
    transparent 60%);
  filter:blur(20px);
}
.inverse .spot{display:none}

/* ─────────────── Cinematic Hero ─────────────── */
.hero-cinematic{
  position:relative;
  min-height:calc(100vh - 110px);
  padding:120px 0 80px;
  overflow:hidden;
  isolation:isolate;
  background:#03080b;
}
.hero-aether{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}

.hero-video{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;object-fit:cover;
  filter: brightness(0.46) saturate(1.05) contrast(1.05);
  background:
    repeating-linear-gradient(135deg, rgba(154,191,191,.04) 0 12px, rgba(154,191,191,.015) 12px 24px),
    radial-gradient(80% 60% at 50% 40%, rgba(3,103,132,.16) 0%, transparent 70%),
    #03080b;
}
/* once video has a real source, hide fallback canvas/grid */
.hero-video[src], .hero-video:has(source[src]){pointer-events:none}
.hero-video[src] ~ .hero-aether,
.hero-video:has(source[src]) ~ .hero-aether,
.hero-video[src] ~ .hero-aether-grid,
.hero-video:has(source[src]) ~ .hero-aether-grid{opacity:.28;mix-blend-mode:screen}

.hero-aether-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(110% 70% at 50% 0%, transparent 0%, rgba(3,8,11,.62) 75%, rgba(3,8,11,.92) 100%),
    repeating-linear-gradient(90deg, rgba(154,191,191,.025) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(154,191,191,.022) 0 1px, transparent 1px 140px);
}
.hero-aether-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 60%, transparent 0%, rgba(3,8,11,0) 30%, rgba(3,8,11,.62) 92%),
    linear-gradient(180deg, rgba(3,8,11,.55) 0%, rgba(3,8,11,0) 22%, rgba(3,8,11,0) 70%, rgba(3,8,11,.78) 100%);
}

.hero-stage{position:relative;z-index:2;display:flex;flex-direction:column;gap:36px;padding-top:24px;min-height:calc(100vh - 230px)}

.hero-eyebrow-row{display:flex;justify-content:space-between;align-items:center;gap:24px;color:rgba(241,236,231,.7);flex-wrap:wrap}
.hero-eyebrow-side{color:rgba(241,236,231,.5)}
.hero-eyebrow-side.right{color:rgba(154,191,191,.55);text-align:right}

.hero-display{
  font-family:var(--font-sans);font-weight:500;letter-spacing:-0.055em;line-height:.88;
  font-size:clamp(56px, 9.5vw, 184px);
  color:#f1ece7;margin:0;text-wrap:balance;
  text-shadow:0 4px 60px rgba(3,103,132,.22);
}
.hero-display .row{display:block;position:relative}
.hero-display .row + .row{margin-top:-0.04em}
.hero-display .hd-word{display:inline-block}
.hero-display .hd-ital{
  font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.022em;
  color:var(--sage);
  position:relative;
}
/* second line ('Machines accelerate.') tinted toward sage, like a vapor trail */
.hero-display .row:nth-child(2) .hd-word{color:var(--sage)}
/* third line ('Production ships.') resolves back to ink — clarity after the haze */
.hero-display .row:nth-child(3) .hd-word{color:#f1ece7}

.hero-deck{
  font-family:var(--font-serif);font-size:clamp(19px, 1.6vw, 26px);line-height:1.45;
  color:rgba(241,236,231,.80);max-width:62ch;font-weight:400;letter-spacing:-0.005em;
}
.hero-deck em{font-style:italic;color:var(--sage)}

.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-cinematic{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 22px;border-radius:999px;
  font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-0.005em;
  border:1px solid rgba(241,236,231,.18);
  background:color-mix(in oklab, #0a1820 70%, transparent);
  color:rgba(241,236,231,.92);backdrop-filter:blur(10px) saturate(140%);
  transition:transform .25s, border-color .25s, color .25s, background .25s, box-shadow .35s;
  cursor:pointer;text-decoration:none;
}
.btn-cinematic:hover{transform:translateY(-1px);border-color:rgba(241,236,231,.45);color:#fff;background:color-mix(in oklab, #0d1b22 80%, transparent)}
.btn-cinematic .arr{font-size:14px;color:rgba(241,236,231,.8);transition:transform .25s}
.btn-cinematic:hover .arr{transform:translateX(3px)}
.btn-cinematic.primary{
  color:#03080b;background:#f1ece7;border-color:transparent;
  box-shadow:0 10px 40px -10px rgba(3,103,132,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-cinematic.primary:hover{background:#fff;color:#03080b;transform:translateY(-1px);box-shadow:0 14px 50px -12px rgba(3,103,132,.65), inset 0 1px 0 rgba(255,255,255,.7)}
.btn-cinematic.primary .arr{color:#03080b}

.hero-trust{margin-top:auto;padding-top:48px;display:flex;flex-direction:column;gap:40px}
.hero-trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;border-top:1px solid rgba(241,236,231,.10);padding-top:24px}
.hero-trust-row .mono{color:rgba(241,236,231,.55)}
.hero-trust-logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.08em;color:rgba(241,236,231,.55)}
.hero-trust-logos .d{color:rgba(241,236,231,.2)}

.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-metric{padding:24px 24px 24px 24px;border-left:1px solid rgba(241,236,231,.10);display:flex;flex-direction:column;gap:10px}
.hero-metric:first-child{border-left:0;padding-left:0}
.hero-metric .m-num{
  display:flex;align-items:baseline;gap:4px;font-family:var(--font-sans);font-weight:500;letter-spacing:-0.05em;line-height:.9;
  font-size:clamp(40px,4.2vw,68px);color:#f1ece7;
}
.hero-metric .m-num em{font-style:normal;font-size:.36em;color:var(--sage);font-weight:500;letter-spacing:-0.01em}
.hero-metric .m-cap{font-family:var(--font-serif);font-size:14px;line-height:1.35;color:rgba(241,236,231,.65);text-wrap:pretty}
.hero-metric .m-cap b{color:rgba(241,236,231,.92);font-weight:400;font-style:italic}

@media (max-width:980px){
  .hero-metrics{grid-template-columns:repeat(2,1fr)}
  .hero-metric{border-top:1px solid rgba(241,236,231,.10);border-left:1px solid rgba(241,236,231,.10);padding:18px}
  .hero-metric:first-child{padding-left:18px}
  .hero-metric:nth-child(2){border-left:1px solid rgba(241,236,231,.10)}
  .hero-metric:nth-child(1),.hero-metric:nth-child(2){border-top:0}
}
@media (max-width:560px){.hero-metrics{grid-template-columns:1fr}.hero-metric{border-left:0;border-top:1px solid rgba(241,236,231,.10);padding:18px 0}.hero-metric:first-child{border-top:0}}
/* tighten the gap between the fixed header and the hero eyebrow on small screens */
@media (max-width:720px){
  .hero-cinematic{padding:84px 0 56px;min-height:auto}
  .hero-stage{padding-top:0;gap:26px;min-height:0}
}

/* ─────────────── Marquee ─────────────── */
.marquee{margin-top:80px;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;position:relative}
.marquee-track{display:flex;gap:60px;animation:scroll 60s linear infinite;width:max-content;white-space:nowrap;align-items:center}
.marquee-track .item{font-family:var(--font-sans);font-size:clamp(28px,3.4vw,52px);font-weight:500;letter-spacing:-0.035em;color:var(--ink);display:flex;align-items:center;gap:60px;flex-shrink:0}
.marquee-track .item .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);margin-left:.1em}
.marquee-track .item::after{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─────────────── Section primitives ─────────────── */
section{position:relative;padding:120px 0;z-index:2}
.sec-mark{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  padding:14px 0;border-top:1px solid var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:80px;
}
.sec-mark b{color:var(--ink);font-weight:500}
.sec-mark .num{font-size:11px;color:var(--muted)}
.sec-mark .center{justify-self:center;color:var(--muted)}
.sec-mark .right{justify-self:end;color:var(--muted)}

.section-head{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;align-items:end;margin-bottom:80px}
.section-head h2{font-family:var(--font-sans);font-weight:500;font-size:clamp(40px,5.6vw,96px);letter-spacing:-0.045em;line-height:.96;color:var(--ink);max-width:14ch;text-wrap:balance}
.section-head h2 .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-0.02em}
.section-head .copy{display:flex;flex-direction:column;gap:18px;padding-bottom:8px}
.section-head .eyebrow{margin-bottom:22px;display:inline-flex;align-items:center}
@media (max-width:900px){.section-head{grid-template-columns:1fr;gap:24px}}

/* ─────────────── Approach ─────────────── */
.approach{padding:140px 0 120px}
.approach-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:96px;align-items:start}
.approach-lead{font-family:var(--font-serif);font-size:clamp(28px,3.4vw,52px);line-height:1.12;letter-spacing:-0.01em;color:var(--ink);text-wrap:pretty;max-width:18ch}
.approach-lead em{font-style:italic;color:var(--accent)}
.approach-lead .strike{text-decoration:line-through;text-decoration-color:var(--line-3);color:var(--muted);font-style:normal}
.beliefs{display:grid;gap:0;border-top:1px solid var(--line)}
.belief{display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line);cursor:default;transition:padding .25s ease}
.belief:hover{padding-left:14px}
.belief .k{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.08em}
.belief h4{font-family:var(--font-sans);font-weight:500;font-size:22px;letter-spacing:-0.02em;margin-bottom:8px}
.belief p{font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:48ch}
.belief .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;align-self:start;padding-top:6px}
@media (max-width:900px){.approach-grid{grid-template-columns:1fr;gap:40px}.belief{grid-template-columns:36px 1fr;gap:14px}.belief .meta{display:none}}

/* ─────────────── Work (case studies) ─────────────── */
.case{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:120px 0;border-top:1px solid var(--line);
}
.case:first-child{border-top:0;padding-top:0}
.case.reverse .case-vis{order:2}
.case-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.case-meta .pill{padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}
.case-meta .num{color:var(--accent);font-weight:500}
.case h3{font-family:var(--font-sans);font-weight:500;font-size:clamp(34px,4.2vw,64px);letter-spacing:-0.035em;line-height:1;color:var(--ink);text-wrap:balance;margin-bottom:24px}
.case h3 .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-0.01em}
.case-body p{font-family:var(--font-serif);font-size:clamp(18px,1.6vw,24px);line-height:1.35;color:var(--ink-2);max-width:46ch;letter-spacing:-0.005em}
.case-stats{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:24px;border-top:1px solid var(--line)}
.case-stats .num{font-family:var(--font-sans);font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:-0.04em;line-height:1;color:var(--ink)}
.case-stats .num .u{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);font-size:.7em;margin-left:2px}
.case-stats .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.case-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:36px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}

/* case visual plate — atmospheric photographic plate with parallax depth */
.case-vis{position:relative;aspect-ratio:4/5;background:#03080b;border:1px solid var(--line-2);overflow:hidden;display:grid;place-items:center;isolation:isolate}
.case-vis::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg, rgba(241,236,231,.04) 0 1px, transparent 1px 22px);opacity:.5;z-index:2;pointer-events:none;mix-blend-mode:overlay}
.case-vis::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,8,11,.55) 0%, rgba(3,8,11,0) 22%, rgba(3,8,11,0) 60%, rgba(3,8,11,.78) 100%);
}

/* parallax inner — image sized 120% height, translated ±10% via scroll */
.case-media{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:0;will-change:transform;transform:translate3d(0,var(--parallax,0px),0);transition:opacity .4s ease}
.case-media-video{opacity:0}
.case-media-video.is-ready{opacity:1}
/* once video is ready, fade the still beneath */
.case-vis.video-ready img.case-media{opacity:0}

.case-vis.has-media .plate-corner,
.case-vis.has-media .plate-label{z-index:3;text-shadow:0 1px 14px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.30)}
.case-vis.has-media .plate-corner{color:rgba(241,236,231,.78)}
.case-vis.has-media .plate-corner::before,
.case-vis.has-media .plate-corner.tr::after,
.case-vis.has-media .plate-corner.br::after{background:rgba(241,236,231,.5)}
.case-vis.has-media .plate-label{color:#f1ece7;text-shadow:0 1px 18px rgba(3,8,11,.78), 0 0 40px rgba(3,8,11,.6)}
.case-vis.has-media .plate-label small{color:rgba(241,236,231,.74)}
/* the label is centred over the video, where the edge scrim is transparent —
   give it its own soft radial backing so it stays legible over any frame */
.case-vis.has-media .plate-label::before{content:"";position:absolute;inset:-22% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 70% at 50% 50%, rgba(3,8,11,.66) 0%, rgba(3,8,11,.32) 52%, rgba(3,8,11,0) 100%)}

@media (prefers-reduced-motion: reduce){
  .case-media{transform:none !important}
}

.plate-corner{position:absolute;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.plate-corner::before{content:"";width:12px;height:1px;background:var(--ink)}
.plate-corner.tl{top:14px;left:14px}
.plate-corner.tr{top:14px;right:14px}
.plate-corner.bl{bottom:14px;left:14px}
.plate-corner.br{bottom:14px;right:14px}
.plate-corner.tr::after,.plate-corner.br::after{content:"";width:12px;height:1px;background:var(--ink);margin-left:8px}
.plate-corner.tr,.plate-corner.br{flex-direction:row-reverse}
.plate-corner.tr::before,.plate-corner.br::before{margin-right:-8px;margin-left:8px}
.plate-label{font-family:var(--font-serif);font-style:italic;font-size:clamp(20px,2.2vw,32px);letter-spacing:-0.01em;color:var(--ink);max-width:22ch;text-align:center;padding:0 24px;position:relative;z-index:2;line-height:1.18}
.plate-label small{display:block;font-family:var(--font-mono);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:14px}

@media (max-width:900px){.case{grid-template-columns:1fr;gap:32px;padding:80px 0}.case.reverse .case-vis{order:0}}

/* ─────────────── Capabilities ─────────────── */
.caps-list{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink)}
.cap-row{
  display:grid;grid-template-columns:80px 1fr 1fr auto;gap:32px;align-items:baseline;
  padding:36px 12px 36px 0;border-bottom:1px solid var(--line);
  transition:padding .3s ease, background .3s ease;cursor:default;position:relative;
}
/* accent fill is clipped to the row so it can't bleed, but the row itself
   stays overflow-visible so the hover arrow (translateX) is never cut off */
.cap-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .3s ease;opacity:.06;z-index:0}
.cap-row:hover{padding-left:24px}
.cap-row:hover::before{width:100%}
.cap-row:hover .cap-arrow{transform:translateX(6px) rotate(-45deg);color:var(--accent)}
.cap-row .k{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.06em;align-self:start;padding-top:14px}
.cap-row h3{font-family:var(--font-sans);font-weight:500;font-size:clamp(28px,3.2vw,48px);letter-spacing:-0.035em;line-height:1;color:var(--ink);text-wrap:balance;position:relative;z-index:1}
.cap-row h3 .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent)}
.cap-row .desc{font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:48ch;position:relative;z-index:1}
.cap-row .desc .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:10px}
.cap-arrow{font-family:var(--font-serif);font-size:32px;line-height:1;color:var(--ink-3);align-self:start;padding-top:8px;transition:transform .3s ease, color .3s ease;position:relative;z-index:1}
@media (max-width:900px){.cap-row{grid-template-columns:48px 1fr;gap:14px}.cap-row .desc, .cap-arrow{grid-column:2;padding-top:0}.cap-row .k{padding-top:6px}}

/* ─────────────── Process ─────────────── */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--ink);background:var(--paper)}
.step{padding:36px 24px 32px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:18px;min-height:380px;position:relative;transition:background .3s ease}
.step:first-child{border-left:0}
.step:hover{background:var(--paper-2)}
.step .big-num{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:84px;line-height:1;color:var(--accent);letter-spacing:-0.04em;margin-bottom:8px}
.step .k{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.step h3{font-family:var(--font-sans);font-weight:500;font-size:24px;letter-spacing:-0.025em;line-height:1.05}
.step p{font-size:13.5px;color:var(--ink-3);line-height:1.55;flex:1}
.step .deliver{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase;padding-top:18px;border-top:1px dashed var(--line)}
.step .deliver b{display:block;color:var(--muted);font-weight:500;margin-bottom:4px;font-size:9px}
@media (max-width:1024px){.process{grid-template-columns:repeat(2,1fr)}.step{border-left:1px solid var(--line) !important;border-top:1px solid var(--line);min-height:0}.step:nth-child(odd){border-left:0 !important}.step:first-child, .step:nth-child(2){border-top:0}}
@media (max-width:600px){.process{grid-template-columns:1fr}.step{border-left:0 !important;border-top:1px solid var(--line)}.step:first-child{border-top:0}}

/* ─────────────── Production Trace · sticky scroll-pinned signature piece ─────────────── */
.trace{position:relative;background:linear-gradient(180deg, var(--paper) 0%, #050d12 12%, #050d12 88%, var(--paper) 100%);
  /* Section height drives scroll progress — 5 stages × ~75vh each */
  --trace-stages: 5;
  height: calc(100vh + (var(--trace-stages) * 80vh));
  isolation:isolate;
}
.trace::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 50% at 0% 30%, rgba(3,103,132,.10) 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 70%, rgba(204,184,172,.06) 0%, transparent 70%);
  z-index:0;
}
.trace-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;z-index:1}
.trace-stage-wrap{position:relative;display:grid;grid-template-columns:1fr;gap:36px;max-height:100vh;padding-top:96px;padding-bottom:48px}

.trace-head{display:flex;flex-direction:column;gap:12px}
.trace-eyebrow{color:var(--ink-3)}
.trace-title{font-family:var(--font-sans);font-weight:500;font-size:clamp(28px,3.4vw,52px);letter-spacing:-0.035em;line-height:1.05;color:#f1ece7;max-width:32ch;margin:0}
.trace-line{display:block}
.trace-line-ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--sage);letter-spacing:-0.02em}

/* Progress bar with five ticks — fills as you scroll through the section */
.trace-progress{position:relative;height:18px;display:flex;align-items:center}
.trace-progress::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(241,236,231,.10)}
.trace-progress-bar{position:absolute;left:0;top:50%;height:2px;width:calc(var(--trace-p, 0) * 100%);background:linear-gradient(90deg, var(--sand) 0%, var(--sage) 50%, var(--petrol) 100%);transform:translateY(-50%);transition:none;box-shadow:0 0 12px rgba(154,191,191,.55)}
.trace-progress-ticks{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.trace-progress-ticks span{width:8px;height:8px;border-radius:50%;border:1px solid rgba(241,236,231,.22);background:#03080b;transition:border-color .3s ease, background .3s ease, transform .3s ease}
.trace-progress-ticks span.is-on{border-color:var(--sage);background:var(--petrol);transform:scale(1.15);box-shadow:0 0 14px rgba(154,191,191,.45)}

/* Stages stack — only the active one is visible (others fade out) */
.trace-stages{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;position:relative;flex:1;align-content:center}
.trace-stage{
  grid-column:1;grid-row:1;
  display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:14px;align-items:start;
  opacity:0;transform:translateY(20px) scale(.98);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.trace-stage.is-active{opacity:1;transform:none;pointer-events:auto}
.trace-stage.is-past{opacity:0;transform:translateY(-14px) scale(.985)}
.ts-num{font-family:var(--font-serif);font-style:italic;font-size:clamp(38px,4.6vw,76px);color:var(--sage);line-height:.85;letter-spacing:-0.02em}
.ts-label{grid-column:2;color:var(--ink-3);align-self:end;padding-bottom:4px}
.ts-card{grid-column:1 / span 2;margin-top:6px;padding:28px 32px;border:1px solid rgba(241,236,231,.10);background:linear-gradient(180deg, rgba(10,24,32,.85), rgba(5,13,18,.85));backdrop-filter:blur(6px) saturate(140%);position:relative;overflow:hidden}
.ts-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg, transparent 0%, var(--sage) 18%, var(--petrol) 82%, transparent 100%);opacity:.7}

/* Stage 1 — prompt */
.ts-prompt{font-family:var(--font-serif);font-size:clamp(20px,2.1vw,32px);line-height:1.32;color:#f1ece7;letter-spacing:-0.005em;max-width:48ch}
.ts-prompt em{font-style:italic;color:var(--sand);font-weight:400}
.ts-cursor{display:inline-block;color:var(--sage);margin-right:6px;animation:tsBlink 1.1s steps(2,end) infinite}
@keyframes tsBlink{50%{opacity:0}}

/* Stage 2 — architecture */
.ts-arch{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:rgba(241,236,231,.86)}
.ts-arch-node{padding:14px 18px;border:1px solid rgba(154,191,191,.32);background:rgba(3,103,132,.12);display:flex;flex-direction:column;gap:4px;min-width:160px;opacity:0;transform:translateX(-12px);transition:opacity .45s ease, transform .45s ease}
.ts-arch-node i{font-style:italic;font-family:var(--font-serif);text-transform:none;letter-spacing:-0.005em;color:var(--sage);font-size:12.5px}
.ts-arch-edge{flex:0 0 26px;align-self:center;height:1px;background:linear-gradient(90deg, rgba(154,191,191,.5) 0%, rgba(154,191,191,.5) 60%, transparent 100%);position:relative;opacity:0;transform:scaleX(0);transform-origin:left center;transition:opacity .35s ease, transform .55s cubic-bezier(.22,1,.36,1)}
.ts-arch-edge::after{content:"›";position:absolute;right:-2px;top:-9px;color:var(--sage);font-size:14px}
.trace-stage[data-stage="2"].is-active .ts-arch-node{opacity:1;transform:none}
.trace-stage[data-stage="2"].is-active .ts-arch-node[data-n="1"]{transition-delay:.05s}
.trace-stage[data-stage="2"].is-active .ts-arch-node[data-n="2"]{transition-delay:.25s}
.trace-stage[data-stage="2"].is-active .ts-arch-node[data-n="3"]{transition-delay:.45s}
.trace-stage[data-stage="2"].is-active .ts-arch-node[data-n="4"]{transition-delay:.65s}
.trace-stage[data-stage="2"].is-active .ts-arch-edge{opacity:1;transform:scaleX(1)}
.trace-stage[data-stage="2"].is-active .ts-arch-edge[data-n="1"]{transition-delay:.18s}
.trace-stage[data-stage="2"].is-active .ts-arch-edge[data-n="2"]{transition-delay:.38s}
.trace-stage[data-stage="2"].is-active .ts-arch-edge[data-n="3"]{transition-delay:.58s}

/* Stage 3 — eval gates */
.ts-evals{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(241,236,231,.10);background:rgba(3,8,11,.62);padding:0}
.ts-eval{padding:18px 20px;border-right:1px solid rgba(241,236,231,.08);border-bottom:1px solid rgba(241,236,231,.08);display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(241,236,231,.72);opacity:0;transform:translateY(8px);transition:opacity .35s ease, transform .35s ease}
.ts-eval:nth-child(3n){border-right:0}
.ts-eval:nth-last-child(-n+3){border-bottom:0}
.ts-eval b{font-weight:400;color:var(--ink-3)}
.ts-eval i{font-style:normal;font-family:var(--font-sans);font-size:18px;letter-spacing:-0.02em;color:#f1ece7;text-transform:none;font-weight:500}
.ts-eval em{font-style:italic;font-family:var(--font-serif);font-size:13px;color:var(--sage);letter-spacing:0;text-transform:lowercase}
.ts-eval-warn em{color:var(--sand)}
.trace-stage[data-stage="3"].is-active .ts-eval{opacity:1;transform:none}
.trace-stage[data-stage="3"].is-active .ts-eval[data-e="1"]{transition-delay:.05s}
.trace-stage[data-stage="3"].is-active .ts-eval[data-e="2"]{transition-delay:.15s}
.trace-stage[data-stage="3"].is-active .ts-eval[data-e="3"]{transition-delay:.25s}
.trace-stage[data-stage="3"].is-active .ts-eval[data-e="4"]{transition-delay:.35s}
.trace-stage[data-stage="3"].is-active .ts-eval[data-e="5"]{transition-delay:.45s}
.trace-stage[data-stage="3"].is-active .ts-eval[data-e="6"]{transition-delay:.55s}

/* Stage 4 — deploy log */
.ts-log{font-family:var(--font-mono);font-size:14px;line-height:1.7;color:rgba(241,236,231,.88);margin:0;white-space:pre;background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(3,13,18,.65))}
.ts-log span{display:block;opacity:0;transform:translateY(4px);transition:opacity .25s ease, transform .25s ease}
.ts-log i{font-style:normal;color:var(--sage)}
.ts-log b{font-weight:500;color:var(--sand);font-family:var(--font-mono)}
.ts-log em{font-style:normal;color:var(--mist);font-weight:500;letter-spacing:.05em}
.ts-log em.ok{color:#9bd9b1;text-shadow:0 0 12px rgba(155,217,177,.55)}
.trace-stage[data-stage="4"].is-active .ts-log span{opacity:1;transform:none}
.trace-stage[data-stage="4"].is-active .ts-log span[data-l="1"]{transition-delay:.05s}
.trace-stage[data-stage="4"].is-active .ts-log span[data-l="2"]{transition-delay:.22s}
.trace-stage[data-stage="4"].is-active .ts-log span[data-l="3"]{transition-delay:.39s}
.trace-stage[data-stage="4"].is-active .ts-log span[data-l="4"]{transition-delay:.56s}
.trace-stage[data-stage="4"].is-active .ts-log span[data-l="5"]{transition-delay:.73s}
.trace-stage[data-stage="4"].is-active .ts-log span[data-l="6"]{transition-delay:.95s}

/* Stage 5 — production proof */
.ts-proof{display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:6px;align-items:end;padding:36px 38px}
.ts-proof-num{display:flex;align-items:baseline;gap:6px;font-family:var(--font-sans);font-weight:500;letter-spacing:-0.05em;line-height:.85;color:#f1ece7;font-size:clamp(64px,8vw,128px);grid-row:1 / span 2}
.ts-proof-num em{font-style:normal;font-size:.32em;color:var(--sage)}
.ts-proof-cap{font-family:var(--font-serif);font-size:clamp(20px,2vw,28px);line-height:1.2;color:#f1ece7;letter-spacing:-0.005em;align-self:end}
.ts-proof-cap b{font-weight:400;font-style:italic;color:var(--sage)}
.ts-proof-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ts-proof-meta i{font-style:normal;color:rgba(241,236,231,.45);margin-right:6px}
.ts-proof-meta .d{color:rgba(241,236,231,.18)}

.trace-foot{display:flex;justify-content:space-between;color:var(--ink-3);padding-top:10px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap;gap:8px}
.trace-foot .right{color:rgba(241,236,231,.5)}

@media (max-width: 900px){
  .ts-evals{grid-template-columns:1fr 1fr}
  .ts-eval:nth-child(3n){border-right:1px solid rgba(241,236,231,.08)}
  .ts-eval:nth-child(2n){border-right:0}
  .ts-eval:nth-last-child(-n+3){border-bottom:1px solid rgba(241,236,231,.08)}
  .ts-eval:nth-last-child(-n+2){border-bottom:0}
  .ts-arch{flex-direction:column}
  .ts-arch-edge{height:24px;width:1px;background:linear-gradient(180deg, rgba(154,191,191,.5) 0%, rgba(154,191,191,.5) 60%, transparent 100%);transform-origin:top center;transform:scaleY(0)}
  .trace-stage[data-stage="2"].is-active .ts-arch-edge{transform:scaleY(1)}
  .ts-arch-edge::after{right:auto;top:auto;bottom:-2px;left:-5px}
  .ts-proof{grid-template-columns:1fr}
  .ts-proof-num{grid-row:auto}
}

/* ─────────────── Engage ─────────────── */
.engage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ink);background:var(--paper)}
.engage-card{
  display:flex;flex-direction:column;gap:18px;
  padding:36px 32px 28px;border-left:1px solid var(--line);
  color:var(--ink);transition:background .35s ease, box-shadow .35s ease, transform .35s ease;
  position:relative;min-height:560px;
}
.engage-card:first-child{border-left:0}
.engage-card:hover{background:var(--paper-2)}
/* Featured card: cream-light island. Text stays dark; hover deepens cream slightly with a petrol underglow — never inverts. */
.engage-card.featured{background:#f1ece7;color:#0c1018}
.engage-card.featured:hover{background:#ece4dc;box-shadow:inset 0 0 0 1px rgba(3,103,132,.25), 0 20px 50px -24px rgba(3,103,132,.55)}
.engage-card.featured h3, .engage-card.featured p, .engage-card.featured .engage-list b{color:#0c1018}
.engage-card.featured .engage-list li{border-color:rgba(12,16,24,.12)}
.engage-card.featured .engage-list .mono{color:rgba(12,16,24,.55)}
.engage-card.featured .engage-num{color:var(--petrol)}
.engage-card.featured .engage-tag{border-color:rgba(12,16,24,.20);color:#0c1018}
.engage-card.featured .engage-foot{color:rgba(12,16,24,.62);border-color:rgba(12,16,24,.12)}
.engage-card.featured .engage-foot .arr{color:var(--petrol)}
.engage-card.featured h3 .ital{color:var(--petrol);font-style:italic}
.engage-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.engage-num{color:var(--accent);font-weight:500}
.engage-tag{padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}
.engage-card h3{font-family:var(--font-sans);font-weight:500;font-size:clamp(30px,2.8vw,42px);letter-spacing:-0.035em;line-height:1;margin-top:4px}
.engage-card h3 .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent)}
.engage-card > p{font-family:var(--font-serif);font-size:18px;line-height:1.3;color:var(--ink-2);max-width:38ch;letter-spacing:-0.005em}
.engage-list{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-direction:column;gap:0}
.engage-list li{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-family:var(--font-sans);font-size:13px;color:var(--ink-2);line-height:1.4}
.engage-list .mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.engage-list b{font-weight:500;color:var(--ink);letter-spacing:-0.005em}
.engage-foot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;margin-top:14px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);gap:12px}
.engage-foot .arr{color:var(--accent);font-family:var(--font-serif);font-style:normal;font-size:18px}
.engage-banner{
  margin-top:32px;padding:40px 40px;border:1px solid var(--ink);background:var(--paper);
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
}
.engage-banner-eyebrow{color:var(--muted);margin-bottom:8px}
.engage-banner-copy{font-family:var(--font-serif);font-size:clamp(22px,2.2vw,32px);line-height:1.25;color:var(--ink);max-width:36ch;letter-spacing:-0.005em}
.engage-banner-copy em{font-style:italic;color:var(--accent)}
.engage-banner-cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1024px){.engage-grid{grid-template-columns:1fr}.engage-card{border-left:0 !important;border-top:1px solid var(--line);min-height:0}.engage-card:first-child{border-top:0}}
@media (max-width:760px){.engage-banner{grid-template-columns:1fr;padding:28px}}

/* ─────────────── Philosophy (manifesto) — explicit cream island, never relies on cascaded tokens ─────────────── */
.manifesto-band{background:#f1ece7;color:#0c1018;padding:0;position:relative;isolation:isolate}
.manifesto-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% 0%, rgba(3,103,132,.06) 0%, transparent 70%);z-index:0}
.manifesto-band > .container{position:relative;z-index:1}
.manifesto-band .container{padding-top:160px;padding-bottom:160px}
.manifesto-band .sec-mark{border-top-color:rgba(12,16,24,.18);color:rgba(12,16,24,.5)}
.manifesto-band .sec-mark b{color:#0c1018}
.manifesto-statement{
  font-family:var(--font-sans);font-weight:500;font-size:clamp(40px,6vw,108px);
  letter-spacing:-0.04em;line-height:1.02;color:#0c1018;max-width:18ch;
}
.manifesto-statement .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--petrol);letter-spacing:-0.02em}
.manifesto-statement .strike{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(12,16,24,.4);color:rgba(12,16,24,.45);font-weight:400}

.phil-head{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:start}
.phil-deck{display:flex;flex-direction:column;gap:20px;padding-top:14px}
.phil-deck .eyebrow{color:rgba(12,16,24,.7)}
.phil-deck .eyebrow .dot{background:var(--petrol)}
.phil-deck p{font-family:var(--font-serif);font-size:18px;line-height:1.45;color:rgba(12,16,24,.78);max-width:42ch;text-wrap:pretty}
.phil-deck em{font-style:italic;color:var(--petrol)}

.phil-orchestration{margin:100px 0 64px;padding:36px 0;border-top:1px dashed rgba(12,16,24,.18);border-bottom:1px dashed rgba(12,16,24,.18);overflow-x:auto}
.orch-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:18px;min-width:880px}
.orch-node{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px 12px;position:relative}
.orch-node::before{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid rgba(12,16,24,.14);background:rgba(12,16,24,.025)}
.orch-node.ai::before{border-color:rgba(3,103,132,.34);background:linear-gradient(135deg, rgba(3,103,132,.08), rgba(154,191,191,.10))}
.orch-node.platform::before{border-style:dashed}
.orch-node.prod::before{border-color:rgba(3,103,132,.5);box-shadow:0 0 40px -4px rgba(3,103,132,.30)}
.orch-glyph{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid rgba(12,16,24,.32);display:grid;place-items:center;font-family:var(--font-serif);font-size:22px;color:rgba(12,16,24,.95);background:rgba(12,16,24,.03)}
.orch-node.ai .orch-glyph{border-color:var(--petrol);color:var(--petrol);background:rgba(3,103,132,.08)}
.orch-node.prod .orch-glyph{background:var(--petrol);color:#f1ece7;border-color:var(--petrol)}
.orch-cap{position:relative;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(12,16,24,.9);line-height:1.35}
.orch-cap i{font-style:italic;font-family:var(--font-serif);font-size:13px;color:rgba(12,16,24,.55);letter-spacing:-0.005em;text-transform:none;display:block;margin-top:4px}
.orch-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(12,16,24,.4);width:96px}
.orch-arrow span{display:block;width:100%;height:1px;background:linear-gradient(90deg, transparent, rgba(12,16,24,.45), transparent);position:relative}
.orch-arrow span::after{content:"›";position:absolute;right:0;top:-9px;color:rgba(12,16,24,.6);font-size:14px}
.orch-arrow em{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(12,16,24,.5);font-style:normal}

.phil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(12,16,24,.18);border-bottom:1px solid rgba(12,16,24,.18);margin-bottom:64px}
.phil-cell{padding:32px 24px 36px;border-left:1px solid rgba(12,16,24,.18);display:flex;flex-direction:column;gap:14px}
.phil-cell:first-child{border-left:0;padding-left:0}
.phil-cell .phil-num{font-family:var(--font-serif);font-style:italic;font-size:32px;color:var(--petrol);letter-spacing:-0.02em;line-height:1}
.phil-cell h4{font-family:var(--font-sans);font-weight:500;font-size:22px;letter-spacing:-0.025em;color:rgba(12,16,24,.96);line-height:1.05}
.phil-cell p{font-family:var(--font-serif);font-size:15px;line-height:1.45;color:rgba(12,16,24,.65);max-width:32ch;text-wrap:pretty}

@media (max-width:980px){
  .phil-head{grid-template-columns:1fr;gap:40px}
  .phil-grid{grid-template-columns:repeat(2,1fr)}
  .phil-cell{border-top:1px solid rgba(12,16,24,.18)}
  .phil-cell:nth-child(2){border-left:1px solid rgba(12,16,24,.18)}
  .phil-cell:nth-child(1),.phil-cell:nth-child(2){border-top:0}
}
@media (max-width:560px){
  .phil-grid{grid-template-columns:1fr}
  .phil-cell,.phil-cell:nth-child(2){border-left:0;border-top:1px solid rgba(12,16,24,.18);padding-left:0}
  .phil-cell:first-child{border-top:0}
}
/* orchestration: stack vertically on mobile instead of horizontal scroll */
@media (max-width:720px){
  .phil-orchestration{overflow-x:visible}
  .orch-track{grid-template-columns:1fr;min-width:0;gap:10px;justify-items:center}
  .orch-node{width:100%;max-width:320px}
  .orch-arrow{flex-direction:column;width:auto;gap:4px;padding:2px 0}
  .orch-arrow span{width:1px;height:26px;background:linear-gradient(180deg, transparent, rgba(12,16,24,.45))}
  .orch-arrow span::after{content:"⌄";right:auto;left:50%;top:auto;bottom:-8px;transform:translateX(-50%);line-height:1}
}

.manifesto-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;align-items:end;margin-top:80px;padding-top:24px;border-top:1px solid rgba(12,16,24,.18);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(12,16,24,.5)}
.manifesto-foot b{color:#0c1018;font-weight:500;display:block;margin-top:4px;font-size:13px;letter-spacing:-0.01em;font-family:var(--font-serif);font-style:italic;text-transform:none}
.manifesto-foot .right{text-align:right}
@media (max-width:780px){.manifesto-foot{grid-template-columns:1fr;gap:8px}.manifesto-foot .right{text-align:left}}

/* ─────────────── Voices ─────────────── */
.voices{padding:120px 0 80px}
.voices-lede{display:flex;flex-direction:column;gap:14px;max-width:60ch;margin-bottom:24px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.voices-lede .voices-eyebrow{color:var(--ink-3)}
.voices-intro{font-family:var(--font-serif);font-style:italic;font-size:clamp(20px,1.6vw,26px);color:var(--ink-2);line-height:1.35;letter-spacing:-0.005em;margin:0;max-width:48ch}
.voice-card{
  display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start;
  padding:80px 0;border-top:1px solid var(--line);
}
.voice-quote{font-family:var(--font-serif);font-size:clamp(28px,3.2vw,48px);line-height:1.18;letter-spacing:-0.01em;color:var(--ink);text-wrap:pretty}
.voice-quote em{font-style:italic;color:var(--accent)}
.voice-quote::before{content:"“";font-family:var(--font-serif);font-size:1.4em;line-height:0;color:var(--accent);margin-right:.1em;display:inline-block;transform:translateY(.18em)}
.voice-meta{display:flex;flex-direction:column;gap:12px;padding-top:14px}
.voice-meta .name{font-family:var(--font-sans);font-weight:500;font-size:17px;letter-spacing:-0.015em}
.voice-meta .role{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.voice-meta .engagement-note{margin-top:14px}
.voice-meta .avatar{width:52px;height:52px;border-radius:50%;background:var(--paper-3);border:1px solid var(--line-2);position:relative;overflow:hidden;margin-bottom:14px}
.voice-meta .avatar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg, rgba(241,236,231,.08) 0 1px, transparent 1px 8px)}
@media (max-width:900px){.voice-card{grid-template-columns:1fr;gap:24px}}

/* ─────────────── Practice ─────────────── */
.practice{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start}
.practice .col-l{grid-column:span 5}
.practice .col-r{grid-column:span 7;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.practice .col-l p{font-family:var(--font-serif);font-size:clamp(22px,2.2vw,32px);line-height:1.25;color:var(--ink);max-width:34ch;letter-spacing:-0.005em}
.practice .col-l p em{font-style:italic;color:var(--accent)}
.fact{padding:24px 0;border-bottom:1px solid var(--line);padding-right:32px}
.fact:nth-child(odd){border-right:1px solid var(--line);padding-right:32px}
.fact:nth-child(even){padding-left:32px}
.fact .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fact .v{font-family:var(--font-sans);font-weight:500;font-size:24px;letter-spacing:-0.025em;line-height:1.1;color:var(--ink)}
.fact .v .ital{font-family:var(--font-serif);font-style:italic;color:var(--accent);font-weight:400}
@media (max-width:900px){.practice{grid-template-columns:1fr}.practice .col-l,.practice .col-r{grid-column:span 1}.practice .col-r{grid-template-columns:1fr}.fact:nth-child(odd){border-right:0;padding-right:0}.fact:nth-child(even){padding-left:0}}

/* ─────────────── Contact ─────────────── */
.contact{padding:160px 0 80px}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.contact h2{font-family:var(--font-sans);font-weight:500;font-size:clamp(56px,8.5vw,160px);letter-spacing:-0.05em;line-height:.88;color:var(--ink);text-wrap:balance;max-width:13ch}
.contact h2 .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-0.02em}
.contact-aside{display:flex;flex-direction:column;gap:24px;padding-bottom:24px}
.contact-aside .lead{max-width:38ch;font-family:var(--font-serif);font-size:clamp(20px,1.8vw,26px);line-height:1.3;color:var(--ink-2)}
.contact-aside .lead em{font-style:italic;color:var(--accent)}
.contact-cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.contact-inner{grid-template-columns:1fr}}

/* ─────────────── Social ─────────────── */
.social{position:relative;padding:120px 0 100px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--paper-2) 60%, transparent) 100%)}
.social-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.social .container{position:relative;z-index:2}
.social-rule{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:36px;flex-wrap:wrap}
.social-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(36px,4.8vw,72px);line-height:1.05;letter-spacing:-0.02em;color:var(--ink);max-width:18ch;text-wrap:balance;margin:0 0 56px}
.social-title .ital{font-style:italic;color:var(--accent)}

.social-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.social-card{
  position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:18px;
  padding:24px 20px 20px;border-left:1px solid var(--line);
  color:var(--ink-2);transition:color .25s, background .25s;
  min-height:200px;
}
.social-card:first-child{border-left:0}
.social-card .social-ico{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);transition:transform .25s, border-color .25s, color .25s, background .25s}
.social-card .social-ico svg{width:16px;height:16px}
.social-meta{display:flex;flex-direction:column;gap:4px;align-self:start}
.social-name{font-family:var(--font-sans);font-weight:500;font-size:17px;letter-spacing:-0.015em;color:var(--ink)}
.social-handle{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:lowercase}
.social-stat{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-self:end}
.social-arr{position:absolute;top:24px;right:20px;font-size:16px;color:var(--muted);transition:transform .35s cubic-bezier(.2,.7,.2,1), color .25s}
.social-card:hover{color:var(--ink);background:color-mix(in oklab, var(--accent) 6%, transparent)}
.social-card:hover .social-ico{transform:translateY(-2px) scale(1.05);border-color:var(--accent);color:var(--accent);background:color-mix(in oklab, var(--accent) 14%, transparent)}
.social-card:hover .social-arr{color:var(--accent);transform:translate(4px,-4px) rotate(6deg)}
@media (max-width:980px){.social-grid{grid-template-columns:repeat(2,1fr)}.social-card{border-left:1px solid var(--line);border-top:1px solid var(--line)}.social-card:first-child{border-left:0}.social-card:nth-child(2){border-left:1px solid var(--line)}.social-card:nth-child(1),.social-card:nth-child(2){border-top:0}}
@media (max-width:560px){.social-grid{grid-template-columns:1fr}.social-card,.social-card:nth-child(2){border-left:0;border-top:1px solid var(--line)}.social-card:first-child{border-top:0}}

/* ─────────────── Wordmark footer ─────────────── */
.wordmark{padding:24px 0 8px;overflow:hidden}
.wordmark svg{width:100%;height:auto;display:block}
.foot-bar{display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad-x) 32px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:8px;border-top:1px solid var(--line)}

/* ─────────────── Phase tags (sec-mark phase identity) ─────────────── */
.sec-mark .phase-tag{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink-3);position:relative;padding-left:0}
.sec-mark .phase-tag b{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:14px;color:var(--sage);letter-spacing:0;padding:0 2px}
.phase-i .sec-mark .phase-tag b{color:var(--sand)}
.phase-ii .sec-mark .phase-tag b{color:var(--sage)}
.phase-iii .sec-mark .phase-tag b{color:var(--mist)}
/* manifesto-band (cream) inversions */
.manifesto-band .sec-mark .phase-tag{color:rgba(12,16,24,.55)}
.manifesto-band .sec-mark .phase-tag b{color:var(--petrol)}

/* ─────────────── Reveal ─────────────── */
html.reveal-on .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
html.reveal-on .reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* ─── Scroll-tied word reveal ─── */
.fx-words .wd{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);transition-delay:calc(60ms * var(--i, 0))}
html.reveal-on .fx-words.in .wd{opacity:1;transform:none}
/* keep struck words readable, then draw the strike line in after the word lands */
.manifesto-statement .strike{
  text-decoration:none;
  position:relative;
  color:rgba(12,16,24,.62);
  font-weight:400;
  padding:0 .06em;
}
.manifesto-statement .strike::after{
  content:"";position:absolute;left:0;right:0;top:54%;height:4px;
  background:var(--petrol);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.7,0,.2,1);transition-delay:.95s;
}
.manifesto-statement.in .strike::after{transform:scaleX(1)}
/* phil-cell h4 "AI is craft" gets a subtle underline draw on the first two words */
.phil-cell .fx-words{position:relative;display:inline}
@media (prefers-reduced-motion: reduce){
  .fx-words .wd{opacity:1;transform:none;transition:none}
  .manifesto-statement .strike::after{transform:scaleX(1);transition:none}
}

@keyframes livepulse{50%{box-shadow:0 0 0 7px color-mix(in oklab, oklch(0.82 0.18 218) 5%, transparent)}}