/* fonts are served from this site (latin and latin-ext only): no trip to another server before the first paint */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/architects-daughter-latin-ext-bd8708.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: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/architects-daughter-latin-963a5f.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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext-efa530.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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-a05df3.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-ext-af150b.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-605034.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-ext-af150b.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-605034.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-ext-af150b.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-605034.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: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/permanent-marker-latin-db42b4.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{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .22 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* the paper tooth, shared by the body and the scene that covers the hero */
  --paper:#faf6f2;      /* matched to the illustration's sky, so the drawing has no edge */
  --field:#fffdfa;
  --ink:#1d1915;        /* warm near-black, the colour of the pencil line */
  --ink-2:#5e564d;
  --ink-3:#8a8178;
  --rule:rgba(29,25,21,.14);
  --blue:#1f2ff4;       /* brand blue. the only colour on the page, and it always means us */
  --blue-2:#1624c4;
  --signal:#c8361c;     /* the one red: form errors, and the zero customers that the views never became */
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --display:"Bricolage Grotesque","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;   /* the ad's voice */
  --crayon:"Permanent Marker","Segoe Print","Bradley Hand",cursive;                      /* the hero headline */
  --hand:"Architects Daughter","Segoe Print","Bradley Hand",cursive;                  /* the drawing's voice */
  --pad:clamp(20px,5vw,72px);
  --navh:64px;
}
*,*::before,*::after{ box-sizing:border-box; }
/* no smooth scrolling: every in-page link (the booking buttons, back to top) crosses the whole story,
   and gliding through it would replay every chapter on the way. Links jump straight there. */
html{ background:var(--paper); }
body{ margin:0; background:var(--paper) var(--grain); color:var(--ink); font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }
.skip{ position:fixed; left:12px; top:12px; z-index:50; padding:10px 14px; background:var(--ink); color:var(--paper); font-weight:500; text-decoration:none; transform:translateY(-200%); }
.skip:focus{ transform:none; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:20; height:var(--navh); display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); background:inherit; transition:box-shadow .3s; }
html:not(.in-hero) .nav{ box-shadow:0 1px 0 var(--rule); }
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:18px; letter-spacing:-.02em; }
.wordmark img{ display:block; height:20px; width:auto; }
.wordmark small{ font-weight:400; font-size:13px; color:var(--ink-3); letter-spacing:0; margin-left:2px; }
.nav-links{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 32px); }
.nav-link{ font:500 14px/1 var(--sans); color:var(--ink-2); text-decoration:none; padding:8px 0; transition:color .2s; }
.nav-link:hover, .nav-link[aria-current="page"]{ color:var(--ink); }
.nav-cta{ font:500 14px/1 var(--sans); color:var(--ink); text-decoration:none; padding:8px 0; border-bottom:2px solid var(--blue); transition:opacity .3s, color .2s; }
.nav-cta:hover{ color:var(--blue); }
html.in-hero .nav-cta, html.at-form .nav-cta{ opacity:0; pointer-events:none; }

/* ---------- hero ---------- */
.hero{ position:relative; }
.hero-art{ position:relative; height:min(calc(100svh - var(--navh)), 55.8vw); min-height:380px;
  transform:scale(calc(1 + var(--push, 0) * var(--push, 0) * .22)); transform-origin:30% 50%; }
/* the walk: frames from the video, drawn to a canvas by story.js as you scroll; the still shows until you start */
.scrub{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.walking .scrub{ opacity:1; }
.hero-ink{ opacity:calc(1 - var(--t1, 0)); }

.hero-art img, .hero-ink{ position:absolute; inset:0; width:100%; height:100%; }
/* object-fit:cover centred matches the overlay's xMidYMid slice exactly, so the lettering stays on the sign */
.hero-art img{ display:block; object-fit:cover; object-position:50% 50%; }
.hero-art::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:16%; pointer-events:none;
  background:linear-gradient(rgba(250,246,242,0), var(--paper)); }
.hero-copy{ position:absolute; z-index:2; left:50%; top:15%; transform:translate(-50%, calc(var(--t1, 0) * -48px)); opacity:calc(1 - var(--t1, 0));
  width:min(50%, 720px); text-align:center; }
/* the headline is drawn, not typed: a heavy marker face with a waxy crayon texture (#crayon, defined in the page) */
.hero h1{ font-family:var(--crayon); font-weight:400; font-size:clamp(40px, 4.9vw, 84px); line-height:1.08; letter-spacing:.01em; filter:url(#crayon); }
/* the blue pencil scribble under "Not another": drawn once on load, already drawn for reduced motion */
.hero h1 .mark{ position:relative; display:inline-block; white-space:nowrap; }
.hero h1 .mark svg{ position:absolute; left:-3%; bottom:-.16em; width:106%; height:.34em; overflow:visible; pointer-events:none; }
.hero h1 .mark path{ fill:none; stroke:var(--blue); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:scribble .9s .35s cubic-bezier(.6,.05,.3,1) forwards; }
.hero h1 .mark path + path{ stroke-width:2.2; animation-delay:.75s; animation-duration:.6s; }
@keyframes scribble{ to{ stroke-dashoffset:0; } }
/* written live: each letter is uncovered left to right like a marker stroke, then the underline, then the rest */
.hero-copy.scrawl{ --step:58ms; }
.hero-copy.scrawl .wd{ white-space:nowrap; }
.hero-copy.scrawl .ch{ display:inline-block; clip-path:inset(-30% 110% -30% -12%); }
.hero-copy.scrawl.go .ch{ animation:scrawl .19s calc(.12s + var(--i) * var(--step)) cubic-bezier(.45,0,.55,1) forwards; }
@keyframes scrawl{ 0%{ clip-path:inset(-30% 110% -30% -12%); transform:translate(-.03em, .04em) rotate(-4deg); }
  100%{ clip-path:inset(-30% -14% -30% -12%); transform:none; } }
.hero-copy.scrawl .mark path{ animation:none; }
.hero-copy.scrawl.go .mark path{ animation:scribble .7s calc(.2s + var(--n) * var(--step)) cubic-bezier(.6,.05,.3,1) forwards; }
.hero-copy.scrawl.go .mark path + path{ animation-duration:.5s; animation-delay:calc(.55s + var(--n) * var(--step)); }
.hero-copy.scrawl .sub, .hero-copy.scrawl .btn{ opacity:0; }
.hero-copy.scrawl.go .sub, .hero-copy.scrawl.go .btn{ animation:settle .6s calc(.45s + var(--n) * var(--step)) ease-out forwards; }
.hero-copy.scrawl.go .btn{ animation-delay:calc(.7s + var(--n) * var(--step)); }
@keyframes settle{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }
.hero .sub{ margin:22px auto 0; max-width:30ch; font-family:var(--hand); font-size:clamp(18px, 1.55vw, 25px); line-height:1.35;
  color:var(--ink-2); transform:rotate(-1.2deg); text-wrap:balance; }
.btn{ display:inline-flex; align-items:center; gap:.55em; margin-top:26px; font:500 15px/1 var(--sans); color:#fff; background:var(--blue);
  text-decoration:none; padding:14px 20px; border-radius:999px; transition:background .2s, transform .2s; }
.btn:hover{ background:var(--blue-2); transform:translateY(-1px); }

/* ---------- story: storybook cards pinned while you scroll; --p (0 to 1) comes from story.js ---------- */
.beat{ position:relative; --p:1; --q:1; }
/* the headline lifts away slowly while she walks, so it never blinks out on one wheel tick */
#b-walk{ --p:0; --t1:clamp(0, (var(--p) - .08) / .5, 1); --push:clamp(0, (var(--p) - .72) / .28, 1); }
html.story .beat{ height:calc(var(--len, 1.35) * 100svh); }
html.story .stage{ position:sticky; top:var(--navh); height:calc(100svh - var(--navh)); overflow:hidden; }
/* No chapter scrolls away as a block. Each holds still and dissolves while the next fades in over it,
   so there is never a half picture over blank paper. */
html.story .beat.tail{ height:calc(var(--len, 1.35) * 100svh + 100svh - var(--navh)); }
/* every chapter clears well before the next one settles, so no heading ever ghosts behind the next;
   the hero dissolves more slowly, since only a drawing sits behind the scene that covers it */
/* one opacity for every scene: faded in by --e as it arrives, faded out by --x as the next arrives */
html.story .beat.tail{ --out:1.6; }
html.story #b-walk.tail{ --out:1.2; }
html.story .beat.tail .stage{ opacity:calc(var(--e, 1) * clamp(0, 1 - var(--x, 0) * var(--out), 1)); }

/* the next scene overlaps by one extra fade (25svh), so it is already pinned when it starts fading in */
html.story .beat.tail + .beat{ position:relative; margin-top:calc(var(--navh) - 125svh); z-index:1; }
/* the contact section is not pinned: it fades in over the last fade of the café while scrolling up normally */
html.story .beat.tail + .final{ position:relative; margin-top:calc(var(--navh) - 100svh); z-index:1; }
html.story .beat.tail + .beat.tail{ height:calc(var(--len, 1.35) * 100svh + 125svh - var(--navh)); }
html.story-live .beat.tail + .beat{ --e:0; }
html.story-live .beat.tail + .final{ opacity:var(--e, 0); }
html.story-live .beat.tail + .final .panel{ opacity:clamp(0, (var(--q, 1) - .3) / .5, 1); }
/* like the title cards of an animated film: words hold the centre, watercolour vignettes bloom in at the sides */
.card{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); align-items:center; gap:clamp(8px, 2.4vw, 40px);
  width:100%; max-width:1560px; margin:0 auto; padding:clamp(16px, 3vh, 40px) var(--pad); }
html:not(.story) .card{ padding-block:clamp(56px, 9vw, 110px); }
.card.one{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); }
.vig{ --s:clamp(0, (var(--q) - .2) / .8, 1); position:relative; margin:0; width:100%; max-width:min(100%, 64svh); aspect-ratio:1;
  justify-self:center; transform:translateY(calc((.5 - var(--p)) * 44px)) rotate(var(--tilt, 0deg)); }
.vig img, .vig canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
  -webkit-mask:var(--wash) 50% 50% / calc(var(--s) * (2 - var(--s)) * 116%) auto no-repeat;
          mask:var(--wash) 50% 50% / calc(var(--s) * (2 - var(--s)) * 116%) auto no-repeat; }
/* side vignettes may spill a little past their columns, the way painted vignettes do on a title card */
@media (min-width:800px){ .card:not(.one) .vig{ width:116%; max-width:min(116%, 68svh); } }
/* a wide vignette on a split card grows outward, toward the page edge, to match the square one opposite */
@media (min-width:800px){ .card:not(.one) .vig.wide{ width:142%; max-width:none; justify-self:end; } }
/* chapter three is filmed: a panoramic clip on the left (the leaf lifts off the planks), the drawn leaf
   carries the flight over the words, and a second clip on the right plays her arrival at our door */
.vig.wide.pano{ aspect-ratio:16 / 9; }
.vig.pano .tag{ bottom:-9%; }
/* once the leaf has taken off, the scene it left wipes away behind it, left to right: a second mask layer on the
   picture, intersected with the watercolour wash, and the caption fades with it */
html.story-live .card.leafy .vig-l{ --wipe:clamp(0, (var(--p) - .42) / .22, 1); }
html.story-live .card.leafy .vig-l img, html.story-live .card.leafy .vig-l canvas{
  -webkit-mask-image:var(--wash), linear-gradient(to right, transparent calc(var(--wipe) * 140% - 40%), #000 calc(var(--wipe) * 140%));
          mask-image:var(--wash), linear-gradient(to right, transparent calc(var(--wipe) * 140% - 40%), #000 calc(var(--wipe) * 140%));
  -webkit-mask-size:calc(var(--s) * (2 - var(--s)) * 134%) calc(var(--s) * (2 - var(--s)) * 150%), 100% 100%;
          mask-size:calc(var(--s) * (2 - var(--s)) * 134%) calc(var(--s) * (2 - var(--s)) * 150%), 100% 100%;
  -webkit-mask-position:50% 50%, 0 0; mask-position:50% 50%, 0 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect; }
html.story-live .card.leafy .vig-l .tag{ opacity:calc(var(--s) * (1 - var(--wipe) * 2.5)); }
/* the wash is sized for square scenes; on the wide clip it is opened up so the running salesman at the edge stays in */
.vig.wide.pano img, .vig.wide.pano canvas{ -webkit-mask-size:calc(var(--s) * (2 - var(--s)) * 134%) calc(var(--s) * (2 - var(--s)) * 150%);
  mask-size:calc(var(--s) * (2 - var(--s)) * 134%) calc(var(--s) * (2 - var(--s)) * 150%); }
@media (min-width:800px){
  .card.leafy{ grid-template-columns:minmax(0, 1.4fr) minmax(0, .72fr) minmax(0, 1.25fr); }
  .card.leafy .vig.wide{ width:108%; max-width:none; }
  .card.leafy .vig-l.pano{ width:112%; }
  .card.leafy .words{ width:140%; justify-self:center; }
  /* once she has arrived, the arrival grows to fill the screen */
  html.story-live .card.leafy{ --settle:clamp(0, (var(--p) - .7) / .14, 1); }
  /* the heading starts large in the empty right side next to the planks, then glides left into the space
     the planks leave, clearing the right side before the arrival paints in there */
  html.story-live .card.leafy .words{ --move:clamp(0, (var(--p) - .43) / .17, 1);
    translate:calc(100% - var(--move) * 222%) 0; scale:1.4; }
  html.story-live .card.leafy .vig-r{ transform-origin:100% 50%; scale:calc(1 + var(--settle) * .42); }
  .card.leafy .vig-l{ justify-self:end; }
  .card.leafy .vig-r{ justify-self:start; }
  .card.leafy .words h2{ font-size:clamp(30px, 2.8vw, 50px); }
}
/* chapter five: one wide vignette where the empty café fills up as you scroll */
.card.flip{ grid-template-columns:minmax(0, .85fr) minmax(0, 1.3fr); }
.vig.wide{ aspect-ratio:4 / 3; max-width:min(100%, 92svh); }
.vig.wide img, .vig.wide canvas{ -webkit-mask-size:calc(var(--s) * (2 - var(--s)) * 112%) calc(var(--s) * (2 - var(--s)) * 112%);
  mask-size:calc(var(--s) * (2 - var(--s)) * 112%) calc(var(--s) * (2 - var(--s)) * 112%); }
.vig .ink{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vig.before img{ filter:grayscale(.7) opacity(.78); }
.card:not(.one) .vig-r{ --s:clamp(0, (var(--p) - var(--vin, .05)) / var(--vdur, .5), 1); }
.tag{ position:absolute; left:50%; bottom:1%; transform:translateX(-50%) rotate(-3deg); font-family:var(--hand); font-size:clamp(16px, 1.3vw, 21px);
  color:var(--ink-2); opacity:var(--s); white-space:nowrap; }
.tag.us{ color:var(--blue); }
.words{ --c:clamp(0, (var(--q) - .45) / .4, 1); --c2:clamp(0, (var(--p) - var(--cin2, .2)) / .25, 1);
  position:relative; z-index:2; text-align:center; }
.words h2{ margin-top:0; font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(32px, 3.3vw, 58px);
  line-height:1; letter-spacing:-.025em; text-wrap:balance; font-variant-numeric:tabular-nums; opacity:var(--c); transform:translateY(calc((1 - var(--c)) * 16px)); }
.words > .hand{ margin-top:18px; font-family:var(--hand); font-size:clamp(18px, 1.6vw, 26px); line-height:1.3; color:var(--ink-2);
  opacity:var(--c2); transform:rotate(-1.5deg); text-wrap:balance; }
/* chapter two: the counter lands, slams into a giant 1M with the agency's fireworks, then the truth pops in.
   The fireworks are pencil and watercolour, never blue: blue means us, and this is their party. */
.views .tally{ position:relative; }
.views h2{ display:grid; place-items:center; margin-bottom:0; }
.views h2 > *{ grid-area:1 / 1; }
.m1{ display:block; font-size:clamp(104px, 11.5vw, 210px); line-height:.82; letter-spacing:-.05em; }
.m1 > span{ display:block; margin-top:.1em; font-size:.26em; letter-spacing:-.02em; }
.m1, .count-line{ transition:transform .55s cubic-bezier(.2,1.55,.4,1), opacity .22s; }
html.story-live .m1:not(.on){ opacity:0; transform:scale(1.9) rotate(-4deg); }
html.story-live .m1.on + .count-line{ opacity:0; transform:scale(.6); }
html:not(.story-live) .count-line{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.burst{ position:absolute; left:50%; top:46%; width:min(175%, 760px); transform:translate(-50%, -50%); overflow:visible; pointer-events:none; }
.burst .ray{ fill:none; stroke:var(--ink); stroke-width:2.3; stroke-linecap:round; stroke-dasharray:.45 2; stroke-dashoffset:.45; opacity:0; }
.burst .dot{ fill:#c98b6b; opacity:0; transform-box:fill-box; transform-origin:center; }
.burst .spark{ fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-linejoin:round; opacity:0; transform-box:fill-box; transform-origin:center; }
.burst.on .ray{ animation:ray .95s var(--d) cubic-bezier(.12,.7,.3,1) forwards; }
.burst.on .dot{ animation:dot 1.05s calc(var(--d) + .22s) ease-out forwards; }
.burst.on .spark{ animation:spark .7s var(--d) cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes ray{ 0%{ stroke-dashoffset:.45; opacity:1; } 72%{ opacity:1; } 100%{ stroke-dashoffset:-1; opacity:0; } }
@keyframes dot{ 0%{ opacity:.9; transform:scale(0); } 35%{ opacity:.9; transform:scale(1.35); } 100%{ opacity:0; transform:translateY(14px) scale(.4); } }
@keyframes spark{ 0%{ opacity:0; transform:scale(0) rotate(-40deg); } 100%{ opacity:1; transform:scale(1) rotate(0); } }
html:not(.story-live) .burst{ display:none; }
@media (max-width:799px){ .burst{ width:96%; top:68%; } }
.zero{ margin:clamp(14px, 2.6vh, 28px) 0 0; font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96;
  font-size:clamp(30px, 3.2vw, 56px); line-height:1; letter-spacing:-.025em;
  transition:transform .5s cubic-bezier(.2,1.6,.4,1), opacity .2s; }
html.story-live .zero:not(.on){ opacity:0; transform:scale(.55) rotate(-5deg); }
/* the zero is not typeset, it is scrawled: two quick loops of red crayon, written on as the line pops.
   The real digit stays underneath, transparent, so it holds the space and still reads and copies as 0. */
.nil{ position:relative; display:inline-block; font-size:1.7em; line-height:.9; margin:0 .12em; }
.nil-t{ color:transparent; }
.nil svg{ position:absolute; left:-24%; top:-16%; width:148%; height:132%; overflow:visible; pointer-events:none; filter:url(#crayon); }
.nil path{ fill:none; stroke:var(--signal); stroke-width:6.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .42s .22s cubic-bezier(.5,0,.4,1); }
.nil path + path{ stroke-width:4.5; opacity:.9; transition-duration:.34s; transition-delay:.6s; }
html.story-live .zero:not(.on) .nil path{ stroke-dashoffset:1; transition-delay:0s; transition-duration:.1s; }
.views > .hand{ margin-top:clamp(10px, 2vh, 20px); }
/* the leaf: its place on the arc is scroll position, so scrolling back up rewinds it */
.flyleaf{ position:absolute; left:0; top:0; z-index:5; width:56px; height:66px; pointer-events:none; opacity:0; will-change:transform; }
.trail{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.trail i{ position:absolute; left:0; top:0; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%; background:var(--ink-3); opacity:0; }
html:not(.story-live) .flyleaf, html:not(.story-live) .trail{ display:none; }
/* the diagnosis card: vignette left, the notes written in on the right */
.diag .words{ text-align:left; }
.diag .notes{ margin-top:clamp(12px, 2.4vh, 28px); }
.notes{ font-size:clamp(16px, 1.3vw, 20px); line-height:1.4; }
.notes .said{ font-family:var(--hand); font-size:clamp(24px, 2.3vw, 38px); line-height:1.2; }
.notes .quote{ position:relative; display:inline-block; }
.notes .strike{ position:absolute; left:-4%; right:-4%; top:54%; height:3px; border-radius:2px; background:var(--ink);
  transform:rotate(-2deg) scaleX(1); transform-origin:left center; transition:transform .5s cubic-bezier(.6,.05,.3,1); }
html.story-live .notes .strike:not(.on){ transform:rotate(-2deg) scaleX(0); }
.notes .hand{ font-family:var(--hand); font-size:clamp(18px, 1.5vw, 24px); color:var(--ink); margin-top:2px; }
.notes .lead{ margin-top:clamp(12px, 2.2vh, 24px); color:var(--ink-2); }
.checks{ list-style:none; margin:clamp(6px, 1.2vh, 12px) 0 0; padding:0; display:grid; gap:clamp(4px, .9vh, 10px); }
.checks li{ position:relative; display:grid; grid-template-columns:7.6em minmax(0, 1fr) 20px; align-items:baseline; gap:10px;
  padding-bottom:clamp(4px, .9vh, 10px); border-bottom:1px solid var(--rule); }
.checks b{ position:relative; width:max-content; font-weight:600; font-size:.74em; letter-spacing:.08em; text-transform:uppercase; }
.checks span{ font-family:var(--hand); color:var(--ink); }
.checks .t{ width:18px; height:18px; align-self:center; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.checks .bad .t{ stroke:var(--signal); }
.checks .loop{ position:absolute; left:-14%; top:-60%; width:128%; height:220%; overflow:visible; pointer-events:none; }
.draw{ fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0;
  transition:stroke-dashoffset .8s cubic-bezier(.6,.05,.3,1); }
html.story-live .draw:not(.on){ stroke-dashoffset:1; }
/* the crack loop lives in a 900-unit drawing, so its stroke is set in drawing units */
.ink .draw{ stroke-width:5; }
.notes .verdict{ margin-top:clamp(12px, 2.2vh, 24px); font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 48;
  font-size:clamp(20px, 1.9vw, 30px); line-height:1.12; letter-spacing:-.015em; text-wrap:balance; }
/* "written in": each note wipes on left to right, like a pencil moving */
.w{ clip-path:inset(-60% -20% -60% -20%); transition:clip-path .7s cubic-bezier(.6,.05,.3,1); }
html.story-live .w:not(.on){ clip-path:inset(-60% 100% -60% -20%); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:799px){
  .card, .card.one, .card.flip, .card.leafy{ grid-template-columns:1fr; align-content:center; gap:6px; }
  .card.leafy{ gap:clamp(18px, 3.4vh, 30px); }
  .vig{ width:62vw; }
  .card.one .vig{ width:74vw; }
  .vig-l{ justify-self:start; }
  .vig-r{ justify-self:end; }
  .card.one .vig-l{ justify-self:center; }
  .diag .vig{ width:50vw; }
  .card.flip .vig{ order:-1; width:92vw; }
  .card:not(.one):not(.flip) .vig.wide{ width:80vw; }
  .notes{ font-size:15px; }
  .notes .said{ font-size:24px; }
  .notes .verdict{ font-size:19px; }
  .checks li{ grid-template-columns:7.4em minmax(0, 1fr) 18px; }
}

/* ---------- the detail: where growth breaks, how we work. static on purpose: this is the part people read ---------- */
.detail{ max-width:1280px; margin:0 auto; padding:clamp(72px, 11vw, 140px) var(--pad) 0; }
.sec-over{ font:600 12px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.sec-over::after{ content:""; display:block; width:28px; height:1px; margin-top:12px; background:currentColor; }
.detail h1, .detail h2{ margin-top:14px; font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(32px, 4vw, 60px);
  line-height:1; letter-spacing:-.025em; max-width:17ch; text-wrap:balance; }
.detail .lede{ margin-top:22px; max-width:60ch; font-size:clamp(17px, 1.35vw, 20px); line-height:1.55; color:var(--ink-2); }
/* the diagnosis page opens with a drawn funnel beside the words: five bands, one leaking, our blue loop round it */
.intro{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(24px, 5vw, 80px); align-items:center; }
.intro-art{ margin:0; }
.intro-art figcaption{ margin-top:0; text-align:center; font-family:var(--hand); font-size:clamp(15px, 1.2vw, 18px); color:var(--ink-3); transform:rotate(-1.5deg); }
.intro-art.door{ --wash:url(/assets/wash-1.webp); transform:rotate(1.5deg); }
.intro-art.door img{ display:block; width:112%; margin-left:-6%; height:auto; aspect-ratio:16 / 9;
  -webkit-mask:var(--wash) 50% 50% / 118% 150% no-repeat; mask:var(--wash) 50% 50% / 118% 150% no-repeat; }
.intro-art.door figcaption{ margin-top:-4px; }
.funnel{ display:block; width:100%; height:auto; overflow:visible; }
.funnel .wash{ fill:rgba(201, 139, 107, .09); }
.funnel .ln, .funnel .us{ fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.funnel .ln{ stroke:var(--ink); stroke-width:2.5; opacity:.9; }
.funnel .us{ stroke:var(--blue); stroke-width:2.6; }
.funnel .lb{ font-family:var(--hand); font-size:22px; fill:var(--ink-2); }
.funnel .lb.leak{ fill:var(--ink); }
.funnel .note{ font-family:var(--hand); font-size:22px; fill:var(--blue); }
.funnel .in{ fill:var(--ink-3); }
.funnel .drop{ fill:#c98b6b; opacity:.85; }
@media (prefers-reduced-motion:no-preference){
  .funnel .ln, .funnel .us{ stroke-dashoffset:1; animation:draw .55s var(--d) cubic-bezier(.6,.05,.3,1) forwards; }
  .funnel .us{ animation-duration:.9s; }
  .funnel .lb, .funnel .note{ opacity:0; animation:appear .5s var(--d) ease-out forwards; }
  .funnel .in{ opacity:0; animation:fallin .7s var(--d) cubic-bezier(.3,0,.6,1) forwards; }
  .funnel .drop{ opacity:0; animation:drip .9s var(--d) cubic-bezier(.5,0,.8,.6) forwards; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes appear{ to{ opacity:1; } }
@keyframes fallin{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:none; } }
@keyframes drip{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:.85; transform:none; } }
@media (max-width:860px){
  .intro{ grid-template-columns:1fr; }
  .intro-art{ max-width:400px; margin:8px auto 0; }
}
.areas{ margin-top:clamp(36px, 5vw, 64px); border-top:1px solid var(--rule); }
.area{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .95fr); gap:clamp(20px, 3vw, 48px); align-items:start;
  padding:clamp(24px, 3.2vw, 40px) 0; border-bottom:1px solid var(--rule); }
.area h2, .step h3{ font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 48; font-size:clamp(24px, 2.2vw, 34px);
  line-height:1.05; letter-spacing:-.02em; }
.area h2{ margin-top:0; max-width:none; text-wrap:wrap; }
.area .feels{ margin-top:10px; font-family:var(--hand); font-size:clamp(17px, 1.4vw, 22px); line-height:1.3; color:var(--ink-2); }
.area .what{ font-size:clamp(17px, 1.35vw, 20px); line-height:1.45; font-weight:500; }
.area .check{ margin-top:12px; color:var(--ink-2); line-height:1.6; }
.area .check span, .step .get span, .eg-l{ display:block; margin-bottom:5px; font:600 11px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
/* his numbers, pencilled in as a worked example; the number that is the problem gets a faint red marker */
.area-eg{ padding-left:clamp(0px, 1.6vw, 22px); border-left:1px dashed rgba(29,25,21,.22); font-family:var(--hand); font-size:clamp(17px, 1.35vw, 21px); line-height:1.5; }
.area-eg b{ font-weight:400; box-shadow:inset 0 -.38em 0 rgba(200,54,28,.14); }
.ledger{ display:grid; grid-template-columns:auto auto; justify-content:start; column-gap:18px; }
.ledger span{ white-space:nowrap; }
.ledger span:nth-child(even){ text-align:right; font-variant-numeric:tabular-nums; }
.ledger .tot{ margin-top:3px; padding-top:3px; border-top:1.5px solid var(--ink); }
.coda{ margin-top:clamp(28px, 4vw, 44px); font-family:var(--hand); font-size:clamp(19px, 1.6vw, 25px); color:var(--ink-2); transform:rotate(-1deg); }
.steps{ list-style:none; margin:clamp(36px, 5vw, 64px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(32px, 4.4vw, 72px); }
.step{ position:relative; }
.step .n{ display:block; font-family:var(--hand); font-size:clamp(34px, 3vw, 46px); line-height:1; color:var(--blue); }
.step h3{ margin-top:10px; }
.step p{ margin-top:10px; color:var(--ink-2); line-height:1.6; }
.step .get{ margin-top:16px; padding-top:14px; border-top:1px dashed rgba(29,25,21,.22); color:var(--ink); }
.step:not(:last-child)::after{ content:""; position:absolute; top:12px; right:calc(-1 * clamp(32px, 4.4vw, 72px) + 4px); width:clamp(24px, 3.4vw, 60px); height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 22'%3E%3Cpath d='M2 14 C 14 5, 30 5, 44 11 M35 4 L44 11 L34 17' fill='none' stroke='%238a8178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.after{ margin-top:clamp(36px, 5vw, 56px); font-family:var(--hand); font-size:clamp(20px, 1.8vw, 28px); line-height:1.4; }
.after b{ font-weight:400; color:var(--blue); }
.work .tagline{ margin-top:8px; color:var(--ink-2); }
.work .btn{ margin-top:22px; }
@media (max-width:899px){
  .area{ grid-template-columns:1fr; gap:12px; }
  .area-eg{ padding:10px 0 0; border-left:0; border-top:1px dashed rgba(29,25,21,.22); }
  .steps{ grid-template-columns:1fr; }
  .step:not(:last-child)::after{ display:none; }
}

/* ---------- contact ---------- */
.final{ padding:clamp(64px, 10vw, 128px) var(--pad) 40px; }
#book{ scroll-margin-top:calc(var(--navh) + 20px); }
.ask{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px clamp(40px, 6vw, 96px); align-items:start; max-width:1280px; margin:0 auto; }
.ask-copy{ position:sticky; top:calc(var(--navh) + 32px); }
.final h2{ font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(32px, 3.6vw, 56px); line-height:1; letter-spacing:-.025em; max-width:15ch; text-wrap:balance; }
.more{ margin-top:22px; }
.more a{ font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .2s; }
.more a:hover{ color:var(--blue); }
.final .lede{ margin-top:24px; max-width:40ch; color:var(--ink-2); font-size:clamp(17px, 1.35vw, 20px); line-height:1.5; }

.enq{ max-width:46rem; }
.enq .grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.enq .full{ grid-column:1 / -1; }
.enq .l{ display:block; font:500 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:9px; }
.enq .l i{ font-style:normal; color:var(--ink-3); text-transform:none; letter-spacing:0; margin-left:6px; }
.enq input,.enq select,.enq textarea{ width:100%; font:400 16px/1.4 var(--sans); color:var(--ink); background:var(--field);
  border:1px solid rgba(29,25,21,.2); border-radius:8px; padding:13px 14px; outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s; }
.enq input::placeholder,.enq textarea::placeholder{ color:var(--ink-3); }
.enq select{ padding-right:40px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235e564d' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center; }
.enq input:focus,.enq select:focus,.enq textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,47,244,.12); }
.enq input:user-invalid,.enq select:user-invalid{ border-color:var(--signal); }
.enq textarea{ min-height:112px; resize:vertical; }
.enq .seg{ display:flex; gap:8px; flex-wrap:wrap; }
.enq .seg label{ position:relative; }
.enq .seg input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.enq .seg span{ display:inline-flex; padding:12px 18px; border:1px solid rgba(29,25,21,.2); border-radius:999px; font:500 14px/1 var(--sans);
  color:var(--ink-2); background:var(--field); cursor:pointer; transition:color .2s, background .2s, border-color .2s; }
.enq .seg input:checked + span{ color:var(--paper); background:var(--ink); border-color:var(--ink); }
.enq .seg input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:3px; }
.enq .row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:10px; }
.enq .submit{ display:inline-flex; align-items:center; gap:.6em; font:500 16px/1 var(--sans); color:#fff; background:var(--blue); border:0; border-radius:999px;
  padding:17px 24px; cursor:pointer; transition:background .2s, transform .2s; }
.enq .submit:hover{ background:var(--blue-2); transform:translateY(-1px); }
.enq .fine{ font-size:13px; color:var(--ink-3); max-width:34ch; line-height:1.45; }
.enq .err{ display:none; margin-top:18px; padding:14px 16px; border:1px solid var(--signal); border-radius:8px; background:rgba(200,54,28,.05);
  color:#8f2a17; font-size:14.5px; line-height:1.5; }
.enq.is-error .err{ display:block; }
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.done-msg{ display:none; max-width:42rem; }
.done-msg.show{ display:block; }
.done-msg img{ display:block; width:56px; height:auto; margin-bottom:22px; }
.done-msg h3{ font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(30px, 3.6vw, 52px); letter-spacing:-.025em; line-height:1; }
.done-msg p{ margin-top:18px; color:var(--ink-2); font-size:clamp(16px, 1.3vw, 19px); line-height:1.5; max-width:42ch; }
.done-msg .wa-link{ display:inline-flex; align-items:center; gap:.6em; font:500 15px/1 var(--sans); color:#fff; background:var(--blue);
  text-decoration:none; padding:14px 20px; border-radius:999px; transition:background .2s; }
.done-msg .wa-link:hover{ background:var(--blue-2); }

/* ---------- about: client words, then questions ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 40px); margin-top:clamp(32px, 5vw, 64px); }
.quote{ position:relative; margin:0; padding:clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  background:var(--field); border:1px solid var(--rule); border-radius:5px 3px 6px 4px; transform:rotate(var(--r, 0deg)); }
.quote.lead{ grid-column:1 / -1; }
.quote::before{ content:"\201C"; position:absolute; left:clamp(14px, 1.6vw, 22px); top:-.08em; font-family:var(--display); font-weight:800;
  font-size:clamp(64px, 6vw, 96px); line-height:1; color:var(--ink); opacity:.12; }
.quote blockquote{ margin:0; }
.quote blockquote p{ margin:0; font-size:clamp(19px, 1.6vw, 24px); line-height:1.45; color:var(--ink); text-wrap:pretty; }
.quote.lead blockquote p{ font-size:clamp(20px, 1.85vw, 28px); max-width:52ch; }
.quote figcaption{ margin-top:clamp(16px, 2vw, 22px); font:400 15px/1.4 var(--sans); color:var(--ink-2); }
.quote figcaption b{ font-weight:600; color:var(--ink); }
.quote .via{ font-family:var(--hand); font-size:16px; color:var(--ink-2); }
/* the founders face each other across the heading, each in a watercolour wash like the story's scenes */
.pair{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap:clamp(16px, 3vw, 48px); align-items:center; }
.face{ margin:0; text-align:center; }
.face img{ display:block; width:100%; height:auto; aspect-ratio:1;
  -webkit-mask:var(--wash) 50% 50% / 124% auto no-repeat; mask:var(--wash) 50% 50% / 124% auto no-repeat; }
.face-l{ --wash:url(/assets/wash-1.webp); transform:rotate(-1.2deg); }
.face-r{ --wash:url(/assets/wash-2.webp); transform:rotate(1.2deg); }
.face figcaption{ margin-top:4px; font:400 15px/1.4 var(--sans); color:var(--ink-2); }
.face figcaption b{ display:block; font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 48; font-size:clamp(20px, 1.7vw, 26px); letter-spacing:-.015em; color:var(--ink); }
.pair-words{ text-align:center; }
.pair-words .sec-over::after{ margin-left:auto; margin-right:auto; }
.pair-words h2{ margin-top:14px; font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(30px, 3.4vw, 52px); line-height:1; letter-spacing:-.025em; text-wrap:balance; }
.pair-words .hand{ margin-top:14px; font-family:var(--hand); font-size:clamp(18px, 1.6vw, 24px); line-height:1.35; color:var(--ink-2); transform:rotate(-1.5deg); text-wrap:balance; }
/* the portraits bloom in like the story's scenes: the wash spreads, and the brothers drift toward each other */
.face img{ transition:-webkit-mask-size 1.3s cubic-bezier(.2,.7,.2,1), mask-size 1.3s cubic-bezier(.2,.7,.2,1), opacity .9s ease-out; }
.face{ transition:translate 1.3s cubic-bezier(.2,.7,.2,1); }
.face figcaption, .pair-words{ transition:opacity .8s ease-out, translate .8s ease-out; }
html.reveal-live .bloom:not(.on) .face img{ -webkit-mask-size:8% auto; mask-size:8% auto; opacity:0; }
html.reveal-live .bloom:not(.on) .face-l{ translate:-40px 0; }
html.reveal-live .bloom:not(.on) .face-r{ translate:40px 0; }
html.reveal-live .bloom:not(.on) .face figcaption, html.reveal-live .bloom:not(.on) .pair-words{ opacity:0; translate:0 10px; }
.bloom .face-r img{ transition-delay:.25s; }
.bloom .pair-words{ transition-delay:.6s; }
.bloom .face figcaption{ transition-delay:.9s; }
@media (max-width:860px){
  .pair{ grid-template-columns:1fr 1fr; }
  .pair-words{ grid-column:1 / -1; order:-1; margin-bottom:8px; }
  .face{ transform:none; }
}
.faq{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.6fr); gap:clamp(24px, 5vw, 80px); align-items:start; }
.faq h2{ margin-top:14px; font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(30px, 3.4vw, 52px); line-height:1; letter-spacing:-.025em; }
.qa{ border-top:1px solid var(--rule); }
.qa:last-child{ border-bottom:1px solid var(--rule); }
.qa summary{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:20px 0; cursor:pointer; list-style:none;
  font:600 clamp(17px, 1.4vw, 21px)/1.35 var(--sans); color:var(--ink); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; flex:none; font-family:var(--hand); font-size:30px; line-height:.7; color:var(--ink-2); transition:transform .25s; }
.qa[open] summary::after{ transform:rotate(45deg); }
.qa summary:hover{ color:var(--blue); }
.qa p{ margin:0 0 22px; max-width:62ch; font-size:clamp(16px, 1.2vw, 18px); line-height:1.6; color:var(--ink-2); }
.qa a{ color:var(--ink); }
/* the closing ask sits straight onto the footer: the footer's own margin is the only gap */
.cta-band{ text-align:center; padding-bottom:0; }
.cta-band h2{ margin-left:auto; margin-right:auto; }
.cta-band h2{ font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(32px, 4vw, 60px); line-height:1; letter-spacing:-.025em; }
.cta-band .hand{ margin-top:14px; font-family:var(--hand); font-size:clamp(18px, 1.6vw, 24px); color:var(--ink-2); transform:rotate(-1.5deg); }
.cta-band .btn{ margin-top:28px; }
@media (max-width:860px){
  .quotes, .faq{ grid-template-columns:1fr; }
  .quote{ transform:none; }
}
/* ---------- footer ---------- */
.page-foot{ padding:0 var(--pad) 40px; }
.foot{ max-width:1280px; margin:clamp(64px, 9vw, 112px) auto 0; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:28px 32px;
  border-top:1px solid var(--rule); padding-top:26px; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.foot .brand img{ display:block; height:22px; width:auto; margin-bottom:12px; }
.foot strong{ display:block; color:var(--ink); font-weight:600; font-size:16px; letter-spacing:-.02em; margin-bottom:2px; }
.foot .col{ display:flex; flex-direction:column; gap:4px; }
.foot .col a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; width:max-content; transition:border-color .2s; }
.foot .col a:hover{ border-color:var(--ink); }
.foot .legal{ color:var(--ink-3); }

/* ---------- tablet and phone ---------- */
@media (max-width:1023px){
  .ask{ grid-template-columns:1fr; gap:36px; }
  .ask-copy{ position:static; }
}
@media (min-width:700px) and (max-width:1023px){
  .hero-copy{ top:11%; width:56%; }
  .hero .sub{ margin-top:14px; }
  .hero .btn{ margin-top:18px; }
}
@media (max-width:699px){
  .hero{ display:flex; flex-direction:column; }
  html.story .hero{ justify-content:center; }
  /* on a phone the walk takes the screen once the headline has gone: the drawing rises and grows */
  html.story .hero-art{ transform:translateY(calc(var(--t1, 0) * -17svh)) scale(calc(1 + var(--t1, 0) * .55 + var(--push, 0) * var(--push, 0) * .22)); transform-origin:50% 50%; }
  .hero-copy{ position:static; order:1; transform:translateY(calc(var(--t1, 0) * -24px)); width:auto; padding:clamp(28px, 8vw, 44px) var(--pad) 0; }
  .hero h1{ font-size:clamp(36px, 10.5vw, 50px); }
  /* the phone needs the whole screen for the walk sooner, so the words leave over a shorter stretch */
  #b-walk{ --t1:clamp(0, (var(--p) - .03) / .3, 1); }
  /* the picture tucks up under the button and its sky fades into the page: no seam */
  .hero-art{ order:2; height:auto; min-height:0; aspect-ratio:2000 / 1116; margin-top:-6px;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%); mask-image:linear-gradient(to bottom, transparent 0, #000 24%); }
}
@media (max-width:820px){
  .enq .grid{ grid-template-columns:1fr; gap:16px; }
  .foot{ grid-template-columns:1fr; gap:22px; }
  .wordmark small{ display:none; }
  .nav-link{ display:none; }
}
/* on a phone the form packs tight enough to sit on one screen: phone and country share a row, fields are
   shorter, and the button spans the width. Field text stays 16px, below that phones zoom in on tap. */
@media (max-width:699px){
  .enq .grid{ grid-template-columns:1fr 1fr; gap:12px 10px; }
  .enq .grid > div:nth-child(1), .enq .grid > div:nth-child(2){ grid-column:1 / -1; }
  .enq .l{ font-size:11px; margin-bottom:6px; }
  .enq .l i{ margin-left:4px; }
  .enq input, .enq select, .enq textarea{ padding:10px 12px; border-radius:7px; }
  .enq select{ padding-right:30px; background-position:right 12px center; }
  .enq textarea{ min-height:86px; }
  .enq .seg span{ padding:9px 14px; font-size:13px; }
  .enq .row{ gap:10px; margin-top:4px; }
  .enq .submit{ width:100%; justify-content:center; padding:15px 20px; }
  .enq .fine{ max-width:none; font-size:12px; text-align:center; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .mark path{ animation:none; stroke-dashoffset:0; }
  *,*::before,*::after{ transition:none !important; }
}