/* ============================================================
   AGENTIC — VOL.001 — STYLESHEET
   Requires tokens.css. Soft, premium, colourful-clean.
   ============================================================ */

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

/* no CSS smooth-scroll: Lenis animates scroll itself, and CSS `smooth`
   re-animates every per-frame write Lenis makes (documented conflict) */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---- TYPE UTILITIES ---- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
}
/* ---- PRELOADER — counts 000 → 100 then lifts ---- */

.loader {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--edge);
  transition: transform 900ms var(--expo);
}
.loader.is-done { transform: translateY(-101%); }
.loader__count {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 18vw, 18rem); line-height: 0.8;
}
.loader__label { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---- GOO — soft pastel gradient light behind the hero ---- */

.goo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* ---- CURSOR — soft dot that swells ---- */

.cursor {
  position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lav); mix-blend-mode: multiply; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(23,21,15,0.35);
  transition: width 350ms var(--expo), height 350ms var(--expo),
              background 300ms var(--expo), opacity 250ms ease;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 60px; height: 60px; background: var(--mint); box-shadow: none; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---- NAV ---- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge);
}
/* dark text by default (over light stocks); JS flips .nav--light when a
   dark section is behind the nav. The pastel dot is always true mint. */
.nav__txt, .nav__link { color: var(--ink); transition: color var(--t-fast) var(--expo); }
.nav--light .nav__txt, .nav--light .nav__link { color: var(--paper); }
.nav__brand { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
/* baseline-aligned: an empty flex item's baseline is its bottom edge, so
   the dot sits exactly on the wordmark's baseline — a true full stop */
.nav__dot { width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--mint); margin-left: 0.09em; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); }
.nav__link { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; position: relative; }
.nav__link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1.5px; background: currentColor; transition: right var(--t-fast) var(--expo); }
.nav__link:hover::after, .nav__link.is-here::after { right: 0; }

/* labels roll: the visible copy leaves upward as its twin arrives from
   below, so hovering the nav has a mechanism, not just a colour change */
.nav__roll { display: block; position: relative; overflow: hidden; }
.nav__roll span { display: block; transition: transform 460ms var(--expo); }
.nav__roll span + span { position: absolute; left: 0; top: 0; transform: translateY(100%); }
.nav__link:hover .nav__roll span { transform: translateY(-100%); }
.nav__link:hover .nav__roll span + span { transform: translateY(0); }

/* the bar itself: frosted once you leave the top, and out of the way
   while you read downward — back the instant you scroll up */
.nav {
  transition: transform 520ms var(--expo), background-color var(--t-fast) var(--expo),
              backdrop-filter var(--t-fast) var(--expo);
}
.nav--scrolled { background-color: rgba(244,242,236,0.72); backdrop-filter: blur(14px) saturate(1.2); }
.nav--scrolled.nav--light { background-color: rgba(23,21,15,0.6); }
.nav--hidden { transform: translateY(-102%); }


/* ---- BUTTONS — pills ---- */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  padding: 18px 30px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  transition: transform var(--t-fast) var(--expo), background var(--t-fast) var(--expo), color var(--t-fast) var(--expo);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); background: var(--accent); color: var(--ink); }
.btn--ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- SECTION SCAFFOLD ---- */

.sec { padding: clamp(80px, 13vh, 190px) var(--edge); position: relative; }
.sec__index {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 22px; margin-bottom: clamp(40px, 7vh, 90px);
  border-bottom: 1px solid var(--hair);
}
.sec__no { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); }
.sec__what { font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; }
.sec__what::before { content: '· '; }
.sec__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-left: auto; }

/* colour-coded stocks */
.sec--mint  { --accent: var(--mint); }
.sec--lav   { --accent: var(--lav); }
.sec--aqua  { --accent: var(--aqua); }
.sec--peach { --accent: var(--peach); }
/* .sec--fill washes a section in a pale tint of its accent, fading to
   paper at both edges so sections bleed into each other — colour as
   atmosphere, never a hard block. */
.sec--fill {
  background: linear-gradient(180deg,
    var(--paper-fade) 0%, var(--accent-tint) 26%,
    var(--accent-tint) 74%, var(--paper-fade) 100%);
}
.sec--mint  { --accent-tint: var(--mint-tint); }
.sec--lav   { --accent-tint: var(--lav-tint); }
.sec--aqua  { --accent-tint: var(--aqua-tint); }
.sec--peach { --accent-tint: var(--peach-tint); }
/* dark plates carry their own light-on-dark copy of the column grid,
   aligned to the same columns as the page-wide one */
.sec--dark {
  background-color: var(--ink); color: var(--paper);
  background-image: linear-gradient(90deg, rgba(244,242,236,0.05) 0 1px, transparent 1px);
  background-size: calc((100vw - 2 * var(--edge)) / 6) 100%;
  background-position: var(--edge) 0;
}
.sec--dark .sec__index { border-color: rgba(244,242,236,0.16); }
.sec--dark ::selection { background: var(--accent); color: var(--ink); }

/* ---- HERO ---- */

.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  padding: var(--nav-h) var(--edge) 0;
  background: var(--paper);
}
.hero__stage { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; }
.hero__stage > * { grid-area: 1 / 1; place-self: center; }

/* wrapper carries the scroll response (rotate/scale/velocity),
   so the orb's own float/morph transforms never conflict.
   Sits above the wordmark (z-index 2) so the word reads through the
   slightly translucent orb — "behind the glass" but still visible. */
.orb-wrap { will-change: transform; z-index: 2; }

/* the shape graphic — a soft glossy pastel orb, morphing + floating */
.orb {
  position: relative;
  width: min(66vw, 640px); aspect-ratio: 1;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background:
    radial-gradient(circle at 68% 72%, var(--lav), transparent 58%),
    radial-gradient(circle at 34% 72%, var(--aqua), transparent 56%),
    radial-gradient(circle at 66% 30%, var(--mint), transparent 60%),
    radial-gradient(circle at 30% 32%, #fff8, transparent 42%),
    var(--peach);
  box-shadow: 0 40px 90px -30px rgba(23,21,15,0.28), inset -20px -30px 60px rgba(23,21,15,0.06), inset 20px 24px 60px #fff9;
  filter: saturate(0.92);
  opacity: 0.78;   /* more translucent — the wordmark reads clearly through */
  animation: morph 14s ease-in-out infinite, floaty 9s ease-in-out infinite;
  will-change: border-radius, transform;
}
.orb__hi {
  position: absolute; top: 14%; left: 18%; width: 30%; height: 24%;
  border-radius: 50%; background: #fff; filter: blur(14px); opacity: 0.65;
  will-change: transform, opacity;   /* JS slides it toward the pointer */
}
@keyframes morph {
  0%,100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%     { border-radius: 62% 38% 41% 59% / 54% 63% 37% 46%; }
  66%     { border-radius: 39% 61% 57% 43% / 63% 39% 61% 37%; }
}
@keyframes floaty {
  0%,100% { transform: translateY(-1.6%) rotate(-2deg); }
  50%     { transform: translateY(1.6%) rotate(2deg); }
}

/* companion orbs on the WHAT page — a few soft, blurred shapes morphing
   and drifting across the screen; same palette, different rhythm each */
/* the home coil is a fixed page backdrop like the Work one; JS fades it
   in below the hero so the hero composition is left alone */
.worbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* opacity lives on the host the JS drives — putting it on the wrapper
   would hide the coil no matter what the fade sets */
#worb-helix { opacity: 0; }

/* the WHAT backdrop — a real 3D WebGL coil (Three.js) mounts its canvas here */
.worb-helix { position: absolute; inset: 0; }
.worb-helix canvas, .helix canvas { display: block; width: 100% !important; height: 100% !important; }

/* the wordmark graphic — giant, white, sitting BEHIND the translucent
   orb (z-index 1) so it reads softly through the glass; soft dark halo
   keeps it legible where it crosses the light goo */
.hero__word {
  z-index: 1;
  font-weight: 700; font-size: clamp(4rem, 0.5rem + 16.5vw, 18rem);
  line-height: 0.9; letter-spacing: -0.045em; color: var(--paper-pure);
  pointer-events: none; white-space: nowrap;
  text-shadow: 0 6px 50px rgba(23,21,15,0.34), 0 1px 4px rgba(23,21,15,0.22);
}

.hero__cue {
  position: absolute; z-index: 3; bottom: clamp(22px, 4vh, 44px); left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--ink-soft);
}
.hero__cue-arr { animation: bob 1.8s var(--expo) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* STATEMENT — the moved-down hero copy, generously spaced */
.statement { display: flex; flex-direction: column; }
.statement__tag { color: var(--grey); display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(28px, 5vh, 56px); }
.statement__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.statement__title { font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.st__line { display: block; }
.st__line em { font-style: italic; font-weight: 500; }
.statement .swatch { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--mint); margin-left: 0.14em; }
.statement__foot {
  margin-top: clamp(48px, 9vh, 120px);   /* the breathing room fix */
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}
.statement__lede { font-size: var(--t-lede); line-height: 1.3; max-width: 30ch; }

/* ---- WHAT — offering + service index ---- */

.index { margin-top: clamp(30px, 5vh, 60px); border-top: 1px solid var(--hair); }
.index__row {
  display: grid; grid-template-columns: 90px 1fr minmax(0, 360px) 60px;
  align-items: center; gap: var(--edge);
  padding: clamp(22px, 3.4vh, 40px) 0;
  border-bottom: 1px solid var(--hair);
  position: relative; isolation: isolate;
}
.index__row::before {
  content: ''; position: absolute; inset: -1px calc(-1 * var(--edge)); z-index: -1;
  background: var(--accent); border-radius: var(--r-md);
  opacity: 0; transform: scale(0.96); transform-origin: center;
  transition: opacity var(--t-fast) var(--expo), transform var(--t-med) var(--expo);
}
.index__row:hover::before { opacity: 1; transform: scale(1); }
/* display numerals in the accent, echoing the Work folio numbers */
.index__no { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.6rem); line-height: 1; color: var(--accent); }
.index__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-big); line-height: 1; transition: transform var(--t-med) var(--expo); }
.index__row:hover .index__name { transform: translateX(14px); }
.index__desc { font-size: var(--t-sm); color: var(--grey); transition: color var(--t-fast) var(--expo); }
.index__row:hover .index__desc { color: var(--ink); }
.index__go { justify-self: end; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--hair); display: grid; place-items: center; transition: background var(--t-fast) var(--expo), border-color var(--t-fast) var(--expo), transform var(--t-med) var(--expo); }
.index__row:hover .index__go { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: rotate(-45deg); }
/* The Atelier sits quietly beneath the three-step index */
.index__aside { margin-top: clamp(20px, 3.5vh, 36px); font-size: var(--t-sm); color: var(--grey); }
.index__aside strong { color: var(--ink); font-weight: 500; }
.index__aside a { transition: color var(--t-fast) var(--expo); }
.index__aside a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .index__row { grid-template-columns: 44px 1fr 46px; }
  .index__desc { display: none; }
}

/* ---- HOW — sticky card cycle ---- */

/* ---- WHY — approach ---- */

/* HOW title */
/* sized to sit inside the sticky stage alongside the cards: this heading
   runs long, and the stage cannot scroll — anything taller gets clipped */
.how__title { font-weight: 700; font-size: clamp(1.6rem, 0.85rem + 2.5vw, 3.1rem); line-height: 1.08; letter-spacing: var(--ls-tight); margin-bottom: clamp(28px, 4.5vh, 56px); max-width: 24ch; }
.how__title em { font-style: italic; font-weight: 500; }

/* THE METHOD — sticky card cycle (wembi §02): the title stays put while
   you scroll THROUGH the blocks one at a time. Sticky, not JS-pinned, so
   it's cheap. Fallback (no .how--live) is a readable stack. */
.how__counter { color: var(--mint); }
.how__cards { position: relative; margin-top: clamp(28px, 5vh, 60px); }
.how__card { padding: 22px 0; border-top: 1px solid rgba(244,242,236,0.16); }
.how__cardno { color: var(--mint); display: block; margin-bottom: 12px; }
.how__cardname { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.1rem + 3.6vw, 4.4rem); line-height: 0.98; letter-spacing: var(--ls-tight); }
.how__carddesc { font-size: var(--t-lede); line-height: 1.4; color: rgba(244,242,236,0.62); max-width: 34ch; margin-top: 18px; }
.how__track { display: none; height: 2px; background: rgba(244,242,236,0.14); margin-top: 40px; }
.how__track span { display: block; height: 100%; width: 20%; background: var(--mint); transition: width var(--t-fast) var(--expo); }

/* live cycle (JS on): pin via sticky, cards cross-fade in place.
   svh keeps the stage inside the visual viewport on mobile (vh tracks the
   large viewport and clips the cards while the URL bar is showing) */
.how--live .how__cycle { height: 440vh; height: 440svh; }
.how--live .how__stage {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 4vh) var(--edge) 6vh;
}
.how--live .how__cards { min-height: clamp(200px, 34vh, 340px); margin-top: clamp(24px, 4vh, 48px); }
.how--live .how__card {
  position: absolute; inset: 0; padding: 0; border: 0;
  opacity: 0; transform: translateY(42px);
  transition: opacity 0.5s var(--expo), transform 0.6s var(--expo);
  pointer-events: none; will-change: opacity, transform;
}
.how--live .how__card.is-active { opacity: 1; transform: none; }
.how--live .how__card.is-past { opacity: 0; transform: translateY(-42px); }
.how--live .how__track { display: block; }
@media (max-width: 760px) { .how--live .how__cycle { height: 500vh; height: 500svh; } }

/* WHY + CTA merged */
.why__cta { border-top: 1px solid var(--hair); padding-top: clamp(30px, 5vh, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.why__fit { font-weight: 700; font-size: var(--t-big); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.why__fit em { font-style: italic; font-weight: 500; }
.why__note { color: var(--ink-soft); text-transform: uppercase; letter-spacing: var(--ls-tag); }

/* ---- CTA ---- */

.cta { text-align: center; overflow: hidden; }
.cta__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.cta__title em { font-style: italic; font-weight: 500; }
.cta__row { margin-top: clamp(30px, 5vh, 60px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta__note { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--grey); }

/* ---- FOOTER ---- */

.footer { background: var(--ink); color: var(--paper); padding: clamp(56px, 9vh, 120px) var(--edge) 0; overflow: hidden; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid rgba(244,242,236,0.16); }
.footer__links { display: flex; gap: 24px; }
.footer__links a:hover { color: var(--mint); }
.footer__meta { color: var(--grey); }
.footer__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 20vw, 20rem); line-height: 0.8; letter-spacing: -0.03em; transform: translateY(0.14em); }
.footer__word span { color: var(--mint); }

/* ---- FOLIO (work / contact heads) ---- */

.folio { padding: calc(var(--nav-h) + 12vh) var(--edge) clamp(56px, 9vh, 120px); }
.folio__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.folio__title .swatch { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--mint); }
.folio__intro { max-width: 480px; margin-top: 22px; font-size: var(--t-lede); line-height: 1.4; }

.folio--work {
  position: relative;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 8vh);
  min-height: 82vh;
}
.folio--work .folio__copy { position: relative; z-index: 1; }

/* The Work coil is a FIXED backdrop for the whole page: scroll pans down
   its length, and every section above it carries a translucent wash, so
   one continuous coil runs behind the entire document. */
.helix { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* every band of content sits above the fixed coil */
.hero, .sec, .folio, .feature, .footer { position: relative; z-index: 1; }

/* a held breath between sections: display type, no wash, so the coil
   comes through at full strength behind the line */
.quote { padding: clamp(90px, 17vh, 210px) var(--edge); }
.quote__line {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 0.9rem + 4.2vw, 4.8rem);
  line-height: 1.06; letter-spacing: var(--ls-tight); max-width: 22ch;
}
.quote__line em { font-style: italic; }

/* ---- THE ANALYSIS ---- */

.an { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.an__counter { margin-left: 14px; color: var(--grey); }
.an__frame { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* veils the frame so the questions stay the subject — ::after paints after
   the canvas but content sits above both */
.an::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(244,242,236,0.62); }
.an > *:not(.an__frame) { position: relative; z-index: 1; }

/* without JS every question is simply readable; the flow is an enhancement */
.an__questions { list-style: none; }
.an--live .an__panel, .an--live .an__q { display: none; }
.an--live .an__panel.is-live, .an--live .an__q.is-live { display: block; animation: anIn 620ms var(--expo) both; }
@keyframes anIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.an__dim { color: var(--grey); text-transform: uppercase; letter-spacing: var(--ls-tag); margin-bottom: 18px; }
.an__title, .an__ask {
  font-weight: 700; font-size: clamp(1.9rem, 1rem + 3.6vw, 4.2rem);
  line-height: 1.06; letter-spacing: var(--ls-tight); max-width: 20ch;
}
.an__title em, .an__verdict em { font-style: italic; font-weight: 500; }
.an__lede { font-size: var(--t-lede); line-height: 1.4; max-width: 40ch; margin: 26px 0 40px; color: var(--ink-soft); }

.an__opts { list-style: none; display: grid; gap: 10px; margin-top: clamp(30px, 5vh, 56px); max-width: 720px; }
.an__opt {
  width: 100%; text-align: left; font-family: var(--font-body);
  font-size: var(--t-body); line-height: 1.4;
  padding: 20px 24px; border-radius: var(--r-md);
  background: var(--paper-pure); color: var(--ink);
  border: 1.5px solid transparent;
  transition: transform var(--t-fast) var(--expo), border-color var(--t-fast) var(--expo),
              background var(--t-fast) var(--expo);
}
.an__opt:hover { transform: translateX(8px); border-color: var(--ink); }
.an__opt--other { background: transparent; border-color: var(--hair); color: var(--ink-soft); }
.an__opt--other:hover { color: var(--ink); }

.an__otherBox { display: flex; gap: 10px; margin-top: 14px; max-width: 720px; }
.an__otherBox input {
  flex: 1; font-family: var(--font-body); font-size: var(--t-body);
  padding: 18px 22px; border-radius: var(--r-md);
  border: 1.5px solid var(--ink); background: var(--paper-pure); color: var(--ink);
}
.an__otherGo {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono);
  text-transform: uppercase; padding: 0 26px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
}

/* the read */
.an__verdict { font-weight: 700; font-size: clamp(1.7rem, 0.9rem + 3vw, 3.6rem); line-height: 1.08; letter-spacing: var(--ls-tight); max-width: 22ch; margin-bottom: clamp(34px, 5vh, 60px); }
.an__scores { list-style: none; display: grid; gap: 14px; max-width: 620px; margin-bottom: clamp(34px, 5vh, 60px); }
.an__score { display: grid; grid-template-columns: minmax(0, 12rem) 1fr auto; gap: 18px; align-items: center; font-size: var(--t-sm); }
.an__scoreName { color: var(--ink); }
.an__bar { height: 3px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.an__bar i { display: block; height: 100%; background: var(--ink); transition: width 800ms var(--expo); }
.an__bar i.is-other { background: var(--lav); }
.an__scoreNote { color: var(--grey); font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; }

.an__routeLabel { color: var(--grey); text-transform: uppercase; letter-spacing: var(--ls-tag); margin-bottom: 10px; }
.an__routeName { display: inline-block; font-weight: 700; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); line-height: 1; letter-spacing: var(--ls-tight); border-bottom: 2px solid var(--accent, var(--mint)); }
.an__routeWhy { margin-top: 14px; color: var(--ink-soft); max-width: 40ch; }
.an__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(34px, 5vh, 56px); }
.an__again { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--grey); border-bottom: 1px solid currentColor; }
.an__again:hover { color: var(--ink); }

@media (max-width: 640px) {
  .an__score { grid-template-columns: 1fr auto; }
  .an__bar { grid-column: 1 / -1; }
}

/* ---- WORK — features ---- */

.feature { padding: clamp(80px, 12vh, 150px) var(--edge); border-bottom: 1px solid var(--hair); }
.sec--dark + .feature, .feature.sec--dark { border-color: rgba(244,242,236,0.16); }
/* a colour change is its own divider — no hairline needed */
.feature.sec--fill, .feature.sec--dark { border-bottom: 0; }
/* Two columns: the service name holds on the left while its detail
   scrolls past on the right. Fills the width, and each section reads as
   a spread rather than another stacked block. */
.feature__grid {
  display: grid;
  grid-template-columns: clamp(220px, 26vw, 400px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}
.feature__aside { position: sticky; top: calc(var(--nav-h) + 5vh); }
/* the number runs flush to the viewport edge, outdented past the page
   gutter the rest of the column sits on — an editorial folio mark */
.feature__no {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 10rem); line-height: 0.78;
  color: var(--accent); margin-bottom: 0.1em;
}
@media (min-width: 901px) { .feature__no { margin-left: calc(var(--edge) * -1); } }
.feature__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-big); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.feature__intro { font-size: var(--t-lede); line-height: 1.4; max-width: 46ch; margin-bottom: 34px; }
.feature__body { max-width: 52ch; margin: 26px 0 0; color: var(--ink-soft); }
@media (max-width: 900px) {
  .feature__grid { grid-template-columns: 1fr; gap: 22px; }
  .feature__aside { position: static; }
}
.sec--dark .feature__body { color: rgba(244,242,236,0.7); }
.feature__body p { margin-bottom: 12px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.tier { background: var(--paper-pure); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--t-med) var(--expo); }
.sec--dark .tier { background: rgba(244,242,236,0.05); }
.tier:hover { transform: translateY(-5px); }
.tier__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); }
.tier__desc { font-size: var(--t-sm); line-height: 1.55; color: var(--grey); }
@media (max-width: 720px) {
  .feature__no { font-size: 3rem; }
}

/* ---- CONTACT form ---- */

/* form on the left, what-happens-next alongside it: the page answers the
   two questions a visitor actually has before they'll write to a stranger */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(34px, 5vw, 90px); align-items: start;
}
.contact__aside { position: sticky; top: calc(var(--nav-h) + 5vh); display: grid; gap: clamp(28px, 4vh, 44px); }
.contact__label { color: var(--grey); text-transform: uppercase; letter-spacing: var(--ls-tag); margin-bottom: 14px; }
.contact__note { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); margin-bottom: 12px; }
.contact__link { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); border-bottom: 2px solid var(--accent); }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside { position: static; }
}

/* the reason for writing, asked up front — it qualifies both ways */
.form__pick { border: 0; margin-bottom: 10px; }
.form__pick legend { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; margin-bottom: 16px; }
.form__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span {
  display: inline-block; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: var(--ls-tag);
  text-transform: uppercase; padding: 12px 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--hair); color: var(--ink-soft);
  transition: border-color var(--t-fast) var(--expo), background var(--t-fast) var(--expo),
              color var(--t-fast) var(--expo);
}
.pick span:hover { border-color: var(--ink); color: var(--ink); }
.pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.form { max-width: 820px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--edge); }
.form__row .form__field { grid-template-columns: 1fr; gap: 8px; align-items: start; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; gap: 0; } }
.form__field { display: grid; grid-template-columns: 200px 1fr; gap: var(--edge); align-items: center; padding: 24px 0; border-top: 1px solid var(--hair); }
.form__field:last-of-type { border-bottom: 1px solid var(--hair); }
/* a tall textarea reads wrong against a vertically centred label */
.form__field--tall { align-items: start; }
.form__field--tall label { padding-top: 0.5em; }
.form__field label { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; }
.form__field input, .form__field textarea {
  width: 100%; background: transparent; border: none; color: inherit; resize: vertical;
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3);
}
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--grey); font-weight: 500; }
.form__field input:focus, .form__field textarea:focus { outline: none; }
.form__field:focus-within { background: color-mix(in srgb, var(--mint) 40%, transparent); border-radius: var(--r-sm); }
.form .btn { margin-top: 36px; }
/* a bot-only field: out of sight and out of the tab order, but present in the markup */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { margin-top: 28px; font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--peach) 70%, transparent); border-radius: var(--r-sm); padding: 14px 18px; }
@media (max-width: 640px) { .form__field { grid-template-columns: 1fr; gap: 8px; } }

/* ---- SUCCESS PAGE ---- */

.success {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 6vh) var(--edge) 8vh;
  background: var(--paper);
}
.success__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 22px; max-width: 720px;
}
.orb--success {
  width: min(30vw, 190px); margin-bottom: 8px;
  animation: morph 14s ease-in-out infinite, floaty 8s ease-in-out infinite;
}
.success__tag { color: var(--grey); display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: var(--ls-tag); }
.success__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.success__title { font-weight: 700; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.success__title em { font-style: italic; font-weight: 500; }
.success__lede { font-size: var(--t-lede); line-height: 1.4; color: var(--ink-soft); max-width: 28ch; }
.success .btn { margin-top: 14px; }

/* ---- REVEALS ---- */

[data-reveal] { opacity: 0; transform: translateY(34px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity 700ms var(--expo), transform 800ms var(--expo); }
/* horizontal padding + matching negative margin gives the reveal mask room
   for italic overhang (e.g. the slanted 'd' in "assembled") without clipping,
   while keeping layout position unchanged */
[data-reveal-line] .rl { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.12em; margin: 0 -0.12em; }
[data-reveal-line] .rl i { display: inline-block; transform: translateY(102%); font-style: inherit; transition: transform 800ms var(--expo); }
[data-reveal-line].in .rl i { transform: none; }

/* ---- EDITORIAL FURNITURE ----------------------------------------
   Type and rules doing the graphic work: a column grid under the page,
   giant ghost folio numerals behind each section, and a running head in
   the margin. No canvas, no GPU. */

/* the column grid the page is set on, made faintly visible — structure
   you feel more than read. Drawn ABOVE the section washes (but under the
   grain) so it runs evenly down the page instead of appearing in bands
   wherever a wash happens to fade. */
html::after {
  content: ''; position: fixed; inset: 0; z-index: 290; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(23,21,15,0.05) 0 1px, transparent 1px);
  background-size: calc((100vw - 2 * var(--edge)) / 6) 100%;
  background-position: var(--edge) 0;
}
/* six columns on a phone is a stripe pattern, not editorial furniture,
   and it runs straight across the hero orb. Drop it where the layout
   stacks to a single column and the grid stops meaning anything. */
@media (max-width: 860px) {
  html::after { display: none; }
  .sec--dark { background-image: none; }
}

/* the section number as a graphic: enormous, tinted, sitting behind the
   content. Negative z-index keeps it above the wash but under the type. */
.sec__ghost {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  right: calc(var(--edge) - 0.06em); top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; line-height: 0.72;
  font-size: clamp(7rem, 24vw, 26rem); letter-spacing: -0.04em;
  color: var(--accent); opacity: 0.2;
}
.sec--dark .sec__ghost { opacity: 0.13; }

/* running head down the left margin, like a printed spine */
.folio-rail {
  position: fixed; left: calc(var(--edge) * 0.42); top: 50%; z-index: 120;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink); opacity: 0.4;
  pointer-events: none; transition: color var(--t-fast) var(--expo);
}
.nav--light ~ .folio-rail { color: var(--paper); }
@media (max-width: 1180px) { .folio-rail { display: none; } }

/* a fine paper grain over everything: gives the flat pastels a material
   quality up close and stops large washes banding. Sits above the nav
   (200) but below the cursor (500) and loader (9000), and never blocks
   clicks. Costs one tiny inline SVG, no request. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 300;
  pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* on a narrow screen the coil sits much closer to the copy, so the washes
   veil it more heavily — it still runs at full strength between sections */
@media (max-width: 760px) {
  :root {
    --mint-tint:  rgba(238, 244, 224, 0.88);
    --lav-tint:   rgba(240, 235, 238, 0.88);
    --aqua-tint:  rgba(231, 241, 236, 0.88);
    --peach-tint: rgba(245, 237, 228, 0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .goo, .cursor { display: none; }
  .orb { animation: none; }
  .hero__cue-arr { animation: none; }
  [data-reveal], [data-reveal].in { opacity: 1; transform: none; transition: none; }
  [data-reveal-line] .rl i { transform: none; }
}