/* =========================================================
   Mod Offshore v2 — "Follow the riser" scroll story
   Mobile-first (375px). Desktop layout from 900px.
   Everything pinned / scrubbed lives under  html.motion
   (set by the inline head script only when JS runs and
   reduced motion is not requested). Without it the page
   is a normal, fully readable static document.
   Scroll state arrives from story.js as custom properties
   on each .scene:  --p (0..1 scene progress), --sp (0..1
   progress inside the current step), --step (integer) and
   the attribute data-step.
   ========================================================= */

/* ---------- Fonts (Barlow, OFL) ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --abyss:#050E17;
  --deep:#0A1B2A;
  --navy:#0E2233;
  --surface:#11394A;      /* twilight water just under the surface */
  --petrol:#235A6A;
  --cyan:#2AA7C9;         /* logo accent — on dark only, sparingly */
  --cyan-ink:#0B7F9F;     /* same accent darkened for use on paper */
  --steel:#8FA6B2;
  --paper:#F3F6F7;
  --ink:#0E2233;
  --on-dark:#EAF1F4;
  --on-dark-2:#B7C7D0;
  --text:#22364A;
  --muted:#4E6273;
  --rule:#C9D5DC;
  --rule-dark:rgba(143,166,178,.24);
  --font:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --gutter:16px;
  --wrap:1180px;
  --header-h:60px;
  --vh:1vh;
  --string-x:38vw;        /* x position of the riser string (hero + descent) */
  --stroke:1.5px;
}
@supports (height:1svh){:root{--vh:1svh}}
@media (min-width:900px){:root{--gutter:40px;--header-h:72px;--string-x:67vw}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--abyss);color:var(--on-dark);font-family:var(--font);font-size:1.0625rem;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,address{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
h1,h2,h3{font-weight:600;line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
p{max-width:62ch}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:1px}
.tone-light :focus-visible{outline-color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--paper);color:var(--ink);padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{top:10px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* line-art: one stroke weight everywhere */
.art{fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.art *{vector-effect:non-scaling-stroke}
.art .draw{vector-effect:none}
.art text{stroke:none;fill:currentColor;font-family:var(--font);font-weight:500}

/* small uppercase label */
.label{font-size:.75rem;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.tone-light .label{color:var(--muted)}
.label--no{color:var(--cyan)}
.tone-light .label--no{color:var(--petrol)}

/* stacked-square marker (from the logo) */
.sq{position:relative;display:inline-block;flex:none;width:12px;height:12px;background:var(--cyan)}
.sq::after{content:"";position:absolute;right:-4px;bottom:-4px;width:7px;height:7px;background:var(--steel)}
.tone-light .sq{background:var(--cyan-ink)}
.tone-light .sq::after{background:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 20px;border:1px solid var(--on-dark);background:var(--on-dark);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;letter-spacing:.01em}
.btn:hover{background:#fff;border-color:#fff}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(234,241,244,.55)}
.btn--ghost:hover{background:rgba(234,241,244,.1);border-color:var(--on-dark)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.textlink{font-weight:600;color:var(--petrol)}
.on-dark .textlink,.tone-dark .textlink{color:var(--on-dark)}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--on-dark);background:#06111B;border-bottom:1px solid var(--rule-dark);transition:background-color .25s,border-color .25s}
html.motion .site-header:not(.is-solid):not(.is-open){background:transparent;border-bottom-color:transparent}
.site-header__bar{display:flex;align-items:center;gap:12px;height:var(--header-h)}
.logo{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none;flex:none}
.logo__svg{width:118px;height:auto}
.logo__mod{fill:currentColor}
.logo__off{fill:#7FC4D8}
/* brighten the darkest logo squares on navy (same as the v1 footer) */
.logo__svg rect[fill="#243240"]{fill:#3C5873}
.logo__svg rect[fill="#253D58"]{fill:#33597E}
.logo__svg rect[fill="#1E4264"]{fill:#2C6189}
.logo__svg rect[fill="#24577D"]{fill:#2E6F9B}
.logo__svg rect[fill="#00587B"]{fill:#00799F}
.hdr-chapter{margin-left:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);opacity:0;transition:opacity .25s}
.site-header.is-solid .hdr-chapter{opacity:1}
.header-tools{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.hdr-chapter + .header-tools{margin-left:0}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:.875rem;font-weight:600;letter-spacing:.08em;text-decoration:none;color:var(--on-dark)}
.lang:hover{text-decoration:underline}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.menu-toggle__bars{position:relative;width:22px;height:2px;background:currentColor;transition:background-color .2s}
.menu-toggle__bars::before,.menu-toggle__bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .2s}
.menu-toggle__bars::before{top:-7px}
.menu-toggle__bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:#06111B;border-bottom:1px solid var(--rule-dark);padding:8px var(--gutter) 20px}
.nav.is-open{display:block}
.nav a{display:flex;align-items:center;min-height:50px;font-size:1.25rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-dark);color:var(--on-dark)}
.nav a[aria-current]{color:var(--cyan)}
/* no JS: no toggle, nav always visible and the header scrolls with the page */
html:not(.js) .site-header{position:relative}
html:not(.js) .site-header__bar{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}
html:not(.js) .menu-toggle,html:not(.js) .hdr-chapter{display:none}
html:not(.js) .nav{display:block;position:static;flex-basis:100%;padding:0;background:none;border:0}
html:not(.js) .nav ul{display:flex;flex-wrap:wrap;gap:0 20px}
html:not(.js) .nav a{border:0;font-size:1rem;min-height:44px}
html:not(.js) .hero{padding-top:28px}
@media (min-width:900px){
  .logo__svg{width:140px}
  .menu-toggle{display:none}
  .hdr-chapter{display:none}
  .nav,.nav.is-open{display:block;position:static;background:none;border:0;padding:0;margin-left:auto}
  .nav ul{display:flex;gap:6px}
  .nav a{min-height:44px;padding:0 12px;border:0;font-size:.9375rem;font-weight:500;letter-spacing:.02em}
  .nav a:hover{text-decoration:underline}
  .header-tools{margin-left:8px;order:3}
  .lang{border:1px solid rgba(234,241,244,.4);min-height:36px;min-width:44px}
}

/* ---------- Progress rail ---------- */
.rail{display:none}
html.motion .rail{display:block;position:fixed;z-index:70;left:0;right:0;top:0;height:3px;pointer-events:none;--story:0}
.rail__fill{position:absolute;inset:0;background:var(--cyan);transform:scaleX(var(--story));transform-origin:0 50%}
.rail__ticks,.rail__label{display:none}
@media (min-width:900px){
  html.motion .rail{left:auto;right:22px;top:50%;width:2px;height:46vh;margin-top:-23vh;background:rgba(143,166,178,.35)}
  .rail__fill{transform:scaleY(var(--story));transform-origin:50% 0}
  .rail__ticks{display:block}
  .rail__ticks i{position:absolute;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--steel)}
  .rail__ticks i.is-past{background:var(--cyan)}
  .rail__label{display:none;position:absolute;right:12px;top:0;writing-mode:vertical-rl;transform:translate3d(0,calc(var(--story) * (46vh - 100%)),0);white-space:nowrap;font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
  .rail[data-tone="light"] .rail__label{color:var(--muted)}
  @media (min-width:1240px){.rail__label{display:block}}
  .rail[data-tone="light"] .rail__fill,.rail[data-tone="light"] .rail__ticks i.is-past{background:var(--cyan-ink)}
}

/* ---------- Scene scaffolding ---------- */
.scene{position:relative;--p:0;--sp:0;--step:0}
.scene__pin{position:relative}
html.motion .scene{--L:var(--len-m,var(--len,3));height:calc(var(--L) * 100vh);height:calc(var(--L) * var(--vh) * 100)}
html.motion .scene__pin{position:sticky;top:0;height:100vh;height:calc(var(--vh) * 100);overflow:hidden;contain:layout paint}
@media (min-width:900px){html.motion .scene{--L:var(--len,3)}}
/* an anchor on a pinned scene should land exactly at its start (cancel scroll-padding) */
html.motion .scene[id]{scroll-margin-top:calc((var(--header-h) + 12px) * -1)}

/* one-shot reveals for ordinary content */
html.motion .reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .6s ease}
html.motion .reveal.is-in{opacity:1;transform:none}
html.motion .reveal[data-d="1"]{transition-delay:.08s}
html.motion .reveal[data-d="2"]{transition-delay:.16s}
html.motion .reveal[data-d="3"]{transition-delay:.24s}
html.motion .reveal[data-d="4"]{transition-delay:.32s}

/* swapping step text: all steps share one grid cell, the active one shows.
   (opacity only — the text stays available to assistive technology) */
html.motion .steps--swap{display:grid}
html.motion .steps--swap > li{grid-area:1/1;opacity:0;transform:translate3d(0,14px,0);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
html.motion .scene[data-step="0"] .steps--swap > li:nth-child(1),
html.motion .scene[data-step="1"] .steps--swap > li:nth-child(2),
html.motion .scene[data-step="2"] .steps--swap > li:nth-child(3),
html.motion .scene[data-step="3"] .steps--swap > li:nth-child(4),
html.motion .scene[data-step="4"] .steps--swap > li:nth-child(5),
html.motion .scene[data-step="5"] .steps--swap > li:nth-child(6),
html.motion .scene[data-step="6"] .steps--swap > li:nth-child(7),
html.motion .scene[data-step="7"] .steps--swap > li:nth-child(8),
html.motion .scene[data-step="8"] .steps--swap > li:nth-child(9){opacity:1;transform:none;pointer-events:auto;transition:opacity .26s ease .12s,transform .26s ease .12s}

/* bottom stepper (decorative mirror of the step list) */
.stepper{display:none}
html.motion .stepper{display:block;position:relative}
.stepper__track{position:relative;height:12px;display:flex;justify-content:space-between;align-items:center}
.stepper__track::before,.stepper__track::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:currentColor;opacity:.3}
/* the fill reaches a square exactly when its step begins (squares sit at k/(n-1)) */
.stepper__track::after{opacity:1;background:var(--accent,var(--cyan));transform:scaleX(min(1,calc((var(--step) + var(--sp)) / (var(--n,9) - 1))));transform-origin:0 50%}
.stepper__track i{position:relative;z-index:1;width:9px;height:9px;background:var(--stepper-bg,var(--deep));border:1.5px solid currentColor;cursor:pointer;transition:background-color .25s,border-color .25s,transform .25s}
/* tap target: a square jumps to its step (story.js) */
.stepper__track i::before{content:"";position:absolute;top:-18px;bottom:-18px;left:-14px;right:-14px}
.stepper__names{overflow:hidden;margin-top:10px}
.stepper__names ol{display:flex;transform:translate3d(calc((1 - var(--step)) * 33.3333%),0,0);transition:transform .35s ease}
.stepper__names li{flex:0 0 33.3333%;text-align:center;font-size:.6875rem;line-height:1.25;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.68;transition:opacity .25s,color .25s;padding:0 4px}
html.motion .scene[data-step="0"] .stepper__track i:nth-child(-n+1),
html.motion .scene[data-step="1"] .stepper__track i:nth-child(-n+2),
html.motion .scene[data-step="2"] .stepper__track i:nth-child(-n+3),
html.motion .scene[data-step="3"] .stepper__track i:nth-child(-n+4),
html.motion .scene[data-step="4"] .stepper__track i:nth-child(-n+5),
html.motion .scene[data-step="5"] .stepper__track i:nth-child(-n+6),
html.motion .scene[data-step="6"] .stepper__track i:nth-child(-n+7),
html.motion .scene[data-step="7"] .stepper__track i:nth-child(-n+8),
html.motion .scene[data-step="8"] .stepper__track i:nth-child(-n+9){background:var(--accent,var(--cyan));border-color:var(--accent,var(--cyan))}
html.motion .scene[data-step="0"] .stepper__track i:nth-child(1),
html.motion .scene[data-step="1"] .stepper__track i:nth-child(2),
html.motion .scene[data-step="2"] .stepper__track i:nth-child(3),
html.motion .scene[data-step="3"] .stepper__track i:nth-child(4),
html.motion .scene[data-step="4"] .stepper__track i:nth-child(5),
html.motion .scene[data-step="5"] .stepper__track i:nth-child(6),
html.motion .scene[data-step="6"] .stepper__track i:nth-child(7),
html.motion .scene[data-step="7"] .stepper__track i:nth-child(8),
html.motion .scene[data-step="8"] .stepper__track i:nth-child(9){transform:scale(1.55)}
html.motion .scene[data-step="0"] .stepper__names li:nth-child(1),
html.motion .scene[data-step="1"] .stepper__names li:nth-child(2),
html.motion .scene[data-step="2"] .stepper__names li:nth-child(3),
html.motion .scene[data-step="3"] .stepper__names li:nth-child(4),
html.motion .scene[data-step="4"] .stepper__names li:nth-child(5),
html.motion .scene[data-step="5"] .stepper__names li:nth-child(6),
html.motion .scene[data-step="6"] .stepper__names li:nth-child(7),
html.motion .scene[data-step="7"] .stepper__names li:nth-child(8),
html.motion .scene[data-step="8"] .stepper__names li:nth-child(9){opacity:1;color:var(--accent-text,var(--cyan))}
@media (min-width:900px){
  html.motion .stepper{padding:0 calc(50% / var(--n,9))}
  .stepper__names{overflow:visible;margin:12px calc(-50% / (var(--n,9) - 1)) 0}
  .stepper__names ol{transform:none;transition:none}
  .stepper__names li{flex:1 1 0}
}

/* ---------- S0 Hero — surface ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:calc(var(--vh) * 100);overflow:hidden;--sea-h:calc(var(--vh) * 15);--ship-w:240px;padding:calc(var(--header-h) + 22px) 0 calc(var(--sea-h) + var(--ship-w) * .405 + 40px);background:linear-gradient(180deg,#050F19 0%,#0A1B2A 48%,#0E2B3B 100%)}
.hero__eyebrow{margin-bottom:18px;max-width:none}
.hero h1{font-size:2rem;font-size:clamp(2rem,min(9.4vw,11vh),5.75rem);line-height:.98;letter-spacing:-.025em;margin-bottom:22px}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){color:var(--on-dark-2)}
.hero h1 span:nth-child(3){color:var(--steel)}
.hero__lead{font-size:1.0625rem;line-height:1.5;color:var(--on-dark-2);max-width:56ch;margin-bottom:22px;text-wrap:pretty}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px}
/* the sea is drawn over the hull: the ship sits in the water (draft), its wet part shows faintly through the surface */
.hero__sea{position:absolute;z-index:1;left:0;right:0;bottom:0;height:var(--sea-h);background:linear-gradient(180deg,rgba(26,75,93,.78) 0,var(--surface) 55%);border-top:1.5px solid var(--steel)}
.hero__sea::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:repeating-linear-gradient(90deg,rgba(143,166,178,.5) 0 18px,transparent 18px 44px)}
.hero__stub{position:absolute;top:0;bottom:0;left:calc(var(--string-x) - var(--vh) * 1);width:calc(var(--vh) * 2);border-left:var(--stroke) solid #C3D2DA;border-right:var(--stroke) solid #C3D2DA}
/* tensioner lines: continue the two lines at the top of the descent string up to the hull */
.hero__stub::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--vh) * -.8 - var(--stroke));right:calc(var(--vh) * -.8 - var(--stroke));border-left:1px solid rgba(195,210,218,.5);border-right:1px solid rgba(195,210,218,.5)}
.hero__ship{position:absolute;left:calc(var(--string-x) - var(--ship-w) * .5);bottom:calc(var(--sea-h) - var(--ship-w) * .081);width:var(--ship-w);height:auto;color:#C3D2DA;max-width:none}
html.motion .hero__ship{animation:bob 6s ease-in-out infinite alternate}
@keyframes bob{from{transform:translate3d(0,-1px,0)}to{transform:translate3d(0,1px,0)}}
.hero__cue{position:absolute;right:var(--gutter);bottom:calc(var(--sea-h) + 14px);display:none;align-items:center;gap:10px;color:var(--steel)}
html.motion .hero__cue{display:flex}
.hero__cue::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,var(--steel),transparent)}
/* hero intro: lines arrive one after another, logo squares assemble (the only clock-driven motion) */
html.motion .hero h1 span,html.motion .hero__eyebrow,html.motion .hero__lead,html.motion .hero__btns{opacity:0;transform:translate3d(0,22px,0);animation:rise .55s cubic-bezier(.2,.7,.2,1) forwards}
html.motion .hero__eyebrow{animation-delay:.05s}
html.motion .hero h1 span:nth-child(1){animation-delay:.15s}
html.motion .hero h1 span:nth-child(2){animation-delay:.28s}
html.motion .hero h1 span:nth-child(3){animation-delay:.41s}
html.motion .hero__lead{animation-delay:.52s}
html.motion .hero__btns{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
html.motion .site-header .logo__svg rect{opacity:0;animation:sq-in .45s ease-out forwards;transform-box:fill-box;transform-origin:50% 100%}
html.motion .site-header .logo__svg rect:nth-of-type(1){animation-delay:.05s}
html.motion .site-header .logo__svg rect:nth-of-type(2){animation-delay:.2s}
html.motion .site-header .logo__svg rect:nth-of-type(3){animation-delay:.12s}
html.motion .site-header .logo__svg rect:nth-of-type(4){animation-delay:.42s}
html.motion .site-header .logo__svg rect:nth-of-type(5){animation-delay:.34s}
html.motion .site-header .logo__svg rect:nth-of-type(6){animation-delay:.26s}
html.motion .site-header .logo__svg rect:nth-of-type(7){animation-delay:.72s}
html.motion .site-header .logo__svg rect:nth-of-type(8){animation-delay:.64s}
html.motion .site-header .logo__svg rect:nth-of-type(9){animation-delay:.56s}
html.motion .site-header .logo__svg rect:nth-of-type(10){animation-delay:.48s}
@keyframes sq-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (max-width:899px){.hero__lead{font-size:1rem;color:var(--steel)}}
@media (max-width:899px) and (min-height:760px){.hero{--ship-w:280px}}
@media (min-width:900px){
  .hero{--ship-w:400px;--sea-h:calc(var(--vh) * 14);padding-top:calc(var(--header-h) + 36px);padding-bottom:calc(var(--sea-h) + 44px)}
  .hero__lead{max-width:34rem}
  .hero__cue{right:auto;left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));bottom:calc(var(--sea-h) * .3)}
  .hero__lead{font-size:1.1875rem}
}

/* ---------- Water column (S1 + S2 share one deepening background) ---------- */
.water{position:relative;background:linear-gradient(180deg,var(--surface) 0%,#0D2C3C 10%,#0A2131 28%,#071826 50%,var(--abyss) 74%,var(--abyss) 100%)}

/* ---------- S1 Descent ---------- */
/* --t: eased travel (keep in sync with descentT() in story.js); it reaches 1 at p=.88 so the last 12% of the scene
   holds on the seabed. --travel: how far the column moves (in svh) so the seabed (314svh down the column) lands at
   62svh on mobile / 80svh on desktop. --lead: where the drawing front starts. */
.scene--descent{--travel:252;--lead:62;--t:calc(.14 * clamp(0,var(--p) / .4,1) + .86 * clamp(0,(var(--p) - .4) / .48,1));--f:calc((var(--t) * (320 - var(--lead)) + var(--lead)) / 320)}
@media (min-width:900px){.scene--descent{--travel:234;--lead:70}}
.descent__col{position:relative;color:#B9CAD3}
.descent__string svg{width:100%;height:100%}
.descent__string .hl{color:var(--cyan)}
.descent__string .body{fill:rgba(8,24,37,.88)}
.descent__string text{font-size:17px;fill:var(--on-dark);letter-spacing:.02em}
.descent__ticks,.descent__head,.descent__seabed{display:none}
.descent__panel{position:relative;z-index:2}
.descent__title{font-size:.75rem;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.depth{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--rule-dark)}
.depth__value{min-width:3.7em;font-size:2.25rem;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--cyan);white-space:nowrap}
.depth__label{font-size:.6875rem;line-height:1.3;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);text-align:right}
.caps > li{padding:10px 0}
.cap__text{font-size:1.1875rem;line-height:1.3;font-weight:500;color:var(--on-dark);max-width:30ch}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.legend li{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:500;letter-spacing:.03em;color:var(--on-dark-2)}
.legend li::before{content:"";width:6px;height:6px;background:var(--cyan)}
/* phone: caption 1 gets a small surface-to-seabed pictogram (the ship has left the screen by then) */
.cap__pic{width:132px;height:40px;margin-top:10px;color:var(--on-dark-2)}
.cap__pic .hl{color:var(--cyan)}
@media (min-width:900px){.cap__pic{display:none}}
/* static: drawing beside the caption list */
html:not(.motion) .descent__pin{display:flex;gap:20px;align-items:flex-start;max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter)}
html:not(.motion) .descent__col{flex:none;width:63px;height:560px}
html:not(.motion) .descent__string{width:100%;height:100%}
html:not(.motion) .descent__string .lbl{display:none}
html:not(.motion) .descent__panel{flex:1;min-width:0}
/* motion: the camera travels down the string */
html.motion .descent__col{position:absolute;left:0;top:0;width:100%;height:calc(var(--vh) * 320);transform:translate3d(0,calc(var(--t) * var(--vh) * var(--travel) * -1),0)}
html.motion .descent__string{position:absolute;top:0;left:calc(var(--string-x) - var(--vh) * 12);width:calc(var(--vh) * 36);height:100%;clip-path:inset(0 0 calc((1 - var(--f)) * 100%) 0)}
html.motion .descent__head{display:block;position:absolute;top:0;left:var(--string-x);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--cyan);transform:translate3d(0,calc(var(--f) * var(--vh) * 320),0);opacity:clamp(0,calc((1 - var(--f)) * 80),1)}
html.motion .descent__ticks{display:block}
/* depth gauge on the counter's scale: a tick reaches the landing line (where the seabed ends up) exactly when the counter shows its value */
.descent__ticks li{position:absolute;left:0;top:calc((var(--d) * var(--travel) + (314 - var(--travel))) * var(--vh));display:flex;align-items:center;gap:6px;height:16px;margin-top:-8px;font-size:.625rem;font-weight:500;letter-spacing:.08em;color:var(--steel);white-space:nowrap}
.descent__ticks li::before{content:"";width:14px;height:1px;background:var(--steel)}
.descent__ticks li.minor::before{width:7px;opacity:.6}
.descent__ticks li:last-child{margin-top:-25px}
.descent__ticks li:last-child::before{opacity:0}
html.motion .descent__seabed{display:block;position:absolute;left:0;right:0;top:calc(var(--vh) * 314);height:calc(var(--vh) * 120);background:#02070C}
.descent__seabed::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1.5px;background:#B9CAD3;transform:scaleX(clamp(0,calc((var(--p) - .84) / .08),1));transform-origin:var(--string-x) 50%}
.descent__seabed::after{content:"";position:absolute;left:0;right:0;top:1px;height:14px;opacity:clamp(0,calc((var(--p) - .9) / .05),1);background:repeating-linear-gradient(115deg,rgba(143,166,178,.38) 0 1px,transparent 1px 9px)}
html.motion .descent__panel{position:absolute;left:0;right:0;bottom:0;min-height:222px;padding:14px var(--gutter) max(14px,env(safe-area-inset-bottom));background:#040C14;border-top:1.5px solid var(--cyan)}
html.motion .descent__panel .caps > li{padding:0}
html.motion .scene--descent.is-active .descent__col{will-change:transform}
@media (min-width:900px){
  .cap__text{font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.18;font-weight:600;letter-spacing:-.01em;max-width:22ch}
  .depth{display:block;border:0;margin:14px 0 30px;padding:0}
  .depth__value{display:block;font-size:clamp(3.5rem,6.6vw,6rem)}
  .depth__label{display:block;text-align:left;margin-top:8px;font-size:.75rem}
  .legend{margin-top:18px}
  html.motion .descent__panel{left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));right:auto;width:min(42vw,560px);bottom:auto;top:48%;transform:translateY(-50%);min-height:0;padding:0;background:none;border:0}
  html.motion .descent__panel .caps{min-height:13.5rem}
  .descent__ticks li{left:auto;right:calc(100vw - var(--string-x) + var(--vh) * 9);flex-direction:row-reverse;font-size:.6875rem}
  html:not(.motion) .descent__col{width:79px;height:700px}
}

/* ---------- S2 Turn — on the seabed ---------- */
.turn__pin{padding:72px var(--gutter)}
.turn__word{display:none}
.turn__lines{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}
.turn__lines > *{font-size:clamp(2.25rem,min(10.4vw,calc(var(--vh) * 10.5)),5.25rem);line-height:1.02;font-weight:600;letter-spacing:-.025em;max-width:16ch;margin-bottom:.5em;text-wrap:balance}
.turn__lines > :nth-child(2){color:var(--on-dark-2)}
.turn__lines > :nth-child(3){margin-bottom:0}
/* the line that matters is marked with the logo squares, not with colour or size */
.turn__lines > :nth-child(3)::before{content:"";display:block;width:12px;height:12px;margin:0 0 20px;background:var(--cyan);box-shadow:6.5px 6.5px 0 -2.5px var(--steel)}
/* the camera stays in the dark of the seabed band that closed the descent */
html.motion .scene--turn{background:#02070C}
html.motion .turn__pin{display:grid;place-items:center;padding:var(--header-h) var(--gutter) 0;text-align:center}
html.motion .turn__lines{display:grid;justify-items:center;align-items:center;width:100%}
html.motion .turn__lines > *{grid-area:1/1;margin:0;max-width:15ch;opacity:0;transition:opacity .14s ease;transform:scale(calc(.78 + var(--sp) * .26))}
html.motion .scene[data-step="0"] .turn__lines > :nth-child(1),
html.motion .scene[data-step="1"] .turn__lines > :nth-child(2),
html.motion .scene[data-step="2"] .turn__lines > :nth-child(3),
html.motion .scene[data-step="3"] .turn__lines > :nth-child(3){opacity:1;transition:opacity .3s ease .14s}
/* line 3 spans steps 3 and 4 (it holds while the daylight chapter rises), so it scales with --p */
html.motion .turn__lines > :nth-child(3){transform:scale(calc(.78 + clamp(0,calc((var(--p) - .5) * 4),1) * .26))}
html.motion .turn__lines > :nth-child(3)::before{margin:0 auto 20px}
@media (max-width:899px){html.motion .turn__lines{transform:translate3d(0,calc(var(--vh) * -8),0)}}
@media (min-width:900px){
  html.motion .turn__lines > *{max-width:19ch;transform:scale(calc(.72 + var(--sp) * .4))}
  html.motion .turn__lines > :nth-child(1){max-width:15ch}
  html.motion .turn__lines > :nth-child(3){transform:scale(calc(.72 + clamp(0,calc((var(--p) - .5) * 4),1) * .4))}
}
html.motion .turn__word{display:block;position:absolute;left:0;top:50%;font-size:58vw;line-height:1;font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(143,166,178,.14);transform-origin:50% 50%;transform:translate3d(calc(14vw - var(--p) * 108vw),-50%,0) scale(calc(.68 + var(--p) * .32));pointer-events:none;-webkit-user-select:none;user-select:none}
/* phone: the outlined word drifts through the empty lower half, clear of the text */
@media (max-width:899px){html.motion .turn__word{top:76%}}
@media (min-width:900px){html.motion .turn__word{font-size:42vw;transform:translate3d(calc(22vw - var(--p) * 84vw),-50%,0) scale(calc(.68 + var(--p) * .32))}}
@supports not (-webkit-text-stroke:1px #000){html.motion .turn__word{color:rgba(143,166,178,.08)}}
html.motion .scene--turn.is-active .turn__word{will-change:transform}

/* ---------- Light "daylight" chapters ---------- */
.tone-light{background:var(--paper);color:var(--text)}
.tone-light h2,.tone-light h3{color:var(--ink)}
.tone-dark{background:var(--deep);color:var(--on-dark)}
/* coming ashore: the daylight chapter itself (with its content) rises over the last screen of the pinned seabed scene
   and locks in exactly when that scene ends — no separate wipe layer, no empty screen */
html.motion .water + .tone-light{position:relative;z-index:2;margin-top:calc(var(--vh) * -100);box-shadow:0 -1.5px 0 var(--steel)}
.rules{background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 100%;background-repeat:no-repeat;background-position:0 0}

.chapter{padding:72px 0 56px}
.chapter__head{display:grid;gap:18px}
.chapter__no{display:flex;align-items:center;gap:14px}
.chapter__no .num{font-size:.875rem;font-weight:600;letter-spacing:.14em}
.display{font-size:clamp(2.125rem,8.2vw,4.75rem);line-height:1;letter-spacing:-.025em}
.lead{font-size:1.125rem;line-height:1.5;max-width:54ch}
.tone-dark .lead{color:var(--on-dark-2)}
/* one short line under a chapter intro: where (and with whom) the work is carried out */
.chapter__where{position:relative;padding-left:24px;font-size:1rem;line-height:1.45;font-weight:500;color:var(--ink);text-wrap:balance}
.chapter__where::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--cyan-ink)}
@media (min-width:900px){
  .chapter{padding:120px 0 88px}
  .chapter__head{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:end}
  .chapter__head .chapter__no{grid-column:1/-1}
  .chapter__head--where .display{grid-row:2 / span 2}
  .chapter__head .chapter__where{grid-column:2;font-size:1.0625rem}
  .lead{font-size:1.3125rem}
}

/* ---------- Map (S3 arrival + S8 facilities) ----------
   Two Mod Offshore sites: the facility at Filyos Port (primary marker, the sea route ends on it) and the office in
   Çaycuma (secondary, outlined marker). The thin dotted inland link is a connector, not part of the riser's route. */
.map{position:relative;width:100%;aspect-ratio:640/540;color:var(--ink)}
.map__iso{stroke:#8FB4C2;stroke-width:1px;stroke-dasharray:1 6}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map text{font-family:var(--font);font-size:23px;font-weight:500;fill:var(--ink)}
.map .map__sea{font-size:17px;letter-spacing:.3em;fill:var(--petrol)}
@media (min-width:600px){.map text{font-size:17px}.map .map__sea{font-size:13px}}
.map .map__key{font-weight:600}
.map .map__sub{font-weight:500;fill:var(--petrol)}
/* the facility label sits on the sea: a sea-coloured halo keeps the dotted depth contours out of the letters */
.map__label-fac text{paint-order:stroke;stroke:#E2EDF1;stroke-width:6px;stroke-linejoin:round}
.map__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:10px;font-size:.875rem;color:var(--muted)}
.map__cap a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}

/* S3 */
.shore__pin{padding:64px var(--gutter) 40px;display:grid;gap:26px;max-width:var(--wrap);margin:0 auto}
.shore__text{display:grid;gap:14px}
.shore__text .display{font-size:clamp(2.25rem,9.6vw,5.5rem)}
html.motion .shore__pin{max-width:none;padding:calc(var(--header-h) + 18px) var(--gutter) 22px;align-content:center}
/* order: the sea route draws to Filyos Port (--r), the facility marker drops onto the port (--drop),
   then the quiet inland link draws (--r2) and the Çaycuma office appears (--off) */
html.motion .scene--shore{--r:clamp(0,calc(var(--p) / .5),1);--drop:clamp(0,calc((var(--p) - .5) / .14),1);--r2:clamp(0,calc((var(--p) - .64) / .12),1);--off:clamp(0,calc((var(--p) - .72) / .12),1)}
html.motion .scene--shore .map__route--sea{clip-path:inset(0 calc(100% - (26% + var(--r) * 41%)) 0 0)}
html.motion .scene--shore .map__link{clip-path:inset(0 0 calc(100% - (37% + var(--r2) * 40%)) 0)}
html.motion .scene--shore .map__marker{opacity:var(--drop);transform:translate3d(0,calc((1 - var(--drop)) * -26px),0)}
html.motion .scene--shore .map__label-fac{opacity:var(--drop)}
html.motion .scene--shore .map__office{opacity:var(--off)}
@media (min-width:900px){
  html.motion .shore__pin,.shore__pin{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px;align-items:center;padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));padding-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)))}
  html.motion .scene--shore .map{max-height:calc(var(--vh) * 72);width:min(100%,calc(var(--vh) * 72 * 640 / 540))}
}
@media (max-width:899px){
  html.motion .scene--shore .map{width:min(100%,calc(var(--vh) * 46 * 640 / 540));margin:0 auto}
  html.motion .shore__pin{gap:16px}
}

/* ---------- S4 Riser maintenance — the stepper centrepiece ---------- */
.scene--riser{--w:clamp(0,calc(var(--sp) * 1.3),1);--ob:0;--ol:0;--ind1:0;--ind2:0;--bw:0;--ok:0;--accent:var(--cyan-ink);--accent-text:var(--petrol);--stepper-bg:var(--paper);--n:9}
.riser__pin{max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter) 40px}
.riser__tag{display:none}
.joint{position:relative;width:100%;aspect-ratio:640/400;color:var(--ink);margin:0 auto}
.joint svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.joint text{font-family:var(--font);font-weight:600;font-size:24px;fill:var(--ink);stroke:none}
@media (min-width:600px){.joint text{font-size:17px}}
/* line hierarchy: silhouette (tube, flanges) 2.25 · lines and clamps 1.5 · detail (welds, bolts, break, growth) 1 */
.joint .w-out{stroke-width:2.25px}
.j-ink{color:var(--ink)}
.joint .w-det,.joint .w-det *{stroke-width:1px}
.jl--grime,.jl--stipple,.jl--fx .fx{display:none}
.jl--coat .coat{fill:var(--petrol);stroke:var(--ink)}
.jl--coat .coat-hi{stroke:#9CC3D1;opacity:.8}
.j-fill{fill:#fff}
.j-paper{fill:var(--paper)}
.j-accent{color:var(--cyan-ink)}
.j-solid{fill:currentColor}
/* static list of the nine steps */
.rsteps{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--rule)}
.rsteps > li{display:grid;grid-template-columns:3.2rem 1fr;column-gap:8px;padding:16px 0;border-bottom:1px solid var(--rule)}
.rstep__no{grid-row:1/3;font-size:1.125rem;font-weight:600;color:var(--petrol);letter-spacing:.02em}
.rstep__no span{display:none}
.rsteps h3{font-size:1.25rem;line-height:1.15;letter-spacing:-.005em;margin-bottom:4px}
.rsteps p{font-size:1rem;line-height:1.45}
.riser__after{padding-top:40px;padding-bottom:72px}
.riser__after p{font-size:1.25rem;line-height:1.4;font-weight:500;color:var(--ink);max-width:40ch;padding-left:18px;border-left:3px solid var(--cyan-ink)}
@media (min-width:700px){html:not(.motion) .rsteps{grid-template-columns:repeat(3,1fr);column-gap:32px}}
@media (min-width:900px){.riser__after{padding-top:64px;padding-bottom:120px}.riser__after p{font-size:1.75rem;line-height:1.3;letter-spacing:-.01em}}

/* motion layout of the pin */
html.motion .riser__pin{max-width:none;display:flex;flex-direction:column;padding:calc(var(--header-h) + 10px) var(--gutter) 18px}
html.motion .riser__tag{display:flex;align-items:center;gap:12px;margin-bottom:6px}
html.motion .joint{flex:none;width:min(100%,calc(var(--vh) * 40 * 1.6))}
html.motion .rsteps{flex:1;min-height:0;align-content:start;margin-top:14px;border-top:1px solid var(--rule)}
html.motion .rsteps > li{border:0;padding:16px 0 0;grid-template-columns:1fr;align-content:start}
html.motion .rstep__no{grid-row:auto;font-size:.8125rem;letter-spacing:.14em;margin-bottom:8px}
html.motion .rstep__no span{display:inline;color:var(--muted);font-weight:500}
html.motion .rsteps h3{font-size:clamp(2.125rem,10.6vw,3.25rem);line-height:1;letter-spacing:-.02em;margin-bottom:10px}
html.motion .rsteps p{font-size:1.0625rem;line-height:1.4;max-width:34ch}
html.motion .scene--riser .stepper{color:var(--ink)}
@media (max-width:899px){
  html.motion .joint{margin-top:auto}
  html.motion .rsteps{flex:0 1 auto;margin-bottom:auto}
}
@media (min-width:900px){
  html.motion .riser__pin{padding:calc(var(--header-h) + 14px) max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter))) 26px}
  html.motion .joint{width:min(100%,calc(var(--vh) * 56 * 1.6))}
  html.motion .rsteps{margin-top:8px}
  html.motion .rsteps > li{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px;padding-top:22px}
  html.motion .rstep__no{grid-column:1/-1}
  html.motion .rsteps p{font-size:1.25rem;align-self:end;padding-bottom:6px}
}
@media (min-width:900px) and (max-height:759px){html.motion .joint{width:min(100%,calc(var(--vh) * 46 * 1.6))}html.motion .rsteps h3{font-size:2.5rem}}

/* the nine states of the joint (pure functions of data-step + --sp) */
/* 01 disassembly in two beats: the bolts come out (--ob), then the lines and clamps lift off (--ol); 08 reverses it */
html.motion .scene--riser[data-step="0"]{--ob:clamp(0,calc(var(--w) / .45),1);--ol:clamp(0,calc((var(--w) - .35) / .65),1)}
html.motion .scene--riser[data-step="1"],html.motion .scene--riser[data-step="2"],html.motion .scene--riser[data-step="3"],
html.motion .scene--riser[data-step="4"],html.motion .scene--riser[data-step="5"],html.motion .scene--riser[data-step="6"]{--ob:1;--ol:1}
html.motion .scene--riser[data-step="7"]{--ol:calc(1 - clamp(0,calc(var(--w) / .55),1));--ob:calc(1 - clamp(0,calc((var(--w) - .45) / .55),1))}
/* 04 NDT: an indication appears as the scan passes each weld (x=118, x=250) */
html.motion .scene--riser[data-step="3"]{--ind1:clamp(0,calc((var(--w) - .08) * 14),1);--ind2:clamp(0,calc((var(--w) - .36) * 14),1)}
/* 05 weld repair: the indication clears, a bead is laid along the weld (--bw), then the examined-again mark (--ok) */
html.motion .scene--riser[data-step="4"]{--ind1:calc(1 - clamp(0,calc(var(--w) * 5),1));--ind2:calc(1 - clamp(0,calc(var(--w) * 5),1));--bw:clamp(0,calc(var(--w) * 1.6),1);--ok:clamp(0,calc((var(--w) - .7) * 4),1)}
html.motion .scene--riser[data-step="5"]{--ok:1}
html.motion .mv-top{transform:translate3d(0,calc(var(--ol) * -28px),0)}
html.motion .mv-bot{transform:translate3d(0,calc(var(--ol) * 28px),0)}
html.motion .mv-l{transform:translate3d(calc(var(--ob) * -40px),0,0)}
html.motion .mv-r{transform:translate3d(calc(var(--ob) * 40px),0,0)}
/* surface layers: marine growth -> old coating -> bare steel (hatched, always under the others) -> new coating */
html.motion .jl--grime,html.motion .jl--stipple{display:block;visibility:hidden}
html.motion .scene--riser[data-step="0"] .jl--grime,html.motion .scene--riser[data-step="1"] .jl--grime,
html.motion .scene--riser[data-step="0"] .jl--stipple,html.motion .scene--riser[data-step="1"] .jl--stipple,html.motion .scene--riser[data-step="2"] .jl--stipple{visibility:visible}
html.motion .scene--riser[data-step="1"] .jl--grime,
html.motion .scene--riser[data-step="2"] .jl--stipple{clip-path:inset(-10% 0 -10% calc(13.125% + var(--w) * 73.75%))}
html.motion .jl--coat{visibility:hidden}
html.motion .scene--riser[data-step="6"] .jl--coat{visibility:visible;clip-path:inset(-10% calc(86.875% - var(--w) * 73.75%) -10% 0)}
html.motion .scene--riser[data-step="7"] .jl--coat,html.motion .scene--riser[data-step="8"] .jl--coat{visibility:visible}
/* tools and effects */
html.motion .jl--fx .fx{display:block;opacity:0;transition:opacity .25s ease}
html.motion .scene--riser[data-step="1"] .fx--jet,
html.motion .scene--riser[data-step="2"] .fx--blast,
html.motion .scene--riser[data-step="3"] .fx--scan,
html.motion .scene--riser[data-step="5"] .fx--gauge,
html.motion .scene--riser[data-step="6"] .fx--spray,
html.motion .scene--riser[data-step="8"] .fx--doc{opacity:1}
html.motion .fx--sweep{transform:translate3d(calc(var(--w) * 472px),0,0)}
html.motion .scene--riser[data-step="1"] .fx--jet,html.motion .scene--riser[data-step="2"] .fx--blast,html.motion .scene--riser[data-step="3"] .fx--scan,html.motion .scene--riser[data-step="6"] .fx--spray{opacity:clamp(0,calc((1 - var(--w)) * 12),1)}
html.motion .jl--fx .fx--ind{opacity:1;transition:none}
html.motion .ind--1{opacity:var(--ind1)}
html.motion .ind--2{opacity:var(--ind2)}
html.motion .ind-ok{opacity:var(--ok)}
html.motion .weld{opacity:0}
html.motion .scene--riser[data-step="4"] .weld{opacity:calc(1 - var(--ok))}
html.motion .bead{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--bw))}
html.motion .torch{transform:translate3d(0,calc(var(--bw) * 66px),0);opacity:clamp(0,calc((1 - var(--bw)) * 14),1)}
html.motion .gauge__needle{transform-box:view-box;transform-origin:245px 74px;transform:rotate(calc(-118deg + var(--w) * 168deg))}
html.motion .press{stroke-dasharray:1;stroke-width:4px}
html.motion .press--a{stroke-dashoffset:calc(1 - clamp(0,calc(var(--w) / .64),1))}
html.motion .press--b{stroke-dashoffset:calc(1 - clamp(0,calc((var(--w) - .66) / .34),1))}
html.motion .doc__line{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc(var(--w) * 2),1))}
html.motion .doc__link{opacity:clamp(0,calc((var(--w) - .45) * 5),1)}
html.motion .doc__t1{opacity:clamp(0,calc((var(--w) - .35) * 10),1)}
html.motion .doc__t2{opacity:clamp(0,calc((var(--w) - .5) * 10),1)}
html.motion .doc__t3{opacity:clamp(0,calc((var(--w) - .65) * 10),1)}
html.motion .doc__t4{opacity:clamp(0,calc((var(--w) - .8) * 10),1)}
/* static: show the finished joint with its records */
html:not(.motion) .jl--fx .fx--doc{display:block}
html:not(.motion) .joint{max-width:620px;margin-left:0}
html:not(.motion) .vessel{max-width:560px}
html:not(.motion) .dial{margin-left:0}
html:not(.motion) .dial__note{text-align:left}

/* ---------- S5 SPS dial ---------- */
.scene--sps{--stepper-bg:var(--deep);--n:5}
.sps__pin{max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter) 40px}
.sps__tag{display:none}
.dial{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;color:#B9CAD3}
.dial svg{position:absolute;inset:0;width:100%;height:100%}
.dial .ring-sps{color:var(--cyan)}
/* faint traces of all five rings: the dial is full size from the first frame, each step "lights" its own trace */
.dial .ring-ghost{stroke:rgba(143,166,178,.3);stroke-width:1px;stroke-dasharray:2 6}
.dial__note{margin-top:10px;text-align:center;font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.ssteps{display:grid;margin-top:22px;border-top:1px solid var(--rule-dark)}
.ssteps > li{display:grid;grid-template-columns:3.2rem 1fr;column-gap:8px;padding:14px 0;border-bottom:1px solid var(--rule-dark)}
.sstep__no{grid-row:1/3;font-size:1.125rem;font-weight:600;color:var(--cyan)}
.sstep__no span{display:none}
.ssteps h3{font-size:1.25rem;line-height:1.15;margin-bottom:4px}
.ssteps p{color:var(--on-dark-2);font-size:1rem;line-height:1.45}
.sps__after{display:grid;gap:28px;padding-top:40px;padding-bottom:72px}
.sps__after h3{font-size:1.5rem;margin-bottom:10px;letter-spacing:-.01em}
.sps__after p{color:var(--on-dark-2)}
.sps__after > div{padding-top:18px;border-top:1px solid var(--rule-dark)}
@media (min-width:900px){.sps__after{grid-template-columns:1fr 1fr;column-gap:64px;padding-top:64px;padding-bottom:120px}.sps__after h3{font-size:2rem}.sps__after p{font-size:1.1875rem}}

html.motion .sps__pin{max-width:none;display:flex;flex-direction:column;padding:calc(var(--header-h) + 10px) var(--gutter) 18px}
html.motion .sps__tag{display:flex;align-items:center;gap:12px;margin-bottom:8px;position:relative;z-index:1}
html.motion .sps__fig{flex:none;position:relative;z-index:1}
html.motion .dial{width:min(88vw,calc(var(--vh) * 42))}
html.motion .ssteps{flex:1;min-height:0;align-content:start;position:relative;z-index:1;margin-top:10px}
html.motion .ssteps > li{border:0;padding:14px 0 0;grid-template-columns:1fr;align-content:start}
html.motion .sstep__no{grid-row:auto;font-size:.8125rem;letter-spacing:.14em;margin-bottom:8px}
html.motion .sstep__no span{display:inline;color:var(--steel);font-weight:500}
html.motion .ssteps h3{font-size:clamp(2.125rem,10.6vw,3.25rem);line-height:1;letter-spacing:-.02em;margin-bottom:10px}
html.motion .ssteps p{font-size:1.0625rem;max-width:30ch}
html.motion .scene--sps .stepper{position:relative;z-index:1;color:var(--on-dark-2)}
@media (max-width:899px){
  html.motion .sps__fig{margin-top:auto}
  html.motion .ssteps{flex:0 1 auto;margin-bottom:auto}
}
/* rings: each draws during its own step and stays */
html.motion .ring{stroke-dasharray:1;stroke-dashoffset:1;transition:opacity .3s}
.ring-ticks{stroke-linecap:butt}
html.motion .ring-ticks{opacity:0;transition:opacity .4s ease}
html.motion .dial__spin{transform-box:view-box;transform-origin:300px 300px;transform:rotate(calc(var(--p) * 36deg))}
html.motion .scene--sps[data-step="0"] .ring-1,html.motion .scene--sps[data-step="1"] .ring-2,html.motion .scene--sps[data-step="2"] .ring-3,
html.motion .scene--sps[data-step="3"] .ring-4,html.motion .scene--sps[data-step="4"] .ring-5{stroke-dashoffset:calc(1 - var(--w))}
html.motion .scene--sps{--w:clamp(0,calc(var(--sp) * 1.5),1)}
/* the ring of the current step is the bright, heavy one */
html.motion .scene--sps[data-step="0"] .ring-1,html.motion .scene--sps[data-step="1"] .ring-2,html.motion .scene--sps[data-step="2"] .ring-3,
html.motion .scene--sps[data-step="3"] .ring-4{stroke:var(--on-dark);stroke-width:4.5px}
html.motion .scene--sps[data-step="4"] .ring-5{stroke-width:4.5px}
html.motion .scene--sps[data-step="1"] .ring-1,
html.motion .scene--sps[data-step="2"] .ring-1,html.motion .scene--sps[data-step="2"] .ring-2,
html.motion .scene--sps[data-step="3"] .ring-1,html.motion .scene--sps[data-step="3"] .ring-2,html.motion .scene--sps[data-step="3"] .ring-3,
html.motion .scene--sps[data-step="4"] .ring-1,html.motion .scene--sps[data-step="4"] .ring-2,html.motion .scene--sps[data-step="4"] .ring-3,html.motion .scene--sps[data-step="4"] .ring-4{stroke-dashoffset:0}
html.motion .scene--sps[data-step="0"] .ring-ticks-1,
html.motion .scene--sps[data-step="1"] .ring-ticks-1,html.motion .scene--sps[data-step="1"] .ring-ticks-2,
html.motion .scene--sps[data-step="2"] .ring-ticks-1,html.motion .scene--sps[data-step="2"] .ring-ticks-2,html.motion .scene--sps[data-step="2"] .ring-ticks-3,
html.motion .scene--sps[data-step="3"] .ring-ticks-1,html.motion .scene--sps[data-step="3"] .ring-ticks-2,html.motion .scene--sps[data-step="3"] .ring-ticks-3,html.motion .scene--sps[data-step="3"] .ring-ticks-4,
html.motion .scene--sps[data-step="4"] .ring-ticks{opacity:1}
html.motion .scene--sps.is-active .dial__spin{will-change:transform}
@media (min-width:900px){
  html.motion .sps__pin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr auto;column-gap:56px;padding:calc(var(--header-h) + 18px) max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter))) 26px}
  html.motion .sps__tag{grid-column:1/-1}
  html.motion .sps__fig{grid-column:2;grid-row:2;align-self:center}
  html.motion .dial{width:min(100%,calc(var(--vh) * 62))}
  html.motion .ssteps{grid-column:1;grid-row:2;align-self:center;align-content:center;margin:0;border:0}
  html.motion .ssteps h3{font-size:clamp(2.75rem,5vw,4.5rem)}
  html.motion .ssteps p{font-size:1.3125rem}
  html.motion .scene--sps .stepper{grid-column:1/-1;grid-row:3}
}

/* ---------- S6 Reactivation ---------- */
.react__pin{max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter) 64px}
.react__tag{display:none}
/* three stacked drawings: the laid-up vessel (dashed ghost), the same vessel in solid line, and the water it sits in */
.vessel{position:relative;color:#C3D2DA}
.vessel svg{width:100%;height:auto;overflow:visible}
.vessel__live,.vessel__sea{position:absolute;left:0;top:0}
.vessel__ghost{visibility:hidden}
.vessel__wet{fill:var(--deep);stroke:none;opacity:.74}
.vessel__water{stroke:var(--steel)}
.vessel__front{display:none}
.ready{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:8px 14px 8px 12px;border:1px solid var(--cyan);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.zsteps{display:grid;margin-top:22px;border-top:1px solid var(--rule-dark)}
.zsteps > li{display:grid;grid-template-columns:2.4rem 1fr;column-gap:10px;padding:14px 0;border-bottom:1px solid var(--rule-dark)}
.zstep__no{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--cyan);color:var(--abyss);font-size:.875rem;font-weight:600}
.zsteps h3{font-size:1.25rem;line-height:1.2;margin-bottom:4px;letter-spacing:-.005em}
.zsteps p{color:var(--on-dark-2);font-size:1rem;line-height:1.45}
html.motion .react__pin{max-width:none;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 10px) var(--gutter) 22px}
html.motion .react__tag{display:flex;align-items:center;gap:12px;margin-bottom:10px}
html.motion .vessel{width:min(100%,calc(var(--vh) * 34 * 2.2));margin:0 auto}
/* the vessel comes back into service from stern to bow, scrubbed by scroll (--r reaches 1 at p = .85) */
html.motion .scene--react{--r:clamp(0,calc(var(--p) / .85),1)}
html.motion .vessel__ghost{visibility:visible;stroke-dasharray:2 5;opacity:.45}
html.motion .vessel__live{clip-path:inset(-10% calc((1 - var(--r)) * 100%) -10% -10%)}
html.motion .vessel__front{display:block;position:absolute;left:0;top:4%;bottom:10%;width:100%;pointer-events:none;transform:translate3d(calc(var(--r) * 100%),0,0);opacity:clamp(0,calc((1 - var(--r)) * 30),1)}
.vessel__front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--cyan)}
html.motion .scene--react.is-active .vessel__front{will-change:transform}
html.motion .ready{opacity:clamp(0,calc((var(--p) - .85) * 12),1)}
html.motion .react__readywrap{min-height:58px;text-align:center}
html.motion .zsteps{margin-top:8px}
html.motion .zsteps > li{opacity:.62;transition:opacity .35s ease}
html.motion .scene--react[data-step="0"] .zsteps > li:nth-child(-n+1),
html.motion .scene--react[data-step="1"] .zsteps > li:nth-child(-n+2),
html.motion .scene--react[data-step="2"] .zsteps > li:nth-child(-n+3){opacity:1}
@media (min-width:900px){
  .react__pin{padding-bottom:120px}
  html.motion .react__pin{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:64px;align-items:center;padding:calc(var(--header-h) + 18px) max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter))) 40px}
  html.motion .react__tag{grid-column:1/-1;align-self:start}
  html.motion .react__fig{grid-column:1}
  html.motion .vessel{width:100%}
  html.motion .zsteps{grid-column:2;margin:0}
  .zsteps h3{font-size:1.625rem}
  .zsteps p{font-size:1.125rem}
  .zsteps > li{padding:20px 0}
}

/* ---------- S7 Proof ---------- */
.proof{padding:72px 0;background:var(--abyss);border-top:1px solid var(--rule-dark)}
.proof__grid{position:relative;display:grid;gap:0;margin-top:34px}
.stat{position:relative;padding:20px 0 20px 26px;border-left:1.5px solid var(--rule-dark)}
.stat::before{content:"";position:absolute;left:-5.5px;top:36px;width:10px;height:10px;background:var(--cyan)}
.stat__n{display:block;font-size:clamp(3.25rem,15vw,5.5rem);line-height:.95;font-weight:600;letter-spacing:-.03em;color:var(--on-dark)}
.stat__l{display:block;margin-top:8px;color:var(--on-dark-2);max-width:26ch;text-wrap:balance}
html.motion .proof__grid .stat{opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s ease,transform .5s ease}
html.motion .proof__grid.is-in .stat{opacity:1;transform:none}
html.motion .proof__grid .stat:nth-child(2){transition-delay:.1s}
html.motion .proof__grid .stat:nth-child(3){transition-delay:.2s}
html.motion .proof__grid .stat:nth-child(4){transition-delay:.3s}
html.motion .proof__grid .stat:nth-child(5){transition-delay:.4s}
.clients{margin-top:56px;padding-top:26px;border-top:1px solid var(--rule-dark);display:grid;gap:16px}
.clients h3{font-size:1.5rem;letter-spacing:-.01em}
.clients p{color:var(--on-dark-2)}
.clients ul{display:grid;gap:10px}
.clients li{display:flex;align-items:center;gap:16px;font-size:1.1875rem;font-weight:500}
@media (min-width:900px){
  .proof{padding:120px 0}
  .proof__grid{grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:56px;margin-top:64px}
  .stat{border-left:0;padding:34px 0 0}
  .stat::before{left:0;top:-5px}
  /* five tiles on three columns: the last one takes the rest of the second row */
  .proof__grid .stat:nth-child(5){grid-column:span 2}
  .proof__grid .stat:nth-child(5) .stat__l{max-width:none}
  .proof__grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--steel);transform-origin:0 50%}
  html.motion .proof__grid::before{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
  html.motion .proof__grid.is-in::before{transform:none}
  .proof__grid .stat:nth-child(n+4)::before{background:var(--steel)}
  .clients{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;column-gap:64px;margin-top:88px}
  .clients ul{grid-row:1/3;grid-column:2}
  .clients li{font-size:1.5rem}
}

/* ---------- S8 Facilities + S9 About (daylight) ---------- */
/* the two sites, equal weight: stacked on phones, side by side from 700px */
.sites{display:grid;gap:0;margin-top:40px}
.site{padding:20px 0 24px;border-top:1.5px solid var(--ink)}
.site h3{font-size:1.5rem;letter-spacing:-.01em;margin-bottom:10px}
.site p + p{margin-top:4px}
@media (min-width:700px) and (max-width:899px){.sites{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
.facility__grid{display:grid;gap:40px;margin-top:16px}
.why{display:grid;gap:0}
.why h3,.about h3{font-size:1.5rem;letter-spacing:-.01em;margin-bottom:12px}
.why li{padding:14px 0 14px 28px;border-top:1px solid var(--rule);position:relative}
.why li::before{content:"";position:absolute;left:0;top:23px;width:9px;height:9px;background:var(--cyan-ink)}
.office{margin-top:22px}
/* work outside Türkiye: a quiet full-width note under the map */
.abroad{display:grid;gap:12px;margin-top:48px;padding-top:26px;border-top:1px solid var(--rule)}
.abroad h3{display:flex;align-items:center;gap:16px;font-size:1.25rem;letter-spacing:-.01em}
/* no single word left alone on the last line (progressive enhancement) */
.site p,.why li,.abroad p,.about .chapter__head .lead{text-wrap:pretty}
.about{border-top:1px solid var(--rule)}
.about__grid{display:grid;gap:36px;margin-top:40px}
.about__story{display:grid;gap:16px;align-content:start}
.about__story p{font-size:1.0625rem}
.about__facts{display:grid;gap:0;align-content:start}
.about__facts > div{padding:22px 0;border-top:1px solid var(--rule)}
.about__facts p + p{margin-top:8px}
.about__facts .independent{font-size:1.1875rem;font-weight:500;color:var(--ink)}
.tone-light a{color:var(--petrol)}
.tone-light a.inline{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (min-width:900px){
  .sites{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin-top:72px}
  .site{padding:26px 0 0}
  .site h3{font-size:2rem}
  .site p{font-size:1.1875rem}
  .facility__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;margin-top:72px;align-items:start}
  .abroad{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;margin-top:72px;padding-top:30px;align-items:start}
  .abroad h3{font-size:1.5rem;padding-top:2px}
  .abroad p{font-size:1.1875rem}
  .about__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:72px;margin-top:72px}
  .about__story p{font-size:1.1875rem}
}

/* ---------- S10 Contact — back to the surface ---------- */
.contact{position:relative;overflow:hidden;--sea-h:84px;--ship-w:240px;padding:80px 0 calc(var(--sea-h) + var(--ship-w) * .405 + 48px);background:linear-gradient(180deg,var(--abyss) 0%,#071826 30%,#0B2434 62%,#0F3040 100%);color:var(--on-dark)}
.contact .display{font-size:clamp(2.75rem,12vw,7rem)}
.contact__lead{margin-top:18px;color:var(--on-dark-2);font-size:1.125rem;max-width:44ch}
.contact__grid{display:grid;gap:0;margin-top:40px}
.contact__grid > div{padding:20px 0;border-top:1px solid var(--rule-dark)}
.contact__grid h3{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:10px;line-height:1.3}
.contact__grid a{display:inline-block;padding:9px 0;min-height:44px;font-size:1.1875rem;line-height:1.35;font-weight:600;text-decoration:none}
.contact__grid a:hover{text-decoration:underline}
.contact__grid p,.contact__grid address{color:var(--on-dark-2);line-height:1.5}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.contact__sea{position:absolute;z-index:1;left:0;right:0;bottom:0;height:var(--sea-h);background:linear-gradient(180deg,rgba(26,75,93,.78) 0,var(--surface) 55%);border-top:1.5px solid var(--steel)}
/* the descent counter, back where it started */
.contact__depth{position:absolute;right:var(--gutter);top:16px;font-size:2.25rem;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--cyan);white-space:nowrap}
.contact__sea::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:repeating-linear-gradient(90deg,rgba(143,166,178,.5) 0 18px,transparent 18px 44px)}
.contact__ship{position:absolute;left:calc(var(--string-x) - var(--ship-w) * .5);bottom:calc(var(--sea-h) - var(--ship-w) * .081);width:var(--ship-w);height:auto;max-width:none;color:#C3D2DA}
html.motion .contact__ship{animation:bob 6s ease-in-out infinite alternate}
@media (max-width:899px) and (min-height:760px){.contact{--ship-w:280px}}
/* four blocks: stacked on phones, 2 x 2 from 600px, one row only at full container width (1200px and up) */
@media (min-width:600px) and (max-width:1199px){.contact__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:900px) and (max-width:1199px){.contact__grid{column-gap:48px}}
@media (min-width:1200px){.contact__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1fr) minmax(0,1.3fr);column-gap:32px}.contact__grid a{font-size:1.0625rem}}
@media (min-width:900px){
  .contact{--ship-w:400px;--sea-h:110px;padding-top:140px}
  .contact__grid{margin-top:64px}
  .contact__depth{right:auto;left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));top:24px;font-size:3.25rem}
  .contact__btns{margin-top:32px}
  .contact__lead{font-size:1.3125rem}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface);color:var(--on-dark-2);padding:28px 0 34px;font-size:.9375rem}
.footer__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.footer__row .logo__svg{width:112px}
.footer__row a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark)}
.footer__copy{margin-right:auto}

/* ---------- 404 ---------- */
.e404{min-height:100vh;min-height:calc(var(--vh) * 100);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 40px) 0 80px;background:linear-gradient(180deg,var(--surface) 0%,#0A2131 40%,var(--abyss) 100%)}
.e404__code{font-size:clamp(6rem,34vw,16rem);line-height:.9;font-weight:600;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--steel)}
@supports not (-webkit-text-stroke:1px #000){.e404__code{color:var(--steel)}}
.e404 h1{font-size:clamp(2rem,7vw,3.5rem);margin:18px 0 10px}
.e404 h2{font-size:clamp(1.5rem,5vw,2.25rem);margin:40px 0 10px;color:var(--on-dark-2)}
.e404 p{color:var(--on-dark-2)}
.e404__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ---------- Short viewports that still get the pinned story ---------- */
@media (max-height:620px){
  html.motion .dial{width:min(88vw,calc(var(--vh) * 34))}
  html.motion .joint{width:min(100%,calc(var(--vh) * 34 * 1.6))}
  html.motion .rsteps h3,html.motion .ssteps h3{font-size:1.875rem;margin-bottom:6px}
  html.motion .rsteps > li,html.motion .ssteps > li{padding-top:10px}
  html.motion .rstep__no,html.motion .sstep__no{margin-bottom:4px}
  html.motion .vessel{width:min(100%,calc(var(--vh) * 26 * 2.2))}
  html.motion .react__tag{margin-bottom:4px}
  html.motion .zsteps > li{padding:7px 0}
  html.motion .zsteps p{font-size:.9375rem;line-height:1.35}
  html.motion .react__readywrap{min-height:46px}
  html.motion .ready{margin-top:6px}
  html.motion .shore__text{gap:8px}
  html.motion .shore__text .display{font-size:min(2rem,8.4vw)}
  html.motion .shore__pin{gap:12px;padding-top:calc(var(--header-h) + 12px)}
}
/* short phones a little taller than that: keep the S3 heading on one line so the pin has slack */
@media (max-width:899px) and (max-height:660px){html.motion .shore__text .display{font-size:min(2rem,8.4vw)}}
/* short phones: a slightly smaller map, so a four-line intro still leaves room above and below */
@media (max-width:899px) and (max-height:620px){html.motion .scene--shore .map{width:min(100%,calc(var(--vh) * 40 * 640 / 540))}}
@media (min-width:900px) and (max-height:620px){
  html.motion .descent__panel .caps{min-height:9rem}
  html.motion .depth{margin:8px 0 14px}
  html.motion .depth__value{font-size:3rem}
  html.motion .cap__text{font-size:1.5rem}
  html.motion .joint{width:min(100%,calc(var(--vh) * 38 * 1.6))}
  html.motion .rsteps h3{font-size:2rem}
}

/* ---------- Reduced motion: belt and braces ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* print: story.js drops to the static layout on beforeprint; this is the fallback for anything it misses */
@media print{
  .site-header{position:static}.rail,.hero__cue{display:none!important}
  html.motion .reveal,html.motion .proof__grid .stat{opacity:1;transform:none}
}