/* Pioneera · landing-page styles — built to brand-book spec */
@import url("colors_and_type.css");
@import url("technical-drawing.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--iron); font-family: var(--font-sans); }
img { max-width: 100%; display: block; }

/* Top scroll progress */
.scrollbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--gold); width: 0; z-index: 200; }

/* ======================== SECTION BRIDGES ========================
   Gradient strips between contrasting sections. They give the eye a
   place to land instead of cutting hard from iron to paper (or back).
   The body stays paper throughout, so there's never a flash zone where
   dark text sits invisibly on a still-dark body bg.
*/
.bridge {
  position: relative;
  height: 160px;
  pointer-events: none;
  overflow: hidden;
}
.bridge--xl { height: 220px; }
.bridge--to-paper {
  background: linear-gradient(
    180deg,
    var(--iron) 0%,
    color-mix(in oklab, var(--iron) 70%, var(--paper)) 32%,
    color-mix(in oklab, var(--iron) 30%, var(--paper)) 62%,
    var(--paper) 100%
  );
}
.bridge--to-iron {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    color-mix(in oklab, var(--iron) 30%, var(--paper)) 42%,
    color-mix(in oklab, var(--iron) 70%, var(--paper)) 72%,
    var(--iron) 100%
  );
}
/* A single 1px vertical gold tick — a chapter mark, not chrome. */
.bridge::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent 0%, var(--gold) 50%, transparent 100%);
  transform: translate(-50%, -50%);
  opacity: 0.55;
}
.bridge--xl::after { height: 84px; opacity: 0.7; }

/* ======================== NAV ======================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease);
}
.nav__inner { max-width: var(--container-max); margin: 0 auto; padding: 18px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }

/* Dual-logo lockup: dark logo for paper nav, gold logo for iron nav.
   Cross-fades smoothly with the rest of the nav. No CSS filters. */
.nav__brand { display: inline-block; position: relative; line-height: 0; }
.nav__brand-img { height: 30px; display: block; transition: opacity 500ms var(--ease); }
.nav__brand-img--gold { position: absolute; inset: 0; opacity: 0; }

.nav__links { display: flex; gap: 28px; justify-content: center; }
.nav__link { font-size: 13px; font-weight: 500; color: var(--iron); position: relative; padding-bottom: 4px; background: none; transition: color 500ms var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__est { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--steel); text-transform: uppercase; transition: color 500ms var(--ease); }
.nav__cta { font-size: 13px; font-weight: 600; padding: 10px 18px; background: var(--iron); color: var(--paper); white-space: nowrap; transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.hero__btn, .aud__arrow { white-space: nowrap; }
.nav__cta:hover { background: var(--iron-90); color: var(--paper); }

/* ======================== HERO — CHIC & RESTRAINED ======================== */
.hero {
  position: relative; min-height: 100vh;
  padding: 132px 40px 96px;
  overflow: hidden; isolation: isolate;
  background: var(--iron); color: var(--paper);
  display: flex; flex-direction: column;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scene { width: 100%; height: 100%; display: block; }
.hero__scene .fp-belt-segments { animation: fpBelt 1.6s linear infinite; }
@keyframes fpBelt { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.hero__scene .fp-jars { animation: fpJars 8s linear infinite; }
@keyframes fpJars { from { transform: translateX(0); } to { transform: translateX(-160px); } }
.hero__scene .fp-carriage { animation: fpCarriage 6s cubic-bezier(.7,0,.3,1) infinite; transform-origin: center; }
@keyframes fpCarriage {
  0%   { transform: translateX(-260px); }
  35%  { transform: translateX(-260px); }
  50%  { transform: translateX(260px); }
  85%  { transform: translateX(260px); }
  100% { transform: translateX(-260px); }
}
.hero__scene .fp-head { animation: fpHead 6s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes fpHead {
  0%,30%,55%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(110px); }
  65% { transform: translateY(110px); }
}
.hero__scene .fp-steam circle { animation: fpSteam 6s ease-in-out infinite; transform-origin: center; }
.hero__scene .fp-steam circle:nth-child(2) { animation-delay: -2s; }
.hero__scene .fp-steam circle:nth-child(3) { animation-delay: -4s; }
@keyframes fpSteam {
  0%,100% { opacity: .35; transform: translateY(0) scale(1); }
  50%     { opacity: .7;  transform: translateY(-30px) scale(1.15); }
}
.hero__scene .fp-beam { animation: fpBeam 6s ease-in-out infinite; }
@keyframes fpBeam {
  0%,40%,60%,100% { opacity: 0; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scene * { animation: none !important; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(31,28,26,.55) 0%, rgba(31,28,26,.35) 35%, rgba(31,28,26,.78) 88%, rgba(31,28,26,.95) 100%),
    linear-gradient(90deg, rgba(31,28,26,.78) 0%, rgba(31,28,26,.25) 55%, rgba(31,28,26,0) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--container-max); margin: 0 auto; width: 100%;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: 64px;
}
.hero__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 20px; border-bottom: 1px solid rgba(245,242,236,.14);
  opacity: 0; animation: fadein .8s var(--ease) .1s forwards;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border: 1px solid rgba(245,242,236,.22);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper);
}
.hero__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(212,165,90,.6); animation: livepulse 2.2s ease-in-out infinite; }
@keyframes livepulse { 0%,100%{opacity:.55} 50%{opacity:1} }
.hero__eye-mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,236,.55); }

.hero__left { max-width: 880px; }
.hero__display {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(3.2rem, 7.2vw, 6.8rem); line-height: 1.02;
  letter-spacing: -0.025em; color: var(--paper);
  margin: 0;
  opacity: 0; animation: heroRise 1.1s var(--ease) .25s forwards;
}
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__display em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--gold);
}
.hero__lede {
  font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.55;
  color: rgba(245,242,236,.78); max-width: 52ch; margin: 28px 0 0;
  opacity: 0; animation: fadein .9s var(--ease) .55s forwards;
}
@keyframes fadein { to { opacity: 1; } }
.hero__cta { display: flex; gap: 14px; margin-top: 36px; opacity: 0; animation: fadein .9s var(--ease) .7s forwards; }
.hero__btn { font-size: 13.5px; font-weight: 600; padding: 16px 22px; display: inline-flex; align-items: center; gap: 14px; background: none; transition: all 220ms var(--ease); will-change: transform; white-space: nowrap; }
.hero__btn::after { content: ""; width: 22px; height: 1px; background: currentColor; transition: width 300ms var(--ease); }
.hero__btn:hover::after { width: 36px; }
.hero__btn--primary { background: var(--gold); color: var(--iron); }
.hero__btn--primary:hover { background: var(--gold-light); color: var(--iron); }
.hero__btn--ghost { color: var(--paper); border: 1px solid rgba(245,242,236,.28); }
.hero__btn--ghost:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--iron); }

.hero__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(245,242,236,.18);
  opacity: 0; animation: fadein 1s var(--ease) .85s forwards;
}
.hero__meta-cell { padding: 18px 16px 0; border-right: 1px solid rgba(245,242,236,.08); display: flex; flex-direction: column; gap: 8px; }
.hero__meta-cell:last-child { border-right: 0; }
.hero__meta-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.hero__meta-val { font-family: var(--font-sans); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--paper); }
.hero__meta-val--it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); font-size: 30px; }



/* Section-aware nav. Each section declares data-nav-bg="iron|paper|image|dynamic".
   The body's matching attribute drives all the nav's color/state. Cross-fades
   are handled by transitions on the nav and its children. */
body[data-nav-bg="paper"] .nav {
  background: rgba(245,242,236,.92);
  border-bottom-color: var(--rule);
}
body[data-nav-bg="iron"] .nav {
  background: rgba(31,28,26,.92);
  border-bottom-color: rgba(245,242,236,.10);
}
body[data-nav-bg="image"] .nav {
  /* High-translucent iron over photo sections \u2014 image shows through
     but the nav is clearly iron-tinted, not transparent. */
  background: rgba(31,28,26,0.42);
  border-bottom-color: rgba(245,242,236,.10);
}
/* At the very top of the page (scroll \u2248 0), make the image-mode nav
   nearly solid iron so the wordmark reads cleanly on first view. */
body.is-page-top[data-nav-bg="image"] .nav {
  background: rgba(31,28,26,0.92);
}
/* Dark-mode chrome (iron + image both) — light text, gold logo, gold CTA */
body[data-nav-bg="iron"] .nav__link,
body[data-nav-bg="image"] .nav__link { color: rgba(245,242,236,.78); }
body[data-nav-bg="iron"] .nav__link.active,
body[data-nav-bg="image"] .nav__link.active { color: var(--gold); }
body[data-nav-bg="iron"] .nav__est,
body[data-nav-bg="image"] .nav__est { color: rgba(245,242,236,.55); }
body[data-nav-bg="iron"] .nav__cta,
body[data-nav-bg="image"] .nav__cta { background: var(--gold); color: var(--iron); }
body[data-nav-bg="iron"] .nav__cta:hover,
body[data-nav-bg="image"] .nav__cta:hover { background: var(--gold-light); color: var(--iron); }
body[data-nav-bg="iron"] .nav__brand-img--dark,
body[data-nav-bg="image"] .nav__brand-img--dark { opacity: 0; }
body[data-nav-bg="iron"] .nav__brand-img--gold,
body[data-nav-bg="image"] .nav__brand-img--gold { opacity: 1; }
/* Paper-mode chrome (default) — dark logo, dark links, iron CTA */
body[data-nav-bg="paper"] .nav__brand-img--dark { opacity: 1; }
body[data-nav-bg="paper"] .nav__brand-img--gold { opacity: 0; }

@media (max-width: 980px) {
  .hero { padding: 116px 24px 72px; }
  .hero__display { font-size: clamp(2.6rem, 11vw, 4.2rem); }
  .hero__meta { grid-template-columns: repeat(2, 1fr); }
  .hero__meta-cell:nth-child(2) { border-right: 0; }
  .hero__meta-cell:nth-child(3), .hero__meta-cell:nth-child(4) { border-top: 1px solid rgba(245,242,236,.08); padding-top: 18px; margin-top: 18px; }
}

/* ======================== CANADA-STAGE CINEMATIC ========================
   Scroll-driven cinematic that bridges the dark hero and the paper
   manifesto. A 3D-extruded province map of Canada (the provinces ARE
   the map — no outline). 10 gold acquisition buildings + 1 distinctive
   HQ light up across scroll, then connect by golden lines centred on HQ.
   The sticky scene is split: 3D map on top, HUD strip below.
*/
.canada-stage {
  position: relative;
  height: 100vh;
  --p: 0;
}
.canada-stage__sticky {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Background fades from iron at p=0 to paper at p=1. */
  background: color-mix(in oklab,
    var(--iron) calc((1 - var(--p)) * 100%),
    var(--paper));
}

/* --- Top portion: 3D map viewport --- */
.canada-stage__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.canada-stage__map-wrap {
  position: absolute; inset: 0;
  perspective: 2200px;
  perspective-origin: 50% 35%;
  pointer-events: none;
}
.canada-stage__map {
  width: 100%; height: 100%;
  display: block;
  /* Flat top-down. No tilt — the isometric buildings carry the 3D feel. */
}

/* --- Flat province outlines. Each province is rendered as an outlined
   polygon (no fill). Shared edges between adjacent provinces produce
   the province dividers. The isometric buildings give the 3D depth. */
.cs-land-side { display: none; }
.cs-land-top {
  fill: none;
  stroke: color-mix(in oklab,
    rgba(245,242,236,0.42) calc((1 - var(--p)) * 100%),
    rgba(11,11,13,0.30));
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: stroke 600ms var(--ease);
}

/* --- Buildings --- */
.cs-building polygon { transition: fill 500ms var(--ease); }
.cs-b-left {
  fill: color-mix(in oklab,
    rgba(245,242,236,0.34) calc((1 - var(--p)) * 100%),
    rgba(11,11,13,0.34));
}
.cs-b-right {
  fill: color-mix(in oklab,
    rgba(245,242,236,0.46) calc((1 - var(--p)) * 100%),
    rgba(11,11,13,0.44));
}
.cs-b-top {
  fill: color-mix(in oklab,
    rgba(245,242,236,0.62) calc((1 - var(--p)) * 100%),
    rgba(11,11,13,0.55));
}

/* --- Gold acquisition buildings: glow + pop when lit --- */
.cs-building--gold .cs-b-inner,
.cs-building--hq .cs-b-inner {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 620ms cubic-bezier(0.22, 1.4, 0.4, 1),
              opacity 460ms ease-out;
}
.cs-building--gold.is-lit .cs-b-inner { transform: scale(1.18) translateY(-2px); }
.cs-building--gold.is-lit .cs-b-left  { fill: var(--gold-deep)  !important; }
.cs-building--gold.is-lit .cs-b-right { fill: var(--gold)       !important; }
.cs-building--gold.is-lit .cs-b-top   { fill: var(--gold-light) !important; }
.cs-building--gold.is-lit {
  filter: drop-shadow(0 2px 10px rgba(212,165,90,0.55))
          drop-shadow(0 0 18px rgba(212,165,90,0.35));
  transition: filter 500ms var(--ease);
}

/* --- HQ building: bigger, deeper gold, with antenna spire + dot
   that pulses to mark it as the centre of the platform. */
.cs-building--hq.is-lit .cs-b-left  { fill: #8a6624 !important; }
.cs-building--hq.is-lit .cs-b-right { fill: var(--gold-deep) !important; }
.cs-building--hq.is-lit .cs-b-top   { fill: var(--gold) !important; }
.cs-building--hq.is-lit {
  filter: drop-shadow(0 4px 18px rgba(212,165,90,0.70))
          drop-shadow(0 0 28px rgba(212,165,90,0.55));
}
.cs-hq-spire {
  stroke: var(--gold-light);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.cs-hq-dot {
  fill: var(--gold-light);
  animation: csHqPulse 2.2s ease-in-out infinite;
}
@keyframes csHqPulse {
  0%, 100% { opacity: 1; r: 2.4; }
  50%      { opacity: 0.55; r: 3.2; }
}

/* --- Connection lines (HQ spokes + peer links) --- */
.cs-link {
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  stroke-dashoffset: var(--len, 1000);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(212,165,90,0.55));
  transition: stroke-dashoffset 1300ms cubic-bezier(0.5, 0, 0.2, 1),
              opacity 360ms var(--ease);
}
.cs-link.is-drawn { stroke-dashoffset: 0; opacity: 0.92; }

/* --- Team mesh: the distributed firm. Lines draw on, then glow. --- */
.cs-mesh {
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  fill: none;
  stroke-dashoffset: var(--len, 1000);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(212,165,90,0.6));
  transition: stroke-dashoffset 1100ms cubic-bezier(0.5, 0, 0.2, 1),
              opacity 360ms var(--ease);
}
.cs-mesh.is-drawn {
  stroke-dashoffset: 0;
  opacity: 0.7;
  animation: csMeshGlow 3.4s ease-in-out infinite;
}
@keyframes csMeshGlow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; }
}

/* --- Pioneera beacons: glowing remote-presence nodes --- */
.cs-beacon {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.cs-beacon.is-lit { opacity: 1; }
.cs-beacon-core {
  fill: var(--gold-light);
  filter: drop-shadow(0 0 5px rgba(212,165,90,0.95))
          drop-shadow(0 0 12px rgba(212,165,90,0.6));
}
.cs-beacon-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cs-beacon.is-lit .cs-beacon-ring {
  animation: csBeaconPulse 2.9s ease-out infinite;
}
.cs-beacon.is-lit .cs-beacon-ring--2 { animation-delay: 1.45s; }
@keyframes csBeaconPulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  75%  { transform: scale(3.2);  opacity: 0; }
  100% { transform: scale(3.2);  opacity: 0; }
}

/* --- City labels float in HTML above the SVG and are positioned each
   frame by JS, projecting world coords into the live viewBox.
   Each label is a small pill badge anchored ABOVE its building.
   The whole label container fades out during the closing zoom-out. --- */
.canada-stage__labels {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.cs-pin-label {
  position: absolute;
  transform: translate(-50%, -100%) scale(var(--label-scale, 1));
  transform-origin: 50% 100%;
  margin-top: -4px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(11,11,13,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,165,90,0.42);
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
  text-align: center;
  /* A tiny gold tick below the pill connects it to the building */
  --tick-h: 8px;
}
.cs-pin-label::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: var(--tick-h);
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 6px 1px rgba(212,165,90,0.45);
}
.cs-pin-label.is-on { opacity: 1; }
.cs-pin-label em {
  font-style: normal; color: var(--gold);
  font-size: 9px; letter-spacing: .16em;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid rgba(212,165,90,0.38);
}
/* Team-beacon labels: distinct from the city pills */
.cs-pin-label--team {
  border-color: var(--gold);
  background: rgba(11,11,13,0.82);
  --tick-h: 12px;
}
.cs-pin-label--team em { color: var(--gold-light); }
/* HQ label: distinct — larger, with a small pill-shape "HQ" tag */
.cs-pin-label--hq {
  font-size: 11px; letter-spacing: .18em;
  font-weight: 600;
  border-color: var(--gold);
  --tick-h: 14px;
}
.cs-pin-label--hq em {
  background: var(--gold);
  color: var(--iron);
  padding: 2px 6px;
  font-weight: 700;
  letter-spacing: .14em;
  border-left: 0;
  margin-left: 6px;
}

/* --- Province labels: italic serif, centered at polygon centroid.
   Subtle and quiet — they should help geographic context without
   competing with the gold buildings + city pills. --- */
.cs-province-label {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--label-scale, 1));
  transform-origin: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(245,242,236,0.36);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
  text-shadow: 0 0 10px rgba(11,11,13,0.85), 0 0 22px rgba(11,11,13,0.55);
}
.cs-province-label.is-on { opacity: 1; }

/* --- Closing fade-out: as "Pioneera Ventures" fades in, the map lines
   and the 490 grey factories fade out, leaving only HQ, the 10 gold
   acquisitions, and the 14 gold connection lines on screen. All
   transitions complete by p=0.95 so the final shot can HOLD from 0.96
   to 1.00 — giving the viewer time to see the end frame. --- */
.cs-land-top {
  opacity: clamp(0, calc(1 - max(0, (var(--p) - 0.88) / 0.07)), 1);
}
.cs-dot {
  opacity: 1;
}

/* --- Closing title: Pioneera Ventures fades in over the map as the
   camera zooms out and all the city/province labels fade out. --- */
.cs-final-title {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, calc(24px * (1 - clamp(0, (var(--p) - 0.91) / 0.05, 1))));
  text-align: center;
  z-index: 6;
  pointer-events: none;
  width: min(900px, 92vw);
  opacity: clamp(0, calc((var(--p) - 0.91) / 0.05), 1);
}
.cs-final-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.cs-final-eyebrow::before,
.cs-final-eyebrow::after {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--gold);
}
.cs-final-title h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 0 40px rgba(11,11,13,0.88), 0 0 80px rgba(11,11,13,0.6);
}
.cs-final-title h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
}

/* --- Bottom portion: HUD strip beneath the map --- */
.canada-stage__hud {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 32px;
  padding-left: max(32px, calc((100% - var(--container-max)) / 2));
  padding-right: max(32px, calc((100% - var(--container-max)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: end;
  border-top: 1px solid color-mix(in oklab,
    rgba(245,242,236,0.18) calc((1 - var(--p)) * 100%),
    rgba(11,11,13,0.10));
  pointer-events: none;
}
.cs-hud-text { max-width: 720px; }
.cs-eyebrow { display: flex; align-items: center; gap: 16px; }
.cs-eye-num {
  font-family: var(--font-serif); font-style: italic; font-size: 0.92rem;
  color: color-mix(in oklab,
    var(--gold-light) calc((1 - var(--p)) * 100%),
    var(--gold-deep));
}
.cs-eye-rule { width: 40px; height: 2px; background: var(--gold); }
.cs-eye-mono {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklab,
    rgba(245,242,236,0.62) calc((1 - var(--p)) * 100%),
    var(--steel));
}
.cs-h {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.08; letter-spacing: -0.022em;
  margin: 14px 0 0;
  color: color-mix(in oklab,
    var(--paper) calc((1 - var(--p)) * 100%),
    var(--iron));
}
.cs-h em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--gold);
}
.cs-lede {
  font-family: var(--font-serif); font-size: 0.98rem; line-height: 1.5;
  max-width: 56ch; margin: 12px 0 0;
  color: color-mix(in oklab,
    rgba(245,242,236,0.72) calc((1 - var(--p)) * 100%),
    var(--steel));
}

/* Stats: three figures inline along the right side */
.cs-stats {
  display: flex; gap: 40px; align-items: flex-end;
  justify-content: flex-end;
}
.cs-stat { display: flex; flex-direction: column; gap: 6px; }
.cs-stat-num {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1; letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
  color: color-mix(in oklab,
    var(--paper) calc((1 - var(--p)) * 100%),
    var(--iron));
}
.cs-stat--accent .cs-stat-num { color: var(--gold); }
.cs-stat--focus { min-width: 180px; }
.cs-stat-focus {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.05; letter-spacing: -0.012em;
  color: color-mix(in oklab,
    var(--gold-light) calc((1 - var(--p)) * 100%),
    var(--gold-deep));
}
.cs-stat-lab {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab,
    rgba(245,242,236,0.62) calc((1 - var(--p)) * 100%),
    var(--steel));
}
.cs-stat-lab--head {
  color: color-mix(in oklab,
    rgba(245,242,236,0.62) calc((1 - var(--p)) * 100%),
    var(--gold-deep)) !important;
}

@media (max-width: 980px) {
  /* The scroll-driven 3D map is disabled on small screens (too heavy).
     The platform section becomes a full-height dark panel: the HUD text
     sits centred with generous whitespace around it. */
  .canada-stage { height: auto; }
  .canada-stage__sticky {
    position: static;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--iron);
    justify-content: center;
  }
  .canada-stage__viewport { display: none; }
  .cs-stats { display: none; }
  .canada-stage__hud {
    grid-template-columns: 1fr;
    padding: 80px 30px;
    gap: 22px;
    border-top: 0;
  }
  .cs-h { font-size: clamp(1.6rem, 6vw, 2.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-link, .cs-mesh { transition-duration: 200ms; }
  .cs-hq-dot { animation: none; }
  .cs-beacon-ring,
  .cs-mesh.is-drawn { animation: none; }
  .cs-mesh.is-drawn { opacity: 0.7; }
}

/* =================== STAGE LOCK + HUD TRANSITION + DOTS ===================
   Map area locks to iron-dark. The HUD strip transitions iron → paper
   at the end of stage scroll via --hud-p (computed in JS). */

/* Map area: locked to dark */
.canada-stage__sticky { background: var(--iron); }
.cs-land-top { stroke: rgba(245,242,236,0.42); display: none; }
.cs-land-side { display: none; }
.cs-b-left   { fill: rgba(245,242,236,0.34); }
.cs-b-right  { fill: rgba(245,242,236,0.46); }
.cs-b-top    { fill: rgba(245,242,236,0.62); }
.cs-pin-label { color: rgba(245,242,236,0.86); }
.cs-pin-label--hq { color: var(--paper); }

/* HUD strip: transitions iron → paper at p > 0.82 via --hud-p */
.canada-stage__hud {
  background: color-mix(in oklab, var(--iron) calc((1 - var(--hud-p, 0)) * 100%), var(--paper));
  border-top-color: color-mix(in oklab, rgba(245,242,236,0.18) calc((1 - var(--hud-p, 0)) * 100%), rgba(11,11,13,0.10));
}
.cs-h          { color: color-mix(in oklab, var(--paper) calc((1 - var(--hud-p, 0)) * 100%), var(--iron)); }
.cs-lede       { color: color-mix(in oklab, rgba(245,242,236,0.72) calc((1 - var(--hud-p, 0)) * 100%), var(--steel)); }
.cs-eye-num    { color: color-mix(in oklab, var(--gold-light) calc((1 - var(--hud-p, 0)) * 100%), var(--gold-deep)); }
.cs-eye-mono   { color: color-mix(in oklab, rgba(245,242,236,0.62) calc((1 - var(--hud-p, 0)) * 100%), var(--steel)); }
.cs-stat-num   { color: color-mix(in oklab, var(--paper) calc((1 - var(--hud-p, 0)) * 100%), var(--iron)); }
.cs-stat--accent .cs-stat-num { color: var(--gold); }
.cs-stat-focus { color: color-mix(in oklab, var(--gold-light) calc((1 - var(--hud-p, 0)) * 100%), var(--gold-deep)); }
.cs-stat-lab   { color: color-mix(in oklab, rgba(245,242,236,0.62) calc((1 - var(--hud-p, 0)) * 100%), var(--steel)); }
.cs-stat-lab--head { color: color-mix(in oklab, rgba(245,242,236,0.62) calc((1 - var(--hud-p, 0)) * 100%), var(--gold-deep)) !important; }

/* 500-factory field: 490 grey 3D mini-factories + 10 gold acquisition
   factories + 1 HQ (the largest box on the map). Each factory has a
   small smokestack rising from its top face. HQ stays a clean box
   (no chimney) with the antenna spire marking it.

   Grey dots POP IN one by one as the user scrolls (factories "coming
   to market"). The inner group is what scales/fades; the outer <g>
   keeps its translate. */
.cs-dot-inner {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(0.35);
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.22, 1.4, 0.4, 1),
              opacity 380ms ease-out;
}
.cs-dot.is-visible .cs-dot-inner {
  transform: scale(1);
  opacity: 1;
}
.cs-dot-top   { fill: rgba(245,242,236,0.52); }
.cs-dot-right { fill: rgba(245,242,236,0.36); }
.cs-dot-left  { fill: rgba(245,242,236,0.24); }
.cs-factory-stack { fill: rgba(245,242,236,0.38); }
.cs-building--gold .cs-factory-stack { fill: var(--gold-deep); }
.cs-building--gold.is-lit .cs-factory-stack { fill: var(--gold-light); }

/* Gold acquisitions are hidden until their `lit` threshold fires — so
   at scroll p=0 only the HQ is on screen, and each acquisition pops in
   as the camera arrives. HQ's .is-lit is set on render (always lit). */
.cs-building--gold:not(.is-lit) .cs-b-inner {
  opacity: 0;
  transform: scale(0.4);
}

/* (Dark-to-light curtain removed — the bottom HUD strip handles the handoff now.) */

/* ======================== SECTION SHELL ======================== */
.section { padding: 112px 32px; background: var(--paper); }
.section--iron { background: var(--iron); color: var(--fg-on-iron); }
.section__inner { max-width: var(--container-max); margin: 0 auto; }
.eyebrow-row { display: flex; align-items: center; gap: 16px; }
.eyebrow-num { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--gold-deep); }
.section--iron .eyebrow-num { color: var(--gold-light); }
.eyebrow-rule { width: 48px; height: 2px; background: var(--gold); }
.eyebrow-mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.section--iron .eyebrow-mono { color: var(--gold-light); }
.section__h { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; margin: 18px 0 0; color: var(--iron); }
.section--iron .section__h { color: var(--paper); }
.section__h em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--gold-deep); }
.section--iron .section__h em { color: var(--gold-light); }

/* ======================== MANIFESTO ======================== */
.manifesto { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; margin-top: 56px; }
.manifesto__rail { position: sticky; top: 100px; }
.manifesto__rail .roman { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--gold-deep); margin-bottom: 16px; }
.manifesto__rail h2 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; color: var(--iron); }
.manifesto__rail p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-top: 24px; }
.manifesto__body { columns: 2; column-gap: 48px; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.7; color: var(--iron); }
.manifesto__body p { margin: 0 0 1em; break-inside: avoid; }
.manifesto__body p:first-child::first-letter { font-family: var(--font-serif); font-weight: 500; font-size: 1.4em; color: var(--gold-deep); padding-right: 0.04em; }

/* ======================== THESIS SECTION ========================
   The thesis is buy-and-build. The section has four parts, each
   separated by a thin gold rule:
     1. Position — italicized headline + serif lede
     2. Five moves — the proprietary mechanism (Buy → Invest →
        Modernize → Grow → Platform here)
     3. Contrast — the usual buyer vs. Pioneera
     4. Math + terms — figures + deal-shape table
     5. Signature — Sam's pull quote
*/
.thesis .section__inner > * + .thesis__pos,
.thesis .section__inner > * + .thesis__moves,
.thesis .section__inner > * + .thesis__contrast { margin-top: 96px; }
.thesis .section__inner > .stats { margin-top: 24px; }

/* --- Position --- */
.thesis__pos { margin-top: 36px; max-width: 1180px; }
.thesis__tag {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--iron);
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--iron);
}
.thesis__tag em {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--gold-deep); letter-spacing: 0;
  text-transform: lowercase;
  font-size: 16px;
}
.thesis__h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.06; letter-spacing: -0.025em;
  color: var(--iron);
  margin: 22px 0 0;
  max-width: 24ch;
  text-wrap: pretty;
}
.thesis__h em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--gold-deep);
}
.thesis__lede {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--iron);
  margin: 24px 0 0;
  max-width: 64ch;
  text-wrap: pretty;
}
.thesis__lede strong {
  font-weight: 500;
  color: var(--gold-deep);
  font-style: italic;
}

/* --- Sub-section header (eyebrow + small heading) --- */
.thesis__sub { padding-top: 32px; border-top: 1px solid var(--rule); }
.thesis__sub--row { padding-top: 56px; margin-top: 56px; }
.thesis__sub-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.thesis__sub-h {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--iron);
  margin: 14px 0 0;
}
.thesis__sub-h em {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--gold-deep);
}

/* --- Five moves: the proprietary mechanism. 5 columns on desktop,
   each move sits under a gold top rule with mono number + serif italic
   verb + sans bold title + serif description. ---
*/
.thesis__moves { margin-top: 48px; }
.moves {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--iron);
}
.move {
  padding: 24px 22px 28px;
  border-right: 1px solid var(--rule);
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
}
.move:last-child { border-right: 0; }
.move::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--ease);
}
.move:hover::before, .moves:hover .move::before { transform: scaleX(1); }
.move__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.move__verb {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--iron);
  margin-top: 18px;
  display: block;
}
.move__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--iron);
  margin: 14px 0 0;
}
.move__desc {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel);
  margin: 10px 0 0;
  max-width: 30ch;
  text-wrap: pretty;
}
.move--anchor {
  background: linear-gradient(180deg, rgba(212,165,90,0.07) 0%, rgba(212,165,90,0) 60%);
}
.move--anchor .move__verb {
  color: var(--gold-deep);
}
.move--anchor::before {
  transform: scaleX(1);
  height: 3px;
}

/* --- Contrast: two columns --- */
.thesis__contrast { margin-top: 96px; }
.contrast {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--iron);
}
.contrast__col {
  padding: 28px 32px 32px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.contrast__col:last-child { border-right: 0; }
.contrast__col--us::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--gold);
}
.contrast__lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}
.contrast__col--us .contrast__lab { color: var(--gold-deep); }
.contrast__col ul {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
.contrast__col li {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--steel);
  padding-left: 24px;
  position: relative;
}
.contrast__col--us li { color: var(--iron); }
.contrast__col li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 14px; height: 1px;
  background: var(--rule-strong, rgba(11,11,13,0.22));
}
.contrast__col--us li::before { background: var(--gold); }
.contrast__col li em {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--gold-deep);
}

/* --- Terms: 4 deal-shape cells. Scoped under .thesis to outrank the
   older global `.terms` rule that defines a different layout. --- */
.thesis .terms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--iron);
  margin-top: 40px;
}
.thesis .term {
  padding: 22px 22px 26px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.thesis .term:last-child { border-right: 0; }
.thesis .term__lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
}
.term__val {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--iron);
  margin-top: 16px;
  display: flex; align-items: baseline; gap: 10px;
  font-feature-settings: "tnum" 1;
}
.term__val em {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.term__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--steel);
  margin-top: 12px;
  display: block;
}
.thesis__terms-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 18px 0 0;
  text-align: right;
}

/* --- Signature: founder pull quote --- */
.thesis__sig {
  margin: 96px 0 0;
  padding: 56px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 24px;
  align-items: start;
  max-width: 1100px;
}
.thesis__sig-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 120px;
  line-height: 0.6;
  color: var(--gold);
  margin-top: -10px;
}
.thesis__sig blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--iron);
  margin: 0;
  max-width: 36ch;
  text-wrap: pretty;
}
.thesis__sig figcaption {
  grid-column: 2;
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  max-width: 36ch;
}
.thesis__sig-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--iron);
}
.thesis__sig-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}

/* --- Three pillars: Vision, Growth, Automation. The value-creation
   layer we add inside the build. A clean 3-column grid with gold top
   rule, mono number, italic-serif verb, and one tight paragraph. ---
*/
/* ===== VALUE-CREATION SPINE ===== */
.build { margin-top: 64px; }
.build__steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--iron);
}
.build__step {
  padding: 28px 22px 30px;
  border-right: 1px solid var(--rule);
  position: relative; display: flex; flex-direction: column;
}
.build__step:last-child { border-right: 0; }
.build__step::before {
  content: ""; position: absolute; top: -4.5px; left: 22px;
  width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg);
}
.build__mark { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.build__unit {
  width: 9px; height: 9px;
  background: var(--gold); border: 1px solid var(--gold-deep); display: block;
}
.build__unit--target { background: transparent; border-color: var(--iron); }
.build__unit--lg { width: 15px; height: 15px; }
.build__num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); margin-top: 20px;
}
.build__verb {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--iron); margin: 10px 0 0;
}
.build__desc {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.5;
  color: var(--steel); margin: 14px 0 0; text-wrap: pretty;
}

/* Tightened spacing between thesis blocks now that we have only three. */
.thesis .section__inner > .stats { margin-top: 56px; }

/* --- Responsive collapse for the multi-column blocks --- */
@media (max-width: 980px) {
  .build__steps { grid-template-columns: 1fr; border-top: 0; }
  .build__step { border-right: 0; border-top: 1px solid var(--iron); }
  .build__step::before { left: 0; }
}
@media (max-width: 980px) {
  .moves { grid-template-columns: repeat(2, 1fr); }
  .move { min-height: 0; border-bottom: 1px solid var(--rule); }
  .move:nth-child(2n) { border-right: 0; }
  .thesis .terms { grid-template-columns: repeat(2, 1fr); }
  .thesis .term { border-bottom: 1px solid var(--rule); }
  .thesis .term:nth-child(2n) { border-right: 0; }
  .contrast { grid-template-columns: 1fr; }
  .contrast__col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .contrast__col:last-child { border-bottom: 0; }
  .thesis__sig { grid-template-columns: 1fr; }
  .thesis__sig figcaption { grid-column: 1; }
}
@media (max-width: 640px) {
  .moves { grid-template-columns: 1fr; }
}



/* ======================== SECTORS ======================== */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.sector { display: flex; flex-direction: column; gap: 18px; position: relative; padding-top: 8px; transition: transform 600ms var(--ease); }
.sector::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.sector:hover::before { transform: scaleX(1); }
.sector__img { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--iron); }
.sector__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); filter: grayscale(60%) contrast(1.05); }
.sector:hover .sector__img img { transform: scale(1.06); }
.sector__img::before { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(rgba(242,239,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,.06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.sector__img::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 50%, rgba(11,11,13,.85) 100%); pointer-events: none; }
.sector__cap { position: absolute; left: 16px; bottom: 14px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }.sector__hdr { display: flex; align-items: center; justify-content: space-between; }
.sector__num { font-family: var(--font-sans); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; color: var(--gold-deep); }
.sector__badge { width: 32px; height: 32px; border: 1px solid var(--gold); color: var(--gold-deep); font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sector h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.012em; color: var(--iron); margin: 0; }
.sector p { font-size: 15px; line-height: 1.55; color: var(--iron); margin: 0; }
.sector__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sector__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding: 4px 10px; border: 1px solid var(--rule); }
/* ======================== APPROACH ======================== */
.approach { margin-top: 56px; display: grid; grid-template-columns: 56px 1fr; gap: 56px; }
.approach__rail { position: relative; }
.approach__rail-line { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px; background: var(--rule-strong); }
.approach__rail-line::after { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--gold); height: var(--progress, 0%); transition: height 600ms var(--ease); }
.approach__steps { display: flex; flex-direction: column; gap: 80px; }
.approach__step { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; position: relative; }
.approach__rail-dots { position: absolute; left: 0; top: 0; height: 100%; }
.approach__dot { position: absolute; left: 21px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-strong); transition: background-color 400ms var(--ease), border-color 400ms var(--ease); }
.approach__dot.is-on { background: var(--gold); border-color: var(--gold); }
.approach__step-head { display: flex; align-items: baseline; gap: 18px; }
.approach__num { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.16em; line-height: 1; color: var(--gold-deep); }
.approach__name { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--gold-deep); }
.approach__when { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--iron); padding: 4px 8px; border: 1px solid color-mix(in oklab, var(--iron) 30%, transparent); border-radius: 2px; }
.section__sub { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.55; color: var(--iron); max-width: 60ch; margin: 8px 0 36px; }
.approach__body h3 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.approach__body p { font-size: 15px; line-height: 1.6; color: var(--iron); margin: 0; max-width: 48ch; }

/* terms table */
.terms { margin-top: 64px; border-top: 1px solid var(--iron); display: grid; grid-template-columns: 1fr; }
.terms__row { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.terms__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.terms__v { font-family: var(--font-serif); font-size: 1.0625rem; color: var(--iron); }
.terms__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--steel); }

/* ======================== PULL QUOTE ======================== */
.quote { padding: 144px 32px; position: relative; overflow: hidden; }
.quote .grid-overlay { position: absolute; inset: 0; opacity: .4; }
.quote__mark { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; opacity: .04; pointer-events: none; }
.quote__inner { max-width: 980px; margin: 0 auto; position: relative; }
.quote__rule { width: 48px; height: 2px; background: var(--gold); margin-bottom: 32px; }
.quote__text { font-family: var(--font-serif); font-style: normal; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.18; color: var(--paper); border-left: 2px solid var(--gold); padding-left: 32px; max-width: 24ch; margin: 0; }
.quote__text em { color: var(--gold-light); font-style: italic; }
.quote__cite { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-top: 28px; padding-left: 32px; }

/* ======================== AUDIENCE CTAS ======================== */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 56px; border-top: 1px solid var(--iron); border-bottom: 1px solid var(--iron); }
.aud { padding: 56px 48px; position: relative; min-height: 360px; display: flex; flex-direction: column; gap: 18px; transition: background-color 400ms var(--ease); }
.aud::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.aud:hover::before { transform: scaleX(1); }
.aud--founder { background: #fafaf8; }
.aud--investor { background: var(--iron); color: var(--paper); border-left: 1px solid var(--rule-on-iron); }
.aud__eye { font-family: var(--font-serif); font-style: italic; color: var(--gold-deep); font-size: 1rem; }
.aud--investor .aud__eye { color: var(--gold-light); }
.aud h3 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.1; max-width: 18ch; margin: 0; }
.aud p { font-size: 15px; line-height: 1.55; max-width: 38ch; margin: 0; }
.aud--investor p { color: var(--fg-on-iron); }
.aud__arrow { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.aud--investor .aud__arrow { color: var(--gold-light); }
.aud__arrow::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width 300ms var(--ease), transform 300ms var(--ease); }
.aud:hover .aud__arrow::after { width: 36px; transform: translateX(4px); }

/* ======================== INSIGHTS ======================== */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.insight { display: flex; flex-direction: column; gap: 14px; }
.insight__img { aspect-ratio: 5/3; position: relative; overflow: hidden; background: var(--iron); }
.insight__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); filter: grayscale(40%); }
.insight:hover .insight__img img { transform: scale(1.05); }
.insight__img::before { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(rgba(242,239,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,.06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.insight__fig { position: absolute; top: 14px; left: 16px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.insight__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-top: 4px; }
.insight h4 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--iron); margin: 0; }
.insight__blurb { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.55; color: var(--steel); margin: 0; max-width: 32ch; }
.insight__cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 10px; }
.insight__cta::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width 300ms var(--ease), transform 300ms var(--ease); }
.insight:hover .insight__cta::after { width: 24px; transform: translateX(4px); }

/* ======================== PHOTO HERO ======================== */
.photo-hero { position: relative; height: 720px; overflow: hidden; background: var(--iron); }
.photo-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(85%) contrast(1.1); }
.photo-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(135deg, rgba(11,11,13,.4) 0%, rgba(11,11,13,.85) 100%); }
.photo-hero::after { content: ""; position: absolute; inset: 0; z-index: 3; background-image: linear-gradient(rgba(242,239,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,.06) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.photo-hero__cap { position: absolute; left: 32px; right: 32px; bottom: 48px; max-width: var(--container-max); margin: 0 auto; z-index: 4; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; color: var(--paper); }
.photo-hero__fig { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
.photo-hero h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; max-width: 18ch; }
.photo-hero h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--gold-light); }
.photo-hero__col { display: flex; flex-direction: column; gap: 8px; min-width: 200px; text-align: right; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.photo-hero__col span:nth-child(odd) { color: var(--fg-on-iron-muted); }

/* ======================== TEAM ======================== */
.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 56px; }
.member__photo { aspect-ratio: 1/1; overflow: hidden; background: var(--iron); position: relative; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(100%); transition: filter 600ms var(--ease), transform 600ms var(--ease); }
.member:hover .member__photo img { filter: grayscale(0%); transform: scale(1.05); }
.member__role { font-family: var(--font-serif); font-style: italic; font-size: .9rem; color: var(--gold-deep); margin: 14px 0 4px; }
.member__name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--iron); margin: 0 0 6px; }
.member__bio { font-family: var(--font-serif); font-size: .9rem; line-height: 1.5; color: var(--steel); margin: 0; }
.member__namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.member__namerow .member__name { margin: 0; }
.member__links { display: inline-flex; gap: 6px; }
.member__link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--rule-strong); color: var(--steel); transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.member__link:hover { color: var(--gold-deep); border-color: var(--gold-deep); background: none; }
.member__link svg { width: 13px; height: 13px; display: block; }

/* ======================== FOOTER ======================== */
.footer { background: var(--iron); color: var(--paper); padding: 80px 32px 32px; }
.footer__inner { max-width: var(--container-max); margin: 0 auto; }
.footer__top { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--gold-light); border-bottom: 1px solid var(--rule-on-iron); padding-bottom: 48px; max-width: 28ch; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding: 56px 0; border-bottom: 1px solid var(--rule-on-iron); }
.footer__brand img { height: 36px; margin-bottom: 18px; }
.footer__brand .rule { width: 64px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.footer__brand .word { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.32em; line-height: 1.2; font-size: 13px; }
.footer__col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 18px; font-weight: 500; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-family: var(--font-sans); font-size: 14px; color: var(--paper); }
.footer__col a:hover { color: var(--gold); background: none; }
.footer__legal { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-on-iron-muted); }

@media (max-width: 900px) {
  .hero { padding-top: 64px; }
  .hero__meta, .stats, .sectors, .insights, .audience, .footer__cols { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .manifesto { grid-template-columns: 1fr; gap: 32px; }
  .manifesto__rail { position: static; }
  .manifesto__body { columns: 1; }
  .approach__step { grid-template-columns: 1fr; gap: 16px; }
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
}

/* ======================== MOBILE (phones) ======================== */
@media (max-width: 600px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__btn { justify-content: center; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta-cell { border-right: 0; border-top: 1px solid rgba(245,242,236,.10); padding: 16px 0 0; margin-top: 16px; }
  .hero__meta-cell:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

  .sectors, .insights, .audience, .footer__cols { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }

  .aud { padding: 40px 24px; min-height: 0; }
  .aud--investor { border-left: 0; border-top: 1px solid var(--iron); }
  .aud h3 { font-size: 1.5rem; }

  .section__sub { margin-top: 14px; }
  .approach { grid-template-columns: 1fr; gap: 0; }
  .approach__rail { display: none; }
  .approach__steps { gap: 56px; }
  .approach__num { font-size: 12px; }

  .photo-hero { height: 460px; }
  .photo-hero__cap { grid-template-columns: 1fr; gap: 18px; }
  .photo-hero__col { text-align: left; min-width: 0; }

  .quote { padding: 84px 22px; }

  .footer__cols { gap: 32px; padding: 40px 0; }
  .footer__legal { flex-direction: column; gap: 8px; }

  .nav__est { display: none; }
}

/* ======================== INTAKE FORMS ======================== */
.form-page-body { background: var(--paper); }
.form-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--rule); }
.form-nav__brand img { height: 34px; display: block; }
.form-nav__back { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.form-page { padding: 64px 32px 96px; }
.form-page__inner { max-width: 600px; margin: 0 auto; }
.form-page__h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--iron); margin: 18px 0 0; }
.form-page__intro { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6; color: var(--steel); margin: 14px 0 0; max-width: 52ch; }
.intake-form { margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.field--req > label::after { content: " *"; }
.field input, .field select, .field textarea { font-family: var(--font-sans); font-size: 16px; color: var(--iron); background: #fff; border: 1px solid var(--rule-strong); padding: 12px 14px; width: 100%; border-radius: 2px; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); }
.nda-note { margin-top: 28px; border: 1px solid var(--gold); background: #fafaf8; padding: 18px 20px; font-family: var(--font-serif); font-size: 0.98rem; line-height: 1.55; color: var(--iron); }
.nda-ack { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--iron); }
.nda-ack input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.form-submit { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--iron); background: var(--gold); border: 0; padding: 16px 30px; cursor: pointer; align-self: flex-start; margin-top: 6px; transition: background-color 200ms var(--ease); }
.form-submit:hover { background: var(--gold-light); }
.hidden-field { position: absolute !important; left: -9999px; }
@media (max-width: 600px) { .form-nav { padding: 16px 20px; } .form-page { padding: 44px 20px 72px; } .form-submit { align-self: stretch; text-align: center; } }

/* ======================== INSIGHT ARTICLES ======================== */
.article { padding: 60px 32px 96px; }
.article__inner { max-width: 680px; margin: 0 auto; }
.article__h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--iron); margin: 18px 0 0; }
.article__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin: 20px 0 0; }
.article__lede { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--gold-deep); margin: 26px 0 0; }
.article__body { margin-top: 8px; }
.article__body h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.3; color: var(--iron); margin: 42px 0 0; }
.article__body p { font-family: var(--font-serif); font-size: 1.07rem; line-height: 1.72; color: var(--iron); margin: 16px 0 0; }
.article__stat { margin: 34px 0 0; border-left: 2px solid var(--gold); padding: 4px 0 4px 22px; }
.article__stat strong { display: block; font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; color: var(--iron); }
.article__stat span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.article__sources { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--rule); }
.article__sources h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.article__sources ol { margin: 14px 0 0; padding-left: 18px; }
.article__sources li { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: var(--steel); margin-bottom: 7px; }
.article__sources a { color: var(--gold-deep); word-break: break-word; }
.article__note { margin-top: 22px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: var(--steel); }
.article__foot { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; gap: 28px; flex-wrap: wrap; }
.article__foot a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
@media (max-width: 600px) { .article { padding: 44px 20px 72px; } }

/* ===== Thesis one-pager ===== */
.thesis-download { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--iron); background: var(--gold); padding: 14px 24px; transition: background-color 200ms var(--ease); }
.thesis-download:hover { background: var(--gold-light); }
.thesis-criteria { margin-top: 16px; border: 1px solid var(--gold); }
.thesis-criteria__row { display: flex; gap: 18px; padding: 13px 20px; border-bottom: 1px solid var(--rule); }
.thesis-criteria__row:last-child { border-bottom: 0; }
.thesis-criteria__k { flex: 0 0 116px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); padding-top: 4px; }
.thesis-criteria__v { font-family: var(--font-serif); font-size: 1rem; line-height: 1.5; color: var(--iron); }
@media (max-width: 600px) { .thesis-criteria__row { flex-direction: column; gap: 4px; } .thesis-criteria__k { flex: none; } }