/* ============================================================
   ReBorne — shared stylesheet
   Brand colours are defined once below: change them here and
   the whole site updates.
   ============================================================ */

:root {
  /* Warm greens and soft neutrals support the documentary photography. */
  --primary: #365b43;
  --primary-dark: #284735;
  --primary-tint: #eef2e9;
  --accent: #c9dfa0;
  --accent-bright: #d9e9bd;
  --accent-dark: #46664d;
  --on-accent: #17241b;
  --ink: #19231c;
  --muted: #5a685f;
  --bg: #faf9f5;
  --card: #ffffff;
  --line: #e5e4dc;
  --black: #17241b;
  --header-bg: #17241b;
  --footer-bg: #17241b;
  --black-deep: #101914;
  --black-elevated: #1d2c22;
  --black-olive: #23392a;
  --black-olive-alt: #294333;
  --white-soft: #f4f4ec;

  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow: 0 2px 10px rgba(23, 38, 43, 0.07);
  --shadow-lift: 0 10px 28px rgba(23, 38, 43, 0.13);

  --font: "Source Sans 3", "Segoe UI", sans-serif;
  --font-display: "Lora", Georgia, serif;
  --container: 1140px;
  --container-wide: 1180px;  /* bento/split sections only */
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Safety net: a long unbroken email/URL/word can force horizontal
     overflow on narrow screens even when everything else fits. */
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

/* Matches DESIGN.md's Display/Headline/Title scale exactly — h1 is
   Display, h2 is Headline, h3/h4 are Title. */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.55em; font-weight: 600; }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: clamp(2.25rem, 4.4vw, 3.35rem); font-weight: 600; line-height: 1.12; }
h2 { font-size: clamp(1.85rem, 3vw, 2.35rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 64px 0; }

.section-intro { max-width: 640px; }
.section-intro p { color: var(--muted); font-size: 1.1rem; }

.eyebrow {
  display: inline-block;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 0.6em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-primary { background: var(--black); color: var(--accent-bright); }
.btn-primary:hover { background: var(--accent); color: var(--on-accent); }

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-bright); color: var(--on-accent); }

.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { color: var(--primary-dark); }

.btn-lg { min-height: 52px; padding: 16px 34px; font-size: 1.1rem; }

/* ---------- Header & navigation ---------- */
/* Redesign: no utility bar at any width. One clean row — logo left, nav
   balanced through the middle, a single "Talk to ReBorne" CTA plus a
   compact WhatsApp icon on the right. Removing the utility bar everywhere
   (not just mobile) also means --utility-bar-h is always effectively 0 now,
   so .hero-stage .site-header can sit at a hard top:0 unconditionally —
   see that rule below, simplified from the old scroll-dependent fallback. */

.site-header {
  background: var(--header-bg);
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.site-header .container { max-width: 1300px; }
.site-header .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
  min-height: 84px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.55rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo img { height: 68px; width: auto; padding: 4px 0; object-fit: contain; }
.logo span { color: var(--accent-bright); }
.logo small {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--accent);
  vertical-align: super;
  margin-left: 2px;
}

/* Centered/balanced middle column — the grid's 1fr track already isolates
   the nav from the logo and actions, so centering the <ul> within it reads
   as a genuinely balanced row rather than a flush-right link list. */
.main-nav { justify-self: center; }
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
.main-nav > ul > li { position: relative; }
.main-nav a {
  display: block;
  padding: 10px 9px;
  text-decoration: none;
  color: var(--white-soft);
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap;
  border-radius: 8px;
}
.main-nav a:hover { background: rgba(168, 204, 42, 0.16); color: var(--accent-bright); }
.main-nav a[aria-current="page"] { color: var(--accent-bright); }

.nav-item-row { display: contents; }

/* .nav-item-row is display:contents on desktop, so the link renders as if it
   were a direct child of .has-dropdown — but CSS selectors still follow the
   real DOM, so this targets the link through its actual parent. */
.has-dropdown .nav-item-row > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

/* Desktop-only: the accordion toggle button exists for the mobile drawer;
   on desktop the dropdown opens on hover/focus of the link itself. */
.dropdown-toggle { display: none; }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--black-elevated);
  border: 1px solid rgba(168, 204, 42, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 0;
}
.dropdown a { padding: 9px 14px; font-weight: 500; white-space: nowrap; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown { display: flex; }

/* Single primary CTA + a compact WhatsApp icon — the whole point of
   dropping the utility bar is one clean action pair, not a button row. */
.header-ctas { display: flex; align-items: center; gap: 14px; }
.header-ctas .btn { padding: 10px 22px; font-size: 0.95rem; min-height: 40px; }
.site-header .btn-outline { border-color: var(--accent-bright); color: var(--accent-bright); }
.site-header .btn-outline:hover { background: var(--accent-bright); color: var(--on-accent); }

/* Drawer-only chrome (logo + close button, backdrop, phone/WhatsApp) —
   hidden on desktop where .main-nav is an inline row, not an overlay drawer. */
.nav-drawer-head { display: none; }
.nav-backdrop { display: none; }
.nav-drawer-contact { display: none; }

/* Compact WhatsApp icon action — visible at every width now that the
   utility bar (the old home of the WhatsApp pill) is gone entirely. */
.header-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 8px;
  color: #fff;
  background: rgba(35, 164, 85, 0.22);
}
.header-whatsapp:hover { background: #23a455; }
.header-whatsapp:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: #23a455; }

/* ---------- Mobile menu button (44×44px, three bars → ×) ---------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  flex: none;
}
.nav-toggle-bars {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 16px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 7px; }
.nav-toggle-bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---------- Hero (home — full-bleed photo) ---------- */

/* .hero-stage wraps the header + hero only on the homepage, so these
   overrides never touch the shared sticky/solid header on other pages.
   The header is fixed (not sticky/absolute) so it (a) never reserves flow
   height — the hero below it keeps the exact same box height either way,
   so nothing lower on the page shifts — and (b) stays pinned for the full
   page scroll, not just while the hero is on screen. With no utility bar
   anywhere in the redesign, top:0 is simply correct at every width and
   scroll position — only background/shadow change on scroll now. */
.hero-stage .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  /* Keep the navigation distinct from the hero imagery from the first
     frame, rather than relying on the photo behind it for contrast. */
  background: rgba(25, 56, 45, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(12, 34, 24, 0.18);
  border-bottom: 1px solid rgba(248, 244, 235, 0.14);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Toggled by js/main.js once the page has scrolled */
.hero-stage .site-header.is-scrolled {
  background: var(--header-bg);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero {
  position: relative;
  min-height: 100svh;
  /* Cancels the generic `section{padding:64px 0}` base rule — a hero is
     full-bleed, and the hidden inset was pushing align-items:flex-end's
     target edge 64px above the true bottom of the section. */
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, var(--black-deep), var(--black-olive) 75%);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/hero-poster.jpg") center/cover no-repeat;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* soft band so nav text stays legible at rest */
    linear-gradient(180deg, rgba(5, 7, 3, 0.6) 0%, rgba(5, 7, 3, 0) 20%),
    /* subtle bottom-left dark-to-green vignette behind the hero copy — concentrated
       in the corner so the rest of the footage (people, movement) stays clearly visible */
    radial-gradient(820px 620px at 0% 100%, rgba(5, 7, 3, 0.88) 0%, rgba(9, 14, 4, 0.55) 38%, rgba(9, 14, 4, 0.15) 68%, rgba(9, 14, 4, 0) 85%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 0 64px 72px;
}
.hero-content .eyebrow { color: var(--accent-bright); }
.hero-content h1 {
  color: #fff;
  max-width: 11em;
  margin-bottom: 0;
  line-height: 1.14;
  font-size: clamp(2.125rem, 5vw, 2.5rem);
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-content .hero-actions { margin-top: 18px; }

/* Placeholder image blocks — replace with real photos later */
.img-placeholder {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
    var(--primary-dark);
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
  text-align: center;
  padding: 20px;
}
.img-placeholder.light {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.site-photo {
  aspect-ratio: 1.5;
  background: var(--primary-tint);
  border-radius: var(--radius-lg);
  margin: 0;
  overflow: hidden;
}
.site-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.media-stage img.photo-art {
  object-fit: cover;
}
.team-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}
.team-card {
  overflow: hidden;
  padding: 0;
}
.team-card .site-photo {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.team-card-copy {
  padding: 22px;
}

/* ---------- Cards & grids ---------- */

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid/flex items default to min-width:auto, which resists shrinking below
   their content's intrinsic width (a <select>'s widest option, an input's
   default minimum, a nowrap button label, ...). That silently forces the
   whole track — and often the whole page — wider than the viewport. This
   is the single biggest source of mobile horizontal overflow site-wide. */
.grid > *, .split > *, .footer-top > *, .form-grid > *, .stats-grid > * {
  min-width: 0;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.card h3 { margin-top: 0.2em; }
.card p { color: var(--muted); }
.card .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.card .card-icon svg { width: 24px; height: 24px; }
a.card { text-decoration: none; color: inherit; display: block; transition: transform 0.15s, box-shadow 0.15s; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card-link { font-weight: 700; color: var(--primary); }

/* Audience pathway cards ("Two doors, one team") — stay two-up even on
   narrow mobile instead of collapsing to the generic .grid-2 single column. */
.pathway-card {
  border-top: 6px solid var(--primary);
  padding: 34px;
}
.pathway-card.professional { border-top-color: var(--accent); }
.pathway-grid { grid-template-columns: 1fr 1fr; }
/* Services grid — 2×2 on mobile instead of collapsing to one column
   (mobile overrides for both live in the single ≤768px block below, so
   they aren't fighting the generic .grid-2/.grid-4 reset on source order). */

/* ---------- Media stage & placeholder panels (signature shape) ---------- */
/* The one repeated shape motif: 22px rounding on every large photographic
   or video container, and on its stand-in until real photography lands. */

.media-stage {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--primary-tint);
  color: #fff;
}
.media-stage img, .media-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-stage .media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,3,0) 40%, rgba(5,7,3,0.78) 100%);
  pointer-events: none;
}
.media-stage .media-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 1;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Branded placeholder — replaces the old dashed [Photo: ...] box. A quiet
   diagonal gradient between two neutral tokens, a single low-opacity line
   icon, and a small caption naming what will occupy the slot. Every
   instance is logged in the asset manifest (see review package). */
.media-placeholder {
  background: linear-gradient(135deg, var(--primary-tint) 0%, var(--card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.media-placeholder svg { width: 44px; height: 44px; color: var(--muted); opacity: 0.35; }
.media-placeholder .placeholder-caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,0.85);
  padding: 4px 12px;
  border-radius: 999px;
}
/* Dark-section variant (used inside .media-stage on a black ground) */
.media-stage .media-placeholder {
  background: linear-gradient(135deg, var(--black) 0%, var(--black-olive) 100%);
  min-height: 100%;
}
.media-stage .media-placeholder svg { color: var(--white-soft); opacity: 0.3; }
.media-stage .media-placeholder .placeholder-caption {
  background: rgba(15, 18, 10, 0.65);
  color: var(--white-soft);
}

/* ---------- Bento grid ("How we help") ---------- */
/* Asymmetrical: one prominent photographic card leads, four compact text
   cards follow — never a uniform row of identical tiles. */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "lead lead a b"
    "lead lead c d";
  gap: 18px;
}
.bento-lead { grid-area: lead; min-height: 360px; }
.bento-grid .card { display: flex; flex-direction: column; }
.bento-grid .bento-cell:nth-of-type(1) { grid-area: a; }
.bento-grid .bento-cell:nth-of-type(2) { grid-area: b; }
.bento-grid .bento-cell:nth-of-type(3) { grid-area: c; }
.bento-grid .bento-cell:nth-of-type(4) { grid-area: d; }

/* ---------- Split panel (Families / Professionals) ---------- */
/* Stays side by side at every width per the redesign brief — reduces
   padding/type rather than stacking, all the way to 320px. */
.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.split-panel .card { height: 100%; }

/* ---------- Stats strip ---------- */

.stats-strip { background: var(--black); color: #fff; padding: 48px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-number { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--accent-bright); }
/* Homepage "what guides us" strip reuses the stats-strip pattern with short
   words (Confidence/Resilience/...) instead of numbers — those need a
   smaller size than a 4-character stat like "250+" to avoid wrapping
   mid-word in the same column width. */
.stats-values .stat-number { font-size: 1.9rem; }
.stat-label { opacity: 0.85; margin-top: 6px; font-size: 0.98rem; }

/* ---------- Testimonials ---------- */

.testimonial {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 26px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.testimonial blockquote { margin: 0 0 14px; font-size: 1.05rem; }
.testimonial blockquote::before { content: "\201C"; color: var(--accent); font-size: 2.2rem; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--primary-dark); font-size: 0.95rem; }

/* ---------- Camp cards ---------- */

.camp-card { display: flex; flex-direction: column; }
.camp-card .camp-tag {
  align-self: flex-start;
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.camp-card .camp-tag.send { background: #fdeeda; color: #a3591d; }
.camp-meta { list-style: none; padding: 0; margin: 0 0 18px; color: var(--muted); }
.camp-meta li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; }
.camp-meta li:last-child { border-bottom: none; }
.camp-meta .meta-label { font-weight: 700; color: var(--ink); min-width: 84px; }
.camp-card .btn { margin-top: auto; }

.capacity-note { font-size: 0.9rem; font-weight: 700; color: var(--accent-dark); margin: 0 0 14px; }

/* Steps (3-step booking guide) */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; padding: 28px 24px 24px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 14px;
}

/* Daily timetable */
.timetable { list-style: none; margin: 0; padding: 0; }
.timetable li {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.timetable li:last-child { border-bottom: none; }
.timetable time { font-weight: 800; color: var(--primary); min-width: 92px; }

/* ---------- FAQ (uses <details>) ---------- */

.faq-list { max-width: 780px; }
.faq-list details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 22px;
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 800;
}
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list details p { padding: 0 22px 18px; margin: 0; color: var(--muted); }

/* ---------- Trust / badge strip ---------- */

.trust-strip { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.trust-items { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; align-items: center; color: var(--muted); font-weight: 600; }
.trust-items span::before { content: "\2713"; color: var(--primary); font-weight: 800; margin-right: 8px; }

/* ---------- Homepage preview panels (success story, camp promo) ---------- */
/* Compact, cohesive panels rather than a giant placeholder image next to a
   long text column — used when there's no real photo to show yet. */

.story-panel, .promo-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px;
  max-width: 780px;
}
.story-panel h2, .promo-panel h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.story-panel .eyebrow, .promo-panel .eyebrow { margin-bottom: 0.5em; }
.story-cite { color: var(--muted); font-weight: 700; margin: 0 0 20px; }
.promo-panel .capacity-note { margin-top: -4px; }
.promo-panel .hero-actions { margin-top: 22px; }

/* ---------- Mission introduction (editorial two-column) ---------- */
.mission-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Scaled down a step from the base h2 and lightened off its bold 600 weight —
   at full h2 size this reads as a second hero rather than a quieter editorial
   intro, especially once "London • Surrey • Bournemouth" wraps to two lines. */
.mission-editorial h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.mission-editorial p { color: var(--muted); font-size: 1.02rem; max-width: 52ch; margin: 0; }

/* ---------- Community-support feature (wide image-led panel) ---------- */
.community-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.community-feature-media { aspect-ratio: 3 / 2; }
.feature-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.feature-list li { color: var(--ink); font-weight: 600; font-size: 0.96rem; padding-left: 22px; position: relative; }
.feature-list li::before { content: "\2713"; color: var(--primary); font-weight: 800; position: absolute; left: 0; }

/* ---------- Storytelling panel (large photo + copy) ---------- */
.story-panel-media { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.story-media { aspect-ratio: 4 / 3; }
.story-panel-media .story-panel { max-width: none; box-shadow: none; border: none; padding: 0; background: transparent; }

/* ---------- Holiday-programmes compact panel ---------- */
.promo-panel-media { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: center; }
.promo-media { aspect-ratio: 16 / 10; }
.promo-panel-media .promo-panel { max-width: none; box-shadow: none; border: none; padding: 0; background: transparent; }

/* ---------- Final CTA — three balanced actions ---------- */
.cta-band-actions { flex-wrap: wrap; }
.cta-band-actions .btn { flex: 1 1 200px; text-align: center; }

/* ---------- Forms ---------- */

.form-card { background: var(--card); border-radius: var(--radius-lg); padding: 34px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.95rem; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  /* >=16px stops iOS Safari auto-zooming into the field on focus */
  font: inherit;
  font-size: max(1rem, 16px);
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.form-note { font-size: 0.9rem; color: var(--muted); overflow-wrap: break-word; }

/* ---------- CTA band ---------- */

.cta-band {
  background:
    radial-gradient(700px 350px at 90% -20%, rgba(168, 204, 42, 0.28), transparent 60%),
    var(--black);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 52px 40px;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.92); max-width: 34em; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; }
/* .btn-primary is black-on-black against this band's own dark background —
   invisible, reading as disconnected plain text rather than a button.
   Give it the same outlined-pill treatment as the header's btn-outline so
   both CTAs read as equally weighted, clearly tappable buttons. */
.cta-band .btn-primary {
  background: transparent;
  border-color: var(--accent-bright);
  color: var(--accent-bright);
}
.cta-band .btn-primary:hover { background: var(--accent-bright); color: var(--on-accent); }

/* ---------- Page hero (interior pages) ---------- */

.page-hero {
  background:
    radial-gradient(800px 400px at 90% -20%, rgba(168, 204, 42, 0.2), transparent 60%),
    linear-gradient(160deg, var(--black-deep), var(--black-olive-alt));
  color: #fff;
  padding: 60px 0;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.9); font-size: 1.15rem; max-width: 40em; margin-bottom: 0; }
.breadcrumb { font-size: 0.9rem; margin-bottom: 14px; }
.breadcrumb a { color: rgba(255,255,255,0.8); }

/* Alternating section backgrounds */
.section-alt { background: var(--primary-tint); }

/* Split section (text + image) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Same lighter, smaller editorial treatment as .mission-editorial — a plain
   full-size h2 made "London • Surrey • Bournemouth" read like a second
   banner headline rather than a calm sub-heading. */
#who-we-support h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---------- Footer ---------- */
/* One flat 4-column row on desktop (grid-template-areas keeps the brand
   column widest); the same four blocks reflow to a full-width brand row
   + a compact 3-column link row on mobile — no long single-column stack. */

.site-footer { background: var(--footer-bg); color: rgba(255,255,255,0.85); padding: 48px 0 0; margin-top: 0; font-size: 0.95rem; }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 0.75em; }
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 8px; }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  grid-template-areas: "brand services quicklinks contact";
  gap: 32px;
  padding-bottom: 32px;
}
.footer-brand { grid-area: brand; display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.footer-brand > div { min-width: 0; }
.footer-col-services { grid-area: services; min-width: 0; }
.footer-col-quicklinks { grid-area: quicklinks; min-width: 0; }
.footer-col-contact { grid-area: contact; min-width: 0; }

.footer-logo { flex: none; }
.footer-logo img { height: 48px; width: auto; object-fit: contain; }
.footer-tagline { color: var(--accent-bright); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 6px; }
.footer-brand p { margin: 0 0 8px; font-size: 0.92rem; }
/* No extra opacity here — .site-footer's rgba(255,255,255,0.85) text color
   already dims this; stacking opacity on top of it compounded to ~0.72
   effective alpha and dropped this line's rendered contrast below AA. */
.footer-brand p.footer-safeguard { font-size: 0.85rem; }

.footer-newsletter-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-newsletter-row p { margin: 0; font-weight: 600; white-space: nowrap; }
.footer-contact-cta { justify-content: space-between; }
.footer-contact-cta .hero-actions { margin: 0; }
.footer-contact-cta .btn-outline { border-color: var(--accent-bright); color: var(--accent-bright); }
.footer-contact-cta .btn-outline:hover { background: var(--accent-bright); color: var(--on-accent); }
.footer-newsletter { display: flex; gap: 8px; flex: 1; min-width: 240px; max-width: 420px; }
.footer-newsletter input {
  flex: 1;
  font: inherit;
  font-size: max(1rem, 16px);
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  min-width: 0;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 16px 0;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.6);
}

/* ---------- Responsive ---------- */

/* Nav collapses to a drawer before the full menu runs out of room. */
@media (max-width: 1200px) {
  /* The "Talk to ReBorne" button collapses into the drawer's own CTA
     list along with the rest of the nav; the WhatsApp icon nested beside
     it stays put — .header-ctas itself remains a visible flex wrapper
     (now holding just that one icon) rather than being hidden outright. */
  .header-ctas .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer-head { display: flex; }
  .nav-backdrop { display: block; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(4, 6, 2, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Structurally left-anchored: left:0 (not right:0) with a closed-state
     transform of translateX(-100%), so the drawer actually lives off-screen
     to the left and slides in from the left edge — not a right-anchored
     panel whose slide direction was reversed while staying attached to the
     right. */
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 360px);
    height: 100vh;
    height: 100dvh;
    margin-left: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: var(--header-bg);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .main-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }

  .nav-drawer-head {
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex: none;
  }
  .nav-drawer-brand img { height: 32px; width: auto; display: block; object-fit: contain; }
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-close:hover { background: rgba(255, 255, 255, 0.08); }

  .main-nav ul { flex-direction: column; gap: 0; padding: 8px 10px; }
  .main-nav a { padding: 14px 12px; font-size: 1.02rem; }

  /* The link + accordion-toggle sit in a row; the old desktop-only ::after
     chevron on the link is replaced by the dedicated toggle button below. */
  .nav-item-row { display: flex; align-items: center; }
  .nav-item-row > a { flex: 1; }
  .nav-item-row > a::after { display: none; }

  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    background: none;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
  }
  .dropdown-toggle:hover { background: rgba(255, 255, 255, 0.08); }
  .dropdown-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(225deg); }

  .dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 4px 16px;
    min-width: 0;
    border-left: 3px solid rgba(168, 204, 42, 0.35);
    border-radius: 0;
  }
  .dropdown a { font-size: 0.97rem; }
}

/* Locks page scroll while the drawer is open (js/main.js toggles this on <html>) */
html.nav-open,
html.nav-open body { overflow: hidden; height: 100%; }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }

  /* Tablet: brand gets its own full-width row above a 3-column link row,
     same reflow as mobile, so four narrow columns never get cramped. */
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "brand brand brand"
      "services quicklinks contact";
    gap: 24px 20px;
  }

  /* Bento grid: the lead photo card keeps its full width, the four compact
     cards reflow to two-up beneath it — still asymmetrical, just fewer
     columns, rather than collapsing straight to one. */
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "lead lead"
      "a b"
      "c d";
  }
  .bento-lead { min-height: 280px; }
}

/* ---------- Mobile (≤768px) ---------- */

@media (max-width: 768px) {
  .site-photo { aspect-ratio: 1.4; }
  .team-grid { gap: 14px; }
  .team-card-copy { padding: 18px; }

  /* Header: a true 3-column row — 44px hamburger | centred logo | 44px
     WhatsApp icon — so the logo centres independently of its two flanking
     controls instead of being pushed off-centre by a margin-auto trick. */
  .site-header .container {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    column-gap: 8px;
    min-height: 68px;
    padding-inline: 18px;
  }
  .nav-toggle { grid-column: 1; margin-left: 0; }
  .logo { grid-column: 2; justify-self: center; margin-left: 0; }
  .logo img { width: 88px; height: auto; max-height: 42px; padding: 0; object-fit: contain; }
  /* Base .header-whatsapp rule already covers size/color/background at
     every width now (the redesign shows it on desktop too). .header-ctas
     is the actual grid child here (its .btn is display:none at ≤1200px,
     see above), so it — not .header-whatsapp directly — takes the third
     column; the icon inside it renders exactly where the column places it. */
  .header-ctas { grid-column: 3; justify-self: end; }

  /* Phone number + a labelled WhatsApp action live inside the drawer,
     since there is no utility bar at any width in the redesign to carry
     them instead. */
  .nav-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-drawer-contact a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
  }
  .nav-drawer-contact .nav-contact-whatsapp { color: #6be08a; }

  /* The header's "Talk to ReBorne" button collapses out of the compact
     44/1fr/44 row at this width — this is where mobile users reach it
     instead, one tap after opening the drawer. */
  .nav-drawer-contact .nav-contact-cta {
    justify-content: center;
    margin-top: 6px;
    padding: 12px 0;
    border-radius: 999px;
    background: var(--accent-bright);
    color: var(--on-accent);
    font-weight: 700;
  }

  /* A long CTA label (e.g. "Check if you qualify for a free place") must
     never force the page wider than the viewport — let it wrap to two
     lines instead of overflowing. min-height keeps the touch target tall
     enough even when it wraps. */
  .btn { white-space: normal; }

  /* Type scale: keep small-but-meaningful labels at a legible floor */
  .eyebrow { font-size: 0.875rem; }
  .camp-card .camp-tag, .capacity-note { font-size: 0.85rem; }
  h2 { font-size: clamp(1.75rem, 6vw, 2.125rem); }

  /* Spacing scale */
  section { padding: 44px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid { gap: 14px; }
  .card { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 28px 20px; }

  /* Pathway cards ("Two doors") and services grid stay two-up on mobile —
     declared after the .grid-2/.grid-4 reset above so they win on source
     order within this single block, instead of fighting it from a
     separately-scattered ≤768px query elsewhere in the file. */
  .pathway-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pathway-card { padding: 18px; }
  .pathway-card h3 { font-size: 1.05rem; }
  .pathway-card p { font-size: 0.92rem; }

  .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .services-grid .card { padding: 16px; }
  .services-grid .card-icon { width: 40px; height: 40px; margin-bottom: 10px; }
  .services-grid .card-icon svg { width: 20px; height: 20px; }
  .services-grid h3 { font-size: 1rem; }
  .services-grid p { font-size: 0.88rem; }

  /* Bento grid: reflows to a single column, lead photo card first, so
     photography still leads the reading order on mobile. */
  .bento-grid { grid-template-columns: 1fr; grid-template-areas: "lead" "a" "b" "c" "d"; gap: 14px; }
  .bento-lead { min-height: 240px; }

  /* Families/Professionals split panel stays side by side even at the
     narrowest widths, per the redesign brief — padding and type shrink
     instead of stacking. */
  .split-panel { gap: 10px; }
  .split-panel .card { padding: 16px; }
  .split-panel h3 { font-size: 1rem; }
  .split-panel p { font-size: 0.85rem; }

  .media-stage .media-caption { left: 16px; right: 16px; bottom: 14px; font-size: 0.95rem; }

  /* Editorial/photo-led sections stack on mobile — unlike the pathway
     split-panel, these are read top-to-bottom, not compared side by side. */
  .mission-editorial { grid-template-columns: 1fr; gap: 14px; }
  .community-feature { grid-template-columns: 1fr; gap: 20px; }
  .community-feature-media { aspect-ratio: 16 / 10; }
  .feature-list { grid-template-columns: 1fr; }
  .story-panel-media { grid-template-columns: 1fr; gap: 20px; }
  .story-media { aspect-ratio: 16 / 10; }
  .promo-panel-media { grid-template-columns: 1fr; gap: 18px; }
  .promo-media { aspect-ratio: 16 / 10; }
  .cta-band-actions .btn { flex: 1 1 100%; }

  .stats-strip { padding: 24px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .stat-number { font-size: 2.1rem; }
  .stats-values .stat-number { font-size: 1.3rem; }
  .stat-label { font-size: 0.78rem; margin-top: 3px; }

  .trust-strip { padding: 18px 0; }
  .trust-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    text-align: left;
    font-size: 0.875rem;
  }
  /* The longest claim ("Working with schools and councils...") spans both
     columns rather than squeezing into half-width and wrapping awkwardly. */
  .trust-items span:last-child { grid-column: 1 / -1; }

  .story-panel, .promo-panel { padding: 20px; border-radius: 18px; }
  .story-panel p, .promo-panel p { font-size: 0.95rem; }

  /* Footer: compact brand row, then Services/Quick Links/Stay in Touch as a
     tight 3-column row (not three separate full-width stacks). */
  .site-footer { padding-top: 32px; font-size: 0.9rem; }
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "brand brand brand"
      "services quicklinks contact";
    gap: 22px 10px;
    padding-bottom: 22px;
  }
  .footer-logo img { height: 34px; }
  .footer-brand p { font-size: 0.85rem; }
  .site-footer h3 { font-size: 0.88rem; margin-bottom: 0.6em; }
  .site-footer ul li { margin-bottom: 6px; font-size: 0.85rem; }
  .footer-newsletter-row { padding: 18px 0; gap: 10px; }
  .footer-newsletter-row p { font-size: 0.85rem; white-space: normal; flex: 1 1 100%; }
  .footer-newsletter { max-width: none; }
  .footer-bottom { padding: 14px 0; font-size: 0.75rem; }

  /* Keep the landscape hero photo in its own frame on phones instead of
     cropping it to fill a full-height portrait screen. */
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    color: var(--ink);
    background: var(--bg);
  }
  .hero-media {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    /* Taller than the source photo's own 1.5:1 ratio so cover crops its
       sides in rather than just scaling it to fit — that leaves headroom
       above the subjects instead of their heads sitting flush against the
       fixed header's icons. */
    aspect-ratio: 4 / 3;
  }
  .hero-photo { object-position: center 25%; }
  .hero-overlay {
    position: absolute;
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, rgba(5, 7, 3, 0.48), transparent 38%);
  }
  .hero-content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 28px 20px calc(32px + env(safe-area-inset-bottom));
    color: var(--ink);
  }
  .hero-content .eyebrow { color: var(--accent-dark); }
  .hero-content h1 { color: var(--ink); }
  .hero-content .hero-actions { margin-top: 14px; gap: 10px; }
  /* "Explore our support" is the longer label of the pair — at the base
     btn-lg font-size it wraps to two lines in this half-width slot while
     "Email ReBorne" stays on one, leaving the two CTAs mismatched heights.
     Sizing down here (not just at the ≤340px breakpoint below) keeps both
     on a single line across the whole phone range. */
  .hero-content .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 340px) {
  /* Only at the very narrowest widths does the newsletter row wrap. */
  .footer-newsletter { flex-wrap: wrap; }
  .footer-newsletter input, .footer-newsletter button { flex: 1 1 100%; }
  .pathway-card { padding: 14px; }

  /* The two hero CTAs stay side-by-side down to the smallest phones — the
     ≤768px rule above fits them on one line down to ~341px, but the slot
     each button gets keeps shrinking, so this width still needs a touch
     less padding to avoid "Explore our support" wrapping again. */
  .hero-content .hero-actions { gap: 8px; }
  .hero-content .hero-actions .btn { padding-inline: 8px; }
}

/* Mobile landscape (short viewport, e.g. 844×390): the drawer and hero both
   need to fit a much shorter height without clipping their own content.
   This can trigger at widths above the 768px "mobile" cutoff (a landscape
   phone is wide but short), so it repeats the same fixed-offset hero fit
   independently of that breakpoint. */
@media (max-height: 480px) and (max-width: 900px) {
  .main-nav ul { padding: 4px 10px; }
  .main-nav a { padding: 10px 12px; }
  .nav-drawer-head { padding: 10px 10px 10px 18px; }
  .hero-content {
    margin-top: 0;
    margin-bottom: calc(36px + env(safe-area-inset-bottom));
  }
  .hero-content .hero-actions { margin-top: 10px; }
}

@media (max-height: 480px) and (max-width: 768px) {
  .hero-content { margin: 0; }
}


/* ============================================================
   ReBorne redesign layer — warm, editorial, mobile-first
   Added as a final layer so the original page content and
   working navigation remain intact while the visual system changes.
   ============================================================ */
:root {
  --primary: #244a3b;
  --primary-dark: #19382d;
  --primary-tint: #e7ede4;
  --accent: #d7a184;
  --accent-bright: #e9c8b3;
  --accent-dark: #80543f;
  --on-accent: #19382d;
  --ink: #233d32;
  --muted: #627066;
  --bg: #f5f1e8;
  --card: #fffdf8;
  --line: #e1dbcf;
  --black: #19382d;
  --header-bg: #19382d;
  --footer-bg: #19382d;
  --black-deep: #152f25;
  --black-elevated: #244a3b;
  --black-olive: #2d5140;
  --black-olive-alt: #355c47;
  --white-soft: #f8f4eb;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow: 0 3px 16px rgba(25, 56, 45, .06);
  --shadow-lift: 0 12px 30px rgba(25, 56, 45, .12);
}
html { scroll-padding-top: 100px; }
body { background: var(--bg); color: var(--ink); }
a { text-underline-offset: 3px; }
section { scroll-margin-top: 90px; }
.site-header { box-shadow: 0 2px 12px rgba(12, 34, 24, .12); }
.main-nav a { transition: background .18s ease, color .18s ease; }
.main-nav a:hover { background: rgba(233, 200, 179, .13); color: var(--accent-bright); }
.main-nav a[aria-current="page"] { color: var(--accent-bright); }
.dropdown { background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(18, 44, 32, .16); overflow: hidden; }
.dropdown a { color: var(--ink); }
.dropdown a:hover { background: var(--primary-tint); color: var(--primary-dark); }
.btn { border-radius: 7px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary { background: var(--primary); color: #fffdf8; }
.btn-primary:hover { background: var(--primary-dark); color: #fffdf8; }
.btn-accent { background: var(--accent-bright); color: var(--on-accent); }
.btn-accent:hover { background: #f0d5c4; color: var(--on-accent); }
.btn-outline { border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fffdf8; }
.card, .service-card, .pathway-card, .professional-card { box-shadow: var(--shadow); border-color: var(--line); }
.card:hover, .service-card:hover, .pathway-card:hover { box-shadow: var(--shadow-lift); }
.section-alt { background: #eceee5; }
.eyebrow { color: #8a5b43; letter-spacing: .08em; font-size: .82rem; text-transform: uppercase; }
.hero-stage { background: var(--bg); }
.hero {
  min-height: 650px;
  min-height: min(760px, calc(100svh - 84px));
  display: flex;
  align-items: center;
  padding: 72px max(28px, calc((100vw - 1180px) / 2)) 76px;
  color: var(--ink);
  background: var(--bg);
}
.hero-media {
  position: absolute;
  top: 7%;
  right: max(24px, calc((100vw - 1180px) / 2));
  bottom: 7%;
  left: auto;
  width: min(47%, 550px);
  height: auto;
  overflow: hidden;
  border-radius: 48% 48% 10px 10px;
  background: var(--primary-tint);
  box-shadow: 0 18px 50px rgba(25, 56, 45, .08);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
}
.hero-overlay { display: none; }
.hero-content {
  max-width: 540px;
  width: min(48%, 540px);
  margin: 0;
  padding: 24px 0;
  color: var(--ink);
}
.hero-content .eyebrow { color: #8a5b43; margin-bottom: 18px; }
.hero-content h1 {
  max-width: 10.5em;
  color: var(--primary);
  font-size: clamp(2.8rem, 5.2vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero-intro { max-width: 475px; margin: 22px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.hero-content .hero-actions { gap: 12px; margin-top: 28px; }
.hero-content .hero-actions .btn { white-space: normal; }
.hero-trust-note { margin: 21px 0 0; color: var(--muted); font-size: .9rem; }
.hero-trust-note::before { content: "•"; color: var(--accent-dark); font-size: 1.3em; margin-right: 8px; }
.mission-editorial h2, .section-intro h2, .community-feature h2, .story-panel h2, .promo-panel h2 { letter-spacing: -.025em; }
.media-stage {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--primary-tint);
  isolation: isolate;
}
.media-stage > img,
.media-stage > video,
.site-photo img,
.story-panel-media img,
.promo-panel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-stage img.photo-art { object-fit: cover; }
.site-photo { overflow: hidden; border-radius: var(--radius-lg); background: var(--primary-tint); }
.community-feature-media, .story-media, .promo-media { min-width: 0; }
.cta-band { background: var(--primary); border-radius: var(--radius-lg); color: #fffdf8; }
.cta-band h2, .cta-band h3 { color: #fffdf8; }
.cta-band p { color: #e4e9e0; }
.stats-strip { background: var(--primary); }
.stat-number { color: var(--accent-bright); }
.site-footer { background: var(--footer-bg); }
.site-footer a:hover { color: var(--accent-bright); }
.footer-bottom { border-color: rgba(255,255,255,.16); }
.form-card { background: var(--card); border-color: var(--line); }
.form-field input, .form-field select, .form-field textarea { border-radius: 8px; border-color: #d5d7cd; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(36,74,59,.12); }
img { max-width: 100%; }
.grid > *, .split > *, .split-panel > *, .community-feature > *, .story-panel-media > *, .promo-panel-media > * { min-width: 0; }

/* Consistent mobile image handling: every frame owns its crop, never the
   image's intrinsic dimensions. Subject positioning can be tuned per asset. */
@media (max-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0 0 34px;
    overflow: hidden;
  }
  .hero-media {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 430px;
    border-radius: 0 0 26px 26px;
    box-shadow: none;
  }
  .hero-photo { object-position: center 30%; }
  .hero-content {
    order: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 22px 8px;
  }
  .hero-content h1 { font-size: clamp(2.45rem, 9.8vw, 3.8rem); line-height: 1.06; }
  .hero-intro { font-size: 1rem; margin-top: 17px; }
  .hero-content .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .hero-content .hero-actions .btn { width: 100%; min-height: 50px; }
  .hero-trust-note { font-size: .85rem; }
  .split-panel { grid-template-columns: 1fr; gap: 14px; }
  .split-panel .card { padding: 22px; }
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .services-grid .card { padding: 22px; }
  .services-grid h3 { font-size: 1.2rem; }
  .services-grid p { font-size: 1rem; }
  .pathway-grid { grid-template-columns: 1fr; }
  .pathway-card { padding: 22px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-lead { min-height: 0; aspect-ratio: 4 / 3; }
  .site-photo { aspect-ratio: 4 / 3; }
  .site-photo img { width: 100%; height: 100%; object-fit: cover; }
  .media-stage { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }
  .media-stage > img, .media-stage > video { width: 100%; height: 100%; object-fit: cover; }
  .community-feature-media, .story-media, .promo-media { aspect-ratio: 4 / 3; }
  .story-panel-media, .promo-panel-media { grid-template-columns: 1fr; gap: 22px; }
  .story-panel-media > *, .promo-panel-media > * { min-width: 0; width: 100%; }
  .story-panel-media img, .promo-panel-media img { max-height: 420px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card .site-photo { aspect-ratio: 4 / 3; }
  .section-intro { max-width: 100%; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand brand" "services quicklinks" "contact contact";
    gap: 26px 18px;
  }
  .footer-col-contact { grid-area: contact; }
  .site-footer ul li { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .hero-media { aspect-ratio: 5 / 4; }
  .hero-content { padding-inline: 18px; }
  .hero-content h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .hero-content .hero-actions .btn { font-size: .98rem; }
  .media-stage, .site-photo { border-radius: 14px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}