/* =========================================================
   ALL THINGS NEW STUDIO — v4 "Midnight Gold"
   Futuristic · sleek · professional. Black & gold.
   Surface stack (no shadows for depth): void → abyss → deep → panel.
   Type: Space Grotesk (display) · Instrument Serif italic (kicker)
         Inter 300/400/500 (body) · JetBrains Mono (HUD/data)
         Montserrat 800 (wordmark only — matches the logo lockup)
   Motion: everything scroll-linked lives in js/scroll3d.js
   ========================================================= */

:root {
  --void: #070708;
  --abyss: #0B0B0D;
  --deep: #111114;
  --panel: #17161A;
  --panel-gold: #1A1710;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-gold: rgba(201, 162, 74, 0.35);
  --text: #F3F0E9;
  --ash: #A09B92;
  --mist: #6E6A63;
  --gold: #C9A24A;
  --gold-2: #E6C675;
  --gold-3: #8C6D2A;
  --glow: rgba(201, 162, 74, 0.35);

  --display: "Space Grotesk", "Inter Display", "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --wordmark: "Montserrat", "Inter Display", "Inter", sans-serif;

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1320px;
  --r: 3px;
  --r-lg: 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color: var(--text); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0; font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.6;
  background: var(--void); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 500; color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: #0B0B0D; }

/* ---------- type ---------- */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
h1, .h1 { font-size: clamp(44px, 6.8vw, 108px); letter-spacing: -0.04em; line-height: 0.98; }
h2, .h2 { font-size: clamp(34px, 4.8vw, 70px); letter-spacing: -0.035em; }
h3, .h3 { font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.015em; line-height: 1.2; font-weight: 500; }
em.k, .k { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-2); letter-spacing: -0.01em; }
.lede { font-size: clamp(17px, 1.3vw, 20px); color: var(--ash); line-height: 1.6; max-width: 58ch; font-weight: 300; }
.mono, .tag, .eyebrow, .hud, .pill, .num { font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); }
.eyebrow .n { color: var(--mist); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gold); }
.eyebrow--bare::before { display: none; }
.gold { color: var(--gold-2); }
.ash { color: var(--ash); }
.small { font-size: 13px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.section { position: relative; padding: clamp(88px, 10vw, 150px) 0; perspective: 1400px; }
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }
.section--line { border-top: 1px solid var(--line); }
.section--deep { background: var(--abyss); }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head--row { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
.sec-head--row > div { display: grid; gap: 16px; max-width: 760px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.sec-head--center .eyebrow::before { display: none; }

/* ---------- buttons / pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 3px;
  font-family: var(--body); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0.01em;
  border: 1px solid var(--line-2); color: var(--text); background: rgba(255, 255, 255, 0.02); white-space: nowrap;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.4s, transform 0.5s var(--ease);
}
.btn:hover { border-color: var(--line-gold); color: var(--gold-2); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: #0B0B0D; }
.btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: #0B0B0D; box-shadow: 0 12px 44px -12px var(--glow); }
.btn--lg { padding: 19px 28px; font-size: 15px; }
.btn .arrow { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn .play { width: 10px; height: 10px; }
.link { color: var(--gold-2); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.link .arrow { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.link:hover .arrow { transform: translateX(4px); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 2px;
  font-size: 11px; text-transform: lowercase; color: var(--ash); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blink 2.4s ease-in-out infinite; }
.pill b { color: var(--text); font-weight: 400; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 9px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--ash); }
.tag--gold { border-color: var(--line-gold); color: var(--gold-2); }
.tag--fill { background: var(--gold); border-color: var(--gold); color: #0B0B0D; }

/* ---------- cards + 3D composition ---------- */
.card {
  position: relative; border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px);
  background: var(--deep); border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.card:hover { border-color: var(--line-gold); }
.card--gold { background: var(--panel-gold); border-color: var(--line-gold); }
.card--flat { background: var(--deep); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ash); }
.card .list { margin-top: 18px; display: grid; gap: 8px; color: var(--text); font-size: 14.5px; font-weight: 300; }
.card .list li { display: flex; gap: 10px; align-items: flex-start; }
.card .list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.card__icon { width: 42px; height: 42px; border-radius: 3px; display: grid; place-items: center; background: rgba(201, 162, 74, 0.08); border: 1px solid var(--line-gold); color: var(--gold-2); margin-bottom: 20px; }
.card__icon svg { width: 18px; height: 18px; }
.card__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--mist); margin-bottom: 18px; display: block; }

/* every [data-s3d] block composes scroll tilt + pointer tilt through CSS vars set by scroll3d.js */
[data-s3d] { transform-style: preserve-3d; will-change: transform; transform: rotateX(var(--sx, 0deg)) rotateY(var(--sy, 0deg)) translateZ(var(--tz, 0px)); }
.z { transform: translateZ(26px); }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(230, 198, 117, 0.14), rgba(230, 198, 117, 0) 60%); }
.is-hover > .glare { opacity: 1; }

/* reveals: out of focus → settle */
[data-reveal] { opacity: 0; filter: blur(14px); transform: translateY(26px) scale(0.975); transition: opacity 0.9s var(--ease), filter 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].in { opacity: 1; filter: blur(0); transform: none; }

/* ---------- grids ---------- */
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* =========================================================
   HUD — fixed chrome: progress, section index, coordinates
   ========================================================= */
.hud-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px var(--glow); pointer-events: none; }
.hud { position: fixed; z-index: 90; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); pointer-events: none; display: flex; gap: 14px; align-items: center; }
.hud--bl { left: var(--gutter); bottom: 22px; }
.hud--br { right: var(--gutter); bottom: 22px; }
.hud b { color: var(--ash); font-weight: 400; }
.hud .sep { width: 18px; height: 1px; background: var(--line-2); }

/* light stream */
#stream { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
#stream path { fill: none; stroke: url(#streamGrad); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; filter: drop-shadow(0 0 6px rgba(201, 162, 74, 0.6)); }
#stream circle { fill: var(--gold-2); filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 22px var(--gold)); }
main { position: relative; z-index: 1; }

/* =========================================================
   LOADER — the Seedance-enhanced ATN reveal
   ========================================================= */
/* The intro runs alone: nothing of the site is visible until the hand-off. Then the
   loader lifts like a curtain (clip-path wipe) and the site stages itself in. */
html[data-intro="skipped"] .loader { display: none !important; }   /* returning visitors never see a flash of the intro */
.loader { position: fixed; inset: 0; z-index: 1000; background: #000; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-io), visibility 1.2s; }
.loader video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
/* phones / portrait: loader-m.mp4 is the same film composed for a tall screen (full wordmark, edges faded to black),
   so it just fills the screen — no oversized layer, no transforms, no masks */
@media (max-aspect-ratio: 4/5) { .loader video { transform: none; } }
/* phone intro overlay (index only): plain fixed layer above the normal page; nothing underneath is hidden or transformed */
.pintro { display: none; }
html.pintro-on .pintro { display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1001; background: #000; overflow: hidden; opacity: 1; transition: opacity 0.6s ease; }
html.pintro-on .pintro.is-out { opacity: 0; pointer-events: none; }
html.pintro-on .pintro video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
html.pintro-on.pintro-lock, html.pintro-on.pintro-lock body { overflow: hidden; }
html.pintro-lock #nav, html.pintro-lock .hud, html.pintro-lock .hud-bar, html.pintro-lock #stream { visibility: hidden; }   /* the overlay lives inside <main>, so fixed chrome outside it is hidden the plain way while it plays */
.loader__veil { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.7s var(--ease-io); pointer-events: none; }
.loader__veil::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); opacity: 0; transition: opacity 0.5s; }
.loader__hud { position: absolute; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); transition: opacity 0.5s, transform 0.6s var(--ease); }
.loader__hud--top { top: 24px; }
.loader__hud--bottom { bottom: 26px; }
.loader__hud b { color: var(--gold); font-weight: 400; }
.loader__pct { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.loader__pct::after { content: "%"; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--gold); margin-left: 6px; vertical-align: top; }
.loader__status { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.55); }
.loader__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blink 1.4s ease-in-out infinite; }
.loader__skip { display: inline-flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, 0.5); cursor: pointer; pointer-events: auto; transition: color 0.3s; }
.loader__skip::after { content: ""; width: 26px; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.loader__skip:hover { color: var(--gold-2); }
.loader__skip:hover::after { width: 40px; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.08); }
.loader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); box-shadow: 0 0 14px var(--glow); transition: width 0.25s linear; }
.loader.is-leaving .loader__veil { opacity: 1; }
.loader.is-leaving .loader__veil::after { opacity: 1; }
.loader.is-leaving .loader__hud { opacity: 0; transform: translateY(-6px); }
.loader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
/* the site waits in the dark, then stages in */
html:not([data-intro]) #nav, html:not([data-intro]) main > :not(#loader), html:not([data-intro]) .footer, html:not([data-intro]) .hud, html:not([data-intro]) .hud-bar, html:not([data-intro]) #stream { visibility: hidden; }
html:not([data-intro]) body { overflow: hidden; }
/* failsafe: if the intro script never hands off (blocked video, script error), show the site anyway */
html:not([data-intro]) #nav, html:not([data-intro]) main > :not(#loader), html:not([data-intro]) .footer { animation: atnFailsafe 0s linear 14s forwards; }
@keyframes atnFailsafe { to { visibility: visible; } }
html.entering #nav { animation: navIn 1.1s var(--ease) 0.35s both; }   /* only while entering — a lingering transform would trap the fixed mobile menu */
@keyframes navIn { from { transform: translateY(-110%); } to { transform: none; } }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(7, 7, 8, 0.7); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-color: var(--line); }
.wrap--nav { max-width: 1520px; }
.nav__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 74px; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 32px; color: var(--gold); flex: none; }
.brand__text { font-family: var(--wordmark); font-weight: 800; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1; }
.brand__text small { display: block; font-size: 8.5px; letter-spacing: 0.36em; color: var(--gold); font-weight: 600; margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: 4px; justify-content: center; }
.nav__links a { position: relative; padding: 9px 12px; font-size: 13.5px; font-weight: 400; color: var(--ash); transition: color 0.3s; }
.nav__links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a[aria-current="page"]::after, .nav__links a:hover::after { transform: none; }
.nav__right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.nav__right .pill { display: inline-flex; }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: 3px; border: 1px solid var(--line-2); place-items: center; }
.nav__burger span { display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; transition: background 0.2s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--text); transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__burger span::after { top: 0; transform: rotate(-45deg); }
.nav__menu { display: none; }

/* =========================================================
   HERO (home) — split: text left, 3D monogram over glass panel right
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 100px 0 72px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.hero__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1100px 600px at 70% 40%, rgba(201, 162, 74, 0.22), transparent 60%), radial-gradient(700px 500px at 15% 90%, rgba(201, 162, 74, 0.10), transparent 60%), linear-gradient(180deg, rgba(7, 7, 8, 0.2), rgba(7, 7, 8, 0.85) 90%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%); opacity: 0.6; }
#dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* inner page hero */
.phero { position: relative; padding: 170px 0 60px; overflow: hidden; }
.phero__bg { position: absolute; inset: 0; z-index: -1; }
.phero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.phero__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 12% 0%, rgba(201, 162, 74, 0.16), transparent 60%), linear-gradient(180deg, rgba(7, 7, 8, 0.1), var(--void) 95%); }
.phero .eyebrow { margin-bottom: 20px; }
.phero h1 { max-width: 15ch; margin-bottom: 20px; }
.phero__meta { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   MARQUEE (mono) · STATS
   ========================================================= */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash); background: var(--abyss); }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 48s linear infinite; }
.marquee__track span { display: inline-flex; gap: 48px; align-items: center; white-space: nowrap; }
.marquee__track i { font-style: normal; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.stat { padding: 30px 28px; border-right: 1px solid var(--line); position: relative; }
.stat:last-child { border-right: 0; }
.stat__n { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.04em; line-height: 1; }
.stat__n span { color: var(--gold-2); }
.stat__l { margin-top: 10px; color: var(--ash); font-size: 13.5px; }
.stat__k { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--mist); }

/* =========================================================
   BEFORE / AFTER
   ========================================================= */
.ba { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--deep); border: 1px solid var(--line); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1.5px; margin-left: -0.75px; background: var(--gold-2); box-shadow: 0 0 22px rgba(201, 162, 74, 0.7); }
.ba__knob { position: absolute; top: 50%; left: var(--x, 50%); width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold); color: #0B0B0D; display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.8), 0 0 0 6px rgba(201, 162, 74, 0.12); transition: transform 0.3s var(--ease); }
.ba:hover .ba__knob, .ba.is-dragging .ba__knob { transform: translate(-50%, -50%) scale(1.08); }
.ba__knob svg { width: 16px; height: 16px; }
.ba__tag { position: absolute; top: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ba__tag--before { right: 12px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.8); }
.ba__tag--after { left: 12px; background: rgba(201, 162, 74, 0.92); color: #0B0B0D; }
.ba__focus { position: absolute; inset: 0; opacity: 0; }
.ba:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }

.shot { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--deep); aspect-ratio: 16 / 10; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; }
.shot__badge { position: absolute; left: 12px; top: 12px; }

/* work cards (home) */
.workgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.workgrid .card { padding: 0; background: transparent; border: 0; }
.workgrid .card:hover { border: 0; }
.workgrid .card__body { padding: 18px 0 8px; display: grid; gap: 8px; border-top: 1px solid var(--line); margin-top: 14px; }
.workgrid .card__body .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.workgrid .card__body h3 { margin: 4px 0 0; }
.workgrid--mini { grid-template-columns: repeat(2, 1fr); }
.workgrid--mini .shot { aspect-ratio: 16 / 7; }

/* project rows (work page) */
.project { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.project:first-of-type { border-top: 0; }
.project--flip .project__media { order: 2; }
.project__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.project h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }
.project p { color: var(--ash); }
.facts { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); margin-bottom: 5px; }
.facts dd { font-size: 14.5px; color: var(--text); font-weight: 300; }
.project .link { margin-top: 22px; }

/* =========================================================
   REEL — pinned horizontal sequence (Selene)
   ========================================================= */
.reel { position: relative; height: 320vh; --reel-pad: 0px; }
.reel__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-content: center; gap: 36px; }
.reel__head { padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.reel__head .lede { max-width: 48ch; }
.reel__meter { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); display: flex; align-items: center; gap: 12px; }
.reel__meter i { display: block; width: 120px; height: 1px; background: var(--line-2); position: relative; }
.reel__meter i::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.reel__track { display: flex; gap: 22px; padding: 0 var(--gutter); will-change: transform; }
.step { flex: none; width: min(440px, 78vw); min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; }
.step__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.step__top span:last-child { color: var(--mist); }
.step h3 { font-size: clamp(26px, 2.4vw, 34px); margin: 36px 0 12px; }
.step p { color: var(--ash); }
.step__foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mist); display: flex; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   PRICING METER (Relay) + TIERS + ADD-ONS
   ========================================================= */
.meter { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.meter__panel { display: grid; gap: 22px; }
.meter__row { display: grid; gap: 10px; }
.meter__row label { display: flex; justify-content: space-between; font-size: 13px; color: var(--ash); }
.meter__row label b { font-family: var(--mono); color: var(--text); font-weight: 400; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: ew-resize; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--gold) 0, var(--gold) var(--fill, 0%), var(--line-2) var(--fill, 0%)); border-radius: 2px; }
.range::-moz-range-track { height: 2px; background: var(--line-2); }
.range::-moz-range-progress { height: 2px; background: var(--gold); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--gold); border: 4px solid var(--void); box-shadow: 0 0 0 1px var(--gold), 0 0 18px var(--glow); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 4px solid var(--void); box-shadow: 0 0 0 1px var(--gold), 0 0 18px var(--glow); }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--mist); }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 2px; border: 1px solid var(--line); background: var(--deep); cursor: pointer; transition: border-color 0.3s, background 0.3s; font-size: 13px; }
.addon:hover { border-color: var(--line-2); }
.addon input { position: absolute; opacity: 0; pointer-events: none; }
.addon .box { flex: none; width: 16px; height: 16px; border-radius: 2px; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background 0.3s, border-color 0.3s; }
.addon .box::after { content: ""; width: 8px; height: 5px; border-left: 1.5px solid #0B0B0D; border-bottom: 1.5px solid #0B0B0D; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.addon:has(input:checked) { border-color: var(--line-gold); background: var(--panel-gold); }
.addon:has(input:checked) .box { background: var(--gold); border-color: var(--gold); }
.addon:has(input:checked) .box::after { opacity: 1; }
.addon .nm { flex: 1; color: var(--text); font-weight: 300; }
.addon .pr { font-family: var(--mono); font-size: 11px; color: var(--ash); white-space: nowrap; }
.quote { position: sticky; top: 100px; display: grid; gap: 14px; align-content: start; }
.quote__tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.quote__amt { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1; }
.quote__amt small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mist); margin-left: 8px; }
.quote__lines { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 7px; font-size: 13px; color: var(--ash); }
.quote__lines div { display: flex; justify-content: space-between; gap: 12px; }
.quote__lines div span:last-child { font-family: var(--mono); color: var(--text); font-size: 12px; }
.quote__note { font-size: 12px; color: var(--mist); }

.price { display: flex; flex-direction: column; min-height: 100%; }
.price__tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); display: flex; justify-content: space-between; align-items: center; }
.price__amt { margin: 18px 0 6px; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.04em; line-height: 1; }
.price__amt small { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--mist); letter-spacing: 0.04em; margin-left: 6px; }
.price__for { color: var(--ash); font-size: 14.5px; min-height: 2.6em; }
.price .list { flex: 1; }
.price .btn { margin-top: 24px; justify-content: center; }

.addon-table { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--deep); }
.addon-table__row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 24px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--line); }
.addon-table__row:first-child { border-top: 0; }
.addon-table__row:hover { background: var(--panel); }
.addon-table__row h4 { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; display: flex; gap: 10px; align-items: center; }
.addon-table__row p { color: var(--ash); font-size: 14px; }
.addon-table__row .pr { font-family: var(--mono); font-size: 13px; color: var(--gold-2); white-space: nowrap; text-align: right; }
.addon-table__row .pr small { display: block; font-size: 10px; color: var(--mist); letter-spacing: 0.08em; margin-top: 3px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--display); font-weight: 500; font-size: 17.5px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: transform 0.4s var(--ease), border-color 0.3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--text); transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i { border-color: var(--gold); transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ash); max-width: 70ch; }

/* =========================================================
   ABOUT · VERSE · CONTACT
   ========================================================= */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.story__text { display: grid; gap: 18px; color: var(--ash); font-size: 16.5px; }
.story__media { position: sticky; top: 100px; }
.verse { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 80px); text-align: center; isolation: isolate; }
.verse video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; z-index: -1; }
.verse::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(7, 7, 8, 0.15), rgba(7, 7, 8, 0.88)); }
.verse blockquote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 4vw, 56px); letter-spacing: -0.01em; line-height: 1.1; max-width: 22ch; margin: 0 auto 18px; }
.verse cite { font-family: var(--mono); font-style: normal; color: var(--gold); letter-spacing: 0.22em; text-transform: uppercase; font-size: 10.5px; }

.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 3px; background: var(--deep); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-weight: 300; transition: border-color 0.3s, box-shadow 0.3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.14); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 140px; resize: vertical; }
.form__note { font-size: 12.5px; color: var(--mist); }
.form__ok { display: none; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--line-gold); background: var(--panel-gold); }
.form.is-sent .form__ok, .form.is-error .form__ok { display: block; }
.form.is-error .form__ok { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); }
.field.is-invalid input { border-color: #d0614f; }
.field.is-invalid label::after { content: " — required"; color: #d0614f; text-transform: none; letter-spacing: 0; }
.form button[disabled] { opacity: 0.7; cursor: progress; }
.hp { position: absolute; left: -9999px; }
.details { display: grid; gap: 16px; }
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(201, 162, 74, 0); } }

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.cta { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-gold); padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px); text-align: center; background: radial-gradient(800px 400px at 50% 120%, rgba(201, 162, 74, 0.3), transparent 70%), linear-gradient(180deg, var(--panel), var(--deep)); }
.cta h2 { max-width: 20ch; margin: 0 auto 16px; }
.cta .lede { margin: 0 auto 32px; text-align: center; }
.cta .hero__cta { justify-content: center; }
.cta__mark { position: absolute; right: -40px; bottom: -70px; width: 340px; color: rgba(201, 162, 74, 0.07); pointer-events: none; }
.footer { border-top: 1px solid var(--line); padding: 64px 0 28px; background: var(--abyss); }
/* the fixed HUD steps aside once the footer is in view, so nothing overlaps the base line */
.hud { transition: opacity 0.4s, transform 0.5s var(--ease); }
html.at-footer .hud { opacity: 0; transform: translateY(8px); pointer-events: none; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer__tag { margin-top: 16px; color: var(--ash); max-width: 32ch; }
.footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); margin-bottom: 16px; font-weight: 400; }
.footer li { padding: 5px 0; color: var(--ash); font-size: 14.5px; }
.footer li a:hover { color: var(--gold-2); }
.footer__base { display: flex; justify-content: space-between; gap: 16px; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--mist); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav__right .pill { display: none; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .meter { grid-template-columns: 1fr; }
  .quote { position: static; }
}
@media (max-width: 900px) {
  .nav__in { grid-template-columns: auto 1fr; }
  .nav__links { display: none; }
  .nav__right .btn { display: none; }
  .nav__burger { display: grid; }
  .nav__menu { display: grid; position: fixed; inset: 74px 0 0; background: rgba(7, 7, 8, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 20px var(--gutter) 40px; align-content: start; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0.4s; }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
  .nav__menu > a { font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
  .nav__menu > a .num { font-size: 11px; color: var(--mist); }
  .nav__menu a[aria-current="page"] { color: var(--gold-2); }
  .nav__menu .btn { margin-top: 22px; justify-content: center; font-family: var(--body); font-size: 16px; border-bottom: 1px solid var(--gold); }
  .hero { padding-top: 100px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { height: clamp(380px, 50vh, 520px); order: -1; }
  .hero__copy { justify-items: center; text-align: center; }
  .hero__cta { justify-content: center; }
  .hero__foot { justify-content: center; }
  .cols-3, .workgrid, .cols-2 { grid-template-columns: 1fr; }
  .project, .project--flip { grid-template-columns: 1fr; }
  .project--flip .project__media { order: 0; }
  .story, .contact { grid-template-columns: 1fr; }
  .story__media { position: static; }
  .sec-head--row { grid-template-columns: 1fr; align-items: start; }
  .hud { display: none; }
  .addon-table__row { grid-template-columns: 1fr; gap: 8px; }
  .addon-table__row .pr { text-align: left; }
  .reel__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .cols-4, .stats, .form__row, .footer__top, .addons, .workgrid--mini { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .brand__text { display: none; }
  .facts { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow::before, .flow__pulse { display: none; }
  .step { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
  .marquee__track, .flow__pulse, .hero__scroll i, .status .dot, .pill .dot { animation: none; }
  .hero__canvas { opacity: 1; transition: none; }
}

/* =========================================================
   AWARD REGISTER — ghost numerals, ruled rows, footer wordmark
   ========================================================= */
.section[data-num], .reel[data-num] { position: relative; }
.section[data-num]::before, .reel[data-num]::before {
  content: attr(data-num); position: absolute; right: var(--gutter); top: clamp(24px, 3vw, 48px); z-index: 0; pointer-events: none;
  font-family: var(--display); font-weight: 500; font-size: clamp(120px, 18vw, 280px); line-height: 0.8; letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.035); -webkit-text-stroke: 1px rgba(201, 162, 74, 0.12);
}
.section[data-num] > .wrap { position: relative; z-index: 1; }

.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 72px 1fr 1.6fr 1fr; gap: clamp(20px, 3vw, 48px); padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--line); align-items: start; transition: background 0.4s; }
.row:hover { background: linear-gradient(90deg, rgba(201, 162, 74, 0.04), transparent 60%); }
.row__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); padding-top: 0.6em; }
.row h3 { font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -0.035em; line-height: 0.95; }
.row__lede { color: var(--text); font-size: 17px; margin-bottom: 10px; font-weight: 400; }
.row p { color: var(--ash); }
.row .list { display: grid; gap: 6px; color: var(--text); font-size: 14px; padding-top: 0.5em; }
.row .list li { display: flex; gap: 10px; align-items: flex-start; }
.row .list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.footer__big { font-family: var(--display); font-weight: 500; font-size: clamp(52px, 11.5vw, 190px); letter-spacing: -0.05em; line-height: 0.86; color: var(--text); margin-bottom: clamp(40px, 6vw, 96px); display: flex; flex-wrap: wrap; gap: 0 0.22em; }
.footer__big .k { font-size: 0.98em; }

/* photo still (About) — slow drift */
.shot--portrait { aspect-ratio: 3 / 4; max-width: 460px; }
.shot--portrait img { animation: drift 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .shot--portrait img { animation: none; } }
@media (max-width: 900px) {
  .row { grid-template-columns: 44px 1fr; }
  .row p, .row .list, .row__lede { grid-column: 2; }
  .section[data-num]::before { font-size: 96px; top: 16px; }
}


.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mist); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity 0.4s; }
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s var(--ease-io) infinite; transform-origin: top; }
html.hero-scrolled .hero__scroll { opacity: 0; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =========================================================
   HERO STAGE — before / after in 3D (AI Studio register)
   Two browser screens angled toward each other like an open book. Scroll flattens
   them to face the lens, lifts them, and dissolves them as the page takes over.
   ========================================================= */
.hero__stack { display: grid; justify-items: center; text-align: center; gap: 0; }
.hero__stack .pill { margin-bottom: 20px; }
.hero__title { font-size: clamp(46px, 7vw, 104px); letter-spacing: -0.045em; line-height: 0.94; max-width: 11ch; margin-bottom: clamp(18px, 2.4vw, 36px); position: relative; z-index: 0;
  transform: translate3d(0, calc(var(--hp, 0) * -40px), 0); opacity: calc(1 - var(--hp, 0) * 0.9); will-change: transform, opacity; }
.hero__title[data-reveal].in { opacity: calc(1 - var(--hp, 0) * 0.9); transform: translate3d(0, calc(var(--hp, 0) * -40px), 0); filter: none; }
.hero__stack .lede { margin: 22px auto 26px; text-align: center; max-width: 52ch; font-size: clamp(15px, 1.15vw, 18px); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero__foot { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.hero__foot i { font-style: normal; color: var(--gold-3); }

.stage { position: relative; z-index: 1; width: min(1360px, 100%); height: clamp(260px, 38vh, 440px); margin-bottom: 26px; perspective: 1600px; perspective-origin: 50% 45%; --hp: 0; --px: 0; --py: 0; transform-style: preserve-3d; }
.screen {
  position: absolute; left: 50%; top: 50%; width: clamp(280px, 36vw, 580px); aspect-ratio: 16 / 10.6;
  margin: calc(clamp(280px, 36vw, 580px) * -0.33) 0 0 calc(clamp(280px, 36vw, 580px) * -0.5);
  border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2); background: var(--deep);
  box-shadow: 0 50px 110px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(201, 162, 74, 0.05) inset;
  transform-style: preserve-3d; will-change: transform, opacity;
  transform:
    rotateY(calc(var(--px) * 2.5deg)) rotateX(calc(var(--py) * -1.5deg))
    translate3d(calc(var(--x) * (1 + var(--hp) * 0.35)), calc(var(--hp) * -90px), calc(var(--z) + var(--hp) * 260px))
    rotateY(calc(var(--rot) * (1 - var(--hp) * 1.1)));
  opacity: calc(1 - var(--hp) * 1.25);
}
/* entrance: hidden until the intro hands off, then the screens rise into place (transition only while entering,
   so the scroll-driven transform stays crisp afterwards) */
html:not([data-intro]) .screen { opacity: 0; transform: translate3d(var(--x), 40px, calc(var(--z) - 240px)) rotateY(var(--rot)); }
html.entering .screen { transition: opacity 0.9s var(--ease) calc(var(--d, 0) * 160ms + 0.45s), transform 1.3s var(--ease) calc(var(--d, 0) * 160ms + 0.45s); }
html:not(.entering) .hero__title[data-reveal].in { transition: none; }
.screen--after { border-color: var(--line-gold); box-shadow: 0 50px 110px -34px rgba(0, 0, 0, 0.95), 0 0 80px -30px var(--glow), 0 0 0 1px rgba(201, 162, 74, 0.1) inset; }
.screen::after { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); opacity: 0.6; }
.screen--after::after { opacity: 1; }
.screen__chrome, .demo__chrome { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mist); }
.demo__dots { display: inline-flex; gap: 5px; }
.demo__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.demo__url { flex: 1; text-align: center; padding: 5px 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__tag { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--ash); }
.demo__tag--gold { border-color: var(--gold); background: var(--gold); color: #0B0B0D; }
.screen__body { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; overflow: hidden; background: var(--deep); }
.screen__body video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen--before .screen__body video { filter: saturate(0.75) contrast(1.02); }
.stage__mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(60px); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; opacity: calc(1 - var(--hp) * 2); }
.stage__line { width: 1px; height: clamp(28px, 4vh, 48px); background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.stage__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-gold); background: rgba(7, 7, 8, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gold-2); display: grid; place-items: center; box-shadow: 0 0 30px -6px var(--glow); }
.stage__arrow svg { width: 16px; height: 16px; }
.stage__cap { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); white-space: nowrap; opacity: calc(1 - var(--hp) * 2); }
@media (max-width: 900px) {
  .hero__title { font-size: clamp(44px, 12vw, 72px); }
  .hero__stack > * { max-width: 100%; min-width: 0; }
  .hero__stack .pill { display: inline-block; white-space: normal; text-align: center; line-height: 1.6; padding: 8px 12px; }
  .hero__stack .pill .dot { display: inline-block; vertical-align: middle; margin-right: 8px; }
  .hero__stack .hero__foot { flex-wrap: wrap; justify-content: center; }
  .stage { height: 58vw; max-height: 420px; }
  .screen { width: 62vw; margin: calc(62vw * -0.33) 0 0 calc(62vw * -0.5); }
  .stage .screen--before { --x: -20vw !important; --rot: 22deg !important; --z: -160px !important; }
  .stage .screen--after { --x: 20vw !important; --rot: -22deg !important; }
  .stage__cap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .screen { transform: translate3d(var(--x), 0, var(--z)) rotateY(var(--rot)); opacity: 1; transition: none; } .hero__title { transform: none; opacity: 1; } }

/* =========================================================
   DEMO — before / after sites playing side by side, one transport
   ========================================================= */
.demo { display: grid; gap: 14px; }
.demo__grid { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 0; align-items: center; }
.demo__pane { position: relative; display: grid; gap: 12px; }
.demo__pane > div:first-child, .demo__screen { border-radius: 6px 6px 0 0; }
.demo__chrome { border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; }
.demo__pane--after .demo__chrome { border-color: var(--line-gold); }
.demo__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--deep); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; }
.demo__pane--after .demo__screen { border-color: var(--line-gold); box-shadow: 0 30px 80px -40px var(--glow); }
.demo__screen video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo__pane--before .demo__screen video { filter: saturate(0.75) contrast(1.02); }
.demo__pane figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--mist); }
.demo__ext { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ash); transition: color 0.3s; }
.demo__ext svg { width: 13px; height: 13px; transition: transform 0.4s var(--ease); }
.demo__ext:hover { color: var(--text); }
.demo__ext:hover svg { transform: translate(2px, -2px); }
.demo__ext--gold { color: var(--gold-2); }
.demo__ext--gold:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 4px; }
.demo__mid { display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; justify-content: center; padding-bottom: 30px; }
.demo__line { flex: 1; width: 1px; background: linear-gradient(180deg, transparent, var(--line-gold), transparent); max-height: 120px; }
.demo__arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-gold); color: var(--gold-2); display: grid; place-items: center; background: var(--abyss); }
.demo__arrow svg { width: 14px; height: 14px; }
.demo__bar { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--deep); }
.demo__play { flex: none; width: 36px; height: 36px; border-radius: 2px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); transition: border-color 0.3s, color 0.3s, background 0.3s; }
.demo__play:hover { border-color: var(--gold); color: var(--gold-2); }
.demo__play svg { width: 11px; height: 11px; grid-area: 1 / 1; }
.demo__play .ic-pause { display: none; }
.demo.is-playing .demo__play .ic-pause { display: block; }
.demo.is-playing .demo__play .ic-play { display: none; }
.demo__scrub { -webkit-appearance: none; appearance: none; flex: 1; height: 24px; background: transparent; cursor: ew-resize; }
.demo__scrub::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--gold) 0, var(--gold) var(--fill, 0%), var(--line-2) var(--fill, 0%)); }
.demo__scrub::-moz-range-track { height: 2px; background: var(--line-2); }
.demo__scrub::-moz-range-progress { height: 2px; background: var(--gold); }
.demo__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--gold); border: 3px solid var(--void); box-shadow: 0 0 0 1px var(--gold); }
.demo__scrub::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); border: 3px solid var(--void); box-shadow: 0 0 0 1px var(--gold); }
.demo__time { font-size: 11px; color: var(--mist); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo--compact .demo__grid { grid-template-columns: 1fr 40px 1fr; }
.demo--compact .demo__chrome { height: 30px; font-size: 9px; }
@media (max-width: 760px) {
  .demo__grid { grid-template-columns: 1fr; gap: 18px; }
  .demo__mid { flex-direction: row; padding: 0; }
  .demo__line { height: 1px; width: auto; max-height: none; max-width: 120px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); }
  .demo__arrow { transform: rotate(90deg); }
  .demo__time { display: none; }
}

/* case = header + demo (home selected work, portfolio redesigns) */
.case { padding: clamp(36px, 4.5vw, 64px) 0; border-top: 1px solid var(--line); }
.case__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(22px, 3vw, 36px); }
.case__head .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.case__head h3 { font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.035em; line-height: 0.98; }
.case__head p { color: var(--ash); font-size: 16px; max-width: 54ch; }
.case__facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.case__facts div { display: grid; gap: 4px; }
.case__facts dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.case__facts dd { font-size: 14px; color: var(--text); font-weight: 300; }
@media (max-width: 900px) { .case__head { grid-template-columns: 1fr; align-items: start; } }

/* founder portrait */
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 480px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--deep); transform-style: preserve-3d; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; animation: drift 24s ease-in-out infinite alternate; transform-origin: 50% 30%; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 7, 8, 0) 55%, rgba(7, 7, 8, 0.55)); pointer-events: none; }
.portrait .shot__badge { z-index: 1; }
.portrait__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; justify-content: space-between; align-items: end; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
.portrait__cap b { font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; text-transform: none; color: var(--text); display: block; margin-bottom: 4px; }
.portrait--sm { max-width: 320px; aspect-ratio: 1; }
.portraits { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; align-items: end; }
@media (prefers-reduced-motion: reduce) { .portrait img { animation: none; } }

/* verse — light, elegant: the one bright room in the house */
.verse--light { background: linear-gradient(160deg, #F7F3EA 0%, #EFE9DC 55%, #E9E1D0 100%); border-color: rgba(140, 109, 42, 0.25); color: #15130F; isolation: isolate; }
.verse--light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 420px at 50% 120%, rgba(201, 162, 74, 0.28), transparent 65%), radial-gradient(600px 300px at 10% 0%, rgba(255, 255, 255, 0.9), transparent 60%); }
.verse--light::after { background: none; }
.verse__rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 26px; color: var(--gold-3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
.verse__rule::before, .verse__rule::after { content: ""; width: clamp(40px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, rgba(140, 109, 42, 0.6)); }
.verse__rule::after { background: linear-gradient(90deg, rgba(140, 109, 42, 0.6), transparent); }
.verse--light blockquote { color: #15130F; }
.verse--light blockquote em { color: var(--gold-3); font-style: italic; }
.verse--light cite { color: var(--gold-3); }
.verse__orn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, 90%); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(140, 109, 42, 0.14); z-index: -1; pointer-events: none; }
.verse__orn::before, .verse__orn::after { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 1px solid rgba(140, 109, 42, 0.12); }
.verse__orn::after { inset: 24%; border-color: rgba(140, 109, 42, 0.09); }
.verse__note { margin: 22px auto 0; max-width: 46ch; color: #5B5346; font-size: 15px; }

/* language strip (About) */
.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.langs span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--text); }
.langs span.more { color: var(--mist); border-style: dashed; }

/* service detail blocks (Services page) */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); padding: clamp(48px, 6vw, 96px) 0; border-top: 1px solid var(--line); align-items: start; }
.svc__intro { position: sticky; top: 100px; display: grid; gap: 18px; }
.svc__intro h3 { font-size: clamp(34px, 4vw, 60px); letter-spacing: -0.035em; line-height: 0.96; }
.svc__intro .lede { font-size: 17px; }
.svc__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.svc__meta dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); margin-bottom: 4px; }
.svc__meta dd { font-size: 14.5px; color: var(--text); font-weight: 300; }
.svc__body { display: grid; gap: 26px; color: var(--ash); font-size: 16px; }
.svc__body h4 { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; color: var(--text); margin-bottom: 8px; }
.svc__body ul { display: grid; gap: 8px; color: var(--text); font-size: 14.5px; }
.svc__body ul li { display: flex; gap: 10px; align-items: flex-start; }
.svc__body ul li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.svc__body ul li b { font-weight: 500; color: var(--text); }
.svc__steps { counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--line); }
.svc__steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ash); }
.svc__steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--gold); padding-top: 3px; }
.svc__steps li b { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.svc__body .list-plain { display: grid; gap: 6px; }
.svc__body .list-plain li::before { display: none; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } .svc__intro { position: static; } }

/* "Next Level Design" (BUILT) */
.nld { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-gold); background: linear-gradient(180deg, var(--panel-gold), var(--abyss)); padding: clamp(32px, 4.5vw, 64px); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.nld__text { display: grid; gap: 16px; color: var(--ash); }
.nld__text h3 { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.035em; line-height: 0.98; color: var(--text); }
.nld__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.nld__stats div { background: var(--deep); padding: 16px 14px; }
.nld__stats b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.04em; color: var(--gold-2); line-height: 1; }
.nld__stats span { display: block; margin-top: 6px; font-size: 12px; color: var(--mist); }
.nld__media { display: grid; gap: 14px; }
.nld__media .shot { aspect-ratio: 16 / 9; }
.nld__apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nld__app { padding: 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--deep); display: grid; gap: 4px; }
.nld__app b { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--text); }
.nld__app span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
@media (max-width: 900px) { .nld { grid-template-columns: 1fr; } }

/* v3 — single, larger founder portrait on About */
.portrait--lg { max-width: 560px; width: 100%; aspect-ratio: 4 / 5; }
.portrait--lg img { object-position: 50% 18%; }

/* v3 — "How a build runs": numbered step cards on a gold rail */
.svc__steps { counter-reset: s; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 0; position: relative; }
.svc__steps li { counter-increment: s; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); font-size: 14.5px; line-height: 1.6; color: var(--ash); position: relative; overflow: hidden; transition: border-color 0.4s, transform 0.4s; }
.svc__steps li:hover { border-color: rgba(201, 162, 74, 0.45); transform: translateY(-2px); }
.svc__steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); padding: 0 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.svc__steps li::after { content: ""; position: absolute; left: 22px; top: 36px; width: 28px; height: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.svc__steps li b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; color: var(--text); font-weight: 500; margin: 0; }
.svc__steps li span { display: block; }
@media (max-width: 560px) { .svc__steps { grid-template-columns: 1fr; } }

/* v3 — motion & 3D prices stand out */
.row__title { display: grid; gap: 18px; align-content: start; }
.row__price { display: inline-flex; align-items: baseline; gap: 10px; justify-self: start; padding: 10px 18px 11px; border: 1px solid rgba(201, 162, 74, 0.55); border-radius: 999px; background: rgba(201, 162, 74, 0.1); color: var(--gold); font-family: var(--display); font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; box-shadow: 0 0 32px rgba(201, 162, 74, 0.12); }
.row__price span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); }
.row__price--sm { font-size: 18px; }
.price-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.price-chips li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--text); }
.price-chips li::before { display: none; }
.price-chips b { color: var(--gold); font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) { .price-chips { grid-template-columns: 1fr; } .row__title { grid-column: 2; } }

/* v3 — mobile menu: a solid full-screen sheet (never see-through) */
@media (max-width: 900px) {
  /* backdrop-filter on the bar makes it the containing block for the fixed sheet and blurs nothing behind it — drop it while open */
  .nav.is-open { background: var(--void); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); }
  .nav__in { position: relative; z-index: 2; }
  .nav__burger { width: 44px; height: 44px; border-radius: 999px; border-color: var(--line-2); background: rgba(255, 255, 255, 0.03); transition: border-color 0.3s, background 0.3s; }
  .nav.is-open .nav__burger { border-color: var(--line-gold); background: rgba(201, 162, 74, 0.08); }
  .nav__burger span, .nav__burger span::before, .nav__burger span::after { height: 1.25px; }
  .nav__burger span { width: 16px; }
  .nav__burger span::before { top: -5px; } .nav__burger span::after { top: 5px; }
  .nav__menu { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 1; background: var(--void); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 96px var(--gutter) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--ease-io), opacity 0.3s, visibility 0s linear 0.6s; }
  .nav__menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 60% at 100% 0%, rgba(201, 162, 74, 0.10), transparent 60%); }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.6s var(--ease-io), opacity 0.2s, visibility 0s; }
  .nav__menu > a { position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 7vw, 30px); letter-spacing: -0.025em; line-height: 1; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--text); display: flex; justify-content: space-between; align-items: center; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.2s; }
  .nav__menu > a:first-child { border-top: 1px solid var(--line); }
  .nav.is-open .nav__menu > a { opacity: 1; transform: none; }
  .nav.is-open .nav__menu > a:nth-child(1) { transition-delay: 0.12s; } .nav.is-open .nav__menu > a:nth-child(2) { transition-delay: 0.16s; }
  .nav.is-open .nav__menu > a:nth-child(3) { transition-delay: 0.20s; } .nav.is-open .nav__menu > a:nth-child(4) { transition-delay: 0.24s; }
  .nav.is-open .nav__menu > a:nth-child(5) { transition-delay: 0.28s; } .nav.is-open .nav__menu > a:nth-child(6) { transition-delay: 0.32s; }
  .nav__menu > a .num { order: -1; width: 3.2em; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--mist); }
  .nav__menu > a::after { content: "→"; margin-left: auto; font-family: var(--body); font-size: 16px; color: var(--mist); transition: transform 0.3s var(--ease), color 0.2s; }
  .nav__menu > a:active::after, .nav__menu > a[aria-current="page"]::after { color: var(--gold); transform: translateX(3px); }
  .nav__menu > a[aria-current="page"] { color: var(--gold-2); }
  .nav__menu > a[aria-current="page"] .num { color: var(--gold); }
  .nav__menu-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 18px; opacity: 0; transition: opacity 0.5s var(--ease) 0s; }
  .nav.is-open .nav__menu-foot { opacity: 1; transition-delay: 0.4s; }
  .nav__menu-foot .btn { justify-content: center; width: auto; max-width: none; margin: 0; box-sizing: border-box; padding: 16px 20px; font-size: 15px; border-radius: 999px; }
  .nav__menu-foot { grid-template-columns: minmax(0, 1fr); }
  .nav__menu-contact a { font-family: var(--body); font-size: 14px; padding: 0; border: 0; letter-spacing: 0; }
  .nav__menu-contact { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ash); }
  .nav__menu-contact a:hover { color: var(--gold-2); }
  .nav__menu-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); }
  .nav__menu-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
}
@media (min-width: 901px) { .nav__menu { display: none !important; } }

/* v3 — Portfolio hero: the real sites, scrolling, drifting right to left */
.phero--reel { padding-bottom: 40px; }
.sitereel { position: relative; margin-top: clamp(40px, 6vw, 72px); overflow: hidden; padding: 8px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); perspective: 1600px; }
.sitereel__track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; animation: reel 70s linear infinite; transform-style: preserve-3d; }
.sitereel:hover .sitereel__track { animation-play-state: paused; }
.sitereel.is-still .sitereel__track { animation: none; }
@keyframes reel { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.sitereel__card { flex: none; width: clamp(260px, 27vw, 430px); margin: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--deep); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); transition: transform 0.5s var(--ease), border-color 0.4s; }
.sitereel__card--after { border-color: var(--line-gold); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 40px -18px var(--glow); }
.sitereel__card:hover { transform: translateY(-6px); }
.sitereel__card .demo__chrome { padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.sitereel__screen { aspect-ratio: 16 / 10; background: #0d0d10; }
.sitereel__screen video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sitereel__card figcaption { padding: 10px 14px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); border-top: 1px solid var(--line); }
.sitereel__card--after figcaption { color: var(--gold-2); }
@media (max-width: 700px) { .sitereel__track { animation-duration: 48s; } }
@media (prefers-reduced-motion: reduce) { .sitereel__track { animation: none; } }

/* v3 — mobile scroll layout */
@media (max-width: 900px) {
  /* service rows: the copy column was falling into the 44px number column */
  .row > div, .row > ul { grid-column: 2; min-width: 0; }
  .row h3 { font-size: clamp(30px, 8.5vw, 40px); }
  /* the light stream crosses body copy on a narrow screen */
  #stream { display: none; }
  .section[data-num]::before { font-size: 72px; opacity: 0.6; }
  /* hero stage: calmer angles, after screen in front */
  .stage .screen--before { --x: -15vw !important; --rot: 16deg !important; --z: -120px !important; }
  .stage .screen--after { --x: 13vw !important; --rot: -12deg !important; --z: 30px !important; }
  /* process: a vertical stack instead of a pinned sideways reel */
  .reel { height: auto !important; }
  .reel__stick { position: static; height: auto; overflow: visible; display: block; padding: clamp(64px, 14vw, 96px) 0; }
  .reel__meter { display: none; }
  .reel__head { margin-bottom: 28px; }
  .reel__track { flex-direction: column; transform: none !important; gap: 14px; }
  .step { width: 100%; min-height: 0; }
  .step h3 { margin: 22px 0 10px; }
  /* founder photo: keep the face in frame */
  .portrait img, .story__media img { object-position: 50% 12%; }
  .portrait { max-width: 100%; aspect-ratio: 4 / 5; }
}

/* =========================================================
   v5 — phone performance pass. Everything here trades GPU-heavy
   effects for cheap ones on touch screens and narrow windows:
   no backdrop blur, no blur-in reveals, no 3D layers, no
   never-ending image drift, no dust canvas or light stream.
   ========================================================= */
@media (max-width: 900px), (hover: none) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav.is-scrolled { background: rgba(7, 7, 8, 0.94); }
  .stage__arrow, .ba__tag { background: rgba(7, 7, 8, 0.85); }
  [data-s3d] { transform: none !important; transform-style: flat; will-change: auto; }
  [data-s3d] .glare { display: none; }
  [data-reveal] { filter: none !important; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  [data-reveal].in { transform: none; }
  .portrait img, .shot--portrait img { animation: none; }
  #dust, #stream { display: none !important; }
  [data-parallax] { transform: none !important; }
  /* the drifting site reel moves on the compositor only */
  .sitereel__track { will-change: transform; }
}

/* ---------- BUILT — app phones, web platforms, screenshot strip ---------- */
.nld { grid-template-columns: 1fr 1fr; }
.nld__title { display: flex; align-items: center; gap: 14px; }
.nld__title img { width: clamp(40px, 4vw, 56px); height: auto; border-radius: 22%; box-shadow: 0 8px 30px rgba(255, 120, 30, .18); }
.nld__lead { color: var(--text); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.phone { margin: 0; display: grid; gap: 10px; justify-items: center; }
.phone__screen { position: relative; width: 100%; aspect-ratio: 640 / 1390; border-radius: 13% / 6%; overflow: hidden; background: #000; border: 6px solid #141416; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.7); }
.phone__screen video, .phone__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone figcaption { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); text-align: center; }
.nld__phones { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: clamp(10px, 1.4vw, 18px); align-items: center; }
.phone--side { opacity: .9; }
.phone--side .phone__screen { border-width: 5px; }
.built-web, .built-shots { margin-top: clamp(28px, 4vw, 48px); }
.built-web__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.built-web__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.browser { display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--deep); color: inherit; text-decoration: none; transition: border-color .3s, transform .3s; }
.browser:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #0d0d0f; }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #2a2a2e; }
.browser__bar span { margin-left: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.browser__view { aspect-ratio: 16 / 10; background: #000; }
.browser__view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.browser__foot { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px; border-top: 1px solid var(--line); }
.browser__foot b { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--text); }
.browser__foot span { grid-column: 1; font-size: 12.5px; color: var(--mist); }
.browser__foot em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.built-shots__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 22px); }
@media (max-width: 900px) {
  .nld { grid-template-columns: 1fr; }
  .nld__phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -4px; padding: 0 4px 6px; scrollbar-width: none; align-items: start; }
  .nld__phones::-webkit-scrollbar, .built-shots__strip::-webkit-scrollbar, .built-web__grid::-webkit-scrollbar { display: none; }
  .nld__phones .phone { scroll-snap-align: center; }
  .nld__phones .phone--main { order: -1; }
  .phone--side { opacity: 1; }
  .built-web__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .built-web__grid .browser { scroll-snap-align: start; }
  .built-shots__strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .built-shots__strip .phone { scroll-snap-align: start; }
  .browser:hover { transform: none; }
}

/* ---------- pricing: care plan as a full-width card under the four tiers ---------- */
.tiers .price--wide { grid-column: 1 / -1; }
.price--wide .z { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 18px 36px; align-items: center; }
.price--wide .list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0; }
.price--wide .btn { margin-top: 0; }
@media (max-width: 900px) { .price--wide .z { grid-template-columns: 1fr; } .price--wide .list { grid-template-columns: 1fr; } }

/* ---------- portfolio reel: before → after pairs, one per site ---------- */
.sitereel__track { gap: clamp(28px, 3vw, 48px); animation-duration: 120s; padding-right: clamp(28px, 3vw, 48px); }
.sitereel__pair { flex: none; display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); }
.sitereel__label { display: flex; align-items: baseline; gap: 12px; padding: 0 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.sitereel__label b { font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.sitereel__n { color: var(--gold-2); }
.sitereel__ba { margin-left: auto; }
.sitereel__ba i { font-style: normal; color: var(--gold-2); }
.sitereel__duo { display: flex; align-items: center; gap: 10px; }
.sitereel__card { width: clamp(220px, 22vw, 360px); }
.sitereel__arrow { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-gold); color: var(--gold-2); background: var(--deep); }
.sitereel__arrow svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .sitereel__track { animation-duration: 80s; } .sitereel__card { width: 200px; } .sitereel__card .demo__url { display: none; } .sitereel__card .demo__chrome { justify-content: space-between; } .sitereel__duo { gap: 6px; } .sitereel__arrow { width: 22px; height: 22px; } }

/* Portfolio project status */
.pstatus { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; border: 1px solid currentColor; line-height: 1.2; }
.pstatus i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pstatus--live { color: #5fd38a; background: rgba(95,211,138,.08); }
.pstatus--live i { animation: pingLive 2.4s ease-out infinite; }
@keyframes pingLive { 0% { box-shadow: 0 0 0 0 rgba(95,211,138,.55); } 100% { box-shadow: 0 0 0 10px rgba(95,211,138,0); } }
.pstatus--preview { color: var(--gold); background: rgba(201,162,74,.08); }
.pstatus--beta { color: #7fb2ff; background: rgba(127,178,255,.08); }
@media (prefers-reduced-motion: reduce) { .pstatus--live i { animation: none; } }