/* Yachtlaunch: "On the Bow"
   One ocean ground, white reading fields with Foam cards, colour carried by the footage.
   Shallows is reserved for primary actions and the active story segment. */

@font-face{font-family:'Bebas Neue';src:url(/assets/fonts/bebas-neue-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(/assets/fonts/bebas-neue-400.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(/assets/fonts/schibsted-grotesk-var.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --deep:#033361; --deep-2:#022849; --mid:#1e537c;
  --shallows:#4fd6c8; --shallows-2:#7fe3d8;
  --foam:#f3f8fb; --foam-2:#e6eff4; --ink:#04213f; --slate:#33506b; --ink-3:#5f7891; --rule:#cfdde6;
  --on-deep:#f3f8fb; --on-deep-2:rgba(243,248,251,.8); --on-deep-3:rgba(243,248,251,.62); --line-deep:rgba(243,248,251,.16);
  --paper:#f3f8fb; --brass:#4fd6c8;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --text:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,4vw,64px);
  --sec:clamp(72px,9vw,128px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-color:var(--mid) var(--deep-2)}
body{font-family:var(--text);font-size:17px;line-height:1.55;background:var(--deep);color:var(--on-deep);-webkit-font-smoothing:antialiased;caret-color:var(--shallows);overflow-x:clip}
::selection{background:var(--shallows);color:var(--deep)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--shallows);outline-offset:3px}
.foam :focus-visible,.panel-foam :focus-visible{outline-color:var(--mid)}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--shallows);color:var(--deep);font-weight:700;padding:12px 18px}
.skip:focus{top:12px}
.sr-only,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

[hidden]{display:none!important}
.btn.ghost{border:1.5px solid rgba(243,248,251,.55);color:#fff}

/* ---------- type ---------- */
.d1{font-family:var(--display);font-size:clamp(56px,7vw,112px);line-height:.86;letter-spacing:.004em}
.d2{font-family:var(--display);font-size:clamp(52px,6.8vw,108px);line-height:.88;letter-spacing:.004em}
.h2{font-family:var(--display);font-size:clamp(44px,5.2vw,82px);line-height:.9;letter-spacing:.005em}
.h3{font-family:var(--display);font-size:clamp(32px,2.8vw,44px);line-height:.92;letter-spacing:.01em}
.accent{color:var(--shallows)}
.lede{font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:36ch}
.copy p+p{margin-top:1em}
.copy p{max-width:66ch}
.muted{color:var(--on-deep-2)}
.foam .muted,.foam-2 .muted,.panel-foam .muted{color:var(--slate)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;font-weight:700;font-size:15px;letter-spacing:.01em;line-height:1.1;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--shallows);color:var(--deep)}
.btn-primary:hover{background:var(--shallows-2)}
.btn-ghost{border:1.5px solid rgba(243,248,251,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(243,248,251,.06)}
.foam .btn-ghost,.panel-foam .btn-ghost{border-color:var(--ink);color:var(--ink)}
.foam .btn-ghost:hover,.panel-foam .btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ink{background:var(--deep);color:#fff}
.btn-ink:hover{background:var(--mid)}
.btn:active{transform:translateY(1px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.next{margin-top:16px;font-size:14px;color:var(--on-deep-3)}
.next b{color:#fff;font-weight:600}
.foam .next{color:var(--slate)}.foam .next b{color:var(--ink)}
.link{font-weight:700;display:inline-flex;align-items:center;gap:8px;color:var(--shallows)}
.foam .link,.foam-2 .link,.panel-foam .link{color:var(--deep)}
.link::after{content:"→";transition:transform .25s var(--ease)}
.link:hover::after{transform:translateX(4px)}
.wa-ico{width:20px;height:20px;fill:currentColor}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:border-color .3s}
/* blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside it */
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(3,51,97,.92);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px)}
header.site.scrolled{border-bottom-color:var(--line-deep)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.brand{font-family:var(--display);font-size:33px;letter-spacing:.015em;line-height:1;color:#fff;flex:none}
nav.main{display:flex;align-items:center;gap:clamp(16px,1.9vw,30px);font-size:15px;font-weight:500}
nav.main a{color:var(--on-deep-2);padding:6px 0;position:relative;transition:color .2s}
nav.main a:hover{color:#fff}
nav.main a[aria-current="page"]{color:#fff}
nav.main a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--shallows)}
nav.main .m-only{display:none}
.hdr-cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr-wa{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid rgba(243,248,251,.4);color:#fff;transition:border-color .2s,background .2s}
.hdr-wa:hover{border-color:#fff;background:rgba(243,248,251,.06)}
.hdr-cta .btn{min-height:44px;padding:0 20px}
.nav-toggle{display:none;width:44px;height:44px;border:1.5px solid rgba(243,248,251,.4);position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:#fff;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:20px}.nav-toggle span:nth-child(3){top:26px}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- story frame (signature) ---------- */
.story{position:relative;aspect-ratio:9/16;background:var(--deep-2);overflow:hidden;isolation:isolate}
.story .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);z-index:0}
.story .slide.on{opacity:1;z-index:1}
.story .slide img,.story .slide video{width:100%;height:100%;object-fit:cover}
.story .slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,25,52,.6) 0%,rgba(2,25,52,0) 22%,rgba(2,25,52,0) 56%,rgba(2,25,52,.85) 100%)}
.segs{position:absolute;top:14px;left:14px;right:14px;z-index:4;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg{display:block;text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg i{display:block;height:3px;background:rgba(255,255,255,.34);margin-bottom:8px;position:relative;overflow:hidden}
.seg i b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:#fff}
.seg.done i b{transform:scaleX(1)}
.seg.now{color:#fff}
.seg.now i b{background:var(--shallows)}
a.seg:hover{color:#fff}
.story[data-story="static"] .seg.now i b{transform:scaleX(1)}
.story .cap{position:absolute;left:16px;right:16px;bottom:18px;z-index:2;display:grid;gap:6px}
.story .cap .who{display:flex;align-items:center;gap:10px;font-size:14px}
.story .cap .who b{font-weight:700}.story .cap .who span{color:var(--on-deep-2)}
.av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--deep);box-shadow:0 0 0 1.5px rgba(255,255,255,.85);flex:none}
.av img{width:100%;height:100%}
.story a.cap{color:#fff}
.story a.cap:hover .who span,.story a.cap:focus-visible .who span{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Instagram-style: left 30% goes back, the rest goes forward; clear of the tabs, pause control and caption */
.tapzone{position:absolute;top:84px;bottom:64px;z-index:3;-webkit-tap-highlight-color:transparent}
.tapzone.prev{left:0;width:30%}.tapzone.next{right:0;width:70%}
.story-ctrl{position:absolute;right:14px;top:44px;z-index:5;width:34px;height:34px;display:grid;place-items:center;color:#fff;opacity:.85}
.story-ctrl svg{width:16px;height:16px;fill:currentColor}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center;padding-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(48px,5vw,72px)}
/* frame sized by the viewport so the whole hero, frame included, lands in the first screen */
.hero .story{height:clamp(480px,calc(100svh - 200px),700px);aspect-ratio:9/16}
.hero .story{container-type:inline-size}
.hero .segs{left:12px;right:12px;gap:5px}.hero .seg{letter-spacing:.05em}
@container (max-width:340px){.hero .seg{font-size:10px;letter-spacing:.02em}}
.hero .d1 .l1,.hero .d1 .l2{display:block}
.hero .d1 .l2{color:var(--shallows)}
/* per-tab headline and lede: all variants share one grid cell (tallest sets the height), only the current one shows */
.hv-stack{display:grid}
.hv{grid-area:1/1;transition:opacity .45s var(--ease),visibility .45s}
.hv:not(.on){opacity:0;visibility:hidden}
/* opening headline: site.js splits it into letters that fade in one by one. It stays hidden until split
   (no flash of the full text), and shows anyway after 2.5s if the script never runs.
   The lede, CTAs and next-step line then fade in behind it, on first load only */
.js .hero .hv[data-for="0"] .d1:not(.hl-ready){opacity:0;animation:hl-show 0s 2.5s forwards}
.hero .hv[data-for="0"] .lede,.hero .copy-col>.ctas,.hero .copy-col>.next{animation:hl-fade 1.2s cubic-bezier(.4,0,.2,1) both}
.hero .hv[data-for="0"] .lede{animation-delay:1.1s}
.hero .copy-col>.ctas{animation-delay:1.6s}
.hero .copy-col>.next{animation-delay:1.9s}
@keyframes hl-fade{from{opacity:0}to{opacity:1}}
@keyframes hl-show{to{opacity:1}}
.hero .d1 .w{display:inline-block;white-space:nowrap}
.hero .d1 .ch{opacity:0;animation:ch-in 1.1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * 55ms + 150ms)}
@keyframes ch-in{to{opacity:1}}
.hero .lede{margin:30px 0 36px;max-width:42ch;color:var(--on-deep)}

/* ---------- page hero (inner) ---------- */
.phero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center;padding-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(56px,6vw,88px)}
.phero .lede{margin:24px 0 30px}
/* frame sized by height so it sits inside the first viewport, with the copy centred against it */
.phero .story{height:clamp(460px,calc(100svh - 240px),600px);aspect-ratio:9/16;justify-self:end}
.phero .story .slide::after{background:linear-gradient(180deg,rgba(2,25,52,.55) 0%,rgba(2,25,52,0) 22%)}
.phero.no-media{grid-template-columns:minmax(0,1fr)}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--on-deep-3);margin-bottom:26px}
.crumbs a:hover{color:#fff}

/* ---------- sections ---------- */
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
/* light sections are plain white; Foam is kept for cards, panels and inputs laid on them */
.foam,.foam-2{background:#fff;color:var(--ink)}
:is(.foam,.foam-2)+:is(.foam,.foam-2){padding-top:0}
:is(.foam,.foam-2)+:is(.foam,.foam-2)>.wrap{padding-top:var(--sec);background:linear-gradient(var(--rule),var(--rule)) 50% 0/calc(100% - 2 * var(--gut)) 1px no-repeat}
.deep-2{background:var(--deep-2)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head p{max-width:40ch;font-size:18px}
.foam .sec-head p,.foam-2 .sec-head p{color:var(--slate)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.split.center{align-items:center}
.split.eq{align-items:stretch}
.split.words{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.words .word h3{color:var(--ink);margin-bottom:14px}
.words .word p{color:var(--slate);font-size:19px;line-height:1.45}
.carousel-dots{display:none}
.split.wide-l{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.honest{margin-top:34px;font-size:15.5px;max-width:72ch;color:var(--slate)}
.honest.lead{margin-top:0;font-size:18px;max-width:44ch}
/* the client's crew photo is a 960px social repost: shown at half width, never full-bleed */
.crew-photo{aspect-ratio:3/2;overflow:hidden;background:var(--foam-2)}
.crew-photo img{width:100%;height:100%;object-fit:cover}
.honest b{color:var(--ink)}

/* reel tiles */
.reel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tile{position:relative;aspect-ratio:9/14;overflow:hidden;background:var(--deep);color:#fff;display:block}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,30,58,0) 34%,rgba(3,30,58,.9) 100%)}
.tile .t{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.tile h3{font-family:var(--display);font-size:clamp(34px,3vw,46px);line-height:.9;letter-spacing:.01em}
.tile p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.9);margin:8px 0 14px}
.tile .link{font-size:14px;color:var(--shallows)}
.tile:hover img{transform:scale(1.045)}

/* service rows (hub) */
.rows{display:grid;gap:clamp(48px,6vw,96px)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.row:nth-child(even) .row-media{order:2}
.row-media{aspect-ratio:4/5;overflow:hidden;max-height:620px}
.row-media img,.row-media video{width:100%;height:100%;object-fit:cover}
.row h3{margin-bottom:16px}
.row .copy{color:var(--slate);margin-bottom:24px}

/* ticks list */
.ticks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--rule)}
.ticks li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:16px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.4}
.ticks li::before{content:"";width:18px;height:18px;margin-top:2px;background:var(--deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks.one{grid-template-columns:minmax(0,1fr)}
.deep-list .ticks,.ticks.on-deep{border-top-color:var(--line-deep)}
.ticks.on-deep li{border-bottom-color:var(--line-deep)}
.ticks.on-deep li::before{background:var(--foam)}

/* panels */
/* outlined on deep grounds, a quiet Foam fill on light ones: no solid colour blocks */
.panel{border:1px solid var(--line-deep);color:var(--on-deep);padding:clamp(28px,3.4vw,48px)}
.panel-foam{background:var(--foam);color:var(--ink);padding:clamp(28px,3.4vw,48px)}
.panel .h3,.panel h3{margin-bottom:12px}
.panel p{color:var(--on-deep-2)}
.panel p b,.panel p strong{color:#fff}
:is(.foam,.foam-2) .panel{background:var(--foam);border-color:var(--foam);color:var(--ink)}
:is(.foam,.foam-2) .panel p{color:var(--slate)}
:is(.foam,.foam-2) .panel p b,:is(.foam,.foam-2) .panel p strong{color:var(--ink)}
.notice{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;border:1px solid var(--rule);color:var(--ink);padding:22px 24px}
.notice svg{width:22px;height:22px;margin-top:2px;color:var(--slate)}
.notice p{color:var(--slate);font-size:16px}
.notice p b{color:var(--ink)}

/* big statement */
.statement{font-family:var(--display);font-size:clamp(40px,4.6vw,74px);line-height:.95;letter-spacing:.005em;max-width:22ch}
.statement .accent{color:var(--on-deep-3)}
.foam .statement .accent,.foam-2 .statement .accent{color:var(--ink-3)}

/* film */
.film{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.film img,.film video{width:100%;height:100%;object-fit:cover}
.film img{object-position:50% 30%}
.play{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px;color:#fff}
.play i{width:64px;height:64px;border-radius:50%;background:var(--shallows);display:grid;place-items:center;transition:transform .3s var(--ease)}
.play i svg{width:20px;height:20px;fill:var(--deep);margin-left:3px}
.play:hover i{transform:scale(1.06)}
.film.playing .play{display:none}
.quote{font-family:var(--display);font-size:clamp(40px,4.3vw,68px);line-height:.95;letter-spacing:.005em}
.cite{display:block;font-style:normal;margin-top:22px;font-size:15px;color:var(--on-deep-2)}
.cite b{color:#fff}
.foam .cite{color:var(--slate)}.foam .cite b{color:var(--ink)}
details.transcript{margin-top:22px;border-top:1px solid var(--line-deep)}
details.transcript summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;display:flex;justify-content:space-between;align-items:center}
details.transcript summary::-webkit-details-marker{display:none}
details.transcript summary::after{content:"+";font-size:22px;font-weight:400;color:var(--shallows)}
details.transcript[open] summary::after{content:"–"}
details.transcript .copy{padding-bottom:18px;color:var(--on-deep-2);font-size:15.5px}
.foam details.transcript{border-top-color:var(--rule)}
.foam details.transcript .copy{color:var(--slate)}
.facts{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;border-top:1px solid var(--line-deep);padding-top:20px}
.facts p{font-size:15px;color:var(--on-deep-2);line-height:1.5}
.facts p b{color:#fff;font-weight:600}

/* testimonials */
.rv{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px}
.q{background:var(--foam);color:var(--ink);padding:clamp(28px,3vw,42px)}
.q blockquote{font-size:clamp(21px,1.9vw,29px);line-height:1.28;font-weight:500;letter-spacing:-.01em}
.q figcaption{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;color:var(--slate)}
.q figcaption b{color:var(--ink)}
.tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;background:#fff;color:var(--slate)}
.q details{margin-top:18px;font-size:15px;color:var(--slate)}
.q details summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:inline-flex;align-items:center;gap:10px}
.q details summary::-webkit-details-marker{display:none}
.q details summary::after{content:"+";font-size:20px;font-weight:400;line-height:1;color:var(--slate)}
.q details[open] summary::after{content:"–"}
.q details p{margin-top:10px;line-height:1.55}

/* partners */
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-deep)}
.partner{padding:28px 28px 30px 0;border-bottom:1px solid var(--line-deep);display:grid;gap:10px;align-content:start}
.partner+.partner{padding-left:28px;border-left:1px solid var(--line-deep)}
.partner .pn{font-family:var(--display);font-size:clamp(34px,3vw,46px);line-height:.9;letter-spacing:.01em;color:#fff}
.partner p{font-size:15.5px;color:var(--on-deep-2)}
.partner .role{font-size:14px;font-weight:600;color:var(--on-deep-3);margin-top:-4px}
.foam .partners{border-top-color:var(--rule)}
.foam .partner{border-bottom-color:var(--rule)}
.foam .partner+.partner{border-left-color:var(--rule)}
.foam .partner .pn{color:var(--ink)}.foam .partner p{color:var(--slate)}.foam .partner .role{color:var(--ink-3)}

/* team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.person{display:grid;gap:12px;align-content:start}
.person .ph{aspect-ratio:4/5;overflow:hidden;background:var(--foam-2);display:grid;place-items:end start}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .ph.mono{background:var(--foam);place-items:center}
.person .ph.mono span{font-family:var(--display);font-size:clamp(72px,7vw,112px);line-height:1;letter-spacing:.02em;color:var(--ink-3)}
.person h3{font-family:var(--display);font-size:34px;line-height:.92;letter-spacing:.01em}
.person .role{font-size:14px;font-weight:600;color:var(--ink-3)}
.person p{font-size:15px;color:var(--slate)}

/* steps (sequence carries meaning) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.steps li{counter-increment:s;padding:24px 24px 0 0;display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(s);font-family:var(--display);font-size:52px;line-height:.85;color:var(--ink-3)}
.steps h3{font-size:19px;font-weight:700;line-height:1.25}
.steps p{font-size:15px;color:var(--slate)}
.on-deep.steps{border-top-color:var(--line-deep)}
.on-deep.steps li::before{color:#fff}
.on-deep.steps p{color:var(--on-deep-2)}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(18px,1.5vw,21px);font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .a{padding:0 0 24px;max-width:72ch;color:var(--slate)}
.faq .a p+p{margin-top:.8em}

/* closing band */
.close{padding-top:var(--sec);padding-bottom:var(--sec);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.close .d2 .accent{display:block;color:var(--on-deep-2)}
.close p{color:var(--on-deep-2);margin:0 0 26px;max-width:42ch;font-size:18px}
/* home closing band over drone footage: Deep Water scrim, heaviest where the text sits */
.close-film{position:relative;isolation:isolate;overflow:hidden;background:var(--deep-2)}
.close-film .band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.close-film::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(2,40,73,.55) 0%,rgba(2,40,73,.15) 22%,rgba(2,40,73,.78) 46%,rgba(2,40,73,.94) 100%)}
.close-film .close{min-height:clamp(520px,78svh,760px);align-content:end}
/* desktop: text stacks in one left column over a left-weighted scrim, so the boat and wake stay clear on the right */
@media (min-width:901px){
  .close-film::before{background:linear-gradient(90deg,rgba(2,40,73,.9) 0%,rgba(2,40,73,.78) 34%,rgba(2,40,73,.2) 62%,rgba(2,40,73,0) 100%),linear-gradient(180deg,rgba(2,40,73,.4) 0%,rgba(2,40,73,0) 28%)}
  .close-film .close{grid-template-columns:minmax(0,600px);gap:28px;align-content:center}
}

/* ---------- forms ---------- */
.form-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.form-card{background:#fff;color:var(--ink);padding:clamp(24px,3vw,44px);box-shadow:0 1px 2px rgba(4,33,63,.06),0 24px 60px -24px rgba(4,33,63,.28)}
.form-card h2,.form-card .h3{margin-bottom:8px;color:var(--ink)}
form.sbz-lead-form{display:grid;gap:18px}
form.sbz-lead-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
form.sbz-lead-form label{display:grid;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
form.sbz-lead-form label .opt{font-weight:400;color:var(--slate)}
form.sbz-lead-form input,form.sbz-lead-form select,form.sbz-lead-form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--foam);border:1.5px solid var(--rule);border-radius:0;padding:13px 14px;min-height:50px;transition:border-color .2s,background .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
form.sbz-lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304213f' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
/* three lines to start, growing with the message (field-sizing) up to ~8 lines */
form.sbz-lead-form textarea{min-height:104px;max-height:232px;field-sizing:content;resize:vertical}
form.sbz-lead-form input::placeholder,form.sbz-lead-form textarea::placeholder{color:#50687d;opacity:1}
form.sbz-lead-form input:hover,form.sbz-lead-form select:hover,form.sbz-lead-form textarea:hover{border-color:#9fb6c6}
form.sbz-lead-form input:focus,form.sbz-lead-form select:focus,form.sbz-lead-form textarea:focus{outline:none;border-color:var(--deep);background:#fff;box-shadow:0 0 0 3px rgba(79,214,200,.45)}
form.sbz-lead-form input:user-invalid,form.sbz-lead-form select:user-invalid,form.sbz-lead-form textarea:user-invalid{border-color:#b3261e}
form.sbz-lead-form fieldset.fstep{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
form.sbz-lead-form fieldset legend{font-family:var(--display);font-size:30px;line-height:1;margin-bottom:6px;padding:0}
form.sbz-lead-form.multi fieldset.fstep{display:none}
form.sbz-lead-form.multi fieldset.fstep.active{display:grid;animation:fstepIn .35s var(--ease)}
@keyframes fstepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
form.sbz-lead-form.multi .form-tail{display:none}
form.sbz-lead-form.multi.at-last .form-tail{display:grid;gap:16px}
.form-tail{display:grid;gap:16px}
/* last wizard step: Back and Send share one row so the step fits a laptop screen without scrolling */
form.sbz-lead-form.multi.at-last{grid-template-columns:auto minmax(0,1fr)}
form.sbz-lead-form.multi.at-last>*,form.sbz-lead-form.multi.at-last .form-tail>*{grid-column:1/-1}
form.sbz-lead-form.multi.at-last .form-tail{display:contents}
form.sbz-lead-form.multi.at-last .fnav{grid-column:1;order:2;margin-top:0}
form.sbz-lead-form.multi.at-last .form-tail button[type="submit"]{grid-column:2;order:2}
form.sbz-lead-form.multi.at-last .consent-line{order:3}
form.sbz-lead-form.multi.at-last .form-status{order:4}
/* radio service cards */
.choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;padding:0}
.choice label{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:14px 16px;border:1.5px solid var(--rule);background:var(--foam);cursor:pointer;font-size:15.5px;font-weight:600;transition:border-color .2s,background .2s}
.choice input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.choice label::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #8aa2b4;flex:none;transition:border .2s,box-shadow .2s}
.choice label:hover{border-color:#9fb6c6}
.choice label:has(input:checked){border-color:var(--deep);background:#fff}
.choice label:has(input:checked)::before{border:6px solid var(--deep)}
.choice label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(79,214,200,.55)}
form.sbz-lead-form .choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;padding:0;margin:0;min-width:0}
form.sbz-lead-form .choice legend{font-family:var(--text);font-size:14px;font-weight:600;line-height:1.4;margin-bottom:10px;color:var(--ink);padding:0}
form.sbz-lead-form .choice label{display:flex;flex-direction:row;align-items:center;gap:12px}
form.sbz-lead-form .choice input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;border:0}
form.sbz-lead-form .choice label:last-of-type:nth-of-type(odd){grid-column:1/-1}
.ilink{color:var(--shallows);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.foam .ilink,.foam-2 .ilink{color:var(--deep)}
/* progress + nav injected by form.js */
.fprogress{display:grid;gap:10px;margin-bottom:4px}
.fprogress-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.fprogress-dots{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.fprogress-dots span{height:3px;background:var(--rule)}
.fprogress-dots span.done{background:var(--deep)}
.fprogress-dots span.now{background:var(--shallows)}
.fnav{display:flex;justify-content:space-between;gap:12px;margin-top:4px}
.fnav .btn{min-width:120px;background:var(--deep);color:#fff}
.fnav .btn:hover{background:var(--mid)}
.fnav .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.fnav .btn.ghost:hover{border-color:var(--ink)}
form.sbz-lead-form:not(.multi) .fnav{display:none}
form.sbz-lead-form.multi.at-last .fnav .btn:not(.ghost){display:none}
form.sbz-lead-form button[type=submit]{width:100%;min-height:56px;background:var(--shallows);color:var(--deep);font-weight:800;font-size:16px;letter-spacing:.01em}
form.sbz-lead-form button[type=submit]:hover{background:var(--shallows-2)}
form.sbz-lead-form button[type=submit][disabled]{opacity:.6;cursor:progress}
.consent-line,.form-note{font-size:13.5px;line-height:1.5;color:var(--slate)}
.consent-line a,.form-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.form-note.warn{background:var(--foam);border:1.5px solid var(--rule);padding:14px 16px;color:var(--ink);font-size:14.5px}
.form-status{min-height:1.4em;font-weight:700;font-size:15px;color:var(--ink)}
.form-status.busy{color:var(--slate)}
.form-status.err{color:#b3261e}
.count{font-size:12.5px;color:var(--slate);text-align:right;margin-top:-10px}
.sbz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* interaction-only widget: takes no space unless Cloudflare needs the visitor to act */
.cf-turnstile{min-height:0}
noscript .ns{display:block;background:var(--foam);color:var(--ink);padding:14px 16px;font-size:14.5px;margin-bottom:12px}
.side-next{display:grid;gap:22px}
.side-next .steps{grid-template-columns:minmax(0,1fr)}
.side-next .steps li{padding:18px 0;border-bottom:1px solid var(--line-deep);grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:16px}
.side-next .steps li::before{grid-row:1/3;font-size:44px}
.side-next .h3,.side-next h2 .accent{color:inherit}
.wa-big{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1.5px solid rgba(243,248,251,.4);transition:border-color .2s,background .2s}
.wa-big:hover{border-color:#fff;background:rgba(243,248,251,.05)}
.wa-big .wa-ico{width:30px;height:30px;color:var(--shallows)}
.wa-big b{display:block;font-size:17px}.wa-big span{font-size:14px;color:var(--on-deep-2)}

/* modal */
dialog.sbz-modal{position:fixed;inset:0;margin:auto;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;padding:clamp(24px,3.4vw,40px);background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(2,28,52,.55)}
dialog.sbz-modal::backdrop{background:rgba(2,28,52,.72);backdrop-filter:blur(3px)}
.sbz-modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--rule);font-size:22px;line-height:1;color:var(--ink)}
.sbz-modal-close:hover{border-color:var(--ink)}
.sbz-modal-head{margin-bottom:20px;padding-right:48px}
.sbz-modal-head h2{font-family:var(--display);font-size:clamp(32px,3.4vw,40px);line-height:.92;margin-bottom:8px}
.sbz-modal-head p{color:var(--slate);font-size:15.5px}
.sbz-modal-alt{margin-top:18px;font-size:14px;color:var(--slate);text-align:center}
.sbz-modal-alt a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* short laptop screens: trim the dialog's chrome so every step fits without scrolling */
@media (max-height:780px) and (min-width:901px){
  dialog.sbz-modal{padding:24px 32px}
  .sbz-modal-head{margin-bottom:14px}
  .sbz-modal-alt{margin-top:12px}
}
/* single-column service choices on small screens: slimmer cards so step 1 fits a phone */
@media (max-width:900px){form.sbz-lead-form .choice{gap:8px}.choice label{min-height:50px;padding:11px 14px}}
/* phones: slimmer Back so "Send to Yachtlaunch" stays on one line beside it */
@media (max-width:480px){
  form.sbz-lead-form.multi.at-last .fnav .btn{min-width:0;padding:0 18px}
  form.sbz-lead-form.multi.at-last .form-tail button[type="submit"]{padding:0 14px}
}

/* contact hero: the form is the first-viewport action */
.contact-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"copy form" "more form";gap:28px clamp(36px,6vw,96px);align-items:start;padding-top:clamp(32px,4vw,56px);padding-bottom:var(--sec)}
.ch-copy{grid-area:copy}.ch-form{grid-area:form}.ch-more{grid-area:more;display:grid;gap:18px;align-content:start}
.contact-hero .lede{margin:22px 0 28px}
.steps.compact li{padding:16px 0;border-bottom:1px solid var(--line-deep);grid-template-columns:44px 1fr;column-gap:14px}
.steps.compact li::before{grid-row:1/3;font-size:40px}
.steps.compact{grid-template-columns:minmax(0,1fr)}

/* thank-you / 404 */
.phero.no-media .lede{margin:22px 0 34px}
.next-steps{margin-top:8px;max-width:760px}
.next-steps .h3{margin-bottom:16px}
.next-steps ol{list-style:none;counter-reset:n;border-top:1px solid var(--line-deep)}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:52px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-deep);color:var(--on-deep-2);font-size:16.5px}
.next-steps li::before{content:counter(n);font-family:var(--display);font-size:42px;line-height:.85;color:#fff}
.next-steps li strong{color:#fff}
.next-steps a,.ty-more a{color:var(--shallows);font-weight:700}
.next-steps .form-note{margin-top:18px;color:var(--on-deep-2)}
.ty-actions{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 46px}
.ty-more{list-style:none}
.ty-more ul,ul.ty-more{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px}
ul.ty-more{margin:0 0 30px}
.form-status a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* legal/utility */
.legal{max-width:76ch}
.legal h2{font-family:var(--display);font-size:clamp(30px,2.6vw,40px);line-height:.95;margin:44px 0 12px;color:var(--ink)}
.legal h3{font-size:19px;font-weight:700;margin:26px 0 8px}
.legal p,.legal li{color:#1d3a55;font-size:16.5px}
.legal p+p{margin-top:.8em}
.legal ul{margin:10px 0 0 20px;display:grid;gap:6px}
.legal a{color:var(--deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
footer.site{background:var(--deep-2);padding-top:clamp(56px,7vw,96px);padding-bottom:28px}
.f-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.f-grid .brand{font-size:44px;display:inline-block;margin-bottom:16px}
.f-grid p{color:var(--on-deep-2);font-size:15px;max-width:34ch}
.f-grid h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-3);margin-bottom:14px}
.f-grid ul{list-style:none;display:grid;gap:9px;font-size:15px}
.f-grid ul a{color:var(--on-deep-2)}.f-grid ul a:hover{color:#fff}
.f-social{display:flex;gap:10px;margin-top:20px}
.f-social a{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--line-deep);color:#fff}
.f-social a:hover{border-color:#fff}
.f-social svg{width:19px;height:19px;fill:currentColor}
.f-base{margin-top:56px;padding-top:22px;border-top:1px solid var(--line-deep);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--on-deep-3)}
.f-base a:hover{color:#fff}

/* mobile action bar */

/* ---------- motion ---------- */
.anim-ready [data-rise]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim-ready [data-rise].in{opacity:1;transform:none}
.anim-ready .rule-draw{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.anim-ready .rule-draw.in{transform:scaleX(1)}
.seg.now i b{transition:transform var(--dur,6s) linear}
.story.playing .seg.now i b{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim-ready [data-rise],.anim-ready .rule-draw{opacity:1;transform:none;transition:none}
  .story .slide,.hv{transition:none}
  .hero .d1 .ch{opacity:1;animation:none}
  .js .hero .hv[data-for="0"] .d1:not(.hl-ready){opacity:1;animation:none}
  .hero .hv[data-for="0"] .lede,.hero .copy-col>.ctas,.hero .copy-col>.next{animation:none}
  .seg.now i b{transition:none;transform:scaleX(1)}
  .tile img,.btn{transition:none}
  form.sbz-lead-form.multi fieldset.fstep.active{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  nav.main{position:fixed;inset:80px 0 0 0;z-index:99;background:var(--deep);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut) 40px;overflow-y:auto;display:none}
  nav.main.open{display:flex}
  nav.main a{font-family:var(--display);font-size:40px;line-height:1;letter-spacing:.01em;color:#fff;padding:14px 0;border-bottom:1px solid var(--line-deep)}
  nav.main a[aria-current="page"]{color:var(--shallows)}
  nav.main a[aria-current="page"]::after{display:none}
  nav.main .m-only{display:block}
  nav.main .btn.m-only{display:flex;align-items:center;justify-content:center;gap:12px}
  nav.main .btn{font-family:var(--text);font-size:16px;margin-top:22px;border:0;color:var(--deep);padding:0 24px}
  nav.main .btn:hover{color:var(--deep)}
  .nav-toggle{display:block}
  body:has(nav.main.open){overflow:hidden}
}
@media (max-width:900px){
  .hdr-cta{gap:6px}
  .hdr-cta .btn{padding:0 12px}
  header.site .wrap{gap:16px}
  .hero{grid-template-columns:minmax(0,1fr);padding-top:0;gap:0}
  /* shorter than a full screen so the headline and both CTAs land in the first view (there is no bottom bar) */
  .hero .story{margin:0 calc(var(--gut) * -1);aspect-ratio:auto;height:min(64svh,560px)}
  .hero .story .cap{display:none}
  .hero .tapzone{bottom:0}
  .hero .copy-col{margin-top:-180px;position:relative;z-index:6;min-width:0}
  .hero .story .slide::after{background:linear-gradient(180deg,rgba(2,25,52,.55) 0%,rgba(2,25,52,0) 20%,rgba(2,25,52,0) 44%,var(--deep) 100%)}
  .hero .d1{font-size:clamp(56px,16.5vw,92px)}
  .hero .lede{margin:18px 0 24px}
  .ctas .btn{flex:1 1 100%}
  .phero{grid-template-columns:minmax(0,1fr);gap:36px}
  .phero .story{aspect-ratio:4/5;height:auto;width:100%;justify-self:stretch}
  .sec-head{display:block}.sec-head p{margin-top:14px}
  .reel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile p{display:none}
  .split,.split.wide-l,.split.words,.form-wrap,.close{grid-template-columns:minmax(0,1fr)}
  /* Cam's words: a swipeable, snapping row with the next card peeking in */
  .split.words{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .split.words::-webkit-scrollbar{display:none}
  .split.words>.word{flex:0 0 min(84%,420px);scroll-snap-align:start}
  .carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
  .carousel-dots button{width:8px;height:8px;border-radius:50%;background:var(--rule);transition:background .2s,transform .2s}
  .carousel-dots button[aria-current="true"]{background:var(--deep);transform:scale(1.25)}
  .contact-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "more"}
  .row,.row:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .row:nth-child(even) .row-media{order:0}
  .row-media{aspect-ratio:4/3}
  .ticks{grid-template-columns:minmax(0,1fr)}
  .rv{grid-template-columns:minmax(0,1fr)}
  .partners{grid-template-columns:minmax(0,1fr)}
  .partner+.partner{padding-left:0;border-left:0}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{padding:20px 0;border-bottom:1px solid var(--rule);grid-template-columns:52px 1fr;column-gap:14px}
  .steps li::before{grid-row:1/3}
  .on-deep.steps li{border-bottom-color:var(--line-deep)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid > div:first-child{grid-column:1/-1}
  form.sbz-lead-form .two,form.sbz-lead-form .choice{grid-template-columns:minmax(0,1fr)}
}
/* narrowest phones: WhatsApp stays in the menu and on the page, the header keeps Contact us */
@media (max-width:400px){.brand{font-size:26px!important}header.site .wrap{gap:12px!important}}
@media (max-width:370px){.hdr-wa{display:none}}
@media (max-width:560px){
  .team{grid-template-columns:minmax(0,1fr)}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  header.site .wrap{height:68px}
  nav.main{inset:68px 0 0 0}
  .brand{font-size:29px}
}