/* =====================================================================
   DISPOSITION — Kinetic studio site
   Design tokens + components. Built for Webflow-embeddable, no build step.
   Author: Disposition (Andy Hobson) · Reference bar: locomotive.agency
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root {
  /* Ink + paper (warm off-white). Accents do all the colour work.
     Values locked by Addendum A. --bone kept as an alias of --paper. */
  --ink:        #0C0C0E;
  --ink-2:      #16161A;   /* raised dark surface */
  --ink-3:      #202026;   /* hairlines on dark */
  --paper:      #F4F1EA;   /* warm off-white */
  --bone:       #F4F1EA;   /* alias of --paper (legacy references) */
  --bone-2:     #E7E1D4;
  --bone-dim:   rgba(243,239,231,.62);
  --ink-dim:    rgba(10,10,11,.60);

  /* The three sacred accents */
  --coral:  #FF5C8A;
  --teal:   #00D4C8;
  --yellow: #FFD447;

  /* Service accent assignment (Addendum C re-map: Brand=teal, Sales Tools=coral) */
  --svc-brand: var(--teal);
  --svc-tools: var(--coral);
  --svc-web:   var(--yellow);
  --svc-cmo:   var(--bone);

  /* Type */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid type scale (clamp: min, vw, max) */
  --fs-mega:   clamp(3.4rem, 13vw, 13rem);   /* hero focal word */
  --fs-h1:     clamp(2.6rem, 7vw, 6.5rem);
  --fs-h2:     clamp(2rem, 5vw, 4.25rem);
  --fs-h3:     clamp(1.4rem, 2.6vw, 2.25rem);
  --fs-lead:   clamp(1.15rem, 1.7vw, 1.6rem);
  --fs-body:   clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:  0.8125rem;
  --fs-num:    clamp(4rem, 16vw, 16rem);     /* oversized section numbers */

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 12vh, 11rem);
  --maxw: 1480px;

  /* Surface radius (house band; were referenced but undefined -> rendered square) */
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --z-cursor: 9999;
  --z-loader: 9000;
  --z-nav: 800;
}

/* ---------- 2. RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--bone);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--coral); color: var(--ink); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 3. GRAIN OVERLAY (procedural, weightless) --------------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 1;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  will-change: transform;
}

/* ---------- 4. TYPOGRAPHY HELPERS ----------------------------------- */
.display { font-family: var(--font-display); font-weight: 900; line-height: .92; letter-spacing: -.02em; }
.eyebrow {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-small); letter-spacing: .22em; text-transform: uppercase;
  color: var(--bone-dim);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5;
}
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--bone); max-width: 42ch; }
.muted { color: var(--bone-dim); }

/* Per-line mask reveal target.
   Padding enlarges the overflow-clip box so ascenders (i tittles) and
   descenders (g, p, y) aren't cropped; the equal negative margin keeps the
   line spacing unchanged. em is relative to the line's own font-size. */
.reveal-line { display: block; overflow: hidden; padding: .16em 0 .22em; margin: -.16em 0 -.22em; }
.reveal-line > span { display: block; will-change: transform; }
.hero__headline .lfocal { font-size: var(--fs-mega); line-height: .86; }

/* ---------- 5. LAYOUT ----------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section-head { max-width: 56rem; margin-bottom: clamp(2.5rem, 6vh, 5rem); }
.section-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-small); letter-spacing: .1em; color: var(--bone-dim);
}

/* ---------- 6. LOADER ----------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--ink);
  display: grid; place-items: center;
}
.loader__frame {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.2rem, 3vh, 2rem);
}
.loader .dm-mark { width: clamp(140px, 30vw, 280px); height: clamp(140px, 30vw, 280px); }
.loader__word {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(.95rem, 2.4vw, 1.4rem); letter-spacing: -.02em; color: var(--paper);
  opacity: 0;
}
.loader__count {
  position: fixed; bottom: var(--gutter); right: var(--gutter);
  font-family: var(--font-display); font-weight:900; font-size: var(--fs-small);
  color: var(--bone-dim); letter-spacing:.08em;
}

/* ---------- 7. NAV -------------------------------------------------- */
/* Themed (not mix-blend) so the accent i's and mark dots keep true colour.
   .is-light is toggled by JS when the nav overlaps a light section. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.2vh,1.6rem) var(--gutter);
  color: var(--paper);
  transition: color .5s var(--ease-out-expo);
}
.nav.is-light { color: var(--ink); }
.nav__logo { display:inline-flex; align-items:center; gap:.7em; color: inherit; }
/* clip the mark to its own box so the morphing brackets never collide with the wordmark (open + mobile) */
.nav__mark { width: 26px; height: 26px; flex: 0 0 auto; overflow: hidden; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); align-items: center; }
.nav__links a { font-size: var(--fs-small); letter-spacing: .04em; color: inherit; position: relative; }
.nav__link span { display:inline-block; }
.nav__link::after {
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out-expo);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  display:inline-flex; align-items:center; gap:.6em;
  padding:.7em 1.25em; border:1px solid currentColor; border-radius:100px;
  font-size: var(--fs-small); font-weight:600; color: inherit; opacity:.9;
}
.nav__cta:hover { opacity:1; }

/* Services dropdown */
.nav__dropdown { position: relative; }
.nav__dropbtn { display:inline-flex; align-items:center; gap:.35em; cursor:pointer; }
.nav__caret { font-size:.7em; transition: transform .3s var(--ease-out-expo); }
.nav__menu {
  position:absolute; top:calc(100% + .8rem); left:50%;
  transform: translateX(-50%) translateY(6px);
  display:flex; flex-direction:column; min-width:190px; padding:.5rem;
  background:#111114; color:#f2f2f2;
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .28s var(--ease-out-expo), transform .28s var(--ease-out-expo), visibility .28s;
  z-index:60;
}
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu { opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.nav__dropdown:hover .nav__caret,
.nav__dropdown:focus-within .nav__caret { transform: rotate(180deg); }
.nav__menu-link { padding:.6em .8em; border-radius:9px; color:#f2f2f2; opacity:.85; white-space:nowrap; transition: background .2s ease, opacity .2s ease; }
.nav__menu-link:hover, .nav__menu-link:focus { background: rgba(255,255,255,.08); opacity:1; }
.nav__menu-link::after { display:none; }

.nav__burger { display:none; }

/* ---------- 7b. WORDMARK (coloured i's) ---------------------------- */
.wordmark {
  font-family: 'Unbounded', sans-serif; font-weight: 900;
  letter-spacing: -.04em; line-height: 1; font-style: normal;
  color: var(--paper);          /* base letters; switch to --ink on light */
}
.wordmark i { font-style: normal; display: inline-block; }
.wordmark .i1 { color: var(--coral); }
.wordmark .i2 { color: var(--teal); }
.wordmark .i3 { color: var(--yellow); }
.nav__logo .wordmark { color: inherit; font-size: 1.05rem; }
/* idle bob — staggered, very subtle. Opt-in via .wordmark--bob, desktop + motion-ok only */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .wordmark--bob .i1, .wordmark--bob .i2, .wordmark--bob .i3 { animation: dm-bob 3.2s ease-in-out infinite; }
    .wordmark--bob .i1 { animation-delay: 0s; }
    .wordmark--bob .i2 { animation-delay: .25s; }
    .wordmark--bob .i3 { animation-delay: .5s; }
  }
}
@keyframes dm-bob { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-.07em); } }

/* ---------- 7c. MORPHING MARK ------------------------------------- */
.dm-mark { display: block; color: var(--paper); overflow: visible; }
.dm-mark .dm-br { stroke: currentColor; }
.dm-mark .dm-l  { stroke: currentColor; }
.dm-mark .dm-dot { transform-box: fill-box; transform-origin: center; }
.dm-br, .dm-l, .dm-dot { will-change: transform; }
html.reduced .dm-mark .dm-l { display: none; } /* no positional lines in reduced mode */

/* ---------- 8. MAGNETIC BUTTON ------------------------------------- */
.btn {
  --bg: var(--bone); --fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.9em; border-radius: 100px;
  font-weight: 600; font-size: var(--fs-body);
  background: var(--bg); color: var(--fg);
  overflow: hidden; isolation: isolate;
  will-change: transform;
}
.btn__label { position: relative; z-index: 1; display:inline-block; }
.btn::before {
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background: var(--coral); transform: translateY(101%); transition: transform .5s var(--ease-out-expo);
}
.btn:hover::before { transform: translateY(0); }
.btn .arrow { transition: transform .45s var(--ease-out-expo); position:relative; z-index:1; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--bone); border:1px solid var(--ink-3); }
.btn--ghost::before { background: var(--bone); }
.btn--ghost:hover { color: var(--ink); }

/* ---------- 9. CUSTOM CURSOR --------------------------------------- */
.cursor {
  position: fixed; top:0; left:0; z-index: var(--z-cursor);
  width: 34px; height: 34px; border:1px solid var(--bone);
  border-radius:50%; pointer-events:none;
  transform: translate(-50%,-50%); mix-blend-mode: difference;
  transition: width .3s var(--ease-out-expo), height .3s var(--ease-out-expo),
              background-color .3s, border-color .3s, opacity .3s;
}
.cursor__dot {
  position: fixed; top:0; left:0; z-index: var(--z-cursor);
  width: 5px; height: 5px; background: var(--bone); border-radius:50%;
  pointer-events:none; transform: translate(-50%,-50%); mix-blend-mode: difference;
}
.cursor.is-hover { width: 64px; height: 64px; background: var(--bone); border-color: transparent; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor__dot { display:none; } }

/* ---------- 10. HERO ----------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.hero__canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.hero__fallback {
  position:absolute; inset:0; z-index:0; display:none;
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(255,92,138,.22), transparent 50%),
    radial-gradient(120% 90% at 85% 30%, rgba(0,212,200,.18), transparent 55%),
    radial-gradient(140% 120% at 50% 110%, rgba(255,212,71,.16), transparent 55%),
    var(--ink);
}
.hero__inner {
  position: relative; z-index: 2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline: var(--gutter); max-width: var(--maxw); margin-inline:auto;
}
.hero__eyebrow { margin-bottom: clamp(1rem,3vh,2rem); }
.hero__headline {
  font-family: var(--font-display); font-weight:900; line-height:.86;
  letter-spacing:-.03em; text-transform: lowercase;
}
.hero__headline .l1 { font-size: var(--fs-h1); color: var(--bone); }
.hero__headline .focal {
  display:block; font-size: var(--fs-mega); color: var(--bone);
  margin: .02em 0; will-change: transform;
}
.hero__headline .l3 { font-size: var(--fs-h1); color: var(--bone); }
.hero__sub {
  margin-top: clamp(1.4rem,3.4vh,2.4rem); max-width: 24ch;
  text-wrap: balance; text-shadow: 0 1px 26px rgba(0,0,0,.55);
}
.hero__problem {
  display: block; font-size: var(--fs-lead); line-height: 1.28; font-weight: 500;
  color: var(--paper); letter-spacing: -.01em;
}
.hero__turn {
  display: inline-block; margin-top: .65em; position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem); letter-spacing: -.01em; color: var(--coral);
}
.hero__turn::after {
  content: ""; position: absolute; left: 0; bottom: -.14em; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out-expo);
}
.hero__turn.in::after { transform: scaleX(1); }
.hero__scrollcue {
  position:absolute; left:50%; bottom: clamp(1.2rem,4vh,2.4rem); translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7em;
  font-size: var(--fs-small); letter-spacing:.2em; text-transform:uppercase; color: var(--bone-dim);
}
.hero__scrollcue .track { width:1px; height:46px; background: var(--ink-3); position:relative; overflow:hidden; }
.hero__scrollcue .track::after {
  content:""; position:absolute; top:0; left:0; width:100%; height:40%;
  background: var(--bone); animation: cueRun 2.1s var(--ease-in-out) infinite;
}
@keyframes cueRun { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(260%)} }

/* ---------- 10b. X-RAY HERO (rock → metropolis within) ----------- */
.xray { cursor: none; background: var(--ink); }
.xray__layer { position:absolute; inset:0; z-index:0; overflow:hidden; will-change: transform; }
.xray__city {
  position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; z-index:0;
  will-change: transform, filter; animation: xrayBreath 9s ease-in-out infinite;
}
.xray__rock {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  will-change: mask-position;
  --lens: 165px;
  -webkit-mask-image: radial-gradient(circle var(--lens) at var(--mx,55%) var(--my,45%), transparent 0, transparent calc(var(--lens) - 50px), #000 var(--lens));
          mask-image: radial-gradient(circle var(--lens) at var(--mx,55%) var(--my,45%), transparent 0, transparent calc(var(--lens) - 50px), #000 var(--lens));
}
/* flying-traffic streaks (live inside the city layer, only seen through the lens) */
.xray__streak { position:absolute; height:2px; width:42%; z-index:0; mix-blend-mode:screen; filter:blur(1px); opacity:0;
  background:linear-gradient(90deg, transparent, var(--c), transparent); }
.xray__streak.s1 { top:34%; --c:var(--teal);   animation: streak 5.5s linear infinite; }
.xray__streak.s2 { top:58%; --c:var(--coral);  animation: streak 7s linear infinite 1.6s; }
.xray__streak.s3 { top:72%; --c:var(--yellow); animation: streak 6.2s linear infinite 3.1s; }
@keyframes streak { 0%{ transform:translateX(-60%); opacity:0;} 12%{opacity:.9;} 88%{opacity:.9;} 100%{ transform:translateX(220%); opacity:0;} }
@keyframes xrayBreath { 0%,100%{ transform:scale(1.0) translate(0,0); filter:brightness(.98) saturate(1.05);} 50%{ transform:scale(1.04); filter:brightness(1.14) saturate(1.2);} }

/* legibility scrim for the headline (above images, below text + lens) */
.xray__scrim { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(95deg, rgba(12,12,14,.94) 0%, rgba(12,12,14,.66) 28%, rgba(12,12,14,.12) 52%, rgba(12,12,14,.30) 100%),
    linear-gradient(0deg, rgba(12,12,14,.85) 0%, rgba(12,12,14,0) 42%);
}
/* the lens: glowing ring + viewfinder frame, follows the cursor */
.xray__lens { position:absolute; top:0; left:0; z-index:3; width:1px; height:1px; pointer-events:none;
  transform: translate(var(--lx,55vw), var(--ly,45vh)); }
.xray__ring { position:absolute; left:0; top:0; width:330px; height:330px; transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid rgba(244,241,234,.28);
  box-shadow: 0 0 50px 8px rgba(0,212,200,.30), 0 0 80px 20px rgba(255,92,138,.12), inset 0 0 34px 4px rgba(255,92,138,.18); }
.xray__frame { position:absolute; left:0; top:0; width:370px; height:370px; transform:translate(-50%,-50%); color:var(--paper); opacity:.85; overflow:visible; }
.xray__hint { position:absolute; left:50%; bottom:16%; transform:translateX(-50%); z-index:4;
  font-size:var(--fs-small); letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  transition: opacity .6s ease; }
.xray--touched .xray__hint { opacity:0; }
body.in-hero .cursor, body.in-hero .cursor__dot { opacity:0; }
@media (max-width: 700px){ .xray__rock{ --lens:120px; } .xray__ring{ width:250px;height:250px;} .xray__frame{width:280px;height:280px;} }

/* ---------- 10c. THROUGHLINE HERO (rock → veins → connected core) - */
.tl-hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: var(--ink); }
.tl-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--ink); will-change: transform; }
.tl-hero__fallback { position: absolute; inset: 0; z-index: 0; background: url("../assets/throughline-hero.png") center / cover no-repeat; opacity: 0; }
/* JS sets .is-static when scrubbing is unavailable (reduced-motion, touch, no-GSAP) */
.tl-hero.is-static .tl-hero__video { display: none; }
.tl-hero.is-static .tl-hero__fallback { opacity: 1; }
.tl-hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,14,.32) 0%, transparent 24%, transparent 56%, rgba(12,12,14,.8) 100%),
              linear-gradient(95deg, rgba(12,12,14,.6) 0%, transparent 46%); }
/* start the viewfinder frame below the nav so the top corners never clash with the logo / CTA */
.tl-hero__frame { position: absolute; inset: clamp(1rem, 3vw, 2.2rem); top: clamp(5rem, 9vh, 6.5rem); z-index: 3; pointer-events: none; }
.tl-hero__frame .br { position: absolute; width: 34px; height: 34px; opacity: .5; }
.tl-hero__frame .br.tl { top: 0; left: 0; border-top: 2px solid var(--paper); border-left: 2px solid var(--paper); }
.tl-hero__frame .br.tr { top: 0; right: 0; border-top: 2px solid var(--paper); border-right: 2px solid var(--paper); }
.tl-hero__frame .br.bl { bottom: 0; left: 0; border-bottom: 2px solid var(--paper); border-left: 2px solid var(--paper); }
.tl-hero__frame .br.br { bottom: 0; right: 0; border-bottom: 2px solid var(--paper); border-right: 2px solid var(--paper); }
.tl-hero .hero__inner { z-index: 4; }
.tl-headline { font-size: clamp(2.1rem, 6vw, 5rem); line-height: .98; letter-spacing: -.02em; text-transform: none; max-width: 17ch; text-shadow: 0 2px 30px rgba(8,8,10,.55); }
.tl-headline .thru { color: var(--coral); }
.tl-hero .hero__sub { text-shadow: 0 2px 24px rgba(8,8,10,.6); }
/* mobile: video burst is bright behind the copy — darken the scrim and shrink the headline for legibility */
@media (max-width: 600px) {
  .tl-hero__scrim { background: linear-gradient(180deg, rgba(12,12,14,.72) 0%, rgba(12,12,14,.4) 38%, rgba(12,12,14,.55) 60%, rgba(12,12,14,.96) 100%); }
  .tl-headline { font-size: clamp(2rem, 8.5vw, 3rem); max-width: 14ch; }
  .tl-hero .hero__sub { text-shadow: 0 1px 14px rgba(8,8,10,.85); }
}
.hero__cta { display: flex; gap: 1rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); flex-wrap: wrap; }

/* ---- Kinetic 3-beat hero ---- */
/* base / fallback: beats stack as a normal readable hero (no JS, reduced-motion, touch) */
.tl-beats { display: flex; flex-direction: column; gap: clamp(0.7rem, 2.2vh, 1.4rem); }
.tl-beat { text-shadow: 0 2px 30px rgba(8,8,10,.6); margin: 0; }
.tl-beat--1 { font-family: var(--font-display); font-weight: 900; line-height: .98; letter-spacing: -.02em; font-size: clamp(2.1rem, 6vw, 5rem); max-width: 15ch; }
.tl-beat--1 .thru { color: var(--coral); }
.tl-beat__head { font-family: var(--font-display); font-weight: 900; line-height: 1; letter-spacing: -.02em; margin: 0; }
.tl-beat--2 .tl-beat__head { font-size: clamp(1.7rem, 4.6vw, 3.4rem); }
.tl-beat--2 .b2c { color: var(--teal); }
.tl-beat--3 .tl-beat__head { font-size: clamp(2rem, 5.2vw, 4rem); margin-bottom: clamp(1rem, 2.5vh, 1.6rem); }
.tl-beat__sub { margin: .55rem 0 0; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--bone); opacity: .85; max-width: 26ch; }

/* kinetic mode (JS-enhanced, scrub available): beats take smart absolute positions and are driven by the scroll timeline */
.tl-hero.is-kinetic .hero__inner { display: block; }
.tl-hero.is-kinetic .hero__eyebrow { display: none; } /* nav wordmark already brands the top; avoid the clash */
.tl-hero.is-kinetic .tl-beats { position: absolute; inset: 0; display: block; pointer-events: none; }
.tl-hero.is-kinetic .tl-beat { position: absolute; will-change: transform, opacity; }
.tl-hero.is-kinetic .tl-beat--1 { left: var(--gutter); top: 40%; max-width: 14ch; }
.tl-hero.is-kinetic .tl-beat--2 { right: var(--gutter); top: 25%; text-align: right; max-width: 20ch; }
.tl-hero.is-kinetic .tl-beat--2 .tl-beat__sub { margin-left: auto; }
.tl-hero.is-kinetic .tl-beat--3 { left: var(--gutter); bottom: 18%; }
.tl-hero.is-kinetic .tl-beat--3 .hero__cta { pointer-events: auto; }

/* reduced-motion: no video scrub, settle on the signature exploded still */
html.reduced .tl-hero__video { display: none; }
html.reduced .tl-hero__fallback { opacity: 1; }

/* ---------- 11. POSITIONING --------------------------------------- */
.positioning .big {
  font-family: var(--font-display); font-weight:900; line-height:1.02;
  letter-spacing:-.02em; font-size: var(--fs-h2); max-width: 20ch;
}
.positioning .big .hl { color: var(--coral); }
.positioning .big .hl.t { color: var(--teal); }
.positioning .big .hl.y { color: var(--yellow); }
.positioning .meta { margin-top: clamp(2rem,5vh,3.5rem); display:flex; flex-wrap:wrap; gap: clamp(2rem,6vw,5rem); }
.positioning .meta div { max-width: 26ch; }
.positioning .meta dt { font-family:var(--font-display); font-weight:900; font-size:1.05rem; margin-bottom:.4em; }

/* hire-vs-Disposition comparison table */
.positioning .cmp { margin-top: clamp(2.2rem,5vh,3.8rem); max-width: 820px; border:1px solid var(--ink-3); border-radius:16px; overflow:hidden; }
.cmp__row { display:grid; grid-template-columns: 1.2fr 1fr 1fr; align-items:center; }
.cmp__row + .cmp__row { border-top:1px solid var(--ink-3); }
.cmp__cell { padding: .85rem 1.1rem; font-size: var(--fs-small); color: var(--bone-dim); line-height:1.35; }
.cmp__what { color: var(--bone); font-weight:600; }
.cmp__head { background: var(--ink-2); }
.cmp__head .cmp__cell { font-family:var(--font-display); font-weight:900; font-size:.82rem; letter-spacing:.02em; color: var(--bone); }
.cmp__head .cmp__disp { color: var(--coral); }
.cmp__ico { display:inline-flex; width:1.25em; font-weight:900; margin-right:.45em; }
.cmp__ico.no { color:#8a5560; }
.cmp__ico.yes { color: var(--teal); }
.cmp__row:not(.cmp__head) .cmp__cell:last-child { color: var(--bone); }
@media (max-width: 600px) {
  .cmp__row { grid-template-columns: 1fr; }
  .cmp__head { display:none; }
  .cmp__cell { padding: .35rem 1rem; }
  .cmp__what { padding-top: .9rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bone-dim); }
  .cmp__row:not(.cmp__head) .cmp__cell:last-child { padding-bottom: .9rem; }
}

/* ---------- 12. HORIZONTAL SERVICES PIN ---------------------------- */
.services { background: var(--ink); position: relative; }
.services__pin { height: 100svh; overflow: hidden; position: relative; }
.services__progress {
  position:absolute; top:0; left:0; right:0; height:3px; z-index:5; background: var(--ink-3);
}
.services__progress i { display:block; height:100%; width:0%; background: var(--teal); transition: background .4s; }
.services__track { display:flex; height:100%; will-change: transform; }
.svc {
  flex: 0 0 100vw; height:100%; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 var(--gutter); border-left:1px solid var(--ink-3);
}
.svc__num {
  font-family:var(--font-display); font-weight:900; font-size: var(--fs-num);
  line-height:.8; color: transparent; -webkit-text-stroke:1.4px var(--ink-3);
  position:absolute; top: 8vh; right: var(--gutter); pointer-events:none;
}
.svc__inner { position:relative; z-index:2; max-width: 60rem; }
.svc__tag { color: var(--accent); }
.svc__name {
  font-family:var(--font-display); font-weight:900; line-height:.9; letter-spacing:-.02em;
  font-size: var(--fs-h1); margin:.2em 0 .35em; color: var(--bone);
}
.svc__promise { font-size: var(--fs-lead); max-width: 34ch; color: var(--bone); }
.svc__list { margin-top: 2rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.svc__list li {
  font-size: var(--fs-small); padding:.5em 1em; border:1px solid var(--ink-3); border-radius:100px; color:var(--bone-dim);
}
.svc__link { margin-top:2.2rem; display:inline-flex; align-items:center; gap:.6em; color:var(--accent); font-weight:600; }
.svc__link .arrow { transition: transform .4s var(--ease-out-expo); }
.svc__link:hover .arrow { transform: translateX(5px); }
/* accent per service */
.svc.s1 { --accent: var(--svc-brand); }
.svc.s2 { --accent: var(--svc-tools); }
.svc.s3 { --accent: var(--svc-web); }
.svc.s4 { --accent: var(--svc-cmo); }
.svc__dot { width:.5em; height:.5em; border-radius:50%; background:var(--accent); display:inline-block; vertical-align:middle; margin-right:.5em; }

/* ---------- 13. SALES TOOLS — three-stage engine (coral) --------- */
.tool { background: var(--ink-2); position: relative; overflow: hidden; }
.tool__flame { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.tool__heat { position:absolute; inset:0; z-index:0; pointer-events:none; display:none; opacity:0;
  background: radial-gradient(125% 75% at 50% 125%, rgba(255,92,138,.55), rgba(255,92,138,.12) 38%, transparent 66%);
  transition: opacity .8s ease; }
html.reduced .tool__flame, html.no-flame .tool__flame { display:none; }
html.reduced .tool__heat, html.no-flame .tool__heat { display:block; }
.tool .wrap { position:relative; z-index:2; }
.tool__head { max-width: 60rem; margin-bottom: clamp(2.4rem,6vh,4.5rem); }
.tool__head .big { font-family:var(--font-display); font-weight:900; font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.02em; margin-top:1rem; }
.tool__head .big .hl { color: var(--coral); }
.tool__head .warm { color: var(--yellow); }
.tool__head .hot  { color: var(--coral); }
.flame-ico { display:inline-block; width:.62em; height:.82em; margin-left:.14em; vertical-align:-.06em;
  color: var(--coral); transform-origin: center bottom; filter: drop-shadow(0 0 14px rgba(255,92,138,.55));
  animation: flameFlick 1.5s ease-in-out infinite; }
.flame-ico .flame-core { fill: #FFF1F5; }
@keyframes flameFlick {
  0%,100% { transform: scale(1) rotate(-1.5deg);   opacity:.92; }
  50%     { transform: scale(1.08,1.14) rotate(2deg); opacity:1; }
}
.tool__head .lead { margin-top:1.2rem; }
.tool__head .big .hl { color: var(--coral); }

/* ---------- 13b. THROUGHLINE SELL (old way → animated new way) ----- */
.tl-reveal { margin-top: clamp(2rem,5vh,3.5rem); }
.tl-old { max-width: 46ch; }
.tl-old .eyebrow { color: var(--bone-dim); }
.tl-old__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.tl-old__list li { position: relative; padding-left: 1.6rem; color: var(--bone-dim); font-size: var(--fs-body); line-height: 1.5; }
.tl-old__list li::before { content: "✕"; position: absolute; left: 0; color: #8a5560; font-weight: 900; }
.tl-new { margin-top: clamp(2.4rem,6vh,4rem); }
.tl-new__eye { color: var(--coral); }
.tl-stage { position: relative; aspect-ratio: 16/9; width: 100%; max-width: 1040px; margin: 1rem auto 0; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 20px; overflow: hidden; }

/* A3 animated process sequence (Claude design) · 18s loop */
@keyframes seqLead { 0% { left:9%; background:#F4F1EA; box-shadow:0 0 0 6px rgba(244,241,234,0.10); opacity:0; transform:translate(-50%,-50%) scale(0.5); } 4% { opacity:1; transform:translate(-50%,-50%) scale(1); } 16% { left:16%; background:#FF5C8A; box-shadow:0 0 0 7px rgba(255,92,138,0.20); } 34% { left:38%; background:#00D4C8; box-shadow:0 0 0 7px rgba(0,212,200,0.20); } 52% { left:60%; background:#FFD447; box-shadow:0 0 0 7px rgba(255,212,71,0.20); } 70% { left:82%; background:#F4F1EA; box-shadow:0 0 0 8px rgba(244,241,234,0.16); } 86% { left:82%; opacity:1; } 91% { left:82%; opacity:0; transform:translate(-50%,-50%) scale(0.5); } 91.01% { left:9%; background:#F4F1EA; opacity:0; } 100% { left:9%; opacity:0; } }
@keyframes seqGather { 0%,3% { opacity:0.55; } 7% { opacity:0; } 90% { opacity:0; } 96%,100% { opacity:0.55; } }
@keyframes draw1 { 0%,6% { transform:scaleX(0); } 16%,89% { transform:scaleX(1); } 92%,100% { transform:scaleX(0); } }
@keyframes draw2 { 0%,16% { transform:scaleX(0); } 34%,89% { transform:scaleX(1); } 92%,100% { transform:scaleX(0); } }
@keyframes draw3 { 0%,34% { transform:scaleX(0); } 52%,89% { transform:scaleX(1); } 92%,100% { transform:scaleX(0); } }
@keyframes draw4 { 0%,52% { transform:scaleX(0); } 70%,89% { transform:scaleX(1); } 92%,100% { transform:scaleX(0); } }
@keyframes lit1 { 0%,13% { opacity:0; transform:scale(0.7); } 19%,90% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(0.7); } }
@keyframes lit2 { 0%,31% { opacity:0; transform:scale(0.7); } 37%,90% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(0.7); } }
@keyframes lit3 { 0%,49% { opacity:0; transform:scale(0.7); } 55%,90% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(0.7); } }
@keyframes lit4 { 0%,67% { opacity:0; transform:scale(0.7); } 74%,90% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(0.7); } }
@keyframes lbl1 { 0%,14% { opacity:0; transform:translate(-50%,8px); } 20%,90% { opacity:1; transform:translate(-50%,0); } 94%,100% { opacity:0; transform:translate(-50%,0); } }
@keyframes lbl2 { 0%,32% { opacity:0; transform:translate(-50%,8px); } 38%,90% { opacity:1; transform:translate(-50%,0); } 94%,100% { opacity:0; transform:translate(-50%,0); } }
@keyframes lbl3 { 0%,50% { opacity:0; transform:translate(-50%,8px); } 56%,90% { opacity:1; transform:translate(-50%,0); } 94%,100% { opacity:0; transform:translate(-50%,0); } }
@keyframes lbl4 { 0%,68% { opacity:0; transform:translate(-50%,8px); } 75%,90% { opacity:1; transform:translate(-50%,0); } 94%,100% { opacity:0; transform:translate(-50%,0); } }
@keyframes payoffIn { 0%,72% { opacity:0; transform:translateY(10px); } 82%,90% { opacity:1; transform:translateY(0); } 94%,100% { opacity:0; } }
@keyframes ringPulse { 0%,67% { opacity:0; transform:scale(0.8); } 78% { opacity:0.5; transform:scale(1.06); } 86%,90% { opacity:0.28; transform:scale(1); } 94%,100% { opacity:0; } }
.sq-lead { animation: seqLead 18s cubic-bezier(0.65,0,0.35,1) infinite; }
.sq-gather { animation: seqGather 18s linear infinite; }
.sq-seg1 { animation: draw1 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-seg2 { animation: draw2 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-seg3 { animation: draw3 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-seg4 { animation: draw4 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lit1 { animation: lit1 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lit2 { animation: lit2 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lit3 { animation: lit3 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lit4 { animation: lit4 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lbl1 { animation: lbl1 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lbl2 { animation: lbl2 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lbl3 { animation: lbl3 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-lbl4 { animation: lbl4 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-payoff { animation: payoffIn 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-ring { animation: ringPulse 18s cubic-bezier(0.16,1,0.3,1) infinite; }
.sq-anim { display:block; }
.sq-static { display:none; }
html.reduced .sq-anim { display:none; }
html.reduced .sq-static { display:flex; }
/* the multi-stage animation needs width; below ~990px the labels collide, so
   show the clean static "it gets through" frame instead (phones + tablets) */
@media (max-width: 991px) {
  .tl-stage .sq-anim { display:none; }
  .tl-stage .sq-static { display:flex; }
  .tl-stage { aspect-ratio: auto; min-height: 300px; }
}

/* four features */
.tl-feat { margin-top: clamp(3rem,8vh,5.5rem); display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.2rem,2.5vw,2rem); }
.tlf { padding-top: .4rem; }
.tlf__ico { display:block; line-height:0; margin-bottom: 1rem; }
.tlf__no { font-family: var(--font-display); font-weight:900; font-size:.95rem; letter-spacing:.04em; color: var(--bone-dim); }
.tlf h3 { font-family: var(--font-display); font-weight:900; font-size:1.15rem; letter-spacing:-.01em; margin:.35em 0 .5em; }
.tlf p { color: var(--bone-dim); font-size: var(--fs-small); line-height:1.5; }
@media (max-width: 900px) { .tl-feat { grid-template-columns: repeat(2,1fr); gap: 1.6rem 1.4rem; } }
@media (max-width: 480px) { .tl-feat { grid-template-columns: 1fr; } }

/* three-stage explainer with momentum-line drawn on scroll */
.engine { position:relative; display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,2rem); margin-bottom: clamp(2.6rem,7vh,5rem); }
.engine__line { position:absolute; left:0; top:42px; width:100%; height:2px; z-index:0; pointer-events:none; overflow:visible; }
.engine__line path { fill:none; stroke:var(--coral); stroke-width:2; stroke-linecap:round; }
.estep { position:relative; z-index:1; background:rgba(12,12,14,.55); border:1px solid var(--ink-3); border-radius:18px; padding: clamp(1.3rem,2.2vw,1.9rem); }
.estep__ico { width:30px; height:30px; color:var(--coral); margin-bottom:.7rem; }
.estep__no { font-family:var(--font-display); font-weight:900; font-size:.95rem; color:var(--coral); letter-spacing:.04em; }
.estep h3 { font-family:var(--font-display); font-weight:900; font-size:1.2rem; letter-spacing:-.01em; margin:.4em 0 .45em; }
.estep p { color:var(--bone-dim); font-size:var(--fs-small); line-height:1.55; }

/* shared range field (coral) */
.field { margin-bottom:1.5rem; }
.field__top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.7rem; }
.field__label { font-size: var(--fs-small); font-weight:600; letter-spacing:.02em; }
.field__val { font-family:var(--font-display); font-weight:900; font-size:1rem; color:var(--paper); }
.field input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px; background: var(--ink-3); outline:none; cursor:pointer; }
.field input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background: var(--coral); border:3px solid var(--ink); cursor:grab; box-shadow:0 0 0 1px var(--coral); transition: transform .2s; }
.field input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform: scale(1.15); }
.field input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background: var(--coral); border:3px solid var(--ink); cursor:grab; }

/* live demo shell */
.demo { position:relative; background: var(--ink); border:1px solid var(--ink-3); border-radius:24px; overflow:hidden; }
.demo::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.7; background: radial-gradient(120% 85% at 100% 0%, rgba(255,92,138,.14), transparent 58%); }
.demo__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem clamp(1.2rem,2.4vw,2rem); border-bottom:1px solid var(--ink-3); position:relative; z-index:1; }
.demo__badge { display:inline-flex; align-items:center; gap:.5em; font-size:var(--fs-small); color:var(--coral); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.demo__badge .live { width:8px;height:8px;border-radius:50%;background:var(--coral); box-shadow:0 0 0 0 rgba(255,92,138,.6); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,92,138,.5)} 70%{box-shadow:0 0 0 10px rgba(255,92,138,0)} 100%{box-shadow:0 0 0 0 rgba(255,92,138,0)} }
.demo__steps { display:flex; gap:.45rem; }
.demo__steps span { width:24px; height:4px; border-radius:3px; background:var(--ink-3); transition:background .4s; }
.demo__steps span.on { background:var(--coral); }
.demo__stage { padding: clamp(1.6rem,3vw,2.6rem); position:relative; z-index:1; display:none; }
.demo[data-step="1"] .demo__s1, .demo[data-step="2"] .demo__s2, .demo[data-step="3"] .demo__s3 { display:block; animation: demoIn .55s var(--ease-out-expo); }
@keyframes demoIn { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

/* stage 1 — calculator */
.demo__s1 { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:start; }
.demo[data-step="1"] .demo__s1 { display:grid; }
.calc__result { padding-bottom: 1.4rem; border-bottom:1px solid var(--ink-3); margin-bottom:1.6rem; }
.calc__result .label { font-size: var(--fs-small); color: var(--bone-dim); letter-spacing:.14em; text-transform:uppercase; }
.calc__number { font-family:var(--font-display); font-weight:900; font-size: clamp(2.6rem,6vw,4.4rem); line-height:1; color: var(--coral); margin:.12em 0; letter-spacing:-.02em; }
.calc__sub { font-size: var(--fs-small); color: var(--bone-dim); }
.calc__foot { font-size: var(--fs-small); color: var(--bone-dim); margin-top:.8rem; }
.demo__capture { margin-top:1.4rem; display:grid; gap:.8rem; }
.demo__capture input { font:inherit; font-size:var(--fs-body); padding:.85em 1em; border-radius:11px; border:1px solid var(--ink-3); background:var(--ink-2); color:var(--paper); }
.demo__capture input:focus { outline:2px solid var(--coral); outline-offset:1px; border-color:transparent; }

/* stage 2 — instant email simulation */
.mail { max-width:480px; margin-inline:auto; }
.mail__frame { border:1px solid var(--ink-3); border-radius:18px; background:var(--ink-2); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.mail__top { display:flex; align-items:center; gap:.6em; padding:.85rem 1.1rem; border-bottom:1px solid var(--ink-3); font-size:var(--fs-small); color:var(--bone-dim); }
.mail__top .dots { display:flex; gap:.35em; } .mail__top .dots i{ width:9px;height:9px;border-radius:50%;background:var(--ink-3); display:block;}
.mail__body { padding:1.3rem 1.2rem; }
.mail__meta { display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-small); color:var(--bone-dim); margin-bottom:.8rem; }
.mail__avatar { width:32px;height:32px;border-radius:50%;background:var(--coral); color:var(--ink); font-family:var(--font-display); font-weight:900; display:grid; place-items:center; font-size:.85rem; }
.mail__subject { font-family:var(--font-display); font-weight:900; font-size:1.18rem; letter-spacing:-.01em; margin-bottom:.5rem; }
.mail__pre { color:var(--bone-dim); font-size:.95rem; line-height:1.55; margin-bottom:1.1rem; }
.mail__pre b { color:var(--paper); }
.mail__sent { display:inline-flex; align-items:center; gap:.5em; font-size:var(--fs-small); color:var(--coral); font-weight:600; margin-top:1rem; }
.demo__back { background:none; border:none; color:var(--bone-dim); font-size:var(--fs-small); cursor:pointer; margin-top:1.2rem; }
.demo__back:hover{ color:var(--paper); }

/* stage 3 — personalised page */
.pp { text-align:center; max-width:600px; margin-inline:auto; }
.pp__eyebrow { color:var(--coral); justify-content:center; }
.pp__head { font-family:var(--font-display); font-weight:900; font-size: clamp(1.7rem,4.2vw,2.8rem); line-height:1.04; letter-spacing:-.02em; margin:.6rem 0 .4rem; }
.pp__head .hl { color:var(--coral); }
.pp__stats { display:flex; justify-content:center; gap: clamp(1.5rem,5vw,3.5rem); flex-wrap:wrap; margin:1.8rem 0; }
.pp__stat .k { font-family:var(--font-display); font-weight:900; font-size: clamp(1.4rem,3vw,2rem); color:var(--paper); }
.pp__stat .l { font-size:var(--fs-small); color:var(--bone-dim); }

.tool__cta { margin-top: clamp(2.4rem,6vh,4rem); display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
@media (max-width: 820px){ .engine { grid-template-columns:1fr; } .engine__line { display:none; } .demo__s1 { grid-template-columns:1fr; } }

/* ---------- 14. APPROACH / MARQUEE -------------------------------- */
.marquee { overflow:hidden; border-block:1px solid var(--ink-3); padding-block:1.4rem; white-space:nowrap; }
.marquee__row { display:inline-flex; gap:3rem; will-change: transform; }
.marquee__row span { font-family:var(--font-display); font-weight:900; font-size: clamp(1.3rem,3vw,2.4rem); color:var(--ink-3); -webkit-text-stroke:1px var(--bone-dim); text-transform:uppercase; }
.marquee__row span .acc { color: var(--coral); -webkit-text-stroke:0; }

.approach__rows { display:grid; gap:0; }
.approach__row {
  display:grid; grid-template-columns: 5rem 1fr 2fr; gap: clamp(1rem,3vw,3rem);
  padding-block: clamp(1.6rem,4vh,2.6rem); border-top:1px solid var(--ink-3); align-items:baseline;
}
.approach__row:last-child { border-bottom:1px solid var(--ink-3); }
.approach__row .step { font-family:var(--font-display); font-weight:900; color:var(--bone-dim); }
.approach__row h3 { font-family:var(--font-display); font-weight:900; font-size: var(--fs-h3); letter-spacing:-.01em; }
.approach__row p { color: var(--bone-dim); max-width:46ch; }

/* ---------- 15. ABOUT --------------------------------------------- */
.about__grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,6vw,5rem); align-items:end; }
.about__big { font-family:var(--font-display); font-weight:900; font-size: var(--fs-h2); line-height:1.02; letter-spacing:-.02em; }
.about__big em { font-style:normal; color: var(--coral); }
.about__side p { color: var(--bone-dim); margin-bottom:1.2rem; }
.about__sig { font-family:var(--font-display); font-weight:900; font-size:1.1rem; }

/* ---------- 16. CONTACT ------------------------------------------- */
.contact { background: var(--bone); color: var(--ink); }
.contact .eyebrow, .contact .muted { color: var(--ink-dim); }
.contact ::selection { background: var(--ink); color: var(--bone); }
.contact__grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,6vw,5rem); }
.contact__big { font-family:var(--font-display); font-weight:900; font-size: var(--fs-h1); line-height:.92; letter-spacing:-.02em; color:var(--ink); }
.contact__big .dot { color: var(--coral); }
.contact__lead { margin-top:1.4rem; color: var(--ink-dim); max-width:38ch; }
.contact__actions { margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.contact .btn { --bg: var(--ink); --fg: var(--bone); }
.contact .btn::before { background: var(--coral); }
.contact .btn--ghost { --bg: transparent; --fg: var(--ink); border:1px solid rgba(10,10,11,.25); }
.contact .btn--ghost::before { background: var(--ink); }
.contact .btn--ghost:hover { color: var(--bone); }
.form { display:grid; gap:1.1rem; }
.form__field { display:grid; gap:.45rem; }
.form__field label { font-size: var(--fs-small); font-weight:600; letter-spacing:.02em; }
.form__field input, .form__field select, .form__field textarea {
  font: inherit; font-size: var(--fs-body); padding:.9em 1em; border-radius:12px;
  border:1px solid rgba(10,10,11,.18); background:rgba(255,255,255,.5); color:var(--ink);
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline:2px solid var(--coral); outline-offset:1px; border-color:transparent;
}
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form .btn { justify-self:start; align-self:start; margin-top:.4rem; }
.form__status { font-size: var(--fs-small); margin:0; line-height:1.5; }
.form__status[data-kind="ok"] { color: var(--teal); }
.form__status[data-kind="err"] { color: var(--coral); }

/* ---------- 16b. CONSENT BANNER ---------------------------------- */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9000; margin-inline: auto; max-width: 46rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
  background: var(--ink-2, #16161A); border: 1px solid rgba(244,241,234,.14); border-radius: 14px;
  padding: .85rem 1.1rem; box-shadow: 0 20px 60px -20px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.consent.is-in { opacity: 1; transform: none; }
.consent__text { margin: 0; font-size: var(--fs-small, .85rem); color: var(--paper, #F4F1EA); line-height: 1.45; flex: 1 1 16rem; }
.consent__actions { display: flex; gap: .5rem; }
.consent__btn { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; border-radius: 100px; padding: .5em 1.1em; border: 1px solid transparent; transition: opacity .2s, background .2s, border-color .2s; }
.consent__btn--accept { background: var(--coral, #FF5C8A); color: var(--ink, #0C0C0E); }
.consent__btn--accept:hover { opacity: .9; }
.consent__btn--ghost { background: transparent; color: var(--paper, #F4F1EA); border-color: rgba(244,241,234,.28); }
.consent__btn--ghost:hover { border-color: var(--paper, #F4F1EA); }
@media (max-width: 600px) { .consent { flex-direction: column; align-items: stretch; } .consent__actions { justify-content: flex-end; } }

/* ---------- 16c. FAQ (answer-engine + human) --------------------- */
.faq__title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: 1; font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin: .6rem 0 clamp(1.6rem, 4vh, 2.6rem); }
.faq__list { display: grid; gap: clamp(1.3rem, 3vh, 1.9rem); max-width: 72ch; }
.faq__q { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 .45rem; }
.faq__a { margin: 0; line-height: 1.65; color: var(--bone); opacity: .8; max-width: 68ch; }
.faq__more { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }
.faq__more a { color: var(--coral); font-weight: 600; text-decoration: none; }
.faq__more a:hover { text-decoration: underline; }

/* ---------- 16d. CORNERSTONE ARTICLE PAGE ------------------------ */
.cs { padding-top: clamp(7rem, 14vh, 10rem); }
.cs__title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(2rem, 5vw, 3.6rem); max-width: 20ch; margin: .6rem 0 1.2rem; }
.cs__lead { max-width: 60ch; }
.prose { max-width: 68ch; margin-top: clamp(2rem, 5vh, 3.4rem); }
.prose h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: clamp(2rem, 4.5vh, 3rem) 0 .8rem; }
.prose h3 { font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.4rem); margin: 1.7rem 0 .4rem; color: var(--paper); }
.prose p { line-height: 1.7; color: var(--bone); opacity: .82; margin: 0 0 1rem; }
.prose a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; }
.cs__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.4rem, 5vh, 3.4rem); }

/* ---------- 17. FOOTER -------------------------------------------- */
.footer { background: var(--ink); padding-block: clamp(3rem,8vh,6rem); }
.footer__mark {
  font-family:var(--font-display); font-weight:900; line-height:.82; letter-spacing:-.03em;
  font-size: clamp(3rem,17vw,16rem); color: transparent; -webkit-text-stroke:1px var(--ink-3);
  text-transform:lowercase;
}
.footer__mark i { -webkit-text-stroke: 0; }  /* coloured i's stay solid against the outline */
.footer__bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:2.5rem; color:var(--bone-dim); font-size:var(--fs-small); }
.footer__bottom a:hover { color: var(--coral); }

/* ---------- 18. FOCUS / A11Y -------------------------------------- */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position:absolute; left:-999px; top:0; z-index:10000;
  background:var(--bone); color:var(--ink); padding:.8em 1.2em; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus { left:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- 19. RESPONSIVE ---------------------------------------- */
@media (max-width: 900px) {
  .tool__grid, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .positioning .big { font-size: var(--fs-h2); }
  .approach__row { grid-template-columns: 3rem 1fr; }
  .approach__row p { grid-column: 1 / -1; }
  .nav__links a:not(.nav__cta) { display:none; }
  .form__row { grid-template-columns:1fr; }
  .svc__num { top: 6vh; }
}
@media (max-width: 560px) {
  .nav__cta { padding:.55em .9em; }
  .hero__headline .l1, .hero__headline .l3 { font-size: clamp(1.8rem,9vw,3rem); }
}

/* ---------- 20. REDUCED MOTION (mandatory fallback) --------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .grain { display:none; }
  .hero__canvas { display:none; }
  .hero__fallback { display:block; }
  .hero__scrollcue .track::after { animation:none; }
  .services__pin { height:auto; }
  .services__track { flex-direction:column; transform:none !important; }
  .svc { flex-basis:auto; min-height:80svh; border-left:none; border-top:1px solid var(--ink-3); }
  .cursor, .cursor__dot { display:none; }
}
/* JS adds .reduced to <html> when it detects the pref or no-WebGL, mirroring the above for runtime control */
html.reduced .hero__canvas { display:none; }
html.reduced .hero__fallback { display:block; }
html.reduced .grain { display:none; }

/* ---------- 16. PRICING PAGE --------------------------------------- */
.pricing { padding-top: clamp(7rem, 14vh, 10rem); }
.pricing__head { max-width: 60rem; }
.pricing__head .big { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h1); line-height: 1; letter-spacing: -.02em; margin: 1rem 0 .9rem; }
.pricing__head .lead { max-width: 46ch; }
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  --acc: var(--bone);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: transform .55s var(--ease-out-expo), border-color .55s var(--ease-out-expo), box-shadow .55s var(--ease-out-expo);
}
/* Each part carries its own service accent (the brand's --svc-* system, made visible) */
.price-card--web   { --acc: var(--yellow); }
.price-card--tools { --acc: var(--coral); }
.price-card--cmo   { --acc: var(--bone); }
.price-card--host  { --acc: var(--teal); }

/* Designed hover/focus: lift + accent edge + accent glow. The global reduced-motion reset neutralises the transform. */
@media (hover: hover) {
  .price-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--acc) 55%, var(--ink-3)); box-shadow: 0 34px 74px -48px color-mix(in srgb, var(--acc) 68%, transparent); }
  .price-card:hover .price-card__name::before { box-shadow: 0 0 18px 1px var(--acc); }
}
.price-card:focus-within { border-color: color-mix(in srgb, var(--acc) 55%, var(--ink-3)); }

/* The engine stands apart: persistent coral edge + glow even at rest */
.price-card--star { border-color: color-mix(in srgb, var(--coral) 55%, var(--ink-3)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 28%, transparent), 0 30px 80px -42px rgba(255,92,138,.5); }
@media (hover: hover) { .price-card--star:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 34%, transparent), 0 42px 92px -44px rgba(255,92,138,.62); } }

.price-card__name { position: relative; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: -.01em; text-wrap: balance; }
/* Accent dot: a quiet echo of the three-dot logo mark; gives each part an identity at rest */
.price-card__name::before {
  content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; vertical-align: .06em;
  border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--acc) 70%, transparent);
  transition: box-shadow .55s var(--ease-out-expo);
}
.price-card__tag { display: inline-block; margin-left: .6em; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); font-weight: 700; vertical-align: middle; }
.price-card__desc { color: var(--bone-dim); line-height: 1.55; margin: 1rem 0 1.6rem; font-size: .95rem; flex: 1; text-wrap: pretty; }
.price-card__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: 1; letter-spacing: -.02em; color: var(--acc); }
.price-card__unit { color: var(--bone-dim); font-size: .85rem; margin-top: .5rem; }
.price-card__foot { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-3); font-size: .82rem; color: var(--bone-dim); }

.bundle { margin-top: clamp(4rem, 10vh, 7rem); background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-lg); padding: clamp(1.8rem, 5vw, 3.5rem); }
.bundle__head { max-width: 52rem; }
.bundle__head .big { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.02em; margin: .8rem 0; text-wrap: balance; }
.bundle__head .big .hl { color: var(--coral); }
.bundle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: clamp(1.8rem, 4vh, 2.6rem); }
@media (max-width: 720px) { .bundle-grid { grid-template-columns: 1fr; } }
.bundle-card {
  --acc: var(--coral);
  background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r-md); padding: clamp(1.4rem, 3vw, 2rem);
  transition: transform .55s var(--ease-out-expo), border-color .55s var(--ease-out-expo);
}
.bundle-card--y2 { --acc: var(--teal); }
@media (hover: hover) { .bundle-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 48%, var(--ink-3)); } }
.bundle-card__label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); font-weight: 600; }
.bundle-card p { color: var(--bone-dim); line-height: 1.55; font-size: .92rem; text-wrap: pretty; }
.bundle-card .bundle-card__big { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3.5vw, 2.2rem); letter-spacing: -.02em; margin: .5rem 0 .7rem; color: var(--acc); }
.bundle__close { margin-top: clamp(1.6rem, 4vh, 2.4rem); color: var(--bone-dim); line-height: 1.6; max-width: 62ch; }
.bundle__cta { margin-top: clamp(1.8rem, 4vh, 2.6rem); display: flex; flex-wrap: wrap; gap: 1rem; }
.pricing__exvat { margin-top: 1.4rem; font-size: .78rem; color: var(--bone-dim); }

/* ---------- 17. MARQUEE BAND (coral drench transition) --------------- */
.marq {
  position: relative; z-index: 2;
  background: var(--coral); color: var(--ink);
  overflow: hidden; padding: .95em 0;
}
.marq__track {
  display: flex; align-items: center; gap: 2.6em;
  width: max-content; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.9rem, 1.6vw, 1.2rem); letter-spacing: -.01em;
  animation: marq 30s linear infinite;
}
.marq__track i { font-style: normal; font-size: .55em; opacity: .55; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- 18. WORK (paper drench, editorial stagger) --------------- */
.work { background: var(--paper); color: var(--ink); position: relative; z-index: 2; }
.work .section-num, .work .muted { color: var(--ink-dim); }
.work .lead { color: var(--ink); }
.work__title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.02em; margin-top: 1rem; }
.work__title .dot { color: var(--coral); }
.work__lead { margin-top: 1.1rem; max-width: 52ch; }

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.2rem, 5vw, 4rem) clamp(1.2rem, 2.6vw, 2.2rem); margin-top: clamp(2.5rem, 6vh, 4.5rem); }
.work-card { margin: 0; }
.work-card:nth-child(odd)  { grid-column: 1 / 8; }
.work-card:nth-child(even) { grid-column: 8 / 13; margin-top: clamp(2rem, 7vw, 6rem); }
.work-card__frame {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid rgba(10,10,11,.14);
  background: var(--ink-2);
}
.work-card__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .8s var(--ease-out-expo);
}
@media (hover: hover) {
  .work-card:hover .work-card__frame img { transform: scale(1.035); }
  .work-card:hover .work-card__frame { border-color: rgba(10,10,11,.3); }
}
.work-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
.work-card__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, 1.4vw, 1.1rem); letter-spacing: -.01em; }
.work-card__tags { font-size: .78rem; color: var(--ink-dim); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.work__note { margin-top: clamp(2.2rem, 5vh, 3.5rem); color: var(--ink-dim); max-width: 60ch; }
.work__note a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--coral); transition: color .3s var(--ease-out-expo); }
.work__note a:hover { color: var(--coral); }

@media (max-width: 820px) {
  .work-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .work-card:nth-child(odd), .work-card:nth-child(even) { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- 19. NOTES (index list) ----------------------------------- */
.notes__title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); letter-spacing: -.02em; margin: 1rem 0 clamp(1.8rem, 4vh, 2.6rem); }
.notes__list { border-top: 1px solid var(--ink-3); }
.notes__row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.2rem;
  padding: 1.15em .2em; border-bottom: 1px solid var(--ink-3);
  transition: transform .45s var(--ease-out-expo), background .45s var(--ease-out-expo);
}
.notes__row .notes__t { font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.35; }
.notes__row .notes__tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.notes__row .arrow { transition: transform .45s var(--ease-out-expo), color .45s var(--ease-out-expo); }
@media (hover: hover) {
  .notes__row:hover { transform: translateX(10px); }
  .notes__row:hover .arrow { transform: translateX(4px); color: var(--coral); }
}
@media (max-width: 560px) { .notes__row { grid-template-columns: 1fr auto; } .notes__row .notes__tag { display: none; } }