/* ==========================================================================
   Sea — /domains/sea/
   Night hero with the maritime picture, capabilities, the descent (surface →
   seabed), the console demo, dark-vessel steps, use cases, search and
   rescue, disciplines, next domains and the briefing.
   Blue-black values below are artwork (the water), not interface colours.
   ========================================================================== */

.page-sea {
  --sea-abyss: #02060B;
  --sea-deep: #04111C;
  --sea-mid: #0A2233;
  --sea-shallow: #123A52;
}

/* ================================================================== Hero
   Night in both themes. The frame under the headline is the maritime
   picture: the sea film with every ship held as a track.
   ------------------------------------------------------------------------ */
.sea-hero {
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 128px));
  padding-bottom: clamp(40px, 5vw, 80px);
}
.sea-hero .bg-glow { top: -44%; opacity: 0.85; }
/* A cold swell of water light under the frame — artwork, kept faint so the
   night stays night and crimson stays the only accent */
.sea-hero__tide {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1500px, 150vw);
  aspect-ratio: 2.4;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(40 110 140 / 0.16), rgb(18 58 82 / 0.08) 55%, transparent);
  filter: blur(8px);
}
.sea-hero__sep { display: inline-block; width: 18px; height: 1px; background: var(--line-2); }
.sea-hero__title {
  max-width: none;
  font-size: clamp(2.75rem, 0.8rem + 5.9vw, 6.6rem);
  line-height: 0.95;
}
.sea-hero__l1, .sea-hero__l2 { display: block; }
.sea-hero__l2 { color: var(--ink-3); }
.sea-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 56px;
  margin-top: clamp(24px, 3vw, 36px);
}
.sea-hero__lead { max-width: 580px; margin-top: 0; }
.sea-hero__actions { margin-top: 0; flex: none; }
.sea-hero__actions .btn--glass vm-icon { opacity: 0.8; }

.sea-hero__stage { margin-top: clamp(40px, 5vw, 72px); }
.sea-hero__media {
  --k: clamp(0, calc((var(--p, 0) - 0.12) * 3.2), 1);
  margin: 0;
  transform: scale(calc(0.955 + 0.045 * var(--k)));
  transform-origin: 50% 0;
  will-change: transform;
  /* on night the frame is drawn by a hairline and the crimson under-glow */
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 1px 0 rgb(255 255 255 / 0.14) inset,
    0 70px 140px -60px rgb(0 0 0 / 0.9),
    0 40px 90px -50px rgb(var(--crimson-rgb) / 0.4);
}
.sea-hero__still, .sea-hero__video { object-position: 42% 50%; }
.sea-hero__still { filter: saturate(0.9) brightness(0.84); }
.sea-hero__video { opacity: 0; transition: opacity 1.1s var(--ease-soft); filter: saturate(0.9) brightness(0.84); }
.sea-hero__media.is-playing .sea-hero__video { opacity: 1; }
.sea-hero__media::after { /* a soft floor so the HUD reads over bright water */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(5 5 6 / 0.5), transparent 26%, transparent 70%, rgb(5 5 6 / 0.45)),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, rgb(5 5 6 / 0.45)),
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.016) 0 1px, transparent 1px 3px);
}
.sea-hero__tracks { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-soft) 200ms; }
.sea-hero__media.is-tracking .sea-hero__tracks { opacity: 1; }
.sea-hero__media .hud { z-index: 3; }
.sea-hero__media .hud::before { display: none; }
.sea-hero__flag { transition: color var(--t-med) var(--ease-soft); text-shadow: 0 1px 3px rgb(0 0 0 / 0.9), 0 0 10px rgb(0 0 0 / 0.55); }
.sea-hero__flag.is-flagged { color: var(--crimson-300); }

.sea-hero__pause {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  color: #fff;
  background: rgb(10 10 12 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) { .sea-hero__pause:hover { background: rgb(10 10 12 / 0.72); border-color: rgb(255 255 255 / 0.32); } }
.sea-hero__pause:focus-visible { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--night-ink); border-radius: 50%; }
.sea-hero__pause vm-icon { grid-area: 1 / 1; }
.sea-hero__pause vm-icon[name="play"] { display: none; }
.sea-hero__pause[aria-pressed="true"] vm-icon[name="play"] { display: inline-flex; }
.sea-hero__pause[aria-pressed="true"] vm-icon[name="pause"] { display: none; }

/* The six things Vamocles does at sea, as an index under the picture */
.sea-index { margin-top: clamp(28px, 3.4vw, 44px); }
.sea-index ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sea-index li { min-width: 0; }
.sea-index li + li { border-left: 1px solid var(--line); }
.sea-index a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "n i" "l l";
  align-items: center;
  gap: 12px 10px;
  min-height: 60px;
  padding: 18px 16px 20px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  transition: color var(--t-fast), background-color var(--t-med) var(--ease-soft);
}
.sea-index li:first-child a { padding-left: 2px; }
.sea-index__n { grid-area: n; }
.sea-index vm-icon { grid-area: i; }
.sea-index a > span:last-child { grid-area: l; }
.sea-index a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-slow) var(--ease-out);
}
@media (hover: hover) { .sea-index a:hover { color: var(--ink); } }
.sea-index a:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) { .sea-index a:hover::before { transform: scaleX(1); } }
.sea-index a:focus-visible { box-shadow: var(--focus); border-radius: 4px; }
.sea-index__n { font-family: var(--font-mono); font-size: var(--fs-nano); font-weight: 500; letter-spacing: 0.08em; color: var(--ink-3); }
.sea-index vm-icon { color: var(--ink-3); transition: color var(--t-fast), transform var(--t-med) var(--ease-spring); }
@media (hover: hover) { .sea-index a:hover vm-icon { color: var(--accent-text); transform: translateY(-1px); } }

/* Narrower frames get a taller picture so the tracks and tags have room */
@media (max-width: 1100px) and (min-width: 701px) { .sea-hero__media { aspect-ratio: 16 / 9; } }
@media (max-width: 900px) {
  .sea-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sea-index li:nth-child(4) { border-left: 0; }
  .sea-index li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .sea-index li:nth-child(4) a { padding-left: 2px; }
}
@media (max-width: 700px) {
  .sea-hero__row { gap: 24px; }
  .sea-hero__actions { width: 100%; }
  .sea-hero__pause { right: 12px; bottom: 12px; }
  .sea-hero__media .hud__read { top: 20px; font-size: 9.5px; }
  .sea-hero__wide { display: none; }
  .sea-hero__media .hud__read--tl { left: 24px; }
  .sea-hero__media .hud__read--tr { right: 24px; }
  .sea-hero__media .hud__corner--tl, .sea-hero__media .hud__corner--bl { left: 12px; }
  .sea-hero__media .hud__corner--tr, .sea-hero__media .hud__corner--br { right: 12px; }
  .sea-hero__media .hud__corner--tl, .sea-hero__media .hud__corner--tr { top: 12px; }
  .sea-hero__media .hud__corner--bl, .sea-hero__media .hud__corner--br { bottom: 12px; }
  .sea-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sea-index li:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .sea-index li:nth-child(-n + 2) { border-top: 0; }
  .sea-index li:nth-child(even) { border-left: 1px solid var(--line); }
  .sea-index li:nth-child(odd) a { padding-left: 2px; }
  .sea-index a { padding: 16px 12px 18px; }
}
@media (max-width: 420px) {
  .sea-hero__media .hud__read--tl { max-width: 58%; }
  .sea-hero__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sea-hero__media { transform: none; }
}

/* ============================================================== Descent
   Scrolling descends from the surface picture, through the water column,
   to the pipeline on the seabed. Blue-black values are artwork (the water).
   ------------------------------------------------------------------------ */
.sea-descent { position: relative; z-index: 1; }
.sea-descent__runway { position: relative; height: 230vh; }
.sea-descent__stage {
  --d: 0;
  --surf: 1;
  --deep: 0;
  --water: 0;
  --zoom: 1;
  --deep-zoom: 1.14;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}
.sea-descent__media { position: absolute; inset: 0; z-index: 0; }
.sea-descent__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(100svh * 1.768));
  aspect-ratio: 1600 / 905;
  transform: translate(-50%, -50%) scale(var(--zoom));
  transform-origin: 54.7% 59.7%;
  will-change: transform, opacity;
}
.sea-descent__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sea-descent__frame--surface { opacity: var(--surf); }
.sea-descent__frame--surface .sea-descent__img { filter: saturate(0.85) brightness(0.72) contrast(1.05); }
.sea-descent__frame--deep { opacity: var(--deep); transform: translate(-50%, -50%) scale(var(--deep-zoom)); transform-origin: 50% 62%; }
.sea-descent__frame--deep .sea-descent__img { filter: brightness(1.05) saturate(1.1); }
.sea-descent__water {
  position: absolute;
  inset: 0;
  opacity: var(--water);
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(60 140 170 / 0.35), transparent 60%),
    linear-gradient(180deg, var(--sea-shallow) 0%, var(--sea-mid) 35%, var(--sea-deep) 70%, var(--sea-abyss) 100%);
}
.sea-descent__snow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(var(--water) + var(--deep) * 0.7); pointer-events: none; }
.sea-descent__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--night) 0%, rgb(5 5 6 / 0.7) 22%, rgb(5 5 6 / 0) 58%),
    linear-gradient(90deg, rgb(5 5 6 / 0.55) 0%, rgb(5 5 6 / 0) 55%),
    linear-gradient(270deg, rgb(5 5 6 / 0.5) 0%, rgb(5 5 6 / 0) 20%),
    linear-gradient(180deg, var(--night) 0%, rgb(5 5 6 / 0.55) 9%, rgb(5 5 6 / 0) 28%);
}

/* Contacts drawn on the surface picture (above the scrim, so they stay crisp) */
.sea-descent__frame--marks { opacity: var(--surf); pointer-events: none; }
.sea-descent__mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 700ms var(--ease-soft), transform 900ms var(--ease-out);
  transition-delay: calc(300ms + var(--i, 0) * 120ms);
}
.sea-descent__stage.is-active .sea-descent__mark { opacity: 1; transform: none; }
.sea-descent__mark::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgb(255 255 255 / 0.85);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
}
.sea-descent__mark em, .sea-descent__rov em, .sea-descent__find em {
  position: absolute;
  white-space: nowrap;
  padding: 3px 7px;
  font: 500 10px/1.3 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(0 0 0 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.25);
}
.sea-descent__mark em { left: 20px; top: -10px; }
.sea-descent__zone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1.3);
  border-radius: 50%;
  border: 1.5px dashed rgb(255 72 99 / 0.7);
  background: repeating-linear-gradient(45deg, rgb(255 72 99 / 0.16) 0 1px, transparent 1px 7px);
  opacity: 0;
  transition: opacity 1s var(--ease-soft) 900ms, transform 1.2s var(--ease-out) 900ms;
}
.sea-descent__stage.is-active .sea-descent__zone { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sea-descent__rov, .sea-descent__find {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  --c: rgb(255 255 255 / 0.85);
  background:
    linear-gradient(var(--c), var(--c)) left top / 18px 1.5px,
    linear-gradient(var(--c), var(--c)) left top / 1.5px 18px,
    linear-gradient(var(--c), var(--c)) right top / 18px 1.5px,
    linear-gradient(var(--c), var(--c)) right top / 1.5px 18px,
    linear-gradient(var(--c), var(--c)) left bottom / 18px 1.5px,
    linear-gradient(var(--c), var(--c)) left bottom / 1.5px 18px,
    linear-gradient(var(--c), var(--c)) right bottom / 18px 1.5px,
    linear-gradient(var(--c), var(--c)) right bottom / 1.5px 18px;
  background-repeat: no-repeat;
}
.sea-descent__rov { opacity: clamp(0, calc((var(--d) - 0.7) * 6), 1); }
.sea-descent__rov em { left: 0; top: 100%; margin-top: 8px; }
.sea-descent__find {
  --c: var(--crimson-300);
  opacity: clamp(0, calc((var(--d) - 0.8) * 7), 1);
  box-shadow: none;
}
.sea-descent__find em { left: -1.5px; bottom: 100%; margin-bottom: 6px; background: var(--crimson); border-color: transparent; }

/* HUD */
.sea-descent__hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: var(--font-mono); color: #fff; }
.sea-descent__corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgb(255 255 255 / 0.55); }
.sea-descent__corner--tl { top: calc(var(--header-h) + 8px); left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.sea-descent__corner--tr { top: calc(var(--header-h) + 8px); right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.sea-descent__corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.sea-descent__corner--br { bottom: 16px; right: 16px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.sea-descent__readout {
  position: absolute;
  top: calc(var(--header-h) + 22px);
  left: calc(var(--gutter) + 12px);
  font-size: 10.5px;
  line-height: 1.75;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
  transition: opacity 500ms var(--ease-soft), transform 700ms var(--ease-out);
}
.sea-descent__readout span { color: var(--crimson-300); }
.sea-descent__readout--deep { opacity: 0; transform: translateY(8px); }
.sea-descent__stage.is-deep .sea-descent__readout--surface { opacity: 0; transform: translateY(-8px); }
.sea-descent__stage.is-deep .sea-descent__readout--deep { opacity: 1; transform: none; }

.sea-descent__gauge {
  position: absolute;
  right: calc(var(--gutter) + 12px);
  top: 50%;
  height: min(46vh, 380px);
  transform: translateY(-46%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: end;
  gap: 10px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.sea-descent__gauge-track {
  position: relative;
  width: 14px;
  background:
    linear-gradient(90deg, transparent 13px, rgb(255 255 255 / 0.55) 13px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.5) 0 1px, transparent 1px 10%) right top / 8px 100% no-repeat;
}
.sea-descent__gauge-mark {
  position: absolute;
  right: -3px;
  top: calc(var(--d) * 100%);
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: var(--crimson-300);
  box-shadow: none;
}
.sea-descent__gauge-read { position: absolute; right: 28px; top: clamp(26px, calc(6px + var(--d) * (100% - 44px)), calc(100% - 64px)); display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.sea-descent__gauge-read b { font-weight: 500; font-size: 13px; letter-spacing: 0.08em; color: #fff; font-variant-numeric: tabular-nums; }

/* Copy */
.sea-descent__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: clamp(56px, 10vh, 120px);
}
.sea-descent__inner .eyebrow { color: rgb(255 255 255 / 0.72); }
.sea-descent__title {
  max-width: 15ch;
  margin-top: 18px;
  font-size: clamp(2.4rem, 0.9rem + 3.9vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-mega);
  font-weight: 750;
  color: #fff;
  text-shadow: 0 10px 50px rgb(0 0 0 / 0.45);
}
.sea-descent__a, .sea-descent__b { transition: color 900ms var(--ease-soft); }
.sea-descent__b { color: rgb(255 255 255 / 0.36); }
.sea-descent__stage.is-deep .sea-descent__a { color: rgb(255 255 255 / 0.36); }
.sea-descent__stage.is-deep .sea-descent__b { color: #fff; }
.sea-descent__lead { max-width: 520px; margin-top: 22px; font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.016em; color: rgb(255 255 255 / 0.8); }

@media (max-width: 760px) {
  .sea-descent__runway { height: 210vh; }
  .sea-descent__gauge { display: none; }
  .sea-descent__inner { padding-bottom: 48px; }
  .sea-descent__lead { font-size: 1.04rem; margin-top: 18px; }
  .sea-descent__mark em, .sea-descent__rov em { display: none; }
  .sea-descent__zone, .sea-descent__mark:last-child, .sea-descent__find { display: none; }
  .sea-descent__readout { font-size: 9.5px; }
}
/* Portrait tablets see the middle of the picture: keep only the central label */
@media (orientation: portrait) and (min-width: 761px) {
  .sea-descent__mark:not(.sea-descent__mark--centre) em { display: none; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .sea-descent__title { font-size: clamp(2.2rem, 0.6rem + 3.6vw, 4.2rem); }
  .sea-descent__readout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sea-descent__b { color: rgb(255 255 255 / 0.36); }
  .sea-descent__mark, .sea-descent__zone { transition: none; }
}

/* ============================================================ Intro, caps */
.sea-intro { padding-top: clamp(40px, 6vw, 96px); }
.sea-intro__head { max-width: 1120px; margin-bottom: clamp(56px, 8vw, 112px); }
.sea-intro__statement { margin-top: 22px; font-size: clamp(2.2rem, 0.8rem + 4.2vw, 5.1rem); line-height: 1.02; }
.sea-caps { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.sea-caps__aside { align-self: stretch; }
.sea-caps__sticky { position: sticky; top: calc(var(--header-h-compact) + 44px); }
.sea-caps__aside .lead { max-width: 460px; }

.sea-column {
  position: relative;
  margin-top: 36px;
  padding: 10px;
  border-radius: var(--r-xl);
  border: 1px solid var(--night-line);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.55);
  overflow: hidden;
}
.sea-column__layers { position: relative; display: grid; gap: 2px; }
.sea-column__layers::before { /* the thread that ties the layers into one picture */
  content: "";
  position: absolute;
  left: 32px;
  top: 30px;
  bottom: -40px;
  width: 1px;
  background: linear-gradient(180deg, var(--crimson-300), var(--crimson));
  z-index: 1;
}
.sea-column__layer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 22px;
  border-radius: 16px;
  color: var(--night-ink);
}
.sea-column__layer vm-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; color: #fff; }
.sea-column__layer span { display: grid; gap: 1px; font-size: var(--fs-micro); color: rgb(255 255 255 / 0.7); }
.sea-column__layer b { font-family: var(--font-mono); font-size: var(--fs-nano); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.sea-column__layer--orbit { background: linear-gradient(180deg, #07070B, #0C0D14); }
.sea-column__layer--air { background: linear-gradient(180deg, #0D1119, #121925); }
.sea-column__layer--surface { background: linear-gradient(180deg, var(--sea-shallow), var(--sea-mid)); }
.sea-column__layer--surface::before { /* waterline */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 6px;
  background: radial-gradient(6px 3px at 6px 3px, rgb(255 255 255 / 0.55) 40%, transparent 60%) 0 0 / 14px 6px repeat-x;
  opacity: 0.6;
}
.sea-column__layer--seabed { background: linear-gradient(180deg, var(--sea-deep), var(--sea-abyss)); }
.sea-column__cap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.sea-column__node { width: 22px; height: 22px; display: grid; place-items: center; }
.sea-column__node::before { content: ""; width: 10px; height: 10px; background: var(--crimson); transform: rotate(45deg); box-shadow: none; }

.sea-caps__list { border-top: 1px solid var(--line); }
.sea-cap {
  display: grid;
  grid-template-columns: 44px 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--line);
}
.sea-cap__num { padding-top: 14px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--ink-3); }
.sea-cap__icon { width: 48px; height: 48px; transition: color var(--t-fast) var(--ease-soft); }
.sea-cap:hover .sea-cap__icon { color: var(--accent-text); }
.sea-cap h3 { font-size: var(--fs-h4); padding-top: 11px; }
.sea-cap p { margin-top: 10px; color: var(--ink-3); max-width: 58ch; }
.sea-cap__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 960px) {
  .sea-caps { grid-template-columns: minmax(0, 1fr); }
  .sea-caps__sticky { position: static; }
  .sea-column { max-width: 520px; }
}
@media (max-width: 600px) {
  .sea-cap { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .sea-cap__num { display: none; }
}

/* ============================================================== Picture */
.sea-picture { overflow: hidden; padding-top: clamp(40px, 6vw, 96px); }
.sea-picture .section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sea-picture__hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.sea-picture__hint vm-icon { color: var(--accent-text); }
@media (max-width: 700px) { .sea-picture__hint { justify-content: flex-start; align-items: flex-start; text-align: left; } .sea-picture__hint vm-icon { margin-top: 3px; } }

.sea-dark { margin-top: clamp(96px, 12vw, 176px); }
.sea-dark__head { align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.sea-dark__head .h1 { font-size: var(--fs-h1); }
.sea-dark__steps .step h3 { color: var(--ink); }
@media (max-width: 1024px) and (min-width: 901px) { .sea-dark__steps { --cols: 2 !important; } }
@media (max-width: 900px) { .sea-dark__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sea-dark__steps { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================= Uses */
.sea-bento { grid-auto-rows: minmax(250px, auto); }
@media (max-width: 640px) { .sea-bento { grid-auto-rows: auto; } .sea-use .card__icon + .card__kicker { margin-top: 10px; } }
.sea-use { gap: 12px; }
.sea-use h3 { font-size: var(--fs-h4); line-height: 1.2; }
.sea-use .card__kicker { margin-top: auto; }
.sea-use .card__icon + .card__kicker { margin-top: 18px; }
.sea-use--media { padding: 0; gap: 0; background: var(--night-1); border-color: var(--night-line); }
.sea-use__media { position: relative; aspect-ratio: 2.3 / 1; overflow: hidden; }
.sea-use__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; transition: transform 500ms var(--ease-out); }
.sea-use--media:hover .sea-use__media > img { transform: scale(1.03); }
.sea-use--media.is-in .hud { --on: 1; }
.sea-use--media .hud__box { opacity: 1; transform: none; }
.sea-use__copy { display: flex; flex-direction: column; gap: 10px; padding: var(--card-pad); }
.sea-use--media .sea-use__copy .card__kicker { margin-top: 0; }
.sea-use--media h3 { color: var(--night-ink); max-width: 26ch; }
.sea-use--media p { color: var(--night-ink-3); max-width: 60ch; }
.sea-use--cable .card__kicker { margin-top: auto; }
.sea-use__kicker--ink { color: rgb(255 255 255 / 0.75); }
.card--crimson .card__kicker { color: rgb(255 255 255 / 0.75); }

.sea-cable { width: 100%; height: auto; margin: -6px 0 6px; }
.sea-cable__sea { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sea-cable__line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.sea-cable__ship path { fill: #fff; }
.sea-cable__anchor { fill: none; stroke: var(--crimson-300); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-dashoffset: 40; }
.sea-cable__hit { fill: rgb(200 16 46 / 0.35); stroke: var(--crimson-300); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sea-use--cable.is-in .sea-cable__anchor { animation: sea-draw 1.4s var(--ease-out) 500ms forwards; }
.sea-use--cable.is-in .sea-cable__hit { animation: sea-hit 700ms var(--ease-out) 1.6s forwards; }
@keyframes sea-draw { to { stroke-dashoffset: 0; } }
@keyframes sea-hit { from { opacity: 0; transform: scale(2); } to { opacity: 1; transform: scale(1); } }

.sea-use--wide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.sea-use--wide .sea-use__copy { padding: 0; }
.sea-use--wide .card__kicker { margin-top: 12px; }
.sea-route { position: relative; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.sea-route svg { display: block; width: 100%; height: auto; }
.sea-route__grid path { fill: none; stroke: var(--line); stroke-width: 1; }
.sea-route__hatch { stroke: var(--crimson); stroke-width: 1.4; opacity: 0.35; }
.sea-route__zone { fill: none; stroke: var(--crimson); stroke-width: 1.4; stroke-dasharray: 4 4; }
.sea-route__zone-fill { fill: url(#sea-hatch); }
.sea-route__old { fill: none; stroke: var(--ink-4); stroke-width: 1.6; stroke-dasharray: 3 5; }
.sea-route__new { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.sea-route__wp { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; opacity: 0; }
.sea-route__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--ink-3); }
.sea-route__label--zone { fill: var(--accent-text); }
.sea-use--wide.is-in .sea-route__new { animation: sea-draw 2.2s var(--ease-out) 400ms forwards; }
.sea-use--wide.is-in .sea-route__wp { animation: sea-fade 500ms var(--ease-soft) forwards; }
.sea-use--wide.is-in .sea-route__wp:nth-of-type(1) { animation-delay: 900ms; }
.sea-use--wide.is-in .sea-route__wp:nth-of-type(2) { animation-delay: 1400ms; }
.sea-use--wide.is-in .sea-route__wp:nth-of-type(3) { animation-delay: 1800ms; }
@keyframes sea-fade { to { opacity: 1; } }

@media (max-width: 1024px) {
  .sea-use--wide { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================== SAR */
.sea-sar { padding-top: 0; }
.sea-sar__split { align-items: center; }
.sea-sar__list { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--line); }
.sea-sar__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-small); }
.sea-sar__list span { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent-text); padding-top: 2px; }
.sea-sar__list b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 650; font-size: var(--fs-body); }

.sea-plan {
  --k: clamp(0, calc((var(--p, 0) - 0.1) * 2.7), 1);
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--night-line);
  background:
    radial-gradient(80% 70% at 60% 40%, rgb(40 110 140 / 0.35), transparent 70%),
    linear-gradient(160deg, var(--sea-mid), var(--sea-deep) 60%, var(--sea-abyss));
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / 0.6);
}
.sea-plan__svg { display: block; width: 100%; height: auto; }
.sea-plan__grid path { fill: none; stroke: rgb(255 255 255 / 0.07); stroke-width: 1; }
.sea-plan__drift, .sea-plan__drift-head { fill: none; stroke: rgb(255 255 255 / 0.8); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sea-plan__drift-head { stroke-dasharray: none; }
.sea-plan__area { fill: rgb(255 255 255 / 0.04); stroke: rgb(255 255 255 / 0.35); stroke-width: 1; stroke-dasharray: 2 4; opacity: clamp(0, calc(var(--k) * 3), 1); }
.sea-plan__square { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.sea-plan__sector { fill: rgb(255 72 99 / 0.08); stroke: var(--crimson-300); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc(var(--k) * 1.3 - 0.2), 1)); fill-opacity: clamp(0, calc(var(--k) * 2 - 1), 1); }
.sea-plan__datum { fill: var(--crimson); stroke: #fff; stroke-width: 2; }
.sea-plan__found { fill: none; stroke: var(--crimson-300); stroke-width: 2; opacity: clamp(0, calc((var(--k) - 0.85) * 8), 1); }
.sea-plan__lead { fill: none; stroke: var(--crimson-300); stroke-width: 1; opacity: clamp(0, calc((var(--k) - 0.85) * 8), 1); }
.sea-plan__t { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; fill: rgb(255 255 255 / 0.72); }
.sea-plan__t--hi { fill: var(--crimson-300); opacity: clamp(0, calc((var(--k) - 0.85) * 8), 1); }
.sea-plan__cap { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid var(--night-line); font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); }
.sea-plan__cap span:last-child { color: var(--crimson-300); }
@media (max-width: 600px) { .sea-plan__t { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .sea-plan { --k: 1; } }

/* ========================================================== Disciplines */
.sea-disc { overflow: hidden; }
.sea-disc .bg-mark { right: -10%; bottom: -30%; width: min(900px, 90vw); }
.sea-disc__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.sea-disc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease-out), background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.sea-disc__card:hover { transform: translateY(-6px); background: rgb(255 255 255 / 0.13); border-color: rgb(255 255 255 / 0.4); }
.sea-disc__card.spotlight::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgb(255 255 255 / 0.16), transparent 60%); }
.sea-disc__card.spotlight::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -40%), rgb(255 255 255 / 0.8), transparent 65%); }
.sea-disc__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: rgb(255 255 255 / 0.7); }
.sea-disc__card vm-icon { color: #fff; margin-top: 18px; }
.sea-disc__card h3 { font-size: var(--fs-h3); color: #fff; }
.sea-disc__card p { color: rgb(255 255 255 / 0.84); font-size: var(--fs-small); line-height: 1.55; }
.sea-disc__card .link-arrow { margin-top: auto; padding-top: 12px; color: #fff; }
@media (max-width: 900px) { .sea-disc__grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================= Next */
.sea-next__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.sea-next__head .h1 { margin-top: 18px; max-width: 16ch; }
.sea-next__head .link-arrow { flex: none; padding-bottom: 8px; }
.sea-next__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.sea-next__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t-fast) var(--ease-soft);
}
.sea-next__card:hover { border-color: var(--line-2); }
.sea-next__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night-2); }
.sea-next__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.sea-next__card:hover .sea-next__media img { transform: scale(1.03); }
.sea-next__copy { position: relative; display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 34px); padding-right: 84px; }
.sea-next__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--accent-text); }
.sea-next__num b { margin-left: 8px; font-weight: 500; text-transform: uppercase; color: var(--ink-3); }
.sea-next__copy h3 { font-size: var(--fs-h3); }
.sea-next__copy p { color: var(--ink-3); font-size: var(--fs-small); }
.sea-next__go {
  position: absolute;
  top: clamp(22px, 2.6vw, 34px);
  right: clamp(22px, 2.6vw, 34px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  color: var(--ink);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sea-next__card:hover .sea-next__go { border-color: var(--ink); }
.sea-next__card:focus-visible { box-shadow: var(--focus); border-radius: var(--r-xl); }
@media (max-width: 800px) {
  .sea-next__grid { grid-template-columns: minmax(0, 1fr); }
  .sea-next__head { flex-direction: column; align-items: flex-start; }
}

.sea-cta { margin-top: clamp(72px, 9vw, 128px); }
/* On crimson the white key is the primary action; the secondary is a clean
   white outline (a frosted glass over crimson reads as a second red) */
.sea-cta .btn--glass {
  --btn-bg: transparent;
  --btn-line: rgb(255 255 255 / 0.5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sea-cta .btn--glass:hover { --btn-bg: rgb(255 255 255 / 0.1); --btn-line: #fff; }
.sea-cta .eyebrow { margin: 0; font-size: var(--fs-nano); line-height: 1.5; }
.sea-cta .eyebrow + h2 { margin-top: 18px; }
.sea-cta__mark {
  position: absolute;
  right: -4%;
  top: 50%;
  z-index: -1;
  width: min(560px, 60%);
  aspect-ratio: 424 / 276;
  transform: translateY(-50%) rotate(-8deg);
  background: rgb(255 255 255 / 0.1);
  -webkit-mask: url("../../assets/brand/v-mark-mask.svg") center / contain no-repeat;
  mask: url("../../assets/brand/v-mark-mask.svg") center / contain no-repeat;
}