@charset "UTF-8";
/* ==========================================================================
   Marinakis Marine Services - v2
   A yacht is a closed system in a hostile environment. The page is the descent
   from the bright surface into the machine-lit interior and back up again, and
   ice cyan is the product itself: the cold, travelling through the vessel.

   1  Fonts          6  Buttons & links      11  Cross-section
   2  Tokens         7  Header & nav         12  Proof / ledger
   3  Reset & base   8  Sticky call dock     13  Process
   4  Layout & zones 9  Hero                 14  Areas / contact / form
   5  Motion         10 Systems list         15  Footer, pages, responsive
   ========================================================================== */

/* 1 -------------------------------------------------------------- fonts */
@font-face{font-family:"Sofia Cond";src:url(../fonts/sofia-cond-greek.woff2) format("woff2");
  font-weight:100 1000;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Sofia Cond";src:url(../fonts/sofia-cond-latin.woff2) format("woff2");
  font-weight:100 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Commissioner;src:url(../fonts/commissioner-greek.woff2) format("woff2");
  font-weight:100 900;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:Commissioner;src:url(../fonts/commissioner-latin.woff2) format("woff2");
  font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:"MMS Mono";src:url(../fonts/mono-greek.woff2) format("woff2");
  font-weight:600;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"MMS Mono";src:url(../fonts/mono-latin.woff2) format("woff2");
  font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}

/* 2 -------------------------------------------------------------- tokens */
:root{
  /* surface */
  --paper:#F6F8FA; --paper-2:#E9EFF4; --mist:#DCE6EE;
  /* deep */
  --navy-900:#04101C; --navy-800:#08202F; --navy-700:#0C2E44; --navy-600:#12405C;
  /* ink */
  --ink:#06121E; --ink-2:#3A4E60; --ink-3:#5B7185;
  /* action - marine blue, and nothing else is allowed to use it */
  --blue:#0F62C4; --blue-2:#1B7BE0; --blue-deep:#0A4E9E;
  /* the cold */
  --ice:#7BE4F2; --ice-2:#38C6DE; --ice-dim:#BEF0F8; --ice-ink:#066B7E;
  /* the sun, used sparingly and only where the photograph is already warm */
  --gold:#E7B266;

  --rule:rgba(6,18,30,.14);
  --rule-dark:rgba(190,240,248,.16);

  /* type */
  --f-display:"Sofia Cond","Sofia Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:Commissioner,"Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"MMS Mono","JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --t-hero:clamp(2.65rem,6.7vw,5.7rem);
  --t-d1:clamp(2.1rem,5vw,4.1rem);
  --t-d2:clamp(1.65rem,3.2vw,2.6rem);
  --t-d3:clamp(1.3rem,2vw,1.72rem);
  --t-h4:clamp(1.05rem,1.4vw,1.22rem);
  --t-lead:clamp(1.06rem,1.32vw,1.3rem);
  --t-body:clamp(.98rem,1.02vw,1.06rem);
  --t-sm:.875rem;
  --t-mono:clamp(.66rem,.78vw,.76rem);

  /* rhythm - three different densities, never one padding everywhere */
  --pad-tight:clamp(3.2rem,5.4vw,5rem);
  --pad-base:clamp(4.8rem,8.5vw,8rem);
  --pad-air:clamp(6.5rem,13vw,12rem);
  --gut:clamp(20px,5vw,64px);
  --maxw:1360px;
  --measure:64ch;

  /* motion - a swell, a piston stroke, a valve settling. Not the house two. */
  --e-swell:cubic-bezier(.62,.02,.16,1);
  --e-stroke:cubic-bezier(.85,0,.15,1);
  --e-settle:cubic-bezier(.2,.85,.28,1);
  --e-out:cubic-bezier(.16,.86,.32,1);
  --d1:.22s; --d2:.46s; --d3:.9s; --d4:1.35s;

  /* frames and elevation - a hairline on the edge of the picture itself plus a
     soft lift under the box. Radii stay small: this is a workshop, not an app. */
  --ring:inset 0 0 0 1px rgba(6,18,30,.13);
  --ring-ice:inset 0 0 0 1px rgba(190,240,248,.2);
  --lift:0 1px 2px rgba(6,18,30,.04), 0 10px 28px -14px rgba(6,18,30,.26);
  --lift-hi:0 2px 6px rgba(6,18,30,.07), 0 22px 46px -18px rgba(6,18,30,.34);
  --r:3px;

  --nav-h:72px;
  --dock-h:0px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* 3 -------------------------------------------------------- reset & base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-body)/1.62 var(--f-body);
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}                       /* the attribute height must never win over the layout */
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice-2);outline-offset:3px;border-radius:2px}
.zone--deep :focus-visible{outline-color:var(--ice)}
::selection{background:var(--ice);color:var(--navy-900)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:200;background:var(--blue);color:#fff;
  padding:.75rem 1.1rem;border-radius:2px;transition:top var(--d1) var(--e-settle)}
.skip:focus{top:12px}

/* 4 ------------------------------------------------------- layout & zones */
.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.sec{padding-block:var(--pad-base);position:relative}
.sec--tight{padding-block:var(--pad-tight)}
.sec--air{padding-block:var(--pad-air)}

.zone--surface{background:var(--paper);color:var(--ink)}
.zone--mid{background:var(--paper-2);color:var(--ink)}
.zone--deep{background:var(--navy-900);color:#EAF4F8;position:relative;isolation:isolate}
.zone--deep::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.16;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.zone--deep > *{position:relative;z-index:1}
.zone--deep h2,.zone--deep h3{color:#fff}
.zone--deep .lede,.zone--deep p{color:#C6DCE6}

/* the waterline: every crossing between light and deep is a designed edge */
.waterline{height:1px;border:0;margin:0;background:
  linear-gradient(90deg,transparent,rgba(123,228,242,.55) 18%,rgba(123,228,242,.55) 82%,transparent)}
.zone--deep + .zone--surface,.zone--surface + .zone--deep{position:relative}

/* type ------------------------------------------------------------------ */
.kicker{font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice-ink);display:flex;align-items:center;gap:.75rem}
.kicker::before{content:"";width:clamp(18px,3vw,42px);height:1px;background:currentColor;flex:none}
.zone--deep .kicker{color:var(--ice)}
.d1,.d2,.d3{font-family:var(--f-display);font-weight:800;letter-spacing:-.018em;
  line-height:.98;text-wrap:balance}
.d1{font-size:var(--t-d1)}
.d2{font-size:var(--t-d2);line-height:1.02}
.d3{font-size:var(--t-d3);line-height:1.08;letter-spacing:-.012em}
.lede{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:var(--measure)}
.mono{font:600 var(--t-mono)/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600}

/* 5 -------------------------------------------------------------- motion */
/* Four verbs, one per kind of content, so movement carries meaning:
   type wipes up per line, images clip open, rules draw, data ticks.       */
[data-rev]{--rev-d:0ms}
@media (prefers-reduced-motion:no-preference){
  [data-rev]{opacity:0}
  [data-rev="up"]   {transform:translate3d(0,22px,0)}
  [data-rev="right"]{transform:translate3d(-18px,0,0)}
  [data-rev]{transition:opacity var(--d3) var(--e-swell) var(--rev-d),
                         transform var(--d3) var(--e-swell) var(--rev-d)}
  [data-rev].is-in{opacity:1;transform:none}

  /* images: a clip opening from the bottom while the picture settles back to 1 */
  .frame{overflow:hidden;border-radius:var(--r)}
  .frame img{transform:scale(1.07);transition:transform 1.5s var(--e-swell) var(--rev-d)}
  .frame.is-in img{transform:scale(1)}
  .frame::after{content:"";position:absolute;inset:0;background:var(--navy-900);
    transform-origin:50% 100%;transform:scaleY(1);
    transition:transform 1.1s var(--e-stroke) var(--rev-d)}
  .frame.is-in::after{transform:scaleY(0)}

  /* rules: draw from the left before the row's content arrives */
  .drawline{transform:scaleX(0);transform-origin:0 50%;
    transition:transform 1s var(--e-stroke) var(--rev-d)}
  .is-in > .drawline,.drawline.is-in{transform:scaleX(1)}

  /* headline lines, split by JS into .ln > span */
  .ln{display:block;overflow:hidden;padding-block:.02em}
  .ln > span{display:block;transform:translate3d(0,105%,0);
    transition:transform 1.05s var(--e-swell) var(--ln-d,0ms)}
  .is-in .ln > span{transform:none}
}
@media (prefers-reduced-motion:reduce){
  [data-rev],.frame img,.ln>span{opacity:1!important;transform:none!important}
  /* the panel and the dock arrive without sliding */
  #mobile-nav,.dock{transition:visibility var(--d1),opacity var(--d1)}
  #mobile-nav{transform:none;opacity:0}
  #mobile-nav.is-open{opacity:1}
  .dock{transform:none!important}
  .frame::after{display:none}
  .drawline{transform:none}
}

/* icons ----------------------------------------------------------------- */
.icon{flex:none;color:currentColor}
@media (prefers-reduced-motion:no-preference){
  .ic-spin{animation:mms-spin 22s linear infinite;animation-play-state:paused}
  .ic-fall{animation:mms-fall 2.6s var(--e-swell) infinite;animation-play-state:paused}
  .ic-pulse{animation:mms-pulse 3.4s var(--e-settle) infinite;animation-play-state:paused}
  .ic-turn{animation:mms-turn 3.2s var(--e-settle) infinite;animation-play-state:paused}
  .ic-sweep{animation:mms-sweep 3s var(--e-swell) infinite;animation-play-state:paused}
  .ic-hand{animation:mms-spin 8s steps(12) infinite;animation-play-state:paused}
  .ic-swing{animation:mms-swing 4.4s var(--e-settle) infinite;animation-play-state:paused}
  .ic-shine,.ic-draw{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset 1s var(--e-swell)}
  .ic-live .ic-spin,.ic-live .ic-fall,.ic-live .ic-pulse,.ic-live .ic-turn,
  .ic-live .ic-sweep,.ic-live .ic-hand,.ic-live .ic-swing{animation-play-state:running}
  .ic-live .ic-shine,.ic-live .ic-draw{stroke-dashoffset:0}
}
@keyframes mms-spin{to{transform:rotate(360deg)}}
@keyframes mms-fall{0%,12%{transform:translateY(0);opacity:0}
  24%{opacity:1}62%{transform:translateY(10px);opacity:1}80%,100%{transform:translateY(13px);opacity:0}}
@keyframes mms-pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mms-turn{0%,72%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}44%{transform:rotate(10deg)}}
@keyframes mms-sweep{0%,100%{opacity:.25;transform:translateX(-2px)}50%{opacity:1;transform:translateX(2px)}}
@keyframes mms-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* 6 --------------------------------------------------------- buttons */
/* Square-shouldered, not pills: this is a workshop, not an app. */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.45rem;border:0;
  border-radius:3px;font:600 .94rem/1 var(--f-body);letter-spacing:.005em;cursor:pointer;
  position:relative;transition:background var(--d1) var(--e-settle),
  color var(--d1) var(--e-settle),transform var(--d1) var(--e-settle)}
.btn .icon{transition:transform var(--d2) var(--e-out)}
.btn:hover .icon{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--go{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.btn--go:hover{background:var(--blue-deep)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);background:rgba(6,18,30,.03)}
.zone--deep .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px var(--rule-dark)}
.zone--deep .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ice);background:rgba(123,228,242,.08)}
.btn--lg{padding:1.1rem 1.7rem;font-size:1rem}
.hdr__cta{padding-block:1.14rem}

/* the phone is never a matching pill - it is the number, big and tappable */
.tel{display:inline-flex;align-items:baseline;gap:.6rem;font-family:var(--f-display);
  font-weight:700;font-size:clamp(1.28rem,2.2vw,1.7rem);letter-spacing:-.01em;
  color:inherit;padding-block:.2rem;position:relative}
.tel span.mono{font-size:var(--t-mono);letter-spacing:.18em;opacity:.66;font-weight:600}
.tel::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;opacity:.28;transform-origin:0 50%;
  transition:transform var(--d2) var(--e-out),opacity var(--d2)}
.tel:hover::after{opacity:1;background:var(--ice-2)}

.arrowlink{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;
  color:var(--blue-deep);position:relative;padding-block:.25rem}
.zone--deep .arrowlink{color:var(--ice)}
.arrowlink .icon{transition:transform var(--d2) var(--e-out)}
.arrowlink:hover .icon{transform:translateX(5px)}
.arrowlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d2) var(--e-out)}
.arrowlink:hover::after{transform:scaleX(1)}

/* 7 -------------------------------------------------------- header & nav */
.hdr{position:fixed;inset:0 0 auto;z-index:90;height:var(--nav-h);display:flex;align-items:center;
  transition:background var(--d2) var(--e-settle),box-shadow var(--d2) var(--e-settle)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(246,248,250,.86);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--rule);transition:opacity var(--d2) var(--e-settle)}
.hdr.is-stuck::before{opacity:1}
/* over a dark chapter the stuck bar goes dark too, instead of dropping a white slab
   across the middle of the descent */
.hdr--dark::before{background:rgba(4,16,28,.82);box-shadow:0 1px 0 rgba(190,240,248,.14)}
.brand__stack{display:grid}
.brand__stack picture{grid-area:1/1}
.brand__stack img{transition:opacity var(--d2) var(--e-settle)}
.logo--onlight{opacity:0}
.hdr.is-stuck:not(.hdr--dark) .logo--onlight{opacity:1}
.hdr.is-stuck:not(.hdr--dark) .logo--ondark{opacity:0}
.hdr__in{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.brand{display:flex;align-items:center;flex:none;view-transition-name:brand}
.logo{height:auto;width:158px}
.logo--mnav{width:148px}
.logo--ftr{width:190px}
@media (max-width:520px){.logo--nav{width:132px}.logo--ftr{width:164px}}
.nav{display:flex;align-items:center;gap:clamp(.7rem,1.8vw,1.7rem);margin-inline-start:auto}
.nav a{font-weight:500;font-size:.95rem;padding:.4rem 0;position:relative;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ice-2);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d2) var(--e-out)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{font-weight:700}
.hdr--over .nav a,.hdr--over .lang,.hdr--over .menu-toggle{color:#fff}
.hdr.is-stuck .nav a,.hdr.is-stuck .lang,.hdr.is-stuck .menu-toggle{color:var(--ink)}
.hdr.is-stuck.hdr--dark .nav a,.hdr.is-stuck.hdr--dark .lang,
.hdr.is-stuck.hdr--dark .menu-toggle{color:#fff}
.hdr.is-stuck.hdr--dark .lang{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.lang{display:inline-flex;align-items:center;gap:.4rem;font:600 var(--t-mono)/1 var(--f-mono);
  letter-spacing:.14em;padding:.55rem .7rem;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow var(--d1)}
.hdr--over .lang{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.hdr.is-stuck .lang{box-shadow:inset 0 0 0 1px var(--rule)}
.lang:hover{box-shadow:inset 0 0 0 1px var(--ice-2)}
.hdr__cta{display:none}
@media (min-width:1080px){.hdr__cta{display:inline-flex}}

.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:0;margin-inline-start:auto;cursor:pointer;color:var(--ink)}
#mobile-nav{position:fixed;inset:0;z-index:95;background:var(--navy-900);color:#fff;
  display:grid;grid-template-rows:var(--nav-h) 1fr auto;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gut) calc(env(safe-area-inset-bottom) + 1.5rem);
  transform:translate3d(0,-100%,0);visibility:hidden;
  transition:transform var(--d3) var(--e-stroke),visibility var(--d3)}
#mobile-nav.is-open{transform:none;visibility:visible}
#mobile-nav .mnav__top{display:flex;align-items:center;justify-content:space-between;
  margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}

#mobile-nav nav{display:grid;align-content:center;min-height:0}
#mobile-nav ul{display:flex;flex-direction:column;gap:.2rem}
#mobile-nav ul a{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,9vw,3rem);
  line-height:1.06;display:block;padding:.22rem 0;color:#fff}
#mobile-nav ul a[aria-current]{color:var(--ice)}
#mobile-nav .mnav__foot{display:grid;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--rule-dark)}
#mobile-nav .mnav__foot .tel{color:#fff}
.menu-toggle__shut{display:none}
.menu-toggle[aria-expanded=true]{position:fixed;right:var(--gut);top:14px;z-index:96;color:#fff}
.menu-toggle[aria-expanded=true] .menu-toggle__open{display:none}
.menu-toggle[aria-expanded=true] .menu-toggle__shut{display:block}
@media (max-width:1023px){
  .menu-toggle{display:inline-flex;margin-inline-start:0}
  .nav{display:none}
  /* The switch used to live only inside the burger panel, so on a phone the site
     looked Greek-only until you opened the menu. It sits in the bar now, and it
     takes the free space so it lands beside the burger, not beside the logo. */
  .lang{margin-inline-start:auto;min-height:44px;padding-inline:.62rem}
  #mobile-nav .lang{display:inline-flex;color:#fff;box-shadow:inset 0 0 0 1px var(--rule-dark)}
  #mobile-nav .lang:hover{box-shadow:inset 0 0 0 1px var(--ice)}
}
@media (max-width:359px){.lang .icon{display:none}}
/* .hdr owns a stacking context at z-index 90, so the close button cannot rise
   above the panel from inside it unless the whole header does. Once it does, the
   rest of the bar has to stand down or it prints a second logo over the panel. */
body.is-locked .hdr{z-index:97;background:none}
body.is-locked .hdr::before{opacity:0}
body.is-locked .hdr__in > *:not(.menu-toggle){visibility:hidden}
body.is-locked{overflow:hidden}

/* 8 ------------------------------------------------------ sticky call dock */
.dock{position:fixed;z-index:80;opacity:0;visibility:hidden;
  transition:opacity var(--d2) var(--e-settle),transform var(--d2) var(--e-settle),visibility var(--d2)}
.dock.is-on{opacity:1;visibility:visible}
/* interior pages already carry a header CTA and, on service pages, a sticky
   quote card - a third floating copy of the same action is just noise */
@media (min-width:1024px){body:not(.is-home) .dock{display:none}}
@media (min-width:1024px){
  .dock{right:var(--gut);bottom:26px;display:flex;align-items:center;gap:.55rem;
    background:rgba(4,16,28,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding:.5rem .5rem .5rem 1.1rem;border-radius:4px;
    box-shadow:0 14px 40px rgba(4,16,28,.34),inset 0 0 0 1px rgba(123,228,242,.22);
    transform:translate3d(0,14px,0)}
  .dock.is-on{transform:none}
  .dock__lbl{font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--ice);margin-inline-end:.35rem}
  .dock .btn{padding:.72rem 1.05rem;font-size:.88rem}
  .dock .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
}
@media (max-width:1023px){
  .dock{left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--rule-dark);
    padding-bottom:env(safe-area-inset-bottom);transform:translate3d(0,100%,0)}
  .dock.is-on{transform:none}
  .dock__lbl{display:none}
  .dock .btn{border-radius:0;justify-content:center;padding:1.05rem .6rem;font-size:.95rem}
  .dock .btn--ghost{background:var(--navy-900);color:#fff;box-shadow:none}
  body{padding-bottom:var(--dock-h)}
}

/* 9 ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;
  isolation:isolate;background:var(--navy-900);color:#fff;overflow:hidden}
@supports not (height:100svh){.hero{min-height:100vh}}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%}
.hero__media video{opacity:0;transition:opacity .85s linear,transform 1.1s linear}
.hero__media video.is-live{opacity:1}
.hero__media video.is-going{transform:scale(1.045)}
/* Centred type needs a centred plate: a vertical wash for the nav and the
   legend, plus an elliptical vignette that sits under the headline itself. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(66% 60% at 50% 42%,rgba(4,16,28,.76) 0%,rgba(4,16,28,.66) 46%,rgba(4,16,28,.22) 80%,rgba(4,16,28,0) 100%),
  linear-gradient(to top,rgba(4,16,28,.9) 0%,rgba(4,16,28,.58) 16%,rgba(4,16,28,.16) 38%,rgba(4,16,28,.14) 70%,rgba(4,16,28,.74) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.2;mix-blend-mode:overlay}
.hero__in{position:relative;z-index:2;align-self:center;text-align:center;
  padding-block:calc(var(--nav-h) + 2rem) clamp(1.4rem,3vw,2.4rem)}
.hero__eyeline{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin-bottom:clamp(1rem,2vw,1.7rem)}
.hero__eyeline .mono{color:var(--ice);letter-spacing:.22em}
.hero__eyeline i{display:block;width:clamp(28px,6vw,72px);height:1px;background:var(--ice);opacity:.6}
.hero h1{font-family:var(--f-display);font-weight:800;font-size:var(--t-hero);line-height:.93;
  letter-spacing:-.022em;max-width:19ch;margin:0 auto clamp(1rem,2vw,1.5rem);color:#fff;
  text-wrap:balance;
  text-shadow:0 1px 3px rgba(4,16,28,.5),0 4px 40px rgba(4,16,28,.6)}
.hero__sub{font-size:var(--t-lead);line-height:1.5;max-width:56ch;margin-inline:auto;color:#fff;
  text-shadow:0 1px 3px rgba(4,16,28,.55),0 2px 22px rgba(4,16,28,.7)}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(.9rem,2.2vw,1.9rem);margin-top:clamp(1.7rem,3.2vw,2.6rem)}
.hero .hero__acts{justify-content:center}
.hero__acts .tel{color:#fff}
.hero__legend{position:relative;z-index:2;border-top:1px solid rgba(123,228,242,.26);
  padding-block:1rem clamp(1rem,2vw,1.4rem)}
.hero__legend ul{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.55rem clamp(1rem,2.6vw,2.4rem);align-items:center}
.hero__legend li{display:flex;align-items:center;gap:.5rem;color:#CFE7EF}
.hero__legend li::before{content:"";width:5px;height:5px;background:var(--ice);
  border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(123,228,242,.18)}
.hero__note{margin-top:.6rem;color:#9FC0CF;text-align:center}
.hero__cue{position:absolute;right:calc(var(--gut) - .5rem);bottom:clamp(6rem,10vw,8rem);z-index:2;
  display:none;align-items:center;gap:.9rem;color:#BEF0F8;writing-mode:vertical-rl;opacity:.8}
.hero__cue .mono{letter-spacing:.28em}
@media (min-width:900px){.hero__cue{display:flex}}
.hero__cue .icon{writing-mode:horizontal-tb;animation:mms-cue 2.6s var(--e-settle) infinite}
@keyframes mms-cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__cue .icon{animation:none}}

/* 10 ------------------------------------------------- systems, as cards */
.sys__head{display:grid;gap:clamp(1rem,2vw,1.6rem);margin-bottom:clamp(2rem,4vw,3.2rem)}
@media (min-width:900px){
  .sys__head{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end;
    column-gap:clamp(2rem,6vw,6rem)}
}

/* Every service shows its photograph at every width. The picture is the part an
   owner recognises, so hiding it behind a desktop hover was the wrong call. */
.sysgrid{display:grid;gap:clamp(.85rem,2vw,1.8rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:620px){.sysgrid{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2rem)}}
@media (min-width:1040px){.sysgrid{grid-template-columns:repeat(3,1fr)}}

.syscard{display:grid;grid-template-rows:auto 1fr auto;gap:.85rem;align-content:start;
  border-radius:3px;isolation:isolate}
.syscard__media{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/2;background:var(--navy-800);box-shadow:var(--ring),var(--lift);
  transition:box-shadow var(--d2) var(--e-settle),transform var(--d2) var(--e-settle)}
.syscard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-swell),filter var(--d3) var(--e-swell)}
.syscard__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,16,28,.4) 0%,rgba(4,16,28,0) 46%);
  transition:opacity var(--d3) var(--e-swell)}
.syscard__ic{position:absolute;left:0;bottom:0;z-index:2;display:grid;place-items:center;
  width:clamp(38px,8vw,52px);aspect-ratio:1;background:var(--navy-900);color:var(--ice);
  transition:background var(--d2) var(--e-settle)}
.syscard__n{position:absolute;right:.55rem;top:.5rem;z-index:2;padding:.3rem .45rem;
  font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;color:#fff;
  background:rgba(4,16,28,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.syscard__body{display:block}
.syscard__t{display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.18rem,2.4vw,1.72rem);line-height:1.02;letter-spacing:-.014em;
  transition:color var(--d2)}
.syscard__d{display:none;color:var(--ink-2);font-size:.95rem;margin-top:.35rem;max-width:34ch}
.syscard__go{display:none;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;
  color:var(--blue-deep)}
.syscard__go .icon{transition:transform var(--d2) var(--e-out)}
@media (min-width:620px){
  .syscard__d{display:block}
  .syscard__go{display:inline-flex}
}
@media (hover:hover){
  .syscard:hover .syscard__media{box-shadow:var(--ring),var(--lift-hi);transform:translateY(-3px)}
  .syscard:hover .syscard__media img{transform:scale(1.055)}
  .syscard:hover .syscard__media::after{opacity:.6}
  .syscard:hover .syscard__ic{background:var(--blue)}
  .syscard:hover .syscard__t{color:var(--blue-deep)}
  .syscard:hover .syscard__go .icon{transform:translateX(5px)}
}

/* problem chapter ------------------------------------------------------- */
.prob{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){.prob{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.prob h2{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,5.6vw,4.4rem);
  line-height:.98;letter-spacing:-.02em;text-wrap:balance;
  margin-block:clamp(1rem,2vw,1.6rem) clamp(1.2rem,2.4vw,1.8rem)}
.prob p + p{margin-top:1rem}
.gauge{display:grid;gap:clamp(1rem,2vw,1.6rem);font-family:var(--f-mono);
  padding:clamp(1.3rem,2.6vw,2rem) clamp(1.2rem,2.4vw,1.8rem);border-radius:var(--r);
  background:rgba(255,255,255,.045);box-shadow:var(--ring-ice)}
.gauge__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.gauge__lbl{font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#9FC4D2;width:5.2rem;font-weight:600}
.gauge__bar{height:6px;background:rgba(190,240,248,.13);position:relative;overflow:hidden;
  border-radius:1px}
.gauge__bar i{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.5s var(--e-swell)}
.is-in .gauge__bar i{transform:scaleX(var(--v,1))}
.gauge__row--out i{background:linear-gradient(90deg,var(--gold),#F4906A)}
.gauge__row--in  i{background:linear-gradient(90deg,var(--ice-2),var(--ice))}
.gauge__val{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:3.4ch;text-align:right}
.gauge__row--out .gauge__val{color:var(--gold)}
.gauge__row--in .gauge__val{color:var(--ice)}
@media (prefers-reduced-motion:reduce){.gauge__bar i{transform:scaleX(var(--v,1))}}

/* 11 ----------------------------------------------------- cross-section */
/* v2.0 pinned this over four screen-heights of scroll. It is one idea, not four,
   so it is now a normal section: the drawing arrives, the four circuits light in
   a quick stagger, and the four notes are all readable at once. */
.cut{position:relative;background:var(--navy-900)}
.zone--deep + .cut{padding-top:clamp(2rem,4vw,3.5rem)}
.cut__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem clamp(1rem,3vw,2.4rem);
  margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.cut__head h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1;letter-spacing:-.018em;color:#fff}
.cut__hint{color:#7FA6B8;font-size:.9rem}
.cut__figure{position:relative;margin-bottom:clamp(1.6rem,3.4vw,2.8rem)}
.cut-svg{width:100%;height:auto}

.cut__chapters{display:grid;gap:clamp(1.2rem,2.6vw,2rem)}
@media (min-width:680px){.cut__chapters{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cut__chapters{grid-template-columns:repeat(4,1fr)}}
.cut__ch{padding:1.1rem clamp(.9rem,1.6vw,1.2rem) 1.3rem;border-radius:var(--r);
  background:rgba(255,255,255,.04);box-shadow:var(--ring-ice)}
.cut__ch h3{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);
  font-weight:800;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1;color:#fff;
  margin-bottom:.5rem}
.cut__ch h3 .icon{color:var(--ice)}
.cut__ch p{color:#B9D4DE;font-size:.94rem;max-width:42ch}
.cut__ch a{margin-top:.7rem;display:inline-flex}

/* the drawing */
.cut-station{stroke:var(--ice);stroke-width:1;opacity:.055;stroke-dasharray:3 8}
.cut-wl{stroke:var(--ice);stroke-width:1.1;opacity:.42;stroke-dasharray:16 9}
.cut-wave{stroke:var(--ice);stroke-width:1.2;fill:none}
.cut-sea-fill{fill:var(--navy-900);opacity:.6}
.cut-tick,.cut-room-label{fill:var(--ice-dim);font-family:var(--f-mono);font-weight:600;
  font-size:11px;letter-spacing:.16em}
.cut-room-label{opacity:.34;text-anchor:middle;font-size:10px}
.cut-hull-fill{fill:#0B2135;opacity:.92}
.cut-house{fill:#0B2135;opacity:.8;stroke:none}
.cut-line{stroke:#A9DCEC;stroke-width:1.3;opacity:.55;fill:none}
.cut-line--strong{stroke-width:2;opacity:.86}
.cut-line--soft{opacity:.24}
.cut-room{stroke:#A9DCEC;stroke-width:1;opacity:.16;fill:none}

/* Each circuit draws itself in over 1.1s, 260ms apart, so all four are lit
   1.9s after the drawing enters the viewport. Quick, and it still reads as
   the cold spreading through the vessel rather than four things appearing. */
.cut-sys{--on:0}
.cut-sys--air{--lit-d:0ms}
.cut-sys--cold{--lit-d:260ms}
.cut-sys--water{--lit-d:520ms}
.cut-sys--pumps{--lit-d:780ms}
.cut-sys-line,.cut-sys-box,.cut-sys-aux{stroke:var(--ice);fill:none;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--on));
  opacity:calc(.12 + .84*var(--on));
  transition:stroke-dashoffset 1.1s var(--e-swell) var(--lit-d,0ms),
             opacity .6s linear var(--lit-d,0ms)}
.cut-sys-line{stroke-width:2.6}
.cut-sys-box,.cut-sys-aux{stroke-width:1.7}
.cut-node{fill:var(--navy-900);stroke:var(--ice);stroke-width:2.2;
  opacity:calc(.14 + .86*var(--on));
  transition:opacity .5s linear calc(var(--lit-d,0ms) + 700ms)}
.cut.is-lit .cut-sys{--on:1}
.cut.is-lit .cut-node{filter:drop-shadow(0 0 6px rgba(123,228,242,.7))}
@media (prefers-reduced-motion:reduce){
  .cut-sys{--on:1}
  .cut-sys-line,.cut-sys-box,.cut-sys-aux,.cut-node{transition:none}
}
@media (max-width:640px){
  .cut-room-label,.cut-tick{display:none}
  .cut__figure{overflow:hidden}
  .cut-svg{transform:scale(1.06);transform-origin:50% 52%}
}

/* 12 -------------------------------------------------------- proof / ledger */
.proof__head{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:end;
  margin-bottom:clamp(2.2rem,5vw,4rem)}
@media (min-width:940px){.proof__head{grid-template-columns:minmax(0,1fr) auto}}
.ledger{display:grid;grid-auto-flow:column;gap:clamp(1.4rem,3.4vw,3rem);align-items:end}
.ledger__i{display:grid;gap:.3rem}
.ledger__v{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.5rem);
  line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.zone--deep .ledger__v{color:#fff}
.ledger__l{font:600 var(--t-mono)/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);max-width:11ch}
.zone--deep .ledger__l{color:#8FB3C4}
.ledger__i{position:relative;padding-top:.9rem}
.ledger__i::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ice-2);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--e-stroke) var(--rev-d,0ms)}
.is-in .ledger__i::before{transform:scaleX(1)}
@media (max-width:640px){.ledger{grid-auto-flow:row;gap:1.1rem}}

/* The kinds of work taken on. No photography here on purpose: the only images
   available were AI-generated, and an invented picture under a claim about work
   done is a claim the company cannot back. */
/* With the photographs gone these had to earn their space some other way, so
   each job is its own card rather than a row in a long ruled list. */
.jobs{display:grid;gap:clamp(.8rem,1.8vw,1.2rem);counter-reset:job}
@media (min-width:780px){.jobs{grid-template-columns:repeat(2,1fr)}}
.job{display:grid;grid-template-columns:auto auto 1fr;gap:.8rem clamp(.9rem,2vw,1.4rem);
  align-items:start;padding:clamp(1.1rem,2.2vw,1.5rem) clamp(1.1rem,2.2vw,1.6rem);
  background:#fff;border-radius:var(--r);box-shadow:var(--ring),var(--lift);
  transition:box-shadow var(--d2) var(--e-settle),transform var(--d2) var(--e-settle)}
@media (hover:hover){.job:hover{box-shadow:var(--ring),var(--lift-hi);transform:translateY(-2px)}}
.zone--deep .job{background:rgba(255,255,255,.045);box-shadow:var(--ring-ice)}
.job__n{font:600 var(--t-mono)/1.5 var(--f-mono);letter-spacing:.16em;color:var(--ink-3)}
.job__ic{color:var(--ice-ink);margin-top:-.15rem}
.zone--deep .job__ic{color:var(--ice)}
.job h3{font-family:var(--f-display);font-weight:800;font-size:clamp(1.12rem,1.8vw,1.4rem);
  line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.job p{color:var(--ink-2);font-size:.94rem;margin-top:.3rem;max-width:46ch}
.zone--deep .job p{color:#9FC4D2}

/* the company block: the client's own mark over a vessel, and real words */
.who{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate;
  box-shadow:var(--ring-ice),var(--lift);
  min-height:clamp(18rem,36vw,26rem);display:grid;place-items:center;
  background:var(--navy-900)}
.who__img{position:absolute;inset:0;z-index:-1}
.who__img img{width:100%;height:100%;object-fit:cover;opacity:.85}
.who::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(86% 66% at 50% 46%,rgba(4,16,28,.5) 0%,rgba(4,16,28,.7) 62%,rgba(4,16,28,.84) 100%),
  var(--grain);background-blend-mode:normal,overlay}
.who__in{display:grid;justify-items:center;gap:clamp(1rem,2.2vw,1.5rem);
  padding:clamp(1.8rem,4vw,3rem);text-align:center}
.logo--who{width:clamp(190px,26vw,270px)}
.who__line{color:var(--ice-dim);opacity:.92;letter-spacing:.12em;max-width:40ch;line-height:1.9}
.who__since{display:flex;gap:clamp(1.4rem,4vw,3rem);margin:0}
.who__since > div{display:grid;gap:.25rem;padding-top:.8rem;border-top:1px solid rgba(190,240,248,.26)}
.who__since dt{font:600 var(--t-mono)/1.3 var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:#8FB3C4}
.who__since dd{margin:0;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}

/* full-bleed statement band --------------------------------------------- */
.band{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(5rem,13vw,11rem);color:#fff}
.band__bg{position:absolute;inset:0;z-index:-2}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(4,16,28,.93) 0%,rgba(4,16,28,.74) 34%,rgba(4,16,28,.3) 72%,rgba(4,16,28,.12) 100%),
  linear-gradient(to top,rgba(4,16,28,.5),transparent 46%)}
.band h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.6rem);
  line-height:1;letter-spacing:-.02em;margin-block:.9rem 1rem;color:#fff}
.band p{color:#CFE4EC;max-width:46ch}

/* 13 ------------------------------------------------------------- process */
.proc{display:grid;gap:clamp(2rem,5vw,4rem);min-width:0}
.proc > *{min-width:0}
@media (min-width:960px){
  .proc{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(2.5rem,7vw,7rem);align-items:start}
  .proc__media{position:sticky;top:calc(var(--nav-h) + clamp(1.5rem,5vh,4rem));
    width:100%;height:clamp(21rem,48vh,27rem);overflow:hidden}
}
.proc__media{display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r);
  min-width:0;overflow:hidden;background:var(--navy-800);box-shadow:var(--ring-ice),var(--lift)}
.proc__media img{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s var(--e-swell),transform 1.6s var(--e-swell)}
.proc__media img.is-on{opacity:1}
.proc__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,16,28,.62),transparent 52%)}
@media (max-width:959px){.proc__media{position:relative;aspect-ratio:16/10}}
.steps{display:grid;position:relative;padding-inline-start:clamp(2.2rem,5vw,3.4rem)}
.steps::before{content:"";position:absolute;left:0;top:.6rem;bottom:2.2rem;width:1px;
  background:var(--rule)}
.zone--deep .steps::before{background:var(--rule-dark)}
.steps__fill{position:absolute;left:0;top:.6rem;bottom:2.2rem;width:1px;background:var(--ice-2);
  transform:scaleY(var(--p,0));transform-origin:50% 0;box-shadow:0 0 10px rgba(56,198,222,.4)}
.zone--deep .steps__fill{background:var(--ice);box-shadow:0 0 10px rgba(123,228,242,.55)}
.step{padding-block:clamp(1.6rem,4vw,3.2rem);position:relative}
.step::before{content:"";position:absolute;left:calc(clamp(2.2rem,5vw,3.4rem)*-1 - 4px);
  top:calc(clamp(1.6rem,4vw,3.2rem) + .35rem);width:9px;height:9px;border-radius:50%;
  background:var(--paper-2);box-shadow:inset 0 0 0 1.5px rgba(6,18,30,.28);
  transition:box-shadow var(--d2),background var(--d2)}
.zone--deep .step::before{background:var(--navy-900);box-shadow:inset 0 0 0 1.5px rgba(190,240,248,.45)}
.step.is-on::before{background:var(--ice-2);box-shadow:0 0 0 4px rgba(56,198,222,.22)}
.zone--deep .step.is-on::before{background:var(--ice);box-shadow:0 0 0 4px rgba(123,228,242,.2)}
.step__n{font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.2em;color:var(--ice-ink)}
.zone--deep .step__n{color:var(--ice);opacity:.85}
.step h3{font-family:var(--f-display);font-weight:800;font-size:clamp(1.35rem,2.8vw,2.05rem);
  line-height:1.02;letter-spacing:-.016em;margin-block:.5rem .45rem}
.step p{max-width:44ch}

/* 14 --------------------------------------------- areas / contact / form */
.marinas{display:flex;flex-wrap:wrap;gap:.55rem .5rem;margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.marinas li{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;
  border-radius:var(--r);background:rgba(4,16,28,.35);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);box-shadow:var(--ring-ice);font-size:.92rem;color:#EAF4F8}
.marinas li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ice)}

/* Third child of the contact grid. On a wide screen it takes the second row of
   the narrow column, under the phone numbers, and the form spans both rows. */
.cmap{min-width:0}
@media (min-width:960px){
  .cgrid--map{grid-template-rows:auto 1fr;align-items:start}
  .cgrid--map > :nth-child(2){grid-column:2;grid-row:1 / span 2}
}
.cmap__hd{display:grid;gap:.5rem;max-width:58ch;margin-bottom:clamp(1.1rem,2.4vw,1.6rem)}
.cmap__hd p{color:var(--ink-2)}
/* The height is fixed rather than an aspect ratio: the iframe arrives late and a
   box that grows on arrival is a layout shift on the page people land on to call. */
.cmap__f{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  box-shadow:var(--ring),var(--lift)}
/* Sits under the frame. Google paints an opaque map over it; if Google never
   arrives, the panel still carries the address instead of an empty grey box. */
.cmap__fb{position:absolute;inset:0;z-index:0;margin:0;display:grid;align-content:center;
  justify-items:center;gap:.7rem;padding:1.5rem;text-align:center;color:var(--ink-2)}
.cmap__f iframe{position:relative;z-index:1;display:block;width:100%;
  height:clamp(300px,40vw,440px);border:0}
.cgrid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:960px){.cgrid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(2.5rem,7vw,6rem)}}
.cinfo{display:grid;gap:clamp(1.2rem,2.6vw,1.9rem);align-content:start}
.cinfo__i{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding-top:1rem;border-top:1px solid var(--rule)}
.zone--deep .cinfo__i{border-color:var(--rule-dark)}
.cinfo__i .icon{color:var(--ice-ink);margin-top:.15rem}
.zone--deep .cinfo__i .icon{color:var(--ice)}
.cinfo dt{font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.4rem}
.zone--deep .cinfo dt{color:#8FB3C4}
.cinfo dd{margin:0;font-size:1.02rem}

.form{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem)}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:.9rem}
.form legend{font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice-ink);padding:0 0 .7rem;width:100%;border-bottom:1px solid var(--rule);margin-bottom:.3rem}
.zone--deep .form legend{color:var(--ice);border-color:var(--rule-dark)}
.f2{display:grid;gap:.9rem}
@media (min-width:640px){.f2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.4rem}
.field > label{font-size:.86rem;font-weight:600;color:var(--ink-2);display:flex;gap:.45rem;align-items:baseline}
.zone--deep .field > label{color:#A9C7D4}
.field > label em{font-style:normal;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.42;font-weight:600}
.field input,.field select,.field textarea{width:100%;font-size:max(16px,1rem);
  padding:.82rem .9rem;border-radius:var(--r);box-shadow:inset 0 1px 2px rgba(6,18,30,.05);
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);
  transition:border-color var(--d1),box-shadow var(--d1)}
.zone--deep .field input,.zone--deep .field select,.zone--deep .field textarea{
  background:rgba(255,255,255,.05);border-color:var(--rule-dark);color:#fff}
.field textarea{min-height:7.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ice-2);
  box-shadow:0 0 0 3px rgba(56,198,222,.18)}
.field[data-bad] input,.field[data-bad] select,.field[data-bad] textarea{border-color:#B23C22}
.field__err{font-size:.8rem;color:#9E3115;min-height:1em}
.zone--deep .field__err{color:#FF9C82}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.form__note{font-size:.85rem;color:var(--ink-3);max-width:46ch}
.zone--deep .form__note{color:#8FB3C4}

/* 15 ------------------------------------------------- footer & page parts */
.ftr{background:var(--navy-900);color:#CFE4EC;padding-block:clamp(3rem,6vw,5rem) 0;position:relative}
.ftr__grid{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:820px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.ftr__brand .logo{margin-bottom:1rem}
.ftr p{color:#8FB3C4;font-size:.94rem;max-width:34ch}
.ftr h2{font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice);margin-bottom:1rem}
.ftr li + li{margin-top:.55rem}
.ftr__hrs{margin-top:1.1rem;line-height:1.75}
.ftr__hrs span{display:block;font:600 var(--t-mono)/1 var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice);margin-bottom:.4rem}
.ftr a{color:#CFE4EC;font-size:.95rem;transition:color var(--d1)}
.ftr a:hover{color:var(--ice)}
.ftr__base{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule-dark);
  padding-block:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  align-items:center;font-size:.84rem;color:#6E93A5}
.ftr__base a{font-size:.84rem;color:#6E93A5}
.credit{font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.35)}
.credit a{font-size:11px;color:rgba(255,255,255,.45)}
.credit a:hover{color:var(--ice)}

/* page header for interior pages ---------------------------------------- */
.phead{position:relative;isolation:isolate;background:var(--navy-900);color:#fff;overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(3.5rem,9vw,7rem)) clamp(2.5rem,6vw,4.5rem)}
.phead__bg{position:absolute;inset:0;z-index:-2}
.phead__bg img{width:100%;height:100%;object-fit:cover}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(4,16,28,.95),rgba(4,16,28,.72) 55%,rgba(4,16,28,.6)),
  linear-gradient(90deg,rgba(4,16,28,.8),rgba(4,16,28,.25))}
.phead h1{font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.3rem,6vw,4.6rem);line-height:.96;letter-spacing:-.022em;
  margin-block:clamp(.8rem,1.6vw,1.2rem) clamp(.8rem,1.6vw,1.1rem);max-width:19ch;color:#fff}
.phead p{color:#CFE4EC;max-width:58ch;font-size:var(--t-lead)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font:600 var(--t-mono)/1 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:#8FB3C4}
.crumbs a{color:var(--ice);display:inline-block;padding-block:.55rem}
.crumbs{margin-block:-.55rem}
.crumbs .icon{opacity:.5}

/* service page ----------------------------------------------------------- */
.svc{display:grid;gap:clamp(2rem,5vw,4.5rem)}
@media (min-width:960px){.svc{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  column-gap:clamp(2.5rem,6vw,5.5rem);align-items:start}}
.svc__body > * + *{margin-top:clamp(1rem,2vw,1.4rem)}
.svc__body h2{font-family:var(--f-display);font-weight:800;font-size:var(--t-d2);
  letter-spacing:-.016em;line-height:1.04;margin-top:clamp(2rem,4vw,3rem)}
.ticks{display:grid;gap:.8rem;margin-top:1.2rem}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  padding-bottom:.8rem;border-bottom:1px solid var(--rule)}
.ticks li .icon{color:var(--ice-ink);margin-top:.18rem}
.signals{display:grid;gap:.7rem;margin-top:1.2rem;counter-reset:s}
.signals li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline;
  padding:.9rem 1.05rem;background:#fff;border-radius:var(--r);
  box-shadow:var(--ring),inset 3px 0 0 var(--ice-2)}
.signals li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font:600 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.12em;color:var(--ice-ink)}
.aside{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:grid;gap:1.2rem}
.aside__card{background:var(--navy-900);color:#fff;padding:clamp(1.3rem,2.6vw,1.9rem);
  border-radius:var(--r);box-shadow:var(--ring-ice),var(--lift);
  display:grid;gap:.9rem;position:relative;overflow:hidden;isolation:isolate}
.aside__card::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.14;
  mix-blend-mode:overlay;z-index:-1}
.aside__card h2{font-family:var(--f-display);font-weight:800;font-size:var(--t-d3);line-height:1.04;color:#fff}
.aside__card p{color:#A9C7D4;font-size:.94rem}
.aside__card .tel{color:#fff}
.otherlist li + li{margin-top:.15rem}
.otherlist a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--rule);transition:padding-inline var(--d2) var(--e-out)}
.otherlist a:hover{padding-inline-start:.5rem;color:var(--blue-deep)}
.otherlist a .icon{color:var(--ink-3);transition:transform var(--d2) var(--e-out)}
.otherlist a:hover .icon{transform:translateX(4px);color:var(--blue-deep)}

/* about page ------------------------------------------------------------- */
.about{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:clamp(2.5rem,6vw,5rem);align-items:start}}
.about__body > * + *{margin-top:1.1rem}
.whys{display:grid;gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:700px){.whys{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.whys{grid-template-columns:repeat(4,1fr)}}
.about__body .whys{grid-template-columns:repeat(2,1fr)}
.why{padding:1.1rem clamp(.9rem,1.6vw,1.2rem) 1.2rem;border-radius:var(--r);
  background:#fff;box-shadow:var(--ring),var(--lift);display:grid;gap:.55rem}
.why::before{content:"";height:3px;width:2.2rem;background:var(--ice-2);border-radius:2px}
.zone--deep .why{background:rgba(255,255,255,.045);box-shadow:var(--ring-ice)}
.why .icon{color:var(--ice-ink)}
.zone--deep .why .icon{color:var(--ice)}
.why h3{font-family:var(--f-display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.008em}
.why p{font-size:.93rem;color:var(--ink-2)}

/* 404 -------------------------------------------------------------------- */
.e404{min-height:76svh;display:grid;place-content:center;text-align:center;gap:1.2rem;
  padding-block:calc(var(--nav-h) + 4rem) 4rem}
.e404 .d1{max-width:18ch;margin-inline:auto}

/* view transitions ------------------------------------------------------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .26s var(--e-settle) both}
  ::view-transition-new(root){animation:vt-in .38s var(--e-swell) both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* print ------------------------------------------------------------------ */
@media print{
  .hdr,.dock,#mobile-nav,.hero__media,.cut,.hero__cue{display:none!important}
  body{background:#fff;color:#000}
  .zone--deep{background:#fff;color:#000}
}

/* 16 ------------------------------------- registered props & scroll-driven */
/* --on is registered so stroke-dashoffset can interpolate it: that is what
   makes each circuit draw itself in rather than snapping on. */
@property --on {syntax:"<number>";inherits:true;initial-value:0}

/* Scroll-driven CSS where failure is harmless: parallax and the reading rule.
   The reveal system deliberately stays on IntersectionObserver, because an
   unsupported timeline there would leave copy invisible. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .parallax{overflow:hidden}
    .parallax img{animation:mms-par linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%;will-change:transform}
    @keyframes mms-par{from{transform:scale(1.14) translateY(-3.2%)}
                       to{transform:scale(1.14) translateY(3.2%)}}
  }
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none;
      background:linear-gradient(90deg,var(--ice-2),var(--ice));transform-origin:0 50%;
      animation:mms-prog linear;animation-timeline:scroll(root block)}
    @keyframes mms-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
.prog{display:none}
@supports (animation-timeline:scroll()){.prog{display:block}}

/* 17 --------------------------------------- services hub, mini-cut, flat steps */
.svcgrid{display:grid;gap:clamp(1.6rem,3.4vw,2.6rem)}
@media (min-width:640px){.svcgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.svcgrid{grid-template-columns:repeat(3,1fr)}}
.svccard{display:grid;gap:.75rem;align-content:start}
.svccard__media{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/2;background:var(--navy-800);box-shadow:var(--ring),var(--lift);
  transition:box-shadow var(--d2) var(--e-settle),transform var(--d2) var(--e-settle)}
@media (hover:hover){
  .svccard:hover .svccard__media{box-shadow:var(--ring),var(--lift-hi);transform:translateY(-3px)}
}
.svccard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-swell)}
.svccard:hover .svccard__media img{transform:scale(1.045)}
.svccard__ic{position:absolute;left:0;bottom:0;z-index:2;display:grid;place-items:center;
  width:58px;height:58px;background:var(--navy-900);color:var(--ice)}
.svccard h2{margin-top:.35rem}
.svccard h2 a{transition:color var(--d1)}
.svccard:hover h2 a{color:var(--blue-deep)}
.svccard > p{color:var(--ink-2);font-size:.96rem}
.svccard__b{display:grid;gap:.45rem;margin-top:.2rem}
.svccard__b li{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
  font-size:.9rem;color:var(--ink-2)}
.svccard__b li .icon{color:var(--ice-ink);margin-top:.22rem}
.svccard .arrowlink{justify-self:start;margin-top:.3rem}

/* the same drawing, reused on a service page with only that circuit lit */
.minicut{background:var(--navy-900);border-radius:var(--r);box-shadow:var(--ring-ice),var(--lift);
  padding:clamp(.8rem,2vw,1.6rem);
  margin-top:1.2rem;overflow:hidden}
@media (min-width:1180px){.minicut{margin-right:clamp(-4rem,-3vw,-1.5rem)}}
.minicut .cut-svg{width:100%;height:auto}
.minicut .cut-sys{--on:0}
.minicut.cut--lit-air   .cut-sys--air,
.minicut.cut--lit-cold  .cut-sys--cold,
.minicut.cut--lit-water .cut-sys--water,
.minicut.cut--lit-pumps .cut-sys--pumps{--on:1}

.stepsflat{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
@media (min-width:700px){.stepsflat{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.stepsflat{grid-template-columns:repeat(4,1fr)}}
.step2{padding-top:1.1rem;border-top:1px solid var(--rule-dark);display:grid;gap:.45rem}
.step2 h3{font-family:var(--f-display);font-weight:800;font-size:var(--t-d3);
  line-height:1.05;letter-spacing:-.012em;color:#fff}
.step2 p{font-size:.94rem}

/* 18 ------------------------------------------------- <picture> plumbing */
/* pic() wraps every image in <picture>. The wrapper is a static inline box by
   default, so any layout that expects the image itself to fill or overlay its
   parent has to reach the wrapper too. */
picture{display:block}
.hero__media picture,
.band__bg picture,
.phead__bg picture,
.who__img picture,
.syscard__media picture,
.svccard__media picture{position:absolute;inset:0;width:100%;height:100%}
.proc__media picture{grid-area:1/1;width:100%;height:100%}
.hero__media picture img,
.band__bg picture img,
.phead__bg picture img,
.who__img picture img,
.syscard__media picture img,
.svccard__media picture img,
.proc__media picture img{width:100%;height:100%;object-fit:cover}

/* 19 -------------------------------------------------------- touch targets */
/* Last in the cascade on purpose: these have to beat the padding each component
   sets for its own look. Every number here was checked with getBoundingClientRect
   at 390px, not inferred from the font size. */
.brand{padding-block:9px}
.lang{padding-block:.9rem}
.arrowlink{padding-block:.72rem}
.tel{padding-block:.6rem}
.nav a{padding-block:.85rem}
.hdr__cta{padding-block:1.14rem}
.cinfo dd a:not(.tel):not(.arrowlink){display:inline-block;padding-block:.72rem}
.svccard h2 a{display:inline-block;padding-block:.72rem}
.otherlist a{padding-block:.95rem}
.svccard h2{margin-block:-.5rem -.35rem}
.ftr__grid li a{display:inline-block;padding-block:.45rem}
.ftr__grid li + li{margin-top:.1rem}
.dock .btn{min-height:46px}