/* ============================================================
   HOPE IN EVERY STEP — "The Path of Hope"
   A bespoke, dawn-lit trail experience. Warm sunrise palette,
   editorial serif, handwritten accents, a winding footpath
   that threads the whole page.
   ============================================================ */

:root {
  /* Dawn-of-hope palette */
  --cream:    #FBF4E9;
  --paper:    #FFFDF8;
  --shell:    #F6E7D4;
  --sand:     #F2E6D0;

  --dawn-pale:#FDEEDC;
  --peach:    #F4A98A;   /* accent (user-chosen) */
  --coral:    #E98B72;
  --apricot:  #F2A24E;
  --sun:      #F9C96B;

  --sage:     #93B2A0;
  --sage-soft:#BBD0C2;
  --sage-deep:#5E8A72;
  --moss:     #3C6B55;
  --evergreen:#1C4B3F;
  --pine:     #11362C;

  --ink:      #25352C;
  --ink-soft: #586B5F;
  --ink-mute: #91A096;
  --line:     #E7DAC4;

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans:  'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-hand:  'Caveat', 'Segoe Script', cursive;

  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 40px;
  --r-pill: 999px;
  --shadow-soft: 0 22px 50px -28px rgba(28, 75, 63, 0.5);
  --shadow-card: 0 14px 34px -22px rgba(28, 75, 63, 0.4);
  --shadow-lift: 0 30px 60px -30px rgba(28, 75, 63, 0.55);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --accent: var(--peach);
}

* { box-sizing: border-box; }
/* text-size-adjust: stop iOS inflating body copy when the phone rotates */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* faint warm paper grain */
  background-image: radial-gradient(rgba(190, 150, 90, 0.05) 1px, transparent 1px);
  background-size: 4px 4px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.measure { max-width: 60ch; }

/* ---- Type ---------------------------------------------- */
.serif { font-family: var(--font-serif); }
.hand {
  font-family: var(--font-hand); color: var(--coral);
  font-size: 1.7rem; line-height: 1; font-weight: 600; transform: rotate(-3deg); display: inline-block;
}
.display {
  font-family: var(--font-serif); font-weight: 500; line-height: 1.04;
  letter-spacing: -0.018em; color: var(--evergreen);
}
.display em { font-style: italic; color: var(--coral); }
.kicker {
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.76rem; color: var(--sage-deep);
}
.lead { font-size: 1.28rem; color: var(--ink-soft); line-height: 1.6; }
h2.sec-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--evergreen); margin: 0; }
h2.sec-title em { font-style: italic; color: var(--coral); }

/* ---- Buttons ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem;
  padding: 0.92rem 1.8rem; border-radius: var(--r-pill); border: 1.5px solid transparent;
  transition: all 0.25s var(--ease); white-space: nowrap;
}
.btn-primary { background: var(--evergreen); color: #FCEFD9; box-shadow: 0 14px 28px -14px rgba(28,75,63,0.8); }
.btn-primary:hover { background: var(--pine); transform: translateY(-2px); box-shadow: 0 20px 34px -16px rgba(28,75,63,0.85); }
.btn-sun { background: var(--apricot); color: #3a2410; box-shadow: 0 14px 28px -14px var(--apricot); }
.btn-sun:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.02); box-shadow: 0 20px 36px -16px var(--apricot); }
/* quiet variant — only legible on a plain light surface */
.btn-ghost { background: transparent; color: var(--evergreen); border-color: rgba(28,75,63,0.28); }
.btn-ghost:hover { border-color: var(--evergreen); background: rgba(28,75,63,0.05); }
/* .btn-ghost over artwork disappears; .btn-soft is the secondary to reach
   for on the hero and any other illustrated or photographic surface */
.btn-soft { background: rgba(255,253,248,0.94); color: var(--evergreen); border-color: rgba(28,75,63,0.14); box-shadow: 0 14px 30px -16px rgba(28,75,63,0.5); backdrop-filter: blur(4px); }
.btn-soft:hover { background: #fff; border-color: rgba(28,75,63,0.32); transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(28,75,63,0.55); }
/* replaces the inline colour overrides that were repeated on dark bands */
.btn-ghost--on-dark { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost--on-dark:hover { color: #fff; background: rgba(255,255,255,0.14); border-color: #fff; }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.08rem; }

/* ============================================================
   TOP BAR + NAV
   ============================================================ */
.topbar { background: var(--evergreen); color: #F2E2C9; font-size: 0.9rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: center; gap: 0.4rem 0.9rem; padding: 8px 28px; text-align: center; flex-wrap: wrap; }
.topbar span { white-space: nowrap; }
.topbar b { color: #fff; }
.topbar .hand { color: var(--sun); font-size: 1.05rem; transform: rotate(-2deg); }
@media (max-width: 1000px) { .topbar .hand { display: none; } }
/* the date line is ~426px unbroken — let it wrap before it forces the
   whole document wider than a phone viewport */
@media (max-width: 600px) { .topbar { font-size: 0.82rem; } .topbar span { white-space: normal; } }

.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 800; font-size: 1.2rem; color: var(--evergreen); white-space: nowrap; letter-spacing: -0.01em; }
.brand svg { width: 34px; height: 34px; flex: none; }
.nav-links { display: flex; gap: 1.9rem; }
.nav-links a { font-weight: 600; color: var(--ink-soft); transition: color 0.2s; position: relative; }
.nav-links a:hover { color: var(--evergreen); }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--peach); transition: width 0.25s var(--ease); border-radius: 2px; }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
/* 44x44 is Apple's minimum touch target; this was 33x30 */
.menu-btn { display: none; background: none; border: none; font-size: 1.5rem; color: var(--evergreen); cursor: pointer;
  width: 44px; height: 44px; place-items: center; padding: 0; }

/* ============================================================
   HERO — dawn scene
   ============================================================ */
/* 94vh + the 118px of topbar and nav above it pushed the foot of the hero
   (and its scroll cue) past the fold. Subtract the chrome instead. */
.hero { position: relative; overflow: hidden; min-height: calc(100vh - 118px); display: flex; align-items: center;
  background: linear-gradient(180deg, #FDF8F0 0%, #FCEEDC 30%, #FBE2C8 48%, #F8D2AC 62%, #F4C293 72%); }
.hero__scene { position: absolute; inset: 0; z-index: 1; }
.sun { position: absolute; left: 64%; top: 30%; width: 300px; height: 300px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(249,201,107,0.9) 0%, rgba(248,197,106,0.5) 40%, rgba(248,197,106,0) 72%); border-radius: 50%; z-index: 1; }
.sun__core { position: absolute; left: 64%; top: 30%; width: 118px; height: 118px; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 42%, #FFE9B6, var(--sun) 72%); border-radius: 50%; box-shadow: 0 0 70px 16px rgba(249,201,107,0.5); z-index: 1; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
/* A soft wash of page colour behind the reading column, so the horizon
   doesn't cut through the copy. It lives on .hero (full-bleed) rather than
   .hero__content — that element is also .wrap, so its box is the centred
   1160px column and the gradient got clipped into visible vertical seams.
   Every stop reaches zero inside the box on the right and bottom; the left
   simply runs off the viewport, where there is no edge to see. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(78% 60% at 26% 42%,
    rgba(253,248,240,0.88) 0%,
    rgba(253,248,240,0.78) 32%,
    rgba(253,248,240,0.46) 58%,
    rgba(253,248,240,0.14) 82%,
    rgba(253,248,240,0) 100%);
}
.hero__content { position: relative; z-index: 3; padding: 70px 0 200px; width: 100%; }
.hero__inner { max-width: 760px; }
.hero .kicker { color: var(--sage-deep); }
.hero__title { font-size: clamp(2.9rem, 6.4vw, 5.4rem); margin: 18px 0 24px; }
.hero__sub { font-size: 1.22rem; line-height: 1.5; color: #46594E; max-width: 36ch; margin: 0 0 36px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__datechip { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; background: rgba(255,253,248,0.7); border: 1px solid rgba(255,255,255,0.8); backdrop-filter: blur(6px); padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-card); font-weight: 600; color: var(--evergreen); }
.hero__datechip .d { width: 40px; height: 40px; border-radius: 50%; background: var(--evergreen); color: var(--sun); display: grid; place-items: center; font-family: var(--font-serif); }
.hero__datechip small { display: block; font-weight: 600; color: var(--ink-mute); font-size: 0.78rem; letter-spacing: 0.04em; }
/* The script line lives here now: it annotates the footpath at the foot of
   the hero and invites the scroll, instead of competing with the headline. */
.scrollcue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4; color: var(--sage-deep); text-align: center; opacity: 0.95; }
.scrollcue .hand { font-size: 1.6rem; color: var(--coral); }
.scrollcue i { display: block; margin-top: 10px; font-size: 0.8rem; opacity: 0.6; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* Hero trail. The tapered body is generated from #trail-center at runtime;
   .trail-static is the constant-width fallback for a no-JS render. */
.trail-body { display: none; }
.js .trail-static { display: none; }
.js .trail-body { display: block; }
html:not(.js) .trail-static { opacity: 0.92; }

/* footprints drawn along the hero trail */
.foot { fill: #FFF8EA; opacity: 0; animation: footin 0.55s var(--ease) forwards; }
/* opacity only — a CSS transform here would override each print's rotate() */
@keyframes footin { from { opacity: 0; } to { opacity: 0.92; } }

/* ============================================================
   TRAIL SPINE — connects all sections
   ============================================================ */
.trail-spine { position: relative; }

/* The track holds the generated line segments and footprints. It paints
   above section backgrounds but below section content, which is why every
   .wrap inside the spine is lifted to z-index 1. */
.spine-track { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.trail-spine .wrap { position: relative; z-index: 1; }

/* One segment per stretch of page the trail actually runs along. Both ends
   fade out, so where the trail stops for a centred block it reads as
   deliberate rather than clipped. */
.spine-seg {
  position: absolute; left: 50%; width: 3px; transform: translateX(-50%); opacity: 0.45;
  background-image: repeating-linear-gradient(to bottom, var(--sage) 0 9px, transparent 9px 20px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* Footprints press in as they cross the middle of the viewport, so the walk
   happens at your reading position and the trail stays behind you. */
.spine-foot {
  position: absolute; left: 50%; margin-left: -5.5px; width: 11px; height: 16px;
  border-radius: 52% 52% 46% 46%; background: var(--sage-deep); opacity: 0;
  transform: translate(var(--dx, 0), 7px) rotate(var(--rot, 0));
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.spine-foot.in { opacity: 0.38; transform: translate(var(--dx, 0), 0) rotate(var(--rot, 0)); }
@media (prefers-reduced-motion: reduce) {
  .spine-foot { transition: none; transform: translate(var(--dx, 0), 0) rotate(var(--rot, 0)); }
}
@media (max-width: 920px) { .spine-track { display: none; } }
.mile-pin { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sage); color: var(--evergreen);
  display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.5rem; box-shadow: var(--shadow-card); }
.mile-pin.sun-pin { border-color: var(--apricot); color: var(--apricot); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 104px 0; position: relative; }
.section--shell { background:
   linear-gradient(180deg, transparent, rgba(246,231,212,0.5) 12%, rgba(246,231,212,0.5) 88%, transparent); }
.sec-head { max-width: 640px; margin-bottom: 56px; }
/* inside the spine a left-aligned head must stay in its own column, or the
   heading runs over the centre line */
.trail-spine .sec-head:not(.center) { max-width: 500px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .kicker { display: inline-flex; align-items: center; gap: 10px; }
.sec-head h2 { margin: 16px 0 14px; }

/* sprig divider */
.sprig { display: block; margin: 0 auto; width: 60px; color: var(--sage-deep); opacity: 0.8; }

/* ---- STORY / 2nd-annual + count-up stats ---------------- */
/* Equal columns so the gutter is centred on the spine, and wide enough that
   nothing crowds it. Uneven fr values put the line hard against a column.
   minmax(0, 1fr) not 1fr: plain `1fr` means minmax(AUTO, 1fr), so a column
   whose content grows takes space from its sibling and the gutter drifts
   off the spine. That is what moved this row when the counters ran. */
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; align-items: center; }
.story__photo { position: relative; }
/* Photo frame — swap the placeholder for an <img> when a real photo lands. */
.photo-frame { margin: 0; width: 100%; aspect-ratio: 5/4; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lift); background: var(--sand); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dashed var(--sage-soft); color: var(--ink-mute); text-align: center; padding: 24px; }
.photo-frame--empty i { font-size: 2.2rem; color: var(--sage); }
.photo-frame--empty figcaption { font-size: 0.95rem; max-width: 24ch; }
.story__tape { position: absolute; top: -14px; left: 30px; background: var(--sun); color: #5a3a12; font-family: var(--font-hand); font-size: 1.5rem; padding: 4px 18px; transform: rotate(-3deg); box-shadow: var(--shadow-card); border-radius: 4px; }
.story p { color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 14px; box-shadow: var(--shadow-card); }
/* Three cards share a ~500px column, so the figure is sized to fit the track
   it actually gets. The tracks no longer stretch to fit the type. */
.stat__num { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 600; color: var(--evergreen); line-height: 1; white-space: nowrap; }
.stat__num .plus { color: var(--peach); }
.stat__label { font-size: 0.92rem; color: var(--ink-soft); margin-top: 8px; font-weight: 600; }

/* ---- REASONS WE WALK (alternating milestones) ----------- */
.reasons { display: grid; gap: 70px; position: relative; }
.reason { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; align-items: center; }
.reason:nth-child(even) .reason__media { order: 2; }
.reason__media { position: relative; }
.reason__art { aspect-ratio: 4/3; border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 60px; background: var(--shell); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-card); }
.reason:nth-child(even) .reason__art { border-radius: var(--r-xl) var(--r-xl) 60px var(--r-xl); }
.reason__art .glyph { font-size: 4.2rem; }
.reason__art.a1 { background: linear-gradient(150deg, #EAF1EA, #CFE3D5); color: var(--moss); }
.reason__art.a2 { background: linear-gradient(150deg, #FDEAD9, #F8D2B8); color: var(--coral); }
.reason__art.a3 { background: linear-gradient(150deg, #E7F0F6, #CFE2EF); color: #4d7ea3; }
.reason__n { font-family: var(--font-hand); font-size: 2rem; color: var(--peach); }
.reason h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.9rem; color: var(--evergreen); margin: 6px 0 12px; }
.reason p { color: var(--ink-soft); margin: 0; }

/* ---- THE WALK (event details + schedule) ---------------- */
.walk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; align-items: start; }
.walk__card { background: var(--evergreen); color: #EFE6D4; border-radius: var(--r-xl); padding: 40px; box-shadow: var(--shadow-lift); position: relative; overflow: hidden; }
.walk__card .glow { position: absolute; width: 320px; height: 320px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(249,201,107,0.3), transparent 70%); border-radius: 50%; }
.walk__card h3 { font-family: var(--font-serif); color: #fff; font-size: 1.7rem; margin: 0 0 6px; font-weight: 500; position: relative; }
.walk__meta { position: relative; display: grid; gap: 16px; margin-top: 22px; }
.walk__meta .row { display: flex; gap: 14px; align-items: flex-start; }
.walk__meta i { color: var(--sun); width: 22px; text-align: center; margin-top: 3px; }
.walk__meta b { color: #fff; }
.walk__meta span { color: rgba(255,255,255,0.82); }
.walk__map { margin-top: 26px; }
.timeline { position: relative; padding-left: 30px; }
/* solid, not dashed: the dashed language belongs to the walking spine, and
   two parallel dashed rules a few inches apart read as a mistake */
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, transparent, var(--sage-soft) 6%, var(--sage-soft) 94%, transparent); }
.tl { position: relative; margin-bottom: 26px; }
.tl::before { content: ''; position: absolute; left: -29px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--apricot); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--apricot); }
.tl .t { font-family: var(--font-serif); font-size: 1.3rem; color: var(--evergreen); }
.tl .l { color: var(--ink-soft); }
.tl .when { font-weight: 700; color: var(--coral); font-size: 0.9rem; letter-spacing: 0.02em; }

/* ---- IMPACT -------------------------------------------- */
.impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); display: block; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.pcard__logo { width: 70px; height: 70px; border-radius: 18px; background: #EAF1EA; display: grid; place-items: center; color: var(--moss); font-size: 1.7rem; margin-bottom: 18px; }
.pcard__logo img { width: 70px; height: 70px; object-fit: contain; }
.pcard h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; color: var(--evergreen); margin: 0 0 8px; }
.pcard p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
.pcard .more { color: var(--coral); font-weight: 700; font-size: 0.9rem; display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; }

/* ---- SPONSORS ------------------------------------------ */
.sponsors { text-align: center; }
.sponsor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 36px 0 30px; }
.sponsor { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 14px 26px; font-weight: 700; font-size: 1.05rem; color: var(--evergreen); box-shadow: var(--shadow-card); transition: transform 0.25s var(--ease); }
.sponsor:hover { transform: translateY(-3px); }
.sponsor .leaf { color: var(--sage-deep); }

/* ---- BIG CTA ------------------------------------------- */
.finalcta { position: relative; }
.finalcta__band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--evergreen), var(--moss)); color: #F1E7D5; border-radius: var(--r-xl); padding: 80px 64px; text-align: center; box-shadow: var(--shadow-lift); }
.finalcta__band .sun { left: 50%; top: 12%; width: 420px; height: 420px; opacity: 0.5; }
.finalcta h2 { position: relative; font-family: var(--font-serif); font-weight: 500; color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0 0 16px; line-height: 1.08; }
.finalcta h2 em { font-style: italic; color: var(--sun); }
.finalcta p { position: relative; color: rgba(255,255,255,0.85); font-size: 1.2rem; max-width: 46ch; margin: 0 auto 30px; }
.finalcta__cta { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FORMS — registration
   Replaces the Bootstrap form styling the old page relied on. The .is-invalid
   and .was-validated hooks are kept because the page's own JS toggles them.
   ============================================================ */
.form-shell { max-width: 860px; margin: -64px auto 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 48px 52px; box-shadow: var(--shadow-lift); position: relative; z-index: 3; }
.form-shell__head { text-align: center; margin-bottom: 40px; }
.form-shell__head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 2.1rem; color: var(--evergreen); margin: 10px 0 6px; }
.form-shell__head p { color: var(--ink-soft); margin: 0; }

.fset { margin-bottom: 42px; }
.fset__title { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-weight: 500;
  font-size: 1.45rem; color: var(--evergreen); margin: 0 0 4px; }
.fset__title i { color: var(--coral); font-size: 1.05rem; }
.fset__hint { color: var(--ink-mute); font-size: 0.94rem; margin: 0 0 22px; }

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fspan { grid-column: 1 / -1; }

.field__label { display: block; font-weight: 700; color: var(--evergreen); font-size: 0.94rem; margin-bottom: 8px; }
.field__label .req { color: var(--coral); }
.input { width: 100%; font: inherit; color: var(--ink); background: var(--cream);
  border: 2px solid var(--line); border-radius: var(--r-md); padding: 13px 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); }
/* iOS zooms the page when a focused field is under 16px, and never zooms back.
   The base font is 16px on mobile so this is belt and braces, but it must not
   regress: a 15px input here would make the whole form jump on every tap. */
input.input, select.input, textarea.input { font-size: max(16px, 1rem); min-height: 52px; }
textarea.input { min-height: 116px; }
.input::placeholder { color: var(--ink-mute); }
.input:focus { outline: none; border-color: var(--sage-deep); background: var(--paper); box-shadow: 0 0 0 4px rgba(147,178,160,0.3); }
select.input { appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235E8A72' stroke-width='2' stroke-linecap='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; }
textarea.input { resize: vertical; min-height: 116px; }
.input.is-invalid, .was-validated .input:invalid { border-color: var(--coral); background: #FDF1EC; }
.field__err { color: #A83A1E; font-size: 0.88rem; font-weight: 700; margin: 8px 0 0; }
.field__help { color: var(--ink-mute); font-size: 0.88rem; margin: 8px 0 0; display: flex; gap: 7px; align-items: baseline; }

/* checkboxes */
/* min-height keeps the whole label a 44px target even on one-line consents;
   the box itself stays visually small */
.check { display: flex; gap: 13px; align-items: flex-start; cursor: pointer; min-height: 44px; padding: 4px 0; }
.check + .check { margin-top: 16px; }
.check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 2px 0 0; cursor: pointer;
  border: 2px solid var(--sage); border-radius: 6px; background: var(--paper);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.check input:checked { background-color: var(--evergreen); border-color: var(--evergreen);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFAF0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3.2L13 4.8'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 14px; }
.check input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(147,178,160,0.35); }
.check input.is-invalid, .was-validated .check input:invalid { border-color: var(--coral); }
.check span { color: var(--ink-soft); }
.check span b { color: var(--evergreen); }

/* team picker */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 22px 14px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--cream);
  cursor: pointer; font-weight: 700; color: var(--ink-soft); transition: all 0.25s var(--ease); }
.choice__box i { font-size: 1.45rem; color: var(--sage); transition: color 0.25s var(--ease); }
.choice:hover .choice__box { border-color: var(--sage-soft); transform: translateY(-2px); }
.choice input:checked + .choice__box { border-color: var(--sage-deep); background: #EDF5EE; color: var(--evergreen); box-shadow: var(--shadow-card); }
.choice input:checked + .choice__box i { color: var(--evergreen); }
.choice input:focus-visible + .choice__box { box-shadow: 0 0 0 4px rgba(147,178,160,0.35); }
.team-section { margin-top: 4px; }

/* waiver + inline notices */
.waiver { background: #FFF7EC; border: 1px solid #F1DDBE; border-radius: var(--r-lg); padding: 26px 28px; }
.waiver h4 { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 500;
  font-size: 1.15rem; color: #8A5A16; margin: 0 0 14px; }
.waiver p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 12px; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md);
  background: #EDF5EE; border: 1px solid var(--sage-soft); color: var(--ink-soft); }
.notice i { color: var(--sage-deep); margin-top: 3px; }
.notice b { color: var(--evergreen); }
.formalert { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md);
  margin-bottom: 28px; font-weight: 600; background: #FCECE6; border: 1px solid #F3C9B8; color: #9C3A20; }
.formalert i { margin-top: 3px; }

.form-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* success state, rendered in place of the form */
.done { max-width: 640px; margin: -64px auto 0; text-align: center; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 56px 48px; box-shadow: var(--shadow-lift);
  position: relative; z-index: 3; }
.done__mark { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; background: #EDF5EE;
  display: grid; place-items: center; font-size: 2.3rem; color: var(--evergreen); }
.done h2 { font-family: var(--font-serif); font-weight: 500; font-size: 2.1rem; color: var(--evergreen); margin: 0 0 10px; }
.done p { color: var(--ink-soft); margin: 0 0 10px; }

@media (max-width: 720px) {
  .form-shell { padding: 34px 22px; margin-top: -40px; border-radius: var(--r-lg); }
  .fgrid, .fgrid--3, .choices { grid-template-columns: 1fr; }
  .done { padding: 42px 24px; }
}

/* ---- FOOTER -------------------------------------------- */
.footer { background: var(--pine); color: rgba(255,255,255,0.8); padding: 72px 0 34px; }
/* last column carries the contact address, which is long, so it gets the
   extra room rather than the short link lists */
.footer .grid { display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 1.8fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer .brand { color: #fff; }
.footer p { color: rgba(255,255,255,0.7); }
.footer h5 { color: var(--sun); font-size: 0.95rem; margin: 0 0 16px; letter-spacing: 0.03em; }
/* flex, not block: with block the icon and a long address sit on separate
   lines. flex keeps them on one row and nowrap stops the address breaking. */
.footer a { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.75); margin-bottom: 9px; transition: color 0.2s; white-space: nowrap; }
.footer a i { flex: none; }
.footer a:hover { color: var(--peach); }
.footer .social { display: flex; gap: 12px; margin-top: 16px; }
.footer .social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.1); display: grid; place-items: center; margin: 0; }
.footer .social a:hover { background: var(--peach); color: var(--pine); }
.footer .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; font-size: 0.86rem; color: rgba(255,255,255,0.5); }
.footer .legal b { color: var(--sun); }

/* ---- reveal (content visible by default; .in only animates it in) ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal.in { animation: hes-rise 0.8s var(--ease) both; }
}
@keyframes hes-rise {
  from { transform: translateY(26px); }
  to   { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .story, .walk, .reason, .reason:nth-child(even) .reason__media { grid-template-columns: 1fr; }
  .reason__media { order: -1 !important; }
  .impact { grid-template-columns: 1fr; }
  .footer .grid { grid-template-columns: 1fr 1fr; }
  .trail-line, .mile-pin { display: none; }
  .nav-links { display: none; }
  .menu-btn { display: grid; }
}
/* the map and its sidebar cannot share a phone screen */
@media (max-width: 860px) {
  .coursewrap { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .section { padding: 72px 0; }
  .nav .wrap { height: 68px; gap: 10px; }
  /* The nav row overran a 320px screen by 49px. min-width:0 lets the brand
     shrink and ellipsise instead of pushing the page wide, so there is no
     width at which this can cause horizontal scroll. */
  .brand { font-size: 1rem; gap: 0.45rem; min-width: 0; }
  .brand svg { width: 28px; height: 28px; }
  .brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-right { gap: 0.4rem; flex: none; }
  .nav-right .btn { padding: 10px 15px; font-size: 0.95rem; }
  .menu-btn { margin-right: -6px; }
  .stats { grid-template-columns: 1fr; }
  .finalcta__band { padding: 56px 26px; }
  .footer .grid { grid-template-columns: 1fr; }
  /* Bigger touch target for footer links. Must stay display:block (they are
     block by default) or the columns run together on one line, and must be
     scoped to direct children so the round .social icons keep their grid
     centring. */
  .footer .grid > div > a { padding: 5px 0; margin-bottom: 3px; }
  .hero__content { padding-bottom: 150px; }
  .walk__card { padding: 30px 24px; }
  /* the topbar wraps to two lines down here, so the chrome is taller */
  .hero { min-height: calc(100vh - 150px); }
}
/* Below this the wordmark can only ellipsise, so drop it and keep the mark */
@media (max-width: 360px) {
  .nav .brand__name { display: none; }
}

@media (max-width: 600px) {
  /* the headline fills the width on a phone, so move the sun clear of it */
  .page-head { padding: 52px 0 46px; }
  .page-head .sun { left: 86%; top: 10%; width: 150px; height: 150px; }
  .page-head .sun__core { left: 86%; top: 10%; width: 56px; height: 56px; }
  .page-head p { font-size: 1.08rem; }
  .form-shell__head h2 { font-size: 1.8rem; }
}

/* iOS Safari reports 100vh as the address-bar-hidden height, so a 100vh hero
   runs under the browser chrome on load. svh is the visible height. */
@supports (min-height: 100svh) {
  .hero { min-height: calc(100svh - 118px); }
  @media (max-width: 600px) { .hero { min-height: calc(100svh - 150px); } }
}

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; background: var(--cream); transform: translateX(100%); transition: transform 0.3s var(--ease); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.drawer.open { transform: none; }
.drawer a { font-family: var(--font-serif); font-size: 1.8rem; color: var(--evergreen); padding: 10px 0; border-bottom: 1px solid var(--line); }
.drawer .close { align-self: flex-end; background: none; border: none; font-size: 1.8rem; color: var(--evergreen);
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer; }

/* ============================================================
   COURSE MAP PAGE
   ============================================================ */
.page-head { position: relative; overflow: hidden; background: linear-gradient(180deg, #FDF8F0, #FBEAD3); padding: 72px 0 60px; text-align: center; }
.page-head .sun { left: 84%; top: 30%; width: 240px; height: 240px; }
.page-head .sun__core { left: 84%; top: 30%; width: 90px; height: 90px; }
/* z-index 2 to match .crumb and the paragraph. Without it the heading is
   non-positioned content and the decorative sun layer (z-index 1) paints on
   top of it, washing out the end of the line. */
.page-head h1 { position: relative; z-index: 2; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4rem); color: var(--evergreen); margin: 14px 0 12px; letter-spacing: -0.02em; }
.page-head h1 em { font-style: italic; color: var(--coral); }
.page-head p { font-size: 1.2rem; color: var(--ink-soft); max-width: 56ch; margin: 0 auto; position: relative; z-index: 2; }
.crumb { position: relative; z-index: 2; font-weight: 600; color: var(--sage-deep); }
.crumb a { color: var(--sage-deep); }
.crumb a:hover { color: var(--evergreen); }

.coursewrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.mapcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; box-shadow: var(--shadow-lift); }
.mapcard__img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); position: relative; }
.mapcard__img img, .mapcard__img svg { width: 100%; height: auto; display: block; }
/* Route drawn over the park map. Geometry lives in the template in the map's
   own pixel space; only the styling is here. */
.routemap__casing { stroke: #FFFAF0; stroke-width: 30; opacity: 0.9; }
.routemap__line { stroke: #D92D20; stroke-width: 15; }
.routemap__start circle:first-child { fill: #FFFAF0; stroke: var(--evergreen); stroke-width: 8; }
.routemap__start circle:last-child { fill: var(--evergreen); }
.mapcard__cap { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; flex-wrap: wrap; gap: 8px; }
.mapcard__cap .ttl { font-family: var(--font-serif); font-size: 1.3rem; color: var(--evergreen); }

.legend { display: grid; gap: 14px; margin-top: 18px; }
.legend__item { display: flex; gap: 14px; align-items: flex-start; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.legend__pin { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; color: #fff; background: #d64545; box-shadow: 0 4px 10px -3px rgba(214,69,69,0.6); }
.legend__pin.start { background: var(--evergreen); box-shadow: 0 4px 10px -3px rgba(28,75,63,0.6); }
.legend__item b { color: var(--evergreen); font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; }
.legend__item p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.96rem; }

/* Two peer info cards that should read as a matched pair. Distinct from
   .coursewrap, which is the map-plus-sidebar layout: that one deliberately
   uses uneven columns and align-items:start, which is wrong for equals. */
.infopair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.infopair > .sidecard { margin: 0; height: 100%; }
@media (max-width: 720px) { .infopair { grid-template-columns: 1fr; } }

.sidecard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-card); margin-bottom: 22px; }
.sidecard h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; color: var(--evergreen); margin: 0 0 6px; }
.sidecard .hand { font-size: 1.4rem; }
.sidecard .row { display: flex; gap: 13px; align-items: flex-start; margin-top: 16px; }
.sidecard .row i { color: var(--coral); width: 22px; text-align: center; margin-top: 4px; }
.sidecard .row b { color: var(--evergreen); }
.sidecard .row span { color: var(--ink-soft); }
.sidecard .btn { margin-top: 22px; }
.factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.fact { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; text-align: center; }
.fact i { color: var(--sage-deep); font-size: 1.3rem; }
.fact .v { font-family: var(--font-serif); font-size: 1.25rem; color: var(--evergreen); margin-top: 6px; }
.fact .k { font-size: 0.82rem; color: var(--ink-mute); }

.know { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 16px; }
.know__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); }
.know__item i { font-size: 1.6rem; color: var(--coral); }
.know__item b { display: block; font-family: var(--font-serif); font-size: 1.2rem; color: var(--evergreen); margin: 12px 0 6px; font-weight: 500; }
.know__item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 920px) {
  .coursewrap { grid-template-columns: 1fr; }
  .know { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .know { grid-template-columns: 1fr; }
}