/* ===========================================================
   THE BRIGHT HOURS — creative web studio
   Bright canvas, animated spectrum gradient, big Archivo display.
   Ported from the Claude Design handoff; refactored to semantic
   classes + made responsive, reduced-motion safe and accessible.
   =========================================================== */

:root {
  /* ===========================================================
     THE BRIGHT HOURS — brand palette  (Brand Book · Edition 01)
     "Black, grey, one shot of bloom." Ink + Mist grey carry ~80%,
     a supporting tone ~15%, Bloom ~5%. The accent earns impact by
     being rare — used like punctuation, never like wallpaper.
     Soft pink (Blossom) stays reserved for imagery & petals.
     =========================================================== */

  /* ---- Core brand colours ---- */
  --ink:         #0E0D0C;   /* Ink — text, dark sections, the disc */
  --bloom:       #A8456A;   /* Bloom — primary accent + links (large text / punctuation) */
  --bloom-light: #C77E97;   /* Bloom Light — accent on dark */
  --blossom-img: #EBC6D2;   /* Blossom — imagery & petal motif ONLY */

  /* ---- Legacy palette names kept as aliases so every existing gradient, glow
          and accent recolours to the single bloom hue (no more rainbow). ---- */
  --blossom:    var(--bloom-light);  /* "highlight on dark" → Bloom Light */
  --petal:      var(--bloom);        /* hover / decorative → Bloom */
  --petal-deep: var(--bloom);        /* accent on light + badges → Bloom */
  --plum:       #7B2F4C;             /* gradient depth → deep bloom (same hue, darker) */
  --peach:      var(--bloom-light);  /* was warm light → Bloom Light (no warm hues) */
  --peach-deep: var(--bloom);        /* was warm deep → Bloom */
  --bark:       #6B6B6B;             /* neutral grey: secondary copy + hairlines */
  --mist:       #E8E6E7;             /* faint neutral haze (no lilac tint) */
  --lilac:      var(--bloom-light);  /* was cool lilac → Bloom Light */

  /* Accent words: a single-hue bloom shimmer (deep ↔ light bloom), never a rainbow. */
  /* Symmetric bloom shimmer: both ends are the SAME colour so the tile repeats
     seamlessly (no snap at the loop) and there is no flat dead spot mid-cycle. */
  --accent:      linear-gradient(100deg, var(--bloom) 0%, var(--plum) 50%, var(--bloom) 100%);
  --accent-dark: linear-gradient(100deg, var(--bloom-light) 0%, var(--bloom) 50%, var(--bloom-light) 100%);

  /* Retired "spectrum" tokens — now all bloom, retained for their callers. */
  --c-blue:        var(--bloom-light);
  --c-violet:      var(--plum);
  --c-pink:        var(--bloom);
  --c-magenta:     var(--bloom);
  --c-lime:        var(--bloom-light);
  --c-amber:       var(--bloom-light);
  --c-gold:        var(--bloom-light);
  --c-orange:      var(--bloom);
  --c-orange-deep: var(--bloom);
  --spectrum: linear-gradient(115deg,
    var(--bloom-light), var(--bloom), var(--plum), var(--bloom), var(--bloom-light));
  /* Bloom glow channel (name kept for its callers), consumed as rgba(var(--glow-violet), a) */
  --glow-violet: 168, 69, 106;

  /* ---- Neutrals: light surfaces + ink ---- */
  --white: #F4F1F8;            /* off-white — badges/buttons/text that must pop */
  --page: #F6F6F6;             /* Mist — the default canvas */
  --card: #F4F1F8;             /* clean off-white box, lifted off Mist by a 1.5px line */
  --light: #EEEEEF;            /* faint neutral band (no tint) */
  --hairline: #E2E2E4;         /* neutral hairline */
  --muted: #8c8c8c;            /* secondary text on DARK surfaces (AA there) */
  --label-ink: #5F5E5D;        /* neutral grey labels on Mist (AA) */
  --body-light: #2A2A2A;       /* near-ink body on light (~13:1) */
  --body-light-2: #555555;     /* secondary body on light (~6.5:1) */

  /* ---- Neutrals: dark surfaces ---- */
  --dark-card: #0E0D0C;        /* Ink */
  --dark-border: #1d1d1d;
  --dark-border-hover: #3a3a3a;
  --dark-line: #242424;      /* dividers inside dark cards */
  --dark-line-soft: #1f1f1f; /* footer top border */
  --body-dark: #b3b3b3;
  --body-dark-2: #cccccc;
  --body-dark-3: #d6d6d6;

  /* ---- Elevation (soft, neutral-bloom; lines do most of the work) ---- */
  --shadow-card-hover: 0 30px 60px -24px rgba(var(--glow-violet), .35);

  /* ---- Spacing & layout ---- */
  --pad-x: clamp(20px, 5vw, 56px);
  --nav-h: 81px;   /* fixed header height */
  --space-section: clamp(56px, 8vw, 104px);      /* standard section band */
  --space-section-lg: clamp(76px, 11vw, 136px);  /* larger dark feature bands */
  --maxw: 1500px;        /* full content width */
  --maxw-mid: 1300px;    /* intro / pricing / manifesto */
  --maxw-narrow: 1200px; /* final CTA */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Type families ---- */
  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  /* ---- Serif copy scale (two roles; titles keep their own sizes) ----
     --fs-lede: the leading serif paragraph of a section.
     --fs-body: standard serif support copy. */
  --fs-lede: clamp(19px, 2vw, 23px);
  --fs-body: 18px;

  /* ---- Z-index scale (predictable stacking, low → high) ---- */
  --z-petal-back:   -1;  /* blossom petals behind content */
  --z-petal-front:  40;  /* blossom petals in front of content, below the nav */
  --z-hero-intro:   50;  /* the one-time blossom intro overlay (below the nav, above content) */
  --z-nav:          55;
  --z-menu:         80;
  --z-menu-toggle:  90;
  --z-cursor-dot:   95;  /* above the mobile menu + its toggle, so it's never hidden behind them */
  --z-skip:         100;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;  /* clears the fixed nav */
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  background: #000;
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--petal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Keyframes ---------- */
@keyframes bh-shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes bh-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(90px, -70px) scale(1.25); } }
@keyframes bh-drift2 { 0%, 100% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-100px, 60px) scale(.82); } }
@keyframes bh-drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 80px) scale(1.2); } }
@keyframes bh-reveal {
  0%   { opacity: 0; filter: drop-shadow(0 0 0 rgba(var(--glow-violet), 0)); }
  32%  { opacity: 1; filter: drop-shadow(0 0 38px rgba(var(--glow-violet), .85)); }
  65%  { opacity: 1; filter: drop-shadow(0 0 38px rgba(var(--glow-violet), .8)); }
  100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(var(--glow-violet), 0)); }
}

/* ---------- Utilities ---------- */
.gradient-text {
  background-image: var(--accent);
  /* size 200% with the loop travelling exactly 200% = one whole tile, so the
     wrap is invisible. Constant-speed (linear) keeps the flow even. */
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: bh-shimmer 9s linear infinite;
}
/* On dark sections the shimmer switches to the lighter blossom range so it stays bright. */
[data-dark] .gradient-text { background-image: var(--accent-dark); }
/* No background-clip:text support → solid readable accent instead of invisible text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text { color: var(--petal-deep); -webkit-text-fill-color: var(--petal-deep); }
  [data-dark] .gradient-text { color: var(--blossom); -webkit-text-fill-color: var(--blossom); }
}
/* Inline gradient words sit in tight line-height headings; background-clip:text
   would clip the bottom of letters (e.g. the point of "Y"). A little vertical
   padding extends the paint box. Excludes the hero's block gradient line (.line),
   where vertical padding would change the headline height. */
.gradient-text:not(.line) { padding-bottom: .09em; }

/* "bloom" letter-by-letter reveal — a calm fade + the same purple glow used
   for every other [data-reveal] element on the site (see bh-reveal), just
   staggered per letter instead of all at once. No movement/scale/rotate, to
   match the site's restrained motion language. Gated on html.is-emerged (the
   same one-shot class app.js adds once the automatic intro dissolves) so it
   plays exactly when the word becomes visible, not earlier while it's still
   hidden under the intro. background-clip:text on .gradient-text doesn't
   paint through into inline-block children (needed here so each letter can
   animate on its own delay), so each .bloom-letter carries its own clipped
   gradient instead of inheriting the wrapper's — the wrapper itself is
   neutralised just below. */
.bloom-word { background: none; animation: none; }
.bloom-letter {
  display: inline-block;
  background-image: var(--accent);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  animation: bh-shimmer 9s linear infinite;
}
[data-dark] .bloom-letter { background-image: var(--accent-dark); }
html.is-emerged .bloom-letter {
  animation: bh-shimmer 9s linear infinite, bh-petal-in 1.1s var(--ease) calc(var(--i) * 70ms) both;
}
@keyframes bh-petal-in {
  0%   { opacity: 0; filter: drop-shadow(0 0 0 rgba(var(--glow-violet), 0)); }
  40%  { opacity: 1; filter: drop-shadow(0 0 20px rgba(var(--glow-violet), .65)); }
  100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(var(--glow-violet), 0)); }
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .bloom-letter { color: var(--petal-deep); -webkit-text-fill-color: var(--petal-deep); }
  [data-dark] .bloom-letter { color: var(--blossom); -webkit-text-fill-color: var(--blossom); }
}

/* Section labels / eyebrows. Default colour is tuned for AA on the LIGHT
   surfaces; dark sections lift it to a brighter grey that also passes AA. */
.label {
  font-family: var(--serif);
  font-size: var(--fs-body);   /* was a standalone 20px — a near-duplicate of the site's body-copy size */
  color: var(--label-ink);
}
[data-dark] .label { color: #9b9b9b; }

.wrap { max-width: var(--maxw); margin: 0 auto; }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.sec-head__title {
  text-transform: uppercase;
  margin: 0;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 400;
  border-radius: 16px;   /* match the card corner radius (was a 999px pill) */
  text-decoration: none;
  white-space: nowrap;
  transition: transform .28s var(--ease), box-shadow .28s ease,
              background-color .28s ease, color .28s ease, border-color .28s ease;
}
.btn span { font-size: .84em; transition: transform .28s var(--ease); }
/* Every clickable pill fills with Bloom on hover; the arrow nudges along.
   Eased on both ends so the change glides, never snaps. */
.btn:hover { background: var(--bloom); color: var(--white); }
.btn:hover span { transform: translateX(4px); }
.btn--light {
  background: var(--white);
  color: #000;
  font-size: clamp(19px, 2.3vw, 23px);
  padding: 22px 40px;
  margin-top: clamp(34px, 5vw, 52px);
}
.btn--light:hover { box-shadow: 0 18px 50px -18px rgba(var(--glow-violet), .55); }
/* Primary button for light sections — Ink fill, white text; fills Bloom on hover
   like every other pill (the base .btn:hover rule handles the colour flip). */
.btn--ink {
  background: var(--ink);
  color: var(--white);
  font-size: clamp(17px, 1.6vw, 20px);
  padding: 16px 32px;
}
/* Secondary pill for pairing next to a .btn--ink primary — same size, outlined
   instead of filled, so it reads as the lighter second option. Fills Bloom on
   hover like every other pill (base .btn:hover rule handles bg/colour). */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-size: clamp(17px, 1.6vw, 20px);
  padding: 14.5px 32px;   /* 1.5px less than --ink to offset its own border, so both pills match height */
}
.btn--outline:hover { border-color: var(--bloom); }

.link-underline {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--bloom);                 /* Bloom — the brand's link colour */
  text-decoration: none;
  border-bottom: 2px solid var(--bloom);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.link-underline:hover { opacity: .65; }
/* On Ink surfaces the link lifts to Bloom Light (accent on dark). */
[data-dark] .link-underline { color: var(--bloom-light); border-bottom-color: var(--bloom-light); }

/* Stack we build on — styled as buttons (bordered, 16px radius to match the site's
   other buttons). Not interactive; just the button look. Fixed height + flex
   centring so the text chip and the logo chips (whose content has different
   intrinsic sizes) all render as identically sized pills. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--body-light-2);
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
}
/* Real platform wordmarks (Shopify, WordPress) instead of a text label — same
   pill. Just the logotype, icon mark cropped out (the bag / the circular "W")
   so it reads as a wordmark next to "Custom-coded", not a mismatched icon.
   Rendered as a solid-colour mask (not the raw multicolour PNG) so both marks
   share the exact same grey as the chip text, regardless of their source
   colours; aspect-ratio (set inline per logo) sizes each to its own cropped
   proportions. WordPress's serif letterforms are visually lighter/thinner
   than Shopify's bold sans at the same height, so it gets a touch taller to
   read as comparable weight rather than literally identical height. */
.chip__logo {
  display: block;
  height: 20px;
  width: auto;
  background-color: var(--body-light-2);
  -webkit-mask-image: var(--logo-src);
  mask-image: var(--logo-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.chip__logo--wordpress { height: 14px; }

/* ---------- Custom cursor — a glowing Bloom arrow that follows the pointer ----------
   The .cursor wrapper is positioned at the pointer by JS (instant, no lag); the
   inner .cursor__badge carries all visual state with eased transitions, so the
   position stays precise while hover/press changes glide. No jagged motion.
   Disabled for touch + reduced-motion. */
.cursor { display: none; }
html.bh-cursor .cursor { display: block; }
html.bh-cursor,
html.bh-cursor * { cursor: none; }

.cursor {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: var(--z-cursor-dot);
  will-change: transform;
}
.cursor__badge {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  margin: -4px 0 0 -4px;               /* aligns the arrow's tip with the pointer */
  fill: var(--bloom);
  filter: drop-shadow(0 0 10px rgba(var(--glow-violet), .75)) drop-shadow(0 2px 5px rgba(15, 13, 20, .3));
  transform: scale(1);
  transition: transform .26s var(--ease), fill .26s ease, filter .26s ease;
  will-change: transform;
  backface-visibility: hidden;
}
/* Over anything clickable the arrow brightens and grows a touch, so it stays
   legible and reads as an active state on top of a button. */
.cursor.is-hover .cursor__badge,
.cursor.is-cta   .cursor__badge {
  fill: var(--bloom-light);
  filter: drop-shadow(0 0 16px rgba(var(--glow-violet), .9)) drop-shadow(0 2px 5px rgba(15, 13, 20, .3));
}
.cursor.is-hover .cursor__badge { transform: scale(1.14); }
.cursor.is-cta   .cursor__badge { transform: scale(1.26); }
/* Press — a soft squash for tactile feedback (overrides the hover scale). */
.cursor.is-press .cursor__badge { transform: scale(.86); }

/* ---------- Blossom petals (decorative; drift top → bottom) ----------
   A restrained few soft blush petals fall through the page. Two depth layers
   (back behind content / front over it) give the page dimension. Each petal
   tumbles down a slightly different path, at its own size / speed / blur /
   opacity so the motion never reads as a loop. Fixed + overflow:hidden +
   pointer-events:none → purely atmospheric: no layout shift, no overflow,
   no interaction. */
.petals {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.petals--back  { z-index: var(--z-petal-back); }
.petals--front { z-index: var(--z-petal-front); }

.petal {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--w, 14px);
  height: calc(var(--w, 14px) * 1.28);
  /* soft blush, pale highlight at the top-left so each petal catches the light.
     Drawn from Blossom (#EBC6D2) — the brand's imagery/petal tone. */
  background: radial-gradient(125% 110% at 32% 18%, #fff4f8, var(--blossom-img) 60%, #d9a7bb);
  border-radius: 100% 0 100% 0;   /* simple elegant petal silhouette */
  opacity: 0;                      /* the fade keyframe drives visibility */
  filter: blur(var(--blur, 1px));
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation:
    var(--fall, bh-petal-a) var(--dur, 20s) linear var(--delay, 0s) infinite,
    bh-petal-fade var(--dur, 20s) ease-in-out var(--delay, 0s) infinite;
}

/* Three drift signatures: monotonic vertical fall (-20vh → 120vh, always
   descending) + gentle horizontal sway + continuous tumble. */
@keyframes bh-petal-a {
  0%   { transform: translate(0, -20vh) rotate(-12deg); }
  25%  { transform: translate(2vw, 12vh) rotate(52deg); }
  50%  { transform: translate(-1.4vw, 44vh) rotate(132deg); }
  75%  { transform: translate(2.6vw, 76vh) rotate(226deg); }
  100% { transform: translate(.6vw, 120vh) rotate(330deg); }
}
@keyframes bh-petal-b {
  0%   { transform: translate(0, -20vh) rotate(10deg); }
  25%  { transform: translate(-2.4vw, 14vh) rotate(-58deg); }
  50%  { transform: translate(1.3vw, 46vh) rotate(-142deg); }
  75%  { transform: translate(-2vw, 78vh) rotate(-232deg); }
  100% { transform: translate(-.5vw, 120vh) rotate(-322deg); }
}
@keyframes bh-petal-c {
  0%   { transform: translate(0, -20vh) rotate(0deg); }
  30%  { transform: translate(1.6vw, 20vh) rotate(80deg); }
  60%  { transform: translate(-1.8vw, 54vh) rotate(168deg); }
  100% { transform: translate(1vw, 120vh) rotate(300deg); }
}
@keyframes bh-petal-fade {
  0%, 100% { opacity: 0; }
  12%, 86% { opacity: var(--peak, .5); }
}

/* Back layer — small, soft, faint, slow */
.petal--b1 { --x: 12%; --w: 13px; --peak: .42; --blur: 2px;   --fall: bh-petal-a; --dur: 22s; --delay: -3s; }
.petal--b2 { --x: 34%; --w: 11px; --peak: .34; --blur: 2.6px; --fall: bh-petal-b; --dur: 26s; --delay: -11s; }
.petal--b3 { --x: 57%; --w: 14px; --peak: .4;  --blur: 2px;   --fall: bh-petal-c; --dur: 24s; --delay: -17s; }
.petal--b4 { --x: 76%; --w: 10px; --peak: .32; --blur: 2.8px; --fall: bh-petal-a; --dur: 28s; --delay: -7s; }
.petal--b5 { --x: 90%; --w: 12px; --peak: .37; --blur: 2.4px; --fall: bh-petal-b; --dur: 23s; --delay: -20s; }
/* Front layer — larger, sharper, brighter, a touch faster */
.petal--f1 { --x: 22%; --w: 20px; --peak: .58; --blur: .4px;  --fall: bh-petal-b; --dur: 15s; --delay: -4s; }
.petal--f2 { --x: 50%; --w: 23px; --peak: .5;  --blur: .5px;  --fall: bh-petal-c; --dur: 17s; --delay: -10s; }
.petal--f3 { --x: 80%; --w: 18px; --peak: .6;  --blur: .35px; --fall: bh-petal-a; --dur: 14s; --delay: -8s; }

/* Phones: fewer, lighter petals (drop 2 back + 1 front → 5 total). */
@media (max-width: 767px) {
  .petal--b4, .petal--b5, .petal--f3 { display: none; }
  .petal--f1 { --w: 16px; }
  .petal--f2 { --w: 18px; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  font-family: var(--serif);
  mix-blend-mode: difference;
  color: var(--white);
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--white);
  color: #000;
  font-family: var(--sans);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: -.5px;
  flex: none;
  transform: rotate(-10deg);
}
.nav__word { font-family: var(--sans); font-weight: 900; font-size: 19px; letter-spacing: -.04em; color: var(--white); }
.nav__links { display: flex; align-items: center; gap: 30px; font-size: 20px; }
.nav__links a { color: var(--white); text-decoration: none; transition: opacity .25s ease; }
/* Opacity (not colour) so the hover state still reads correctly under the
   nav's mix-blend-mode: difference against both light and dark sections. */
.nav__links a:hover { opacity: .6; }
.nav__cta { border: 1.5px solid var(--white); border-radius: 16px; padding: 10px 18px; transition: transform .25s ease; }

/* ---------- Mobile menu (hamburger + full-screen overlay; < 768px) ---------- */
.nav-toggle { display: none; }
.menu { display: none; }

@media (max-width: 767px) {
  /* Toggle button — sits OUTSIDE the mix-blend nav and above the overlay */
  .nav-toggle {
    position: fixed;
    top: 12px;
    right: calc(var(--pad-x) - 8px);
    z-index: var(--z-menu-toggle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle__bars { position: relative; width: 26px; height: 15px; }
  .nav-toggle__bars i {
    position: absolute; left: 0; right: 0;
    height: 2.5px; border-radius: 2px;
    background: #0a0a0a;
    transition: transform .3s var(--ease), opacity .2s ease;
  }
  .nav-toggle__bars i:nth-child(1) { top: 0; }
  .nav-toggle__bars i:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .nav-toggle__bars i:nth-child(3) { bottom: 0; }
  html.menu-open .nav-toggle__bars i:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
  html.menu-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
  html.menu-open .nav-toggle__bars i:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

  /* Full-screen overlay */
  .menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(92px, 15vh, 132px) var(--pad-x) clamp(116px, 18vh, 148px);
    background: var(--page);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .35s var(--ease), visibility 0s linear .35s;
  }
  html.menu-open .menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .3s ease, transform .4s var(--ease);
  }
  .menu::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 90vw; height: 90vw;
    right: -32vw; top: -24vw;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-magenta), transparent 62%);
    opacity: .15;
    pointer-events: none;
  }
  .menu__nav { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px, 0.8vh, 8px); }
  .menu__nav a { text-decoration: none; }
  /* All menu items share one type size; the CTA is set apart by its outline, not size. */
  .menu__nav a:not(.menu__cta) {
    font-family: var(--serif);
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .menu__nav a:not(.menu__cta) span { transition: opacity .2s ease; }
  .menu__nav a:not(.menu__cta):hover span { opacity: .55; }
  /* Primary action: the site's standard .btn (serif, 16px radius, Bloom hover,
     arrow nudge) as a black-line/outline button, at the SAME size as the nav
     links so the whole menu reads at one type size. */
  .menu__cta {
    align-self: flex-start;
    margin-top: clamp(24px, 4vh, 36px);
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    font-size: clamp(30px, 8vw, 40px);
    padding: clamp(10px, 1.4vh, 14px) clamp(22px, 5vw, 30px);
  }
  .menu__cta:hover { border-color: var(--bloom); }   /* .btn fills Bloom; match the edge */
  .menu__cta:active { transform: scale(.985); }
  .menu__foot {
    position: absolute;
    left: var(--pad-x);
    bottom: clamp(26px, 6vh, 46px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.04em;
    color: var(--ink);
  }
  /* The coin sits on the light overlay here, not the dark footer: a solid Bloom
     disc so it actually reads, and ties to the favicon coin. */
  .menu__foot .footer__badge { background: var(--bloom); color: var(--white); }
  /* lock the page behind the overlay */
  html.menu-open, html.menu-open body { overflow: hidden; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  isolation: isolate;   /* own stacking context: the headline's X-ray blend stays
                           contained to the hero's layers (tree), not the whole page */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  /* centre the big headline */
  /* top padding clears the fixed nav; bottom padding keeps the hero text off the edge */
  padding: clamp(80px, 9vh, 120px) var(--pad-x) clamp(58px, 7vh, 92px);
  overflow: hidden; /* clips decorative blobs; no horizontal overflow */
  background: var(--page);  /* light-grey base behind the blossom, matched to the page (seamless edges) */
}
/* ---------- Hero blossom background (scroll-scrubbed; logic in app.js) ----------
   Layer order inside .hero: video (0) → poster (1) → scrim (2) → blobs (3) →
   content (10). The poster covers the video until scrubbing begins; the scrim
   only lifts the lower-centre for legibility (not a flat grey veil). */
.hero__video,
.hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* centred tree fills the hero */
  /* The source clip has a black letterbox baked into the top + bottom of every
     frame. Scale a touch past the edges so the hero's overflow:hidden crops
     those rows off — the tree fills the hero edge-to-edge with no black or white
     lines at any screen size. Poster + video share this (and now share the same
     1920×1080 first frame) so they stay perfectly aligned when the poster fades. */
  transform: scale(1.06);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}
.hero__video  { z-index: 0; }
.hero__poster { z-index: 1; }
/* Soft light wash CENTRED behind the headline. It sits in the headline's blend
   backdrop (z2, below the z10 type), so lifting it toward white pushes the X-rayed
   letters darker — keeping them legible even over the grey trunk — while the tree
   still reads through them. Tuned to lift, not bleach (the canopy stays visible). */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(78% 62% at 50% 49%,
    rgba(255, 255, 255, .5), rgba(255, 255, 255, .24) 54%, transparent 82%);
}

.hero__blobs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.blob--1 { width: 560px; height: 560px; left: 34%; top: -180px; background: radial-gradient(circle, var(--plum), transparent 66%); opacity: .12; animation: bh-drift1 17s ease-in-out infinite; }
.blob--2 { width: 480px; height: 480px; right: -80px; top: 30%;  background: radial-gradient(circle, var(--mist), transparent 66%); opacity: .4; animation: bh-drift2 19s ease-in-out infinite; }
.blob--3 { width: 440px; height: 440px; left: -60px; bottom: 60px; background: radial-gradient(circle, var(--blossom), transparent 66%); opacity: .18; animation: bh-drift3 21s ease-in-out infinite; }

/* ============ AUTOMATIC INTRO (one-time) ============
   On load the blossom hero plays as a fixed, full-screen overlay: a clean canvas,
   the nav fades in, the tree fades in and flies through, then it dissolves to reveal
   the .intro ("We make websites bloom.") — which becomes the real top of the page.
   html.bh-intro is set pre-paint (head script) so nothing flashes; app.js runs the
   timed sequence and swaps to .bh-intro-done at the end. */
html.bh-intro, html.bh-intro body { overflow: hidden; }
html.bh-intro .hero {
  position: fixed; inset: 0; z-index: var(--z-hero-intro);
  touch-action: none;
  transition: opacity .6s var(--ease);
}
html.bh-intro .hero.is-out { opacity: 0; pointer-events: none; }
/* Nav + hamburger fade in first; kept above the overlay (z-nav) so they stay usable. */
html.bh-intro .nav,
html.bh-intro .nav-toggle { opacity: 0; transition: opacity .5s var(--ease); }
html.bh-intro.is-nav-in .nav,
html.bh-intro.is-nav-in .nav-toggle { opacity: 1; }
/* The blossom (video / poster / blobs) fades in over the canvas. */
html.bh-intro .hero__video,
html.bh-intro .hero__poster,
html.bh-intro .hero__blobs { opacity: 0; transition: opacity .55s var(--ease); }
html.bh-intro.is-tree-in .hero__video,
html.bh-intro.is-tree-in .hero__poster,
html.bh-intro.is-tree-in .hero__blobs { opacity: 1; }
/* Once the fly-through plays, fade the still poster off the top so the moving video shows. */
html.bh-intro.is-flying .hero__poster { opacity: 0; }
/* The intro waits under the overlay, then rushes up out of depth as the tree dissolves. */
html.bh-intro .intro__wrap {
  opacity: 0; transform: scale(.9); filter: blur(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
html.bh-intro.is-emerged .intro__wrap { opacity: 1; transform: none; filter: blur(0); }
/* After the intro the blossom hero is consumed; the page is normal, scrolled at top. */
html.bh-intro-done .hero { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* No zoom / blur / scale: the nav appears, then the intro appears. */
  html.bh-intro .intro__wrap { transform: none; filter: none; transition: opacity .4s ease; }
}


/* ============ INTRO / POSITIONING ============ */
/* The intro is always entered pinned at the very top (the blossom fly-through hands
   off to it), so its top padding must clear the fixed nav at EVERY width — otherwise
   the title tucks behind the header on narrower screens where --space-section dips
   below the nav height. Hence the max() floor; sides/bottom keep the normal band. */
.intro {
  padding: max(var(--space-section), calc(var(--nav-h) + 26px)) var(--pad-x) var(--space-section);
}
/* .intro__wrap is what "emerges" (scale + blur + fade, one-shot, set in app.js);
   will-change keeps that transform/filter animation off the main thread. */
.intro__wrap { max-width: var(--maxw-mid); margin: 0 auto; will-change: transform, filter; }
/* Editorial two-column body: a small factual lede (left) sets up the large serif
   belief statement (right) — the section's thesis. Loud Archivo title, quiet
   serif counterpoint. Stacks on narrow screens. */
.intro__cols {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.intro__belief {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.9vw, 38px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.intro__cta { margin-top: clamp(28px, 3.6vw, 40px); display: flex; flex-wrap: wrap; gap: 14px; }
/* Showreel panel — a rounded, card-framed video slot beside the belief text.
   Until real footage exists it shows a slow ambient gradient loop instead of a
   blank box; swap in a <video> per the comment in index.html when ready. */
.intro__reel {
  position: relative;
  align-self: stretch;
  min-height: clamp(280px, 34vw, 420px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
}
.intro__reel-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(6px);
}
.intro__reel-loop { position: absolute; inset: 0; }
.reel-blob { position: absolute; border-radius: 50%; filter: blur(60px); }
.reel-blob--1 { width: 70%; aspect-ratio: 1; left: -10%; top: -15%; background: radial-gradient(circle, var(--plum), transparent 70%); opacity: .55; animation: bh-reel-drift1 14s ease-in-out infinite; }
.reel-blob--2 { width: 60%; aspect-ratio: 1; right: -12%; bottom: -10%; background: radial-gradient(circle, var(--bloom), transparent 70%); opacity: .5; animation: bh-reel-drift2 16s ease-in-out infinite; }
.reel-blob--3 { width: 45%; aspect-ratio: 1; left: 30%; top: 40%; background: radial-gradient(circle, var(--bloom-light), transparent 70%); opacity: .4; animation: bh-reel-drift1 18s ease-in-out infinite reverse; }
@keyframes bh-reel-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -8%) scale(1.12); } }
@keyframes bh-reel-drift2 { 0%, 100% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-8%, 6%) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .reel-blob { animation: none; } }
/* "We do it the bright way" — values in a box styled like the pricing cards. */
.intro__bright {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: clamp(26px, 2.4vw, 38px);
  background: var(--card);
}
.intro__bright-label {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.intro__values {
  list-style: none;
  margin: clamp(18px, 2.1vw, 24px) 0 0;
  padding: clamp(18px, 2.1vw, 24px) 0 0;
  border-top: 1px solid var(--light);
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.3vw, 14px);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.45;
  color: var(--body-light);
}
.intro__values li { margin: 0; text-wrap: pretty; }
.intro__bright .intro__more { margin: clamp(24px, 2.8vw, 32px) 0 0; }
@media (max-width: 820px) { .intro__cols { grid-template-columns: 1fr; } }
.intro__more { margin: clamp(30px, 4vw, 48px) 0 0; }
/* Tighten the head so the statement sits directly under the title. */
.intro .sec-head { margin-bottom: clamp(20px, 2.6vw, 28px); }

/* ============ FIT / WHO IT'S FOR ============ */
.fit { padding: var(--space-section) var(--pad-x); }   /* standard symmetric band (the branch that once sat close below was removed) */
.fit__wrap { max-width: var(--maxw-mid); margin: 0 auto; }
.fit .sec-head { margin-bottom: clamp(20px, 2.6vw, 28px); }
.fit__lede {
  max-width: 54ch;
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--body-light);
  text-wrap: pretty;
}
.fit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.fit__label { margin-bottom: 16px; }
.fit__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.fit__note { margin: 0; font-family: var(--serif); font-size: var(--fs-body); line-height: 1.5; color: var(--body-light-2); max-width: 40ch; }
.fit__brand { margin: 0 0 12px; font-family: var(--serif); font-size: var(--fs-body); line-height: 1.5; color: var(--body-light); max-width: 44ch; }
.fit__brand:last-child { margin-bottom: 0; }
.fit__brand strong { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.fit__cta { margin: clamp(34px, 5vw, 52px) 0 0; font-family: var(--serif); font-size: var(--fs-body); color: var(--body-light); }

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

/* ============ MANIFESTO (dark) ============ */
.manifesto { position: relative; color: var(--white); padding: var(--space-section-lg) var(--pad-x); overflow: hidden; }
.manifesto__inner { position: relative; max-width: var(--maxw-mid); margin: 0 auto; text-align: center; }
.manifesto .label { margin-bottom: clamp(28px, 4vw, 48px); }
.manifesto__title { text-transform: uppercase; margin: 0; font-weight: 900; font-size: clamp(40px, 7.2vw, 104px); line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
.manifesto__lede { max-width: 680px; margin: clamp(30px, 4vw, 48px) auto 0; font-family: var(--serif); font-size: var(--fs-lede); line-height: 1.55; color: var(--body-dark-2); text-wrap: pretty; }

/* ============ STUDIO / FOUNDERS ============ */
.studio { padding: var(--space-section) var(--pad-x); }
.studio__wrap { max-width: var(--maxw-mid); margin: 0 auto; }
/* Tighten the head so the origin-story lede sits directly under the title. */
.studio .sec-head { margin-bottom: clamp(20px, 2.6vw, 28px); }
.studio__lede {
  max-width: 60ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.5;
  color: var(--body-light);
  text-wrap: pretty;
}
.studio__lede--2 { margin-top: clamp(16px, 2vw, 22px); }

.studio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two founders, mirroring looks / works — two-up on every screen */
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(40px, 6vw, 64px);
}
/* On desktop the 1fr columns stretch each portrait card to ~half the (1300px)
   wrap — far bigger than the content needs. Cap the card width and hug the
   left edge instead of spanning/centring the row. Mobile keeps the full-width
   two-up layout above, since narrow screens need every pixel. */
@media (min-width: 821px) {
  .studio__grid {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: start;
  }
}

/* Founder card — same white box + Ink line as the service / pricing cards, but
   static (no hover lift) since these aren't links to anywhere. */
.founder {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
}

/* Portrait slot — typographic now (Ink panel, ghosted monogram, Bloom coin).
   Upgrade later: add style="--photo:url(bram.jpg)" to .founder__portrait and the
   ::after image covers the placeholder while the coin stays on top as a brand mark. */
.founder__portrait {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
}
.founder__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--photo, none);
  /* Per-portrait zoom + vertical framing so both faces match scale and the eyes
     sit on the same line (set inline with --photo-size / --photo-pos). */
  background-size: var(--photo-size, cover);
  background-position: var(--photo-pos, center top);
  background-repeat: no-repeat;
}
.founder__mono {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(96px, 14vw, 172px);
  letter-spacing: -.05em;
  line-height: 1;
  color: rgba(255, 255, 255, .07);   /* ghosted into the Ink, never a hard label */
  user-select: none;
}
.founder__coin {
  position: absolute;
  z-index: 3;
  left: 18px; bottom: 18px;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bloom);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -.5px;
  transform: rotate(-10deg);
}
.founder__meta { padding: clamp(22px, 2.2vw, 30px); }
.founder__name { margin: 0; font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1; }
.founder__role { margin-top: 9px; font-family: var(--serif); font-size: var(--fs-body); color: var(--label-ink); }
.founder__line { margin: 16px 0 0; font-family: var(--serif); font-size: var(--fs-body); line-height: 1.45; color: var(--body-light); }
.founder__bio { margin: 12px 0 0; font-family: var(--serif); font-size: var(--fs-body); line-height: 1.5; color: var(--body-light-2); text-wrap: pretty; }
/* The one verb that carries each founder's job — Archivo, Ink, set against the serif line. */
.founder__em { font-family: var(--sans); font-weight: 900; color: var(--ink); letter-spacing: -.01em; }

/* Founders stay two-up on EVERY screen (smaller on phones, never stacked). */
@media (max-width: 600px) {
  .founder__meta { padding: 16px 14px; }
  .founder__name { font-size: clamp(15px, 4.4vw, 19px); }
  .founder__role { font-size: 14px; margin-top: 5px; }
  .founder__line { font-size: 14px; margin-top: 10px; }
  .founder__bio { font-size: 14px; margin-top: 8px; }
  .founder__coin { width: 30px; height: 30px; left: 12px; bottom: 12px; font-size: 10px; }
  .founder__mono { font-size: clamp(54px, 20vw, 96px); }
}

/* ============ WORK (dark) ============ */
/* Solid Ink directly on the section (not only the -2 ::before): during the
   cinematic intro handoff the negative-z ::before could be mis-layered, briefly
   exposing the Mist page behind the header. A real background can't be. */
.work { position: relative; color: var(--white); padding: 0 var(--pad-x) var(--space-section); background: var(--ink); }
/* Align the work content band with every other section (--maxw-mid), so its side
   gutters match the rest of the site on wide screens (the generic .wrap caps wider). */
.work .wrap { max-width: var(--maxw-mid); }
.sec-head--work { padding-top: var(--space-section); margin-bottom: clamp(40px, 6vw, 64px); }
/* Wide-screen scroll cue, parked in the Work section's top black band (which peeks
   below the hero before the heading scrolls in). Hidden by default; only wide
   viewports show it, and JS adds .is-hidden on the first scroll so it fades the
   instant "Brands we've brightened" comes up. Instrument Serif, gentle arrow bob. */
.work__cue { display: none; }
@media (min-width: 1024px) {
  .work__cue {
    position: absolute;
    z-index: 2;
    top: 0; left: 0; right: 0;
    height: var(--space-section);
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.1;
    color: rgba(255, 255, 255, .72);
    opacity: 1;
    transition: opacity .4s ease, transform .4s ease;
  }
  .work__cue-arrow { font-size: 1em; line-height: 1; animation: bh-cue-bob 1.8s ease-in-out infinite; }
  .work__cue.is-hidden { opacity: 0; transform: translateY(-6px); }
}
@keyframes bh-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* 4 cards as a 2x2, then full-width stack — always full rows, never an orphan. */
@media (max-width: 720px) { .work__grid { grid-template-columns: 1fr; } }
.work-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dark-card);
  border: 1.5px solid var(--white);
  transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.work-card__img { position: relative; height: 300px; overflow: hidden; transition: transform .6s var(--ease); }
.work-card__img--1 { background: radial-gradient(120% 120% at 18% 12%, var(--c-blue), transparent 52%), radial-gradient(110% 110% at 92% 86%, var(--c-violet), transparent 56%), #000; }
.work-card__img--2 { background: linear-gradient(205deg, var(--c-lime), var(--c-gold) 42%, var(--c-orange-deep) 86%); }
.work-card__img--3 { background: radial-gradient(120% 120% at 80% 16%, var(--c-pink), transparent 54%), radial-gradient(120% 120% at 14% 90%, var(--c-amber), transparent 56%), #0f0f0f; }
.work-card__img--4 { background: radial-gradient(130% 120% at 12% 14%, var(--c-violet), transparent 52%), radial-gradient(120% 120% at 96% 92%, var(--c-pink), transparent 54%), #0a0a0a; }
.work-card__img--1 .work-card__shine { position: absolute; width: 160%; height: 60px; left: -30%; top: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); filter: blur(14px); transform: rotate(-18deg); }
.work-card__img--2 .work-card__shine { position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, .45), transparent 55%); }
.work-card__img--3 .work-card__shine { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(0deg, rgba(255, 255, 255, .18), transparent); backdrop-filter: blur(2px); }
.work-card__img--4 .work-card__shine { position: absolute; width: 120%; height: 80px; left: -10%; top: 55%; background: linear-gradient(90deg, transparent, rgba(182, 255, 60, .6), transparent); filter: blur(16px); transform: rotate(12deg); }
.work-card__foot { padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.work-card__name { font-weight: 900; font-size: 30px; letter-spacing: -.03em; margin-top: 8px; }
.work-card__stat { text-align: right; font-family: var(--serif); font-size: 20px; color: var(--body-dark); max-width: 13ch; line-height: 1.5; }
.work-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -24px rgba(var(--glow-violet), .45); }
.work-card:hover .work-card__img { transform: scale(1.06); }
/* Mid-page CTA closing the Work proof — restrained inline link, not a hard-sell. */
.work-cta { margin: clamp(36px, 5vw, 56px) 0 0; text-align: center; font-family: var(--serif); font-size: var(--fs-lede); color: var(--body-dark-2); }
.work-cta__arrow { color: var(--bloom-light); }

/* ============ TESTIMONIALS (dark) ============ */
.words { color: var(--white); padding: var(--space-section) var(--pad-x); text-align: center; }
/* .work already ends in generous dark space of its own (bottom padding + the
   work-cta line); since both sections share the Ink background, stacking two
   full section gaps back to back reads as an oversized void. Shrink just this
   seam so it matches the rest of the page's rhythm. */
.work + .words { padding-top: clamp(24px, 3vw, 40px); }
.words__wrap { max-width: var(--maxw-mid); margin: 0 auto; }
.words__label { margin-bottom: clamp(20px, 3vw, 32px); }

/* The testimonial sits in a contained, white-lined panel on the Ink section. */
.quotes {
  position: relative;
  margin: 0 auto;
  padding: clamp(34px, 4.5vw, 60px) clamp(28px, 4.5vw, 60px) clamp(30px, 3.5vw, 44px);
  border: 1.5px solid var(--white);
  border-radius: 22px;
  background: rgba(255, 255, 255, .03);
}
/* The section's one shot of bloom — a restrained opening mark above the quote. */
.quotes__mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(52px, 6vw, 76px);
  line-height: .8;
  color: var(--bloom-light);
  margin-bottom: clamp(-12px, -1vw, -4px);
  user-select: none;
}
/* All quotes share one grid cell, so the block sizes to the TALLEST quote and
   never jumps height as it rotates; only the active one is visible / readable. */
.quotes__viewport { display: grid; max-width: 760px; margin: 0 auto; }
.quote {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
}
.quote.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.quote__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.34;
  letter-spacing: -.01em;
  color: var(--white);
  text-wrap: balance;
}
/* Attribution: one cohesive sans caption (no serif/sans flip), tight under the quote. */
.quote__by { margin-top: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.quote__name { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--white); }
.quote__role { font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--muted); }

.quotes__dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(26px, 3.5vw, 38px); }
.quotes__dots:empty { display: none; }   /* no JS / single quote → no dots */
.quotes__dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}
.quotes__dot:hover { background: rgba(255, 255, 255, .5); }
.quotes__dot.is-on { background: var(--bloom-light); transform: scale(1.25); }

/* Prev / next arrows — parked in the side gutter beside the quote, never over the
   text; hidden once the block meets the padding (the dots still rotate). */
.quotes__arrow {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.quotes__arrow--prev { left: clamp(14px, 1.8vw, 28px); }
.quotes__arrow--next { right: clamp(14px, 1.8vw, 28px); }
.quotes__arrow:hover { border-color: var(--bloom); background: var(--bloom); color: var(--white); }
.quotes__arrow svg { width: 16px; height: 16px; display: block; }
@media (max-width: 1120px) { .quotes__arrow { display: none; } }   /* no gutter → dots only */

/* ============ PRICING ============ */
.pricing { padding: var(--space-section) var(--pad-x); }
.pricing__wrap { max-width: var(--maxw-mid); margin: 0 auto; }
.pricing__head { text-align: center; margin-bottom: clamp(44px, 6vw, 72px); }
.pricing__head .label { margin-bottom: 22px; }
.pricing__title { text-transform: uppercase; margin: 0 auto; max-width: 16ch; font-weight: 900; font-size: clamp(36px, 6vw, 82px); line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
/* 3 tiers: 3-up, then a clean full-width stack. Never a 2-up orphan with a hole. */
@media (max-width: 960px) { .pricing__grid { grid-template-columns: 1fr; } }
.plan {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: clamp(28px, 2.6vw, 40px);
  background: var(--card);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
/* Lit hover, matching the service cards (glow layer = ::before, so no extra markup) */
.plan::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s ease;
}
.pricing__grid .plan:nth-child(1)::before { background: radial-gradient(120% 120% at 30% 0%, var(--c-blue), transparent 60%), radial-gradient(120% 120% at 100% 100%, var(--c-violet), transparent 60%); }
.pricing__grid .plan:nth-child(3)::before { background: radial-gradient(120% 120% at 30% 0%, var(--c-pink), transparent 60%), radial-gradient(120% 120% at 100% 100%, var(--c-amber), transparent 60%); }
.plan:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
.plan:hover::before { opacity: 1; }
.plan__head { display: flex; align-items: center; gap: 10px; }
.plan__name { font-weight: 900; font-size: 26px; letter-spacing: -.02em; }
.plan__kind { margin-top: 4px; font-family: var(--serif); font-size: var(--fs-body); color: var(--label-ink); }
.plan--featured .plan__kind { color: var(--body-dark); }
.pricing__lede { max-width: 52ch; margin: 22px auto 0; font-family: var(--serif); font-size: var(--fs-lede); line-height: 1.5; color: var(--body-light); text-wrap: pretty; }
/* The Afterglow add-on — a signature Bloom box to push the recurring add-on.
   One bold shot of bloom (single hue, bloom -> plum), so it stands out without
   turning into a rainbow. White pill CTA inverts to Ink on hover so it pops. */
.afterglow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(30px, 4vw, 48px) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 4vw, 48px);
  flex-wrap: wrap;
  padding: clamp(28px, 3.4vw, 46px) clamp(26px, 3.6vw, 54px);
  border-radius: 22px;
  background: linear-gradient(110deg, var(--bloom), var(--plum));
  color: var(--white);
  box-shadow: 0 34px 80px -34px rgba(var(--glow-violet), .65);
}
.afterglow__text { max-width: 60ch; }
.afterglow__eyebrow { font-family: var(--serif); font-size: 19px; color: rgba(255, 255, 255, .82); margin-bottom: 8px; }
.afterglow__title { margin: 0 0 10px; font-weight: 900; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1.05; }
.afterglow__desc { margin: 0; font-family: var(--serif); font-size: var(--fs-body); line-height: 1.5; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.afterglow__cta { flex: none; background: var(--white); color: var(--bloom); font-size: clamp(17px, 1.5vw, 20px); padding: 16px 30px; }
.afterglow__cta:hover { background: var(--ink); color: var(--white); }

@media (max-width: 640px) {
  .afterglow { flex-direction: column; align-items: flex-start; }
}
/* Section-level CTA below The Afterglow band — centred white button on the
   dark pricing section (matches the main "Answer a few quick questions" CTA). */
.pricing__cta { display: flex; justify-content: center; }
.pricing__cta .btn--light { margin-top: clamp(40px, 6vw, 60px); }
.plan__desc { margin: 12px 0 22px; font-size: 15px; line-height: 1.5; color: var(--body-light-2); }
.plan__price { font-family: var(--serif); font-size: 20px; color: #000; margin-bottom: 24px; }
.plan__feats { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--body-light); border-top: 1px solid var(--light); }
/* Click affordance — the whole card is a link to work-with-us.html, but that
   wasn't obvious at a glance; a small arrow nudges in on hover, same language
   as .btn's hover arrow, so the card reads as clickable without adding copy. */
.plan__arrow {
  position: absolute;
  right: clamp(22px, 2.4vw, 32px);
  bottom: clamp(22px, 2.4vw, 32px);
  font-family: var(--serif);
  font-size: 24px;
  color: var(--bloom-light);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .3s ease, transform .3s var(--ease);
  pointer-events: none;
}
.plan:hover .plan__arrow { opacity: 1; transform: translate(0, 0); }
.plan--featured { position: relative; isolation: isolate; overflow: hidden; border: 1.5px solid var(--white); background: #000; color: var(--white); }
.plan__glow { position: absolute; z-index: -1; width: 360px; height: 360px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, var(--c-violet), transparent 64%); filter: blur(60px); opacity: .5; transition: opacity .45s ease; }
.plan__badge { font-family: var(--serif); font-size: 20px; padding: 5px 10px; border-radius: 999px; background: linear-gradient(110deg, var(--petal-deep), var(--plum)); color: var(--white); }
.plan--featured .plan__desc { color: var(--body-dark); }
.plan--featured .plan__price { color: var(--white); }
.plan--featured .plan__feats { color: var(--body-dark-3); border-top-color: var(--dark-line); }
/* Featured plan: lift with a brighter purple glow + intensify its existing glow */
.plan--featured:hover { box-shadow: 0 30px 70px -20px rgba(var(--glow-violet), .5); }
.plan--featured:hover .plan__glow { opacity: .85; }

/* The Spotlight — premium tier: a bloom -> plum gradient edge (padding-box/
   border-box keeps the 16px corners) so it reads as the top tier without a
   second filled card competing with the featured Glow-Up. */
#pricing .plan.plan--premium {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#141215, #141215) padding-box,
    linear-gradient(135deg, var(--bloom-light), var(--bloom) 55%, var(--plum)) border-box;
}
#pricing .plan.plan--premium:hover { box-shadow: 0 30px 70px -22px rgba(var(--glow-violet), .45); }

/* ---- Pricing as a DARK section (data-dark) ----
   Ink fill comes from [data-dark]::before; the head + label + "unreachable." accent
   flip to their dark variants automatically. The regular tiers become faint outline
   cards on black so the featured tier (solid white edge + glow) still leads; the
   featured plan's own rules above already fit a dark surface, so leave it untouched. */
.pricing { color: var(--white); }
.pricing__lede { color: var(--body-dark-2); }
.pricing .plan:not(.plan--featured) {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .025);
  color: var(--white);
}
.pricing .plan:not(.plan--featured) .plan__kind  { color: var(--body-dark); }
.pricing .plan:not(.plan--featured) .plan__desc  { color: var(--body-dark); }
.pricing .plan:not(.plan--featured) .plan__price { color: var(--white); }
.pricing .plan:not(.plan--featured) .plan__feats { color: var(--body-dark-3); border-top-color: var(--dark-line); }

/* ============ FAQ ============ */
.faq { padding: var(--space-section) var(--pad-x); }
.faq__wrap { max-width: var(--maxw-mid); margin: 0 auto; }
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q { margin: 0; }
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.6vw, 30px) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .25s ease;
}
.faq__trigger:hover { color: var(--bloom); }
/* Bloom +/- icon: two bars; the vertical one collapses on open (+ becomes -). */
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--bloom);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s ease;
}
.faq__icon::before { width: 18px; height: 2.4px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 2.4px; height: 18px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* Smooth open via grid-rows 0fr -> 1fr (no JS height measuring). Open by default
   so a no-JS visitor still sees every answer; html.js collapses into the accordion. */
.faq__panel { display: grid; grid-template-rows: 1fr; }
html.js .faq__panel { grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
html.js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__answer { overflow: hidden; min-height: 0; }
.faq__answer p {
  margin: 0;
  padding: 0 0 clamp(24px, 3vw, 34px);
  max-width: 70ch;
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--body-light);
  text-wrap: pretty;
}

/* ============ FINAL CTA (dark) ============ */
.cta { position: relative; color: var(--white); padding: var(--space-section-lg) var(--pad-x) var(--space-section); overflow: hidden; text-align: center; }
.cta__inner { position: relative; max-width: var(--maxw-narrow); margin: 0 auto; }
.cta__title { text-transform: uppercase; margin: 0; font-weight: 900; font-size: clamp(48px, 9vw, 140px); line-height: .88; letter-spacing: -.05em; text-wrap: balance; }
.cta__lede { max-width: 42ch; margin: clamp(22px, 3vw, 32px) auto 0; font-family: var(--serif); font-size: var(--fs-lede); line-height: 1.5; color: var(--body-dark-2); text-wrap: pretty; }
.cta__actions { margin-top: clamp(30px, 4vw, 42px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta__actions .btn--light { margin-top: 0; }   /* the container owns the gap above the button here */
.cta__email { margin: 0; font-family: var(--serif); font-size: var(--fs-body); color: var(--muted); }
/* Risk-reversal row — the studio's existing promises, surfaced where they close. */
.cta__trust {
  list-style: none;
  margin: clamp(34px, 5vw, 54px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}
.cta__trust li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: var(--fs-body); color: var(--body-dark-3); }
.cta__trust svg { width: 20px; height: 20px; flex: none; color: var(--bloom-light); }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(56px, 9vw, 96px) auto 0;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--muted);
}
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__badge { width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: #000; display: flex; align-items: center; justify-content: center; flex: none; transform: rotate(-10deg); font-family: var(--sans); font-weight: 900; font-size: 13px; letter-spacing: -.5px; }
.footer__word { font-family: var(--sans); font-weight: 900; font-size: 19px; letter-spacing: -.04em; color: var(--white); }

/* Dark sections paint their fill via a ::before at z-index -2 — behind the
   back-layer petals (z -1) so petals still drift over them, and behind content. */
[data-dark] { position: relative; }
[data-dark]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
[data-dark]::before { background: var(--ink); }

/* ---------- Scroll reveal (progressive enhancement) ---------- */
html.js [data-reveal] { opacity: 0; will-change: opacity, filter; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */

/* Mobile (<768px): the big headline stays centred (the vw/vh-bounded size keeps it
   in the gutter); the cue stays tucked bottom-right, just smaller. */
@media (max-width: 767px) {
  .nav__links { display: none; }
  .hero__cue { font-size: 18px; max-width: 13ch; }
  /* Stack + centre the footer on mobile (desktop keeps brand left / legal right). */
  .footer { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .work-card__img { height: 220px; }
  .work-card__foot { flex-direction: column; gap: 10px; }
  .work-card__stat { text-align: left; max-width: none; }
}

/* ===========================================================
   REDUCED MOTION — content visible, motion off
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .cursor { display: none !important; }
  html.bh-cursor, html.bh-cursor * { cursor: auto !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Falling petals are pure motion — remove them entirely for reduced motion. */
  .petals { display: none !important; }
}

/* ===========================================================
   WORK WITH US — intake flow   (work-with-us.html + intake.js)
   A calm, one-question-at-a-time conversation, not a form. One
   non-scrolling stage fills the viewport under the fixed nav:
   a short intro moment, then each question fades/slides through
   the centre. Oversized Archivo questions, Instrument Serif detail,
   a single shot of Bloom for selection + the progress line. Reuses
   the site nav, petals and cursor so it feels native. All motion
   respects prefers-reduced-motion (handled by the global block above
   plus the explicit fallbacks here).
   =========================================================== */

/* The stage is transparent so the back-layer petals (z -1) and the
   Mist body canvas show through; the thank-you screen paints Ink via
   a fixed ::before that sits BEHIND the petals, so they keep drifting
   over the dark close. */
.intake {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + clamp(14px, 3vh, 28px)) var(--pad-x) clamp(28px, 5vh, 56px);
  transition: color .6s var(--ease);
}
.intake::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;                      /* behind the back petals (z -1) */
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ease);
}
.intake.is-thanks::before { opacity: 1; }

/* No-JS: the flow needs scripting, so offer a plain way to reach out. */
.intake__noscript {
  margin: auto;
  max-width: 46ch;
  text-align: center;
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--body-light);
}
html.js .intake__noscript { display: none; }

/* ---------- Progress: serif label + count, thin glowing Bloom line ---------- */
.intake__progress {
  width: 100%;
  max-width: 760px;
  margin: 0 auto clamp(26px, 6vh, 60px);
  flex: none;
}
.intake__progress[hidden] { display: none; }
.intake__progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
.intake__count {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--label-ink);
}
.intake__bar {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.intake__bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bloom), var(--plum));
  box-shadow: 0 0 14px rgba(var(--glow-violet), .6);
  transition: width .6s var(--ease);
}

/* ---------- Stage + card ---------- */
.intake__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.intake__card {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .42s var(--ease), transform .42s var(--ease), filter .42s var(--ease);
}
/* Outgoing card lifts and softens up; incoming rises from just below. */
.intake__card.is-leaving  { opacity: 0; transform: translateY(-16px); filter: blur(5px); }
.intake__card.is-entering { opacity: 0; transform: translateY(20px);  filter: blur(7px); }

/* ---------- Question typography ---------- */
.intake__q {
  margin: 0;
  font-weight: 900;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  color: var(--ink);
  outline: none;                   /* it is focused on each step for SR users; the
                                      heading itself shows no focus ring */
}
.intake__help {
  margin: clamp(13px, 2vw, 20px) 0 0;
  max-width: 46ch;
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--body-light-2);
  text-wrap: pretty;
}

/* ---------- Option buttons ---------- */
.intake__options {
  margin: clamp(24px, 4vw, 38px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intake__methods { flex-direction: row; flex-wrap: wrap; }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.3;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: clamp(15px, 2vw, 19px) clamp(18px, 2.4vw, 24px);
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s ease,
              box-shadow .3s ease, background-color .25s ease;
}
.opt--inline { width: auto; flex: 1 1 170px; justify-content: flex-start; }
.opt:hover {
  transform: translateY(-2px);
  border-color: var(--bloom);
  box-shadow: 0 16px 36px -22px rgba(var(--glow-violet), .6);
}
/* The selection mark — a ring that fills Bloom with a tick. Conveys state with
   shape + fill + a check glyph, never colour alone. */
.opt__mark {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1.6px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease, background-color .25s ease;
}
.opt__mark svg {
  width: 13px; height: 13px;
  color: var(--white);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s ease, transform .25s var(--ease);
}
.opt[aria-pressed="true"] {
  border-color: var(--bloom);
  background: rgba(var(--glow-violet), .06);
  box-shadow: inset 0 0 0 1.5px var(--bloom), 0 18px 42px -24px rgba(var(--glow-violet), .65);
}
.opt[aria-pressed="true"] .opt__mark { background: var(--bloom); border-color: var(--bloom); }
.opt[aria-pressed="true"] .opt__mark svg { opacity: 1; transform: scale(1); }
.opt__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.opt__label { display: block; }
/* Context line under an option's label — for choices visitors can't be
   expected to recall unprompted (e.g. the pricing package names). */
.opt__hint { display: block; font-size: 15px; line-height: 1.4; color: var(--label-ink); }

/* ---------- Text fields ---------- */
.intake__field { margin: clamp(24px, 4vw, 38px) 0 0; display: flex; flex-direction: column; gap: 10px; }
.intake__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 26px) clamp(20px, 3vw, 30px);
}
.intake__label { font-family: var(--serif); font-size: 18px; color: var(--label-ink); }
.intake__input {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 2px;
  width: 100%;
  transition: border-color .25s ease, box-shadow .3s ease;
}
.intake__textarea {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.45;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: 16px 18px;
  width: 100%;
  min-height: 118px;
  resize: vertical;
  transition: border-color .25s ease, box-shadow .3s ease;
}
.intake__input::placeholder, .intake__textarea::placeholder { color: #9a9a9a; }
.intake__input:focus { border-color: var(--bloom); box-shadow: 0 2px 0 0 rgba(var(--glow-violet), .3); }
.intake__textarea:focus { outline: none; border-color: var(--bloom); box-shadow: 0 0 0 3px rgba(var(--glow-violet), .14); }

/* A field that only appears once a contact method is chosen. */
.intake__reveal { margin-top: clamp(20px, 3vw, 28px); }

/* ---------- Actions: subtle Back + primary Next ---------- */
.intake__actions {
  margin: clamp(28px, 5vw, 46px) 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.intake__back {
  order: 1;
  background: none;
  border: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--label-ink);
  cursor: pointer;
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color .25s ease, transform .25s var(--ease);
}
.intake__back span { transition: transform .25s var(--ease); }
.intake__back:hover { color: var(--bloom); }
.intake__back:hover span { transform: translateX(-4px); }
.intake__back[hidden] { display: none; }
.intake__next {
  order: 2;
  margin-left: auto;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  border: 0;
  border-radius: 16px;
  padding: 16px 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform .28s var(--ease), background-color .28s ease, box-shadow .28s ease, opacity .25s ease;
}
.intake__next span { font-size: .82em; transition: transform .28s var(--ease); }
.intake__next:not(:disabled):hover { background: var(--bloom); box-shadow: 0 18px 44px -18px rgba(var(--glow-violet), .6); }
.intake__next:not(:disabled):hover span { transform: translateX(4px); }
.intake__next:disabled { opacity: .38; cursor: not-allowed; }

/* ---------- Intro screen ---------- */
.intake__intro { text-align: center; max-width: 900px; margin: 0 auto; }
.intake__intro-copy {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 50px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
/* Intro entrance: the copy fades in WORD BY WORD. JS wraps every word in a
   .intake__word span carrying its index as --i; .is-in (added one tick after
   mount) releases them, each delayed by --i so they bloom in sequence. The
   reduced-motion block neutralises it so the whole line just appears. */
.intake__intro-copy .intake__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.intake__intro.is-in .intake__intro-copy .intake__word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- Thank-you screen (Ink) ---------- */
.intake.is-thanks { color: var(--white); }
.intake__thanks { text-align: center; max-width: 820px; margin: 0 auto; }
.intake__thanks-title {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(38px, 6.5vw, 92px);
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
  color: var(--white);
}
.intake__thanks-copy {
  margin: clamp(20px, 3vw, 30px) auto 0;
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--body-dark-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .intake__field-grid { grid-template-columns: 1fr; }
  .intake__actions { flex-wrap: wrap; }
  .intake__next { order: 1; width: 100%; justify-content: center; margin-left: 0; }
  .intake__back { order: 2; margin: 2px auto 0; }
  .opt--inline { flex: 1 1 100%; }
}

/* ---------- Reduced motion: show the intro instantly, no card blur/slide ---------- */
@media (prefers-reduced-motion: reduce) {
  .intake__intro-copy .intake__word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .intake__card { transition: none !important; }
  .intake__card.is-leaving, .intake__card.is-entering { opacity: 1 !important; transform: none !important; filter: none !important; }
  .intake::before { transition: none !important; }
}