:root{
  color-scheme:light dark;
  --paper:#f1ede3;
  --paper-raised:#fbf8f0;
  --ink:#10292b;
  --muted:#526768;
  --line:rgba(16,41,43,.18);
  --line-strong:rgba(16,41,43,.36);
  --sea:#0f7774;
  --sea-deep:#094b54;
  --foam:#dcebe5;
  --signal:#db633f;
  --signal-dark:#9f3f28;
  --shadow:rgba(10,56,59,.15);
  --sans:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1240px,calc(100vw - 64px));
}
@media(prefers-color-scheme:dark){
  :root{
    --paper:#071c20;
    --paper-raised:#0d282d;
    --ink:#f0eee6;
    --muted:#9bb0ae;
    --line:rgba(222,239,233,.18);
    --line-strong:rgba(222,239,233,.34);
    --sea:#4cc4b9;
    --sea-deep:#0b5358;
    --foam:#d9ebe5;
    --signal:#ff8663;
    --signal-dark:#ff8663;
    --shadow:rgba(0,8,11,.34);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
body::selection{background:var(--sea);color:var(--paper-raised)}
a{color:inherit;text-decoration:none}
button{font:inherit}
.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:10px 14px;background:var(--ink);color:var(--paper);transform:translateY(-180%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:translateY(0)}
.ocean-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.ocean-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(96deg,transparent 0 38px,color-mix(in srgb,var(--sea) 8%,transparent) 39px,transparent 40px 83px)}
main,.footer{position:relative;z-index:1}
.section-shell{width:var(--shell);margin-inline:auto}

/* navigation */
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease}
.topbar.is-scrolled{border-color:var(--line);background:color-mix(in srgb,var(--paper) 96%,transparent)}
.topbar__inner{width:var(--shell);height:76px;margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:11px;font:700 .79rem/1 var(--mono);letter-spacing:.18em}
.brand__mark{width:28px;height:17px;display:grid;align-content:center;gap:3px}
.brand__mark i{display:block;height:1px;background:var(--sea);transform-origin:left}
.brand__mark i:nth-child(2){transform:scaleX(.72)}
.brand__mark i:nth-child(3){transform:scaleX(.44)}
.topbar__links{display:flex;gap:32px;font:500 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.topbar__links a,.topbar__cta{position:relative;padding:10px 0}
.topbar__links a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--sea);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.topbar__links a:hover::after,.topbar__links a:focus-visible::after,.topbar__links a[aria-current="location"]::after{transform:scaleX(1);transform-origin:left}
.topbar__links a[aria-current="location"]{color:var(--ink)}
.topbar__cta{justify-self:end;font:700 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sea)}
.topbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.topbar__progress span{display:block;width:100%;height:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;will-change:transform}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* shared type */
.kicker,.section-index{font:650 .7rem/1.2 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--sea);margin:0 0 28px}
.section-intro h2{font-size:clamp(2.5rem,5vw,5.2rem);line-height:.96;letter-spacing:-.055em;font-weight:650;margin:0;max-width:12ch;text-wrap:balance}
.section-index{display:flex;align-items:center;gap:13px}
.section-index::before{content:"";display:block;width:28px;height:1px;background:currentColor}

/* hero */
.hero{min-height:100svh;width:var(--shell);margin-inline:auto;padding:154px 0 72px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:clamp(40px,6vw,96px);align-items:center;position:relative}
.hero__copy{position:relative;z-index:2;padding-bottom:54px}
.hero h1{font-size:clamp(3.7rem,7.7vw,7.6rem);line-height:.86;letter-spacing:-.07em;font-weight:640;margin:0;max-width:8.7ch;text-wrap:balance}
.hero h1 em{display:block;color:var(--sea);font-style:normal}
.hero__lede{font-size:clamp(1.08rem,1.55vw,1.34rem);line-height:1.55;color:var(--muted);max-width:57ch;margin:36px 0 0}
.hero__actions{display:flex;align-items:center;gap:30px;margin-top:38px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;font:700 .74rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;transition:transform .22s var(--ease),background .22s ease,color .22s ease}
.button--primary{min-height:50px;padding:0 20px;background:var(--ink);color:var(--paper-raised);border:1px solid var(--ink)}
.button--primary:hover{transform:translateY(-3px);background:var(--sea);border-color:var(--sea)}
.button--text{color:var(--sea);border-bottom:1px solid var(--line-strong);padding:13px 0}
.button--text:hover{border-color:var(--sea)}
.hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;padding:0;margin:42px 0 0;color:var(--muted);font:500 .69rem/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.hero__facts li{display:flex;align-items:center;gap:8px}
.hero__facts li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--signal)}
.hero__harbour{height:min(69vh,690px);min-height:520px;position:relative;isolation:isolate}
.hero__harbour::before{content:"";position:absolute;inset:3% 0 0 4%;border:1px solid var(--line);border-radius:50% 50% 45% 55%/44% 48% 52% 56%;transform:rotate(-4deg)}
.harbour-label{position:absolute;z-index:3;top:2%;left:0;right:0;display:flex;justify-content:space-between;margin:0;color:var(--muted);font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.waterline{position:absolute;left:0;width:100%;overflow:visible;pointer-events:none}
.waterline--hero{z-index:0;top:35%;height:54%;filter:drop-shadow(0 18px 26px var(--shadow))}
.waterline__wash{fill:color-mix(in srgb,var(--sea) 23%,transparent)}
.waterline__line{fill:none;stroke:var(--sea);stroke-width:2;vector-effect:non-scaling-stroke}
.waterline__foam{fill:none;stroke:var(--foam);stroke-width:7;stroke-linecap:round;stroke-dasharray:1 22;opacity:.9;vector-effect:non-scaling-stroke}
.hero-tool{--scale:1;position:absolute;z-index:2;width:132px;will-change:transform;transform:scale(var(--scale));transform-origin:50% 70%;display:flex;flex-direction:column;align-items:center;color:var(--sea)}
.hero-tool__icon{display:block;width:80px;height:80px;padding:10px;overflow:visible;background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:48% 52% 44% 56%/55% 52% 48% 45%;box-shadow:0 16px 24px -14px var(--shadow)}
.hero-tool__icon .scafo{fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hero-tool__icon .vivo{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hero-tool__icon .pieno{fill:var(--signal)}.hero-tool__icon .onda{fill:none;stroke:var(--sea);stroke-width:1.5;stroke-linecap:round}.hero-tool__icon .caldo{stroke:var(--signal)}
.hero-tool span{margin-top:10px;padding:6px 8px;background:color-mix(in srgb,var(--paper-raised) 94%,transparent);font:700 .57rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.hero-tool span small{font:500 .82em/1 var(--sans);letter-spacing:.03em;color:var(--muted);margin-left:4px;text-transform:none}
.hero-tool--vedetta{left:0;top:34%}.hero-tool--dogana{--scale:.88;right:0;top:30%}.hero-tool--boa{--scale:1.12;left:38%;top:50%}.hero-tool--switch{--scale:.76;right:7%;top:70%}.hero-tool--faro{--scale:.7;left:45%;top:15%}
.hero-tool--fixed .hero-tool__icon{border-radius:3px;border-bottom:4px solid var(--signal-dark);box-shadow:none}
.hero__scroll{position:absolute;left:0;bottom:24px;display:flex;align-items:center;gap:14px;margin:0;color:var(--muted);font:600 .58rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;transform:rotate(-90deg);transform-origin:left center}
.hero__scroll i{display:block;width:42px;height:1px;background:var(--line-strong);overflow:hidden}
.hero__scroll i::after{content:"";display:block;width:50%;height:100%;background:var(--signal);animation:scrollPulse 2s var(--ease) infinite}
@keyframes scrollPulse{0%{transform:translateX(-110%)}70%,100%{transform:translateX(220%)}}

/* problem */
.problem{position:relative;padding:clamp(100px,13vw,184px) 0;background:color-mix(in srgb,var(--sea-deep) 95%,transparent);color:#f4f0e7;overflow:hidden}
.problem::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 79px,rgba(220,235,229,.08) 80px);pointer-events:none}
.problem__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:80px}
.problem .section-index{color:#8fd8d0}.problem .section-intro h2{max-width:11ch}
.problem__story{align-self:end;font-size:clamp(1.15rem,1.6vw,1.38rem);color:#c9d8d3;max-width:40ch}
.problem__story p{margin:0}.problem__story strong{color:#fff;font-weight:650}
.metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(220,235,229,.24);margin-top:58px}
.metric{min-height:180px;padding:34px 28px 12px 0;border-right:1px solid rgba(220,235,229,.24);will-change:transform;transform-origin:30% 70%}
.metric:not(:first-child){padding-left:28px}.metric:last-child{border-right:0}
.metric b{display:block;font-size:clamp(2.8rem,5vw,5.6rem);line-height:.95;letter-spacing:-.065em;font-weight:560;color:#fff}
.metric b small{font:600 .28em/1 var(--mono);letter-spacing:.02em;color:#8fd8d0}
.metric span{display:block;margin-top:18px;max-width:19ch;color:#b7cac5;font-size:.87rem;line-height:1.5}
@media(prefers-color-scheme:dark){
  .problem .section-index{color:#dcf5ee}.problem__story{color:#e0ebe7}.metric span{color:#d7e6e1}.metric b small{color:#dcf5ee}
}

/* fleet */
.fleet{padding:clamp(112px,14vw,196px) 0 0;background:color-mix(in srgb,var(--paper) 91%,transparent)}
.fleet__heading{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end;margin-bottom:112px}
.fleet__lede{font-size:clamp(1.1rem,1.5vw,1.32rem);color:var(--muted);max-width:40ch;margin:0 0 4px}
.fleet-map{width:var(--shell);margin-inline:auto}
.fleet-row{position:relative;min-height:430px;padding:58px 0 96px;border-top:1px solid var(--line)}
.fleet-row:last-child{border-bottom:1px solid var(--line)}
.fleet-row__label{display:flex;align-items:center;gap:16px;position:absolute;z-index:3;top:22px;left:0;font:650 .67rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fleet-row__label span{color:var(--signal-dark)}.fleet-row__label h3{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.waterline--row{z-index:0;left:0;top:41%;height:46%;opacity:.75}
.waterline--row .waterline__wash{fill:color-mix(in srgb,var(--sea) 13%,transparent)}
.waterline--row .waterline__line{stroke-width:1.3}.waterline--row .waterline__foam{stroke-width:4;opacity:.58}
.fleet-row__vessels{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,6vw,88px);align-items:start;padding:30px clamp(0px,4vw,54px) 0}
.fleet-row__vessels .vessel:nth-child(2){margin-top:78px}
.fleet-row--reverse .fleet-row__vessels{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.fleet-row--reverse .fleet-row__vessels .vessel:first-child{margin-top:74px}.fleet-row--reverse .fleet-row__vessels .vessel:nth-child(2){margin-top:0}
.vessel{position:relative;display:block;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:border-color .22s ease}
.vessel__inside{position:relative;display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,1.28fr);gap:28px;align-items:center;min-height:176px;padding:20px 4px;background:transparent}
.vessel:hover{border-color:var(--sea)}
.vessel:focus-visible{outline:3px solid var(--signal);outline-offset:5px}
.vessel__float{position:relative;display:block;min-height:112px;padding:22px 68px 20px 18px;background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:50% 48% 45% 55%/48% 52% 46% 54%;box-shadow:0 17px 28px -22px var(--shadow);will-change:transform;transform-origin:50% 72%}
.vessel__top{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.vessel__name{font:700 clamp(1.18rem,2vw,1.55rem)/1 var(--mono);letter-spacing:-.04em;color:var(--sea)}
.vessel__name small{font:500 .46em/1 var(--sans);letter-spacing:.04em;color:var(--muted);margin-left:8px}
.vessel__arrow{position:absolute;top:16px;right:18px;color:var(--muted);font-size:1rem;transition:transform .25s var(--ease),color .2s ease}
.vessel:hover .vessel__arrow{color:var(--signal);transform:translate(3px,-3px)}
.vessel__copy{display:block;margin:0;color:var(--muted);font-size:.92rem;line-height:1.58;max-width:40ch}
.vessel__keel{display:block;grid-column:2;margin-top:-16px;color:var(--signal-dark);font:650 .57rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.vessel--fixed .vessel__float{border-radius:3px;border-bottom:4px solid var(--signal-dark);box-shadow:none}
.segno{position:absolute;top:42px;right:12px;width:54px;height:54px;overflow:visible;color:var(--sea)}
.segno .scafo{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.segno .vivo{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.segno .pieno{fill:currentColor}.segno .onda{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round}
.segno .caldo{stroke:var(--signal)}.segno .acqua{fill:color-mix(in srgb,var(--sea) 16%,transparent)}

/* findings */
.findings{padding:clamp(120px,15vw,208px) 0;background:color-mix(in srgb,var(--paper-raised) 84%,transparent)}
.findings__intro{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start;margin-bottom:96px}
.findings__intro .section-index{margin-top:14px}.findings__intro h2{max-width:13ch}
.stories{display:grid;grid-template-columns:1.15fr .85fr 1fr;border-top:1px solid var(--line-strong)}
.story{padding:38px clamp(24px,3vw,44px) 18px 0;border-right:1px solid var(--line);min-height:340px}
.story:not(:first-child){padding-left:clamp(24px,3vw,44px)}.story:last-child{border-right:0;padding-right:0}
.story__number{display:block;color:var(--signal-dark);font:700 .69rem/1 var(--mono);letter-spacing:.12em;margin-bottom:54px}
.story h3{font-size:clamp(1.55rem,2.4vw,2.35rem);line-height:1.08;letter-spacing:-.04em;margin:0;max-width:12ch}
.story p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:26px 0 0;max-width:37ch}

/* install */
.install{position:relative;padding:clamp(106px,13vw,176px) 0;background:#9f3f28;color:#fff7ed;overflow:hidden}
.install__watermark{position:absolute;right:-.03em;bottom:-.34em;font:750 clamp(11rem,31vw,35rem)/1 var(--sans);letter-spacing:-.09em;color:rgba(35,6,2,.15);pointer-events:none;user-select:none}
.install__grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(440px,1.2fr);gap:clamp(54px,8vw,116px);align-items:start}
.install .section-index{color:#ffd1bd}.install .section-intro h2{font-size:clamp(2.9rem,5.4vw,5.7rem);max-width:9.2ch}
.install__note{font-size:1.08rem;color:#ffe0cf;max-width:34ch;margin:34px 0 0}
.terminal{position:relative;background:#0b2326;color:#e8eee8;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px -40px rgba(47,10,2,.7)}
.terminal__bar{height:50px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(232,238,232,.18);font:650 .64rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#91aaa6}
.terminal__bar button{border:0;background:transparent;color:#83d4cb;font:inherit;text-transform:uppercase;cursor:pointer;padding:10px}
.terminal__bar button:hover{color:#fff}.terminal__bar button:focus-visible{outline-color:#fff}
.terminal pre{margin:0;padding:30px 28px 34px;overflow-x:auto;font:500 clamp(.73rem,1.05vw,.88rem)/1.8 var(--mono);white-space:pre}
.terminal code{font:inherit}.terminal code span{color:#6f9792}.copy-status{position:absolute;right:18px;bottom:8px;margin:0;color:#83d4cb;font:600 .58rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.install__fineprint{grid-column:2;color:#ffe0cf;font-size:.89rem;max-width:58ch;margin:-68px 0 0}.install__fineprint code{font-family:var(--mono);color:#fff}

/* footer */
.footer{background:var(--ink);color:var(--paper);padding:42px 0}
.footer__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;font:560 .65rem/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.footer__inner p{margin:0;color:color-mix(in srgb,var(--paper) 62%,transparent);text-align:center}.footer__inner a:last-child{justify-self:end}.footer a:hover{color:var(--signal)}

@media(max-width:980px){
  :root{--shell:min(100% - 40px,760px)}
  .topbar__inner{grid-template-columns:1fr auto}.topbar__links{display:none}
  .hero{grid-template-columns:1fr;padding-top:130px;gap:10px}.hero__copy{padding-bottom:0}.hero h1{max-width:9.6ch}.hero__harbour{height:470px;min-height:0;width:min(100%,660px);justify-self:end}.hero__scroll{display:none}
  .problem__grid,.fleet__heading{grid-template-columns:1fr;gap:44px}.install__grid{grid-template-columns:minmax(0,1fr);gap:44px}.problem__story{align-self:auto}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(n+3){border-top:1px solid rgba(220,235,229,.24)}
  .fleet__heading{margin-bottom:80px}.fleet__lede{max-width:48ch}.fleet-row{min-height:410px}.fleet-row__vessels,.fleet-row--reverse .fleet-row__vessels{gap:24px;padding-inline:0}.vessel__inside{grid-template-columns:minmax(145px,.72fr) minmax(0,1.28fr)}
  .findings__intro{grid-template-columns:1fr;gap:16px}.findings__intro .section-index{margin-top:0}.stories{grid-template-columns:1fr}.story,.story:not(:first-child){min-height:auto;border-right:0;border-bottom:1px solid var(--line);padding:34px 0 46px}.story:last-child{border-bottom:0}.story__number{margin-bottom:28px}.story h3{max-width:18ch}.story p{max-width:58ch}
  .install__fineprint{grid-column:1;margin:0}.terminal{width:100%;min-width:0}
  .footer__inner{grid-template-columns:1fr;gap:12px;text-align:center}.footer__inner a:last-child{justify-self:center}.footer__inner p{grid-row:2}
}
@media(max-width:680px){
  :root{--shell:calc(100% - 32px)}
  body{font-size:16px}.topbar__inner{height:66px}.topbar__cta{font-size:.67rem}
  .hero{min-height:auto;padding:112px 0 52px}.hero h1{font-size:clamp(3.35rem,17vw,5rem)}.hero__lede{margin-top:28px}.hero__actions{align-items:flex-start;flex-direction:column;gap:8px;margin-top:30px}.hero__facts{margin-top:30px}.hero__harbour{height:380px;width:100%;margin-top:18px}.harbour-label{font-size:.52rem}.waterline--hero{top:31%}.hero-tool{width:100px}.hero-tool__icon{width:64px;height:64px;padding:8px}.hero-tool span{font-size:.54rem}.hero-tool--vedetta{left:-2%}.hero-tool--dogana{right:-2%}.hero-tool--boa{left:35%}.hero-tool--switch{right:2%}.hero-tool--faro{left:44%;top:13%}
  .problem{padding:92px 0}.problem__grid{gap:36px}.section-intro h2{font-size:clamp(2.65rem,13vw,4rem)}.metrics{margin-top:22px}.metric{min-height:154px;padding:28px 16px 10px 0}.metric:not(:first-child){padding-left:16px}.metric:nth-child(odd){padding-left:0}.metric b{font-size:clamp(2.45rem,13vw,4rem)}.metric span{font-size:.75rem}
  .fleet{padding-top:104px}.fleet__heading{margin-bottom:68px}.fleet-row{min-height:570px;padding:62px 0 82px}.fleet-row__vessels,.fleet-row--reverse .fleet-row__vessels{grid-template-columns:1fr;gap:30px;padding-top:32px}.fleet-row__vessels .vessel:nth-child(2),.fleet-row--reverse .fleet-row__vessels .vessel:first-child{margin-top:22px}.fleet-row--reverse .fleet-row__vessels .vessel:nth-child(2){margin-top:22px}.waterline--row{top:35%;height:58%}.vessel__inside{grid-template-columns:116px minmax(0,1fr);gap:16px;min-height:174px;padding:18px 0}.vessel__float{min-height:110px;padding:18px 52px 18px 14px}.vessel__name{font-size:.92rem}.vessel__name small{display:block;font-size:.52em;margin:7px 0 0}.vessel__copy{font-size:.8rem}.vessel__arrow{top:13px;right:12px}.vessel__keel{grid-column:2;margin-top:-12px}.segno{width:45px;height:45px;right:8px;top:47px}
  .findings{padding:104px 0}.findings__intro{margin-bottom:58px}.install{padding:96px 0}.install__grid{gap:40px}.terminal{width:100%;margin-left:0}.terminal pre{padding:24px 20px 30px;font-size:.7rem}
}
/* --- mobile: what the compositor pays for on every scrolled frame ---------
   Two effects that are nearly free on a desktop GPU and expensive on a phone,
   removed where they cost the most and are worth the least.

   1. The bar's backdrop blur. Its background is already 92% opaque paper, so a
      16px blur behind it is doing almost nothing you can see — while a blurred
      backdrop on a fixed, full-width element has to be resampled every frame
      the page moves underneath it. Taking the blur and adding four points of
      opacity is a change almost nobody can see and the compositor feels at
      once.

   2. The hero waterline's drop-shadow. That SVG's path is rewritten on every
      single frame by the wave code, and a filter over changing geometry has to
      be recomputed every time. The wash, the line and the foam still carry the
      shape; only the soft shadow under it goes.

   Both are kept in full above 980px, where the desktop design is untouched. */
@media(max-width:980px){
  .topbar{backdrop-filter:none;background:color-mix(in srgb,var(--paper) 96%,transparent)}
  .topbar.is-scrolled{background:var(--paper)}
  .waterline--hero{filter:none}

  /* One sea, not two. On a desktop the hero is two columns and this SVG is the
     harbour's own little pool beside the headline. Stacked into one column it
     stops being a pool and becomes a rectangle: its wash is a filled box the
     width of the shell, so it shows two hard vertical edges and a flat bottom
     across the middle of the page — a panel, not water.

     The canvas draws the shared surface at exactly this height now, full bleed
     and gradient shaded, so the pool is redundant here. Only the drawing goes:
     the <svg> keeps its box, because its position is what tells the canvas
     where the waterline is. */
  .waterline--hero .waterline__wash,
  .waterline--hero .waterline__line,
  .waterline--hero .waterline__foam{display:none}
  .hero__harbour::before{opacity:.5}

  /* The same problem one section down, and the same cause. A fleet row puts
     its waterline at 35% with the two vessels straddling it left and right.
     Stacked, they sit one above the other and that fraction lands at 64% of
     the row — measured nine pixels above the start of the second vessel's
     paragraph, whose wash then swallowed the whole thing.

     So on a phone the water goes UNDER both vessels rather than between them:
     they ride at anchor above one surface instead of being cut in half by it.
     And it runs edge to edge, because a filled box the width of the text
     column shows two vertical seams down the middle of the page and stops
     looking like water at all. */
  .waterline--row{top:68%;height:40%;left:50%;width:100vw;margin-left:-50vw}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.hero__scroll i::after{animation:none}.vessel__float,.metric{will-change:auto!important;transform:none!important}.hero-tool{will-change:auto!important;transform:scale(var(--scale,1))!important}.button,.vessel__arrow{transition:none!important}
}

@media(max-height:800px) and (min-width:981px){
  .hero{padding-top:112px;padding-bottom:38px;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:46px}
  .hero h1{font-size:clamp(3.45rem,6.2vw,5.5rem);line-height:.87}
  .hero__lede{font-size:1.02rem;line-height:1.48;margin-top:24px;max-width:54ch}
  .hero__actions{margin-top:25px}.hero__facts{margin-top:23px}.hero__harbour{height:510px;min-height:0}.hero__copy{padding-bottom:24px}
}