/* ═══════════════════════════════════════════════════════════════
   AURELIA — investor preview
   Design language: abyssal luxury. Soft glow, translucency, depth.
   Motion language: underwater. Slow, weightless, purposeful.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #04070d;
  --bg-deep: #020409;
  --ink: #e9f1f5;
  --muted: #91a1b0;
  --dim: #6f8290; /* ≥4.5:1 on --bg (WCAG AA for the small-label tier) */
  --accent: #8fe3f0;
  --accent-soft: rgba(143, 227, 240, 0.55);
  --hairline: rgba(190, 225, 235, 0.10);
  --hairline-strong: rgba(190, 225, 235, 0.22);

  --serif: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Inter", -apple-system, "SF Pro Text", "Segoe UI", sans-serif;

  --ease-drift: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-water: cubic-bezier(0.33, 1, 0.68, 1);

  --container: 72rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

/* ─── Reset & base ─── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 380;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(143, 227, 240, 0.25); color: #fff; }

em { font-style: italic; }
sup { font-size: 0.5em; vertical-align: super; }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--accent-soft);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  transform: translateY(-300%);
  transition: transform 0.4s var(--ease-drift);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ─── Living background ─── */

#ocean {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

main { position: relative; z-index: 1; }

/* ─── Cinema layer — filmed jellyfish moments ─── */

/* display: contents keeps each plate a direct child of the root
   stacking context — a fixed wrapper would isolate the blend group
   and mix-blend-mode could no longer reach the canvas beneath. */
.cinema { display: contents; }

.plate {
  position: fixed;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: opacity, transform;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 38%, transparent 72%);
  mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 38%, transparent 72%);
}
.plate video,
.plate .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plate .poster { position: absolute; inset: 0; }
.plate video { position: relative; }
html.reduced .plate video { display: none; }

/* Grades — pull every clip into the same cold bioluminescence */
.plate-hero {
  left: 64%;
  top: 42%;
  width: min(96vmin, 900px);
  aspect-ratio: 16 / 9;
  filter: hue-rotate(-12deg) saturate(0.8) brightness(0.95);
}
/* Nettles now sits behind Vision, so it drops back to a wash. */
.plate-nettles {
  left: 50%;
  top: 50%;
  height: 104vh;
  aspect-ratio: 9 / 16;
  filter: hue-rotate(-10deg) saturate(0.55) brightness(0.5) contrast(1.1);
}
/* The bloom now carries Why Jellyfish, so it comes forward and brightens. */
.plate-bloom {
  left: 50%;
  top: 48%;
  width: min(112vw, 1360px);
  aspect-ratio: 16 / 9;
  filter: hue-rotate(-14deg) saturate(0.62) brightness(0.74) contrast(1.08);
}
.plate-finale {
  left: 50%;
  top: 37%;
  width: min(74vmin, 680px);
  aspect-ratio: 16 / 9;
  filter: hue-rotate(-12deg) saturate(0.8) brightness(0.9);
}

@media (max-width: 48rem) {
  .plate-hero { left: 50%; top: 32%; width: 135vmin; }
  .plate-nettles { height: 96vh; }
  .plate-finale { width: 120vmin; }
}

/* ─── Entry veil ─── */

.veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: var(--bg-deep);
  transition: opacity 1.4s var(--ease-water), visibility 0s 1.4s;
}
html.js .veil { display: flex; }
.veil.lifted { opacity: 0; visibility: hidden; pointer-events: none; }

.veil-word {
  font-family: var(--serif);
  font-weight: 300;
  /* Sized as the entry title rather than a label, but held well short of
     full-bleed so it stays composed. */
  font-size: clamp(2rem, 6.5vw, 4rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* optically recentre tracked text */
  max-width: 100%;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: veil-word 2.4s var(--ease-water) 0.2s forwards;
}
.veil-line {
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(to bottom, var(--accent-soft), transparent);
  transform: scaleY(0);
  transform-origin: top;
  animation: veil-line 1.6s var(--ease-drift) 0.9s forwards;
}
@keyframes veil-word {
  from { opacity: 0; letter-spacing: 0.6em; }
  to   { opacity: 1; letter-spacing: 0.42em; }
}
@keyframes veil-line { to { transform: scaleY(1); } }

html.reduced .veil-word { animation: none; opacity: 1; }
html.reduced .veil-line { animation: none; transform: scaleY(1); }

/* Return visits (production): the veil becomes a beat, not a scene */
.veil.quick { transition-duration: 0.5s; }
.veil.quick .veil-word { animation-duration: 0.5s; animation-delay: 0s; }
.veil.quick .veil-line { animation: none; transform: scaleY(1); opacity: 0.5; }

/* ─── Masthead ─── */

.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  opacity: 0;
  transition: opacity 1.6s var(--ease-water);
  pointer-events: none;
}
.masthead.shown { opacity: 1; pointer-events: auto; }

.wordmark {
  font-family: var(--serif);
  font-weight: 340;
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: letter-spacing 0.9s var(--ease-water), color 0.9s;
}
.wordmark:hover { letter-spacing: 0.42em; color: #fff; }

.masthead-right {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.masthead-note {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.masthead-cta,
.masthead-index {
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.7s, box-shadow 0.9s var(--ease-water), color 0.7s;
}
.masthead-cta:hover, .masthead-cta:focus-visible,
.masthead-index:hover, .masthead-index:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 20px rgba(143, 227, 240, 0.18);
  color: #fff;
}
.masthead-index { display: none; }

@media (max-width: 68rem) {
  .masthead-index { display: inline-block; }
}
@media (max-width: 40rem) {
  .masthead-note { display: none; }
  .masthead-cta { display: none; } /* the floating pill takes over */
}

/* ─── Mobile enquiry pill ─── */

.enquire-pill {
  position: fixed;
  right: 1.1rem;
  bottom: 1.3rem;
  z-index: 20;
  display: none;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(6, 11, 19, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.8s var(--ease-water), transform 0.8s var(--ease-drift), border-color 0.7s;
  pointer-events: none;
}
.enquire-pill.shown { opacity: 1; transform: none; pointer-events: auto; }
.enquire-pill:hover, .enquire-pill:focus-visible { border-color: var(--accent-soft); }
@media (max-width: 40rem) {
  .enquire-pill { display: block; }
}
html.reduced .enquire-pill { transition: opacity 0.6s ease; transform: none; }

/* ─── Mobile scroll progress thread ─── */

.progress-thread {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  z-index: 19;
  background: rgba(190, 225, 235, 0.07);
  display: none;
}
.progress-thread i {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent-soft), var(--accent));
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
@media (max-width: 68rem) {
  .progress-thread { display: block; }
}
html.reduced .progress-thread { display: none; }

/* ─── Chapter rail ─── */

.rail {
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 1.6s var(--ease-water);
}
.rail.shown { opacity: 1; }
.rail ul { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.rail a {
  position: relative;
  display: block;
  width: 0.9rem; height: 0.9rem;
  text-decoration: none;
}
.rail a::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--dim);
  transform: translate(-50%, -50%);
  transition: background 0.6s, box-shadow 0.6s, transform 0.6s var(--ease-drift);
}
.rail a span {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s var(--ease-drift);
  pointer-events: none;
}
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail a.active::before {
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent-soft);
  transform: translate(-50%, -50%) scale(1.5);
}
/* Keyboard focus deserves more than a ring around a 3px dot */
.rail a:focus-visible {
  outline: 1px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 50%;
}
.rail a:focus-visible::before {
  background: var(--accent);
  box-shadow: 0 0 12px 2px var(--accent-soft);
  transform: translate(-50%, -50%) scale(2.4);
}
@media (max-width: 68rem) { .rail { display: none; } }

/* ─── Shared editorial structure ─── */

.chapter {
  position: relative;
  padding: clamp(8rem, 22vh, 15rem) 0;
}

.container {
  width: 100%;
  min-width: 0;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-center { text-align: center; }

.chapter-mark {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.7rem;
  font-weight: 550;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.chapter-mark span {
  font-family: var(--serif);
  /* Fraunces is loaded to 500; heavier would clamp or fake */
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
}
.chapter-mark::after {
  content: "";
  flex: 0 0 3.4rem;
  height: 1px;
  background: var(--hairline-strong);
}
.chapter-mark-center { justify-content: center; }
.chapter-mark-center::after { display: none; }

.chapter-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 20ch;
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
}
.container-center .chapter-title { margin-inline: auto; }

/* Art-directed line breaks only earn their keep on wide screens */
@media (max-width: 48rem) {
  .chapter-title br, .closing-title br { display: none; }
}

.lede {
  max-width: none;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: clamp(3rem, 8vh, 5rem);
}

.aside {
  max-width: none;
  color: var(--muted);
}
.aside-center {
  margin-inline: auto;
}
.aside-accent { color: var(--accent); }

/* ─── Concept renders ───
   Bled a little wider than the prose so they read as plates rather than
   inline illustrations, and always captioned as renders — this is an
   investor document and the space is not built yet. */
.render {
  margin: clamp(3.4rem, 8vh, 5rem) 0 0;
  margin-inline: calc(-1 * clamp(0rem, (100vw - var(--container) - 2rem) / 2, 5rem));
}
.render img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  /* Pull the renders into the same cold grade as the footage plates. */
  filter: saturate(0.86) brightness(0.94) contrast(1.04);
}
.render figcaption {
  margin-top: 1rem;
  font-size: 0.68rem;
  font-weight: 550;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Inside the two-column journey grid, the render spans both tracks. */
.render-wide { grid-column: 1 / -1; }


/* ─── Reveal choreography ─── */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(2.2rem);
  filter: blur(7px);
  transition:
    opacity 1.3s var(--ease-water),
    transform 1.5s var(--ease-drift),
    filter 1.2s var(--ease-water);
}
html.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
  filter: none;
}
html.js [data-reveal-delay="1"] { transition-delay: 0.15s; }
html.js [data-reveal-delay="2"] { transition-delay: 0.3s; }
html.js [data-reveal-delay="3"] { transition-delay: 0.45s; }

html.reduced [data-reveal] {
  transform: none;
  filter: none;
  transition: opacity 0.9s ease;
}

/* ─── Hero ─── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}

.hero-inner {
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) 28svh;
}
@media (max-width: 48rem) {
  /* the mobile jelly sits higher; keep the copy clear of its tentacles */
  .hero-inner { padding-bottom: 20svh; }
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 550;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 2rem;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 270;
  font-size: clamp(3.4rem, 2rem + 9vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 2.2rem;
}
.hero-title em {
  color: transparent;
  background: linear-gradient(105deg, #c8ecf4 0%, var(--accent) 45%, #6f9fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-sub {
  max-width: 30rem;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
}

.descend {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  animation: descend-in 2s var(--ease-water) 2.8s forwards;
}
@keyframes descend-in { to { opacity: 1; } }

.descend-label {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dim);
}
.descend-track {
  position: relative;
  width: 1px;
  height: 4.2rem;
  background: var(--hairline-strong);
  overflow: hidden;
}
.descend-dot {
  position: absolute;
  left: -1px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent-soft);
  animation: descend-dot 3.6s var(--ease-water) infinite;
}
@keyframes descend-dot {
  0%   { top: -6%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}
html.reduced .descend { animation: none; opacity: 1; }
html.reduced .descend-dot { animation: none; top: 40%; }

@media (max-width: 40rem) {
  .descend { display: none; }
}

/* ─── 01 · Opportunity ─── */

.burden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
  margin-bottom: clamp(4rem, 10vh, 7rem);
}
.burden {
  padding: 2.2rem 2rem 2.2rem 0;
  border-bottom: 1px solid var(--hairline);
}
.burden dt {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.1rem;
}
.figure {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.figure sup { color: var(--accent-soft); }

.pivot {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 1.25;
  max-width: 24ch;
}
.pivot em { color: var(--accent); }
/* Held below the fold of the horizons list, so the closing line is something
   you scroll into rather than something already on screen. */
.pivot-vision {
  margin: clamp(7rem, 20vh, 13rem) auto 0;
  max-width: none;
  text-align: center;
}

/* Titles whose art-directed lines outgrow the 20ch default */
.chapter-title-wide { max-width: none; }

/* ─── 02 · A New Category ─── */

.fusion {
  list-style: none;
  border-top: 1px solid var(--hairline);
  margin-bottom: clamp(3.4rem, 8vh, 5.4rem);
}
.fusion li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.1rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--hairline);
}
.fusion em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.15;
}
/* The completion sits beside the phrase, same scale, brand italic */
.fusion span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.15;
  color: var(--accent);
}

/* ─── 03 · Why Jellyfish ─── */

.chapter-immersive {
  min-height: 110svh;
  display: flex;
  align-items: center;
}

.incantation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.2em;
  font-family: var(--serif);
  font-weight: 280;
  font-style: italic;
  font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.2rem);
  color: var(--accent);
  text-shadow: 0 0 34px rgba(143, 227, 240, 0.35);
  margin: clamp(2.5rem, 7vh, 4.5rem) 0;
}

.essence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem 3rem;
  max-width: 56rem;
  margin: 0 auto clamp(3rem, 8vh, 5rem);
  text-align: center;
}
.essence dt {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem);
  line-height: 1;
  margin-bottom: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.essence dd {
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 17rem;
  margin-inline: auto;
}

/* ─── 04 · The Experience ─── */

.journey-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.journey-intro {
  position: sticky;
  top: 18vh;
}
@media (max-width: 56rem) {
  .journey-layout { grid-template-columns: 1fr; }
  .journey-intro { position: static; }
}

.journey {
  list-style: none;
  position: relative;
  padding-left: 2.6rem;
}
.journey::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4rem; bottom: 0.4rem;
  width: 1px;
  background: var(--hairline);
}
.journey::after {
  content: "";
  position: absolute;
  left: -2px; top: 0.4rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px var(--accent-soft);
  transform: translateY(calc(var(--journey-progress, 0) * var(--journey-height, 0px)));
  transition: transform 0.2s linear;
}
html.reduced .journey::after { display: none; }

.journey-step { padding: clamp(2.4rem, 9vh, 5.5rem) 0; }
.journey-step:first-child { padding-top: 0.5rem; }

.step-index {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent-soft);
  margin-bottom: 0.7rem;
}
.journey-step h3 {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  margin-bottom: 0.8rem;
}
.journey-step p:last-child {
  color: var(--muted);
  max-width: 26rem;
}

/* ─── 05 · Investment case ─── */

/* Four cards, two by two, rather than four stacked rows. */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.4rem 3.2rem;
  margin-bottom: clamp(2.4rem, 5vh, 3.4rem);
}
@media (max-width: 52rem) {
  .compare { grid-template-columns: 1fr; gap: 2.6rem; }
}
.compare-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "label  label"
    "waffle detail";
  gap: 1.4rem 1.8rem;
  align-items: center;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.compare-label { grid-area: label; }
.compare-row .waffle { grid-area: waffle; }
.compare-detail {
  grid-area: detail;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.compare-label {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Waffle ──
   One hue throughout: Aurelia's lit cells fill from the bottom up, the
   traditional total stacks above them. 2px gaps keep every cell its own mark. */
.waffle {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: clamp(132px, 15vw, 172px);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.waffle i {
  border-radius: 1px;
  background: var(--dim);
  opacity: 0.22;
  transform: scale(0.55);
  transition:
    transform 0.7s var(--ease-drift) calc(var(--r, 0) * 70ms + 0.15s),
    opacity 0.7s var(--ease-water) calc(var(--r, 0) * 70ms + 0.15s);
}
.waffle i.on {
  background: var(--accent);
  opacity: 0.95;
  box-shadow: 0 0 7px rgba(143, 227, 240, 0.4);
}
.in-view .waffle i { transform: scale(1); }
html.reduced .waffle i { transform: scale(1); transition: none; }

.v-them { color: var(--dim); }
.v-us { color: var(--muted); }
.v-us .bar-value { color: var(--accent); }

/* The ratio is the drama; the chart stays quiet */
.compare-ratio {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 1.2s var(--ease-water) 0.9s, transform 1.4s var(--ease-drift) 0.9s;
}
.compare-ratio span { font-size: 0.55em; color: var(--accent-soft); }
.in-view .compare-ratio { opacity: 1; transform: none; }
html.reduced .compare-ratio { opacity: 1; transform: none; transition: none; }

.compare { margin-bottom: clamp(3.4rem, 8vh, 5.4rem); }


/* ─── The raise ─── */

.raise {
  margin: clamp(3.4rem, 8vh, 5rem) auto 0;
  border-top: 1px solid var(--hairline);
  padding-top: 2.2rem;
  max-width: 40rem;
  text-align: center;
}
.raise-line em { white-space: nowrap; }
.raise-eyebrow {
  font-size: 0.7rem;
  font-weight: 550;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}
.raise-line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 1.8rem;
}
.raise-line em { color: var(--accent); }
/* Donut and legend stack, so the ring keeps the section's centre axis. */
.raise-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}
.raise-pie {
  position: relative;
  width: clamp(140px, 22vw, 180px);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.raise-pie::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) 0 74.6%,
    transparent 74.6% 75.4%,
    rgba(111, 130, 144, 0.5) 75.4% 99.6%,
    transparent 99.6% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%);
  mask: radial-gradient(circle, transparent 61%, #000 62%);
  filter: drop-shadow(0 0 20px rgba(143, 227, 240, 0.22));
}
.raise-total {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  font-variant-numeric: tabular-nums;
}
.raise-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.raise-legend .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 0.6rem;
  vertical-align: 1px;
}
.raise-legend .dot-equity { background: var(--accent); box-shadow: 0 0 8px rgba(143, 227, 240, 0.5); }
.raise-legend .dot-debt { background: var(--dim); }

/* ─── 06 · Locations ─── */

.constellation {
  position: relative;
  height: min(34rem, 78vh);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.constellation-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Pulses running out from the core. Every spoke declares pathLength="100",
   so one dash pattern travels the whole line whatever its real length.
   non-scaling-stroke keeps the bead round — the SVG stretches to the
   container with preserveAspectRatio="none", which would otherwise squash it. */
.pulses line {
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1.5 98.5;
  filter: drop-shadow(0 0 5px rgba(143, 227, 240, 0.75));
  animation: pulse-out var(--t, 5s) linear var(--d, 0s) infinite;
}
@keyframes pulse-out {
  from { stroke-dashoffset: 0; opacity: 0; }
  12%  { opacity: 0.95; }
  78%  { opacity: 0.75; }
  to   { stroke-dashoffset: -100; opacity: 0; }
}
html.reduced .pulses { display: none; }

.node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
  padding: 0.55rem 1.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(9, 16, 26, 0.55);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  animation: node-drift var(--nd, 10s) ease-in-out infinite alternate;
  transition: color 0.7s, border-color 0.7s, box-shadow 0.7s;
}
/* Interactive styling disabled (Rev 3 audit decision): the chips are not
   links yet, so they must not invite clicks. Restore when they lead somewhere.
.node:hover {
  color: var(--ink);
  border-color: var(--accent-soft);
  box-shadow: 0 0 24px rgba(143, 227, 240, 0.18);
}
*/
@keyframes node-drift {
  from { transform: translate(-50%, -50%) translateY(-0.45rem); }
  to   { transform: translate(-50%, -50%) translateY(0.45rem); }
}
html.reduced .node { animation: none; }

.node-core {
  left: 50%; top: 50%;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--ink);
  border-color: var(--accent-soft);
  box-shadow: 0 0 34px rgba(143, 227, 240, 0.22);
  animation: none;
}

@media (max-width: 48rem) {
  .constellation { height: auto; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
  .constellation-lines { display: none; }
  .node { position: static; transform: none; animation: none; }
  .node-core { order: -1; flex-basis: 100%; text-align: center; background: none; border: 0; box-shadow: none; margin-bottom: 0.6rem; }
}

/* ─── 07 · Powered by ─── */

.chapter-quiet { min-height: 90svh; display: flex; align-items: center; }

.lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 1.4rem 2.2rem;
  margin-bottom: 2.6rem;
}
.lockup-reef {
  font-family: var(--sans);
  font-weight: 550;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  letter-spacing: 0.06em;
}
.lockup-x {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.4vw, 2rem);
  color: var(--accent-soft);
}
.lockup-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}
.lockup-rule {
  width: 3.4rem;
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  margin: 0 auto 2.6rem;
}

/* ─── 08 · Team ─── */

.founders {
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.founder {
  display: grid;
  grid-template-columns: 3.4rem minmax(14rem, 22rem) 1fr;
  grid-template-areas:
    "index name line"
    "index role line";
  gap: 0.2rem 2.6rem;
  align-items: start;
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.8s var(--ease-drift);
}
/* Disabled (Rev 3): rows read as links but aren't destinations yet.
.founder:hover { padding-left: 1.2rem; } */
@media (max-width: 52rem) {
  .founder {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "index name"
      "index role"
      "index line";
  }
  .founder-line { margin-top: 1rem; }
}

.founder-index {
  grid-area: index;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--dim);
  padding-top: 0.6rem;
}
.founder-name {
  grid-area: name;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  transition: text-shadow 0.8s;
}
/* Disabled (Rev 3), same reason:
.founder:hover .founder-name { text-shadow: 0 0 28px rgba(143, 227, 240, 0.35); } */
.founder-role {
  grid-area: role;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.founder-line {
  grid-area: line;
  align-self: center;
  color: var(--muted);
  max-width: 30rem;
  font-size: 0.95rem;
}

/* ─── 09 · Vision ─── */

.cities {
  overflow: hidden;
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
  border-block: 1px solid var(--hairline);
  margin-bottom: clamp(3.5rem, 8vh, 5.5rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.cities-track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  color: var(--muted);
  animation: cities-drift 60s linear infinite;
}
.cities-track span:nth-child(even) { color: var(--accent-soft); }
@keyframes cities-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html.reduced .cities-track { animation: none; }

.horizons {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.8rem 2.2rem;
  /* Four columns need more width than the prose container to hold each entry
     to two lines, so bleed outward — but only into space the viewport has.
     The extra 2rem keeps a classic scrollbar from tipping this into overflow. */
  margin-inline: calc(-1 * clamp(0rem, (100vw - var(--container) - 2rem) / 2, 5rem));
}
/* Below this, four columns squeeze each entry to three or four lines —
   two roomy columns read better than four cramped ones. */
@media (max-width: 84rem) {
  .horizons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .horizons { grid-template-columns: 1fr; }
}
.horizons h3 {
  font-family: var(--serif);
  font-weight: 320;
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}
.horizons p { color: var(--muted); font-size: 0.95rem; max-width: 22rem; }

/* ─── Closing ─── */

/* No headline here any more — the CTA reads as the answer to the Vision
   pivot, so both sides of that seam drop their usual chapter padding and the
   footer closes the page with nothing after it. */
#vision { padding-bottom: clamp(2rem, 5vh, 3rem); }
.closing {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 5vh, 3rem) 0 0;
}

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 3.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  isolation: isolate;
  transition: color 0.7s;
}
.cta-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent-soft);
  border-radius: inherit;
  transition: border-color 0.7s, box-shadow 0.9s var(--ease-water), background 0.9s;
  z-index: -1;
}
.cta:hover .cta-ring, .cta:focus-visible .cta-ring {
  border-color: var(--accent);
  background: rgba(143, 227, 240, 0.06);
  box-shadow:
    0 0 34px rgba(143, 227, 240, 0.25),
    inset 0 0 22px rgba(143, 227, 240, 0.08);
}
.cta:hover { color: #fff; }

.footer {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding: 2.2rem var(--gutter) 2.6rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 3rem;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-dim { color: var(--dim); }

/* ─── The conversation sheet & chapter index ─── */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(2, 4, 9, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.6s var(--ease-water);
}
.sheet-backdrop.open { opacity: 1; }

.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 41;
  width: min(24rem, calc(100vw - 2.4rem));
  transform: translate(-50%, -50%) translateY(0.8rem);
  background: rgba(8, 14, 23, 0.92);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  padding: 2.2rem 2.2rem 1.9rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(143, 227, 240, 0.06);
  opacity: 0;
  transition: opacity 0.6s var(--ease-water), transform 0.7s var(--ease-drift);
}
.sheet.open { opacity: 1; transform: translate(-50%, -50%); }
.sheet[hidden], .sheet-backdrop[hidden] { display: none; }
html.reduced .sheet { transform: translate(-50%, -50%); transition: opacity 0.4s ease; }

.sheet-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font: 300 1.5rem/1 var(--serif);
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  transition: color 0.5s;
}
.sheet-close:hover, .sheet-close:focus-visible { color: var(--ink); }

.sheet-eyebrow {
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.9rem;
}
.sheet-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.7rem;
  margin-bottom: 1.6rem;
}
.sheet-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.1rem;
}
.sheet-address {
  font-size: 0.92rem;
  color: var(--ink);
  user-select: all;
  overflow-wrap: anywhere;
}
.sheet-copy {
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.5s, color 0.5s;
}
.sheet-copy:hover, .sheet-copy:focus-visible { border-color: var(--accent-soft); color: #fff; }
.sheet-copy.copied { color: var(--accent); border-color: var(--accent-soft); }

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.sheet-action {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.95rem 1rem;
  transition: border-color 0.6s, box-shadow 0.8s var(--ease-water), color 0.6s;
}
.sheet-action:hover, .sheet-action:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 22px rgba(143, 227, 240, 0.16);
  color: #fff;
}
.sheet-note {
  margin-top: 1.3rem;
  font-size: 0.78rem;
  color: var(--dim);
  text-align: center;
}

.index-list {
  list-style: none;
  counter-reset: chapter -1;
  padding: 0;
  margin: 0;
}
.index-list li {
  counter-increment: chapter;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}
.index-list li:last-child { border-bottom: 0; }
.index-list a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.8rem 0.2rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.05rem;
  transition: color 0.4s, padding-left 0.5s var(--ease-drift);
}
.index-list a::before {
  content: counter(chapter, decimal-leading-zero);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
}
.index-list a:hover, .index-list a:focus-visible { color: var(--accent); padding-left: 0.5rem; }