/* NUMENOR MARITIME — descent
   One continuous camera. Type is secondary to the image. */

:root {
  --ink: #f2f4f6;
  --ink-dim: rgba(242, 244, 246, 0.62);
  --ink-faint: rgba(242, 244, 246, 0.34);
  --accent: #8fd8d0;            /* restrained cold cyan, used sparingly */
  --accent-soft: rgba(143, 216, 208, 0.55);
  --abyss: #02050a;
  --pad-x: clamp(24px, 4.2vw, 72px);
  --pad-y: clamp(20px, 3.2vh, 40px);
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { background: var(--abyss); color: var(--ink); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 118, "wght" 240;
  font-weight: 240;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  background: var(--abyss);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
.mono { font-family: var(--font-mono); font-weight: 300; font-variation-settings: normal; }

/* ------------------------------------------------------------------ scroll track */
.track { position: relative; width: 100%; height: 1800vh; pointer-events: none; }

/* ------------------------------------------------------------------ stage */
.stage {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: var(--abyss);
}
.film {
  position: absolute; left: 50%; top: 50%;
  width: 100vw; height: 100vh;
  min-width: 177.78vh; min-height: 56.25vw; /* cover 16:9 */
  transform: translate(-50%, -50%) scale(var(--film-scale, 1));
  transform-origin: center center;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}
.haze {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(255, 226, 190, 0.34) 0%, rgba(255, 214, 176, 0.16) 45%, rgba(255, 200, 160, 0) 100%),
    linear-gradient(180deg, rgba(255, 220, 184, 0.14) 0%, rgba(255, 206, 168, 0.08) 60%, rgba(255, 196, 160, 0.05) 100%);
  mix-blend-mode: screen;
  opacity: var(--warm, 0);
}
.film { filter: var(--film-filter, none); }
.hold { opacity: 0; }   /* painted right above the film, below every grading layer */
.grade {
  position: absolute; inset: 0; pointer-events: none;
  /* Light survives only near the camera: the water column above and the edges fall to black. */
  background:
    radial-gradient(80% 62% at 50% 64%, rgba(2,5,10,0) 28%, rgba(2,5,10,0.55) 70%, rgba(2,5,10,0.92) 100%),
    linear-gradient(180deg, rgba(2,5,10,0.62) 0%, rgba(2,5,10,0.22) 42%, rgba(2,5,10,0.10) 70%, rgba(2,5,10,0.30) 100%);
  opacity: var(--grade, 0);
}
.atmos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.grain {
  position: absolute; inset: -64px; pointer-events: none;
  background-image: var(--grain-tile, none);
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: var(--grain, 0);
}
.ops { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.abyss {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 58% at 50% 72%, rgba(2,5,10,0) 22%, rgba(2,5,10,0.62) 62%, rgba(2,5,10,0.97) 100%);
  opacity: var(--veil, 0);
}
.scrim {
  position: absolute; left: 0; right: 0; top: 0; height: 22vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 100%);
  opacity: var(--scrim, 1);
}

/* ------------------------------------------------------------------ skip link */
.skip { position: fixed; left: var(--pad-x); top: -60px; z-index: 200; padding: 10px 14px; background: var(--abyss); color: var(--ink);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(242,244,246,0.4); transition: top 200ms var(--ease); }
.skip:focus { top: var(--pad-y); outline: none; }

/* ------------------------------------------------------------------ loader */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(120% 100% at 50% 50%, rgba(2,5,10,0.35) 0%, rgba(2,5,10,0.72) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity 1100ms var(--ease), visibility 0s linear 1100ms;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark img { width: clamp(180px, 22vw, 300px); height: auto; opacity: 0.92; }
.loader__bar { width: clamp(180px, 22vw, 300px); height: 1px; background: rgba(255,255,255,0.14); position: relative; overflow: hidden; }
.loader__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--ink); transition: width 200ms linear; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad-y) var(--pad-x);
  pointer-events: none;
  background: rgba(2,5,10,0);
  transition: background 420ms var(--ease);
}
.nav--solid { background: var(--abyss); }
.nav--solid::after {
  content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0; height: 1px;
  background: rgba(242,244,246,0.10);
}
.nav__brand, .nav__cta { pointer-events: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 44px); }
.nav__cta--quiet { color: var(--ink-dim); }
.nav__cta--quiet::after { opacity: 0.25; }
.nav__cta--quiet:hover { color: var(--ink); }
.nav__brand img {
  width: clamp(150px, 14vw, 220px); height: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)) drop-shadow(0 6px 22px rgba(0,0,0,0.28));
}
.nav__cta {
  position: relative;
  font-size: 10.5px; letter-spacing: 0.26em; font-variation-settings: "wdth" 120, "wght" 360;
  color: var(--ink);
  padding: 10px 0 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 4px 18px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.nav__cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor; opacity: 0.45; transform: scaleX(1); transform-origin: left;
  transition: opacity 500ms var(--ease);
}
.nav__cta:hover::after { opacity: 1; }
.nav__cta:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 6px; }

/* ------------------------------------------------------------------ depth HUD */
.hud {
  position: fixed; right: var(--pad-x); top: 50%; transform: translateY(-50%);
  z-index: 25; pointer-events: none;
  display: grid; grid-template-columns: auto; align-items: stretch;
  height: min(56vh, 560px);
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  opacity: var(--hud, 1);
}
.hud__rail { position: relative; width: 26px; height: 100%; }
.hud__ticks { position: absolute; inset: 0 0 0 auto; width: 10px; }
.hud__ticks i {
  position: absolute; right: 0; height: 1px; background: currentColor; opacity: 0.28;
  width: 5px;
}
.hud__ticks i.major { width: 12px; opacity: 0.6; }

.hud__cursor {
  position: absolute; right: -4px; top: 0; width: 18px; height: 1px; background: var(--ink);
  transform: translateY(var(--cursor, 0px));
  will-change: transform;
}
.hud__cursor i {
  position: absolute; right: -6px; top: -2px; width: 5px; height: 5px;
  background: var(--accent); opacity: 0.9; transform: rotate(45deg);
}
.hud__zones { position: absolute; left: -92px; top: 0; bottom: 0; width: 80px; }
.hud__zone {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 8.5px; letter-spacing: 0.24em; font-variation-settings: "wdth" 122, "wght" 300;
  color: var(--ink-faint); text-align: right; white-space: nowrap;
  transition: color 800ms var(--ease);
}
.hud__zone.is-active { color: var(--ink); }
.hud__readout { display: none; }

/* Readout under the rail, absolutely positioned relative to the HUD box */
.hud::after { content: none; }
.hud__readout {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
  position: absolute; right: 0; top: calc(100% + 18px);
  gap: 6px;
}
.hud__depth { font-size: 22px; letter-spacing: 0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hud__depth small { font-size: 10px; letter-spacing: 0.18em; margin-left: 6px; opacity: 0.7; }
.hud__meta { display: flex; gap: 10px; align-items: center; font-size: 8.5px; letter-spacing: 0.18em; color: var(--ink-faint); white-space: nowrap; }
.hud__sep { width: 1px; height: 8px; background: currentColor; opacity: 0.6; }

/* ------------------------------------------------------------------ copy */
.copy { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.cue {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x);
  opacity: 0; visibility: hidden;
  transform: translate3d(0, var(--cue-y, 0px), 0);
  will-change: opacity, transform;
}
.cue.is-live { visibility: visible; }
.cue > * { margin: 0; }
.cue, .copy, .hud, .nav, .brief { color: var(--ink); }

.eyebrow {
  font-size: 10.5px; letter-spacing: 0.34em; color: var(--ink-dim);
  font-variation-settings: "wdth" 122, "wght" 340;
  margin-bottom: clamp(18px, 2.6vh, 30px) !important;
}
.eyebrow--after { margin: clamp(26px, 4vh, 44px) 0 0 0 !important; }

.h {
  color: var(--ink);
  text-transform: uppercase; line-height: 1.08;
  font-variation-settings: "wdth" 118, "wght" 220;
  letter-spacing: var(--track, 0.06em);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 40px rgba(0,0,0,0.25);
  text-wrap: balance;
}
.h--xl { font-size: clamp(26px, 3.6vw, 54px); }
.h--lg { font-size: clamp(22px, 2.9vw, 44px); }
.h--md { font-size: clamp(18px, 2.2vw, 32px); letter-spacing: var(--track, 0.1em); }
.h--accent { color: var(--ink); margin-top: clamp(14px, 2vh, 22px) !important; }
.h--accent::before {
  content: ""; display: block; width: 28px; height: 1px; background: var(--accent); opacity: 0.8;
  margin: 0 auto clamp(14px, 2vh, 22px);
}

.pillars {
  margin-top: clamp(22px, 3.4vh, 40px) !important;
  font-size: 10.5px; letter-spacing: 0.3em; color: var(--ink-dim);
  font-variation-settings: "wdth" 122, "wght" 320;
}
.pillars i { font-style: normal; margin: 0 0.6em; color: var(--accent-soft); }

.cue--surface { justify-content: flex-end; padding-bottom: clamp(72px, 12vh, 140px); }
.cue--center { align-items: center; text-align: center; }
.cue--left { align-items: flex-start; }
.cue--left .line { font-size: clamp(15px, 1.35vw, 20px); letter-spacing: 0.06em; color: var(--ink); font-variation-settings: "wdth" 112, "wght" 260; }
.cue--left .line--delay { margin-top: 0.9em !important; color: var(--ink-dim); }

.cue--bright .h { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 28px rgba(0,0,0,0.55); }
.cue--stack .h { opacity: 0; transform: translate3d(0, 10px, 0); transition: none; color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 28px rgba(0,0,0,0.55); }
.cue--stack .h + .h { margin-top: 0.75em !important; }

.cue--cap { justify-content: flex-end; align-items: flex-start; padding-bottom: clamp(80px, 14vh, 160px); }
.cue--cap-b, .cue--cap-d { align-items: flex-end; text-align: right; justify-content: center; padding-right: calc(var(--pad-x) + 200px); }
.cue--cap-c { justify-content: center; }
.cap-index { font-size: 9px; letter-spacing: 0.3em; color: var(--accent-soft); margin-bottom: 14px !important; }
.cap {
  color: var(--ink);
  text-transform: uppercase; font-size: clamp(16px, 1.75vw, 26px); line-height: 1.18;
  letter-spacing: 0.14em; font-variation-settings: "wdth" 120, "wght" 240;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.cue--hero { align-items: center; text-align: center; }
.cta {
  pointer-events: auto;
  margin-top: clamp(22px, 3.6vh, 40px) !important;
  font-size: 10.5px; letter-spacing: 0.3em; font-variation-settings: "wdth" 120, "wght" 380;
  padding: 14px 26px; border: 1px solid rgba(242,244,246,0.32);
  color: var(--ink); transition: border-color 600ms var(--ease), background-color 600ms var(--ease);
}
.cta:hover { border-color: rgba(242,244,246,0.85); background: rgba(242,244,246,0.04); }
.cta:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 4px; }

/* ------------------------------------------------------------------ scroll hint */
.hint {
  position: fixed; left: 50%; bottom: calc(var(--pad-y) + 4px); transform: translateX(-50%);
  z-index: 20; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 8.5px; letter-spacing: 0.3em; color: var(--ink-dim);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  opacity: var(--hint, 1);
}
.hint i { width: 1px; height: 34px; background: linear-gradient(180deg, var(--ink), transparent); opacity: 0.6; animation: hint 3.2s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ------------------------------------------------------------------ capabilities (below the film) */
.brief {
  position: relative; z-index: 15;
  background: var(--abyss);
  color: var(--ink);
  padding: calc(var(--nav-h, 96px) + clamp(56px, 9vh, 112px)) var(--pad-x) 0;
}
.brief::before {
  /* the film's darkness continues into the page; no hard edge between the acts */
  content: ""; position: absolute; left: 0; right: 0; top: -26vh; height: 26vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,5,10,0) 0%, rgba(2,5,10,0.85) 70%, var(--abyss) 100%);
}
.brief__head { margin-bottom: clamp(64px, 10vh, 120px); max-width: 60ch; }
.brief__head .brief__eyebrow { margin-bottom: 18px; }
.brief__company {
  margin: 0; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.35; letter-spacing: 0.02em; color: var(--ink);
  font-variation-settings: "wdth" 110, "wght" 240; text-wrap: balance;
}
.brief__eyebrow--section { margin-bottom: clamp(28px, 4vh, 48px) !important; }
.brief__inner { max-width: 1240px; margin: 0 auto; }
.brief__eyebrow { font-size: 9.5px; letter-spacing: 0.32em; color: var(--ink-dim); margin: 0 0 clamp(40px, 6vh, 72px); }
.brief__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vh, 96px) clamp(40px, 6vw, 120px);
}
.brief__list > li { position: relative; }
.brief__index { display: block; font-size: 9px; letter-spacing: 0.3em; color: var(--accent-soft); margin-bottom: 20px; }
.brief__title {
  margin: 0 0 18px; text-transform: uppercase;
  font-size: clamp(17px, 1.65vw, 24px); line-height: 1.18; letter-spacing: 0.14em;
  font-variation-settings: "wdth" 120, "wght" 260; font-weight: 260;
}
.brief__line {
  margin: 0; max-width: 48ch;
  font-size: 15px; line-height: 1.6; letter-spacing: 0.015em; color: var(--ink-dim);
  font-variation-settings: "wdth" 108, "wght" 280;
}
.brief__points {
  list-style: none; margin: 22px 0 0; padding: 0; max-width: 46ch;
  display: grid; gap: 9px;
}
.brief__points li {
  position: relative; padding-left: 22px;
  font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; color: var(--ink);
  font-variation-settings: "wdth" 108, "wght" 280;
}
.brief__points li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px;
  background: var(--accent); opacity: 0.7;
}
.brief__list > li { padding-top: 22px; border-top: 1px solid rgba(242,244,246,0.14); }
.brief__award {
  margin-top: clamp(64px, 10vh, 120px); padding-top: 22px; border-top: 1px solid rgba(242,244,246,0.12);
  display: flex; align-items: center; gap: 22px;
}
.brief__award img { width: 96px; height: 96px; flex: 0 0 auto; }
.brief__award-line { margin: 0; font-size: 9.5px; letter-spacing: 0.32em; color: var(--ink-dim); }
.brief__contact { margin-top: clamp(64px, 10vh, 120px); padding-top: 18px; border-top: 1px solid rgba(242,244,246,0.12); }
.brief__contact .brief__eyebrow { margin-bottom: 18px; }
.brief__mail {
  display: inline-block; font-size: clamp(18px, 2.2vw, 30px); letter-spacing: 0.06em; text-transform: uppercase;
  font-variation-settings: "wdth" 116, "wght" 220; color: var(--ink);
  border-bottom: 1px solid rgba(242,244,246,0.35); padding-bottom: 6px;
  transition: border-color 500ms var(--ease);
}
.brief__mail:hover { border-color: var(--ink); }
.brief__note { margin: 18px 0 0; font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-faint); font-variation-settings: "wdth" 108, "wght" 280; }

.foot {
  max-width: 1240px; margin: clamp(80px, 12vh, 140px) auto 0;
  padding: 28px 0 40px; border-top: 1px solid rgba(242,244,246,0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.foot__logo { width: 120px; height: auto; opacity: 0.7; }
.foot__line { font-size: 8.5px; letter-spacing: 0.24em; color: var(--ink-faint); margin: 0; text-align: right; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .hud { height: 42vh; right: 16px; gap: 0 10px; top: 46%; }
  .hud__zones { left: -74px; width: 64px; }
  .hud__zone { font-size: 7.5px; letter-spacing: 0.18em; }
  .hud__readout { top: auto; bottom: calc(100% + 16px); }
  .hud__depth { font-size: 18px; }
  .hud__meta span:last-child, .hud__sep { display: none; }
  .nav__brand img { width: 140px; }
  .nav__cta { font-size: 9.5px; letter-spacing: 0.2em; }
  .nav__links { gap: 16px; }
  .cue--surface { padding-bottom: 20vh; }
  .h--xl { font-size: clamp(22px, 6.4vw, 34px); }
  .h--lg { font-size: clamp(20px, 5.4vw, 30px); }
  .h--md { font-size: clamp(16px, 4.4vw, 24px); }
  .cue--cap { padding-bottom: 22vh; padding-right: 96px; }
  .cue--cap-b, .cue--cap-d { padding-right: 96px; }
}
@media (max-width: 600px) {
  .nav__cta--quiet { display: none; }
  .brief__list { grid-template-columns: 1fr; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot__line { text-align: left; }
  .hud__zones { display: none; }
  .hud__ticks i.major::after { display: none; }
  .cue--cap { padding-right: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint i { animation: none; }
}