/* ════════════════════════════════════════════════════════
   VH DESIGNS & CO — concept design system
   paper · ink · ice — from Verena's social template system
   ════════════════════════════════════════════════════════ */

/* ── Fonts, stored on this site (no Google Fonts request) ──
   Host Grotesk and Onest, SIL Open Font License. Variable files, latin and
   latin-ext, taken from the same subsets Google Fonts served. */
@font-face { font-family:'Host Grotesk'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('Assets/fonts/host-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Host Grotesk'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('Assets/fonts/host-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Host Grotesk'; font-style:italic; font-weight:300 800; font-display:swap;
  src:url('Assets/fonts/host-grotesk-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Host Grotesk'; font-style:italic; font-weight:300 800; font-display:swap;
  src:url('Assets/fonts/host-grotesk-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('Assets/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('Assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper:    #F6F1E9;
  --cream:    #F8F6F3;
  --ink:      #1E1A18;
  --ink-70:   rgba(30,26,24,.7);
  --ink-60:   rgba(30,26,24,.68); /* raised from .6 — .6 measured 4.36:1 on paper, fails WCAG AA 4.5:1 for the body copy it's used on */
  --ink-40:   rgba(30,26,24,.64); /* raised from .4 — .4 measured 2.45:1 on paper, fails WCAG AA even for large text */
  --ink-15:   rgba(30,26,24,.14);
  --ink-08:   rgba(30,26,24,.08);
  --ice:      #D6EFF4;
  --ice-deep: #A8D8E4;
  --paper-70: rgba(246,241,233,.7);
  --paper-50: rgba(246,241,233,.5);
  --paper-15: rgba(246,241,233,.15);
  --display:  'Host Grotesk', sans-serif;
  --body:     'Onest', sans-serif;
  --gutter:   clamp(20px, 4vw, 72px);
  --maxw:     1680px;
  --ease:     cubic-bezier(.22,1,.36,1);

  /* ── Hero type scale ───────────────────────────────────────────────
     One scale, three steps, ratio 1.15 at every width. Each step is a
     single clamp that rises in a straight line from 375px to 1600px and
     then holds, so the type is continuous and never jumps at a
     breakpoint. Every <h1> on the site takes one of these three, and the
     step is the ONLY size difference between one page family and the
     next. Nothing sets its own hero font size.

       h1-hero   the homepage, the one page allowed to shout
       h1-page   about, work, contact, the service pages, 404
       h1-doc    the resources hub, the articles, the legal pages

     Measured: 32 / 28 / 24.5 at 375, 50 / 43 / 38 at 768,
               73 / 64 / 55 at 1280, 88 / 76 / 66 at 1600 and above.

     The 32px floor is set by the longest authored line on the site,
     "Brands that grow", which is the widest 16 characters in the font.
     At 34px it broke in two on a 375px phone.
     ────────────────────────────────────────────────────────────────── */
  --fs-h1-hero: clamp(36px, 1rem + 5.6vw, 104px);
  --fs-h1-page: clamp(31px, .8rem + 5vw, 94px);
  --fs-h1-doc:  clamp(24.5px, 0.74rem + 3.39vw, 66px);
  --lh-h1:      .96;
  --ls-h1:      -.022em;

  /* supporting sizes, shared by every hero so the whole block scales as
     one thing. 14px is the floor for anything a visitor has to read. */
  --fs-lede:  clamp(16px, .82rem + .5vw, 19px);
  --fs-label: 14px;
  /* height of the eyebrow row plus its margin, so a hero without an eyebrow
     can reserve exactly the same space */
  --eyebrow-block: calc(var(--fs-label) * 1.6 + 18px + clamp(18px, 2.4vh, 26px));

  /* ── Hero geometry ──────────────────────────────────────────────────
     One lockup: copy column, then a portrait pill in a fixed column.
     --nav-h is the real height of the top bar (46px logo + 2x22 padding),
     and the hero's top padding never drops below it plus breathing room,
     with or without the promo bar. */
  --nav-h:        90px;
  --promo-h:      0px;
  --hero-pad-top: clamp(116px, 8vw + 62px, 172px);
  --hero-pad-bot: clamp(48px, 7vh, 88px);
  --hero-min:     clamp(520px, 72svh, 740px);
  --hero-min-lg:  clamp(600px, 92svh, 980px);
  --hero-gap:     clamp(28px, 5vw, 88px);
  --media-w:      clamp(196px, 24vw, 340px);
  --media-w-lg:   clamp(228px, 26vw, 400px);
  --ratio-pill:   3 / 4;
  --ratio-plate:  16 / 9;
  --media-tilt:   0deg;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* clip, not hidden, where supported: hidden turns body into a scroll
   container and stops position:sticky (the From Scratch journey) working */
@supports (overflow:clip) { body { overflow-x:clip; } }
::selection { background:var(--ice); color:var(--ink); }
a { color:inherit; text-decoration:none; }
/* height:auto is load-bearing. The width/height HTML attributes on every <img>
   (added for CLS) act as presentational hints: with only `width` set in CSS, the
   attribute supplies the height, both dimensions become definite, and every
   `aspect-ratio` rule below is silently ignored — images stretch to their full
   intrinsic pixel height. This restores aspect-ratio while keeping the
   attributes' layout-reservation benefit. Rules that genuinely need a fixed
   height (.hero-pill, .about-pill, .band, .zero-media) are class selectors and
   still win over this. */
img { display:block; max-width:100%; height:auto; }

/* visible to screen readers only — used to give an otherwise-unlabelled
   group of headings (e.g. .fit, .c-cards) a governing <h2> without
   changing anything sighted visitors see */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Keyboard focus (WCAG 2.4.7) — deliberate, on-brand, instead of relying
   on each browser's own default ring, which is inconsistent and easy to
   lose track of on rounded custom cards ── */
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.talk :focus-visible,
.impact :focus-visible,
.float-nav :focus-visible,
.mobile-drawer :focus-visible,
.on-ink :focus-visible { outline-color:var(--paper); }

/* Any new dark block gets .on-ink so its focus ring stays visible. Without it
   the ring is ink on ink and a keyboard user loses their place entirely. The
   four named blocks above predate the class and keep working as they are. */
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:var(--paper); }
::-webkit-scrollbar-thumb { background:var(--ink); border-radius:99px; border:3px solid var(--paper); }

/* paper grain */
body::after {
  content:''; position:fixed; inset:-50%; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity:.09; animation:grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,2%)}
}

/* ── Loader curtain ── */
.loader {
  position:fixed; inset:0; z-index:5000;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:transform .7s var(--ease);
}
.loader.done { transform:translateY(-101%); }
.loader-word {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(30px,5vw,64px); text-transform:uppercase; letter-spacing:-.01em;
}
.loader-word .ice { color:var(--ice); }
body.no-loader .loader { display:none; }

/* ── Custom cursor (fine pointers only) ── */
@media (pointer:fine) {
  .cursor-dot, .cursor-ring {
    position:fixed; top:0; left:0; z-index:4000; pointer-events:none;
    border-radius:50%; transform:translate(-50%,-50%);
  }
  .cursor-dot { width:8px; height:8px; background:var(--ink); }
  .cursor-ring {
    width:38px; height:38px; border:1.5px solid var(--ink-40);
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s var(--ease), background-color .3s, border-color .3s;
  }
  .cursor-ring .cursor-label {
    font-family:var(--display); font-size:12px; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
    opacity:0; transition:opacity .2s;
  }
  /* grow with transform, not width/height; border and label counter-scaled so they keep their size */
  .cursor-ring.is-link { transform:translate(-50%,-50%) scale(1.474); border-width:1px; border-color:var(--ice-deep); background:rgba(214,239,244,.25); }
  .cursor-ring.is-view { transform:translate(-50%,-50%) scale(1.947); border-width:.8px; background:var(--ice); border-color:var(--ice); }
  .cursor-ring.is-view .cursor-label { opacity:1; transform:scale(.514); }
  .cursor-dot.is-hidden, .cursor-ring.is-hidden { opacity:0; }
}
@media (pointer:coarse) { .cursor-dot, .cursor-ring { display:none; } }

/* ── Signature elements ── */
.pill-badge {
  display:inline-block; text-align:center;
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  background:var(--ice); color:var(--ink);
  border:1px solid var(--ink);
  padding:8px 22px; border-radius:999px;
}
.rule-badge { display:flex; align-items:center; gap:18px; }
.rule-badge::before, .rule-badge::after { content:''; height:1px; background:var(--ink); flex:1; }

/* Section-intro eyebrows: the same chip badge was repeating on nearly every
   section of every page (pulls, journey, craft, walk, faq, process, services,
   principles, insta). Kept the label so screen readers and quick-scanning
   still get the same headings, but dropped the pill/button look so the page
   doesn't read as one template stamped over and over. The rule lines from
   .rule-badge already carry the "section break" job on their own. */
.pulls-head .pill-badge, .journey-head .pill-badge, .craft-head .pill-badge,
.walk-head .pill-badge, .faq-head .pill-badge, .process-head .pill-badge,
.services-head .pill-badge, .principles-head .pill-badge, .insta-head .pill-badge {
  background:none; border:0; padding:0; border-radius:0; color:var(--ink);
  /* Real heading scale, not a 12px chip. Uppercase display matches h1/h3 across
     the site; the wide .24em label tracking is dropped for display tracking so
     these read as section headings instead of a repeated eyebrow stamp. */
  font-size:clamp(19px,2.1vw,28px); font-weight:800;
  letter-spacing:-.015em; line-height:1.05; text-wrap:balance;
}

.hl {
  background-image:linear-gradient(180deg, transparent 55%, var(--ice) 55%, var(--ice) 92%, transparent 92%);
  background-size:0% 100%; background-repeat:no-repeat;
}
.hl.in { animation:sweep .8s var(--ease) .5s forwards; }
@keyframes sweep { to { background-size:100% 100%; } }

.swoosh { display:block; margin-top:10px; }
.swoosh path {
  fill:none; stroke:var(--ice-deep); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600;
}
.in .swoosh path { animation:draw 1s var(--ease) .9s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }

.bgword {
  position:absolute; pointer-events:none; user-select:none;
  font-family:var(--display); font-weight:800;
  line-height:.8; text-transform:uppercase; letter-spacing:-.01em;
  color:transparent; -webkit-text-stroke:1px var(--ink-15);
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  /* 14px, not 13: the primary control on the page should not be the
     smallest text on it. Same reason for .link-under below. */
  font-family:var(--display); font-size:14px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700;
  color:var(--paper); background:var(--ink);
  padding:18px 34px; border-radius:999px;
  border:1px solid var(--ink);
  transition:background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn:hover { background:var(--ice); color:var(--ink); }
.btn .arr { transition:transform .3s var(--ease); }
.btn:hover .arr { transform:translateX(5px); }
.btn-ice { background:var(--ice); color:var(--ink); border-color:var(--ice); }
.btn-ice:hover { background:transparent; color:var(--ice); border-color:var(--ice); }
.btn-paper { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-paper:hover { background:var(--ice); border-color:var(--ice); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--paper); }

.link-under {
  font-family:var(--display); font-size:14px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700;
  border-bottom:2px solid var(--ice-deep); padding-bottom:4px;
  display:inline-flex; align-items:flex-end; min-height:32px;
  transition:color .3s;
}
.link-under:hover { color:var(--ink-60); }

/* ── Nav (top, absolute) ── */
.nav {
  position:absolute; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
}
.nav-logo img { height:46px; width:auto; }
.nav-right { display:flex; align-items:center; gap:clamp(18px,3vw,38px); }
.nav-right a {
  font-family:var(--display); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600;
  position:relative; padding-bottom:2px;
}
.nav-right a::after {
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--ice-deep); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-right a:hover::after, .nav-right a.active::after { transform:scaleX(1); transform-origin:left; }
.nav-right .nav-cta {
  background:var(--ink); color:var(--paper);
  padding:12px 24px; border-radius:999px;
  transition:background .3s, color .3s;
}
.nav-right .nav-cta::after { display:none; }
.nav-right .nav-cta:hover { background:var(--ice); color:var(--ink); }

/* mobile hamburger + drawer (injected by JS) */
.nav-burger {
  /* box is 44x44 for a WCAG-friendly tap target; the visible icon inside stays the original size */
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; z-index:210;
}
.nav-burger span { height:2px; width:24px; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-drawer {
  position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:var(--gutter); transform:translateY(-101%); transition:transform .5s var(--ease);
}
.mobile-drawer.open { transform:none; }
.md-close {
  position:absolute; top:22px; right:var(--gutter); z-index:2;
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  background:none; border:1px solid var(--paper); border-radius:999px;
  color:var(--paper); padding:11px 20px; min-height:44px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .3s, color .3s;
}
.md-close:hover { background:var(--paper); color:var(--ink); }
.mobile-drawer a {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em; color:var(--paper);
  font-size:clamp(32px,10vw,56px); line-height:1.05; padding:6px 0;
}
.mobile-drawer a.md-cta { color:var(--ice); font-style:italic; }
.mobile-drawer a.md-lang {
  position:absolute; right:var(--gutter); bottom:26px;
  font-size:13px; font-weight:600; letter-spacing:.14em;
  padding:8px 12px; margin-right:-12px; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:flex-end;
  color:var(--paper-50);
}
.mobile-drawer a.md-lang:hover { color:var(--ice); }
body.drawer-open { overflow:hidden; }

/* floating pill nav — appears after the hero */
.float-nav {
  position:fixed; top:14px; left:50%; z-index:300;
  transform:translate(-50%,-140%);
  display:flex; align-items:center; gap:4px;
  background:var(--ink); border-radius:999px;
  padding:7px 8px 7px 18px;
  box-shadow:0 12px 40px rgba(30,26,24,.25);
  transition:transform .55s var(--ease);
}
.float-nav.show { transform:translate(-50%,0); }
.float-nav .fn-mark {
  font-family:var(--display); font-weight:800; font-style:italic;
  color:var(--paper); font-size:15px; margin-right:10px; letter-spacing:0;
}
.float-nav a {
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-70); padding:9px 13px; border-radius:999px;
  white-space:nowrap;
  transition:color .25s, background .25s;
}
.float-nav a:hover { color:var(--paper); }
.float-nav a.fn-cta { background:var(--ice); color:var(--ink); }
.float-nav a.fn-cta:hover { background:var(--paper); }

/* ══════════════════════════════════════════════════════════════════════
   HERO SYSTEM
   One geometry for every page, three steps of one type scale, one media
   frame. The three hero classes that used to compete (.hero, .p-hero and
   .p-hero.hero-split, each with its own h1 clamp) are now one pattern:

     <header class="p-hero hero-split [variant]">      shell
       <div class="hs-inner">                          the lockup
         <div class="hs-copy">  crumb, h1, lede, cta </div>
         <div class="hs-media"> one portrait pill     </div>
       </div>
     </header>

   .hero replaces .p-hero on the homepage only, because the homepage
   carries the full-viewport shell, the scroll cue and the loader. It is
   otherwise the same lockup one step up the scale.

   Variants, and there are only three:
     .hero--home   homepage, step 1, wider media column, no eyebrow
     .hero--about  media mirrored to the left, the page about a person
     .hero--solo   single column, no media (404)
   ══════════════════════════════════════════════════════════════════════ */

/* ── shell ──
   Every hero owns the whole first screen: nothing of the next section shows
   until you scroll. Full bleed, so the light layers below reach the edges of
   the window; the lockup itself is held to --maxw by .hs-inner. */
.hero, .p-hero {
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(96px,13vh,140px);
  min-height:calc(100svh - var(--promo-h));
  --px:0; --py:0;              /* pointer, -1..1, set by vhd.js */
  --halo-x:80%; --halo-y:50%;  /* where the light pools: behind the portrait */
}

/* ── lockup ── */
.hs-inner {
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) var(--media-w);
  align-items:start; gap:var(--hero-gap);
}
.hero--home .hs-inner { grid-template-columns:minmax(0,1fr) var(--media-w-lg); }
/* the only mirrored hero on the site, and it is mirrored on purpose */
.hero--about .hs-inner { grid-template-columns:var(--media-w) minmax(0,1fr); }
.hero--about .hs-media { order:-1; justify-self:start; --media-tilt:-2.5deg; }
.hero--about { --halo-x:20%; }
.hero--solo { --halo-x:72%; --halo-y:40%; }
.hero--solo .hs-inner { grid-template-columns:minmax(0,1fr); }

.hs-copy, .hero-copy { min-width:0; position:relative; z-index:2; }
.hs-media, .hero-media { position:relative; z-index:2; width:100%; justify-self:end; }

.hero-bgword {
  right:-.06em; top:4%; z-index:0;
  font-size:clamp(120px,24vh,300px);
  writing-mode:vertical-rl;
}

/* ── eyebrow ──
   Page level, so one step up from the 12px section eyebrows further down
   the page. The surface is the one thing that changes per page family. */
.hero .crumb, .p-hero .crumb {
  display:flex; align-items:center; gap:14px;
  margin:0 0 clamp(18px,2.4vh,26px);
  font-family:var(--display); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
.hero .crumb .pill-badge, .p-hero .crumb .pill-badge {
  font-size:var(--fs-label); padding:9px 22px; color:var(--ink);
}
/* About is the one page about a person, not a service: solid ink eyebrow. */
.hero--about .crumb .pill-badge { background:var(--ink); color:var(--paper); }
/* Work and Contact are destinations rather than offers: outlined eyebrow. */
.hero--plain .crumb .pill-badge { background:transparent; }

/* ── headline ──
   Size comes from the scale and nothing else. text-wrap:balance is what
   stops the last word falling on a line of its own, which happened on
   five of the nine page heroes at 375. */
.hero h1, .p-hero h1 {
  font-family:var(--display); font-weight:800;
  font-size:var(--fs-h1-page);
  line-height:var(--lh-h1); letter-spacing:var(--ls-h1);
  text-transform:uppercase; text-wrap:balance;
  max-width:17ch;
}
.hero--home h1 { font-size:var(--fs-h1-hero); max-width:16ch; }
/* Side by side, the homepage lines are set to hold as three lines: capped by
   the width so "Systems that keep" never breaks into a fourth and fifth. */
@media (min-width:821px) { .hero--home h1 { font-size:min(var(--fs-h1-hero), 5.6vw); max-width:none; } }
@media (max-width:820px) { .hero--home h1 { font-size:min(var(--fs-h1-hero), 8.4vw); max-width:none; } }
.hero h1 .line, .p-hero h1 .line { display:block; overflow:hidden;
  /* breathing room so the descenders and the .hl band are not clipped */
  padding-bottom:.2em; margin-bottom:-.2em; }
.hero h1 .line > span, .p-hero h1 .line > span { display:block; transform:translateY(110%); animation:rise 1s var(--ease) forwards; }
.hero h1 .line:nth-child(2) > span, .p-hero h1 .line:nth-child(2) > span { animation-delay:.12s; }
.hero h1 .line:nth-child(3) > span, .p-hero h1 .line:nth-child(3) > span { animation-delay:.22s; }
.hero h1 em, .p-hero h1 em { font-style:italic; font-weight:800; }
@keyframes rise { to { transform:translateY(0); } }

/* ── lede and actions ── */
.hero .lede, .p-hero .lede {
  margin-top:clamp(18px,2.4vh,26px);
  font-size:var(--fs-lede); line-height:1.55;
  color:var(--ink-60); max-width:46ch;
}
.hero-sub, .p-hero .p-hero-cta {
  margin-top:clamp(24px,3.4vh,38px);
  display:flex; align-items:center; gap:clamp(18px,2.2vw,26px); flex-wrap:wrap;
}
.hero-sub { opacity:0; animation:fade 1s ease .75s forwards; }
@keyframes fade { to { opacity:1; } }
/* The button is the second thing you see, not the first: slimmer than the
   page buttons further down so the headline sets the scale. */
.hero .btn, .p-hero .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }

/* ── base line: strapline left, scroll cue right, on the floor of the screen ── */
.hero-base {
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(26px,4.4vh,44px);
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.hero-tags {
  font-family:var(--display); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
.hero-cue {
  width:1px; height:clamp(44px,6.5vh,68px); margin-left:auto;
  background:var(--ink-15); position:relative; overflow:hidden;
}
.hero-cue::after {
  content:''; position:absolute; left:0; right:0; top:0; height:42%;
  background:var(--ink); animation:cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop { from { transform:translateY(-100%); } to { transform:translateY(240%); } }

/* ── media: one frame, one ratio, everywhere ──
   3/4 portrait pill, ink hairline, ice behind it while the photo loads.
   The width is the only thing that changes, and it changes once: the
   homepage pill is one step wider than every inner page. */
.hero-pill, .hs-media .pill-frame-sm {
  border-radius:999px; overflow:hidden;
  aspect-ratio:var(--ratio-pill); background:var(--ice);
  border:1px solid var(--ink);
  transform:rotate(var(--media-tilt));
}
.hero-pill {
  opacity:0; translate:0 28px;
  animation:archIn 1.1s var(--ease) .35s forwards;
}
@keyframes archIn { to { opacity:1; translate:0 0; } }
.bw { filter:grayscale(1) contrast(1.05); transition:filter .8s ease, transform 1s var(--ease); }
.pill-frame:hover .bw, .hero-pill:hover .bw { filter:grayscale(0); }
.hero-pill img, .hs-media img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05); transition:filter .8s ease, transform 1s var(--ease);
}
.hero-pill img { transform:scale(1.06); }
.hero-pill:hover img, .hs-media:hover img { filter:grayscale(0); }
.hero-pill:hover img { transform:scale(1.1); }

/* ── depth: a lit wall, three planes ──
   Behind the lockup: window light from the top left, a spotlight where the
   portrait hangs and a little warm shade across from it, both fading out well inside the hero so there is never
   a seam with the section below. Around the portrait: an ice arch behind it
   and a hairline arch further back, so the photo reads as an object hanging
   in front of the wall. The pointer moves each plane by a different amount
   (--px, --py from vhd.js), which is where the depth comes from. */
.hero::before, .p-hero::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46vw 40vw at 10% 0%, rgba(255,255,255,.78), rgba(255,255,255,0) 72%),
    radial-gradient(40vw 34vw at calc(var(--halo-x) + var(--px) * 3%) calc(var(--halo-y) - 8% + var(--py) * 4%),
      rgba(255,255,255,.72), rgba(255,255,255,.3) 46%, rgba(255,255,255,0) 76%),
    radial-gradient(30vw 26vw at calc(100% - var(--halo-x)) 74%, rgba(124,108,90,.07), rgba(124,108,90,0) 72%);
}
.hs-media::before, .hs-media::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:999px;
}
.hs-media::before {
  background:var(--ice);
  transform:translate(-17%, 8%) rotate(-5deg);
  translate:calc(var(--px) * -14px) calc(var(--py) * -10px);
  animation:archOut 1.3s var(--ease) .6s both;
}
.hs-media::after {
  border:1px solid rgba(30,26,24,.22);
  transform:translate(7%, -6%) rotate(5deg) scale(1.03);
  translate:calc(var(--px) * -26px) calc(var(--py) * -20px);
  animation:archOut 1.5s var(--ease) .75s both;
  z-index:-2;
}
.hero--about .hs-media::before { transform:translate(17%, 8%) rotate(5deg); }
.hero--about .hs-media::after { transform:translate(-7%, -6%) rotate(-5deg) scale(1.03); }
.hs-media:has(.wframe)::before, .hs-media:has(.wframe)::after { display:none; }
@keyframes archOut { from { transform:none; opacity:0; } }
.hs-media { translate:calc(var(--px) * 8px) calc(var(--py) * 6px); }
/* the portrait lifts off the wall: offset, soft, two distances */
.hero-pill, .hs-media .pill-frame-sm {
  box-shadow:0 1px 2px rgba(30,26,24,.08),
             0 24px 44px -26px rgba(30,26,24,.34),
             0 60px 90px -56px rgba(30,26,24,.4);
}

/* scroll cue */
.scroll-cue {
  position:absolute; bottom:26px; left:var(--gutter); z-index:3;
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-40);
  opacity:0; animation:fade 1s ease 1.3s forwards;
}
.scroll-cue .cue-line { width:44px; height:1px; background:var(--ink-40); position:relative; overflow:hidden; }
.scroll-cue .cue-line::after {
  content:''; position:absolute; inset:0; background:var(--ink);
  animation:cueSlide 1.8s var(--ease) infinite;
}
@keyframes cueSlide { 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ── Marquee ── */
.marquee {
  background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap; padding:16px 0;
}
.marquee-track { display:inline-block; animation:slide 26s linear infinite; }
.marquee span {
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(15px,1.8vw,20px);
  padding:0 1.6vw;
}
.marquee .ice { color:var(--ice); }
@keyframes slide { to { transform:translateX(-50%); } }
.marquee-paper { background:var(--ice); color:var(--ink); }
.marquee-paper .ice { color:var(--ink); opacity:.4; }

/* ── Client names line ── */
.clients {
  padding:clamp(40px,7vh,72px) var(--gutter);
  border-bottom:1px solid var(--ink-15);
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.clients .clients-label {
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-40);
}
.clients ul {
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px 34px;
}
.clients li {
  font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.5vw,19px); text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-40); transition:color .3s;
}
.clients li:hover { color:var(--ink); }

/* ── Service rows ── */
.services { padding:clamp(80px,12vh,160px) var(--gutter); position:relative; max-width:var(--maxw); margin-inline:auto; }
.services-head { display:flex; justify-content:center; margin-bottom:clamp(36px,6vh,64px); }
.srow {
  /* Fixed second column: `auto` sized to each row's own text, so the thumbnail
     and copy landed at a different x on every row and read as misaligned. */
  display:grid; grid-template-columns:1fr minmax(0,340px);
  align-items:center; gap:clamp(16px,3vw,48px);
  padding:clamp(26px,4.5vh,44px) 12px;
  border-top:1px solid var(--ink);
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease);
}
.srow:last-of-type { border-bottom:1px solid var(--ink); }
.srow::before {
  content:''; position:absolute; inset:0; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease); z-index:0;
}
.srow:hover::before { transform:scaleY(1); }
.srow > * { position:relative; z-index:1; }
.srow h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(28px,4.4vw,60px); line-height:1;
  transition:color .4s;
}
.srow .desc {
  font-size:14px; color:var(--ink-60);
  display:flex; align-items:center; justify-content:flex-start; gap:18px;
  transition:color .4s;
}
/* The <picture> wrapper is the flex item, not the <img> inside it. flex-shrink:0
   on .thumb never applied to the wrapper, so rows with longer copy squeezed the
   picture and their text started further left than rows with short copy. Pin the
   wrapper and every description starts at the same x. */
.srow .desc > picture { flex:0 0 96px; display:block; }
.srow .desc > picture img { width:100%; }
.srow .thumb {
  width:96px; height:60px; border-radius:999px;
  object-fit:cover; object-position:center; flex-shrink:0; border:1px solid var(--paper);
  filter:grayscale(1);
  opacity:0; transform:translateX(16px);
  transition:opacity .45s ease, transform .5s var(--ease);
}
.srow:hover { transform:translateX(16px); }
.srow:hover h3 { color:var(--paper); font-style:italic; }
.srow:hover .desc { color:var(--ice); }
.srow:hover .thumb { opacity:1; transform:translateX(0); }
.services-foot { margin-top:34px; text-align:center; }

/* ── Process ── */
.process { padding:clamp(80px,12vh,160px) var(--gutter); background:var(--cream); }
.process-head { display:flex; justify-content:center; margin-bottom:clamp(40px,7vh,72px); }
.process-head .rule-badge { width:100%; }
.process-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px); max-width:1280px; margin:0 auto;
}
.pstep {
  border:1px solid var(--ink); border-radius:26px;
  padding:clamp(26px,3.5vw,44px);
  background:var(--paper); position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;
}
.pstep:hover { transform:translateY(-8px); box-shadow:8px 8px 0 var(--ink); background:var(--ice); }
.pstep h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:clamp(20px,2vw,27px);
  letter-spacing:-.01em; margin-bottom:12px;
}
.pstep p { font-size:14.5px; color:var(--ink-60); }

/* ── Impact (full-bleed b/w statement) ── */
.impact {
  position:relative; min-height:88svh;
  display:flex; align-items:center; justify-content:flex-start;
  text-align:left; overflow:hidden;
  padding:clamp(80px,12vh,140px) var(--gutter);
}
.impact .bgimg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:0% 35%;
  transform:scale(1.3) translateX(7%);
  filter:grayscale(1) contrast(1.05) brightness(.55);
}
.impact::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(15,13,12,.72) 0%, rgba(15,13,12,.45) 55%, rgba(15,13,12,.05) 100%);
}
.impact .inner { position:relative; z-index:2; color:#fff; max-width:min(780px, 56vw); }
.impact .pill-badge { border-color:transparent; }
.impact h2 {
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(32px,5vw,74px); line-height:1;
  margin:28px 0 8px;
}
/* The swoosh gets its own room under the phrase (padding on an inline-block
   grows that line), sized in em so it clears the words at every font size
   instead of hanging into the next line. */
.impact h2 .u { position:relative; display:inline-block; white-space:nowrap; padding-bottom:.34em; }
.impact h2 .u .swoosh { position:absolute; left:0; right:0; bottom:.02em; width:100%; height:.3em; margin:0; }
.impact p { color:rgba(255,255,255,.75); max-width:44ch; margin:22px 0 34px; }

/* ── From-scratch band ── */
.zero {
  background:var(--ice); position:relative; overflow:hidden;
  padding:clamp(80px,12vh,150px) var(--gutter);
}
.zero .bgword { left:-.05em; bottom:-.24em; font-size:clamp(130px,20vw,320px); -webkit-text-stroke-color:rgba(30,26,24,.09); }
.zero-inner {
  max-width:1280px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,80px); align-items:center;
}
.zero h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(36px,5vw,76px); line-height:.96; margin:18px 0 16px;
}
.zero h2 em { font-style:italic; font-weight:800; }
.zero p { color:var(--ink-70); max-width:46ch; margin-bottom:26px; }
.zero .chips { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.zero .chips li {
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:999px; padding:8px 16px;
  background:var(--paper); transition:background .3s, transform .3s var(--ease);
}
.zero .chips li:hover { background:var(--ink); color:var(--paper); transform:rotate(-2deg); }
.zero-media { position:relative; }
.zero-media .pill-frame {
  border-radius:999px; overflow:hidden; aspect-ratio:3/3.6;
  border:1px solid var(--ink); background:var(--paper);
}
.zero-media img { width:100%; height:100%; object-fit:cover; }

/* ── Quote + testimonials ── */
.quote {
  position:relative; padding:clamp(90px,14vh,180px) var(--gutter) clamp(60px,9vh,110px);
  text-align:center; overflow:hidden; background:var(--cream);
}
.quote > * { position:relative; z-index:1; }
/* Full verbatim client quotes: sentence case and body type, because a
   ninety word testimonial set in uppercase display is unreadable. */
.quote blockquote {
  font-family:var(--display); font-weight:600;
  letter-spacing:-.005em;
  font-size:clamp(17px,1.9vw,25px); line-height:1.52;
  max-width:min(760px, 86vw); margin:26px auto 30px;
}
.quote blockquote .hl { padding:0 .12em; font-style:italic; }
.quote cite {
  font-style:normal; font-family:var(--display); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60); font-weight:600;
}

.t-drag {
  background:var(--cream);
  padding:0 var(--gutter) clamp(50px,8vh,90px);
  overflow-x:auto; scrollbar-width:none; cursor:grab;
}
.t-drag::-webkit-scrollbar { display:none; }
.t-drag.dragging { cursor:grabbing; }
.t-track { display:flex; gap:20px; width:max-content; padding:6px; }
.t-card {
  width:min(380px,78vw); flex-shrink:0;
  border:1px solid var(--ink); border-radius:26px;
  background:var(--paper); padding:30px 30px 26px;
  display:flex; flex-direction:column; gap:18px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.t-card:hover { transform:translateY(-6px) rotate(-.5deg); box-shadow:7px 7px 0 var(--ink); }
.t-card .t-mark { font-family:var(--display); font-weight:800; font-style:italic; font-size:34px; color:var(--ice-deep); line-height:.6; }
.t-card p { font-size:14px; color:var(--ink-70); line-height:1.55; }
.t-card .t-who {
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
  margin-top:auto; display:flex; align-items:center; gap:8px;
}
a.t-card .t-who::after {
  content:'in'; margin-left:auto;
  font-family:var(--display); font-weight:800; font-style:italic; font-size:13px;
  color:var(--ink); background:var(--ice); border:1px solid var(--ink);
  width:24px; height:24px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease);
}
a.t-card:hover .t-who::after { transform:translate(2px,-2px) rotate(-4deg); }

/* stats */
.stats {
  /* Equal columns: as flex, "senior partner, start to finish" made its item far
     wider than the other three and the row read as misaligned. */
  display:grid; grid-template-columns:repeat(4,1fr); text-align:center;
  justify-items:center; align-items:start; gap:clamp(28px,6vw,90px);
  padding:clamp(40px,7vh,80px) var(--gutter);
  border-top:1px solid var(--ink-15); background:var(--cream);
}
.stat b {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(32px,3.6vw,48px); display:block;
}
.stat span {
  font-family:var(--display); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-60); font-weight:600;
}

/* ── About teaser ── */
.about {
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(32px,6vw,96px); align-items:center;
  padding:clamp(90px,14vh,180px) var(--gutter);
  max-width:1280px; margin:0 auto;
}
/* About page story: copy column first and wider, portrait on the right.
   Lives here rather than inline so the mobile rule further down
   (.about { grid-template-columns:1fr }) can still collapse it; the old
   inline style outranked that rule and squeezed the story into a 206px
   column beside a 58px portrait on phones. */
.about--story { grid-template-columns:1.15fr .85fr; align-items:start; }
.about-pill, .pill-frame {
  border-radius:999px; overflow:hidden; aspect-ratio:3/3.9;
  background:var(--ice); border:1px solid var(--ink); position:relative;
}
.about-pill img, .pill-frame img { width:100%; height:100%; object-fit:cover; }
.about h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(34px,4.6vw,66px); line-height:.98;
  margin:16px 0 22px;
}
.about h2 em { font-style:italic; font-weight:800; }
.about p { color:var(--ink-60); max-width:44ch; margin-bottom:30px; }

/* about story: the three-line "never just" beat reads as rhythm, not a run-on,
   and the line that answers it carries a little more weight */
.about .story-beat {
  font-family:var(--display); font-weight:600;
  font-size:clamp(17px,1.7vw,21px); line-height:1.55;
  letter-spacing:-.005em; color:var(--ink);
}
.about .story-beat + p {
  font-family:var(--display); font-weight:700;
  font-size:clamp(16px,1.5vw,19px); color:var(--ink);
}

/* ── Footer / talk ── */
.talk {
  background:var(--ink); color:var(--paper);
  padding:clamp(100px,16vh,200px) var(--gutter) 40px;
  border-radius:48px 48px 0 0; position:relative; overflow:hidden;
}
.talk .bgword {
  left:50%; bottom:-.22em; transform:translateX(-50%);
  font-size:clamp(140px,26vw,380px); line-height:1;
  -webkit-text-stroke-color:rgba(246,241,233,.08); white-space:nowrap;
}
.talk-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.talk .avail {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--paper-15); border-radius:999px;
  padding:9px 20px; color:var(--paper-70); margin-bottom:26px;
}
.talk .avail .dot { width:8px; height:8px; border-radius:50%; background:var(--ice); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.8)} }
.talk h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.025em;
  font-size:clamp(44px,7.6vw,112px); line-height:.96;
  text-wrap:balance;
}
.talk h2 em { font-style:italic; font-weight:800; color:var(--ice); }
.talk .talk-row {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:28px;
  margin-top:clamp(40px,7vh,72px);
}
.talk .email {
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(16px,2vw,21px); color:var(--paper-70);
  border-bottom:2px solid var(--ice-deep); padding-bottom:4px;
}
.talk .email:hover { color:var(--ice); }
.talk-btns { display:flex; flex-wrap:wrap; gap:12px; }
.btn-line { background:transparent; color:var(--paper); border-color:rgba(246,241,233,.45); }
.btn-line:hover { background:var(--ice); color:var(--ink); border-color:var(--ice); }
.talk-foot {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top:clamp(70px,11vh,130px);
  padding-top:26px; border-top:1px solid var(--paper-15);
  font-family:var(--display); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-50);
}
.talk-foot a:hover { color:var(--ice); }
.talk-foot .cols { display:flex; gap:26px; flex-wrap:wrap; }
.talk-foot .cols a, .talk-foot > span { display:inline-flex; align-items:center; min-height:24px; }
/* one optional line under the call to action: a quiet pointer to the free
   check or the kit, never a second headline */
.talk .talk-promo { margin-top:clamp(18px,2.6vh,26px); font-size:15px; line-height:1.55; color:var(--paper-70); max-width:56ch; }
.talk .talk-promo a { color:var(--paper); border-bottom:1px solid var(--ice-deep); padding-bottom:1px; }
.talk .talk-promo a:hover { color:var(--ice); }
/* social as two quiet icons, not a row of words */
.talk-social { display:flex; gap:6px; align-items:center; }
.talk-social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--paper-70);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.talk-social a:hover { color:var(--ink); background:var(--ice); }
.talk-social svg { width:19px; height:19px; }

/* ── Client logo marquee ── */
.logos {
  padding:clamp(34px,5vh,60px) 0; overflow:hidden;
  border-bottom:1px solid var(--ink-15);
}
.logos-label {
  text-align:center; margin-bottom:clamp(20px,3vh,30px);
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-40);
}
.logos-marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos-track {
  display:flex; align-items:center; gap:clamp(42px,6vw,88px);
  width:max-content; animation:slide 46s linear infinite;
}
.logos:hover .logos-track, .logos:focus-within .logos-track, .logos.is-paused .logos-track { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .logos-track, .tools-track { animation:none !important; } }
.logos-pause {
  display:block; margin:clamp(14px,2vh,20px) auto 0; min-height:44px; padding:0 16px; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-40);
}
.logos-pause:hover { color:var(--ink); }
.logos-track img {
  height:clamp(26px,3.2vw,38px); width:auto; flex-shrink:0;
  filter:grayscale(1); opacity:.5;
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.logos-track img:hover { opacity:1; filter:grayscale(0); }

/* large-screen caps for full-width sections */
.clients, .stats, .t-drag { max-width:var(--maxw); margin-inline:auto; }
/* The testimonial strip scrolls, so its cream must run edge to edge. Capped at
   --maxw it left paper-coloured bands either side on screens wider than 1680px. */
.t-drag { max-width:none; }

/* ════════════════════════════════════
   SUBPAGE COMPONENTS
   ════════════════════════════════════ */

/* subpage hero
   The shell, the lockup, the eyebrow, the headline, the lede and the media
   are all defined once in the HERO SYSTEM block further up. What is left
   here is only what is specific to a subpage: the background word and the
   stacking context that keeps the copy above it. */
.p-hero .bgword { right:-.06em; top:8%; font-size:clamp(110px,20vh,260px); writing-mode:vertical-rl; }
.p-hero .crumb, .p-hero h1, .p-hero .lede, .p-hero .p-hero-cta { position:relative; z-index:2; }

/* the portrait pill leans, and it leans by the same 2.5 degrees on every
   inner page. The homepage pill stands straight, because it is the poster. */
.p-hero .hs-media { --media-tilt:2.5deg; }

/* ── Heroes stacked ──
   Below 820 the lockup becomes one centred column, media first. Nothing
   here changes a type size: the scale is fluid and already correct at
   this width, so the only thing that changes is the arrangement. */
@media (max-width:820px) {
  .hero, .p-hero { padding-bottom:clamp(28px,5vh,48px); --halo-x:50%; --halo-y:72%; }
  .hero--solo { --halo-y:40%; }
  .hero-base { position:static; padding:0; margin-top:clamp(22px,4vh,34px); justify-content:center; }
  .hero-base .hero-tags { text-align:center; line-height:1.7; letter-spacing:.14em; }
  .hero-cue { display:none; }
  .hs-inner,
  .hero--home .hs-inner,
  .hero--about .hs-inner,
  .hero--solo .hs-inner {
    grid-template-columns:minmax(0,1fr);
    gap:clamp(26px,5vh,40px); justify-items:center; text-align:center;
  }
  .hs-copy, .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero h1, .p-hero h1 { max-width:20ch; }
  .hero .lede, .p-hero .lede { max-width:40ch; }
  .hero-sub, .p-hero .p-hero-cta { justify-content:center; }
  .hero-tags { text-align:center; }
  /* copy first, portrait second. The portrait used to come first, which put
     a 300px photo between the nav and the headline: on a 375 phone the
     visitor met a picture and had to scroll to find out what the page was
     about. Reading order now matches the desktop lockup. */
  .hs-media, .hero-media, .hero--about .hs-media {
    order:1; justify-self:center;
    width:min(58%,210px); margin-inline:auto;
    margin-top:clamp(4px,1vh,10px);
  }
  .hero--home .hero-media { width:min(66%,250px); }
}

/* pains — "sound familiar" chips */
.pains { padding:clamp(60px,9vh,110px) var(--gutter); }
.pains-inner { max-width:1100px; margin:0 auto; }
.pains-head { display:flex; justify-content:center; margin-bottom:clamp(30px,5vh,50px); }
.pains-head .rule-badge { width:100%; }
.pain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.pain {
  border:1px solid var(--ink); border-radius:22px; padding:26px;
  background:var(--cream); position:relative;
  font-size:15px; color:var(--ink-70);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pain:hover { transform:rotate(-1deg) translateY(-4px); box-shadow:6px 6px 0 var(--ink); }
.pain .x {
  font-family:var(--display); font-weight:800; font-style:italic;
  display:block; font-size:20px; margin-bottom:10px; color:var(--ink);
}
.pain b { color:var(--ink); }

/* deliverables — numbered editorial list */
.gets { padding:clamp(60px,9vh,120px) var(--gutter); background:var(--ink); color:var(--paper); }
.gets-inner { max-width:1100px; margin:0 auto; }
.gets-head { margin-bottom:clamp(30px,5vh,54px); display:flex; align-items:center; gap:18px; }
.gets-head::after { content:''; height:1px; background:var(--paper-15); flex:1; }
.gets-head .pill-badge { border-color:transparent; }
.get {
  display:grid; grid-template-columns:64px 1fr auto; align-items:baseline;
  gap:clamp(14px,3vw,40px);
  padding:22px 8px; border-top:1px solid var(--paper-15);
}
.get:last-of-type { border-bottom:1px solid var(--paper-15); }
.get h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:clamp(19px,2.4vw,30px); letter-spacing:-.01em;
}
.get p { font-size:14px; color:var(--paper-50); max-width:320px; text-align:right; }

/* fit — good / not */
.fit { padding:clamp(60px,9vh,120px) var(--gutter); }
.fit-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fit-col { border:1px solid var(--ink); border-radius:26px; padding:clamp(24px,3vw,40px); }
.fit-col.yes { background:var(--ice); }
.fit-col.no { background:var(--cream); }
.fit-col h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:clamp(18px,2vw,24px); margin-bottom:18px;
}
.fit-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.fit-col li { padding-left:26px; position:relative; font-size:15px; color:var(--ink-70); }
.fit-col.yes li::before { content:'→'; position:absolute; left:0; font-weight:700; color:var(--ink); }
.fit-col.no li::before { content:'✕'; position:absolute; left:0; font-weight:700; color:var(--ink-40); }
.fit-note {
  max-width:1100px; margin:26px auto 0; text-align:center;
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}

/* FAQ */
.faq { padding:clamp(60px,9vh,120px) var(--gutter); background:var(--cream); }
.faq-inner { max-width:860px; margin:0 auto; }
.faq-head { display:flex; justify-content:center; margin-bottom:clamp(28px,5vh,48px); }
.faq-head .rule-badge { width:100%; }
.faq details { border-top:1px solid var(--ink); }
.faq details:last-of-type { border-bottom:1px solid var(--ink); }
.faq summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 4px;
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:clamp(15px,1.8vw,20px); letter-spacing:-.005em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ind {
  font-family:var(--display); font-weight:800; font-style:italic; font-size:22px;
  transition:transform .4s var(--ease); flex-shrink:0;
}
.faq details[open] summary .ind { transform:rotate(45deg); }
.faq details p { padding:0 4px 24px; color:var(--ink-60); max-width:60ch; font-size:15px; }

/* next page link */
.next {
  display:block; padding:clamp(60px,10vh,120px) var(--gutter);
  border-top:1px solid var(--ink); position:relative; overflow:hidden;
  text-align:center;
}
.next::before {
  content:''; position:absolute; inset:0; background:var(--ice);
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease);
}
.next:hover::before { transform:scaleY(1); }
.next > * { position:relative; }
.next .next-label {
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-40);
  display:block; margin-bottom:14px;
}
.next .next-title {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(34px,6vw,84px); line-height:1;
  transition:font-style .2s;
}
.next:hover .next-title { font-style:italic; }
.next .next-title .arr { display:inline-block; transition:transform .4s var(--ease); }
.next:hover .next-title .arr { transform:translate(8px,-6px); }

/* principles grid (about page) */
.principles { padding:clamp(60px,9vh,120px) var(--gutter); background:var(--cream); }
.principles-inner { max-width:1100px; margin:0 auto; }
.principles-head { display:flex; justify-content:center; margin-bottom:clamp(30px,5vh,54px); }
.principles-head .rule-badge { width:100%; }
.pr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.pr {
  border:1px solid var(--ink); border-radius:22px; padding:26px;
  background:var(--paper);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.pr:hover { transform:translateY(-5px); box-shadow:6px 6px 0 var(--ink); background:var(--ice); }
.pr h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:17px; letter-spacing:0; margin-bottom:8px;
}
.pr p { font-size:14px; color:var(--ink-60); }

/* contact cards */
.c-cards { padding:clamp(40px,7vh,90px) var(--gutter) clamp(80px,12vh,140px); }
.c-grid {
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.c-card {
  border:1px solid var(--ink); border-radius:24px;
  padding:clamp(26px,2.4vw,36px); background:var(--cream);
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.c-card:hover { transform:translateY(-6px); box-shadow:8px 8px 0 var(--ink); background:var(--ice); }
.c-card .c-ic {
  width:54px; height:54px; border-radius:15px; flex-shrink:0;
  border:1px solid var(--ink); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .5s var(--ease);
}
.c-card .c-ic svg {
  width:26px; height:26px; fill:none; stroke:var(--ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s;
}
.c-card .c-ic svg .dot { fill:var(--ink); stroke:none; transition:fill .3s; }
.c-card:hover .c-ic { background:var(--ink); transform:rotate(-4deg); }
.c-card:hover .c-ic svg { stroke:var(--paper); }
.c-card:hover .c-ic svg .dot { fill:var(--paper); }
.c-card h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:clamp(19px,1.5vw,23px); letter-spacing:-.01em;
  margin-top:4px;
}
.c-card p { font-size:14px; color:var(--ink-60); margin-bottom:8px; }
.c-card .link-under { margin-top:auto; word-break:break-word; }

/* ════════════════════════════════════
   WORK / PORTFOLIO
   ════════════════════════════════════ */
.work-wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(14px,3vh,40px) var(--gutter) clamp(80px,11vh,140px); }
.work-flow { display:flex; flex-direction:column; gap:clamp(96px,11vw,150px); }

/* Each project is an editorial composition. Three alternating
   variants (a / b / c) keep the index from feeling like a grid. */
.wf { display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(18px,2.4vw,30px); align-items:end; position:relative; color:var(--ink); }

.wf-media { position:relative; grid-column:1 / 9; grid-row:1; }
.wf-frame {
  position:relative; border-radius:26px; overflow:hidden;
  border:1px solid var(--ink); background:var(--cream);
  aspect-ratio:16/10;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.wf-frame img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(.35); transform:scale(1.02);
  transition:filter .7s ease, transform 1.2s var(--ease);
}

.wf-view {
  position:absolute; right:18px; bottom:18px; z-index:2;
  font-family:var(--display); font-weight:700; font-style:italic; font-size:13px;
  background:var(--ice); border:1px solid var(--ink); border-radius:999px;
  padding:9px 18px; box-shadow:3px 3px 0 var(--ink);
  opacity:0; transform:translateY(8px) rotate(-3deg);
  transition:opacity .35s ease, transform .45s var(--ease);
}

.wf-info { grid-column:9 / 13; grid-row:1; padding-bottom:6px; }
.wf-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.wc-tag {
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--paper); border:1px solid var(--ink); border-radius:999px;
  padding:6px 13px;
}
.wf-title {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(22px,2.4vw,40px); line-height:.98;
  overflow-wrap:break-word;
  transition:font-style .2s;
}
.wf-arr { display:inline-block; font-size:.55em; margin-left:6px; transition:transform .4s var(--ease); }
.wf-blurb { margin-top:12px; color:var(--ink-60); font-size:15px; max-width:44ch; }

/* variant b: media right, taller frame, ice chip behind */
.wf-b .wf-media { grid-column:6 / 13; }
.wf-b .wf-frame { aspect-ratio:16/11; }
.wf-b .wf-info { grid-column:1 / 6; padding-bottom:12px; }

/* variant c: full-bleed statement row, info card overlaps the frame */
.wf-c { display:block; margin-bottom:40px; }
.wf-c .wf-media { grid-column:1 / -1; }
.wf-c .wf-frame { aspect-ratio:21/9; }
.wf-c .wf-info {
  position:absolute; left:clamp(16px,3.4vw,52px); bottom:-40px; z-index:4;
  background:var(--paper); border:1px solid var(--ink); border-radius:22px;
  padding:clamp(18px,2.4vw,28px) clamp(20px,2.8vw,34px);
  box-shadow:8px 8px 0 var(--ink);
  max-width:min(560px,74%);
}
.wf-c .wf-blurb { max-width:52ch; }

/* hover: quiet color bloom + gentle lift */
.wf:hover .wf-frame img { filter:grayscale(0); transform:scale(1.04); }
.wf:hover .wf-frame { transform:translateY(-6px); box-shadow:0 32px 56px -32px rgba(30,26,24,.45); }
.wf:hover .wf-title { font-style:italic; }
.wf:hover .wf-arr { transform:translate(5px,-5px); }
.wf:hover .wf-view { opacity:1; transform:translateY(0) rotate(-3deg); }

/* ── Band / Explain / Steps (full-bleed texture, editorial explainer, process) ── */
.band {
  position:relative; height:clamp(220px,34vh,380px); overflow:hidden;
}
.band img { width:100%; height:100%; object-fit:cover; display:block; }

.explain {
  max-width:var(--maxw); margin:0 auto; padding:clamp(60px,9vh,110px) var(--gutter);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:start;
}
.explain h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(30px,3.6vw,54px); line-height:.98;
}
.explain h2 em { font-style:italic; font-weight:800; }
.explain .ex-lede { font-size:clamp(16px,1.5vw,19px); color:var(--ink-70); }
.explain .ex-body { color:var(--ink-60); font-size:16px; max-width:58ch; }
.explain .ex-body p + p { margin-top:1em; }

.steps { max-width:var(--maxw); margin:0 auto; padding:clamp(50px,8vh,100px) var(--gutter); }
.steps-head { text-align:center; margin-bottom:clamp(34px,5vh,54px); }
.step {
  display:grid; grid-template-columns:clamp(64px,7vw,110px) 1fr; gap:clamp(18px,3vw,40px);
  padding:clamp(22px,3.5vh,34px) 0; border-top:1px solid var(--ink-15); align-items:start;
}
.step:last-child { border-bottom:1px solid var(--ink-15); }
.step h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(19px,2vw,26px); margin-bottom:8px;
}
.step p { color:var(--ink-60); max-width:62ch; }
.step .step-tag {
  display:block; margin-top:10px; font-family:var(--display); font-size:12px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-40);
}

/* ── Case panel (full-screen overlay) ── */
.case {
  position:fixed; inset:0; z-index:2600;
  background:var(--paper);
  transform:translateY(102%);
  transition:transform .6s var(--ease);
  visibility:hidden;
}
.case.open { transform:translateY(0); visibility:visible; }
.case-scroll { height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.case-inner { max-width:1000px; margin:0 auto; padding:clamp(20px,4vh,44px) var(--gutter) clamp(70px,10vh,120px); }
.case-top {
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:flex-end;
  padding:14px 0;
  background:linear-gradient(180deg, var(--paper) 55%, rgba(246,241,233,0));
}
.case-close {
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:999px;
  padding:11px 22px; cursor:pointer;
  transition:background .3s, color .3s;
}
.case-close:hover { background:var(--ice); color:var(--ink); }
.case-tags { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 18px; }
.case-head { position:relative; }
.case h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(34px,6vw,72px); line-height:.98;
}
.case-blurb { color:var(--ink-60); font-size:clamp(15.5px,1.5vw,18px); max-width:58ch; margin:18px 0 8px; }
.case-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:20px 0 8px; }
.case-info {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,60px);
  margin-top:clamp(24px,4vh,40px); padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--ink-15);
}
.ci-label {
  display:block; font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-40);
  margin-bottom:12px;
}
.case-info p { font-size:15.5px; line-height:1.7; color:var(--ink-60); max-width:52ch; }
.case-did { list-style:none; margin:0; padding:0; }
.case-did li { font-size:14.5px; padding:10px 0; border-bottom:1px solid var(--ink-15); }
.case-did li:first-child { padding-top:2px; }
.case-did li:last-child { border-bottom:0; }
/* Gallery: full width, natural height, no extra frame — these images
   (mockup scenes, browser chrome, deck slides) are already composed and
   already have their own edges. A box around a box just looks wrong,
   and forcing a crop chops off content (e.g. a phone shot). Uniform
   width is what keeps the rhythm; the image supplies its own shape. */
.case-figs { display:flex; flex-direction:column; gap:clamp(20px,2.6vw,32px); margin-top:clamp(34px,5.5vh,56px); }
.case-figs figure { margin:0; width:100%; border-radius:12px; overflow:hidden; }
.case-figs img { width:100%; height:auto; display:block; }
/* Story: magazine-style case. Images and short text alternate; the wide
   moments break out of the text column, the pairs stagger. */
.case-story {
  display:flex; flex-direction:column;
  gap:clamp(64px,11vh,136px);
  margin-top:clamp(52px,9vh,104px);
}
.cs figure { margin:0; border-radius:14px; overflow:hidden; background:var(--cream); position:relative; }
.cs-pause {
  position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--ink-15); background:rgba(246,241,233,.86); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .2s var(--ease);
}
.cs-pause:hover { background:var(--paper); }
.cs-pause span { width:12px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor; }
.cs-pause[aria-pressed="true"] span { width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent currentColor; margin-left:4px; }
.cs img { width:100%; height:auto; display:block; }
.cs video { width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; background:var(--cream); }
.cs h3 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px,2.9vw,38px); line-height:1.08; letter-spacing:-.015em;
  max-width:19ch; margin:0;
}
.cs p { font-size:16px; line-height:1.7; color:var(--ink-60); max-width:46ch; margin:0; }
.cs .ci-label { margin-bottom:14px; }
.cs-text { display:flex; flex-direction:column; gap:16px; }

.cs--full .cs-text {
  display:grid; grid-template-columns:1fr 1.15fr; gap:12px clamp(28px,5vw,72px);
  align-items:start; margin-top:clamp(22px,3.4vh,36px);
}
.cs--full .cs-text .ci-label { grid-column:1 / -1; margin-bottom:0; }
.cs--full .cs-text p { padding-top:6px; }

.cs--left, .cs--right {
  display:grid; grid-template-columns:1.3fr 1fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}
.cs--right { grid-template-columns:1fr 1.3fr; }
.cs--right .cs-media { order:2; }

.cs--pair .cs-media {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,28px); align-items:start;
}
.cs--pair .cs-media figure:nth-child(2) { margin-top:clamp(40px,9vw,110px); }
.cs--pair .cs-text { margin-top:clamp(22px,3.4vh,36px); max-width:640px; }

@media (min-width:1101px) {
  .cs--full .cs-media { margin-inline:clamp(-110px,-6vw,-40px); }
}
@media (max-width:820px) {
  .case-story { gap:64px; }
  .cs--full .cs-text, .cs--left, .cs--right { grid-template-columns:1fr; gap:20px; }
  .cs--right .cs-media { order:0; }
  .cs--pair .cs-media { grid-template-columns:1fr; }
  .cs--pair .cs-media figure:nth-child(2) { margin-top:0; }
}

.case-quote {
  background:var(--ice); border:1px solid var(--ink); border-radius:22px;
  padding:clamp(22px,3vw,32px); margin-top:clamp(26px,4vh,40px);
}
.case-quote p {
  font-size:clamp(16.5px,1.9vw,20px); line-height:1.6;
}
.case-quote p + p { margin-top:.8em; }
/* translated testimonial: language note plus the "show original" toggle */
.cq-lang {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
  margin-bottom:14px; font-size:13px; color:var(--ink-60);
}
.cq-toggle {
  font:inherit; font-weight:600; color:var(--ink); background:none; border:0; padding:4px 0;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.cq-toggle:hover { text-decoration-thickness:2px; }
.cq-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }
.case-quote cite {
  display:block; margin-top:14px; font-style:normal;
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60);
}
.case-cta {
  margin-top:clamp(34px,5vh,54px); padding-top:28px;
  border-top:1px solid var(--ink-15);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.case-cta p { font-family:var(--display); font-weight:700; font-size:19px; }
body.case-open { overflow:hidden; }

@media (max-width:820px) {
  .work-flow { gap:68px; }
  .wf, .wf-b, .wf-c { display:block; margin-bottom:0; }
  .wf-b .wf-frame, .wf-c .wf-frame { aspect-ratio:16/10; }
  .wf-info, .wf-b .wf-info { padding:16px 4px 0; }
  .wf-c .wf-info {
    position:static; background:transparent; border:0; box-shadow:none;
    padding:16px 4px 0; max-width:none;
  }
  .wf-view { display:none; }
  .wf-blurb { max-width:none; }
  .case-info { grid-template-columns:1fr; gap:26px; }
}

/* ════════════════════════════════════
   EDITORIAL SERVICE FLOW v2
   boxless forms: pull-quotes, magazine
   process, typographic deliverables
   ════════════════════════════════════ */
/* Three statements of what the work makes true, side by side, each led by a
   hand-drawn icon. No boxes: the drawing is the object, not a tile around it.
   The .wash shape sits deliberately off-register behind the linework, the same
   gesture as the ice highlight behind <b> in the copy. */
.pulls { max-width:1240px; margin:0 auto; padding:clamp(50px,8vh,90px) var(--gutter) clamp(26px,4vh,44px); }
.pulls-head { margin-bottom:clamp(30px,5vh,46px); }
.pulls-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(26px,3.4vw,56px); }
.pull { display:flex; flex-direction:column; gap:clamp(15px,1.7vw,21px); }
.pull-ic { display:block; }
.pull-ic svg {
  width:42px; height:42px; overflow:visible;
  fill:none; stroke:var(--ink); stroke-width:1.45;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
.pull-ic svg .wash { fill:var(--ice); stroke:none; }
.pull-ic svg .dot  { fill:var(--ink); stroke:none; }
/* hand-placed, not machine-aligned */
.pull:nth-child(1) .pull-ic svg { transform:rotate(-3.5deg); }
.pull:nth-child(2) .pull-ic svg { transform:rotate(2.5deg); }
.pull:nth-child(3) .pull-ic svg { transform:rotate(-1.5deg); }
.pull:hover .pull-ic svg { transform:rotate(0deg) translateY(-3px); }
.pull p {
  font-family:var(--display); font-weight:700;
  font-size:clamp(17px,1.45vw,21px); line-height:1.36; letter-spacing:-.012em;
}
.pull p b { font-weight:700; background:linear-gradient(180deg, transparent 58%, var(--ice) 58%, var(--ice) 94%, transparent 94%); }

/* Feature statement: one composed image + a strong claim (replaces flat explainer) */
.feature {
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(56px,9vh,120px) var(--gutter);
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,6vw,90px); align-items:center;
}
.feature-media { position:relative; }
.feature-media img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:20px;
  filter:grayscale(1) contrast(1.02); transition:filter 1s var(--ease);
}
.feature-media:hover img { filter:grayscale(0); }

/* ── .feature-media--wide ─────────────────────────────────────────
   A landscape photo in the feature slot, for a group shot that a 4:5 crop
   would cut people out of. Doubled class so it also beats the mobile
   .feature-media img { aspect-ratio:5/6 } rule, which comes later. */
.feature-media.feature-media--wide img { aspect-ratio:4/3; }
.feature-claim {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(30px,4.4vw,60px); line-height:.98;
}
.feature-claim em { font-style:italic; font-weight:800; }
.feature-sub {
  margin-top:clamp(18px,2.6vh,28px);
  font-size:clamp(16px,1.6vw,20px); color:var(--ink-70); max-width:44ch;
}
.feature-body { margin-top:clamp(20px,3vh,30px); max-width:46ch; }
.feature-body p { color:var(--ink-60); }
.feature-body p + p { margin-top:1em; }

/* Process: a plain sequence marked with a drawn dot, no ordinals, no timeframes */
.journey { max-width:960px; margin:0 auto; padding:clamp(46px,7vh,96px) var(--gutter); }
.journey-head { margin-bottom:clamp(30px,5vh,52px); }
.jstep {
  display:grid; grid-template-columns:clamp(30px,3.4vw,44px) 1fr;
  gap:clamp(16px,2.4vw,30px); align-items:start;
  padding:clamp(26px,4vh,42px) 0; border-top:1px solid var(--ink-15);
}
.jstep:last-child { border-bottom:1px solid var(--ink-15); }
.j-mark { display:block; padding-top:.34em; }
.j-mark svg {
  width:15px; height:15px; overflow:visible; fill:none;
  stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.j-mark svg .fillo { fill:var(--ice); stroke:none; }
.jstep h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(21px,2.4vw,32px); line-height:1;
}
.jstep p { margin-top:10px; color:var(--ink-60); max-width:60ch; }

/* ── Composition variants (2026-08-24): same components, different arrangements
   per service page, so the five pages stop rhyming. Token-only. ── */
.craft-grid--duo { grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,24px); }
.craft-grid--duo img { aspect-ratio:4/3; }
.journey--prose .jstep { grid-template-columns:1fr; gap:0; }
.journey--prose .j-mark { display:none; }
.pulls--display .pulls-row { grid-template-columns:1fr; gap:clamp(30px,5vh,48px); max-width:800px; }
.pulls--display .pull p { font-size:clamp(20px,2.1vw,30px); max-width:30ch; }
.feature--statement { grid-template-columns:1fr; max-width:1100px; }
.feature--statement .feature-claim { max-width:18ch; }

/* Craft gallery: all imagery grouped, uniform tiles, cohesive */
.craft { max-width:var(--maxw); margin:0 auto; padding:clamp(46px,7vh,96px) var(--gutter); }
.craft-head { margin-bottom:clamp(26px,4vh,44px); }
.craft-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.3vw,18px); }
.craft-grid figure { position:relative; margin:0; border-radius:14px; overflow:hidden; background:var(--cream); }
.craft-grid img {
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.02);
  transition:filter 1s var(--ease), transform 1.2s var(--ease);
}
.craft-grid figure:hover img { filter:grayscale(0); transform:scale(1.05); }
.craft-cap {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(16px,1.6vw,22px) clamp(14px,1.3vw,18px) clamp(14px,1.3vw,18px);
  color:var(--paper);
  background:linear-gradient(180deg, rgba(30,26,24,0) 0%, rgba(30,26,24,.62) 45%, rgba(30,26,24,.88) 100%);
}
/* The title is the hook and always shows: a caption that only appears on
   hover is a caption most visitors never read. The line below it opens on
   hover, and is simply always open on touch screens. */
.craft-cap h3 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(14px,1.15vw,18px); line-height:1.05;
}
.craft-cap p {
  margin-top:7px; font-size:13.5px; line-height:1.5; color:var(--paper-70);
  transition:opacity .5s var(--ease) .08s, transform .6s var(--ease) .08s, max-height .6s var(--ease);
  opacity:0; transform:translateY(8px); max-height:0; overflow:hidden;
}
.craft-grid figure:hover .craft-cap p,
.craft-grid figure:focus-within .craft-cap p { opacity:1; transform:none; max-height:8em; }
@media (hover:none) { .craft-cap p { opacity:1; transform:none; max-height:none; } }

/* ══════════════════════════════════════════════════════════════════════
   INSIDE THE WORK: one real homepage, annotated
   The image is the attention, the numbered titles are the hook, the line
   under each title is the explanation. Pins and titles drive each other;
   the active one gets a spotlight, the rest of the page dims a little.
   ══════════════════════════════════════════════════════════════════════ */
@property --ax { syntax:'<percentage>'; inherits:true; initial-value:50%; }
@property --ay { syntax:'<percentage>'; inherits:true; initial-value:50%; }
.anat { max-width:var(--maxw); margin:0 auto; padding:clamp(46px,7vh,96px) var(--gutter); }
.anat-grid {
  display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,72px); align-items:center;
}
.anat-figure {
  position:relative; margin:0; border-radius:22px; overflow:hidden;
  background:var(--cream);
  box-shadow:0 1px 2px rgba(30,26,24,.06), 0 30px 60px -34px rgba(30,26,24,.4);
  transition:--ax .9s var(--ease), --ay .9s var(--ease), opacity .9s ease, transform .9s var(--ease);
}
.anat-figure img { width:100%; height:auto; display:block; }
.anat-dim {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--ax) var(--ay),
    rgba(30,26,24,0) 0, rgba(30,26,24,0) 12%, rgba(30,26,24,.26) 22%);
  transition:opacity .5s var(--ease);
}
.anat-pin {
  position:absolute; left:var(--x); top:var(--y); z-index:2;
  width:36px; height:36px; translate:-50% -50%;
  display:grid; place-items:center; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:14px;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--paper); cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(30,26,24,.6);
  transition:background .3s, color .3s, transform .35s var(--ease);
}
.anat-pin::after {
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  border:2px solid var(--ice); opacity:0; pointer-events:none;
}
.anat-pin:hover { transform:scale(1.1); }
.anat-pin.is-on { background:var(--ice); color:var(--ink); border-color:var(--ink); transform:scale(1.15); }
.anat-pin.is-on::after { animation:pinPulse 2s var(--ease) infinite; }
@keyframes pinPulse { from { opacity:.9; transform:scale(1); } to { opacity:0; transform:scale(2); } }

.anat-lede { font-size:var(--fs-lede); line-height:1.5; color:var(--ink-60); max-width:34ch; }
.anat-list { list-style:none; margin:clamp(18px,3vh,28px) 0 clamp(22px,3.4vh,32px); padding:0; display:grid; gap:4px; }
.anat-item {
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  background:none; border:0; padding:12px 0; cursor:pointer; color:var(--ink-60);
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(16px,1.45vw,21px); letter-spacing:-.01em; line-height:1.1;
  transition:color .3s;
}
.anat-item:hover, .anat-item.is-on { color:var(--ink); }
.anat-num {
  flex:none; width:32px; height:32px; border-radius:999px; display:grid; place-items:center;
  font-size:13px; border:1px solid currentColor; transition:background .3s, color .3s, border-color .3s;
}
.anat-item.is-on .anat-num { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.anat-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.anat-body > p {
  overflow:hidden; min-height:0; padding-left:48px;
  font-size:15.5px; line-height:1.6; color:var(--ink-70); max-width:44ch;
}
.anat-item.is-on + .anat-body { grid-template-rows:1fr; }
.anat-item.is-on + .anat-body > p { padding-bottom:12px; }

/* ══════════════════════════════════════════════════════════════════════
   OPTIONS: two ways to a new site, side by side, plus the kit
   Same five facts in the same order on both sides, so the comparison reads
   row by row. The quick option carries the one tinted surface on the page;
   the custom option sits on the wall. No borders, no box inside a box.
   ══════════════════════════════════════════════════════════════════════ */
.tools { max-width:1240px; margin:0 auto; padding:clamp(56px,9vh,110px) var(--gutter); }
.opts { overflow-x:clip; }
.opts-inner { max-width:1240px; margin:0 auto; padding:clamp(56px,9vh,110px) var(--gutter) clamp(40px,6vh,80px); }
.opts-intro {
  text-align:center; max-width:56ch; margin:0 auto clamp(30px,4.6vh,48px);
  font-size:var(--fs-lede); line-height:1.55; color:var(--ink-60);
}



.opt-ticks { list-style:none; margin:clamp(22px,3vh,30px) 0 clamp(26px,3.6vh,36px); padding:0; display:grid; gap:10px; align-content:start; }
.opt-ticks li { display:flex; gap:12px; align-items:baseline; font-size:15.5px; line-height:1.45; color:var(--ink); }
.opt-ticks svg {
  flex:none; width:18px; height:18px; translate:0 3px; border-radius:999px; background:var(--ink);
  fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.scene--laptop .opt-ticks svg { background:var(--ice-deep); stroke:var(--ink); }

/* ── How we work together: four small scenes on one path ──
   Each step gets a little illustration that plays once when it scrolls in
   (.in from the reveal observer). The path under the scenes draws itself
   with the scroll (--p from vhd.js) and passes through one dot per step. */
.steps { max-width:1240px; margin:0 auto; padding:clamp(56px,9vh,110px) var(--gutter); --art-h:clamp(170px,14vw,210px); }
.steps-wrap { position:relative; }
.steps-path {
  position:absolute; left:6px; right:0; top:calc(var(--art-h) + 27px); height:2px; border-radius:2px;
  background:var(--ice-deep); transform-origin:left center;
  transform:scaleX(clamp(0, calc((var(--p) - .18) * 2.6), 1));
}
.steps-row { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,36px); position:relative; }
.step-card h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(17px,1.5vw,21px); letter-spacing:-.01em; line-height:1.1; margin-bottom:10px;
}
.step-card p { font-size:15.5px; line-height:1.6; color:var(--ink-70); max-width:30ch; }
.step-dot {
  display:block; position:relative; z-index:1; width:14px; height:14px; margin:21px 0 18px;
  border-radius:999px; background:var(--paper); border:2px solid var(--ink);
  transition:background .5s var(--ease) .5s;
}
.step-card.in .step-dot { background:var(--ink); }
.step-n {
  display:block; font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(40px,4vw,60px); line-height:.9; letter-spacing:-.04em; margin-bottom:12px;
}
.steps-cta { margin-top:clamp(36px,6vh,60px); display:flex; justify-content:center; }
.steps-cta .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }

/* the stage every scene sits on */
.step-art {
  position:relative; height:var(--art-h); border-radius:26px; overflow:hidden;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(30,26,24,.05), 0 24px 44px -30px rgba(30,26,24,.4);
}
.step-card:nth-child(odd) .step-art { background:var(--ice); }
.step-art > * { position:absolute; transition:transform .9s var(--ease), opacity .6s ease; }
.art-pill {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); padding:9px 14px; border-radius:999px;
  box-shadow:0 10px 20px -12px rgba(30,26,24,.5);
}
.art-pill i { width:8px; height:8px; border-radius:999px; background:#3fae6a; animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow:0 0 0 0 rgba(63,174,106,.5); } 100% { box-shadow:0 0 0 9px rgba(63,174,106,0); } }

/* 1. a call: you and me meet in the middle */
.art-call .face {
  top:22%; width:31%; aspect-ratio:1; border-radius:999px; overflow:hidden;
  display:grid; place-items:center; border:3px solid var(--paper);
  box-shadow:0 14px 26px -14px rgba(30,26,24,.5);
}
.art-call .face img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.art-call .face-me { left:16%; transform:translateX(-40%); opacity:0; }
.art-call .face-you {
  right:16%; transform:translateX(40%); opacity:0; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
}
.art-call .art-pill { left:50%; bottom:14%; transform:translate(-50%, 16px); opacity:0; transition-delay:.45s; }
.step-card.in .art-call .face { transform:none; opacity:1; }
.step-card.in .art-call .art-pill { transform:translate(-50%, 0); opacity:1; }

/* 2. you send: brand, photo and words fan out of one pile */
.art-send .sheet {
  left:50%; top:50%; width:27%; aspect-ratio:4/5; margin:calc(27% * -.62) 0 0 -13.5%;
  border-radius:10px; background:var(--paper); overflow:hidden;
  box-shadow:0 16px 26px -14px rgba(30,26,24,.5);
}
.art-send .sheet-swatch { display:grid; align-content:center; justify-items:center; gap:7px; }
.art-send .sheet-swatch i { width:44%; aspect-ratio:1; border-radius:999px; }
.art-send .sheet-swatch i:nth-child(1) { background:var(--ink); width:30%; }
.art-send .sheet-swatch i:nth-child(2) { background:var(--ice-deep); width:30%; }
.art-send .sheet-swatch i:nth-child(3) { background:#d9c3a5; width:30%; }
.art-send .sheet-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.art-send .sheet-text { display:grid; align-content:center; gap:8px; padding:0 16%; }
.art-send .sheet-text b { display:block; width:100%; height:5px; border-radius:5px; background:rgba(30,26,24,.28); }
.art-send .sheet-text b:first-child { height:7px; width:70%; background:var(--ink); }
.art-send .sheet-text b:last-child { width:55%; }
.step-card.in .art-send .sheet-swatch { transform:translateX(-112%) rotate(-12deg); }
.step-card.in .art-send .sheet-text { transform:translateX(112%) rotate(12deg); }
.step-card.in .art-send .sheet-photo { transform:translateY(-6%) scale(1.08); z-index:1; }

/* 3. design and build: a page assembles itself, then you say what you think */
.art-build .mini {
  left:12%; right:12%; top:16%; bottom:16%; border-radius:10px; background:var(--paper);
  padding:8% 7%; display:grid; grid-template-rows:auto 1fr auto auto auto; gap:6%;
  box-shadow:0 16px 30px -18px rgba(30,26,24,.5);
}
.mini > * { position:static; transform-origin:left center; transform:scaleX(0); transition:transform .7s var(--ease); }
.mini-bar { display:flex; gap:4px; }
.mini-bar i { width:6px; height:6px; border-radius:999px; background:var(--ink-15); }
.mini-hero { border-radius:6px; background:var(--ice); min-height:22px; }
.mini-line { height:5px; border-radius:5px; background:var(--ink); width:70%; }
.mini-line--s { background:var(--ink-15); width:50%; }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mini-grid i { height:14px; border-radius:4px; background:var(--ink-08); }
.step-card.in .mini > * { transform:none; }
.step-card.in .mini > :nth-child(2) { transition-delay:.12s; }
.step-card.in .mini > :nth-child(3) { transition-delay:.24s; }
.step-card.in .mini > :nth-child(4) { transition-delay:.32s; }
.step-card.in .mini > :nth-child(5) { transition-delay:.42s; }
.art-build .bubble {
  right:7%; bottom:9%; padding:9px 14px; border-radius:16px 16px 4px 16px;
  background:var(--ink); color:var(--paper);
  font-family:var(--display); font-weight:700; font-style:italic; font-size:13px;
  transform:scale(.4); transform-origin:bottom right; opacity:0; transition-delay:.9s;
}
.step-card.in .art-build .bubble { transform:none; opacity:1; }

/* 4. live: your address, and the switch flips on */
.art-live .url {
  left:50%; top:30%; transform:translate(-50%, 10px); opacity:0;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--paper); padding:11px 18px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink);
  box-shadow:0 12px 24px -14px rgba(30,26,24,.5);
}
.art-live .url svg { width:14px; height:14px; fill:none; stroke:var(--ink); stroke-width:1.6; }
.art-live .switch {
  left:50%; top:60%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.switch-track { position:relative; width:46px; height:26px; border-radius:999px; background:var(--ink-15); transition:background .4s ease .8s; }
.switch-knob {
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:999px; background:var(--paper);
  box-shadow:0 2px 6px rgba(30,26,24,.3); transition:transform .5s var(--ease) .8s;
}
.step-card.in .art-live .url { transform:translate(-50%, 0); opacity:1; }
.step-card.in .switch-track { background:#3fae6a; }
.step-card.in .switch-knob { transform:translateX(20px); }

/* ── tools: two slow rows of names drifting in opposite directions ── */
.tools-marquee { display:grid; gap:clamp(6px,1.2vh,14px); margin-inline:calc(var(--gutter) * -1);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tm-row { overflow:hidden; }
.tm-track { display:flex; width:max-content; align-items:center; animation:tm 48s linear infinite; }
.tm-b .tm-track { animation-direction:reverse; animation-duration:56s; }
.tm-track span:not(.tm-dup), .tm-dup span {
  font-family:var(--display); font-weight:800; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(26px,3.6vw,52px); letter-spacing:-.02em; line-height:1.15;
}
.tm-dup { display:flex; align-items:center; }
.tm-b span { font-style:italic; color:var(--ink-40); }
.tm-track i { flex:none; width:12px; height:12px; border-radius:999px; background:var(--ice-deep); margin:0 clamp(18px,2.4vw,36px); }
@keyframes tm { to { transform:translateX(-50%); } }

/* ══════════════════════════════════════════════════════════════════════
   OPTION SCENES: each offer gets a stage, the device does the talking
   vhd.js writes three numbers on every [data-scrub] element as it crosses
   the screen: --e (entrance, 0 to 1 in the first half), --p (0 to 1 across
   the whole pass) and --s (the screen scroll, 0 to 1 through the middle).
   Without JS, or with reduced motion, they rest at the finished state.
   ══════════════════════════════════════════════════════════════════════ */
[data-scrub] { --e:1; --p:.5; --s:0; }
.scene {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,110px); align-items:center;
  padding-block:clamp(40px,8vh,110px);
}
.scene-copy { max-width:520px; }
.scene--laptop { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.scene-media { position:relative; display:grid; place-items:center; min-height:clamp(480px,72vh,720px); }
.scene-copy h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,3.4vw,52px); line-height:.98; letter-spacing:-.02em; text-wrap:balance;
}
.opt-hook {
  margin-top:14px; font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(17px,1.4vw,20px); line-height:1.3;
}
.opt-text { margin-top:16px; font-size:16px; line-height:1.65; color:var(--ink-70); max-width:46ch; }

/* the ice arch behind each device, drifting a little slower than the page */
.scene-arch {
  position:absolute; width:min(78%,400px); aspect-ratio:3/4; border-radius:999px;
  background:var(--ice); z-index:0;
  transform:translateY(calc((var(--p) - .5) * 70px)) rotate(-7deg);
}
.scene-arch--line {
  background:none; border:1px solid rgba(30,26,24,.2); width:min(70%,420px);
  transform:translate(-14%, calc((var(--p) - .5) * 90px)) rotate(8deg);
}

/* phone: rises in, straightens, and the site inside scrolls with you */
.device-phone {
  position:relative; z-index:1;
  width:clamp(220px,21vw,300px); aspect-ratio:390/844;
  padding:11px; border-radius:50px; background:#151210;
  box-shadow:inset 0 0 0 2px #3a3532, 0 2px 4px rgba(30,26,24,.18),
             0 40px 70px -30px rgba(30,26,24,.55), 0 90px 120px -60px rgba(30,26,24,.45);
  transform:translateY(calc((1 - var(--e)) * 140px)) rotate(calc((1 - var(--e)) * -8deg + (var(--p) - .5) * -5deg));
  opacity:calc(.15 + var(--e) * .85);
}
.device-phone::before {
  content:''; position:absolute; z-index:2; top:20px; left:50%; translate:-50% 0;
  width:30%; height:22px; border-radius:999px; background:#151210;
}
.device-screen { height:100%; border-radius:40px; overflow:hidden; background:var(--paper); }
.device-screen img, .laptop-screen img {
  width:100%; height:auto; display:block;
  transform:translateY(calc(var(--s) * var(--travel)));
}

/* laptop: slides in from the right edge of the screen and settles */
.device-laptop {
  position:relative; z-index:1; width:min(100%,700px);
  transform:translateX(calc((1 - var(--e)) * 55%)) rotate(calc((1 - var(--e)) * 5deg));
  opacity:calc(.1 + var(--e) * .9);
  filter:drop-shadow(0 50px 50px rgba(30,26,24,.28)) drop-shadow(0 10px 14px rgba(30,26,24,.12));
}
.laptop-lid { background:#151210; border-radius:20px 20px 8px 8px; padding:2.2% 2.2% 3%; box-shadow:inset 0 0 0 2px #3a3532; }
.laptop-screen { aspect-ratio:16/10; overflow:hidden; border-radius:6px; background:var(--paper); }
.laptop-base {
  position:relative; height:clamp(12px,1.4vw,18px); width:114%; margin-left:-7%;
  border-radius:2px 2px 16px 16px; background:linear-gradient(180deg,#e4e2df,#b9b6b2 70%,#9d9a96);
}
.laptop-base::after {
  content:''; position:absolute; left:50%; top:0; translate:-50% 0;
  width:16%; height:45%; border-radius:0 0 10px 10px; background:#a7a39f;
}

/* floating labels, glass over the scene, each on its own parallax */
.scene-tag {
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); padding:12px 18px; border-radius:999px;
  background:rgba(246,241,233,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 34px -18px rgba(30,26,24,.45);
  opacity:var(--e);
}
.scene-tag i { width:8px; height:8px; border-radius:999px; background:var(--ice-deep); }
.scene-tag--a { top:14%; right:4%; transform:translateY(calc((var(--p) - .5) * -120px)); }
.scene-tag--b { bottom:16%; left:2%; transform:translateY(calc((var(--p) - .5) * 80px)); }
.scene--laptop .scene-tag--a { top:6%; right:auto; left:10%; }
.scene--laptop .scene-tag--b { bottom:10%; left:auto; right:0; }

/* ══════════════════════════════════════════════════════════════════════
   DIY band: the kit gets a dark stage of its own. Five skill cards sit in
   a stack and fan out as the band scrolls into view.
   ══════════════════════════════════════════════════════════════════════ */
.diy { background:var(--ink); color:var(--paper); overflow:hidden; }
.diy-inner {
  max-width:1240px; margin:0 auto; padding:clamp(70px,12vh,140px) var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center;
}
.diy-copy h2 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(36px,4.6vw,72px); line-height:.95; letter-spacing:-.025em; text-wrap:balance;
}
.diy {
  --sales:#A7E492; --sales-soft:#CFEBC4;
  background:
    radial-gradient(60% 90% at 92% 40%, rgba(167,228,146,.16), rgba(167,228,146,0) 70%),
    radial-gradient(50% 70% at 0% 110%, rgba(214,239,244,.08), rgba(214,239,244,0) 70%),
    var(--ink);
}
.diy-copy h2 em { font-style:italic; color:var(--sales-soft); }
.diy .btn-ice { background:var(--paper); border-color:var(--paper); color:var(--ink); }
.diy .btn-ice:hover { background:var(--sales-soft); border-color:var(--sales-soft); }
.diy-copy p { margin:clamp(18px,2.6vh,26px) 0 clamp(26px,4vh,36px); font-size:17px; line-height:1.65; color:var(--paper-70); max-width:44ch; }
.diy-cards { position:relative; height:clamp(300px,40vh,380px); }
.diy-card {
  --spread:calc(var(--i) - 2);
  --w:clamp(140px,11.5vw,168px);
  position:absolute; left:50%; top:50%; width:var(--w); aspect-ratio:3/4;
  margin:calc(var(--w) * -.667) 0 0 calc(var(--w) * -.5);
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:18px; border-radius:20px; background:var(--paper); color:var(--ink);
  box-shadow:0 30px 50px -24px rgba(0,0,0,.6);
  transform:translateX(calc(var(--spread) * var(--e) * 64%))
            translateY(calc(var(--spread) * var(--spread) * var(--e) * 4%))
            rotate(calc(var(--spread) * var(--e) * 6deg));
}
.diy-card:nth-child(odd) { background:var(--sales-soft); }
.diy-card .diy-n {
  position:absolute; top:14px; left:18px;
  font-family:var(--display); font-weight:800; font-style:italic; font-size:34px; line-height:1;
}
.diy-card b, .diy-card span:last-child { max-width:62%; }
.diy-card b { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:14px; line-height:1.1; letter-spacing:-.01em; }
.diy-card span:last-child { font-size:12.5px; line-height:1.35; color:var(--ink-70); }

@media (max-width:820px) {
  .scene, .scene--laptop, .diy-inner { grid-template-columns:1fr; }
  .scene--laptop .scene-copy { order:2; }
  .scene-media { min-height:auto; padding-block:30px; }
  .device-phone { width:min(62vw,250px); }
  .device-laptop { transform:translateX(calc((1 - var(--e)) * 30%)); }
  .scene-tag { font-size:11px; padding:10px 14px; }
  .diy-cards { height:260px; }
  .diy-card { --w:104px; padding:12px; }
  .diy-card .diy-n { font-size:24px; top:10px; left:12px; }
  .diy-card b { font-size:11px; }
  .diy-card span:last-child { display:none; }
  .steps-row { grid-template-columns:1fr 1fr; row-gap:40px; }
  .steps-path { display:none; }
  .step-dot { display:none; }
  .step-n { margin-top:18px; }
}
@media (max-width:520px) { .steps-row { grid-template-columns:1fr; } .steps { --art-h:200px; } }

/* ══════════════════════════════════════════════════════════════════════
   AI PAGE: three ways I help, your situation, the sprint, teaching
   Same visual language as the website page (stages, small scenes that
   play once, a path that draws itself), with its own scenes.
   ══════════════════════════════════════════════════════════════════════ */
.pillars, .paths, .teach { max-width:1240px; margin:0 auto; padding:clamp(56px,9vh,110px) var(--gutter); }
.pillars-row { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.pillar h3 {
  margin-top:clamp(20px,3vh,28px);
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,2.8vw,42px); line-height:.98; letter-spacing:-.02em;
}
.pillar .opt-hook { margin-top:8px; }
.pillar-text { margin-top:12px; font-size:15.5px; line-height:1.6; color:var(--ink-70); }
.chips { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li {
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 12px; border-radius:999px; background:rgba(30,26,24,.06); color:var(--ink);
}
.pillar-art {
  position:relative; height:clamp(200px,17vw,250px); border-radius:28px; overflow:hidden;
  background:var(--ice);
  box-shadow:0 1px 2px rgba(30,26,24,.05), 0 26px 46px -32px rgba(30,26,24,.45);
}
.pillar--2 .pillar-art { background:rgba(255,255,255,.6); }
.pillar--3 .pillar-art { background:var(--ink); }
.pillar-art > * { position:absolute; transition:transform .8s var(--ease), opacity .6s ease; }

/* advise: a question comes in, an answer is typed back */
.msg {
  max-width:72%; padding:12px 16px; font-size:14px; line-height:1.35; border-radius:18px;
  box-shadow:0 12px 22px -14px rgba(30,26,24,.45); opacity:0;
}
.msg-in { left:8%; top:16%; background:var(--paper); color:var(--ink); border-bottom-left-radius:5px; transform:translateY(12px); }
.msg-typing { right:8%; top:50%; background:var(--ink); padding:14px 16px; display:flex; gap:5px; border-bottom-right-radius:5px; }
.msg-typing i { width:6px; height:6px; border-radius:999px; background:var(--paper); animation:typing 1s ease-in-out infinite; }
.msg-typing i:nth-child(2) { animation-delay:.15s; } .msg-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes typing { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
.msg-out { right:8%; bottom:14%; background:var(--ink); color:var(--paper); border-bottom-right-radius:5px; transform:translateY(12px); font-style:italic; font-family:var(--display); font-weight:600; }
.pillar.in .msg-in { opacity:1; transform:none; transition-delay:.2s; }
.pillar.in .msg-typing { animation:typeShow 1.6s ease .7s both; }
@keyframes typeShow { 0% { opacity:0; } 15%,80% { opacity:1; } 100% { opacity:0; } }
.pillar.in .msg-out { opacity:1; transform:none; transition-delay:2.2s; }

/* build: a brief travels through AI and comes back to you */
.flow-line { left:12%; right:12%; top:50%; height:2px; background:rgba(30,26,24,.18); }
.flow-dot {
  position:absolute; top:50%; left:0; width:12px; height:12px; margin-top:-6px; border-radius:999px;
  background:var(--ice-deep); box-shadow:0 0 0 4px rgba(168,216,228,.35);
  animation:flowRun 3.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes flowRun { 0% { left:0; } 100% { left:calc(100% - 12px); } }
.flow-nodes { left:6%; right:6%; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; align-items:center; }
.node {
  position:static; padding:9px 12px; border-radius:12px; background:var(--paper);
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 10px 18px -12px rgba(30,26,24,.5); opacity:0; transform:translateY(10px);
  transition:transform .6s var(--ease), opacity .5s ease;
}
.node--ai { background:var(--ink); color:var(--ice); }
.pillar.in .node { opacity:1; transform:none; }
.pillar.in .node:nth-child(2) { transition-delay:.15s; } .pillar.in .node:nth-child(3) { transition-delay:.3s; } .pillar.in .node:nth-child(4) { transition-delay:.45s; }

/* teach: the team fills up */
.avatars { left:50%; top:24%; transform:translateX(-50%); display:flex; }
.avatars i {
  width:46px; height:46px; border-radius:999px; margin-left:-10px; border:3px solid var(--ink);
  display:grid; place-items:center; font-style:normal; font-family:var(--display); font-weight:800; color:var(--ink);
  opacity:0; transform:scale(.6); transition:transform .5s var(--ease), opacity .4s ease;
}
.avatars i:nth-child(1) { background:var(--ice); } .avatars i:nth-child(2) { background:#d9c3a5; }
.avatars i:nth-child(3) { background:var(--paper); } .avatars i:nth-child(4) { background:var(--ice-deep); }
.avatars i:nth-child(5) { background:var(--paper-70); }
.pillar.in .avatars i { opacity:1; transform:none; }
.pillar.in .avatars i:nth-child(2) { transition-delay:.1s; } .pillar.in .avatars i:nth-child(3) { transition-delay:.2s; }
.pillar.in .avatars i:nth-child(4) { transition-delay:.3s; } .pillar.in .avatars i:nth-child(5) { transition-delay:.4s; }
.team-bar { left:18%; right:18%; top:60%; height:8px; border-radius:999px; background:rgba(246,241,233,.15); overflow:hidden; }
.team-bar span { position:absolute; inset:0; background:var(--ice); border-radius:inherit; transform-origin:left; transform:scaleX(0); transition:transform 1.6s var(--ease) .6s; }
.pillar.in .team-bar span { transform:none; }
.team-label {
  left:50%; top:72%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  opacity:0; transition-delay:2s;
}
.team-label svg { width:16px; height:16px; border-radius:999px; background:#3fae6a; fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pillar.in .team-label { opacity:1; }

/* where are you right now: three situations, one answer at a time */
.paths-grid {
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,48px); align-items:stretch;
}
.path-tabs { display:grid; gap:6px; align-content:center; }
.path-tab {
  display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  background:none; border:0; padding:16px 0; color:var(--ink-60);
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,2.2vw,32px); line-height:1.02; letter-spacing:-.015em;
  transition:color .3s;
}
.path-tab:hover, .path-tab.is-on { color:var(--ink); }
.path-radio { flex:none; width:22px; height:22px; border-radius:999px; border:2px solid currentColor; position:relative; }
.path-radio::after { content:''; position:absolute; inset:4px; border-radius:999px; background:var(--ink); transform:scale(0); transition:transform .35s var(--ease); }
.path-tab.is-on .path-radio::after { transform:none; }
.path-panels {
  position:relative; border-radius:30px; background:var(--ice);
  padding:clamp(28px,3.6vw,56px); display:flex; flex-direction:column; justify-content:center; gap:22px;
  min-height:clamp(260px,32vh,340px);
}
.path-panel[hidden] { display:none; }
.path-panel.is-on { animation:panelIn .55s var(--ease) both; }
@keyframes panelIn { from { opacity:0; transform:translateY(10px); } }
.path-text { font-size:clamp(18px,1.7vw,24px); line-height:1.45; color:var(--ink); max-width:34ch; }
.path-start {
  margin-top:16px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.path-arrow { display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:13px; }
.path-panels .btn { align-self:flex-start; font-size:13px; letter-spacing:.14em; padding:15px 28px; }

/* the sprint uses the steps component, three across, with its own scenes */
.steps--3 .steps-row { grid-template-columns:repeat(3,1fr); }
.steps--3 .step-card p { max-width:34ch; }
.art-week .week {
  left:14%; right:14%; top:20%; bottom:20%; display:grid; grid-template-columns:repeat(5,1fr); gap:7px;
}
.art-week .week i { border-radius:6px; background:rgba(30,26,24,.08); transition:background .5s ease; }
.step-card.in .art-week .week i:nth-child(3), .step-card.in .art-week .week i:nth-child(9),
.step-card.in .art-week .week i:nth-child(12) { background:var(--ink); }
.step-card.in .art-week .week i:nth-child(9) { transition-delay:.25s; }
.step-card.in .art-week .week i:nth-child(12) { transition-delay:.5s; }
.art-run .console {
  left:12%; right:12%; top:16%; height:52%; border-radius:12px; background:var(--ink);
  padding:8% 8%; display:grid; gap:8px; align-content:start;
}
.art-run .console b { display:block; height:6px; border-radius:6px; background:rgba(246,241,233,.3); transform-origin:left; transform:scaleX(0); transition:transform .6s var(--ease); }
.art-run .console b:nth-child(1) { width:70%; background:var(--ice); } .art-run .console b:nth-child(2) { width:90%; }
.art-run .console b:nth-child(3) { width:55%; } .art-run .console b:nth-child(4) { width:78%; }
.step-card.in .art-run .console b { transform:none; }
.step-card.in .art-run .console b:nth-child(2) { transition-delay:.2s; } .step-card.in .art-run .console b:nth-child(3) { transition-delay:.4s; } .step-card.in .art-run .console b:nth-child(4) { transition-delay:.6s; }
.run-pill {
  left:50%; bottom:12%; transform:translateX(-50%); display:grid; white-space:nowrap;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.run-pill > span { grid-area:1/1; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; transition:opacity .4s ease; }
.run-a { background:var(--paper); color:var(--ink); box-shadow:0 10px 18px -12px rgba(30,26,24,.5); }
.run-b { background:#3fae6a; color:var(--paper); opacity:0; }
.run-b svg { width:14px; height:14px; fill:none; stroke:var(--paper); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.step-card.in .run-a { opacity:0; transition-delay:1.3s; }
.step-card.in .run-b { opacity:1; transition-delay:1.3s; }
.art-book .book {
  left:50%; top:50%; transform:translate(-50%,-50%) rotate(-3deg); width:58%;
  background:var(--paper); border-radius:12px; padding:14px 16px; display:grid; gap:9px;
  box-shadow:0 18px 30px -18px rgba(30,26,24,.55);
}
.art-book .book strong { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.12em; }
.check-row { display:flex; align-items:center; gap:8px; }
.check-row b { flex:1; height:5px; border-radius:5px; background:rgba(30,26,24,.18); }
.check-row svg { flex:none; width:16px; height:16px; border-radius:999px; background:rgba(30,26,24,.1); fill:none; stroke:transparent; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:background .3s ease, stroke .3s ease; }
.step-card.in .check-row svg { background:var(--ink); stroke:var(--paper); }
.step-card.in .check-row:nth-of-type(2) svg { transition-delay:.35s; }
.step-card.in .check-row:nth-of-type(3) svg { transition-delay:.7s; }

/* ── Three ways I can help: one flowing section ──
   No tiles. Each scene floats on the wall, rows alternate, and one curved
   line drawn with the scroll ties Advise, Build and Teach together. */
.ways { position:relative; max-width:1180px; margin:0 auto; padding:clamp(56px,9vh,110px) var(--gutter) clamp(20px,3vh,40px); }
.ways-line {
  position:absolute; left:var(--gutter); top:clamp(150px,18vh,200px);
  width:calc(100% - var(--gutter) * 2); height:calc(100% - clamp(150px,18vh,200px) - clamp(40px,8vh,90px));
  z-index:0; overflow:visible; pointer-events:none;
}
.ways-line path {
  fill:none; stroke:var(--ice-deep); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0, (var(--p) - .12) * 1.9, 1));
}
.way {
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,6vw,110px); align-items:center;
  padding-block:clamp(26px,5vh,60px);
}
.way--flip .way-media { order:2; }
.way-art { position:relative; height:clamp(220px,22vw,290px); }
.way-art > * { position:absolute; transition:transform .8s var(--ease), opacity .6s ease; }
.way-copy h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px,5vw,76px); line-height:.92; letter-spacing:-.03em;
}
.way-copy .opt-hook { margin-top:10px; }
.way-text { margin-top:12px; font-size:16.5px; line-height:1.65; color:var(--ink-70); max-width:42ch; }
.way-fit {
  margin-top:16px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.way-fit span { display:grid; place-items:center; width:26px; height:26px; border-radius:999px; background:var(--ice); font-size:12px; }
/* the scenes, freed from their tiles: a soft ice glow instead of a box */
.way-art::before {
  content:''; position:absolute; inset:-6% 6%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(214,239,244,.95), rgba(214,239,244,0));
  transform:none !important; opacity:1 !important;
}
.way--3 .avatars i { border-color:var(--paper); }
.way--3 .avatars i:nth-child(5) { background:var(--ink); color:var(--paper); }
.way--3 .team-bar { background:rgba(30,26,24,.1); }
.way--3 .team-bar span { background:var(--ink); }
.way--3 .team-label { color:var(--ink); }
.way-art .node { font-size:13px; padding:11px 14px; }

/* ── The AI Setup Sprint in one line ── */
.sprint-line { max-width:1080px; margin:0 auto; padding:clamp(30px,6vh,70px) var(--gutter) clamp(60px,10vh,120px); text-align:center; }
.sprint-lead {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,2.8vw,40px); line-height:1.05; letter-spacing:-.02em; text-wrap:balance;
}
.sprint-lead em { font-style:italic; background-image:linear-gradient(180deg, transparent 58%, var(--ice) 58%, var(--ice) 90%, transparent 90%); padding:0 .06em; }
.sprint-flow {
  list-style:none; margin:clamp(22px,4vh,36px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px;
  font-family:var(--display); font-weight:700; font-size:clamp(16px,1.5vw,20px);
}
.sprint-flow li { display:inline-flex; align-items:center; gap:10px; }
.sf-n {
  display:grid; place-items:center; width:34px; height:34px; border-radius:999px; background:var(--ink); color:var(--paper);
  font-style:italic; font-weight:800; font-size:15px;
}
.sf-arrow svg { width:56px; height:16px; fill:none; stroke:var(--ink-40); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sprint-sub { margin:18px auto 26px; font-size:16.5px; line-height:1.6; color:var(--ink-70); max-width:48ch; }
.sprint-line .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }

@media (max-width:820px) {
  .way, .way--flip { grid-template-columns:1fr; gap:6px; }
  .way--flip .way-media { order:0; }
  .ways-line { display:none; }
  .way-art { height:220px; }
  .sf-arrow { display:none !important; }
  .sprint-flow { flex-direction:column; }
}

/* where I teach: two light rows, no heading, a photo and a drawn call */
.teach { padding-block:clamp(40px,7vh,90px); }
.teach-row {
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,90px); align-items:center;
  padding-block:clamp(24px,5vh,56px);
}
.teach-row--flip { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.teach-copy h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,3.2vw,48px); line-height:.98; letter-spacing:-.02em; text-wrap:balance;
}
.teach-copy h3 em { font-style:italic; }
.teach-copy p { margin:14px 0 22px; font-size:16.5px; line-height:1.65; color:var(--ink-70); max-width:44ch; }
.teach-photo { position:relative; display:grid; place-items:center; padding:20px 0; }
.teach-pill {
  position:relative; z-index:1; width:min(78%,320px); aspect-ratio:3/4; border-radius:999px; overflow:hidden;
  border:1px solid var(--ink); background:var(--ice);
  box-shadow:0 1px 2px rgba(30,26,24,.08), 0 30px 54px -28px rgba(30,26,24,.45);
  transform:rotate(-2deg) translateY(calc((var(--p) - .5) * -30px));
}
.teach-pill img { width:100%; height:100%; object-fit:cover; object-position:30% 30%; display:block; }
.teach-arch {
  position:absolute; width:min(78%,320px); aspect-ratio:3/4; border-radius:999px; background:var(--ice);
  transform:translate(-14%,6%) rotate(-7deg);
}

/* Beyond VH Designs: CoLab and the German course are separate ventures,
   so they sit together on their own sand band, apart from the studio offer */
.beyond { background:#ECE4D8; padding-top:clamp(20px,4vh,50px); }
.beyond .teach { padding-top:clamp(40px,7vh,80px); }
.beyond .opts-intro { margin-bottom:clamp(36px,6vh,64px); }
.beyond .course-panel { background:
    radial-gradient(70% 90% at 100% 0%, rgba(214,239,244,.95), rgba(214,239,244,0) 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%),
    #F6F1E9; }

/* CoLab: a calm two-column intro, then a strip of real workshop photos */
.teach { padding-bottom:clamp(20px,3vh,36px); }
.teach-head {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,90px); align-items:start;
}
.teach-head h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,3.6vw,56px); line-height:.96; letter-spacing:-.022em; text-wrap:balance;
}
.teach-head h3 em { display:block; margin-top:8px; font-style:italic; font-size:.5em; line-height:1.1; letter-spacing:-.01em; }
.teach-head p:first-child { padding-top:.4em; }
.teach-head p { font-size:16.5px; line-height:1.65; color:var(--ink-70); max-width:46ch; }
.teach-links { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:16px; }
.ph-strip.t-drag {
  --edge:max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
  background:none; display:flex; gap:clamp(10px,1.2vw,16px); align-items:center;
  padding:clamp(24px,4vh,40px) var(--edge) clamp(40px,7vh,80px);
  scroll-snap-type:x proximity; scroll-padding-inline:var(--edge);
}
.ph { flex:none; margin:0; height:clamp(240px,30vw,400px); border-radius:22px; overflow:hidden; scroll-snap-align:start; background:var(--cream); }
.ph:nth-child(even) { height:clamp(200px,24vw,320px); }
.ph img { height:100%; width:auto; display:block; pointer-events:none; filter:saturate(.9); transition:transform 1.2s var(--ease); }
.ph:hover img { transform:scale(1.04); }

/* the German course: a soft panel, so it reads as something you can book */
.course { --p:.5; max-width:1240px; margin:0 auto; padding:clamp(20px,4vh,40px) var(--gutter) clamp(60px,10vh,120px); }
.course-panel {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:center;
  border-radius:40px; padding:clamp(32px,5vw,72px);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(214,239,244,.95), rgba(214,239,244,0) 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(236,228,216,.9), rgba(236,228,216,0) 70%),
    #F3EEE6;
  box-shadow:0 1px 2px rgba(30,26,24,.04), 0 40px 80px -60px rgba(30,26,24,.35);
}
.course-panel { position:relative; }
/* sits on the top edge of the panel: this one is running and open now */
.course-live {
  position:absolute; top:0; left:clamp(32px,5vw,72px); transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 14px 26px -14px rgba(30,26,24,.6);
}
.course-live i { width:9px; height:9px; border-radius:999px; background:#3fae6a; animation:livePulse 1.8s ease-out infinite; }
.chips--course { margin:0 0 26px; gap:6px; }
.chips--course li { background:rgba(255,255,255,.75); font-size:10px; letter-spacing:.12em; padding:6px 10px; }
.chips--course li:first-child { background:var(--ink); color:var(--paper); }
.course .teach-copy h3 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,3.2vw,48px); line-height:.98; letter-spacing:-.02em; text-wrap:balance;
}
.course .teach-copy h3 em { font-style:italic; }
.course .teach-copy p { margin:14px 0 20px; font-size:16.5px; line-height:1.65; color:var(--ink-70); max-width:44ch; }
.course .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }

/* the kit on the AI page: a prompt turns into a site */
.diy-build { position:relative; height:clamp(300px,36vh,380px); }
.diy-build > * { position:absolute; }
.db-prompt {
  left:0; top:4%; z-index:2; display:inline-flex; align-items:center; gap:10px; max-width:92%;
  padding:14px 18px; border-radius:16px; background:var(--paper); color:var(--ink);
  font-size:15px; box-shadow:0 18px 34px -18px rgba(0,0,0,.6);
}
.db-prompt .cl-star { flex:none; }
.db-typed { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; }
.diy-build.in .db-typed { max-width:30ch; transition:max-width 2.2s steps(32,end) .3s; }
.db-caret { width:2px; height:18px; background:var(--ink); animation:caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }
.db-site {
  right:0; top:22%; width:80%; height:72%; border-radius:16px; overflow:hidden;
  background:#f6f3ee; padding:10px 12px 14px; display:grid; grid-template-rows:auto 1fr auto; gap:10px;
  box-shadow:0 40px 70px -36px rgba(0,0,0,.7);
  transform:translateY(20px); opacity:.0; transition:transform .9s var(--ease) 2.4s, opacity .6s ease 2.4s;
}
.diy-build.in .db-site { transform:none; opacity:1; }
.db-bar { display:flex; gap:5px; }
.db-bar i { width:7px; height:7px; border-radius:999px; background:rgba(30,26,24,.15); }
.db-hero {
  border-radius:10px; padding:10% 8%; display:grid; gap:8px; align-content:center;
  background:linear-gradient(135deg, rgba(167,228,146,.45), rgba(214,239,244,.9));
}
.db-hero b { display:block; height:9px; width:60%; border-radius:6px; background:var(--ink); }
.db-hero b + b { height:6px; width:42%; background:rgba(30,26,24,.35); }
.db-hero em { display:block; width:28%; height:16px; margin-top:6px; border-radius:999px; background:var(--ink); }
.db-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.db-tiles i { height:38px; border-radius:8px; background:rgba(30,26,24,.08); }
.db-live {
  right:6%; bottom:-2%; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--paper); border:1px solid rgba(246,241,233,.2);
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease 3.2s, transform .6s var(--ease) 3.2s;
}
.db-live i { width:8px; height:8px; border-radius:999px; background:var(--sales); }
.diy-build.in .db-live { opacity:1; transform:none; }

/* the drawn call: a screen share of Claude and fifteen people on a grid */
.teach-zoom { position:relative; padding:24px 0 34px; }
.zoom {
  position:relative; border-radius:18px; background:#1b1917; padding:10px; color:var(--paper);
  box-shadow:0 2px 4px rgba(30,26,24,.15), 0 40px 70px -34px rgba(30,26,24,.6);
  transform:rotate(1.2deg);
}
.zoom-bar { display:flex; align-items:center; gap:6px; padding:4px 6px 10px; font-size:11px; color:rgba(246,241,233,.6); }
.zoom-bar > i { width:8px; height:8px; border-radius:999px; background:rgba(246,241,233,.2); }
.zoom-bar span:not(.rec) { margin-left:10px; font-family:var(--display); font-weight:600; letter-spacing:.04em; }
.zoom-bar em { margin-left:auto; font-style:normal; display:inline-flex; align-items:center; gap:6px; font-weight:700; letter-spacing:.12em; font-size:10px; }
.rec { width:7px; height:7px; border-radius:999px; background:#e5534b; animation:livePulseRed 1.6s ease-out infinite; }
@keyframes livePulseRed { 0% { box-shadow:0 0 0 0 rgba(229,83,75,.6); } 100% { box-shadow:0 0 0 7px rgba(229,83,75,0); } }
.zoom-body { display:grid; grid-template-columns:1.1fr 1fr; gap:8px; }
.zoom-share { border-radius:10px; background:#f5f3ee; display:grid; grid-template-columns:22% 1fr; overflow:hidden; min-height:clamp(170px,17vw,240px); }
.zoom-share--hosts { position:relative; display:block; background:#2c2926; }
.zoom-share--hosts picture, .zoom-share--hosts img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.zs-tag, .zs-name {
  position:absolute; z-index:1; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:4px 8px; border-radius:6px; background:rgba(20,18,16,.55); color:var(--paper);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.zs-tag { top:8px; left:8px; background:rgba(246,241,233,.9); color:var(--ink); }
.zs-name { right:8px; top:8px; }
.cl-side { background:#ebe7df; padding:12px 8px; display:grid; gap:7px; align-content:start; }
.cl-side b { display:block; height:5px; border-radius:5px; background:rgba(30,26,24,.15); }
.cl-chat { padding:14px 12px; display:flex; flex-direction:column; gap:10px; }
.cl-msg--u { align-self:flex-end; width:52%; height:18px; border-radius:10px; background:#e7e1d6; }
.cl-msg--a { display:grid; gap:6px; grid-template-columns:14px 1fr; align-items:start; }
.cl-msg--a b { grid-column:2; display:block; height:5px; border-radius:5px; background:rgba(30,26,24,.22); transform-origin:left; transform:scaleX(0); transition:transform .8s var(--ease); }
.cl-msg--a b:nth-of-type(2) { width:85%; } .cl-msg--a b:nth-of-type(3) { width:60%; }
.teach-zoom.in .cl-msg--a b { transform:none; }
.teach-zoom.in .cl-msg--a b:nth-of-type(2) { transition-delay:.3s; } .teach-zoom.in .cl-msg--a b:nth-of-type(3) { transition-delay:.6s; }
.cl-star { grid-row:1 / span 3; width:12px; height:12px; margin-top:-2px; background:#d97757; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation:spin 6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.cl-input { margin-top:auto; height:20px; border-radius:10px; border:1px solid rgba(30,26,24,.15); background:#fff; }
.zoom-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:5px; }
.zt { position:relative; border-radius:6px; background:#2c2926; display:grid; place-items:center; overflow:hidden; aspect-ratio:4/3; }
.zt b { font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.06em; color:rgba(246,241,233,.85); }
.zt:nth-child(4n+2) { background:#3a4a4d; } .zt:nth-child(5n+3) { background:#4a3f36; } .zt:nth-child(6n+1) { background:#34403a; }
.zt--me { box-shadow:0 0 0 2px #3fae6a; }
.zt--me img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.zt--me b { position:absolute; left:4px; bottom:3px; font-size:8px; background:rgba(0,0,0,.45); padding:1px 4px; border-radius:3px; }
.zoom-bubble {
  position:absolute; top:6px; right:-8px; padding:10px 14px; border-radius:16px 16px 4px 16px;
  background:var(--paper); color:var(--ink); font-family:var(--display); font-weight:700; font-style:italic; font-size:14px;
  box-shadow:0 14px 26px -14px rgba(30,26,24,.5);
  transform:rotate(3deg) scale(.6); opacity:0; transition:transform .6s var(--ease) .6s, opacity .4s ease .6s;
}
.teach-zoom.in .zoom-bubble { transform:rotate(3deg); opacity:1; }
.zoom-badge {
  position:absolute; left:-12px; bottom:4px; display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; background:var(--ice); color:var(--ink);
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 16px 30px -16px rgba(30,26,24,.55);
  transform:rotate(-3deg) translateY(calc((var(--p) - .5) * -40px));
}
.zoom-badge svg { width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }


@media (max-width:900px) {
  .pillars-row { grid-template-columns:1fr; }
  .paths-grid, .teach-row, .teach-row--flip { grid-template-columns:1fr; }
  .teach-row--flip .teach-zoom { order:-1; }
  .teach-head, .course-panel { grid-template-columns:1fr; }
  .course-panel { border-radius:28px; }
  .diy-build { height:300px; }
  .zoom-body { grid-template-columns:1fr; }
  .zoom-bubble { right:4px; }
  .zoom-badge { left:4px; }
  .steps--3 .steps-row { grid-template-columns:1fr; row-gap:40px; }
  .steps--3 .steps-path, .steps--3 .step-dot { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   BRANDING PAGE: a statement with real brand work floating around it,
   three scenes for what you get, the process on the shared path.
   ══════════════════════════════════════════════════════════════════════ */
.brand-statement {
  max-width:1240px; margin:0 auto; padding:clamp(70px,12vh,140px) var(--gutter);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,80px); align-items:center;
}
.bs-copy .feature-claim { max-width:12ch; }
.bs-text { margin-top:18px; font-size:clamp(17px,1.4vw,19px); line-height:1.6; color:var(--ink-70); max-width:40ch; }
.bs-collage { position:relative; height:clamp(380px,46vw,560px); }
.cl-card {
  position:absolute; margin:0; border-radius:18px; overflow:hidden; background:var(--cream);
  box-shadow:0 2px 4px rgba(30,26,24,.08), 0 30px 50px -26px rgba(30,26,24,.5);
}
.cl-card img { width:100%; height:100%; object-fit:cover; display:block; }
.cl-card--1 { left:0; top:6%; width:52%; aspect-ratio:4/3; transform:rotate(-4deg) translateY(calc((var(--p) - .5) * -60px)); z-index:2; }
.cl-card--2 { right:0; top:0; width:44%; aspect-ratio:3/2; transform:rotate(3deg) translateY(calc((var(--p) - .5) * 90px)); }
.cl-card--3 { left:30%; top:40%; width:46%; aspect-ratio:3/2; transform:rotate(1.5deg) translateY(calc((var(--p) - .5) * -30px)); z-index:3; }
.cl-card--4 { left:4%; bottom:2%; width:34%; aspect-ratio:4/3; transform:rotate(-2deg) translateY(calc((var(--p) - .5) * 70px)); z-index:1; }
.cl-card--5 { right:2%; bottom:6%; width:30%; aspect-ratio:1; transform:rotate(-5deg) translateY(calc((var(--p) - .5) * -110px)); z-index:4; }

/* strategy: three questions land as notes */
.note {
  padding:16px 20px; border-radius:6px; font-family:var(--display); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:-.01em;
  box-shadow:0 16px 26px -16px rgba(30,26,24,.5); opacity:0;
}
.note--1 { left:10%; top:12%; background:var(--paper); transform:translateY(-20px) rotate(-8deg); }
.note--2 { left:38%; top:38%; background:var(--ice); transform:translateY(-20px) rotate(4deg); }
.note--3 { left:16%; top:64%; background:#e6d6bf; transform:translateY(-20px) rotate(-3deg); }
.pillar.in .note { opacity:1; }
.pillar.in .note--1 { transform:rotate(-6deg); transition-delay:.1s; }
.pillar.in .note--2 { transform:rotate(3deg); transition-delay:.35s; }
.pillar.in .note--3 { transform:rotate(-2deg); transition-delay:.6s; }

/* identity: a mark assembles, type and colours arrive */
.art-identity .mark { left:12%; top:18%; width:120px; height:120px; }
.art-identity .mark i { position:absolute; inset:0; border-radius:999px; border:10px solid var(--ink); transform:scale(.4); opacity:0; transition:transform .8s var(--ease), opacity .5s ease; }
.art-identity .mark b { position:absolute; right:-6px; bottom:-6px; width:48px; height:48px; border-radius:12px; background:var(--ice-deep); transform:translate(30px,30px) rotate(20deg); opacity:0; transition:transform .8s var(--ease) .35s, opacity .5s ease .35s; }
.pillar.in .art-identity .mark i { transform:none; opacity:1; }
.pillar.in .art-identity .mark b { transform:rotate(12deg); opacity:1; }
.art-identity .aa { right:10%; top:14%; font-family:var(--display); font-weight:800; font-size:clamp(70px,7vw,104px); line-height:1; letter-spacing:-.04em; opacity:0; transform:translateY(16px); transition-delay:.6s; }
.pillar.in .art-identity .aa { opacity:1; transform:none; }
.art-identity .sw { left:12%; right:10%; bottom:12%; display:flex; gap:10px; }
.sw i { flex:1; height:44px; border-radius:10px; transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease); }
.sw i:nth-child(1) { background:var(--ink); } .sw i:nth-child(2) { background:var(--ice-deep); }
.sw i:nth-child(3) { background:#e6d6bf; } .sw i:nth-child(4) { background:#a9b89a; }
.pillar.in .sw i, .step-card.in .sw i { transform:none; }
.pillar.in .sw i:nth-child(2) { transition-delay:.8s; } .pillar.in .sw i:nth-child(3) { transition-delay:.9s; } .pillar.in .sw i:nth-child(4) { transition-delay:1s; }
.pillar.in .sw i:nth-child(1) { transition-delay:.7s; }

/* system: the brand book fans open */
.art-bookset .pg {
  left:50%; top:46%; width:26%; aspect-ratio:3/4; margin:-17.3% 0 0 -13%;
  border-radius:10px; background:var(--paper); padding:14px; box-shadow:0 18px 30px -18px rgba(30,26,24,.5);
  display:flex; flex-direction:column; justify-content:space-between;
}
.pg--1 { background:var(--ink) !important; color:var(--paper); z-index:3; }
.pg--1 strong { font-family:var(--display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.pg-mark { width:30px; height:30px; border-radius:999px; border:5px solid var(--ice); align-self:flex-end; }
.pg--2 { justify-content:flex-end; }
.pg--2 .sw i { height:30px; transform:none; }
.pg--3 em { font-family:var(--display); font-weight:800; font-style:normal; font-size:34px; line-height:1; }
.pg--3 b { display:block; height:5px; border-radius:5px; background:rgba(30,26,24,.2); }
.pillar.in .pg--2 { transform:translateX(-62%) rotate(-10deg); }
.pillar.in .pg--3 { transform:translateX(62%) rotate(10deg); }
.ai-chip {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 14px; border-radius:999px; background:var(--paper); color:var(--ink);
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 12px 22px -12px rgba(30,26,24,.5);
}
.art-bookset .ai-chip { left:50%; bottom:2%; transform:translate(-50%,10px); opacity:0; transition-delay:.9s; z-index:4; }
.pillar.in .art-bookset .ai-chip { transform:translate(-50%,0); opacity:1; }

/* process scenes */
.art-stickies .sticky-grid { left:12%; right:12%; top:16%; bottom:16%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.art-stickies .sticky-grid i { border-radius:4px; background:var(--paper); box-shadow:0 6px 10px -6px rgba(30,26,24,.4); transform:scale(0) rotate(-6deg); transition:transform .45s var(--ease); }
.art-stickies .sticky-grid i:nth-child(2n) { background:#e6d6bf; } .art-stickies .sticky-grid i:nth-child(3n) { background:#fff; }
.step-card.in .art-stickies .sticky-grid i { transform:rotate(calc(var(--r,0) * 1deg)); }
.step-card.in .art-stickies .sticky-grid i:nth-child(1) { --r:-3; } .step-card.in .art-stickies .sticky-grid i:nth-child(2) { --r:2; transition-delay:.1s; }
.step-card.in .art-stickies .sticky-grid i:nth-child(3) { --r:-1; transition-delay:.2s; } .step-card.in .art-stickies .sticky-grid i:nth-child(4) { --r:3; transition-delay:.3s; }
.step-card.in .art-stickies .sticky-grid i:nth-child(5) { --r:-2; transition-delay:.4s; } .step-card.in .art-stickies .sticky-grid i:nth-child(6) { --r:1; transition-delay:.5s; }
.art-approve .doc { left:24%; right:24%; top:14%; bottom:14%; border-radius:10px; background:var(--paper); padding:14% 12%; display:grid; gap:9px; align-content:start; box-shadow:0 14px 24px -14px rgba(30,26,24,.45); }
.art-approve .doc b { display:block; height:5px; border-radius:5px; background:rgba(30,26,24,.2); }
.art-approve .doc b:first-child { height:8px; width:70%; background:var(--ink); }
.art-approve .stamp {
  right:12%; bottom:14%; padding:8px 14px; border:2px solid #3fae6a; color:#3fae6a; border-radius:8px;
  font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  transform:rotate(-12deg) scale(1.8); opacity:0; transition:transform .45s cubic-bezier(.2,1.4,.4,1) .7s, opacity .3s ease .7s;
}
.step-card.in .art-approve .stamp { transform:rotate(-12deg); opacity:1; }
.art-mood .mood { left:14%; right:14%; top:16%; bottom:16%; display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:8px; }
.art-mood .mood i { border-radius:8px; opacity:0; transform:scale(.9); transition:transform .6s var(--ease), opacity .5s ease; }
.art-mood .mood i:nth-child(1) { grid-row:span 2; background:linear-gradient(160deg,#e6d6bf,#c9b08f); }
.art-mood .mood i:nth-child(2) { background:var(--ink); } .art-mood .mood i:nth-child(3) { background:var(--ice-deep); }
.art-mood .mood i:nth-child(4) { display:none; }
.step-card.in .art-mood .mood i { opacity:1; transform:none; }
.step-card.in .art-mood .mood i:nth-child(2) { transition-delay:.15s; } .step-card.in .art-mood .mood i:nth-child(3) { transition-delay:.3s; }
.art-mood .mood-mark { left:22%; top:34%; width:46px; height:46px; border-radius:999px; border:7px solid var(--paper); opacity:0; transition-delay:.6s; }
.step-card.in .art-mood .mood-mark { opacity:1; }
.art-handoff .hb {
  left:50%; top:46%; transform:translate(-50%,-50%) rotate(-4deg); width:46%; aspect-ratio:3/4; border-radius:6px 12px 12px 6px;
  background:var(--ink); color:var(--paper); padding:14px; box-shadow:inset 6px 0 0 rgba(255,255,255,.12), 0 18px 30px -16px rgba(30,26,24,.55);
  font-family:var(--display); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
.art-handoff .ai-chip { left:50%; bottom:10%; transform:translate(-50%,10px); opacity:0; transition-delay:.6s; }
.step-card.in .art-handoff .ai-chip { transform:translate(-50%,0); opacity:1; }

@media (max-width:820px) {
  .brand-statement { grid-template-columns:1fr; }
  .bs-collage { height:360px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MARKETING PAGE scenes
   ══════════════════════════════════════════════════════════════════════ */
/* direction: one message in the middle, the channels line up around it */
.art-channels .msg-core {
  left:50%; top:50%; transform:translate(-50%,-50%) scale(.8); opacity:0; z-index:2;
  padding:18px 24px; border-radius:16px; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:-.01em;
  box-shadow:0 20px 34px -18px rgba(30,26,24,.6);
}
.pillar.in .art-channels .msg-core { transform:translate(-50%,-50%); opacity:1; }
.chn {
  padding:9px 14px; border-radius:999px; background:var(--paper); color:var(--ink);
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 10px 18px -12px rgba(30,26,24,.5); opacity:0;
}
.chn--1 { left:6%; top:10%; transform:translate(-30px,-20px) rotate(-12deg); }
.chn--2 { right:6%; top:14%; transform:translate(30px,-20px) rotate(10deg); }
.chn--3 { left:10%; bottom:12%; transform:translate(-30px,20px) rotate(8deg); }
.chn--4 { right:10%; bottom:10%; transform:translate(30px,20px) rotate(-10deg); }
.pillar.in .chn { opacity:1; transform:none; }
.pillar.in .chn--1 { transition-delay:.35s; } .pillar.in .chn--2 { transition-delay:.45s; }
.pillar.in .chn--3 { transition-delay:.55s; } .pillar.in .chn--4 { transition-delay:.65s; }

/* design and campaigns: a post, an email and a slide, then scheduled */
.cp { border-radius:12px; background:var(--paper); box-shadow:0 16px 28px -16px rgba(30,26,24,.5); opacity:0; }
.cp--post { left:8%; top:12%; width:34%; aspect-ratio:1; padding:8px; transform:translateY(20px) rotate(-6deg); }
.cp--post i { display:block; width:100%; height:100%; border-radius:8px; background:linear-gradient(140deg, var(--ice), #e6d6bf); }
.cp--mail { left:36%; top:28%; width:34%; aspect-ratio:3/4; padding:14px 12px; display:grid; gap:7px; align-content:start; transform:translateY(20px) rotate(3deg); z-index:2; }
.cp--mail b { display:block; height:5px; border-radius:5px; background:rgba(30,26,24,.2); }
.cp--mail b:first-child { height:8px; width:60%; background:var(--ink); }
.cp--mail em { display:block; width:50%; height:14px; border-radius:999px; background:var(--ink); margin-top:6px; }
.cp--slide { right:6%; top:10%; width:36%; aspect-ratio:16/10; padding:12px; background:var(--ink); transform:translateY(20px) rotate(5deg); display:flex; flex-direction:column; justify-content:space-between; }
.cp--slide b { display:block; height:7px; width:60%; border-radius:5px; background:var(--paper); }
.cp--slide i { width:26px; height:26px; border-radius:999px; border:4px solid var(--ice); align-self:flex-end; }
.pillar.in .cp { opacity:1; }
.pillar.in .cp--post { transform:rotate(-6deg); } .pillar.in .cp--mail { transform:rotate(3deg); transition-delay:.15s; } .pillar.in .cp--slide { transform:rotate(5deg); transition-delay:.3s; }
.cp-chip { right:12%; bottom:10%; opacity:0; transform:translateY(10px); transition-delay:.9s; }
.cp-chip .dot { width:8px; height:8px; border-radius:999px; background:var(--ice-deep); }
.pillar.in .cp-chip { opacity:1; transform:none; }

/* AI systems: the week fills itself in */
.art-auto .wk { left:10%; right:10%; top:18%; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.art-auto .wk i { aspect-ratio:1; border-radius:10px; background:rgba(30,26,24,.07); position:relative; }
.art-auto .wk i::after { content:''; position:absolute; inset:28%; border-radius:999px; background:var(--ink); transform:scale(0); transition:transform .35s var(--ease); }
.pillar.in .art-auto .wk i::after { transform:none; }
.pillar.in .art-auto .wk i:nth-child(1)::after { transition-delay:0.00s; }
.pillar.in .art-auto .wk i:nth-child(2)::after { transition-delay:0.12s; }
.pillar.in .art-auto .wk i:nth-child(3)::after { transition-delay:0.24s; }
.pillar.in .art-auto .wk i:nth-child(4)::after { transition-delay:0.36s; }
.pillar.in .art-auto .wk i:nth-child(5)::after { transition-delay:0.48s; }
.pillar.in .art-auto .wk i:nth-child(6)::after { transition-delay:0.60s; }
.pillar.in .art-auto .wk i:nth-child(7)::after { transition-delay:0.72s; }
.pillar.in .art-auto .wk i:nth-child(8)::after { transition-delay:0.84s; }
.pillar.in .art-auto .wk i:nth-child(9)::after { transition-delay:0.96s; }
.pillar.in .art-auto .wk i:nth-child(10)::after { transition-delay:1.08s; }
.pillar.in .art-auto .wk i:nth-child(11)::after { transition-delay:1.20s; }
.pillar.in .art-auto .wk i:nth-child(12)::after { transition-delay:1.32s; }
.pillar.in .art-auto .wk i:nth-child(13)::after { transition-delay:1.44s; }
.pillar.in .art-auto .wk i:nth-child(14)::after { transition-delay:1.56s; }
.auto-chip { left:50%; bottom:12%; transform:translate(-50%,10px); opacity:0; transition-delay:1.9s; }
.auto-chip svg { width:16px; height:16px; border-radius:999px; background:#3fae6a; fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pillar.in .auto-chip { transform:translate(-50%,0); opacity:1; }

/* steps: funnel, ranking, onboarding folder, the month */
.art-funnel .fn { left:16%; right:16%; top:18%; bottom:18%; display:grid; gap:7px; justify-items:center; align-content:center; }
.art-funnel .fn i { display:block; height:16px; border-radius:6px; background:var(--ink); transform:scaleX(0); transition:transform .6s var(--ease); }
.art-funnel .fn i:nth-child(1) { width:100%; } .art-funnel .fn i:nth-child(2) { width:78%; background:rgba(30,26,24,.75); }
.art-funnel .fn i:nth-child(3) { width:52%; background:rgba(30,26,24,.5); } .art-funnel .fn i:nth-child(4) { width:40%; background:rgba(30,26,24,.35); }
.step-card.in .art-funnel .fn i { transform:none; }
.step-card.in .art-funnel .fn i:nth-child(2) { transition-delay:.15s; } .step-card.in .art-funnel .fn i:nth-child(3) { transition-delay:.3s; } .step-card.in .art-funnel .fn i:nth-child(4) { transition-delay:.45s; }
.art-funnel .leak { right:22%; top:52%; width:12px; height:12px; border-radius:999px; background:#e08a5b; opacity:0; transition-delay:.9s; }
.step-card.in .art-funnel .leak { opacity:1; animation:leakPulse 1.8s ease-out 1s infinite; }
@keyframes leakPulse { 0% { box-shadow:0 0 0 0 rgba(224,138,91,.6); } 100% { box-shadow:0 0 0 10px rgba(224,138,91,0); } }
.art-rank .rk { left:12%; right:12%; top:18%; bottom:18%; display:grid; gap:10px; align-content:center; }
.rk-row { display:flex; align-items:center; gap:10px; opacity:0; transform:translateX(-12px); transition:transform .5s var(--ease), opacity .4s ease; }
.rk-row em { flex:none; font-style:normal; font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--paper); }
.rk-row:nth-child(1) em { background:var(--ink); color:var(--paper); }
.rk-row b { flex:1; height:5px; border-radius:5px; background:rgba(30,26,24,.18); }
.step-card.in .rk-row { opacity:1; transform:none; }
.step-card.in .rk-row:nth-child(2) { transition-delay:.2s; } .step-card.in .rk-row:nth-child(3) { transition-delay:.4s; }
.art-folder .fold { left:14%; right:14%; top:20%; bottom:16%; }
.art-folder .tab {
  position:relative; display:inline-block; margin-right:4px; padding:5px 8px; border-radius:8px 8px 0 0; background:#e6d6bf;
  font-family:var(--display); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transform:translateY(8px); opacity:0; transition:transform .4s var(--ease), opacity .3s ease;
}
.art-folder .tab:nth-child(2) { background:var(--ice); } .art-folder .tab:nth-child(3) { background:var(--paper); } .art-folder .tab:nth-child(4) { background:var(--ice-deep); }
.step-card.in .art-folder .tab { transform:none; opacity:1; }
.step-card.in .art-folder .tab:nth-child(2) { transition-delay:.12s; } .step-card.in .art-folder .tab:nth-child(3) { transition-delay:.24s; } .step-card.in .art-folder .tab:nth-child(4) { transition-delay:.36s; }
.fold-body { display:grid; gap:7px; padding:14px; border-radius:0 10px 10px 10px; background:var(--paper); box-shadow:0 14px 24px -14px rgba(30,26,24,.45); }
.fold-body b { display:block; height:5px; border-radius:5px; background:rgba(30,26,24,.18); }
.fold-body b:first-child { width:70%; background:var(--ink); height:7px; }
.art-month .mo { left:14%; right:14%; top:18%; bottom:18%; display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-content:center; }
.art-month .mo i { aspect-ratio:1; border-radius:6px; background:rgba(30,26,24,.07); transition:background .4s ease; }
.step-card.in .art-month .mo i.on { background:var(--ink); }
.step-card.in .art-month .mo i.on:nth-child(10) { transition-delay:.2s; } .step-card.in .art-month .mo i.on:nth-child(17) { transition-delay:.4s; } .step-card.in .art-month .mo i.on:nth-child(24) { transition-delay:.6s; }
.art-month .mo i.q { box-shadow:inset 0 0 0 2px var(--ice-deep); }
.step-card.in .art-month .mo i.q { background:var(--ice); transition-delay:.9s; }

/* ══════════════════════════════════════════════════════════════════════
   FROM SCRATCH: the journey holds the screen while one object becomes
   the next. vhd.js sets .in on the current stage and --jp (0 to 1).
   ══════════════════════════════════════════════════════════════════════ */
.jscroll { position:relative; height:420vh; --jp:0; }
.js-sticky {
  position:sticky; top:0; height:100vh; height:100svh;
  max-width:1240px; margin:0 auto; padding:calc(var(--nav-h) + 10px) var(--gutter) 40px;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,90px); align-items:center;
}
.js-title {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,3.2vw,48px); line-height:.98; letter-spacing:-.02em; text-wrap:balance; margin-bottom:clamp(18px,3vh,30px);
}
.js-list { list-style:none; margin:0 0 clamp(20px,3.4vh,32px); padding:0 0 0 2px; position:relative; display:grid; gap:4px; }
.js-list::before { content:''; position:absolute; left:16px; top:18px; bottom:18px; width:2px; background:rgba(30,26,24,.12); border-radius:2px; }
.js-list::after { content:''; position:absolute; left:16px; top:18px; width:2px; height:calc((100% - 36px) * var(--jp)); background:var(--ice-deep); border-radius:2px; }
.js-step { position:relative; z-index:1; display:grid; grid-template-columns:32px 1fr; gap:16px; align-items:start; padding:8px 0; color:var(--ink-40); transition:color .4s ease; }
.js-n {
  display:grid; place-items:center; width:32px; height:32px; border-radius:999px; background:var(--paper); border:2px solid rgba(30,26,24,.18);
  font-family:var(--display); font-weight:800; font-style:italic; font-size:14px; transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.js-step h3 { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(17px,1.5vw,21px); line-height:1.1; margin-top:5px; }
.js-step p { max-height:0; overflow:hidden; opacity:0; font-size:15px; line-height:1.55; color:var(--ink-70); margin-top:6px; max-width:38ch; transition:max-height .5s var(--ease), opacity .4s ease; }
.js-step.is-on { color:var(--ink); }
.js-step.is-on .js-n { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.js-step.is-on p { max-height:6em; opacity:1; }
.js-side .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }
.js-stage { position:relative; height:min(62vh,520px); }
.js-stage::before {
  content:''; position:absolute; inset:-4% 2%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(214,239,244,.95), rgba(214,239,244,0));
}
.stage { position:absolute; inset:0; opacity:0; transform:scale(.96); transition:opacity .6s ease, transform .8s var(--ease); pointer-events:none; }
.stage.in { opacity:1; transform:none; }
.stage .way-art { position:absolute; inset:10% 6%; height:auto; }
.stage .way-art::before { display:none; }
.stage > *:not(.way-art) { position:absolute; transition:transform .8s var(--ease), opacity .6s ease; }

/* name: options get struck through, one name and its domain are left */
.nm-lines { left:16%; right:16%; top:22%; display:grid; gap:16px; }
.nm-lines { justify-items:center; }
.nm-lines b { position:relative; display:block; width:60%; height:26px; border-radius:999px; background:rgba(255,255,255,.7); box-shadow:0 8px 16px -10px rgba(30,26,24,.35); }
.nm-lines b:nth-child(2) { width:48%; } .nm-lines b:nth-child(3) { width:54%; }
.nm-lines b::after { content:''; position:absolute; left:10%; right:10%; top:50%; height:2px; background:rgba(30,26,24,.55); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.stage.in .nm-lines b::after { transform:none; }
.stage.in .nm-lines b:nth-child(2)::after { transition-delay:.25s; } .stage.in .nm-lines b:nth-child(3)::after { transition-delay:.5s; }
.nm-pick {
  left:50%; top:62%; transform:translate(-50%,16px); opacity:0; transition-delay:.8s !important;
  display:inline-flex; align-items:center; gap:14px; padding:18px 24px; border-radius:18px; background:var(--paper);
  font-family:var(--display); font-weight:800; font-size:clamp(18px,1.8vw,24px); box-shadow:0 22px 40px -22px rgba(30,26,24,.55); white-space:nowrap;
}
.nm-pick em { display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#2f8a52; }
.nm-pick svg { width:16px; height:16px; border-radius:999px; background:#3fae6a; fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stage.in .nm-pick { transform:translate(-50%,0); opacity:1; }

/* website: a page builds itself */
.ms {
  left:10%; right:10%; top:14%; bottom:14%; border-radius:18px; background:#f6f3ee; padding:14px 16px 18px;
  display:grid; grid-template-rows:auto 1fr auto; gap:12px; box-shadow:0 40px 70px -36px rgba(30,26,24,.55);
}
.ms > * { transform-origin:left; transform:scaleX(0); transition:transform .7s var(--ease); }
.ms-bar { display:flex; gap:6px; } .ms-bar i { width:9px; height:9px; border-radius:999px; background:rgba(30,26,24,.15); }
.ms-hero { border-radius:12px; padding:9% 8%; display:grid; gap:10px; align-content:center; background:linear-gradient(135deg, var(--ice), #e6d6bf); }
.ms-hero b { display:block; height:12px; width:62%; border-radius:6px; background:var(--ink); }
.ms-hero b + b { height:7px; width:44%; background:rgba(30,26,24,.35); }
.ms-hero em { display:block; width:30%; height:20px; margin-top:6px; border-radius:999px; background:var(--ink); }
.ms-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .ms-tiles i { height:52px; border-radius:10px; background:rgba(30,26,24,.08); }
.stage.in .ms > * { transform:none; }
.stage.in .ms > :nth-child(2) { transition-delay:.15s; } .stage.in .ms > :nth-child(3) { transition-delay:.3s; }

/* launch: the post goes out, the switch flips, a little confetti */
.lc-post {
  left:50%; top:12%; width:min(58%,300px); transform:translate(-50%,16px) rotate(-3deg); opacity:0;
  border-radius:16px; background:var(--paper); padding:12px; display:grid; gap:10px; box-shadow:0 26px 44px -24px rgba(30,26,24,.55);
}
.lc-img { display:block; aspect-ratio:4/3; border-radius:10px; background:linear-gradient(140deg, #e6d6bf, var(--ice-deep)); }
.lc-post strong { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:15px; }
.lc-post b { display:block; height:6px; width:70%; border-radius:6px; background:rgba(30,26,24,.18); }
.stage.in .lc-post { transform:translate(-50%,0) rotate(-3deg); opacity:1; }
.stage--launch .switch {
  left:50%; bottom:10%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.stage--launch .switch-track { transition-delay:.6s; } .stage--launch .switch-knob { transition-delay:.6s; }
.stage.in .switch-track { background:#3fae6a; } .stage.in .switch-knob { transform:translateX(20px); }
.confetti { inset:0; }
.confetti i { position:absolute; width:10px; height:10px; border-radius:3px; opacity:0; }
.confetti i:nth-child(1) { left:20%; top:30%; background:var(--ice-deep); } .confetti i:nth-child(2) { left:78%; top:24%; background:#e6d6bf; }
.confetti i:nth-child(3) { left:14%; top:62%; background:var(--ink); } .confetti i:nth-child(4) { left:84%; top:58%; background:var(--ice-deep); border-radius:999px; }
.confetti i:nth-child(5) { left:30%; top:14%; background:#a9b89a; border-radius:999px; } .confetti i:nth-child(6) { left:68%; top:72%; background:#e08a5b; }
.stage.in .confetti i { animation:confetti 1.4s var(--ease) .9s both; }
.stage.in .confetti i:nth-child(even) { animation-delay:1.05s; }
@keyframes confetti { 0% { opacity:0; transform:translateY(16px) scale(.4) rotate(0); } 40% { opacity:1; } 100% { opacity:1; transform:translateY(-10px) scale(1) rotate(160deg); } }

@media (max-width:820px) {
  .jscroll { height:460vh; }
  .js-sticky { grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:10px; align-content:start; padding-top:calc(var(--nav-h) - 10px); }
  .js-stage { order:-1; height:34vh; }
  .js-title { font-size:24px; margin-bottom:10px; }
  .js-step { padding:4px 0; } .js-step p { font-size:14px; }
  .js-side .btn { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT: the story reads like a magazine. The paragraph you are reading
   lights up; the chapter word and the photo beside it follow along.
   ══════════════════════════════════════════════════════════════════════ */
.story { max-width:1180px; margin:0 auto; padding:clamp(70px,12vh,140px) var(--gutter) clamp(50px,8vh,100px); }
.story-head { max-width:760px; margin-bottom:clamp(40px,7vh,80px); }
.story-head h2 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(36px,4.6vw,72px); line-height:.95; letter-spacing:-.025em;
}
.story-head h2 em { font-style:italic; }
.story-head .story-beat { margin-top:20px; font-family:var(--display); font-weight:700; font-style:italic; font-size:clamp(20px,2vw,28px); line-height:1.3; }
.story-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,6vw,110px); }
.story-sticky { position:sticky; top:calc(var(--nav-h) + 6vh); display:grid; gap:22px; justify-items:start; }
.story-pic { position:relative; width:min(78%,300px); aspect-ratio:3/4; border-radius:999px; overflow:hidden; border:1px solid var(--ink); background:var(--ice); box-shadow:0 30px 54px -30px rgba(30,26,24,.5); transform:rotate(-2deg); }
.sw-pic { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.sw-pic img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); transform:scale(1.06); transition:transform 1.4s var(--ease); }
.sw-pic.is-on { opacity:1; }
.sw-pic.is-on img { transform:none; }
.story-words { position:relative; display:block; width:100%; height:1.1em; font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:clamp(26px,2.8vw,42px); letter-spacing:-.02em; line-height:1.1; }
.sw-w { position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .6s var(--ease); }
.sw-w.is-on { opacity:1; transform:none; }
.story-dots { display:flex; gap:8px; }
.story-dots i { width:8px; height:8px; border-radius:999px; background:rgba(30,26,24,.15); transition:background .4s ease, width .4s var(--ease); }
.story-dots i.is-on { width:26px; background:var(--ink); }
.story-body { padding-top:6vh; }
.story-p { font-size:clamp(18px,1.45vw,21px); line-height:1.7; color:rgba(30,26,24,.32); padding-block:clamp(18px,4vh,40px); transition:color .5s ease; }
.story-p.is-on { color:var(--ink); }
.story-p a.link-under { color:inherit; }
.story-cta { padding:clamp(20px,4vh,40px) 0 10vh; }

/* testimonial cards: soft paper, no hard outline */
.t-card { border:0 !important; background:rgba(255,255,255,.62) !important; border-radius:26px !important; box-shadow:0 1px 2px rgba(30,26,24,.05), 0 24px 44px -30px rgba(30,26,24,.4) !important; }
.t-card:hover { transform:translateY(-6px) !important; box-shadow:0 1px 2px rgba(30,26,24,.05), 0 34px 54px -30px rgba(30,26,24,.45) !important; }
/* the cards sit on the same cream as the quote above them, one continuous band */
.t-drag:not(.ws-track):not(.ph-strip) { background:var(--cream) !important; padding-top:10px; }
.t-card { background:#fff !important; }

@media (max-width:820px) {
  .story-grid { grid-template-columns:1fr; }
  .story-side { display:none; }
  .story-body { padding-top:0; }
  .story-p { color:var(--ink); padding-block:12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOME: the free check as a soft panel with a check running
   ══════════════════════════════════════════════════════════════════════ */
.check-band { padding-top:clamp(60px,10vh,120px); }
.ck-title {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,3.2vw,48px); line-height:.98; letter-spacing:-.02em; text-wrap:balance;
}
.ck-title em { font-style:italic; }
.check-band .teach-copy p { margin:14px 0 24px; font-size:16.5px; line-height:1.65; color:var(--ink-70); max-width:44ch; }
.check-band .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }
.ck-scene { position:relative; height:clamp(260px,26vw,340px); }
.ck-bar {
  position:absolute; left:0; right:6%; top:6%; display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-radius:999px; background:var(--paper); box-shadow:0 18px 34px -18px rgba(30,26,24,.5);
  font-size:15px; color:var(--ink);
}
.ck-bar > i { width:10px; height:10px; border-radius:999px; background:rgba(30,26,24,.18); }
.ck-url { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; }
.ck-scene.in .ck-url { max-width:22ch; transition:max-width 1.4s steps(16,end) .3s; }
.ck-card {
  position:absolute; display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:14px 18px; border-radius:16px; background:#fff; box-shadow:0 18px 34px -20px rgba(30,26,24,.5);
  font-size:14px; opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .6s var(--ease);
}
.ck-card b { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.12em; }
.ck-card em { font-style:normal; color:var(--ink-70); }
.ck-card svg { width:16px; height:16px; border-radius:999px; background:#3fae6a; fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ck-card--1 { left:4%; top:36%; } .ck-card--2 { right:2%; top:52%; } .ck-card--3 { left:14%; top:72%; background:var(--ink); color:var(--paper); }
.ck-card--2 b::before { content:''; display:inline-block; width:8px; height:8px; border-radius:999px; background:#e08a5b; margin-right:8px; vertical-align:middle; }
.ck-card--3 em { color:var(--ice); }
.ck-scene.in .ck-card { opacity:1; transform:none; }
.ck-scene.in .ck-card--1 { transition-delay:1.8s; } .ck-scene.in .ck-card--2 { transition-delay:2.2s; } .ck-scene.in .ck-card--3 { transition-delay:2.6s; }
@media (max-width:820px) { .ck-scene { height:260px; } }

/* ══════════════════════════════════════════════════════════════════════
   HOME: free check as its own light band, with a real address field
   ══════════════════════════════════════════════════════════════════════ */
.checkx {
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(80px,14vh,160px) var(--gutter);
  /* calm: the page's own paper with a soft white light, no colour block */
  background:
    radial-gradient(55% 75% at 50% 45%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(214,239,244,0), rgba(214,239,244,.22) 50%, rgba(214,239,244,0));
}
.checkx-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.checkx .ck-title { font-size:clamp(34px,4.6vw,68px); }
.checkx-p { margin:18px auto 30px; font-size:17px; line-height:1.6; color:var(--ink-70); max-width:52ch; }
.checkx-form {
  display:flex; align-items:center; gap:8px; max-width:640px; margin:0 auto;
  padding:8px; border-radius:999px; background:#fff; box-shadow:0 2px 4px rgba(30,26,24,.06), 0 30px 60px -30px rgba(30,26,24,.45);
}
.checkx-field { flex:1; display:flex; align-items:center; gap:12px; padding-left:18px; min-width:0; }
.checkx-field i { flex:none; width:10px; height:10px; border-radius:999px; background:rgba(30,26,24,.18); }
.checkx-field input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:17px; color:var(--ink); padding:12px 0; }
.checkx-field input::placeholder { color:rgba(30,26,24,.4); }
.checkx-form:focus-within { box-shadow:0 0 0 3px var(--ice-deep), 0 30px 60px -30px rgba(30,26,24,.45); }
.checkx-form .btn { flex:none; padding:18px 28px; font-size:13px; letter-spacing:.14em; }
.checkx-note { margin-top:16px; font-size:13px; color:var(--ink-60); letter-spacing:.02em; }
.checkx-float { position:absolute; inset:0; z-index:1; pointer-events:none; }
.checkx-float .ck-card { opacity:1; transform:none; }
.checkx-float .ck-card--1 { left:6%; top:22%; top:auto; bottom:62%; transform:rotate(-5deg) translateY(calc((var(--p) - .5) * -80px)); }
.checkx-float .ck-card--2 { left:auto; right:6%; top:30%; transform:rotate(4deg) translateY(calc((var(--p) - .5) * 70px)); }
.checkx-float .ck-card--3 { left:9%; top:auto; bottom:16%; transform:rotate(3deg) translateY(calc((var(--p) - .5) * -50px)); }
@media (max-width:1000px) { .checkx-float { display:none; } }
@media (max-width:620px) {
  .checkx-form { flex-direction:column; border-radius:24px; padding:10px; }
  .checkx-field { width:100%; padding:4px 10px; }
  .checkx-form .btn { width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOME: the Shortcut as a second brain that grows into brand and website
   ══════════════════════════════════════════════════════════════════════ */
.diy-live { position:static !important; transform:none !important; margin-bottom:22px; display:inline-flex; background:rgba(246,241,233,.08) !important; border:1px solid rgba(246,241,233,.18); box-shadow:none !important; }
.brainflow { position:relative; height:clamp(320px,34vw,400px); }
.bf-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bf-wires path { fill:none; stroke:rgba(207,235,196,.55); stroke-width:1.6; stroke-dasharray:6 8; animation:wire 1.6s linear infinite; vector-effect:non-scaling-stroke; }
@keyframes wire { to { stroke-dashoffset:-28; } }
.bf-label { display:block; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); }
.bf-brain { position:absolute; left:4%; top:50%; transform:translateY(-50%); width:clamp(170px,17vw,220px); aspect-ratio:1; display:grid; place-items:center; }
.br-core {
  position:relative; width:62%; aspect-ratio:1; border-radius:999px; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 35%, rgba(207,235,196,.95), rgba(167,228,146,.35) 60%, rgba(167,228,146,0) 100%);
  box-shadow:0 0 0 1px rgba(207,235,196,.35), 0 0 60px rgba(167,228,146,.25);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { transform:scale(1.05); box-shadow:0 0 0 1px rgba(207,235,196,.5), 0 0 80px rgba(167,228,146,.35); } }
.br-net { width:76%; height:76%; }
.br-lines path { fill:none; stroke:rgba(30,26,24,.45); stroke-width:1.4; }
.br-nodes circle { fill:var(--ink); animation:node 2.4s ease-in-out infinite; }
.br-nodes circle:nth-child(2n) { animation-delay:.6s; } .br-nodes circle:nth-child(3n) { animation-delay:1.2s; }
@keyframes node { 50% { fill:var(--paper); } }
.bf-brain .bf-label { position:absolute; top:calc(50% + 146px); left:50%; transform:translateX(-50%); white-space:nowrap; z-index:3; }
.orb { position:absolute; inset:0; animation:orbit 26s linear infinite; }
.orb-chip {
  position:absolute; left:50%; top:50%; margin:-13px 0 0 -38px; width:76px; text-align:center;
  padding:6px 0; border-radius:999px; background:rgba(246,241,233,.1); border:1px solid rgba(246,241,233,.22); color:var(--paper);
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  animation:orbit 26s linear infinite reverse;
}
.orb-chip:nth-child(1) { transform:rotate(0deg) translateX(118px) rotate(0deg); }
.orb-chip:nth-child(2) { transform:rotate(90deg) translateX(118px) rotate(-90deg); }
.orb-chip:nth-child(3) { transform:rotate(180deg) translateX(118px) rotate(-180deg); }
.orb-chip:nth-child(4) { transform:rotate(270deg) translateX(118px) rotate(-270deg); }
@keyframes orbit { to { rotate:360deg; } }
.bf-card {
  position:absolute; right:0; width:min(42%,230px); padding:14px; border-radius:16px;
  background:rgba(246,241,233,.06); border:1px solid rgba(246,241,233,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; gap:10px;
  opacity:0; transform:translateX(20px); transition:opacity .6s ease, transform .8s var(--ease);
}
.bf-brand { top:6%; } .bf-site { bottom:4%; }
.brainflow.in .bf-card { opacity:1; transform:none; }
.brainflow.in .bf-brand { transition-delay:.5s; } .brainflow.in .bf-site { transition-delay:.9s; }
.bf-mark { width:34px; height:34px; border-radius:999px; border:6px solid var(--sales-soft,#CFEBC4); }
.bf-brand .sw { display:flex; gap:6px; } .bf-brand .sw i { flex:1; height:18px; border-radius:6px; transform:none; }
.bf-brand .sw i:nth-child(1) { background:var(--paper); }
.bf-hero { display:grid; gap:6px; padding:12px; border-radius:10px; background:linear-gradient(135deg, rgba(207,235,196,.85), rgba(214,239,244,.85)); }
.bf-hero i { display:block; height:7px; width:70%; border-radius:6px; background:var(--ink); }
.bf-hero i + i { width:45%; height:5px; background:rgba(30,26,24,.4); }
.bf-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .bf-tiles i { height:22px; border-radius:6px; background:rgba(246,241,233,.14); }
.bf-live {
  position:absolute; right:-10px; bottom:-12px; display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px; background:var(--paper); color:var(--ink);
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.bf-live i { width:7px; height:7px; border-radius:999px; background:#3fae6a; animation:livePulse 1.8s ease-out infinite; }
@media (max-width:820px) {
  .brainflow { height:440px; }
  .bf-brain { left:50%; top:30%; transform:translate(-50%,-50%); }
  .bf-card { width:46%; } .bf-brand { top:auto; bottom:4%; left:0; right:auto; }
  .bf-wires { display:none; }
}
@media (prefers-reduced-motion: reduce) { .orb, .orb-chip, .br-core, .bf-wires path { animation:none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   AI WEBSITE SHORTCUT: the sales page in the site's design language
   ══════════════════════════════════════════════════════════════════════ */
.status-pill {
  display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(16px,2.4vh,24px);
  padding:9px 16px; border-radius:999px; background:#fff; color:var(--ink);
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 1px 2px rgba(30,26,24,.06), 0 14px 26px -16px rgba(30,26,24,.45);
}
.status-pill i { width:9px; height:9px; border-radius:999px; background:#3fae6a; animation:livePulse 1.8s ease-out infinite; }

/* "does this sound like you": the thoughts float as bubbles */
body.ww .ww-nod ul { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; margin-bottom:clamp(36px,5vh,56px); }
body.ww .ww-nod li {
  position:relative; display:block; max-width:380px; padding:18px 22px !important; border:0 !important;
  border-radius:22px 22px 22px 6px; background:#fff; font-size:16px; line-height:1.5; color:var(--ink);
  box-shadow:0 1px 2px rgba(30,26,24,.05), 0 20px 36px -24px rgba(30,26,24,.45);
}
body.ww .ww-nod li:nth-child(odd) { transform:rotate(-1.2deg); } body.ww .ww-nod li:nth-child(even) { transform:rotate(1deg) translateY(8px); border-radius:22px 22px 6px 22px; background:var(--ice); }
body.ww .ww-nod li .ww-tick { display:none; }
body.ww .ww-nod-turn { text-align:center; margin-inline:auto; }

/* what is inside: six steps, three across, each with its scene */
.steps--6 .steps-row { grid-template-columns:repeat(3,1fr); row-gap:clamp(36px,6vh,64px); }
.steps--6 .step-n { margin-top:20px; }
.steps--7 .steps-row { grid-template-columns:repeat(4,1fr); }
.steps--7 { --art-h:clamp(160px,12vw,190px); }
@media (max-width:1100px) and (min-width:821px) { .steps--7 .steps-row { grid-template-columns:repeat(2,1fr); } }
.steps--plain .step-art { display:none; }
.step-card.in .note { opacity:1; }
.step-card.in .note--1 { transform:rotate(-6deg); transition-delay:.1s; }
.step-card.in .note--2 { transform:rotate(3deg); transition-delay:.35s; }
.step-card.in .note--3 { transform:rotate(-2deg); transition-delay:.6s; }
.step-art .note { padding:10px 14px; font-size:12px; }
.step-art.art-notes .note--1 { left:8%; top:12%; } .step-art.art-notes .note--2 { left:40%; top:40%; } .step-art.art-notes .note--3 { left:14%; top:66%; }
.step-art.art-identity .mark { left:12%; top:14%; width:70px; height:70px; }
.step-art.art-identity .mark i { border-width:7px; }
.step-art.art-identity .mark b { width:30px; height:30px; border-radius:8px; }
.step-art.art-identity .aa { right:12%; top:10%; font-size:clamp(46px,4.4vw,64px); }
.step-art.art-identity .sw { left:12%; right:12%; bottom:14%; } .step-art.art-identity .sw i { height:28px; }
.step-card.in .art-identity .mark i { transform:none; opacity:1; }
.step-card.in .art-identity .mark b { transform:rotate(12deg); opacity:1; }
.step-card.in .art-identity .aa { opacity:1; transform:none; }
.step-card.in .art-identity .sw i:nth-child(2) { transition-delay:.8s; } .step-card.in .art-identity .sw i:nth-child(3) { transition-delay:.9s; } .step-card.in .art-identity .sw i:nth-child(4) { transition-delay:1s; } .step-card.in .art-identity .sw i:nth-child(1) { transition-delay:.7s; }
.step-art.art-channels .msg-core { padding:12px 16px; font-size:13px; }
.step-art .chn { font-size:10px; padding:7px 11px; }
.step-card.in .art-channels .msg-core { transform:translate(-50%,-50%); opacity:1; }
.step-card.in .chn { opacity:1; transform:none; }
.step-card.in .chn--1 { transition-delay:.35s; } .step-card.in .chn--2 { transition-delay:.45s; } .step-card.in .chn--3 { transition-delay:.55s; } .step-card.in .chn--4 { transition-delay:.65s; }
.step-card:nth-child(3n+2) .step-art { background:rgba(255,255,255,.55); }
.step-card:nth-child(3n+1) .step-art, .step-card:nth-child(3n) .step-art { background:var(--ice); }
.step-card:nth-child(3n) .step-art { background:rgba(255,255,255,.55); }
.step-card:nth-child(3n) .step-art.art-send, .step-card:nth-child(4) .step-art { background:var(--ice); }

/* the brain band on the sales page */
.diy--brain .diy-sub { font-family:var(--display); font-weight:700; font-style:italic; font-size:clamp(18px,1.6vw,22px); line-height:1.35; color:var(--paper); margin:16px 0 6px; max-width:36ch; }
.diy--brain .diy-copy > p:not(.diy-sub) { margin:12px 0 0; }
.diy--brain .diy-copy > .btn { margin-top:clamp(28px,4vh,40px); }
.diy--brain .diy-copy > h2 + p { margin-top:clamp(18px,2.6vh,24px); }

/* who this is for: two lists, no boxes, quiet icons */
body.ww .ww-col { border:0 !important; background:none !important; padding:0 !important; }
body.ww .ww-col li { padding-left:34px !important; }
body.ww .ww-col li::before {
  content:'' !important; width:22px; height:22px; border-radius:999px; top:1px !important;
  background:var(--ice) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%231E1A18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.ww .ww-col.ww-no li::before {
  background:transparent center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%231E1A18' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1.2px var(--ink);
}
body.ww .ww-col.ww-no { opacity:.85; }

/* what you can hold me to: a notebook page and a sticky promise */
body.ww .ww-proof-col { border:0 !important; border-radius:22px !important; background:#fff !important; box-shadow:0 1px 2px rgba(30,26,24,.05), 0 26px 46px -32px rgba(30,26,24,.45); }
body.ww .ww-proof-col:last-child { background:var(--ice) !important; transform:rotate(1deg); }

/* the price card: soft paper, no hard outline or offset shadow */
body.ww .ww-card { border:0 !important; border-radius:32px !important; background:#fff !important; box-shadow:0 2px 4px rgba(30,26,24,.06), 0 40px 80px -46px rgba(30,26,24,.5) !important; }
body.ww .ww-anchors b { text-decoration:line-through; text-decoration-color:rgba(30,26,24,.45); }

/* ── PRODUCT HERO: the one dark hero on the site. The nav joins it, so
   the bar, the nav and the stage read as one surface. ── */
body.ww .nav { background:var(--ink); }
body.ww .nav-logo img { filter:brightness(0) invert(1); opacity:.92; }
body.ww .nav-right a { color:var(--paper); }
body.ww .nav-right .nav-cta { background:var(--sales,#A7E492); color:var(--ink); }
body.ww .nav-right .nav-cta:hover { background:var(--paper); }
body.ww .nav-burger span { background:var(--paper); }

.pd-hero {
  --sales:#A7E492;
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:var(--paper);
  min-height:calc(100svh - 150px);
  display:flex; align-items:center;
  padding:clamp(30px,6vh,70px) var(--gutter) clamp(70px,11vh,120px);
  border-radius:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px);
}
.pd-hero .sc-glow { position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 60% at 78% 46%, rgba(167,228,146,.22), rgba(167,228,146,0) 70%),
    radial-gradient(36% 50% at 8% 100%, rgba(214,239,244,.12), rgba(214,239,244,0) 70%),
    radial-gradient(rgba(246,241,233,.09) 1px, transparent 1.2px) 0 0 / 26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent);
}
.pd-hero .sc-inner { width:100%; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,5vw,90px); align-items:center; }
.status-pill--dark { background:rgba(246,241,233,.08); color:var(--paper); box-shadow:inset 0 0 0 1px rgba(246,241,233,.16); }
.status-pill--dark i { background:var(--sales); }
.pd-hero h1 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px,5.4vw,88px); line-height:.92; letter-spacing:-.03em; text-wrap:balance; max-width:13ch;
}
.pd-hero h1 em { font-style:italic; color:var(--sales); }
.pd-hero .sc-lede { margin-top:clamp(18px,2.6vh,26px); max-width:46ch; font-size:clamp(16px,1.3vw,18px); line-height:1.6; color:var(--paper-70); }
.pd-hero .sc-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3.6vh,36px); }
.pd-hero .sc-cta .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; background:var(--sales); border-color:var(--sales); color:var(--ink); }
.pd-hero .sc-cta .btn:hover { background:var(--paper); border-color:var(--paper); }
.pd-hero .sc-cta .btn-ghost { background:transparent; border-color:rgba(246,241,233,.35); color:var(--paper); }
.pd-hero .sc-cta .btn-ghost:hover { background:var(--paper); color:var(--ink); }
.pd-hero .sc-facts { list-style:none; margin:clamp(30px,5vh,48px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; }
.pd-hero .sc-facts li { display:flex; align-items:baseline; gap:8px; font-size:14px; color:var(--paper-70); }
.pd-hero .sc-facts b { font-family:var(--display); font-weight:800; font-style:italic; font-size:24px; color:var(--paper); letter-spacing:-.02em; }

/* the workspace */
.pd-hero .sc-app { position:relative; padding:64px 0 46px; }
.pd-hero .sc-win {
  position:relative; z-index:1; border-radius:22px; overflow:hidden;
  background:#26211E; box-shadow:inset 0 0 0 1px rgba(246,241,233,.1), 0 60px 100px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.3);
  transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin:left center;
}
.pd-hero .sc-win-bar { display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid rgba(246,241,233,.08); font-size:12px; color:var(--paper-70); }
.pd-hero .sc-dots { display:flex; gap:6px; } .pd-hero .sc-dots i { width:10px; height:10px; border-radius:99px; background:rgba(246,241,233,.18); }
.pd-hero .sc-win-bar b { font-family:var(--display); font-weight:700; letter-spacing:.02em; color:var(--paper); }
.pd-hero .sc-step { margin-left:auto; padding:5px 10px; border-radius:99px; background:rgba(167,228,146,.14); color:var(--sales); font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.pd-hero .sc-win-body { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:330px; }
.pd-hero .sc-side { list-style:none; margin:0; padding:16px 12px; border-right:1px solid rgba(246,241,233,.08); display:flex; flex-direction:column; gap:4px; counter-reset:sc; }
.pd-hero .sc-side li { counter-increment:sc; display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px; font-size:12.5px; white-space:nowrap; color:rgba(246,241,233,.42); }
.pd-hero .sc-side li::before { content:counter(sc); flex:none; width:20px; height:20px; border-radius:99px; display:grid; place-items:center; font-size:10px; font-weight:700; box-shadow:inset 0 0 0 1px rgba(246,241,233,.2); }
.pd-hero .sc-side li.done { color:var(--paper-70); }
.pd-hero .sc-side li.done::before { content:''; background:var(--sales) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%231E1A18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow:none; }
.pd-hero .sc-side li.now { background:rgba(246,241,233,.07); color:var(--paper); }
.pd-hero .sc-side li.now::before { box-shadow:inset 0 0 0 1.5px var(--sales); color:var(--sales); animation:livePulse 1.8s ease-out infinite; }
.pd-hero .sc-chat { display:flex; flex-direction:column; gap:10px; padding:18px; }
.pd-hero .sc-chat .m { max-width:88%; padding:11px 14px; border-radius:16px 16px 16px 5px; background:rgba(246,241,233,.07); font-size:13.5px; line-height:1.45; color:var(--paper);
  opacity:0; transform:translateY(10px); animation:scIn .6s var(--ease) forwards; }
.pd-hero .sc-chat .who { display:block; margin-bottom:3px; font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sales); }
.pd-hero .sc-chat .you { align-self:flex-end; background:var(--ice); color:var(--ink); border-radius:16px 16px 5px 16px; }
.pd-hero .sc-chat .m:nth-child(1) { animation-delay:.5s; } .pd-hero .sc-chat .m:nth-child(2) { animation-delay:1.6s; }
.pd-hero .sc-chat .m:nth-child(3) { animation-delay:2.7s; } .pd-hero .sc-chat .m:nth-child(4) { animation-delay:3.6s; }
.pd-hero .sc-chat .typing { display:flex; gap:5px; width:max-content; padding:14px; }
.pd-hero .sc-chat .typing i { width:6px; height:6px; border-radius:99px; background:rgba(246,241,233,.6); animation:typeDot 1.2s ease-in-out infinite; }
.pd-hero .sc-chat .typing i:nth-child(2) { animation-delay:.15s; } .pd-hero .sc-chat .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes scIn { to { opacity:1; transform:none; } }
@keyframes typeDot { 0%,60%,100% { transform:none; opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }

/* floating around the window */
.pd-hero .sc-brain, .pd-hero .sc-call, .pd-hero .sc-live { position:absolute; z-index:2; box-shadow:0 30px 50px -24px rgba(0,0,0,.7); animation:chipFloat 7s ease-in-out infinite; }
.pd-hero .sc-brain {
  right:-5%; top:-16%; width:190px; padding:16px; border-radius:20px; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; gap:8px;
}
.pd-hero .sc-brain-t { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:-.005em; margin-bottom:2px; }
.pd-hero .sc-brain-ic { width:28px; height:28px; border-radius:99px; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #DDF5D2, var(--sales)); }
.pd-hero .sc-brain-ic svg { width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
.pd-hero .sc-row { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-40); }
.pd-hero .sc-row i { width:16px; height:16px; border-radius:99px; box-shadow:inset 0 0 0 1.4px var(--ink-15); flex:none; }
.pd-hero .sc-row.ok { color:var(--ink); }
.pd-hero .sc-row.ok i { box-shadow:none; background:#3fae6a center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pd-hero .sc-row.busy { color:var(--ink); }
.pd-hero .sc-row.busy i { box-shadow:inset 0 0 0 2px var(--ice-deep); border-top-color:transparent; background:conic-gradient(var(--ink) 0 25%, transparent 0); -webkit-mask:radial-gradient(circle, transparent 5px, #000 5.5px); mask:radial-gradient(circle, transparent 5px, #000 5.5px); animation:scSpin 1s linear infinite; }
@keyframes scSpin { to { transform:rotate(1turn); } }
.pd-hero .sc-meter { height:5px; border-radius:99px; background:var(--ink-15); overflow:hidden; margin-top:4px; }
.pd-hero .sc-meter i { display:block; height:100%; width:55%; border-radius:inherit; background:linear-gradient(90deg, var(--ice-deep), var(--sales)); animation:scFill 5s var(--ease) infinite alternate; }
@keyframes scFill { from { width:38%; } to { width:62%; } }
.pd-hero .sc-call {
  left:-7%; bottom:4%; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:999px;
  background:rgba(246,241,233,.94); color:var(--ink); animation-delay:-3s;
}
.pd-hero .sc-call img { width:44px; height:44px; border-radius:99px; object-fit:cover; object-position:50% 20%; display:block; }
.pd-hero .sc-call span { display:flex; flex-direction:column; font-size:12px; line-height:1.3; color:var(--ink-60); }
.pd-hero .sc-call b { font-family:var(--display); font-weight:800; font-size:13px; text-transform:uppercase; color:var(--ink); }
.pd-hero .sc-rec { width:9px; height:9px; border-radius:99px; background:#e0533d; animation:livePulse 1.8s ease-out infinite; }
.pd-hero .sc-live {
  right:2%; bottom:-1%; display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:999px;
  background:var(--sales); color:var(--ink); font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em; animation-delay:-5s;
}
.pd-hero .sc-live i { width:8px; height:8px; border-radius:99px; background:var(--ink); }
@keyframes chipFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* the problem: what AI writes blind, and what it writes from your brain */
.ww-insight { padding:clamp(80px,13vh,150px) var(--gutter); }
.ww-insight-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(40px,6vw,100px); align-items:center; }
.ww-insight .feature-claim { max-width:15ch; }
.ww-insight .feature-sub { margin-top:20px; max-width:34ch; }
.ww-insight-body { margin-top:18px; max-width:46ch; font-size:16px; line-height:1.7; color:var(--ink-60); }
.ww-vs { position:relative; display:grid; padding:10px 0 30px; }
.vs { border-radius:24px; padding:24px 26px 26px; }
.vs p { margin-top:12px; font-family:var(--display); font-weight:700; font-size:clamp(18px,1.6vw,22px); line-height:1.3; letter-spacing:-.01em; }
.vs-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.vs--meh { background:rgba(30,26,24,.05); color:var(--ink-40); transform:rotate(-2deg); }
.vs--meh p { text-decoration:line-through; text-decoration-color:rgba(30,26,24,.3); text-decoration-thickness:1.5px; }
.vs--you {
  position:relative; margin:-18px 0 0 12%; background:#fff; color:var(--ink); transform:rotate(1.5deg) translateY(30px); opacity:0;
  box-shadow:0 2px 4px rgba(30,26,24,.06), 0 40px 70px -40px rgba(30,26,24,.55);
  transition:transform .9s var(--ease) .5s, opacity .7s var(--ease) .5s;
}
.ww-vs.in .vs--you { transform:rotate(1.5deg); opacity:1; }
.vs--you .vs-tag i { width:16px; height:16px; border-radius:99px; background:#3fae6a center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vs--you p em { font-style:italic; }

@media (max-width:1000px) {
  .pd-hero .sc-inner { grid-template-columns:1fr; }
  .pd-hero .sc-app { max-width:620px; width:100%; margin:0 auto; }
  .pd-hero .sc-win { transform:none; }
  .ww-insight-inner { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .ww-insight .feature-claim, .ww-insight .feature-sub, .ww-insight-body { margin-inline:auto; }
  .ww-vs { width:min(100%,480px); text-align:left; }
}
@media (max-width:640px) {
  .pd-hero { min-height:0; }
  .pd-hero .sc-win-body { grid-template-columns:1fr; min-height:0; }
  .pd-hero .sc-side { flex-direction:row; overflow:hidden; border-right:0; border-bottom:1px solid rgba(246,241,233,.08); padding:10px; }
  .pd-hero .sc-side li { font-size:0; padding:4px; gap:0; } .pd-hero .sc-side li.now { font-size:12px; gap:8px; padding:4px 10px 4px 4px; }
  .pd-hero .sc-app { padding-top:150px; }
  .pd-hero .sc-win-bar b { white-space:nowrap; font-size:11px; }
  .pd-hero .sc-brain { width:170px; padding:12px; right:0; top:0; } .pd-hero .sc-brain .sc-row:nth-of-type(4) { display:none; }
  .pd-hero .sc-call { left:-2%; } .pd-hero .sc-live { display:none; }
  .pd-hero .sc-facts { gap:8px 20px; } .pd-hero .sc-facts b { font-size:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-hero .sc-brain, .pd-hero .sc-call, .pd-hero .sc-live, .pd-hero .sc-meter i, .pd-hero .sc-row.busy i, .pd-hero .sc-side li.now::before, .pd-hero .sc-chat .typing i { animation:none; }
  .pd-hero .sc-chat .m { animation:none; opacity:1; transform:none; }
}

/* the finish line: the site you end up with, and everything around it */
.ww-finish { padding:clamp(70px,11vh,130px) var(--gutter) clamp(60px,10vh,120px); overflow:hidden; }
.ww-finish-head { text-align:center; max-width:820px; margin:0 auto; }
.ww-finish-head h2 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(34px,4.6vw,72px); line-height:.95; letter-spacing:-.025em; text-wrap:balance;
}
.ww-finish-head h2 em { font-style:italic; }
.ww-finish-head p { margin:18px auto 0; max-width:44ch; font-size:17px; line-height:1.6; color:var(--ink-60); }
.ww-finish-stage { position:relative; max-width:1180px; margin:clamp(30px,6vh,60px) auto 0; min-height:clamp(420px,62vh,600px); display:grid; place-items:center; }
.ww-finish-stage .scene-arch { width:min(46%,420px); }
.ww-finish-stage .device-laptop { width:min(62%,660px); }
.ww-site { display:flex; flex-direction:column; gap:5%; padding:0 0 4%; background:var(--paper); container-type:inline-size; }
.ww-site .wsm-bar { display:flex; align-items:center; gap:1.2cqw; padding:1.6cqw 2.4cqw; background:#ECE4D8; }
.ww-site .wsm-bar i { width:1.4cqw; height:1.4cqw; border-radius:99px; background:rgba(30,26,24,.22); }
.ww-site .wsm-bar b { margin:0 auto; padding:.6cqw 4cqw; border-radius:99px; background:#fff; font-family:var(--body); font-weight:500; font-size:1.8cqw; color:var(--ink-60); }
.ww-site .wsm-nav { display:flex; justify-content:space-between; align-items:center; padding:0 5cqw; }
.ww-site .wsm-nav b { font-family:var(--display); font-weight:800; font-size:2.2cqw; text-transform:uppercase; letter-spacing:-.01em; }
.ww-site .wsm-nav span { display:flex; gap:2cqw; } .ww-site .wsm-nav span i { width:6cqw; height:.9cqw; border-radius:9px; background:rgba(30,26,24,.18); }
.ww-site .wsm-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:4cqw; align-items:center; padding:0 5cqw; }
.ww-site .wsm-copy { display:flex; flex-direction:column; gap:1.6cqw; }
.ww-site .wsm-copy b { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:4.6cqw; line-height:.95; letter-spacing:-.02em; }
.ww-site .wsm-copy b em { font-style:italic; background:linear-gradient(180deg,transparent 62%, var(--ice-deep) 62%); }
.ww-site .wsm-copy > i { height:1cqw; width:90%; border-radius:9px; background:rgba(30,26,24,.14); } .ww-site .wsm-copy > i + i { width:70%; }
.ww-site .wsm-btn { white-space:nowrap; line-height:1; align-self:flex-start; margin-top:.6cqw; padding:1.2cqw 2.6cqw; border-radius:99px; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:700; font-size:1.5cqw; letter-spacing:.12em; text-transform:uppercase; }
.ww-site .wsm-img { aspect-ratio:4/5; border-radius:999px 999px 3cqw 3cqw; position:relative; overflow:hidden;
  background:radial-gradient(circle at 70% 78%, #E9D9C4 0 22%, transparent 22.5%), linear-gradient(160deg, var(--ice) 0%, var(--ice-deep) 100%); }
.ww-site .wsm-img::after { content:''; position:absolute; left:18%; top:20%; width:34%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.7); }
.ww-site .wsm-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw; padding:0 5cqw; }
.ww-site .wsm-tiles i { height:7cqw; border-radius:2cqw; background:#fff; box-shadow:0 0 0 1px rgba(30,26,24,.06); }
.ww-finish-list { list-style:none; margin:0; padding:0; }
.ww-finish-list .fl {
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px; border-radius:999px; white-space:nowrap;
  font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:-.005em; color:var(--ink);
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 20px 36px -20px rgba(30,26,24,.5);
  opacity:var(--e);
}
.ww-finish-list .fl i {
  width:20px; height:20px; border-radius:999px; flex:none;
  background:#A7E492 center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%231E1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fl--1 { top:4%;  left:2%;  transform:translate(calc((1 - var(--e)) * -60px), calc((var(--p) - .5) * -90px)); }
.fl--2 { top:2%;  right:4%; transform:translate(calc((1 - var(--e)) * 60px),  calc((var(--p) - .5) * -60px)); }
.fl--3 { top:42%; left:0;   transform:translate(calc((1 - var(--e)) * -80px), calc((var(--p) - .5) * 70px)); }
.fl--4 { top:40%; right:0;  transform:translate(calc((1 - var(--e)) * 80px),  calc((var(--p) - .5) * 100px)); }
.fl--5 { bottom:6%; left:6%;  transform:translate(calc((1 - var(--e)) * -60px), calc((var(--p) - .5) * 50px)); }
.fl--6 { bottom:4%; right:8%; transform:translate(calc((1 - var(--e)) * 60px),  calc((var(--p) - .5) * 80px)); }

/* the product's green carries from the hero into the body */
body.ww .hl { background-image:linear-gradient(180deg, transparent 55%, #CFEBC4 55%, #CFEBC4 92%, transparent 92%); }
body.ww .step-card:nth-child(3n+1) .step-art, body.ww .step-card:nth-child(4) .step-art { background:#E3F3DC; }
body.ww .nav { border-radius:0; }
body.ww h2 em, .ww-how h2 em, .ww-for h2 em { font-style:italic; }

/* section heads on this page: one big line, no rule badge */
.ww-how h2, .ww-for h2, .ww-price-h, .ww-sprint2 h2 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(32px,4.2vw,64px); line-height:.95; letter-spacing:-.025em; text-wrap:balance;
}

/* what you build: a soft band, green into ice, no hard edges */
.ww-finish {
  background:
    radial-gradient(50% 60% at 15% 55%, rgba(207,235,196,.75), rgba(207,235,196,0) 70%),
    radial-gradient(50% 60% at 85% 45%, rgba(214,239,244,.9), rgba(214,239,244,0) 70%),
    linear-gradient(180deg, rgba(246,241,233,0), #EEF3E6 22%, #EAF3F1 78%, rgba(246,241,233,0));
}

/* how it works: three moves beside the four Fridays */
.ww-how { padding:clamp(80px,12vh,140px) var(--gutter) 0; }
.ww-how-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(40px,6vw,100px); align-items:center; }
.ww-how-list { list-style:none; margin:clamp(26px,4vh,40px) 0 0; padding:0; counter-reset:how; display:flex; flex-direction:column; gap:22px; }
.ww-how-list li { counter-increment:how; position:relative; padding-left:58px; font-size:16px; line-height:1.6; color:var(--ink-60); max-width:46ch; }
.ww-how-list li::before {
  content:counter(how); position:absolute; left:0; top:-4px; width:40px; height:40px; border-radius:99px; display:grid; place-items:center;
  background:var(--ink); color:#A7E492; font-family:var(--display); font-weight:800; font-style:italic; font-size:18px;
}
.ww-how-list b { display:block; font-family:var(--display); font-weight:800; font-size:18px; color:var(--ink); text-transform:uppercase; letter-spacing:-.005em; margin-bottom:2px; }
.ww-how-add { margin-top:26px; padding-left:58px; font-size:15px; color:var(--ink-60); }
.ww-cal {
  padding:clamp(22px,3vw,34px); border-radius:30px; background:#fff; transform:rotate(1.2deg);
  box-shadow:0 2px 4px rgba(30,26,24,.06), 0 50px 90px -50px rgba(30,26,24,.55);
}
.ww-cal-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--ink-15); }
.ww-cal-top b { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:16px; }
.ww-cal-top span { font-size:13px; color:var(--ink-60); }
.ww-cal-days { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ww-cal-days li {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px; border-radius:18px; background:#E3F3DC;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--display); font-weight:700; color:var(--ink-60);
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.ww-cal-days b { font-size:clamp(30px,3vw,42px); line-height:1; letter-spacing:-.03em; color:var(--ink); font-weight:800; }
.ww-cal-days li:nth-child(even) { background:var(--ice); }
.ww-cal.in .ww-cal-days li { opacity:1; transform:none; }
.ww-cal.in .ww-cal-days li:nth-child(2) { transition-delay:.15s; } .ww-cal.in .ww-cal-days li:nth-child(3) { transition-delay:.3s; } .ww-cal.in .ww-cal-days li:nth-child(4) { transition-delay:.45s; }
.ww-cal-note { margin-top:16px; font-size:13px; color:var(--ink-60); text-align:center; }

/* who it is for: chips you scan in a second */
.ww-for { padding:clamp(70px,11vh,130px) var(--gutter); }
.ww-for-inner { max-width:900px; margin:0 auto; text-align:center; }
.ww-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.ww-for .ww-chips { margin-top:clamp(26px,4vh,40px); }
.ww-chips li {
  padding:12px 20px; border-radius:999px; background:#fff; font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink);
  box-shadow:0 1px 2px rgba(30,26,24,.05), 0 14px 26px -18px rgba(30,26,24,.45);
}
.ww-chips li:nth-child(3n+2) { background:#E3F3DC; } .ww-chips li:nth-child(3n) { background:var(--ice); }
.ww-for-not { margin-top:clamp(26px,4vh,36px); font-size:15px; color:var(--ink-60); }
.ww-for-not span { font-weight:600; color:var(--ink); }

/* price: one card, the number left, what you get right, the form below */
body.ww .ww-price { padding:clamp(80px,12vh,140px) var(--gutter); }
body.ww .ww-price-inner { max-width:980px; }
.ww-price-h { text-align:center; margin-bottom:clamp(30px,5vh,50px); }
.ww-card-top { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,56px); align-items:center; }
body.ww .ww-price-now { text-align:left; }
body.ww .ww-price-row { justify-content:flex-start; }
.ww-price-sub { display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; color:var(--ink-60); }
.ww-price-sub::before { content:''; width:8px; height:8px; border-radius:99px; background:#3fae6a; animation:livePulse 1.8s ease-out infinite; }
body.ww ul.ww-gets { list-style:none; margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:12px; }
body.ww ul.ww-gets li { position:relative; padding-left:32px; font-size:16px; line-height:1.45; color:var(--ink); }
body.ww ul.ww-gets li::before {
  content:''; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:99px;
  background:#A7E492 center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%231E1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.ww ul.ww-gets li.ww-gets-add { color:var(--ink-60); font-size:14.5px; }
body.ww ul.ww-gets li.ww-gets-add::before { background:var(--ice) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%231E1A18' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.ww .ww-price-cta { margin-top:clamp(28px,4vh,40px); }
.ww-stuck { margin-top:22px; text-align:center; font-size:14px; color:var(--ink-60); }
.ww-stuck a { color:var(--ink); border-bottom:1px solid currentColor; }

/* who I am: her real signature, light on the dark panel */
.ww-me-sign img { display:block; width:150px; height:auto; filter:invert(1); mix-blend-mode:screen; opacity:.92; }
@media (max-width:900px) { .ww-me-sign img { margin-inline:auto; } }

/* the waitlist form on phones: the field keeps its height when stacked */
@media (max-width:600px) {
  body.ww .ww-wait-input { flex:none; width:100%; min-height:56px; }
}

/* the sprint: a light ice band, not a black box before the black footer */
.ww-sprint2 {
  padding:clamp(70px,11vh,120px) var(--gutter);
  padding-bottom:clamp(110px,16vh,170px);
  background:linear-gradient(180deg, rgba(214,239,244,0), rgba(214,239,244,.85) 28%, rgba(214,239,244,.85) 62%, rgba(214,239,244,0));
}
.ww-sprint2-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(30px,5vw,80px); align-items:center; }
.ww-sprint2 p { margin-top:18px; max-width:48ch; font-size:17px; line-height:1.65; color:var(--ink-70); }
.ww-sprint2-side { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.ww-sprint2 .ww-chips { justify-content:flex-start; }
.ww-sprint2 .ww-chips li { font-size:14px; padding:10px 16px; background:#fff; }
.ww-sprint2 .btn { font-size:13px; letter-spacing:.14em; padding:15px 28px; }

@media (max-width:1000px) {
  .ww-finish-stage { min-height:0; display:flex; flex-direction:column; align-items:center; gap:28px; }
  .ww-finish-stage .device-laptop { width:min(100%,560px); }
  .ww-finish-stage .scene-arch { display:none; }
  .ww-finish-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .ww-finish-list .fl { position:static; transform:none; opacity:1; font-size:13px; padding:11px 15px; }
}
@media (max-width:900px) {
  .ww-how-inner, .ww-card-top, .ww-sprint2-inner { grid-template-columns:1fr; }
  .ww-cal { width:min(100%,460px); justify-self:center; }
  body.ww .ww-price-now { text-align:center; } body.ww .ww-price-row { justify-content:center; }
  .ww-price-sub { justify-content:center; width:100%; }
}
@media (max-width:820px) {
  .status-pill { font-size:9.5px; letter-spacing:.06em; padding:8px 12px; gap:7px; white-space:nowrap; }
}

@media (max-width:820px) {
  .steps--6 .steps-row { grid-template-columns:1fr 1fr; }
  body.ww .ww-nod li, body.ww .ww-nod li:nth-child(even) { transform:none; max-width:none; }
}
@media (max-width:640px) {
  /* phones: the scene, then the number and title on one line, then the text */
  .steps--6 { --art-h:230px; }
  .steps--6 .steps-row { grid-template-columns:1fr; row-gap:56px; }
  .steps--6 .step-card { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"art art" "n title" "text text"; column-gap:14px; align-items:baseline; }
  .steps--6 .step-art { grid-area:art; margin-bottom:22px; }
  .steps--6 .step-n { grid-area:n; margin:0; font-size:40px; }
  .steps--6 .step-card h3 { grid-area:title; margin:0; font-size:20px; }
  .steps--6 .step-card p { grid-area:text; margin-top:12px; max-width:none; font-size:16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   SELECTED WEBSITES: a slider of real projects, each card opens its case
   The track starts on the content edge and runs off the right of the
   screen, which says "there is more" without a word.
   ══════════════════════════════════════════════════════════════════════ */
.ws { padding:clamp(56px,9vh,110px) 0 clamp(60px,9vh,110px); background:#F3EEE7; }
.ws .craft-head { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.ws-track.t-drag {
  --edge:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  background:none; display:flex; gap:clamp(16px,2vw,28px);
  padding:6px var(--edge) 10px; scroll-padding-inline:var(--edge);
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
.ws-track.dragging { scroll-snap-type:none; }
.ws-card { flex:none; width:clamp(280px,44vw,660px); scroll-snap-align:start; display:block; color:var(--ink); }
.ws-media {
  position:relative; display:block; border-radius:20px; overflow:hidden;
  aspect-ratio:3/2; background:var(--cream);
}
.ws-media img {
  width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
  transition:transform 1.2s var(--ease);
}
.ws-card:hover .ws-media img { transform:scale(1.045); }
.ws-view {
  position:absolute; right:14px; bottom:14px;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); border-radius:999px; padding:10px 16px;
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.ws-card:hover .ws-view, .ws-card:focus-visible .ws-view { opacity:1; transform:none; }
.ws-title {
  display:block; margin-top:16px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(18px,1.7vw,24px); letter-spacing:-.01em; line-height:1.05;
}
.ws-line { display:block; margin-top:6px; font-size:15px; line-height:1.5; color:var(--ink-60); max-width:46ch; }
.ws-controls {
  max-width:var(--maxw); margin:clamp(20px,3.4vh,32px) auto 0; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:12px;
}
.ws-btn {
  width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
  background:transparent; color:var(--ink); border:1px solid var(--ink); cursor:pointer;
  font-size:18px; transition:background .3s, color .3s, opacity .3s;
}
.ws-btn:hover { background:var(--ink); color:var(--paper); }
.ws-btn:disabled { opacity:.3; cursor:default; background:transparent; color:var(--ink); }
.ws-progress { flex:1; height:2px; background:var(--ink-15); margin:0 clamp(8px,2vw,24px); position:relative; overflow:hidden; border-radius:2px; }
.ws-progress > span { position:absolute; inset:0 auto 0 0; width:var(--p,20%); left:var(--l,0%); background:var(--ink); border-radius:2px; transition:left .2s linear; }

@media (max-width:820px) {
  .anat-grid { grid-template-columns:1fr; }
  .anat-pin { width:30px; height:30px; font-size:12.5px; }
  .anat-figure { border-radius:16px; }
  .ws-card { width:82vw; }
  .ws-view { opacity:1; transform:none; }
  .ws-controls .ws-btn { display:none; }
}

.walk { max-width:1180px; margin:0 auto; padding:clamp(56px,9vh,110px) var(--gutter); }
.walk-head { margin-bottom:clamp(30px,5vh,44px); }
.walk-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,4vw,50px) clamp(30px,5vw,72px);
  margin-top:clamp(26px,4vh,44px);
}
.walk-item h3 {
  display:flex; align-items:baseline; gap:11px;
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(19px,2.1vw,28px); line-height:1;
}
.walk-item h3::before { content:'\2726'; color:var(--ice-deep); font-size:.6em; }
.walk-item p {
  margin-top:10px; color:var(--ink-60);
  font-size:clamp(15px,1.35vw,16.5px); line-height:1.6; max-width:42ch;
}

@media (max-width:900px) {
  .pulls-row { grid-template-columns:1fr; gap:30px; }
  .pull { flex-direction:row; align-items:flex-start; gap:18px; }
  .pull-ic { flex-shrink:0; }
}

@media (max-width:820px) {
  .feature { grid-template-columns:1fr; gap:clamp(30px,7vw,44px); }
  .feature-media { max-width:78%; }
  .feature-media img { aspect-ratio:5/6; }
  .jstep { grid-template-columns:26px 1fr; gap:14px; }
  .craft-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .walk-grid { grid-template-columns:1fr; gap:26px; }
  .craft-grid img { filter:grayscale(0) contrast(1.02); }
  /* no hover on touch: captions stay visible, so they need a real panel
     behind them. The bottom-only gradient is not enough on narrow tiles. */
  .craft-cap, .craft-cap p { opacity:1; transform:none; }
  .craft-cap {
    padding:26px 13px 13px;
    background:linear-gradient(180deg, rgba(30,26,24,0) 0%, rgba(30,26,24,.88) 16%, rgba(30,26,24,.95) 42%, rgba(30,26,24,.97) 100%);
  }
  .craft-cap h3 { font-size:14px; }
  .craft-cap p { margin-top:5px; font-size:12.5px; line-height:1.42; color:rgba(246,241,233,.88); }
}

/* generic reveal */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .9s ease, transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }

/* ════════════════════════════════════
   ARTICLE / RESOURCES (blog)
   ════════════════════════════════════ */
.article { max-width:760px; margin:0 auto;
  padding:max(calc(var(--hero-pad-top) - var(--promo-h)), calc(var(--nav-h) + 24px))
          var(--gutter) clamp(60px,10vh,120px); }
/* the document hero's eyebrow, same size and spacing as .crumb above */
.article-meta {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vh,26px);
  font-family:var(--display); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
/* Step 3 of the one scale. Sentence case, not caps: an article title runs
   long and caps at this size would be a wall. */
.article h1 {
  font-family:var(--display); font-weight:800;
  font-size:var(--fs-h1-doc); line-height:1.04; letter-spacing:var(--ls-h1);
  text-wrap:balance;
}
.article-lede { font-size:var(--fs-lede); color:var(--ink-60); margin-top:20px; line-height:1.55; }
.article-body { font-size:17px; line-height:1.75; color:var(--ink); margin-top:clamp(32px,5vh,48px); }
.article-body > * + * { margin-top:1.15em; }
.article-body h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(22px,2.6vw,30px); line-height:1.1; margin-top:1.8em;
}
.article-body h3 { font-family:var(--display); font-weight:700; font-size:19px; margin-top:1.5em; }
.article-body a { color:var(--ink); border-bottom:2px solid var(--ice-deep); }
.article-body a:hover { color:var(--ink-60); }
.article-body ul, .article-body ol { padding-left:1.2em; }
.article-body li { margin-top:.5em; }
.article-body strong { font-weight:600; }
.article-body blockquote {
  background:var(--ice); border:1px solid var(--ink); border-radius:18px;
  padding:clamp(18px,2.4vw,26px); margin:1.6em 0;
  font-style:italic; color:var(--ink);
}
.takeaways { background:var(--ice); border:1px solid var(--ink); border-radius:22px; padding:clamp(22px,3vw,32px); margin:2em 0; }
.takeaways .tk-label {
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); display:block; margin-bottom:14px;
}
.takeaways ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.takeaways li { padding-left:26px; position:relative; font-size:15.5px; margin:0; }
.takeaways li::before { content:'\2192'; position:absolute; left:0; font-weight:700; }
.article-cta { margin-top:clamp(40px,6vh,64px); padding-top:32px; border-top:1px solid var(--ink-15); }
.article-cta p { font-size:19px; margin-bottom:22px; font-family:var(--display); font-weight:700; }
.article-foot {
  margin-top:40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40);
}

/* resources hub (article index) */
.res-hub { max-width:960px; margin:0 auto;
  padding:max(calc(var(--hero-pad-top) - var(--promo-h)), calc(var(--nav-h) + 24px))
          var(--gutter) clamp(60px,10vh,120px); }
.res-hub-head { margin-bottom:clamp(30px,5vh,48px); }
.res-hub-head .pill-badge { font-size:var(--fs-label); padding:9px 22px; }
.res-hub-head h1 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-h1-doc); line-height:1; letter-spacing:var(--ls-h1);
  text-wrap:balance; margin:clamp(18px,2.4vh,26px) 0 0;
}
.res-item {
  display:grid; grid-template-columns:230px 1fr; gap:clamp(20px,3vw,40px); align-items:center;
  border-top:1px solid var(--ink-15); padding:clamp(24px,3.4vh,36px) 0;
}
.res-item:last-child { border-bottom:1px solid var(--ink-15); }
.res-thumb { border-radius:14px; overflow:hidden; background:var(--cream); }
.res-thumb img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.02);
  transition:filter 1s var(--ease), transform 1.2s var(--ease);
}
.res-item:hover .res-thumb img { filter:grayscale(0); transform:scale(1.05); }
.res-item .res-cat { font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-40); }
.res-item h2 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,3vw,34px); line-height:1.05; margin:8px 0; letter-spacing:-.01em; transition:color .3s;
}
.res-item:hover h2 { color:var(--ink-60); }
.res-item p { color:var(--ink-60); font-size:15px; max-width:62ch; }
.article-hero { margin-top:clamp(26px,4vh,42px); border-radius:16px; overflow:hidden; }
.article-hero img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* ── Responsive ── */
@media (max-width:1100px) {
  .c-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .res-item { grid-template-columns:1fr; gap:16px; }
}
@media (max-width:960px) {
  .pain-grid, .pr-grid, .process-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .nav-right { display:none; }
  .nav-burger { display:flex; }
  .float-nav { display:none; }
  .hero-bgword { display:none; }
  .scroll-cue { display:none; }
  /* .stats is a 4-col grid on desktop; it used to rely on flex-wrap here */
  .stats { grid-template-columns:repeat(2,1fr); row-gap:clamp(24px,5vh,40px); }
  .srow { grid-template-columns:1fr; }
  .srow .desc { grid-column:1; max-width:none; }
  /* Hide the <picture> wrapper, not just the <img>. The desktop rule pins the
     wrapper at flex:0 0 96px, so hiding only the img left an invisible 96px box
     plus the 18px gap in front of every description on mobile. */
  .srow .thumb,
  .srow .desc > picture { display:none; }
  .srow:hover { transform:translateX(6px); }
  .about, .zero-inner { grid-template-columns:1fr; }
  .about-pill { max-width:70%; }
  .zero-media { max-width:72%; margin:0 auto; }
  .impact .inner { max-width:none; }
  /* The underlined phrase is nowrap on desktop, where it has room. On phones
     it outgrew the screen (Portuguese About: 520px on a 375px phone) and
     .impact's overflow:hidden cut it off, so let it wrap here instead. */
  .impact h2 .u { display:inline-block; white-space:normal; }
  .impact .bgimg { transform:scale(1.12); object-position:62% 20%; }
  .impact::before { background:rgba(15,13,12,.62); }
  .pain-grid, .pr-grid, .process-grid, .fit-inner { grid-template-columns:1fr; }
  .c-grid { grid-template-columns:repeat(2,1fr); }
  .get { grid-template-columns:40px 1fr; }
  .get p { grid-column:2; text-align:left; max-width:none; }
  .p-hero .bgword { display:none; }
  .explain { grid-template-columns:1fr; }
  .step { grid-template-columns:48px 1fr; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .hero h1 .line > span, .p-hero h1 .line > span { transform:none; }
  .wall-light { display:none; }
  .vp img, .tickstrip .tick { animation:none; }
  .hero-pill, .hero-sub, .scroll-cue { opacity:1; transform:rotate(var(--media-tilt)); translate:none; }
  .reveal { opacity:1; transform:none; }
  .step-art > *, .mini > * { opacity:1 !important; }
  .art-call .face, .mini > *, .art-build .bubble { transform:none !important; }
  .art-call .art-pill, .art-live .url { transform:translateX(-50%) !important; }
  .hl { background-size:100% 100%; }
  .swoosh path { stroke-dashoffset:0; }
  .bw { filter:none; }
  .loader { display:none; }
}

/* ── Instagram carousel (reuses .t-drag mechanics from vhd.js) ── */
.insta { padding:clamp(60px,9vh,110px) 0 clamp(30px,5vh,60px); background:var(--cream); }
.insta-head { max-width:var(--maxw); margin:0 auto clamp(26px,4vh,40px); padding:0 var(--gutter); }
.insta-head .rule-badge { width:100%; margin-bottom:22px; }
.insta-head h2 {
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(30px,4vw,58px); line-height:1;
}
.insta-head h2 em { font-style:italic; font-weight:800; color:var(--ink); }
.insta-sub { margin-top:16px; color:var(--ink-60); max-width:52ch; }
.insta .ig-drag { background:transparent; padding:0 var(--gutter) clamp(22px,4vh,40px); }
.insta .ig-track { gap:16px; }
.ig-card {
  position:relative; flex-shrink:0;
  width:clamp(220px,26vw,300px); aspect-ratio:1/1;
  border:1px solid var(--ink); border-radius:20px; overflow:hidden;
  background:var(--ice); display:block;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.ig-card img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.15); transition:filter .5s ease, transform 1s var(--ease);
}
.ig-card:hover { transform:translateY(-6px); box-shadow:7px 7px 0 var(--ink); }
.ig-card:hover img { filter:grayscale(0); transform:scale(1.04); }
.ig-glyph {
  position:absolute; right:12px; bottom:12px; width:26px; height:26px;
  border:2px solid #fff; border-radius:8px; opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.ig-glyph::after { content:''; position:absolute; inset:5px; border:2px solid #fff; border-radius:50%; }
.ig-card:hover .ig-glyph { opacity:1; transform:translateY(0); }
.insta-cta { max-width:var(--maxw); margin:0 auto; padding:8px var(--gutter) 0; }

@media (max-width:820px) {
  .ig-card { width:clamp(180px,62vw,240px); }
}

/* ══════════════════════════════════════════════════════════════════════
   PLASTER — the wall from the reference photos.

   This lives at PAGE level, not per section. Sections like .pulls (1240px),
   .walk (1180px) and .journey (960px) are max-width constrained, so painting
   the wall inside each one produced centred rectangles of differing widths
   with visible seams: stacked panels, not a wall. One fixed layer behind all
   content is both correct and cheaper — it replaces 6-9 animating layers per
   page with exactly two.
   ══════════════════════════════════════════════════════════════════════ */
body.wall::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 8% -10%, rgba(255,255,255,.8), rgba(255,255,255,0) 56%),
    radial-gradient(90% 70% at 94% 108%, rgba(124,108,90,.14), rgba(124,108,90,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23pg)' opacity='0.18'/%3E%3C/svg%3E");
  background-size:auto, auto, 160px 160px;
}
/* the light that moves — one layer for the whole page */
body.wall > .wall-light {
  position:fixed; inset:-18% -24%; z-index:-1; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(255,255,255,0) 4%, rgba(255,255,255,.42) 20%, rgba(255,255,255,0) 36%,
    rgba(124,108,90,0) 52%, rgba(124,108,90,.1) 64%, rgba(124,108,90,0) 78%);
  animation:plaster-sweep 26s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes plaster-sweep { from { transform:translateX(-9%);} to { transform:translateX(9%);} }

/* .plaster is now only a hook: light sections inherit the page wall and need
   nothing of their own. Kept so the existing markup stays valid. */
.plaster { position:relative; }
.plaster > * { position:relative; z-index:1; }

/* Ink sections DO need local treatment: their base colour differs from the
   page, so the wall behind them is not visible. */
.plaster-ink { position:relative; isolation:isolate; overflow:hidden; }
.plaster-ink::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.34;
  background-image:
    radial-gradient(125% 85% at 10% -12%, rgba(255,255,255,.1), rgba(255,255,255,0) 58%),
    radial-gradient(95% 75% at 92% 112%, rgba(0,0,0,.28), rgba(0,0,0,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23pg)' opacity='0.18'/%3E%3C/svg%3E");
  background-size:auto, auto, 160px 160px;
}

/* ── browser frame for the design-websites hero: the screenshot scrolls itself ── */
/* a browser frame is landscape and must sit straight — override the portrait
   pill's 340px width and 2.5deg tilt for heroes that carry a screen instead. */
.hero-split .hs-media:has(.wframe) { width:min(100%,520px); transform:none; }
.hero-split .hs-inner:has(.wframe) { grid-template-columns:minmax(0,1fr) minmax(0,.92fr); }
@media (max-width:820px) {
  .hero-split .hs-media:has(.wframe) { width:min(92%,460px); }
}

.wframe {
  border:1px solid var(--ink); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:16px 16px 0 var(--ink-08);
}
.wframe-bar {
  display:flex; align-items:center; gap:8px; padding:13px 16px;
  border-bottom:1px solid var(--ink-15); background:var(--cream);
}
.wframe-bar i { width:9px; height:9px; border-radius:999px; background:var(--ink-15); display:block; }
.wframe-bar .u { flex:1; height:20px; border-radius:999px; background:var(--ink-08); margin-left:10px; }
.vp { height:clamp(240px,34vh,340px); overflow:hidden; position:relative; }
.vp img { width:100%; display:block; animation:vp-scroll 16s cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes vp-scroll { from { transform:translateY(0);} to { transform:translateY(-32%);} }

/* ── marketing ticker strip ── */
.tickstrip { background:var(--ink); color:var(--paper); padding:22px 0; overflow:hidden; }
.tickstrip .tick {
  display:flex; gap:56px; white-space:nowrap; width:max-content;
  animation:tick-roll 26s linear infinite;
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(246,241,233,.55);
}
@keyframes tick-roll { from { transform:translateX(0);} to { transform:translateX(-50%);} }


/* ── Skip to content: first focusable element, visible only when focused, so
   keyboard users can jump past both navigations. WCAG 2.4.1. ── */
.skip-link {
  position:absolute; left:var(--gutter); top:-100px; z-index:9000;
  font-family:var(--display); font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  padding:14px 22px; border-radius:999px; border:1px solid var(--ink);
  transition:top .25s var(--ease);
}
.skip-link:focus { top:16px; outline:2px solid var(--ice-deep); outline-offset:3px; }

/* the sweep is a luxury; on phones it costs battery for the least visual return */
@media (max-width:640px) {
  .wall-light { animation:none; }
  /* Decorative always-on loops are desktop-only affordances. On a phone they
     cost battery and main-thread time for effects the viewport barely shows. */
  .marquee-track, .logos-track, .tickstrip .tick { animation:none; }
  .vp img { animation:none; }
  .scroll-cue, .talk .avail .dot { animation:none; }
}


/* ── Cookie consent (analytics only load after Accept) ── */
.consent {
  position:fixed; left:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px); z-index:3500;
  width:min(420px, calc(100vw - 24px));
  background:var(--ink); color:var(--paper); border-radius:18px;
  padding:18px 18px 16px; box-shadow:0 18px 50px rgba(30,26,24,.28);
  font-size:14.5px; line-height:1.55;
}
.consent p { margin:0; color:rgba(246,241,233,.86); }
.consent a { color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.consent-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.consent-btn {
  min-height:44px; padding:0 20px; border-radius:999px; cursor:pointer;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(246,241,233,.35); background:transparent; color:var(--paper);
}
.consent-btn:hover { border-color:var(--paper); }
.consent-yes { background:var(--ice); border-color:var(--ice); color:var(--ink); }
.consent-yes:hover { background:var(--paper); border-color:var(--paper); }
.consent :focus-visible { outline:2px solid var(--paper); outline-offset:3px; }
.talk-foot .consent-open {
  background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
}
.talk-foot .consent-open:hover { color:var(--ice); }
.legal .article-body code { font-size:.9em; background:var(--cream); padding:1px 6px; border-radius:6px; }


/* ══════════════════════════════════════════════════════════
   PROMO: top bar + corner aside for The AI Website Shortcut
   Both are dismissible and remember the choice. Neither shows
   on the Shortcut pages themselves, the member area or the
   legal pages, and neither shows until the cookie banner has
   been answered, so a first-time visitor is never asked two
   things at once.

   Sizes come from the same tokens as everything else: 14px for
   every caps label and control, nothing under 14px.

   The aside is a corner card on purpose, not a centred
   interstitial. This site's job is to make Verena look like a
   senior partner; a full-screen overlay selling a low-priced
   self-serve kit would undercut that, cover the page's own call
   to action, and put a modal in a keyboard user's way. The card
   sits out of the way, takes no focus, and steps aside entirely
   when the real call to action scrolls into view.
   ══════════════════════════════════════════════════════════ */
.promo-bar {
  position:relative; z-index:400;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,2vw,22px);
  padding:10px calc(var(--gutter) + 40px) 10px var(--gutter);
  text-align:center; min-height:48px;
}
.promo-bar p { margin:0; font-size:15px; line-height:1.4; color:rgba(246,241,233,.86); }
.promo-bar strong { color:var(--paper); font-weight:600; }
/* an underlined link, not a bright pill: an announcement, not an ad unit */
.promo-bar a.promo-link {
  font-family:var(--display); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ice); white-space:nowrap;
  border-bottom:2px solid rgba(214,239,244,.5);
  display:inline-flex; align-items:center; min-height:28px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.promo-bar a.promo-link:hover { color:var(--paper); border-bottom-color:var(--paper); }
.promo-x {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:rgba(246,241,233,.7); font-size:17px; line-height:1;
}
.promo-x:hover { color:var(--paper); background:rgba(246,241,233,.12); }
body.has-promo .nav { top:var(--promo-h, 48px); }
body.has-promo .float-nav { top:calc(var(--promo-h, 48px) + 14px); }
@media (max-width:820px) {
  /* one centred sentence, so the text and the link flow together instead of
     stacking into three rows. 95px of a phone screen was too much to spend. */
  .promo-bar { display:block; text-align:center; padding:10px 48px 11px 16px; min-height:44px; }
  .promo-bar p { display:inline; font-size:14px; line-height:1.35; }
  .promo-bar a.promo-link { display:inline; margin-left:8px; border-bottom-width:1px; }
  .promo-x { right:4px; }
}

/* ── the aside ── */
.promo-pop {
  position:fixed; z-index:3600;
  right:var(--gutter); bottom:clamp(16px,3vh,28px);
  width:min(360px, calc(100vw - var(--gutter) * 2));
  max-height:min(72svh, 560px); overflow:auto;
}
.promo-card {
  position:relative;
  background:var(--paper); border:1px solid var(--ink); border-radius:22px;
  padding:clamp(20px,2.4vw,26px);
  box-shadow:10px 10px 0 var(--ink-08);
  animation:promoIn .45s var(--ease) both;
}
@keyframes promoIn { from { opacity:0; translate:0 14px; } to { opacity:1; translate:0 0; } }
.promo-eyebrow {
  display:block; font-family:var(--display); font-size:var(--fs-label);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-60); margin-bottom:12px; padding-right:30px;
}
.promo-card h2 {
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.015em; font-size:clamp(20px,.9rem + .5vw,24px); line-height:1.08;
  text-wrap:balance;
}
.promo-card p { margin-top:12px; font-size:15px; line-height:1.6; color:var(--ink-60); }
.promo-card .promo-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:10px; }
/* the card carries a small copy of the check's own address bar */
.promo-card .promo-check {
  display:flex; align-items:center; gap:6px; margin-top:18px;
  padding:5px 5px 5px 18px; border:1px solid var(--ink); border-radius:999px; background:var(--cream);
  transition:box-shadow .2s var(--ease);
}
.promo-card .promo-check:focus-within { box-shadow:0 0 0 3px var(--ice); }
.promo-card .promo-check input {
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family:var(--body); font-size:16px; color:var(--ink); padding:10px 0;
}
.promo-card .promo-check input::placeholder { color:var(--ink-40); }
.promo-card .promo-check .btn { padding:11px 18px; flex:none; }
.promo-card .btn { padding:14px 24px; }
.promo-card .promo-later {
  background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--ink-60);
  font-family:var(--display); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; min-height:44px;
}
.promo-card .promo-later:hover { color:var(--ink); }
.promo-card .promo-x { color:var(--ink-40); right:8px; top:8px; transform:none; }
.promo-card .promo-x:hover { color:var(--ink); background:var(--cream); }
@media (max-width:560px) {
  .promo-pop { left:var(--gutter); right:var(--gutter); width:auto; }
}
@media (prefers-reduced-motion: reduce) { .promo-card { animation:none; translate:none; } }

/* ── Photo break ──
   One quiet photograph between long runs of text. Held to the width of the
   widest content column (.walk, 1180px) so it never overpowers the copy, and
   rounded like the portrait frames. No border, no box: space does the work. */
.photo-break { max-width:1180px; margin:clamp(8px,2vh,24px) auto; padding:0 var(--gutter); }
.photo-break picture { display:block; }
.photo-break img {
  display:block; width:100%; height:clamp(220px,38vh,440px);
  object-fit:cover; border-radius:28px; background:var(--cream);
}
.photo-break--inline { padding:0; margin:0 0 clamp(28px,4vh,44px); }
.photo-break--inline img { height:clamp(180px,26vh,300px); }
@media (max-width:560px) { .photo-break img { height:clamp(200px,32vh,280px); border-radius:20px; } }


/* ══════════════════════════════════════════════════════════════════════
   HOME: one continuous wall from the check to the about section. The
   sections stop painting their own bands; the page's plaster light runs
   through, and only space and the thin rule badges separate them.
   ══════════════════════════════════════════════════════════════════════ */
body.home .checkx { background:none; isolation:isolate; }
body.home .checkx::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(48% 62% at 50% 46%, rgba(255,255,255,.72), rgba(255,255,255,0) 70%);
}
body.home .logos { border-bottom:0; padding-top:clamp(10px,2vh,24px); }
body.home .ws { background:none; padding-top:clamp(40px,7vh,90px); }
body.home .about { padding-top:clamp(70px,11vh,140px); }

/* the "now open" note on the program band: a quiet line, not a pill */
body.home .diy-live {
  gap:8px; padding:0 !important; border:0 !important; background:none !important; margin-bottom:16px;
  font-size:10.5px !important; letter-spacing:.16em; color:rgba(246,241,233,.62) !important;
}
body.home .diy-live i { width:6px; height:6px; }
body.home .quote, body.home .t-drag:not(.ws-track):not(.ph-strip) { background:transparent !important; }

/* ══ The free check, with a reason to look: copy and form on the left, a
   homepage being marked up on the right, the way the real report does it ══ */
.checkx { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(36px,5vw,90px);
  max-width:1240px; margin:0 auto; text-align:left; padding-left:var(--gutter); padding-right:var(--gutter); }
.checkx .checkx-copy { max-width:560px; margin:0; justify-self:end; }
.checkx .checkx-p { margin-left:0; }
.checkx .checkx-form { margin:0; }
body.home .checkx::before { background:radial-gradient(40% 70% at 74% 50%, rgba(214,239,244,.55), rgba(214,239,244,0) 70%), radial-gradient(40% 60% at 30% 50%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); }
.ck-demo { position:relative; z-index:1; width:min(100%,520px); justify-self:start; }
.ck-win { position:relative; border-radius:18px; overflow:visible; background:#fff; box-shadow:0 2px 4px rgba(30,26,24,.05), 0 50px 90px -50px rgba(30,26,24,.55); transform:rotate(1.5deg); }
.cd-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:18px 18px 0 0; background:#F4F1EC; border-bottom:1px solid rgba(30,26,24,.07); }
.cd-bar i { width:9px; height:9px; border-radius:99px; background:rgba(30,26,24,.16); }
.cd-bar span { margin:0 auto; padding:4px 14px; border-radius:99px; background:#fff; font-size:11px; color:var(--ink-40); }
.ck-page { display:grid; grid-template-columns:1.1fr .9fr; grid-template-areas:"nav nav" "h1 img" "h1b img" "l1 img" "l2 img" "cta img" "tiles tiles"; gap:10px 22px; padding:20px 24px 24px; }
.ck-nav { grid-area:nav; display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ck-nav b { width:46px; height:9px; border-radius:6px; background:rgba(30,26,24,.3); margin-right:auto; }
.ck-nav i { width:30px; height:6px; border-radius:6px; background:rgba(30,26,24,.12); }
.ck-h1 { grid-area:h1; height:16px; border-radius:6px; background:rgba(30,26,24,.78); }
.ck-h1--s { grid-area:h1b; width:70%; }
.ck-line { grid-area:l1; height:7px; border-radius:6px; background:rgba(30,26,24,.14); align-self:end; }
.ck-line--s { grid-area:l2; width:80%; align-self:start; }
.ck-cta { grid-area:cta; width:44%; height:22px; border-radius:99px; background:var(--ink); margin-top:4px; }
.ck-img { grid-area:img; border-radius:12px; min-height:120px; background:linear-gradient(150deg, #EEF7F8, #E9E1D5); }
.ck-tiles { grid-area:tiles; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.ck-tiles i { height:44px; border-radius:10px; background:#F6F3EE; }
.ck-pin { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 13px 9px 9px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.96); font-size:12.5px; color:var(--ink-60); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 30px -14px rgba(30,26,24,.45);
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.ck-pin b { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:11.5px; letter-spacing:.02em; color:var(--ink); }
.ck-pin em { width:20px; height:20px; border-radius:99px; flex:none; background:var(--ink) center / 11px no-repeat; }
.ck-pin em.ok { background-color:#A7E492; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%231E1A18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ck-pin em.no { background-color:#fff; box-shadow:inset 0 0 0 1.5px var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%231E1A18' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ck-pin em.go { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M9 5l3 3-3 3' fill='none' stroke='%23D6EFF4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ck-pin--1 { left:-6%; top:30%; } .ck-pin--2 { right:-8%; top:58%; } .ck-pin--3 { left:6%; bottom:-14px; }
.ck-demo.in .ck-pin { opacity:1; transform:none; }
.ck-demo.in .ck-pin--1 { transition-delay:.5s; } .ck-demo.in .ck-pin--2 { transition-delay:.9s; } .ck-demo.in .ck-pin--3 { transition-delay:1.3s; }
.ck-demo.in .ck-pin--1 { animation:ckBob 6s ease-in-out 1.4s infinite; } .ck-demo.in .ck-pin--2 { animation:ckBob 6s ease-in-out 2.4s infinite; }
@keyframes ckBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.ck-score { position:absolute; z-index:3; right:-10px; top:-26px; display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:16px; background:var(--ink); color:var(--paper); box-shadow:0 20px 40px -18px rgba(30,26,24,.7); transform:rotate(-3deg); }
.ck-score svg { width:44px; height:44px; transform:rotate(-90deg); }
.ck-score circle { fill:none; stroke:rgba(246,241,233,.18); stroke-width:4; }
.ck-score circle.v { stroke:#A7E492; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.4s var(--ease) .4s; }
.ck-demo.in .ck-score circle.v { stroke-dashoffset:27; }
.ck-score b { position:absolute; left:8px; width:44px; text-align:center; font:800 14px/1 var(--display); }
.ck-score span { font:700 10px/1.2 var(--display); letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,233,.7); max-width:60px; }
@media (max-width:1000px) {
  .checkx { grid-template-columns:1fr; text-align:center; }
  .checkx .checkx-copy { justify-self:center; margin:0 auto; }
  .checkx .checkx-p { margin-left:auto; }
  .checkx .checkx-form { margin:0 auto; }
  .ck-demo { justify-self:center; width:min(100%,460px); margin-top:20px; }
  .ck-pin--1 { left:-2%; } .ck-pin--2 { right:-2%; }
}
@media (prefers-reduced-motion: reduce) { .ck-pin { opacity:1; transform:none; animation:none !important; } .ck-score circle.v { stroke-dashoffset:27; transition:none; } }

/* cookie notice: a small light note at the bottom right, not a dark slab */
.consent { left:auto; right:clamp(12px,2vw,20px); bottom:clamp(12px,2vw,20px); width:min(330px, calc(100vw - 24px));
  padding:14px 14px 12px 16px; border-radius:16px; background:rgba(255,255,255,.94); color:var(--ink);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 2px rgba(30,26,24,.06), 0 20px 44px -22px rgba(30,26,24,.5); font-size:12.5px; line-height:1.5; }
.consent p { color:var(--ink-70); }
.consent a { color:var(--ink); }
.consent-actions { margin-top:10px; gap:6px; }
.consent-btn { min-height:34px; padding:0 14px; font-size:10.5px; letter-spacing:.12em; border-color:rgba(30,26,24,.18); color:var(--ink); }
.consent-btn:hover { border-color:var(--ink); }
.consent-yes { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.consent-yes:hover { background:#2a2420; border-color:#2a2420; color:var(--paper); }
.consent :focus-visible { outline-color:var(--ink); }

/* the check: "Free" sits right where people type; on phones the preview leads */
.ck-free { flex:none; padding:6px 10px; border-radius:999px; background:#CFEBC4; color:var(--ink);
  font:800 10.5px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:1000px) {
  .checkx .ck-demo { order:-1; margin:0 auto 26px; }
}