/* ==========================================================
   Cleverways — startup factory
   Palette: blueprint cobalt + desert gold on cool mist / night ink
   ========================================================== */

:root {
  --bg: #EEF0F4;
  --bg-2: #E2E6EE;
  --surface: #F9FAFC;
  --ink: #0D1424;
  --ink-2: #364055;
  --muted: #667086;
  --line: #CAD1DD;
  --cobalt: #2E48F0;
  --cobalt-soft: #DCE1FD;
  --on-cobalt: #FFFFFF;
  --gold: #E3A72F;
  --gold-soft: #F6E5BF;
  --on-gold: #1A1405;

  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090E19;
    --bg-2: #111a2c;
    --surface: #101829;
    --ink: #E8ECF4;
    --ink-2: #B4BDCF;
    --muted: #8590A7;
    --line: #232E46;
    --cobalt: #7389FF;
    --cobalt-soft: #1B2453;
    --on-cobalt: #070B16;
    --gold: #F0BE55;
    --gold-soft: #3A2E14;
    --on-gold: #1A1405;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #090E19;
  --bg-2: #111a2c;
  --surface: #101829;
  --ink: #E8ECF4;
  --ink-2: #B4BDCF;
  --muted: #8590A7;
  --line: #232E46;
  --cobalt: #7389FF;
  --cobalt-soft: #1B2453;
  --on-cobalt: #070B16;
  --gold: #F0BE55;
  --gold-soft: #3A2E14;
  --on-gold: #1A1405;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--cobalt); color: var(--on-cobalt); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); position: relative;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--gold); animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

.h2 {
  font: 800 clamp(40px, 6vw, 84px)/.92 var(--f-display);
  text-transform: uppercase; letter-spacing: -.005em;
  max-width: 16ch;
}
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head--split { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 32px 64px; }
.sec-lede { color: var(--ink-2); font-size: 18px; max-width: 44ch; }

/* ---------- buttons ---------- */
.btn {
  --bx: 0px; --by: 0px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px; border-radius: 6px; border: 1px solid transparent;
  font: 600 15px/1 var(--f-body); text-decoration: none; cursor: pointer;
  transform: translate(var(--bx), var(--by));
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
  white-space: nowrap;
}
.btn--small { padding: 11px 16px; font-size: 14px; }
.btn--cobalt { background: var(--cobalt); color: var(--on-cobalt); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--cobalt) 70%, transparent); }
.btn--cobalt:hover { box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--cobalt) 85%, transparent); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover .arrow, .model:hover .arrow { transform: translateX(4px); }

/* ---------- progress + nav ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--cobalt), var(--gold)); transform-origin: left; transform: scaleX(0); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .45s var(--ease), background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.nav--hidden { transform: translateY(-100%); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--f-body); letter-spacing: -.02em; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.bm-bg { fill: var(--ink); }
.bm-c { fill: none; stroke: var(--bg); stroke-width: 3.2; stroke-linecap: round; }
.bm-dot { fill: var(--gold); transform-box: fill-box; transform-origin: center; }
.brand:hover .bm-dot { animation: dotHop .6s var(--ease); }
@keyframes dotHop { 50% { transform: translateX(-3px) scale(1.4); } }
.nav__links { display: flex; gap: 30px; }
.nav__links a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-block: 4px; transition: background-size .35s var(--ease), color .2s;
}
.nav__links a:hover { color: var(--ink); background-size: 100% 1.5px; }

/* ---------- load-in + split text ---------- */
.js .load-in { opacity: 0; transform: translateY(18px); }
.is-loaded .load-in { opacity: 1; transform: none; transition: opacity .9s var(--ease) calc(var(--d) * 90ms), transform .9s var(--ease) calc(var(--d) * 90ms); }

[data-split] .word { display: inline-block; white-space: nowrap; }
[data-split] .ch { display: inline-block; will-change: transform; }
.js [data-split] .ch { transform: translateY(108%); }
.is-loaded .hero [data-split] .ch,
.footer__word.in .ch {
  transform: none;
  transition: transform 1s var(--ease) calc(var(--c) * 26ms + var(--o, 0ms));
}

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--ease) calc(var(--i, 0) * 90ms), transform .9s var(--ease) calc(var(--i, 0) * 90ms); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(36px, 7vw, 88px)) clamp(48px, 7vw, 96px);
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
}
.hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__title {
  font: 800 clamp(60px, 8.6vw, 124px)/.86 var(--f-display);
  text-transform: uppercase; letter-spacing: -.01em;
  margin-block: 22px 26px;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line--accent { color: var(--cobalt); }
.hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__meta {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 36px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
}
.hero__meta dt { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.hero__meta dd { font-weight: 600; font-size: 15px; }

/* inspection window */
.window {
  margin: 0; position: relative;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--cobalt) 35%, transparent);
  overflow: hidden;
}
.window__bar, .window__stages {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px;
  font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.window__bar { border-bottom: 1px solid var(--line); }
.window__bar span:first-child { display: inline-flex; align-items: center; gap: 8px; }
#morphLabel { color: var(--ink); transition: opacity .3s; }
.rec { width: 7px; height: 7px; border-radius: 50%; background: #E5484D; animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.window__view { position: relative; aspect-ratio: 1 / 1; max-height: 520px; width: 100%; }
.window__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.crop { position: absolute; width: 16px; height: 16px; border-color: var(--cobalt); border-style: solid; border-width: 0; opacity: .8; }
.crop--tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.crop--tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.crop--bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.crop--br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.window__stages { border-top: 1px solid var(--line); }
.window__stages span { position: relative; padding-bottom: 6px; transition: color .3s; }
.window__stages span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalt);
  transform: scaleX(0); transform-origin: left;
}
.window__stages span.is-on { color: var(--ink); }
.window__stages span.is-on::after { animation: fillBar var(--cycle, 3200ms) linear forwards; }
@keyframes fillBar { to { transform: scaleX(1); } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; background: var(--bg); }
.marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 42s linear infinite; }
.marquee__track span {
  font: 800 clamp(36px, 5vw, 72px)/1 var(--f-display); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  transition: color .4s;
}
.marquee__track span:hover { color: var(--ink); }
.marquee__track b { font: 700 clamp(24px, 3.2vw, 44px)/1 var(--f-body); color: var(--cobalt); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 18px)); } }

/* ---------- the line (assembly) ---------- */
.line-sec { padding-top: clamp(80px, 12vw, 150px); }
.assembly { position: relative; height: 520vh; }
.assembly__sticky {
  position: sticky; top: env(safe-area-inset-top, 0px);
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 36px);
  padding-top: calc(var(--nav-h) - 20px);
  overflow: hidden;
}
.assembly__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 64px); align-items: center; }

.stations { position: relative; }
.js .stations { min-height: 400px; }
.st { display: grid; gap: 18px; align-content: center; padding-block: 12px; }
.js .st {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(24px); filter: blur(4px);
  transition: opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease);
  pointer-events: none;
}
.js .st.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.js .st.is-past { transform: translateY(-24px); }
.st__meta { display: flex; gap: 18px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st__meta span:first-child { color: var(--cobalt); }
.st__title { font: 900 clamp(64px, 9vw, 136px)/.82 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.st__body { font-size: 18px; color: var(--ink-2); max-width: 42ch; }
.st__out { display: flex; flex-wrap: wrap; gap: 8px; }
.st__out li {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px/1 var(--f-mono); padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
}
.st__out li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--gold); transform: rotate(45deg); }

.stage { position: relative; width: 100%; max-width: 100%; }
.stage__svg { display: block; width: 100%; height: auto; max-height: 64vh; overflow: visible; }

/* svg parts */
.bp-line { fill: none; stroke: var(--line); stroke-width: 1; }
#bpGrid { opacity: .15; }
.s-curve { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.curve-t { fill: var(--ink-2); font: 500 13px var(--f-mono); letter-spacing: .06em; opacity: 0; }
.thoughts text { fill: var(--muted); font: italic 400 13px var(--f-mono); animation: float 5s ease-in-out infinite; }
.thoughts text:nth-child(2) { animation-delay: -1.2s; }
.thoughts text:nth-child(3) { animation-delay: -2.4s; }
.thoughts text:nth-child(4) { animation-delay: -3.6s; }
@keyframes float { 50% { transform: translateY(-8px); } }

.dev-sketch { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 9 7; opacity: 0; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -32; } }
.dev-body { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
#devSolid, #ui, #live, #lotMain, .stack-card, #channels .ch { opacity: 0; }
.sk { fill: var(--bg-2); }
.ui-head { fill: var(--cobalt); }
.ui-head--ink { fill: var(--ink); }
.ui-head-t { fill: var(--on-cobalt); font: 500 12px var(--f-mono); }
.ui-head-dot { fill: var(--on-cobalt); opacity: .45; }
.ui-card { fill: var(--bg); stroke: var(--line); }
.ui-label { fill: var(--muted); font: 500 9px var(--f-mono); letter-spacing: .1em; }
.ui-num { fill: var(--ink); font: 800 30px var(--f-display); font-variant-numeric: tabular-nums; }
.ui-area { fill: var(--gold-soft); opacity: 0; }
.ui-line { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ui-line--static { stroke-dasharray: none; stroke-dashoffset: 0; }
.ui-row { fill: var(--bg-2); }
.ui-row--on { fill: var(--cobalt-soft); }
.ui-btn { fill: var(--cobalt); }
.ui-btn-t { fill: var(--on-cobalt); font: 600 11px var(--f-body); }
.ui-ghost { fill: none; stroke: var(--line); }
.ui-ghost-t { fill: var(--ink-2); font: 600 11px var(--f-body); }
.live-bg { fill: var(--ink); }
.live-dot { fill: var(--gold); animation: livePulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes livePulse { 50% { opacity: .3; transform: scale(.7); } }
.live-t { fill: var(--bg); font: 600 11px var(--f-mono); letter-spacing: .14em; }
.lot { fill: var(--muted); font: 500 18px var(--f-mono); letter-spacing: .14em; }
.lot--main { fill: var(--cobalt); }
.spark-core { fill: var(--gold); }
.spark-glow { transform-box: fill-box; transform-origin: center; animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.25); opacity: .7; } }
.rays { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
.rays line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
@keyframes spin { to { transform: rotate(360deg); } }
.note-bg { fill: var(--gold-soft); stroke: color-mix(in srgb, var(--gold) 45%, transparent); }
.note-t { fill: var(--ink); font: 600 13px var(--f-body); }
.note-s { fill: var(--ink-2); font: 500 11px var(--f-mono); }
#notes > g { opacity: 0; }
.ch-line { stroke: var(--cobalt); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; }
.chip-bg { fill: var(--surface); stroke: var(--cobalt); stroke-width: 1.5; }
.chip-t { fill: var(--ink); font: 600 12px var(--f-body); }

/* belt */
.belt { display: grid; gap: 14px; }
.belt__rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.belt__track { position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; background: var(--line); }
.belt__fill { position: absolute; inset: 0; background: var(--cobalt); transform-origin: left; transform: scaleX(0); }
.belt__node {
  position: relative; display: grid; justify-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  transition: color .3s;
}
.belt__node i {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  transition: border-color .3s, background-color .3s, transform .4s var(--ease);
}
.belt__node:hover { color: var(--ink); }
.belt__node.is-done i { background: var(--cobalt); border-color: var(--cobalt); }
.belt__node.is-active { color: var(--ink); }
.belt__node.is-active i { border-color: var(--cobalt); background: var(--bg); transform: scale(1.25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cobalt) 18%, transparent); }
.belt__band {
  height: 12px; border-radius: 3px;
  background-image: repeating-linear-gradient(-45deg, var(--ink) 0 7px, transparent 7px 16px);
  opacity: .12;
}

/* ---------- run sheet ---------- */
.runsheet { padding-block: clamp(80px, 12vw, 160px); }
.gantt-scroll { overflow-x: auto; padding-bottom: 8px; margin-bottom: clamp(56px, 8vw, 96px); }
.gantt { min-width: 720px; display: grid; gap: 10px; }
.gantt__head, .gantt__row { display: grid; grid-template-columns: 120px 1fr; align-items: center; }
.gantt__label { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gantt__row .gantt__label { color: var(--ink); font-weight: 500; }
.gantt__weeks { position: relative; display: grid; grid-template-columns: repeat(16, 1fr); padding-bottom: 18px; }
.gantt__weeks span { font: 500 11px/1 var(--f-mono); color: var(--muted); padding-left: 6px; font-variant-numeric: tabular-nums; }
.gate {
  position: absolute; bottom: 0; left: calc(var(--w) / 16 * 100%);
  width: 10px; height: 10px; background: var(--gold); transform: translateX(-50%) rotate(45deg);
}
.gate::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: 14px;
  transform: rotate(-45deg) translate(-10%, -10px);
  font: 500 10.5px/1 var(--f-mono); color: var(--ink); white-space: nowrap; letter-spacing: .04em;
  background: var(--gold-soft); padding: 5px 7px; border-radius: 3px;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.gate:hover::after { opacity: 1; }
.gantt__track {
  position: relative; height: 46px; border-radius: 4px;
  background-color: var(--surface);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 16) 100%;
  border: 1px solid var(--line);
}
.bar {
  --c: var(--cobalt); --t: var(--on-cobalt);
  position: absolute; top: 7px; bottom: 7px;
  left: calc(var(--s) / 16 * 100%); width: calc((var(--e) - var(--s)) / 16 * 100%);
  background: var(--c); border-radius: 3px;
  display: flex; align-items: center; padding-inline: 10px; overflow: hidden;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) calc(var(--i) * 140ms + 200ms);
}
.bar em { font: 500 11.5px/1 var(--f-mono); font-style: normal; color: var(--t); white-space: nowrap; opacity: 0; transition: opacity .5s calc(var(--i) * 140ms + 900ms); }
.bar--ink { --c: var(--ink); --t: var(--bg); }
.bar--gold { --c: var(--gold); --t: var(--on-gold); }
.bar--open { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.gantt-scroll.in .bar { transform: scaleX(1); }
.gantt-scroll.in .bar em { opacity: 1; }
.no-io .bar { transform: none; } .no-io .bar em { opacity: 1; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; }
.stat__n { font: 800 clamp(64px, 8vw, 112px)/.9 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat__n small { font-size: .45em; color: var(--muted); margin-left: 4px; }
.stat__l { color: var(--ink-2); font-size: 15px; max-width: 24ch; }

/* ---------- capabilities ---------- */
.caps { padding-block: clamp(40px, 6vw, 80px) clamp(80px, 12vw, 160px); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cap--wide { grid-column: span 2; }
.spot { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), color-mix(in srgb, var(--cobalt) 16%, transparent), transparent 60%);
  transition: opacity .4s;
}
.spot:hover::before { opacity: 1; }
.cap {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(22px, 2.4vw, 32px); min-height: 260px;
  transition: border-color .3s, transform .5s var(--ease);
}
.cap:hover { border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line)); }
.cap__icon { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: auto; transition: transform .5s var(--ease); }
.cap__icon .acc { stroke: var(--cobalt); stroke-width: 2; stroke-dasharray: 30; stroke-dashoffset: 0; }
.cap:hover .cap__icon { transform: translateY(-4px) rotate(-4deg); }
.cap:hover .cap__icon .acc { animation: redraw .8s var(--ease); }
@keyframes redraw { from { stroke-dashoffset: 30; } }
.cap h3 { font: 600 22px/1.2 var(--f-body); letter-spacing: -.01em; margin-top: 28px; }
.cap p { color: var(--ink-2); font-size: 15.5px; max-width: 48ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags li { font: 500 11.5px/1 var(--f-mono); color: var(--muted); padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; }

/* ---------- models ---------- */
.models { padding-bottom: clamp(80px, 12vw, 160px); }
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.model {
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  padding: clamp(24px, 2.6vw, 36px);
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
}
.model:hover { translate: 0 -6px; border-color: var(--ink); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ink) 45%, transparent); }
.model__kicker { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.model__title { font: 800 clamp(40px, 4vw, 56px)/.9 var(--f-display); text-transform: uppercase; }
.model__body { color: var(--ink-2); font-size: 15.5px; }
.model__split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-block: 16px; border-block: 1px dashed var(--line); margin-top: auto; }
.model__split dt { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.model__split dd { font-size: 14px; font-weight: 600; }
.model__cta { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }

/* ---------- pitch ---------- */
.pitch { background: var(--ink); color: var(--bg); padding-block: clamp(80px, 12vw, 150px); position: relative; overflow: hidden; }
.pitch__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.eyebrow--inv { color: color-mix(in srgb, var(--bg) 60%, var(--ink)); }
.pitch__title { font: 900 clamp(56px, 8.4vw, 128px)/.86 var(--f-display); text-transform: uppercase; margin-top: 22px; letter-spacing: -.01em; }
.pitch__title span { display: block; color: var(--gold); }
.pitch__band {
  height: 12px; margin-block: 28px; border-radius: 3px; opacity: .22;
  background-image: repeating-linear-gradient(-45deg, var(--bg) 0 7px, transparent 7px 16px);
  background-size: 22.6px 12px;
  animation: belt 1.2s linear infinite;
}
@keyframes belt { to { background-position: 22.6px 0; } }
.pitch__lede { color: color-mix(in srgb, var(--bg) 78%, var(--ink)); font-size: 18px; max-width: 42ch; }
.pitch__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.pitch__mail-l { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, var(--ink)); }
.pitch__mail-a { font: 600 20px/1.2 var(--f-body); user-select: all; }
.copy {
  background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 30%, var(--ink)); color: var(--bg);
  border-radius: 4px; padding: 7px 11px; font: 500 12px/1 var(--f-mono); cursor: pointer; transition: border-color .2s, background-color .2s;
}
.copy:hover { border-color: var(--bg); }

.form { display: grid; gap: 22px; background: color-mix(in srgb, var(--bg) 5%, var(--ink)); border: 1px solid color-mix(in srgb, var(--bg) 14%, var(--ink)); border-radius: 12px; padding: clamp(22px, 3vw, 36px); }
.field { display: grid; gap: 8px; }
.field label, .field__l { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 60%, var(--ink)); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; background: transparent; color: var(--bg);
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 25%, var(--ink));
  padding: 10px 0; font: 400 17px/1.5 var(--f-body); resize: vertical; border-radius: 0;
  transition: border-color .25s;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--bg) 35%, var(--ink)); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field .is-bad { border-bottom-color: #F2555A !important; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span {
  display: inline-block; padding: 10px 14px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--bg) 22%, var(--ink));
  font: 500 14px/1 var(--f-body); color: color-mix(in srgb, var(--bg) 80%, var(--ink));
  transition: background-color .25s, color .25s, border-color .25s;
}
.seg input:checked + span { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form .btn { justify-self: start; }
.form__status { font: 500 13px/1.5 var(--f-mono); color: var(--gold); min-height: 1.5em; }

/* ---------- footer ---------- */
.footer { padding-top: clamp(56px, 8vw, 96px); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__grid p { color: var(--ink-2); font-size: 15px; }
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__h { font: 500 11px/1 var(--f-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 14px; }
.footer__links { display: grid; gap: 8px; font-size: 15px; }
.footer__links a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.footer__links a:hover { color: var(--cobalt); }
.footer__word {
  font: 900 clamp(64px, 17vw, 260px)/.8 var(--f-display);
  text-align: center; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line);
  margin-top: clamp(40px, 6vw, 72px); overflow: hidden; padding-inline: 16px;
  user-select: none;
}
.footer__word .ch { transition-duration: 1.2s !important; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted);
}

/* ==========================================================
   Extra motion layer
   ========================================================== */

/* custom cursor ring (fine pointers only, enabled by JS) */
.cursor { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .3s; }
.has-cursor .cursor { opacity: 1; }
.cursor__ring {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 50%;
  display: grid; place-items: center;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s;
}
.cursor__ring em { font: 500 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--on-cobalt); opacity: 0; transition: opacity .2s; }
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 12%, transparent); }
.cursor.is-label .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--cobalt); border-color: var(--cobalt); }
.cursor.is-label .cursor__ring em { opacity: 1; }
.cursor.is-down .cursor__ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

/* nav active indicator */
.nav__links { position: relative; }
.nav__links a.is-active { color: var(--ink); }
.nav__ind {
  position: absolute; bottom: -6px; left: 0; height: 2px; width: 0; border-radius: 2px;
  background: var(--cobalt); opacity: 0;
  transition: left .5s var(--ease), width .5s var(--ease), opacity .3s;
}

/* hero background flows */
.flows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.flows path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 9; animation: flow 3s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -48; } }
.pk--c { fill: var(--cobalt); } .pk--g { fill: var(--gold); } .pk--i { fill: var(--ink); }

/* hero parallax on scroll-out */
.hero__copy { translate: 0 calc(var(--hs, 0) * -80px); opacity: calc(1 - var(--hs, 0) * .7); }
.window { scale: calc(1 - var(--hs, 0) * .08); }

/* 3D tilt */
.hero__grid, .bento, .model-grid { perspective: 1400px; }
.reveal.in.tilt {
  transition: opacity .9s var(--ease) calc(var(--i, 0) * 90ms), transform .9s var(--ease) calc(var(--i, 0) * 90ms),
    rotate .45s var(--ease), translate .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
}
.is-loaded .load-in.tilt {
  transition: opacity .9s var(--ease) calc(var(--d) * 90ms), transform .9s var(--ease) calc(var(--d) * 90ms), rotate .45s var(--ease);
}

/* h2 word mask reveal */
.h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h2 .wi { display: inline-block; transform-origin: 0 100%; }
.js .h2 .wi { transform: translateY(108%) rotate(4deg); }
.in .h2 .wi { transform: none; transition: transform 1s var(--ease) calc(var(--w) * 55ms + 120ms); }

/* station titles: characters rise on change, outputs stagger */
/* station titles: letters rise and fade in on change (no clipping box, so nothing gets cut off) */
.st__title { line-height: .9; padding-block: .04em; }
.st__title .sch { display: inline-block; }
.js .st__title .sch { opacity: 0; transform: translateY(.35em); transition: opacity .3s, transform .35s var(--ease); }
.js .st.is-active .st__title .sch { opacity: 1; transform: none; transition: opacity .6s var(--ease) calc(var(--c) * 40ms + 80ms), transform .8s var(--ease) calc(var(--c) * 40ms + 80ms); }
.js .st .st__out li { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.js .st.is-active .st__out li { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(380ms + var(--n, 0) * 90ms), transform .6s var(--ease) calc(380ms + var(--n, 0) * 90ms); }
.st__out li:nth-child(2) { --n: 1; } .st__out li:nth-child(3) { --n: 2; }
.js .st .st__body { transition: opacity .5s var(--ease) .25s; }

/* stage pulse on station change */
.st-pulse { fill: none; stroke: var(--cobalt); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.st-pulse.go { animation: stPulse 1s var(--ease); }
@keyframes stPulse { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(4.2); } }

/* conveyor with rollers */
.belt__conv { display: flex; align-items: center; gap: 6px; }
.belt__conv .belt__band { flex: 1; }
.roller { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; }

/* marquee: JS drives it when motion is allowed */
.marquee { display: grid; gap: 14px; }
.marquee--js .marquee__track { animation: none; will-change: transform; }
.marquee__track--alt { gap: 22px; animation-direction: reverse; animation-duration: 50s; }
.marquee__track--alt span { font: 700 clamp(22px, 2.6vw, 34px)/1 var(--f-display); color: var(--ink-2); -webkit-text-stroke: 0; letter-spacing: .02em; }
.marquee__track--alt i { font-style: normal; color: var(--gold); font-size: 18px; }

/* production board (split-flap) */
.sec-head--board { align-items: center; }
.board {
  background: var(--ink); color: var(--bg); border-radius: 12px;
  padding: clamp(16px, 2vw, 22px); display: grid; gap: 10px;
  box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--ink) 60%, transparent);
  font-family: var(--f-mono); max-width: 100%; overflow: hidden;
}
.board__top, .board__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 60%, var(--ink)); }
.board__top span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.board__clock b { color: var(--gold); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.board__head { display: grid; grid-template-columns: auto 1fr auto; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--bg) 14%, var(--ink)); }
.board__rows { display: grid; gap: 8px; }
.brow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; position: relative; padding-bottom: 8px; }
.brow__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--bg) 10%, var(--ink)); border-radius: 2px; overflow: hidden; }
.brow__bar b { position: absolute; inset: 0; background: var(--cobalt); transform-origin: left; transform: scaleX(var(--pr, 0)); transition: transform 1.2s var(--ease), background-color .4s; }
.brow.is-stopped .brow__bar b { background: #E5484D; }
.brow.is-scaled .brow__bar b { background: var(--gold); }
.flapset { display: inline-flex; gap: 2px; }
.fl {
  display: inline-grid; place-items: center; width: 1.05em; height: 1.55em;
  font: 500 clamp(8.5px, 2.4vw, 12px)/1 var(--f-mono); text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 9%, var(--ink)); border-radius: 2px; position: relative;
  color: var(--bg);
}
.fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--ink) 70%, transparent); }
.fl.flip { animation: flip .09s linear; }
@keyframes flip { 50% { transform: scaleY(.2); } }
.flapset--st .fl { color: var(--gold); }
.brow.is-stopped .flapset--st .fl { color: #FF7A7E; }
.board__note { font: 400 11px/1.4 var(--f-mono); color: color-mix(in srgb, var(--bg) 45%, var(--ink)); }

/* run sheet playhead */
.gantt { position: relative; }
.playhead {
  position: absolute; top: 22px; bottom: 0; width: 2px; z-index: 2;
  left: calc(120px + (100% - 120px) * var(--ph, 0));
  background: var(--ink); opacity: 0; transition: opacity .4s; pointer-events: none;
}
.playhead.on { opacity: 1; }
.playhead span {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; white-space: nowrap;
  background: var(--ink); color: var(--bg); padding: 4px 6px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.bar.is-live { filter: brightness(1.12) saturate(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent), 0 8px 24px -8px var(--c); }
.bar { transition: transform 1.1s var(--ease) calc(var(--i) * 140ms + 200ms), box-shadow .3s, filter .3s; }

/* gates simulation */
.gates { padding-bottom: clamp(80px, 12vw, 160px); }
.gates__panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gates__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gates__bar > span { display: inline-flex; align-items: center; gap: 8px; }
.gates__counts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.gates__counts b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 6px; }
#gatesCanvas { display: block; width: 100%; height: 380px; }

/* footer wordmark letters react */
.footer__word .ch { transition: transform .5s var(--ease), color .3s, -webkit-text-stroke-color .3s; }
.footer__word.in .ch:hover { transform: translateY(-7%); color: var(--cobalt); -webkit-text-stroke-color: var(--cobalt); transition-delay: 0s; transition-duration: .3s !important; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .window { max-width: 560px; }
  .sec-head--split { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .model-grid { grid-template-columns: 1fr; }
  .pitch__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .assembly { height: 460vh; }
  .assembly__grid { grid-template-columns: 1fr; gap: 8px; }
  .js .stations { min-height: 250px; }
  .st { gap: 10px; }
  .st__title { font-size: clamp(52px, 13vw, 88px); }
  .st__body { font-size: 15.5px; }
  .stage__svg { max-height: 40vh; margin-inline: auto; }
}
@media (max-width: 980px) and (max-height: 820px) {
  .st__out { display: none; }
  .js .stations { min-height: 210px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero__meta { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .cap--wide { grid-column: auto; }
  .cap { min-height: 0; }
  .belt__node span { font-size: 9.5px; letter-spacing: .06em; }
  .footer__grid { grid-template-columns: 1fr; }
  .nav .btn--small { padding: 10px 12px; font-size: 13px; }
  #gatesCanvas { height: 320px; }
  .brow { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .load-in { opacity: 1; transform: none; }
  .js [data-split] .ch, .js .h2 .wi, .js .st__title .sch { transform: none; opacity: 1; }
  .js .st .st__out li { opacity: 1; transform: none; }
  .hero__copy { translate: none; opacity: 1; } .window { scale: none; }
  .marquee__track { animation: none; }
}
.board__head { gap: 10px; justify-content: stretch; }
.pitch--js .pitch__band { animation: none; }
@media (max-width: 600px) { .board__head { gap: 6px; } }
@media (min-width: 981px) { .sec-head--board { grid-template-columns: 1fr minmax(0, 1fr); } }
.brow > *, .board__head > * { min-width: 0; }
@media (max-width: 600px) { .flapset { gap: 1px; } .brow { gap: 5px; } .board { padding: 14px; } }

/* production board keeps one look in both themes: a dark departures board */
.board {
  --bd-bg: #0B1120; --bd-cell: #1B2539; --bd-line: #26314A; --bd-text: #F3F5F9; --bd-dim: #8C96AC; --bd-gold: #F2C25E; --bd-red: #FF7A7E; --bd-blue: #7389FF;
  background: var(--bd-bg); color: var(--bd-text); border: 1px solid var(--bd-line);
}
.board__top, .board__head { color: var(--bd-dim); }
.board__head { border-top-color: var(--bd-line); }
.board__clock b { color: var(--bd-gold); }
.brow__bar { background: var(--bd-line); }
.brow__bar b { background: var(--bd-blue); }
.brow.is-scaled .brow__bar b { background: var(--bd-gold); }
.fl { background: var(--bd-cell); color: var(--bd-text); }
.fl::after { background: rgba(0, 0, 0, .45); }
.flapset--st .fl { color: var(--bd-gold); }
.brow.is-stopped .flapset--st .fl { color: var(--bd-red); }
.board__note { color: var(--bd-dim); }

/* ==========================================================
   Use case: sticky phone that builds itself as you scroll
   ========================================================== */
.case { padding-bottom: clamp(60px, 10vw, 140px); }
.case__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.case__steps { display: grid; }
.cstep {
  min-height: 82vh; display: flex; flex-direction: column; justify-content: center; gap: 16px;
  opacity: .28; transition: opacity .6s var(--ease);
}
.cstep.is-on { opacity: 1; }
.cstep__meta { display: flex; gap: 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cstep__meta span:last-child { color: var(--cobalt); }
.cstep__title { font: 800 clamp(34px, 4.2vw, 58px)/.95 var(--f-display); text-transform: uppercase; max-width: 16ch; }
.cstep__body { color: var(--ink-2); font-size: 17px; max-width: 44ch; }
.cstep__kpi { display: inline-flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line); max-width: 44ch; }
.cstep__kpi b { font: 800 30px/1 var(--f-display); color: var(--ink); }
.cstep.is-on .cstep__kpi b { animation: kpiIn .8s var(--ease); }
@keyframes kpiIn { from { opacity: 0; transform: translateY(10px); } }

.case__stage {
  position: sticky; top: calc(50vh - 300px); height: 600px; align-self: start;
  display: flex; justify-content: center; align-items: center;
}
.case__dots { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.case__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color .3s, transform .4s var(--ease); }
.case__dots i.is-on { background: var(--cobalt); transform: scale(1.5); }
.case__float {
  position: absolute; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 12px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  animation: float 6s ease-in-out infinite; white-space: nowrap;
}
.case__float--a { top: 14%; right: 0; }
.case__float--b { bottom: 16%; left: 6%; color: var(--cobalt); animation-delay: -3s; }

/* device */
.phone {
  position: relative; width: 290px; height: 600px; flex: none;
  border-radius: 46px; background: var(--surface);
  border: 10px solid #0B1120; overflow: hidden;
  box-shadow: 0 0 0 1px #26314A, 0 50px 90px -40px color-mix(in srgb, var(--cobalt) 55%, transparent), 0 30px 60px -30px rgba(0, 0, 0, .45);
  isolation: isolate;
}
.phone__notch { position: absolute; top: 8px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: #0B1120; border-radius: 14px; z-index: 5; }
.phone__status { position: absolute; top: 12px; left: 22px; right: 22px; display: flex; justify-content: space-between; font: 600 11px/1 var(--f-body); color: var(--ink); z-index: 4; transition: color .4s; }
.phone.on-dark .phone__status { color: #fff; }

.scr {
  position: absolute; inset: 0; padding: 46px 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(18px) scale(.97); filter: blur(4px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
  font-size: 12.5px; color: var(--ink);
}
.scr.is-on { opacity: 1; transform: none; filter: none; }
.scr__head, .doc { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.scr__head b, .doc b { display: block; font-size: 13px; }
.scr__head small, .doc small { color: var(--muted); font-size: 11px; }
.ava { width: 34px; height: 34px; border-radius: 50%; background: #25A36A; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.ava--doc { background: var(--cobalt); color: var(--on-cobalt); }
.scr__title { font: 800 24px/1 var(--f-display); text-transform: uppercase; margin-top: 4px; }
.scr__sub { color: var(--muted); font-size: 11.5px; margin-top: -4px; margin-bottom: 6px; }

/* shared in-screen entrance, restarted every time a screen turns on */
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }

/* 0 chat */
.chat { display: flex; flex-direction: column; gap: 7px; }
.bub { align-self: flex-start; max-width: 82%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: var(--bg-2); opacity: 0; }
.bub--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--cobalt-soft); }
.alarm { margin-top: auto; align-self: center; background: #E5484D; color: #fff; font: 600 12px/1 var(--f-mono); padding: 9px 14px; border-radius: 999px; opacity: 0; }
.scr.is-on .bub { animation: popIn .45s var(--ease) forwards calc(var(--k) * 300ms + 250ms); }
.scr.is-on .alarm { animation: popIn .4s var(--ease) forwards calc(var(--k) * 300ms + 250ms), shake .5s calc(var(--k) * 300ms + 700ms) 2; }
@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* 1 survey */
.sv { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); opacity: 0; }
.sv span { font-size: 12px; color: var(--ink-2); }
.sv b { font: 600 12px/1.3 var(--f-mono); font-variant-numeric: tabular-nums; }
.sv i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-2); position: relative; overflow: hidden; }
.sv i::after { content: ""; position: absolute; inset: 0; background: var(--cobalt); border-radius: 3px; transform-origin: left; transform: scaleX(0); }
.sv--gold i::after { background: var(--gold); }
.scr.is-on .sv { animation: popIn .4s var(--ease) forwards calc(var(--k) * 260ms + 200ms); }
.scr.is-on .sv i::after { animation: grow 1s var(--ease) forwards calc(var(--k) * 260ms + 450ms); }
@keyframes grow { to { transform: scaleX(var(--v)); } }
.stamp {
  margin: auto auto 6px; font: 900 44px/1 var(--f-display); color: var(--gold); letter-spacing: .06em;
  border: 4px solid var(--gold); padding: 4px 18px 2px; border-radius: 6px; rotate: -8deg; opacity: 0;
}
.scr.is-on .stamp { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) forwards 1.6s; }
@keyframes stamp { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: scale(1); } }

/* 2 booking */
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.days span { display: grid; justify-items: center; gap: 2px; padding: 7px 0; border-radius: 10px; border: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.days b { font: 700 15px/1 var(--f-body); color: var(--ink); }
.days .on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.days .on b { color: var(--bg); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slots span { text-align: center; padding: 9px 0; border-radius: 8px; border: 1px solid var(--line); font: 500 12px/1 var(--f-mono); opacity: 0; }
.slots .off { color: var(--muted); text-decoration: line-through; background: var(--bg-2); border-color: transparent; }
.scr.is-on .slots span { animation: popIn .35s var(--ease) forwards; }
.scr.is-on .slots span:nth-child(3n+2) { animation-delay: .08s; }
.scr.is-on .slots span:nth-child(3n) { animation-delay: .16s; }
.scr.is-on .slots .pick { animation: popIn .35s var(--ease) forwards .08s, pick .5s var(--ease) forwards 1.1s; }
@keyframes pick { to { background: var(--cobalt); color: var(--on-cobalt); border-color: var(--cobalt); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cobalt) 22%, transparent); } }
.cta { margin-top: auto; text-align: center; padding: 13px; border-radius: 12px; background: var(--cobalt); color: var(--on-cobalt); font-weight: 600; font-size: 13px; opacity: .35; }
.scr.is-on .cta { animation: ctaOn .3s forwards 1.5s, press .3s 2s; }
@keyframes ctaOn { to { opacity: 1; } }
@keyframes press { 50% { transform: scale(.94); } }
.done {
  position: absolute; inset: auto 0 0 0; height: 62%; border-radius: 26px 26px 0 0;
  background: var(--surface); box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .3); border-top: 1px solid var(--line);
  display: grid; place-content: center; justify-items: center; gap: 6px; transform: translateY(105%);
}
.done b { font: 800 30px/1 var(--f-display); text-transform: uppercase; }
.done small { color: var(--muted); font: 500 12px/1 var(--f-mono); }
.done__check { width: 64px; height: 64px; border-radius: 50%; background: var(--cobalt); display: grid; place-items: center; margin-bottom: 6px; }
.done__check svg { width: 34px; height: 34px; fill: none; stroke: var(--on-cobalt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.scr.is-on .done { animation: sheet .6s var(--ease) forwards 2.4s; }
.scr.is-on .done__check svg { animation: draw .5s var(--ease) forwards 2.9s; }
@keyframes sheet { to { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tap { display: none; }

/* 3 lock-screen notifications */
.scr--notify { background: linear-gradient(165deg, #2E48F0 0%, #1A2463 55%, #0B1120 100%); color: #fff; }
.lock__time { font: 700 64px/1 var(--f-display); text-align: center; margin-top: 18px; }
.lock__date { text-align: center; font-size: 12px; opacity: .8; margin-bottom: 14px; }
.note {
  display: grid; gap: 3px; padding: 11px 13px; border-radius: 16px;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18); opacity: 0;
}
.note b { font-size: 12px; }
.note span { font-size: 12px; opacity: .9; line-height: 1.4; }
.note--ar { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; text-align: right; }
.note--ok b { color: #7CE3A8; }
.note--gold b { color: #F2C25E; }
.scr.is-on .note { animation: slideDown .55s var(--ease) forwards calc(var(--k) * 650ms + 300ms); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-24px) scale(.95); } to { opacity: 1; transform: none; } }

/* 4 dashboard */
.dash__kpi { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.dash__kpi small, .dash__row small { color: var(--muted); font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.dash__kpi b { font: 800 56px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--cobalt); }
.dash__kpi em { font: 500 11px/1 var(--f-mono); font-style: normal; color: #1E9E5A; }
.dash__chart { width: 100%; height: 110px; display: block; }
.dash__grid { stroke: var(--line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.dash__area { fill: var(--cobalt-soft); opacity: 0; }
.dash__line { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.scr.is-on .dash__line { animation: draw 1.6s var(--ease) forwards .3s; }
.scr.is-on .dash__area { animation: ctaOn .8s forwards 1.2s; }
.dash__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash__row > div { padding: 12px; border-radius: 12px; border: 1px solid var(--line); display: grid; gap: 4px; }
.dash__row b { font: 800 26px/1 var(--f-display); }
.badge { margin-top: auto; align-self: center; background: var(--gold); color: var(--on-gold); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; opacity: 0; }
.scr.is-on .badge { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) forwards 1.9s; }

@media (max-width: 980px) {
  .case__grid { grid-template-columns: 1fr; gap: 0; }
  /* the phone pins to the top as a solid panel; the story scrolls below it */
  .case__stage {
    order: -1; top: 0; height: auto; z-index: 3;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    padding-block: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 4px) 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .case__stage::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
    background: linear-gradient(var(--bg), transparent);
  }
  .phone { zoom: .58; }
  .case__dots { left: var(--gutter); }
  .case__float { display: none; }
  .case__steps { padding-top: 12px; }
  .cstep { min-height: 58vh; justify-content: flex-start; padding-block: 28px 12px; gap: 12px; }
  .cstep__title { font-size: clamp(28px, 7.4vw, 40px); }
  .cstep__body { font-size: 15.5px; }
  .cstep__kpi b { font-size: 24px; }
}
@media (max-width: 980px) and (max-height: 760px) { .phone { zoom: .5; } }
@media (prefers-reduced-motion: reduce) {
  .bub, .alarm, .sv, .slots span, .note, .badge, .stamp { opacity: 1 !important; }
  .sv i::after { transform: scaleX(var(--v)); }
  .dash__line { stroke-dashoffset: 0; }
  .dash__area { opacity: 1; }
}
@media (max-width: 980px) {
  .case__stage { transition: padding-top .45s var(--ease); }
  .nav-hidden .case__stage { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
}

/* ---------- theme toggle ---------- */
.nav__actions { display: flex; align-items: center; gap: 10px; }
.theme-btn {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  transition: border-color .3s, background-color .3s, transform .4s var(--ease);
}
.theme-btn:hover { border-color: var(--ink); transform: rotate(-12deg); }
.theme-btn:active { transform: scale(.9); }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tb-sun, .tb-moon { transform-box: view-box; transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .35s; }
/* light theme shows the moon (switch to dark); dark theme shows the sun */
.tb-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.tb-moon { fill: currentColor; fill-opacity: .12; }
:root[data-theme="dark"] .tb-sun { opacity: 1; transform: none; color: var(--gold); stroke: var(--gold); }
:root[data-theme="dark"] .tb-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

/* circular reveal when switching themes */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
@media (max-width: 600px) { .theme-btn { width: 36px; height: 36px; } .nav__actions { gap: 8px; } }

/* ==========================================================
   Media: showreel player + gallery + lightbox
   ========================================================== */
.media { padding-bottom: clamp(80px, 12vw, 150px); }
.nav__links { gap: 26px; }

/* showreel: a fixed dark "film" look in both themes */
.reel { display: grid; gap: 14px; margin-bottom: clamp(40px, 6vw, 72px); }
.reel__screen {
  position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%;
  border-radius: 14px; overflow: hidden; isolation: isolate;
  background: #0B1120; color: #F3F5F9;
  box-shadow: 0 0 0 1px #26314A, 0 50px 100px -50px color-mix(in srgb, var(--cobalt) 60%, transparent);
}
.reel__screen::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(40% 50% at 30% 40%, rgba(46, 72, 240, .45), transparent 70%),
    radial-gradient(30% 40% at 75% 65%, rgba(242, 194, 94, .18), transparent 70%);
  animation: drift 14s ease-in-out infinite alternate;
}
.reel__screen::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25;
  background-image: linear-gradient(#26314A 1px, transparent 1px), linear-gradient(90deg, #26314A 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
@keyframes drift { to { transform: translate(6%, -4%) rotate(8deg); } }
.reel__grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

.reel__scenes { position: absolute; inset: 0; }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vw, 18px); padding: 6%; text-align: center;
  opacity: 0; transition: opacity .6s var(--ease);
}
.scene.on { opacity: 1; }
.sc-kicker { font: 500 clamp(10px, 1.1vw, 13px)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #F2C25E; }
.sc-line { font: 800 clamp(26px, 5.2vw, 76px)/.92 var(--f-display); text-transform: uppercase; max-width: 16ch; text-wrap: balance; }
.sc-line--end { font-size: clamp(40px, 8vw, 120px); }
.scene.on .sc-kicker { animation: scIn .7s var(--ease) both .1s; }
.scene.on .sc-line { animation: lineIn 1s var(--ease) both .25s; }
@keyframes scIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes lineIn { from { opacity: 0; transform: translateY(30px); filter: blur(10px); letter-spacing: .08em; } }

.sc-spark { width: clamp(14px, 1.6vw, 22px); aspect-ratio: 1; border-radius: 50%; background: #F2C25E; box-shadow: 0 0 0 0 rgba(242, 194, 94, .6); }
.scene.on .sc-spark { animation: sparkPop .6s cubic-bezier(.3, 1.6, .5, 1) both, sparkRing 1.6s ease-out .4s infinite; }
@keyframes sparkPop { from { transform: scale(0); } }
@keyframes sparkRing { to { box-shadow: 0 0 0 clamp(20px, 4vw, 48px) rgba(242, 194, 94, 0); } }

.sc-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vw, 14px); }
.sc-notes span { background: #F6E5BF; color: #1A1405; font: 600 clamp(10px, 1.2vw, 15px)/1 var(--f-body); padding: .8em 1em; border-radius: 3px; }
.sc-notes span:nth-child(1) { rotate: -5deg; } .sc-notes span:nth-child(2) { rotate: 3deg; } .sc-notes span:nth-child(3) { rotate: -2deg; }
.scene.on .sc-notes span { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.scene.on .sc-notes span:nth-child(2) { animation-delay: .25s; } .scene.on .sc-notes span:nth-child(3) { animation-delay: .5s; }

.sc-wire { display: grid; grid-template-columns: repeat(3, clamp(36px, 6vw, 84px)); grid-auto-rows: clamp(22px, 3.4vw, 46px); gap: clamp(4px, .6vw, 8px); }
.sc-wire i { border-radius: 6px; background: #26314A; }
.sc-wire i:nth-child(1) { grid-column: span 3; background: #2E48F0; }
.sc-wire i:nth-child(5) { background: #F2C25E; }
.scene.on .sc-wire i { animation: wireIn .7s var(--ease) both; }
.scene.on .sc-wire i:nth-child(2) { animation-delay: .1s; } .scene.on .sc-wire i:nth-child(3) { animation-delay: .2s; }
.scene.on .sc-wire i:nth-child(4) { animation-delay: .3s; } .scene.on .sc-wire i:nth-child(5) { animation-delay: .4s; } .scene.on .sc-wire i:nth-child(6) { animation-delay: .5s; }
@keyframes wireIn { from { opacity: 0; transform: translate(var(--wx, 0), 40px) rotate(-12deg) scale(.6); } }
.sc-wire i:nth-child(odd) { --wx: -30px; } .sc-wire i:nth-child(even) { --wx: 30px; }

.sc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vw, 12px); max-width: 80%; }
.sc-chips span { border: 1.5px solid #7389FF; color: #F3F5F9; font: 600 clamp(10px, 1.2vw, 15px)/1 var(--f-body); padding: .7em 1.1em; border-radius: 999px; }
.scene.on .sc-chips span { animation: chipOut .6s var(--ease) both; }
.sc-chips span:nth-child(1) { --cx: 120px; --cy: 40px; } .sc-chips span:nth-child(2) { --cx: 30px; --cy: 50px; }
.sc-chips span:nth-child(3) { --cx: -60px; --cy: 40px; } .sc-chips span:nth-child(4) { --cx: 80px; --cy: -30px; } .sc-chips span:nth-child(5) { --cx: -90px; --cy: -30px; }
.scene.on .sc-chips span:nth-child(2) { animation-delay: .1s; } .scene.on .sc-chips span:nth-child(3) { animation-delay: .2s; }
.scene.on .sc-chips span:nth-child(4) { animation-delay: .3s; } .scene.on .sc-chips span:nth-child(5) { animation-delay: .4s; }
@keyframes chipOut { from { opacity: 0; transform: translate(var(--cx), var(--cy)) scale(.3); } }

.sc-bars { display: flex; align-items: flex-end; gap: clamp(5px, .8vw, 10px); height: clamp(50px, 9vw, 120px); }
.sc-bars i { width: clamp(14px, 2.2vw, 30px); height: calc(var(--h) * 100%); background: #2E48F0; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.sc-bars i:last-child { background: #F2C25E; }
.scene.on .sc-bars i { animation: barUp .8s var(--ease) both; }
.scene.on .sc-bars i:nth-child(2) { animation-delay: .1s; } .scene.on .sc-bars i:nth-child(3) { animation-delay: .2s; }
.scene.on .sc-bars i:nth-child(4) { animation-delay: .3s; } .scene.on .sc-bars i:nth-child(5) { animation-delay: .4s; }
@keyframes barUp { from { transform: scaleY(0); } }

.sc-logo { width: clamp(44px, 6vw, 80px); height: auto; }
.scene.on .sc-logo { animation: stamp .6s cubic-bezier(.3, 1.6, .5, 1) both; }

.reel__big {
  position: absolute; left: 50%; top: 50%; width: clamp(64px, 8vw, 96px); aspect-ratio: 1; margin: 0;
  translate: -50% -50%; border-radius: 50%; border: 0; cursor: pointer;
  background: #F3F5F9; color: #0B1120; display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(243, 245, 249, .5); animation: bigPulse 2s ease-out infinite;
  transition: opacity .4s, scale .4s var(--ease);
}
.reel__big svg { width: 38%; height: 38%; fill: currentColor; margin-left: 6%; }
.reel__big:hover { scale: 1.08; }
@keyframes bigPulse { to { box-shadow: 0 0 0 24px rgba(243, 245, 249, 0); } }
.reel.is-playing .reel__big { opacity: 0; scale: .7; pointer-events: none; }

.reel__bar { display: flex; align-items: center; gap: 14px; }
.reel__btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .2s; }
.reel__btn:hover { border-color: var(--ink); }
.reel__btn svg { width: 18px; height: 18px; fill: currentColor; }
#reelFull svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reel .i-pause, .reel.is-playing .i-play { display: none; }
.reel.is-playing .i-pause { display: block; }
.reel__time { font: 500 12px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel__track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--line); cursor: pointer; }
.reel__track::before { content: ""; position: absolute; inset: -10px 0; }
.reel__fill { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cobalt), var(--gold)); transform-origin: left; transform: scaleX(0); }
.reel__marks i { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--bg); border-radius: 1px; }
.reel__chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.reel__chapters button {
  font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.reel__chapters button:hover { color: var(--ink); border-color: var(--ink); }
.reel__chapters button.is-on { color: var(--on-cobalt); background: var(--cobalt); border-color: var(--cobalt); }
.reel:fullscreen { background: #000; display: grid; place-content: center; padding: 0; }
.reel:fullscreen .reel__screen { width: min(100vw, 177.78vh); border-radius: 0; }
.reel:fullscreen .reel__bar, .reel:fullscreen .reel__chapters { width: min(100vw, 177.78vh); padding-inline: 16px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: zoom-in; transition: border-color .3s, box-shadow .5s var(--ease); }
.shot:hover, .shot:focus-visible { border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line)); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 50%, transparent); }
.shot figcaption { display: grid; gap: 2px; padding: 14px 16px 16px; }
.shot figcaption b { font-weight: 600; font-size: 16px; }
.shot figcaption span { color: var(--muted); font-size: 14px; }

.shot__art {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden;
  background-color: var(--bg-2);
  background-image: linear-gradient(color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  transition: transform .8s var(--ease);
}
.shot__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__art i { position: absolute; display: block; transition: transform .7s var(--ease), translate .7s var(--ease); }
.shot:hover .shot__art { transform: scale(1.04); }

/* sticky-note wall */
.art-notes i { width: 26%; height: 26%; border-radius: 3px; background: var(--gold-soft); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.art-notes i::after { content: ""; position: absolute; left: 14%; right: 24%; top: 26%; height: 8%; border-radius: 2px; background: color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: 0 300% 0 color-mix(in srgb, var(--ink) 18%, transparent); }
.art-notes i:nth-child(1) { left: 10%; top: 12%; rotate: -6deg; }
.art-notes i:nth-child(2) { left: 39%; top: 9%; rotate: 4deg; background: var(--cobalt-soft); }
.art-notes i:nth-child(3) { left: 66%; top: 14%; rotate: -3deg; }
.art-notes i:nth-child(4) { left: 14%; top: 52%; rotate: 5deg; background: var(--surface); }
.art-notes i:nth-child(5) { left: 42%; top: 55%; rotate: -4deg; }
.art-notes i:nth-child(6) { left: 68%; top: 50%; rotate: 7deg; background: var(--cobalt-soft); }
.shot:hover .art-notes i:nth-child(odd) { translate: -4px -6px; } .shot:hover .art-notes i:nth-child(even) { translate: 5px 4px; }

/* interview chat */
.art-chat i { height: 15%; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.art-chat i:nth-child(1) { left: 10%; top: 14%; width: 52%; border-bottom-left-radius: 4px; }
.art-chat i:nth-child(2) { right: 10%; top: 34%; width: 44%; background: var(--cobalt); border-color: var(--cobalt); border-bottom-right-radius: 4px; }
.art-chat i:nth-child(3) { left: 10%; top: 54%; width: 60%; border-bottom-left-radius: 4px; }
.art-chat i:nth-child(4) { right: 10%; top: 74%; width: 30%; background: var(--gold); border-color: var(--gold); border-bottom-right-radius: 4px; }
.shot:hover .art-chat i:nth-child(odd) { translate: 6px 0; } .shot:hover .art-chat i:nth-child(even) { translate: -6px 0; }

/* sprint board */
.art-board i { border-radius: 4px; background: var(--surface); border: 1px solid var(--line); width: 24%; height: 14%; }
.art-board i:nth-child(1), .art-board i:nth-child(2), .art-board i:nth-child(3) { height: 6%; top: 10%; background: var(--ink); border: 0; }
.art-board i:nth-child(1) { left: 8%; } .art-board i:nth-child(2) { left: 38%; } .art-board i:nth-child(3) { left: 68%; }
.art-board i:nth-child(4) { left: 8%; top: 22%; } .art-board i:nth-child(5) { left: 8%; top: 40%; background: var(--gold-soft); }
.art-board i:nth-child(6) { left: 38%; top: 22%; background: var(--cobalt-soft); } .art-board i:nth-child(7) { left: 68%; top: 22%; }
.shot:hover .art-board i:nth-child(5) { translate: 125% -128%; rotate: 4deg; }

/* code editor */
.art-code { background-color: #0B1120; background-image: none; }
.art-code i { left: 10%; height: 5%; border-radius: 3px; background: #26314A; }
.art-code i:nth-child(1) { top: 14%; width: 38%; background: #7389FF; }
.art-code i:nth-child(2) { top: 24%; left: 16%; width: 50%; }
.art-code i:nth-child(3) { top: 34%; left: 16%; width: 32%; background: #F2C25E; }
.art-code i:nth-child(4) { top: 44%; left: 22%; width: 46%; }
.art-code i:nth-child(5) { top: 54%; left: 22%; width: 28%; background: #7389FF; }
.art-code i:nth-child(6) { top: 64%; left: 16%; width: 40%; }
.art-code i:nth-child(7) { top: 74%; width: 22%; background: #7CE3A8; }
.art-code i:nth-child(8) { top: 74%; left: 34%; width: 2%; background: #F3F5F9; animation: blink 1s steps(2, start) infinite; }
.shot:hover .art-code i:nth-child(-n+6) { translate: 4% 0; }

/* launch curve */
.art-launch i:nth-child(1) { left: 6%; bottom: 14%; width: 80%; height: 120%; border-top: 3px solid var(--gold); border-right: 3px solid transparent; border-radius: 0 100% 0 0; }
.art-launch i:nth-child(2) { width: 6%; aspect-ratio: 1; border-radius: 50%; background: var(--cobalt); right: 16%; top: 22%; box-shadow: 0 0 0 8px color-mix(in srgb, var(--cobalt) 20%, transparent); }
.art-launch i:nth-child(3) { left: 6%; right: 6%; bottom: 14%; height: 2px; background: var(--ink); }
.shot:hover .art-launch i:nth-child(2) { translate: 20% -60%; }

/* demo day stage */
.art-stage i:nth-child(1) { left: 26%; top: 12%; width: 48%; height: 38%; border-radius: 6px; background: var(--ink); box-shadow: inset 0 -30% 0 0 var(--cobalt); }
.art-stage i:nth-child(1)::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 20%; height: 40%; background: linear-gradient(to top right, transparent 48%, var(--gold) 50%, transparent 54%); }
.art-stage i:nth-child(2) { left: 30%; top: 0; width: 40%; height: 100%; background: linear-gradient(color-mix(in srgb, var(--gold) 30%, transparent), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); opacity: .7; }
.art-stage i:nth-child(3) { left: 0; right: 0; bottom: 6%; height: 22%; background: radial-gradient(circle, var(--ink) 34%, transparent 36%) 0 0 / 7% 50%; opacity: .5; }
.shot:hover .art-stage i:nth-child(2) { translate: -10% 0; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(5, 8, 15, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.lightbox.open { opacity: 1; }
.lb__fig { margin: 0; width: min(1000px, 100%); display: grid; gap: 14px; transform: scale(.94) translateY(16px); transition: transform .5s var(--ease); }
.lightbox.open .lb__fig { transform: none; }
.lb__art .shot__art { border-radius: 14px; max-height: 74vh; aspect-ratio: 4 / 3; margin-inline: auto; width: min(100%, calc(74vh * 4 / 3)); }
.lb__fig figcaption { color: #F3F5F9; text-align: center; display: grid; gap: 4px; }
.lb__fig figcaption b { font: 800 clamp(24px, 3vw, 36px)/1 var(--f-display); text-transform: uppercase; }
.lb__fig figcaption span { color: #B4BDCF; font-size: 15px; }
.lb__close, .lb__nav {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06); color: #fff; font: 400 28px/1 var(--f-body);
  transition: background-color .2s, transform .3s var(--ease);
}
.lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, .16); }
.lb__close { top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; }
.lb__nav { top: 50%; translate: 0 -50%; }
.lb__nav--prev { left: 16px; } .lb__nav--next { right: 16px; }
.lb__nav--prev:hover { transform: translateX(-3px); } .lb__nav--next:hover { transform: translateX(3px); }
.lb__count { position: absolute; bottom: max(18px, env(safe-area-inset-bottom, 0px)); left: 50%; translate: -50% 0; color: #8C96AC; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; }

/* footer: 5 columns with company details */
.footer__grid { grid-template-columns: 1.3fr 1.2fr repeat(3, 1fr); }
.footer__addr { font-style: normal; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.footer__contact li { color: var(--ink-2); }

/* ==========================================================
   Legal pages
   ========================================================== */
.legal-hero { padding-block: calc(var(--nav-h) + clamp(48px, 8vw, 104px)) clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.legal-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 80% 30%, #000 10%, transparent 70%);
}
.legal-hero h1 { font: 900 clamp(52px, 9vw, 128px)/.86 var(--f-display); text-transform: uppercase; margin-block: 18px 22px; letter-spacing: -.01em; }
.legal-hero p.legal-sub { color: var(--ink-2); font-size: 18px; max-width: 56ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-meta b { color: var(--ink); font-weight: 500; }

.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(48px, 7vw, 88px) clamp(80px, 10vw, 140px); }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 4px; }
.toc p { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc a { text-decoration: none; color: var(--muted); font-size: 14px; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); transition: color .2s, border-color .3s; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--cobalt); }

.prose { max-width: 70ch; }
.prose section { padding-top: 12px; margin-bottom: 44px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h2 { font: 800 clamp(28px, 3.2vw, 40px)/1 var(--f-display); text-transform: uppercase; margin-bottom: 16px; }
.prose h3 { font-size: 18px; font-weight: 600; margin: 22px 0 8px; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { display: grid; gap: 8px; margin-top: 12px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; background: var(--gold); rotate: 45deg; border-radius: 1px; }
.prose a { color: var(--cobalt); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.callout { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-top: 18px; }
.callout p { font-size: 16px; }
.steps { counter-reset: step; display: grid; gap: 14px; margin-top: 16px; padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 66px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 16px;
  font: 800 28px/1 var(--f-display); color: var(--cobalt);
}
.steps li b { display: block; color: var(--ink); margin-bottom: 2px; }
.mail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.mail-line span { font: 600 18px/1.2 var(--f-body); color: var(--ink); user-select: all; }

@media (max-width: 980px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .legal { grid-template-columns: 1fr; }
  .toc { position: static; grid-auto-flow: column; overflow-x: auto; gap: 0; padding-bottom: 6px; }
  .toc p { display: none; }
  .toc a { white-space: nowrap; border-left: 0; border-bottom: 2px solid var(--line); padding: 8px 12px; }
  .toc a.is-active { border-bottom-color: var(--cobalt); }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .reel__time { display: none; }
  .lb__nav { top: auto; bottom: max(56px, env(safe-area-inset-bottom, 0px)); translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__screen::before { animation: none; }
}

/* ==========================================================
   Run sheet timeline (v2)
   ========================================================== */
.tl {
  --lab: 168px; --pad: clamp(18px, 2.4vw, 28px);
  position: relative; min-width: 760px; display: grid; gap: 8px;
  padding: 10px var(--pad) 56px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 40px 80px -60px color-mix(in srgb, var(--ink) 40%, transparent);
}
.tl__row { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; }
.tl__row--marks { height: 30px; }

.tl__label { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--f-body); color: var(--ink); padding-right: 18px; }
.tl__label small { margin-left: auto; font: 400 11px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.tl__label--muted { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }

.tl__weeks { display: grid; grid-template-columns: repeat(16, 1fr); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tl__weeks span {
  justify-self: center; min-width: 26px; text-align: center; padding: 5px 4px; border-radius: 999px;
  font: 500 11px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color .25s, background-color .25s, transform .3s var(--ease);
}
.tl__weeks span.is-now { color: var(--on-cobalt); background: var(--cobalt); transform: scale(1.08); }

/* each phase sits in a lane with faint week guides and a dotted centre rail */
.tl__track { position: relative; height: 48px; }
.tl__track::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px);
  background-size: calc(100% / 16) 100%;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
}
.tl__track::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted var(--line); }

.tl .bar {
  --c: var(--cobalt); --t: var(--on-cobalt);
  position: absolute; z-index: 1; top: 8px; bottom: 8px;
  left: calc(var(--s) / 16 * 100% + 3px); width: calc((var(--e) - var(--s)) / 16 * 100% - 6px);
  display: flex; align-items: center; padding-inline: 14px; overflow: hidden;
  border-radius: 999px; background: var(--c);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 60%);
  box-shadow: 0 8px 18px -10px var(--c);
  transform: none; clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 1.1s var(--ease) calc(var(--i) * 140ms + 200ms), box-shadow .3s, filter .3s;
}
.tl .bar em { font: 600 12.5px/1 var(--f-body); font-style: normal; color: var(--t); white-space: nowrap; opacity: 0; transition: opacity .5s calc(var(--i) * 140ms + 900ms); }
.tl .bar--gold { --c: var(--gold); --t: var(--on-gold); }
.tl .bar--ink { --c: var(--ink); --t: var(--bg); }
.tl .bar--soft { --c: var(--cobalt-soft); --t: var(--cobalt); background-image: none; box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.tl .bar--open {
  --c: var(--gold); --t: var(--on-gold);
  background: linear-gradient(90deg, var(--gold) 55%, color-mix(in srgb, var(--gold) 0%, transparent));
  box-shadow: none; -webkit-mask-image: none; mask-image: none;
}
.gantt-scroll.in .tl .bar { clip-path: inset(0 0 0 0 round 999px); transform: none; }
.gantt-scroll.in .tl .bar em { opacity: 1; }
.no-io .tl .bar { clip-path: none; } .no-io .tl .bar em { opacity: 1; }
.tl .bar.is-live { filter: brightness(1.08) saturate(1.1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent), 0 10px 26px -10px var(--c); }

/* gates and the moving "now" marker share one overlay above the lanes */
.tl__overlay { position: absolute; top: 10px; bottom: 18px; left: calc(var(--pad) + var(--lab)); right: var(--pad); pointer-events: none; z-index: 2; }
.tl__gate { position: absolute; top: 0; bottom: 38px; left: calc(var(--w) / 16 * 100%); width: 0; }
.tl__gate::before { content: ""; position: absolute; top: 26px; bottom: 0; left: -.75px; border-left: 1.5px dashed color-mix(in srgb, var(--gold) 80%, transparent); }
.tl__gate b {
  position: absolute; top: 2px; left: 0; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--ink);
  background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  padding: 5px 9px; border-radius: 999px;
}
.tl__gate b::before { content: ""; width: 6px; height: 6px; background: var(--gold); rotate: 45deg; border-radius: 1px; }

.tl .playhead {
  position: absolute; top: 26px; bottom: 0; left: calc(var(--ph, 0) * 100%); width: 0;
  background: none; opacity: 0; transition: opacity .4s; z-index: 3;
}
.tl .playhead.on { opacity: 1; }
.tl .playhead::before { content: ""; position: absolute; top: 42px; bottom: 30px; left: -1px; width: 2px; background: var(--cobalt); border-radius: 2px; }
.tl .playhead::after { content: ""; position: absolute; top: 36px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 22%, transparent); }
.tl .playhead span {
  position: absolute; top: auto; bottom: 0; left: 0; transform: none; translate: -50% 0;
  font: 600 11px/1 var(--f-mono); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--on-cobalt); background: var(--cobalt); padding: 6px 10px; border-radius: 999px;
}
@media (max-width: 600px) { .tl { --lab: 128px; } .tl__label small { display: none; } }
.tl__gate b { transition: background-color .25s, scale .35s var(--ease), box-shadow .35s; }
.tl__gate.is-hit b { background: var(--gold); color: var(--on-gold); scale: 1.08; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 25%, transparent); }

/* ==========================================================
   Logo: the Loop. Idea (gold dot) enters, runs the line (the C),
   leaves as a company (blue block).
   ========================================================== */
.brand { gap: 9px; }
.brand__mark { width: 30px; height: 30px; overflow: visible; }
.brand__word { font: 700 21px/1 var(--f-body); letter-spacing: -.045em; text-transform: lowercase; }
.bm-arc { fill: none; stroke: var(--ink); stroke-width: 8.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bm-dot { fill: var(--gold); transform-box: fill-box; transform-origin: center; }
.bm-sq { fill: var(--cobalt); transform-box: fill-box; transform-origin: center; }

/* intro on load, replay on hover */
.js .nav .bm-dot { transform: scale(0); }
.js .nav .bm-arc { stroke-dashoffset: 100; }
.js .nav .bm-sq { transform: translateY(-6px) scale(0); }
.is-loaded .nav .bm-dot { animation: bmDot .5s cubic-bezier(.3, 1.6, .5, 1) .15s forwards; }
.is-loaded .nav .bm-arc { animation: bmArc .9s var(--ease-io) .45s forwards; }
.is-loaded .nav .bm-sq { animation: bmSq .55s cubic-bezier(.3, 1.6, .5, 1) 1.25s forwards; }
.brand:hover .bm-dot { animation: bmDot .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.brand:hover .bm-arc { animation: bmArc .8s var(--ease-io) .15s both; }
.brand:hover .bm-sq { animation: bmSq .5s cubic-bezier(.3, 1.6, .5, 1) .85s both; }
@keyframes bmDot { from { transform: scale(0); } to { transform: none; } }
@keyframes bmArc { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bmSq { from { transform: translateY(-6px) scale(0); } to { transform: none; } }

/* showreel end card draws the logo too */
.scene--6 .sc-logo path { stroke-dasharray: 100; }
.scene.on .sc-logo { animation: none; }
.scene--6.on .sc-logo circle { animation: bmDot .5s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
.scene--6.on .sc-logo path { animation: bmArc 1s var(--ease-io) .35s both; }
.scene--6.on .sc-logo rect { animation: bmSq .55s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .js .nav .bm-dot, .js .nav .bm-sq { transform: none; }
  .js .nav .bm-arc { stroke-dashoffset: 0; }
}
.sc-line--end { font-family: var(--f-body); font-weight: 700; text-transform: none; letter-spacing: -.045em; }

/* Loop mark, road version: flat-ended track with a dashed lane line */
.bm-arc { stroke-width: 10; stroke-linecap: butt; }
.bm-lane { fill: none; stroke: var(--bg); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 6 5; stroke-dashoffset: -2.5; }
.js .nav .bm-lane { opacity: 0; }
.is-loaded .nav .bm-lane { animation: bmLane .5s ease 1.2s forwards; }
@keyframes bmLane { to { opacity: 1; } }
/* hover: the lane markings flow along the road, like traffic heading for the exit */
.brand:hover .bm-lane { opacity: 1; animation: bmFlow 1.1s linear infinite; }
@keyframes bmFlow { from { stroke-dashoffset: -2.5; } to { stroke-dashoffset: -13.5; } }

/* showreel end card: road draws, lane appears, then traffic flows */
.scene--6 .sc-logo path { stroke-dasharray: none; }
.scene--6 .sc-logo .sc-road { stroke-dasharray: 100; }
.scene--6 .sc-logo .sc-lane { stroke-dasharray: 6 5; }
.scene--6.on .sc-logo path { animation: none; }
.scene--6.on .sc-logo .sc-road { animation: bmArc 1s var(--ease-io) .35s both; }
.scene--6.on .sc-logo .sc-lane { opacity: 0; animation: bmLane .4s ease 1.3s forwards, bmFlow 1.1s linear 1.7s infinite; }

@media (prefers-reduced-motion: reduce) {
  .js .nav .bm-lane { opacity: 1; }
  .brand:hover .bm-lane { animation: none; }
}

/* Header logo: the loop runs continuously.
   Every 6s the idea launches a traveller that drives the road (lane
   markings flow with it) and the company block pulses as it arrives. */
.bm-trav {
  fill: var(--gold); opacity: 0;
  offset-path: path("M43.47 15.62A20 20 0 1 0 43.47 48.38");
  offset-rotate: 0deg; offset-distance: 0%;
}
.is-loaded .nav .brand .bm-dot,
.is-loaded .nav .brand:hover .bm-dot { animation: bmDot .5s cubic-bezier(.3, 1.6, .5, 1) .15s forwards, bmDotLoop 6s ease 2.2s infinite; }
.is-loaded .nav .brand .bm-arc,
.is-loaded .nav .brand:hover .bm-arc { animation: bmArc .9s var(--ease-io) .45s forwards; }
.is-loaded .nav .brand .bm-lane,
.is-loaded .nav .brand:hover .bm-lane { opacity: 0; animation: bmLane .5s ease 1.2s forwards, bmLaneLoop 6s var(--ease-io) 2.2s infinite; }
.is-loaded .nav .brand .bm-sq,
.is-loaded .nav .brand:hover .bm-sq { animation: bmSq .55s cubic-bezier(.3, 1.6, .5, 1) 1.25s forwards, bmSqLoop 6s cubic-bezier(.3, 1.6, .5, 1) 2.2s infinite; }
.is-loaded .nav .brand .bm-trav { animation: bmTrav 6s var(--ease-io) 2.2s infinite; }

@keyframes bmDotLoop { 0%, 5%, 16%, 100% { transform: none; } 10% { transform: scale(.7); } }
@keyframes bmTrav {
  0%, 9% { offset-distance: 0%; opacity: 0; }
  13% { opacity: 1; }
  60% { offset-distance: 100%; opacity: 1; }
  64%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes bmLaneLoop { 0%, 11% { stroke-dashoffset: -2.5; } 61%, 100% { stroke-dashoffset: -24.5; } }
@keyframes bmSqLoop { 0%, 59%, 74%, 100% { transform: none; } 66% { transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .is-loaded .nav .brand .bm-trav { animation: none; opacity: 0; }
  .is-loaded .nav .brand .bm-dot, .is-loaded .nav .brand .bm-sq, .is-loaded .nav .brand .bm-lane, .is-loaded .nav .brand .bm-arc { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .is-loaded .nav .brand .bm-lane { stroke-dashoffset: -2.5; }
}
/* avoid a hairline sliver of the road before it draws */
.bm-arc, .scene--6 .sc-logo .sc-road { stroke-dasharray: 100 101; }

/* ==========================================================
   Products: Baqalaa
   ========================================================== */
.products { padding-bottom: clamp(80px, 12vw, 150px); }
.prod {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(22px, 4vw, 48px);
  box-shadow: 0 50px 90px -60px color-mix(in srgb, var(--ink) 45%, transparent);
}
.prod__copy { display: grid; gap: 16px; justify-items: start; }
.prod__kicker { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prod__lot { color: var(--cobalt); }
.prod__status { display: inline-flex; align-items: center; gap: 7px; color: #1E9E5A; }
.prod__status i { width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; box-shadow: 0 0 0 0 rgba(30, 158, 90, .5); animation: livePing 1.8s ease-out infinite; }
@keyframes livePing { to { box-shadow: 0 0 0 8px rgba(30, 158, 90, 0); } }
.prod__name { font: 900 clamp(56px, 7vw, 96px)/.85 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.prod__tag { font: 600 clamp(18px, 1.8vw, 22px)/1.3 var(--f-body); color: var(--ink); max-width: 30ch; }
.prod__owner { font-size: 16px; color: var(--ink-2); padding: 12px 14px; border-left: 3px solid var(--gold); background: var(--bg); border-radius: 0 8px 8px 0; max-width: 48ch; }
.prod__owner strong { color: var(--ink); }
.prod__body { color: var(--ink-2); font-size: 16px; max-width: 50ch; }
.prod__feats { display: grid; gap: 8px; margin-bottom: 6px; }
.prod__feats li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-2); }
.prod__feats li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; background: var(--gold); rotate: 45deg; border-radius: 1px; }

/* animated inbox mock (fixed dark look, like a product screen) */
.bq {
  --bq-bg: #0B1120; --bq-panel: #121A2C; --bq-line: #232E46; --bq-text: #F3F5F9; --bq-dim: #8C96AC;
  background: var(--bq-bg); color: var(--bq-text); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--bq-line); font-size: 13px; max-width: 100%;
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--cobalt) 55%, transparent);
}
.bq__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bq-line); flex-wrap: wrap; }
.bq__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 var(--f-body); letter-spacing: -.03em; }
.bq__brand i { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #F2C25E, #E3A72F); }
.bq__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bq__chips b { font: 500 10.5px/1 var(--f-mono); padding: 5px 8px; border-radius: 999px; background: var(--bq-panel); border: 1px solid var(--bq-line); color: var(--bq-dim); position: relative; }
.bq__chips b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: var(--c); animation: chPulse 3s ease-in-out infinite; }
.bq__chips b:nth-child(2)::before { animation-delay: 1s; } .bq__chips b:nth-child(3)::before { animation-delay: 2s; }
@keyframes chPulse { 0%, 70%, 100% { opacity: .35; transform: none; } 80% { opacity: 1; transform: scale(1.5); } }
.ch-wa { --c: #25D366; } .ch-ig { --c: #E1306C; } .ch-ms { --c: #4C8DFF; }

.bq__body { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 300px; }
.bq__inbox { border-right: 1px solid var(--bq-line); padding: 6px; display: grid; align-content: start; gap: 4px; }
.bq__inbox li {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center;
  padding: 9px 8px; border-radius: 10px; opacity: 0;
  animation: rowIn 10s var(--ease) infinite; animation-delay: calc(var(--k) * .45s);
}
.bq__inbox li.is-open { background: var(--bq-panel); box-shadow: inset 2px 0 0 #7389FF; }
.bq__inbox b { display: block; font-size: 12.5px; font-weight: 600; }
.bq__inbox small { display: block; color: var(--bq-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bq__inbox li > div { min-width: 0; }
.bq__inbox em { font: 500 10px/1 var(--f-mono); font-style: normal; padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: #2E48F0; color: #fff; }
.av--2 { background: #E3A72F; color: #1A1405; } .av--3 { background: #1E9E5A; } .av--4 { background: #8B5CF6; }
@keyframes rowIn { 0% { opacity: 0; transform: translateX(-14px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.bq__thread { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.bq__msg { max-width: 88%; padding: 9px 11px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; opacity: 0; animation: msgIn 10s var(--ease) infinite; animation-delay: calc(1.6s + var(--k) * 1.3s); }
.bq__msg--in { align-self: flex-start; background: var(--bq-panel); border-bottom-left-radius: 4px; }
.bq__msg--ai { align-self: flex-end; background: #2E48F0; border-bottom-right-radius: 4px; }
.bq__msg--ai span { display: inline-block; font: 600 9.5px/1 var(--f-mono); letter-spacing: .08em; background: rgba(255, 255, 255, .2); padding: 3px 5px; border-radius: 4px; margin-right: 7px; vertical-align: 1px; }
.bq__order {
  align-self: stretch; margin-top: auto; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, #F2C25E 14%, transparent); border: 1px dashed #F2C25E; opacity: 0;
  animation: msgIn 10s var(--ease) infinite; animation-delay: calc(1.6s + var(--k) * 1.3s);
}
.bq__order b { color: #F2C25E; font-size: 12.5px; }
.bq__order span { color: var(--bq-dim); font: 500 11px/1.3 var(--f-mono); }
@keyframes msgIn { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 5%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }

/* footer product line */
.footer__prod { font-size: 14px !important; }
.footer__prod a { color: var(--cobalt); text-underline-offset: 3px; }

@media (max-width: 980px) {
  .prod { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bq__body { grid-template-columns: 1fr; }
  .bq__inbox { border-right: 0; border-bottom: 1px solid var(--bq-line); }
  .bq__inbox li:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bq__inbox li, .bq__msg, .bq__order { animation: none; opacity: 1; }
}
/* company details card in the contact section */
.pitch__co { display: grid; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--bg) 16%, var(--ink)); max-width: 52ch; }
.pitch__co div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.pitch__co dt { font: 500 11px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, var(--ink)); }
.pitch__co dd { font-size: 15px; color: color-mix(in srgb, var(--bg) 88%, var(--ink)); }
.pitch__co a { color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 600px) { .pitch__co div { grid-template-columns: 1fr; gap: 2px; } }

/* ==========================================================
   Company information (Meta business verification)
   ========================================================== */
.company { padding-bottom: clamp(64px, 9vw, 120px); }
.co {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 5vw, 64px); align-items: start;
  padding: clamp(22px, 4vw, 44px); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
}
.co__intro { display: grid; gap: 14px; justify-items: start; }
.co__title { font: 800 clamp(32px, 4vw, 52px)/.95 var(--f-display); text-transform: uppercase; }
.co__text { color: var(--ink-2); font-size: 16px; max-width: 44ch; }
.co__text strong { color: var(--ink); }
.co__prod {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; max-width: 440px;
  margin-top: 6px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .3s, transform .4s var(--ease);
}
.co__prod:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.co__prod:hover .arrow { transform: translate(2px, -2px); }
.co__prod-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #F2C25E, #E3A72F); }
.co__prod b { display: block; font-size: 15px; }
.co__prod small { display: block; color: var(--muted); font-size: 13px; }
.co__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.co__facts div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.co__facts dt { font: 500 11px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.co__facts dd { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.co__facts a { color: var(--cobalt); text-underline-offset: 3px; }
@media (max-width: 860px) { .co { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .co__facts div { grid-template-columns: 1fr; gap: 3px; } }