/* =====================================================
   Friends of Dragon Park — site styles
   Brand tokens v1.0 · WCAG 2.2 AA · ink on every bright
   ===================================================== */

:root {
  --color-white:      #FFFFFF;
  --color-parchment:  #FAF3DC;
  --color-ink:        #0E1733;
  --color-ink-60:     #5A6178;
  --color-teal:       #2FC8CF;
  --color-teal-deep:  #0E7F86;
  --color-gold:       #FFC245;
  --color-coral:      #F4463F;
  --color-meadow:     #8ED45C;
  --color-fern:       #2F7D5B;
  --color-rose:       #F63A63;
  --color-grey:       #F2F3F5;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-text: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;

  --text-caption: 14px;
  --text-body: 17px;
  --text-lead: 20px;
  --text-h3: 28px;
  --text-h2: 40px;
  --text-h1: 64px;

  --tracking-tight: -0.03em;
  --tracking-caps: 0.16em;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.65;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px;
  --sp-4: 40px; --sp-5: 64px; --sp-6: 96px;

  --container: 1280px;
  --gutter: 22px;
}

/* ---------- reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-white);
  border-radius: 4px;
}
.on-ink :focus-visible, .on-ink:focus-visible {
  outline-color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-ink);
}

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.motion-ok .btn:hover { transform: translateY(-2px); }
.btn-coral { background: var(--color-coral); color: var(--color-white); }
.btn-coral:hover { background: #E03B34; }
.btn-gold  { background: var(--color-gold); color: var(--color-ink); }
.btn-gold:hover { background: #F5B637; }
.btn-ghost-light {
  background: transparent; color: var(--color-white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
}
.btn-ghost-light:hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95); }
.btn-meadow { background: var(--color-ink); color: var(--color-white); }

/* =====================================================
   Scroll animation system — every rule that moves is
   scoped to .motion-ok, set by JS only when the visitor
   has not asked for reduced motion.
   ===================================================== */

/* reveal: rise + fade */
.motion-ok [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ok [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.motion-reduce [data-reveal] { opacity: 1; transform: none; }

/* hero load-in (page load, not scroll) */
.motion-ok .hero-rise {
  opacity: 0;
  transform: translateY(30px);
  animation: heroRise 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--rise-delay, 0ms);
}
@keyframes heroRise {
  to { opacity: 1; transform: none; }
}
.motion-reduce .hero-rise { opacity: 1; transform: none; }

/* =====================================================
   The Forest Path — the accessible route being funded.
   A teal spine down the left gutter, drawn by scroll.
   Decorative: every piece carries aria-hidden.
   ===================================================== */
.has-path { position: relative; }
.path-gutter {
  position: absolute;
  top: 0; bottom: 0;
  left: max(calc((100% - var(--container)) / 2), var(--sp-3));
  width: var(--gutter);
  pointer-events: none;
}
.path-track {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 2px);
  width: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-teal) 22%, transparent);
}
.path-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 2px);
  width: 4px;
  border-radius: 2px;
  background: var(--color-teal);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
.motion-reduce .path-spine { transform: none; }
.path-dot {
  position: absolute;
  top: 4px;
  left: calc(50% - 11px);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-teal);
  transform: scale(0);
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.on-dark .path-dot { border-color: var(--color-ink); }
.path-lit .path-dot, .motion-reduce .path-dot { transform: scale(1); }

/* the path's destination: the solid ink dot at the final CTA */
.path-end-dot {
  position: absolute;
  top: 4px;
  left: calc(50% - 13px);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-ink);
  transform: scale(0);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms;
}
.path-lit .path-end-dot, .motion-reduce .path-end-dot { transform: scale(1); }

/* =====================================================
   Money bar fill
   ===================================================== */
.money-bar-fill {
  width: 0%;
  transition: width 1400ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}
.money-bar-fill.is-filled { width: var(--fill-target, 40%); }
.motion-reduce .money-bar-fill { transition: none; width: var(--fill-target, 40%); }

/* =====================================================
   Responsive visibility utilities
   .d-only / .d-inline show on desktop; .m-only / .m-inline on mobile.
   display:none removes the hidden copy from the accessibility tree.
   ===================================================== */
.m-only, .m-inline { display: none; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: 16px; top: -60px;
  z-index: 200;
  background: var(--color-ink); color: var(--color-white);
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus-visible { top: 0; }

/* =====================================================
   Header
   ===================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-white);
  border-bottom: 2px solid #E6E9F0;
  transition: box-shadow 200ms ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(14, 23, 51, 0.08); }
.header-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 64px;
  max-width: 1440px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-badge { width: 54px; height: 54px; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; line-height: 26px;
  letter-spacing: -0.02em;
}
.brand-sub {
  font-size: 11px; font-weight: 600; line-height: 14px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-ink-60);
}
.site-nav { display: flex; align-items: center; gap: 36px; }
.nav-link {
  font-weight: 600; font-size: 17px; line-height: 22px;
  text-decoration: none;
  padding: 11px 0; /* 44px target */
}
.nav-link:hover { color: var(--color-teal-deep); }
.btn-header { font-size: 17px; padding: 13px 26px; min-height: 48px; }
.btn-coral { color: var(--color-ink); }
.menu-btn {
  width: 48px; height: 48px;
  background: #F0F2F6; border: none; border-radius: 12px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-menu {
  display: none;
  flex-direction: column; gap: 8px;
  padding: 12px 20px 20px;
  background: var(--color-white);
  border-bottom: 2px solid #E6E9F0;
}
.mobile-menu-link {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  text-decoration: none;
  padding: 12px 4px;
}
.mobile-menu .btn { margin-top: 8px; }

/* =====================================================
   Hero (ink)
   ===================================================== */
.hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  overflow: clip;
}
.hero-inner {
  position: relative;
  max-width: 1440px; margin: 0 auto;
  padding: 88px 64px 0;
}
.hero-eyebrow { color: var(--color-teal); }
.hero-h1 {
  max-width: 790px;
  padding-top: 24px;
  font-size: clamp(40px, 5.3vw, 76px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.hero-body {
  max-width: 660px;
  padding-top: 24px;
  font-size: 22px; line-height: 36px;
  color: #C3CADB;
}
.hero-ctas { display: flex; align-items: center; gap: 20px; padding-top: 40px; }
.btn-hero { font-size: 21px; padding: 20px 38px; }
.hero-render-card {
  position: absolute;
  right: 64px; top: 104px;
  width: 512px; height: 498px;
  border-radius: 24px;
  background: #0A1229;
  overflow: clip;
}
.hero-render {
  position: absolute;
  left: 50%; top: 0;
  width: 860px; height: 100%;
  transform: translateX(-50%);
  background-size: cover; background-position: 50%;
}
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid #2A3350;
  margin-top: 56px;
  padding: 56px 0 48px;
}
.proof-cell { padding: 0 28px; border-left: 1px solid #2A3350; }
.proof-cell:first-child { padding-left: 0; border-left: none; }
.proof-cell:last-child { padding-right: 0; }
.proof-value {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
}
.proof-gold { color: var(--color-gold); }
.proof-teal { color: var(--color-teal); }
.proof-coral { color: var(--color-coral); }
.proof-white { color: var(--color-white); }
.proof-label { padding-top: 6px; font-size: 16px; line-height: 25px; color: #C3CADB; }

/* =====================================================
   Shared section scaffolding
   ===================================================== */
.sec { position: relative; }
.sec-inner {
  position: relative;
  max-width: 1440px; margin: 0 auto;
  padding: 96px 64px;
}
.has-path .sec-content { padding-left: 66px; } /* 22px gutter + 44px gap */
.sec-content { display: flex; flex-direction: column; gap: 36px; }
.has-path .path-gutter {
  position: absolute;
  left: 64px; top: 96px; bottom: 96px;
  width: var(--gutter);
}
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 64px;
}
.sec-head-left { display: flex; flex-direction: column; gap: 16px; }
.sec-head-stack { flex-direction: column; align-items: flex-start; gap: 16px; }
.sec h2 {
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.05;
}
.sec-intro {
  max-width: 420px; flex-shrink: 0;
  font-size: 18px; line-height: 30px;
  color: var(--color-ink-60);
}
.sec-intro-dark { color: #C3CADB; max-width: 400px; }
.eyebrow-muted { color: var(--color-ink-60); }
.eyebrow-gold { color: #8A6410; }
.eyebrow-goldlight { color: var(--color-gold); }
.eyebrow-meadow { color: var(--color-meadow); }
.card-row { display: flex; gap: 24px; }
.card-row > * { flex: 1 1 0; }

/* path gutter internals (positions within the absolute gutter) */
.path-gutter .path-track,
.path-gutter .path-spine { top: 0; bottom: 0; }
.path-dot { z-index: 2; }
.dot-teal { background: var(--color-teal); border-color: var(--color-white); box-shadow: 0 0 0 3px var(--color-ink); }
.sec-problem .dot-teal, .sec-who .dot-teal, .sec-faq .dot-teal { border-color: var(--color-ink); box-shadow: none; border-width: 4px; }
.dot-gold { background: var(--color-gold); border: 4px solid var(--color-teal); box-shadow: none; }
.dot-meadow { background: var(--color-meadow); border: 4px solid var(--color-teal); box-shadow: none; }
.dot-coral { background: var(--color-coral); border: 4px solid var(--color-ink); box-shadow: none; }

/* =====================================================
   Problem (white)
   ===================================================== */
.sec-problem { background: var(--color-white); }
.problem-card {
  background: #FFF3F2;
  border-left: 6px solid var(--color-coral);
  border-radius: 20px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.problem-card h3 {
  font-size: 25px; line-height: 32px;
  letter-spacing: -0.01em;
}
.problem-card p { font-size: 17px; line-height: 28px; }

/* =====================================================
   Plan (parchment)
   ===================================================== */
.sec-plan { background: var(--color-parchment); }
.forest-callout {
  background: var(--color-teal);
  border-radius: 20px;
  padding: 36px 40px;
  display: flex; align-items: center; gap: 40px;
  color: var(--color-ink);
}
.forest-callout-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.forest-callout-text h3 {
  font-size: 34px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.1;
}
.forest-callout-text p { font-size: 18px; line-height: 29px; }
.forest-stats { display: flex; flex-shrink: 0; }
.forest-stat {
  display: flex; flex-direction: column-reverse; gap: 2px;
  padding: 0 26px;
  border-left: 1px solid rgba(11, 75, 79, 0.35);
}
.forest-stat:first-child { border-left: none; }
.forest-stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.forest-stat-label {
  font-size: 14px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #0B4B4F;
}
.plan-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.plan-card-bar {
  width: 40px; height: 6px; border-radius: 3px;
  background: var(--color-meadow);
}
.plan-card h3 { font-size: 23px; line-height: 30px; letter-spacing: -0.01em; }
.plan-card p { font-size: 16px; line-height: 27px; }
.renderings { display: flex; flex-direction: column; gap: 20px; }
.render-row { display: flex; gap: 20px; }
.render-fig { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.render-fig-tower { flex: 0 0 420px; }
.render-img {
  height: 330px; border-radius: 18px;
  background: #DCE7DA center / cover no-repeat;
}
.render-fig-plan .render-img {
  background-color: var(--color-white);
  border: 2px solid #E4DCBF;
}
.render-img-contain { background-size: contain; }
.render-fig figcaption { font-size: 16px; line-height: 25px; font-weight: 600; }
.credit-row { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.credit-bar {
  width: 5px; height: 34px; border-radius: 3px;
  background: var(--color-ink-60); flex-shrink: 0;
}
.credit-text { font-size: 15px; line-height: 23px; color: var(--color-ink-60); }

/* =====================================================
   Dragon story (ink)
   ===================================================== */
.sec-dragon { background: var(--color-ink); color: var(--color-white); }
.sec-dragon .sec-content { gap: 40px; }
.dragon-head-row { display: flex; gap: 80px; align-items: flex-start; }
.dragon-head-left { flex: 0 0 600px; }
.dragon-head-right { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.dragon-body-1 { font-size: 19px; line-height: 33px; color: #C3CADB; }
.dragon-body-2 { font-size: 19px; line-height: 33px; color: var(--color-white); }
.dragon-quote {
  font-family: var(--font-display);
  font-size: 24px; line-height: 36px; font-weight: 400;
  color: var(--color-gold);
}
.dragon-photos { display: flex; gap: 20px; }
.dragon-fig { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.dragon-img {
  height: 290px; border-radius: 18px;
  background: #1A2340 center / cover no-repeat;
}
.dragon-fig figcaption { font-size: 16px; line-height: 25px; font-weight: 600; color: #C3CADB; }
.timeline {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid #2A3350;
  padding-top: 36px;
}
.timeline-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 32px;
  border-left: 1px solid #2A3350;
}
.timeline-item:first-child { padding-left: 0; border-left: none; }
.timeline-item:last-child { padding-right: 0; }
.timeline-year {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
}
.year-teal { color: var(--color-teal); }
.year-gold { color: var(--color-gold); }
.year-meadow { color: var(--color-meadow); }
.year-coral { color: var(--color-coral); }
.timeline-item dd { font-size: 17px; line-height: 27px; color: #C3CADB; }

/* =====================================================
   Coalition (white)
   ===================================================== */
.sec-who { background: var(--color-white); }
.who-cards { gap: 20px; }
.who-card {
  border-radius: 16px;
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.who-cards-teal .who-card { background: #F2FBFB; }
.who-cards-cream .who-card { background: #FFF8E9; }
.who-card h3 { font-size: 21px; line-height: 28px; letter-spacing: -0.01em; }
.who-card p { font-size: 16px; line-height: 26px; color: var(--color-ink-60); }

/* =====================================================
   Community (ink)
   ===================================================== */
.sec-community { background: var(--color-ink); color: var(--color-white); }
.community-strip { display: flex; gap: 16px; height: 300px; }
.community-photo {
  border-radius: 18px;
  background-color: #1A2340;
  background-size: cover; background-position: 50%;
  flex: 0 0 230px;
}
.community-photo.cp-wide { flex: 1 1 auto; }
.community-bottom { display: flex; gap: 24px; }
.join-card {
  flex: 0 0 470px;
  background: var(--color-meadow);
  border-radius: 20px;
  padding: 36px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  color: var(--color-ink);
}
.join-card-top { display: flex; flex-direction: column; gap: 14px; }
.join-card h3 { font-size: 34px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.join-card p { font-size: 17px; line-height: 28px; }
.join-card-actions { display: flex; align-items: center; gap: 14px; }
.btn-join {
  background: var(--color-ink); color: var(--color-white);
  font-size: 19px; padding: 17px 30px;
}
.btn-join:hover { background: #1A2547; }
.join-count { font-size: 15px; line-height: 22px; font-weight: 600; color: #2C4D14; }
.post-card {
  flex: 1;
  background: var(--color-white);
  border-radius: 20px;
  overflow: clip;
  display: flex; flex-direction: column;
  color: var(--color-ink);
}
.post-head {
  padding: 20px 28px;
  border-bottom: 2px solid #E6E9F0;
  display: flex; justify-content: space-between; align-items: center;
}
.post-head-left { display: flex; align-items: center; gap: 12px; }
.post-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
}
.post-id { display: flex; flex-direction: column; gap: 1px; }
.post-author { font-size: 17px; line-height: 22px; font-weight: 700; }
.post-meta { font-size: 14px; line-height: 18px; color: var(--color-ink-60); }
.post-pinned {
  font-size: 13px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-teal-deep);
}
.post-body {
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px; flex: 1;
}
.post-body p:first-child { font-size: 19px; line-height: 31px; }
.post-actions {
  display: flex; gap: 20px; padding-top: 2px;
  font-size: 15px; font-weight: 600; color: var(--color-ink-60);
}

/* =====================================================
   Money (light grey)
   ===================================================== */
.sec-money { background: #F5F7F9; }
.money-bar-block { display: flex; flex-direction: column; gap: 18px; }
.money-bar-labels { display: flex; justify-content: space-between; align-items: flex-end; }
.money-bar-label-left, .money-bar-label-right {
  font-size: 14px; line-height: 18px; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.money-bar-label-left { color: var(--color-ink-60); }
.money-bar-label-right { color: var(--color-coral); }
.money-bar {
  height: 72px;
  border: 3px solid var(--color-ink);
  border-radius: 14px;
  overflow: clip;
  display: flex;
  background: var(--color-white);
}
.money-bar-fill {
  background: var(--color-meadow);
  display: flex; align-items: center;
  overflow: clip;
}
.money-bar-fill-text {
  padding-left: 24px;
  font-family: var(--font-display);
  font-size: 28px; line-height: 34px; font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 400ms ease 900ms;
}
.money-bar-fill.is-filled .money-bar-fill-text,
.motion-reduce .money-bar-fill-text { opacity: 1; }
.money-bar-rest {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-end;
}
.money-bar-rest-text {
  padding-right: 24px;
  font-family: var(--font-display);
  font-size: 28px; line-height: 34px; font-weight: 600;
  color: var(--color-coral);
  white-space: nowrap;
}
.money-bar-captions { display: flex; justify-content: space-between; }
.money-caption-secured { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #3F6B22; }
.money-caption-total { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-60); }
.money-breakdown { display: flex; gap: 24px; padding-top: 4px; }
.money-break { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.money-break-label {
  font-size: 15px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.mbl-green { color: #3F6B22; }
.mbl-gold { color: #8A6410; }
.mbl-coral { color: var(--color-coral); }
.money-break dd { font-size: 16px; line-height: 26px; }
.money-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.mc-coral { border-top: 6px solid var(--color-coral); }
.mc-slate { border-top: 6px solid var(--color-ink-60); }
.mc-fern { border-top: 6px solid var(--color-fern); }
.money-card-eyebrow { font-size: 13px; line-height: 16px; }
.mce-coral { color: var(--color-coral); }
.mce-slate { color: var(--color-ink-60); }
.mce-fern { color: var(--color-fern); }
.money-card h3 { font-size: 24px; line-height: 31px; }
.money-card p { font-size: 17px; line-height: 28px; }
.btn-money { font-size: 18px; padding: 14px 28px; margin-top: 4px; }

/* =====================================================
   FAQ (parchment)
   ===================================================== */
.sec-faq { background: var(--color-parchment); }
.faq-grid { display: flex; align-items: flex-start; gap: 56px; }
.faq-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 28px; }
.faq-item { display: flex; flex-direction: column; gap: 10px; }
.faq-item:not(:last-child) {
  padding-bottom: 26px;
  border-bottom: 2px solid #E4DCBF;
}
.faq-item dt {
  font-family: var(--font-display);
  font-size: 25px; line-height: 33px; font-weight: 600;
  letter-spacing: -0.01em;
}
.faq-item dd { font-size: 17px; line-height: 29px; }

/* =====================================================
   Final CTA (gold)
   ===================================================== */
.sec-final { background: var(--color-gold); }
.sec-final .sec-inner { padding: 88px 64px; }
.sec-final .path-gutter { top: 88px; bottom: 88px; }
.path-gutter-end .path-spine-end {
  background: var(--color-ink);
}
.path-gutter-end .path-end-dot { top: auto; bottom: 0; }
.final-content { flex-direction: row; justify-content: space-between; align-items: center; gap: 64px; }
.final-left { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.final-left h2 { font-size: clamp(34px, 4.2vw, 60px); }
.final-left p { font-size: 20px; line-height: 33px; }
.final-right { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex-shrink: 0; }
.btn-final {
  background: var(--color-ink); color: var(--color-white);
  font-size: 23px; padding: 22px 44px;
}
.btn-final:hover { background: #1A2547; }
.final-caption { font-size: 16px; line-height: 26px; color: #6B4A05; max-width: 300px; }

/* =====================================================
   Footer (ink)
   ===================================================== */
.site-footer { background: var(--color-ink); color: #C3CADB; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 72px 64px 56px; }
.footer-cols { display: flex; align-items: flex-start; gap: 80px; }
.footer-brand-col { flex: 0 0 400px; display: flex; flex-direction: column; gap: 16px; }
.footer-brand-row { display: flex; align-items: center; gap: 14px; }
.footer-badge { width: 50px; height: 50px; color: #FFFFFF; }
.footer-wordmark {
  font-family: var(--font-display);
  font-size: 22px; line-height: 28px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.footer-mission { font-size: 16px; line-height: 27px; }
.footer-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; }
.footer-eyebrow { font-size: 13px; line-height: 16px; color: var(--color-teal); }
.footer-list { list-style: none; font-size: 16px; line-height: 29px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--color-white); text-decoration: underline; }
.footer-bottom {
  margin-top: 44px;
  border-top: 1px solid #2A3350;
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 40px;
}
.footer-loc, .footer-credit { font-size: 15px; line-height: 18px; color: #8E97B0; }

/* =====================================================
   Mobile sticky give bar
   ===================================================== */
.sticky-give {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--color-white);
  border-top: 2px solid #E6E9F0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 12px));
  display: none;
  align-items: center; gap: 12px;
  transform: translateY(110%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-give.is-shown { transform: none; }
.motion-reduce .sticky-give { transition: none; }
.sticky-give-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sticky-give-title { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 600; }
.sticky-give-sub { font-size: 13px; line-height: 18px; color: var(--color-ink-60); }
.btn-sticky { font-size: 17px; padding: 15px 24px; flex-shrink: 0; }

/* =====================================================
   Laptop/tablet: below 1430px the absolute hero card would
   collide with the headline, so the hero becomes a grid —
   text left, render right, proof strip across both.
   ===================================================== */
@media (max-width: 1430px) and (min-width: 861px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 38vw, 512px);
    column-gap: 48px;
    grid-template-areas:
      "eyebrow card"
      "h1      card"
      "body    card"
      "ctas    card"
      "proof   proof";
  }
  .hero-eyebrow { grid-area: eyebrow; }
  .hero-h1 { grid-area: h1; max-width: none; font-size: clamp(40px, 4.6vw, 64px); }
  .hero-body { grid-area: body; max-width: none; align-self: start; }
  .hero-ctas { grid-area: ctas; align-self: end; }
  .proof-strip { grid-area: proof; }
  .hero-render-card {
    grid-area: card;
    position: relative; right: auto; top: auto;
    width: 100%; height: auto; min-height: 430px;
    align-self: stretch;
  }
}

/* =====================================================
   Mobile — 860px and down
   ===================================================== */
@media (max-width: 860px) {
  .d-only { display: none !important; }
  .d-inline { display: none !important; }
  .m-only { display: flex; }
  .m-inline { display: inline; }
  ul.m-only, p.m-only, div.money-bar-captions { display: flex; }
  p.m-inline, span.m-inline { display: inline; }
  br.m-only { display: block; }

  :root { --gutter: 16px; }

  /* header */
  .header-inner { padding: 14px 20px; }
  .brand-badge { width: 42px; height: 42px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 16px; line-height: 20px; }
  .site-nav { display: none; }
  .menu-btn { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }

  /* hero */
  .hero-inner { padding: 36px 20px 0; }
  .hero-h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; padding-top: 20px; }
  .hero-body { font-size: 17px; line-height: 29px; padding-top: 20px; }
  .hero-render-card {
    position: relative; right: auto; top: auto;
    width: 100%; height: 230px;
    border-radius: 18px;
    margin-top: 20px;
  }
  .hero-render { width: 140%; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 20px; }
  .btn-hero { font-size: 19px; padding: 18px; width: 100%; }
  .proof-strip {
    grid-template-columns: 1fr 1fr;
    margin-top: 32px;
    padding: 0 0 36px;
    border-top: none;
  }
  .proof-cell { padding: 24px 0 0 14px; border-left: 1px solid #2A3350; border-top: 1px solid #2A3350; }
  .proof-cell:first-child, .proof-cell:nth-child(3) { padding-left: 0; border-left: none; }
  .proof-cell:first-child, .proof-cell:nth-child(2) { border-top: 2px solid #2A3350; }
  .proof-cell:nth-child(2) { padding-right: 0; }
  .proof-value { font-size: 28px; }
  .proof-teal { color: var(--color-meadow); }
  .proof-label { padding-top: 4px; font-size: 14px; line-height: 22px; }

  /* sections shared */
  .sec-inner { padding: 44px 20px; }
  .has-path .path-gutter { left: 20px; top: 44px; bottom: 44px; }
  .has-path .sec-content { padding-left: 34px; } /* 16px gutter + 18px gap */
  .sec-content { gap: 22px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .sec-intro { max-width: none; font-size: 17px; line-height: 28px; }
  .eyebrow { font-size: 12px; line-height: 16px; }
  .card-row { flex-direction: column; gap: 12px; }
  .path-track, .path-spine { width: 3px; left: calc(50% - 1.5px); }
  .path-dot { width: 16px; height: 16px; left: calc(50% - 8px); border-width: 3px !important; }
  .path-end-dot { width: 20px; height: 20px; left: calc(50% - 10px); }

  /* problem */
  .problem-card { border-radius: 16px; border-left-width: 5px; padding: 20px; gap: 8px; }
  .problem-card h3 { font-size: 20px; line-height: 26px; letter-spacing: 0; }
  .problem-card p { font-size: 16px; line-height: 26px; }

  /* plan */
  .forest-callout { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 24px 22px; gap: 20px; }
  .forest-callout-text h3 { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
  .forest-callout-text p { font-size: 16px; line-height: 27px; }
  .forest-stats { justify-content: space-between; }
  .forest-stat { border-left: none; padding: 0; flex: 1; }
  .forest-stat-num { font-size: 22px; }
  .forest-stat-label { font-size: 12px; line-height: 16px; letter-spacing: 0.1em; }
  .plan-card { border-radius: 16px; padding: 20px; gap: 10px; }
  .plan-card-bar { display: none; }
  .plan-card-quiet { display: none; }
  .plan-card h3 { font-size: 20px; line-height: 26px; }
  .render-row { flex-direction: column; gap: 12px; }
  .render-row-b { flex-direction: column; }
  .render-fig { gap: 8px; }
  .render-fig-tower { flex: 1 1 auto; }
  .render-img { height: 200px; border-radius: 16px; }
  .render-fig figcaption { font-size: 15px; line-height: 23px; }
  .credit-text { font-size: 13px; line-height: 20px; }

  /* dragon */
  .dragon-head-row { flex-direction: column; gap: 22px; }
  .dragon-head-left { flex: none; }
  .dragon-body-1, .dragon-body-2 { font-size: 17px; line-height: 29px; }
  .dragon-quote { font-size: 20px; line-height: 30px; }
  .dragon-photos { flex-direction: column; gap: 12px; }
  .dragon-img { height: 220px; border-radius: 16px; }
  .timeline { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .timeline-item { padding: 0; border-left: none; }
  .timeline-year { font-size: 34px; }

  /* coalition */
  .who-cards { gap: 12px; }
  .who-card { padding: 20px 22px; }

  /* community */
  .community-strip { height: 150px; gap: 8px; }
  .community-photo { flex: 1 1 0; border-radius: 14px; }
  .community-photo.cp-wide { flex: 1 1 0; }
  .cp-2 { order: 2; }
  .cp-3 { order: 3; }
  .community-bottom { flex-direction: column; }
  .join-card { flex: none; border-radius: 18px; padding: 24px 22px; gap: 14px; }
  .join-card h3 { font-size: 26px; line-height: 32px; letter-spacing: 0; }
  .join-card p { font-size: 16px; line-height: 26px; }
  .btn-join { width: 100%; padding: 16px; font-size: 18px; }

  /* money */
  .money-bar-block { gap: 12px; }
  .money-bar { height: 60px; border-radius: 12px; }
  .money-bar-fill-text { padding-left: 14px; font-size: 20px; line-height: 24px; }
  .money-bar-rest-text { padding-right: 14px; font-size: 20px; line-height: 24px; }
  .money-card { border-radius: 18px; border-top-width: 5px; padding: 24px 22px; gap: 12px; }
  .money-card h3 { font-size: 22px; line-height: 28px; }
  .money-card p { font-size: 16px; line-height: 26px; }

  /* faq */
  .faq-grid { flex-direction: column; gap: 28px; }
  .faq-col:first-child .faq-item:last-child {
    padding-bottom: 26px;
    border-bottom: 2px solid #E4DCBF;
  }
  .faq-item dt { font-size: 20px; line-height: 27px; }
  .faq-item dd { font-size: 16px; line-height: 27px; }

  /* final CTA */
  .sec-final .sec-inner { padding: 44px 20px; }
  .sec-final .sec-content { padding-left: 0; }
  .final-content { flex-direction: column; align-items: stretch; gap: 20px; }
  .final-left { gap: 20px; max-width: none; }
  .final-left h2 { font-size: 34px; line-height: 1.08; }
  .final-left p { font-size: 17px; line-height: 28px; }
  .final-right { align-items: stretch; }
  .btn-final { width: 100%; font-size: 19px; padding: 19px; }

  /* footer */
  .footer-inner { padding: 40px 20px 110px; }
  .footer-cols { flex-direction: column; gap: 24px; }
  .footer-brand-col { flex: none; gap: 16px; }
  .footer-wordmark { font-size: 20px; line-height: 26px; }
  .footer-coalition {
    border-top: 1px solid #2A3350;
    padding-top: 22px; gap: 10px;
  }
  .footer-eyebrow { font-size: 12px; }
  .footer-inline-list { font-size: 15px; line-height: 27px; display: block; }
  .footer-bottom { margin-top: 24px; border-top: none; padding-top: 0; }
  .footer-credit { font-size: 14px; line-height: 24px; }

  /* sticky give bar */
  .sticky-give { display: flex; }
}