/* Stand Out Studios: one pond under every page (water.js). Tokens and rules in design-system-v2.md */
:root{
  color-scheme: dark;
  --pool:#1F8FEA; --deep:#0B3D9C; --shallows:#8EE6F2; --trench:#07205C;
  --koi:#F2541B; --koi-hover:#FF6A33; --koi-press:#DE4712;
  --foam:#FFFFFF; --foam-2:rgba(236,245,255,.86); --foam-3:rgba(236,245,255,.7);
  --line-water:rgba(255,255,255,.2); --line-water-2:rgba(255,255,255,.4);
  --paper:#FAFBFC; --stone:#E8EDF0; --stone-2:#DCE3E8;
  --navy:#0A1F3D; --navy-2:#44546B; --night:#06122B;
  --line:rgba(10,31,61,.14); --line-strong:rgba(10,31,61,.3);
  --err:#B42318; --err-bg:#FFF6F4; --err-water:#FFC4B3;
  --f:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1240px; --gutter:24px; --nav-h:60px;
  --r-media:10px; --r-btn:10px; --r-paper:2px; --r-glass:22px;
  --lift-shadow:0 0 0 1px rgba(3,20,60,.1),0 2px 3px rgba(3,20,60,.16),0 30px 60px -32px rgba(1,10,40,.78);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* sideways: nothing on these pages is wider than the screen (the lily pads wait on the inside, see path.js); the clip
   is a second guard so a phone can never pan the page sideways. clip, not hidden: hidden on body would make it a scroll
   box and break sticky heads and the pins (older browsers keep hidden on html, which is safe) */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;background:var(--deep);overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--deep);color:#fff;font-family:var(--f);font-size:17px;line-height:1.6;font-stretch:100%;font-weight:420;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--shallows);color:var(--navy)}
:focus-visible{outline:3px solid var(--shallows);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:14px;top:-80px;z-index:300;background:var(--koi);color:var(--navy);padding:12px 18px;border-radius:var(--r-btn);font-weight:620;text-decoration:none}
.skip:focus{top:14px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:640px){:root{--gutter:16px}}
:where(p,li,dd,dt,label,summary,figcaption){text-wrap:pretty}

/* ---------- the water: one fixed canvas behind every page ---------- */
canvas.water{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s ease}
canvas.water.is-on{opacity:1}
main,.dusk{position:relative;z-index:1}
/* without WebGL: rendered stills and the colour of the deep stand in (and show while the water boots) */
main::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#0E58C4 0,#0A45A8 6%,#08378F 22%,#072C7C 50%,#072770 78%,#0A2C6C 100%);transition:opacity 1s ease}
.still{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--deep) url("assets/pond-day.webp") center/cover no-repeat;transition:opacity 1s ease}
.still--fade{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.has-water main::before,.has-water .still,.has-water .dusk::before{opacity:0}
@media (max-width:720px){.still{background-image:url("assets/pond-day-m.webp")}}

/* ---------- type ---------- */
.h2{font-size:clamp(32px,4.1vw,60px);font-weight:720;font-stretch:124%;line-height:1;letter-spacing:-.03em;text-wrap:balance;color:#fff}
.h3{font-size:clamp(22px,2vw,28px);font-weight:600;font-stretch:106%;line-height:1.15;letter-spacing:-.012em}
.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--foam-2);max-width:44ch}
.body-copy{max-width:62ch;color:var(--foam-2)}
.display{font-size:clamp(38px,5.4vw,84px);font-weight:760;font-stretch:125%;line-height:.98;letter-spacing:-.036em;text-wrap:balance;text-shadow:0 2px 30px rgba(3,24,78,.34)}
.on-water{color:#fff}

/* ---------- links, buttons, tags ---------- */
.link{color:inherit;font-weight:560;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.24em;text-decoration-color:rgba(255,255,255,.55);transition:text-decoration-color .2s var(--ease),color .2s var(--ease)}
.link:hover{text-decoration-color:currentColor}
.link--water{color:#fff;font-size:18px}
.hero__actions .link--water{padding-block:9px}
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 20px;border-radius:var(--r-btn);border:0;font-family:var(--f);font-weight:620;font-size:16px;font-stretch:106%;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--koi{background:var(--koi);color:var(--navy);box-shadow:inset 0 -2px 0 rgba(10,31,61,.14),0 10px 24px -14px rgba(242,84,27,.9)}
.btn--koi:hover{background:var(--koi-hover)}
.btn--koi:active{background:var(--koi-press)}
.btn--lg{--h:56px;padding:0 26px;font-size:17px}
.btn--sm{--h:42px;padding:0 16px;font-size:15px}
.btn--glass{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn--glass:hover{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px #fff}
.btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:13.5px;font-weight:560;letter-spacing:0;white-space:nowrap}
.tag--open{background:transparent;box-shadow:inset 0 0 0 1.25px rgba(255,255,255,.55)}
.tag--paper{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.copybtn{height:40px;padding:0 14px;border-radius:8px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:560}
.copybtn:hover{background:rgba(255,255,255,.24)}

/* ---------- mark ---------- */
.mark{width:30px;height:30px;flex:none;overflow:visible;margin:-2px -2px -2px -6px}
.mark__body{fill:var(--koi)}
.mark__fin{fill:var(--koi);opacity:.7}

/* ---------- nav: a glass bar floating on the water ---------- */
.nav{position:fixed;z-index:100;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(calc(var(--wrap) - 8px),calc(100% - 24px));height:var(--nav-h);display:flex;align-items:center;gap:18px;padding:0 9px 0 16px;border-radius:14px;color:#fff;background:rgba(6,34,96,.36);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -18px rgba(3,20,60,.6);transition:background-color .3s var(--ease)}
html:not(.js) .nav{background:rgba(6,34,96,.92)}
.nav[data-solid]{background:rgba(10,31,61,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:640;font-stretch:108%;font-size:16.5px;letter-spacing:-.012em;white-space:nowrap}
.nav__links{display:flex;gap:2px;margin-inline:auto}
.nav__links a{padding:9px 13px;border-radius:9px;font-size:15px;font-weight:520;text-decoration:none;opacity:.92;transition:background-color .2s var(--ease),opacity .2s}
.nav__links a:hover{opacity:1;background:rgba(255,255,255,.14)}
.nav__links a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em}
.nav :focus-visible{outline-color:#fff}
.nav__cta[aria-current="page"]{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.nav__menu{display:none;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:10px;border:0;background:rgba(255,255,255,.14);color:inherit;font-weight:600;font-size:15px}
.nav__menu i{display:block;width:16px;height:1.6px;background:currentColor;position:relative}
.nav__menu i::before{content:"";position:absolute;left:0;right:0;top:-5px;height:1.6px;background:currentColor}
.nav__menu i::after{content:"";position:absolute;left:0;right:5px;top:5px;height:1.6px;background:currentColor}
.nav__cta{position:relative}
.nav__cta-short{display:none}
/* phones and tablets: the bar reads [koi] Stand Out … [Free estimate] [menu]; the estimate pill stays on every screen */
@media (max-width:980px){
  .nav{gap:12px}
  .nav__links,.nav__studios,.nav__cta-long{display:none}
  .nav__cta-short{display:inline}
  .nav__brand{margin-right:auto}
  .nav__cta{--h:40px;padding:0 13px;font-size:14.5px}
  .nav__cta::after{content:"";position:absolute;inset:-2px -3px}
  .nav__menu{display:inline-flex}
}
/* narrow phones: the menu button is its icon alone (the label stays for screen readers and for app.js's Menu/Close toggle) */
@media (max-width:430px){
  .nav__menu{position:relative;width:44px;padding:0;gap:0;justify-content:center}
  .nav__menu span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (max-width:350px){.nav{gap:8px;padding-left:12px}.nav__brand{font-size:15px;gap:8px}.nav__cta{padding:0 11px;font-size:14px}}
.menu{position:fixed;inset:0;z-index:99;background:var(--deep);color:#fff;padding:calc(104px + env(safe-area-inset-top,0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.has-water .menu{background:linear-gradient(180deg,rgba(4,24,78,.66),rgba(4,20,66,.9) 70%)}
.menu-open main,.menu-open .dusk{visibility:hidden}
.menu__links{display:grid}
.menu__links a{display:block;padding:10px 0;font-size:clamp(38px,10vw,64px);font-weight:620;font-stretch:112%;line-height:1.02;letter-spacing:-.025em;text-decoration:none;border-bottom:1px solid var(--line-water)}
.menu__links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em}
.menu :focus-visible{outline-color:#fff}
.menu__foot{display:grid;gap:14px;margin-top:36px}
.menu__foot .btn{width:100%}
.menu__foot p{color:var(--foam-2);font-size:15px}
.menu__cta[aria-current="page"]{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}

main{display:block}
section{position:relative}

/* ---------- hero: the sunlit shallows ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;isolation:isolate}
.hero__inner{padding-top:calc(var(--nav-h) + 72px);padding-bottom:88px}
.hero__title{font-size:clamp(42px,5.8vw,94px);font-weight:780;font-stretch:125%;line-height:.95;letter-spacing:-.038em;max-width:7.2em;text-shadow:0 2px 30px rgba(3,24,78,.38);text-wrap:balance}
.hero__lede{margin-top:clamp(22px,2.4vw,32px);font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:35ch;color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(3,24,78,.5)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(26px,2.8vw,36px)}
.hero__hint{position:absolute;right:max(24px,calc((100vw - var(--wrap))/2 + 24px));bottom:26px;font-size:15px;font-weight:520;color:#fff;text-shadow:0 1px 12px rgba(3,24,78,.9),0 0 3px rgba(3,24,78,.6);transition:opacity .6s ease;pointer-events:none}
.hero__hint.is-done{opacity:0}
.hint--touch{display:none}
@media (hover:none){.hint--fine{display:none}.hint--touch{display:inline}}
.hero :focus-visible{outline-color:#fff}
@media (max-width:720px){
  .hero{align-items:flex-start}
  .hero__inner{padding-top:calc(var(--nav-h) + 52px)}
  .hero__title{font-size:clamp(33px,9.6vw,50px);max-width:none}
  .hero__lede{font-size:17.5px;max-width:30ch}
  .hero__hint{left:var(--gutter);right:auto;bottom:18px;font-size:15px}
}

/* ---------- section heads on the water ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 56px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.shead .lead{justify-self:end}
@media (max-width:860px){.shead{grid-template-columns:1fr}.shead .lead{justify-self:start}}

/* ---------- what I'd fix first: five questions, each a pair of crops from the old homepage and the new one. Desktop:
   the words on the left, Before → After on the right. Phones: the words, then the pair (the wide crops above and below,
   the photo and button pairs side by side). Nothing is pinned or scrubbed: the page scrolls normally and home.js only
   eases each pair in once (0.5 s) as it comes on screen. Then the whole old homepage beside the new one's opening
   film, and the next step ---------- */
.fix{padding-block:clamp(72px,8vw,120px) clamp(64px,7vw,104px)}
.fix__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 56px;align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.fix__head .lead{grid-column:2;grid-row:1/span 2;justify-self:end;max-width:40ch}
.fix__label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px;font-weight:520;color:var(--foam-2)}
.fix__list{list-style:none;display:grid;gap:clamp(44px,4.6vw,68px)}
.fx{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:clamp(24px,3.6vw,56px);align-items:center}
.fx__text{display:grid;gap:10px;align-content:center}
.fx__q{display:flex;gap:12px;align-items:baseline;font-size:clamp(21px,1.75vw,25px);font-weight:680;font-stretch:112%;line-height:1.16;letter-spacing:-.016em;color:#fff;text-wrap:balance}
.fx__n{flex:none;display:inline-grid;place-items:center;width:1.24em;height:1.24em;border-radius:.3em;background:var(--koi);color:var(--navy);font-size:.8em;font-weight:760;font-stretch:100%;letter-spacing:0;line-height:1;translate:0 -.08em}
.fx__a{font-size:17px;line-height:1.45;color:var(--foam-2);max-width:32ch}
.fx__pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
/* each crop sits in thin glass on the water, with its Before / After tab on the top edge (off the page it frames) */
.fx__pane,.fix__screen{position:relative;margin:0;padding:6px;border-radius:14px;background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(214,238,255,.1) 30%,rgba(120,200,255,.06) 62%,rgba(214,238,255,.22));box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -2px 6px rgba(2,18,60,.28),0 34px 56px -36px rgba(0,6,30,.95)}
.fx__shot{position:relative;display:block;border-radius:9px;overflow:hidden;background:#0B1B3A;box-shadow:0 0 0 1px rgba(0,10,40,.35)}
.fx__shot img{display:block;width:100%;height:auto}
/* the ring: a thin white line with a faint koi glow round the thing to look at (percent of the crop) */
.fx__ring{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:8px;box-shadow:0 0 0 1.5px #fff,0 0 0 5px rgba(242,84,27,.42),0 0 18px 4px rgba(242,84,27,.22);pointer-events:none}
.fx__tag{position:absolute;left:14px;top:-10px;z-index:2;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 4px 10px -4px rgba(0,8,30,.6);font-size:13px;font-weight:620;line-height:1}
.fx__tag--after{background:var(--koi);color:var(--navy);box-shadow:0 4px 10px -4px rgba(0,8,30,.6)}
.fx__to{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(6,34,96,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.fx__to svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the pairs ease in once as they reach the screen (home.js adds .fix--live, then .is-in to each question) */
.fix--live .fx__pane{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fix--live .fx__pane:last-child{transition-delay:.12s}
.fix--live .fx:not(.is-in) .fx__pane{opacity:0;transform:translateY(16px)}
.fix--live .fx__ring{transition:opacity .4s var(--ease) .3s,transform .4s var(--ease) .3s}
.fix--live .fx__pane:last-child .fx__ring{transition-delay:.42s}
.fix--live .fx:not(.is-in) .fx__ring{opacity:0;transform:scale(1.12)}
/* the whole page: the old homepage, small, beside the new one's opening film; then the next step */
.fix__whole{display:grid;gap:clamp(20px,2.2vw,30px);margin-top:clamp(64px,7vw,110px)}
.fix__whole-text{display:grid;gap:10px}
.fix__whole-title{font-size:clamp(26px,2.5vw,36px);font-weight:700;font-stretch:118%;line-height:1.06;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.fix__whole-text p{font-size:17px;line-height:1.45;color:var(--foam-2);max-width:52ch}
.fix__screens{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,2.3fr);gap:14px;align-items:center}
.fix__screen{padding:7px;border-radius:16px}
.fix__glass{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0B1B3A;box-shadow:0 0 0 1px rgba(0,10,40,.35)}
.fix__glass img,.fix__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fix__film{opacity:0;transition:opacity .7s var(--ease)}
.fix__film.is-on{opacity:1}
.fix__pause{position:absolute;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(6,20,50,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fix__pause:hover{background:rgba(6,20,50,.82)}
.fix__pause i{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.fix__pause[aria-pressed="true"] i{width:0;height:0;border:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.fix__pause:focus-visible{outline-color:#fff}
.fix__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;color:var(--foam-2)}
.fix__cta p{max-width:34ch}
@media (max-width:980px){
  .fix__head{grid-template-columns:1fr}
  .fix__head .lead{grid-column:auto;grid-row:auto;justify-self:start}
  .fx{grid-template-columns:1fr;gap:18px}
  .fx__a{max-width:52ch}
}
/* phones: the words, then the pair: the wide crops above and below with the arrow on the seam, the photo and button
   pairs side by side; the whole page as two phones side by side */
@media (max-width:720px){
  .fix{padding-block:44px 40px}
  .fix__head{gap:10px;margin-bottom:28px}
  .fix__head .h2{font-size:30px}
  .fix__head .lead{font-size:16.5px;line-height:1.45}
  .fix__label{font-size:14px}
  .fix__list{gap:30px}
  .fx{gap:12px}
  .fx__text{gap:4px}
  .fx__q{font-size:19.5px;gap:10px}
  .fx__a{font-size:16px;line-height:1.42}
  .fx__pair{grid-template-columns:minmax(0,1fr);gap:0}
  .fx__pair .fx__to{justify-self:center;width:26px;height:26px;margin-block:-5px;transform:rotate(90deg)}
  .fx--side .fx__pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0}
  .fx--side .fx__pair .fx__to{margin:0 -5px;transform:none}
  .fx__pane{padding:5px;border-radius:12px}
  .fx__shot{border-radius:8px}
  .fx__ring{left:var(--xm);top:var(--ym);width:var(--wm);height:var(--hm);border-radius:6px}
  .fx__tag{left:10px;top:-9px;height:20px;padding:0 7px;font-size:12.5px}
  .fx__to svg{width:12px;height:12px}
  /* the payoff on a phone: the new homepage's film in a phone glass beside the words; the next step (button + note) gets
     its own full-width row under both, so the button never runs under the phone (the five pairs above already showed
     the old page, so its whole-page phone stays a desktop thing) */
  .fix__whole{grid-template-columns:minmax(0,1fr) clamp(120px,36vw,150px);grid-template-areas:"text screens" "cta cta";align-items:start;gap:22px 14px;margin-top:40px}
  .fix__whole-text{grid-area:text;gap:8px}
  .fix__whole-title{font-size:25px}
  .fix__whole-text p{font-size:16px}
  .fix__screens{grid-area:screens;display:block}
  .fix__screens>.fix__screen:first-child,.fix__screens>.fx__to{display:none}
  .fix__screen{padding:5px;border-radius:22px}
  .fix__glass{aspect-ratio:780/1688;border-radius:17px}
  .fix__pause{right:8px;bottom:8px}
  .fix__cta{grid-area:cta;display:grid;justify-items:start;gap:10px}
  .fix__cta .btn{padding:0 16px}
  .fix__cta p{font-size:15.5px;line-height:1.4}
}

/* ---------- thick glass: the concept sites float in the deep as glass tiles ---------- */
.glass{--r:var(--r-glass);position:relative;display:block;border-radius:var(--r);padding:clamp(10px,1.1vw,16px);background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(214,238,255,.08) 30%,rgba(120,200,255,.05) 62%,rgba(214,238,255,.2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1.5px 0 rgba(255,255,255,.8),inset 1.5px 0 0 rgba(255,255,255,.34),inset 0 -3px 9px rgba(2,18,60,.34),inset -2px 0 7px rgba(2,18,60,.2),0 44px 80px -44px rgba(0,6,30,.95);isolation:isolate}
.glass__face{position:relative;border-radius:calc(var(--r) - 9px);overflow:hidden;background:#0B1B3A;box-shadow:0 0 0 1px rgba(0,10,40,.4),0 1px 0 rgba(255,255,255,.25)}
.glass__face img{display:block;width:100%;height:auto}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent calc(var(--gx,38%) - 9%),rgba(255,255,255,.14) var(--gx,38%),transparent calc(var(--gx,38%) + 9%)),linear-gradient(180deg,rgba(255,255,255,.1),transparent 18%);mix-blend-mode:screen;z-index:2}
.glass--phone{--r:30px;padding:8px}
.glass--phone .glass__face{border-radius:23px}
a.glass{text-decoration:none;color:inherit}
a.glass:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:var(--r)}

/* ---------- work: each site surfaces from the deep as you reach it. One row per site: the copy on the left, the glass
   tile on the right (it overhangs the wrap to the viewport gutter). home.js scrubs the rise: the tile comes up out of
   the water (the veil over its face thins, the glint sweeps across), holds at the surface while its opening film plays,
   then drifts up and dims as the next one rises. Phones: the phone glass with the site's own phone film, copy under it. ---------- */
.work{padding-block:clamp(72px,8vw,120px) clamp(96px,11vw,160px)}
.work__head{margin-bottom:clamp(16px,2.5vw,32px)}
.work__reef{list-style:none;margin-right:calc(-1 * max(0px,min(76px,(100vw - var(--wrap)) / 2)))}
.wi{position:relative;display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,7.4fr);gap:clamp(28px,4vw,56px);align-items:center;min-height:62vh;min-height:62svh}
.wi__tile{grid-column:2;grid-row:1;width:100%}
.wi__face{display:block;position:relative;aspect-ratio:16/10}
.wi__face picture,.wi__face img{position:absolute;inset:0;width:100%;height:100%}
.wi__face img{object-fit:cover;object-position:50% 0}
.wi__veil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(180deg,#041A4C,#0A3A8E 58%,#1567C9);mix-blend-mode:multiply}
.wi__copy{grid-column:1;grid-row:1;display:grid;gap:14px;justify-items:start;align-content:center}
.wi__idea{font-size:clamp(26px,2.55vw,37px);font-weight:660;font-stretch:112%;line-height:1.06;letter-spacing:-.022em;text-wrap:balance;color:#fff}
.wi__job{font-size:clamp(17px,1.32vw,19.5px);line-height:1.45;color:var(--foam-2);max-width:30ch}
.wi__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px;font-size:15px;font-weight:520;color:var(--foam-2)}
.wi__open{font-size:17px;padding-block:9px}
.work__bridge{display:grid;gap:24px;justify-items:start;margin-top:clamp(24px,4vw,56px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-water)}
.work__ask{font-size:clamp(26px,2.9vw,42px);font-weight:680;font-stretch:118%;line-height:1.06;letter-spacing:-.024em;max-width:19em;text-wrap:balance}
.work__note{margin-top:clamp(32px,4vw,48px);max-width:74ch;font-size:15.5px;color:var(--foam-3)}
.work__note .link{color:var(--foam-2)}
html:not(.motion) .wi__veil{display:none}
html:not(.motion) .wi{min-height:0;padding-block:clamp(24px,3vw,40px)}
@media (max-width:1100px){.wi{grid-template-columns:minmax(0,4.2fr) minmax(0,6.8fr)}}
@media (max-width:900px){
  .work__reef{margin-right:0}
  /* a row (phone glass + its words) fits under the nav on one phone screen, with room to spare */
  .wi{grid-template-columns:1fr;gap:14px;min-height:0;align-content:center;padding-block:6px}
  .wi__tile{grid-column:1;grid-row:auto;--r:30px;width:min(54vw,214px);padding:8px;justify-self:center}
  .wi__tile .glass__face{border-radius:23px}
  .wi__face{aspect-ratio:390/844}
  /* the site's name, its tag and "Open the site" share one line (it wraps cleanly on narrow phones) */
  .wi__copy{grid-column:1;grid-row:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .wi__idea,.wi__job{flex:1 0 100%}
  .wi__meta{margin-top:0}
  .wi__open{margin-block:-9px}   /* the 44 px target reaches into the gap above and below; the line stays one tag tall */
  .wi__idea{font-size:clamp(24px,6.6vw,30px)}
  .wi__job{font-size:17px}
  .work__ask{font-size:clamp(26px,7.4vw,34px)}
}

/* ---------- how it works: the lily-pad path. Three pads lie on the water, then the path forks: a pad carrying an
   open water lily ("Love it") and a plain one ("Don't"). path.js drifts each pad into place in order, rings the water
   round it and opens the lily; the koi swims to the pad that just lit (water.js, [data-koi-stop]). The words are
   plain text on the water and never hidden. Desktop: one band, the pads on a gentle wave, ending low at the fork with
   the estimate button under it. Below 1024 px: a zig-zag down the screen, the fork as two pads side by side.
   The Process page uses the same pads (.path--long, further down). ---------- */
.how{--pg:clamp(20px,2.4vw,36px);padding-block:clamp(56px,5vw,72px) clamp(28px,3.6vw,52px)}
.how__inner{display:grid;gap:clamp(24px,2.3vw,34px)}
.how__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 56px;align-items:end}
.how__head .h2{grid-row:span 2}
.how__head .lead{max-width:40ch}
.how__cta{grid-column:2}
@media (max-width:860px){.how__head{grid-template-columns:1fr}.how__head .h2{grid-row:auto}.how__cta{grid-column:auto}}
/* the pads and their words (both pages) */
.path{list-style:none}
.path__pad{position:relative;width:100%;aspect-ratio:1}
.path__leaf{display:block;width:100%;height:100%;rotate:var(--rot,0deg);filter:drop-shadow(0 0 1.2px rgba(0,22,64,.6)) drop-shadow(0 3px 5px rgba(0,18,56,.28))}
.path__lily{position:absolute;left:var(--lx,57%);top:var(--ly,45%);width:var(--lw,60%);height:auto;translate:-50% -50%;filter:drop-shadow(0 4px 7px rgba(0,26,24,.4))}
.path__cap{display:grid;gap:7px;align-content:start;max-width:32ch}
.path__cap h3{font-size:clamp(21px,1.7vw,24px);font-weight:680;font-stretch:118%;line-height:1.14;letter-spacing:-.018em;color:#fff;text-wrap:balance}
.path__step h3{display:flex;gap:10px;align-items:baseline}
.path--home .path__step h3{font-stretch:108%}
.path__n{flex:none;display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:.3em;background:var(--koi);color:var(--navy);font-size:.8em;font-weight:760;font-stretch:100%;letter-spacing:0;line-height:1;translate:0 -.08em}
.path__cap p{font-size:clamp(17px,1.28vw,18px);line-height:1.45;color:var(--foam-2)}
.path__cap .path__pay{font-size:17px;font-weight:600;color:var(--shallows)}
.path__q{display:block;margin-bottom:5px;font-size:clamp(17px,1.28vw,18px);font-weight:600;font-stretch:104%;letter-spacing:-.005em;line-height:1.3;color:var(--shallows)}
.path__facts{display:flex;flex-wrap:wrap;gap:2px 18px;font-size:17px;line-height:1.4;color:var(--foam-2)}
.path__facts b{font-weight:620;color:var(--shallows)}
.path__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-self:start;color:var(--foam-2)}
.path__go p{font-size:17px;font-weight:520}
/* the four pads' resting turn (their notches point different ways) and the lily's place on its pad */
.path__step--1 .path__leaf{--rot:-8deg}
.path__step--2 .path__leaf{--rot:14deg}
.path__step--3 .path__leaf{--rot:-4deg}
.path__out--dont .path__leaf,.path__pad--dont .path__leaf{--rot:22deg}
/* home, desktop: one band; the captions ride the same wave as the pads */
@media (min-width:1024px){
  .path--home{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.9fr);column-gap:var(--pg);align-items:start}
  .path--home .path__step,.path--home .path__out{display:grid;gap:18px;align-content:start}
  .path--home .path__step--1{padding-top:36px}
  .path--home .path__step--1 .path__pad{width:min(100%,188px)}
  .path--home .path__step--2{padding-top:82px}
  .path--home .path__step--2 .path__pad{width:min(100%,168px);margin-left:7%}
  .path--home .path__step--3{padding-top:6px}
  .path--home .path__step--3 .path__pad{width:min(100%,214px)}
  .path--home .path__fork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--pg);padding-top:96px}
  .path--home .path__out{max-width:216px}
  .path--home .path__out--dont .path__pad{width:86%;margin-top:14%}
  /* the next step sits right under step 3 and the fork */
  .how .path__go{margin-left:calc((100% - 3 * var(--pg)) * 2.2 / 5.2 + 2 * var(--pg))}
}
/* home, phones and tablets: a zig-zag down the screen, then the fork side by side */
@media (max-width:1023px){
  .path--home{display:grid;gap:clamp(14px,3.6vw,26px)}
  .path--home .path__step{display:grid;grid-template-columns:var(--pw) minmax(0,1fr);gap:clamp(14px,3.6vw,26px);align-items:center}
  .path--home .path__step--1{--pw:clamp(122px,33vw,200px)}
  .path--home .path__step--2{--pw:clamp(112px,30vw,184px);grid-template-columns:minmax(0,1fr) var(--pw)}
  .path--home .path__step--2 .path__pad{order:2}
  .path--home .path__step--3{--pw:clamp(128px,35vw,210px)}
  .path--home .path__fork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,3.6vw,26px);margin-top:4px}
  .path--home .path__out{display:grid;gap:10px;align-content:start}
  .path--home .path__out--love .path__pad{width:min(86%,200px)}
  .path--home .path__out--dont .path__pad{width:min(74%,172px);margin-top:12%}
  .path--home .path__cap h3{font-size:21px}
}

/* ---------- founder ---------- */
.founder{padding-block:clamp(110px,12vw,180px) clamp(80px,9vw,128px)}
.founder__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:end}
@media (max-width:900px){.founder__grid{grid-template-columns:1fr}}
.founder__line{font-size:clamp(30px,3.7vw,54px);font-weight:700;font-stretch:120%;line-height:1.05;letter-spacing:-.028em;text-wrap:balance}
.founder__body{display:grid;gap:18px;font-size:18px;line-height:1.6;color:var(--foam-2);max-width:46ch}
.vsl{margin-top:10px}
.vsl__player{position:relative;border-radius:var(--r-media);overflow:hidden;background:rgba(3,20,64,.6);min-height:96px}
.vsl video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r-media)}
.vsl__poster{display:flex;align-items:center;gap:16px;width:100%;padding:18px;border:0;background:transparent;color:#fff;text-align:left}
.vsl__play{flex:none;width:56px;height:56px;border-radius:50%;background:var(--koi);display:grid;place-items:center}
.vsl__play svg{width:22px;fill:var(--navy);margin-left:3px}
.vsl__label{display:grid;gap:4px;font-weight:620;font-size:18px}
.vsl__label small{font-weight:420;font-size:15px;color:var(--foam-2)}
.vsl__fallback{padding:18px;color:#fff}
.vsl__fallback a{color:#fff}

/* ---------- FAQ ---------- */
.faqs{padding-block:clamp(80px,9vw,128px) clamp(110px,12vw,170px)}
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.faq{grid-template-columns:1fr}}
.faq__head{display:grid;gap:18px;position:sticky;top:112px;color:var(--foam-2)}
.faq__head .h2{color:#fff}
@media (max-width:900px){.faq__head{position:static}}
.qa{border-top:1px solid var(--line-water-2)}
.qa details{border-bottom:1px solid var(--line-water)}
.qa summary{list-style:none;display:grid;grid-template-columns:1fr 28px;gap:18px;align-items:center;padding:22px 0;cursor:pointer;font-size:clamp(18px,1.5vw,21px);font-weight:600;font-stretch:104%;letter-spacing:-.012em;line-height:1.3;color:#fff}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--shallows)}
.qa summary i{position:relative;width:28px;height:28px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0deg)}
.qa .ans{padding:0 46px 24px 0;color:var(--foam-2);max-width:62ch}

/* ---------- footer: the same pond at dusk ---------- */
.dusk{color:#fff;isolation:isolate;overflow:hidden;overflow:clip;padding-top:clamp(120px,15vw,210px)}
.dusk::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night) url("assets/pond-night.webp") center/cover no-repeat;transition:opacity 1s ease;pointer-events:none}
@media (max-width:720px){.dusk::before{background-image:url("assets/pond-night-m.webp")}}
.dusk__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px clamp(32px,5vw,80px);align-items:end}
@media (max-width:900px){.dusk__grid{grid-template-columns:1fr}}
.dusk__title{font-size:clamp(32px,4.1vw,60px);font-weight:720;font-stretch:124%;line-height:1.02;letter-spacing:-.03em;max-width:13em;text-wrap:balance;text-shadow:0 1px 14px rgba(0,6,20,.55)}
.dusk__sub{margin-top:20px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.88);max-width:40ch}
.dusk__actions{margin-top:28px}
.dusk__side{display:grid;gap:14px}
.dusk__label{font-size:15px;color:rgba(255,255,255,.78)}
.dusk__mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:clamp(17px,1.4vw,20px);font-weight:600}
.dusk__mail a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;text-decoration-color:rgba(255,255,255,.45)}
.dusk__mail a:hover{text-decoration-color:#fff}
.dusk__links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.dusk__links a{font-size:15.5px;text-decoration:none;color:rgba(255,255,255,.86);padding-block:11px}
.dusk__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:.24em}
.dusk :focus-visible{outline-color:#fff}
.dusk__word{margin:clamp(56px,8vw,120px) 0 0;text-align:center;white-space:nowrap;font-size:clamp(46px,15.4vw,250px);font-weight:800;font-stretch:125%;line-height:.78;letter-spacing:-.045em;color:rgba(234,242,255,.9);pointer-events:none;user-select:none}
.dusk__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px calc(26px + env(safe-area-inset-bottom,0px));font-size:14px;color:rgba(255,255,255,.74)}

/* ================= inner pages: each one starts in the sunlit shallows and goes down ================= */
.page-hero{position:relative;isolation:isolate;padding-top:calc(var(--nav-h) + 14px + clamp(72px,9vw,130px));padding-bottom:clamp(64px,8vw,120px)}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:32px;align-items:end}
@media (max-width:960px){.page-hero__grid{grid-template-columns:1fr}}
.page-hero .display{max-width:13em}
.page-hero .lead{max-width:40ch;color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(3,24,78,.5)}
.page-hero__side{display:grid;gap:22px;justify-items:start}
.section{padding-block:clamp(88px,10vw,150px)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.split__head{display:grid;gap:16px;position:sticky;top:112px}
@media (max-width:960px){.split__head{position:static}}
.rows{list-style:none;border-top:1px solid var(--line-water-2)}
.rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line-water)}
@media (max-width:640px){.rows li{grid-template-columns:1fr;gap:6px}}
.rows b{font-weight:620;font-size:19px;letter-spacing:-.012em;font-stretch:104%}
.rows p{color:var(--foam-2)}

/* work page: every concept as a glass tile in the deep */
.redo{padding-block:clamp(40px,5vw,72px) clamp(90px,10vw,150px)}
.redo__head{display:grid;gap:14px;margin-bottom:clamp(28px,3vw,40px);max-width:760px}
.redo__head .h2{font-size:clamp(30px,3.4vw,48px)}
.gallery{padding-block:clamp(60px,7vw,110px) clamp(110px,12vw,180px)}
.gallery__head{margin-bottom:clamp(48px,6vw,96px)}
.tile{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:clamp(36px,5vw,88px);align-items:center;padding-block:clamp(48px,6vw,96px)}
.tile + .tile{border-top:1px solid var(--line-water)}
.tile__vis{position:relative;margin:0 8% 8% 0}
.tile__vis .glass--phone{position:absolute;right:-8%;bottom:-12%;width:24%;z-index:3}
.tile__vis .glass--phone .glass__face{aspect-ratio:390/844}
.tile__vis .glass--phone img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tile__vis .glass:not(.glass--phone) .glass__face{aspect-ratio:16/10}
.tile__vis .glass:not(.glass--phone) img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tile__copy{display:grid;gap:16px;align-content:start;justify-items:start}
.tile__copy h2{font-weight:620;font-stretch:108%;font-size:clamp(27px,2.6vw,38px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.tile__copy .body-copy{max-width:40ch}
.tile__meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-weight:560;color:var(--foam-2)}
.tile__copy ul{list-style:none;display:grid;gap:8px;color:var(--foam-2)}
.tile__copy li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.tile__copy li::before{content:"";width:8px;height:2px;margin-top:.8em;background:var(--shallows);border-radius:2px}
@media (max-width:960px){.tile{grid-template-columns:1fr}.tile__vis{margin:0 12% 14% 0}.tile__vis .glass--phone{width:30%;right:-12%}}
.gallery .work__bridge{margin-top:0}   /* the last tile's own padding already spaces it, like the rules between tiles */
.work-note{margin-top:clamp(32px,4vw,56px);color:var(--foam-3);max-width:72ch;font-size:15.5px}
/* before → after slider (Work page): the old and new homepage on the water, compare by dragging the handle */
.ba-slider{position:relative;max-width:min(1100px,calc(60svh * 1.6))}
.ba-slider__frame{position:relative;border-radius:var(--r-paper);overflow:hidden;background:#fff;box-shadow:var(--lift-shadow);max-height:60vh;max-height:60svh;touch-action:pan-y}
.ba-layer img{display:block;width:100%;height:auto}
.ba-layer--before{position:relative}
.ba-layer--after{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;bottom:14px;z-index:3;border-radius:6px;padding:5px 10px;pointer-events:none;font-size:13.5px;font-weight:560}
.ba-tag--after{left:14px;background:var(--koi);color:var(--navy)}
.ba-tag--before{right:14px;background:var(--navy);color:#fff}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:4}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(10,31,61,.3);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:0;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--navy),0 6px 16px -6px rgba(10,31,61,.5);cursor:ew-resize;touch-action:none}
.ba-handle i svg{width:24px;height:24px;pointer-events:none}
.ba-slider.is-dragging .ba-handle i{transform:scale(1.08)}
.ba-range{position:absolute;left:50%;bottom:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ba-slider:has(.ba-range:focus-visible) .ba-handle i{box-shadow:0 0 0 3px var(--koi),0 0 0 6px #fff,0 6px 16px -6px rgba(10,31,61,.5)}
.ba-slider:has(.ba-range:focus-visible) .ba-slider__frame{outline:3px solid var(--shallows);outline-offset:4px}
.ba-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:26px;color:var(--foam-2)}
@media (max-width:720px){.ba-slider{max-width:420px;margin-inline:auto}}

/* process page: the same lily-pad path, long form (see "how it works" above; path.js). Desktop: the pads wind down the
   middle of the page in a zig-zag, each step's words on the outer side of its pad (steps 1 and 3 left, 2 and 4 right,
   each starting half a step below the one before). Step 4 carries the fork: the lily pad and the plain one.
   Phones: one column; each step is a pad beside its heading, then the paragraph at the full width (below). */
.section--path{padding-block:clamp(56px,6.5vw,100px) clamp(48px,5vw,80px)}
.path--long .path__step{display:grid;gap:clamp(16px,2vw,28px);align-items:center}
.path--long .path__cap{max-width:40ch}
.path--long .path__cap h3{font-size:clamp(21px,1.9vw,26px)}
.path--long .path__cap p{font-size:17px}
.path--long .path__cap .path__facts{font-size:17px}
.path__pads{position:relative;width:100%;aspect-ratio:1}
.path__pads .path__pad{position:absolute}
.path__pads .path__pad--love{left:0;top:0;width:74%}
.path__pads .path__pad--dont{right:0;bottom:0;width:48%}
@media (min-width:900px){
  .path--long{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,44px);row-gap:clamp(16px,2vw,26px)}
  .path--long .path__step--1{grid-column:1;grid-row:1/span 2;grid-template-columns:minmax(0,1fr) var(--pw);--pw:clamp(150px,15vw,208px)}
  .path--long .path__step--2{grid-column:2;grid-row:2/span 2;grid-template-columns:var(--pw) minmax(0,1fr);--pw:clamp(140px,14vw,190px)}
  .path--long .path__step--3{grid-column:1;grid-row:3/span 2;grid-template-columns:minmax(0,1fr) var(--pw);--pw:clamp(156px,16vw,222px)}
  .path--long .path__step--4{grid-column:2;grid-row:4/span 2;grid-template-columns:var(--pw) minmax(0,1fr);--pw:clamp(176px,18vw,248px)}
  .path--long .path__step--1>.path__pad,.path--long .path__step--3>.path__pad{order:2}
  .path--long .path__step--1 .path__cap,.path--long .path__step--3 .path__cap{justify-self:end}
}
.path--long .path__head{display:grid;gap:7px}
/* phones and small tablets: a compact row of pad + who/pay + heading (the pad switching sides step to step), then the
   paragraph at the full width under it (the caption box steps aside: display contents; its two parts carry their own
   scrims, so the water behind the pad stays clear for the koi) */
@media (max-width:899px){
  .path--long{display:grid;gap:clamp(30px,7vw,44px)}
  .path--long .path__step{grid-template-columns:var(--pw) minmax(0,1fr);column-gap:clamp(14px,4.2vw,24px);row-gap:12px;align-items:center;--pw:clamp(96px,26vw,160px)}
  .path--long .path__cap{display:contents}
  .path--long .path__step>.path__pad,.path--long .path__pads{grid-column:1;grid-row:1}
  .path--long .path__head{grid-column:2;grid-row:1;gap:6px}
  .path--long .path__body{grid-column:1/-1;grid-row:2;max-width:62ch}
  .path--long .path__step:nth-child(even){grid-template-columns:minmax(0,1fr) var(--pw)}
  .path--long .path__step:nth-child(even)>.path__pad,.path--long .path__step:nth-child(even)>.path__pads{grid-column:2}
  .path--long .path__step:nth-child(even) .path__head{grid-column:1}
  .path--long .path__step--4{--pw:clamp(118px,33vw,196px)}
}
.offer__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
@media (max-width:960px){.offer__top{grid-template-columns:1fr}}
.offer__lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:32ch;color:var(--foam-2)}
.fork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line-water-2)}
.fork__before{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 36px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line-water)}
.fork__before b{font-weight:620;font-size:19px}
.fork__before span{color:var(--foam-2)}
.fork__path{padding:clamp(28px,3vw,44px) clamp(20px,3vw,48px) clamp(28px,3vw,44px) 0;display:grid;gap:14px;align-content:start}
.fork__path + .fork__path{padding-left:clamp(20px,3vw,48px);border-left:1px solid var(--line-water)}
.fork__q{font-size:15px;font-weight:560;color:var(--shallows)}
.fork__path b{display:block;font-weight:640;font-stretch:112%;font-size:clamp(30px,3.2vw,48px);line-height:1;letter-spacing:-.022em}
.fork__path p{color:var(--foam-2);max-width:30ch}
@media (max-width:720px){.fork{grid-template-columns:1fr}.fork__path + .fork__path{padding-left:0;border-left:0;border-top:1px solid var(--line-water)}}

/* about page */
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:960px){.about{grid-template-columns:1fr}}
.story{display:grid;gap:clamp(40px,6vw,88px);max-width:34ch;font-size:clamp(21px,1.9vw,27px);line-height:1.45;font-weight:460;color:var(--foam-2)}
.story p:first-child{font-weight:620;font-stretch:106%;font-size:clamp(28px,3vw,44px);line-height:1.12;letter-spacing:-.02em;color:#fff}
.signoff{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--foam-2)}
.badge-wrap{position:sticky;top:130px;display:grid;justify-items:center;padding-top:40px}
.badge{position:relative;width:min(100%,320px);background:#fff;color:var(--navy);border-radius:14px;box-shadow:var(--lift-shadow);transform:rotate(2.4deg)}
.badge__clip{position:absolute;left:50%;top:-40px;width:30px;height:54px;transform:translateX(-50%);border-radius:9px;background:linear-gradient(90deg,#AEB8C2,#E8EDF0 50%,#AEB8C2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.badge__top{background:var(--deep);color:#fff;border-radius:14px 14px 0 0;padding:24px 20px 16px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.badge__top b{font-weight:640;font-stretch:112%;font-size:24px;line-height:.95}
.badge__top span{font-size:13.5px;font-weight:560;color:rgba(255,255,255,.84)}
.badge__photo{margin:18px 20px 0;aspect-ratio:1;border-radius:10px;background:var(--stone);display:grid;place-items:center;position:relative}
.badge__photo .mark{width:42%;height:auto}
.badge__photo span{position:absolute;left:12px;bottom:10px;color:var(--navy-2);font-size:14px;font-weight:560}
.badge dl{margin:0;padding:14px 20px 6px;display:grid;grid-template-columns:auto 1fr;gap:0 14px}
.badge dt{font-size:14px;color:var(--navy-2);padding:9px 0;border-bottom:1px solid var(--line)}
.badge dd{margin:0;font-weight:600;padding:9px 0;border-bottom:1px solid var(--line);text-align:right}
.badge__code{margin:12px 20px 20px;height:30px;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 4px,var(--navy) 4px 7px,transparent 7px 9px,var(--navy) 9px 10px,transparent 10px 14px);opacity:.85}
@media (max-width:960px){.badge-wrap{position:static}}
.promises{list-style:none;border-top:1px solid var(--line-water-2)}
.promises li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px 48px;align-items:baseline;padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line-water)}
.promises b{font-weight:640;font-stretch:110%;font-size:clamp(28px,3vw,44px);line-height:1.02;letter-spacing:-.022em}
.promises p{color:var(--foam-2);max-width:44ch}
@media (max-width:760px){.promises li{grid-template-columns:1fr}}

/* start page: the project form is three sheets of paper floating on the water */
.brief{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:1000px){.brief{grid-template-columns:1fr}}
.brief__form{display:grid;gap:clamp(22px,2.4vw,34px)}
.fset{border:0;margin:0;padding:clamp(22px,2.8vw,36px);background:#fff;color:var(--navy);border-radius:var(--r-paper);box-shadow:var(--lift-shadow);display:grid;gap:20px}
.fset legend{float:left;width:100%;padding:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.fset legend b{font-weight:620;font-stretch:110%;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.02em}
.fset legend span{color:var(--navy-2);font-size:14px;font-weight:560}
.fset :focus-visible{outline-color:var(--koi)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.frow{grid-template-columns:1fr}}
.field{display:grid;gap:8px;align-content:start}
.field label{font-weight:600;font-size:15.5px}
.field label small{font-weight:450;color:var(--navy-2);font-size:14px;margin-left:4px}
.field .hint{color:var(--navy-2);font-size:14px;margin-top:-4px}
.field input,.field textarea{width:100%;font:inherit;font-size:16.5px;color:var(--navy);background:#fff;border:1.5px solid #B9C4CE;border-radius:10px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:112px;resize:vertical;line-height:1.5}
.field input:hover,.field textarea:hover{border-color:var(--navy-2)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(242,84,27,.35)}
.field ::placeholder{color:#6B7888}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--err);background:var(--err-bg)}
.field .err{display:none;color:var(--err);font-size:14px;font-weight:600}
.field[data-invalid] .err{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:9px;border:1.5px solid #B9C4CE;background:#fff;color:var(--navy);font-weight:560;font-size:14.5px;transition:background-color .2s,color .2s,border-color .2s}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip[aria-pressed="true"]::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--koi)}
@media (hover:hover){.chip:hover{border-color:var(--navy)}.chip[aria-pressed="true"]:hover{background:#18305A}}
.brief__submit{display:grid;gap:14px;padding-top:8px}
.brief__submit .btn{width:100%}
.brief__submit p{color:var(--foam-2);font-size:15px}
.brief__status{font-weight:600;color:#fff}
.brief__status[data-state]{color:var(--err-water)}
.brief__status a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.aside{display:grid;gap:clamp(28px,3vw,40px);position:sticky;top:110px}
@media (max-width:1000px){.aside{position:static}}
.aside h2{font-weight:620;font-stretch:110%;font-size:30px;line-height:1;letter-spacing:-.02em}
.aside ol{list-style:none;display:grid;gap:12px;margin-top:16px}
.aside li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:16px;color:var(--foam-2)}
.aside li span{font-size:13px;font-weight:600;height:24px;border-radius:6px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.aside__mail{display:grid;gap:10px;padding-top:26px;border-top:1px solid var(--line-water)}
.aside__mail p{color:var(--foam-2);font-size:15.5px}
.copyline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:600;color:#fff}
.done{display:grid;gap:20px;padding-block:clamp(10px,2vw,30px)}
.done__kicker{color:var(--foam-2);font-weight:560}
.done .display{font-size:clamp(46px,6.4vw,96px)}
.done ol{list-style:none;display:grid;gap:12px;max-width:56ch}
.done li{display:grid;grid-template-columns:26px 1fr;gap:12px;color:var(--foam-2)}
.done li span{font-size:13px;font-weight:600;height:24px;border-radius:6px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.done__note{color:var(--foam-2);overflow-wrap:anywhere}
.done__mail{overflow-wrap:anywhere;font-weight:560;color:#fff}
a.done__mail{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;text-decoration-color:rgba(255,255,255,.55)}
a.done__mail:hover{text-decoration-color:#fff}
/* Start: the always-working Google Forms route, under the hero lead */
.gf-alt{color:var(--foam-2);font-size:17px;text-shadow:0 1px 16px rgba(3,24,78,.5)}
.gf-alt .link--water{font-size:inherit}
/* the brief without its script (no JS, or app.js never started: start.html's guard adds .brief-off): the Google Form is
   the way to send it, and the native form stays hidden so nobody fills out a form that can't send */
.brief__gf{justify-items:start;gap:16px}
.brief__gf-title{font-weight:620;font-stretch:110%;font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.brief__gf p{font-size:16.5px;line-height:1.5;color:var(--navy-2);max-width:52ch}
.brief__gf .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2}
a.brief__gf-mail{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.js .brief__gf{display:none}
.js.brief-off .brief__gf{display:grid}
html:not(.js) .brief__form,.brief-off .brief__form{display:none}
/* keep a copy of the answers (app.js): under the button after a slow or failed send, and on the Sent panel */
.keep{display:grid;gap:14px;justify-items:start}
.keep__summary{display:grid;gap:12px;width:100%;max-width:62ch}
.keep__title{font-weight:620;font-stretch:110%;font-size:24px;line-height:1.1;letter-spacing:-.015em;color:#fff}
.keep__list{display:grid;gap:4px 0;padding:16px 18px;border-radius:12px;background:rgba(3,22,66,.42);box-shadow:inset 0 0 0 1px var(--line-water)}
.keep__list dt{font-size:14px;font-weight:600;color:var(--shallows)}
.keep__list dt:not(:first-child){margin-top:10px}
.keep__list dd{margin:0;color:#fff;font-size:16px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.keep__actions{display:flex;flex-wrap:wrap;gap:10px}
.brief__submit .keep .btn{width:auto}
.keep__note{color:var(--foam-2);font-size:15.5px}
.keep__note .link{color:#fff}
/* Deposit (unlisted): the pay card is paper on the pond, like the brief's fieldsets */
.deposit__card{gap:18px}
.deposit__card h2{font-weight:660;font-stretch:112%;font-size:clamp(28px,2.6vw,38px);line-height:1.04;letter-spacing:-.02em}
.deposit__terms{font-size:clamp(18px,1.4vw,20px);line-height:1.55;max-width:52ch}
.deposit__terms a{color:inherit;font-weight:620;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.deposit__small{font-size:15px;color:var(--navy-2)}
@media (max-width:520px){.deposit__card .btn{width:100%}}

/* 404: the page went offline, on a tiny island in the pond */
.lost{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;isolation:isolate}
.lost__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding-top:calc(var(--nav-h) + 60px);padding-bottom:80px}
.lost__copy{display:grid;gap:24px;justify-items:start}
.lost__copy .lead{color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(3,24,78,.5)}
.lost__actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.island{position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:1;pointer-events:none;border-radius:50%}
.island img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.island__crt{position:absolute;left:40.3%;top:35.5%;width:19.3%;height:16.7%;border-radius:12%/16%;background:radial-gradient(56% 7% at 50% 50%,rgba(210,240,255,.95),rgba(160,215,255,.25) 60%,transparent);mix-blend-mode:screen;animation:crt 4.2s ease-in-out infinite}
@keyframes crt{0%,100%{opacity:.25}48%{opacity:.8}52%{opacity:.15}}
@media (max-width:860px){.lost{align-items:flex-start}.lost__grid{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + 44px)}.island{width:min(86%,400px);margin-top:4px}}

/* a concept's load-in film over its poster (inline tiles); fades in once it is actually playing */
.inview-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .6s var(--ease)}
.inview-film.is-on{opacity:1}