@charset "UTF-8";
/* ==========================================================================
   Green Troopers — production stylesheet
   Single-file design system. No build step, no preprocessor, no framework.
   Load order: tokens → reset → primitives → components → sections → states.
   ========================================================================== */

@import url("../assets/fonts/fonts.css");

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the official Green Troopers logo.
     --gt-green is the logo green and is used for FILLS only (button faces,
     bars, rules). It is too light to carry small text on a light surface, so
     text uses --gt-emerald, which is tuned to clear 4.5:1 on every light
     surface in this palette (worst case 5.05 on sage). */
  --gt-green: #38a94a;
  --gt-green-dark: #2f923d;
  --gt-emerald: #177347;
  --gt-leaf: #6fbf7f;
  --gt-forest: #123b28;
  --gt-forest-deep: #0c2a1d;

  /* Neutrals — warm, never clinical.
     --gt-ink-faint clears 4.5:1 on every light surface (worst case 4.83). */
  --gt-ink: #10241a;
  --gt-ink-soft: #47594f;
  --gt-ink-faint: #5d6b62;
  --gt-ivory: #fbfaf6;
  --gt-cloud: #ffffff;
  --gt-sage: #e8f0e9;
  --gt-mint: #f2f8f3;
  --gt-stone: #f4f2ec;

  /* Accents — used sparingly */
  --gt-earth: #7a6752;
  --gt-sky: #6f9db6;
  --gt-amber: #c98a2e;
  --gt-danger: #b3261e;

  /* Dark cinematic environment */
  --gt-night: #081310;
  --gt-night-2: #0f2019;
  --gt-charcoal: #1c2320;
  --gt-midnight: #0d1622;

  /* Semantic surfaces */
  --surface: var(--gt-ivory);
  --surface-raised: var(--gt-cloud);
  --surface-sunken: var(--gt-stone);
  --line: rgba(18, 59, 40, 0.12);
  --line-strong: rgba(18, 59, 40, 0.22);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.6rem, 1.2rem + 5.4vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 1.1rem + 3.6vw, 3.9rem);
  --fs-h2: clamp(1.7rem, 1.05rem + 2.3vw, 2.85rem);
  --fs-h3: clamp(1.28rem, 1.02rem + 0.9vw, 1.7rem);
  --fs-h4: clamp(1.08rem, 0.98rem + 0.4vw, 1.26rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.5vw, 1.32rem);
  --fs-body: 1.0125rem;
  --fs-small: 0.9rem;
  --fs-label: 0.735rem;
  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.68;
  --tracking-tight: -0.028em;
  --tracking-label: 0.14em;

  /* Spacing — 8px rhythm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4rem, 2rem + 7vw, 8.5rem);

  /* Containers */
  --container: 1240px;
  --container-narrow: 780px;
  --container-wide: 1500px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 4rem);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Shadows — soft, forest-tinted, never heavy */
  --sh-1: 0 1px 2px rgba(12, 42, 29, 0.05), 0 2px 8px rgba(12, 42, 29, 0.04);
  --sh-2: 0 2px 6px rgba(12, 42, 29, 0.06), 0 12px 28px rgba(12, 42, 29, 0.07);
  --sh-3: 0 8px 20px rgba(12, 42, 29, 0.08), 0 28px 60px rgba(12, 42, 29, 0.1);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-mid: 280ms;
  --t-slow: 620ms;

  /* Layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-chat: 700;
  /* The drawer sits above the chat launcher: while the menu is open the
     launcher would otherwise float over the primary calls to action. */
  --z-drawer: 800;
  --z-toast: 900;

  --header-h: 74px;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--gt-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  /* Long unbreakable tokens — the contact address, a campaign URL, a code
     sample — must wrap rather than push the page wider than the viewport.
     Without this, 320px screens scroll sideways. */
  overflow-wrap: break-word;
}

code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  background: var(--gt-sage);
  color: var(--gt-forest);
  overflow-wrap: anywhere;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--gt-forest);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.012em; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--gt-emerald); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gt-forest); }
/* Addresses and URLs may break mid-token; unlike break-word, `anywhere` also
   lowers the element's min-content width so a grid column can shrink to fit. */
a[href^="mailto:"], a[href^="http"] { overflow-wrap: anywhere; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 700; color: var(--gt-forest); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

:focus-visible {
  outline: 3px solid var(--gt-green);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gt-leaf); color: var(--gt-forest-deep); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -80px;
  z-index: 1000;
  padding: 0.7rem 1.15rem;
  background: var(--gt-forest);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--sage { background: var(--gt-mint); }
.section--stone { background: var(--gt-stone); }
.section--forest {
  background: var(--gt-forest-deep);
  color: rgba(255, 255, 255, 0.86);
}
.section--forest h1, .section--forest h2,
.section--forest h3, .section--forest h4 { color: #fff; }
/* :not(.btn) matters — this selector is more specific than .btn, so without
   the exclusion every button inside a dark section would be repainted leaf
   green on a green face and become unreadable. */
.section--forest a:not(.btn) { color: var(--gt-leaf); }
.section--forest .lead { color: rgba(255, 255, 255, 0.78); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Grid and flex items default to min-width:auto, which means a single long
   token (an email address, a URL) sets the column's minimum width and pushes
   the whole layout wider than the viewport. Allowing them to shrink below
   min-content is what lets the wrapping above actually take effect. */
.grid > *,
.split > *,
.campaign-grid > *,
.stat-row > *,
.footer-nav > *,
.footer-top > *,
.tool > *,
.scene > *,
.btn-row > *,
.card__body > *,
.preview__row > * { min-width: 0; }

.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 226px), 1fr)); }

/* Editorial split: text beside a large image, alternating sides */
.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3.5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 0.86fr 1.14fr; }
  .split--wide-text { grid-template-columns: 1.14fr 0.86fr; }
  .split--flip > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gt-emerald);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gt-green);
  flex: none;
}
/* Every dark context, in one place. Emerald is tuned for light surfaces and
   fails against deep forest, so anywhere the ground goes dark the accent
   switches to leaf, which clears 6.9:1 on #0c2a1d. */
.section--forest .eyebrow,
.panel--forest .eyebrow,
.band .eyebrow,
.scrub .eyebrow { color: var(--gt-leaf); }
.section--forest .eyebrow::before,
.panel--forest .eyebrow::before,
.band .eyebrow::before,
.scrub .eyebrow::before { background: var(--gt-leaf); }

.panel--forest a:not(.btn),
.band a:not(.btn) { color: var(--gt-leaf); }
.panel--forest .card__text,
.panel--forest p:not(.eyebrow) { color: rgba(255, 255, 255, 0.82); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--gt-ink-soft);
}

.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; }

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gt-forest);
  --btn-fg: #fff;
  --btn-bd: var(--gt-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.86rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
    background-color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--primary {
  --btn-bg: var(--gt-green);
  --btn-bd: var(--gt-green);
  --btn-fg: #06170e;
}
.btn--primary:hover { --btn-bg: var(--gt-green-dark); --btn-bd: var(--gt-green-dark); --btn-fg: #fff; }

.btn--give {
  --btn-bg: transparent;
  --btn-bd: var(--gt-forest);
  --btn-fg: var(--gt-forest);
}
.btn--give:hover { --btn-bg: var(--gt-forest); --btn-fg: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: var(--line-strong);
  --btn-fg: var(--gt-forest);
}
.btn--ghost:hover { --btn-bd: var(--gt-forest); --btn-bg: rgba(18, 59, 40, 0.04); }

.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bd: rgba(255, 255, 255, 0.45);
  --btn-fg: #fff;
}
.btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--gt-forest-deep); --btn-bd: #fff; }

.btn--sm { padding: 0.58rem 1.05rem; font-size: 0.87rem; }
.btn--lg { padding: 1.02rem 1.9rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--gt-emerald);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--t-mid) var(--ease), gap var(--t-mid) var(--ease);
}
.link-arrow::after { content: "→"; transition: transform var(--t-mid) var(--ease); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Brand mark (official animated GIF — never altered)
   -------------------------------------------------------------------------- */
/* The supplied GIF is 500×500 with the artwork occupying the box
   (55,147)→(480,353). The wrapper below shows exactly that region so the
   lockup reads at a sensible size. The file itself is untouched, the aspect
   ratio is preserved, and the animation plays as authored. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex: none;
}
.brand__mark {
  position: relative;
  overflow: hidden;
  height: 38px;
  width: 78.4px;              /* 38 × 2.0631 */
  flex: none;
}
.brand__mark img {
  position: absolute;
  width: 117.647%;            /* 500 / 425 */
  height: auto;
  left: -12.941%;
  top: -71.359%;
  max-width: none;
  object-fit: contain;
}
.brand__name { display: none; }

@media (max-width: 860px) {
  .brand__mark { height: 32px; width: 66px; }
}

/* On dark cinematic backgrounds the white GIF plate would glare, so it sits
   on a soft light plate that keeps the artwork legible and on-brand. */
.site-header[data-nav="dark"] .brand__mark {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r-sm);
  padding: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.brand--footer .brand__mark {
  height: 44px;
  width: 90.8px;
  background: #fff;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease),
    backdrop-filter var(--t-slow) var(--ease);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.site-nav { display: none; margin-left: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, -0.4rem + 1.3vw, 1.15rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 0.5rem 0.32rem;
  font-size: 0.895rem;
  font-weight: 600;
  color: var(--nav-fg, var(--gt-forest));
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.site-nav a:hover { border-color: var(--gt-green); }
.site-nav a[aria-current="page"] { border-color: var(--gt-green); }

.header-actions { display: none; gap: 0.6rem; align-items: center; margin-left: var(--sp-4); }

@media (min-width: 1080px) {
  .site-nav { display: block; }
  .header-actions { display: flex; }
}

/* Scrolled / light state */
.site-header[data-nav="light"] {
  background: rgba(251, 250, 246, 0.82);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(12, 42, 29, 0.06);
  --nav-fg: var(--gt-forest);
}

/* Over dark cinematic footage */
.site-header[data-nav="dark"] {
  --nav-fg: rgba(255, 255, 255, 0.94);
  background: linear-gradient(to bottom, rgba(6, 18, 13, 0.55), rgba(6, 18, 13, 0));
}
.site-header[data-nav="dark"] .site-nav a:hover,
.site-header[data-nav="dark"] .site-nav a[aria-current="page"] { border-color: var(--gt-leaf); }
.site-header[data-nav="dark"] .btn--give {
  --btn-bd: rgba(255, 255, 255, 0.55);
  --btn-fg: #fff;
}
.site-header[data-nav="dark"] .btn--give:hover { --btn-bg: #fff; --btn-fg: var(--gt-forest-deep); }
.site-header[data-nav="dark"] .nav-toggle__box { --burger: #fff; }

/* No-JS safety: without JS the header stays readable on light pages */
.no-js .site-header { background: rgba(251, 250, 246, 0.95); border-bottom-color: var(--line); }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  padding: 0.5rem 0.55rem;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--nav-fg, var(--gt-forest));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.nav-toggle__box {
  --burger: var(--gt-forest);
  position: relative;
  width: 26px;
  height: 16px;
  flex: none;
}
.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--burger);
  transition: transform var(--t-mid) var(--ease-out),
    opacity var(--t-fast) var(--ease), width var(--t-mid) var(--ease);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 7px; width: 70%; }
.nav-toggle__box span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  background: var(--gt-ivory);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid) var(--ease);
}
.nav-drawer[data-open="true"] { visibility: visible; opacity: 1; }
.nav-drawer__top {
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
}
.nav-drawer__close {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.6rem;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gt-forest);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-drawer__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-6) var(--gutter) var(--sp-8);
}
.nav-drawer ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.nav-drawer li { margin: 0; border-bottom: 1px solid var(--line); }
.nav-drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0.2rem;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gt-forest);
  text-decoration: none;
}
.nav-drawer a::after { content: "→"; color: var(--gt-emerald); opacity: 0; transform: translateX(-6px); transition: all var(--t-mid) var(--ease); }
.nav-drawer a:hover::after, .nav-drawer a:focus-visible::after { opacity: 1; transform: translateX(0); }
.nav-drawer[data-open="true"] li {
  animation: drawer-in var(--t-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 34ms + 60ms);
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.nav-drawer__cta { display: grid; gap: 0.7rem; }
.nav-drawer__meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--gt-ink-faint);
}

/* --------------------------------------------------------------------------
   8. The scroll-driven scene
   -------------------------------------------------------------------------- */
/* Two layouts in one piece of markup.

   Base — no JavaScript, reduced motion, or a device that should not be asked
   to do this: a 16:9 still followed by the cues as an illustrated story. Every
   heading, paragraph and image is real and present.

   Scrubbed (.scrub--on) — the stage pins and js/scrub.js paints a frame
   chosen directly from the scroll position. Down advances, up rewinds. It is
   never playing; it only ever moves because the page does. */

.scrub {
  position: relative;
  background: var(--gt-night);
  color: #fff;
  isolation: isolate;
}

/* ---- Stage ---------------------------------------------------------- */
.scrub__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  overflow: hidden;
  background: var(--gt-night);
}

.scrub__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The poster holds the stage until the first real frame is painted. It is
   only ever hidden once a frame actually exists, so a failed sequence leaves
   the opening image rather than a black rectangle. */
.scrub__poster { transition: opacity var(--t-slow) var(--ease); }
.scrub__canvas { display: none; }

.scrub__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* The lower stops are not a taste decision. The brightest pixel anywhere in
     the band the words occupy is the portal glow on frame 213 — rgb(217,252,
     204), luminance 0.887 — and white body copy needs the scrim at 0.60 over
     it to clear 4.5:1. These stops hold 0.71-0.88 across that whole band, so
     every frame in the sequence clears it. check_scrim.py re-proves this over
     the real frames; if you soften these, that will fail. */
  background:
    radial-gradient(118% 84% at 50% 40%,
      rgba(0, 0, 0, 0) 38%, rgba(4, 12, 9, 0.6) 100%),
    linear-gradient(to bottom,
      rgba(4, 12, 9, 0.58) 0%, rgba(4, 12, 9, 0) 22%,
      rgba(4, 12, 9, 0) 36%, rgba(4, 12, 9, 0.7) 62%,
      rgba(4, 12, 9, 0.93) 100%);
}

/* A thin, honest read-out of where you are in the scene. No prompt, no
   instruction to scroll — just position. */
.scrub__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  width: 100%;
  height: 3px;
  display: none;
  background: rgba(255, 255, 255, 0.14);
}
.scrub__progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gt-emerald), var(--gt-green), var(--gt-leaf));
}

/* ---- Cues ------------------------------------------------------------
   Headings only. No section labels, no numbering — the words carry it. */
.scrub__cues { position: relative; z-index: 3; }

.cue {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cue:first-child { border-top: 0; }
@media (min-width: 900px) {
  .cue { grid-template-columns: 1fr 1fr; }
  .cue:nth-child(even) .cue__still { order: 2; }
}

.cue__still { margin: 0; }
.cue__still img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.cue__title {
  margin-bottom: var(--sp-4);
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.5rem);
  line-height: 1.07;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.cue__body {
  max-width: 50ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}
.cue__cta { margin-top: var(--sp-5); }

/* ---- Scrubbed ---------------------------------------------------------
   --pin is set by scrub.js from the manifest, so the scroll length and the
   frame count stay in step with each other. */
.scrub--on { height: var(--pin, 520vh); }

.scrub--on .scrub__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  aspect-ratio: auto;
}
.scrub--on .scrub__canvas { display: block; }
.scrub--on[data-ready="true"] .scrub__poster { opacity: 0; }
.scrub--on .scrub__progress { display: block; }

/* A second sticky layer pulled up over the stage. Sticky rather than fixed,
   so the overlay is released the instant the section ends and can never
   bleed over the rest of the page. */
.scrub--on .scrub__cues {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-top: -100svh;
  pointer-events: none;
}
.scrub--on .scrub__cues > .container {
  max-width: none;
  padding-inline: 0;
  height: 100%;
}

.scrub--on .cue {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(4.5rem, 3rem + 6vw, 9rem);
  border: 0;
  opacity: 0;
  visibility: hidden;
}
.scrub--on .cue[data-active="true"] {
  visibility: visible;
  pointer-events: auto;
}
.scrub--on .cue__still { display: none; }
.scrub--on .cue__copy {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.scrub--on .cue__body { max-width: 46ch; }

/* The closing cue sits centred, with its own scrim, because the scene ends
   in daylight and a bottom gradient alone is not enough there. */
.scrub--on .cue[data-align="center"] {
  align-items: center;
  padding-bottom: 0;
}
.scrub--on .cue[data-align="center"] .cue__copy { text-align: center; }
.scrub--on .cue[data-align="center"] .cue__body { margin-inline: auto; }
.scrub--on .cue[data-align="center"] .cue__cta { justify-content: center; }
.scrub--on .cue[data-align="center"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 44% at 50% 50%,
    rgba(4, 14, 10, 0.78) 0%, rgba(4, 14, 10, 0.5) 56%, rgba(4, 14, 10, 0) 100%);
}

/* On a short viewport the pinned stage has little room; give the words more
   of it and let the picture sit further back. */
@media (max-height: 640px) {
  .scrub--on .cue { padding-bottom: clamp(2rem, 1rem + 4vh, 4rem); }
  .scrub--on .cue__title { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); }
  .scrub--on .cue__body { font-size: 0.98rem; }
}

/* ---- Parallax primitives (interior page heroes) ----------------------
   .p-frame clips; .p-layer moves. The layer overhangs its frame so it can
   travel without exposing an edge; parallax.js clamps travel to 0.16 of the
   frame height, well inside this 18%. */
.p-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.p-layer {
  position: absolute;
  inset: -18% 0;
  width: 100%;
}
.p-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* --------------------------------------------------------------------------
   9. Story → daylight transition
   -------------------------------------------------------------------------- */
.dawn {
  position: relative;
  padding-block: clamp(4rem, 2rem + 8vw, 10rem);
  background:
    linear-gradient(to bottom,
      var(--gt-night) 0%,
      var(--gt-forest-deep) 22%,
      #1c4c34 44%,
      #6ba57c 68%,
      #cfe4d3 86%,
      var(--gt-ivory) 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.dawn__inner { position: relative; z-index: 2; }
.dawn h2 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.dawn .lead { color: rgba(255, 255, 255, 0.85); margin-inline: auto; }
.dawn__glow {
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: min(140vw, 1500px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(160, 220, 180, 0.22) 38%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   10. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.card__media { position: relative; aspect-ratio: 16 / 9; background: var(--gt-sage); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.75rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.card__title { margin: 0; font-size: var(--fs-h4); }
.card__text { margin: 0; font-size: var(--fs-small); color: var(--gt-ink-soft); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.5rem);
}
.panel--sage { background: var(--gt-mint); border-color: rgba(18, 59, 40, 0.08); }
.panel--forest { background: var(--gt-forest-deep); color: rgba(255, 255, 255, 0.86); border-color: transparent; }
.panel--forest h2, .panel--forest h3, .panel--forest h4 { color: #fff; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--gt-sage);
  color: var(--gt-forest);
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--live { background: #dff3e4; color: #14663c; }
.tag--proto { background: #fdf0da; color: #8a5a12; }
.tag--future { background: #e8eef3; color: #3f5a6c; }
.tag--sky { background: #e4eef4; color: #35586c; }

/* Status dot for availability labels — never colour alone */
.tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Numbered / stat display */
.stat-row {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.stat { border-top: 2px solid var(--gt-green); padding-top: var(--sp-4); }
.stat__value {
  display: block;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--gt-forest);
}
.stat__label { display: block; margin-top: 0.55rem; font-size: var(--fs-small); color: var(--gt-ink-soft); }
.section--forest .stat__value { color: #fff; }
.section--forest .stat__label { color: rgba(255, 255, 255, 0.72); }

/* Numbered steps / process */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.step {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
  margin: 0;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2.4rem;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gt-emerald);
  border-top: 2px solid var(--gt-green);
  padding-top: 0.35rem;
}
.step h3 { font-size: var(--fs-h4); margin-bottom: 0.4rem; }
.step p { font-size: var(--fs-small); color: var(--gt-ink-soft); margin: 0; }

/* Feature list with checks */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.ticks li { position: relative; padding-left: 1.75rem; margin: 0; font-size: var(--fs-small); color: var(--gt-ink-soft); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--gt-emerald);
  border-bottom: 2px solid var(--gt-emerald);
  transform: rotate(-45deg);
}
.section--forest .ticks li, .panel--forest .ticks li { color: rgba(255, 255, 255, 0.8); }

/* Media figure */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.figure figcaption { margin-top: 0.7rem; font-size: var(--fs-small); color: var(--gt-ink-faint); }
.figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Feature band: full-bleed image with copy over it */
.band {
  position: relative;
  min-height: min(76svh, 640px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  background: var(--gt-forest-deep);
  color: #fff;
  overflow: hidden;
}
.band__bg { position: absolute; inset: 0; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 20, 14, 0.9) 4%, rgba(6, 20, 14, 0.42) 46%, rgba(6, 20, 14, 0.18) 100%);
}
.band__inner { position: relative; z-index: 2; width: 100%; }
.band h2 { color: #fff; }
.band .lead { color: rgba(255, 255, 255, 0.84); }

/* --------------------------------------------------------------------------
   11. Green Troopers AI — tool rack (deliberately not a SaaS card grid)
   -------------------------------------------------------------------------- */
.rack { border-top: 1px solid var(--line); }
.tool {
  display: grid;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 2rem);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 860px) {
  .tool { grid-template-columns: 4.5rem 1fr 1.05fr auto; align-items: center; }
}
.tool__num {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gt-emerald);
}
.tool__name { margin: 0; font-size: var(--fs-h4); }
.tool__desc { margin: 0; font-size: var(--fs-small); color: var(--gt-ink-soft); }
.tool__status { justify-self: start; }
@media (min-width: 860px) { .tool__status { justify-self: end; } }
.tool:hover { background: var(--gt-mint); }

/* Product-quality interface preview */
.preview {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--sh-2);
  font-size: var(--fs-small);
}
.preview__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--gt-forest-deep);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.preview__dots { display: flex; gap: 4px; margin-right: 0.4rem; }
.preview__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.preview__body { padding: 1rem 1.1rem; display: grid; gap: 0.85rem; }
.preview__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.preview__label { color: var(--gt-ink-faint); font-size: 0.82rem; }
.preview__value { font-weight: 700; color: var(--gt-forest); }
.meter {
  height: 7px;
  border-radius: var(--r-full);
  background: var(--gt-sage);
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gt-emerald), var(--gt-green));
}

/* --------------------------------------------------------------------------
   12. Campaigns (Give)
   -------------------------------------------------------------------------- */
.platform {
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.platform__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin-bottom: var(--sp-5);
}
.platform__name { margin: 0; font-size: var(--fs-h3); }
.platform__meta { font-size: var(--fs-small); color: var(--gt-ink-faint); }
.platform__link { margin-left: auto; }

.campaign-grid {
  display: grid;
  gap: clamp(1.15rem, 0.8rem + 1.4vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

.campaign { display: flex; flex-direction: column; }
.campaign__media { position: relative; aspect-ratio: 16 / 10; background: var(--gt-sage); overflow: hidden; }
.campaign__media img { width: 100%; height: 100%; object-fit: cover; }
.campaign__platform {
  position: absolute;
  left: 0.75rem; top: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.94);
  color: var(--gt-forest);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.campaign__body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.campaign__title { margin: 0; font-size: 1.08rem; line-height: 1.32; }
.campaign__desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gt-ink-soft);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.campaign__where { font-size: 0.8rem; color: var(--gt-ink-faint); }
.campaign__money {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.campaign__raised { font-size: 1.22rem; font-weight: 800; color: var(--gt-forest); letter-spacing: -0.02em; }
.campaign__goal { font-size: 0.85rem; color: var(--gt-ink-faint); }
.campaign__bar { height: 8px; border-radius: var(--r-full); background: var(--gt-sage); overflow: hidden; }
.campaign__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gt-emerald), var(--gt-green)); }
.campaign__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--gt-ink-soft);
}
.campaign__facts b { color: var(--gt-forest); font-weight: 700; }

.empty-state {
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--gt-mint);
  text-align: center;
  color: var(--gt-ink-soft);
}
.empty-state p { margin: 0 auto; max-width: 52ch; }
.empty-state__title { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--gt-forest); }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--gt-sage);
  border-radius: var(--r-sm);
  color: transparent;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: 0.4rem; }
.field > label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gt-forest);
  letter-spacing: -0.005em;
}
.field__hint { font-size: 0.8rem; color: var(--gt-ink-faint); }
.field .req { color: var(--gt-danger); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.78rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--gt-ink);
  font: inherit;
  font-size: 0.96rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 8.5rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2347594f' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gt-green);
  box-shadow: 0 0 0 4px rgba(56, 169, 74, 0.16);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--gt-danger);
  box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12);
}

.field__error {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gt-danger);
}
.field__error::before { content: "⚠ "; }
/* Checkbox rows use .choice rather than .field, and must surface their error
   the same way — otherwise a missing consent tick fails silently. */
.field[data-invalid="true"] .field__error,
.choice[data-invalid="true"] .field__error { display: block; }

.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-small);
}
.choice input { margin-top: 0.28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gt-green); flex: none; }
.choice label { color: var(--gt-ink-soft); flex: 1 1 12rem; min-width: 0; }
.choice .field__error { flex: 1 0 100%; margin: 0; }
.choice[data-invalid="true"] input { outline: 2px solid var(--gt-danger); outline-offset: 3px; }

.form-note {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--gt-mint);
  font-size: var(--fs-small);
  color: var(--gt-ink-soft);
}

.form-status {
  display: none;
  padding: 0.95rem 1.15rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 1.5px solid;
}
.form-status[data-state="ok"] { display: block; border-color: #b6dfc3; background: #ecf8f0; color: #14663c; }
.form-status[data-state="error"] { display: block; border-color: #f0c4c1; background: #fdeeed; color: #93211b; }
.form-status[data-state="info"] { display: block; border-color: var(--line-strong); background: var(--gt-stone); color: var(--gt-ink-soft); }

/* Honeypot — visually and programmatically removed from the tab order */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   14. Accordion (FAQ / transparency)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--gt-forest);
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gt-emerald);
  flex: none;
  transition: transform var(--t-mid) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 0 1.25rem; font-size: var(--fs-small); color: var(--gt-ink-soft); max-width: 68ch; }

/* --------------------------------------------------------------------------
   15. Map placeholder
   -------------------------------------------------------------------------- */
.map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--gt-mint);
  min-height: 380px;
}
.map__canvas { position: absolute; inset: 0; }
.map__canvas img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(18, 59, 40, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 59, 40, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.map__note {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  font-size: var(--fs-small);
  color: var(--gt-ink-soft);
}
.map__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }
.chip {
  padding: 0.42rem 0.85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface-raised);
  color: var(--gt-forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip[aria-pressed="true"] { background: var(--gt-forest); border-color: var(--gt-forest); color: #fff; }

/* --------------------------------------------------------------------------
   16. Chatbot
   -------------------------------------------------------------------------- */
.chat-launch {
  position: fixed;
  right: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  z-index: var(--z-chat);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem 0.7rem 0.8rem;
  border: 0;
  border-radius: var(--r-full);
  background: var(--gt-forest);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sh-3);
  transition: transform var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.chat-launch:hover { transform: translateY(-2px); background: var(--gt-forest-deep); }
.chat-launch__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gt-green);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: #06170e;
}

.chat-panel {
  position: fixed;
  right: clamp(0.6rem, 0.4rem + 1vw, 1.75rem);
  bottom: clamp(0.6rem, 0.4rem + 1vw, 1.75rem);
  z-index: var(--z-chat);
  width: min(calc(100vw - 1.2rem), 390px);
  max-height: min(78svh, 620px);
  display: none;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.chat-panel[data-open="true"] { display: flex; }
.chat-panel__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--gt-forest-deep);
  color: #fff;
}
.chat-panel__head h2 { margin: 0; font-size: 0.98rem; color: #fff; }
.chat-panel__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  border-radius: var(--r-xs);
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.9rem;
  background: var(--gt-ivory);
}
.chat-msg { max-width: 88%; padding: 0.65rem 0.85rem; border-radius: var(--r-md); line-height: 1.5; }
.chat-msg--bot { background: var(--gt-sage); color: var(--gt-forest); border-bottom-left-radius: 4px; }
.chat-msg--user { background: var(--gt-forest); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg--sys { background: transparent; border: 1px dashed var(--line-strong); color: var(--gt-ink-faint); font-size: 0.82rem; max-width: 100%; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.75rem; background: var(--gt-ivory); }
.chat-suggestions button {
  padding: 0.36rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface-raised);
  font: inherit;
  font-size: 0.78rem;
  color: var(--gt-forest);
  cursor: pointer;
}
.chat-suggestions button:hover { border-color: var(--gt-green); }
.chat-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--line); }
.chat-form .input { padding: 0.6rem 0.75rem; font-size: 0.9rem; }
.chat-privacy { padding: 0 1rem 0.85rem; font-size: 0.72rem; color: var(--gt-ink-faint); background: var(--gt-ivory); }
.chat-typing { display: inline-flex; gap: 3px; }
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--gt-emerald); animation: blink 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.2s; }
.chat-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* --------------------------------------------------------------------------
   17. Toast
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  left: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  z-index: var(--z-toast);
  display: grid;
  gap: 0.5rem;
  max-width: min(92vw, 330px);
  pointer-events: none;
}
.toast {
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  background: var(--gt-forest-deep);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.85rem;
  box-shadow: var(--sh-3);
  animation: toast-in var(--t-mid) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--gt-forest-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--sp-6);
  font-size: var(--fs-small);
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-top {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.25fr 2fr; } }

.footer-mission { max-width: 42ch; }
.footer-mission p { margin: var(--sp-4) 0 0; line-height: 1.65; }

.footer-nav {
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
/* These are <h2> so the document outline never jumps h1 -> h3 on pages whose
   main content has no <h2> of its own. They are styled as small labels. */
.footer-nav h2 {
  margin: 0 0 0.9rem;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gt-leaf);
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-nav li { margin: 0; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding-top: var(--sp-5);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-left: auto; }
.footer-social { display: flex; gap: 0.5rem; margin-top: var(--sp-5); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); text-decoration: none; }

/* --------------------------------------------------------------------------
   19. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 5vw, 6rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background: var(--gt-forest-deep);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 24, 16, 0.94) 0%, rgba(8, 24, 16, 0.76) 48%, rgba(8, 24, 16, 0.45) 100%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.page-hero .lead { color: rgba(255, 255, 255, 0.82); max-width: 60ch; }
.page-hero .eyebrow { color: var(--gt-leaf); }
.page-hero .eyebrow::before { background: var(--gt-leaf); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sp-4);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
  list-style: none;
  padding: 0;
}
.breadcrumbs li { margin: 0; display: flex; gap: 0.4rem; align-items: center; }
.breadcrumbs li + li::before { content: "/"; opacity: 0.5; }
.breadcrumbs a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* Anchor sub-nav for long pages */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: rgba(251, 250, 246, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav ul {
  display: flex;
  gap: 1.35rem;
  margin: 0;
  padding: 0.85rem 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { margin: 0; }
.subnav a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gt-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover { color: var(--gt-forest); }

/* --------------------------------------------------------------------------
   20. Reveal animations (opacity + transform only)
   -------------------------------------------------------------------------- */
/* Reveal is strictly opt-in. Content is NEVER hidden by default: the hiding
   rule only applies once animations.js has confirmed it is running and will
   reveal it again. If that file 404s, fails to parse, or is blocked, every
   element stays visible instead of the page turning into blank space. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Cheap perf hints, scoped so will-change is never left on everything */
.is-animating { will-change: opacity, transform; }

/* content-visibility for long pages, with a size hint to avoid jumps */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* --------------------------------------------------------------------------
   21. Capability / preference states
   -------------------------------------------------------------------------- */
/* Low-memory devices: drop expensive effects but keep the design intact.
   parallax.js already declines to run on this tier, so the layers simply sit
   still; nothing else about the story changes. */
html[data-tier="minimal"] .site-header[data-nav="light"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(251, 250, 246, 0.98);
}
html[data-tier="minimal"] .subnav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--gt-ivory); }
html[data-tier="minimal"] .dawn__glow { display: none; }
html[data-tier="minimal"] .card:hover { transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* Neither scrub.js nor parallax.js runs under reduced motion, so nothing
     is mid-transform. These rules just make sure the base layout is the one
     that applies and that the cues read as ordinary blocks. */
  .p-layer {
    transform: none !important;
    opacity: 1 !important;
    inset: 0;
  }
  .scrub, .scrub--on { height: auto !important; }
  .scrub__stage { position: static !important; aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .scrub__cues { position: static !important; height: auto; margin-top: 0; pointer-events: auto; }
  .scrub__canvas, .scrub__progress { display: none !important; }
  .scrub__poster { opacity: 1 !important; }
  .cue {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: grid;
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  }
  .cue__still { display: block !important; }
}

@media print {
  .site-header, .nav-drawer, .chat-launch, .chat-panel, .p-frame,
  .scrub__scrim, .scrub__progress, .scrub__canvas,
  .toast-region, .subnav { display: none !important; }
  body { background: #fff; color: #000; }
  .scrub, .cue, .section--forest, .site-footer, .band, .page-hero {
    background: #fff !important;
    color: #000 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-block: 1rem !important;
  }
  .scrub__stage, .scrub__cues { position: static !important; height: auto !important; margin-top: 0 !important; }
  .cue { position: static !important; opacity: 1 !important; visibility: visible !important; }
  .cue__title, .cue__body,
  .site-footer a, .page-hero h1 { color: #000 !important; text-shadow: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --------------------------------------------------------------------------
   22. Page scaffold
   -------------------------------------------------------------------------- */
.page-main { min-height: 50svh; }
/* Interior pages start below the fixed header; the home page does not because
   its cinematic hero deliberately runs under a transparent navbar. */
.page-main--offset { padding-top: var(--header-h); }