/* ===========================================================
   FTL Design System
   Colors, type, dot-grid language, and shared components.
   =========================================================== */

/* Geologica, self-hosted (SIL Open Font License). Variable weight 300 to 800, Latin subset. */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/geologica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette */
  --night-sky: #062742;
  --twilight: #4b3d61;
  --horizon: #4682b4;
  --warm-white: #ffffff;
  --concrete: #d9d9d9;
  --charcoal: #171717;

  /* Functional aliases */
  --bg: var(--warm-white);
  --bg-dark: var(--night-sky);
  --text: var(--charcoal);
  --text-dark: #0d1b26;
  --text-on-dark: #eef3f7;
  --text-muted: #5b6b76;
  --text-muted-on-dark: #a9b8c4;
  --border: #e3e3e3;
  --border-on-dark: rgba(255, 255, 255, 0.14);

  --accent: var(--horizon);
  --primary: var(--twilight);

  /* Type */
  --font: 'Geologica', 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --gap: clamp(1rem, 2vw, 2rem);
  --radius: 0px; /* sharp corners everywhere, confirmed direction */

  /* Dot grid module (8x8 base unit per brand system) */
  --dot-unit: 28px;
  --dot-size: 3px;
  --dot-color: rgba(70, 130, 180, 0.5);
  --dot-color-soft: rgba(70, 130, 180, 0.28);
  --dot-color-on-dark: rgba(255, 255, 255, 0.22);
  --dot-color-twilight: rgba(75, 61, 97, 0.5);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

section { position: relative; }
.section {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* ---------- Split-bleed: text stays column-aligned, photo bleeds to the
   viewport's right edge. A dot curtain marks the seam, and the photo
   slides in on scroll instead of appearing static. ---------- */
.split-bleed { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; overflow: hidden; }
.split-bleed__text {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem) max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - 1200px) / 2 + clamp(1.25rem, 4vw, 2.5rem)));
  display: flex; flex-direction: column; justify-content: center;
}
.split-bleed__media { position: relative; min-height: 460px; overflow: hidden; }
.split-bleed__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: translateX(50px) scale(1.04);
  transition: opacity .9s ease, transform .9s ease;
}
.split-bleed.is-visible .split-bleed__media img { opacity: 1; transform: translateX(0) scale(1); }
.split-bleed__media .dots { position: absolute; top: 0; bottom: 0; left: -36px; width: 72px; z-index: 1; }
@media (max-width: 900px) {
  .split-bleed { grid-template-columns: 1fr; }
  .split-bleed__text { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem); }
  .split-bleed__media { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .split-bleed__media img { opacity: 1; transform: none; transition: none; }
}
.section--dark {
  background: var(--night-sky);
  color: var(--text-on-dark);
}
.section--twilight {
  background: var(--twilight);
  color: var(--text-on-dark);
}
.section--concrete {
  background: #f1f4f7;
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--horizon);
}
.eyebrow::before {
  content: '';
  width: 1.2em;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
.section--dark .eyebrow,
.section--twilight .eyebrow { color: #8fc1e6; }

h1, .h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h2, .h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
h3, .h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}
.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text-muted);
  max-width: 46ch;
}
.section--dark .lede,
.section--twilight .lede { color: var(--text-muted-on-dark); }

.eyebrow + h1, .eyebrow + h2 { margin-top: .9rem; }
h1 + .lede, h2 + .lede { margin-top: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
/* Grid-flavored hover: an outline square sits at rest (so it reads as intentional,
   not as stray space pushing the label off-center), and fills solid on hover */
.btn::before {
  content: '';
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: transparent;
  transition: background .18s ease;
}
.btn:hover::before { background: currentColor; }
.btn--primary {
  background: var(--twilight);
  color: #fff;
}
.btn--primary:hover { background: var(--horizon); }
.btn--outline-dark {
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn--outline-dark:hover { background: var(--horizon); color: #fff; border-color: var(--horizon); }
.btn--outline-light {
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }
/* The nav's Inquire button is twilight-on-navy at rest, which reads low
   contrast against the dark nav backgrounds; a light border keeps its
   edges visible without changing the button's fill or size. */
.nav .btn--primary { border-color: rgba(255,255,255,.55); }
.nav .btn--primary:hover { border-color: #fff; }

.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav--solid {
  background: rgba(6, 39, 66, 0.96);
  backdrop-filter: blur(6px);
  padding: .8rem 0;
  border-color: var(--border-on-dark);
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 26px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  opacity: .85;
  transition: opacity .15s ease;
}
/* Square accent instead of a colored underline: outline at rest, fills on hover,
   stays filled for the current page. No blue here, matches the button language. */
.nav__links a::before {
  content: '';
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: transparent;
  transition: background .15s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::before { background: currentColor; }
.nav__links a.is-active { opacity: 1; }
.nav__links a.is-active::before { background: currentColor; }
.nav__right { display: flex; align-items: center; gap: 1.4rem; }
.nav__toggle {
  display: none;
  background: none; border: none; color: #fff;
  font-size: 1.6rem; line-height: 1;
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--night-sky);
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    border-bottom: 1px solid var(--border-on-dark);
  }
}

/* ---------- Dot grid system (square units) ---------- */
/* 09 Cropped grid / 01 density gradient / 07 gradual fade, from brand guide */
.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--dot-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='3' y='3' width='4' height='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='3' y='3' width='4' height='4'/%3E%3C/svg%3E");
  -webkit-mask-size: var(--dot-unit) var(--dot-unit);
  mask-size: var(--dot-unit) var(--dot-unit);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.dots--soft { background-color: var(--dot-color-soft); }
.dots--on-dark { --dot-color: var(--dot-color-on-dark); }
.dots--bold {
  --dot-unit: 34px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='2' y='2' width='6' height='6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='2' y='2' width='6' height='6'/%3E%3C/svg%3E");
}

.dots--fade-right,
.dots--fade-left,
.dots--fade-down,
.dots--corner {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.dots--fade-right {
  -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 92%);
  mask-image: linear-gradient(to right, black 0%, black 40%, transparent 92%);
}
.dots--fade-left {
  -webkit-mask-image: linear-gradient(to left, black 0%, black 40%, transparent 92%);
  mask-image: linear-gradient(to left, black 0%, black 40%, transparent 92%);
}
.dots--fade-down {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 95%);
  mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 95%);
}
.dots--corner {
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, black 15%, transparent 65%);
  mask-image: radial-gradient(circle at 100% 0%, black 0%, black 15%, transparent 65%);
}

/* ---------- Architectural block accents ---------- */
.block-accent {
  position: absolute;
  background: var(--twilight);
  z-index: -1;
}

/* Cropped wordmark treatment (large FTL letters bled off a panel edge) */
.crop-mark {
  position: absolute;
  font-weight: 800;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(9rem, 16vw, 12rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--night-sky);
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  opacity: .65;
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,39,66,.25) 0%, rgba(6,39,66,.55) 65%, var(--night-sky) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 46rem; }
.hero__stats {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  border-top: 1px solid var(--border-on-dark);
  padding-top: 2rem;
}
.stat__num {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 500;
  color: #fff;
}
.stat__label {
  font-size: .82rem;
  color: var(--text-muted-on-dark);
  margin-top: .3rem;
}

/* Small hero variant for interior pages */
.hero--page { padding: clamp(7.5rem, 13vw, 9.5rem) 0 clamp(3rem, 6vw, 4.5rem); }

/* ---------- Grids & cards ---------- */
.grid {
  display: grid;
  gap: var(--gap);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) {
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
}

/* ---------- Person card: square placeholder avatar + a swappable
   corner treatment, used to compare leadership-photo styles. ---------- */
.person-card { display: flex; flex-direction: column; height: 100%; }
.person-card h3 { margin-top: 1rem; font-size: 1rem; }
.person-card p { color: var(--text-muted); font-size: .85rem; margin-top: .2rem; line-height: 1.4; }
.person-avatar {
  position: relative;
  aspect-ratio: 1;
  background: var(--concrete);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.person-avatar svg { width: 42%; height: 42%; color: var(--text-muted); }
.person-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .4s ease;
}
.person-card:hover .person-avatar img { filter: grayscale(0); }
.person-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--night-sky);
  margin-top: auto;
  align-self: flex-start;
  transition: background .2s ease;
}
.person-social svg { width: 14px; height: 14px; display: block; }
.person-social:hover { background: var(--twilight); }
.corner-bracket { position: absolute; width: 22px; height: 22px; border-color: var(--horizon); }
.corner-bracket--tl { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.corner-bracket--br { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; }

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.9rem;
  transition: border-color .15s ease;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 7px; height: 7px;
  background: var(--horizon);
  transform: scale(0);
  transition: transform .18s ease;
}
.card:hover { border-color: var(--twilight); }
.card:hover::after { transform: scale(1); }
.building-picker .card { cursor: pointer; }
.building-picker .card.is-active { border-color: var(--twilight); }
.building-picker .card.is-active::after { transform: scale(1); }
.building-picker .card.is-active .card__icon { background: var(--horizon); }
.building-picker .card:focus-visible { outline: 2px solid var(--horizon); outline-offset: 2px; }
.card--dark {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-on-dark);
  color: var(--text-on-dark);
}
.card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--twilight);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.card__icon--dot { background: none; width: auto; height: auto; display: flex; align-items: center; gap: .5rem; }
.card__icon--dot svg { width: 100%; height: 100%; display: block; }
.dot-num {
  font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--twilight);
}
.dot-num::after { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--horizon); margin-left: .5rem; vertical-align: middle; }

/* ---------- Split hero: copy + dot-texture panel, no photo ---------- */
.hero-split { position: relative; background: var(--night-sky); overflow: hidden; }
.hero-split .container { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 0; }
.hero-split__copy { position: relative; z-index: 1; padding: clamp(6.5rem, 13vw, 9rem) 0 clamp(3rem, 6vw, 4.5rem); max-width: 34rem; }
.hero-split__copy h1, .hero-split__copy h2 { color: #fff; }
.hero-split__graphic { position: relative; align-self: stretch; min-height: 340px; overflow: hidden; }

/* Hero dot field: real elements, not a CSS mask, so individual dots can be
   recoloured without the raster-scaling blur a stretched SVG mask produces. */
.hero-dot-field {
  position: absolute; top: -50px; left: 0; right: 0; bottom: -50px;
  display: grid; grid-template-columns: repeat(40, 1fr); grid-template-rows: repeat(34, 1fr);
  will-change: transform;
}
.hero-dot-field__cell { width: 5px; height: 5px; background: rgba(255,255,255,.32); justify-self: center; align-self: center; }
.hero-dot-field__cell.is-accent {
  background: #8fc1e6;
  animation: heroDotGlow 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Cycle variant: every cell runs the same fade-out/fade-in loop, phase-
   shifted by angle from center, so the fade reads as one band continuously
   rotating around the field — regeneration as a recurring, circular
   process (a recycling-symbol loop), not a static shape. */
.hero-dot-field__cell.is-cycling {
  animation: heroDotCycle 7s linear infinite;
  animation-delay: var(--phase, 0s);
}
@keyframes heroDotCycle {
  0%, 88% { opacity: .22; background: rgba(255,255,255,.32); }
  94% { opacity: 1; background: #8fc1e6; }
  100% { opacity: .22; background: rgba(255,255,255,.32); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dot-field__cell.is-cycling { animation: none; opacity: .32; }
}
@keyframes heroDotGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Hero graphic variations: ONE component (the same animated
   dot grid, same JS generator, same glow) shaped into a different
   silhouette per page via an SVG <mask> defined inline next to it. This
   keeps every hero visibly "the same grid system" while still giving
   each page a distinct, deliberate pattern instead of a generic crop. */
.hero-dot-field--masked {
  -webkit-mask-image: url(#hero-mask);
  mask-image: url(#hero-mask);
}
@media (prefers-reduced-motion: reduce) {
  .hero-dot-field__cell.is-accent { animation: none; opacity: .85; }
}
@media (max-width: 780px) {
  .hero-split .container { grid-template-columns: 1fr; }
  .hero-split__copy { padding-top: clamp(5.5rem, 16vw, 7rem); max-width: 100%; }
  .hero-split__graphic { min-height: 180px; }
}

/* Light-background variant of the same dot field, for decorative use
   in-page (not just dark heroes) — same JS generator, recoloured for
   contrast against white/concrete sections. Constrained to a soft-edged
   cloud (radial mask) rather than the hero's edge-to-edge bleed, so it
   reads as an ambient accent, not a flat rectangle of dots. */
.dot-panel { position: relative; align-self: center; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin: 0 auto; }
.hero-dot-field--light {
  top: 0; bottom: 0; left: 0; right: 0;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 70%);
}
.hero-dot-field--light .hero-dot-field__cell { width: 4px; height: 4px; background: rgba(70, 130, 180, .22); }
.hero-dot-field--light .hero-dot-field__cell.is-accent { background: var(--horizon); }
@media (max-width: 780px) {
  .dot-panel { display: none; }
}

/* ---------- Framed photo: full-width colour band, photo stays at column width, stat as a caption below ---------- */
.framed-photo__media { border: 1px solid var(--border-on-dark); overflow: hidden; }
.framed-photo__media img { width: 100%; height: clamp(280px, 38vw, 440px); object-fit: cover; display: block; }
.framed-photo__caption { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.framed-photo__caption .n { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 600; color: #fff; }
.framed-photo__caption .l { color: var(--text-muted-on-dark); font-size: .95rem; }

/* ---------- Offset layout: copy card breaks out over the image.
   Absolutely positioned on top of a full-width photo, guaranteed overlap
   regardless of grid quirks. ---------- */
.bleed-offset { position: relative; }
.bleed-offset__img { position: relative; height: 420px; }
.bleed-offset__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A vertical chain of dots threading a photo's corner into the section
   above or below it, so the panel boundary doesn't read as a hard cut. */
.dot-chain {
  position: absolute;
  width: 20px;
  height: 88px;
  z-index: 2;
  pointer-events: none;
}
.dot-chain .dots { --dot-unit: 20px; }
.dot-chain--tl { top: -88px; left: 14px; }
.dot-chain--br { bottom: -88px; right: 0; }
/* The copy card covers one side of the image (left by default, right when
   reversed), so whichever chain would otherwise land under the card gets
   pulled in to the image's actual visible edge instead. */
.bleed-offset:not(.bleed-offset--reverse) .dot-chain--tl { left: min(440px, 42%); }
.bleed-offset--reverse .dot-chain--br { right: min(440px, 42%); }
/* Wipes in top-to-bottom on scroll: the entry chain reads as flowing
   down into the corner, the exit chain as continuing on out of it. */
.dot-chain {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
}
.is-visible .dot-chain--tl { clip-path: inset(0 0 0% 0); }
.is-visible .dot-chain--br { clip-path: inset(0 0 0% 0); transition-delay: .35s; }
@media (max-width: 780px) {
  .dot-chain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dot-chain { clip-path: none; transition: none; }
}

/* A single photo with a solid colour square peeking from behind one
   corner and a bold stat badge overlapping the opposite corner, for
   image+copy sections that don't need the full bleed-offset overlap. */
.stat-photo { position: relative; }
.stat-photo__frame {
  position: absolute;
  inset: 0;
  transform: translate(18px, -18px);
  z-index: -1;
  pointer-events: none;
  background: var(--horizon);
}
.stat-photo__badge {
  position: absolute;
  left: 0; bottom: 0;
  transform: translate(-20px, 20px);
  background: var(--night-sky);
  color: #fff;
  padding: 1.4rem 1.9rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  z-index: 2;
}
.stat-photo__badge .n { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; line-height: 1; white-space: nowrap; }
.stat-photo__badge .l { font-size: .82rem; color: var(--text-muted-on-dark); max-width: 160px; line-height: 1.4; }
/* A smaller badge for stat-photos paired with a shorter (e.g. 16:9) image,
   where the full-size badge reads as oversized against less photo. */
.stat-photo--compact .stat-photo__badge { padding: 1rem 1.4rem; gap: .8rem; transform: translate(-14px, 14px); }
.stat-photo--compact .stat-photo__badge .n { font-size: 1.5rem; }
.stat-photo--compact .stat-photo__badge .l { font-size: .78rem; max-width: 130px; }
@media (max-width: 780px) {
  .stat-photo__frame { display: none; }
  .stat-photo__badge { transform: translate(-8px, 12px); padding: .8rem 1.1rem; }
}
.bleed-offset__copy {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  z-index: 1; background: #fff; width: min(440px, 42%);
  padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--border);
}
.bleed-offset--reverse .bleed-offset__copy { left: auto; right: 0; }
@media (max-width: 780px) {
  .bleed-offset__img { height: 260px; }
  .bleed-offset__copy, .bleed-offset--reverse .bleed-offset__copy {
    position: relative; top: auto; left: auto; right: auto; transform: none;
    width: auto; margin: -3rem 1.5rem 0;
  }
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-muted); font-size: .95rem; }
.card--dark p { color: var(--text-muted-on-dark); }

/* ---------- Fact sheet (numbered spec list, denser than .pillar) ---------- */
.fact-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.fact-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: .9rem;
  align-items: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.fact-row .fact-num {
  font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--twilight);
  display: flex; align-items: center; gap: .4rem;
}
.fact-row .fact-num::after { content: ''; width: 7px; height: 7px; background: var(--horizon); flex-shrink: 0; }
.fact-row .fact-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.fact-row .fact-value { display: block; font-weight: 600; color: var(--charcoal); margin-top: .2rem; }
@media (max-width: 700px) {
  .fact-sheet { grid-template-columns: 1fr; }
}

/* ---------- Info strip: quiet label/value facts, three treatments
   being compared rather than a numbered spec-sheet look-alike. ---------- */
.info-strip__label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.info-strip__value { display: block; font-weight: 700; font-size: 1.05rem; color: var(--charcoal); margin-top: .35rem; }

/* Option 1: small square bullet before the label, reusing the site's
   existing dot-marker language (see .fact-num::after, .dot-num::after). */
.info-strip--bullet .info-strip__label { display: flex; align-items: center; gap: .45rem; }
.fact-bullet { width: 7px; height: 7px; background: var(--horizon); flex-shrink: 0; }

/* Option 2: vertical dividers between columns, label stacked over value. */
.info-strip--divider { gap: 0; }
.info-strip__col { padding: 0 1.75rem; border-left: 1px solid var(--border); }
.info-strip__col:first-child { padding-left: 0; border-left: none; }

/* Option 3: small night-sky icon badge above each fact. */
.fact-icon { width: 40px; height: 40px; background: var(--night-sky); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; flex-shrink: 0; }
.fact-icon svg { width: 20px; height: 20px; }

/* ---------- News feed: a mixed feed of FTL posts and outside press
   mentions, told apart only by the source logo, not by layout. ---------- */
.news-feed { display: flex; flex-direction: column; gap: 3rem; }
.news-card { display: grid; grid-template-columns: 360px 1fr; gap: 2.25rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.news-card:last-child { border-bottom: none; padding-bottom: 0; }
.news-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--concrete); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__media--placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .85rem; border: 1px dashed var(--border); }
.news-card__source { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.news-card__logo { width: 30px; height: 30px; background: var(--night-sky); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.news-card__logo--placeholder { background: none; border: 1px dashed var(--border); color: var(--text-muted); font-size: .5rem; }
.news-card__logo--external { background: var(--horizon); }

/* ---------- Contact form ---------- */
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.4rem; }
.form-field label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.form-field input, .form-field textarea, .form-field select {
  font-family: inherit; font-size: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--charcoal);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--horizon); }
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6b76'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.news-card__outlet-name { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.news-card__headline { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; margin-bottom: .75rem; }
.news-card__snippet { color: var(--text-muted); margin-bottom: 1.5rem; }
@media (max-width: 780px) {
  .news-card { grid-template-columns: 1fr; }
}

/* ---------- News carousel: same slide anatomy as .news-card, one at a
   time, so the homepage teaser reads as a moment of dynamic content
   rather than another static grid. ---------- */
.news-carousel { position: relative; }
.news-carousel__viewport { overflow: hidden; }
.news-carousel__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.news-carousel__slide {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 360px 1fr; gap: 2.25rem; align-items: center;
}
.news-carousel__media { aspect-ratio: 16/10; overflow: hidden; background: var(--concrete); }
.news-carousel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-carousel__source { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.news-carousel__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; }
.news-carousel__dots { display: flex; gap: .5rem; }
.news-carousel__dot { width: 9px; height: 9px; background: var(--border); border: none; padding: 0; cursor: pointer; }
.news-carousel__dot.is-active { background: var(--horizon); }
.news-carousel__arrows { display: flex; gap: .6rem; }
.news-carousel__arrow {
  width: 38px; height: 38px; border: 1px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.news-carousel__arrow:hover { background: var(--night-sky); border-color: var(--night-sky); }
.news-carousel__arrow:hover svg { stroke: #fff; }
.news-carousel__arrow svg { width: 16px; height: 16px; stroke: var(--night-sky); transition: stroke .15s ease; }
@media (max-width: 780px) {
  .news-carousel__slide { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .news-carousel__track { transition: none; }
}

/* ---------- Generic scroll-reveal for grids: apply data-reveal to the
   grid/fact-sheet wrapper, children stagger in on an nth-child delay ---------- */
.grid[data-reveal] > *, .fact-sheet[data-reveal] > *, .criteria-bento[data-reveal] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.grid[data-reveal].is-visible > *, .fact-sheet[data-reveal].is-visible > *, .criteria-bento[data-reveal].is-visible > * {
  opacity: 1; transform: translateY(0);
}
.grid[data-reveal] > *:nth-child(1), .fact-sheet[data-reveal] > *:nth-child(1) { transition-delay: 0s; }
.grid[data-reveal] > *:nth-child(2), .fact-sheet[data-reveal] > *:nth-child(2) { transition-delay: .08s; }
.grid[data-reveal] > *:nth-child(3), .fact-sheet[data-reveal] > *:nth-child(3) { transition-delay: .16s; }
.grid[data-reveal] > *:nth-child(4), .fact-sheet[data-reveal] > *:nth-child(4) { transition-delay: .24s; }
.grid[data-reveal] > *:nth-child(5), .fact-sheet[data-reveal] > *:nth-child(5) { transition-delay: .32s; }
.grid[data-reveal] > *:nth-child(6), .fact-sheet[data-reveal] > *:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .grid[data-reveal] > *, .fact-sheet[data-reveal] > *, .criteria-bento[data-reveal] > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Density as a stat: dot density visually represents scale.
   Reserved for headline capacity numbers only. ---------- */
.density-row { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.density-block { flex: 1; min-width: 180px; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.density-block.is-visible { opacity: 1; transform: translateY(0); }
.density-block:nth-child(2) { transition-delay: .12s; }
.density-block:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .density-block { opacity: 1; transform: none; transition: none; } }
.density-swatch { position: relative; height: 130px; background: transparent; overflow: hidden; }
.density-swatch .dots { position: absolute; inset: 0; }
.density-block .n { display: block; font-size: 1.4rem; font-weight: 500; margin-top: .75rem; color: var(--charcoal); }
.density-block .l { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }
.density-block--on-dark .n { color: #fff; }
.density-block--on-dark .l { color: var(--text-muted-on-dark); }

/* ---------- Ambient data pulse: cells of a dot grid quietly light up at
   random, like activity on a live network. Decorative, dark sections only. ---------- */
.pulse-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(26, 1fr); grid-template-rows: repeat(11, 1fr); pointer-events: none; }
.pulse-cell { width: 4px; height: 4px; background: rgba(255,255,255,.16); justify-self: center; align-self: center; }
.pulse-cell.is-active {
  animation-name: cellPulse; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  animation-duration: var(--dur, 3s); animation-delay: var(--delay, 0s);
}
@keyframes cellPulse { 0%, 100% { background: rgba(255,255,255,.16); width: 4px; height: 4px; } 50% { background: #8fc1e6; width: 6px; height: 6px; } }
.pulse-cell.is-active--twilight { }
@keyframes cellPulseTwilight { 0%, 100% { background: rgba(255,255,255,.16); width: 4px; height: 4px; } 50% { background: #b9a8d6; width: 6px; height: 6px; } }
.pulse-grid--twilight .pulse-cell.is-active { animation-name: cellPulseTwilight; }
@media (prefers-reduced-motion: reduce) { .pulse-cell.is-active { animation: none; opacity: .5; } }

.pillar-list { border-top: 1px solid var(--border); }
.pillar-list--on-dark { border-top-color: var(--border-on-dark); }
.pillar {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--border);
}
.pillar-list--on-dark .pillar { border-bottom-color: var(--border-on-dark); }
.pillar__num { font-weight: 700; color: var(--horizon); font-size: 1.1rem; }
.pillar-list--icons .pillar { grid-template-columns: 2.75rem 1fr; }
.pillar__icon {
  width: 44px; height: 44px;
  background: var(--night-sky);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pillar__icon svg { width: 20px; height: 20px; display: block; }

/* ---------- Criteria bento: an asymmetric mosaic of tiles for content
   that reads as a set of standards, not a sequenced list — tile SIZE
   signals importance instead of numbering. Hairline gaps (bg color
   showing through a 1px gap) keep the sharp-square language. ---------- */
.criteria-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "a a a a b b"
    "a a a a c c"
    "d d d e e e"
    "f f f f f f";
  gap: 1px;
  background: var(--border);
}
.criteria-tile {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  color: #fff;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
  transition: transform .25s ease, box-shadow .25s ease;
}
.criteria-tile__media { position: absolute; inset: 0; z-index: 0; }
.criteria-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.criteria-tile__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,23,23,.32) 0%, rgba(23,23,23,.88) 100%);
}
.criteria-tile__icon, .criteria-tile h3, .criteria-tile p { position: relative; z-index: 2; }
.criteria-tile h3 { margin-bottom: .6rem; color: #fff; }
.criteria-tile p { color: var(--text-muted-on-dark); margin: 0; }
.criteria-tile__icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  transition: background .25s ease, transform .25s ease;
}
.criteria-tile__icon svg { width: 20px; height: 20px; display: block; transition: transform .25s ease; }
.criteria-bento .criteria-tile:hover {
  transform: scale(1.025);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  z-index: 2;
}
.criteria-bento .criteria-tile:hover .criteria-tile__media img { transform: scale(1.07); }
.criteria-bento .criteria-tile:hover .criteria-tile__icon { background: var(--twilight); transform: rotate(-6deg); }
.criteria-bento .criteria-tile:hover .criteria-tile__icon svg { transform: scale(1.1); }
.criteria-tile--a { grid-area: a; justify-content: center; }
.criteria-tile--a .criteria-tile__overlay { background: linear-gradient(160deg, rgba(6,39,66,.55) 0%, rgba(23,23,23,.90) 100%); }
.criteria-tile--a h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.criteria-tile--a p { max-width: 44ch; }
.criteria-tile--b { grid-area: b; }
.criteria-tile--c { grid-area: c; }
.criteria-tile--d { grid-area: d; }
.criteria-tile--e { grid-area: e; }
.criteria-tile--f { grid-area: f; flex-direction: row; align-items: center; gap: 1.5rem; }
.criteria-tile--f .criteria-tile__icon { margin-bottom: 0; }
@media (max-width: 860px) {
  .criteria-bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
  .criteria-tile--f { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .criteria-tile, .criteria-tile__icon, .criteria-tile__icon svg, .criteria-tile__media img { transition: none; }
  .criteria-tile:hover { transform: none; }
}

/* ---------- Media / image blocks ---------- */
.media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 4/5; }
.media--wide { aspect-ratio: 16/9; }
.media__caption {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .7rem;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  background: var(--twilight);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
}
.cta-banner h2 { max-width: 26rem; }
.cta-banner .btn--primary { background: #fff; color: var(--twilight); }
.cta-banner .btn--primary:hover { background: var(--night-sky); color: #fff; }

/* ---------- Footer ---------- */
.footer {
  background: var(--charcoal);
  color: var(--text-muted-on-dark);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-on-dark);
}
@media (max-width: 780px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
.footer__brand img { height: 24px; margin-bottom: 1rem; }
.footer__brand p { max-width: 26ch; font-size: .9rem; }
.footer h4 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.footer ul li { margin-bottom: .65rem; font-size: .92rem; }
.footer ul a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .8rem;
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 4px;
  background: rgba(70,130,180,.15);
  color: var(--horizon);
}

/* ---------- Hero dot globe ---------- */
/* The visual is positioned absolutely and allowed to bleed left, behind the
   copy, so its already-faded edge softens the seam between the two halves
   instead of stopping hard at a column boundary. */
.hero-globe { position: relative; min-height: 480px; padding: clamp(6.5rem, 12vw, 8.5rem) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; background: var(--night-sky); color: var(--text-on-dark); }
.hero-globe__copy { position: relative; z-index: 2; max-width: 42%; }
.hero-globe__copy h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); margin-top: .75rem; color: #fff; }
.hero-globe__copy .lede { margin-top: 1rem; color: var(--text-muted-on-dark); }
.hero-globe__copy .cta-row { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-globe__visual {
  position: absolute; z-index: 1; top: 50%; right: -4%; width: 68%; aspect-ratio: 1/1; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.28) 9%, rgba(0,0,0,.48) 14%, rgba(0,0,0,.68) 19%, rgba(0,0,0,.84) 25%, rgba(0,0,0,.95) 32%, #000 40%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.28) 9%, rgba(0,0,0,.48) 14%, rgba(0,0,0,.68) 19%, rgba(0,0,0,.84) 25%, rgba(0,0,0,.95) 32%, #000 40%, #000 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hero-globe__visual canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 780px) {
  .hero-globe { padding-top: clamp(5.5rem, 16vw, 7rem); }
  .hero-globe__copy { max-width: 100%; }
  .hero-globe__visual { position: relative; left: 0; right: 0; top: 0; transform: none; width: 100%; margin-top: 1.5rem; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Capacity timeline ---------- */
.timeline { display: flex; margin-top: 2.5rem; }
.timeline-step {
  flex: 1; position: relative; padding-top: 1.6rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.timeline.is-visible .timeline-step { opacity: 1; transform: translateY(0); }
.timeline-step:nth-child(1) { transition-delay: 0s; }
.timeline-step:nth-child(2) { transition-delay: .3s; }
.timeline-step:nth-child(3) { transition-delay: .6s; }
.timeline-step::before {
  content: ''; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; background: var(--twilight);
  transform: scale(0); transition: transform .3s ease;
}
.timeline.is-visible .timeline-step::before { transform: scale(1); }
.timeline-step:nth-child(1)::before { transition-delay: .1s; }
.timeline-step:nth-child(2)::before { transition-delay: .4s; }
.timeline-step:nth-child(3)::before { transition-delay: .7s; }
.timeline-step::after {
  content: ''; position: absolute; top: 8px; left: 9px; right: 0; height: 1px; background: var(--border);
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.timeline.is-visible .timeline-step::after { transform: scaleX(1); }
.timeline-step:nth-child(1)::after { transition-delay: .25s; }
.timeline-step:nth-child(2)::after { transition-delay: .55s; }
.timeline-step:last-child::after { display: none; }
.timeline-step .yr { display: block; font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.timeline-step .mw { display: block; font-size: 1.5rem; font-weight: 500; margin-top: .5rem; }
.timeline-step .desc { display: block; font-size: .85rem; color: var(--text-muted); margin-top: .3rem; max-width: 22ch; }

/* ---------- FAQ accordion ---------- */
.faq-list { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { padding: 1.1rem 0; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; width: 8px; height: 8px; border: 1px solid var(--twilight); flex-shrink: 0; transition: background .15s ease; }
.faq-item[open] summary::after { background: var(--twilight); }
.faq-item p { color: var(--text-muted); font-size: .92rem; padding: 0 0 1.1rem; max-width: 62ch; }