/* ---------------------------------------------------------------------------
   beternu — "Noir" variant (human-first marketing & AI content engine)
   Self-hosted fonts (GDPR-safe, no third-party runtime dependency).
   Families/weights match the previous Google Fonts <link> exactly:
   Syne 400..800 + Space Grotesk 300..600. All use font-display: swap.
   Source: Google Fonts woff2 (Syne v24, Space Grotesk v22), vendored to /fonts.
   If these files were missing, the HTML keeps the Google Fonts <link> as a
   fallback (see index.html), so typography never breaks.
--------------------------------------------------------------------------- */

/* Space Grotesk — latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk — latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk — vietnamese */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Syne — latin */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Syne — latin-ext */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Syne — greek */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ---------------------------------------------------------------------------
   Design tokens first: one place to tune the whole look.
--------------------------------------------------------------------------- */

:root {
  --bg: #0b0b0d;
  --bg-soft: #121215;
  --ink: #f0ede6;
  --ink-dim: #8f8d86;
  --accent: #d6fb41;
  --line: rgba(240, 237, 230, 0.14);

  --font-display: "Syne", sans-serif;
  --font-body: "Space Grotesk", sans-serif;

  /* fluid type: clamp(min, preferred, max) scales with viewport width */
  --text-hero: clamp(4.2rem, 17vw, 15rem);
  --text-h2: clamp(2.4rem, 7vw, 5.5rem);
  --text-cta: clamp(1.7rem, 8.5vw, 8rem);

  --space-section: clamp(6rem, 14vh, 11rem);
  --pad-x: clamp(1.25rem, 4vw, 4rem);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Scroll-progress rail (lime) — a hairline at the very top that fills as the
   page is read. JS sets --scroll (0..1); without JS it stays at 0 (hidden), so
   it never misleads. Decorative, aria-hidden in markup.
-------------------------------------------------------------------------- */
.scroll-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  height: 2px;
  pointer-events: none;
  background: rgba(214, 251, 65, 0.12);
}

.scroll-rail__fill {
  display: block;
  height: 100%;
  /* --scroll published by JS (0..1); transform scale = no layout/paint cost */
  transform: scaleX(var(--scroll, 0));
  transform-origin: 0 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(214, 251, 65, 0.55);
  will-change: transform;
}

html:not(.js) .scroll-rail { display: none; }

/* --------------------------------------------------------------------------
   Kinetic variable typography — Syne wght breathes on scroll/hover.
   JS publishes --kin (0..1, scroll-energy) on <html>; display headings map it
   into font-variation-settings "wght". Near-zero cost, no layout shift (only
   the variable weight axis moves; font-size is untouched). Static fallback:
   no JS / reduced-motion leaves the resting weight.
-------------------------------------------------------------------------- */
.js .hero__title,
.js .section-head__title,
.js .contact__cta {
  /* Syne axis is 400..800; rest at 760, lift toward 800 with scroll energy */
  font-variation-settings: "wght" calc(720 + var(--kin, 0) * 80);
  transition: font-variation-settings 0.5s ease-out;
}

/* Hover the hero gives an immediate, contained weight bloom. */
.js .hero__title:hover {
  font-variation-settings: "wght" 800;
}

/* Skip link: off-screen until focused, then visible top-left */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-150%);
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.18s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* WCAG 2.1 AA — 2.4.7 Focus Visible.
   A consistent, high-contrast focus ring on every keyboard-focusable element.
   :focus-visible keeps it keyboard-only so mouse clicks stay clean.
   The lime ring sits at 16.6:1 on the dark background, well above AA. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.service:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

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

/* --------------------------------------------------------------------------
   Preloader
-------------------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: none;
  align-items: flex-end;
  padding: var(--pad-x);
}

.js .preloader {
  display: flex;
}

.preloader__inner {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.preloader__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.85;
  color: var(--accent);
}

.preloader__label {
  color: var(--ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Custom cursor — hidden on touch devices via media query below
-------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.cursor.is-link {
  width: 56px;
  height: 56px;
  background: rgba(214, 251, 65, 0.15);
  backdrop-filter: blur(2px);
  border: 1px solid var(--accent);
}

.cursor.is-view {
  width: 88px;
  height: 88px;
  background: var(--accent);
}

/* Contextual label on CTAs — the dot grows to a solid lime pill carrying a
   word of intent (shared cursor grammar with Atelier's labelled ring). */
.cursor.is-label {
  width: 76px;
  height: 76px;
  background: var(--accent);
}

.cursor__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cursor.is-view .cursor__label,
.cursor.is-label .cursor__label {
  opacity: 1;
}

/* Press state — the cursor contracts on pointer-down for tactile feedback.
   The follow transform is written inline by JS each frame, so the scale is
   composed there; this rule only tightens the ring read on press. */
.cursor.is-press {
  background: var(--accent);
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Variant switcher
-------------------------------------------------------------------------- */

.variant-switch {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(11, 11, 13, 0.7);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.variant-switch a {
  color: var(--ink-dim);
  transition: color 0.25s ease;
}

.variant-switch a:hover {
  color: var(--ink);
}

.variant-switch a.is-active {
  color: var(--accent);
}

.variant-switch__sep {
  width: 1px;
  height: 0.9rem;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--pad-x);
  mix-blend-mode: difference;
}

.header__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.header__nav {
  display: flex;
  gap: 2.2rem;
  font-size: 0.9rem;
}

.header__nav a {
  position: relative;
}

.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

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

.header__cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.5rem 1rem;
}

.header__cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* --------------------------------------------------------------------------
   Hero
-------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh; /* svh: stable viewport height on mobile browsers */
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) clamp(2rem, 6vh, 4rem);
  overflow: hidden;
}

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

/* WebGL fallback poster — a tasteful static gradient evoking the lime wave
   field. Always rendered as a backdrop; it stands in completely when WebGL is
   unavailable, when JS is off, or under reduced-motion (the canvas stays empty
   in those cases). When the live scene renders, it sits harmoniously behind the
   additive points. Decorative only, so aria-hidden in the markup. */
.hero__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(214, 251, 65, 0.16), transparent 70%),
    radial-gradient(60% 50% at 18% 80%, rgba(214, 251, 65, 0.10), transparent 70%),
    repeating-linear-gradient(
      115deg,
      rgba(240, 237, 230, 0.035) 0px,
      rgba(240, 237, 230, 0.035) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(180deg, #0b0b0d 0%, #101014 60%, #0b0b0d 100%);
  transition: opacity 0.6s ease;
}

/* Live WebGL scene took over — retire the poster so it never doubles. */
.webgl-live .hero__poster { opacity: 0; }

.hero__content {
  position: relative;
  width: 100%;
}

.hero__eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.5rem;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-hero);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line--offset {
  margin-left: clamp(2rem, 12vw, 14rem);
}

/* keep the © as a small superscript mark, not a full-size glyph */
.hero__title .accent {
  font-size: 0.22em;
  vertical-align: super;
  margin-left: 0.3em;
}

.hero__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

.hero__desc {
  max-width: 26rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-dim);
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hero__scroll-line {
  width: 1px;
  height: 3.4rem;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: scrollhint 1.8s ease-in-out infinite;
}

@keyframes scrollhint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   Marquee
-------------------------------------------------------------------------- */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Shared section header
-------------------------------------------------------------------------- */

section,
.contact {
  padding: var(--space-section) var(--pad-x) 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.2rem;
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: -0.01em;
  overflow: hidden;
  white-space: nowrap;
}

.section-head__index {
  font-size: 0.9rem;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   Work
-------------------------------------------------------------------------- */

.work__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.project:nth-child(even) {
  transform: translateY(clamp(2rem, 8vh, 6rem));
}

.project__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
}

.project__visual-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project:hover .project__visual-inner {
  transform: scale(1.06);
}

/* Pure-CSS project art: layered gradients so the page needs no image files */
.project__visual--aurora .project__visual-inner {
  background:
    radial-gradient(120% 90% at 15% 10%, #3b2d6e 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 30%, #1f6f6b 0%, transparent 60%),
    radial-gradient(90% 120% at 60% 100%, #d6fb41 0%, transparent 45%),
    #101018;
}

.project__visual--ember .project__visual-inner {
  background:
    radial-gradient(110% 90% at 80% 15%, #e4572e 0%, transparent 55%),
    radial-gradient(120% 100% at 10% 80%, #51231f 0%, transparent 65%),
    radial-gradient(70% 70% at 40% 40%, #f6ae2d 0%, transparent 50%),
    #16100f;
}

.project__visual--tide .project__visual-inner {
  background:
    radial-gradient(130% 100% at 20% 20%, #1d4ed8 0%, transparent 55%),
    radial-gradient(100% 90% at 90% 70%, #0ea5b5 0%, transparent 55%),
    radial-gradient(80% 90% at 50% 110%, #e0f2fe 0%, transparent 40%),
    #0c1220;
}

.project__visual--moss .project__visual-inner {
  background:
    radial-gradient(120% 100% at 75% 10%, #3f6b35 0%, transparent 60%),
    radial-gradient(110% 90% at 10% 60%, #1c2b1a 0%, transparent 70%),
    radial-gradient(80% 80% at 60% 95%, #cdeac0 0%, transparent 40%),
    #10140e;
}

/* --------------------------------------------------------------------------
   Generative program motifs (Noir) — a distinct lime line-pattern layered over
   each program's duotone so the four stages are scannable at a glance:
     01 Clarity  (aurora) — converging focus rays
     02 Setup    (ember)  — blueprint grid
     03 Scale-up (tide)   — expanding concentric rings
     04 Maintain (moss)   — steady horizon bands
   Lives in ::after so the base gradient + project number stay put. Motion is a
   single slow transform, disabled under reduced-motion.
-------------------------------------------------------------------------- */
.project__visual-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.project__visual--aurora .project__visual-inner::after {
  background:
    repeating-conic-gradient(from 0deg at 60% 100%,
      rgba(214, 251, 65, 0.5) 0deg 3deg,
      transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(80% 80% at 60% 100%, #000 0%, transparent 70%);
          mask-image: radial-gradient(80% 80% at 60% 100%, #000 0%, transparent 70%);
  animation: motif-rays 40s linear infinite;
}

.project__visual--ember .project__visual-inner::after {
  background:
    repeating-linear-gradient(0deg, rgba(214, 251, 65, 0.32) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(214, 251, 65, 0.32) 0 1px, transparent 1px 24px);
  -webkit-mask-image: linear-gradient(125deg, #000 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
          mask-image: linear-gradient(125deg, #000 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
  animation: motif-grid 32s linear infinite;
}

.project__visual--tide .project__visual-inner::after {
  background:
    repeating-radial-gradient(circle at 70% 30%,
      rgba(214, 251, 65, 0.4) 0 2px,
      transparent 2px 28px);
  animation: motif-scale 24s ease-out infinite;
}

.project__visual--moss .project__visual-inner::after {
  background:
    repeating-linear-gradient(180deg,
      rgba(214, 251, 65, 0.34) 0 2px,
      transparent 2px 20px);
  animation: motif-drift 28s linear infinite;
}

@keyframes motif-rays { to { transform: rotate(360deg); } }
@keyframes motif-grid { to { transform: translate(24px, 24px); } }
@keyframes motif-scale {
  0% { transform: scale(0.9); opacity: 0.5; }
  60% { opacity: 0.85; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes motif-drift { to { transform: translateY(20px); } }

.project__num {
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(240, 237, 230, 0.75);
}

.project__info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title year" "tags year";
  margin-top: 1.1rem;
  gap: 0.15rem 1rem;
}

.project__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 700;
}

.project__tags {
  grid-area: tags;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

.project__year {
  grid-area: year;
  align-self: start;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Engine — "Watch the engine" pipeline + streaming/diff + live demo
   Pure CSS/JS, no API. Everything below is readable without JS; the .js-gated
   bits (streaming caret, pipeline reveal stagger, the live interactive demo)
   are progressive enhancements. The static fallback (.engine-demo__static) is
   visible by default and hidden only when .js is present.
-------------------------------------------------------------------------- */

.engine__lead {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.engine__lead strong {
  color: var(--ink);
}

/* Pipeline spine ----------------------------------------------------------- */
.pipeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}

/* connector rail between stages (decorative, horizontal on wide screens) */
.stage__rail {
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(1rem, 2.5vw, 1.8rem) - 1px);
  width: clamp(1rem, 2.5vw, 1.8rem);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.stage:last-child .stage__rail { display: none; }

.stage__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.stage__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.stage__role {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.stage__desc {
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* Human-checkpoint badge — the heart of item 1 */
.stage__check {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.32rem 0.7rem;
  border-radius: 99px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.stage__check--human {
  color: var(--bg);
  background: var(--accent);
}

.stage__check--ai {
  color: var(--ink);
  border: 1px solid var(--line);
}

.stage__check-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.stage__check--human .stage__check-dot {
  box-shadow: 0 0 0 0 rgba(11, 11, 13, 0.4);
  animation: provenancePulse 2.6s ease-out infinite;
}

/* Signature pinned act — "the engine runs" ---------------------------------
   .engine-scene wraps the pipeline. When JS pins it (.is-pinned), a lime scan
   line is scrubbed across the stages (width = --engine 0..1) and each stage
   lights as the engine reaches it (.is-lit). Without .is-pinned the scene is an
   ordinary, fully-visible block, so no-JS / mobile / reduced-motion are intact. */
.engine-scene {
  position: relative;
}

.engine-scene__progress {
  display: none;
}

.engine-scene.is-pinned .engine-scene__progress {
  display: block;
  position: absolute;
  top: -1.1rem;
  left: 0;
  height: 2px;
  width: calc(var(--engine, 0) * 100%);
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 12px rgba(214, 251, 65, 0.6);
  pointer-events: none;
}

/* a leading "engine head" dot riding the end of the scan line */
.engine-scene.is-pinned .engine-scene__progress::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px -4px 0 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(214, 251, 65, 0.75);
}

/* stages start dimmed while pinned, then light as the engine reaches them */
.engine-scene.is-pinned .stage {
  opacity: 0.4;
  border-color: var(--line);
  transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.engine-scene.is-pinned .stage.is-lit {
  opacity: 1;
  border-color: rgba(214, 251, 65, 0.5);
  box-shadow: 0 0 0 1px rgba(214, 251, 65, 0.18), 0 14px 40px rgba(0, 0, 0, 0.35);
}

.engine-scene.is-pinned .stage__rail {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.engine-scene.is-pinned .stage.is-lit .stage__rail {
  opacity: 1;
}

/* Streaming / human-diff signature beat ----------------------------------- */
.stream {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: clamp(3rem, 8vh, 5rem);
}

.stream__panel {
  position: relative;
}

.stream__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.7rem;
}

.stream__tag--human {
  color: var(--bg);
  background: var(--accent);
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
}

.stream__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1.3;
}

.stream__panel--ai .stream__line {
  color: var(--ink-dim);
}

/* blinking caret shown only while streaming (JS toggles .is-typing) */
.stream__caret {
  display: none;
}
.js .stream.is-typing .stream__caret {
  display: inline-block;
  width: 0.6ch;
  height: 1.1em;
  margin-left: 0.1em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: streamCaret 0.9s steps(1) infinite;
}
@keyframes streamCaret {
  50% { opacity: 0; }
}

.stream__arrow {
  margin: 1.2rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* diff: struck removals + accent additions. Readable without JS. */
.stream__diff del {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(143, 141, 134, 0.7);
}
.stream__diff ins {
  color: var(--accent);
  text-decoration: none;
}
.stream__diff del + ins { margin-left: 0.4ch; }

/* JS animates the human line in; without JS it is simply visible */
.js .stream__diff ins {
  display: inline-block;
}
.js .stream.is-typing .stream__diff,
.js .stream:not(.is-revealed) .stream__diff ins {
  opacity: 0;
}
.js .stream.is-revealed .stream__diff ins {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.stream__foot {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

/* Live engine demo --------------------------------------------------------- */
.engine-demo {
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(214, 251, 65, 0.07) 0%, transparent 55%),
    var(--bg-soft);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}

.engine-demo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem 1.2rem;
  margin-bottom: 1.6rem;
}

.engine-demo__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

.engine-demo__badge {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px dashed var(--line);
  padding: 0.3rem 0.7rem;
  border-radius: 99px;
}

/* Static fallback shown by default; interactive demo hidden until .js */
.engine-demo__live { display: none; }
.js .engine-demo__live { display: block; }
.js .engine-demo__static { display: none; }

.engine-demo__static p { margin-bottom: 0.7rem; line-height: 1.5; }
.engine-demo__static-intro { color: var(--ink-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.engine-demo__static-final { color: var(--ink); }
.engine-demo__static-final strong { color: var(--accent); }
.engine-demo__static-note { color: var(--ink-dim); font-size: 0.82rem; }

.engine-demo__step { margin-bottom: 1.6rem; }
.engine-demo__step[hidden] { display: none; }

.engine-demo__step-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}
.engine-demo__step-label em { text-transform: none; letter-spacing: 0; opacity: 0.75; }

.engine-demo__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
}

.engine-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.chip {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.chip:hover,
.chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.engine-demo__brief {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.engine-demo__brief:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.engine-demo__generate,
.engine-demo__approve,
.engine-demo__restart {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 99px;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--accent);
  transition: background 0.2s ease, color 0.2s ease;
}

.engine-demo__generate,
.engine-demo__approve {
  background: var(--accent);
  color: var(--bg);
}
.engine-demo__generate:hover,
.engine-demo__approve:hover { background: transparent; color: var(--accent); }

.engine-demo__restart {
  background: transparent;
  color: var(--accent);
}
.engine-demo__restart:hover { background: var(--accent); color: var(--bg); }

/* generated variants list */
.engine-demo__variants {
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.variant-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 1.2rem 1.3rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.variant-card:hover { border-color: var(--accent); }
.variant-card.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.variant-card__tag {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.5rem;
}
.variant-card.is-selected .variant-card__tag { color: var(--accent); }

.variant-card__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.3;
}

.engine-demo__gate-hint,
.engine-demo__gate-note {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-top: 0.9rem;
}
.engine-demo__gate-note a,
.engine-demo__result-note a { color: var(--accent); }

/* chosen variant preview before the gate */
.engine-demo__chosen {
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.3;
  color: var(--ink-dim);
}

.engine-demo__gate-copy {
  color: var(--ink-dim);
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 40rem;
}

.engine-demo__gate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.engine-demo__email {
  flex: 1 1 16rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.85rem 1.2rem;
}
.engine-demo__email:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.engine-demo__gate.is-invalid .engine-demo__email { border-color: #e4572e; }

/* unlocked final */
.engine-demo__step-label--done { color: var(--accent); }
.engine-demo__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

.engine-demo__result {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(214, 251, 65, 0.1) 0%, transparent 60%),
    var(--bg);
  padding: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink);
}

.engine-demo__result-note {
  margin: 1.2rem 0;
  font-size: 0.9rem;
  color: var(--ink-dim);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   About
-------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.about__statement {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 500;
  line-height: 1.35;
}

.about__statement .line {
  display: block;
  overflow: hidden;
}

.about__aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about__portrait {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(100% 80% at 70% 20%, rgba(214, 251, 65, 0.25) 0%, transparent 55%),
    var(--bg-soft);
  border: 1px solid var(--line);
}

.about__portrait-initials {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  color: var(--accent);
}

.about__facts {
  list-style: none;
  font-size: 0.95rem;
}

.about__facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.about__facts span {
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   Services
-------------------------------------------------------------------------- */

.services__list {
  list-style: none;
}

.service {
  display: grid;
  grid-template-columns: 4rem 1fr 1.2fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s ease;
}

.service:hover {
  padding-left: 1.2rem;
}

.service__num {
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.service__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  transition: color 0.3s ease;
}

.service:hover .service__name {
  color: var(--accent);
}

.service__desc {
  color: var(--ink-dim);
  font-size: 0.95rem;
  max-width: 32rem;
}

/* --------------------------------------------------------------------------
   Proof / reviews
-------------------------------------------------------------------------- */

.proof__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5rem);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.proof__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.proof__stats strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1;
  color: var(--accent);
}

.proof__stats span {
  color: var(--ink-dim);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
}

.quote p {
  font-size: 1.05rem;
  line-height: 1.55;
}

.quote footer {
  margin-top: auto;
  color: var(--ink-dim);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Compare — brand-first vs human-first before/after slider (signature move)
   No-JS: .compare__after is a static second card stacked under the first
   (clip-path only applies once .js drives the --pos custom property), the
   handle/range are hidden, so both states read fully. With JS the after panel
   is clipped to a vertical reveal driven by --pos.
-------------------------------------------------------------------------- */

.compare__lead {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.compare__stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft);
  /* --pos = reveal position (0..100). JS updates it; CSS defaults to 50. */
  --pos: 50%;
}

.compare__panel {
  /* No-JS / stacked default: panels flow one under the other and both show. */
  position: relative;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  min-height: clamp(15rem, 32vh, 20rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.compare__panel--before {
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(143, 141, 134, 0.14) 0%, transparent 55%),
    var(--bg-soft);
}

.compare__panel--after {
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(214, 251, 65, 0.12) 0%, transparent 55%),
    #101212;
  border-top: 1px solid var(--line);
}

/* With JS, the two panels overlap and the after panel is clipped horizontally. */
.js .compare__panel--after {
  position: absolute;
  inset: 0;
  border-top: 0;
  clip-path: inset(0 0 0 var(--pos));
  will-change: clip-path;
}

.compare__tag {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  border: 1px solid var(--line);
}

.compare__tag--before {
  color: var(--ink-dim);
}

.compare__tag--after {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.compare__card {
  margin-top: 0.6rem;
  max-width: 34rem;
}

.compare__kicker {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.7rem;
}

.compare__panel--after .compare__kicker {
  color: var(--accent);
}

.compare__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.compare__body {
  margin-top: 0.9rem;
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.55;
}

.compare__panel--after .compare__body {
  color: var(--ink);
}

/* Draggable handle — only meaningful with JS */
.compare__handle {
  display: none;
}

.js .compare__handle {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  z-index: 3;
  pointer-events: none;
}

.compare__handle-line {
  position: absolute;
  inset: 0;
}

.compare__handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--bg);
  font-size: 1rem;
  box-shadow: 0 0 0 6px rgba(214, 251, 65, 0.16);
}

/* The range is the real keyboard/touch control: invisible but on top. */
.compare__range {
  display: none;
}

.js .compare__range {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.6rem;
  height: 100%;
}

.compare__range::-moz-range-thumb {
  width: 2.6rem;
  height: 100%;
  border: 0;
  background: transparent;
}

/* Keyboard focus moves the visible grip ring, not an outline on the bar */
.js .compare__range:focus-visible + .compare__notes ~ .compare__handle .compare__handle-grip,
.js .compare__range:focus-visible ~ .compare__handle .compare__handle-grip {
  box-shadow: 0 0 0 6px rgba(214, 251, 65, 0.16), 0 0 0 9px var(--ink);
}

/* Annotations — hidden without JS (decorative, the cards already say it) */
.compare__notes {
  display: none;
}

.js .compare__notes {
  display: block;
  list-style: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.compare__note {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  padding-left: 0.9rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.compare__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.compare__note span {
  display: block;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
}

.compare__note--1 { right: 6%; top: 14%; }
.compare__note--2 { right: 9%; top: 46%; }
.compare__note--3 { right: 5%; bottom: 16%; }

/* Reveal the notes once the after-side is substantially shown */
.js .compare__stage[data-revealed] .compare__note {
  opacity: 1;
}

.compare__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.compare__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.compare__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
}

.compare__swatch--ai {
  background: var(--ink-dim);
}

.compare__swatch--human {
  background: var(--accent);
}

.compare__foot em {
  color: var(--ink-dim);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Receipts — before→after proof panel (replaces the round-number stat bar)
-------------------------------------------------------------------------- */

.receipts {
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.receipts__intro {
  max-width: 46rem;
  margin-bottom: clamp(1.8rem, 4vh, 2.6rem);
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
}

.receipts__intro strong {
  color: var(--ink);
}

.receipts__intro em {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.receipts__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.receipt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}

.receipt__case {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.receipt__case em {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.receipt__row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.receipt__before,
.receipt__after {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.2;
}

.receipt__before {
  color: var(--ink-dim);
}

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

.receipt__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.receipt__arrow {
  flex-shrink: 0;
  color: var(--ink-dim);
  font-size: 1.1rem;
}

.receipt__how {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.45;
}

.receipt__ai,
.receipt__human {
  font-weight: 600;
}

.receipt__ai {
  color: var(--ink);
}

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

/* --------------------------------------------------------------------------
   Provenance — honest "engine wrote this, human approved" strip
-------------------------------------------------------------------------- */

.provenance {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(2.5rem, 7vh, 5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.provenance__dot {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(214, 251, 65, 0.5);
  animation: provenancePulse 2.6s ease-out infinite;
}

@keyframes provenancePulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 251, 65, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(214, 251, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 251, 65, 0); }
}

/* --------------------------------------------------------------------------
   Knowledge / Kennis
-------------------------------------------------------------------------- */

.knowledge__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}

.article:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.article__cat {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.article__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
}

.article__link {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--ink-dim);
  transition: color 0.3s ease;
}

.article:hover .article__link {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Push — urgency CTA
-------------------------------------------------------------------------- */

.push {
  text-align: center;
}

.push__eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.5rem;
}

.push__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.push__sub {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.push__btn {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.9rem 2rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.3s ease, background 0.3s ease;
}

.push__btn:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Contact / footer
-------------------------------------------------------------------------- */

.contact {
  padding-bottom: 1.5rem;
}

.contact__eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.5rem;
}

.contact__cta {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-cta);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.contact__cta-line {
  display: block;
  overflow: hidden;
  /* split chars are inline-blocks, so the browser would break mid-word */
  white-space: nowrap;
}

.contact__cta-line--accent {
  color: var(--accent);
  margin-left: clamp(1.5rem, 8vw, 8rem);
}

.contact__cta:hover .contact__cta-line--accent {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.contact__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.contact__socials {
  display: flex;
  gap: 1.5rem;
}

.contact__socials a:hover {
  color: var(--ink);
}

.contact__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.contact__legal nav {
  display: flex;
  gap: 1.5rem;
}

.contact__legal a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Booking — named human + reassurance at the intake point
-------------------------------------------------------------------------- */

.booking {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(2.4rem, 6vh, 4rem);
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}

.booking__person {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.booking__portrait {
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--bg);
  background:
    radial-gradient(120% 120% at 30% 20%, var(--accent) 0%, #9bd024 70%);
}

.booking__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.booking__role {
  color: var(--ink-dim);
  font-size: 0.85rem;
}

.booking__reassure {
  flex: 1 1 16rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
  max-width: 30rem;
}

/* --------------------------------------------------------------------------
   Success — post-conversion confirmation (revealed by form JS in Phase 1)
-------------------------------------------------------------------------- */

.success {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background:
    radial-gradient(120% 100% at 90% 0%, rgba(214, 251, 65, 0.12) 0%, transparent 60%),
    var(--bg-soft);
}

/* [hidden] keeps it out of the flow until the form reveals it; no ungated
   opacity:0 means content is never invisibly covered. */
.success[hidden] {
  display: none;
}

.success.is-visible {
  display: block;
}

.success__badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.2rem;
}

.success__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  margin-bottom: 1.4rem;
}

.success__list {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
}

.success__list li {
  padding-left: 1.2rem;
  position: relative;
  color: var(--ink-dim);
  font-size: 0.98rem;
}

.success__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.success__list strong {
  color: var(--ink);
  font-weight: 500;
}

.success__note {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   Micro-proof — small indicatief stat next to the claim it backs
-------------------------------------------------------------------------- */

/* program-card stat: spans both info columns, sits under title/tags */
.project__proof {
  grid-column: 1 / -1;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.project__proof strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}

.project__proof em {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* reviews stat block: honesty label under the round numbers */
.proof__label {
  margin-top: -1.5rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   Intake form — the single PRIMARY action
-------------------------------------------------------------------------- */

.intake {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  max-width: 52rem;
}

.intake__lead {
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 36rem;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}

.intake__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem clamp(1.2rem, 3vw, 2rem);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.intake input,
.intake textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.intake textarea {
  resize: vertical;
  min-height: 6rem;
}

.intake input::placeholder,
.intake textarea::placeholder {
  color: rgba(143, 141, 134, 0.6);
}

.intake input:focus,
.intake textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 251, 65, 0.18);
}

/* invalid field highlight (toggled by the form JS) */
.intake .field.is-invalid input,
.intake .field.is-invalid textarea {
  border-color: #ff6b5e;
}

.field__error {
  margin-top: 1rem;
  color: #ff8a7e;
  font-size: 0.9rem;
}

.field__error[hidden] {
  display: none;
}

.intake__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
  margin-top: 1.8rem;
}

.intake__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 2.2rem;
  border: none;
  border-radius: 99px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

.intake__submit:hover {
  transform: translateY(-2px);
}

.intake__submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* micro-proof right next to the submit button */
.intake__proof {
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.intake__proof strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}

.intake__proof em {
  font-style: normal;
  font-size: 0.78rem;
  opacity: 0.7;
}

/* form is hidden once the success state takes over */
.intake.is-done {
  display: none;
}

/* --------------------------------------------------------------------------
   Toolkit lead magnet — the SECONDARY action (deliberately quieter)
-------------------------------------------------------------------------- */

.toolkit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem 2.4rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  /* no accent fill — dashed outline reads as the lighter-weight option */
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.toolkit__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.6rem;
}

.toolkit__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin-bottom: 0.5rem;
}

.toolkit__desc {
  color: var(--ink-dim);
  font-size: 0.92rem;
  max-width: 32rem;
}

.toolkit__form {
  flex: 1 1 18rem;
  max-width: 26rem;
}

.toolkit__row {
  display: flex;
  gap: 0.6rem;
}

.toolkit__form input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.75rem 1.1rem;
  transition: border-color 0.25s ease;
}

.toolkit__form input:focus {
  outline: none;
  border-color: var(--ink-dim);
}

.toolkit__form.is-invalid input {
  border-color: #ff6b5e;
}

.toolkit__submit {
  flex-shrink: 0;
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--ink-dim);
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

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

.toolkit__submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toolkit__note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

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

.toolkit__link:hover {
  text-decoration: underline;
}

/* confirmed state after submit: swaps the row for a reassurance line */
.toolkit__done {
  display: none;
  font-size: 0.92rem;
  color: var(--ink);
}

.toolkit__done strong {
  color: var(--accent);
}

.toolkit__form.is-sent .toolkit__row,
.toolkit__form.is-sent .toolkit__note {
  display: none;
}

.toolkit__form.is-sent .toolkit__done {
  display: block;
}

/* visually-hidden but available to screen readers / no-JS */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Sticky mobile intake bar — small screens only (shown in the 640px query)
-------------------------------------------------------------------------- */

.intake-bar {
  display: none;
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  /* sits above the variant-switch pill, never covering it */
  bottom: 4.4rem;
  z-index: 65;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.2rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.intake-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg);
  animation: pulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Legal pages (algemene-voorwaarden / privacybeleid) — Noir shell
-------------------------------------------------------------------------- */

.legal {
  padding-top: clamp(7rem, 16vh, 11rem);
}

.legal__head {
  max-width: 52rem;
}

.legal__concept {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.6rem;
}

.legal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h2);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.legal__intro {
  margin-top: 1.6rem;
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 44rem;
}

.legal__body {
  display: grid;
  gap: clamp(1.5rem, 4vh, 2.6rem);
  max-width: 52rem;
  padding-top: clamp(2.5rem, 6vh, 4rem) !important;
}

.legal__clause {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

.legal__clause h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  margin-bottom: 0.7rem;
}

.legal__clause p {
  color: var(--ink-dim);
  font-size: 0.98rem;
  max-width: 44rem;
}

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

.legal__link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Animation helpers (JS toggles these)
-------------------------------------------------------------------------- */

[data-split] .char {
  display: inline-block;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.js [data-split] .char {
  transform: translateY(110%);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-split] .char {
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee__track,
  .hero__scroll-line::after,
  .header__cta-dot,
  .intake-bar__dot,
  .provenance__dot,
  .stage__check--human .stage__check-dot,
  .project__visual-inner::after {
    animation: none;
  }
  /* Kinetic typography rests at a deliberate static weight (a designed
     composition, not animation removed); the rail fill never transitions. */
  .js .hero__title,
  .js .section-head__title,
  .js .contact__cta {
    font-variation-settings: "wght" 760;
    transition: none;
  }
  .js .hero__title:hover {
    font-variation-settings: "wght" 760;
  }
  .scroll-rail__fill { will-change: auto; }
  .skip-link,
  .intake input,
  .intake textarea,
  .intake__submit,
  .toolkit__form input,
  .toolkit__submit,
  .hero__poster,
  .compare__note,
  .compare__panel--after,
  .chip,
  .variant-card,
  .engine-demo__generate,
  .engine-demo__approve,
  .engine-demo__restart {
    transition: none;
  }
  /* Slider still drags, just without the smooth clip transition. The notes
     remain visible (they're a designed alternate, not motion). */
  .js .compare__stage[data-revealed] .compare__note {
    opacity: 1;
  }
  /* Streaming caret never blinks; the human diff is shown immediately as a
     static drafted-vs-final pair (no typewriter, no fade). */
  .js .stream.is-typing .stream__caret { display: none; }
  .js .stream .stream__diff ins,
  .js .stream.is-revealed .stream__diff ins { opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .work__list {
    grid-template-columns: 1fr;
  }

  .proof__grid {
    grid-template-columns: 1fr;
  }

  .knowledge__grid {
    grid-template-columns: 1fr;
  }

  .receipts__list {
    grid-template-columns: 1fr;
  }

  /* Pipeline: 2-up on tablet, rail becomes vertical between rows */
  .pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .stage__rail { display: none; }

  .project:nth-child(even) {
    transform: none;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .service {
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
  }

  .service__desc {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .header__nav {
    display: none; /* keep mobile chrome minimal: logo + availability pill */
  }

  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__scroll {
    display: none;
  }

  .contact__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .contact__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .pipeline {
    grid-template-columns: 1fr;
  }

  /* sticky intake bar appears only on small screens */
  .intake-bar {
    display: flex;
  }

  /* clear the sticky bar + switch pill at the end of the page */
  .contact {
    padding-bottom: 8.5rem;
  }

  .booking {
    flex-direction: column;
    align-items: flex-start;
  }

  .intake__grid {
    grid-template-columns: 1fr;
  }

  .toolkit {
    flex-direction: column;
    align-items: flex-start;
  }

  .toolkit__form {
    width: 100%;
    flex-basis: auto;
  }

  .toolkit__row {
    flex-direction: column;
  }

  .toolkit__submit {
    width: 100%;
  }
}