@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("assets/fonts/mona-sans-latin.woff2") format("woff2")}
/* 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;touch-action:manipulation}   /* manipulation: no double-tap zoom when people tap the water again and again; pinch-zoom and scrolling stay (the Work slider's pan-y / none still narrow it) */
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}}

/* ---------- your work is better than theirs: what an owner sends (work photos, a sample, a note in their own words)
   floats on the water as paper prints, and a marker arrow leads into the homepage I built from it (one glass tile).
   Three example stories; a tab swaps them (home.js, section 1: the prints sink and new ones surface, the homepage
   opens through a ripple lens). Desktop: the words and tabs on the left, the board on the right (it overhangs the
   wrap like the Work tiles). Phones: words, tabs, then the board (prints on the left, the phone glass on the right),
   then the button. The board is one box with a fixed shape; everything on it is placed in % of it, so it scales. ---------- */
@font-face{font-family:"Hand";src:url(assets/craft/hand.woff2) format("woff2");font-display:swap}
.craft{padding-block:clamp(72px,8vw,120px) clamp(72px,8vw,120px)}
.craft__grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);grid-template-areas:"copy board" "pick board" "go board" "note board";grid-template-rows:auto auto auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
.craft__copy{grid-area:copy;display:grid;gap:18px}
.craft__title{font-size:clamp(30px,2.75vw,42px);line-height:1.04}
.craft__title span{display:block;text-wrap:balance}
.craft__copy .lead{max-width:29rem}
.craft__pick{grid-area:pick;min-width:0;margin:clamp(30px,3vw,42px) 0 0;padding:0;border:0}
.craft__legend{padding:0;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--foam-2)}
.craft__tabs{display:flex;flex-wrap:wrap;gap:8px}
.craft__tab{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.craft__tab input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.craft__tab span{display:flex;align-items:center;height:44px;padding:0 16px;border-radius:10px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);color:#fff;font-size:15.5px;font-weight:580;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.craft__tab:hover span{background:rgba(255,255,255,.16)}
.craft__tab input:checked+span{background:#fff;color:var(--navy);box-shadow:0 8px 18px -10px rgba(0,8,30,.8)}
.craft__tab input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.craft__go{grid-area:go;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(30px,3vw,42px);color:var(--foam-2)}
.craft__go p{font-size:16px;font-weight:520}
.craft__note{grid-area:note;margin-top:26px;max-width:38ch;font-size:14.5px;line-height:1.5;color:var(--foam-3)}

/* the board */
.craft__board{grid-area:board;position:relative;container-type:inline-size;aspect-ratio:814/620;margin-right:calc(-1 * max(0px,min(76px,(100vw - var(--wrap)) / 2)))}
.craft__label{position:absolute;z-index:4;margin:0;font-size:15px;font-weight:600;line-height:1.2;color:var(--foam-2)}
.craft__label--send{left:0;top:0}
.craft__label--build{right:0;top:3.2%}
/* the homepage: one glass tile, the three stories' homepages stacked inside it */
.craft__site.glass{position:absolute;z-index:1;left:36%;top:8.6%;width:64%;translate:0 calc(var(--cp,0) * -10px)}
.craft__face{display:block;aspect-ratio:16/10;background:#0B1B3A}
.cs{position:absolute;inset:0;margin:0}
.craft__face .cs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.craft__lens{position:absolute;left:0;top:0;z-index:3;width:100px;height:100px;margin:-50px 0 0 -50px;overflow:visible;pointer-events:none;opacity:0}
.craft__lens circle{fill:none;vector-effect:non-scaling-stroke}
/* what the owner sends: paper prints, a sample and a note card */
.craft__raw{position:absolute;inset:0;z-index:2;pointer-events:none}
.cc{position:absolute;margin:0;padding:clamp(4px,.85cqw,7px);background:#FBFBF8;border-radius:2px;box-shadow:var(--lift-shadow);rotate:var(--rot,0deg);translate:0 calc(var(--cp,0) * var(--dr,0px))}
.cc img{display:block;width:100%;height:auto;border-radius:1px}
/* the scroll drift moves these every frame while the section is on screen: their own layers, so it never repaints */
.cc,.craft__site,.craft__arrow,.craft__mark{will-change:translate}
.cc--a{left:0;top:5%;width:39%;z-index:3;--rot:-3.2deg;--dr:-24px}
.cc--b{left:3%;top:49%;width:22%;--rot:2.6deg;--dr:14px}
.cc--c{left:23.5%;top:55%;width:12%;z-index:3;--rot:-7deg;--dr:30px}
.cc--d{left:28.5%;top:70%;width:27%;z-index:4;--rot:1.6deg;--dr:20px}
.cnote{--ln:1.36em;padding:.95em 1.1em .75em;background:linear-gradient(transparent calc(var(--ln) - .3em),rgba(39,67,166,.22) calc(var(--ln) - .3em),rgba(39,67,166,.22) calc(var(--ln) - .3em + 1px),transparent calc(var(--ln) - .3em + 1px)) 0 0/100% var(--ln) content-box,#fff;color:#2743A6;font-family:"Hand",var(--f);font-size:2.2cqw;line-height:var(--ln);letter-spacing:.01em}
.cnote p{margin:0}
.cnote footer{margin-top:.1em;text-align:right;font-size:.86em}
/* the marker: an arrow from the prints to the homepage, and one line about what became what */
.craft__arrow{position:absolute;z-index:5;left:56.5%;top:62.5%;width:12%;overflow:visible;pointer-events:none;translate:0 calc(var(--cp,0) * 12px)}
.craft__arrow path{fill:none;stroke:#FF7443;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.craft__mark{position:absolute;z-index:5;left:70.5%;top:67%;width:29%;margin:0;font-family:"Hand",var(--f);font-size:3.05cqw;line-height:1.08;color:#FF7443;-webkit-text-stroke:.03em #FF7443;rotate:-3deg;text-wrap:balance;pointer-events:none;translate:0 calc(var(--cp,0) * 12px)}
/* which story is on the water: the first by default; the checked tab picks it (CSS only, so it works without JS);
   home.js also sets data-on (browsers without :has) and keeps the last story up while it sinks (.is-out) */
.craft [data-story]{visibility:hidden}
.craft [data-story="kerf"]{visibility:visible}
.craft:has(input[value="yard"]:checked) [data-story="kerf"],.craft:has(input[value="roof"]:checked) [data-story="kerf"]{visibility:hidden}
.craft:has(input[value="yard"]:checked) [data-story="yard"],.craft:has(input[value="roof"]:checked) [data-story="roof"]{visibility:visible}
.craft[data-on="yard"] [data-story="kerf"],.craft[data-on="roof"] [data-story="kerf"]{visibility:hidden}
.craft[data-on="yard"] [data-story="yard"],.craft[data-on="roof"] [data-story="roof"]{visibility:visible}
.craft [data-story].is-out{visibility:visible!important}
.cs.is-in{z-index:2}

@media (max-width:1180px){
  .craft__tabs{gap:6px}
  .craft__tab span{padding:0 12px;font-size:15px}
}
@media (max-width:1023px){
  .craft__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "pick" "board" "go" "note";grid-template-rows:none}
  .craft__copy{max-width:40rem}
  .craft__board{margin:clamp(28px,4vw,40px) 0 0;max-width:820px;width:100%}
  .craft__go{margin-top:clamp(28px,4vw,40px)}
}
@media (max-width:720px){
  .craft{padding-block:56px 60px}
  .craft__copy{gap:14px}
  .craft__title{font-size:clamp(28px,8vw,34px)}
  .craft__copy .lead{font-size:17px;line-height:1.5}
  .craft__pick{margin-top:24px}
  .craft__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .craft__tab span{justify-content:center;padding:0 6px;font-size:14.5px}
  .craft__board{aspect-ratio:358/528;margin-top:26px}
  .craft__label{font-size:14px}
  .craft__label--build{left:auto;right:0;top:0}
  .craft__site.glass{--r:26px;left:auto;right:0;top:5%;width:50%;padding:7px}
  .craft__site .glass__face{border-radius:19px}
  .craft__face{aspect-ratio:390/844}
  .cc{padding:4px}
  .cc--a{left:0;top:7%;width:54.5%;--dr:-14px}
  .cc--b{left:2.5%;top:37.5%;width:37%;--dr:8px}
  .cc--c{left:36%;top:50%;width:18%;--dr:16px}
  .cc--d{left:0;top:74%;width:56%;--dr:10px}
  .cnote{font-size:4.1cqw}
  .craft__arrow{left:54%;top:72%;width:17%}
  .craft__mark{left:58%;top:81.5%;width:42%;font-size:5.2cqw}
  .craft__go{margin-top:28px}
  .craft__go .btn{width:100%}
  .craft__note{margin-top:20px}
}

/* ---------- simple prices: three paper cards on the water (the middle one ringed in koi), then what every site
   comes with, the guarantee and the Get Found add-on ---------- */
.plans__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(24px,2.4vw,34px);background:#fff;color:var(--navy);border-radius:var(--r-paper);box-shadow:var(--lift-shadow)}
.plan--pick{box-shadow:0 0 0 3px var(--koi),var(--lift-shadow)}
.plan__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;padding:6px 14px;border-radius:999px;background:var(--koi);color:var(--navy);font-size:13.5px;font-weight:700;white-space:nowrap}
.plan__name{margin:0;font-size:18px;font-weight:680;font-stretch:108%;letter-spacing:-.01em}
.plan__price{margin:0;font-size:clamp(44px,4.4vw,58px);font-weight:760;font-stretch:112%;line-height:1;letter-spacing:-.03em}
.plan__size{margin:0 0 10px;color:var(--navy-2);font-size:16px;font-weight:560}
.plan__list{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(10,31,61,.12);display:grid;gap:9px}
.plan__list li{position:relative;padding-left:26px;font-size:16px;line-height:1.4}
.plan__list li::before,.plans__all li::before{content:"";position:absolute;left:0;top:.38em;width:14px;height:8px;border-left:2.5px solid var(--koi);border-bottom:2.5px solid var(--koi);transform:rotate(-45deg)}
.plans__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(36px,4vw,56px);align-items:start}
.plans__all h3{margin:0 0 14px;font-size:21px;font-weight:680;font-stretch:108%}
.plans__all ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
.plans__all li{position:relative;padding-left:26px;color:var(--foam-2);font-size:16px}
.plans__more{display:grid;gap:14px;color:var(--foam-2);font-size:16px;line-height:1.5}
.plans__more p{margin:0}
.plans__more b{color:#fff}
.plans__guarantee{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.plans__guarantee b{color:var(--koi-hover)}
.plans__small{font-size:14.5px;color:var(--foam-3)}
.pricing__go{margin:clamp(28px,3vw,40px) 0 0}
@media (max-width:900px){
  .plans__list{grid-template-columns:minmax(0,1fr);max-width:30rem;gap:26px}
  .plans__foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .plans__all ul{grid-template-columns:minmax(0,1fr)}
  .pricing__go .btn{width:100%}
}

/* ---------- 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}}
/* one orange ask on a wide screen: the nav's button is always there and .path__go follows the fork, so the head's
   button only shows on phones, where .path__go is two screens down */
@media (min-width:721px){.how__cta{display:none}.how__head .h2{grid-row: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}
/* Safari/iOS doesn't lay out a legend inside a grid fieldset: it leaves the title straddling the card's top edge.
   So the fieldsets use plain block flow (a floated full-width legend, then everything cleared below it). */
fieldset.fset{display:flow-root}
fieldset.fset>legend{margin-bottom:24px}
fieldset.fset>legend+*{clear:both}
fieldset.fset>:not(legend)+*{margin-top:20px}
.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}
/* a draft brought back after a reload (app.js): one quiet line above the first card, with a way to start over */
.brief__draft{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--foam-2);font-size:16px;font-weight:500}
.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__range{margin-top:16px;color:#fff;font-weight:560;font-size:16px}
.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}
.aside[data-sent] .aside__mail{padding-top:clamp(10px,2vw,30px);border-top:0}   /* after a send only "Questions? Email me." + the address stay, level with the panel's first line */
.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(38px,5vw,76px)}
.done__pay{margin-top:4px}
.done__small{font-size:15px}
@media (max-width:520px){.done__pay .btn{width:100%}}
.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}

/* Hit areas extend into existing space without changing the visible controls. */
.copybtn,.nav__brand,.nav__links a,.btn--sm{position:relative}
.copybtn::after,.nav__brand::after,.nav__links a::after,.btn--sm::after{content:"";position:absolute;inset:50% 0 auto;min-height:44px;width:100%;transform:translateY(-50%)}
.menu{overscroll-behavior:contain}
.menu-open{overflow:hidden}
.fset{min-inline-size:0}
.frow{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.frow{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__hint{display:none}
  .cc,.craft__site,.craft__arrow,.craft__mark{will-change:auto}
}

.nav__fallback{display:none;text-decoration:none}
html:not(.nav-ready) button.nav__menu{display:none}
@media(max-width:980px){html:not(.nav-ready) .nav__fallback{display:inline-flex}}
html:not(.js) .copybtn{display:none}

html:not(.ba-ready) .ba-instruction,html:not(.ba-ready) .ba-range,html:not(.ba-ready) .ba-handle i{display:none}