/* ============================================================
   CenterNode Group
   Palette is anchored to the wordmark's own green (#5B9E03),
   with a text-safe deep green for anything under 24px.
   ============================================================ */

:root {
  /* Brand */
  --brand:        #5B9E03;  /* the logo node. Large elements only, 3.33:1 on white */
  --brand-deep:   #46700E;  /* text-safe green, 6.5:1 on white */
  --brand-dark:   #2C3F18;  /* dark institutional green, section anchor */
  --brand-ink:    #1B2810;  /* deepest green, footer */

  /* Neutrals */
  --ink:          #1A1A1A;
  --body:         #33404E;
  --muted:        #57647A;
  --hairline:     #DCE3D3;
  --surface:      #FFFFFF;
  --surface-alt:  #F6F8F2;
  --surface-card: #EEF3E6;

  /* On dark */
  --on-dark:          #EEF2E8;
  --on-dark-muted:    #AFBFA2;
  --on-dark-hairline: rgba(238, 242, 232, 0.16);

  /* Type */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --text:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Rhythm */
  --shell:     1200px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --radius:    4px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(27, 40, 16, 0.06), 0 2px 8px rgba(27, 40, 16, 0.05);
  --shadow-md: 0 2px 4px rgba(27, 40, 16, 0.06), 0 12px 28px rgba(27, 40, 16, 0.10);
}

/* ─────────────────────────── Reset ─────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); color: var(--ink); }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
address { font-style: normal; }

/* ───────────────── Browser surfaces (themed, not default) ───────────────── */

::selection { background: rgba(91, 158, 3, 0.24); color: var(--ink); }
:root { caret-color: var(--brand-deep); accent-color: var(--brand-deep); }

:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.approach :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible { outline-color: var(--brand); }

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: #9DB588 var(--surface-alt); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-alt); }
::-webkit-scrollbar-thumb {
  background: #9DB588;
  border-radius: 99px;
  border: 3px solid var(--surface-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-deep); }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200;
  background: var(--brand-ink); color: var(--on-dark);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  font-family: var(--display); font-weight: 600; text-decoration: none;
}

/* ─────────────────────────── Layout ─────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

/* ─────────────────────────── Typography ─────────────────────────── */

.h-display {
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.h-section {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.h-sub {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.68;
  max-width: 60ch;
}

.fine {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;
}

/* ─────────────────────────── Buttons ─────────────────────────── */

.btn {
  --btn-bg: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.btn-lg { padding: 0.95rem 1.9rem; font-size: 0.9375rem; }

.btn-solid {
  background: var(--btn-bg);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-solid:hover {
  background: #3B5D0B;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-solid:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─────────────────────────── Header ─────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-stuck {
  background: var(--brand-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 28px rgba(27, 40, 16, 0.24);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.75rem;
}

.logo { display: block; flex: none; line-height: 0; }
.logo img { width: 168px; height: auto; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2rem; }
.nav a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a:hover { color: #fff; border-bottom-color: var(--brand); }

.header-cta { flex: none; }

/* Five links plus the CTA overflowed a 1000px-and-under viewport at the desktop gaps;
   tighten them until the mobile switch at 780px takes over. */
@media (max-width: 1000px) {
  .header-inner { gap: 1rem; }
  .nav ul { gap: 1rem; }
}

.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}
.menu-bars { display: block; width: 26px; }
.menu-bars span {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.menu-bars span + span { margin-top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-bars span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-nav { background: var(--brand-ink); }
.mobile-nav ul { padding: 0.5rem var(--gutter) 1.5rem; }
.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  border-bottom: 1px solid var(--on-dark-hairline);
}

/* ─────────────────────────── Hero ─────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Full viewport, with no max: an 860px cap made the hero 92% of a laptop screen
     but only ~72% of a tall monitor, so its presence changed with the reader.
     svh, not vh, so mobile browser chrome cannot push the content out of frame. */
  min-height: 100svh;
  padding-block: 9rem 7rem;
  overflow: hidden;
  isolation: isolate;
}
/* Older browsers without svh support still get a full-height hero. */
@supports not (height: 100svh) {
  .hero { min-height: 100vh; }
}

.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; will-change: transform; }
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 58% 42%;
  animation: hero-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
/* Footage carries its own motion, so no drift is needed on top of it. */
.hero-media video { animation: none; }

@keyframes hero-drift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1%, 0); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Three layers, painted bottom-up: a vertical anchor, then the brand-green wash
     that gives the footage its colour, then a left-anchored scrim carrying the
     headline. DEFAULT is the heavier pairing, for the still and for anyone whose
     browser blocks autoplay. Measured worst point 3.9:1 against a 3:1 floor. */
  background:
    linear-gradient(100deg, rgba(27, 40, 16, 0.80) 0%, rgba(27, 40, 16, 0.50) 44%, rgba(27, 40, 16, 0.18) 70%, rgba(27, 40, 16, 0.04) 88%),
    linear-gradient(118deg, rgba(44, 63, 24, 0.80) 0%, rgba(70, 112, 14, 0.64) 46%, rgba(91, 158, 3, 0.44) 100%),
    linear-gradient(to bottom, rgba(27, 40, 16, 0.50) 0%, rgba(27, 40, 16, 0.24) 45%, rgba(27, 40, 16, 0.62) 100%);
  transition: opacity 0.4s var(--ease);
}

/* Footage is brighter than the still (this clip throws a lot of specular glare off
   the panels), so the green does the work the black scrim would otherwise have to.
   Measured across every frame of the loop: headline 3.58:1, supporting copy 7.0:1,
   with a stronger green cast than the default. main.js only adds this class once
   playback is actually confirmed running. Re-measure if the clip changes. */
.hero.is-video::after {
  background:
    linear-gradient(100deg, rgba(27, 40, 16, 0.70) 0%, rgba(27, 40, 16, 0.38) 44%, rgba(27, 40, 16, 0.12) 70%, rgba(27, 40, 16, 0) 88%),
    linear-gradient(118deg, rgba(44, 63, 24, 0.80) 0%, rgba(70, 112, 14, 0.64) 46%, rgba(91, 158, 3, 0.44) 100%),
    linear-gradient(to bottom, rgba(27, 40, 16, 0.38) 0%, rgba(27, 40, 16, 0.14) 45%, rgba(27, 40, 16, 0.54) 100%);
}

.hero-inner { position: relative; }

.hero-title {
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 17ch;
  text-wrap: balance;
}

/* The marker ring, the page's one authored motion moment.
   Echoes the node inside the wordmark's "o". */
.marked { position: relative; display: inline-block; white-space: nowrap; }
.marked .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 126%;
  height: 168%;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.marked .ring path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: ring-draw 1.15s var(--ease) 0.45s forwards;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }

.hero-lede {
  margin-top: 1.75rem;
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.62;
}

.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.875rem; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.scroll-cue svg { width: 15px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* ───────────────────── Positioning statement ───────────────────── */

.positioning { background: var(--surface); }
.positioning .split-lead .h-display { color: var(--ink); }

/* ─────────────────────────── Platform ─────────────────────────── */

.platform { background: var(--surface-alt); }
.platform .h-section { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.pillars { border-top: 1px solid var(--hairline); }

/* Three statements, not three list items. The name carries display weight so the
   section has presence without needing ornament. */
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  gap: clamp(1rem, 5vw, 4rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  padding-left: clamp(0.75rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--hairline);
}

/* A rule that grows on approach. The row is not a link, so this is a reward for
   reading, not an affordance. Scaled, not grown: animating height or padding would
   force a layout pass on every frame. */
.pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(2.25rem, 4vw, 3.25rem);
  bottom: clamp(2.25rem, 4vw, 3.25rem);
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.pillar:hover::before { transform: scaleY(1); }

/* The contents shift, not the row, because translating the row would drag its hairline
   along with it. */
.pillar dt, .pillar dd { transition: transform 0.35s var(--ease); }
.pillar:hover dt, .pillar:hover dd { transform: translateX(8px); }

.pillar dt {
  font-family: var(--display);
  /* Deliberately just under .h-section (2.5rem): the pillars carry weight, but a
     section's own title should still lead it. */
  font-size: clamp(1.625rem, 2.9vw, 2.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.pillar:hover dt { color: var(--brand-deep); }

.pillar dd { font-size: 1.0625rem; line-height: 1.7; max-width: 58ch; }

/* What each business actually covers. This is the section's substance. It replaced
   an icon, and it should never be reduced back to decoration. */
.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.25rem;
}
.pillar-tags li {
  position: relative;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-deep);
}
.pillar-tags li + li::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 0.35em;
  width: 1px;
  height: 0.85em;
  background: var(--hairline);
}



/* ─────────────────────────── Approach ─────────────────────────── */

.approach {
  background: var(--brand-dark);
  color: var(--on-dark);
  padding-block: var(--section-y);
}
.approach .approach-title {
  color: #fff;
  max-width: 22ch;
}
.approach-body {
  margin-top: clamp(1.25rem, 2.2vw, 1.7rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}
.approach-body p { max-width: 58ch; line-height: 1.62; }
.approach-body .emphasis {
  grid-column: 1 / -1;
  margin-top: clamp(0.4rem, 1vw, 0.55rem);
  padding-top: clamp(1rem, 2vw, 1.2rem);
  border-top: 1px solid var(--on-dark-hairline);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  align-self: center;
}

/* ─────────────────────────── Capabilities ─────────────────────────── */

.capabilities { background: var(--surface); }
.capabilities-intro { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.7; max-width: 46ch; }
.capabilities-note {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 46ch;
  color: var(--brand-deep);
  font-weight: 500;
}

/* The lifecycle rail. The track is always drawn; the fill animates once on entry,
   so the section reads as a sequence rather than a list of three things. Track, fill
   and nodes are pseudo-elements so the <dl> holds nothing but its groups. */
.capability-list { position: relative; padding-left: 2.25rem; }

.capability-list::before,
.capability-list::after {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  border-radius: 2px;
}
.capability-list::before { background: var(--hairline); }
.capability-list::after {
  background: linear-gradient(to bottom, var(--brand) 0%, var(--brand-deep) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--ease);
}
.capability-list.is-revealed::after { transform: scaleY(1); }

.capability {
  position: relative;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.3s var(--ease);
}
.capability:first-child { padding-top: 0.25rem; }
.capability:last-child { border-bottom: 0; padding-bottom: 0.25rem; }

.capability::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--hairline);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease),
              transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.capability:first-child::before { top: 0.5rem; }
.capability-list.is-revealed .capability::before { border-color: var(--brand); }

.capability dt {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.capability dd { margin-top: 0.5rem; font-size: 1rem; line-height: 1.65; max-width: 56ch; }

/* Where this sits in the asset's life. Always shown: it is information, and a
   hover-only reveal hid it from every phone and every keyboard. Muted at rest,
   green when the row is engaged. */
.capability .capability-stage {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}

.capability:hover .capability-stage { color: var(--brand-deep); }
.capability:hover::before {
  background: var(--brand);
  border-color: var(--brand);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(91, 158, 3, 0.16);
}
.capability:hover dt { color: var(--brand-deep); }

/* ─────────────────────────── Team ─────────────────────────── */

.team { background: var(--surface-alt); }
.team .h-section { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* 18rem rather than 24rem so three leaders sit on one row at desktop: at the old
   width the third wrapped alone and read as an afterthought. */
.leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 3.6vw, 3rem);
  border-bottom: 1px solid var(--hairline);
}

/* Portraits: uniform photographic headshots.
   `.portrait-pending` is a deliberate placeholder, not a design choice;
   drop an <img> inside .portrait and delete the modifier when shots land. */
.portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 15rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.portrait-pending {
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg,
      rgba(70, 112, 14, 0.05) 0 10px,
      rgba(70, 112, 14, 0.00) 10px 20px),
    var(--surface-card);
}
.portrait-pending::before {
  content: attr(data-initials);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #587342;   /* 4.7:1 on the card surface */
}
.portrait-pending::after {
  content: "Headshot pending";
  position: absolute;
  bottom: 0.65rem;
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #587342;
}

/* Affiliation mark. CenterNode is the default on a CenterNode site, so only the
   exception carries a mark: the eye catches the few, not the many. Sits on a paper
   chip with a hairline so it survives any headshot behind it.
   PLACEHOLDER: the "FR" monogram stands in until the real Forest Road mark is supplied. */
.affil {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.3125rem;
  border: 0;
  box-shadow: none;
  line-height: 0;
}

/* Each entity on its own ground: CenterNode's node in the deepest green of its
   palette, Forest Road's tree on its navy. A dark chip is what lets the node read
   correctly, since the white centre is the point of the mark and needs something
   to sit against. Squared rather than circular, per the system's shape language.
   The tree is painted through a mask so it can go white on navy from one asset. */
/* The node is the supplied brand asset rather than drawn in CSS, so it cannot
   drift from the artwork. It carries its own chip, corner radius and colours,
   including a green of #6C9C2E that differs from the --brand token. */
.affil-cn {
  background: url(assets/cn-node.png) center / contain no-repeat;
  border-radius: 0;
}

.affil-fr { background: #1A2744; }   /* Forest Road navy */
.affil-fr::before {
  content: "";
  width: 0.875rem;
  height: 0.757rem;                  /* the mark's own 96:83 aspect */
  background: #fff;
  -webkit-mask: url(assets/fr-tree.png) center / contain no-repeat;
  mask: url(assets/fr-tree.png) center / contain no-repeat;
}

.affil-inline {
  position: static;
  display: inline-grid;
  vertical-align: -0.35em;
  margin-right: 0.4rem;
  box-shadow: none;
}

.roster-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--muted);
}
.roster-key > span { display: inline-flex; align-items: center; }

.portrait-sm { max-width: 11rem; }
.portrait-sm.portrait-pending::before { font-size: 1.25rem; }
.portrait-sm.portrait-pending::after { font-size: 0.625rem; bottom: 0.5rem; }

.leader-name {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.leader-role {
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand-deep);
  line-height: 1.4;
}

.team .h-sub { margin-top: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.75rem; }

/* The roster carries no portraits yet. Rather than hold twenty empty frames,
   it reads as a ruled directory: a hairline per entry gives the column a spine,
   so the absence of photographs looks chosen rather than unfinished. When the
   shots land, this reverts to the portrait grid the leadership row uses. */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
}
.roster li {
  position: relative;
  padding: 0.9375rem 0;
  border-top: 1px solid var(--hairline);
}
/* The marker sits on the right edge of the entry, so the names keep a single
   flush left margin down the column. Inline before the name, it pushed every
   name to a different start depending on nothing at all. */
.roster li > .affil {
  top: 0.875rem;
  right: 0;
}
.roster-name {
  padding-right: 2rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.roster-role { margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }


/* Leadership portraits. The photograph itself never moves or changes: hover
   draws the brand green along the base and nothing else. The image is the
   content here, and a phone gets no hover at all, so the resting state has to
   carry the section on its own. */
.portrait-photo { background: var(--surface-card); }
.portrait-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.leader:hover .portrait-photo::after,
.leader:focus-within .portrait-photo::after { transform: scaleX(1); }

/* ─────────────────────────── Press ─────────────────────────── */

/* Press earns credibility but is not the argument, so it sits in two columns:
   the quote holds the left rail while the coverage list runs down the right.
   Stacked, this section was 14.5% of the page, more room than its job deserves. */
.press { background: var(--surface); }
.press .h-section { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }

.press-quote {
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--brand);
  max-width: 34ch;
}
.press-quote blockquote { margin: 0; }
.press-quote p {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-wrap: balance;
}
.press-quote figcaption {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-deep);
}
.press-quote-source {
  display: block;
  margin-top: 0.15rem;
  font-weight: 400;
  color: var(--muted);
}

.press-list { border-top: 1px solid var(--hairline); }
.press-list li { border-bottom: 1px solid var(--hairline); }

/* One column now that the list is in the narrower half, so outlet and date ride
   together above the headline instead of claiming their own column. */
.press-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.15rem 1rem;
  padding-block: 1.05rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease);
}

.press-meta {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  grid-column: 1;
}
.press-outlet {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-deep);
}
.press-date {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.press-date::before {
  content: "·";
  display: inline-block;
  margin-right: 0.4em;
  transform: translate(-0.2em, 0.127em);
  font-weight: 700;
  font-size: 1.4em;
  text-shadow: 0 0 0.5px currentColor;
}

.press-headline {
  grid-column: 1;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--body);
  transition: color 0.2s var(--ease);
}

.press-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1rem;
  height: 1rem;
  align-self: center;
  color: #7E9068;   /* visible at rest (~3.4:1), not loud. It brightens on hover */
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.press-list a:hover .press-headline { color: var(--ink); }
.press-list a:hover .press-arrow { color: var(--brand); transform: translate(2px, -2px); }
.press-list a:focus-visible { outline-offset: -2px; }

/* ─────────────────────────── Contact ─────────────────────────── */

.contact { background: var(--brand-dark); color: var(--on-dark); }
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact .h-display { color: #fff; }
.contact-lead p { margin-top: 1.25rem; max-width: 40ch; line-height: 1.7; }
.contact-direct a { color: #fff; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.contact-direct a:hover { color: var(--brand); }

.contact-form { display: grid; gap: 1.25rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; }

.field label {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.field .optional { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--on-dark-muted); }

.field input, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #F4F7EF;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; }

.field input:hover, .field textarea:hover { background: #FAFCF6; }
.field input:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91, 158, 3, 0.32);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #E5A3A3;
  box-shadow: 0 0 0 3px rgba(214, 106, 106, 0.22);
}

.error {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #F3BFBF;
}

.btn-submit { justify-self: start; --btn-bg: var(--brand); color: #10230A; }
.btn-submit:hover { background: #6DB80A; }
.btn-submit:disabled { opacity: 0.6; cursor: progress; }

/* Honeypot field: off-screen for people, still in the form for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--on-dark);
}
.form-status:empty { display: none; }
.form-status.is-ok { color: #CBE8A6; font-weight: 500; }

/* ─────────────────────────── Footer ─────────────────────────── */

.site-footer {
  background: var(--brand-ink);
  color: var(--on-dark-muted);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.footer-logo { width: 156px; margin-bottom: 1.5rem; }
.footer-brand address { color: var(--on-dark); }
.footer-contact { margin-top: 0.75rem; }
.footer-contact a { color: var(--on-dark); text-decoration-color: rgba(238, 242, 232, 0.4); }
.footer-contact a:hover { color: var(--brand); }

.footer-legal p + p { margin-top: 1rem; }
.footer-legal strong { color: var(--on-dark); font-weight: 600; }
.footer-legal a { color: var(--on-dark); text-decoration-color: rgba(238, 242, 232, 0.4); }
.footer-legal a:hover { color: var(--brand); }

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-hairline);
}
.legal-links a { color: var(--on-dark-muted); text-decoration-color: rgba(175, 191, 162, 0.4); }
.legal-links a:hover { color: var(--brand); }

/* Sits in the legal column, directly above the links, as CNES has it. */
.footer-copyright { margin-top: 1.5rem; }


/* ─────────────────────── Scroll reveal ───────────────────────
   Applied only to list content, where sequence helps the eye. Headings and the
   hero are never revealed, because they must be present the instant the page arrives.
   The hidden state is added by JS, so content stays visible without it. */

.js-reveal > * {
  opacity: 0;
  transform: translateY(14px);
}
.js-reveal.is-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width: 900px) {
  .split, .contact-inner, .footer-inner { grid-template-columns: 1fr; }
  .capability-list { margin-top: 2.5rem; }
  .split-lead .h-section { max-width: 20ch; }
}

@media (max-width: 780px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .hero { min-height: 100svh; padding-block: 7rem 5rem; }
  .hero-title { max-width: none; }
  .scroll-cue { display: none; }
  .pillar { grid-template-columns: 1fr; gap: 0.5rem; }
  .leaders { padding-bottom: 2.5rem; }
}

@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
  /* One column on a phone: two would break these titles over four lines each. */
  .roster { grid-template-columns: 1fr; }
  .portrait { max-width: 13rem; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ─────────────────────────── Motion preference ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marked .ring path { stroke-dashoffset: 0; }
  .hero-media img, .hero-media video { animation: none; transform: scale(1.04); }
  .hero-media { transform: none !important; }
  .js-reveal > *, .js-reveal.is-revealed > * { opacity: 1; transform: none; transition: none; }
  .capability-list::after { transform: scaleY(1); }
}

/* ─────────────────────────── Legal pages ─────────────────────────── */

/* The header is transparent until scrolled, because on the home page it sits
   over the hero. A legal page has no hero, so it holds the solid state from the
   start, and the content clears the fixed bar rather than running under it. */
.page-legal .site-header {
  background: var(--brand-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 28px rgba(27, 40, 16, 0.24);
}
.page-legal main { padding-top: 4.75rem; }

/* Terms, privacy and the CCPA form. These are read, not scanned, so the measure
   drops to roughly 70 characters and the type goes up slightly. Numbered
   headings let a reviewer cite a clause without counting paragraphs. */
.legal { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.legal-shell { max-width: 46rem; }

.legal-head { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--hairline); }
.legal-head h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.legal-updated {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.legal-lede { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.65; color: var(--body); }

.legal-body { margin-top: clamp(2rem, 4vw, 3rem); }
.legal-body h2 {
  margin-top: 2.75rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin-top: 1.75rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.legal-body p,
.legal-body li { font-size: 0.9875rem; line-height: 1.7; color: var(--body); }
.legal-body p { margin-top: 0.875rem; }
.legal-body ul, .legal-body ol { margin-top: 0.875rem; padding-left: 1.25rem; }
.legal-body li { margin-top: 0.4rem; }
.legal-body ul > li { list-style: disc; }
.legal-body ol > li { list-style: decimal; }
.legal-body a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.legal-body strong { color: var(--ink); font-weight: 600; }

/* The regulatory notices carry more weight than the clauses around them, so they
   sit on the card surface with a green rail rather than running as plain text. */
.legal-callout {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-alt);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-callout p { margin-top: 0.625rem; }
.legal-callout p:first-child { margin-top: 0; }

.legal-contact {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.legal-contact address { font-style: normal; line-height: 1.7; color: var(--body); font-size: 0.9375rem; }

/* CCPA request form */
/* The contact form is styled for the dark green section it normally sits in,
   so every label, hint and status message has to be re-grounded for white. */
.ccpa-form .field label { color: var(--ink); }
.ccpa-form .field .optional { color: var(--muted); }
.ccpa-form .form-status { color: var(--body); }
.ccpa-form .form-status.is-ok { color: var(--brand-deep); }
.ccpa-form .choice span,
.ccpa-form .choice strong { text-transform: none; letter-spacing: 0; }
.ccpa-form .choice input { accent-color: var(--brand-deep); }
.ccpa-form { margin-top: 2rem; }
.ccpa-form fieldset { margin-top: 2rem; padding: 0; border: 0; }
.ccpa-form legend {
  padding: 0;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.ccpa-form .field { margin-top: 1.25rem; }
.choice-list { margin-top: 1rem; display: grid; gap: 0.625rem; }
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}
.choice:hover { border-color: var(--brand); }
.choice input { margin-top: 0.2rem; accent-color: var(--brand-deep); }
.choice span { font-size: 0.9375rem; line-height: 1.5; color: var(--body); }
.choice strong { display: block; color: var(--ink); font-weight: 600; }