@font-face{font-family:"Figtree";src:url("/assets/figtree.woff") format("woff");font-weight:300 900;font-display:swap}
:root{
  --forest:#183F36;--forest-2:#1F4B40;--deep:#0E2A25;--paper:#F5F4EE;--white:#FFFFFF;--lime:#D7FC51;--lime-2:#C4EC2F;
  --ink:#16302A;--muted:#55645C;--line:rgba(22,48,42,.12);--sage:#E7EEDF;--bay:#0A5977;--gold:#F2B45A;
  --sky-top:#F0EADC;--sky-bot:#F6E2BE;--night:0;
  --radius:22px;--sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;background:var(--sky-top);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.04;font-weight:780}
h2{font-size:clamp(34px,5vw,60px);max-width:16ch;text-wrap:balance}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
p{margin:0;text-wrap:pretty}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--forest);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:3px solid #8DB51A;outline-offset:3px;border-radius:8px}

/* ---------- sky + global canvases ---------- */
.sky{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot))}
main{position:relative;isolation:isolate;overflow-x:clip}
.nightfall{position:absolute;left:0;right:0;bottom:0;top:var(--nf-top,200vh);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(36,67,77,0) 0,#24434D 300px,#2B3A55 32%,#14283B 62%,#07141E 100%)}
.stars{position:absolute;inset:300px 0 0}
.stars .tw{position:absolute;inset:0;will-change:opacity;animation:twinkle 3.4s ease-in-out infinite}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFF8E0}
.stars i.big{width:3px;height:3px;box-shadow:0 0 6px #fff6}
.stars i.fly{width:4px;height:4px;background:var(--lime);box-shadow:0 0 10px 2px rgba(215,252,81,.6);animation:firefly 9s ease-in-out infinite}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.2}25%{transform:translate(18px,-22px);opacity:1}50%{transform:translate(-10px,-40px);opacity:.4}75%{transform:translate(-24px,-12px);opacity:1}}
#sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(245,244,238,.96);box-shadow:0 1px 0 rgba(22,48,42,.08)}
.header-row{display:flex;align-items:center;gap:28px;height:76px}
.brand img{height:44px;width:auto}
nav{display:flex;gap:6px;margin-left:auto;font-size:15px;font-weight:600}
nav a{text-decoration:none;color:var(--ink);opacity:.72;padding:8px 12px;border-radius:999px;transition:opacity .2s,background .2s}
nav a:hover{opacity:1;background:rgba(24,63,54,.07)}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:3px;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#9BC20E,var(--lime));border-radius:0 3px 3px 0;box-shadow:0 0 12px rgba(215,252,81,.8)}

/* ---------- buttons ---------- */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--forest);color:var(--paper);font-weight:680;font-size:16.5px;text-decoration:none;border:2px solid var(--forest);transition:transform .25s var(--spring),background .2s,box-shadow .25s;overflow:hidden;isolation:isolate}
@media (hover:hover){.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(24,63,54,.55)}}
.button:active{transform:translateY(0) scale(.98)}
.button.small{min-height:44px;padding:0 20px;font-size:15px}
.button.ghost{background:rgba(255,255,255,.35);color:var(--forest)}
.button.ghost:hover{background:rgba(255,255,255,.7)}
.spark-btn i{font-style:normal;color:var(--lime);display:inline-block;transition:transform .6s var(--spring)}
.spark-btn:hover i{transform:rotate(180deg) scale(1.3)}
.spark-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(215,252,81,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shine 4.5s 2s infinite}
@keyframes shine{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.on-dark .button,.book .button{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.on-dark .spark-btn i{color:var(--forest)}
.on-dark .spark-btn::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%)}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow.lime{color:var(--lime)}
.dot{width:9px;height:9px;border-radius:50%;background:#9BC20E;box-shadow:0 0 0 0 rgba(155,194,14,.5);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(155,194,14,.55)}80%,100%{box-shadow:0 0 0 12px rgba(155,194,14,0)}}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(28px,5vw,64px)}
.hero-copy{position:relative;z-index:3}
.hero-title{font-size:clamp(56px,9.4vw,136px);line-height:.9;letter-spacing:-.055em;font-weight:820;margin:0 0 26px;color:var(--forest)}
.hero-title .line{display:block;overflow:hidden;padding:.04em 0 .1em}
.hero-title .word{display:inline-block}
.hero-title .rot{display:inline-grid;vertical-align:bottom;white-space:nowrap}
.rot-w{grid-area:1/1;white-space:nowrap;transition:transform .42s var(--ease-out),opacity .3s}
.js .rot-w:not(.on){opacity:0;transform:translateY(.55em)}
.js .rot-w.off{opacity:0;transform:translateY(-.55em);transition-duration:.3s,.2s}
.swash svg{transform-origin:0 50%;transform:scaleX(var(--hl,1));transition:transform .42s var(--ease-out)}
.js .hero-title .word{transform:translateY(105%) rotate(4deg);opacity:0;animation:rise 1.1s var(--ease-out) forwards}
.hero-title .line:nth-child(1) .word:nth-child(1){animation-delay:.05s}
.hero-title .line:nth-child(1) .word:nth-child(2){animation-delay:.13s}
.hero-title .line:nth-child(1) .word:nth-child(3){animation-delay:.21s}
.hero-title .line:nth-child(2) .word:nth-child(1){animation-delay:.36s}
.hero-title .line:nth-child(2) .word:nth-child(2){animation-delay:.44s}
@keyframes rise{to{transform:none;opacity:1}}
.swash{position:relative;font-style:normal;color:var(--forest);display:inline-block;z-index:0;white-space:nowrap}
.swash svg{position:absolute;left:-2%;right:-2%;bottom:.02em;width:104%;height:.42em;z-index:-1;overflow:visible}
.swash path{fill:none;stroke:var(--lime);stroke-width:26;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1s .9s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:34em;color:#2E463F;margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.proof{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.proof li{font-size:14px;font-weight:650;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(24,63,54,.1)}
.js .reveal:nth-of-type(2){transition-delay:.55s}
.js .cta-row.reveal{transition-delay:.7s}
.js .proof.reveal{transition-delay:.85s}

.scene{position:relative;margin-top:calc(-14.5vw - 10px);overflow:hidden;z-index:1}
.scene-inner{position:relative;width:100%;aspect-ratio:3/2;}
.scene-img,#water{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
#water{opacity:0;transition:opacity .8s}
#water.live{opacity:1}
/* hero fx — every moving piece is its own composited layer (transform/opacity only) */
.scene-inner{container-type:inline-size}
.off *,.off::before,.off::after,.scene.paused .fx-sun *,.scene.paused .fx-boat,.scene.paused .fx-boat *,.scene.paused .fx-tail,.scene.paused .fx-splash,.scene.paused .fx-monarch,.scene.paused .fx-wings,.scene.paused .fx-bridge *{animation-play-state:paused!important}
.fx-sun{position:absolute;left:52.474%;top:25.586%;width:0;height:0;pointer-events:none}
.fx-rays,.fx-halo{position:absolute;display:block;border-radius:50%;will-change:transform}
.fx-rays{width:33.854cqw;height:33.854cqw;left:-16.927cqw;top:-16.927cqw;background:repeating-conic-gradient(from 0deg,rgba(255,247,210,.5) 0deg 5deg,rgba(255,247,210,0) 9deg 22deg,rgba(255,247,210,.32) 25deg 28deg,rgba(255,247,210,0) 31deg 36deg);-webkit-mask-image:radial-gradient(closest-side,#000 14%,rgba(0,0,0,.5) 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 14%,rgba(0,0,0,.5) 45%,transparent 100%);animation:rays 90s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.fx-halo{width:15.625cqw;height:15.625cqw;left:-7.813cqw;top:-7.813cqw;background:radial-gradient(closest-side,rgba(246,255,200,.85),rgba(228,255,122,.3) 38%,rgba(255,230,160,0) 100%);animation:halo 5s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.18);opacity:.7}}
.fx-bridge{position:absolute;pointer-events:none;overflow:hidden}
.bb-far{opacity:.8}
.baybridge{filter:saturate(.85)}
.bb-cable{fill:none;stroke:#6A7C84;stroke-width:2}
.bb-hangers line{stroke:#7C8D93;stroke-width:.6;opacity:.5}
.bb-tower rect{fill:#5F737C}
.bb-tower path{stroke:#5F737C;stroke-width:1.3}
.bb-deck{fill:#566A73}
.bb-truss{fill:#43565F;opacity:.9}
.bb-lights circle{fill:#FFF8E2}
.bb-lights g{opacity:.06;animation:baylight 3.2s ease-in-out infinite}
@keyframes baylight{0%,100%{opacity:.04}45%{opacity:1}58%{opacity:.6}}
.bb-cars rect{animation:drive linear infinite}
.bb-cars .head{fill:#FFF6D0}
.bb-cars .tail{fill:#FF5B47;animation-name:driveL}
@keyframes drive{from{transform:translateX(0)}to{transform:translateX(560px)}}
@keyframes driveL{from{transform:translateX(0)}to{transform:translateX(-560px)}}
.bb-beacon{fill:#FF4B3A;animation:bblink 1.8s steps(1) infinite}
.bb-beacon.b2{animation-delay:.9s}
@keyframes bblink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.bb-refl rect{fill:#FFF2C6;opacity:.3;transform-box:fill-box;transform-origin:center;animation:shimmer 2.4s ease-in-out infinite}
.tiny-sail{animation:tinysail 70s linear infinite}
@keyframes tinysail{from{transform:translate(672px,462px)}to{transform:translate(840px,462px)}}
.fx-boat{position:absolute;left:0;top:0;width:4.427cqw;pointer-events:none;will-change:transform;animation:sail 64s linear infinite}
.fx-boat svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes sail{0%{transform:translate(24.089cqw,32.422cqw);opacity:0}5%{opacity:1}92%{opacity:1}100%{transform:translate(62.500cqw,31.901cqw);opacity:0}}
.sb-bob{animation:bob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes bob{50%{transform:translateY(2px) rotate(-2.5deg)}}
.fx-whale{position:absolute;left:74.870%;top:62.402%;width:6.510%;height:7.129%;overflow:hidden;pointer-events:none}
.fx-tail{width:100%;height:100%;transform:translateY(105%);transform-origin:50% 100%;will-change:transform;animation:breach 16s cubic-bezier(.45,0,.3,1) infinite}
.fx-tail svg{display:block;width:100%;height:100%}
@keyframes breach{0%,58%{transform:translateY(105%)}68%{transform:translateY(0) rotate(-4deg)}78%{transform:translateY(-3%) rotate(3deg)}90%,100%{transform:translateY(105%)}}
.fx-splash{position:absolute;left:75.521%;top:65.234%;width:5.859%;pointer-events:none;opacity:0;will-change:transform,opacity;animation:splash 16s ease-out infinite}
.fx-splash svg{display:block;width:100%;height:auto;fill:#F3FBFF}
@keyframes splash{0%,84%{opacity:0;transform:translateY(0)}86%{opacity:.95;transform:translateY(-60%)}96%,100%{opacity:0;transform:translateY(20%)}}
.fx-monarch{position:absolute;left:0;top:0;width:4.036cqw;pointer-events:none;will-change:transform;animation:monarch 22s ease-in-out infinite}
.fx-wings{display:block;width:100%;height:auto;overflow:visible;animation:flutter .18s ease-in-out infinite alternate}
@keyframes monarch{0.0%{transform:translate(-7.227cqw,32.357cqw) rotate(-10deg)} 14.3%{transform:translate(9.701cqw,25.846cqw) rotate(-15deg)} 28.6%{transform:translate(17.513cqw,34.961cqw) rotate(10deg)} 42.9%{transform:translate(31.836cqw,29.102cqw) rotate(-13deg)} 57.1%{transform:translate(47.461cqw,21.940cqw) rotate(-8deg)} 71.4%{transform:translate(63.086cqw,25.846cqw) rotate(7deg)} 85.7%{transform:translate(82.617cqw,29.102cqw) rotate(-5deg)} 100.0%{transform:translate(103.451cqw,18.034cqw) rotate(-15deg)}}
@keyframes flutter{to{transform:scaleX(.25)}}
.fog{position:absolute;pointer-events:none;border-radius:50%;will-change:transform;background:radial-gradient(closest-side,rgba(255,250,240,.75),rgba(255,250,240,0));}
.fog-a{width:55%;height:12%;left:-20%;top:38%;animation:drift 38s linear infinite}
.fog-b{width:40%;height:9%;left:-30%;top:31%;opacity:.7;animation:drift 52s -20s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(330%)}}
.gulls{position:absolute;inset:17% 0 auto 0;width:100%;height:26%;overflow:visible;pointer-events:none}
.gull{fill:none;stroke:#3a3a36;stroke-width:.35;stroke-linecap:round;opacity:.7;vector-effect:non-scaling-stroke}
.gulls .gull{stroke-width:2}
.g1{animation:fly1 26s linear infinite,flap .6s ease-in-out infinite alternate}
.g2{animation:fly2 34s -9s linear infinite,flap .5s ease-in-out infinite alternate}
.g3{animation:fly3 30s -17s linear infinite,flap .55s ease-in-out infinite alternate}
@keyframes fly1{from{transform:translate(-6px,14px)}to{transform:translate(156px,8px)}}
@keyframes fly2{from{transform:translate(-8px,10px)}to{transform:translate(158px,15px)}}
@keyframes fly3{from{transform:translate(-4px,18px)}to{transform:translate(154px,11px)}}
@keyframes flap{to{scale:1 .35}}
.gull{transform-box:fill-box}
.hotspot{position:absolute;left:var(--x);top:var(--y);width:11%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:0;background:transparent;cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent}
.hotspot::before{content:"";position:absolute;right:12%;top:12%;width:12px;height:12px;border-radius:50%;border:2px solid var(--lime);animation:ring 2.4s ease-out infinite;will-change:transform,opacity}
@keyframes ring{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.8);opacity:0}}
.hotspot.said::before{display:none}
.hotspot::after{content:"";position:absolute;right:12%;top:12%;width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid var(--forest);transition:transform .3s var(--spring)}
.hotspot:hover::after,.hotspot:focus-visible::after{transform:scale(1.4)}
.hotspot.said::after{opacity:.35;animation:none}
.bubble{position:absolute;z-index:6;max-width:min(320px,70vw);padding:12px 16px;background:var(--paper);color:var(--ink);border-radius:18px;font-size:15px;font-weight:600;line-height:1.35;box-shadow:0 14px 34px -12px rgba(10,40,40,.45);opacity:0;transform:translate(-50%,calc(-100% - 18px)) scale(.8);transform-origin:50% 100%;pointer-events:none;transition:opacity .25s,transform .35s var(--spring)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.bubble.show{opacity:1;transform:translate(-50%,calc(-100% - 18px)) scale(1)}
.bubble.flip-l{transform:translate(-88%,calc(-100% - 18px)) scale(1)}
.bubble.flip-l::after{left:88%}
.bubble.flip-r{transform:translate(-12%,calc(-100% - 18px)) scale(1)}
.bubble.flip-r::after{left:12%}
.bubble:not(.show){transform:translate(-50%,calc(-100% - 18px)) scale(.8)}
.scene-hint{position:absolute;left:50%;bottom:78px;translate:-50% 0;z-index:5;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(6,50,66,.55);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:opacity .6s}
.scene-hint.gone{opacity:0}
.hint-touch{display:none}
@media (hover:none){.hint-touch{display:inline}.hint-mouse{display:none}}

/* ---------- ticker ---------- */
.tickers{position:relative;z-index:2;margin:-72px 0 0;padding:26px 0 64px}
.ticker{position:relative;z-index:2;background:var(--forest);color:var(--lime);overflow:hidden;transform:rotate(-1.6deg) scale(1.03);margin:0;padding:16px 0;box-shadow:0 12px 30px -16px rgba(0,0,0,.5)}
.ticker-track{display:flex;width:max-content;gap:28px;align-items:center;font-size:clamp(17px,2vw,24px);font-weight:760;letter-spacing:-.01em;white-space:nowrap;animation:tick 38s linear infinite}
.ticker-track b{color:var(--paper);font-weight:400;display:inline-block}
.ticker.two{position:absolute;left:0;right:0;top:66px;z-index:1;background:var(--lime);color:#183F36;transform:rotate(2.4deg) scale(1.06);padding:11px 0;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.ticker.two .ticker-track{font-size:clamp(14px,1.5vw,18px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;animation-direction:reverse;animation-duration:46s}
.ticker.two .ticker-track b{color:#183F36}
.js .ticker-track{animation:none;will-change:transform}
.ticker-track b{transition:transform .4s}
.tickers.fast .ticker-track b{transform:rotate(90deg) scale(1.25)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{position:relative;padding:clamp(72px,9vw,128px) 0}
.section-head{margin-bottom:clamp(40px,6vw,72px)}
.section-lead{font-size:19px;color:var(--muted);max-width:36em;margin-top:18px}
.on-dark{color:var(--paper)}
.on-dark .section-lead,.on-dark p{color:rgba(245,244,238,.82)}

/* ---------- crew (services) ---------- */
.crew-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,90px)}
.stage{position:sticky;top:calc(50vh - min(220px,19vw) - 20px);align-self:start;display:grid;justify-items:center;gap:18px}
.stage-disc{--tint:#E4EFC0;position:relative;width:min(440px,38vw);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#fff9,transparent 60%),var(--tint);transition:background-color .7s;box-shadow:inset 0 -30px 60px -30px rgba(24,63,54,.25),0 30px 60px -30px rgba(24,63,54,.35)}
.stage-sun{position:absolute;left:62%;top:16%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff8d6,#ffe8a3 50%,transparent 70%);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.stage-hills{position:absolute;left:0;right:0;bottom:22%;width:100%;height:36%}
.stage-hills .far{fill:#7FA65A;opacity:.55}
.stage-hills .near{fill:#4E8A55}
.stage-water{position:absolute;left:0;right:0;bottom:0;height:24%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 30px,transparent 30px 70px),linear-gradient(#2C8BA8,#0A5977);background-size:140px 100%,100% 100%;animation:waves 6s linear infinite}
@keyframes waves{to{background-position:140px 0,0 0}}
.stage-animal{position:absolute;left:50%;bottom:9%;height:64%;width:auto;translate:-50% 0;animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 12px 10px rgba(10,40,40,.25))}
.stage-animal.swap{animation:pop .7s var(--spring),bob 3.2s .7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1.5deg)}}
@keyframes pop{0%{transform:translateY(40px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.stage-name{font-weight:750;font-size:15px;padding:8px 16px;border-radius:999px;background:var(--forest);color:var(--lime);letter-spacing:.01em}
.crew-list{list-style:none;margin:0;padding:0}
.crew-item{position:relative;padding:clamp(40px,8vh,90px) 0;border-top:1px solid var(--line);transition:opacity .5s}
.crew-item:last-child{border-bottom:1px solid var(--line)}
.crew-item h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;line-height:1.05;margin:10px 0 14px;max-width:17ch}
.crew-item p{font-size:18px;color:var(--muted);max-width:32em}
.num{font-size:14px;font-weight:800;letter-spacing:.1em;color:var(--muted);transition:color .4s}
.crew-pic{display:none}
@media (min-width:861px){
  .js .crew-item{opacity:.38}
  .js .crew-item.active{opacity:1}
  .crew-item.active .num{color:#7FA30C}
}

/* ---------- how (trail) ---------- */
.trail{position:relative}
.trail-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trail-ghost{fill:none;stroke:rgba(24,63,54,.18);stroke-width:3;stroke-dasharray:2 12;stroke-linecap:round}
.trail-ink{fill:none;stroke:var(--forest);stroke-width:4;stroke-linecap:round}
.zip{position:absolute;left:0;top:0;width:clamp(64px,7vw,96px);height:auto;z-index:3;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(10,40,40,.2));will-change:transform}
.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;align-items:start;grid-template-columns:1fr 1fr;column-gap:12%;row-gap:0}
.steps li{position:relative;padding:28px 28px 28px 30px;border-radius:var(--radius);background:rgba(255,255,255,.72);border:1px solid rgba(24,63,54,.08);box-shadow:0 18px 40px -28px rgba(24,63,54,.4);margin-bottom:60px;transition:transform .5s var(--spring),background .4s}
.steps li:nth-child(even){margin-top:150px}
.steps li.lit{transform:translateY(-6px);background:#fff}
.steps b{display:block;font-size:24px;letter-spacing:-.025em;margin:6px 0 8px}
.steps p{color:var(--muted)}
.pin{position:absolute;left:-18px;top:-18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:850;font-size:18px;background:var(--paper);color:var(--forest);border:3px solid var(--forest);transition:background .3s,transform .4s var(--spring)}
.steps li.lit .pin{background:var(--lime);transform:scale(1.12)}

/* ---------- pricing ---------- */
.mode{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:rgba(24,63,54,.1);margin-bottom:40px}
.mode-btn{position:relative;z-index:1;min-height:46px;padding:0 24px;border:0;background:none;font:700 15px var(--sans);color:var(--forest);cursor:pointer;border-radius:999px}
.mode-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--forest);transition:transform .45s var(--spring)}
.mode[data-mode=remote] .mode-knob{transform:translateX(100%)}
.mode-btn[aria-pressed=true]{color:var(--lime)}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;perspective:1200px}
.price-card{position:relative;padding:32px 30px;border-radius:28px;background:rgba(255,255,255,.86);border:1px solid rgba(24,63,54,.08);box-shadow:0 26px 50px -34px rgba(24,63,54,.5);transform-style:preserve-3d;transition:transform .35s var(--ease-out),box-shadow .35s}
.price-card:hover{box-shadow:0 34px 60px -30px rgba(24,63,54,.55)}
.price-card.featured{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.price-card.featured .price-note,.price-card.featured .fine,.price-card.featured dt{color:rgba(245,244,238,.75)}
.price-card h3{font-size:24px}
.price-note{color:var(--muted);font-size:15px;margin-top:4px}
.tag{position:absolute;top:-14px;left:28px;background:var(--lime);color:var(--forest);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.big-price{display:flex;align-items:flex-start;gap:4px;margin:20px 0 6px;line-height:1}
.big-price .cur{font-size:26px;font-weight:700;margin-top:8px}
.big-price .amt{font-size:clamp(56px,6vw,76px);font-weight:820;letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:inline-block}
.big-price .amt.flip{animation:flip .5s var(--spring)}
@keyframes flip{0%{transform:translateY(-30%);opacity:0;filter:blur(4px)}100%{transform:none;opacity:1}}
.big-price .per{align-self:flex-end;margin:0 0 10px 8px;font-size:14px;font-weight:700;color:var(--muted)}
.featured .big-price .per{color:var(--lime)}
.prices{display:flex;gap:18px;margin:6px 0 20px;padding:12px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.featured .prices{border-color:rgba(245,244,238,.2)}
.prices div{display:flex;gap:8px;align-items:baseline}
.prices dt{font-size:14px;color:var(--muted)}
.prices dd{margin:0;font-weight:800;font-size:17px}
.prices small{font-weight:600;font-size:13px}
.ticks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px;font-size:15.5px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"✦";position:absolute;left:0;top:0;color:#86AE10}
.featured .ticks li::before{color:var(--lime)}
.fine{font-size:13.5px;color:var(--muted);line-height:1.5}
.fine.center{text-align:center;margin-top:22px;color:rgba(22,48,42,.72)}
.peek{position:absolute;right:22px;top:-74px;width:120px;clip-path:inset(0 0 calc(100% - 82px) 0);transition:transform .5s var(--spring);pointer-events:none}
.featured:hover .peek{transform:translateY(-10px) rotate(-4deg)}
.price-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;margin-top:26px;padding:20px 26px;border-radius:20px;background:rgba(255,255,255,.55);border:1px solid rgba(24,63,54,.08);font-size:15.5px}

/* ---------- BaySpark AI + hardware ---------- */
.extras-head{margin:clamp(70px,9vw,110px) 0 30px}
.extras-title{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.035em;line-height:1.05;max-width:20ch}
.extras-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:22px;align-items:stretch}
.x-card{position:relative;display:flex;flex-direction:column;padding:32px 28px 28px;border-radius:28px;background:rgba(255,255,255,.86);border:1px solid rgba(24,63,54,.08);box-shadow:0 26px 50px -34px rgba(24,63,54,.5)}
.x-card h3{font-size:23px}
.x-card .ticks{margin-top:4px}
.x-card .fine{margin-top:auto}
.credit-card{background:linear-gradient(160deg,#173D35,#0F2C27);color:var(--paper);border-color:#173D35}
.credit-card .price-note,.credit-card .fine,.credit-card .big-price .per{color:rgba(245,244,238,.75)}
.credit-card .ticks li::before{color:var(--lime)}
.tag.live{display:inline-flex;align-items:center;gap:8px}
.tag.live .dot{background:var(--forest);box-shadow:none;animation:none;width:7px;height:7px}
.tag.soon{background:#F2B45A}
.big-price.small{margin:14px 0 14px}
.big-price.small .amt{font-size:52px}
.meter{margin:20px 0 4px;padding:16px 16px 14px;border-radius:18px;background:rgba(0,0,0,.22);border:1px solid rgba(215,252,81,.18)}
.meter-top,.meter-foot{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:650}
.meter-val{font-size:22px;font-weight:820;font-variant-numeric:tabular-nums;color:var(--lime)}
.meter-bar{height:12px;margin:10px 0;border-radius:99px;background:rgba(245,244,238,.12);overflow:hidden}
.meter-fill{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--m,1));border-radius:99px;background:linear-gradient(90deg,#9BC20E,var(--lime));transition:transform .5s var(--ease-out)}
.meter.low .meter-fill{background:linear-gradient(90deg,#F2B45A,#FFD27A)}
.meter-msg{color:rgba(245,244,238,.7)}
.meter-plus{padding:3px 10px;border-radius:99px;background:var(--lime);color:var(--forest);font-weight:800;opacity:0;transform:scale(.6);transition:opacity .2s,transform .35s var(--spring)}
.meter.topup .meter-plus{opacity:1;transform:none}
.infinity{margin:18px 0 18px;display:grid;place-items:center;height:96px;border-radius:18px;background:#FBF3E2}
.infinity svg{width:150px;height:auto}
.inf-ghost{fill:none;stroke:rgba(24,63,54,.15);stroke-width:7;stroke-linecap:round}
.inf-run{fill:none;stroke:#E39B2F;stroke-width:7;stroke-linecap:round;stroke-dasharray:60 240;animation:inf 3.2s linear infinite}
@keyframes inf{to{stroke-dashoffset:-300}}
.soon-card .button{margin-top:auto;align-self:flex-start}
.mini-art{position:relative;margin:18px 0 0;padding:26px 22px 18px;border-radius:22px;background:radial-gradient(120% 90% at 50% 100%,#CFE6EC,#EAF3F1 55%,#F6F8F3);display:grid;place-items:center;overflow:hidden}
.mini-art::after{content:"";position:absolute;left:18%;right:18%;bottom:14px;height:16px;border-radius:50%;background:rgba(24,63,54,.16);filter:blur(6px)}
.mini-art img{position:relative;z-index:1;width:min(78%,260px);height:auto;animation:float 5s ease-in-out infinite}
.mini-specs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mini-specs li{padding:6px 11px;border-radius:999px;background:#EEF0E8;color:var(--forest);font-size:13px;font-weight:750}
@keyframes float{50%{transform:translateY(-5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.prices.stack{flex-direction:column;gap:10px}
.prices.stack div{justify-content:space-between}
.prices.stack dt small{display:block;font-size:12px;opacity:.8}

/* ---------- privacy (dusk) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.privacy{padding-top:clamp(170px,17vw,240px)}
.privacy-copy h2{margin-bottom:24px}
.privacy-copy p{font-size:18.5px;margin-bottom:16px;max-width:32em}
.privacy-copy .strong{color:var(--lime);font-weight:700}
.flow{position:relative;padding:26px 26px 30px;border-radius:30px;background:rgba(6,24,26,.42);border:1px solid rgba(215,252,81,.18);box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.flow-switch{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);gap:4px}
.flow-switch button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--paper);font:700 14.5px var(--sans);cursor:pointer;transition:background .3s,color .3s}
.flow-switch button[aria-pressed=true]{background:var(--lime);color:var(--forest)}
.flow-svg{width:100%;height:auto;margin:10px 0 4px;overflow:visible}
.flow-path{fill:none;stroke:rgba(245,244,238,.3);stroke-width:2;stroke-dasharray:4 8;transition:opacity .5s}
.flow-ring{fill:none;stroke:rgba(215,252,81,.35);stroke-width:2;stroke-dasharray:4 8;opacity:0;transition:opacity .5s}
.cloud path{fill:rgba(245,244,238,.92)}
.cloud,.laptop{transition:opacity .5s}
.cloud text,.laptop text{fill:rgba(245,244,238,.8);font:700 13px var(--sans);text-anchor:middle}
.laptop rect{fill:#0B2B28;stroke:var(--paper);stroke-width:2.5}
.laptop path{fill:var(--paper)}
.dots circle{fill:var(--lime)}
.flow[data-flow=local] .cloud{opacity:.22}
.flow[data-flow=local] .flow-path{opacity:.15}
.flow[data-flow=local] .flow-ring{opacity:1}
.flow-cap{font-size:15px;font-weight:600;min-height:2.6em}
.goldie{position:absolute;right:-18px;bottom:-34px;width:clamp(96px,10vw,130px);transform-origin:50% 100%;animation:wag 4s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
@keyframes wag{0%,100%{transform:rotate(0)}48%{transform:rotate(0)}52%{transform:rotate(-5deg) translateY(-6px)}56%{transform:rotate(3deg)}60%{transform:rotate(0)}}

/* ---------- FAQ (night) ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,90px);align-items:start}
.faq-side{position:sticky;top:120px}
.owl-perch{position:relative;margin-top:34px;width:min(220px,60%)}
.owl{width:100%;transform-origin:50% 100%;animation:tilt 7s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(215,252,81,.15))}
.owl.hop{animation:hop .6s var(--spring)}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}}
@keyframes hop{40%{transform:translateY(-18px) rotate(-6deg)}}
.owl-perch::after{content:"";display:block;height:12px;margin:-6px -20% 0;border-radius:6px;background:linear-gradient(90deg,#3B2A1C,#5A4029,#3B2A1C)}
.owl-say{margin-top:18px;min-height:1.6em;font-weight:700;color:var(--lime)!important}
.faq-list details{border-bottom:1px solid rgba(245,244,238,.16)}
.faq-list details:first-child{border-top:1px solid rgba(245,244,238,.16)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font-size:clamp(18px,1.7vw,22px);font-weight:700;letter-spacing:-.015em;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:500;background:rgba(245,244,238,.1);transition:transform .4s var(--spring),background .3s,color .3s}
.faq-list details[open] summary::after{transform:rotate(135deg);background:var(--lime);color:var(--forest)}
.faq-list summary:hover::after{background:rgba(215,252,81,.25)}
.ans{padding:0 50px 24px 4px;font-size:17px}
.faq-list details[open] .ans{animation:open .45s var(--ease-out)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}}

/* ---------- book (night over the Golden Gate) ---------- */
.book{min-height:min(980px,100vh);padding-bottom:clamp(220px,30vw,420px);overflow:hidden;text-align:center}
.night{position:absolute;inset:0;pointer-events:none}
.moon{position:absolute;right:12%;top:12%;width:clamp(40px,5vw,64px);filter:drop-shadow(0 0 18px rgba(215,252,81,.8)) drop-shadow(0 0 50px rgba(215,252,81,.5));animation:pulse 6s ease-in-out infinite}
.moon path{fill:var(--lime)}
.bridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(240px,34vw,460px)}
.far-hills{fill:#0C2630}
.cable{fill:none;stroke:#A9452A;stroke-width:4}
.hangers line{stroke:#A9452A;stroke-width:1.2;opacity:.75}
.deck{fill:#8E3A24}
.tower rect{fill:#B9502F}
.beacon{fill:#ff5a3c;animation:blink 2.4s infinite}
.beacon.b2{animation-delay:1.2s}
@keyframes blink{0%,60%{opacity:.25}70%,90%{opacity:1}}
.lights circle{fill:#FFD98A;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.35}}
.night-water{fill:#071C26}
.reflections rect{fill:#FFD98A;opacity:.28;animation:shimmer 2.6s ease-in-out infinite}
@keyframes shimmer{50%{opacity:.08;transform:scaleX(.6)}}
.reflections rect{transform-box:fill-box;transform-origin:center}
.fog-night{left:-30%;bottom:9%;width:70%;height:120px;background:radial-gradient(closest-side,rgba(220,232,240,.28),rgba(220,232,240,0));mix-blend-mode:normal;animation:drift 46s linear infinite}
.fog-night.two{bottom:14%;width:55%;animation-duration:64s;animation-delay:-30s}
.book-card{position:relative;z-index:2;display:grid;justify-items:center;gap:18px}
.book-card h2{max-width:14ch;margin-inline:auto}
.book-card>p:not(.fine){font-size:19px;max-width:30em}
.book .fine a{color:var(--lime)}
.buddy{width:84px;filter:drop-shadow(0 0 24px rgba(215,252,81,.45));animation:bob 3.6s ease-in-out infinite}
.buddy .hex{fill:var(--lime)}
.buddy .eyes circle{fill:#0E2A25}
.buddy .eyes .glint{fill:#fff}
.buddy .eyes{transition:transform .15s}


/* ---------- who it's for: people cards ---------- */
.life-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.life{--bg:#fff;--fg:var(--ink);--sub:var(--muted);--acc:var(--forest);--stage:#EEF3E6;--sun:var(--lime);--chip:#EEF0E8;--chip-fg:var(--forest);--foot:var(--forest);--foot-fg:var(--paper);--price:var(--lime);
  position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;border-radius:32px;background:var(--bg);color:var(--fg);box-shadow:0 30px 60px -44px rgba(24,63,54,.55)}
.life-parents{--bg:var(--forest);--fg:var(--paper);--sub:rgba(245,244,238,.7);--stage:#22503F;--sun:rgba(215,252,81,.9);--chip:rgba(245,244,238,.1);--chip-fg:var(--paper);--foot:var(--lime);--foot-fg:var(--forest);--price:var(--forest)}
.life-grandma{--bg:#FCE9C8;--stage:#F8DBAB;--sun:#fff;--chip:rgba(255,255,255,.7)}
.life-shop{--bg:#DDEFF2;--stage:#C7E4EA;--sun:#fff;--chip:rgba(255,255,255,.75);--foot:var(--bay)}
.life-team{grid-column:1/-1;--bg:var(--bay);--fg:var(--paper);--sub:rgba(245,244,238,.72);--stage:#0C6688;--sun:rgba(215,252,81,.85);--chip:rgba(245,244,238,.12);--chip-fg:var(--paper);--foot:var(--lime);--foot-fg:var(--forest);--price:var(--forest);flex-direction:row}
.life-stage{position:relative;height:236px;margin:12px 12px 0;border-radius:24px;background:var(--stage);overflow:hidden;display:flex;justify-content:center;align-items:flex-end}
.life-stage::before{content:"";position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-92px 0 0 -100px;border-radius:50%;background:var(--sun);opacity:.85}
.life-stage img{position:relative;height:92%;width:auto;max-width:92%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 14px rgba(9,30,27,.18))}
.life-team .life-stage{flex:0 0 46%;height:auto;min-height:280px;margin:12px 0 12px 12px}
.life-team .life-stage::before{width:240px;height:240px;margin:-110px 0 0 -120px}
.life-body{display:flex;flex-direction:column;gap:14px;flex:1;padding:22px clamp(22px,2.6vw,32px) clamp(22px,2.6vw,30px)}
.life-team .life-body{justify-content:center;padding:clamp(26px,3vw,40px)}
.life-who{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.life h3{margin:0;font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:-.035em;font-weight:800;max-width:18ch;text-wrap:balance}
.life-chips{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.life-chips li{display:flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;border-radius:999px;background:var(--chip);color:var(--chip-fg);font-size:14.5px;font-weight:700;line-height:1.2}
.life-chips li::before{content:"";flex:none;width:13px;height:13px;background:currentColor;opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21 12 26 18 40 20 28 22 21 28 20 40 19 28 14 22 0 20 14 18 19 12 20 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21 12 26 18 40 20 28 22 21 28 20 40 19 28 14 22 0 20 14 18 19 12 20 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
.life-foot{margin-top:auto;display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"plan price go" "note price go";align-items:center;column-gap:14px;padding:14px 14px 14px 20px;border-radius:20px;background:var(--foot);color:var(--foot-fg);text-decoration:none;transition:transform .25s var(--spring)}
.lf-plan{grid-area:plan;font-size:16.5px;font-weight:780;line-height:1.2}
.lf-note{grid-area:note;font-size:13px;opacity:.75;line-height:1.3}
.lf-price{grid-area:price;font-size:30px;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--price)}
.lf-go{grid-area:go;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--foot-fg);transition:transform .3s var(--spring)}
.lf-go svg{width:20px;height:20px;fill:none;stroke:var(--foot);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.life-foot:hover .lf-go{transform:translateX(4px)}}
.js .life{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i) % 2 * .08s)}
.js .life.in{opacity:1;transform:none}
.js .life-stage img{transform:translateY(24px);opacity:0;transition:transform .9s var(--spring),opacity .6s;transition-delay:.2s}
.js .life.in .life-stage img{transform:none;opacity:1}
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);margin-top:clamp(40px,6vw,70px);padding:clamp(26px,4vw,44px);border-radius:32px;background:var(--forest);color:var(--paper)}
.calc .eyebrow{color:var(--lime)}
.calc h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.08;margin:0 0 24px;max-width:16ch}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 10px;font-size:15px;color:rgba(245,244,238,.82)}
.calc-row output{font-weight:800;font-size:18px;color:var(--lime);white-space:nowrap}
.calc input[type=range]{width:100%;margin:4px 0 24px;accent-color:var(--lime);height:28px}
.calc-chips{display:flex;flex-wrap:wrap;gap:8px}
.calc-chips button{min-height:44px;min-width:64px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(245,244,238,.3);background:none;color:var(--paper);font:700 15px var(--sans);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.calc-chips button[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.calc-out{display:flex;flex-direction:column;justify-content:center;padding:24px;border-radius:24px;background:rgba(245,244,238,.07);border:1px solid rgba(215,252,81,.2)}
.calc-big{margin:0 0 12px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-big span{font-size:clamp(60px,8vw,92px);font-weight:850;letter-spacing:-.05em;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.calc-big small{font-size:16px;font-weight:700;color:var(--paper)}
.calc-line{margin:0 0 10px;font-size:16.5px;line-height:1.45;color:rgba(245,244,238,.88)}
.calc-line b{color:var(--paper)}
.calc .fine{margin:8px 0 0;color:rgba(245,244,238,.6)}
/* gift */
.gift{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(50px,7vw,90px);padding:clamp(26px,4vw,44px);border-radius:32px;background:linear-gradient(135deg,#FFF6E4,#FCE7C4);border:1px solid rgba(242,180,90,.35)}
.gift-card{position:relative;aspect-ratio:1.6;max-width:420px;width:100%;margin-inline:auto;padding:26px 28px;border-radius:22px;background:var(--forest);color:var(--paper);box-shadow:0 30px 50px -26px rgba(24,63,54,.7);transform:rotate(-4deg);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.js .gift.reveal .gift-card{transition:transform 1s var(--spring)}
.js .gift.reveal:not(.in) .gift-card{transform:rotate(-12deg) translateY(30px)}
.gift-ribbon{position:absolute;top:0;bottom:0;right:22%;width:22px;background:var(--lime);opacity:.9}
.gift-ribbon::after{content:"";position:absolute;left:-44px;right:-44px;top:30%;height:22px;background:var(--lime)}
.gift-spark{position:absolute;right:calc(22% - 18px);top:calc(30% - 18px);width:58px;height:58px;fill:#fff;animation:fspark 3s ease-in-out infinite}
.gift-brand{margin:0;font-weight:850;font-size:20px;letter-spacing:-.02em}
.gift-what{margin:0;font-size:22px;font-weight:800;line-height:1.15;max-width:12ch}
.gift-what small{font-size:14px;font-weight:600;color:rgba(245,244,238,.75)}
.gift-from{margin:0;font-size:13px;color:var(--lime);font-weight:700}
.gift-copy h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.08;margin:0 0 14px;max-width:18ch}
.gift-copy>p{margin:0 0 18px;font-size:16.5px;line-height:1.55}
.gift-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
/* smart home */
.home-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,60px);align-items:center;margin-bottom:clamp(30px,5vw,56px)}
.home-top .section-head{margin-bottom:0}
.house{position:relative;max-width:420px;width:100%;justify-self:center}
.house svg{display:block;width:100%;height:auto;overflow:visible}
.h-ground{stroke:rgba(24,63,54,.25);stroke-width:3;stroke-linecap:round}
.h-roof{fill:none;stroke:var(--forest);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.h-body{fill:#FFFDF6;stroke:var(--forest);stroke-width:5}
.h-win{fill:#2C4A55;stroke:var(--forest);stroke-width:3;animation:hwin 10s ease-in-out infinite}
.h-win.w2{animation-delay:.25s}.h-win.w3{animation-delay:.5s}.h-win.w4{animation-delay:.75s}
@keyframes hwin{0%,6%{fill:#2C4A55}12%,62%{fill:#FFD66B}70%,100%{fill:#2C4A55}}
.h-door{fill:var(--bay);stroke:var(--forest);stroke-width:3}
.h-lock{fill:#FF6B4A;animation:hlock 10s steps(1) infinite}
@keyframes hlock{0%,64%{fill:#FF6B4A}65%,100%{fill:var(--lime)}}
.h-thermo rect{fill:var(--forest)}
.h-temp{fill:var(--lime);font:800 17px var(--sans);text-anchor:middle}
.h-say{position:absolute;right:-4%;top:6%;margin:0;padding:10px 16px;border-radius:18px 18px 4px 18px;background:var(--forest);color:var(--lime);font-weight:800;font-size:15px;box-shadow:0 14px 26px -16px rgba(24,63,54,.8);opacity:0;animation:hsay 10s ease-in-out infinite}
@keyframes hsay{0%,58%{opacity:0;transform:translateY(8px) scale(.9)}62%,76%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-6px)}}
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.featured-home{background:var(--forest);color:var(--paper)}
.featured-home .price-note,.featured-home .big-price .per{color:rgba(245,244,238,.75)}
.featured-home .ticks li::before{color:var(--lime)}
.home .price-strip{margin-top:22px}
@media (max-width:860px){
  .life-list{grid-template-columns:1fr;gap:16px}
  .life-team{grid-column:auto;flex-direction:column}
  .life-team .life-stage{flex:none;height:236px;min-height:0;margin:12px 12px 0}
  .life-team .life-body{padding:22px}
  .calc,.gift,.home-top{grid-template-columns:1fr}
  .home-grid{grid-template-columns:1fr}
  .house{max-width:340px}
  .gift-card{max-width:340px}
}
@media (max-width:620px){
  .life{border-radius:28px}
  .life-stage{height:210px}
  .life-team .life-stage{height:210px}
  .life-body{padding:20px 20px 22px}
  .life h3{font-size:27px}
  .calc-row{flex-direction:column;gap:4px}
  .h-say{right:0;top:0}
}

/* ---------- footer: the bay at night ---------- */
.site-footer{position:relative;background:#071C26;color:rgba(245,244,238,.78);padding:28px 0 0;overflow:hidden;font-size:15.5px}
.foot-wave{position:absolute;left:0;top:-1px;width:100%;height:28px;fill:#06151C;opacity:.6}
.foot-grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px;padding-top:44px;padding-bottom:36px}
.foot-brand img{display:block;width:168px;height:auto}
.foot-brand p{margin:16px 0 0;max-width:36ch;line-height:1.55}
.foot-brand .bay-clock{max-width:none}
.bay-clock{display:inline-flex!important;align-items:center;gap:10px;margin-top:20px!important;padding:8px 14px 8px 10px;border:1px solid rgba(215,252,81,.22);border-radius:999px;background:rgba(215,252,81,.06);color:var(--paper);font-weight:600;font-size:14px}
.bc-icon{position:relative;width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(242,180,90,.18)}
.bay-clock.is-night .bc-icon{background:transparent;box-shadow:inset -5px -3px 0 0 #F3EBD2}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h3{margin:4px 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.foot-col a,.foot-col span{color:rgba(245,244,238,.78);text-decoration:none;width:fit-content}
.foot-col a{background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease-out),color .2s;padding:2px 0}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--paper);background-size:100% 1.5px}
.foot-col span{color:rgba(245,244,238,.55)}
.foot-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:22px;padding-bottom:22px;border-top:1px solid rgba(245,244,238,.1);font-size:14px;color:rgba(245,244,238,.55)}
.foot-bottom p{margin:0}
.foot-spark{display:inline-block;color:var(--lime);animation:fspark 3s ease-in-out infinite}
@keyframes fspark{50%{transform:scale(1.35) rotate(45deg);opacity:.6}}
.to-top{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 16px;border-radius:999px;border:1px solid rgba(245,244,238,.18);color:var(--paper);text-decoration:none;font-weight:700;transition:border-color .2s,background .2s}
.to-top i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--forest);font-style:normal;font-weight:800;transition:transform .3s var(--ease-out)}
@media (hover:hover){.to-top:hover{border-color:var(--lime);background:rgba(215,252,81,.08)}.to-top:hover i{transform:translateY(-3px)}}
.foot-word{position:relative;margin:0;padding:0 0 .2em;text-align:center;font-weight:900;font-size:clamp(64px,18vw,280px);line-height:1.12;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(215,252,81,.4);background:linear-gradient(180deg,rgba(215,252,81,.3),rgba(215,252,81,.02) 85%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none;white-space:nowrap}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px 24px}.foot-brand{grid-column:1/-1}}
@media (max-width:420px){.foot-grid{padding-top:36px}.foot-bottom{flex-direction:column-reverse;align-items:flex-start}.to-top{align-self:stretch;justify-content:space-between}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  nav{display:none}
  .header-row{justify-content:space-between}
  .price-grid,.extras-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:44px}
  .extras-head{max-width:560px;margin-inline:auto;margin-top:80px}
  .split,.faq-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .owl-perch{width:150px}
}
@media (max-width:860px){
  .crew-grid{grid-template-columns:1fr}
  .stage{display:none}
  .crew-item{padding:30px 120px 30px 0}
  .crew-pic{display:block;position:absolute;right:0;top:26px;width:104px;height:auto;filter:drop-shadow(0 8px 8px rgba(10,40,40,.18))}
  .js .crew-item .crew-pic{opacity:0;transform:translateY(16px) scale(.8);transition:opacity .6s,transform .7s var(--spring)}
  .js .crew-item.in .crew-pic{opacity:1;transform:none}
  .steps{grid-template-columns:1fr;padding-left:34px}
  .steps li:nth-child(even){margin-top:0}
  .steps li{margin-bottom:34px}
}
@media (max-width:700px){
  .scene{margin-top:-30px}
  .scene-inner{width:170vw;animation:pan 20s ease-in-out infinite alternate;will-change:transform}
  .scene-hint{bottom:62px;font-size:11.5px}
  .tickers{margin-top:-52px}
  .ticker{transform:rotate(-3deg) scale(1.08)}
  .ticker.two{transform:rotate(4.5deg) scale(1.12);top:58px}
  .crew-item h3{font-size:26px}
  .flow{padding:20px 18px 26px}
  .goldie{right:-8px}
  .price-strip{padding:18px 20px}
}
@keyframes pan{0%,8%{transform:translateX(0)}92%,100%{transform:translateX(calc(-170vw + 100vw))}}
@media (max-width:520px){
  .wrap{width:min(1180px,100% - 36px)}
  .brand img{height:38px}
  .button.small{padding:0 16px;font-size:14px}
  .hero-title{font-size:clamp(50px,16vw,74px)}
  .cta-row .button{flex:1 1 auto}
  .crew-item{padding-right:96px}
  .crew-pic{width:84px}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{transition-duration:.3s;transform:none}
  .js .rot-w,.js .rot-w:not(.on),.js .rot-w.off{transform:none;transition:opacity .5s ease}
  .js .life,.js .life-stage img{transform:none}
  .h-win,.h-lock,.h-say{animation:none}.h-win{fill:#FFD66B}.h-say{opacity:1}
  .scene-inner{animation:none!important}
  .js .hero-title .word{opacity:1;transform:none;animation:none}
  .fx-rays,.fx-tail,.fx-splash,.fx-monarch{animation:none}
  .fx-monarch,.fx-splash{display:none}
  html{scroll-behavior:auto}
}
