/* =========================================================
   PROPERTY ZOOM AI: LANDING PAGE STYLES (full revision)
   Design tokens live at the top. Sections follow page order:
   nav, hero, how it works, governance, outcomes, who it's for,
   Founding 200, FAQ, contact, footer, privacy page, responsive.
   ========================================================= */

:root{
  /* color: ink navy + cobalt (brand) with a soft champagne accent */
  --ink:        #0A1524;   /* primary dark background */
  --ink-2:      #0F2038;   /* raised surface on dark */
  --cobalt:     #2F6FEE;   /* brand blue, sampled from logo */
  --cobalt-2:   #6E9BFF;   /* lighter cobalt for dark backgrounds and hover */
  --paper:      #F7F4EE;   /* light section background */
  --paper-2:    #EFE9DD;   /* deeper neutral for alternating bands */
  --blush:      #C9A876;   /* champagne accent, used sparingly */
  --blush-deep: #A9824F;
  --text-dark:  #172033;
  --text-mute:  #5C6A82;
  --text-light: #F3F1EA;
  --text-light-mute: #A9B6CE;
  --rule-dark:  rgba(23,32,51,0.12);
  --rule-light: rgba(255,255,255,0.10);

  --ink-gradient: linear-gradient(180deg, var(--ink) 0%, #0c1b30 100%);

  --serif: 'Roboto Slab', Georgia, serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1200px;
  --edge: clamp(24px, 6vw, 96px);
  --section-y: clamp(88px, 11vw, 140px);
  --header-h: 84px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  font-family: var(--sans);
  color: var(--text-dark);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
::selection{ background: var(--cobalt); color: #fff; }

/* Anchored sections land below the fixed header */
section[id]{ scroll-margin-top: var(--header-h); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--cobalt-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: #fff;
  color: var(--text-dark);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
}
.skip-link:focus{ top: 16px; }

/* Shared section headings (light sections) */
.section-headline{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  color: var(--text-dark);
  max-width: 760px;
  margin: 0 0 20px;
}
.section-intro{
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 620px;
  margin: 0 0 48px;
}

/* =========================================================
   BUTTONS (shared)
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 100px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary{
  background: var(--cobalt);
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(47,111,238,0.65);
}
.btn-primary:hover{ background: var(--cobalt-2); transform: translateY(-2px); }
.btn-ghost{
  color: var(--text-light);
  border-color: rgba(255,255,255,0.28);
}
.btn-ghost:hover{ border-color: #fff; }
.btn-wide{ width: 100%; padding: 17px 30px; font-size: 16px; }

/* =========================================================
   NAV (fixed header)
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: 20px 0;
}
.site-header.scrolled,
.site-header.solid{ /* .solid is used by the privacy page */
  background: rgba(10, 21, 36, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  padding: 12px 0;
}
.nav-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand{ display: flex; align-items: center; flex-shrink: 0; }
.brand-mark{ height: 48px; width: auto; }

.primary-nav{ display: flex; align-items: center; gap: 30px; }
.nav-link{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-light-mute);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav-link:hover{ color: #fff; }
.nav-cta{
  color: #fff;
  background: var(--cobalt);
  padding: 10px 20px;
  border-radius: 100px;
}
.nav-cta:hover{ background: var(--cobalt-2); }

.nav-toggle{
  display: none;
  position: relative;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span{
  display: block; height: 2px; width: 100%;
  background: var(--text-light);
  border-radius: 2px;
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink-gradient);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 40px var(--edge) 90px; /* the banner starts just under the menu bar */
}
.parcel-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}
.hero::after{ /* bottom scrim so text stays legible over the canvas */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,11,20,0) 0%, rgba(6,11,20,.55) 100%);
  pointer-events: none;
}
.hero-inner{
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero-kicker{
  font-size: 18px;
  font-weight: 600;
  color: var(--blush);
  margin: 0 0 22px;
}
/* Text kept for search engines and screen readers, hidden visually */
.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;
}
/* America's Community Economic Growth Plan banner.
   Sized so the banner's title lines up with the headline below it,
   and feathered on all four sides so it fades into the navy with no box edge. */
.hero-banner{
  /* Full-width banner: runs edge to edge, capped at 1500px on large screens.
     The negative left margin lines the banner's title (8.25% in from the image edge)
     up with the headline; the negative bottom margin lets the headline sit on the faded treeline. */
  width: min(104.7vw, 1500px);
  margin: 0 0 -70px calc(-0.0825 * min(104.7vw, 1500px));
}
.hero-banner img{
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),   /* left: 12%, right: 12% */
    linear-gradient(180deg, transparent 0, #000 24%, #000 55%, transparent 88%);  /* top: 24%, bottom: dissolves from 55% to 88% */
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),   /* left: 12%, right: 12% */
    linear-gradient(180deg, transparent 0, #000 24%, #000 55%, transparent 88%);  /* top: 24%, bottom: dissolves from 55% to 88% */
          mask-composite: intersect;
}
.hero-headline{
  position: relative; /* sits on top of the faded banner */
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 980px;
  margin: 0 0 18px;
}
.hero-sub{
  font-size: 16px; /* 16px minimum keeps body text readable on phones */
  line-height: 1.65;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 0 12px;
}
.hero-sub--second{ color: var(--text-light-mute); margin-bottom: 26px; }
.hero-actions{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* =========================================================
   2. HOW IT WORKS #how-it-works (light, steps + sample case)
   ========================================================= */
.how{ background: var(--paper); padding: var(--section-y) var(--edge); }
.how-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: start;
}
.how-steps{ list-style: none; margin: 0; padding: 0; }
.how-steps li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid var(--rule-dark);
}
.how-steps li:last-child{ border-bottom: 1px solid var(--rule-dark); }
.how-step-num{
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--cobalt);
}
.how-steps h3{
  font-size: 18px;
  font-weight: 700;
  margin: 2px 0 8px;
}
.how-steps p{
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mute);
  margin: 0;
}

/* The one "product" moment on the page: an illustrative case record */
.case-card{
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: #fff;
  border: 1px solid var(--rule-dark);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 30px 60px -36px rgba(23,32,51,0.35);
}
.case-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.case-card-title{ font-weight: 700; font-size: 15px; margin: 0; }
.case-card-tag{
  font-size: 12px;
  font-weight: 600;
  color: var(--blush-deep);
  background: var(--paper);
  border-radius: 100px;
  padding: 5px 12px;
}
.case-card-imagery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.case-panel svg{ display: block; width: 100%; height: auto; border-radius: 6px; }
.case-panel-label{ display: block; font-size: 12.5px; color: var(--text-mute); margin-top: 8px; }
.case-facts{ margin: 0; }
.case-facts div{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--rule-dark);
  font-size: 14px;
  line-height: 1.5;
}
.case-facts dt{ color: var(--text-mute); }
.case-facts dd{ margin: 0; font-weight: 600; }
.case-status{
  display: inline-block;
  color: var(--cobalt);
  background: rgba(47,111,238,0.10);
  border-radius: 100px;
  padding: 2px 10px;
}
.case-card-note{
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-mute);
}

/* =========================================================
   3. GOVERNANCE #governance (dark)
   ========================================================= */
.fair{ background: var(--ink-gradient); padding: var(--section-y) var(--edge); }
.fair-inner{ max-width: var(--max); margin: 0 auto; }
.fair-headline{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.18;
  color: #fff;
  max-width: 18ch;
  margin: 0 0 26px;
}
.fair-body{
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-light-mute);
  max-width: 620px;
  margin: 0 0 64px;
}
.fair-points{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.fair-point{ border-top: 1px solid var(--rule-light); padding-top: 20px; }
.fair-point h3{ font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.fair-point p{ font-size: 14.5px; line-height: 1.65; color: var(--text-light-mute); margin: 0; }

/* =========================================================
   4. OUTCOMES #outcomes (light, outcomes + reinvestment + local work)
   ========================================================= */
.outcomes{ background: var(--paper-2); padding: var(--section-y) var(--edge); }
.outcomes-inner{ max-width: var(--max); margin: 0 auto; }
.outcomes-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 96px;
}
.outcome-block{ border-top: 2px solid var(--cobalt); padding-top: 18px; }
.outcome-block h3{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 10px;
}
.outcome-block p{ font-size: 14.5px; line-height: 1.65; color: var(--text-mute); margin: 0; }

.reinvest{ margin-bottom: 96px; }
.reinvest-headline{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 10px;
}
.reinvest-intro{ font-size: 15.5px; color: var(--text-mute); margin: 0 0 28px; }
.reinvest-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.reinvest-item{ margin: 0; }
.reinvest-item img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}
.reinvest-item figcaption{ font-size: 14.5px; line-height: 1.6; color: var(--text-mute); }
.reinvest-item strong{ color: var(--text-dark); }

.local-work{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid var(--rule-dark);
}
.local-work-headline{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.2;
  margin: 0;
}
.local-work p{ font-size: 16px; line-height: 1.75; color: var(--text-mute); margin: 0; }

/* =========================================================
   5. WHO IT'S FOR #who-its-for (light)
   ========================================================= */
.audience{ background: var(--paper); padding: var(--section-y) var(--edge); }
.audience-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
}
.audience-body{
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-mute);
  margin: 0 0 30px;
  max-width: 480px;
}
.text-link{
  font-weight: 700;
  font-size: 15px;
  color: var(--cobalt);
  border-bottom: 1px solid rgba(47,111,238,0.35);
  padding-bottom: 3px;
  transition: border-color .2s var(--ease);
}
.text-link:hover{ border-color: var(--cobalt); }
.audience-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-dark);
}
.audience-list li{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-dark);
}
.audience-role{ font-family: var(--serif); font-size: 17px; color: var(--text-dark); }
.audience-desc{ font-size: 14.5px; line-height: 1.6; color: var(--text-mute); }

/* =========================================================
   6. FOUNDING 200 #founding-200 (dark)
   ========================================================= */
.founding{ background: var(--ink-gradient); padding: var(--section-y) var(--edge); color: var(--text-light); }
.founding-inner{ max-width: var(--max); margin: 0 auto; }
/* America's Founding 200 logo on the left, headline + intro on the right */
.founding-head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.founding-head .founding-intro{ margin-bottom: 0; }
.founding-logo{ width: 260px; height: auto; order: -1; }
.founding-headline{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 22px;
}
.founding-intro{
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-light-mute);
  max-width: 640px;
  margin: 0 0 64px;
}
.source-ref{ color: var(--cobalt-2); font-size: 12px; padding: 0 2px; }
.founding-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 56px;
}
.founding-receive h3, .founding-path h3{
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}
.founding-receive ul, .founding-path ol{ list-style: none; margin: 0; padding: 0; }
.founding-receive li{
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-light-mute);
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--rule-light);
  position: relative;
}
.founding-receive li::before{
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cobalt-2);
}
.founding-path li{
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-light-mute);
  padding: 12px 0;
  border-top: 1px solid var(--rule-light);
}
.founding-path-label{
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--cobalt-2);
  margin-bottom: 4px;
}
.founding-cta{ margin-bottom: 56px; }
.founding-cta-note{
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-light-mute);
  max-width: 460px;
  margin: 16px 0 0;
}
.source-note{ font-size: 12.5px; color: rgba(169,182,206,0.7); margin: 0; }

/* =========================================================
   7. FAQ #faq (light)
   ========================================================= */
.faq{ background: var(--paper); padding: var(--section-y) var(--edge); }
.faq-inner{ max-width: 860px; margin: 0 auto; }
.faq-list{ border-top: 1px solid var(--rule-dark); margin-top: 36px; }
.faq-list details{ border-bottom: 1px solid var(--rule-dark); }
.faq-list summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
}
.faq-list summary::-webkit-details-marker{ display: none; }
.faq-list summary::after{
  content: "+";
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--cobalt);
  transition: transform .2s var(--ease);
  flex-shrink: 0;
}
.faq-list details[open] summary::after{ transform: rotate(45deg); }
.faq-list details p{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-mute);
  max-width: 680px;
  margin: 0 0 24px;
}
.faq-list details a{ color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   8. CONTACT #contact (form)
   ========================================================= */
.contact{ background: var(--paper-2); padding: var(--section-y) var(--edge); }
.contact-inner{ max-width: 760px; margin: 0 auto; }
.contact-form{
  background: #fff;
  border: 1px solid rgba(23,32,51,0.10);
  border-radius: 18px;
  padding: 44px;
  box-shadow: 0 30px 60px -30px rgba(23,32,51,0.18);
}
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field{ display: flex; flex-direction: column; margin-bottom: 22px; }
.field label{ font-size: 13.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 9px; }
.field .optional{ font-weight: 400; color: var(--text-mute); }
.field input, .field select, .field textarea{
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text-dark);
  background: var(--paper);
  border: 1px solid rgba(23,32,51,0.16);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--cobalt); background: #fff; }
.field textarea{ resize: vertical; }
.form-privacy{ font-size: 13px; color: var(--text-mute); margin: 16px 0 0; text-align: center; }
.form-privacy a{ color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.form-note{ margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--cobalt); min-height: 20px; text-align: center; }
.form-note.is-error{ color: #b3512f; }
.form-note a{ text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); padding: 64px var(--edge) 48px; }
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.footer-mark{ height: 40px; width: auto; }
.footer-note{ font-size: 14px; color: var(--text-light-mute); max-width: 480px; line-height: 1.6; margin: 0; }
.footer-legal{ font-size: 13px; color: rgba(169,182,206,0.65); margin: 12px 0 0; }
.footer-link{
  color: rgba(169,182,206,0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 14px;
}
.footer-link:hover{ color: var(--text-light); }

/* =========================================================
   LEGAL / UTILITY PAGES (privacy.html)
   ========================================================= */
.legal{ background: var(--paper); padding: 168px var(--edge) 120px; }
.legal-inner{ max-width: 760px; margin: 0 auto; }
.legal-headline{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 46px);
  color: var(--text-dark);
  margin: 10px 0 14px;
}
.legal-updated{
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 0 0 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(23,32,51,0.10);
}
.legal-body h2{ font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--text-dark); margin: 40px 0 14px; }
.legal-body h2:first-child{ margin-top: 0; }
.legal-body p{ font-size: 15px; line-height: 1.75; color: var(--text-mute); margin: 0 0 16px; }
.legal-body ul{ margin: 0 0 16px; padding-left: 20px; }
.legal-body li{ font-size: 15px; line-height: 1.75; color: var(--text-mute); margin-bottom: 8px; }
.legal-body a{ color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.legal-body h3{ font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--text-dark); margin: 28px 0 10px; }
.legal-body strong{ color: var(--text-dark); }
.legal-updated strong{ color: var(--text-dark); }
.legal-body h2[id]{ scroll-margin-top: var(--header-h); }
/* Legacy class kept so the existing privacy page still renders its label */
.section-label{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blush-deep);
  margin-bottom: 22px;
}

/* =========================================================
   RESPONSIVE (rules listed in page order)
   ========================================================= */
@media (max-width: 1024px){
  .fair-points{ grid-template-columns: 1fr 1fr; }
  .outcomes-grid{ grid-template-columns: 1fr 1fr; }
}

/* Collapse the nav to the menu button before the longer
   "America's Founding 200" link runs out of room */
@media (max-width: 1100px){
  .brand-mark{ height: 40px; }
  .primary-nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(80vw, 320px);
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px var(--edge);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .primary-nav.open{ transform: translateX(0); visibility: visible; transition: transform .35s var(--ease); }
  .nav-toggle{ display: flex; }
  .nav-link{ font-size: 17px; }
  .nav-cta{ margin-top: 8px; }
}

@media (max-width: 900px){
  :root{ --header-h: 72px; }

  .how-inner{ grid-template-columns: 1fr; gap: 48px; }
  .case-card{ position: static; }
  .reinvest-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  .local-work{ grid-template-columns: 1fr; gap: 20px; }
  .audience-inner{ grid-template-columns: 1fr; gap: 40px; }
  .founding-columns{ grid-template-columns: 1fr; gap: 40px; }
  .founding-head{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .founding-logo{ width: 200px; order: -1; justify-self: center; } /* centered on tablets and phones */
  .form-row{ grid-template-columns: 1fr; gap: 0; }
  .contact-form{ padding: 30px 24px; }
}

@media (max-width: 600px){
  .hero-banner{
    width: calc(100% + 2 * var(--edge));
    margin: 0 0 16px calc(-1 * var(--edge));
  }
  .hero-banner img{
    aspect-ratio: 1.9 / 1;
    object-fit: cover;
    object-position: 0 0; /* keep the title, crop the scenery on the right */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 5%, #000 92%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
            mask-image:
      linear-gradient(90deg, transparent 0, #000 5%, #000 92%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  }
  .hero{ padding-top: 92px; padding-bottom: 80px; }
  .hero-headline br{ display: none; }
  .hero-actions .btn{ width: 100%; }
  .case-facts div{ grid-template-columns: 1fr; gap: 2px; }
  .fair-points{ grid-template-columns: 1fr; gap: 28px; }
  .outcomes-grid{ grid-template-columns: 1fr; margin-bottom: 72px; }
  .reinvest-grid{ grid-template-columns: 1fr; }
  .audience-list li{ grid-template-columns: 1fr; gap: 4px; }
  .footer-link{ display: inline-block; margin: 8px 14px 0 0; }
}