/* ============================================================
   Legacy Builders Alliance — design system + page styles (v0)
   ============================================================ */

/* --------- Fonts --------- */
@font-face {
  font-family: "Exalted Wide";
  src: url("/fonts/ExaltedWide-DEMO.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Google Fonts (Syncopate, Poppins, Libre Baskerville) loaded via <link> in HTML */

/* --------- Tokens --------- */
:root {
  --brand-brown:  #444035;
  --brand-green:  #4E5223;
  --brand-orange: #F7941D;
  --brand-sage:   #BFC2B0;
  --ink:          #37342A;
  --paper:        #FBFAF5;
  --white:        #FFFFFF;

  --shadow-soft:   0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --shadow-strong: 0 2px 8px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.18);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --max:      1200px;
  --max-text: 720px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* --------- Reset --------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* --------- Base --------- */
body {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------- Type primitives --------- */
.display {
  font-family: "Exalted Wide", "Syncopate", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}
.display.xl { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.display.lg { font-size: clamp(2rem, 5vw, 3.5rem); }
.display.md { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }

/* Exalted Wide is a WIDE uppercase face, so a single long word ("PROFESSIONALS")
   can exceed a narrow viewport at the clamp minimum. Step the minimums down on
   very small screens, and keep break-word as a guaranteed backstop. */
.display { overflow-wrap: break-word; }
@media (max-width: 420px) {
  .display.xl { font-size: clamp(2rem, 9vw, 3rem); }
  .display.lg { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
  .display.md { font-size: clamp(1.3rem, 6vw, 1.9rem); }
}

.subhead {
  font-family: "Syncopate", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0;
}

.eyebrow {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--brand-orange);
  margin: 0 0 1rem;
}

.lead {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  margin: 0;
}

.expressive {
  font-family: "Libre Baskerville", "Baskerville", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  margin: 0;
}

/* --------- Layout helpers --------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(var(--space-6), 9vw, var(--space-8));
}

.section--brown  { background: var(--brand-brown); color: var(--white); }
.section--green  { background: var(--brand-green); color: var(--white); }
.section--sage   { background: var(--brand-sage);  color: var(--ink); }
.section--paper  { background: var(--paper);       color: var(--ink); }

.section--brown .eyebrow,
.section--green .eyebrow {
  color: var(--brand-orange);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* --------- Buttons --------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: "Syncopate", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--brand-orange);
  color: var(--brand-brown);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { background: #ffa83d; }
.btn--ghost {
  border: 1.5px solid currentColor;
  color: inherit;
}
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--ink {
  background: var(--brand-brown);
  color: var(--white);
}
.btn--ink:hover { background: #5a5443; }

/* --------- Header / nav --------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--brand-brown) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1rem;
}
.site-header__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* The lockup is the brand's voice in the header, so it is sized to be read,
   not tucked away. 56px keeps "ALLIANCE" legible under the wordmark. */
.site-header__brand img {
  height: 56px;
  width: auto;
  display: block;
}
.site-header__brand picture { display: block; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.85;
  transition: opacity .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { opacity: 1; color: var(--brand-orange); }
.nav .btn { margin-left: 0.5rem; }

@media (max-width: 820px) {
  .nav .nav__links { display: none; }
}

/* --------- Hero --------- */
.hero {
  background: var(--brand-brown);
  color: var(--white);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 72vh, 820px);
  display: flex;
  align-items: center;
}
.hero > .container { width: 100%; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(78,82,35,.45), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(247,148,29,.10), transparent 50%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
/* Hero lockup image doubles as the page h1; the h1 is display:contents so it
   adds semantics without any layout box of its own. */
.hero__lockup-h1 {
  display: contents;
}
.hero__lockup {
  width: clamp(280px, 42vw, 540px);
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
  /* lockup is transparent PNG — no shadow */
  /* radius removed for transparent lockup */
}
.hero__tagline {
  max-width: none;
  margin: 0 auto;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
/* The tagline is held on one line by nowrap, which silently clipped it off the
   right edge on every phone width (it wants ~18.7em and a 320px screen gives
   ~15em). Below the nav breakpoint, scale the type to the viewport so the line
   still fits, and drop nowrap so a font-load fallback wraps rather than clips. */
@media (max-width: 820px) {
  .hero__tagline {
    white-space: normal;
    font-size: clamp(0.85rem, calc(5vw - 2px), 1.5rem);
  }
}
.hero__divider {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem auto;
  opacity: 0.55;
}
.hero__divider span {
  width: 8px;
  height: 8px;
  background: var(--white);
  transform: rotate(45deg);
}
.hero__cta {
  margin-top: 2rem;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__sub {
  margin-top: 3rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* --------- Promise (Section 2) --------- */
.promise { text-align: center; }
.promise .display { color: var(--brand-brown); margin-bottom: 1.5rem; }
.promise .lead { max-width: var(--max-text); margin-inline: auto; color: #4a4639; }

/* --------- Pillars (Section 3) --------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.pillar {
  background: var(--brand-brown);
  color: var(--white);
  /* radius removed for transparent lockup */
  padding: 2rem 1.6rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.pillar:hover {
  transform: translateY(-4px);
  background: #4f4a3d;
}
.pillar__num {
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--brand-orange);
  margin-bottom: 1.2rem;
  display: block;
}
.pillar__title {
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}
.pillar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
}
.pillar__list li::before {
  content: "·";
  margin-right: 0.5em;
  color: var(--brand-orange);
}

/* --------- Programs (Section 4) --------- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.program {
  background: var(--brand-green);
  color: var(--white);
  /* radius removed for transparent lockup */
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform .25s var(--ease);
  position: relative;
}
.program:hover { transform: translateY(-4px); }
.program__title {
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.program__body {
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  margin: 0;
  flex: 1;
}
.program__cta {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.program__cta::after { content: "→"; transition: transform .2s var(--ease); }
.program:hover .program__cta::after { transform: translateX(4px); }

/* --------- Symbolism (Section 5) --------- */
.symbolism {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 800px) {
  .symbolism { grid-template-columns: 1fr 1.4fr; gap: 4.5rem; }
}
.symbolism__icon {
  background: var(--brand-brown);
  border-radius: var(--radius-lg);
  padding: 3rem;
  display: grid;
  place-items: center;
}
.symbolism__icon img {
  width: 80%;
  max-width: 320px;
  /* radius removed for transparent lockup */
}
.symbolism__quote {
  border-left: 3px solid var(--brand-orange);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

/* --------- Testimonial (Section 6) --------- */
.testimonial {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
  position: relative;
}
.testimonial__mark {
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: var(--brand-green);
  opacity: 0.5;
  margin-bottom: -1.5rem;
}
.testimonial__attr {
  margin-top: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-brown);
}

/* --------- Sponsors --------- */
.sponsors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.sponsor {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 200px;
  height: 120px;
  background: var(--white);
  border: 1px solid rgba(68,64,53,.1);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  text-align: center;
}
.sponsor img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sponsor::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0;
  height: 3px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease);
  border-radius: 2px;
}
.sponsor:hover {
  border-color: rgba(247,148,29,.45);
  box-shadow: 0 6px 20px rgba(247,148,29,.12);
  transform: translateY(-2px);
}
.sponsor:hover::after {
  transform: scaleX(1);
}
.sponsor--bleed {
  padding: 0.2rem 0.4rem;
}
.sponsor--captioned {
  grid-template-rows: 1fr auto;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem 0.6rem;
}
.sponsor--captioned img {
  align-self: end;
}
.sponsor__caption {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--brand-charcoal);
  line-height: 1.2;
}
.sponsor--cta {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-orange);
  background: transparent;
  border: 1px dashed rgba(247,148,29,.5);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), border-style .2s var(--ease);
}
.sponsor--cta::after { display: none; }
.sponsor--cta:hover {
  background: var(--brand-orange);
  color: var(--white);
  border-color: var(--brand-orange);
  border-style: solid;
}
.sponsor--cta:focus:not(:hover) {
  background: transparent;
  border: 1px dashed rgba(247,148,29,.5);
  color: var(--brand-orange);
  outline: none;
}

/* Sponsor logo overrides.
   The old Veritas file carried a wide transparent margin, so it was scaled up to
   fill the card. The current file is a tight crop, and scaling it clipped 20px
   off each side against the card's overflow:hidden. It now sizes from
   `.sponsor img` (max-width/height 100%) and needs no transform. */

/* --------- Final CTA (Section 8) --------- */
.cta-final { text-align: center; }
.cta-final .display { margin-bottom: 1.5rem; }
.cta-final .expressive {
  color: var(--brand-orange);
  margin-bottom: 2.5rem;
}
.cta-final .buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------- Footer --------- */
.site-footer {
  background: #2e2c25;
  color: rgba(255,255,255,.7);
  padding-block: clamp(3rem, 6vw, 5rem);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-col h4 {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1rem;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-col a:hover { color: var(--brand-orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,.5);
}
.footer-tagline {
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,.7);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem;
  background: var(--brand-orange); color: var(--brand-brown);
  padding: 0.5rem 1rem; border-radius: 4px; z-index: 100;
}
/* =============================================================
   Additions for subpages and updated home hero
   ============================================================= */

/* --- nav active state --- */
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a.is-active { color: var(--brand-orange); opacity: 1; }
@media (max-width: 820px) {
  .nav__links { display: none; }
}

/* --- Mobile nav (hamburger disclosure) ---------------------------------
   Below 820px the inline link row is replaced by a toggle button that opens
   a full-width panel under the sticky header. Above 820px the toggle is
   hidden and links render inline as before. `.nav .nav__links.is-open` is
   specific enough to beat both `display:none` rules above regardless of
   source order. */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;                    /* don't let flex shrink the tap target */
  width: 44px;                       /* 44px = min comfortable tap target */
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav__toggle:hover { color: var(--brand-orange); border-color: var(--brand-orange); }
.nav__toggle svg { display: block; width: 22px; height: 22px; }
.nav__toggle .nav__icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon--open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon--close { display: block; }

@media (max-width: 820px) {
  .nav { gap: 0.75rem; }
  .nav__toggle { display: inline-flex; }
  /* Compact the header bar so the wordmark stops wrapping to three lines and
     the Join Us button stays on one. */
  .site-header__inner { gap: 0.75rem; padding-block: 0.75rem; }
  .site-header__brand img { height: 42px; }
  .nav .btn {
    margin-left: 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .nav .nav__links.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.5rem 0 0.75rem;
    background: var(--brand-brown);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
  }
  .nav .nav__links.is-open a {
    display: block;
    padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
    font-size: 1rem;
    opacity: 0.95;
  }
  .nav .nav__links.is-open a:hover,
  .nav .nav__links.is-open a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
  }
}

/* --- Hero with photo backdrop --- */
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero--photo .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Matches .page-hero--photo. At 0.32 under a heavy scrim the Sacramento River
     read as mud; the photograph should be the first thing you see. */
  opacity: 0.72;
  filter: contrast(1.03) saturate(1.05);
}
.hero--photo::before {
  background: linear-gradient(180deg, rgba(68,64,53,.18) 0%, rgba(68,64,53,.42) 55%, rgba(68,64,53,.80) 100%);
}

/* --- Page hero (subpages) --- */
.page-hero {
  background: var(--brand-brown);
  color: var(--white);
  padding-block: clamp(4rem, 8vw, 6rem) clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
  /* A short hero is a letterbox: at 1440x375 the box is 3.84:1, so cover threw
     away ~65% of a 4:3 photograph. Giving it real height brings the box closer
     to the source ratio and lets the picture actually read. */
  min-height: clamp(440px, 58vh, 620px);
  display: flex;
  align-items: center;
}
/* On desktop the box is wide, so it needs real height before a 4:3 photograph
   survives object-fit: cover. */
@media (min-width: 900px) {
  .page-hero { min-height: clamp(600px, 74vh, 860px); }
}
.page-hero > .container { width: 100%; }
.page-hero__inner { position: relative; z-index: 1; max-width: 880px; }
.page-hero .display { color: var(--white); margin-bottom: 1rem; }
.page-hero .eyebrow { color: var(--brand-orange); }
.page-hero__sub { color: rgba(255,255,255,.85); margin-top: 1.5rem; }

.page-hero--photo .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero--photo .page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 0.28 with a heavy scrim was the single biggest source of the "dull" read.
     The photograph is the point; the scrim only has to protect the type. */
  opacity: 0.68;
  filter: contrast(1.03) saturate(1.02);
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(68,64,53,.22) 0%, rgba(68,64,53,.48) 55%, rgba(68,64,53,.88) 100%),
    linear-gradient(90deg, rgba(68,64,53,.62) 0%, rgba(68,64,53,.10) 62%);
  pointer-events: none;
}

/* --- Symbolism photo (replaces brown panel + icon) --- */
.symbolism__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-strong);
}
.symbolism__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Light pillar variant for paper sections --- */
.pillars-grid--light .pillar {
  background: var(--brand-sage);
  color: var(--brand-brown);
}
.pillars-grid--light .pillar:hover {
  background: #cdd0c0;
}
.pillars-grid--light .pillar__num { color: var(--brand-orange); }
.pillars-grid--light .pillar__list { color: rgba(55,52,42,.85); }

/* --- Steps (Teams page) --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}
.step {
  background: rgba(0,0,0,.18);
  /* radius removed for transparent lockup */
  padding: 2rem 1.6rem;
  color: rgba(255,255,255,.92);
}
.step__num {
  display: block;
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-size: 2.6rem;
  color: var(--brand-orange);
  line-height: 1;
  margin-bottom: 1rem;
}
.step h3 {
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.step p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- Member directory --- */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.member-card {
  background: rgba(255,255,255,.06);
  /* radius removed for transparent lockup */
  padding: 1.5rem 1.5rem 2rem;
  text-align: center;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.member-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.1);
}
.member-card__photo {
  width: 100%;
  aspect-ratio: 1/1;
  background:
    linear-gradient(135deg, rgba(247,148,29,.15), rgba(78,82,35,.25)),
    var(--brand-green);
  border-radius: 50%;
  margin-bottom: 1.25rem;
}
.member-card__name {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  color: var(--white);
}
.member-card__role {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin: 0 0 0.3rem;
}
.member-card__org {
  font-size: 0.9rem;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.member-card__link {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
/* Light variant for paper sections */
.member-card--light {
  background: var(--brand-sage);
  color: var(--brand-brown);
}
.member-card--light:hover { background: #cdd0c0; }
.member-card--light .member-card__name { color: var(--brand-brown); }
.member-card--light .member-card__org  { color: rgba(55,52,42,.7); }

/* --- Text-heavy content blocks --- */
.text-content {
  max-width: 740px;
}
.text-content p { margin: 0 0 1rem; }
.text-content .display { color: var(--brand-brown); margin-bottom: 1rem; }

/* --- Contact grid + form --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
/* Grid items default to min-width:auto, so the long unbreakable email string
   would force the track past the viewport on narrow screens. Let tracks shrink
   and let the email wrap. */
.contact-grid > * {
  min-width: 0;
}
.contact-list a {
  overflow-wrap: anywhere;
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.contact-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.contact-list li {
  display: grid;
  gap: 0.2rem;
}
.contact-list__label {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
.contact-list a { color: var(--brand-brown); border-bottom: 1px dotted rgba(68,64,53,.3); }
.contact-list a:hover { color: var(--brand-orange); }

.contact-form {
  background: var(--brand-sage);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: grid;
  gap: 1rem;
}
.contact-form label {
  display: grid;
  gap: 0.4rem;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-brown);
}
.contact-form label { min-width: 0; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  /* width:100% + min-width:0 so the <select> can shrink below its longest
     option instead of forcing the whole form column past the viewport. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(68,64,53,.2);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.85);
  color: var(--brand-brown);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

/* --- Stages (redwood life cycle) --- */
.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.stage {
  background: var(--brand-sage);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  color: var(--brand-brown);
  display: grid;
  align-content: start;
  gap: 0.5rem;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.stage:hover {
  transform: translateY(-3px);
  background: #cdd0c0;
}
.stage__icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.3rem;
  display: block;
}
.stage__title {
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--brand-brown);
}
.stage__sub {
  font-family: "Libre Baskerville", "Baskerville", serif;
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 0.4rem;
  color: #C2700C;
}
.stage__body {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 0.6rem;
  color: rgba(55,52,42,.9);
}
.stage__partners {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(55,52,42,.7);
}
.stage__partners strong {
  color: var(--brand-brown);
  font-weight: 700;
}

.section--sage .eyebrow,
.section--sage .pillar__num {
  color: #C2700C;
}

.visit-steps {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  counter-reset: step;
  color: var(--brand-brown);
  max-width: 640px;
}
.visit-steps li {
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-top: 1px solid rgba(68,64,53,.18);
  counter-increment: step;
  line-height: 1.5;
  font-size: 1rem;
}
.visit-steps li:last-child {
  border-bottom: 1px solid rgba(68,64,53,.18);
}
.visit-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: "Exalted Wide", "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #C2700C;
}
.visit-note {
  margin: 2rem 0 0;
  max-width: 640px;
  padding: 1.25rem 1.5rem;
  background: rgba(68,64,53,.07);
  border-left: 4px solid #C2700C;
  color: var(--brand-brown);
}
.visit-note__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #C2700C;
  margin: 0 0 0.6rem;
}
.visit-note p:last-child {
  margin: 0;
  line-height: 1.6;
}

/* Thicken Syncopate-fallback digits/punctuation in Exalted Wide headings */
.num-fix {
  -webkit-text-stroke: 0.7px currentColor;
}

/* --------- Beta waitlist (/members/) --------- */
.waitlist {
  max-width: 620px;
  margin-inline: auto;
}
/* Honeypot. Kept in the layout and merely moved out of sight, because
   display:none is the first thing a scripted submitter learns to skip.
   aria-hidden + tabindex="-1" on the input keep it away from real users. */
.waitlist__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.waitlist__error {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(194, 112, 12, 0.14);
  border: 1px solid rgba(194, 112, 12, 0.45);
  color: #7a4405;
  font-size: 0.9rem;
}
.waitlist__done {
  background: var(--brand-sage);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
}
.waitlist__done .display {
  margin-bottom: 1rem;
}
.waitlist__done .lead {
  margin: 0;
}
.waitlist__form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --------- "Paused / returning" status notice ---------
   Sits at the top of a program page whose activity is not currently running.
   Deliberately not styled as an error: this is a status, not a failure. */
.status-note {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  background: var(--brand-sage);
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  color: var(--brand-brown);
}
.status-note__title {
  margin: 0 0 0.5rem;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-brown);
}
.status-note p {
  margin: 0;
  line-height: 1.6;
}
.status-note p + p {
  margin-top: 0.75rem;
}
.status-note a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------- Photo bands ---------
   Full-bleed image breaks between content sections. Each carries one line of
   type, so the scrim only has to hold contrast, not hide the picture. This is
   the main lever against the site reading as a stack of flat colour blocks. */
.band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  min-height: clamp(300px, 40vh, 440px);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.band__bg { position: absolute; inset: 0; z-index: 0; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(55,52,42,.40), rgba(55,52,42,.58));
  pointer-events: none;
}
.band__inner { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; }
.band .display { color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.band .expressive { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.band .eyebrow { color: var(--brand-orange); }
.band .buttons { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --------- Recognition band ---------
   The first hard proof on the site that this organization is real and that
   other people vouch for it. Photo carries the weight; copy stays out of its way. */
.proof {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .proof { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.proof__photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  min-width: 0;
}
.proof__photo img { width: 100%; height: auto; display: block; }
.proof__body { min-width: 0; }
.proof__amount {
  font-family: "Exalted Wide", "Syncopate", system-ui, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.proof__meta {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-top: 1.25rem;
}

/* --------- 2024 conference recap ---------
   Archival section. The photography carries an older logo, so the block is
   explicitly dated and captioned; presented that way the old mark reads as a
   timestamp rather than as brand drift. */
.recap {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .recap { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
.recap__player {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-strong);
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin-inline: auto;
  width: 100%;
}
.recap__player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  min-width: 0;
}
.recap__grid figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  aspect-ratio: 3 / 4;
}
.recap__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}
.recap__grid figure:hover img { transform: scale(1.04); }
/* Landscape-native galleries (the mixer set is 3:2) get their own ratio. */
.recap__grid--wide figure { aspect-ratio: 3 / 2; }
.recap__grid--wide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* One frame is a wide venue shot; let it span and stay uncropped. */
.recap__grid figure.is-wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.recap__note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.72;
}

/* Product preview on the members teaser. Framed like a browser window so it
   reads as a screenshot of software rather than a photo of the site. */
.platform-preview {
  margin: 0 auto;
  max-width: 1080px;
}
.platform-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(68, 64, 53, 0.18);
  box-shadow: var(--shadow-strong);
}
.platform-preview figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--brand-brown);
  opacity: 0.7;
}