/* ═══════════════════════════════════════════════════════════════════
   MARBLE · Direction A — "DEEP"
   Deep navy/midnight base, bone-white type, sparse warm beacon accent.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --nav-h: 76px;
  --ink-0: #fbfaf5;            /* page bg — warm white */
  --ink-1: #f4f2ea;            /* surface */
  --ink-2: #ece9dd;            /* raised surface */
  --ink-3: #ded9c9;            /* hover, strong dividers */
  --bone: #11203a;             /* PRIMARY TEXT — deep navy ink */
  --bone-dim: #4d5666;         /* secondary text */
  --bone-soft: rgba(17,32,58,0.55);  /* tertiary / mono labels */
  --line: rgba(17,32,58,0.12);
  --line-soft: rgba(17,32,58,0.07);
  --beacon: #c98a1e;           /* gold accent, deepened for light bg */
  --beacon-hot: #e0a233;       /* gold hover/glow */
  --teal: #1f9079;             /* "live / sensing" signal */
  --teal-lift: #178a6f;        /* teal for small text on light */
  --blue: #0054a2;             /* "deep / subsea" signal */
  --blue-lift: #0a5fb0;        /* blue for small text on light */
  --accent: var(--beacon);

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Poppins", system-ui, -apple-system, sans-serif;

  --container: 1320px;
  --gutter: clamp(24px, 4vw, 72px);
}

/* Sub-page accent themes — recolor the page's entire accent to its track color.
   Apply on <body>; every var(--beacon)/var(--accent) inherits the new hue. */
.theme-gold { --beacon: #c98a1e; --beacon-hot: #e0a233; --accent: #c98a1e; }
.theme-teal { --beacon: var(--teal-lift); --beacon-hot: #5fe0bd; --accent: var(--teal-lift); }
.theme-blue { --beacon: var(--blue-lift); --beacon-hot: #6fb0f0; --accent: var(--blue-lift); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { background: var(--ink-0); color: var(--bone); font-family: var(--font-display); font-feature-settings: "ss01", "ss02"; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; line-height: 1.4; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
em { font-style: italic; color: var(--beacon); font-weight: 400; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.mono-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-soft); }

/* Scroll-linked appear/disappear — tagged homepage blocks fade + drift through the viewport */
[data-scrollfx] { opacity: var(--fx-op, 1); transform: translate3d(0, var(--fx-y, 0px), 0); will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { [data-scrollfx] { opacity: 1 !important; transform: none !important; } }

/* ─── UTILITY BAR ─────────────────────────────────────── */
.util { background: var(--ink-1); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 60; }
.util-inner { max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-soft); }
.util .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-lift); box-shadow: 0 0 8px var(--teal); animation: pulse 2.6s ease-in-out infinite; }
.util-text { color: var(--bone-dim); }
.util-spacer { flex: 1; }
.util-link { color: var(--bone-soft); transition: color .15s; }
.util-link:hover { color: var(--bone); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ─── NAV ─────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease, transform .4s cubic-bezier(.4,0,.2,1); }
.nav.nav-hidden { transform: translateY(-100%); }
.nav.scrolled { background: rgba(251,250,245,0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: none; width: 100%; margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 48px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--bone); }
.brand-logo { height: 44px; width: auto; display: block; }
.brand-logo-lg { height: 64px; }
.brand-mark { width: 26px; height: 26px; color: var(--bone); }
.brand-wordmark { font-weight: 600; font-size: 18px; letter-spacing: 0.18em; }
.brand-lg .brand-mark { width: 38px; height: 38px; }
.brand-lg .brand-wordmark { font-size: 24px; }

.nav-items { display: flex; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-item { padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--bone); border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, background .15s; }
.nav-item:hover { color: var(--bone); background: rgba(17,32,58,0.05); }
.nav-item.nav-item-active { color: var(--bone); }
.nav-item.nav-item-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1px; background: var(--beacon);
}
.nav-item { position: relative; }
.nav-cta.nav-item-active { background: var(--bone); color: var(--ink-0); border-color: var(--bone); }

/* ─── MOBILE NAV (hamburger + drawer) ─── */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
  position: relative; z-index: 95;
}
.nav-burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--bone);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; inset: 0;
  background: rgba(251,250,245,0.985);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  z-index: 92;
  display: flex; flex-direction: column;
  padding: 88px 24px 32px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.mobile-drawer.is-open { opacity: 1; visibility: visible; }
.md-section { border-bottom: 0; }
.md-section + .md-section { border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent); }
.md-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--bone);
  transition: color .2s ease, transform .25s ease, padding-left .25s ease;
}
.md-link:hover, .md-link:focus-visible { color: var(--bone); padding-left: 10px; outline: none; }
.md-link.md-sub {
  font-size: 15px; font-weight: 400;
  padding: 12px 4px 12px 16px;
  color: var(--bone-dim);
  letter-spacing: 0;
}
.md-link.md-sub:hover { color: var(--bone); padding-left: 22px; }
.md-link span.md-arrow {
  color: var(--beacon); font-size: 16px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .25s ease;
}
.md-link.md-sub:hover span.md-arrow { opacity: 1; transform: translateX(0); }
.md-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--bone);
  width: 100%; background: none; border: 0; text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: color .2s ease;
}
.md-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid color-mix(in oklab, var(--beacon) 50%, transparent);
  border-radius: 999px;
  color: var(--beacon); font-size: 14px;
  transition: transform .3s ease, background .25s ease, border-color .25s ease;
}
.md-toggle[aria-expanded="true"] .md-chevron {
  transform: rotate(90deg);
  background: color-mix(in oklab, var(--beacon) 18%, transparent);
  border-color: var(--beacon);
}
.md-sub-group {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
  opacity: 0;
  padding-left: 8px;
  border-left: 1px solid color-mix(in oklab, var(--beacon) 28%, transparent);
  margin-left: 4px;
}
.md-toggle[aria-expanded="true"] + .md-sub-group {
  max-height: 600px;
  opacity: 1;
  padding-top: 4px;
  padding-bottom: 12px;
}
.md-cta {
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  background: var(--bone); color: var(--ink-0);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  align-self: flex-start;
}
.caret { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid currentColor; opacity: 0.6; }

.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--bone); border: 1px solid var(--bone); border-radius: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); transition: background .18s, border-color .18s, color .18s; }
.nav-cta:hover { background: var(--beacon); color: var(--bone); border-color: var(--beacon); }

/* Mega menu */
.megamenu { position: absolute; left: 0; right: 0; top: 100%; background: rgba(251,250,245,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.megamenu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mm-inner { max-width: var(--container); margin: 0 auto; padding: 36px var(--gutter) 44px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; }
.mm-col { display: flex; flex-direction: column; gap: 4px; }
.mm-col-label { gap: 14px; }
.mm-blurb { color: var(--bone-dim); font-size: 14px; max-width: 280px; line-height: 1.5; }
.mm-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; color: var(--bone); transition: padding .2s, color .2s; }
.mm-link:hover { padding-left: 8px; color: var(--beacon); }
.mm-link .mm-arrow { opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; color: var(--beacon); }
.mm-link:hover .mm-arrow { opacity: 1; transform: translateX(0); }

/* ─── HERO ────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--ink-0); display: flex; flex-direction: column; margin-top: -84px; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04) brightness(0.92);
}
/* Dark navy tint over the footage so headline text stays readable */
.hero-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 30% 50%, rgba(5,11,22,0.28) 0%, rgba(5,11,22,0.45) 60%, rgba(2,5,9,0.75) 100%),
    linear-gradient(180deg, rgba(5,13,26,0.35) 0%, rgba(5,11,22,0.25) 40%, rgba(2,5,9,0.85) 100%);
}
.hero-rays { position: absolute; inset: 0; background:
  conic-gradient(from 220deg at 50% -10%, transparent 0%, rgba(214,161,106,0.04) 8%, transparent 16%, rgba(236,231,216,0.025) 24%, transparent 32%);
  mix-blend-mode: screen;
}
.hero-grid { position: absolute; inset: 0; background-image:
  linear-gradient(to right, rgba(236,231,216,0.05) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(236,231,216,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%);
  opacity: 0.6;
}
.hero-sonar { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; transform: translate(-50%, -50%); opacity: 0.5; }
.hero-sonar .ring { transform-origin: center; }
.hero-sonar .r1 { animation: sonar 6s ease-out infinite; }
.hero-sonar .r2 { animation: sonar 6s ease-out infinite 1.5s; }
.hero-sonar .r3 { animation: sonar 6s ease-out infinite 3s; }
.hero-sonar .r4 { animation: sonar 6s ease-out infinite 4.5s; }
@keyframes sonar {
  0% { transform: scale(0.4); opacity: 0; }
  20% { opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hero-auv { display: none; }
.hero-sonar { opacity: 0.25; }
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-120px, -20px); }
}
.hero-vignette { position: absolute; inset: 0; background:
  radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%),
  linear-gradient(to bottom, rgba(5,11,22,0.4) 0%, transparent 20%, transparent 60%, var(--ink-0) 100%);
}

.hero-content { position: relative; flex: 1; max-width: var(--container); width: 100%; margin: 0 auto; padding: 116px var(--gutter) 96px; display: flex; flex-direction: column; }
.hero-top { display: flex; justify-content: space-between; padding-bottom: 80px; }
.hero-h1 { font-size: clamp(56px, 9vw, 132px); line-height: 0.96; font-weight: 400; letter-spacing: -0.03em; margin-top: auto; max-width: 1100px; }
.hero-h1-sm { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; max-width: 18ch; text-wrap: balance; }
.h1-line { display: block; }
.h1-line-em { font-style: italic; color: var(--bone); font-weight: 300; padding-left: 0.06em; }
.hero-sub { margin-top: 36px; max-width: 540px; font-size: 18px; line-height: 1.5; color: var(--bone-dim); }

.hero-foot { margin-top: 64px; margin-bottom: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.hero-foot-l { display: flex; gap: 18px; align-items: center; }
.hero-foot-r { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; min-width: 240px; }
.hero-readout { background: rgba(10,20,36,0.6); border: 1px solid var(--line); border-left: 2px solid var(--teal); padding: 12px 16px; min-width: 240px; backdrop-filter: blur(8px); }
.readout-row { display: flex; justify-content: space-between; padding: 4px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bone-soft); }
.readout-val { color: var(--teal-lift); font-weight: 500; }

.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--bone); color: var(--bone); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; border-radius: 7px; transition: background .15s, transform .15s; }
.btn-primary:hover { background: var(--beacon); transform: translateY(-1px); }
.btn-ghost { padding: 14px 6px; white-space: nowrap; flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid transparent; transition: border-color .15s; }
.btn-ghost:hover { border-color: var(--beacon); }

.hero-scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--bone-soft); }
.scroll-bead { animation: bead 2.4s ease-in-out infinite; }
@keyframes bead { 0% { cy: 6; opacity: 0; } 30% { opacity: 1; } 100% { cy: 34; opacity: 0; } }

/* ─── SECTION HEADS ───────────────────────────────────── */
.section-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.section-head-lg { padding-bottom: 64px; align-items: flex-end; }
.section-title { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.02; font-weight: 400; letter-spacing: -0.025em; margin-top: 24px; text-wrap: balance; max-width: 14ch; }
.section-sub { max-width: 440px; font-size: 16px; line-height: 1.55; color: var(--bone-dim); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--line); transition: border-color .2s, color .2s; }
.link-arrow span { transition: transform .25s; }
.link-arrow:hover { color: var(--beacon); border-color: var(--beacon); }
.link-arrow:hover span { transform: translateX(4px); }
.link-arrow-lg { font-size: 13px; padding-bottom: 6px; }

/* ─── MISSION ─────────────────────────────────────────── */
.mission { padding: 120px 0; background: var(--ink-0); }
.mission-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; margin-top: 64px; align-items: flex-start; }
.mission-stmt { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.18; font-weight: 300; letter-spacing: -0.015em; color: var(--bone); }
.mission-side { padding-top: 12px; color: var(--bone-dim); font-size: 16px; line-height: 1.6; display: flex; flex-direction: column; gap: 24px; }
/* Careers "Why MARBLE" — long paragraph, so a smaller, calmer statement size */
.mission-why .mission-stmt { font-size: clamp(20px, 2vw, 28px); line-height: 1.34; font-weight: 400; }
.mission-why .mission-grid { gap: 64px; margin-top: 48px; }
.mission-why .mission-side { padding-top: 4px; }

/* ─── MISSION · BOLD (index, full-bleed light) ────────── */
.mission-bold {
  background: var(--ink-1);
  color: var(--bone);
  padding: clamp(96px, 13vw, 200px) 0;
}
.mission-bold .mission-wrap {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mission-bold .mission-top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: clamp(36px, 4.5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.mission-bold .mono-label { color: var(--bone-soft); }
.mission-bold .mission-stmt {
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--bone);
  margin: clamp(40px, 4.5vw, 72px) 0 0;
  max-width: 30ch;
  text-wrap: balance;
}

/* Emphasis carried by weight alone — no underline */
.mission-bold .mission-stmt em {
  font-style: normal;
  font-weight: 800;
  color: var(--bone);
}
.mission-bold .mission-foot {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-top: clamp(56px, 7vw, 112px);
  padding-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid var(--line);
}
.mission-bold .mission-note {
  max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--bone-dim);
}
.mission-bold .mission-link {
  color: var(--bone);
  font-weight: 600;
  white-space: nowrap;
}
.mission-bold .mission-link span { color: var(--beacon-hot); filter: brightness(.86); }

/* Reveal — word-rise + underline draw, gated on .anim-ready (JS-only) */
.mission-bold .mission-stmt .w-i { display: inline-block; }
.mission-bold.anim-ready .mission-stmt .w-i {
  opacity: 0; transform: translateY(0.52em);
  transition: opacity .6s ease, transform .68s cubic-bezier(.2,.75,.25,1);
}
.mission-bold.anim-ready.is-revealed .mission-stmt .w-i { opacity: 1; transform: none; }
.mission-bold.anim-ready .mr {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.mission-bold.anim-ready.is-revealed .mr { opacity: 1; transform: none; }
.mission-bold.anim-ready .mission-note { transition-delay: .5s; }
.mission-bold.anim-ready .mission-link { transition-delay: .6s; }
/* Settled — snap to final state instantly (covers paused/backgrounded timelines) */
.mission-bold.anim-ready.is-settled .mission-stmt .w-i,
.mission-bold.anim-ready.is-settled .mr { opacity: 1; transform: none; transition: none; }

/* Looping ocean-wave undulation across the words, once the reveal has landed */
@media (prefers-reduced-motion: no-preference) {
  .mission-bold.anim-ready.is-settled .mission-stmt .w-i {
    animation: missionWave 3.8s ease-in-out infinite;
    animation-delay: calc(var(--wi, 0) * -0.14s);
    will-change: transform;
  }
}
@keyframes missionWave {
  0%, 100% { transform: translateY(0.05em); }
  50%      { transform: translateY(-0.05em); }
}


@media (max-width: 760px) {
  .mission-bold .mission-foot { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

/* ─── MISSION · FLOATING PHOTOS ON HOVER ──────────────── */
.mission-stage { position: relative; }
/* statement sits above the photos and stays interactive */
.mission-stage .mission-stmt { position: relative; z-index: 3; cursor: default; }

.mphotos {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.mphoto {
  position: absolute; margin: 0;
  /* spring-y entrance handled by transform/opacity transition */
  opacity: 0;
  transform: translate(var(--tx, 0), 28px) scale(0.82) rotate(var(--rot, 0deg));
  transition: opacity .5s ease, transform .7s cubic-bezier(.18,.86,.28,1.12);
  transition-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
.mphoto-inner {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 26px 60px -28px rgba(17,32,58,0.18);
  background: #e9e4d2;
  width: var(--w, 200px); height: var(--h, 150px);
  /* gentle continuous bob once shown */
}
.mphoto-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--bone-dim);
  background: linear-gradient(150deg, #eeeade 0%, #ded9c9 100%);
}
.mphoto-1 .mphoto-ph { background: linear-gradient(150deg, #e6ece5 0%, #d6ded4 100%); }
.mphoto-3 .mphoto-ph { background: linear-gradient(150deg, #e5eaf1 0%, #d5dce6 100%); }
.mphoto-5 .mphoto-ph { background: linear-gradient(150deg, #f0e7d2 0%, #e2d6ba 100%); }
.mphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sizes + scatter positions — left & right, overlapping the line ends, different sizes */
.mphoto-1 { --w: 200px; --h: 260px; --rot: -6deg; --tx: -16px; --delay: 0s;    left: 0%;   top: 4%; }
.mphoto-2 { --w: 184px; --h: 128px; --rot:  5deg; --tx: 14px;  --delay: .07s;  left: 5%;   bottom: -6%; }
.mphoto-3 { --w: 150px; --h: 196px; --rot:  7deg; --tx: 16px;  --delay: .04s;  right: 0%;  top: -2%; }
.mphoto-4 { --w: 236px; --h: 168px; --rot: -5deg; --tx: -16px; --delay: .11s;  right: 0%;  bottom: -8%; }
.mphoto-5 { --w: 128px; --h: 160px; --rot: -9deg; --tx: -10px; --delay: .15s;  right: 2%;  top: -14%; }

/* Reveal: when the stage is hovered/focus-within (class toggled by JS for touch too) */
.mission-stage.photos-on .mphoto {
  opacity: 1;
  transform: translate(0,0) scale(1) rotate(var(--rot, 0deg));
}
.mission-stage.photos-on .mphoto-inner { animation: mphotoBob 5s ease-in-out infinite; }
.mphoto-2 .mphoto-inner { animation-delay: -1.6s !important; }
.mphoto-3 .mphoto-inner { animation-delay: -3.1s !important; }
.mphoto-4 .mphoto-inner { animation-delay: -0.8s !important; }
.mphoto-5 .mphoto-inner { animation-delay: -2.4s !important; }
@keyframes mphotoBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: reduce) {
  .mphoto { transition: opacity .3s ease; transform: none; }
  .mission-stage.photos-on .mphoto { transform: none; }
  .mission-stage.photos-on .mphoto-inner { animation: none; }
}
/* Hide the scatter on narrow screens — no room beside the text */
@media (max-width: 760px) {
  .mphotos { display: none; }
}

/* ─── RESEARCH PROGRAMMES ─────────────────────────────── */
.research { padding: 120px 0 80px; background: var(--ink-0); border-top: 1px solid var(--line); }
.prog { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 560px; border-top: 1px solid var(--line); }
.prog:last-of-type { border-bottom: 1px solid var(--line); }
.prog-rev .prog-media { order: 2; }
.prog-rev .prog-body { order: 1; }
.prog-media { background: var(--ink-1); position: relative; overflow: hidden; }
.prog-media .placeholder { width: 100%; height: 100%; }
.prog-body { padding: 72px clamp(40px, 5vw, 80px); display: flex; flex-direction: column; gap: 24px; justify-content: center; background: var(--ink-0); border-left: 1px solid var(--line); }
.prog-rev .prog-body { border-left: 0; border-right: 1px solid var(--line); }
.prog-meta { display: flex; justify-content: space-between; gap: 12px; }
.prog-title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.prog-desc { font-size: 17px; line-height: 1.55; color: var(--bone-dim); max-width: 540px; }
.prog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.prog-tags li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-soft); padding: 6px 10px; border: 1px solid var(--line); border-radius: 1px; }

/* ─── PLACEHOLDERS ────────────────────────────────────── */
.placeholder { position: relative; width: 100%; height: 100%; min-height: 320px; background: var(--ink-1); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.placeholder .ph-art { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ph-label { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-soft); padding: 6px 10px; background: rgba(251,250,245,0.78); border: 1px solid var(--line); z-index: 2; }
.placeholder-1 { background: linear-gradient(180deg, #f1eee4 0%, #e8e4d6 60%, #ded9c9 100%); }
.placeholder-2 { background: linear-gradient(180deg, #f0ede3 0%, #e3dfd0 100%); }
.placeholder-3 { background: linear-gradient(135deg, #f1eee4 0%, #e5e1d3 100%); }
.placeholder-4 { background: linear-gradient(180deg, #f0ece2 0%, #ded9c9 100%); }
.placeholder-loc-1 { background: linear-gradient(135deg, #eeeade 0%, #e0dbcb 100%); }
.placeholder-loc-2 { background: linear-gradient(135deg, #f1eee4 0%, #e3dfd0 100%); }
.placeholder-loc-3 { background: linear-gradient(135deg, #f0ede3 0%, #e4e0d1 100%); }
.placeholder-loc-4 { background: linear-gradient(135deg, #eeeade 0%, #ded9c9 100%); }
.placeholder-feature { background: radial-gradient(circle at 30% 40%, #f6f4ec 0%, #ebe7da 60%, #e0dbcb 100%); min-height: 560px; }
.placeholder-n1 { background: linear-gradient(135deg, #f1eee4 0%, #e0dbcb 100%); }
.placeholder-n2 { background: linear-gradient(135deg, #f0ede3 0%, #e3dfd0 100%); }
.placeholder-n3 { background: linear-gradient(135deg, #efece2 0%, #e1dccc 100%); }

/* Add subtle scan-line texture to placeholders so they don't feel empty */
.placeholder::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(17,32,58,0.03) 3px, rgba(17,32,58,0.03) 4px); }

/* ─── INFRASTRUCTURE ──────────────────────────────────── */
.infra { padding: 120px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.infra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.infra-card { background: var(--ink-0); padding: 0; transition: background .2s; }
.infra-card:hover { background: var(--ink-1); }
.infra-media { position: relative; aspect-ratio: 16/9; }
.infra-coord { position: absolute; bottom: 16px; right: 16px; padding: 6px 10px; background: rgba(251,250,245,0.82); border: 1px solid var(--line); z-index: 2; font-size: 10px; }
.infra-body { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.infra-title { font-size: 28px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.infra-desc { color: var(--bone-dim); font-size: 15px; line-height: 1.5; }
.infra-stats { display: flex; gap: 36px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.infra-stats > div { display: flex; flex-direction: column; gap: 4px; }
.stat-val { font-size: 18px; font-weight: 500; }

/* ─── FEATURED PROJECT ────────────────────────────────── */
.feature { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); }
.feature-media { position: absolute; inset: 0; }
.feature-media .placeholder { min-height: 100%; }
.feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink-0) 0%, rgba(251,250,245,0.92) 40%, rgba(251,250,245,0.55) 100%); }
.feature-content { position: relative; width: 100%; padding: 120px 0; }
.feature-head { display: flex; align-items: flex-end; gap: 36px; margin-top: 16px; flex-wrap: wrap; }
.feature-title { font-size: clamp(72px, 11vw, 168px); line-height: 0.9; font-weight: 400; letter-spacing: -0.04em; }
.feature-stamp { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.feature-stamp-val { font-family: var(--font-mono); font-size: 13px; color: var(--bone); }
.feature-desc { max-width: 600px; font-size: 18px; line-height: 1.55; color: var(--bone-dim); margin-top: 32px; }
.feature-list { display: flex; flex-direction: column; gap: 8px; margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 720px; }
.feature-list li { font-size: 15px; line-height: 1.5; color: var(--bone-dim); padding-left: 22px; position: relative; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--beacon); }
.feature-meta { display: flex; gap: 56px; margin: 40px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.feature-meta > div { display: flex; flex-direction: column; gap: 4px; }
.feature-meta-val { font-size: 16px; font-weight: 500; }

/* ─── NUMBERS ─────────────────────────────────────────── */
.numbers { padding: 96px 0; background: var(--ink-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.num { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; border-top: 1px solid var(--bone); }
.num-val { font-size: clamp(56px, 7vw, 96px); line-height: 1; font-weight: 300; letter-spacing: -0.02em; }

/* ─── NEWS ────────────────────────────────────────────── */
.news { padding: clamp(96px,12vw,150px) 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.news .container { max-width: none; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.news-card { display: flex; flex-direction: column; gap: 20px; cursor: pointer; }
.news-media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.news-media .placeholder { transition: transform .5s ease; }
.news-card:hover .news-media .placeholder { transform: scale(1.04); }
.news-body { display: flex; flex-direction: column; gap: 14px; padding: 0 4px; }
.news-meta { display: flex; gap: 12px; }
.news-meta .mono-label:nth-child(2) { color: var(--beacon); }
.news-title { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.news-desc { font-size: 14.5px; line-height: 1.55; color: var(--bone-dim); }

/* Make news image placeholders clearly visible (lighter slate) + centered label */
.placeholder-n1 { background: linear-gradient(135deg, #f2efe6 0%, #e4e0d1 100%); }
.placeholder-n2 { background: linear-gradient(135deg, #f1eee4 0%, #e3dfd0 100%); }
.placeholder-n3 { background: linear-gradient(135deg, #f2efe6 0%, #e5e1d2 100%); }
.news .ph-label { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Featured lead story: text left, image right */
.news-feature { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: 52px 0; border-bottom: 1px solid var(--line); }
.nf-body { display: flex; flex-direction: column; gap: 22px; }
.nf-meta { display: flex; gap: 14px; align-items: center; }
.nf-meta .mono-label:nth-child(2) { color: var(--beacon); }
.nf-title { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.07; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; transition: color .25s ease; }
.news-feature:hover .nf-title { color: var(--beacon); }
.nf-desc { font-size: 16px; line-height: 1.6; color: var(--bone-dim); max-width: 46ch; }
.nf-cta { align-self: flex-start; margin-top: 4px; }
.news-feature:hover .nf-cta span { transform: translateX(5px); }
.nf-media { aspect-ratio: 16/11; overflow: hidden; position: relative; border: 1px solid var(--line); }
.nf-media .placeholder { min-height: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-feature:hover .nf-media .placeholder { transform: scale(1.045); }

/* Secondary stories: 1×2 grid of image cards, framed with rule lines */
.news-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.news-card2 { background: var(--ink-0); display: flex; flex-direction: column; transition: background .2s ease; }
.news-card2:hover { background: var(--ink-1); }
.nc2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 30px 24px; }
.nc2-titlewrap { display: flex; flex-direction: column; gap: 12px; }
.nc2-meta { display: flex; gap: 12px; align-items: center; }
.nc2-meta .mono-label:nth-child(2) { color: var(--beacon); }
.nc2-title { font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; transition: color .2s ease; }
.news-card2:hover .nc2-title { color: var(--beacon); }
.nc2-cta { flex-shrink: 0; padding-top: 4px; }
.news-card2:hover .nc2-cta span { transform: translateX(5px); }
.nc2-media { aspect-ratio: 16/10; position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.nc2-media .placeholder { min-height: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-card2:hover .nc2-media .placeholder { transform: scale(1.04); }

/* News (homepage) — bold editorial grid */
.news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: clamp(28px,3vw,44px); border-bottom: 1px solid var(--line); }
.news-head .mono-label { display: block; margin-bottom: 16px; }
.news-h { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.0; font-weight: 600; letter-spacing: -0.03em; color: var(--bone); }

.news-lead { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,5vw,80px); align-items: center; padding: clamp(40px,5vw,76px) 0; border-bottom: 1px solid var(--line); }
.nl-text { display: flex; flex-direction: column; gap: clamp(18px,2vw,26px); }
.nl-date { color: var(--bone-dim); }
.nl-title { font-size: clamp(34px, 4.6vw, 72px); line-height: 1.01; font-weight: 700; letter-spacing: -0.032em; text-wrap: balance; transition: color .25s ease; }
.news-lead:hover .nl-title { color: var(--beacon); }
.nl-desc { font-size: clamp(15px,1.1vw,17px); line-height: 1.6; color: var(--bone-dim); max-width: 48ch; }
.nl-cta { align-self: flex-start; }
.news-lead:hover .nl-cta span { transform: translateX(5px); }
.nl-media { aspect-ratio: 16/11; overflow: hidden; position: relative; border: 1px solid var(--line); }
.nl-media .placeholder { min-height: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-lead:hover .nl-media .placeholder { transform: scale(1.04); }
.news-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-lead:hover .nl-media .news-img,
.news-big:hover .nb-media .news-img { transform: scale(1.04); }

.news-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.news-big { background: var(--ink-0); display: flex; flex-direction: column; padding-top: clamp(32px,3.5vw,52px); transition: background .2s ease; }
.news-big:hover { background: var(--ink-1); }
.nb-head { display: flex; flex-direction: column; gap: 16px; padding: 0 clamp(24px,2.4vw,40px) clamp(28px,3vw,40px); }
.nb-date { color: var(--bone-dim); }
.nb-title { font-size: clamp(24px, 2.9vw, 44px); line-height: 1.03; font-weight: 700; letter-spacing: -0.027em; text-wrap: balance; transition: color .2s ease; }
.news-big:hover .nb-title { color: var(--beacon); }
.nb-cta { align-self: flex-start; margin-top: 2px; }
.news-big:hover .nb-cta span { transform: translateX(5px); }
.nb-media { aspect-ratio: 16/10; position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.nb-media .placeholder { min-height: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-big:hover .nb-media .placeholder { transform: scale(1.04); }

@media (max-width: 860px) {
  .news-lead { grid-template-columns: 1fr; gap: 26px; padding: 36px 0; }
  .nl-media { order: -1; }
  .news-duo { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .news-feature { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .nf-media { order: -1; }
  .news-pair { grid-template-columns: 1fr; border: 0; }
}

/* ─── CAREERS ─────────────────────────────────────────── */
.careers { padding: 140px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.careers-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: flex-start; }
.careers-title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; font-weight: 400; letter-spacing: -0.025em; margin: 24px 0 24px; text-wrap: balance; max-width: 14ch; }
.careers-sub { font-size: 17px; line-height: 1.55; color: var(--bone-dim); max-width: 440px; }
.careers-roles { display: flex; flex-direction: column; }
.role { display: flex; justify-content: space-between; align-items: center; padding: 24px 8px 24px 0; border-top: 1px solid var(--line); transition: padding .2s, background .15s; }
.role:last-of-type { border-bottom: 1px solid var(--line); }
.role:hover { padding-left: 16px; background: linear-gradient(90deg, rgba(214,161,106,0.04) 0%, transparent 100%); }
.role-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.role-meta { margin-top: 6px; }
.role-arrow { font-size: 22px; color: var(--bone-soft); transition: transform .2s, color .2s; }
.role:hover .role-arrow { transform: translateX(4px); color: var(--beacon); }
.careers-all { margin-top: 32px; align-self: flex-start; }

/* ─── FOOTER ──────────────────────────────────────────── */
.foot { background: var(--ink-0); border-top: 1px solid var(--line); padding: 96px 0 36px; }
.foot .container { max-width: none; }
.foot-top { display: flex; align-items: center; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.foot-tagline { display: none; }

.foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 40px; padding: 56px 0; border-bottom: 1px solid var(--line); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .mono-label { margin-bottom: 8px; display: block; min-height: 2.9em; }
.foot-col a { font-size: 15px; color: var(--bone-dim); transition: color .15s; }
.foot-col a:hover { color: var(--bone); }
.foot-addr { font-size: 15px; color: var(--bone-dim); margin-bottom: 4px; line-height: 1.5; }
.foot-social { display: flex; gap: 8px; margin-top: 12px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--bone); transition: background .15s, border-color .15s; }
.foot-social a:hover { background: var(--bone); color: var(--ink-0); border-color: var(--bone); }

.foot-bot { padding-top: 36px; display: flex; justify-content: space-between; gap: 48px; align-items: flex-end; flex-wrap: wrap; }
.foot-eu { display: flex; gap: 20px; align-items: flex-start; max-width: 720px; }
.foot-eu-flag { width: 72px; height: auto; flex-shrink: 0; border: 1px solid var(--line); padding: 4px; background: rgba(17,32,58,0.02); display: block; }
.foot-eu-mark { font-family: var(--font-mono); font-size: 14px; line-height: 1; color: var(--beacon); white-space: pre; letter-spacing: 0.2em; padding: 6px 10px; border: 1px solid var(--line); flex-shrink: 0; }
.foot-eu p { font-size: 12.5px; color: var(--bone-soft); line-height: 1.55; }
.foot-meta { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-soft); }
.foot-meta a { transition: color .15s; }
.foot-meta a:hover { color: var(--bone); }

/* Newsletter — footer signup */
.foot-newsletter { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding: 40px 0 56px; }
.foot-newsletter-text .mono-label { display: block; margin-bottom: 12px; }
.foot-newsletter-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; color: var(--bone); line-height: 1.1; }
.foot-newsletter-desc { margin-top: 10px; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--bone-dim); }
.foot-newsletter-form { width: 100%; }
.foot-newsletter-row { display: flex; gap: 0; border: 1px solid var(--line); background: rgba(17,32,58,0.02); transition: border-color .15s; }
.foot-newsletter-row:focus-within { border-color: var(--beacon); }
.foot-newsletter-row input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 14px 16px; color: var(--bone); font-family: var(--font-display); font-size: 15px; }
.foot-newsletter-row input::placeholder { color: var(--bone-soft); }
.foot-newsletter-row button { background: var(--bone); color: var(--bone); border: 0; padding: 0 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s; }
.foot-newsletter-row button:hover { background: var(--beacon-hot); }
.foot-newsletter-note { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beacon); }
@media (max-width: 860px) { .foot-newsletter { grid-template-columns: 1fr; gap: 24px; } }

/* Newsletter — inline block after each article */
.article-newsletter { padding: 40px 0 72px; }
.article-newsletter-inner { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(201,138,30,0.07), rgba(17,32,58,0.02)); }
.article-newsletter-inner .mono-label { display: block; color: var(--beacon); margin-bottom: 14px; }
.article-newsletter-title { font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--bone); }
.article-newsletter-desc { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--bone-dim); max-width: 56ch; }
.article-newsletter-form { display: flex; gap: 0; margin-top: 24px; border: 1px solid var(--line); background: rgba(17,32,58,0.03); }
.article-newsletter-form:focus-within { border-color: var(--beacon); }
.article-newsletter-form input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 14px 16px; color: var(--bone); font-family: var(--font-display); font-size: 15px; }
.article-newsletter-form input::placeholder { color: var(--bone-soft); }
.article-newsletter-form button { background: var(--beacon); color: var(--bone); border: 0; padding: 0 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s; }
.article-newsletter-form button:hover { background: var(--beacon-hot); }
.article-newsletter-note { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beacon); }


/* ═════════════════════════════════════════════════════════
   v5 HOMEPAGE SECTIONS — What We Do · Sites · Credibility
   ═════════════════════════════════════════════════════════ */

/* What We Do — section header + scroll-stacking offerings */
.what { padding: clamp(88px, 11vw, 150px) 0 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.what-head { max-width: 1120px; }
.what-eyebrow { display: block; margin-bottom: clamp(22px, 3vw, 34px); }
.what-title { font-size: clamp(40px, 7.2vw, 108px); line-height: 0.95; font-weight: 600; letter-spacing: -0.035em; color: var(--bone); }
.what-sub { margin-top: clamp(22px, 2.6vw, 32px); max-width: 44ch; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.55; color: var(--bone-dim); }

.stack {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(48px, 6vw, 88px);
  --peek: 74px;
  --top: 76px;
}
.stack-card {
  position: sticky;
  top: calc(var(--top) + var(--i) * var(--peek));
}
.sc-gold { --accent: var(--beacon);    --glow: rgba(244,178,63,0.18); }
.sc-teal { --accent: var(--teal-lift); --glow: rgba(63,208,168,0.16); }
.sc-blue { --accent: var(--blue-lift); --glow: rgba(74,147,230,0.20); }
.sc-link {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: clamp(520px, 80vh, 860px);
  padding: clamp(24px, 2.6vw, 38px) var(--gutter) clamp(40px, 5vw, 76px);
  position: relative; overflow: hidden;
  color: var(--bone);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(95% 130% at 10% 120%, var(--glow), transparent 58%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0));
  transition: background .4s ease;
}
/* faint engineering grid, fading toward the top */
.sc-link::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
          mask-image: linear-gradient(180deg, transparent, #000 40%);
  opacity: .6;
}
.sc-link:hover { background:
    radial-gradient(95% 130% at 10% 120%, var(--glow), transparent 64%),
    linear-gradient(180deg, var(--ink-2), var(--ink-0));
}

.sc-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 2;
}
.sc-index { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--accent); }
.sc-tab .sc-track { color: var(--accent); letter-spacing: 0.14em; }

.sc-body {
  flex: 1 1 auto;
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px); align-items: center; align-content: center;
  position: relative; z-index: 2;
}
.sc-num {
  font-size: clamp(86px, 13vw, 200px); line-height: 0.74; font-weight: 600;
  letter-spacing: -0.05em; color: transparent;
  -webkit-text-stroke: 1.4px var(--accent); opacity: .45;
}
.sc-main { max-width: 720px; }
.sc-title { font-size: clamp(32px, 4.2vw, 66px); line-height: 1.02; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.sc-desc { margin-top: clamp(18px, 1.8vw, 26px); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: var(--bone-dim); max-width: 58ch; }
.sc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 2.2vw, 28px); }
.sc-pills li {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--bone-soft);
}
.sc-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(26px, 3vw, 38px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.sc-cta span { transition: transform .25s; }
.sc-link:hover .sc-cta span { transform: translateX(5px); }

@media (max-width: 860px) {
  .stack { --peek: 58px; --top: 64px; }
  .sc-body { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .sc-num { font-size: clamp(64px, 18vw, 110px); }
  .sc-link { min-height: clamp(460px, 76vh, 680px); }
}

/* ─── SOLUTIONS (homepage) — light editorial rows ────── */
.shome { padding: clamp(96px,12vw,160px) 0; background: var(--ink-1); color: var(--bone); border-top: 1px solid var(--line); }
.shome-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.shome-head .mono-label { display: block; margin-bottom: 16px; color: var(--bone-soft); }
.shome-title { font-size: clamp(40px, 6vw, 92px); line-height: 0.98; font-weight: 600; letter-spacing: -0.035em; color: var(--bone); }
.shome-all { color: var(--bone); }
.shome-all span { color: var(--beacon-hot, var(--beacon)); }

.srows { margin-top: clamp(40px,5vw,72px); }
.srow {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.2fr) 40px;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(30px,3.4vw,48px) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--bone);
  position: relative;
}
.srow:last-child { border-bottom: 1px solid var(--line); }
.srow-title { font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.026em; line-height: 1.05; text-wrap: balance; transition: color .2s ease; }
.srow-tag { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; color: var(--bone); font-weight: 500; padding-top: 4px; }
.srow-desc { font-size: clamp(14px, 1.02vw, 16px); line-height: 1.6; color: var(--bone-dim); padding-top: 5px; }
.srow-arrow { justify-self: end; align-self: center; font-family: var(--font-mono); font-size: 20px; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }


@media (max-width: 880px) {
  .srow { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .srow-arrow { display: none; }
  .srow-tag { padding-top: 0; }
}

/* Legacy 3-up layer cards — still used by Solutions and sub-pages */
.layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 24px;
}
.layer {
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 44px 36px 36px;
  background: var(--ink-0);
  color: var(--bone);
  position: relative;
  transition: background .25s, transform .25s;
}
.layer::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--accent); transition: width .35s ease;
}
.layer:hover { background: var(--ink-1); }
.layer:hover::before { width: 100%; }

/* Tricolor track coding — gold / teal / blue */
.layers .layer:nth-child(1) { --accent: var(--beacon); }
.layers .layer:nth-child(2) { --accent: var(--teal-lift); }
.layers .layer:nth-child(3) { --accent: var(--blue-lift); }
.layer .layer-head .mono-label { color: var(--accent); letter-spacing: 0.1em; }

.layer-head {
  display: flex; align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.layer-letter {
  font-family: var(--font-display);
  font-size: 80px; line-height: 0.8;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.layer-title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-top: 8px;
  min-height: 92px;
}
.layer-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--bone-dim);
}
.layer-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.layer-pills li {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone-soft);
  padding: 6px 10px;
  border: 1px solid var(--line);
}
.layer-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: auto;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--bone);
  transition: color .2s;
}
.layer-cta span { transition: transform .25s; }
.layer:hover .layer-cta { color: var(--accent); }
.layer:hover .layer-cta span { transform: translateX(4px); }

/* Solutions · cross-cut — reuses the .layers/.layer card system, adds a readable bullet list */
[hidden] { display: none !important; }
.solutions { padding: 100px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.solutions .section-head-lg { padding-bottom: 56px; }
.sol-list { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.sol-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bone-dim);
}
.sol-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px;
  background: var(--accent);
}

.bridge-line {
  margin: 64px auto 0;
  max-width: 880px;
  text-align: center;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--bone-dim);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-style: italic;
}

/* Pilot Sites Preview — sticky zoom header + staggered cards scrolling over it (light section) */
.sites { padding: 0 0 clamp(120px,14vw,200px); background: var(--ink-1); border-top: 1px solid var(--line); position: relative; }

/* header pins near the top and zooms while the cards scroll over it */
.sites-head {
  position: sticky; top: 0; z-index: 0;
  height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(72px, 13vh, 168px);
  text-align: center;
  pointer-events: none;
}
.sites-head-inner { max-width: 1000px; padding: 0 var(--gutter); will-change: transform, opacity; }
.sites-head .mono-label { display: block; margin-bottom: 18px; color: var(--bone-soft); }
.sites-title { font-size: clamp(56px, 10.5vw, 184px); line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; color: var(--bone); }
.sites-sub { margin: clamp(18px,2vw,28px) auto 0; max-width: 52ch; font-size: clamp(15px,1.2vw,19px); line-height: 1.55; color: var(--bone-dim); }

/* cards layer scrolls up over the pinned header */
.sites-stagger {
  position: relative; z-index: 2;
  margin-top: -100vh;
  padding-top: 100vh;
  display: flex; flex-direction: column;
  gap: clamp(64px, 10vw, 170px);
}

.sc-gold { --accent: var(--beacon);    --accent-ink: #b07910; }
.sc-teal { --accent: var(--teal-lift); --accent-ink: #16785f; }
.sc-blue { --accent: var(--blue-lift); --accent-ink: #0054a2; }

.sitecard { display: block; color: var(--bone); text-decoration: none; will-change: transform; }
.sitecard--left  { align-self: flex-start; margin-right: auto; }
.sitecard--right { align-self: flex-end; margin-left: auto; }
.sitecard--big   { width: min(62%, 920px); }
.sitecard--small { width: min(48%, 700px); }

.sitecard__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-1); border: none;
  isolation: isolate;
  box-shadow: 0 30px 80px -40px rgba(17,32,58,0.18);
}
.sitecard--small .sitecard__frame { aspect-ratio: 4 / 3.4; }
.sitecard__img {
  position: absolute; left: 0; right: 0; top: -12%;
  width: 100%; height: 124%;
  object-fit: cover; display: block;
  will-change: transform;
}
.sitecard__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,11,22,0) 55%, rgba(5,11,22,0.45) 100%);
}
.sitecard__frame::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 3;
  height: 3px; width: 0; background: var(--accent);
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.sitecard:hover .sitecard__frame::before { width: 100%; }

.sitecard__coord {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 6px 10px; background: rgba(5,11,22,0.7);
  border: 1px solid var(--line); font-size: 10px; color: var(--accent);
  white-space: nowrap; backdrop-filter: blur(4px);
}

.sitecard__meta { padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.sitecard__label { color: var(--accent-ink); }
.sitecard__title { font-size: clamp(24px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; color: var(--bone); }
.sitecard--small .sitecard__title { font-size: clamp(22px, 2vw, 30px); }
.sitecard__lead { font-size: clamp(15px,1.1vw,17px); line-height: 1.55; color: var(--bone-dim); max-width: 44ch; }
.sitecard__cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-ink);
}
.sitecard__cta span { transition: transform .25s; }
.sitecard:hover .sitecard__cta span { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .sites-head { position: static; height: auto; padding: 0 0 clamp(48px,7vw,90px); }
  .sites-stagger { margin-top: 0; padding-top: 0; }
}
@media (max-width: 860px) {
  .sites-head { height: auto; position: static; padding-bottom: clamp(48px,8vw,80px); }
  .sites-stagger { margin-top: 0; padding-top: 0; gap: clamp(48px,9vw,72px); }
  .sitecard--big, .sitecard--small { width: 100%; }
  .sitecard__frame, .sitecard--small .sitecard__frame { aspect-ratio: 16 / 11; }
}

/* AMV Spotlight — feature list */
.feature-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 720px;
}
.feature-list li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone-dim);
  padding-left: 22px;
  position: relative;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 12px; height: 1px; background: var(--beacon);
}

/* Credibility Band — bold header + full-bleed logo marquee */
.credibility {
  padding: clamp(88px, 10vw, 132px) 0 clamp(96px, 11vw, 132px);
  background: var(--ink-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cred-head { max-width: 760px; }
.cred-head .mono-label { display: block; margin-bottom: 18px; }
.cred-title {
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.cred-intro {
  margin-top: 20px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--bone-dim);
  max-width: 52ch;
}
/* Partners marquee — continuous single-row scroll, pause on hover, edge fades */
.cred-marquee {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: clamp(48px, 6vw, 72px);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.cred-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: cred-scroll var(--cred-dur, 48s) linear infinite;
}
.cred-marquee:hover .cred-track { animation-play-state: paused; }
@keyframes cred-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cred-logo {
  flex: 0 0 auto;
  height: 104px;
  padding: 0 52px;
  background: none;
  border: 0;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transition: transform .25s;
}
.cred-logo:hover {
  background: none;
  border-color: transparent;
  transform: translateY(-3px);
}
.cred-img {
  height: 39px;
  width: auto;
  max-width: 224px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity .25s;
}
.cred-logo:hover .cred-img { opacity: 1; }
/* NTNU lockup reads smaller at equal height — scale it up to match (class so clones match) */
.cred-img-ntnu { height: 56px; }
/* INM is a very wide wordmark — cap by width so it never crops */
.cred-img-inm { height: auto; width: auto; max-width: 252px; max-height: 44px; }
/* Croatian Ministry is a colour crest — seat it on a white plate to stay legible */
.cred-plate {
  background: transparent;
  border-radius: 7px;
  padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 100%;
}
.cred-img-plate { height: 46px; max-width: 100%; opacity: 1; }
.cred-logo:hover .cred-plate { box-shadow: 0 0 0 1px var(--line); }
.cred-img-marinn { height: auto; width: auto; max-width: 100%; max-height: 70px; opacity: 0.97; }
.cred-img-irb { height: auto; width: auto; max-width: 100%; max-height: 78px; opacity: 0.97; }
.cred-mark {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--bone);
  line-height: 1;
}
.cred-meta {
  color: var(--bone-soft);
  font-size: 10.5px;
}
.cred-tagline {
  margin-top: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone-dim);
  text-align: left;
  max-width: 640px;
}
.cred-sep { color: var(--beacon); padding: 0 6px; }

/* News meta spacing fix — proper gap between date and tag */
.news-meta { display: flex; align-items: center; gap: 14px; }
.news-meta .mono-label { display: inline-flex; align-items: center; }
.news-meta .mono-label + .mono-label::before {
  content: "·"; color: var(--bone-soft); padding-right: 14px; margin-left: -14px;
}

/* Footer Contact row */
.foot-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.foot-contact-block { display: flex; flex-direction: column; gap: 10px; }
.foot-contact-block .mono-label { margin-bottom: 4px; }
.foot-contact-block a {
  font-size: 15px;
  color: var(--bone);
  transition: color .15s;
}
.foot-contact-block a:hover { color: var(--beacon); }

/* News card link wrapper */
.news-link {
  color: inherit;
  display: flex; flex-direction: column;
  gap: 20px;
}

/* ═════════════════════════════════════════════════════════
   SUB-PAGE COMPONENTS — Pilot Sites · Applied R&D · Integration
   ═════════════════════════════════════════════════════════ */

/* Page hero — used by all interior pages */
.page-hero {
  position: relative;
  background: var(--ink-0);
  border-bottom: 1px solid var(--line);
  padding: 200px 0 120px;
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(17,32,58,0.06) 0%, rgba(17,32,58,0.03) 50%, transparent 80%),
    linear-gradient(180deg, transparent 0%, var(--ink-0) 100%);
  pointer-events: none;
  animation: heroGlowDrift 22s ease-in-out infinite alternate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(17,32,58,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,32,58,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 30%, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
  animation: heroGridDrift 60s linear infinite;
}
@keyframes heroGlowDrift {
  0%   { background-position: 30% 40%, 0 0; transform: scale(1); opacity: 1; }
  100% { background-position: 70% 60%, 0 0; transform: scale(1.06); opacity: 0.85; }
}
@keyframes heroGridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 80px 80px, 80px 80px; }
}

/* Animated sonar rings layer for page-hero — pure CSS, no markup needed */
.page-hero {
  --ring-color: rgba(17,32,58,0.14);
}
.page-hero .page-hero-inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.page-hero-rings {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.page-hero-rings span {
  position: absolute;
  left: 18%; top: 50%;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 1px solid var(--ring-color);
  opacity: 0;
  animation: heroSonar 8s ease-out infinite;
}
.page-hero-rings span:nth-child(2) { animation-delay: 2s; }
.page-hero-rings span:nth-child(3) { animation-delay: 4s; }
.page-hero-rings span:nth-child(4) { animation-delay: 6s; }
@keyframes heroSonar {
  0%   { transform: scale(0.4); opacity: 0; border-color: rgba(201,138,30,0.35); }
  15%  { opacity: 0.7; }
  100% { transform: scale(10); opacity: 0; border-color: rgba(17,32,58,0.04); }
}

/* Drifting horizontal sea-line markers — removed: they swept across hero headlines */
.page-hero-lines {
  display: none;
}
.page-hero-lines-disabled {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 40%, transparent 90%);
}
.page-hero-lines i {
  position: absolute;
  left: -10%; right: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,138,30,0.25) 20%, rgba(17,32,58,0.28) 50%, rgba(201,138,30,0.25) 80%, transparent 100%);
  opacity: 0;
  animation: heroLineSweep 14s linear infinite;
}
.page-hero-lines i:nth-child(1) { top: 22%; animation-delay: 0s; }
.page-hero-lines i:nth-child(2) { top: 48%; animation-delay: 4.5s; }
.page-hero-lines i:nth-child(3) { top: 74%; animation-delay: 9s; }
@keyframes heroLineSweep {
  0%   { transform: translateX(-30%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(30%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::before,
  .page-hero::after,
  .page-hero-rings span,
  .page-hero-lines i { animation: none !important; }
}
.page-hero-top { display: flex; justify-content: space-between; padding-bottom: 32px; }
.page-hero-h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero-h1 em { font-style: normal; font-weight: inherit; color: inherit; }
.page-hero-sub {
  margin-top: 32px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--bone-dim);
}
.page-hero-cta { display: flex; gap: 18px; margin-top: 40px; align-items: center; flex-wrap: wrap; }

/* At-a-glance horizontal 3-card row */
.glance { padding: 96px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: transparent;
  border: 1px solid var(--line);
  margin-top: 40px;
}
.glance-card {
  background: transparent;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: background .2s;
  color: var(--bone);
}
.glance-card:hover { background: color-mix(in oklab, var(--bone) 4%, transparent); }
.glance-card-loc { color: var(--bone-soft); }
.glance-card-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.glance-card-meta { font-size: 14px; line-height: 1.5; color: var(--bone-dim); margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Deep dive sections — alternating image/text full-bleed */
.deep { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; border-top: 1px solid var(--line); }
.deep:last-of-type { border-bottom: 1px solid var(--line); }
.deep.deep-rev .deep-media { order: 2; }
.deep.deep-rev .deep-body { order: 1; }
.deep-media { background: var(--ink-1); position: relative; overflow: hidden; min-height: 480px; }
.deep-media .placeholder { width: 100%; height: 100%; }
.deep-body {
  padding: 80px clamp(40px, 5vw, 80px);
  display: flex; flex-direction: column;
  gap: 24px;
  justify-content: center;
  background: var(--ink-0);
  border-left: 1px solid var(--line);
}
.deep-rev .deep-body { border-left: 0; border-right: 1px solid var(--line); }
.deep-meta { display: flex; gap: 14px; align-items: center; }
.deep-flag { color: var(--beacon); padding: 6px 10px; border: 1px solid var(--beacon); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.deep-title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; max-width: 16ch; }
.deep-lead { font-size: 17px; line-height: 1.55; color: var(--bone-dim); max-width: 560px; }
.deep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.deep-cols h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-soft); margin-bottom: 12px; }
.deep-cols ul { display: flex; flex-direction: column; gap: 7px; }
.deep-cols li { font-size: 14.5px; line-height: 1.5; color: var(--bone-dim); padding-left: 18px; position: relative; }
.deep-cols li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--beacon); }

/* Two-column comparison (included / not included) */
.compare { padding: 120px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: transparent; border: 1px solid var(--line); margin-top: 40px; }
.compare-col { background: transparent; padding: 36px 36px 40px; }
.compare-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-soft); padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.compare-col.col-yes h4::before { content: "+"; color: var(--beacon); font-size: 16px; }
.compare-col.col-no h4::before { content: "—"; color: var(--bone-soft); font-size: 16px; }
.compare-col ul { display: flex; flex-direction: column; gap: 12px; }
.compare-col li { font-size: 15.5px; line-height: 1.5; color: var(--bone-dim); padding-left: 0; }
.compare-foot { margin-top: 32px; font-size: 14.5px; color: var(--bone-dim); }
.compare-foot a { color: var(--bone); border-bottom: 1px solid var(--bone); padding-bottom: 1px; transition: color .15s, border-color .15s; }
.compare-foot a:hover { color: var(--beacon); border-color: var(--beacon); }

/* Numbered process flow (3 or 4 steps) */
.process { padding: 120px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.process-steps { display: grid; grid-template-columns: repeat(var(--steps, 3), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.process-step { background: var(--ink-0); padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; transition: background .2s; }
.process-step:hover { background: var(--ink-1); }
.step-num { font-family: var(--font-mono); font-size: 56px; line-height: 0.8; font-weight: 300; color: var(--beacon); letter-spacing: -0.03em; }
.step-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.step-desc { font-size: 14.5px; line-height: 1.55; color: var(--bone-dim); margin-top: 4px; }
.process-foot { margin-top: 36px; font-size: 15px; color: var(--bone-dim); max-width: 640px; }

/* How to book — light editorial rows (matches homepage Solutions) */
.bookflow { padding: clamp(96px,12vw,160px) 0; background: var(--ink-1); color: var(--bone); border-top: 1px solid var(--line); }
.bookflow-head .mono-label { display: block; margin-bottom: 16px; color: var(--bone-soft); }
.bookflow-title { font-size: clamp(34px, 5vw, 72px); line-height: 1.0; font-weight: 600; letter-spacing: -0.032em; color: var(--bone); max-width: 18ch; text-wrap: balance; }
.bkrows { margin-top: clamp(40px,5vw,72px); }
.bkrow {
  display: grid;
  grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(20px,3vw,48px);
  align-items: baseline;
  padding: clamp(28px,3vw,40px) 0;
  border-top: 1px solid var(--line);
}
.bkrow:last-child { border-bottom: 1px solid var(--line); }
.bkrow-num { font-family: var(--font-mono); font-size: clamp(20px,2vw,28px); font-weight: 300; color: var(--beacon); letter-spacing: -0.02em; }
.bkrow-title { font-size: clamp(22px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.024em; line-height: 1.05; text-wrap: balance; }
.bkrow-desc { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--bone-dim); }
.bookflow-foot { margin-top: clamp(32px,4vw,48px); font-size: 16px; color: var(--bone-dim); }
.bookflow-foot .link-arrow { font-family: var(--font-display); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--bone); border-bottom-color: rgba(17,32,58,0.3); padding-bottom: 2px; }
.bookflow-foot .link-arrow:hover { color: var(--beacon); border-bottom-color: var(--beacon); }
@media (max-width: 720px) {
  .bkrow { grid-template-columns: 1fr; gap: 10px; }
}

/* Why MARBLE — 3-column reasons */
.reasons { padding: 120px 0; background: var(--ink-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.reason-card { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--bone); }
.reason-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.reason-desc { font-size: 15px; line-height: 1.55; color: var(--bone-dim); }

/* CTA band — between pages and footer */
.cta-band {
  padding: 140px 0;
  background: var(--ink-0);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(214,161,106,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.cta-band-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 24px; align-items: center; }
.cta-band h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; }
.cta-band p { font-size: 18px; line-height: 1.55; color: var(--bone-dim); max-width: 540px; }
.cta-band-buttons { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* Competency cards (Applied R&D / Integration tracks) */
.compcards { padding: 80px 0 120px; background: var(--ink-0); }
.compcards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.compcards-grid.cols-1 { grid-template-columns: 1fr; }
.compcard { background: var(--ink-0); padding: 40px 36px; display: flex; flex-direction: column; gap: 18px; transition: background .2s; }
.compcard:hover { background: var(--ink-1); }
.compcard-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--beacon); }
.compcard-title { font-size: 26px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.compcard-tagline { font-size: 16px; line-height: 1.5; color: var(--bone-dim); }
.compcard-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.compcard-list li { font-size: 14.5px; line-height: 1.5; color: var(--bone-dim); padding-left: 20px; position: relative; }
.compcard-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 1px; background: var(--beacon); }

/* Positioning lines (3 short bold statements with leading mono-label) */
.poslines { display: flex; flex-direction: column; gap: 0; margin-top: 56px; border-top: 1px solid var(--line); }
.posline { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.posline-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--beacon); }
.posline-text { font-size: 20px; line-height: 1.45; color: var(--bone); font-weight: 400; max-width: 720px; }
.posline-text strong { font-weight: 500; }

/* Vignettes (capability stories) */
.vignettes { padding: 120px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.vignette-list { display: flex; flex-direction: column; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.vignette {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.vignette-eyebrow { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.vignette-num { font-family: var(--font-mono); font-size: 36px; line-height: 1; font-weight: 300; color: var(--beacon); letter-spacing: -0.02em; }
.vignette-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-soft); }
.vignette-body p { font-size: 16px; line-height: 1.6; color: var(--bone-dim); max-width: 800px; }

/* Team grid — 6 senior thumbnails */
.team { padding: 120px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.team-card { background: var(--ink-0); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: background .2s; }
.team-card:hover { background: var(--ink-1); }
.team-photo { width: 100%; aspect-ratio: 1/1; background: var(--ink-2); position: relative; overflow: hidden; }
.team-photo .ph-label { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.team-name { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.team-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beacon); }
.team-spec { font-size: 14px; line-height: 1.5; color: var(--bone-dim); margin-top: 2px; }

/* Engagement model cards (Integration page) */
.models { padding: 120px 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.model-card { background: var(--ink-0); padding: 40px 32px; display: flex; flex-direction: column; gap: 18px; transition: background .2s; }
.model-card:hover { background: var(--ink-1); }
.model-title { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.model-desc { font-size: 15px; line-height: 1.5; color: var(--bone-dim); }
.model-fit { font-size: 14px; line-height: 1.55; color: var(--bone); margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.model-fit .mono-label { color: var(--beacon); }

/* ═════════════════════════════════════════════════════════ */

/* ─── RESPONSIVE ──────────────────────────────────────── */

/* TABLET breakpoint — gentle step-downs between desktop and phone */
@media (max-width: 1100px) {
  .nav-items { gap: 0; }
  .nav-item { padding: 10px 10px; font-size: 13px; }
  .layers { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .glance-grid { grid-template-columns: repeat(3, 1fr); }
  .reasons-grid { grid-template-columns: repeat(3, 1fr); }
  .numbers-grid { grid-template-columns: repeat(4, 1fr); }
  .foot-cols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .compcards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav { z-index: 95; }
  .nav-items { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .megamenu { display: none !important; }
  .vignette { grid-template-columns: 1fr; gap: 14px; }
  .posline { grid-template-columns: 1fr; gap: 8px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .infra-grid { grid-template-columns: repeat(2, 1fr); }
  .layers { grid-template-columns: 1fr; }
  .sites-grid { grid-template-columns: 1fr; }
  .site-card, .site-card.site-card-wide { grid-template-columns: 1fr; }
  .glance-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .models-grid { grid-template-columns: 1fr; }
  .compcards-grid { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .deep { grid-template-columns: 1fr; }
  .deep.deep-rev .deep-media { order: 0; }
  .deep-body { border-left: 0 !important; border-right: 0 !important; border-top: 1px solid var(--line); padding: 56px 32px; }
  .deep-cols { grid-template-columns: 1fr; gap: 20px; }
  .prog { grid-template-columns: 1fr; }
  .prog-rev .prog-media { order: 0; }
  .prog-body { border-left: 0 !important; border-top: 1px solid var(--line); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-head-lg { flex-direction: column; align-items: flex-start; }
  .careers-inner { grid-template-columns: 1fr; gap: 48px; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .foot-contact { grid-template-columns: 1fr; }
  .cred-logo { height: 84px; padding: 0 32px; }
  .layer-title { min-height: 0; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding: 140px 0 80px; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .news-grid { grid-template-columns: 1fr; }
  .infra-grid { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; gap: 32px; }
  .numbers-grid { grid-template-columns: 1fr; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-foot-r { width: 100%; align-items: flex-start; }
  .hero-readout { width: 100%; }
  .feature-meta { gap: 24px; }
  .compare-foot { font-size: 13px; }
  .role { padding: 18px 4px; }
  .role-title { font-size: 17px; }
  .opening { padding: 20px 4px; }
  .opening-title { font-size: 18px; }
  .nav-inner { padding: 14px var(--gutter); gap: 12px; }
  .brand-logo { height: 34px; }
  .page-hero-h1 { font-size: clamp(40px, 9vw, 64px); }
  .section-title { font-size: clamp(28px, 7vw, 44px); }
  .careers-title { font-size: clamp(28px, 7vw, 40px); }
  .mission-stmt { font-size: clamp(22px, 5vw, 32px); }
  .feature-title { font-size: clamp(56px, 14vw, 96px); }
  .num-val { font-size: clamp(48px, 12vw, 72px); }

  /* Phone: smaller, equal vertical rhythm between homepage sections */
  .mission-bold,
  .credibility,
  .shome,
  .news,
  .careers { padding-top: 88px; padding-bottom: 88px; }
  .what { padding-top: 88px; padding-bottom: 0; }
  .sites { padding-top: 0; padding-bottom: 88px; }
  .sites-head { padding-top: 0; padding-bottom: 44px; }
  /* trim the marquee's internal margins so Partners isn't a giant gap */
  .cred-marquee { margin-top: 52px; margin-bottom: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTRO PRELOADER — masked logo reveal · counter · gold bar · curtain wipe
   ═══════════════════════════════════════════════════════════════════ */
.preloader { display: none; }
html.preloading { overflow: hidden; }
html.preloading body { overflow: hidden; }

html.preloading .preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink-0);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.preloader .pl-center {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spectral-wave shader canvas building in behind the logo */
.preloader .pl-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.preloader .pl-logo-mask {
  display: block;
  overflow: hidden;
  padding: 4px 0;
}

.preloader .pl-logo {
  display: block;
  width: clamp(220px, 32vw, 440px);
  height: auto;
  transform: translateY(116%);
  opacity: 0;
  will-change: transform, opacity;
}
.preloader.is-in .pl-logo {
  animation: plReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes plReveal {
  from { transform: translateY(116%); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Sonar pulse echoing the hero motif */
.preloader .pl-sonar {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--beacon);
  opacity: 0;
  pointer-events: none;
}
.preloader.is-in .pl-sonar { animation: plSonar 2.6s ease-out 0.45s infinite; }
@keyframes plSonar {
  0%   { transform: scale(0.5); opacity: 0.45; }
  80%  { opacity: 0; }
  100% { transform: scale(7); opacity: 0; }
}

.preloader .pl-foot {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.preloader .pl-label,
.preloader .pl-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.preloader .pl-label { color: var(--bone-soft); }
.preloader .pl-count { color: var(--bone); font-variant-numeric: tabular-nums; }

.preloader .pl-bar {
  position: absolute;
  z-index: 2;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--line);
  overflow: hidden;
}
.preloader .pl-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--beacon) 0%, var(--teal) 50%, var(--blue) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Exit — whole loader fades out slowly, logo drifts up gently */
.preloader.is-out {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.preloader.is-out .pl-logo {
  animation: plLogoExit 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes plLogoExit {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-16%); opacity: 0; }
}
.preloader.is-out .pl-foot { opacity: 0; transition: opacity 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  .cred-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .preloader .pl-logo { animation: none !important; transform: none; opacity: 1; }
  .preloader.is-in .pl-logo { animation: none !important; transform: none; opacity: 1; }
  .preloader.is-out .pl-logo { animation: none !important; }
  .preloader .pl-sonar { display: none; }
  .preloader.is-out { clip-path: none; opacity: 0; transition: opacity 0.5s ease; }
}


/* =========================================================
   SHARED MOTION PRIMITIVES (Phase 0)
   Reusable, scroll-driven motion vocabulary applied via
   [data-fx="..."] attributes. Honors prefers-reduced-motion.
   ========================================================= */

/* ── Enter primitives: hidden until .fx-in is added by IO ── */
[data-fx="rise"] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .46s cubic-bezier(.2,.7,.3,1),
    transform .46s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--fx-i, 0) * 14ms);
  will-change: opacity, transform;
}
[data-fx="rise"].fx-in { opacity: 1; transform: translate3d(0,0,0); }

[data-fx="split-words"] .fx-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.28em, 0);
  transition:
    opacity .5s cubic-bezier(.2,.7,.3,1),
    transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--fx-i, 0) * 18ms);
  will-change: opacity, transform;
}
[data-fx="split-words"].fx-in .fx-word { opacity: 1; transform: translate3d(0,0,0); }

[data-fx="reveal-line"] {
  position: relative;
  overflow: hidden;
}
[data-fx="reveal-line"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line, currentColor);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
[data-fx="reveal-line"].fx-in::after { transform: scaleX(1); }

[data-fx="image-mask"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.2,.7,.3,1);
  will-change: clip-path;
}
[data-fx="image-mask"].fx-in { clip-path: inset(0 0 0 0); }

[data-fx="count-up"] { display: inline-block; }

/* ── Scroll-linked primitives: animate via inline custom props ── */
[data-fx="parallax-img"] {
  transform: translate3d(0, var(--fx-y, 0px), 0);
  will-change: transform;
}
[data-fx="parallax-band"] {
  opacity: var(--fx-op, 1);
  transform: translate3d(0, var(--fx-y, 0px), 0);
  will-change: opacity, transform;
}
[data-fx="card-drift"] {
  transform: translate3d(0, var(--fx-y, 0px), 0);
  will-change: transform;
}
[data-fx="sticky-zoom"] {
  transform: scale(var(--fx-scale, 1));
  opacity: var(--fx-op, 1);
  transform-origin: 0 50%;
  transition: transform .05s linear, opacity .05s linear;
  will-change: transform, opacity;
}

@media (max-width: 860px) {
  /* Downgrade scroll-linked motion on phones to keep it calm + performant */
  [data-fx="parallax-img"],
  [data-fx="parallax-band"],
  [data-fx="card-drift"],
  [data-fx="sticky-zoom"] {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fx="rise"],
  [data-fx="split-words"] .fx-word,
  [data-fx="reveal-line"]::after,
  [data-fx="image-mask"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-fx="parallax-img"],
  [data-fx="parallax-band"],
  [data-fx="card-drift"],
  [data-fx="sticky-zoom"] {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Text unfold — reveal lines via clip-path wipe from top to bottom */
[data-fx="unfold"] {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    clip-path .38s cubic-bezier(.2,.7,.3,1),
    opacity .24s cubic-bezier(.2,.7,.3,1),
    transform .38s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--fx-i, 0) * 8ms);
  will-change: clip-path, opacity, transform;
}
[data-fx="unfold"].fx-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translate3d(0,0,0);
}
@media (prefers-reduced-motion: reduce) {
  [data-fx="unfold"] { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}






/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — CTA legibility + dark-photo hero exceptions
   ═══════════════════════════════════════════════════════════════════ */

/* Primary CTAs are dark-on-light; re-declare colour on every state and child */
.btn-primary, .nav-cta, .md-cta,
.foot-newsletter-row button {
  background: var(--bone); color: var(--ink-0); border-color: var(--bone);
}
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active,
.nav-cta:hover, .nav-cta:focus-visible, .nav-cta:active,
.md-cta:hover, .md-cta:focus-visible, .md-cta:active,
.foot-newsletter-row button:hover, .foot-newsletter-row button:focus-visible {
  background: var(--beacon); color: var(--ink-0); border-color: var(--beacon);
}
.btn-primary, .btn-primary span, .btn-primary svg,
.nav-cta, .nav-cta span, .nav-cta svg,
.md-cta, .md-cta span, .md-cta svg,
.foot-newsletter-row button, .foot-newsletter-row button span,
.article-newsletter-form button, .article-newsletter-form button span {
  color: var(--ink-0);
}
.btn-primary:hover span, .btn-primary:hover svg,
.nav-cta:hover span, .nav-cta:hover svg,
.md-cta:hover span, .md-cta:hover svg { color: var(--ink-0); }
.foot-social a:hover span, .foot-social a:hover svg { color: var(--ink-0); }

.btn-ghost, .link-arrow { color: var(--bone); }
.btn-ghost:hover, .btn-ghost:focus-visible, .btn-ghost:active { color: var(--bone); }
.link-arrow:hover, .link-arrow:focus-visible { color: var(--beacon); }

/* Dark-photo heroes — opt-in only, stays light-on-dark */
.page-hero.is-dark,
.page-hero.is-dark h1, .page-hero.is-dark h2, .page-hero.is-dark p,
.page-hero.is-dark .page-hero-h1, .page-hero.is-dark .page-hero-sub,
.page-hero.is-dark .mono-label, .page-hero.is-dark a,
.page-hero.is-dark li, .page-hero.is-dark span { color: #fbfaf5; }
.page-hero.is-dark .btn-primary { background: #fbfaf5; color: #11203a; border-color: #fbfaf5; }
.page-hero.is-dark .btn-primary span { color: #11203a; }
.page-hero.is-dark .btn-primary:hover { background: var(--beacon); color: #11203a; }

/* Homepage hero sits on video footage — keep it light-on-dark */
.hero, .hero h1, .hero p, .hero a, .hero span, .hero li,
.hero .hero-h1, .hero .hero-sub, .hero .mono-label,
.hero .h1-line-em, .hero .btn-ghost, .hero .hero-scroll { color: #fbfaf5; }
.hero .readout-val { color: #3fd0a8; }
.hero .btn-primary { background: #fbfaf5; color: #11203a; border-color: #fbfaf5; }
.hero .btn-primary span, .hero .btn-primary svg { color: #11203a; }
.hero .btn-primary:hover { background: #f4b23f; color: #11203a; }
.hero .btn-primary:hover span { color: #11203a; }
.hero .btn-ghost:hover { border-color: #f4b23f; }
.hero em { color: #f4b23f; }

/* Partner logos — dark/full-colour marks, transparent, even rendered height */
.cred-img, .cred-img-plate, .cred-img-marinn, .cred-img-irb, .cred-img-inm, .cred-img-ntnu {
  height: auto; width: auto; max-height: 52px; max-width: 220px; object-fit: contain;
  background: transparent; filter: none; mix-blend-mode: normal;
}
.cred-img-ntnu { max-height: 56px; }

/* Nav sits above dark hero footage on some pages — keep a warm-white plate
   in both states so the navy nav text stays legible everywhere */
.nav { background: rgba(251,250,245,0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line-soft); }
.nav.scrolled { background: rgba(251,250,245,0.94); border-bottom: 1px solid var(--line); }
.nav-item { white-space: nowrap; }

/* Homepage hero sub-line on dark footage */
.hero .hero-sub, .hero .hero-sub em, .hero .hero-lead { color: rgba(251,250,245,0.78); }

/* ───────────── ABOUT · VALUES ───────────── */
.values { padding: 120px 0; background: var(--ink-1, var(--ink-0)); border-top: 1px solid var(--line); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 48px;
  background: var(--line);
  border: 1px solid var(--line);
}
.value {
  position: relative;
  padding: 40px clamp(24px, 3vw, 44px) 44px;
  background: var(--ink-0);
  overflow: hidden;
  transition: background .5s ease;
}
.value::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--vc) 12%, transparent), transparent 62%);
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.value:hover::before { opacity: 1; }
.value::after {
  content: "";
  position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: var(--vc); transform: scaleY(0); transform-origin: top;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.value:hover::after { transform: scaleY(1); }
.value[data-val="excellence"] { --vc: var(--teal); }
.value[data-val="boldness"] { --vc: var(--beacon); }
.value[data-val="openness"] { --vc: var(--blue); }
.value[data-val="responsibility"] { --vc: #4a7c59; }
.value-icon {
  position: relative;
  width: 56px; height: 56px;
  color: var(--vc);
  margin-bottom: 28px;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.value-icon svg { width: 100%; height: 100%; display: block; }
.value:hover .value-icon { transform: translateY(-3px) scale(1.04); }
.value-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.value-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--vc); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  flex: 0 0 auto;
}
.value-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--vc); margin: 0;
}
.value-lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5; color: var(--bone);
  margin: 0 0 22px; max-width: 34ch;
}
.value-body {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.75; color: var(--bone-dim);
  margin: 0;
}
.values-close {
  margin: 40px 0 0;
  padding: 32px clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--teal);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65; color: var(--bone-dim);
}
.value-body + .value-body { padding-top: 0; border-top: 0; margin-top: 14px; }

.values-close .vc { font-weight: 700; }
.vc-excellence { color: var(--teal); }
.vc-boldness { color: var(--beacon); }
.vc-openness { color: var(--blue); }
.vc-responsibility { color: #4a7c59; }
@media (max-width: 860px) {
  .values { padding: 80px 0; }
  .values-grid { grid-template-columns: 1fr; }
  .value { padding: 32px 24px 36px; }
}


/* ═══════════════════════════════════════════════════════════════════
   V2 NAV · restructure stage 1
   Dark bar. Transparent over dark heroes, solid navy elsewhere and on scroll.
   ═══════════════════════════════════════════════════════════════════ */
.nav-v2 { --nav-ink: #fbfaf5; --nav-navy: #0b1729; background: transparent; border-bottom: 1px solid transparent; }
.nav-v2 .nav-inner { gap: 24px; padding: 16px var(--gutter); }
.nav-v2 .brand-logo { height: 38px; }
.nav-v2 .nav-items { position: relative; left: auto; transform: none; margin: 0; gap: 2px; }
.nav-v2 .nav-item { color: var(--nav-ink); font-size: 14.5px; font-weight: 500; padding: 10px 14px; }
.nav-v2 .nav-item:hover { color: var(--nav-ink); background: rgba(251,250,245,0.09); }
.nav-v2 .nav-item.nav-item-active::after { background: var(--beacon-hot); left: 14px; right: 14px; }
.nav-v2 .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-v2 .nav-item-company { color: rgba(251,250,245,0.62); font-size: 13.5px; }
.nav-v2 .nav-item-company:hover { color: var(--nav-ink); }
.nav-v2 .nav-cta { background: var(--nav-ink); color: var(--nav-navy); border: 1px solid var(--nav-ink); padding: 11px 18px; font-size: 14px; font-weight: 600; border-radius: 2px; transition: background .18s, border-color .18s, color .18s; }
.nav-v2 .nav-cta span, .nav-v2 .nav-cta svg { color: var(--nav-navy); }
.nav-v2 .nav-cta:hover, .nav-v2 .nav-cta:hover span { color: var(--nav-navy); }
.nav-v2 .nav-cta:hover { background: var(--beacon-hot); border-color: var(--beacon-hot); color: var(--nav-navy); }
.nav-v2.nav-solid, .nav-v2.scrolled { background: var(--nav-navy); border-bottom: 1px solid rgba(251,250,245,0.14); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-v2 .nav-burger { border-color: rgba(251,250,245,0.32); }
.nav-v2 .nav-burger span { background: var(--nav-ink); }

/* Mega panels, dark */
.nav-v2 .megamenu { background: var(--nav-navy); border-top: 1px solid rgba(251,250,245,0.12); border-bottom: 1px solid rgba(251,250,245,0.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-v2 .megamenu .mono-label { color: rgba(251,250,245,0.5); }
.nav-v2 .megamenu .mm-blurb { color: rgba(251,250,245,0.72); }
.nav-v2 .megamenu .mm-link { color: var(--nav-ink); border-bottom: 1px solid rgba(251,250,245,0.1); }
.nav-v2 .megamenu .mm-link:hover { color: var(--beacon-hot); }
.nav-v2 .megamenu-company .mm-inner { padding-top: 32px; padding-bottom: 32px; }
.nav-v2 .megamenu-company .mm-link { font-size: 15px; padding: 11px 0; }

/* Mobile drawer, dark */
.mobile-drawer.md-v2 { background: rgba(11,23,41,0.985); }
.md-v2 .md-link, .md-v2 .md-toggle { color: #fbfaf5; border-color: rgba(251,250,245,0.12); }
.md-v2 .md-link:hover, .md-v2 .md-toggle:hover { color: var(--beacon-hot); }
.md-v2 .md-sub { color: rgba(251,250,245,0.78); }
.md-v2 .md-cta { background: #fbfaf5; color: #0b1729; }

/* Hard edge at the base of the home hero, no white fade */
.hero-vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%), linear-gradient(to bottom, rgba(5,11,22,0.4) 0%, transparent 20%, transparent 100%); }
.hero { border-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════
   PILLAR PAGES v2 · Autonomy, Underwater Intelligence
   ═══════════════════════════════════════════════════════════════════ */
.flag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--beacon); border: 1px solid var(--beacon); padding: 3px 7px; margin-left: 6px; vertical-align: middle; white-space: normal; }
.flag-block { display: block; margin: 10px 0 0; margin-left: 0; }

.psec { padding: 120px 0; border-bottom: 1px solid var(--line-soft); }
.psec-head { max-width: 760px; }
.psec-head .section-title { margin-top: 14px; }
.psec-lead { margin-top: 18px; font-size: 18px; color: var(--bone-dim); max-width: 680px; text-wrap: pretty; }

/* Outcomes */
.outcomes { display: grid; gap: 0; margin-top: 56px; border-top: 1px solid var(--line); }
.outcome { display: grid; grid-template-columns: 56px minmax(0,1.1fr) minmax(0,1.4fr); gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.outcome-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--bone-soft); padding-top: 5px; }
.outcome-head { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.outcome-body { font-size: 16.5px; color: var(--bone-dim); line-height: 1.55; text-wrap: pretty; }

/* Deliverables */
.deliver { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); }
.deliver-item { background: var(--ink-0); padding: 32px 30px; }
.deliver-item h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.deliver-item p { font-size: 15.5px; color: var(--bone-dim); line-height: 1.55; }

/* Qualification spec sheet */
.qual { margin-top: 56px; border-top: 1px solid var(--bone); }
.qual-row { display: grid; grid-template-columns: 44px minmax(0,0.9fr) minmax(0,1.6fr); gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.qual-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--bone-soft); padding-top: 4px; }
.qual-q { font-size: 18px; font-weight: 600; line-height: 1.3; }
.qual-a { font-size: 16px; color: var(--bone-dim); line-height: 1.6; text-wrap: pretty; }
.qual-a a { color: var(--beacon); border-bottom: 1px solid rgba(201,138,30,0.4); }
.qual-a a:hover { color: var(--beacon-hot); }

/* Engagement routes */
.eng { margin-top: 56px; border-top: 1px solid var(--line); }
.eng-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) 220px; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line); align-items: start; }
.eng-row h3 { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.eng-meta { display: grid; gap: 14px; }
.eng-meta p { font-size: 16px; color: var(--bone-dim); line-height: 1.55; }
.eng-meta .mono-label { display: block; margin-bottom: 4px; }
.eng-tag { display: inline-block; color: var(--bone-dim); }
.eng-adv { margin-top: 28px; padding: 30px 28px; border-top: 1px solid var(--line); background: rgba(251,250,245,0.035); border-radius: 3px; }
.eng-adv-title { margin-top: 10px; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.eng-adv-body { margin-top: 12px; font-size: 16px; color: var(--bone-dim); line-height: 1.55; max-width: 74ch; }
.eng-adv .eng-cta { margin-top: 18px; }
.eng-cta { font-size: 15px; font-weight: 600; color: var(--beacon); display: inline-flex; align-items: center; gap: 8px; }
.eng-cta:hover { color: var(--beacon-hot); }

/* Proof */
.proofs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 56px; }
.proof { border: 1px solid var(--line); background: var(--ink-1); display: flex; flex-direction: column; }
.proof-media { aspect-ratio: 16/10; background: var(--ink-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.proof-media span { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--bone-soft); }
.proof-body { padding: 28px 28px 32px; }
.proof-body h3 { font-size: 21px; font-weight: 600; margin: 10px 0 12px; }
.proof-body p { font-size: 15.5px; color: var(--bone-dim); line-height: 1.6; }

/* Where it gets tested */
.tband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.tcard { border: 1px solid var(--line); background: var(--ink-0); color: var(--bone); display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.tcard:hover { transform: translateY(-4px); border-color: var(--beacon); }
.tcard-media { aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid var(--line); }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; }
.tcard-body { padding: 22px 22px 26px; }
.tcard-body h3 { font-size: 19px; font-weight: 600; margin: 8px 0 8px; }
.tcard-body p { font-size: 15px; color: var(--bone-dim); line-height: 1.55; }

/* Pillar FAQ */
.pfaq { margin-top: 48px; border-top: 1px solid var(--line); }
.pfaq-row { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.6fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.pfaq-q { font-size: 17.5px; font-weight: 600; line-height: 1.35; }
.pfaq-a { font-size: 16px; color: var(--bone-dim); line-height: 1.6; text-wrap: pretty; }
.pfaq-foot { margin-top: 28px; font-size: 15px; }
.pfaq-foot a { color: var(--beacon); font-weight: 600; }

/* Scoped closing form, dark */
.pform { background: #0b1729; color: #fbfaf5; padding: 120px 0; }
.pform .mono-label { color: rgba(251,250,245,0.55); }
.pform h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin-top: 16px; max-width: 780px; }
.pform-sub { margin-top: 18px; font-size: 17.5px; color: rgba(251,250,245,0.7); max-width: 620px; }
.pform-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; margin-top: 56px; align-items: start; }
.pform-fields { display: grid; gap: 18px; }
.pfield { display: grid; gap: 8px; }
.pfield label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(251,250,245,0.55); }
.pfield input, .pfield textarea, .pfield select { background: rgba(251,250,245,0.05); border: 1px solid rgba(251,250,245,0.18); color: #fbfaf5; font-family: var(--font-display); font-size: 16px; padding: 14px 16px; border-radius: 2px; }
.pfield input:focus, .pfield textarea:focus, .pfield select:focus { outline: none; border-color: var(--beacon-hot); background: rgba(251,250,245,0.08); }
.pfield textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.pform-submit { justify-self: start; margin-top: 6px; background: #fbfaf5; color: #0b1729; font-weight: 600; font-size: 15px; padding: 15px 26px; border-radius: 2px; display: inline-flex; align-items: center; gap: 10px; }
.pform-submit:hover { background: var(--beacon-hot); }
.pform-alt { border-left: 1px solid rgba(251,250,245,0.16); padding-left: 40px; }
.pform-alt h3 { font-size: 22px; font-weight: 600; margin: 14px 0 12px; }
.pform-alt p { font-size: 16px; color: rgba(251,250,245,0.7); line-height: 1.6; }
.pform-alt .eng-cta { color: var(--beacon-hot); margin-top: 18px; }
.pform .flag { color: var(--beacon-hot); border-color: color-mix(in oklab, var(--beacon-hot) 60%, transparent); }
.pform .pfield input[readonly] { background: rgba(251,250,245,0.03); color: rgba(251,250,245,0.82); cursor: default; }
.pform .pfield input[readonly]:focus { border-color: rgba(251,250,245,0.18); background: rgba(251,250,245,0.03); }

@media (max-width: 900px) {
  .psec { padding: 84px 0; }
  .outcome, .qual-row, .eng-row, .pfaq-row { grid-template-columns: 1fr; gap: 12px; }
  .deliver, .proofs, .tband, .pform-grid { grid-template-columns: 1fr; }
  .pform-alt { border-left: 0; padding-left: 0; border-top: 1px solid rgba(251,250,245,0.16); padding-top: 32px; }
}
@media (max-width: 600px) {
  .pform { padding: 80px 0; }
  .pform-grid { gap: 36px; margin-top: 36px; }
  .pform-submit { width: 100%; justify-content: center; min-height: 48px; }
  .pform .eng-cta { min-height: 44px; }
  .cta-band-buttons { flex-direction: column; align-items: stretch; }
  .cta-band-buttons .btn-primary, .cta-band-buttons .btn-ghost { justify-content: center; min-height: 48px; }
}


/* Global dark page hero ground (pillar pages and any .is-dark hero without page-level media) */
.page-hero.is-dark { background: #071223; border-bottom: 1px solid rgba(251,250,245,0.12); }
.page-hero.is-dark::before { background: radial-gradient(ellipse 80% 70% at 22% 40%, rgba(20,44,78,0.85) 0%, rgba(7,18,35,0.4) 60%, rgba(4,10,20,0.9) 100%); animation: none; }
.page-hero.is-dark::after { background-image: linear-gradient(to right, rgba(236,231,216,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(236,231,216,0.05) 1px, transparent 1px); opacity: 0.5; }
.page-hero.is-dark .btn-ghost { color: #fbfaf5; border-bottom-color: rgba(251,250,245,0.45); }
.page-hero.is-dark .btn-ghost:hover { border-bottom-color: #fbfaf5; }
.page-hero.is-dark .page-hero-sub { color: rgba(251,250,245,0.75); }
.page-hero.is-dark .flag { color: var(--beacon-hot); border-color: rgba(224,162,51,0.6); }

/* Photographic page hero — image ground, scrimmed for light-on-dark type */
.page-hero.has-media {
  background: #050d1c;
  min-height: min(86vh, 840px);
  display: flex;
  align-items: flex-end;
}
.page-hero.has-media > .container { width: 100%; }
.page-hero.has-media::before { background: none; animation: none; }
.page-hero.has-media::after { opacity: 0.35; }
.page-hero-media { position: absolute; inset: 0; overflow: hidden; }
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 74% 58%;
  transform: scale(1.08);
  filter: saturate(0.86) brightness(0.8) contrast(1.03);
  animation: heroMediaDrift 34s ease-in-out infinite alternate;
}
/* Two scrims: a lateral wash that keeps the headline column readable, and a
   vertical one that seats the section against the nav above and the page below. */
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,10,20,0.95) 0%, rgba(5,13,26,0.86) 32%, rgba(6,16,32,0.46) 62%, rgba(6,16,32,0.26) 100%),
    linear-gradient(to bottom, rgba(4,10,20,0.6) 0%, rgba(4,10,20,0) 26%, rgba(4,10,20,0.5) 82%, rgba(4,10,20,0.78) 100%);
}
@keyframes heroMediaDrift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.6%, -1.2%, 0); }
}
@media (max-width: 1200px) {
  .page-hero-media img { object-position: 62% 62%; }
}
@media (max-width: 900px) {
  .page-hero.has-media { min-height: 72vh; }
  .page-hero-media img { object-position: 66% 56%; filter: saturate(0.86) brightness(0.68) contrast(1.03); }
  .page-hero-media::after {
    background: linear-gradient(to bottom, rgba(4,10,20,0.72) 0%, rgba(4,10,20,0.5) 40%, rgba(4,10,20,0.9) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-media img { animation: none; transform: scale(1.04); }
}

/* Hero content sits above the hero overlays */
.page-hero > .container { position: relative; z-index: 2; }
/* Transparent nav overlays a dark hero instead of standing on the page background */
.nav-v2:not(.nav-solid) { margin-bottom: -74px; }

/* Pillar hero headline scale (sales page, not statement page) */
.page-hero.is-dark .page-hero-h1 { font-size: clamp(40px, 6vw, 92px); line-height: 1.02; letter-spacing: -0.03em; max-width: 17ch; }
.page-hero.is-dark .page-hero-sub { max-width: 620px; font-size: clamp(17px, 1.45vw, 21px); margin-top: 22px; }


/* With the S/001–S/004 stack removed, the What We Do band needs its own
   bottom spacing (it previously inherited the stack's). */
.what:not(:has(.stack)) { padding-bottom: clamp(64px, 7vh, 96px); }

/* ── Pilot-sites preview as a 3-column grid (homepage, Pass A) ──
   Structure, classes and data-fx hooks are unchanged; only the layout
   of the existing cards changes. Sticky 100vh header released. */
.sites.sites-grid3 { padding-top: clamp(72px, 8vh, 110px); padding-bottom: clamp(72px, 8vh, 110px); }
.sites-grid3 .sites-head { position: static; height: auto; display: block; padding: 0 0 clamp(40px, 5vw, 64px); }
.sites-grid3 .sites-head-inner { max-width: 900px; margin: 0 auto; text-align: center; transform: none !important; opacity: 1 !important; }
.sites-grid3 .sites-title { font-size: clamp(40px, 5.6vw, 84px); }
.sites-grid3 .sites-stagger {
  margin-top: 0; padding-top: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start;
}
.sites-grid3 .sitecard,
.sites-grid3 .sitecard--big,
.sites-grid3 .sitecard--small { width: 100%; align-self: start; margin: 0; }
.sites-grid3 .sitecard__frame,
.sites-grid3 .sitecard--small .sitecard__frame { aspect-ratio: 4 / 3; border-radius: 2px; box-shadow: none; }
.sites-grid3 .sitecard__coord { border-radius: 2px; }
.sites-grid3 .sitecard__meta { padding-top: 18px; gap: 10px; }
.sites-grid3 .sitecard__title,
.sites-grid3 .sitecard--small .sitecard__title { font-size: clamp(20px, 1.7vw, 26px); }
.sites-grid3 .sitecard__lead { font-size: 15px; max-width: none; }
@media (max-width: 1024px) { .sites-grid3 .sites-stagger { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 768px) { .sites-grid3 .sites-stagger { grid-template-columns: 1fr; } }


/* ═══════ NAV — item 1 (§1.3–1.9) with §R2.2 applied. Homepage only (.nav-r2). ═══════
   Rest: transparent, no glass. Past the hero: dark glass. Text colour never changes. */
.nav.nav-r2 {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  color: var(--ink-0);
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              border-color     .3s cubic-bezier(.4,0,.2,1),
              backdrop-filter  .3s cubic-bezier(.4,0,.2,1);
}
/* Fixed, not sticky: the DC host box is shorter than the page, which unstuck the bar.
   Hide on scroll down, reveal on scroll up (supersedes §1.6 — user instruction). */
.nav.nav-r2 { position: fixed; top: 0; left: 0; right: 0; }
.nav.nav-r2 { transition: background-color .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1),
              backdrop-filter .3s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.2,.7,.3,1); }
.nav.nav-r2.nav-hidden { transform: translateY(-100%); }
.nav-r2 ~ .hero { margin-top: 0; }

/* centred link rail — §R2.2a */
.nav.nav-r2 .nav-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; position: relative;
  gap: 24px; height: 76px; padding-top: 0; padding-bottom: 0;
  transition: height .3s cubic-bezier(.4,0,.2,1);
}
/* Equal side tracks centre the rail on the page. Safe above 1024px, where the
   rail, the brand and the right-hand cluster all fit without starving a track. */
.nav.nav-r2 .nav-items { position: relative; transform: none; justify-self: center; min-width: 0; margin: 0; }
@media (min-width: 1025px) { .nav.nav-r2 .nav-inner { grid-template-columns: 1fr auto 1fr; } }
.nav.nav-r2 .nav-right { justify-self: end; align-items: center; min-width: 0; min-height: 0; }
/* Neither label may wrap: a wrapped child would grow past the fixed row height */
.nav.nav-r2 .nav-cta,
.nav.nav-r2 .nav-item { white-space: nowrap; }
.nav.nav-r2 .nav-cta { flex: none; }
.nav.nav-r2 .nav-burger { grid-row: 1; grid-column: 3; justify-self: end; }
.nav.nav-r2 .brand-logo { height: 40px; transition: height .3s cubic-bezier(.4,0,.2,1); }

/* one text colour for both states — no flip (§R2.2b) */
.nav.nav-r2 .brand { color: var(--ink-0); }
.nav.nav-r2 .nav-item { color: var(--ink-0); border-radius: 2px; }
.nav.nav-r2 .nav-item:hover { color: var(--ink-0); background: rgba(251,250,245,0.10); }
.nav.nav-r2 .nav-item-company { color: rgba(251,250,245,0.62); }
.nav.nav-r2 .nav-item-company:hover { color: var(--ink-0); }
.nav.nav-r2 .nav-cta { background: var(--ink-0); color: #0b1729; border-color: transparent; border-radius: 2px; }
.nav.nav-r2 .nav-cta:hover { background: var(--beacon); color: var(--bone); border-color: var(--beacon); }
.nav.nav-r2 .nav-burger span { background: var(--ink-0); }
.nav.nav-r2 :focus-visible { outline: 2px solid var(--beacon); outline-offset: 3px; border-radius: 2px; }

/* scrolled past the hero: dark glass, 60px */
.nav.nav-r2.is-past-hero {
  background: rgba(6,14,26,0.90);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(251,250,245,0.10);
  box-shadow: none;
}
.nav.nav-r2.is-past-hero .nav-inner { height: 60px; }
.nav.nav-r2.is-past-hero .brand-logo { height: 32px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.nav-r2.is-past-hero { background: rgba(6,14,26,0.97); }
}

/* mega-panel: black-on-black, wipes down from the bar — §R2.2c */
.nav-r2:has(.megamenu.open) {
  background: rgba(6,14,26,0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.nav-r2 .megamenu {
  background: rgba(6,14,26,0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgba(251,250,245,0.10);
  border-bottom: 1px solid rgba(251,250,245,0.10);
  border-radius: 0; box-shadow: none; color: var(--ink-0);
  transform: translateY(-10px); clip-path: inset(0 0 100% 0);
  transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1),
              clip-path .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
}
.nav-r2 .megamenu.open {
  transform: none; clip-path: inset(0 0 0 0);
  transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1),
              clip-path .28s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.nav-r2 .megamenu .mono-label { color: rgba(251,250,245,0.55); }
.nav-r2 .mm-blurb { color: rgba(251,250,245,0.62); }
.nav-r2 .mm-link {
  color: rgba(251,250,245,0.82); border-bottom-color: rgba(251,250,245,0.10);
  opacity: 0; transform: translateY(4px);
  transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1),
              padding .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}
.nav-r2 .megamenu.open .mm-link { opacity: 1; transform: none; }
.nav-r2 .megamenu.open .mm-link:nth-child(1) { transition-delay: 0ms; }
.nav-r2 .megamenu.open .mm-link:nth-child(2) { transition-delay: 30ms; }
.nav-r2 .megamenu.open .mm-link:nth-child(3) { transition-delay: 60ms; }
.nav-r2 .megamenu.open .mm-link:nth-child(4) { transition-delay: 90ms; }
.nav-r2 .megamenu:not(.open) .mm-link { transition-delay: 0s !important; }
.nav-r2 .mm-link:hover { color: var(--ink-0); padding-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  .nav.nav-r2, .nav.nav-r2 * { transition-duration: .01ms !important; }
}
/* Keep three tracks until the site's own 900px breakpoint hides .nav-items and
   shows the burger; below it, brand on the left and the right-hand cluster
   (CTA + burger) share one cell so nothing wraps to a second row. */
@media (max-width: 1024px) {
  /* Collapse to the burger before the tracks starve — the rail needs ~1000px to fit */
  .nav.nav-r2 .nav-items { display: none; }
  .nav.nav-r2 .nav-burger { display: inline-flex; }
  .nav.nav-r2 .nav-inner { height: 64px; grid-template-columns: auto auto; }
  :root { --nav-h: 64px; }
  .nav.nav-r2.is-past-hero .nav-inner { height: 56px; }
  .nav.nav-r2 .nav-right,
  .nav.nav-r2 .nav-burger { grid-row: 1; grid-column: 2; justify-self: end; }
  .nav.nav-r2 .nav-right { display: flex; align-items: center; gap: 12px; margin-right: 44px; }
}


/* ═══════ PASS D — media and motion (homepage) ═══════
   Reuses the existing data-fx vocabulary and the .2,.7 easing family.
   No new animation mechanism, no shadows, one 2px radius. */

/* Contact band · §3.2 scrim system at --scrim-heavy (.42 / .62 / .88) */
.cta-band.cta-band-media { position: relative; isolation: isolate; overflow: hidden; background: var(--bone); color: var(--ink-0); }
.cta-band.cta-band-media::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(90% 70% at 30% 50%, rgba(5,11,22,.42) 0%, rgba(5,11,22,.62) 60%, rgba(2,5,9,.88) 100%),
    linear-gradient(rgba(5,13,26,.35) 0%, rgba(5,13,26,.55) 100%);
}
.cta-band.cta-band-media::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%),
    linear-gradient(rgba(5,11,22,.4) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 100%);
}
.cta-band.cta-band-media .media-bg__grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background:
    linear-gradient(to right, rgba(236,231,216,.05) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(rgba(236,231,216,.05) 1px, rgba(0,0,0,0) 1px);
  background-size: 64px 64px;
}
.cta-band.cta-band-media .cta-band-inner { position: relative; }
.cta-band.cta-band-media h2, .cta-band.cta-band-media .mono-label { color: var(--ink-0); }
.cta-band.cta-band-media p { color: rgba(251,250,245,.78); }
.hp-flag {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35;
  letter-spacing: .05em; text-transform: uppercase; color: var(--beacon-hot);
  background: rgba(201,138,30,.16); border: 1px dashed rgba(224,162,51,.5);
  border-radius: 2px; padding: 4px 8px; max-width: 560px;
}

/* Sites · --scrim-light per card frame, plus the location pin on each chip */
.sites .sitecard__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 70% at 30% 50%, rgba(5,11,22,.20) 0%, rgba(5,11,22,.34) 60%, rgba(2,5,9,.60) 100%);
  opacity: .85; transition: opacity .5s cubic-bezier(.2,.7,.3,1);
}
.sites .sitecard:hover .sitecard__frame::after { opacity: 1; }
.sites .sitecard__coord { z-index: 2; display: inline-flex; align-items: center; gap: 6px; }
.coord-pin { flex: none; opacity: .9; }


/* Scroll-progress hairline in the nav's bottom edge (R3.3 add 8) */
.nav.nav-r2::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: var(--scrollp, 0%); background: var(--beacon); pointer-events: none;
}

/* Hard rules 5 and 6 across the homepage bands */
.hero, .hero *, .what, .what *, .shome, .shome *, .sites, .sites *,
.news, .news *, .cta-band, .cta-band * { box-shadow: none !important; }
.shome .srow, .sites .sitecard__frame, .news-lead, .news-big,
.news-img, .nl-media, .nb-media, .btn-primary, .btn-ghost { border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nav.nav-r2::after { display: none; }
}


/* ═══════ NAV INTERACTION LAYER — motion pass, phase 1 ═══════ */

/* Sliding indicator: a 2px beacon rule that travels between top-level items */
.nav-items { position: relative; }
.nav-underline {
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 0;
  background: var(--beacon); border-radius: 2px; pointer-events: none;
  opacity: 0; transform: translate3d(var(--u-x, 0px), 0, 0);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), width .28s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.nav-items.has-indicator .nav-underline { opacity: 1; }

/* Caret rotates while its panel is open */
.nav-item .caret { transition: transform .15s cubic-bezier(.2,.7,.3,1), opacity .15s ease; }
.nav-item.is-active .caret { transform: rotate(180deg); opacity: 1; }

/* Page dims behind an open panel */
.nav-scrim {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: rgba(17,32,58,.5);
  opacity: 0; transition: opacity .24s cubic-bezier(.2,.7,.3,1);
}
.nav-scrim.is-on { opacity: 1; }

/* Dismissal is faster than opening: 170ms, no stagger */
.nav-r2 .megamenu:not(.open) {
  transition: opacity .17s cubic-bezier(.2,.7,.3,1), transform .17s cubic-bezier(.2,.7,.3,1),
              clip-path .17s cubic-bezier(.2,.7,.3,1), visibility 0s linear .17s;
}

/* Logo sonar ping on hover — reuses the hero's radial-pulse idea */
@keyframes brandPing {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { opacity: .12; }
  100% { transform: scale(2.2); opacity: 0; }
}
.brand { position: relative; }
.brand::after {
  content: ""; position: absolute; left: 14px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  border: 1px solid var(--beacon); border-radius: 50%; pointer-events: none; opacity: 0;
}
.brand:hover::after { animation: brandPing .6s cubic-bezier(.2,.7,.3,1) 1; }

/* Micro-interactions */
.btn-primary:active, .btn-ghost:active, .btn-dark:active, .nav-cta:active, .md-cta:active,
.foot-newsletter-row button:active { transform: scale(.98); transition: transform .08s cubic-bezier(.2,.7,.3,1); }
.nav-r2 .nav-item, .nav-r2 .nav-cta { transition: background-color .15s cubic-bezier(.2,.7,.3,1), color .15s cubic-bezier(.2,.7,.3,1), border-color .15s ease; }
.nav-r2 a:focus-visible, .nav-r2 button:focus-visible, .mobile-drawer a:focus-visible, .mobile-drawer button:focus-visible {
  outline: 2px solid var(--beacon); outline-offset: 3px; border-radius: 2px;
}

/* Mobile drawer: slides in from the right, content settles, links stagger at 30ms */
.mobile-drawer {
  transform: translate3d(4%, 0, 0);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .32s cubic-bezier(.2,.7,.3,1), transform .32s cubic-bezier(.2,.7,.3,1), visibility .32s ease;
}
.mobile-drawer.is-open { transform: translate3d(0, 0, 0); }
.mobile-drawer .md-section, .mobile-drawer .md-cta {
  opacity: 0; transform: translate3d(0, 6px, 0);
  transition: opacity .26s cubic-bezier(.2,.7,.3,1), transform .26s cubic-bezier(.2,.7,.3,1);
}
.mobile-drawer.is-open .md-section, .mobile-drawer.is-open .md-cta { opacity: 1; transform: none; }
.mobile-drawer.is-open .md-section:nth-child(1) { transition-delay: 30ms; }
.mobile-drawer.is-open .md-section:nth-child(2) { transition-delay: 60ms; }
.mobile-drawer.is-open .md-section:nth-child(3) { transition-delay: 90ms; }
.mobile-drawer.is-open .md-section:nth-child(4) { transition-delay: 120ms; }
.mobile-drawer.is-open .md-cta { transition-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .nav-underline, .nav-scrim, .mobile-drawer, .mobile-drawer .md-section, .mobile-drawer .md-cta { transition-duration: .01ms !important; }
  .brand:hover::after { animation: none; }
  .nav.nav-r2 { transition-duration: .01ms !important; }
}


/* ═══════ UNIFIED NAV — the R2 header on every page ═══════
   Homepage keeps the transparent-over-hero state (its hero is full-bleed under
   the bar). Every other page runs the dark-glass state from load, with a spacer
   holding the space the fixed bar no longer occupies in flow. */
.nav.nav-r2.nav-locked {
  background: rgba(6,14,26,0.90);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(251,250,245,0.10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.nav-r2.nav-locked { background: rgba(6,14,26,0.97); }
}
.nav.nav-r2.nav-locked.is-past-hero .nav-inner { height: 60px; }
.nav.nav-r2.nav-locked.is-past-hero .brand-logo { height: 32px; }
.nav-spacer { height: 77px; flex: none; }   /* 76px bar + 1px hairline */
@media (max-width: 1024px) { .nav-spacer { height: 65px; } }
/* .nav-solid was the old opaque treatment; the R2 header supersedes it */
.nav.nav-r2.nav-solid { background: transparent; }
.nav.nav-r2.nav-solid.nav-locked { background: rgba(6,14,26,0.90); }


/* ═══════ PILOT-SITES REEL — cinematic scroll sequence ═══════
   One sticky stage, one camera. The stage darkens, the first site zooms up to
   full presentation, the camera pans to the second and the third, then pulls
   back so all three land in the ordinary three-up row. Transform/opacity only. */
.sites-reel { position: relative; }
.sites-dim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, #0b1a2f 0%, #050b16 75%);
  opacity: var(--dim, 0);
}
@media (min-width: 1025px) {
  .sites.sites-grid3 { position: relative; isolation: isolate; }
  .sites-reel { height: 420vh; }
  .sites-reel > .sites-stagger {
    position: sticky; top: 11vh; transform: none;
    z-index: 1; overflow: visible;
  }
  .sites-reel .sitecard {
    transform: translate3d(var(--rx, 0px), 0, 0) scale(var(--rs, 1));
    opacity: var(--ro, 1);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    z-index: var(--rz, 1);
    transition: opacity .25s cubic-bezier(.2,.7,.3,1);
  }
  /* on the darkened stage the card text flips to paper */
  .sites.is-stage .sites-head-inner { opacity: var(--headfade, 1); }
  .sites.is-stage .sitecard__title,
  .sites.is-stage .sitecard__lead { color: rgba(251,250,245,0.92); }
  .sites.is-stage .sitecard__label { color: rgba(251,250,245,0.6); }
  .sites.is-stage .sitecard__cta { color: rgba(251,250,245,0.85); }
  .sites-reel .sitecard.is-featured .sitecard__frame { outline: 1px solid rgba(201,138,30,.85); }

  /* chapter rail: which site is on stage */
  .reel-rail {
    position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
    z-index: 6; display: flex; align-items: center; gap: 12px;
    pointer-events: none;                     /* decorative: never in the hit-test layer */
    padding: 10px 16px; border: 1px solid rgba(251,250,245,.16); border-radius: 2px;
    background: rgba(5,11,22,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .35s cubic-bezier(.2,.7,.3,1);
  }
  .reel-rail.is-on { opacity: 1; }
  .reel-dot { width: 30px; height: 2px; background: rgba(251,250,245,.22); position: relative; overflow: hidden; }
  .reel-dot::after { content: ""; position: absolute; inset: 0; background: var(--beacon);
    transform: scaleX(var(--dot, 0)); transform-origin: left; }
  .reel-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(251,250,245,.86); min-width: 210px;
  }
}
@media (max-width: 1024px) {
  .reel-rail, .sites-dim { display: none; }
  .sites-reel .sitecard { transform: none !important; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sites-reel { height: auto !important; }
  .sites-reel > .sites-stagger { position: static !important; transform: none !important; }
  .sites-reel .sitecard { transform: none !important; opacity: 1 !important; }
  .reel-rail, .sites-dim { display: none !important; }
}


/* ═══════ AUTONOMY — SCROLL SEQUENCES (rebuilt) ═══════
   Base (below 1025px): the sequence pieces are desktop-only decoration, so the
   stage and rail are hidden and the page reads as an ordinary stacked layout.
   The panel media keeps its aspect ratios at every width. */
.am-story-stage, .am-story-rail { display: none; }
.am-panel-media { position: relative; overflow: hidden; background: var(--ink-2); border-radius: 2px; aspect-ratio: 3 / 2; }
.am-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop: three scrubbed sequences — the pinned story, the full-bleed gallery
   track and the routes stack. transform / opacity / clip-path only. */
@media (min-width: 1025px) {

  /* ── 001 · pinned story ── */
  /* the pinned frame must always fit the viewport, so the head is compact and
     the stage is capped against the remaining height */
  [data-am="story"] .container {
    position: sticky; top: 88px;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px 56px;
    align-items: start; align-content: start;
    max-height: calc(100vh - 108px);
  }
  [data-am="story"] .psec { padding-top: 0; }
  [data-am="story"] .psec-head { grid-column: 1 / -1; margin-bottom: 0; padding: 0; }
  [data-am="story"] .psec-head .section-title { font-size: clamp(26px, 2.4vw, 36px); margin-top: 6px; }
  [data-am="story"] .psec-head .psec-lead {
    max-width: 780px; font-size: 13.5px; line-height: 1.45; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  [data-am="story"] .outcomes { grid-column: 1; display: flex; flex-direction: column; gap: 0; }
  [data-am="story"] .outcome {
    display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start;
    padding: 8px 0; border-top: 1px solid var(--line);
    opacity: .32; transition: opacity 400ms cubic-bezier(.65,0,.35,1);
  }
  [data-am="story"] .outcome.is-on { opacity: 1; }
  [data-am="story"] .outcome-num { grid-row: 1 / span 2; font-variant-numeric: tabular-nums; }
  [data-am="story"] .outcome-head { font-size: 16px; line-height: 1.2; margin: 0; }
  [data-am="story"] .outcome-body {
    grid-column: 2; font-size: 13.5px; line-height: 1.45; margin: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 400ms cubic-bezier(.65,0,.35,1), opacity 240ms cubic-bezier(.65,0,.35,1), margin 400ms;
  }
  [data-am="story"] .outcome.is-on .outcome-body { max-height: 210px; opacity: 1; margin-top: 6px; }
  .am-story-stage { display: block; }
  .am-story-rail { display: block; }
  .am-story-stage {
    grid-column: 2; grid-row: 2; position: relative; aspect-ratio: 1; overflow: hidden;
    background: var(--ink-2); border-radius: 2px; align-self: start;
    max-height: calc(100vh - 330px); width: 100%; justify-self: end;
  }
  .am-story-stage img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.05);
    transition: opacity 600ms cubic-bezier(.65,0,.35,1), transform 1200ms cubic-bezier(.16,1,.3,1);
  }
  .am-story-stage img.is-on { opacity: 1; transform: scale(1); }
  .am-story-rail {
    grid-column: 1 / -1; height: 1px; background: var(--line); position: relative; margin-top: 22px;
  }
  .am-story-rail::after {
    content: ""; position: absolute; inset: 0; background: var(--beacon);
    transform: scaleX(var(--sp, 0)); transform-origin: left;
  }

  /* ── 002 · horizontal gallery, full-bleed so nothing is cropped ── */
  /* the sticky rail's range is its parent's box, so the container must fill the
     section's scroll height — otherwise the pin releases early into a gap */
  [data-am="gallery"] > .container { max-width: none; padding-left: 0; padding-right: 0; height: 100%; }
  [data-am="gallery"] .psec-head { max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
  .am-rail { position: sticky; top: 108px; overflow: hidden; padding: 8px 0 0; }
  [data-am="gallery"] .deliver {
    display: flex; flex-wrap: nowrap; gap: 56px; width: max-content;
    background: none; border: 0; counter-reset: dlv;
    padding: 0 var(--gutter);
    transform: translate3d(var(--gx, 0px), 0, 0);
    will-change: transform;
  }
  [data-am="gallery"] .deliver-item {
    flex: none; width: 32vw; display: flex; flex-direction: column; gap: 14px;

  }
  /* Each panel carries its own hairline rule and index, so the gutter stays
     empty — separation comes from the panels, not from decoration in between */
  [data-am="gallery"] .deliver-item { position: relative; counter-increment: dlv; }
  [data-am="gallery"] .deliver-item::before {
    content: counter(dlv, decimal-leading-zero);
    display: block; padding-bottom: 16px; margin-bottom: 4px;
    border-top: 1px solid var(--line); padding-top: 14px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
    color: var(--bone-soft);
  }
  [data-am="gallery"] .deliver-item h3 { font-size: 20px; }
  [data-am="gallery"] .deliver-item p { font-size: 14.5px; line-height: 1.5; }
  .am-panel-media { position: relative; overflow: hidden; background: var(--ink-2); border-radius: 2px; aspect-ratio: 3 / 2; }
  [data-am="gallery"]   .am-panel-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;

  }
  .am-gallery-prog {
    position: relative; height: 1px; background: var(--line);
    max-width: var(--container); margin: 32px auto 0;
  }
  .am-gallery-prog::after {
    content: ""; position: absolute; inset: 0; background: var(--beacon);
    transform: scaleX(var(--gp, 0)); transform-origin: left;
  }

  /* ── 004 · routes stack with real offsets ── */
  [data-am="stack"] .eng { display: block; padding-bottom: 4vh; }
  [data-am="stack"] .eng-row {
    position: sticky; background: var(--ink-0);
    border: 1px solid var(--line); border-radius: 2px;
    padding: 32px 34px; margin: 0 0 22px;
    transform: scale(var(--ks, 1));
    transform-origin: top center;
  }
  [data-am="stack"] .eng-row:nth-child(1) { top: 104px; z-index: 1; }
  [data-am="stack"] .eng-row:nth-child(2) { top: 124px; z-index: 2; }
  [data-am="stack"] .eng-row:nth-child(3) { top: 144px; z-index: 3; }
  [data-am="stack"] .eng-row:nth-child(4) { top: 164px; z-index: 4; }
}

@media (prefers-reduced-motion: reduce) {
  [data-am="story"] .container { position: static; min-height: 0; }
  [data-am="story"] .outcome { opacity: 1 !important; }
  [data-am="story"] .outcome-body { max-height: none !important; opacity: 1 !important; }
  [data-am="gallery"] .deliver { transform: none !important; flex-wrap: wrap; width: auto; }
  [data-am="stack"] .eng-row { position: static; transform: none !important; }
}


/* Client "what we help you do" list — three columns of plain statements */
.psec-tight { padding-bottom: clamp(48px, 6vh, 72px); }
.helplist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px;
}
.helplist li {
  padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.45; color: var(--bone);
}
@media (max-width: 1024px) { .helplist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .helplist { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════
   PUSH NAV — opening a nav item pushes the page down
   The panel is not an overlay: it occupies real space under the fixed bar and
   the page shell slides down by exactly the panel's height, insetting slightly
   from both edges so the hero reads as a card. Transform only.
   ═══════════════════════════════════════════════════════════════ */
.nav-inner { position: relative; }
/* brand and Company occupy the bar's first cell together, so the grid still has
   exactly three children and the centre rail stays centred */
.nav-lead { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); min-width: 0; justify-self: start; }
/* True centring: the side clusters differ in width, so a 1fr/auto/1fr grid can
   only centre the rail when both sides happen to be equal. Pin it to the bar's
   midpoint instead and let the clusters sit at the edges. */
@media (min-width: 1025px) {
  .nav.nav-r2 .nav-inner { display: flex; align-items: center; justify-content: space-between; }
  .nav.nav-r2 .nav-items {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); justify-self: auto;
  }
  .nav.nav-r2 .nav-right { justify-self: auto; }
}
.nav-lead .brand { flex: none; }
.nav-lead .nav-item-company { white-space: nowrap; }
@media (max-width: 1024px) { .nav-lead .nav-item-company { display: none; } }

/* the bar's right slot: a Menu / close affordance instead of the old CTA */
.nav.nav-r2 .nav-close {
  display: inline-flex; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 500; letter-spacing: normal;
  color: #fbfaf5; opacity: 1; transition: color .2s;
}
.nav.nav-r2 .nav-close:hover { color: var(--beacon-hot); }
.nav-close-mark {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid currentColor; flex: none;
  transition: background .3s cubic-bezier(.16,1,.3,1), border-color .3s, transform .3s;
}
.nav-close-mark::before, .nav-close-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px;
  background: currentColor; transform-origin: center;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-close-mark::before { transform: translate(-50%, -3px); }
.nav-close-mark::after  { transform: translate(-50%, 3px); }
body.mm-push .nav-close-mark { background: var(--beacon); border-color: var(--beacon); }
body.mm-push .nav-close-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
body.mm-push .nav-close-mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* the panel: real space, dark, typographic */
.nav.nav-r2 .megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #0b1524;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
  height: 0; overflow: hidden;
  opacity: 1; visibility: hidden; transform: none;
  transition: height .68s cubic-bezier(.22,1,.36,1), visibility 0s linear .68s;
}
.nav.nav-r2 .megamenu.open {
  visibility: visible;
  border-bottom: 1px solid rgba(251,250,245,0.08);
  transition: height .68s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.nav.nav-r2 .mm-inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(48px, 7vh, 92px) var(--gutter) clamp(56px, 8vh, 104px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(32px, 5vw, 90px);
  align-items: start;
}
.nav.nav-r2 .mm-col { gap: 0; }
.nav.nav-r2 .mm-col-label { gap: 16px; padding-bottom: 8px; }
.nav.nav-r2 .mm-col-label .mono-label { color: var(--beacon); }
.nav.nav-r2 .mm-blurb { color: rgba(251,250,245,0.62); font-size: 15px; max-width: 30ch; line-height: 1.5; }

/* big, tight, display weight — the panel is the page's largest type */
.nav.nav-r2 .mm-link {
  display: block; padding: 6px 0; border: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.65vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3; white-space: nowrap;
  color: rgba(251,250,245,0.94);
  transition: color .22s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1);
}
.nav.nav-r2 .mm-link:hover { color: var(--beacon-hot); transform: translateX(8px); padding-left: 0; }
.nav.nav-r2 .mm-link .mm-arrow { display: none; }
.mm-cta {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 7px;
  background: var(--beacon); color: #fbfaf5;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.65vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3; text-transform: none;
  transition: background .2s, transform .2s;
}
.mm-cta svg { width: 18px; height: 18px; }
.mm-cta:hover { background: var(--beacon-hot); transform: translateY(-1px); }

/* staggered entry, one column at a time */
/* Each link rises out of its own line box as the curtain comes down: the link
   is the mask, its label the travelling element. */
.nav.nav-r2 .mm-link { overflow: hidden; }
.nav.nav-r2 .mm-link > span:first-child {
  display: block;
  transform: translateY(115%);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.nav.nav-r2 .megamenu.open .mm-link > span:first-child { transform: translateY(0); }
.nav.nav-r2 .megamenu.open .mm-link:nth-child(1) > span:first-child { transition-delay: .14s; }
.nav.nav-r2 .megamenu.open .mm-link:nth-child(2) > span:first-child { transition-delay: .21s; }
.nav.nav-r2 .megamenu.open .mm-link:nth-child(3) > span:first-child { transition-delay: .28s; }
.nav.nav-r2 .megamenu.open .mm-link:nth-child(4) > span:first-child { transition-delay: .35s; }
.nav.nav-r2 .megamenu.open .mm-link:nth-child(5) > span:first-child { transition-delay: .42s; }
/* the label column has no links, so it fades on the same curve */
.nav.nav-r2 .megamenu .mm-col-label { opacity: 0; transition: opacity .6s cubic-bezier(.22,1,.36,1); }
.nav.nav-r2 .megamenu.open .mm-col-label { opacity: 1; transition-delay: .16s; }

/* the page travels down and insets, so the hero reads as a card */
.page-shell {
  position: relative; z-index: 1; min-height: 100vh;
  background: var(--ink-0);
  transition: transform .68s cubic-bezier(.22,1,.36,1), border-radius .68s cubic-bezier(.22,1,.36,1);
  transform-origin: top center;
  border-radius: 0;
}
body.mm-push .page-shell {
  transform: translateY(var(--mm-h, 0px)) scale(0.972);
  border-radius: 20px;
  overflow: clip;
}
/* the ground revealed beside and behind the shell is the panel's own navy, so
   nothing white ever shows through mid-transition */
html, body { background: var(--ink-0); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: #0b1524; pointer-events: none;
}
/* the scrim is redundant once the page physically moves */
body.mm-push .nav-scrim { opacity: 0 !important; }

@media (max-width: 1024px) {
  .nav.nav-r2 .nav-close { display: none; }
  body.mm-push .page-shell { transform: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-shell { transition: none; }
  body.mm-push .page-shell { transform: translateY(var(--mm-h, 0px)); border-radius: 0; }
}

/* Hero sits under the fixed bar: both the pull-up and the first content row are
   derived from --nav-h, so the meta row can never land inside the bar. */
.hero { margin-top: 0; }
.hero-content { padding-top: calc(var(--nav-h) + 40px); }

/* Rail hover: text colour only — no plate, no travelling rule */
.nav.nav-r2 .nav-item:hover { background: transparent; color: var(--beacon-hot); }
.nav.nav-r2 .nav-item.is-active { color: var(--beacon-hot); }
.nav.nav-r2 .nav-items .nav-underline { display: none; }


/* ═══════════════════════════════════════════════════════════════
   001 / WHAT WE DO — two-column masthead, scroll reveal, row hover
   Copy and type scale unchanged; this is layout and interaction only.
   Content is visible by default: the script arms the hidden state, so the
   section still reads with JavaScript off.
   ═══════════════════════════════════════════════════════════════ */
/* two columns, each its own stack — a shared grid row would inflate the gap
   under the eyebrow by the headline's extra height */
.shome-head {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.shome-head-l { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 38px; align-items: flex-start; }
.shome-head-r { grid-column: 6 / 13; display: flex; flex-direction: column; gap: 38px; align-items: flex-end; }
.shome-head .shome-eyebrow { margin: 0; }
.shome-title-mask { overflow: hidden; text-align: right; align-self: stretch; }
.shome-head .shome-title { margin: 0; }
.shome-head .shome-sub { max-width: 34ch; }
/* the shared right edge: headline, CTA and every row divider end on the
   container's content edge */
.srows { margin-top: 76px; }

/* dividers become pseudo-elements so they can draw in and thicken on hover */
.srow { border-top: 0; cursor: pointer; }
.srow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line); transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), height .25s ease-out, background-color .25s ease-out;
}
.srow:last-child { border-bottom: 0; }
.srow:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}

/* hover / focus: no fill. The hovered row is framed by its two dividers going
   darker and heavier while every other divider drops back. */
.srow { transition: none; }
.srow-title { transition: transform .3s ease-out, color .2s ease; }
.srow::before, .srow:last-child::after { opacity: 1; transition: transform .6s cubic-bezier(.16,1,.3,1), height .3s ease-out, background-color .3s ease-out, opacity .3s ease-out; }

.srows:hover .srow::before,
.srows:hover .srow:last-child::after,
.srows:focus-within .srow::before,
.srows:focus-within .srow:last-child::after { opacity: .4; }

.srows .srow:hover::before,
.srows .srow:hover + .srow::before,
.srows .srow:hover:last-child::after,
.srows .srow:focus-visible::before,
.srows .srow:focus-visible + .srow::before,
.srows .srow:focus-visible:last-child::after {
  opacity: 1; height: 1.5px; background: rgba(17, 32, 58, 0.42);
}

/* only the pillar name travels */
.srow:hover .srow-title, .srow:focus-visible .srow-title { transform: translateX(12px); color: var(--bone); }
.srow:focus-visible { outline: 2px solid var(--beacon); outline-offset: 4px; }

/* the arrow shares the pillar name's baseline rather than centring in the row */
.srow-arrow { align-self: baseline; transform: translateX(0); transition: opacity .3s ease-out, transform .3s ease-out; }
.srow-title { align-self: baseline; }
.srow:hover .srow-arrow, .srow:focus-visible .srow-arrow { opacity: 1; transform: translateX(6px); }

/* armed = pre-reveal state, written by the script on load */
.shome.is-armed .shome-eyebrow { opacity: 0; }
.shome.is-armed .shome-title { transform: translateY(100%); }
.shome.is-armed .shome-sub,
.shome.is-armed .shome-all { opacity: 0; transform: translateY(var(--rise, 12px)); }
.shome.is-armed .srow { opacity: 0; transform: translateY(var(--rise, 16px)); }
.shome.is-armed .srow::before,
.shome.is-armed .srow:last-child::after { transform: scaleX(0); }

.shome.is-armed .shome-eyebrow { transition: opacity .4s ease-out; }
.shome.is-armed .shome-title { transition: transform .8s cubic-bezier(.16, 1, .3, 1) .1s; }
.shome.is-armed .shome-sub,
.shome.is-armed .shome-all { transition: opacity .5s ease-out .25s, transform .5s ease-out .25s; }
.shome.is-armed .srow { transition: opacity .5s ease-out var(--d, 0ms), transform .5s ease-out var(--d, 0ms); }
.shome.is-armed .srow::before,
.shome.is-armed .srow:last-child::after { transition: transform .6s cubic-bezier(.16, 1, .3, 1) var(--dd, 0ms); }

.shome.is-armed.is-in .shome-eyebrow { opacity: 1; }
.shome.is-armed.is-in .shome-title { transform: translateY(0); }
.shome.is-armed.is-in .shome-sub,
.shome.is-armed.is-in .shome-all { opacity: 1; transform: translateY(0); }
.shome.is-armed.is-in .srow { opacity: 1; transform: translateY(0); }
.shome.is-armed.is-in .srow::before,
.shome.is-armed.is-in .srow:last-child::after { transform: scaleX(1); }


@media (max-width: 767px) {
  /* stack order: eyebrow, headline, subline, CTA — the wrappers dissolve so the
     four elements can be ordered directly */
  .shome-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .shome-head-l, .shome-head-r { display: contents; }
  .shome-head .shome-eyebrow { order: 1; }
  .shome-title-mask { order: 2; text-align: left; align-self: stretch; }
  .shome-head .shome-sub { order: 3; max-width: none; }
  .shome-head .shome-all { order: 4; }
  .shome-head .shome-eyebrow { padding-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .shome.is-armed .shome-eyebrow,
  .shome.is-armed .shome-sub,
  .shome.is-armed .shome-all,
  .shome.is-armed .srow { opacity: 1 !important; transform: none !important; transition: none !important; }
  .shome.is-armed .shome-title { transform: none !important; transition: none !important; }
  .shome.is-armed .srow::before,
  .shome.is-armed .srow:last-child::after { transform: scaleX(1) !important; transition: none !important; }
  .srow:hover .srow-title, .srow:focus-visible .srow-title { transform: none !important; }
  .srow-arrow { transition: opacity .3s ease-out; }
}

/* ═══════ PARTNERS AND CLIENTS — placeholder logo grid ═══════ */
.pcred { padding: clamp(96px, 12vw, 160px) 0; background: var(--ink-0); border-top: 1px solid var(--line); }
.pcred-head { display: flex; flex-direction: column; gap: 16px; max-width: 46ch; }
.pcred-title { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; color: var(--bone); }
.pcred-sub { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--bone-dim); }
.pcred-grid {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.pcred-cell {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  color: var(--bone-soft);
}
.pcred-marquee {
  margin-top: clamp(48px, 6vw, 80px);
  position: relative; overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.pcred-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: pcred-scroll 46s linear infinite; }
.pcred-marquee:hover .pcred-track { animation-play-state: paused; }
@keyframes pcred-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.pcred-item {
  flex: 0 0 auto;
  width: 220px; height: 116px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,0.02);
  transition: border-color 240ms ease, transform 240ms ease, background 240ms ease;
}
.pcred-item:hover { border-color: var(--bone-soft); transform: translateY(-3px); background: rgba(255,255,255,0.05); }
.pcred-item img { max-width: 62%; max-height: 46px; width: auto; height: auto; object-fit: contain; opacity: 0.86; transition: opacity 240ms ease; }
.pcred-item:hover img { opacity: 1; }
.pcred-item img.pcred-img-wide { max-width: 82%; max-height: 34px; }
.pcred-note { display: block; margin-top: 20px; color: var(--bone-soft); }
@media (prefers-reduced-motion: reduce) { .pcred-track { animation: none; } }
@media (max-width: 880px) { .pcred-item { width: 168px; height: 96px; } .pcred-item img { max-height: 38px; } }

/* ═══════════════════════════════════════════════════════════════
   005 / CONTACT — split band, image left, dark panel right
   Full-bleed; the two halves butt together with no divider or radius.
   ═══════════════════════════════════════════════════════════════ */
.ctasplit {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 720px;
  background: #0b1524;
  position: relative; isolation: isolate;
  border-top: 1px solid var(--line);
}
.ctasplit-media { position: relative; overflow: hidden; background: var(--ink-2); }
.ctasplit-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1);
  transition: transform 1.2s ease-out;
}
.ctasplit.is-armed .ctasplit-img { transform: scale(1.06); }
.ctasplit.is-armed.is-in .ctasplit-img { transform: scale(1); }
.ctasplit-flag { position: absolute; left: 16px; bottom: 16px; z-index: 2; max-width: calc(100% - 32px); }

.ctasplit-panel {
  display: flex; align-items: center;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 72px);
  padding-left: 12%;
  /* texture only, never a wireframe */
  background-image:
    linear-gradient(to right, rgba(251,250,245,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(251,250,245,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
}
.ctasplit-text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ctasplit-eyebrow { color: rgba(251,250,245,0.55); }
.ctasplit-title {
  font-size: clamp(32px, 4.4vw, 64px); line-height: 1.02; font-weight: 600;
  letter-spacing: -0.03em; color: #fbfaf5; max-width: 18ch; text-align: left;
}
.ctasplit-sub {
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55;
  color: rgba(251,250,245,0.66); max-width: 45ch;
}

/* label + arrow over an underline; hover grows a filled pill from the left */
.pillcta {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px; margin: 10px 0 0 -20px;
  color: #fbfaf5; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color .18s linear .27s;              /* flips at 60% of the fill */
}
.pillcta-fill {
  position: absolute; inset: 0; z-index: 0; border-radius: 999px;
  background: var(--ink-0);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pillcta-label, .pillcta-arrow { position: relative; z-index: 1; }
.pillcta-arrow { transition: transform .3s ease-out; }
.pillcta-rule {
  position: absolute; left: 20px; right: 20px; bottom: 8px; z-index: 1; height: 1px;
  background: currentColor; opacity: .4;
  transition: opacity .15s linear;
}
.pillcta:hover, .pillcta:focus-visible { color: #0b1524; }
.pillcta:hover .pillcta-fill, .pillcta:focus-visible .pillcta-fill { transform: scaleX(1); }
.pillcta:hover .pillcta-rule, .pillcta:focus-visible .pillcta-rule { opacity: 0; }
.pillcta:hover .pillcta-arrow, .pillcta:focus-visible .pillcta-arrow { transform: translateX(6px); }
.pillcta:focus-visible { outline: 2px solid var(--beacon); outline-offset: 6px; border-radius: 999px; }

/* reveal: text follows the image */
.ctasplit.is-armed .ctasplit-eyebrow,
.ctasplit.is-armed .ctasplit-title,
.ctasplit.is-armed .ctasplit-sub,
.ctasplit.is-armed .pillcta { opacity: 0; transform: translateY(16px); }
.ctasplit.is-armed .ctasplit-eyebrow { transition: opacity .5s ease-out .2s, transform .5s ease-out .2s; }
.ctasplit.is-armed .ctasplit-title { transition: opacity .5s ease-out .3s, transform .5s ease-out .3s; }
.ctasplit.is-armed .ctasplit-sub { transition: opacity .5s ease-out .4s, transform .5s ease-out .4s; }
.ctasplit.is-armed .pillcta { transition: opacity .5s ease-out .5s, transform .5s ease-out .5s; }
.ctasplit.is-armed.is-in .ctasplit-eyebrow,
.ctasplit.is-armed.is-in .ctasplit-title,
.ctasplit.is-armed.is-in .ctasplit-sub,
.ctasplit.is-armed.is-in .pillcta { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) {
  .ctasplit { grid-template-columns: 1fr; min-height: 0; }
  .ctasplit-media { aspect-ratio: 16 / 9; }
  .ctasplit-panel { padding: clamp(40px, 8vw, 64px) var(--gutter); }
  .ctasplit-title { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ctasplit.is-armed .ctasplit-img,
  .ctasplit.is-armed .ctasplit-eyebrow,
  .ctasplit.is-armed .ctasplit-title,
  .ctasplit.is-armed .ctasplit-sub,
  .ctasplit.is-armed .pillcta { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pillcta, .pillcta-fill, .pillcta-rule, .pillcta-arrow { transition: none !important; }
  .pillcta:hover .pillcta-fill, .pillcta:focus-visible .pillcta-fill { transform: scaleX(1); }
  .pillcta:hover .pillcta-arrow, .pillcta:focus-visible .pillcta-arrow { transform: none !important; }
}


/* ═══════ AUTONOMY · 001 "What we help you do" ═══════
   Two-column masthead: the headline holds the left field, the problem
   statement sits opposite it as a narrower measure. The nine capabilities
   run as a numbered 3×3 field on hairlines. */
.help { padding-top: clamp(72px, 9vh, 128px); padding-bottom: clamp(80px, 10vh, 140px); }
.help-head {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px clamp(48px, 6vw, 104px);
  align-items: start;
}
.help-head .mono-label { grid-column: 1 / -1; color: var(--beacon); }
.help-title {
  grid-column: 1; margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 68px); line-height: 1.02;
  font-weight: 600; letter-spacing: -0.035em; color: var(--bone);
  text-wrap: balance;
}
.help-lead { grid-column: 2; margin-top: 26px; display: grid; gap: 16px; max-width: 46ch; }
.help-lead p { font-size: 16.5px; line-height: 1.6; color: var(--bone-dim); text-wrap: pretty; }
.help-lead p:first-child { color: var(--bone); font-size: 18px; line-height: 1.5; }

.helpgrid {
  list-style: none; margin: clamp(56px, 7vh, 96px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(32px, 4vw, 72px);
  counter-reset: none;
}
.helpgrid-item {
  display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; align-items: start;
  padding: 22px 0 24px; border-top: 1px solid var(--line);
  transition: border-color .3s ease;
}
.helpgrid-item:hover { border-top-color: var(--beacon); }
.helpgrid-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--beacon); padding-top: 4px; font-variant-numeric: tabular-nums;
}
.helpgrid-text {
  font-size: 16.5px; line-height: 1.45; color: var(--bone);
  letter-spacing: -0.005em; text-wrap: pretty;
}
@media (max-width: 1024px) {
  .help-head { grid-template-columns: 1fr; }
  .help-title, .help-lead { grid-column: 1; }
  .help-lead { margin-top: 20px; max-width: 62ch; }
  .helpgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .helpgrid { grid-template-columns: 1fr; }
  .helpgrid-item { padding: 18px 0 20px; }
}


/* ═══════ AUTONOMY · Use cases ═══════ */
.uc-grid {
  margin-top: clamp(44px, 5.5vh, 72px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 clamp(24px, 2.6vw, 44px);
}
.uc-group { border-top: 1px solid var(--line); padding-top: 18px; }
.uc-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--beacon); }
.uc-title {
  margin: 10px 0 16px; font-size: 16px; line-height: 1.25; font-weight: 600;
  letter-spacing: -0.01em; color: var(--bone); text-wrap: pretty;
}
.uc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.uc-list li {
  font-size: 14.5px; line-height: 1.4; color: var(--bone-dim);
  padding-left: 14px; position: relative;
}
.uc-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 1px; background: var(--beacon);
}
@media (max-width: 1180px) { .uc-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; } }
@media (max-width: 760px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .uc-grid { grid-template-columns: 1fr; } }


/* ═══════ UNDERWATER INTELLIGENCE · 002 Our solutions ═══════
   Three long-form solution blocks. Each opens with a numbered title and hook
   on one rule, then a two-column body (copy opposite an image), then its own
   list field. The buoy comparison runs as a real table. */
.sols .sol {
  margin-top: clamp(56px, 7vh, 96px);
  padding-top: clamp(28px, 3.5vh, 44px);
  border-top: 1px solid var(--bone);
}
.sol-top {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px clamp(40px, 5vw, 88px);
  align-items: start;
}
.sol-id { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sol-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--beacon); flex: none;
}
.sol-title {
  font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; color: var(--bone);
  margin: 0;
}
.sol-tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bone-soft);
  border: 1px solid var(--line); border-radius: 2px; padding: 4px 8px;
}
.sol-hook { font-size: 18px; line-height: 1.45; color: var(--bone-dim); text-wrap: pretty; max-width: 46ch; }

.sol-body {
  margin-top: clamp(28px, 3.5vh, 44px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px clamp(40px, 5vw, 88px);
  align-items: start;
}
.sol-copy { display: grid; gap: 16px; }
.sol-copy p { font-size: 16.5px; line-height: 1.6; color: var(--bone-dim); text-wrap: pretty; }
.sol-proof { border-left: 1px solid var(--beacon); padding-left: 16px; }
.sol-proof .mono-label { display: block; color: var(--beacon); margin-bottom: 6px; }
.sol-media { margin: 0; }
.sol-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--ink-2); border-radius: 2px;
}
.sol-media figcaption {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bone-soft);
}

.sol-table-wrap { margin-top: clamp(32px, 4vh, 52px); overflow-x: auto; }
.sol-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.sol-table caption {
  text-align: left; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--bone-soft);
  padding-bottom: 14px;
}
.sol-table th, .sol-table td {
  text-align: left; padding: 13px 16px 13px 0; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.35; color: var(--bone-dim);
}
.sol-table thead th {
  border-top: 0; border-bottom: 1px solid var(--bone);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bone); padding-bottom: 12px;
}
.sol-table tbody th { color: var(--bone); font-weight: 500; width: 34%; }
.sol-table tbody tr:hover th, .sol-table tbody tr:hover td { color: var(--bone); }

.sol-lists {
  margin-top: clamp(32px, 4vh, 52px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px clamp(40px, 5vw, 88px);
}
.sol-lists-3 { grid-template-columns: repeat(3, 1fr); }
.sol-list .mono-label { color: var(--beacon); }
.sol-list ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.sol-list li {
  font-size: 15px; line-height: 1.4; color: var(--bone-dim);
  padding-left: 14px; position: relative;
}
.sol-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 1px; background: var(--beacon);
}

@media (max-width: 1024px) {
  .sol-top, .sol-body { grid-template-columns: 1fr; }
  .sol-hook { max-width: 62ch; }
  .sol-lists, .sol-lists-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sol-lists, .sol-lists-3 { grid-template-columns: 1fr; }
}


/* Buoy elevations sit above the comparison columns — line art on the page
   ground, sized so the three read at their relative scale */
.sol-table-figs td { border-top: 0; padding: 0 16px 14px 0; vertical-align: bottom; }
.buoy-fig { display: block; height: 132px; }
.buoy-fig img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  display: block; mix-blend-mode: multiply;
}
.sol-table thead tr:last-child th { padding-top: 0; }
@media (max-width: 720px) { .buoy-fig { height: 104px; } }

/* Capability blocks carry no image, so the copy runs to a reading measure
   rather than sitting in a half-width grid cell */
.sol-copy-wide { margin-top: clamp(24px, 3vh, 36px); max-width: 74ch; }
.sol-copy-wide .sol-proof { color: var(--bone); font-size: 17px; }

/* ═══════ AUTONOMY · capability accordion ═══════
   The header is the whole click target: number, title, hook and a mark that
   rotates into a minus. The panel animates from a measured height, so the
   motion is smooth whatever the content length. */
.cap { padding-top: 0; }
.cap-head {
  width: 100%; display: grid; grid-template-columns: 34px 1fr 40px;
  gap: 0 14px; align-items: start; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: clamp(22px, 2.6vh, 30px) 0;
  transition: opacity .25s ease;
}
.cap-head .sol-num { padding-top: 6px; }
.cap-headings { display: grid; gap: 8px; }
.cap-head .sol-title { display: block; font-size: clamp(22px, 2.3vw, 32px); transition: color .25s ease; }
.cap-head .sol-hook { font-size: 16.5px; max-width: 58ch; }
.cap-head:hover .sol-title { color: var(--beacon); }
.cap-head:focus-visible { outline: 2px solid var(--beacon); outline-offset: 4px; }

.cap-mark { position: relative; width: 34px; height: 34px; margin-top: 2px; justify-self: end; }
.cap-mark::before, .cap-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--bone);
  transition: transform .38s cubic-bezier(.16,1,.3,1), background-color .25s ease;
}
.cap-mark::before { width: 15px; height: 1px; transform: translate(-50%, -50%); }
.cap-mark::after  { width: 1px; height: 15px; transform: translate(-50%, -50%); }
.cap.is-open .cap-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.cap-head:hover .cap-mark::before, .cap-head:hover .cap-mark::after { background: var(--beacon); }

.cap-panel { overflow: hidden; height: auto; transition: height .46s cubic-bezier(.16,1,.3,1); }
.cap.is-collapsed .cap-panel > * { opacity: 0; transform: translateY(-6px); }
.cap-panel > * { transition: opacity .3s ease .06s, transform .38s cubic-bezier(.16,1,.3,1) .06s; }
.cap-panel .sol-copy-wide { margin-top: 0; }
.cap-panel > *:last-child { padding-bottom: clamp(28px, 3.5vh, 44px); }
.cap.is-open .cap-head .sol-title { color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .cap-panel, .cap-panel > * { transition: none; }
}

/* Panel action button — the freed middle column of the Pilot Sites panel */
.nav.nav-r2 .mm-col-action { align-self: start; }
.nav.nav-r2 .mm-panel-btn {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 12px;
  padding: 14px 22px; border: 1px solid rgba(251,250,245,0.34); border-radius: 2px;
  color: #fbfaf5; font-family: var(--font-display); font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em; white-space: nowrap;
  transition: border-color .25s ease, color .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.nav.nav-r2 .mm-panel-btn svg { flex: none; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.nav.nav-r2 .mm-panel-btn:hover { color: var(--beacon-hot); border-color: var(--beacon-hot); }
.nav.nav-r2 .mm-panel-btn:hover svg { transform: translateX(4px); }

/* The aftermovie shows its poster frame while the file buffers, so the band
   never renders as a black box on a slow connection */
.about-figure--video { background: var(--ink-2); }
.about-figure--video video { background: transparent; object-fit: cover; }

/* Without the image half, the band runs full width and the text keeps the
   page's left margin instead of the old 12% inset from the midpoint */
.ctasplit-solo { grid-template-columns: 1fr; min-height: 520px; }
.ctasplit-solo .ctasplit-panel { padding-left: var(--gutter); }
.ctasplit-solo .ctasplit-text { margin: 0 auto; width: 100%; max-width: var(--container); }


/* ─── CASE STUDIES (pillar + pilot sites) ─────────────── */
.cstud {
  margin-top: clamp(40px, 5vh, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.cstud-card {
  background: var(--ink-0); display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: background .45s cubic-bezier(.22,1,.36,1);
}
.cstud-card:hover { background: var(--ink-1); }
.cstud-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, var(--line-soft) 11px 12px),
    var(--ink-2);
}
.cstud-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cstud-slot { color: var(--bone-soft); }
.cstud-body { padding: 26px clamp(20px, 2vw, 30px) 30px; display: grid; gap: 12px; align-content: start; }
.cstud-eyebrow { color: var(--beacon); }
.cstud-title {
  font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; color: var(--bone);
}
.cstud-desc { font-size: 15.5px; line-height: 1.55; color: var(--bone-dim); text-wrap: pretty; }
.cstud-cta { margin-top: 10px; color: var(--beacon); display: inline-flex; align-items: center; gap: 9px; }
.cstud-cta span { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.cstud-card:hover .cstud-cta span { transform: translateX(5px); }
.cstud-foot { margin-top: 22px; color: var(--bone-soft); }
@media (max-width: 900px) { .cstud { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .cstud-body { padding: 22px 20px 26px; gap: 10px; }
  .cstud-desc { font-size: 15px; }
  .cstud-media { aspect-ratio: 16 / 10; }
}

/* ─── TECHNOLOGIES TESTED (pilot sites) ───────────────── */
.techgrid {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.techcell { background: var(--ink-0); padding: 30px 28px; display: grid; gap: 10px; align-content: start; transition: background .3s ease; }
.techcell:hover { background: var(--ink-1); }
.techcell-n { color: var(--beacon); }
.techcell h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.techcell p { font-size: 15px; color: var(--bone-dim); line-height: 1.55; }
@media (max-width: 900px) { .techgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cstud-card, .cstud-cta span, .techcell { transition: none; }
}

.am-gallery-prog { display: none; }


/* ─── SOLUTIONS EXPLORER (underwater intelligence) ────── */
.solx { margin-top: clamp(48px, 6vh, 76px); display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
.solx-rail { display: flex; flex-direction: column; position: sticky; top: 118px; border-top: 1px solid var(--line); }
.solx-tab {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 14px;
  padding: 22px 0; text-align: left; cursor: pointer; color: var(--bone);
  position: relative;
}
.solx-tab::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--accent); transition: width .5s cubic-bezier(.22,1,.36,1);
}
.solx-tab.is-on::after { width: 100%; }
.solx-tab-n { color: var(--bone-soft); padding-top: 5px; transition: color .3s ease; }
.solx-tab.is-on .solx-tab-n { color: var(--accent); }
.solx-tab-body { display: grid; gap: 8px; }
.solx-tab-t {
  font-family: var(--font-display); font-size: 21px; line-height: 1.15;
  font-weight: 600; letter-spacing: -0.02em; color: var(--bone-dim);
  transition: color .3s ease;
}
.solx-tab.is-on .solx-tab-t, .solx-tab:hover .solx-tab-t { color: var(--bone); }
.solx-tab-h {
  font-size: 14.5px; line-height: 1.5; color: var(--bone-soft);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.solx-tab.is-on .solx-tab-h { max-height: 6.5em; opacity: 1; }

.solx-stage { min-height: 560px; }
.solx-panel { display: none; gap: clamp(26px, 3vh, 38px); }
.solx-panel.is-on { display: grid; }
.solx-panel.is-on { animation: solxIn .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes solxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.solx-media { margin: 0; }
.solx-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.solx-media figcaption {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bone-soft);
}
.solx-copy { display: grid; gap: 16px; max-width: 66ch; }
.solx-copy p { font-size: 17px; line-height: 1.6; color: var(--bone-dim); text-wrap: pretty; }
.solx-copy p:first-child:not(.sol-proof) { font-size: 18.5px; color: var(--bone); }
.solx-title {
  margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15;
  letter-spacing: -.01em; color: var(--bone);
}
.solx-subh { color: var(--bone-soft); margin: 0; }
.solx-copy p.solx-subh { font-size: 11px; }
.solx-tagline {
  display: inline-block; color: var(--accent);
  border: 1px solid var(--line); padding: 5px 9px;
}
.solx-chips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px clamp(28px, 3vw, 56px); }
.solx-chips-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.solx-chipgroup { display: grid; gap: 14px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.solx-chiplabel { color: var(--bone-soft); }
.solx-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.solx-chiplist li {
  font-size: 13.5px; line-height: 1.45; color: var(--bone-dim);
  min-width: 0; max-width: 100%; overflow-wrap: break-word;
  border: 1px solid var(--line); border-radius: 3px; padding: 9px 13px;
  background: var(--ink-0); transition: border-color .3s ease, color .3s ease;
}
.solx-chiplist li:hover { border-color: var(--accent); color: var(--bone); }

.solx-spec { border-top: 1px solid var(--line); }
.solx-spec > summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}
.solx-spec > summary::-webkit-details-marker { display: none; }
.solx-spec-t { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.solx-spec-h { color: var(--accent); }
.solx-spec[open] .solx-spec-h::after { content: none; }
.solx-spec[open] .solx-spec-h { color: var(--bone-soft); }

@media (max-width: 1024px) {
  .solx { grid-template-columns: 1fr; gap: 36px; }
  .solx-rail { position: static; }
  .solx-stage { min-height: 0; }
  .solx-chips, .solx-chips-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .solx-chiplist li { font-size: 13px; padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .solx-panel.is-on { animation: none; }
  .solx-tab::after, .solx-tab-n, .solx-tab-t, .solx-tab-h, .solx-chiplist li { transition: none; }
  .solx-tab-h { max-height: none; opacity: 1; }
}


/* ═════════════════════════════════════════════════════════════
   MOTION SYSTEM — acquisition
   Three easings, four durations. Content resolves, numbers settle,
   elements acquire, transitions sweep. Nothing else.
   ═════════════════════════════════════════════════════════════ */
:root {
  --ease-acquire: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-sweep:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-state: 260ms;
  --dur-reveal: 450ms;
  --dur-moment: 700ms;
  --line-hot: rgba(17,32,58,0.30);
}

/* ── Focus: visible everywhere, in the page's accent lane ── */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, var(--beacon));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Hover: an underline that wipes in from the left, on copy links only ── */
:where(p, li, figcaption, .pfaq-a, .psec-lead, .compare-foot, .advisory-foot,
       .bookflow-foot, .pfaq-foot, .cstud-foot, .deep-lead) a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-micro) var(--ease-settle);
}
:where(p, li, figcaption, .pfaq-a, .psec-lead, .compare-foot, .advisory-foot,
       .bookflow-foot, .pfaq-foot, .cstud-foot, .deep-lead) a:hover,
:where(p, li, figcaption, .pfaq-a, .psec-lead, .compare-foot, .advisory-foot,
       .bookflow-foot, .pfaq-foot, .cstud-foot, .deep-lead) a:focus-visible {
  background-size: 100% 1px;
}

/* ── Hover: cards get a brightened hairline, never a lift or a shadow ── */
.cstud-card, .techcell, .deliver-item, .glance-card, .compcard,
.team-card, .infra-card, .model-card, .process-step, .advisory-card {
  position: relative;
  transition: background var(--dur-state) var(--ease-settle),
              outline-color var(--dur-state) var(--ease-settle);
  outline: 1px solid transparent; outline-offset: -1px;
}
.cstud-card:hover, .techcell:hover, .deliver-item:hover, .glance-card:hover,
.compcard:hover, .team-card:hover, .infra-card:hover, .model-card:hover,
.process-step:hover, .advisory-card:hover {
  outline-color: var(--line-hot); z-index: 1;
}

/* ── Hover: the arrow on a CTA slides 4px, and that is the whole vocabulary ── */
.link-arrow span, .eng-cta svg, .cstud-cta span, .deep-cta span,
.btn-primary svg, .sitecard__cta span {
  transition: transform var(--dur-micro) var(--ease-settle);
}
.link-arrow:hover span, .link-arrow:focus-visible span,
.eng-cta:hover svg, .eng-cta:focus-visible svg,
.cstud-card:hover .cstud-cta span, .deep-cta:hover span,
.btn-primary:hover svg, .sitecard:hover .sitecard__cta span {
  transform: translateX(4px);
}

/* ── Numbers settle: a short scramble, then a lock ── */
[data-settle] { font-variant-numeric: tabular-nums; }
[data-settle].is-settling { color: var(--accent, var(--beacon)); }

/* ── Section entrances: 8px rise, opacity ramp, no stagger past 40ms ── */
[data-enter] {
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity 300ms linear, transform var(--dur-reveal) var(--ease-acquire);
  transition-delay: calc(var(--enter-i, 0) * 40ms);
}
[data-enter].is-in { opacity: 1; transform: none; }

/* ── Headings that do get a reveal are drawn, not turned on ── */
[data-draw] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-moment) var(--ease-acquire);
}
[data-draw].is-in { clip-path: inset(0 0 -0.15em 0); }

@media (prefers-reduced-motion: reduce) {
  [data-enter], [data-draw] {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
  [data-settle].is-settling { color: inherit; }
  .link-arrow span, .eng-cta svg, .cstud-cta span, .deep-cta span,
  .btn-primary svg, .sitecard__cta span { transition: none; }
}


/* ═════════════════════════════════════════════════════════════
   SIGNATURE 1 — homepage acquisition sequence
   One sonar sweep. The headline resolves out of the grain in its
   wake, the telemetry locks, the scroll cue draws itself last.
   Runs once per session. Any scroll cancels it to the resting state.
   ═════════════════════════════════════════════════════════════ */
.hero-grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero-sweep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; place-items: center; opacity: 0;
}
.hero-sweep-arm {
  width: 190vmax; height: 190vmax; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(74,147,230,0.30) 0deg, rgba(74,147,230,0.10) 12deg, transparent 34deg, transparent 360deg);
  transform: rotate(0deg);
}

/* pre-sequence resting state: the type is in the DOM and laid out, held
   behind a mask so it can resolve rather than fade */
.hero.is-acquiring .h1-acq {
  display: inline-block;
  opacity: 0; filter: blur(9px);
  clip-path: inset(0 100% 0 0);
}
.hero.is-acquiring .hero-sub,
.hero.is-acquiring .hero-top,
.hero.is-acquiring .hero-foot { opacity: 0; }
.hero.is-acquiring .hero-scroll { opacity: 0; }
.hero.is-acquiring .hero-tele-v { opacity: 0; }

/* the run */
.hero.is-acquired .hero-grain { animation: heroGrain 1100ms var(--ease-sweep) forwards; }
.hero.is-acquired .hero-sweep { animation: heroSweepFade 1100ms linear forwards; }
.hero.is-acquired .hero-sweep-arm { animation: heroSweep 1000ms var(--ease-sweep) forwards; }
.hero.is-acquired .h1-acq {
  animation: heroResolve 620ms var(--ease-acquire) forwards;
  animation-delay: calc(180ms + var(--acq-i, 0) * 130ms);
}
.hero.is-acquired .hero-top { animation: heroSoftIn 400ms var(--ease-acquire) 120ms forwards; }
.hero.is-acquired .hero-sub { animation: heroSoftIn 400ms var(--ease-acquire) 520ms forwards; }
.hero.is-acquired .hero-tele-v { animation: heroSoftIn 260ms linear 620ms forwards; }
.hero.is-acquired .hero-foot { animation: heroSoftIn 400ms var(--ease-acquire) 760ms forwards; }
.hero.is-acquired .hero-scroll { animation: heroCue 320ms var(--ease-acquire) 900ms forwards; }

@keyframes heroSweep { to { transform: rotate(360deg); } }
@keyframes heroSweepFade { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes heroGrain { 0% { opacity: 0; } 15% { opacity: .5; } 100% { opacity: .12; } }
@keyframes heroResolve {
  from { opacity: 0; filter: blur(9px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; filter: blur(0); clip-path: inset(0 -0.1em 0 0); }
}
@keyframes heroSoftIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroCue { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* cancelled, or never run: everything at its resting value, no transition */
.hero.is-settled .h1-acq,
.hero.is-settled .hero-top, .hero.is-settled .hero-sub,
.hero.is-settled .hero-foot, .hero.is-settled .hero-scroll,
.hero.is-settled .hero-tele-v {
  animation: none !important; opacity: 1 !important;
  filter: none !important; clip-path: none !important; transform: none !important;
}
.hero.is-settled .hero-grain { animation: none !important; opacity: .12; }
.hero.is-settled .hero-sweep { animation: none !important; opacity: 0; }

/* telemetry readout */
.hero-tele {
  margin: clamp(26px, 3vw, 40px) 0 0;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(251,250,245,0.18);
  max-width: 620px;
}
.hero-tele-cell {
  flex: 1 1 0; min-width: 128px;
  padding: 14px 22px 0 0;
  display: grid; gap: 7px;
}
.hero-tele .mono-label { color: rgba(251,250,245,0.55); }
.hero-tele-v {
  margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 27px);
  font-weight: 600; letter-spacing: -0.02em; color: #fbfaf5;
  font-variant-numeric: tabular-nums;
}
.hero-tele-cell--wide {
  flex: 1 1 100%; min-width: 0;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid rgba(251,250,245,0.18);
}
.hero-tele .hero-tele-names {
  margin: 0; color: rgba(251,250,245,0.82);
  font-size: 11px; line-height: 1.75; letter-spacing: 0.04em;
}


@media (prefers-reduced-motion: reduce) {
  .hero-grain, .hero-sweep { display: none; }
  .hero.is-acquiring .h1-acq, .hero.is-acquiring .hero-sub,
  .hero.is-acquiring .hero-top, .hero.is-acquiring .hero-foot,
  .hero.is-acquiring .hero-scroll, .hero.is-acquiring .hero-tele-v {
    opacity: 1 !important; filter: none !important; clip-path: none !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   SIGNATURE 2 — the water column
   The three systems are stations on a descent. Ambient light, water
   colour and particulate deepen from station to station, and the depth
   is written down as well as felt.
   ═════════════════════════════════════════════════════════════ */
.solx { grid-template-columns: minmax(0, 340px) 74px minmax(0, 1fr); }

.solx-scale { position: sticky; top: 118px; height: 420px; display: flex; gap: 10px; }
.solx-scale-track {
  position: relative; width: 1px; margin-left: 12px; flex: none;
  background: var(--line);
}
.solx-scale-fill {
  position: absolute; left: 0; top: 0; width: 1px;
  background: linear-gradient(180deg, var(--teal-lift), #123a6b);
  height: var(--depth-h, 12%);
  transition: height var(--dur-state) var(--ease-settle);
}
.solx-scale-marker {
  position: absolute; left: 50%; top: var(--depth-h, 12%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-0); border: 1px solid var(--accent);
  transform: translate(-50%, -50%);
  transition: top var(--dur-state) var(--ease-settle);
}
.solx-scale-ticks { display: flex; flex-direction: column; justify-content: space-between; }
.solx-tick { display: grid; grid-template-columns: 8px auto; align-items: center; gap: 0 8px; }
.solx-tick i { width: 6px; height: 1px; background: var(--line); }
.solx-tick b {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-dim); font-weight: 400;
}
.solx-tick em {
  grid-column: 2; font-style: normal;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bone-soft);
}

/* the depth is stated, not only implied */
.solx-depthline {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; color: var(--bone-dim);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.solx-depthline .mono-label { color: var(--accent); }

/* ambient light and water colour over the station's own image */
.solx-media { position: relative; }
.solx-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transition: background var(--dur-moment) var(--ease-acquire),
              opacity var(--dur-moment) var(--ease-acquire);
}
.solx[data-depth="1"] .solx-media::after {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(180deg, rgba(31,144,121,0.10), rgba(18,58,107,0.06));
}
.solx[data-depth="2"] .solx-media::after {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(18,90,120,0.20), rgba(10,32,66,0.34)),
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,0.30), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255,255,255,0.22), transparent 100%),
    radial-gradient(2px 2px at 44% 72%, rgba(255,255,255,0.18), transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 62%, rgba(255,255,255,0.24), transparent 100%);
}
.solx[data-depth="3"] .solx-media::after {
  background:
    linear-gradient(180deg, rgba(8,26,54,0.42), rgba(4,14,32,0.62)),
    radial-gradient(2px 2px at 18% 26%, rgba(255,255,255,0.26), transparent 100%),
    radial-gradient(1.5px 1.5px at 54% 44%, rgba(255,255,255,0.20), transparent 100%),
    radial-gradient(2.5px 2.5px at 76% 30%, rgba(255,255,255,0.16), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 78%, rgba(255,255,255,0.22), transparent 100%),
    radial-gradient(2px 2px at 88% 70%, rgba(255,255,255,0.18), transparent 100%);
}

/* the section ground deepens a touch with the descent, well short of
   anything that would touch text contrast */
.solx-stage {
  transition: background var(--dur-moment) var(--ease-acquire);
  padding: 0;
}
.solx[data-depth="2"] .solx-stage { background: linear-gradient(180deg, rgba(18,58,107,0.035), transparent 60%); }
.solx[data-depth="3"] .solx-stage { background: linear-gradient(180deg, rgba(10,32,66,0.06), transparent 70%); }

@media (max-width: 1024px) {
  .solx { grid-template-columns: 1fr; }
  .solx-scale { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .solx-scale-fill, .solx-scale-marker, .solx-media::after, .solx-stage { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HARDENING — no visual redesign, only fixes that keep the
   existing layout inside a phone viewport (no sideways page scroll,
   no clipped words, tappable controls).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  html, body { max-width: 100%; overflow-x: clip; }

  /* grid/flex children may not force their track wider than the phone */
  .container > *, main *[class*="-grid"] > * { min-width: 0; }
  .gallery-grid > .gallery-img { min-width: 0; }

  /* long unbroken strings (emails, URLs, model names) wrap instead of clip */
  p, li, dd, dt, td, th, figcaption, blockquote,
  h1, h2, h3, h4, h5, h6, a { overflow-wrap: break-word; }

  /* wide data tables scroll on their own instead of stretching the page */
  table { max-width: 100%; }

  /* comfortable tap targets for inline controls and form fields */
  button, .btn, input, select, textarea { min-height: 44px; }
  input, select, textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
  img, video, svg, iframe { max-width: 100%; }
}

/* ═══════ WHAT WE DO — image reveal on hover (visible by default on mobile) ═══════ */
.srow-media {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .45s cubic-bezier(.16,1,.3,1), opacity .3s ease, margin-top .45s cubic-bezier(.16,1,.3,1);
}
.srow-media img {
  display: block; width: 100%; height: clamp(180px, 22vw, 300px);
  object-fit: cover; border: 1px solid var(--line); border-radius: 6px 6px 0 0;
}
.srow-media-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-soft);
  padding: 7px 10px;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px;
}
.srow:hover .srow-media, .srow:focus-visible .srow-media { max-height: 380px; opacity: 1; margin-top: 22px; }
@media (max-width: 880px) {
  .srow-media { max-height: 380px; opacity: 1; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .srow-media { transition: none; } }

/* ═══════ PARTNERS — static logo grid ═══════ */
.pcred-head-wide { max-width: 74ch; }
.pcred-logos {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  justify-content: center;
}
.pcred-logos .pcred-item { width: auto; height: 116px; min-width: 0; }
/* 12 logos: even 4 x 3 grid */
.pcred-logos .pcred-item img.pcred-img-dim { filter: brightness(0.6); }

@media (max-width: 1000px) {
  .pcred-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
}

@media (max-width: 600px) {
  .pcred-logos { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pcred-logos .pcred-item { height: 96px; }
}


/* ═══════ WHAT'S INCLUDED — single column ═══════ */
.compare-grid-single { grid-template-columns: 1fr; }

/* ═══════ OUR EXPERTS ═══════ */
.exp {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px);
}
.exp-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: border-color .25s ease, transform .25s ease;
}
.exp-card:hover { border-color: var(--bone-soft); transform: translateY(-3px); }
.exp-media {
  position: relative; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-1); border-bottom: 1px solid var(--line);
}
.exp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-slot { color: var(--bone-soft); }
.exp-body { padding: 22px clamp(18px, 1.8vw, 26px) 26px; display: grid; gap: 10px; align-content: start; }
.exp-name { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.exp-role { color: var(--accent); }
.exp-desc { font-size: 14.5px; line-height: 1.55; color: var(--bone-dim); }
.exp-link { color: var(--bone); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.exp-link:hover { color: var(--beacon, var(--accent)); }
@media (max-width: 880px) { .exp { grid-template-columns: 1fr; } }

/* ═══════ SITE CARD — AI concept render strip ═══════ */
.sitecard__note {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--bone-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 9px;
}

/* Tiny concept-render label on dark page heroes */
.page-hero.has-media .hero-media-note,
.deep-media .hero-media-note {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: 4px 8px;
  pointer-events: none;
}
@media (max-width: 600px) { .page-hero.has-media .hero-media-note, .deep-media .hero-media-note { right: 12px; bottom: 10px; font-size: 9px; } }

/* Concept-render label on site detail heroes */
.site-hero .hero-media-note {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5) !important;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: 4px 8px;
  pointer-events: none;
}
@media (max-width: 600px) { .site-hero .hero-media-note { right: 12px; bottom: 10px; font-size: 9px; } }

/* RIaaS definition strip */
.ri-def { border-bottom: 1px solid var(--line); padding: 46px 0 52px; }
.ri-def-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ri-def-key { padding-top: 6px; }
.ri-def-lead { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.32; letter-spacing: -0.01em; max-width: 30ch; margin: 0 0 30px; }
.ri-def-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ri-def-part { border-top: 1px solid var(--line); padding-top: 16px; }
.ri-def-num { display: block; margin-bottom: 10px; }
.ri-def-text { font-size: 16px; line-height: 1.62; max-width: 46ch; margin: 0; }
@media (max-width: 760px) {
  .ri-def-row { grid-template-columns: 1fr; gap: 14px; }
  .ri-def-pair { grid-template-columns: 1fr; gap: 22px; }
  .ri-def-lead { margin-bottom: 24px; }
}