/* ============================================================================
   Camp Specialists — shared inner-page stylesheet.
   The design system (tokens, base, buttons, header, mobile menu, footer,
   mobile CTA, form modal) is lifted VERBATIM from the approved home-v2
   homepage so inner pages match it exactly. Below that are inner-page-only
   components (page hero, prose, feature grids, CTA band, FAQ, team, etc.).
   NOTE: url() paths resolve against THIS file's location (assets/css/), so
   fonts are referenced as ../fonts/ — not against the document <base>.
   ========================================================================= */

@font-face {
  font-family: "ES Serif";
  src: url("../fonts/ESSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Stallion Script";
  src: url("../fonts/StallionScript.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Brand palette per Camp Specialists Brand Guidelines */
  --heritage: #0B2847;      /* Heritage Blue — primary */
  --heritage-deep: #071B31;
  --ink: #0B2847;           /* body text uses Heritage */
  --canvas: #FFF6EC;        /* Warm Canvas — primary background */
  --canvas-warm: #F8EBD2;
  --mist: #D8F0F4;          /* Mist Blue — secondary accent */
  --gold: #FFD9A8;
  --star: #E0A73A;
  --card-bg: #FFFFFF;
  --maxw: 1240px;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'ES Serif', 'Cormorant Garamond', serif;
  --font-script: 'Stallion Script', 'Sacramento', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--heritage); text-decoration: none; }
a:hover { color: var(--heritage-deep); }
img { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--heritage); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--heritage); margin: 0 0 18px;
}
.heading {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); line-height: 1.2; margin: 0;
  text-wrap: balance;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Buttons */
.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn-primary {
  background: var(--heritage); color: #fff; border-radius: 999px; padding: 17px 34px; font-size: 16px;
}
.btn-primary:hover { background: var(--heritage-deep); color: #fff; }
.btn-outline {
  background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 3px;
  padding: 15px 30px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.btn-outline:hover { background: var(--ink); color: var(--canvas); }
.btn-outline.on-dark { color: #fff; border-color: #fff; }
.btn-outline.on-dark:hover { background: #fff; color: var(--heritage); }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  color: #fff; background: transparent; border-bottom: 1px solid transparent;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}
.site-header.scrolled {
  background: rgba(255,246,230,0.95); color: var(--ink);
  border-bottom-color: rgba(31,45,68,0.1);
  backdrop-filter: saturate(1.15) blur(8px); -webkit-backdrop-filter: saturate(1.15) blur(8px);
}
/* Inner-page header is not over a hero, so it starts in the scrolled (solid)
   state. Pages add class "solid-header" on <body> to force that from load. */
body.solid-header .site-header {
  background: rgba(255,246,230,0.95); color: var(--ink);
  border-bottom-color: rgba(31,45,68,0.1);
  backdrop-filter: saturate(1.15) blur(8px); -webkit-backdrop-filter: saturate(1.15) blur(8px);
}
body.solid-header .header-brand img { filter: brightness(1) invert(0); }

/* Shellborn-style: hamburger left, large centered logo, primary CTA right.
   Top padding clears the notch/status bar on devices that report a safe-area
   inset; resolves to plain 14px everywhere else. */
.header-inner {
  max-width: 1320px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) clamp(20px, 4vw, 56px) 14px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.header-left { display: flex; align-items: center; justify-self: start; }
.header-right { display: flex; align-items: center; justify-self: end; }
.header-brand { color: inherit; display: flex; align-items: center; justify-self: center; }
.header-brand img { height: clamp(76px, 8vw, 110px); width: auto; filter: brightness(0) invert(1); transition: filter 300ms ease; }
.site-header.scrolled .header-brand img { filter: brightness(1) invert(0); }
/* Solid navy in every header state (#134, #135). The outline version blended
   into the hero photo and again into the cream bar; Stacy asked for the same
   backing the page's own navy CTAs have. */
.header-right .btn-outline { background: var(--heritage); color: var(--canvas); border-color: var(--heritage); white-space: nowrap; }
.site-header .header-right .btn-outline:hover { background: var(--heritage-deep); color: var(--gold); border-color: var(--heritage-deep); }
/* #208/#235: navy on a navy hero read as nothing at all. Over a hero (bar not
   yet solid) the button takes a gold fill so it is plainly a button. */
body:not(.solid-header) .site-header:not(.scrolled) .header-right .btn-outline { background: var(--gold); color: var(--heritage); border-color: var(--gold); }
body:not(.solid-header) .site-header:not(.scrolled) .header-right .btn-outline:hover { background: var(--canvas); color: var(--heritage); border-color: var(--canvas); }
.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: transparent; border: 1px solid currentColor; border-radius: 3px;
  color: inherit; cursor: pointer; transition: background 200ms, color 200ms;
}
.site-header:not(.scrolled) .nav-burger:hover { background: #fff; color: var(--heritage); }
.site-header.scrolled .nav-burger:hover { background: var(--ink); color: var(--canvas); }
.nav-burger span { display: block; width: 20px; height: 0; border-top: 2px solid currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
@media (max-width: 700px) {
  .header-right .btn-outline { display: none; }
  .header-brand img { height: clamp(74px, 18vw, 94px); }
  .header-inner { padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: 16px; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--canvas); color: var(--ink);
  display: flex; flex-direction: column; padding: 22px clamp(20px, 6vw, 48px); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}
.mobile-menu.open { opacity: 1; transform: none; visibility: visible; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-top img { height: 88px; width: auto; }
.mm-close {
  width: 44px; height: 44px; background: transparent; border: 1px solid var(--ink); border-radius: 3px;
  font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.mm-top {
  display: block; color: var(--ink); font-family: var(--font-serif); font-size: 26px; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 11px 0; border-top: 1px solid rgba(31,45,68,0.12); margin-top: 8px;
  text-decoration: none;
}
.mobile-menu .mm-group:first-child .mm-top { border-top: 0; margin-top: 0; }
.mm-sub {
  display: block; color: var(--ink); font-family: var(--font-body); font-size: 15px; opacity: 0.8;
  padding: 8px 0 8px 14px; text-decoration: none; text-transform: none; letter-spacing: normal;
}
.mm-sub:hover, .mm-top:hover { color: var(--heritage); opacity: 1; }
.mobile-menu .tel { margin-top: 22px; color: var(--heritage); font-weight: 600; font-size: 17px; }
.mobile-menu .btn-primary { align-self: start; margin-top: 20px; padding: 18px 34px; }
body.menu-open { overflow: hidden; }

/* ============================================================================
   Inner-page components
   ========================================================================= */

/* Page hero — compact banner with a photo backdrop + scrim. Sits under the
   fixed header, so it carries top padding to clear it. */
.page-hero {
  position: relative; background: var(--heritage); color: #fff; overflow: hidden;
  padding: clamp(150px, 20vw, 230px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 96px);
}
.page-hero.no-photo { padding-top: clamp(160px, 22vw, 250px); }
.page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.page-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.78) 0%, rgba(7,27,49,.58) 55%, rgba(7,27,49,.72) 100%);
}
.page-hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero h1 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.12; margin: 0; text-wrap: balance; color: #fff;
  font-size: clamp(30px, 5vw, 60px);
}
.page-hero .lede {
  font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6;
  color: rgba(255,255,255,.86); margin: 20px 0 0; max-width: 720px;
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.66); margin: 0 0 20px; }
.breadcrumb a { color: rgba(255,255,255,.66); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,.4); }

/* Section rhythm */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section.tight { padding: clamp(40px, 5vw, 64px) 0; }
/* Alternate sections are WHITE, not a second cream. Client flagged the
   canvas(#FFF6EC)→canvas-warm(#F8EBD2) "beige on beige" boundary as looking
   like a mistake — never place those two creams adjacent. White reads as an
   intentional panel against the warm canvas. */
.section.warm { background: #FFFFFF; }
.section.mist { background: var(--mist); }
.section.ink { background: var(--heritage); color: #fff; }
.section.ink .heading, .section.ink h2, .section.ink h3 { color: #fff; }
.section-head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 48px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.18; margin: 0; font-size: clamp(24px, 3.2vw, 40px); text-wrap: balance; }
.section-head .lede { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: #4a5878; margin: 18px 0 0; }
.section.ink .section-head .lede { color: rgba(255,255,255,.82); }

/* Prose — long-form client copy */
.prose { max-width: 760px; }
.prose.center { margin: 0 auto; }
/* Explicit per-element spacing. (An earlier `.prose > * + *` owl rule lost the
   specificity fight to `.prose p{margin:0}`, so paragraphs rendered flush; this
   model gives each block type its own margin and can't be overridden by type
   selectors of equal specificity.) */
.prose > * { margin: 0; }
.prose p { font-family: var(--font-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; color: #3f4d68; margin: 0 0 1.1em; }
.prose h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; color: var(--ink); margin: 1.7em 0 0.55em; }
.prose h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; font-size: clamp(19px, 2vw, 25px); line-height: 1.25; color: var(--heritage); margin: 1.5em 0 0.45em; }
.prose .kicker { font-family: var(--font-script); font-size: clamp(26px, 3vw, 40px); color: var(--heritage); line-height: 1.1; margin: 0 0 .3em; text-transform: none; letter-spacing: 0; }
.prose a { color: var(--heritage); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { font-family: var(--font-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: #3f4d68; margin: .35em 0; }
.prose blockquote {
  margin: 1.8em 0; padding: 0;
  font-family: var(--font-serif); font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--heritage);
}
.prose > *:last-child { margin-bottom: 0; }
.prose > *:first-child { margin-top: 0; }

/* Two-column media + copy split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.media-right { direction: rtl; }
.split.media-right > * { direction: ltr; }
.split-media { border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 56px -30px rgba(11,40,71,.5); aspect-ratio: 4/3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split.media-right { direction: ltr; } }

/* Feature / link card grids */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* Fixed 4-up that collapses to 2, then 1 — for hub link grids. */
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid.cols-4 { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--card-bg); border: 1px solid rgba(11,40,71,.12); border-radius: 14px;
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 44px -30px rgba(11,40,71,.55); transition: transform 200ms ease, box-shadow 200ms ease;
}
a.feature-card { color: inherit; }
a.feature-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -30px rgba(11,40,71,.5); }
.feature-card h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; color: var(--heritage); margin: 0; }
.feature-card p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: #4a5878; margin: 0; }
.feature-card .more, .photo-card .more { margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--heritage); display: inline-flex; gap: 7px; align-items: center; }

/* Photo-topped link card (for hub pages) */
.photo-card { background: var(--card-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px -34px rgba(11,40,71,.5); display: flex; flex-direction: column; transition: transform 200ms ease, box-shadow 200ms ease; color: inherit; }
a.photo-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -30px rgba(11,40,71,.5); }
.photo-card .ph { aspect-ratio: 3/2; background: var(--ink); overflow: hidden; }
.photo-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-card .body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.photo-card h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 22px); color: var(--heritage); margin: 0; }
.photo-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: #4a5878; margin: 0; }

/* Numbered process steps */
.steps { display: grid; gap: clamp(20px, 3vw, 34px); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.5vw, 30px); align-items: start; }
.step-n {
  width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px); flex: none; border-radius: 999px;
  background: var(--heritage); color: #fff; font-family: var(--font-serif); font-size: clamp(20px, 2.2vw, 28px);
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: clamp(19px, 2vw, 25px); color: var(--heritage); margin: 6px 0 8px; }
.step p { font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: #3f4d68; margin: 0; }

/* Chip / tag lists (camp types, destinations) */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 0; margin: 0; list-style: none; }
.chip-list li {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--heritage);
  background: #fff; border: 1px solid rgba(11,40,71,.14); border-radius: 999px; padding: 9px 18px;
}
.section.ink .chip-list li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.chip-list.mist li { background: var(--mist); border-color: transparent; }

/* Definition blocks (glossary of camp terms) */
.def-list { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.def { border-top: 1px solid rgba(11,40,71,.12); padding-top: clamp(18px, 2.2vw, 26px); }
.def h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: clamp(18px, 1.8vw, 23px); color: var(--heritage); margin: 0 0 8px; }
.def p { font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.72; color: #3f4d68; margin: 0; }

/* Team members */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 40px); }
.team-card { display: flex; flex-direction: column; gap: 14px; }
.team-photo { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; background: var(--mist); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 22px); color: var(--heritage); margin: 0; }
.team-card .role { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--star); margin: -6px 0 0; }
.team-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.68; color: #4a5878; margin: 0; }

/* FAQ accordion (native <details>) */
.faq-list { max-width: 820px; }
details.faq { border-bottom: 1px solid rgba(11,40,71,.14); padding: 4px 0; }
details.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.02em; font-size: clamp(17px, 1.7vw, 21px);
  color: var(--heritage); line-height: 1.35;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 26px; font-weight: 400; color: var(--heritage); transition: transform 200ms ease;
}
details.faq[open] summary::after { content: "\2013"; }
details.faq .faq-body { padding: 0 0 22px; }
details.faq .faq-body p { font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.72; color: #3f4d68; margin: 0 0 1em; }
details.faq .faq-body p:last-child { margin-bottom: 0; }
details.faq .faq-body ul { margin: 0 0 1em; padding-left: 1.2em; }
details.faq .faq-body li { font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: #3f4d68; }

/* Pull CTA band */
.cta-band { background: linear-gradient(120deg, var(--heritage) 0%, var(--heritage-deep) 100%); color: #fff; text-align: center; }
.cta-band .eyebrow { color: var(--gold); }
.cta-band h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.18; margin: 0 auto; max-width: 860px; color: #fff; text-wrap: balance; }
.cta-band p { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: rgba(255,255,255,.82); margin: 18px auto 0; max-width: 620px; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: center; margin-top: 30px; }

/* Testimonial pull (used inline across pages) */
.quote-card { background: var(--card-bg); border-radius: 14px; padding: clamp(26px, 3vw, 40px); box-shadow: 0 18px 44px -34px rgba(11,40,71,.5); }
.quote-card p { font-family: var(--font-serif); font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; color: var(--heritage); margin: 0 0 18px; }
.quote-card .who { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--star); }

/* ============================================================================
   Form card + get-matched modal (verbatim from homepage)
   ========================================================================= */
.form-card { background: #fff; border-radius: 12px; box-shadow: 0 24px 60px -28px rgba(31,45,68,.32); padding: clamp(26px,3.5vw,44px); }
.form-head { margin-bottom: 2px; }
.form-head .eyebrow { font-size: 11px; letter-spacing: 0.16em; margin: 0 0 6px; }
.form-head h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 26px; margin: 0 0 8px; }
.form-head p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: #4a5878; margin: 0 0 4px; }
.form-head .req-legend { font-size: 12px; color: #8a93a6; margin: 0; }
#v2-contact-form { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.field input, .field select {
  border: 1px solid rgba(31,45,68,.22); border-radius: 6px; padding: 12px 14px; font-size: 15px;
  color: var(--ink); background: #FFFDF8; font-weight: 400; letter-spacing: normal; text-transform: none;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--heritage); box-shadow: 0 0 0 3px rgba(55,90,135,.18); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field-divider { display: flex; align-items: center; gap: 14px; margin: 8px 0 2px; }
.field-divider span.lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--heritage); white-space: nowrap; }
.field-divider span.line { flex: 1; height: 1px; background: rgba(31,45,68,.14); }
.sex-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.sex-row label {
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(31,45,68,.22);
  border-radius: 6px; padding: 11px; font-size: 14px; cursor: pointer; background: #FFFDF8; transition: border-color 160ms, background 160ms;
}
.sex-row input { accent-color: var(--heritage); }
.sex-row input:checked + span { font-weight: 600; }
.sex-row label:has(input:checked) { border-color: var(--heritage); background: #fff; box-shadow: 0 0 0 2px rgba(55,90,135,.15); }
.form-reassure { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: #4a5878; margin: 6px 0 0; }
#v2-contact-form .btn-primary { width: 100%; margin-top: 4px; }
.fineprint { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: #8a93a6; text-align: center; margin: 2px 0 0; }
.form-success { text-align: center; padding: 40px 8px; animation: fadeUp .5s ease both; }
.form-success .script { font-family: var(--font-script); font-size: 52px; color: var(--heritage); margin: 0 0 10px; display: inline-block; }
.form-success p { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: #4a5878; margin: 0 0 28px; max-width: 380px; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

.form-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: clamp(16px,4vw,48px) 16px; overflow-y: auto; }
.form-modal.open { display: flex; }
.form-modal-backdrop { position: fixed; inset: 0; background: rgba(11,40,71,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeUp .2s ease both; }
.form-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: auto; animation: fadeUp .35s ease both; }
.form-modal-close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 0; background: #fff; color: var(--heritage); cursor: pointer; box-shadow: 0 8px 24px -8px rgba(11,40,71,.5); }
.form-modal-close:hover { background: var(--heritage); color: #fff; }
@media (max-width: 480px) { .form-modal-close { top: 6px; right: 6px; width: 40px; height: 40px; } }
body.modal-open { overflow: hidden; }

/* ============================================================================
   Footer + mobile CTA (verbatim from homepage)
   ========================================================================= */
.site-footer { background: var(--heritage-deep); color: #fff; padding: clamp(60px,8vw,96px) clamp(20px,5vw,64px) 40px; }
.footer-grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: clamp(32px,4vw,56px); }
.footer-brand { max-width: 340px; }
.footer-brand img { height: clamp(64px,7vw,84px); width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand p { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.66); margin: 0; }
.footer-social { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.footer-social-label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: #fff; transition: background 200ms, color 200ms; }
.footer-social a:hover { background: #fff; color: var(--heritage); }
.footer-col-head { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.footer-links a { color: rgba(255,255,255,.86); }
.footer-bottom {
  max-width: 1220px; margin: 44px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.5);
}

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,246,230,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(31,45,68,.12);
}
.mobile-cta .btn-primary { flex: 1; text-align: center; padding: 14px; font-size: 15px; }
.mobile-cta .call {
  display: flex; align-items: center; justify-content: center; width: 52px; flex: none;
  border: 1px solid var(--heritage); border-radius: 999px; color: var(--heritage);
}
@media (min-width: 721px) { .mobile-cta { display: none !important; } }
@media (max-width: 720px) { body { padding-bottom: 84px; } }

/* ============================================================================
   HOMEPAGE COMPONENTS — ported VERBATIM from the <style> block in
   home-v2/index.html so inner pages are built from the same design language as
   the approved homepage (previously these existed only inline, and the inner
   pages used a parallel invented component set, which is why they didn't match).
   Do not edit these declarations here without mirroring the homepage.
   Inner-page-only modifiers are grouped at the end of this section.
   ========================================================================= */

/* Hero (photo band — NO text over it, per client pin 13 + homepage pattern) */
.hero { position: relative; height: 100vh; min-height: 560px; background: var(--ink); overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
}
.hero-slide.active { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,30,50,.5) 0%, rgba(20,30,50,.08) 20%, rgba(20,30,50,0) 50%, rgba(20,30,50,.28) 100%);
}

/* Stats */
.stats { background: linear-gradient(120deg, var(--heritage) 0%, var(--heritage-deep) 100%); color: #fff; padding: clamp(18px,2.2vw,26px) clamp(20px,5vw,64px); }
.stats-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: clamp(16px,3vw,32px); text-align: center; }
.stat-n { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px,2.8vw,36px); line-height: 1; margin-bottom: 4px; }
.stat-l { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
@media (max-width: 680px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(8px,2.5vw,18px); }
  .stat-n { font-size: clamp(17px,5.2vw,28px); white-space: nowrap; }
  .stat-l { font-size: clamp(8.5px,2.4vw,12px); letter-spacing: 0.05em; }
}

/* Intro */
.intro { background: var(--canvas); padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); text-align: center; }
.intro-inner { max-width: 820px; margin: 0 auto; }
.intro h1 { font-size: clamp(13px,3.3vw,31px); white-space: nowrap; margin: 0 0 28px; }
@media (max-width: 680px) {
  .intro .eyebrow { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 14px; }
  .intro h1 { white-space: normal; font-size: clamp(23px,6.6vw,30px); margin: 0 0 24px; }
}
.intro p:not(.eyebrow) { font-family: var(--font-body); font-size: clamp(16px,1.4vw,19px); line-height: 1.75; color: #4a5878; margin: 0 0 20px; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; justify-content: center; }

/* How we help */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); }
.help-media { min-height: clamp(340px,44vw,580px); background: var(--ink); }
.help-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.help-panel { background: var(--heritage); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: clamp(44px,6vw,88px) clamp(28px,5vw,76px); }
.help-panel .eyebrow { color: rgba(255,255,255,.72); }
.help-panel h2 { color: #fff; font-size: clamp(18px,2vw,26px); margin: 0 0 20px; }
.help-panel > p:not(.eyebrow) { font-size: clamp(17px,1.4vw,20px); line-height: 1.7; color: rgba(255,255,255,.88); margin: 0 0 22px; max-width: 520px; }
.help-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.help-list li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(16px,1.35vw,19px); line-height: 1.55; color: rgba(255,255,255,.92); }
.help-list .ic { flex: none; display: inline-flex; align-items: center; height: 1.55em; }
.help-list .ic svg { width: 22px; height: 22px; }
.help-list .ic .box { stroke: rgba(255,255,255,.38); stroke-width: 1.5; }
.help-list .ic .tick { stroke: var(--gold); stroke-width: 2.2; }
.help-callout { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px,1.7vw,24px); line-height: 1.45; color: #fff; margin: 0 0 30px; max-width: 520px; }
.help-callout strong { font-style: normal; font-weight: 600; }

/* Camp types */
.camp-types { background: var(--canvas); padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); }
.camp-types-head { text-align: center; max-width: 900px; margin: 0 auto clamp(40px,5vw,66px); }
.camp-types-head p:not(.eyebrow) { font-family: var(--font-body); font-size: clamp(16px,1.3vw,18px); line-height: 1.7; color: #4a5878; margin: 0; }
.camp-grid { display: flex; flex-wrap: wrap; gap: clamp(14px,1.5vw,20px); }
.camp-card { position: relative; display: block; flex: 1 1 258px; height: clamp(252px,27vw,324px); overflow: hidden; border-radius: 5px; background: var(--ink); text-decoration: none; }
.camp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s ease; filter: saturate(.97) brightness(.82); }
.camp-card:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1.02); }
.camp-card .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,30,50,0) 36%, rgba(20,30,50,.74) 100%); }
.camp-card .label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px;
  font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; font-size: clamp(18px,1.7vw,24px); line-height: 1.16; text-wrap: balance;
}
@media (max-width: 680px) {
  .camp-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .camp-card { height: clamp(150px,40vw,240px); }
  .camp-card:last-child { grid-column: 1 / -1; }
  .camp-card .label { padding: 12px 14px; font-size: clamp(13px,3.4vw,19px); }
}
.camp-types-foot { max-width: 800px; margin: clamp(40px,5vw,64px) auto 0; text-align: center; }
.camp-types-foot p { font-family: var(--font-body); font-size: clamp(16px,1.3vw,18px); line-height: 1.7; color: #4a5878; margin: 0 0 28px; }
.camp-types-foot strong { color: var(--ink); }

/* Process */
.process { background: var(--heritage); color: #fff; padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); }
.process-inner { max-width: 1120px; margin: 0 auto; }
.process-head { text-align: center; max-width: 720px; margin: 0 auto clamp(24px,3.4vw,42px); }
.process-head .eyebrow { color: var(--gold); }
.process-head h2 { color: #fff; }
.process-head p:not(.eyebrow) { font-family: var(--font-body); font-size: clamp(16px,1.3vw,18px); line-height: 1.7; color: rgba(255,255,255,.85); margin: 0; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(28px,4vw,52px); }
.process-step { border-top: 2px solid rgba(255,255,255,.28); padding-top: 22px; }
.process-step .n { font-family: var(--font-serif); font-weight: 600; font-size: 44px; line-height: 1; color: var(--gold); margin-bottom: 14px; }
.process-step h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: clamp(15px,1.7vw,19px); margin: 0 0 12px; color: #fff; }
.process-step p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.85); margin: 0; }

/* Photo band */
.photo-band-sec { background: #fff; padding: clamp(48px,7vw,96px) clamp(20px,5vw,64px); }
.photo-band-head { text-align: center; max-width: 680px; margin: 0 auto clamp(32px,4vw,54px); }
.photo-band-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(14px,1.6vw,22px); }
.photo-band-grid figure { margin: 0; aspect-ratio: 4/5; background: var(--ink); overflow: hidden; }
.photo-band-grid img { width: 100%; height: 100%; object-fit: cover; }

/* Testimonials — blue cards */
.testimonials { background: #fff; color: var(--ink); padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); }
.testimonials-head { text-align: center; max-width: 680px; margin: 0 auto clamp(44px,6vw,68px); }
.testimonials-head .eyebrow { color: var(--heritage); }
.testimonials-head h2 { color: var(--heritage); font-size: clamp(18px,2vw,26px); }
.testi-wrap { position: relative; max-width: 820px; margin: 0 auto; }
.testi-slide {
  position: relative; z-index: 1; width: 100%; background: var(--heritage); border-radius: 16px;
  box-shadow: 0 30px 70px -34px rgba(11,40,71,.5); padding: clamp(34px,4.5vw,60px) clamp(26px,4.5vw,68px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.testi-quote-mark { font-family: var(--font-serif); font-weight: 700; font-size: 66px; line-height: .7; color: rgba(255,255,255,.7); margin: 0 0 10px; }
.testi-stars { display: flex; gap: 5px; color: var(--star); margin: 0 0 22px; }
.testi-slide p.quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px,1.9vw,26px); line-height: 1.5; color: #fff; margin: 0 0 26px; max-width: 640px; }
.testi-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #fff; margin: 0 0 4px; }
.testi-role { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0; }

/* Contact */
.contact { background: var(--canvas); padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); }
.contact-cta { max-width: 760px; margin: 0 auto; text-align: center; }
.contact-cta h2 { font-size: clamp(20px,2.4vw,32px); margin: 0 0 20px; }
.contact-lead { font-family: var(--font-body); font-size: clamp(16px,1.35vw,19px); line-height: 1.7; color: #4a5878; margin: 0 0 30px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; justify-content: center; }

/* --- Inner-page modifiers (NOT on the homepage) --------------------------- */
/* Shorter hero band: inner pages don't need a full-viewport photo. */
.hero.hero-inner { height: 58vh; min-height: 360px; max-height: 620px; }
/* Brand gradient over the inner-page banner, top to bottom: deep heritage at the
   top so the white logo/header reads cleanly, easing off through the middle of
   the photo, then deepening again at the base so it flows into the blue stats
   bar underneath. */
.hero-inner .hero-scrim {
  background: linear-gradient(180deg,
    rgba(7,27,49,.78) 0%,
    rgba(7,27,49,.46) 26%,
    rgba(11,40,71,.22) 52%,
    rgba(11,40,71,.42) 78%,
    rgba(11,40,71,.68) 100%);
}
/* The homepage hard-codes white-space:nowrap on .intro h1 for its one short
   headline. Inner-page headlines are longer, so allow wrapping and scale up. */
.intro h1.h1-wrap { white-space: normal; font-size: clamp(26px,4vw,42px); line-height: 1.18; }
/* Body prose inside an .intro-style section on solid canvas. */
.section-canvas { background: var(--canvas); padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); }
.section-white { background: #fff; padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); }
/* When an .intro block runs straight into a following section, the two section
   paddings stack into a very large gap. These trim both ends. */
/* Symmetric padding — top and bottom must match, like every other section.
   Inter-section gaps are controlled by the FOLLOWING section's top padding
   (e.g. .camp-types.tight-top), never by squashing one side of this block. */
.intro.intro-tight { padding-top: clamp(44px, 7vw, 88px); padding-bottom: clamp(44px, 7vw, 88px); }
.intro-inner > p:not(.eyebrow):last-child { margin-bottom: 0; }
/* Symmetric, per the site-wide equal-spacing rule — just on a tighter scale
   than the default section so the tile group sits close to the intro above it. */
.camp-types.tight-top { padding-top: clamp(24px, 3.2vw, 44px); padding-bottom: clamp(24px, 3.2vw, 44px); }
.camp-types.tight-top .camp-types-head { margin-bottom: clamp(18px, 2.2vw, 30px); }
/* Closing CTA on white (never cream-on-cream against a canvas section above). */
.contact.contact-white { background: #FFFFFF; }

/* Card tiles on hub pages carry a one-line description under the title. */
.camp-card .label .sub { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(13px,1.05vw,15px); line-height: 1.45; color: rgba(255,255,255,.88); margin-top: 7px; }
@media (max-width: 680px) { .camp-card .label .sub { font-size: 12px; margin-top: 4px; } }
/* Centred container for split/photo layouts inside .section-white/.section-canvas
   (those already carry the horizontal page padding). */
.inner { max-width: 1180px; margin: 0 auto; }
/* Blue variant of the text card + gold script accent, echoing the homepage's
   heritage cards and its Stallion Script highlight. */
.feature-card.on-ink { background: var(--heritage); border-color: transparent; box-shadow: 0 26px 60px -34px rgba(11,40,71,.75); }
.feature-card.on-ink p { color: rgba(255,255,255,.9); }
.feature-card .rule { display: block; width: 46px; height: 3px; border-radius: 999px; background: var(--gold); margin-bottom: 4px; }
.script-accent {
  display: block; font-family: var(--font-script); font-style: italic;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; color: var(--gold); margin-top: 16px;
}
/* Placeholder headshot tile — brand initials until the client sends photos. */
.team-photo.initials {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--heritage) 0%, var(--heritage-deep) 100%);
  color: var(--gold); font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(38px, 4.4vw, 60px); letter-spacing: 0.06em;
}
/* Full-width heritage band with a script kicker — a feature moment for sections
   that would otherwise be a lone paragraph on canvas. */
.band-ink {
  background: linear-gradient(120deg, var(--heritage) 0%, var(--heritage-deep) 100%);
  color: #fff; padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); text-align: center;
}
.band-ink .script-kicker {
  font-family: var(--font-script); font-style: italic; line-height: 1;
  font-size: clamp(34px,4.8vw,60px); color: var(--gold);
  /* margin must stay auto — .band-ink p caps width at 760px, so a non-auto
     margin here would pin the kicker to the left instead of centring it. */
  max-width: none; margin: 0 auto 8px;
}
.band-ink h2 { color: #fff; margin: 0 0 22px; font-size: clamp(20px,2.4vw,32px); }
.band-ink p {
  font-family: var(--font-body); font-size: clamp(16px,1.35vw,18px); line-height: 1.75;
  color: rgba(255,255,255,.88); max-width: 760px; margin: 0 auto 28px;
}
.band-ink .chip-list { justify-content: center; margin: 0 0 30px; }
.band-ink .chip-list li { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); color: #fff; }

/* Leadership cards — circular initials avatar so a missing headshot reads as a
   portrait placeholder rather than a large empty block. Name/role centred,
   bio left-aligned for readability. */
.leader-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); }
@media (max-width: 940px) { .leader-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
.leader-card {
  background: #fff; border: 1px solid rgba(11,40,71,.10); border-radius: 18px;
  padding: clamp(28px, 3vw, 42px) clamp(22px, 2.6vw, 34px) clamp(30px, 3vw, 40px);
  box-shadow: 0 26px 60px -40px rgba(11,40,71,.6);
  display: flex; flex-direction: column; align-items: center;
}
.leader-avatar {
  width: clamp(96px, 9vw, 124px); height: clamp(96px, 9vw, 124px); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(140deg, var(--heritage) 0%, var(--heritage-deep) 100%);
  color: var(--gold); font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3vw, 40px); letter-spacing: 0.06em;
  box-shadow: 0 0 0 6px rgba(255,217,168,.18);
}
.leader-card h3 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; color: var(--heritage);
  margin: 20px 0 0; text-align: center;
}
.leader-card .role {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--star); margin: 8px 0 0; text-align: center;
}
.leader-card .rule { display: block; width: 40px; height: 2px; border-radius: 999px; background: var(--gold); margin: 18px 0; }
.leader-card p.bio {
  font-family: var(--font-body); font-size: 15px; line-height: 1.72; color: #4a5878; margin: 0; text-align: left;
}
/* The homepage caps help-panel copy at 520px because its panel text is short.
   Inner-page panels carry several paragraphs, so that cap left a wide empty
   column on large screens and made the panel needlessly tall. Use the standard
   prose measure instead — it fills narrow panels completely and still keeps a
   readable line length on wide ones. */
.help-panel > p:not(.eyebrow),
.help-panel .help-callout,
.help-panel .help-list { max-width: 760px; }

/* --- Inner-page process cards -------------------------------------------
   The ported homepage .process-step is a bare column with a hairline rule,
   which reads flat when it carries long copy. On inner pages give each step a
   soft glass card on the heritage band, with the number as a ringed badge.
   (The homepage keeps its own inline version — this file only styles inner
   pages, so that design is untouched.) */
.process-grid { align-items: stretch; }
.process-step {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.process-step:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.085);
  border-color: rgba(255,217,168,.45);
  box-shadow: 0 26px 54px -30px rgba(0,0,0,.55);
}
.process-step .n {
  width: 56px; height: 56px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,217,168,.55);
  background: rgba(255,217,168,.10);
  font-size: clamp(22px, 2vw, 27px); line-height: 1; color: var(--gold);
  margin-bottom: 20px;
}
.process-step h3 { margin-bottom: 14px; }
/* Gold hairline above the closing callout in a process band. */
.process-inner > .help-callout { position: relative; padding-top: clamp(26px, 3.2vw, 40px); }
.process-inner > .help-callout::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 2px; border-radius: 999px; background: var(--gold);
}

/* --- Check list -----------------------------------------------------------
   For long enumerations (camp types, destinations). Centre-aligned pill clouds
   go ragged at these lengths; a tidy multi-column list with gold ticks — the
   same check motif the homepage uses — scans far better. */
.panel-card {
  background: #fff; border: 1px solid rgba(11,40,71,.10); border-radius: 18px;
  padding: clamp(26px, 3.4vw, 46px); box-shadow: 0 26px 60px -42px rgba(11,40,71,.55);
}
.check-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px clamp(24px, 3vw, 44px);
}
@media (max-width: 1000px) { .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .check-list { grid-template-columns: 1fr; } }
.check-list li {
  display: flex; align-items: flex-start; gap: 13px;
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: #3f4d68;
}
.check-list li::before {
  content: ""; flex: none; width: 15px; height: 8px; margin-top: 6px;
  border-left: 2px solid var(--star); border-bottom: 2px solid var(--star);
  transform: rotate(-45deg); border-radius: 1px;
}

/* Light variant of the photo + panel band: white panel, dark type. */
.help-grid.on-light .help-panel { background: #FFFFFF; color: var(--ink); }
.help-grid.on-light .help-panel h2 { color: var(--heritage); }
.help-grid.on-light .help-panel .eyebrow { color: var(--heritage); }
.help-grid.on-light .help-panel > p:not(.eyebrow) { color: #3f4d68; }
.help-grid.on-light .help-panel .help-callout { color: var(--heritage); }
.help-grid.on-light .help-panel .help-list li { color: #3f4d68; }
.help-grid.on-light .help-panel .help-list .ic .box { stroke: rgba(11,40,71,.32); }
.help-grid.on-light .help-panel .help-list .ic .tick { stroke: var(--star); }
.help-grid.on-light .help-panel a { color: var(--heritage); }
.help-grid.on-light .help-panel .btn-outline.on-dark { color: var(--ink); border-color: var(--ink); }
.help-grid.on-light .help-panel .btn-outline.on-dark:hover { background: var(--ink); color: #fff; }

/* Heritage-blue content section. Prose inverts; a .panel-card inside stays
   white so it reads as a crisp card floating on the band. */
.section-ink {
  background: linear-gradient(120deg, var(--heritage) 0%, var(--heritage-deep) 100%);
  color: #fff; padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px);
}
.section-ink .prose h2, .section-ink h2 { color: #fff; }
.section-ink .prose h3 { color: var(--gold); }
.section-ink .prose p, .section-ink .prose li { color: rgba(255,255,255,.86); }
.section-ink .prose a { color: #fff; }
.section-ink .prose blockquote { color: #fff; }

/* 5-tile hub layout: 3 across, then 2 across. A 6-column track lets the top
   three span 2 each and the bottom two span 3 each, so both rows fill the
   width evenly instead of leaving a hole in the last row. */
.camp-grid.rows-3-2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.5vw, 20px); }
.camp-grid.rows-3-2 > * { grid-column: span 2; }
.camp-grid.rows-3-2 > *:nth-child(4),
.camp-grid.rows-3-2 > *:nth-child(5) { grid-column: span 3; }
@media (max-width: 1000px) {
  .camp-grid.rows-3-2 { grid-template-columns: repeat(2, 1fr); }
  .camp-grid.rows-3-2 > *,
  .camp-grid.rows-3-2 > *:nth-child(4),
  .camp-grid.rows-3-2 > *:nth-child(5) { grid-column: auto; }
  .camp-grid.rows-3-2 > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .camp-grid.rows-3-2 { grid-template-columns: 1fr; }
  .camp-grid.rows-3-2 > *:last-child { grid-column: auto; }
}

/* Compact header: shrink the burger and CTA too — at 46px and ~46px tall they
   were setting the floor on bar height, so shrinking only the logo did little. */
.nav-burger, .header-right .btn-outline { transition: width 300ms ease, height 300ms ease, padding 300ms ease, font-size 300ms ease, background 200ms, color 200ms; }
.site-header.scrolled .header-brand img { height: clamp(46px, 4.2vw, 60px); }
.site-header.scrolled .header-inner {
  padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px;
}
.site-header.scrolled .nav-burger { width: 36px; height: 36px; }
.site-header.scrolled .nav-burger span { width: 16px; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
.site-header.scrolled .header-right .btn-outline { padding: 9px 18px; font-size: 10.5px; }
@media (max-width: 700px) {
  .site-header.scrolled .header-brand img { height: clamp(42px, 10vw, 52px); }
  .site-header.scrolled .header-inner {
    padding-top: calc(7px + env(safe-area-inset-top, 0px)); padding-bottom: 7px;
  }
}

/* Definition grid — two-up glossary entries with a gold rule, for pages that
   define many terms. Keeps 15 definitions scannable instead of one long column. */
.def-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(26px,3vw,44px) clamp(28px,3.4vw,56px); }
@media (max-width: 880px) { .def-grid { grid-template-columns: 1fr; } }
.def-grid .def { border-top: 0; padding-top: 0; }
.def-grid .def::before {
  content: ""; display: block; width: 38px; height: 2px; border-radius: 999px;
  background: var(--gold); margin-bottom: 16px;
}
.def-grid .def h3 { margin-bottom: 10px; }
.section-ink .def-grid .def h3, .band-ink .def-grid .def h3 { color: #fff; }
.section-ink .def-grid .def p, .band-ink .def-grid .def p { color: rgba(255,255,255,.86); }

/* --- Photo strip -----------------------------------------------------------
   Full-bleed row of images used as a section divider. Needs no copy, so it
   adds photography to text-heavy pages. Slow zoom on hover. */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.photo-strip figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--ink); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.photo-strip figure:hover img { transform: scale(1.07); }
@media (max-width: 820px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- Definition cards ------------------------------------------------------
   Card variant of .def-grid: lifts on hover so a long glossary feels alive
   rather than static. On white sections the cards take the warm canvas so they
   don't disappear into the background. */
.def-grid.cards .def {
  background: #fff; border: 1px solid rgba(11,40,71,.10); border-radius: 16px;
  padding: clamp(22px, 2.6vw, 32px); box-shadow: 0 20px 50px -40px rgba(11,40,71,.6);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.section-white .def-grid.cards .def { background: var(--canvas); }
.def-grid.cards .def:hover {
  transform: translateY(-4px); border-color: rgba(224,167,58,.55);
  box-shadow: 0 28px 60px -34px rgba(11,40,71,.45);
}
.def-grid.cards .def::before { margin-bottom: 14px; }

/* --- Reveal on scroll ------------------------------------------------------
   Only arms once JS adds .reveal-ready to <html>, so with JS off (or if the
   observer never fires) everything stays visible. */
html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); }
html.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
html.reveal-ready [data-reveal] {
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Destination index -----------------------------------------------------
   Thirty short place names as centred pills go ragged and read as bubbly. An
   index grid with hairline rules and gold markers reads like a travel manifest:
   even columns, one scan-line, no ragged edges. */
.dest-index {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 38px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.dest-index li {
  display: flex; align-items: baseline; gap: 11px;
  padding: 15px 2px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(13.5px, 1.05vw, 16px); letter-spacing: .055em;
  text-transform: uppercase; line-height: 1.25; color: #fff;
}
.dest-index li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 999px;
  background: var(--gold); transform: translateY(-3px);
}
@media (max-width: 1080px) { .dest-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .dest-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .dest-index { grid-template-columns: 1fr; } }

/* Portrait media in a split: fill the column rather than sitting as a short
   landscape card centred in a much taller text column. */
.split.media-tall { align-items: stretch; }
.split.media-tall .split-media { aspect-ratio: auto; height: 100%; min-height: clamp(360px, 46vw, 620px); }
.split.media-tall .split-media img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .split.media-tall .split-media { min-height: clamp(300px, 62vw, 460px); }
}

/* Links inside a heritage feature band need to invert — the base link colour is
   heritage blue, which is invisible on the band. */
.band-ink a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.band-ink a:hover { color: var(--gold); }

/* --- FAQ layout ------------------------------------------------------------
   Sticky photo beside the question list so a long accordion isn't a bare
   column of text. The photo drops above the list on narrow screens. */
.faq-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.faq-aside { position: sticky; top: 108px; }
.faq-aside figure { margin: 0; border-radius: 4px; overflow: hidden; background: var(--heritage-deep); aspect-ratio: 4/5; }
.faq-aside img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .faq-aside figure { aspect-ratio: 16/9; }
}
@media (min-width: 901px) and (max-height: 700px) { .faq-aside { position: static; } }

/* --- FAQ: numbered cards + an "ask us" panel -------------------------------
   Bare hairline rows read as a spreadsheet at 21 items. Cards on warm canvas
   with gold numerals give the list rhythm; the open one lifts to white with a
   gold edge so your place is obvious. */
.faq-list { counter-reset: faqn; }
.faq-list details.faq {
  background: var(--canvas); border: 1px solid rgba(11,40,71,.10);
  border-radius: 12px; margin-bottom: 12px; padding: 0 clamp(16px,1.8vw,24px);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.faq-list details.faq:hover { border-color: rgba(224,167,58,.45); transform: translateX(2px); }
.faq-list details.faq[open] {
  background: #fff; border-color: rgba(224,167,58,.55);
  box-shadow: 0 22px 50px -34px rgba(11,40,71,.5);
}
.faq-list details.faq summary {
  position: relative; padding: 19px 42px 19px 52px; border-bottom: 0;
  font-size: clamp(16px,1.5vw,19.5px); line-height: 1.35;
}
.faq-list details.faq summary::before {
  counter-increment: faqn; content: counter(faqn, decimal-leading-zero);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-serif); font-weight: 600; font-size: 15px;
  letter-spacing: .06em; color: var(--star);
}
.faq-list details.faq summary::after { right: 2px; }
.faq-list details.faq .faq-body { padding: 0 0 20px 52px; }
@media (max-width: 560px) {
  .faq-list details.faq summary { padding-left: 42px; }
  .faq-list details.faq .faq-body { padding-left: 42px; }
}

/* Sticky "ask us" panel in the FAQ aside. */
.faq-ask {
  background: linear-gradient(120deg, var(--heritage) 0%, var(--heritage-deep) 100%);
  color: #fff; border-radius: 14px; padding: clamp(22px,2.4vw,30px); margin-top: 16px;
}
.faq-ask .script-kicker { font-size: clamp(26px,2.6vw,36px); margin: 0 0 8px; }
.faq-ask p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); margin: 0 0 16px; }
.faq-ask .faq-ask-links { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.faq-ask a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.faq-ask a:hover { color: var(--gold); }
.faq-ask .btn { width: 100%; }

/* --- Contact layout --------------------------------------------------------
   Details column beside the real form, so the enquiry doesn't hide in a modal. */
.contact-layout { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(30px,4vw,68px); align-items: start; }
@media (max-width: 940px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-detail + .contact-detail { margin-top: clamp(26px,3vw,38px); padding-top: clamp(26px,3vw,38px); border-top: 1px solid rgba(11,40,71,.12); }
.contact-detail h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: clamp(18px,1.8vw,23px); color: var(--heritage); margin: 0 0 12px; }
.contact-detail p { font-family: var(--font-body); font-size: clamp(15px,1.2vw,17px); line-height: 1.72; color: #3f4d68; margin: 0 0 14px; }
.contact-detail p:last-child { margin-bottom: 0; }
.contact-lines { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.contact-lines a { font-family: var(--font-serif); font-weight: 600; font-size: clamp(17px,1.6vw,21px); letter-spacing: .03em; color: var(--heritage); }
.contact-lines a:hover { color: var(--star); }
.news-signup { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* The <input> sits inside a .field wrapper (a COLUMN flex container), not
   directly inside .news-signup (a ROW flex container) — so flex-basis here
   would size along .field's main axis (height), not .news-signup's (width),
   inflating the input to match its own basis. Size it with width instead,
   and put the row-axis flex-basis on the .field wrapper itself (set inline
   in the markup: flex:1 1 220px). */
.news-signup input {
  width: 100%; border: 1px solid rgba(11,40,71,.22); border-radius: 6px; padding: 12px 14px;
  font-size: 15px; color: var(--ink); background: #FFFDF8;
}
.news-signup input:focus { outline: none; border-color: var(--heritage); box-shadow: 0 0 0 3px rgba(55,90,135,.18); }
.news-signup .btn { flex: none; }

/* ==========================================================================
   REDESIGN PHASE — shared inner-page components (Phase 1 of REDESIGN-PLAN.md)
   Built once here, consumed per page. Nothing above this line changed.

   Client basis:
   · #49 "LOVE the layout of the hompage… stay with this theme througout"
     → same tokens, same type, same card language. Not a rebrand.
   · #60 "all the pages are starting to feel so similar… mix up the design
     formats" → each page gets ONE distinct signature composition below.
   · #63 "this text feels small" / stacy "Make more important text please",
     #82 "wording needs to pop more" → the lede + pull-quote scale here.
   · #57 camp-pole Pinterest ref (stacy "love this") → .trail + waymarkers.
   · SMS "blah and block like… we want it alive" → marquee, carousel, tilt.
   All decorative SVG in this file is wordless; copy is never generated.
   ========================================================================== */

/* --- Type scale-up (#63, #82). Words unchanged — size and colour only. --- */
.pull-lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.1em;
}
.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.35;
  color: var(--gold);
  padding: 0;
  margin: clamp(24px,3vw,38px) 0;
  max-width: 46ch;
}
.section-white .pull-quote,
.section-canvas .pull-quote { color: var(--heritage); }

/* --- Filmstrip marquee. Slow horizontal photo band ("alive", #59). ------- */
.photo-marquee { overflow: hidden; padding: clamp(8px,1vw,14px) 0; }
.photo-marquee-track {
  display: flex; gap: clamp(12px,1.4vw,20px); width: max-content;
  animation: marquee-scroll 48s linear infinite;
}
.photo-marquee:hover .photo-marquee-track,
.photo-marquee:focus-within .photo-marquee-track { animation-play-state: paused; }
.photo-marquee img {
  height: clamp(150px,17vw,232px); width: auto; border-radius: 5px;
  object-fit: cover; flex: 0 0 auto; filter: saturate(.98);
}
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Quote band. Static 1–2 testimonials; no carousel on inner pages. ---- */
.quote-band { background: var(--heritage); color: #fff; }
.quote-band .inner {
  display: grid; gap: clamp(26px,3.4vw,52px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.quote-band blockquote { margin: 0; }
.quote-band .q-mark {
  font-family: var(--font-serif); font-size: 54px; line-height: .7;
  color: var(--gold); display: block; margin-bottom: 10px;
}
.quote-band p.q-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(17px,1.55vw,21px); line-height: 1.55; color: #fff; margin: 0 0 16px;
}
.quote-band .q-name { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing:.04em; margin:0; color:#fff; }
.quote-band .q-role { font-family: var(--font-body); font-size: 11px; letter-spacing:.18em; text-transform: uppercase; color: var(--gold); margin: 3px 0 0; }

/* --- Postcard. Camp-mail card: rule border + wordless stamp corner. ------ */
.postcard-grid {
  display: grid; gap: clamp(18px,2.2vw,30px);
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  /* Hug the copy instead of stretching to the tallest card — pinned notes of
     uneven length read as authentic; a half-empty stretched card does not. */
  align-items: start;
}
.postcard {
  position: relative; background: var(--card-bg); border: 1px solid rgba(11,40,71,.18);
  border-radius: 5px; padding: clamp(26px,3vw,40px);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.postcard:nth-child(odd) { transform: rotate(-.7deg); }
.postcard:nth-child(even) { transform: rotate(.7deg); }
.postcard:hover { transform: rotate(0deg); box-shadow: 0 14px 34px rgba(11,40,71,.10); }
.postcard::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 26px;
  border: 1.5px dashed rgba(11,40,71,.28); border-radius: 2px;
}
.postcard h3 { font-family: var(--font-serif); font-size: clamp(19px,1.7vw,24px); color: var(--ink); margin: 0 0 .55em; letter-spacing:.02em; }
.postcard p { font-family: var(--font-body); font-size: clamp(15px,1.2vw,17px); line-height:1.7; color:#3f4d68; margin:0; }

/* --- Badge ring. Merit-patch frame for leadership portraits/monograms. --- */
.leader-row { display: grid; gap: clamp(24px,3.4vw,54px); align-items: center; grid-template-columns: minmax(180px,300px) 1fr; margin-bottom: clamp(34px,4.4vw,64px); }
.leader-row:nth-child(even) { grid-template-columns: 1fr minmax(180px,300px); }
.leader-row:nth-child(even) .badge-ring { order: 2; }
.badge-ring {
  position: relative; aspect-ratio: 1; border-radius: 50%;
  background: var(--heritage); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--gold);
}
.badge-ring img { width: 100%; height: 100%; object-fit: cover; }
.badge-ring .monogram { font-family: var(--font-serif); font-size: clamp(40px,5vw,72px); color: var(--gold); letter-spacing: .04em; }
.leader-row h3 { font-family: var(--font-serif); font-size: clamp(23px,2.2vw,32px); color: var(--ink); margin: 0 0 .1em; }
.leader-row .role { font-family: var(--font-body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--star); margin: 0 0 1em; }
.leader-row p { font-family: var(--font-body); font-size: clamp(15px,1.2vw,17px); line-height:1.75; color:#3f4d68; margin:0; }

/* --- Offset photo collage. Two overlapping photos + gold offset frame. --- */
.collage-duo { position: relative; padding: 0 clamp(14px,2vw,30px) clamp(30px,4vw,56px) 0; }
.collage-duo img { display:block; border-radius: 5px; object-fit: cover; }
.collage-duo .c-back { width: 78%; aspect-ratio: 4/3; }
.collage-duo .c-front {
  position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 1;
  border: 5px solid var(--canvas); box-shadow: 0 12px 30px rgba(11,40,71,.16);
}
.collage-duo::before {
  content: ""; position: absolute; right: clamp(14px,2vw,30px); bottom: clamp(30px,4vw,56px);
  width: 52%; aspect-ratio: 1; border: 2px solid var(--gold);
  transform: translate(14px, 14px); border-radius: 5px; pointer-events: none;
}

/* --- Camp trail. The client-loved camp-pole walkthrough (#57). ----------- */
.trail { position: relative; max-width: 1000px; margin: 0 auto; }
/* The trail itself: a dashed rule, like a route drawn on a camp map. A
   border beats an SVG path here — it always spans the full column height
   and needs no JS. */
.trail-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 0;
  transform: translateX(-50%); border-left: 2px dashed var(--gold); opacity: .75;
}
.trail-step { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; gap: clamp(14px,2vw,28px); margin-bottom: clamp(34px,4.5vw,66px); }
.trail-card { background: var(--card-bg); border-radius: 6px; padding: clamp(22px,2.6vw,34px); box-shadow: 0 10px 30px rgba(11,40,71,.08); }
/* .trail-line is the first child of .trail, so the first STEP is child 2.
   Even steps therefore sit left, odd steps right. */
.trail-step:nth-child(even) .trail-card { grid-column: 1; }
.trail-step:nth-child(odd) .trail-card { grid-column: 3; }
.trail-marker { grid-column: 2; display: grid; place-items: center; }
.trail-marker svg { width: 64px; height: 64px; }
.trail-card h3 { font-family: var(--font-serif); font-size: clamp(20px,1.9vw,27px); color: var(--ink); margin: 0 0 .5em; }
.trail-card p { font-family: var(--font-body); font-size: clamp(15px,1.2vw,17px); line-height: 1.75; color:#3f4d68; margin: 0; }

/* --- Editorial longform. Our Story: no photos, typography carries it. ---- */
.longform { max-width: 680px; margin: 0 auto; }
.longform p { font-family: var(--font-body); font-size: clamp(17px,1.35vw,19px); line-height: 1.85; color: #3f4d68; margin: 0 0 1.35em; }
.longform > p:first-of-type::first-letter {
  float: left; font-family: var(--font-serif); font-size: 4.6em; line-height: .78;
  padding: .06em .1em 0 0; color: var(--heritage);
}
.longform .year-marker {
  display: block; font-family: var(--font-serif); font-size: clamp(30px,3.6vw,52px);
  color: var(--gold); letter-spacing: .06em; margin: 0 0 .1em;
}
.pennant { display: block; width: 100%; height: 34px; margin: clamp(30px,4vw,52px) 0; }

/* --- Field-guide term rows + popovers (Camps 7-12: #94–#103). ----------- */
.term-rows { list-style: none; margin: 0; padding: 0; }
.term-row { border-bottom: 1px solid rgba(11,40,71,.14); }
.term-toggle {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: none; border: 0; cursor: pointer; padding: clamp(14px,1.6vw,20px) 4px;
  font-family: var(--font-serif); font-size: clamp(18px,1.7vw,24px); color: var(--ink);
  letter-spacing: .02em; transition: color 200ms;
}
.term-toggle:hover { color: var(--heritage); }
.term-toggle .tick { color: var(--star); flex: 0 0 auto; }
.term-toggle .plus { margin-left: auto; font-family: var(--font-body); font-size: 20px; color: var(--star); transition: transform 250ms ease; }
.term-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
.term-card {
  /* No accent bar, no fill, no radius. A tinted card with a gold rule down one
     side is the single most templated component on the web; the definition is
     set as a column of type instead and anchored by space, not chrome. */
  padding: clamp(4px,.6vw,8px) 0 clamp(18px,2vw,26px) clamp(26px,3vw,38px);
  margin: 0 0 clamp(10px,1.2vw,16px);
}
.term-card h4 { font-family: var(--font-serif); font-size: clamp(16px,1.35vw,19px); color: var(--heritage); margin: 1.2em 0 .4em; }
.term-card h4:first-child { margin-top: 0; }
.term-card p { font-family: var(--font-body); font-size: clamp(15px,1.2vw,17px); line-height: 1.75; color: #3f4d68; margin: 0 0 .9em; }
.term-card p:last-child { margin-bottom: 0; }
.section-ink .term-row { border-bottom-color: rgba(255,255,255,.18); }
.section-ink .term-toggle { color: #fff; }
.section-ink .term-toggle:hover { color: var(--gold); }
.section-ink .term-card { background: rgba(255,255,255,.06); }
.section-ink .term-card h4 { color: var(--gold); }
.section-ink .term-card p { color: rgba(255,255,255,.9); }
/* No CSS needed for the no-JS case: only JS ever sets [hidden], so with
   scripting off every definition stays on the page. */

/* --- Motion + responsive guards ---------------------------------------- */
@media (max-width: 880px) {
  .leader-row, .leader-row:nth-child(even) { grid-template-columns: 1fr; }
  .leader-row:nth-child(even) .badge-ring { order: 0; }
  .badge-ring { max-width: 220px; }
  .trail-step { grid-template-columns: 52px 1fr; }
  .trail-step:nth-child(odd) .trail-card,
  .trail-step:nth-child(even) .trail-card { grid-column: 2; }
  .trail-marker { grid-column: 1; }
  .trail-marker svg { width: 44px; height: 44px; }
  .trail-line { left: 26px; }
  .postcard, .postcard:nth-child(odd), .postcard:nth-child(even) { transform: none; }
  .collage-duo .c-back { width: 100%; }
  .collage-duo .c-front { width: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-marquee-track { animation: none; transform: none; }
  .postcard, .postcard:nth-child(odd), .postcard:nth-child(even) { transform: none; }
}

/* #34 "can you make this section similar to the section below where the
   states are?" — the specialty-camp list adopts the .ed-states pill
   treatment (mist tile, gold dot, tracked serif caps, lift on hover)
   rather than the plain ruled rows it had. Same markup, same 15 items. */
.index-panel {
  list-style: none; margin: clamp(18px, 2.2vw, 26px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(9px, 1.1vw, 13px) clamp(9px, 1.2vw, 16px);
}
.index-panel li {
  display: flex; align-items: center; gap: 11px;
  background: var(--mist); border-radius: 10px; padding: 12px 15px;
  border-top: 2px solid rgba(11, 40, 71, .10);
  font-family: var(--font-serif); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.2; font-size: clamp(13px, 1.15vw, 15.5px);
  color: var(--heritage);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.index-panel li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px;
  background: var(--star); box-shadow: 0 0 0 4px rgba(224, 167, 58, .22);
}
.index-panel li:hover {
  transform: translateY(-2px); border-top-color: var(--star);
  box-shadow: 0 14px 28px -20px rgba(11, 40, 71, .55);
}
/* The trail sits inside the heritage .process band, so its cards read as
   cream plates on blue and the copy keeps its normal ink colour. */
.process .trail-card { background: var(--canvas); }
.process .trail-card h3 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; font-size: clamp(15px,1.7vw,19px);
  color: var(--ink); margin: 0 0 12px;
}
.process .trail-card p { color: #3f4d68; }
.process .trail-marker svg { display: block; }

/* --- Hero carousel -------------------------------------------------------
   Multi-slide version of the inner-page photo band (#50 Why Work, #59 Why
   Camp?). Deliberately reuses the homepage's .hero-slides/.hero-slide names
   so the two never drift apart; the only additions are the dots, the arrows
   and the slow ken-burns drift, all of which activate ONLY when JS has
   flagged the strip as a carousel. With no JS the first slide simply stays
   put, exactly as a single-photo hero does today. --- */
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.17); } }
.hero-slides.is-carousel .hero-slide { animation: kenburns 26s ease-in-out infinite alternate; }
.hero-slides.is-carousel .hero-slide:nth-child(2) { animation-delay: -6.5s; }
.hero-slides.is-carousel .hero-slide:nth-child(3) { animation-delay: -13s; }
.hero-slides.is-carousel .hero-slide:nth-child(4) { animation-delay: -19.5s; }
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: clamp(16px,2vw,26px);
  display: flex; justify-content: center; gap: 11px; z-index: 5;
}
.hero-dots button {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
  background: rgba(255,255,255,.45); cursor: pointer; transition: background 300ms, width 300ms;
}
.hero-dots button.active { background: #fff; width: 24px; }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(11,40,71,.34); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, opacity 200ms; opacity: 0;
}
.hero:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: rgba(11,40,71,.62); }
.hero-arrow.prev { left: clamp(10px,2vw,26px); }
.hero-arrow.next { right: clamp(10px,2vw,26px); }
@media (max-width: 680px) { .hero-arrow { display: none; } }   /* swipe instead */
@media (prefers-reduced-motion: reduce) {
  .hero-slides.is-carousel .hero-slide { animation: none !important; }
}

/* The collage was drawn for a padded content column. Dropped into a full-bleed
   .help-media cell it runs to the section edge and the gold offset frame falls
   off the end, so give it room and centre it when it sits there. */
.help-grid .help-media .collage-duo {
  max-width: 640px; margin: 0 auto;
  padding: clamp(16px,2vw,28px) clamp(28px,3vw,44px) clamp(38px,4.4vw,62px) clamp(16px,2vw,28px);
}
/* .help-media img forces width/height 100%, which flattens the collage's own
   proportions — restore them explicitly for the two collage photos. */
.help-grid .help-media .collage-duo .c-back  { width: 78%; height: auto; aspect-ratio: 4 / 3; }
.help-grid .help-media .collage-duo .c-front { width: 46%; height: auto; aspect-ratio: 1; }
.help-grid .help-media .collage-duo::before  { width: 46%; }

/* --- All About Camp hub: living cards -----------------------------------
   §7.7 asks the hub for motion without adding any new chrome or words. The
   shared .camp-card already snaps to scale(1.06) in .6s; here it becomes a
   slow Ken-Burns drift instead, so the grid feels alive rather than clicky.
   Scoped to this one section so no other page's cards change behaviour. --- */
@media (prefers-reduced-motion: no-preference) {
  .living-cards .camp-card img {
    transition: transform 4s cubic-bezier(.22,.61,.36,1), filter .6s ease;
  }
  .living-cards .camp-card:hover img,
  .living-cards .camp-card:focus-visible img {
    transform: scale(1.11) translate3d(-1.4%, -1.2%, 0);
  }
}
.living-cards .camp-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The filmstrip sits on canvas between the cards and the CTA; a hairline above
   and below keeps it reading as a band rather than a stray row of photos. */
.photo-marquee {
  background: var(--canvas);
  border-top: 1px solid rgba(11,40,71,.10);
  border-bottom: 1px solid rgba(11,40,71,.10);
  margin-top: clamp(34px,4.4vw,64px);
}

/* --- Camps 13-17: ghost age numerals ------------------------------------
   §7.10's masthead beat for #111 ("layout needs to be more exciting"). The
   digits are the age range already printed in the eyebrow above the H1, set
   oversized in a 4% ink tint behind the intro — existing content styled, not
   new copy, and aria-hidden so it is never read twice. Hidden below 680px
   where it would crowd the headline. --- */
.intro.ghost-age { position: relative; overflow: hidden; }
.ghost-age .intro-inner { position: relative; z-index: 1; }
.ghost-numerals {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-serif); font-weight: 700; line-height: 1;
  /* Sized so the headline crosses the digits' lower third rather than their
     middle — at full size the H1 masked the only legible part of them. */
  font-size: clamp(150px, 19vw, 300px); letter-spacing: -.02em;
  color: rgba(31, 45, 68, .04); pointer-events: none; user-select: none;
  white-space: nowrap; z-index: 0;
}
@media (max-width: 680px) { .ghost-numerals { display: none; } }

/* The teen page's collage sits in a .split-media cell, which (like .help-media)
   stretches its images — restore the collage's own proportions there too. */
.split-media .collage-duo { padding: 0 clamp(16px,2.2vw,32px) clamp(34px,4vw,58px) 0; }
.split-media .collage-duo .c-back  { width: 78%; height: auto; aspect-ratio: 4 / 3; }
.split-media .collage-duo .c-front { width: 50%; height: auto; aspect-ratio: 1; }
.split-media .collage-duo::before  { width: 50%; }

/* .intro p:not(.eyebrow) (line ~467) is more specific than the bare .pull-lede
   class, so the lede treatment was silently doing nothing inside every intro
   it was applied to. Match that specificity so it actually lands. */
.intro p.pull-lede {
  font-size: clamp(19px, 1.75vw, 24px);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 22px;
}

/* --- Trailhead v2 — Camps 7-12 -------------------------------------------
   Implementation of "Trailhead v2.dc.html" from the Claude Design project.
   Where Trailhead ran the whole guide on navy behind an accordion, v2 turns
   the page over: only the masthead and the closing are navy, the four
   sections are white, and every term is open on the page. The terms hang off
   a dashed trail with a dot each, and the layout of each one differs, so no
   two stations share a silhouette.

   The design introduces one colour the brand tokens did not have: a bronze
   for rules, icons and small caps on the white ground. --star (#E0A73A) is
   the gold that works on navy; on white it is too light to read as type or
   to hold a 1px rule, which is why the design carries its own darker value.
   It comes from the design file, not from me. --- */
:root { --bronze: #8A5F14; --bronze-tint: #FDF0DC; }

.th2-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* Masthead ---------------------------------------------------------------- */
.th2-mast {
  position: relative; overflow: hidden;
  background: var(--heritage); color: var(--canvas);
  /* The site header is fixed and runs 105-139px tall across breakpoints, so
     the masthead has to start below it or the hero plate slides under the CTA. */
  padding: clamp(150px,12vw,176px) 0 clamp(60px,7.4vw,84px);
}
.th2-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 40% at 12% 4%, rgba(224,167,58,.16), transparent 60%),
    radial-gradient(60% 45% at 92% 40%, rgba(216,240,244,.09), transparent 62%);
}
.th2-mast-grid { position: relative; display: grid; gap: clamp(34px,5vw,70px); align-items: center; }
.th2-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(24px,3.4vw,44px);
  font-family: var(--font-body); font-size: clamp(13px,1.25vw,16px); letter-spacing: .24em;
  text-transform: uppercase; font-weight: 600; color: var(--mist);
}
.th2-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.th2-h1 {
  margin: 0 0 clamp(22px,3vw,36px); font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(50px,7.2vw,96px); line-height: .88; letter-spacing: -.02em; color: var(--canvas);
}
/* Sits upright. The design rocks it -4deg; the client does not want it
   tilted, so only the baseline nudge survives. */
.th2-101 {
  font-family: var(--font-script); font-style: italic; color: var(--gold);
  font-size: 1.24em; line-height: .6; display: inline-block; transform: translateY(.13em);
}
.th2-lede {
  margin: 0; max-width: 34em; font-family: var(--font-body);
  font-size: clamp(16px,1.4vw,18.5px); line-height: 1.66; color: var(--canvas); opacity: .9;
}
.th2-mast-media { position: relative; }
.th2-flame {
  position: absolute; right: clamp(-14px,-1.4vw,-26px); bottom: -26px; color: var(--gold);
  background: var(--heritage); padding: 20px; width: clamp(64px,6.6vw,80px); height: auto;
}

/* Frames ------------------------------------------------------------------ */
.th2-frame { padding: clamp(8px,1vw,13px); border: 1px solid rgba(11,40,71,.42); }
.th2-frame img { display: block; width: 100%; height: clamp(220px,22vw,280px); object-fit: cover; }
.th2-mast .th2-frame { border-color: rgba(255,217,168,.4); }
.th2-mast .th2-frame img { height: clamp(260px,28vw,400px); }
.th2-frame-tall img { height: clamp(280px,27vw,330px); }
.th2-frame-wide { border-color: rgba(11,40,71,.3); }
.th2-frame-wide img { height: clamp(190px,23vw,310px); }
.th2-frame-states img { height: clamp(300px,34vw,460px); }
/* The specialty plate is the client's vertical photo, not the design's
   landscape one, so it needs the height to read as a portrait beside a
   short paragraph rather than a stub. */
.th2-frame-portrait img { height: clamp(320px,28vw,380px); }

/* In this guide ----------------------------------------------------------- */
.th2-guide { background: var(--mist); padding: clamp(28px,3.6vw,38px) 0 clamp(30px,3.8vw,40px); }
.th2-guide-h {
  display: flex; align-items: center; gap: 20px; margin: 0 0 18px;
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze); white-space: nowrap;
}
.th2-guide-rule { flex: 1; height: 1px; background: rgba(11,40,71,.28); }
.th2-toc { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(11,40,71,.28); }
.th2-toc-card {
  display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--ink);
  padding: clamp(20px,2.4vw,24px) clamp(0px,2.8vw,28px);
  border-bottom: 1px solid rgba(11,40,71,.22);
  transition: background 200ms ease;
}
.th2-toc-card svg { color: var(--bronze); flex: none; }
.th2-toc-card .th2-toc-star { color: var(--star); }
.th2-toc-name {
  font-family: var(--font-serif); font-size: clamp(21px,2.2vw,26px); line-height: 1.14; color: var(--ink);
}
/* The count and an arrow share the card's bottom line. The cards are links
   into the page and nothing else said so — an arrow carries that on all four
   without repeating "Learn more" four times down the row. */
.th2-toc-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.th2-toc-count {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze);
}
.th2-toc-arrow {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bronze); border-radius: 50%; color: var(--bronze); box-sizing: border-box;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), background 220ms ease, color 220ms ease, border-color 220ms ease;
}
/* .th2-toc-card svg (below) colours every svg in the card directly, including
   this one, so the arrow's own colour never inherits white from its hovered
   parent — it has to be told directly or it stays bronze-on-bronze and
   disappears into the filled circle on hover. */
.th2-toc-arrow svg { width: 16px; height: 16px; transition: color 220ms ease; }
.th2-toc-card:hover .th2-toc-arrow { transform: translateX(5px); background: var(--bronze); color: #FFFFFF; }
.th2-toc-card:hover .th2-toc-arrow svg { color: #FFFFFF; }
.th2-toc-card:hover { background: var(--bronze-tint); }
.th2-toc-card:focus-visible { outline: 2px solid var(--star); outline-offset: -3px; }

/* Sections ---------------------------------------------------------------- */
.th2-sec {
  background: #FFFFFF; border-top: 1px solid rgba(11,40,71,.4);
  /* html already carries scroll-padding-top:90px; this adds to it, so keep it
     small or an anchored section lands a third of the way down the screen. */
  padding: 0 0 clamp(40px,5vw,64px); scroll-margin-top: clamp(58px,5vw,72px);
}
.th2-sec-head {
  display: flex; align-items: center; gap: clamp(16px,2.4vw,28px);
  padding: clamp(32px,4vw,48px) 0 clamp(20px,2.6vw,28px);
}
.th2-ring {
  width: clamp(54px,6vw,74px); height: clamp(54px,6vw,74px); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border: 2px solid var(--bronze); color: var(--bronze);
}
.th2-ring svg { width: 40%; height: auto; color: var(--star); }
.th2-h2 {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px,4.2vw,52px); line-height: 1; letter-spacing: -.015em; color: var(--ink);
}
.th2-sec-rule { flex: 1; height: 2px; background: var(--heritage); }

/* The trail --------------------------------------------------------------- */
.th2-trail {
  position: relative; margin-left: clamp(8px,2vw,26px);
  padding-left: clamp(24px,5.4vw,74px); border-left: 2px dashed rgba(138,95,20,.72);
}
.th2-term { position: relative; padding: 0 0 clamp(20px,2.4vw,28px); scroll-margin-top: clamp(58px,5vw,72px); }
.th2-term + .th2-term { padding-top: clamp(20px,2.4vw,28px); border-top: 1px solid rgba(11,40,71,.22); }
.th2-dot {
  position: absolute; left: calc(-1 * clamp(24px,5.4vw,74px) - 9px); top: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--star); border: 2px solid var(--bronze);
}
.th2-term + .th2-term .th2-dot { top: clamp(44px,4.6vw,58px); }
.th2-h3 {
  margin: 0 0 clamp(14px,1.8vw,20px); font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(24px,3vw,36px); line-height: 1.04; color: var(--ink);
}

/* Term bodies ------------------------------------------------------------- */
/* #214-#217, #219, #220: one pattern for every term, taken from Neurodiverse
   Camp, the one Stacy liked - photo first under the heading, copy level with
   the middle of the photo, landscape frames, so no column trails off into
   empty space. */
.th2-split { display: grid; gap: clamp(22px,3.4vw,44px); align-items: center; }
.th2-split > .th2-frame { order: -1; }
.th2-split .th2-frame img, .th2-split .th2-frame-tall img, .th2-split .th2-frame-portrait img { height: clamp(200px,19vw,260px); }
/* #336: below the two-column split the photo spans the whole column, and a 200px
   band crops heads; give it more height there so faces stay in frame. */
@media (max-width: 999px) {
  .th2-split .th2-frame img, .th2-split .th2-frame-tall img, .th2-split .th2-frame-portrait img { height: clamp(240px,50vw,380px); }
}
.th2-split-mid { align-items: center; }
.th2-body p {
  margin: 0 0 clamp(16px,2vw,24px); font-family: var(--font-body);
  font-size: clamp(15.5px,1.3vw,16.5px); line-height: 1.68; color: rgba(11,40,71,.9);
}
.th2-body p:last-child { margin-bottom: 0; }
.th2-measure {
  margin: 0; max-width: 66ch; font-family: var(--font-body);
  font-size: clamp(15.5px,1.3vw,16.5px); line-height: 1.68; color: rgba(11,40,71,.9);
}
.th2-say {
  font-family: var(--font-serif); font-size: clamp(19px,2.2vw,25px); line-height: 1.34;
  max-width: 40ch; color: var(--ink);
}
.th2-body p.th2-say { margin-bottom: 0; }
/* A rule beside the sub-definition, not a tinted card — the fill, radius and
   shadow are what made the old accent boxes read as generic. */
/* No bar beside it — the italic serif heading and the space above are what
   set a sub-definition apart. */
.th2-sub { padding: 0; margin-top: clamp(20px,2.6vw,30px); }
.th2-sub h4 {
  margin: 0 0 10px; font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: clamp(21px,2.4vw,28px); color: var(--ink); letter-spacing: 0; text-transform: none;
}
.th2-sub p {
  margin: 0; font-family: var(--font-body); font-size: clamp(15.5px,1.32vw,16.5px);
  line-height: 1.68; color: rgba(11,40,71,.9);
}
.th2-subs { display: grid; gap: clamp(26px,4vw,52px); }
.th2-term > .th2-frame-wide { margin-bottom: clamp(22px,2.6vw,34px); }
.th2-term > .th2-frame-wide + .th2-measure { margin-top: 0; }

/* Specialty index --------------------------------------------------------- */
.th2-index {
  list-style: none; margin: clamp(26px,3.2vw,40px) 0 0; padding: 0;
  columns: 1; column-gap: clamp(24px,3.4vw,44px);
  border-top: 1px solid rgba(11,40,71,.28);
}
.th2-index li {
  display: flex; align-items: center; gap: 14px; break-inside: avoid;
  padding: 13px 0; min-height: 48px; border-bottom: 1px solid rgba(11,40,71,.2);
  font-family: var(--font-body); font-size: clamp(15px,1.3vw,16px); line-height: 1.55; color: var(--ink);
}
.th2-index li::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--bronze); }
.th2-index-panel { margin-top: clamp(22px,3vw,34px); background: var(--heritage); color: var(--canvas); padding: clamp(20px,3vw,36px) clamp(20px,3.2vw,40px) clamp(18px,2.6vw,30px); }
.th2-index-panel .th2-index { margin: 0; border-top-color: rgba(255,217,168,.3); }
.th2-index-panel .th2-index li { color: var(--canvas); border-bottom-color: rgba(255,217,168,.18); }
.th2-index-panel .th2-index li::before { background: var(--star); }
.th2-index-more { margin: clamp(14px,1.8vw,18px) 0 0; font-family: var(--font-serif); font-size: clamp(19px,2vw,24px); color: var(--gold); }

/* Where ------------------------------------------------------------------- */
.th2-trail-plain { border-left-style: dashed; }
.th2-where-lede { margin: 0 0 clamp(26px,3.2vw,40px); max-width: 38ch; font-size: clamp(22px,2.7vw,31px); line-height: 1.32; }
.th2-where { display: grid; gap: clamp(28px,4vw,56px); align-items: start; }
.th2-states {
  list-style: none; margin: 0; padding: 0;
  display: block; columns: 2; column-gap: clamp(14px,2.6vw,36px);
  border-top: 1px solid rgba(11,40,71,.32);
}
.th2-states li {
  display: flex; align-items: center; gap: clamp(9px,1.4vw,14px); padding: 14px 0; min-height: 50px; break-inside: avoid;
  border-bottom: 1px solid rgba(11,40,71,.22);
  font-family: var(--font-serif); font-size: clamp(16px,2vw,25px); line-height: 1.16; color: var(--ink);
}
.th2-states li::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--bronze);
}

/* #289: states pick up the "Where our teens go" hover, in mist blue. */
.th2-states li { transition: background 260ms ease; }
.th2-states li:hover { background: var(--mist); }

/* #287: the specialty list is its own navy band between the camp types and
   "Where", styled like the 13-17 "Where our teens go" list (.tn-dest). */
.th2-spec {
  position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas);
  padding: clamp(56px,8vw,96px) 0 clamp(60px,8.4vw,100px); scroll-margin-top: clamp(58px,5vw,72px);
}
.th2-spec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(54% 40% at 92% 6%, rgba(216,240,244,.1), transparent 62%),
    radial-gradient(50% 38% at 4% 94%, rgba(224,167,58,.15), transparent 64%);
}
.th2-spec .th2-inner { position: relative; }

/* #286: on phones and tablets a bar of camp types pins under the header once
   the guide cards have scrolled away, so any term is one tap from anywhere.
   site.js (initJump) sets --jump-top, shows it and marks the term on screen. */
.th2-jump {
  position: fixed; left: 0; right: 0; top: var(--jump-top, 64px); z-index: 45;
  background: #FFFFFF; border-bottom: 1px solid rgba(11,40,71,.18);
  box-shadow: 0 10px 24px -18px rgba(7,27,49,.5);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform 260ms ease, opacity 260ms ease, visibility 0s linear 260ms;
}
.th2-jump.is-on { transform: none; opacity: 1; visibility: visible; transition: transform 260ms ease, opacity 260ms ease; }
.th2-jump-track { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
.th2-jump-track::-webkit-scrollbar { display: none; }
.th2-jump a {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(11,40,71,.26); border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.th2-jump a[aria-current] { background: var(--heritage); border-color: var(--heritage); color: var(--canvas); }
.th2-jump a:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }

/* Closing ----------------------------------------------------------------- */
.th2-close {
  background: var(--heritage); color: var(--canvas);
  padding: clamp(40px,5vw,56px) 0 clamp(44px,5.4vw,60px);
}
.th2-close-grid { display: grid; gap: clamp(34px,4.4vw,60px); align-items: center; }
.th2-close-rule { display: block; width: 70px; height: 1px; background: var(--star); margin-bottom: clamp(24px,3vw,36px); }
.th2-close-h {
  margin: 0 0 clamp(22px,2.8vw,32px); font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(34px,5.6vw,70px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--canvas); max-width: 17em;
}
.th2-cta {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  background: var(--gold); color: var(--heritage); text-decoration: none;
  padding: 20px clamp(28px,3.4vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 200ms ease;
}
/* Hover lifts to warm white, not --star. #E0A73A is the gold this sheet uses
   for hairline rules and small marks; as a full button fill it reads as a
   yellow that is not the brand's. Applies to every design-page CTA. */
.th2-cta:hover { background: var(--canvas); color: var(--heritage); }
.th2-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 700px) {
  .th2-toc { grid-template-columns: repeat(3, 1fr); }
  .th2-toc-card { min-height: 132px; border-right: 1px solid rgba(11,40,71,.22); border-bottom: 0; }
  .th2-toc-card:last-child { border-right: 0; }
  .th2-index { columns: 2; }
  .th2-cta { display: inline-flex; }
}
@media (min-width: 1000px) {
  .th2-mast-grid { grid-template-columns: 1.18fr .82fr; }
  .th2-close-grid { grid-template-columns: 1.3fr .7fr; }
  .th2-jump { display: none; }
  .th2-spec .tn-dest { grid-template-columns: repeat(3, 1fr); }
  .th2-split { grid-template-columns: .9fr 1.1fr; }
  .th2-subs { grid-template-columns: 1fr 1fr; }
  .th2-index { columns: 3; }
  .th2-where { grid-template-columns: 1.02fr .98fr; }
}
@media (prefers-reduced-motion: reduce) {
  .th2-toc-card, .th2-cta, .th2-toc-arrow, .th2-toc-arrow svg, .th2-jump, .th2-jump.is-on, .th2-states li { transition: none; }
  .th2-toc-card:hover .th2-toc-arrow { transform: none; }
}

/* Entrances --------------------------------------------------------------
   Rides the site's existing [data-reveal] observer (site.js adds .is-in and an
   inline transition-delay that staggers every fourth element), so nothing new
   runs on scroll and the 2.5s safety net still applies. What follows only
   changes WHICH way each kind of element enters, and adds a wave inside the
   two long lists so nineteen rows don't all land at once.

   Every rule here sits under html.reveal-ready, which site.js only sets when
   the observer is actually available — no JS, nothing hidden. The
   reduced-motion block at the end switches all of it off. */

/* The masthead plate and the guide cards come up; the eyebrow slides in from
   the rule it hangs off, which reads as the line drawing itself. */
html.reveal-ready .th2-eyebrow[data-reveal] { transform: translateX(-14px); }
html.reveal-ready .th2-mast-media[data-reveal] { transform: translateY(22px) scale(.985); }
html.reveal-ready .th2-toc-card[data-reveal] { transform: translateY(14px); }

/* A section head is three parts and they shouldn't arrive as one slab: the
   ring scales up, the rule draws out from the heading. */
html.reveal-ready .th2-sec-head[data-reveal] { opacity: 1; transform: none; }
html.reveal-ready .th2-sec-head[data-reveal] .th2-ring {
  opacity: 0; transform: scale(.72);
  transition: opacity 520ms cubic-bezier(.22,.61,.36,1), transform 520ms cubic-bezier(.22,.61,.36,1);
}
html.reveal-ready .th2-sec-head[data-reveal] .th2-h2 {
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1) 90ms, transform 620ms cubic-bezier(.22,.61,.36,1) 90ms;
}
html.reveal-ready .th2-sec-head[data-reveal] .th2-sec-rule {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 720ms cubic-bezier(.22,.61,.36,1) 220ms;
}
html.reveal-ready .th2-sec-head[data-reveal].is-in .th2-ring { opacity: 1; transform: none; }
html.reveal-ready .th2-sec-head[data-reveal].is-in .th2-h2 { opacity: 1; transform: none; }
html.reveal-ready .th2-sec-head[data-reveal].is-in .th2-sec-rule { transform: scaleX(1); }

/* The dot is the term's anchor on the trail, so it lands after the term does. */
html.reveal-ready .th2-term[data-reveal] .th2-dot {
  opacity: 0; transform: scale(.4);
  transition: opacity 420ms ease 260ms, transform 420ms cubic-bezier(.34,1.56,.64,1) 260ms;
}
html.reveal-ready .th2-term[data-reveal].is-in .th2-dot { opacity: 1; transform: none; }

/* Nineteen specialties and seventeen states: let them ripple in four at a
   time rather than appear as one block of ruled rows. */
html.reveal-ready .th2-index-panel[data-reveal] .th2-index li,
html.reveal-ready .th2-index[data-reveal],
html.reveal-ready .th2-states[data-reveal] { opacity: 1; transform: none; }
html.reveal-ready .th2-index[data-reveal] li,
html.reveal-ready .th2-states[data-reveal] li {
  opacity: 0; transform: translateY(9px);
  transition: opacity 500ms cubic-bezier(.22,.61,.36,1), transform 500ms cubic-bezier(.22,.61,.36,1), background 260ms ease;
}
html.reveal-ready .th2-index[data-reveal].is-in li,
html.reveal-ready .th2-states[data-reveal].is-in li { opacity: 1; transform: none; }
html.reveal-ready .th2-index[data-reveal].is-in li:nth-child(4n+2),
html.reveal-ready .th2-states[data-reveal].is-in li:nth-child(4n+2) { transition-delay: 70ms; }
html.reveal-ready .th2-index[data-reveal].is-in li:nth-child(4n+3),
html.reveal-ready .th2-states[data-reveal].is-in li:nth-child(4n+3) { transition-delay: 140ms; }
html.reveal-ready .th2-index[data-reveal].is-in li:nth-child(4n+4),
html.reveal-ready .th2-states[data-reveal].is-in li:nth-child(4n+4) { transition-delay: 210ms; }

/* Closing: the rule draws, then the heading and button come up under it. */
html.reveal-ready .th2-close-rule[data-reveal] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 640ms cubic-bezier(.22,.61,.36,1);
}
html.reveal-ready .th2-close-rule[data-reveal].is-in { opacity: 1; transform: scaleX(1); }
html.reveal-ready .th2-cta[data-reveal] { transform: translateY(14px); }
html.reveal-ready .cs-seal[data-reveal] { transform: translateY(16px) scale(.96); }

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .th2-sec-head[data-reveal] .th2-ring,
  html.reveal-ready .th2-sec-head[data-reveal] .th2-h2,
  html.reveal-ready .th2-sec-head[data-reveal] .th2-sec-rule,
  html.reveal-ready .th2-term[data-reveal] .th2-dot,
  html.reveal-ready .th2-index[data-reveal] li,
  html.reveal-ready .th2-states[data-reveal] li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.reveal-ready .th2-close-rule[data-reveal] { transform: none !important; transition: none !important; }
}

/* These five only redirect the entrance; they tie with the shared
   [data-reveal].is-in reset on specificity and, sitting later in the file,
   would win it and strand the element at its offset forever. Land them. */
html.reveal-ready .th2-eyebrow[data-reveal].is-in,
html.reveal-ready .th2-mast-media[data-reveal].is-in,
html.reveal-ready .th2-toc-card[data-reveal].is-in,
html.reveal-ready .th2-cta[data-reveal].is-in,
html.reveal-ready .cs-seal[data-reveal].is-in { transform: none; }

/* On a phone the heading wraps and the rule beside it collapses to a stub. */
@media (max-width: 699px) {
  .th2-sec-rule { display: none; }
}

/* --- Teens 13-17 ---------------------------------------------------------
   Implementation of "Teens 13-17.dc.html" from the Claude Design project.
   Navy and white sections alternate; a sliding photo strip opens it, a
   two-tab panel carries the post-camp copy, and a 32-name grid holds the
   destinations. Brand tokens throughout — --bronze (#8A5F14) is the one the
   design added for type and rules on the white ground, already in :root. --- */

.tn-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.tn-h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.025em; color: var(--ink); }

/* Masthead ---------------------------------------------------------------- */
.tn-mast {
  position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas);
  padding: clamp(150px,13vw,180px) 0 clamp(60px,8vw,104px);
}
.tn-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(62% 46% at 6% 4%, rgba(224,167,58,.18), transparent 64%),
    radial-gradient(52% 40% at 96% 88%, rgba(216,240,244,.09), transparent 62%);
}
.tn-mast-grid { position: relative; display: grid; gap: clamp(30px,5vw,88px); align-items: end; }
/* #234: the seal heads the right-hand column rather than floating in the
   corner, so the mast reads as two tidy columns sharing one baseline. */
.tn-mast-side { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px,2.6vw,30px); }
/* Two columns, one frame: the seal tops out level with the eyebrow and the
   intro bottoms out level with the headline. */
@media (min-width: 1000px) {
  .tn-mast-grid { align-items: stretch; }
  .tn-mast-side { justify-content: space-between; }
  .tn-mast-copy { display: flex; flex-direction: column; justify-content: flex-end; }
}
.tn-mast-seal { display: block; width: clamp(76px,8vw,112px); height: auto; }
.tn-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(24px,3vw,40px);
  font-family: var(--font-body); font-size: clamp(12px,3.2vw,14px); letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; color: var(--gold);
}
/* The long eyebrow (#179) stays on one line from tablet up: tighter tracking, no wrap. */
@media (min-width: 640px) {
  /* Brought up a size and into gold so the tagline reads, not just decorates. */
  .tn-eyebrow { white-space: nowrap; letter-spacing: .14em; font-size: clamp(12px,1.08vw,15.5px); }
}
.tn-h1 {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(44px,6.4vw,88px); line-height: .98; letter-spacing: -.025em;
  color: var(--canvas); max-width: 15ch;
}
.tn-script {
  font-family: var(--font-script); font-style: italic; color: var(--gold);
  font-size: 1.34em; line-height: .64; display: inline-block; transform: translateY(.1em);
}
.tn-mast-lede {
  position: relative; margin: 0; max-width: 46ch; font-family: var(--font-body);
  font-size: clamp(16px,1.5vw,19px); line-height: 1.72; color: var(--canvas); opacity: .9;
}

/* Photo strip ------------------------------------------------------------- */
.tn-open { background: #FFFFFF; padding: 0; }
.tn-strip { position: relative; overflow: hidden; }
.tn-strip-track { display: flex; will-change: transform; }
.tn-slide { flex: 0 0 82%; padding-right: 2px; overflow: hidden; }
.tn-slide img {
  display: block; width: 100%; height: clamp(240px,32vw,372px); object-fit: cover;
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1);
}
.tn-slide img:hover { transform: scale(1.055); }

/* #169: left-aligned, two columns from 760px so the opener is a band, not a column. */
.tn-open-body { display: grid; gap: clamp(18px,2.4vw,32px) clamp(28px,5vw,72px); align-items: start; padding-top: clamp(44px,5.6vw,72px); }
.tn-open-mark { display: block; width: clamp(56px,6vw,76px); height: auto; grid-column: 1 / -1; }
@media (min-width: 760px) { .tn-open-body { grid-template-columns: 1.05fr .95fr; } .tn-open-sub { margin-top: 6px; } }
.tn-open-lead {
  margin: 0; font-family: var(--font-serif); font-size: clamp(24px,3vw,32px); line-height: 1.28;
  max-width: 26ch; color: var(--ink);
}
.tn-open-sub {
  margin: clamp(24px,3vw,34px) 0 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px);
  line-height: 1.72; color: rgba(11,40,71,.9); max-width: 62ch;
}

/* Navy pull-quote band ---------------------------------------------------- */
.tn-band {
  position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas);
  padding: clamp(72px,10vw,104px) 0 clamp(80px,11vw,112px);
}
.tn-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 44% at 4% 8%, rgba(224,167,58,.16), transparent 64%);
}
.tn-band .tn-inner { position: relative; }
.tn-band-rule { display: block; width: 56px; height: 2px; background: var(--star); margin-bottom: clamp(26px,3.4vw,36px); }
.tn-band .tn-h2 { margin: 0 0 clamp(36px,5vw,52px); font-size: clamp(42px,6.4vw,80px); line-height: .98; color: var(--canvas); max-width: 19ch; }
.tn-band-glyph {
  position: absolute; right: clamp(20px,8vw,120px); top: clamp(72px,10vw,104px);
  color: rgba(255,217,168,.42); pointer-events: none;
}
/* Under 760px the heading wraps to two lines across the full width, so the
   cabin tucks into the corner above it instead of sitting on the words. */
@media (max-width: 759px) {
  .tn-band-glyph { top: 22px; right: 20px; width: 64px; height: 54px; }
}
.tn-band-quote {
  margin: 0; font-family: var(--font-serif); font-size: clamp(22px,3vw,32px); line-height: 1.32;
  color: var(--gold); border-top: 1px solid rgba(255,217,168,.4); padding-top: clamp(26px,3.4vw,38px);
}

/* Life after camp — tabs -------------------------------------------------- */
.tn-next { background: #FFFFFF; padding: clamp(72px,10vw,112px) 0 clamp(80px,11vw,120px); }
.tn-next-head { display: grid; gap: clamp(24px,4vw,96px); align-items: start; margin-bottom: clamp(48px,7vw,80px); }
.tn-kicker {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,30px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze);
}
.tn-kicker-rule { width: 32px; height: 1px; background: var(--bronze); flex: none; }
.tn-kicker-gold { color: var(--gold); }
.tn-kicker-gold .tn-kicker-rule { background: var(--star); }
.tn-next-head h2 { margin: 0; font-size: clamp(40px,7vw,84px); line-height: .96; }
.tn-next-intro { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,20px); line-height: 1.72; color: rgba(11,40,71,.9); padding-top: 8px; }

.tn-tabs { display: flex; align-items: stretch; gap: clamp(24px,4vw,48px); border-bottom: 1px solid rgba(11,40,71,.28); margin-bottom: clamp(40px,5vw,64px); flex-wrap: wrap; }
.tn-tabs { gap: 12px; border-bottom: 0; padding-bottom: 0; }
/* #180: the two options read as buttons now — a bordered pill, navy when selected — instead of two small labels on a rule. */
.tn-tab {
  position: relative; text-align: left; padding: 15px clamp(20px,2.4vw,30px); min-height: 48px; background: #FFFFFF;
  border: 1px solid rgba(11,40,71,.4); border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: clamp(12px,1.1vw,13.5px); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink); transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.tn-tab:hover { border-color: var(--heritage); color: var(--heritage); }
.tn-tab[aria-selected="true"] { background: var(--heritage); border-color: var(--heritage); color: var(--canvas); }
.tn-tab-underline { display: none; }
.tn-tab:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

.tn-panel { display: grid; gap: clamp(28px,5vw,96px); align-items: start; }
.tn-panel[hidden] { display: none; }
.tn-panel-media { overflow: hidden; }
.tn-panel-media img { display: block; width: 100%; height: clamp(280px,34vw,452px); object-fit: cover; transition: transform 1200ms cubic-bezier(.2,.7,.2,1); }
.tn-panel-media img:hover { transform: scale(1.05); }
.tn-panel-h { margin: 0 0 clamp(18px,2.4vw,26px); font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(30px,4vw,44px); line-height: 1.06; color: var(--ink); }
.tn-panel-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.74; color: rgba(11,40,71,.9); max-width: 56ch; }
/* #284/#285: Academic and Enrichment and Teen Tours moved here from the 7-12 page. */
.tn-more {
  display: grid; gap: clamp(44px,5vw,64px) clamp(28px,4vw,56px);
  margin-top: clamp(56px,8vw,96px); padding-top: clamp(48px,6vw,72px); border-top: 1px solid rgba(11,40,71,.22);
}
.tn-more-card .tn-panel-media img { height: clamp(240px,26vw,360px); }
.tn-more-h { margin: clamp(22px,2.6vw,30px) 0 clamp(12px,1.6vw,16px); font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(26px,3vw,36px); line-height: 1.08; color: var(--ink); }
.tn-more-card p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18px); line-height: 1.74; color: rgba(11,40,71,.9); }
.tn-anim-in { animation: tnFade 560ms cubic-bezier(.2,.7,.2,1) both; }

/* Around the world -------------------------------------------------------- */
.tn-world {
  position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas);
  padding: clamp(72px,11vw,112px) 0 clamp(80px,12vw,120px);
}
.tn-world::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(54% 40% at 92% 6%, rgba(216,240,244,.1), transparent 62%),
    radial-gradient(50% 38% at 4% 94%, rgba(224,167,58,.15), transparent 64%);
}
.tn-world .tn-inner { position: relative; }
.tn-world-head { display: grid; gap: clamp(24px,4vw,96px); align-items: start; margin-bottom: clamp(56px,8vw,88px); }
.tn-world-head h2 { margin: 0; font-size: clamp(38px,5.4vw,68px); line-height: 1; max-width: 16ch; color: var(--canvas); }
.tn-world-intro { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.74; color: var(--canvas); opacity: .9; padding-top: 8px; }
.tn-dest-head { display: flex; align-items: center; gap: clamp(16px,2.4vw,28px); margin-bottom: clamp(24px,3vw,34px); }
.tn-dest-h { margin: 0; flex: none; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px,3.6vw,42px); line-height: 1; color: var(--gold); }
.tn-dest-rule { flex: 1; height: 1px; background: rgba(255,217,168,.34); }
.tn-star { flex: none; color: var(--star); }
.tn-choose-star { display: block; margin-bottom: clamp(18px,2.4vw,26px); }
.tn-compass-needle { transform-origin: 38px 38px; animation: tnSpin 30s linear infinite; }
@keyframes tnSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tn-dest {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(16px,3.4vw,52px);
  border-top: 1px solid rgba(255,217,168,.34);
}
.tn-dest li {
  display: flex; align-items: center; gap: clamp(10px,1.6vw,16px); padding: 15px 0; min-height: 56px;
  border-bottom: 1px solid rgba(255,217,168,.2);
  font-family: var(--font-serif); font-size: clamp(17px,2vw,24px); line-height: 1.2; color: var(--canvas);
  transition: background 260ms ease;
}
.tn-dest li::before { content: ""; width: 12px; height: 1px; background: rgba(255,217,168,.7); flex: none; }
.tn-dest li:hover { background: rgba(255,217,168,.09); }

/* How to choose ----------------------------------------------------------- */
.tn-choose { background: #FFFFFF; padding: clamp(72px,10vw,112px) 0; }
.tn-choose-grid { display: grid; gap: clamp(28px,4vw,96px); align-items: start; }
.tn-choose-glyph { color: var(--bronze); margin-bottom: clamp(22px,3vw,30px); display: block; }
.tn-choose-h { margin: 0; font-size: clamp(34px,5vw,64px); line-height: 1; letter-spacing: -.02em; max-width: 17ch; }
.tn-choose-intro { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,20px); line-height: 1.72; color: rgba(11,40,71,.9); padding-top: 8px; }

/* Testimonial ------------------------------------------------------------- */
.tn-quote { background: #FFFFFF; border-top: 1px solid rgba(11,40,71,.26); padding: clamp(72px,10vw,104px) 0 clamp(80px,11vw,112px); }
.tn-quote-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tn-quote-mark { display: block; font-family: var(--font-serif); font-size: clamp(90px,13vw,132px); line-height: .44; color: var(--star); margin-bottom: 14px; }
.tn-quote-text { margin: 0 0 clamp(30px,4vw,42px); font-family: var(--font-serif); font-size: clamp(28px,4.2vw,42px); line-height: 1.26; max-width: 34ch; color: var(--ink); }
.tn-quote-line { display: block; width: 40px; height: 1px; background: var(--bronze); margin-bottom: 22px; }
.tn-quote-name { font-family: var(--font-body); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.tn-quote-role { margin-top: 8px; font-family: var(--font-body); font-size: 15px; letter-spacing: .04em; color: rgba(11,40,71,.72); }

/* Closing ----------------------------------------------------------------- */
.tn-close {
  position: relative; overflow: hidden; background: var(--canvas); color: var(--ink);
  padding: clamp(48px,6vw,72px) 0 clamp(52px,6.4vw,80px);
}
.tn-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 0%, rgba(224,167,58,.16), transparent 66%);
}
/* #171: a band, not a billboard — mark, one line of copy, the button. */
.tn-close-inner { position: relative; display: grid; gap: clamp(20px,3vw,40px); align-items: center; }
.tn-close-mark { display: block; width: clamp(64px,7vw,96px); height: auto; opacity: .9; }
.tn-close-copy { display: grid; gap: clamp(18px,2.4vw,28px); align-items: center; }
@media (min-width: 760px) { .tn-close-inner { grid-template-columns: auto 1fr; } .tn-close-copy { grid-template-columns: 1fr auto; } }
.tn-flame { transform-origin: 50px 70px; animation: tnFlicker 3.6s ease-in-out infinite; }
@keyframes tnFlicker { 0%,100% { transform: scale(1); opacity: .9; } 40% { transform: scale(1.05,1.08); opacity: 1; } 72% { transform: scale(.97,.95); opacity: .86; } }
.tn-close-h { margin: 0 0 clamp(20px,2.6vw,26px); font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px,6vw,76px); line-height: 1.02; letter-spacing: -.025em; color: var(--canvas); max-width: 20ch; }
.tn-close-lead { margin: 0; font-family: var(--font-serif); font-size: clamp(22px,2.6vw,32px); line-height: 1.3; color: var(--ink); max-width: 26ch; }
.tn-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--heritage); color: var(--canvas);
  text-decoration: none; padding: 20px clamp(30px,3.6vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.tn-cta:hover { background: var(--bronze); color: var(--canvas); gap: 20px; }
.tn-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 700px) {
  .tn-slide { flex: 0 0 42%; }
  .tn-dest { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .tn-mast-grid { grid-template-columns: 1.12fr .88fr; }
  .tn-slide { flex: 0 0 33.3333%; }
  .tn-band-grid { display: grid; grid-template-columns: .34fr .66fr; }
  .tn-next-head { grid-template-columns: 1fr 1fr; }
  .tn-panel { grid-template-columns: 1fr 1fr; }
  .tn-more { grid-template-columns: 1fr 1fr; }
  .tn-world-head { grid-template-columns: 1fr 1fr; }
  .tn-dest { grid-template-columns: repeat(4, 1fr); }
  .tn-choose-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-slide img, .tn-panel-media img, .tn-tab-underline, .tn-cta { transition: none; }
  .tn-compass-needle, .tn-flame { animation: none; }
}

/* --- Why Camp / Benefits of Camp -----------------------------------------
   Implementation of "Why Camp.dc.html" from the Claude Design project.
   A split masthead, the research in two columns under a serif statement, a
   navy "Summertime: Unplugged" run whose three no-screen lines strike
   themselves through as they arrive, the resilience pair on offset plates,
   Courtney's quote on canvas, and a navy close under a lit lantern.

   Every heading here names its own font-family and 400 weight. The sheet has
   no bare h1-h6 rule, so a heading that sets only a size renders in DM Sans
   700 — which is exactly what went wrong on the teens page. --- */

.wc-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.wc-h1, .wc-h2, .wc-close-h, .wc-say, .wc-no, .wc-quote-text, .wc-quote-mark {
  font-family: var(--font-serif); font-weight: 400;
}

/* Masthead ---------------------------------------------------------------- */
.wc-mast { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); display: grid; }
.wc-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(58% 48% at 2% 6%, rgba(224,167,58,.2), transparent 64%),
    radial-gradient(46% 40% at 62% 96%, rgba(216,240,244,.08), transparent 62%);
}
.wc-mast-copy { position: relative; z-index: 2; padding: clamp(150px,13vw,180px) 0 clamp(56px,8vw,108px); }
.wc-mast-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.wc-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(24px,3vw,40px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 600; color: var(--mist);
}
.wc-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.wc-h1 {
  margin: 0 0 clamp(26px,3.4vw,40px); font-size: clamp(42px,6vw,80px); line-height: 1;
  letter-spacing: -.025em; color: var(--canvas); max-width: 15ch;
}
.wc-script {
  font-family: var(--font-script); font-style: italic; color: var(--gold);
  font-size: 1.34em; line-height: .62; display: inline-block; transform: translateY(.08em);
}
.wc-mast-lede { border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,2.8vw,34px); max-width: 54ch; }
.wc-mast-lede p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.74; color: var(--canvas); opacity: .9; }
/* #248: the "Just being at camp" copy now lives here, on the blue. */
.wc-mast-lede { display: flex; flex-direction: column; gap: clamp(14px,1.8vw,18px); }
.wc-mast-lede p.wc-mast-say { font-family: var(--font-serif); font-size: clamp(22px,2.6vw,32px); line-height: 1.16; color: var(--gold); opacity: 1; }
/* #247: the seal sits on the left under the copy rather than floating. */
.wc-mast-lede a { color: var(--gold); text-decoration-color: rgba(255,217,168,.5); text-underline-offset: 3px; }
.wc-mast-seal { margin-top: clamp(24px,3vw,36px); }
.wc-mast-seal img { width: clamp(88px,9vw,120px); }
.wc-mast-media { position: relative; overflow: hidden; min-height: clamp(280px,40vw,640px); }
.wc-mast-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms cubic-bezier(.2,.7,.2,1); }
.wc-mast-media img:hover { transform: scale(1.04); }
/* The design canvas has no site header; ours is fixed and transparent at the
   top of the page, and on this split the right half is a bright photograph —
   the centred logo and the CTA land on sky. Deepen the top of the plate, the
   same scrim the inner-page heroes already use. */
.wc-mast-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,40,71,.74) 0%, rgba(11,40,71,.34) 13%, rgba(11,40,71,0) 30%);
}

/* Frames ------------------------------------------------------------------ */
.wc-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(11,40,71,.42); }
.wc-frame-crop { overflow: hidden; }
.wc-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.wc-frame img:hover { transform: scale(1.045); }

/* The science ------------------------------------------------------------- */
.wc-science { background: #FFFFFF; padding: clamp(48px,6vw,72px) 0; }
/* The line only runs 24ch, so the mark takes the space beside it. */
.wc-science-head { display: grid; gap: clamp(26px,4vw,56px); align-items: center; margin-bottom: clamp(34px,5vw,56px); }
.wc-science-head .wc-say { margin-bottom: 0; }
.wc-say {
  margin: 0 0 clamp(34px,5vw,56px); font-size: clamp(28px,4.2vw,48px); line-height: 1.16;
  letter-spacing: -.015em; max-width: 24ch; color: var(--ink); text-wrap: balance;
}
.wc-cols { display: grid; gap: clamp(24px,4vw,96px); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(28px,3.4vw,40px); }
.wc-cols p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 60ch; }
.wc-science-foot { margin-top: 0; }
.wc-science-foot .wc-frame { margin: 0 auto; }
.wc-science-foot .wc-frame img { height: clamp(260px,36vw,496px); }

/* Summertime: Unplugged --------------------------------------------------- */
.wc-unplug { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(72px,10vw,104px) 0 clamp(80px,11vw,116px); }
.wc-unplug::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 42% at 96% 8%, rgba(216,240,244,.1), transparent 62%),
    radial-gradient(50% 40% at 2% 92%, rgba(224,167,58,.16), transparent 64%);
}
.wc-unplug .wc-inner { position: relative; }
.wc-unplug-grid { display: grid; gap: clamp(28px,4vw,96px); align-items: start; }
.wc-kicker {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,30px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em;
  text-transform: uppercase; font-weight: 700; color: var(--gold);
}
.wc-kicker-rule { width: 32px; height: 1px; background: var(--star); flex: none; }
.wc-h2 { margin: 0; letter-spacing: -.025em; color: var(--canvas); }
.wc-unplug-h { font-size: clamp(38px,5.8vw,76px); line-height: .98; max-width: 11ch; }
.wc-gold { color: var(--gold); }
.wc-unplug-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,26px); padding-top: 10px; }
.wc-unplug-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.76; color: var(--canvas); opacity: .92; max-width: 62ch; }

.wc-nos {
  position: relative; list-style: none; margin: clamp(40px,7vw,84px) 0 0; padding: 0;
  display: grid; grid-template-columns: auto auto auto; border-top: 1px solid rgba(255,217,168,.34);
}
/* Three across at every width. On a phone the icon stacks over the word,
   because "No endless scroll" beside an icon will not fit a third of 390px. */
.wc-nos li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 0 10px; }
.wc-nos li + li { border-left: 1px solid rgba(255,217,168,.34); padding-left: clamp(12px,3.2vw,18px); }
.wc-nos svg { flex: none; color: rgba(255,217,168,.8); width: clamp(18px,4vw,28px); height: auto; }
/* The strike is an absolutely-positioned bar, so it can only cross a single
   line — let the label wrap and it lands between the two, reading as an
   underline. Keep every label on one line and let the columns size to their
   own content instead. */
.wc-no { position: relative; font-size: clamp(13px,3.4vw,34px); line-height: 1.15; color: var(--canvas); white-space: nowrap; }
.wc-strike { position: absolute; left: -4px; right: -4px; top: 52%; height: 1px; background: var(--star); transform: scaleX(0); transform-origin: left center; }
html.reveal-ready .wc-nos li.is-in .wc-strike { animation: wcStrike 620ms cubic-bezier(.2,.7,.2,1) 260ms both; }
@keyframes wcStrike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Building resilient kids -------------------------------------------------- */
.wc-resilient { background: #FFFFFF; padding: clamp(76px,10vw,116px) 0 clamp(80px,11vw,120px); }
.wc-res-grid { display: grid; gap: clamp(28px,4vw,96px); align-items: start; }
.wc-squiggle { color: var(--star); display: block; margin-bottom: clamp(18px,2.4vw,26px); width: 22px; height: auto; }
.wc-res-h { font-size: clamp(38px,6vw,80px); line-height: .98; max-width: 12ch; color: var(--ink); }
.wc-res-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,26px); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(26px,3.2vw,38px); }
.wc-res-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 62ch; }
/* The field photo sits under "Building resilient kids", where the seal was,
   beside the paragraphs it illustrates. */
.wc-res-shot { margin-top: clamp(22px,3vw,34px); }
.wc-res-shot img { height: clamp(200px,17vw,250px); }
.wc-res-plates { display: grid; gap: clamp(24px,3vw,36px); align-items: start; margin-top: clamp(48px,7vw,88px); }
.wc-plate-a { height: clamp(260px,34vw,470px); }
.wc-plate-b { height: clamp(240px,28vw,386px); }

/* Testimonial ------------------------------------------------------------- */
.wc-quote { background: var(--canvas); padding: clamp(72px,10vw,104px) 0 clamp(80px,11vw,112px); }
.wc-quote-grid { display: grid; gap: clamp(30px,5vw,88px); align-items: center; }
.wc-quote-img { height: clamp(300px,40vw,540px); }
.wc-quote-mark { display: block; font-size: clamp(84px,11vw,120px); line-height: .42; color: var(--star); margin-bottom: 18px; }
.wc-quote-text { margin: 0 0 clamp(28px,3.6vw,38px); font-size: clamp(22px,2.8vw,31px); line-height: 1.34; max-width: 44ch; color: var(--ink); }
.wc-quote-line { display: block; width: 40px; height: 1px; background: var(--bronze); margin-bottom: 20px; }
.wc-quote-name { display: block; font-family: var(--font-body); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.wc-quote-role { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; letter-spacing: .04em; color: rgba(11,40,71,.72); }

/* Closing ----------------------------------------------------------------- */
.wc-close { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(76px,11vw,110px) 0 clamp(84px,12vw,122px); }
.wc-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 46% at 84% 4%, rgba(224,167,58,.18), transparent 66%);
}
.wc-close-grid { position: relative; display: grid; gap: clamp(34px,5vw,96px); align-items: center; }
.wc-close-h { margin: 0 0 clamp(20px,2.6vw,26px); font-size: clamp(36px,5.6vw,74px); line-height: 1.02; letter-spacing: -.025em; color: var(--canvas); max-width: 16ch; }
.wc-close-lead { margin: 0 0 clamp(30px,4vw,46px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.7; color: var(--canvas); opacity: .9; max-width: 46ch; }
.wc-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: var(--heritage);
  text-decoration: none; padding: 20px clamp(30px,3.6vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.wc-cta:hover { background: var(--canvas); color: var(--heritage); gap: 20px; }
.wc-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.wc-glow { transform-origin: 48px 66px; animation: wcGlow 3.4s ease-in-out infinite; }
@keyframes wcGlow { 0%,100% { opacity: .62; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06,1.09); } }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 700px) {
  .wc-nos { grid-template-columns: repeat(3, 1fr); }
  .wc-nos li { flex-direction: row; align-items: center; gap: clamp(18px,2.4vw,28px); padding: clamp(26px,3.4vw,44px) 0 8px; }
  .wc-nos li + li { padding-left: clamp(24px,3vw,40px); }
  .wc-res-plates { grid-template-columns: 1.18fr .82fr; }
  .wc-frame-drop { margin-top: clamp(30px,6vw,84px); }
}
@media (min-width: 1000px) {
  .wc-mast { grid-template-columns: 1.04fr .96fr; align-items: stretch; }
  .wc-mast-inner { max-width: none; margin: 0; padding: 0 clamp(40px,6.4vw,92px) 0 clamp(20px,4vw,56px); }
  .wc-mast-copy { display: flex; align-items: center; }
  .wc-science-head { grid-template-columns: .62fr .38fr; }
  .wc-cols { grid-template-columns: 1fr 1fr; }
  .wc-unplug-grid { grid-template-columns: .44fr .56fr; }
  .wc-res-grid { grid-template-columns: .46fr .54fr; }
  .wc-quote-grid { grid-template-columns: .44fr .56fr; }
  .wc-close-grid { grid-template-columns: 1.06fr .94fr; }
}
@media (min-width: 1381px) {
  /* Past the container's 1320px the masthead copy would drift away from the
     header's content edge; pin it to the same gutter the rest of the page uses. */
  .wc-mast-inner { padding-left: calc((100vw - 1320px) / 2 + 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-mast-media img, .wc-frame img, .wc-cta { transition: none; }
  .wc-glow { animation: none; }
  html.reveal-ready .wc-nos li.is-in .wc-strike { animation: none; transform: scaleX(1); }
}

/* --- Your Camper's First Summer -------------------------------------------
   Implementation of "First Summer.dc.html" from the Claude Design project.
   A full-bleed arrival plate that pans slowly under the title, the four
   parent worries stepped down a staircase, the age answer beside its photo,
   communication on navy with the questions pulled out on a gold rule, the
   photo note on canvas, homesickness as a split, two book cards, and a navy
   close under a camp sign whose flag waves.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.fs-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.fs-h1, .fs-h2, .fs-close-h, .fs-say, .fs-letter p, .fs-asks li, .fs-tip h3, .fs-book h3, .fs-home-close, .fs-asked p {
  font-family: var(--font-serif); font-weight: 400;
}

/* Masthead ---------------------------------------------------------------- */
.fs-mast { position: relative; height: clamp(460px,64vw,760px); overflow: hidden; background: var(--heritage); }
.fs-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 38%; transform: scale(1.06); animation: fsPan 24s ease-out forwards;
}
@keyframes fsPan { 0% { transform: scale(1.06) translateY(0); } 100% { transform: scale(1.13) translateY(-1.5%); } }
.fs-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.62) 0%, rgba(7,27,49,.28) 34%, rgba(7,27,49,.86) 82%, var(--heritage) 100%);
}
.fs-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(34px,6vw,78px); color: var(--canvas); }
.fs-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,30px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.fs-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.fs-h1 {
  margin: 0; font-size: clamp(42px,7.4vw,104px); line-height: .92; letter-spacing: -.03em;
  color: var(--canvas); max-width: 20ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.fs-script {
  font-family: var(--font-script); font-style: italic; color: var(--gold);
  font-size: 1.27em; line-height: .6; display: inline-block; transform: translateY(.09em);
}

/* The worries ------------------------------------------------------------- */
/* The letter — the page's opening copy set as a note from Camp Specialists
   rather than a wall of text (Pinfeed #62). Same words, new presentation. */
.fs-letter-sec { position: relative; display: flow-root; background: var(--canvas); padding: 1px 0 clamp(72px,10vw,118px); }
.fs-letter-wrap { max-width: 868px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
/* Lifts the sheet up over the masthead's foot so it reads as laid on top. */
.fs-letter-lift { height: 0; margin-bottom: clamp(-41px,-3vw,-16px); }
.fs-letter {
  position: relative; background: #FFFCF6;
  background-image: radial-gradient(120% 80% at 12% 0%, rgba(255,217,168,.22), transparent 58%),
                    radial-gradient(90% 70% at 100% 100%, rgba(216,240,244,.28), transparent 62%);
  border: 1px solid rgba(11,40,71,.13);
  box-shadow: 0 40px 90px -44px rgba(7,27,49,.55), 0 2px 0 rgba(11,40,71,.05);
  padding: clamp(40px,7vw,96px) clamp(24px,7vw,104px) clamp(40px,6vw,84px);
}
.fs-letter-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: clamp(32px,4.6vw,64px); }
.fs-letter-orn span:nth-child(odd) { display: block; width: clamp(48px,8vw,104px); height: 1px; background: var(--star); }
.fs-letter-orn span:nth-child(2) { display: block; width: 7px; height: 7px; background: var(--star); transform: rotate(45deg); flex: none; }
.fs-letter p { margin: 0; color: var(--ink); }
.fs-letter p + p { margin-top: clamp(22px,3vw,40px); }
.fs-letter-open { font-size: clamp(20px,2.4vw,29px); line-height: 1.62; letter-spacing: -.004em; max-width: 49ch; }
.fs-letter-body { font-size: clamp(18px,2.1vw,26px); line-height: 1.68; color: rgba(11,40,71,.9); max-width: 52ch; }
.fs-letter-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: clamp(38px,5vw,66px); }
.fs-letter-sign span:first-child { display: block; width: 88px; height: 1px; background: var(--star); }
.fs-letter-mark { font-family: var(--font-script); font-size: clamp(46px,6.4vw,78px); line-height: .82; color: var(--ink); padding-left: 6px; }

.fs-worries { background: var(--heritage); color: var(--canvas); padding: clamp(64px,9vw,104px) 0 clamp(72px,10vw,108px); }
.fs-worries-grid { display: grid; gap: clamp(34px,5vw,88px); align-items: start; }
.fs-asks { list-style: none; margin: 0; padding: 0; }
.fs-asks li {
  padding: clamp(16px,2vw,24px) 0 clamp(18px,2.2vw,26px);
  border-top: 1px solid rgba(255,217,168,.34);
  font-size: clamp(23px,3.6vw,44px); line-height: 1.06; color: var(--gold);
}
.fs-asks li:last-child { border-bottom: 1px solid rgba(255,217,168,.34); }
.fs-worries-grid { max-width: 1000px; }
.fs-worries-note { display: flex; justify-content: flex-end; padding-top: clamp(20px,2.6vw,34px); }
.fs-envelope { color: rgba(255,217,168,.7); display: block; width: clamp(76px,9vw,104px); height: auto; }

/* Frames ------------------------------------------------------------------ */
.fs-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(11,40,71,.42); }
.fs-frame-light { border-color: rgba(255,217,168,.42); }
.fs-frame-crop { overflow: hidden; }
.fs-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.fs-frame img:hover { transform: scale(1.045); }

/* The right age ----------------------------------------------------------- */
.fs-age { background: #FFFFFF; padding: clamp(72px,10vw,110px) 0 clamp(76px,11vw,118px); }
.fs-age-grid { display: grid; gap: clamp(28px,5vw,80px); align-items: start; }
.fs-age-img { height: clamp(300px,42vw,560px); }
.fs-age-h { margin: 0 0 clamp(22px,3vw,34px); font-size: clamp(32px,4.8vw,62px); line-height: 1; letter-spacing: -.022em; max-width: 20ch; color: var(--ink); }
.fs-age-body { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: rgba(11,40,71,.9); }
.fs-tips { display: grid; gap: clamp(30px,4vw,0px); margin-top: clamp(48px,7vw,86px); border-top: 1px solid rgba(11,40,71,.26); }
.fs-tip { padding-top: clamp(26px,3.2vw,38px); }
.fs-tip h3 { margin: 0 0 8px; font-style: italic; font-size: clamp(24px,3vw,34px); line-height: 1.1; color: var(--ink); letter-spacing: 0; text-transform: none; }
.fs-draw { display: block; width: 64px; height: 2px; background: var(--star); transform-origin: left center; margin: 0 0 clamp(16px,2vw,22px); }
html.reveal-ready .fs-tip[data-reveal] .fs-draw { transform: scaleX(0); }
html.reveal-ready .fs-tip[data-reveal].is-in .fs-draw { animation: fsDraw 560ms cubic-bezier(.2,.7,.2,1) 220ms both; }
@keyframes fsDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fs-tip p { margin: 0; font-family: var(--font-body); font-size: clamp(15.5px,1.4vw,17.5px); line-height: 1.74; color: rgba(11,40,71,.9); max-width: 52ch; }

/* Communication ----------------------------------------------------------- */
.fs-comm { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(72px,10vw,104px) 0 clamp(80px,11vw,112px); }
.fs-comm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 44% at 96% 10%, rgba(216,240,244,.1), transparent 62%),
    radial-gradient(48% 40% at 0% 96%, rgba(224,167,58,.16), transparent 64%);
}
.fs-comm-grid { position: relative; display: grid; gap: clamp(30px,5vw,88px); align-items: start; }
.fs-comm-h { margin: 0 0 clamp(22px,3vw,34px); font-size: clamp(34px,5.2vw,70px); line-height: .98; letter-spacing: -.025em; color: var(--canvas); max-width: 13ch; }
.fs-comm-img { height: clamp(220px,26vw,330px); }
.fs-comm-body { display: flex; flex-direction: column; gap: clamp(20px,2.6vw,30px); padding-top: 8px; }
.fs-comm-body > p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: var(--canvas); opacity: .92; max-width: 62ch; }
/* A rule beside the questions, not a tinted panel — the fill is what makes
   these read as generic callout boxes. */
/* The questions carry themselves on size and colour; a rule beside them adds
   nothing but the look of a generic callout. */
.fs-asked { padding: 0; margin: clamp(6px,1vw,10px) 0; }
.fs-asked p { margin: 0; font-size: clamp(20px,2.4vw,27px); line-height: 1.36; color: var(--gold); max-width: 46ch; }

/* A note about photos ----------------------------------------------------- */
.fs-photos { background: var(--canvas); padding: clamp(64px,9vw,96px) 0 clamp(72px,10vw,104px); }
.fs-photos-grid { display: grid; gap: clamp(26px,4vw,72px); align-items: start; }
.fs-kicker { display: block; font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze); margin-bottom: 18px; }
.fs-kicker-light { color: var(--mist); margin-bottom: clamp(18px,2.4vw,26px); }
.fs-photos-h { margin: 0 0 clamp(22px,3vw,30px); font-size: clamp(34px,4.6vw,58px); line-height: .98; letter-spacing: -.02em; color: var(--ink); }
.fs-camera { color: rgba(11,40,71,.42); display: block; width: clamp(84px,10vw,118px); height: auto; }
.fs-photos-body { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.78; color: rgba(11,40,71,.9); max-width: 68ch; }
.fs-photos-body em { font-style: italic; color: var(--bronze); }

/* Homesickness ------------------------------------------------------------ */
.fs-home { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); display: grid; }
.fs-home-media { position: relative; overflow: hidden; min-height: clamp(280px,44vw,600px); }
.fs-home-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms cubic-bezier(.2,.7,.2,1); }
.fs-home-media img:hover { transform: scale(1.04); }
.fs-home-copy { padding: clamp(56px,9vw,100px) clamp(20px,4vw,56px) clamp(64px,10vw,108px); }
.fs-home-h { margin: 0 0 clamp(26px,3.6vw,40px); font-size: clamp(32px,4.8vw,64px); line-height: 1; letter-spacing: -.025em; color: var(--canvas); }
.fs-gold { color: var(--gold); }
.fs-home-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,26px); border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(24px,3vw,34px); }
.fs-home-body p { margin: 0; font-family: var(--font-body); font-size: clamp(15.5px,1.45vw,18px); line-height: 1.76; color: var(--canvas); opacity: .92; }
.fs-home-close { font-size: clamp(20px,2.3vw,26px) !important; line-height: 1.4; color: var(--gold) !important; opacity: 1 !important; font-family: var(--font-serif) !important; }

/* Two books --------------------------------------------------------------- */
.fs-books { background: #FFFFFF; padding: clamp(72px,10vw,104px) 0 clamp(76px,10vw,110px); }
.fs-rule-head { display: flex; align-items: center; gap: 22px; margin: 0 0 20px; font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.fs-rule-head > span:first-child { white-space: nowrap; }
.fs-rule-line { flex: 1; height: 1px; background: rgba(11,40,71,.26); }
.fs-books-h { margin: 0 0 clamp(34px,5vw,52px); font-size: clamp(32px,4.6vw,58px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.fs-book-grid { display: grid; gap: clamp(20px,3vw,40px); margin-bottom: clamp(34px,5vw,52px); }
.fs-book {
  display: grid; gap: clamp(18px,2.4vw,28px); align-items: start;
  border: 1px solid rgba(11,40,71,.42);
  padding: clamp(26px,3.4vw,40px) clamp(24px,3.4vw,40px) clamp(24px,3vw,36px);
  transition: background 300ms ease;
}
/* The cover repeats the title link, so it is hidden from the accessibility
   tree and taken out of the tab order — the heading link is the real one. */
/* The mockup carries its own soft shadow in the alpha channel and no
   background, so it needs no frame and sits on any card colour. */
.fs-book-cover { display: block; width: clamp(112px,30vw,142px); }
.fs-book-cover img { display: block; width: 100%; height: auto; }
.fs-book:hover { background: var(--canvas); }
.fs-book-rule { display: block; width: 40px; height: 1px; background: var(--star); margin-bottom: clamp(18px,2.4vw,26px); }
.fs-book h3 { margin: 0 0 16px; font-size: clamp(23px,2.8vw,32px); line-height: 1.14; max-width: 26ch; letter-spacing: 0; text-transform: none; }
.fs-book h3 a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(224,167,58,.7); }
.fs-book h3 a:hover { color: var(--bronze); text-decoration-color: var(--bronze); }
.fs-book > p { margin: 0; font-family: var(--font-body); font-size: 16px; letter-spacing: .02em; color: rgba(11,40,71,.72); }
.fs-books-foot { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 74ch; }

/* Closing ----------------------------------------------------------------- */
.fs-close { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(76px,10vw,108px) 0 clamp(84px,11vw,118px); }
.fs-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 46% at 88% 6%, rgba(224,167,58,.18), transparent 66%);
}
.fs-close-grid { position: relative; display: grid; gap: clamp(34px,5vw,88px); align-items: center; }
.fs-close-h { margin: 0 0 clamp(18px,2.4vw,24px); font-size: clamp(36px,5.4vw,72px); line-height: 1.02; letter-spacing: -.025em; color: var(--canvas); max-width: 16ch; }
.fs-close-lead { margin: 0 0 clamp(28px,3.8vw,44px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.7; color: var(--canvas); opacity: .9; max-width: 46ch; }
.fs-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: var(--heritage);
  text-decoration: none; padding: 20px clamp(30px,3.6vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.fs-cta:hover { background: var(--canvas); color: var(--heritage); gap: 20px; }
.fs-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.fs-sign { display: flex; justify-content: center; color: rgba(255,217,168,.66); }
.fs-sign svg { width: clamp(118px,16vw,176px); height: auto; }
.fs-flag { transform-origin: 94px 54px; animation: fsFlag 4.2s ease-in-out infinite; }
@keyframes fsFlag { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 700px) {
  .fs-book-grid { grid-template-columns: 1fr 1fr; }
  .fs-book { grid-template-columns: clamp(112px,15vw,142px) 1fr; gap: clamp(18px,2.4vw,28px); }
  .fs-book-cover { width: 100%; }
  /* The worries step down the page, each one further in than the last. */
  .fs-asks li:nth-child(2) { padding-left: clamp(16px,4vw,48px); }
  .fs-asks li:nth-child(3) { padding-left: clamp(32px,8vw,96px); }
  .fs-asks li:nth-child(4) { padding-left: clamp(48px,12vw,144px); }
}
@media (min-width: 1000px) {

  .fs-age-grid { grid-template-columns: .9fr 1.1fr; }
  .fs-tips { grid-template-columns: 1fr 1fr; column-gap: clamp(40px,7vw,96px); }
  .fs-tip + .fs-tip { border-left: 1px solid rgba(11,40,71,.26); padding-left: clamp(40px,7vw,96px); }
  .fs-comm-grid { grid-template-columns: .42fr .58fr; }
  .fs-photos-grid { grid-template-columns: .3fr .7fr; }
  .fs-home { grid-template-columns: .46fr .54fr; }
  .fs-home-copy { padding: clamp(80px,8vw,100px) clamp(56px,8vw,120px) clamp(84px,9vw,108px) clamp(40px,6vw,84px); }
  .fs-close-grid { grid-template-columns: 1.06fr .94fr; }
}
@media (min-width: 520px) and (max-width: 899px) {
  .fs-book { grid-template-columns: clamp(112px,18vw,142px) 1fr; gap: clamp(18px,2.4vw,28px); }
  .fs-book-cover { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-mast-img { animation: none; transform: scale(1.06); }
  .fs-flag { animation: none; }
  .fs-frame img, .fs-home-media img, .fs-cta, .fs-book { transition: none; }
  html.reveal-ready .fs-tip[data-reveal] .fs-draw,
  html.reveal-ready .fs-tip[data-reveal].is-in .fs-draw { animation: none; transform: scaleX(1); }
}

/* --- Summer Camp FAQs -----------------------------------------------------
   Implementation of "Camp FAQs.dc.html" from the Claude Design project.
   Twenty-four questions in six named groups, with a chip bar that filters
   them, a numbered accordion that opens one at a time, and the "Still
   wondering?" band splitting the run in two.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.fq-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.fq-h1, .fq-group-h, .fq-q, .fq-still-h, .fq-close-h, .fq-tel { font-family: var(--font-serif); font-weight: 400; }

/* Masthead ---------------------------------------------------------------- */
.fq-mast { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(150px,13vw,180px) 0 clamp(64px,9vw,104px); }
.fq-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 4% 4%, rgba(224,167,58,.2), transparent 64%),
    radial-gradient(48% 40% at 96% 96%, rgba(216,240,244,.09), transparent 62%);
}
.fq-mast .fq-inner { position: relative; }
.fq-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(22px,3vw,34px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.fq-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.fq-h1 { margin: 0; font-size: clamp(44px,7vw,96px); line-height: .94; letter-spacing: -.03em; color: var(--canvas); }
.fq-script { font-family: var(--font-script); font-style: italic; color: var(--gold); font-size: 1.29em; line-height: .6; display: inline-block; transform: translateY(.1em); }
.fq-mast-img { height: clamp(260px,36vw,520px); transform-origin: 50% 0; }

/* Frames ------------------------------------------------------------------ */
.fq-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(11,40,71,.42); margin-top: clamp(36px,5vw,64px); }
.fq-frame-light { border-color: rgba(255,217,168,.42); }
.fq-frame-crop { overflow: hidden; }
.fq-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.fq-frame img:hover { transform: scale(1.045); }

/* Filter chips ------------------------------------------------------------ */
.fq-questions { background: #FFFFFF; padding: clamp(56px,8vw,88px) 0 0; }
.fq-questions-more { padding: clamp(64px,9vw,96px) 0 clamp(72px,10vw,104px); }
.fq-filters { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: clamp(32px,5vw,52px); }
.fq-chip {
  padding: 13px clamp(16px,2.2vw,24px); min-height: 44px; cursor: pointer;
  border: 1px solid rgba(11,40,71,.42); background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: clamp(13px,1.2vw,14px); letter-spacing: .04em; font-weight: 600;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.fq-chip:hover { border-color: var(--heritage); }
.fq-chip[aria-pressed="true"] { background: var(--heritage); color: var(--canvas); border-color: var(--heritage); }
.fq-chip:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }

/* Group heading ----------------------------------------------------------- */
.fq-group + .fq-group { margin-top: clamp(44px,6vw,72px); }
.fq-group[hidden] { display: none; }
.fq-group-head { display: flex; align-items: baseline; gap: clamp(14px,2.4vw,22px); padding-bottom: 14px; }
.fq-group-h { margin: 0; font-size: clamp(26px,3.4vw,40px); line-height: 1; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.fq-group-rule { flex: 1; height: 1px; background: rgba(11,40,71,.26); }
.fq-group-range { flex: none; font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }

/* The accordion ----------------------------------------------------------- */
.fq-item { border-top: 1px solid rgba(11,40,71,.2); }
.fq-group > .fq-item:last-child { border-bottom: 1px solid rgba(11,40,71,.2); }
.fq-btn {
  display: grid; grid-template-columns: clamp(34px,5vw,76px) 1fr clamp(28px,3vw,44px);
  align-items: baseline; gap: clamp(10px,1.6vw,18px); width: 100%;
  padding: clamp(20px,2.6vw,30px) 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.fq-num { font-family: var(--font-body); font-size: clamp(11px,1.1vw,13px); letter-spacing: .14em; font-weight: 700; color: var(--bronze); }
.fq-q { font-size: clamp(19px,2.4vw,30px); line-height: 1.2; max-width: 34ch; color: var(--ink); }
.fq-mark { justify-self: end; align-self: center; font-size: clamp(20px,2.2vw,26px); line-height: 1; color: var(--star); transition: transform 380ms cubic-bezier(.2,.7,.2,1); }
.fq-btn[aria-expanded="true"] .fq-mark { transform: rotate(135deg); }
.fq-btn:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }
.fq-btn:hover .fq-q { color: var(--bronze); }

/* The panel opens by growing its own row from 0fr to 1fr, so it animates to
   whatever height the answer actually is — no measuring, no inline heights. */
.fq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms cubic-bezier(.2,.7,.2,1); }
.fq-item[data-fq-open] .fq-panel { grid-template-rows: 1fr; }
.fq-panel-clip { overflow: hidden; }
.fq-answer { padding: 0 clamp(0px,6vw,120px) clamp(26px,3.4vw,38px) clamp(34px,6vw,94px); display: flex; flex-direction: column; gap: 18px; }
.fq-answer p { margin: 0; font-family: var(--font-body); font-size: clamp(15.5px,1.4vw,17.5px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 74ch; }
.fq-answer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fq-answer li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px;
  font-family: var(--font-body); font-size: clamp(15.5px,1.4vw,17.5px); line-height: 1.7; color: rgba(11,40,71,.9);
}
.fq-answer li::before { content: "—"; color: var(--star); }

/* Still wondering --------------------------------------------------------- */
.fq-still { background: var(--heritage); color: var(--canvas); padding: clamp(64px,9vw,88px) 0 clamp(72px,10vw,96px); }
.fq-still-grid { display: grid; gap: clamp(30px,5vw,80px); align-items: center; }
.fq-still .fq-frame { margin-top: 0; }
.fq-still-img { height: clamp(300px,40vw,520px); }
.fq-still-h { margin: 0 0 clamp(16px,2.2vw,22px); font-size: clamp(34px,4.8vw,62px); line-height: 1; letter-spacing: -.022em; color: var(--canvas); max-width: 14ch; }
.fq-still-lead { margin: 0 0 clamp(26px,3.4vw,36px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.72; color: var(--canvas); opacity: .9; max-width: 42ch; }
.fq-lines { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,2.8vw,30px); margin-bottom: clamp(28px,3.6vw,38px); }
.fq-tel { font-size: clamp(26px,3.4vw,38px); line-height: 1; text-decoration: none; color: var(--canvas); transition: color 240ms ease; }
.fq-tel:hover { color: var(--gold); }
.fq-mail { font-family: var(--font-body); font-size: clamp(15px,1.4vw,17px); letter-spacing: .02em; color: var(--gold); text-decoration-color: var(--star); }
.fq-mail:hover { color: var(--canvas); }

/* Closing ----------------------------------------------------------------- */
.fq-close { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(76px,10vw,108px) 0 clamp(84px,11vw,118px); }
.fq-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 46% at 86% 6%, rgba(224,167,58,.18), transparent 66%);
}
.fq-close-grid { position: relative; display: grid; gap: clamp(34px,5vw,88px); align-items: center; }
.fq-close-h { margin: 0 0 clamp(18px,2.4vw,24px); font-size: clamp(36px,5.4vw,72px); line-height: 1.02; letter-spacing: -.025em; color: var(--canvas); max-width: 16ch; }
.fq-close-lead { margin: 0 0 clamp(28px,3.8vw,44px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.7; color: var(--canvas); opacity: .9; max-width: 46ch; }
.fq-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: var(--heritage);
  text-decoration: none; padding: 20px clamp(28px,3.4vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.fq-cta strong { font-weight: 700; }
.fq-cta:hover { background: var(--canvas); color: var(--heritage); gap: 20px; }
.fq-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 1000px) {
  .fq-still-grid { grid-template-columns: .52fr .48fr; }
  .fq-close-grid { grid-template-columns: 1.06fr .94fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-frame img, .fq-chip, .fq-mark, .fq-cta, .fq-tel { transition: none; }
  .fq-panel { transition: none; }
}
/* Hiding a whole run or section when a filter empties it. */
.fq-questions[hidden], [data-fq-root][hidden] { display: none !important; }

/* --- About Us -------------------------------------------------------------
   Implementation of "About Us.dc.html" from the Claude Design project.
   A full-bleed field plate that pans under the title, the origin in two
   voices on navy, the four inner pages as a numbered index that slides on
   hover, and a navy close under a compass whose needle turns.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.au-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.au-h1, .au-say, .au-row-title, .au-close-h { font-family: var(--font-serif); font-weight: 400; }

/* Masthead ---------------------------------------------------------------- */
/* Tall enough that the bottom-anchored copy clears all four faces (Hamza:
   text must not sit on the girls). Measured against the photo: the lowest
   face ends ~560px down at 1440; the copy block starts ~600. */
.au-mast { position: relative; height: clamp(520px,62vw,900px); overflow: hidden; background: var(--heritage); }
/* The photo starts under the header bar, not behind it, so the logo never
   sits on a face (#137). --header-h is set by site.js; the fallback is the
   desktop bar height. */
body.solid-header .au-mast { margin-top: var(--header-h, 139px); }
.au-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 52% 0%; transform: scale(1.05); animation: auPan 26s ease-out forwards;
}
/* Scale only — a vertical drift would carry the top row of heads out of frame. */
@keyframes auPan { 0% { transform: scale(1.05); } 100% { transform: scale(1.10); } }
.au-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.58) 0%, rgba(7,27,49,.22) 36%, rgba(7,27,49,.84) 84%, var(--heritage) 100%);
}
.au-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(36px,5.4vw,80px); color: var(--canvas); }
.au-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,28px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.au-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.au-h1 {
  margin: 0; font-size: clamp(42px,7vw,96px); line-height: .94; letter-spacing: -.03em;
  color: var(--canvas); max-width: 22ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.au-script { font-family: var(--font-script); font-style: italic; color: var(--gold); font-size: 1.29em; line-height: .6; display: inline-block; transform: translateY(.1em); }

/* Intro ------------------------------------------------------------------- */
.au-intro { background: var(--heritage); color: var(--canvas); padding: clamp(40px,4vw,12px) 0 clamp(72px,10vw,108px); }
.au-intro-grid { display: grid; gap: clamp(28px,5vw,88px); align-items: start; }
.au-say { margin: 0; font-size: clamp(23px,3.2vw,34px); line-height: 1.3; color: var(--canvas); }
.au-intro-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,24px); border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(24px,3vw,32px); }
.au-intro-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: var(--canvas); opacity: .92; }

/* Explore index ----------------------------------------------------------- */
/* #260: "Explore" and its two rules are gone, so the rows come up to meet the
   section above. The first row drops its top rule for the same reason. */
.au-explore { background: #FFFFFF; padding: clamp(24px,3.4vw,44px) 0 clamp(72px,10vw,104px); }
.au-explore .au-row:first-child { border-top: 0; }
.au-rule-head {
  display: flex; align-items: baseline; gap: 22px; margin: 0 0 clamp(30px,4.4vw,46px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze);
}
.au-rule-head > span:first-child { white-space: nowrap; }
.au-rule-line { flex: 1; height: 1px; background: rgba(11,40,71,.26); }

.au-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(14px,2.6vw,36px);
  align-items: center; text-decoration: none; color: var(--ink);
  border-top: 1px solid rgba(11,40,71,.22); padding: clamp(20px,2.6vw,30px) 0;
  transition: background 320ms ease;
}
.au-row-last { border-bottom: 1px solid rgba(11,40,71,.22); }
/* Same lesson as the All About Camp rows: slide the content on transform so
   nothing reflows — animating padding rewrapped the subtitle mid-motion. */
.au-row:hover { background: var(--canvas); }
.au-row > * { transition: transform 420ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.au-row:hover > :not(.au-arrow) { transform: translateX(10px); }
.au-row:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }
/* #261: the brand star stands in for 01, 02, 03. */
.au-num { width: 16px; height: 18px; color: var(--star); align-self: center; justify-self: start; }
.au-row-title { display: block; font-size: clamp(24px,3.4vw,44px); line-height: 1.06; letter-spacing: -.018em; margin-bottom: 10px; color: var(--ink); transition: color 220ms ease; }
.au-row:hover .au-row-title { color: var(--bronze); }
.au-row-sub { display: block; font-family: var(--font-body); font-size: clamp(15px,1.4vw,17.5px); line-height: 1.6; color: rgba(11,40,71,.78); max-width: 52ch; }
.au-thumb { display: none; padding: 9px; border: 1px solid rgba(11,40,71,.42); }
.au-thumb-crop { display: block; overflow: hidden; }
.au-thumb img { display: block; width: 100%; height: clamp(110px,13vw,150px); object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.au-row:hover .au-thumb img { transform: scale(1.05); }
.au-arrow { justify-self: end; align-self: center; font-size: clamp(20px,2.2vw,26px); line-height: 1; color: var(--star); transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
.au-row:hover .au-arrow { transform: translateX(6px); }

/* Closing ----------------------------------------------------------------- */
.au-close { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(76px,10vw,108px) 0 clamp(84px,11vw,118px); }
.au-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 46% at 86% 6%, rgba(224,167,58,.18), transparent 66%);
}
.au-close-grid { position: relative; display: grid; gap: clamp(34px,5vw,88px); align-items: center; }
.au-kicker { display: block; font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--mist); margin-bottom: clamp(18px,2.4vw,26px); }
.au-close-h { margin: 0 0 clamp(18px,2.4vw,24px); font-size: clamp(38px,5.6vw,76px); line-height: 1; letter-spacing: -.025em; color: var(--canvas); }
.au-close-lead { margin: 0 0 clamp(28px,3.8vw,44px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.7; color: var(--canvas); opacity: .9; max-width: 46ch; }
.au-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: var(--heritage);
  text-decoration: none; padding: 20px clamp(30px,3.6vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.au-cta:hover { background: var(--canvas); color: var(--heritage); gap: 20px; }
.au-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.au-needle { transform-origin: 60px 60px; animation: auNeedle 30s linear infinite; }
@keyframes auNeedle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 900px) {
  /* The thumbnail only earns its place once the row is wide enough to carry
     it without squeezing the title. */
  .au-row { grid-template-columns: clamp(40px,5vw,78px) 1fr clamp(190px,22vw,300px) clamp(34px,4vw,56px); }
  .au-thumb { display: block; }
}
@media (min-width: 1000px) {
  .au-intro-grid { grid-template-columns: .52fr .48fr; }
  .au-close-grid { grid-template-columns: 1.06fr .94fr; }
}
@media (prefers-reduced-motion: reduce) {
  .au-mast-img { animation: none; transform: scale(1.05); }
  .au-needle { animation: none; }
  .au-row, .au-row > *, .au-arrow, .au-thumb img, .au-cta, .au-row-title { transition: none; }
}

/* --- Why Work With a Camp Specialist --------------------------------------
   Implementation of "Why Work With Us.dc.html" from the Claude Design project.
   A split masthead, the three kinds of family as a numbered run, a four-up
   filmstrip over the stats on navy, Ilissa's testimonial on canvas, the
   invitation beside the ropes course, and a navy close under a flag that
   sways.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.ww-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.ww-h1, .ww-h2, .ww-close-h, .ww-say-gold, .ww-quote-text, .ww-quote-mark, .ww-stat-n, .ww-somm-line { font-family: var(--font-serif); font-weight: 400; }

/* Masthead ---------------------------------------------------------------- */
.ww-mast { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); display: grid; }
.ww-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(56% 46% at 2% 8%, rgba(224,167,58,.2), transparent 64%);
}
.ww-mast-copy { position: relative; z-index: 2; padding: clamp(150px,13vw,180px) 0 clamp(64px,9vw,104px); }
.ww-mast-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.ww-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(22px,3vw,36px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.ww-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.ww-h1 { margin: 0 0 clamp(24px,3.4vw,38px); font-size: clamp(34px,5.4vw,74px); line-height: 1; letter-spacing: -.028em; color: var(--canvas); max-width: 19ch; }
.ww-gold { color: var(--gold); }
.ww-mast-body { border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,2.8vw,32px); display: flex; flex-direction: column; gap: clamp(16px,2vw,22px); max-width: 56ch; }
.ww-mast-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: var(--canvas); opacity: .92; }
.ww-mast-body a { color: var(--gold); text-decoration-color: var(--star); }
.ww-mast-body a:hover { color: var(--canvas); text-decoration-color: var(--canvas); }
.ww-say-gold { font-size: clamp(22px,2.6vw,30px) !important; line-height: 1.3; color: var(--gold) !important; opacity: 1 !important; font-family: var(--font-serif) !important; }
.ww-mast-media { position: relative; overflow: hidden; min-height: clamp(300px,44vw,700px); }
.ww-mast-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms cubic-bezier(.2,.7,.2,1); }
.ww-mast-media img:hover { transform: scale(1.04); }

/* Frames ------------------------------------------------------------------ */
.ww-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(11,40,71,.42); }
.ww-frame-light { border-color: rgba(255,217,168,.42); }
.ww-frame-crop { overflow: hidden; }
.ww-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.ww-frame img:hover { transform: scale(1.05); }

/* The search starts here --------------------------------------------------- */
.ww-h2 { margin: 0; letter-spacing: -.025em; color: var(--ink); }


/* Camp is our world -------------------------------------------------------- */
.ww-world { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(72px,10vw,100px) 0 clamp(76px,10vw,108px); }
/* #262/#263: the masthead is gone, so this section opens the page and has to
   clear the fixed header itself. */
main > .ww-world:first-child { padding-top: calc(var(--header-h, 113px) + clamp(40px,6vw,72px)); }
.ww-world::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 42% at 96% 8%, rgba(216,240,244,.1), transparent 62%),
    radial-gradient(48% 40% at 0% 96%, rgba(224,167,58,.16), transparent 64%);
}
.ww-world .ww-inner { position: relative; }
/* #293: the photos slide rather than sit in a grid. site.js (initTeens) drives
   every [data-tn-strip]: auto-advance, pause on hover, swipe, seamless loop. */
.ww-strip { overflow: hidden; margin-bottom: clamp(48px,7vw,76px); }
.ww-strip-track { display: flex; gap: clamp(12px,1.6vw,20px); will-change: transform; }
.ww-slide { flex: 0 0 82%; }
@media (min-width: 700px) { .ww-slide { flex-basis: 46%; } }
@media (min-width: 1000px) { .ww-slide { flex-basis: 36%; } }
.ww-strip .ww-frame { padding: clamp(7px,.9vw,10px); }
.ww-strip-img { height: clamp(210px,24vw,320px); }
.ww-world-grid { display: grid; gap: clamp(30px,5vw,88px); align-items: start; }
.ww-world-h { font-size: clamp(34px,5.4vw,70px); line-height: .98; color: var(--canvas); max-width: 12ch; margin-bottom: clamp(22px,3vw,34px); }
.ww-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px clamp(18px,2.6vw,32px); border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,2.8vw,30px); }
.ww-stat-n { display: block; font-size: clamp(34px,4.4vw,56px); line-height: 1; color: var(--gold); }
.ww-stat-l { display: block; margin-top: 8px; font-family: var(--font-body); font-size: clamp(11px,1.2vw,13px); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--mist); }
.ww-world-body { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); padding-top: 6px; }
.ww-world-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: var(--canvas); opacity: .92; max-width: 62ch; }
.ww-world-body a { color: var(--gold); text-decoration-color: var(--star); }
.ww-world-body a:hover { color: var(--canvas); text-decoration-color: var(--canvas); }

.ww-sommelier { display: grid; gap: clamp(28px,4.6vw,80px); align-items: center; margin-top: clamp(48px,7vw,84px); }
.ww-somm-img { height: clamp(260px,32vw,420px); }
.ww-somm-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,24px); }
/* #267: the closing call to action now sits where the sommelier line was. */
.ww-somm-cta { margin-top: clamp(10px,1.6vw,18px); padding-top: clamp(22px,2.8vw,30px); border-top: 1px solid rgba(255,217,168,.34); }
.ww-somm-cta .ww-close-h { font-size: clamp(30px,4.2vw,54px); }
.ww-somm-body > p:first-child { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: var(--canvas); opacity: .92; max-width: 56ch; }
.ww-somm-line {
  margin: 0; font-size: clamp(22px,2.6vw,30px); line-height: 1.34; color: var(--gold);
  border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(20px,2.4vw,26px); max-width: 44ch;
}

/* Testimonial -------------------------------------------------------------- */
.ww-quote { background: var(--canvas); padding: clamp(72px,10vw,100px) 0 clamp(76px,10vw,108px); }
.ww-quote-grid { display: grid; gap: clamp(6px,3vw,56px); align-items: start; }
.ww-quote-mark { display: block; font-size: clamp(92px,12vw,130px); line-height: .5; color: var(--star); }
.ww-quote-text { margin: 0 0 clamp(26px,3.4vw,36px); font-size: clamp(18px,2vw,24px); line-height: 1.5; max-width: 70ch; color: var(--ink); }
.ww-quote-rule { display: block; width: 40px; height: 1px; background: var(--bronze); margin-bottom: 18px; }
.ww-quote-name { display: block; font-family: var(--font-body); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.ww-quote-role { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; letter-spacing: .04em; color: rgba(11,40,71,.72); }

/* Talk to a Camp Specialist ------------------------------------------------ */
.ww-talk { background: #FFFFFF; padding: clamp(72px,10vw,104px) 0 clamp(76px,10vw,112px); }
.ww-talk-grid { display: grid; gap: clamp(30px,4.6vw,80px); align-items: start; }
.ww-talk-h { font-size: clamp(32px,4.8vw,64px); line-height: 1; max-width: 16ch; margin-bottom: clamp(22px,3vw,30px); }
.ww-talk-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,24px); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(24px,3vw,32px); }
.ww-talk-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 58ch; }
.ww-talk-img { height: clamp(280px,36vw,470px); }
.ww-cta-ink {
  display: inline-flex; align-items: center; gap: 12px; background: var(--heritage); color: var(--canvas);
  text-decoration: none; padding: 20px clamp(28px,3.4vw,44px); min-height: 44px; margin-top: clamp(28px,3.6vw,40px);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.ww-cta-ink:hover { background: var(--heritage-deep); color: var(--gold); gap: 20px; }
.ww-cta-ink:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Closing ------------------------------------------------------------------ */
.ww-close { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(76px,10vw,104px) 0 clamp(80px,11vw,114px); }
.ww-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 46% at 86% 6%, rgba(224,167,58,.18), transparent 66%);
}
.ww-close-grid { position: relative; display: grid; gap: clamp(34px,5vw,88px); align-items: center; }
.ww-close-h { margin: 0 0 clamp(18px,2.4vw,24px); font-size: clamp(36px,5.4vw,72px); line-height: 1.02; letter-spacing: -.025em; color: var(--canvas); max-width: 16ch; }
.ww-close-lead { margin: 0 0 clamp(28px,3.8vw,44px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.7; color: var(--canvas); opacity: .9; max-width: 46ch; }
.ww-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: var(--heritage);
  text-decoration: none; padding: 20px clamp(30px,3.6vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.ww-cta:hover { background: var(--canvas); color: var(--heritage); gap: 20px; }
.ww-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Desktop ------------------------------------------------------------------ */
@media (min-width: 700px) {
}
/* Under 1000px the mast stacks: photo first (taller than the desktop cell
   would give it), copy underneath. The photo starts below the cream header
   bar, so the copy no longer needs the 150px header clearance. */
@media (max-width: 999px) {
  .ww-mast { margin-top: var(--header-h, 113px); }
  .ww-mast-media { order: -1; min-height: clamp(380px,100vw,560px); }
  .ww-mast-copy { padding-top: clamp(48px,7vw,72px); }
}
/* Phones: both stats stay side by side, labels tightened so each holds one line. */
@media (max-width: 479px) {
  .ww-stats { gap: 2px 12px; }
  .ww-stat-l { font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; }
}
@media (min-width: 1000px) {
  .ww-mast { grid-template-columns: 1.06fr .94fr; align-items: stretch; }
  .ww-mast-copy { display: flex; align-items: center; }
  .ww-mast-inner { max-width: none; margin: 0; padding: 0 clamp(40px,6vw,88px) 0 clamp(20px,4vw,56px); }
  .ww-world-grid { grid-template-columns: .44fr .56fr; }
  .ww-sommelier { grid-template-columns: .52fr .48fr; }
  .ww-quote-grid { grid-template-columns: .18fr .82fr; }
  .ww-talk-grid { grid-template-columns: .54fr .46fr; }
  .ww-close-grid { grid-template-columns: 1.06fr .94fr; }
}
@media (min-width: 1381px) {
  /* Past the container's 1320px the masthead copy would drift off the header's
     content edge; pin it to the same gutter the rest of the page uses. */
  .ww-mast-inner { padding-left: calc((100vw - 1320px) / 2 + 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .ww-mast-media img, .ww-frame img, .ww-cta, .ww-cta-ink { transition: none; }
}

/* --- Our Philosophy -------------------------------------------------------
   Implementation of "Our Philosophy.dc.html" from the Claude Design project.
   A bonfire plate that pans under the title, the motto set large in gold on
   navy, the family question beside its photograph, the camps relationship as
   a split, and a canvas close under a banked campfire.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.ph-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.ph-h1, .ph-h2, .ph-motto-say, .ph-ask, .ph-promise { font-family: var(--font-serif); font-weight: 400; }

/* Masthead ---------------------------------------------------------------- */
.ph-mast { position: relative; height: clamp(560px,58vw,680px); overflow: hidden; background: var(--heritage); }
.ph-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 46%; transform: scale(1.05); animation: phPan 26s ease-out forwards;
}
@keyframes phPan { 0% { transform: scale(1.05); } 100% { transform: scale(1.12) translateY(-1.4%); } }
.ph-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.56) 0%, rgba(7,27,49,.24) 34%, rgba(7,27,49,.84) 84%, var(--heritage) 100%);
}
.ph-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px,5.6vw,76px); color: var(--canvas); }
.ph-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,28px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.ph-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.ph-h1 {
  margin: 0; font-size: clamp(42px,7.2vw,100px); line-height: .94; letter-spacing: -.03em;
  color: var(--canvas); max-width: 20ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.ph-script { font-family: var(--font-script); font-style: italic; color: var(--gold); font-size: 1.28em; line-height: .6; display: inline-block; transform: translateY(.1em); }

/* Motto ------------------------------------------------------------------- */
.ph-motto { background: var(--heritage); color: var(--canvas); padding: clamp(40px,4vw,14px) 0 clamp(72px,10vw,104px); }
.ph-motto-grid { display: grid; gap: clamp(26px,5vw,88px); align-items: start; }
.ph-motto-say { margin: 0; font-size: clamp(26px,4vw,44px); line-height: 1.16; letter-spacing: -.015em; color: var(--gold); }
.ph-motto-body {
  margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.78;
  color: var(--canvas); opacity: .92; border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,2.8vw,30px);
}

/* Frames ------------------------------------------------------------------ */
.ph-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(11,40,71,.42); }
.ph-frame-crop { overflow: hidden; }
.ph-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.ph-frame img:hover { transform: scale(1.045); }

/* Where it begins --------------------------------------------------------- */
.ph-begins { background: #FFFFFF; padding: clamp(72px,10vw,104px) 0 clamp(76px,10vw,110px); }
.ph-begins-grid { display: grid; gap: clamp(30px,4.6vw,80px); align-items: center; }
.ph-begins-img { height: clamp(300px,38vw,500px); }
.ph-kicker { display: block; font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze); margin-bottom: clamp(16px,2.2vw,22px); }
.ph-ask { margin: 0 0 clamp(20px,2.8vw,28px); font-size: clamp(26px,3.8vw,42px); line-height: 1.12; letter-spacing: -.018em; max-width: 20ch; color: var(--ink); }
.ph-begins-body {
  margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.78;
  color: rgba(11,40,71,.9); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(20px,2.6vw,28px); max-width: 54ch;
}

/* You can't learn a camp from a screen ------------------------------------ */
.ph-camps { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); display: grid; }
.ph-camps-media { position: relative; overflow: hidden; min-height: clamp(280px,44vw,600px); }
.ph-camps-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms cubic-bezier(.2,.7,.2,1); }
.ph-camps-media img:hover { transform: scale(1.04); }
.ph-camps-copy { padding: clamp(56px,9vw,100px) clamp(20px,4vw,56px) clamp(64px,10vw,106px); }
.ph-h2 { margin: 0; letter-spacing: -.025em; }
.ph-camps-h { font-size: clamp(32px,4.8vw,64px); line-height: 1; color: var(--canvas); max-width: 16ch; margin-bottom: clamp(22px,3vw,34px); }
.ph-camps-body { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,3vw,32px); }
.ph-camps-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.78; color: var(--canvas); opacity: .92; }

/* Ready to connect -------------------------------------------------------- */
.ph-ready { background: var(--canvas); padding: clamp(72px,10vw,104px) 0 clamp(80px,11vw,112px); }
.ph-ready-grid { display: grid; gap: clamp(30px,5vw,88px); align-items: start; }
.ph-ready-h { font-size: clamp(34px,5.2vw,68px); line-height: .98; max-width: 13ch; color: var(--ink); margin-bottom: clamp(22px,3vw,30px); }
.ph-glyph { display: block; color: rgba(11,40,71,.42); width: clamp(112px,14vw,150px); height: auto; }
.ph-ember { transform-origin: 60px 74px; animation: phEmber 3.6s ease-in-out infinite; }
@keyframes phEmber { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06,1.09); } }
.ph-ready-body { margin: 0 0 clamp(22px,3vw,30px); font-family: var(--font-body); font-size: clamp(16px,1.6vw,19px); line-height: 1.78; color: rgba(11,40,71,.9); max-width: 58ch; }
.ph-promise {
  margin: 0 0 clamp(30px,4.4vw,44px); font-size: clamp(23px,2.8vw,32px); line-height: 1.32; color: var(--ink);
  border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(22px,2.8vw,30px); max-width: 40ch;
}
.ph-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--heritage); color: var(--canvas);
  text-decoration: none; padding: 20px clamp(28px,3.4vw,44px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.ph-cta:hover { background: var(--heritage-deep); color: var(--gold); gap: 20px; }
.ph-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 1000px) {
  .ph-motto-grid { grid-template-columns: .5fr .5fr; }
  .ph-begins-grid { grid-template-columns: .54fr .46fr; }
  .ph-camps { grid-template-columns: .46fr .54fr; }
  .ph-camps-copy { padding: clamp(80px,8vw,100px) clamp(56px,8vw,120px) clamp(84px,9vw,106px) clamp(40px,6vw,84px); }
  .ph-ready-grid { grid-template-columns: .44fr .56fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-mast-img { animation: none; transform: scale(1.05); }
  .ph-ember { animation: none; }
  .ph-frame img, .ph-camps-media img, .ph-cta { transition: none; }
}

/* --- Our Story ------------------------------------------------------------
   Implementation of "Our Story.dc.html" from the Claude Design project.
   A field-house plate that pans under the title, the beginning told beside
   its photograph on navy, 1992 set as a numeral over a rule that draws
   itself, the leadership stacked against how the service grew, and a canvas
   close around the words every camper comes home saying.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.st-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.st-h1, .st-h2, .st-ask, .st-year, .st-official, .st-lead, .st-name, .st-said {
  font-family: var(--font-serif); font-weight: 400;
}

/* Body copy carries its own class rather than a descendant `p` selector, so
   the serif display lines sitting beside it never lose a specificity race. */
.st-p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.78; }
.st-p-canvas { color: var(--canvas); opacity: .92; max-width: 60ch; }
.st-p-ink { color: rgba(11,40,71,.9); max-width: 66ch; }

/* Masthead ---------------------------------------------------------------- */
.st-mast { position: relative; height: clamp(600px,60vw,700px); overflow: hidden; background: var(--heritage); }
.st-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%; transform: scale(1.05); animation: stPan 26s ease-out forwards;
}
@keyframes stPan { 0% { transform: scale(1.05); } 100% { transform: scale(1.12) translateY(-1.4%); } }
.st-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.58) 0%, rgba(7,27,49,.22) 34%, rgba(7,27,49,.85) 84%, var(--heritage) 100%);
}
.st-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px,5.6vw,74px); color: var(--canvas); }
.st-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,28px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.st-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.st-h1 {
  margin: 0; font-size: clamp(34px,5.8vw,80px); line-height: 1; letter-spacing: -.028em;
  color: var(--canvas); max-width: 26ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.st-gold { color: var(--gold); }

/* Frames ------------------------------------------------------------------ */
.st-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(255,217,168,.42); }
.st-frame-light { border-color: rgba(11,40,71,.42); }
.st-frame-crop { overflow: hidden; }
.st-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.st-frame img:hover { transform: scale(1.04); }

/* Beginnings -------------------------------------------------------------- */
.st-begins { background: var(--heritage); color: var(--canvas); padding: clamp(20px,3vw,30px) 0 clamp(74px,10vw,108px); }
.st-begins-grid { display: grid; gap: clamp(28px,4.6vw,80px); align-items: start; }
.st-begins-img { height: clamp(340px,46vw,540px); }   /* #357: portrait photo of the founders; taller so no one is cut */
.st-begins-copy { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); padding-top: 6px; }
/* The lead-in paragraph ends on its comma and the question is set below it,
   the way a block quotation is introduced. The client's sentence is intact. */
.st-ask {
  margin: 0; font-size: clamp(24px,3.2vw,34px); line-height: 1.28; color: var(--gold);
  border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,2.8vw,28px); max-width: 32ch;
}

/* 1992 -------------------------------------------------------------------- */
.st-1992 { background: #FFFFFF; padding: clamp(66px,9vw,104px) 0 clamp(64px,9vw,108px); }
.st-1992-grid { display: grid; gap: clamp(24px,4vw,64px); align-items: start; }
.st-kicker {
  display: block; font-family: var(--font-body); font-size: clamp(11px,1vw,12px);
  letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze);
  margin-bottom: clamp(12px,1.6vw,16px);
}
.st-year { display: block; font-size: clamp(62px,9vw,112px); line-height: .86; letter-spacing: -.03em; color: var(--ink); }
.st-tick { display: block; width: clamp(62px,7vw,88px); height: 2px; background: var(--star); transform-origin: left center; margin: clamp(16px,2.2vw,22px) 0 0; }
.st-1992-copy { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(24px,3.2vw,34px); }
.st-official { margin: 0; font-size: clamp(28px,4vw,40px); line-height: 1.16; letter-spacing: -.018em; color: var(--ink); max-width: 28ch; }

/* Growth ------------------------------------------------------------------ */
.st-growth { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(70px,9vw,100px) 0 clamp(76px,10vw,108px); }
.st-growth::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 42% at 96% 8%, rgba(216,240,244,.1), transparent 62%),
              radial-gradient(48% 40% at 0% 96%, rgba(224,167,58,.16), transparent 64%);
}
.st-growth-grid { position: relative; display: grid; gap: clamp(30px,5vw,88px); align-items: start; }
.st-growth-copy { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); }
.st-lead { margin: 0; font-size: clamp(25px,3.4vw,42px); line-height: 1.14; letter-spacing: -.02em; color: var(--canvas); max-width: 26ch; }
.st-growth-body { border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,3vw,30px); }
.st-officers { display: flex; flex-direction: column; }
.st-officer { border-top: 1px solid rgba(255,217,168,.36); padding: clamp(18px,2.4vw,24px) 0; }
.st-officer:last-child { border-bottom: 1px solid rgba(255,217,168,.36); }
.st-role {
  display: block; font-family: var(--font-body); font-size: clamp(11px,1vw,12px);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--mist); margin-bottom: 10px;
}
.st-name { display: block; font-size: clamp(27px,3.2vw,38px); line-height: 1.06; color: var(--gold); }

/* Best summer ------------------------------------------------------------- */
/* #272 "too much space at bottom": the seal makes the left column the taller
   one, so the button column now sits on the same baseline as the pull-quote
   instead of floating mid-height over a band of empty canvas. */
.st-close { background: var(--canvas); padding: clamp(64px,8vw,92px) 0 clamp(52px,6vw,72px); }
.st-close-grid { display: grid; gap: clamp(34px,5vw,88px); align-items: end; }
.st-said {
  margin: clamp(26px,3.4vw,34px) 0 0; font-size: clamp(31px,4.6vw,56px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink);
  border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(24px,3vw,32px); max-width: 22ch;
}
.st-h2 { margin: 0 0 clamp(16px,2.2vw,22px); font-size: clamp(31px,4.6vw,56px); line-height: 1; letter-spacing: -.022em; color: var(--ink); max-width: 16ch; }
.st-close-lead { margin: 0 0 clamp(28px,3.8vw,40px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.72; color: rgba(11,40,71,.9); max-width: 42ch; }
.st-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--heritage); color: var(--canvas);
  text-decoration: none; padding: 22px clamp(28px,3.4vw,44px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.st-cta:hover { background: var(--heritage-deep); color: var(--gold); gap: 20px; }
.st-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Entrance ---------------------------------------------------------------- */
/* The 1992 rule draws out from its left edge instead of rising, so it needs
   its own landing rule — the shared [data-reveal].is-in reset ties on
   specificity and would otherwise leave the transform to whichever rule sits
   later in the file. */
html.reveal-ready .st-tick[data-reveal] {
  opacity: 1; transform: scaleX(0);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1) 200ms;
}
html.reveal-ready .st-tick[data-reveal].is-in { transform: scaleX(1); }

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 1000px) {
  .st-begins-grid { grid-template-columns: .44fr .56fr; }
  .st-1992-grid { grid-template-columns: 280px 1fr; }
  .st-growth-grid { grid-template-columns: .40fr .60fr; }
  /* Copy leads in the source order so it reads first on a phone; on a wide
     screen the leadership takes the left column beside it. */
  .st-officers { grid-column: 1; grid-row: 1; }
  .st-growth-copy { grid-column: 2; grid-row: 1; }
  .st-close-grid { grid-template-columns: .56fr .44fr; }
}
@media (prefers-reduced-motion: reduce) {
  .st-mast-img { animation: none; transform: scale(1.05); }
  .st-frame img, .st-cta { transition: none; }
}

/* --- Our Team -------------------------------------------------------------
   Implementation of "Our Team.dc.html" from the Claude Design project.
   A lakeside plate that pans under the title, the year drawn as ten waiting
   months against two of camp, the three officers as ruled rows whose full
   stories open in place, and a navy recruiting block under the lodge photo.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.tm-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.tm-h1, .tm-h2, .tm-say, .tm-say-gold, .tm-name, .tm-quip,
.tm-jobs-h, .tm-close-h { font-family: var(--font-serif); font-weight: 400; }

/* Body copy carries a class rather than a descendant `p` selector, so the
   serif display lines beside it never lose a specificity race. */
.tm-p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.78; }
.tm-p-ink { color: rgba(11,40,71,.9); }
.tm-p-canvas { color: var(--canvas); opacity: .92; max-width: 62ch; }
.tm-p-canvas a { color: var(--gold); text-decoration-color: rgba(255,217,168,.55); }
.tm-p-canvas a:hover { color: var(--canvas); text-decoration-color: var(--canvas); }

/* Masthead ---------------------------------------------------------------- */
/* #315: taller banner, photo anchored at its top and zoomed around the girls' heads,
   so their heads sit below the logo at every width (capped to the screen height). */
.tm-mast { position: relative; height: clamp(560px, calc(60vw + 230px), min(900px, 94vh)); overflow: hidden; background: var(--heritage); }
.tm-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 40% 0%; transform-origin: 40% 20%; transform: scale(1.05); animation: tmPan 28s ease-out forwards;
}
@keyframes tmPan { 0% { transform: scale(1.05); } 100% { transform: scale(1.12); } }
.tm-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.5) 0%, rgba(7,27,49,.18) 30%, rgba(7,27,49,.82) 80%, var(--heritage) 100%);
}
.tm-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px,5.8vw,78px); color: var(--canvas); }
.tm-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.6vw,30px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.tm-eyebrow-ink { color: var(--bronze); margin-bottom: clamp(16px,2.2vw,26px); }
.tm-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.tm-h1 {
  margin: 0; font-size: clamp(31px,5.8vw,78px); line-height: 1.02; letter-spacing: -.028em;
  color: var(--canvas); max-width: 22ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.tm-script {
  display: block; font-family: var(--font-script); font-style: italic;
  font-size: clamp(36px,6.6vw,88px); line-height: .96; letter-spacing: -.01em;
  color: var(--gold); margin-top: clamp(4px,.6vw,8px);
}

/* Ten months for two ------------------------------------------------------ */
.tm-ten { background: var(--canvas); padding: clamp(60px,8vw,96px) 0 clamp(70px,9vw,104px); }

.tm-ten-grid { display: grid; gap: clamp(28px,4.6vw,80px); align-items: start; }
.tm-say { margin: 0; font-size: clamp(25px,3.6vw,42px); line-height: 1.16; letter-spacing: -.018em; color: var(--ink); max-width: 26ch; }
.tm-ten-body { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,24px); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(22px,2.8vw,30px); }

/* Leadership -------------------------------------------------------------- */
.tm-leaders { background: #FFFFFF; padding: clamp(64px,9vw,104px) 0 clamp(70px,10vw,112px); }
.tm-leader { border-top: 1px solid rgba(11,40,71,.26); transition: background 300ms ease; }
.tm-leader:last-child { border-bottom: 1px solid rgba(11,40,71,.26); }
.tm-leader:hover { background: var(--canvas); }
.tm-leader-row { display: grid; gap: clamp(18px,3.2vw,48px); padding: clamp(30px,4vw,48px) 0 clamp(28px,3.6vw,44px); align-items: start; }
/* On phones the cream hover/open tint runs edge to edge, so the row needs its
   own side padding or the type sits on the tint's left edge. */
@media (max-width: 759px) {
  .tm-leader-row { padding-left: 16px; padding-right: 16px; }
}
.tm-avatar {
  width: clamp(72px,9vw,112px); height: clamp(72px,9vw,112px); background: var(--heritage);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tm-avatar span { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px,3.4vw,40px); line-height: 1; letter-spacing: .02em; color: var(--gold); }
.tm-name { margin: 0 0 12px; font-size: clamp(26px,3.4vw,40px); line-height: 1.04; letter-spacing: -.018em; color: var(--ink); }
.tm-role { display: block; font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.tm-bio { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.5vw,18px); line-height: 1.78; color: rgba(11,40,71,.9); max-width: 62ch; }
.tm-quip { margin: 0; font-size: clamp(21px,2.6vw,28px); line-height: 1.34; color: var(--ink); max-width: 34ch; }

/* The panel animates on grid-template-rows so the bio keeps its natural
   height — no measured pixel value to go stale when the text rewraps. */
.tm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms cubic-bezier(.2,.7,.2,1); }
.tm-leader[data-tm-open] .tm-panel { grid-template-rows: 1fr; }
.tm-panel-clip { overflow: hidden; }
.tm-panel-in {
  display: flex; flex-direction: column; gap: clamp(16px,2vw,22px);
  margin-top: clamp(18px,2.2vw,22px); border-top: 1px solid rgba(11,40,71,.22); padding-top: clamp(20px,2.4vw,24px);
}
.tm-more {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(18px,2.4vw,24px);
  min-height: 44px; font-family: var(--font-body); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--star); padding: 0 2px 4px;
  cursor: pointer; transition: color 220ms ease, gap 220ms ease;
}
.tm-more:hover { color: var(--bronze); gap: 18px; }
.tm-more:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.tm-more-arrow { font-size: 16px; line-height: 1; }
.tm-leader[data-tm-open] .tm-more-shut { display: none; }
.tm-leader:not([data-tm-open]) .tm-more-open { display: none; }

.tm-cta-ghost {
  display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(11,40,71,.5);
  color: var(--ink); text-decoration: none; padding: 18px clamp(26px,3.2vw,40px); min-height: 44px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.tm-cta-ghost:hover { background: var(--heritage); color: var(--canvas); gap: 20px; }
.tm-cta-ghost:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Join our team ----------------------------------------------------------- */
.tm-join { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(68px,9vw,104px) 0 clamp(74px,10vw,108px); }
.tm-join::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 40% at 4% 6%, rgba(216,240,244,.1), transparent 62%),
              radial-gradient(52% 44% at 100% 92%, rgba(224,167,58,.16), transparent 64%);
}
.tm-join-grid { position: relative; display: grid; gap: clamp(30px,5vw,84px); align-items: start; }
.tm-h2 { margin: 0 0 clamp(16px,2.2vw,22px); font-size: clamp(31px,4.4vw,60px); line-height: 1; letter-spacing: -.025em; color: var(--canvas); max-width: 15ch; }
.tm-say-gold { margin: 0; font-size: clamp(21px,2.7vw,28px); line-height: 1.36; color: var(--gold); max-width: 26ch; }
.tm-join-body { display: flex; flex-direction: column; gap: clamp(16px,2.2vw,22px); border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(22px,3vw,30px); }
.tm-cta-outline {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px,3.4vw,36px);
  border: 1px solid rgba(255,217,168,.6); color: var(--canvas); text-decoration: none;
  padding: 20px clamp(26px,3.2vw,40px); min-height: 44px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.tm-cta-outline:hover { background: var(--canvas); color: var(--heritage); gap: 20px; }
.tm-cta-outline:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.tm-cta-outline.tm-cta-tight { margin-top: clamp(4px,1vw,10px); }

.tm-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(255,217,168,.42); }
.tm-frame-crop { overflow: hidden; }
.tm-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(.2,.7,.2,1); }
.tm-frame img:hover { transform: scale(1.04); }
/* The lodge shot sits under the grid at its own aspect ratio — `contain`
   with an auto height, so nobody in the group photo gets cropped out. */
.tm-join-shot { position: relative; margin: clamp(36px,5.6vw,72px) auto 0; max-width: 1000px; }
.tm-frame img.tm-join-img { height: auto; object-fit: contain; }
/* #316: a leader photo sits under the name and title. */
.tm-frame.tm-leader-shot { margin-top: clamp(18px,2.2vw,26px); max-width: 260px; padding: clamp(6px,.8vw,9px); border-color: rgba(11,40,71,.26); }
.tm-leader-shot img { aspect-ratio: 4 / 5; height: auto; }
.tm-frame.tm-leader-shot-wide { max-width: 320px; }
.tm-leader-shot-wide img { aspect-ratio: 4 / 3; }

.tm-jobs {
  position: relative; display: grid; gap: clamp(20px,4.4vw,84px); margin-top: clamp(46px,6.6vw,74px);
  border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(26px,3.4vw,34px); align-items: start;
}
.tm-jobs-h { margin: 0; font-size: clamp(26px,3.2vw,38px); line-height: 1.06; color: var(--gold); }
.tm-jobs-p { margin: 0; }

/* Ready to meet your Camp Specialist? ------------------------------------- */
.tm-close { background: var(--canvas); padding: clamp(68px,9vw,100px) 0 clamp(74px,10vw,108px); }
.tm-close-grid { display: grid; gap: clamp(30px,5vw,88px); align-items: center; }
.tm-close-h { margin: 0; font-size: clamp(31px,4.6vw,60px); line-height: 1; letter-spacing: -.024em; color: var(--ink); max-width: 17ch; }
.tm-close-body { border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(24px,3vw,32px); }
.tm-close-lead { margin: 0 0 clamp(28px,3.8vw,38px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.72; color: rgba(11,40,71,.9); max-width: 42ch; }
.tm-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--heritage); color: var(--canvas);
  text-decoration: none; padding: 22px clamp(28px,3.4vw,44px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.tm-cta:hover { background: var(--heritage-deep); color: var(--gold); gap: 20px; }
.tm-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Entrance ---------------------------------------------------------------- */

/* Tablet ------------------------------------------------------------------ */
@media (min-width: 900px) {
  /* The initials tile only earns its own column once the row is wide enough
     to carry it without squeezing the name. */
  .tm-leader-row { grid-template-columns: clamp(72px,9vw,112px) minmax(190px,.26fr) 1fr; }
}
/* Desktop ----------------------------------------------------------------- */
@media (min-width: 1000px) {
  .tm-ten-grid { grid-template-columns: .52fr .48fr; }
  .tm-join-grid { grid-template-columns: .44fr .56fr; }
  .tm-jobs { grid-template-columns: .34fr .66fr; }
  .tm-close-grid { grid-template-columns: .52fr .48fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-mast-img { animation: none; transform: scale(1.05); }
  .tm-frame img, .tm-cta, .tm-cta-outline, .tm-cta-ghost, .tm-more, .tm-leader, .tm-panel { transition: none; }
}

/* --- Our Process ----------------------------------------------------------
   Implementation of "Our Process.dc.html" from the Claude Design project.
   A white masthead with the title and the promise side by side, the three
   steps hung off a rail that draws itself, and the camp list as a filterable
   index.

   The masthead is white, not a photograph — so this page's <body> carries
   "solid-header" and the section pads down past the fixed header, or the
   header's white type would sit on white.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.pc-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.pc-h1, .pc-h2, .pc-h3, .pc-free-say, .pc-steps-h,
.pc-side-h, .pc-nomatch { font-family: var(--font-serif); font-weight: 400; }

/* Masthead ---------------------------------------------------------------- */
.pc-mast { background: #FFFFFF; padding: clamp(128px,15vw,176px) 0 0; }
.pc-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(24px,3.4vw,40px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze);
}
.pc-eyebrow-mist { color: var(--mist); }
.pc-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.pc-mast-grid { display: grid; gap: clamp(24px,4.4vw,80px); align-items: end; padding-bottom: clamp(32px,4.4vw,52px); }
/* #252: the seal sits beside the page title instead of floating in the empty
   column next to the intro. */
.pc-title-row { display: flex; align-items: center; gap: clamp(18px,2.4vw,32px); margin: 0 0 clamp(22px,3vw,40px); }
.pc-title-row .pc-h1 { margin: 0; }
.pc-title-row .pc-title-seal img { width: clamp(64px,7vw,104px); }
.pc-h1 { margin: 0 0 clamp(22px,3vw,40px); font-size: clamp(42px,6.4vw,88px); line-height: .94; letter-spacing: -.032em; color: var(--ink); }
.pc-script { font-family: var(--font-script); font-style: italic; font-size: 1.19em; line-height: .9; color: var(--bronze); }
.pc-mast-lead {
  margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,19px); line-height: 1.74;
  color: rgba(11,40,71,.9); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(20px,2.4vw,26px);
}

/* Frames ------------------------------------------------------------------ */
.pc-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(11,40,71,.22); }
.pc-frame-crop { overflow: hidden; }
.pc-frame img { display: block; width: 100%; object-fit: cover; transition: transform 1400ms cubic-bezier(.2,.7,.2,1); }
.pc-frame img:hover { transform: scale(1.03); }
.pc-mast-img { height: clamp(260px,36vw,520px); }
/* Cropped to a band, per the design. Safe here where the lodge photo was not:
   this is one camper on a wall, not a group anyone can be cut out of. */
.pc-side-img { height: clamp(300px,42vw,560px); object-position: 50% 34%; }

/* Entirely free ----------------------------------------------------------- */
.pc-free { background: #FFFFFF; padding: clamp(42px,6vw,64px) 0 clamp(64px,9vw,96px); }
.pc-free-band {
  display: flex; align-items: baseline; justify-content: space-between; gap: clamp(24px,5vw,60px);
  border-top: 1px solid var(--star); border-bottom: 1px solid rgba(11,40,71,.22);
  padding: clamp(22px,3vw,30px) 0 clamp(24px,3.2vw,32px);
}
.pc-free-say { margin: 0; font-size: clamp(24px,3.4vw,40px); line-height: 1.1; letter-spacing: -.018em; color: var(--ink); max-width: 30ch; }


/* Three steps ------------------------------------------------------------- */
.pc-steps { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(66px,8.6vw,96px) 0 clamp(72px,9.4vw,104px); }
.pc-steps::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 38% at 2% 4%, rgba(216,240,244,.1), transparent 62%),
              radial-gradient(50% 42% at 100% 96%, rgba(224,167,58,.15), transparent 64%);
}
.pc-steps-in { position: relative; }
.pc-steps-h { margin: 0 0 clamp(28px,4vw,52px); text-align: center; font-size: clamp(38px,6vw,78px); line-height: 1; letter-spacing: -.026em; color: var(--canvas); }
.pc-steps-script { font-family: var(--font-script); font-style: italic; font-size: 1.2em; line-height: .9; color: var(--gold); }

/* The 1px grid gap IS the rule between cells — the container's background
   shows through it, so photos and cards share one continuous gold grid. */
.pc-grid {
  display: grid; gap: 1px; background: rgba(255,217,168,.45);
  border: 1px solid rgba(255,217,168,.45);
}
/* #174: three steps, one row, nothing else — the three photo cells made it
   six boxes in a checkerboard that read out of order and ran off the screen. */
.pc-cell-img { display: none; }
.pc-cell-img img { display: block; width: 100%; height: 100%; min-height: clamp(210px,26vw,280px); object-fit: cover; }
/* Single column on phones: a portrait photo at its own aspect ran 560px tall,
   so the cells take a fixed height there and crop to their focal point. */
@media (max-width: 759px) {
  .pc-cell-img img { height: 320px; min-height: 0; }
}
.pc-card { background: var(--canvas); padding: clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px) clamp(24px,2.8vw,32px); display: flex; flex-direction: column; }
.pc-num { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(29px,3.2vw,38px); line-height: 1; letter-spacing: -.01em; color: var(--bronze); margin-bottom: clamp(13px,1.6vw,18px); }
.pc-h3 { margin: 0 0 clamp(14px,1.8vw,20px); font-size: clamp(24px,2.8vw,33px); line-height: 1.06; letter-spacing: -.014em; color: var(--ink); }
.pc-card p { margin: 0; font-family: var(--font-body); font-size: clamp(15px,1.2vw,15.5px); line-height: 1.6; color: rgba(11,40,71,.9); }
.pc-card a { display: inline-block; margin-top: clamp(16px,2vw,22px); font-family: var(--font-body); font-size: 14.5px; font-weight: 700; letter-spacing: .03em; }

.pc-steps-foot { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px,3vw,32px); margin-top: clamp(28px,4vw,40px); }
.pc-foot-say { flex: none; white-space: nowrap; font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px,2.4vw,28px); line-height: 1.1; color: var(--gold); }
.pc-foot-rule { flex: 1; min-width: 30px; height: 1px; background: rgba(255,217,168,.5); }
.pc-foot-link { flex: none; white-space: nowrap; font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px,2.4vw,28px); line-height: 1.1; color: var(--canvas); text-decoration-color: var(--star); }
.pc-foot-link:hover { color: var(--gold); }

/* By your side ------------------------------------------------------------ */
.pc-side { background: var(--canvas); padding: clamp(68px,9vw,100px) 0 clamp(72px,10vw,104px); }
.pc-side-grid { display: grid; gap: clamp(28px,4.8vw,80px); align-items: center; }
.pc-side-h { margin: 0 0 clamp(20px,2.6vw,26px); font-size: clamp(29px,4.2vw,56px); line-height: 1.02; letter-spacing: -.024em; color: var(--ink); max-width: 20ch; }
.pc-side-body { display: flex; flex-direction: column; gap: clamp(16px,2.2vw,22px); border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(22px,2.8vw,28px); }
.pc-side-body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,19px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 52ch; }

/* Our Camps --------------------------------------------------------------- */
.pc-camps { background: var(--heritage); color: var(--canvas); padding: clamp(68px,9vw,100px) 0 clamp(74px,10vw,108px); }
.pc-camps-head { display: grid; gap: clamp(24px,4.4vw,80px); align-items: end; margin-bottom: clamp(26px,3.6vw,44px); }
/* A navy pennant pointing into the list it labels. */
.pc-camps-h {
  /* It is a grid item, so inline-block alone will not stop it stretching to
     the column — justify-self does. */
  margin: 0; justify-self: start; align-self: end;
  background: var(--heritage); color: var(--gold);
  font-family: var(--font-body); font-size: clamp(11px,1.1vw,12.5px); letter-spacing: .28em;
  text-transform: uppercase; font-weight: 700; line-height: 1;
  padding: 14px 40px 14px 22px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.pc-camps-side { border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(20px,2.4vw,26px); }
.pc-camps-lead { margin: 0 0 clamp(18px,2.2vw,26px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.76; color: rgba(11,40,71,.9); max-width: 56ch; }
.pc-filter { display: flex; align-items: center; gap: clamp(12px,2vw,20px); flex-wrap: wrap; }
.pc-filter input {
  flex: 1; min-width: min(300px, 100%); min-height: 52px; padding: 14px 18px;
  background: var(--canvas); border: 1px solid rgba(11,40,71,.3); border-radius: 0;
  color: var(--ink); font-family: var(--font-body); font-size: 16.5px; outline: none;
  transition: border-color 220ms ease, background 220ms ease;
}
.pc-filter input:focus { border-color: var(--bronze); background: #FFFFFF; }
.pc-count { font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
/* #199: four titled groups in a two-up grid, each a single column, so no row
   ever staggers against its neighbour the way the old three-up alphabet did.
   The head above already closes on a rule, so the wrap draws none of its own. */
.pc-groups { display: grid; gap: clamp(30px,4vw,44px) clamp(36px,5.6vw,80px); }
.pc-group[hidden] { display: none; }
.pc-group-h {
  margin: 0; padding: 0 4px 12px; border-bottom: 1px solid rgba(11,40,71,.26);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700; line-height: 1; color: var(--bronze);
}
.pc-list { margin: 0; padding: 0; list-style: none; }
.pc-camp {
  display: flex; align-items: flex-start; gap: 15px; padding: 14px 8px 13px 4px;
  border-bottom: 1px solid rgba(11,40,71,.16); transition: background 260ms ease;
}
.pc-camp:hover { background: var(--canvas); }
/* The filter hides rows with the hidden attribute; display:flex above would
   otherwise win over the UA's [hidden] rule and every row would stay put. */
.pc-camp[hidden] { display: none; }
/* The brand star (assets/brand/cs-star.svg, the same glyph as .tn-star) as the
   list marker — the client asked for stars in place of the pennants (pin #202).
   Sized to sit on the first line of the 15–16.5px copy; it deepens to navy on hover. */
.pc-camp-star {
  flex: none; margin-top: 4px; width: 14px; height: 16px; color: var(--star);
  transition: transform 300ms cubic-bezier(.2,.7,.2,1), color 260ms ease;
}
.pc-camp:hover .pc-camp-star { transform: scale(1.18); color: var(--heritage); }
.pc-camp-copy { font-family: var(--font-body); font-size: clamp(15px,1.4vw,16.5px); line-height: 1.54; color: var(--ink); }
/* The long entries keep every word of the client copy, but the qualifier
   ("for athletes", "lake and pool") steps back so the type name scans first. */
.pc-camp-sub { color: rgba(11,40,71,.62); }
.pc-camp-sub::before { content: "\2014\00a0"; }
/* #256: on blue. Written as overrides so the list keeps one set of base rules. */
.pc-camps .pc-camps-h {
  background: none; clip-path: none; padding: 0; color: var(--canvas);
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px,4.2vw,54px);
  letter-spacing: -.02em; text-transform: none; line-height: 1;
}
.pc-camps .pc-group-h { color: var(--gold); border-bottom-color: rgba(255,217,168,.34); }
.pc-camps .pc-camp { border-bottom-color: rgba(255,217,168,.18); }
.pc-camps .pc-camp:hover { background: rgba(255,246,236,.06); }
.pc-camps .pc-camp-copy { color: var(--canvas); }
.pc-camps .pc-camp-sub { color: rgba(255,246,236,.66); }
.pc-camps .pc-camp:hover .pc-camp-star { color: var(--gold); }
.pc-nomatch { margin: 0; padding: clamp(26px,4vw,42px) 6px; font-size: clamp(19px,2.2vw,26px); line-height: 1.4; color: rgba(11,40,71,.7); }

/* The round CS submark closes every page's final CTA (pin from Stacy:
   "use the round logo here instead of stars"). One rule, because the five
   sections had five copies of the same centred block. */
/* Left by default, so a stacked seal lines up with the copy above it.
   .cs-seal-column marks the ones that get an ornament column of their own
   at 1000px, where centring reads as the right side of the band. */
.cs-seal { display: flex; justify-content: flex-start; }
.cs-seal img { display: block; width: clamp(104px,13vw,164px); height: auto; }
/* Where it follows the button rather than sitting in its own column, it
   needs the gap the grid would otherwise have given it. */
a + .cs-seal, h2 + .cs-seal, p + .cs-seal { margin-top: clamp(26px,3.4vw,40px); }
.cs-seal:first-child { margin-bottom: clamp(26px,3.4vw,40px); }

/* Get started ------------------------------------------------------------- */
/* Light ground, so it reads apart from the navy camp list above it. */
.pc-close { background: var(--canvas); color: var(--ink); padding: clamp(68px,9vw,100px) 0 clamp(74px,10vw,108px); }
.pc-close-grid { display: grid; gap: clamp(30px,5vw,88px); align-items: center; }
.pc-cta {
  display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--heritage); background: var(--heritage);
  color: var(--canvas); text-decoration: none; padding: 22px clamp(28px,3.4vw,44px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.pc-cta:hover { background: var(--bronze); border-color: var(--bronze); color: var(--canvas); gap: 20px; }
.pc-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Entrance ---------------------------------------------------------------- */
/* Tablet / desktop -------------------------------------------------------- */
@media (min-width: 760px) {
  .pc-groups { grid-template-columns: repeat(2, 1fr); }
  /* Two up pairs each photo with its step; three up gives the checkerboard. */
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  /* #174: the three steps sit in one row, left to right, with the photos as a
     low strip beneath — the checkerboard sent the eye zig-zagging and ran off
     the screen. DOM order is photo, card, photo, card, photo, card. */
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-side-grid { grid-template-columns: .46fr .54fr; }
  .pc-camps-head { grid-template-columns: .42fr .58fr; }
  .pc-close-grid { grid-template-columns: 1.06fr .94fr; }
  .cs-seal-column { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-frame img, .pc-cta, .pc-camp, .pc-camp-star, .pc-filter input { transition: none; }
}

/* --- Contact --------------------------------------------------------------
   Implementation of "Contact.dc.html" from the Claude Design project.
   A lake-at-sunset plate that pans under the title, the three ways to reach
   us set in a grid of photographs and cards, the real inquiry form as three
   ruled rows on navy, and the newsletter to close.

   The form keeps every name, id and required flag the live one had —
   site.js reads them straight off FormData and posts to the Apps Script
   endpoint, so the markup here is restyled, never rebuilt.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.ct-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.ct-h1, .ct-reach-h, .ct-form-h, .ct-row-h, .ct-news-h, .ct-big, .ct-reassure { font-family: var(--font-serif); font-weight: 400; }
.ct-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead ---------------------------------------------------------------- */
.ct-mast { position: relative; height: clamp(420px,56vw,660px); overflow: hidden; background: var(--heritage); }
.ct-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 46%; transform: scale(1.05); animation: ctPan 30s ease-out forwards;
}
@keyframes ctPan { 0% { transform: scale(1.05); } 100% { transform: scale(1.12) translateY(-1.4%); } }
.ct-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.46) 0%, rgba(7,27,49,.14) 32%, rgba(7,27,49,.8) 82%, var(--heritage) 100%);
}
.ct-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px,5.6vw,76px); color: var(--canvas); }
.ct-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,28px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
  /* #279 "cant see contact us": the masthead scrim is near-transparent at
     this height, so 11px mist blue vanished into the sunset behind it. The
     h1 is big enough to survive on its own; this line is not. */
  text-shadow: 0 1px 14px rgba(7,27,49,.95), 0 1px 3px rgba(7,27,49,.85);
}
.ct-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
/* The masthead label is the page's name, so it reads as one: larger,
   gold, a heavier rule. The form's "Get matched" label keeps the small size. */
.ct-mast .ct-eyebrow { font-size: clamp(15px,1.6vw,20px); letter-spacing: .22em; color: var(--gold); gap: 18px; }
.ct-mast .ct-eyebrow-rule { width: clamp(40px,4.6vw,64px); height: 2px; }
.ct-h1 {
  margin: 0; font-size: clamp(34px,5.7vw,82px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--canvas); max-width: 24ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.ct-script { font-family: var(--font-script); font-style: italic; font-size: 1.22em; line-height: .94; color: var(--gold); }

/* Reach us ---------------------------------------------------------------- */
.ct-reach { background: #FFFFFF; padding: clamp(60px,8vw,88px) 0 clamp(66px,9vw,96px); }
.ct-reach-h { margin: 0 0 clamp(26px,3.6vw,46px); font-size: clamp(29px,4.2vw,56px); line-height: 1.02; letter-spacing: -.024em; color: var(--ink); max-width: 24ch; }
/* Phones: one line — 6.4vw measures 310px at 375 and 265px at 320. */
@media (max-width: 479px) { .ct-reach-h { font-size: 6.4vw; white-space: nowrap; max-width: none; } }
/* Same device as Our Process: the 1px gap over a tinted ground is the rule. */
.ct-grid { display: grid; gap: 1px; background: rgba(11,40,71,.24); border: 1px solid rgba(11,40,71,.24); }
.ct-cell-img { overflow: hidden; background: var(--canvas); }
.ct-cell-img img { display: block; width: 100%; height: 100%; min-height: clamp(220px,26vw,300px); object-fit: cover; }
.ct-card { background: var(--canvas); padding: clamp(28px,3.2vw,40px) clamp(22px,2.6vw,34px) clamp(30px,3.4vw,42px); display: flex; flex-direction: column; justify-content: center; }
.ct-card-ink { background: var(--heritage); }
.ct-kick {
  display: block; font-family: var(--font-body); font-size: clamp(10.5px,1vw,11.5px);
  letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze);
  margin-bottom: clamp(16px,2vw,22px);
}
.ct-card-ink .ct-kick { color: var(--gold); }
.ct-big {
  font-size: clamp(28px,3.6vw,44px); line-height: 1.06; letter-spacing: -.018em; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--star); padding-bottom: 8px;
  align-self: flex-start; transition: color 240ms ease;
}
.ct-big:hover { color: var(--bronze); }
.ct-big-sm { font-size: clamp(19px,2.5vw,33px); line-height: 1.12; letter-spacing: -.014em; color: var(--canvas); border-bottom-color: rgba(255,217,168,.6); }
.ct-big-sm:hover { color: var(--gold); }
.ct-card-p { margin: clamp(20px,2.4vw,26px) 0 0; font-family: var(--font-body); font-size: clamp(15.5px,1.4vw,16.5px); line-height: 1.68; color: rgba(11,40,71,.9); }
.ct-start {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  background: var(--heritage); color: var(--canvas); text-decoration: none;
  padding: 17px clamp(24px,2.8vw,34px); min-height: 44px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.ct-start:hover { background: var(--heritage-deep); color: var(--gold); gap: 20px; }
.ct-start:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Get started ------------------------------------------------------------- */
.ct-get { position: relative; overflow: hidden; background: var(--heritage); color: var(--canvas); padding: clamp(66px,8.6vw,96px) 0 clamp(72px,9.4vw,104px); }
.ct-get::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 38% at 2% 4%, rgba(216,240,244,.1), transparent 62%),
              radial-gradient(50% 42% at 100% 96%, rgba(224,167,58,.15), transparent 64%);
}
.ct-get-in { position: relative; }
.ct-eyebrow-mist { color: var(--mist); }
.ct-get-head { display: grid; gap: clamp(22px,4.4vw,80px); align-items: end; margin-bottom: clamp(32px,4.6vw,56px); }
.ct-form-h { margin: 0; font-size: clamp(33px,4.8vw,62px); line-height: 1; letter-spacing: -.026em; color: var(--canvas); max-width: 14ch; }
.ct-form-lead { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,19px); line-height: 1.74; color: var(--canvas); opacity: .92; border-top: 1px solid rgba(255,217,168,.36); padding-top: clamp(20px,2.4vw,26px); max-width: 52ch; }
.ct-req { color: var(--gold); }

/* Three ruled rows, the same shape as the client's own field groups. */
.ct-form { border-top: 1px solid rgba(255,217,168,.4); }
.ct-row { display: grid; gap: clamp(20px,4vw,64px); padding: clamp(28px,3.6vw,44px) 0 clamp(30px,3.8vw,46px); border-bottom: 1px solid rgba(255,217,168,.4); }
.ct-row-last { border-bottom: 0; padding-bottom: 4px; }
.ct-row-h { margin: 0; font-size: clamp(24px,2.9vw,34px); line-height: 1.06; color: var(--gold); }
.ct-fields { display: grid; gap: clamp(22px,2.6vw,34px) clamp(24px,3.4vw,44px); }
/* minmax(0,...) — a bare 1fr floors at the content's min width, and the
   paired State/Zip cell is wide enough to skew the two columns. */
.ct-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,3.4vw,44px); }
.ct-field { display: flex; flex-direction: column; gap: 11px; }
.ct-lbl { font-family: var(--font-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.ct-field input, .ct-field select {
  min-height: 52px; padding: 13px 2px; background: none; border: 0;
  border-bottom: 1px solid rgba(255,217,168,.5); border-radius: 0;
  color: var(--canvas); font-family: var(--font-body); font-size: clamp(17px,1.6vw,19px);
  outline: none; transition: border-color 240ms ease;
}
.ct-field input:focus, .ct-field select:focus { border-bottom-color: var(--gold); }
.ct-field input::placeholder { color: rgba(255,246,236,.62); }
.ct-field select option { color: var(--ink); }

/* Radios keep the real name/value pairs the endpoint expects; only the paint
   changes. The input stays in the layer under the label so focus is real. */
/* #276 - the "Other" write-in. .field and .ct-other both set a display, which
   beats the UA's [hidden] rule, so the field would sit open on every form
   until it is told otherwise. Same trap as .pc-camp[hidden]. */
[data-other-field][hidden] { display: none; }
.ct-other { display: block; margin-top: clamp(14px,1.8vw,18px); }
.ct-other input {
  width: 100%; max-width: 460px; min-height: 52px; padding: 14px 18px;
  background: var(--canvas); border: 1px solid rgba(11,40,71,.3); border-radius: 0;
  color: var(--ink); font-family: var(--font-body); font-size: 16.5px; outline: none;
  transition: border-color 220ms ease, background 220ms ease;
}
.ct-other input:focus { border-color: var(--bronze); background: #FFFFFF; }

.ct-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.ct-chips-wide { gap: 12px; margin-bottom: clamp(28px,3.6vw,44px); }
.ct-chip { position: relative; display: inline-flex; }
.ct-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ct-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px clamp(20px,2.4vw,32px);
  font-family: var(--font-body); font-size: clamp(14px,1.4vw,15.5px); font-weight: 600; letter-spacing: .05em;
  color: var(--canvas); background: transparent; border: 1px solid rgba(255,217,168,.5);
  transition: background 240ms ease, color 240ms ease;
}
.ct-chip input:checked + span { background: var(--gold); color: var(--heritage); }
.ct-chip input:focus-visible + span { outline: 2px solid var(--star); outline-offset: 3px; }

.ct-send { display: flex; align-items: center; gap: clamp(20px,3.4vw,40px); flex-wrap: wrap; border-top: 1px solid rgba(255,217,168,.4); padding-top: clamp(26px,3vw,36px); }
.ct-submit {
  display: inline-flex; align-items: center; gap: 12px; background: var(--canvas); color: var(--heritage);
  border: 0; cursor: pointer; padding: 22px clamp(28px,3.6vw,46px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, gap 260ms ease;
}
.ct-submit:hover { background: var(--gold); gap: 20px; }
.ct-submit:disabled { opacity: .6; cursor: default; }
.ct-submit:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.ct-reassure { margin: 0; font-size: clamp(19px,2.1vw,24px); line-height: 1.3; color: var(--gold); max-width: 32ch; }

/* Thank-you state — site.js swaps .hidden between this and the form. */
.ct-success { display: grid; gap: clamp(28px,5vw,80px); align-items: start; border-top: 1px solid rgba(255,217,168,.4); padding: clamp(40px,5.4vw,64px) 0 20px; }
.ct-thanks { display: block; font-family: var(--font-script); font-style: italic; font-size: clamp(52px,7vw,92px); line-height: .94; color: var(--gold); margin-bottom: clamp(14px,1.8vw,20px); }
.ct-thanks-p { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,19px); line-height: 1.74; color: var(--canvas); opacity: .92; max-width: 46ch; }
.ct-again {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(24px,3vw,34px);
  min-height: 44px; background: none; border: 0; border-bottom: 1px solid var(--star);
  padding: 0 2px 5px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--canvas);
  transition: color 220ms ease, gap 220ms ease;
}
.ct-again:hover { color: var(--gold); gap: 18px; }
.ct-frame { padding: clamp(8px,1vw,12px); border: 1px solid rgba(255,217,168,.42); }
.ct-frame-crop { overflow: hidden; }
.ct-frame img { display: block; width: 100%; height: clamp(200px,26vw,300px); object-fit: cover; }

/* Newsletter -------------------------------------------------------------- */
.ct-news { background: var(--canvas); padding: clamp(60px,8vw,88px) 0 clamp(66px,9vw,96px); }
.ct-news-grid { display: grid; gap: clamp(26px,4.4vw,80px); align-items: center; }
.ct-news-h { margin: 0; font-size: clamp(28px,4vw,52px); line-height: 1.02; letter-spacing: -.022em; color: var(--ink); max-width: 20ch; }
.ct-news-side { border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(22px,2.8vw,30px); }
.ct-news-lead { margin: 0 0 clamp(22px,3vw,32px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.72; color: rgba(11,40,71,.9); max-width: 46ch; }
.ct-news-form { display: flex; gap: 16px; flex-wrap: wrap; }
.ct-news-form input {
  flex: 1; min-width: min(280px,100%); min-height: 56px; padding: 15px 18px;
  background: #FFFFFF; border: 1px solid rgba(11,40,71,.3); border-radius: 0;
  color: var(--ink); font-family: var(--font-body); font-size: 17px; outline: none;
  transition: border-color 240ms ease;
}
.ct-news-form input:focus { border-color: var(--bronze); }
.ct-news-btn {
  flex: none; min-height: 56px; padding: 16px clamp(26px,3vw,38px);
  background: var(--heritage); color: var(--canvas); border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .05em;
  transition: background 260ms ease, color 260ms ease;
}
.ct-news-btn:hover { background: var(--heritage-deep); color: var(--gold); }
.ct-news-btn:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Tablet / desktop -------------------------------------------------------- */
@media (min-width: 700px) {
  .ct-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ct-fields > .ct-field:nth-child(1), .ct-fields > .ct-field:nth-child(2) { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .ct-grid { grid-template-columns: repeat(3, 1fr); }
  .ct-get-head { grid-template-columns: .42fr .58fr; }
  .ct-row { grid-template-columns: .28fr .72fr; }
  .ct-success { grid-template-columns: .52fr .48fr; }
  .ct-news-grid { grid-template-columns: .48fr .52fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-mast-img { animation: none; transform: scale(1.05); }
  .ct-big, .ct-start, .ct-submit, .ct-again, .ct-chip span, .ct-news-btn,
  .ct-field input, .ct-field select, .ct-news-form input { transition: none; }
}

/* --- All About Camp -------------------------------------------------------
   Implementation of "All About Camp.dc.html" from the Claude Design project.
   A ropes-course plate that pans under the title, the promise centred, the
   five inner pages as a ruled index with thumbnails and a pennant, and the
   summer laid out as a wall of photographs.

   Headings name their own font-family and 400 weight — the sheet has no bare
   h1-h6 rule, so a heading that sets only a size lands in DM Sans 700. --- */

.aac-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.aac-h1, .aac-say, .aac-row-title, .aac-close-h { font-family: var(--font-serif); font-weight: 400; }

/* Masthead ---------------------------------------------------------------- */
/* Tall enough that the headline clears the seated campers' faces (source
   y 45-58%) at every width; the photo starts under the header bar so the
   logo never sits on the standing camper's face (source y 8-20%). */
.aac-mast { position: relative; height: clamp(580px,62vw,860px); overflow: hidden; background: var(--heritage); }
body.solid-header .aac-mast { margin-top: var(--header-h, 139px); }
.aac-mast-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 34%; transform-origin: 50% 36%; transform: scale(1.05); animation: aacPan 30s ease-out forwards;
}
@keyframes aacPan { 0% { transform: scale(1.05); } 100% { transform: scale(1.12) translateY(-1.4%); } }
.aac-mast-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,27,49,.5) 0%, rgba(7,27,49,.16) 30%, rgba(7,27,49,.82) 82%, var(--heritage) 100%);
}
.aac-mast-copy { position: absolute; left: 0; right: 0; bottom: clamp(30px,4.4vw,60px); color: var(--canvas); }
@media (max-width: 759px) { .aac-mast-copy { bottom: 22px; } }
.aac-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,28px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--mist);
}
.aac-eyebrow-ink { color: var(--bronze); margin-bottom: clamp(16px,2.2vw,26px); }
.aac-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.aac-h1 {
  margin: 0; font-size: clamp(33px,5.6vw,80px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--canvas); max-width: 24ch; text-shadow: 0 2px 26px rgba(7,27,49,.5);
}
.aac-script { font-family: var(--font-script); font-style: italic; font-size: 1.22em; line-height: .94; color: var(--gold); }

/* Intro ------------------------------------------------------------------- */
.aac-intro { background: #FFFFFF; padding: clamp(56px,7.6vw,84px) 0 clamp(62px,8.4vw,92px); }
.aac-say { margin: 0 auto; max-width: 34ch; font-size: clamp(25px,3.6vw,40px); line-height: 1.16; letter-spacing: -.018em; color: var(--ink); text-align: center; }
.aac-say-body {
  margin: clamp(26px,3.2vw,36px) auto 0; max-width: 58ch; font-family: var(--font-body);
  font-size: clamp(16px,1.5vw,18.5px); line-height: 1.78; color: rgba(11,40,71,.9); text-align: center;
  border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(22px,2.8vw,30px);
}

/* Explore ----------------------------------------------------------------- */
.aac-explore { background: var(--canvas); padding: clamp(62px,8.4vw,92px) 0 clamp(68px,9vw,100px); }
/* The same navy pennant that labels Our Camps on Our Process. */
.aac-tag {
  margin: 0 0 clamp(26px,3.6vw,44px); justify-self: start; display: inline-block;
  background: var(--heritage); color: var(--gold);
  font-family: var(--font-body); font-size: clamp(11px,1.1vw,12.5px); letter-spacing: .28em;
  text-transform: uppercase; font-weight: 700; line-height: 1;
  padding: 14px 40px 14px 22px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.aac-rows { border-top: 1px solid rgba(11,40,71,.26); }
.aac-row {
  display: grid; grid-template-columns: clamp(110px,16vw,140px) 1fr; gap: clamp(16px,2.6vw,44px);
  align-items: center; padding: clamp(18px,2.4vw,26px) 12px clamp(18px,2.4vw,26px) 4px;
  border-bottom: 1px solid rgba(11,40,71,.18); text-decoration: none;
  transition: background 320ms ease;
}
/* Hover slides the content on transform, not padding — padding re-lays out
   the grid every frame and the text rewraps mid-motion, which read as a
   glitch. Transforms composite; nothing reflows. */
.aac-row:hover { background: #FFFFFF; }
.aac-thumb, .aac-row-copy { transition: transform 420ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.aac-row:hover .aac-thumb, .aac-row:hover .aac-row-copy { transform: translateX(10px); }
.aac-row:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }
/* Bigger than the design's 230x150 - Stacy asked for the photos to be larger (#144). */
.aac-thumb { display: block; overflow: hidden; height: clamp(110px,19vw,240px); }
.aac-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms cubic-bezier(.2,.7,.2,1); }
.aac-row:hover .aac-thumb img { transform: scale(1.06); }
.aac-row-copy { display: grid; gap: clamp(7px,1vw,10px); }
.aac-row-title { display: block; font-size: clamp(21px,2.8vw,38px); line-height: 1.04; letter-spacing: -.018em; color: var(--ink); }
.aac-row-blurb { display: block; font-family: var(--font-body); font-size: clamp(14.5px,1.5vw,17.5px); line-height: 1.66; color: rgba(11,40,71,.9); max-width: 52ch; }
.aac-arrow {
  display: none; justify-self: end; width: 16px; height: 18px; color: var(--star);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), color 260ms ease;
}
.aac-row:hover .aac-arrow { transform: translateX(8px); color: var(--heritage); }

/* Scenes from camp -------------------------------------------------------- */
/* Two slow marquees running in opposite directions (#145). Each strip holds
   its five photographs twice; the track slides exactly half its width and
   snaps back, which reads as one endless roll. Tiles use a right margin
   rather than gap so that half-way point is an exact tile boundary. */
.aac-gallery { background: var(--heritage); padding: clamp(56px,7.6vw,88px) 0 clamp(60px,8vw,92px); overflow: hidden; }
.aac-strips {
  display: grid; gap: 1px; background: rgba(255,217,168,.42);
  border-top: 1px solid rgba(255,217,168,.42); border-bottom: 1px solid rgba(255,217,168,.42);
}
.aac-strip { overflow: hidden; background: var(--heritage); }
.aac-strip-track { display: flex; width: max-content; animation: aacRoll 40s linear infinite; will-change: transform; }
/* Strip images load eagerly (no loading=lazy in the markup): the clone half
   starts off-screen and the track never stops, so a lazy image would leave a
   navy hole rolling past until it happened to decode. */
.aac-strip-r .aac-strip-track { animation-direction: reverse; }
.aac-strip:hover .aac-strip-track { animation-play-state: paused; }
/* Three copies per strip, sliding one third: five tiles at 288px are only
   1445px, narrower than a wide monitor, so two copies left a hole at the
   wrap point on the reversed row. Three cover any viewport under 2890px. */
@keyframes aacRoll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.aac-shot { display: block; flex: none; width: clamp(150px,20vw,288px); margin-right: 1px; overflow: hidden; background: var(--heritage-deep); }
.aac-shot img {
  display: block; width: 100%; height: clamp(140px,22vw,232px); object-fit: cover; object-position: 50% 38%;
  opacity: .9; transition: transform 1200ms cubic-bezier(.2,.7,.2,1), opacity 400ms ease;
}
.aac-shot img:hover { transform: scale(1.07); opacity: 1; }

/* Start your camp search -------------------------------------------------- */
.aac-close { background: var(--canvas); padding: clamp(66px,8.6vw,96px) 0 clamp(72px,9.4vw,104px); }
.aac-close-grid { display: grid; gap: clamp(26px,4.6vw,88px); align-items: center; }
.aac-close-h { margin: 0; font-size: clamp(32px,4.6vw,60px); line-height: 1; letter-spacing: -.024em; color: var(--ink); max-width: 16ch; }
.aac-close-side { border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(24px,3vw,32px); }
.aac-close-lead { margin: 0 0 clamp(28px,3.8vw,38px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.72; color: rgba(11,40,71,.9); max-width: 42ch; }
.aac-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--heritage); color: var(--canvas);
  text-decoration: none; padding: 22px clamp(28px,3.4vw,44px); min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  transition: background 260ms ease, color 260ms ease, gap 260ms ease;
}
.aac-cta:hover { background: var(--heritage-deep); color: var(--gold); gap: 20px; }
.aac-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

/* Tablet / desktop -------------------------------------------------------- */
@media (min-width: 760px) {
}
@media (min-width: 1000px) {
  /* The blurb only earns its own column once the row is wide enough to carry
     it beside the title without squeezing either. */
  .aac-row { grid-template-columns: 320px 1fr 44px; }
  .aac-row-copy { grid-template-columns: .32fr 1fr; gap: clamp(24px,3.4vw,44px); align-items: center; }
  .aac-arrow { display: block; }
  .aac-close-grid { grid-template-columns: .52fr .48fr; }
}
@media (prefers-reduced-motion: reduce) {
  .aac-mast-img { animation: none; transform: scale(1.05); }
  .aac-row, .aac-thumb, .aac-row-copy, .aac-thumb img, .aac-arrow, .aac-shot img, .aac-cta { transition: none; }
  .aac-strip-track { animation: none; }
}

/* Tablet crops (#faces) ----------------------------------------------------
   Between 640 and 999px every split collapses to one column, so a frame whose
   height is tuned for a two-column desktop cell becomes a 2.5–3.6:1 letterbox
   across the full width and no focal point can keep a face inside it. These
   heights only apply in that band; phone and desktop are untouched. */
@media (min-width: 640px) and (max-width: 999px) {
  .th2-frame img { height: clamp(220px,50vw,400px); }
  .th2-frame-portrait img, .th2-frame-tall img { height: clamp(320px,60vw,480px); }
  .th2-mast .th2-frame img { height: clamp(260px,50vw,452px); }
  .th2-frame-wide img { height: clamp(190px,23vw,310px); }
  .th2-frame-states img { height: clamp(300px,34vw,460px); }
  .fq-still-img { height: clamp(300px,52vw,520px); }
  .ph-begins-img { height: clamp(300px,52vw,500px); }
  .ww-talk-img { height: clamp(280px,52vw,470px); }
  .tn-panel-media img { height: clamp(280px,48vw,452px); }
}

/* =====================================================================
   BLOG (/blog and /blog/<post>) — Alexandra #175 / #178, 2026-09-15.
   Copy is the Echo team's approved "Camp Specialists // Blog Posts" doc,
   verbatim. Same shell as Our Process: cream header bar, white masthead,
   the page's serif h1, DM Sans body. Rows and dividers only — no cards.
   Headings name their own font-family and 400 weight (no bare h1-h6 rule).
   ===================================================================== */
.bl-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.bl-h1, .bl-sub, .bl-row-title, .bl-body h2, .bl-num, .bl-more-title { font-family: var(--font-serif); font-weight: 400; }

.bl-mast { background: #FFFFFF; padding: calc(var(--header-h, 139px) + clamp(36px,5.8vw,84px)) 0 clamp(26px,3vw,44px); }
.bl-eyebrow {
  display: inline-flex; align-items: center; gap: clamp(12px,1.1vw,16px); margin: 0 0 clamp(20px,2.4vw,34px);
  font-family: var(--font-body); font-size: clamp(10.5px,.85vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze); text-decoration: none;
}
.bl-eyebrow-rule { width: clamp(40px,3.9vw,56px); height: 1px; background: var(--star); flex: none; }
a.bl-eyebrow:hover { color: var(--heritage); }
.bl-h1 { margin: 0; font-size: clamp(46px,5.85vw,84px); line-height: .98; letter-spacing: -.03em; color: var(--ink); max-width: 16em; text-wrap: balance; }
.bl-sub { margin: clamp(14px,1.8vw,22px) 0 0; font-style: italic; font-size: clamp(19px,2vw,26px); line-height: 1.3; color: var(--bronze); }
/* #291: the round seal sits beside the title, not under the list. */
.bl-title-row { display: flex; align-items: center; gap: clamp(18px,2.4vw,32px); }
.bl-title-seal { display: block; flex: none; width: clamp(64px,7vw,104px); height: auto; }

/* Index ------------------------------------------------------------------- */
/* One row per post. On phones the number, a gold hairline and the arrow sit
   on a line above the photo + copy; from 760px the same children spread into
   a four-column grid (number · 200px photo · copy · arrow). */
.bl-index { background: #FFFFFF; padding: 0 0 clamp(20px,3vw,40px); }
.bl-list { border-top: 1px solid rgba(11,40,71,.32); }
.bl-row {
  display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 0 15px; align-items: start;
  padding: 20px clamp(20px,4vw,56px); border-bottom: 1px solid rgba(11,40,71,.16);
  color: inherit; text-decoration: none; transition: background 260ms ease;
}
.bl-row:hover { background: var(--canvas); }
.bl-row-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bl-num { font-size: 18px; line-height: 1; color: var(--bronze); }
.bl-row-rule { flex: 1; height: 1px; background: rgba(224,167,58,.5); }
.bl-arrow {
  flex: none; width: 14px; height: 16px; color: var(--star);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.bl-row:hover .bl-arrow { transform: translateX(8px); }
.bl-thumb { display: block; overflow: hidden; width: 104px; height: 74px; background: var(--heritage-deep); }
.bl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-row-copy { display: block; min-width: 0; }
.bl-row-title { margin: 0 0 8px; font-size: 21px; line-height: 1.1; letter-spacing: -.018em; color: var(--ink); text-wrap: pretty; }
.bl-row-excerpt {
  margin: 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.56; color: rgba(11,40,71,.72); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 759px) {
  .bl-index .bl-inner { padding: 0; }
}
@media (min-width: 760px) {
  .bl-row { grid-template-columns: 54px 200px minmax(0,1fr) 42px; gap: 0 clamp(20px,2.5vw,36px); align-items: center; padding: 24px 18px 24px 10px; }
  .bl-row-top { display: contents; }
  .bl-row-rule { display: none; }
  .bl-num { grid-column: 1; grid-row: 1; font-size: clamp(20px,1.75vw,25px); }
  .bl-thumb { grid-column: 2; grid-row: 1; width: 200px; height: 140px; }
  .bl-row-copy { grid-column: 3; grid-row: 1; }
  .bl-arrow { grid-column: 4; grid-row: 1; justify-self: end; width: 16px; height: 18px; }
  .bl-row-title { margin-bottom: 11px; font-size: clamp(24px,2.1vw,30px); line-height: 1.08; letter-spacing: -.02em; }
  .bl-row-excerpt { font-size: clamp(15.5px,1.2vw,17px); line-height: 1.6; max-width: 62ch; }
}

/* Pages of /blog (2026-10-05): 20 posts a page, controls under the list only when there is more
   than one page. The list's own type: Previous/Next as bronze DM Sans kicks (like .bl-more-kick)
   with a gold arrow, page numbers in the serif of .bl-num, the current page on Heritage like
   .bl-cta. Under 760px Previous and Next show only their arrows (the words stay for screen
   readers), so the controls fit one line on a 375px phone. */
.bl-pager { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 0 4px; padding: 26px 20px 4px; }
.bl-pager-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.bl-pager-step, .bl-pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; text-decoration: none; transition: background 220ms ease, color 220ms ease; }
.bl-pager-step { gap: 12px; padding: 0 4px; font-family: var(--font-body); font-size: 11px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.bl-pager-prev { justify-self: start; }
.bl-pager-next { justify-self: end; }
.bl-pager-arrow { font-size: 17px; line-height: 1; letter-spacing: 0; color: var(--star); transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
a.bl-pager-step:hover { color: var(--heritage); }
a.bl-pager-prev:hover .bl-pager-arrow { transform: translateX(-5px); }
a.bl-pager-next:hover .bl-pager-arrow { transform: translateX(5px); }
.bl-pager-step[aria-disabled="true"] { color: rgba(11,40,71,.34); cursor: default; }
.bl-pager-step[aria-disabled="true"] .bl-pager-arrow { color: rgba(11,40,71,.24); }
.bl-pager-num { padding: 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: 19px; line-height: 1; color: var(--ink); }
a.bl-pager-num:hover { background: var(--canvas); color: var(--heritage); }
.bl-pager-num[aria-current="page"], a.bl-pager-num[aria-current="page"]:hover { background: var(--heritage); color: var(--canvas); }
.bl-pager-gap { min-width: 22px; font-family: var(--font-serif); font-size: 19px; line-height: 44px; text-align: center; color: var(--bronze); }
.bl-pager-step:focus-visible, .bl-pager-num:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.bl-pager-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 759px) {
  .bl-pager-word { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (min-width: 760px) {
  .bl-pager { gap: 0 24px; padding: clamp(30px,3vw,44px) 18px 0 10px; }
  .bl-pager-list { gap: 6px; }
  .bl-pager-num { min-width: 44px; font-size: clamp(20px,1.6vw,23px); }
}
@media (prefers-reduced-motion: reduce) { .bl-pager-step, .bl-pager-num, .bl-pager-arrow { transition: none; } }

/* Post -------------------------------------------------------------------- */
.bl-article { background: #FFFFFF; padding: clamp(10px,2vw,24px) 0 clamp(70px,9vw,110px); }
/* Feature photo: full width above the copy on phones and tablets, a tall
   plate beside it from 1000px (portrait photos keep their faces that way). */
.bl-article-grid { display: grid; gap: clamp(28px,4vw,64px); align-items: start; }
.bl-figure { margin: 0; overflow: hidden; background: var(--heritage-deep); }
.bl-figure-img { display: block; width: 100%; height: clamp(240px,48vw,420px); object-fit: cover; }
@media (min-width: 1000px) {
  .bl-article-grid { grid-template-columns: minmax(0,.4fr) minmax(0,.6fr); }
  .bl-figure { position: sticky; top: calc(var(--header-h, 139px) + 24px); }
  .bl-figure-img { height: clamp(420px,42vw,600px); }
}
.bl-body { max-width: 70ch; border-top: 1px solid rgba(11,40,71,.26); padding-top: clamp(26px,3.4vw,40px); }
.bl-body p { margin: 0 0 clamp(16px,1.8vw,20px); font-family: var(--font-body); font-size: clamp(16.5px,1.5vw,18.5px); line-height: 1.78; color: rgba(11,40,71,.9); }
.bl-body h2 { margin: clamp(32px,4vw,44px) 0 clamp(12px,1.4vw,16px); font-size: clamp(25px,2.9vw,36px); line-height: 1.1; letter-spacing: -.016em; color: var(--ink); }
.bl-body h2:first-child { margin-top: 0; }
.bl-body ul { list-style: none; margin: 0 0 clamp(20px,2.2vw,26px); padding: 0; }
.bl-body li { position: relative; padding-left: 28px; margin: 0 0 10px; font-family: var(--font-body); font-size: clamp(16.5px,1.5vw,18.5px); line-height: 1.7; color: rgba(11,40,71,.9); }
.bl-body li::before { content: ""; position: absolute; left: 0; top: .85em; width: 14px; height: 1px; background: var(--star); }
.bl-body strong { font-weight: 700; color: var(--ink); }
.bl-body em { font-style: italic; }
.bl-cta {
  display: inline-flex; align-items: center; gap: 12px; margin: clamp(6px,1vw,12px) 0 0;
  background: var(--heritage); color: var(--canvas); text-decoration: none; padding: 19px clamp(28px,3.2vw,40px); min-height: 44px;
  font-family: var(--font-body); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  transition: background 220ms ease, color 220ms ease, gap 220ms ease;
}
.bl-cta:hover { background: var(--heritage-deep); color: var(--gold); gap: 18px; }
.bl-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

.bl-more { margin-top: clamp(44px,6vw,72px); border-top: 1px solid rgba(11,40,71,.26); display: grid; gap: 1px; background: rgba(11,40,71,.16); }
.bl-more > a { background: #FFFFFF; display: flex; flex-direction: column; gap: 8px; padding: clamp(22px,2.8vw,34px) clamp(20px,2.6vw,36px) clamp(24px,3vw,36px) clamp(20px,2.8vw,40px); text-decoration: none; color: inherit; transition: background 260ms ease; }
.bl-more > a:hover { background: var(--canvas); }
.bl-more-kick { font-family: var(--font-body); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--bronze); }
.bl-more-title { margin: 0; font-size: clamp(18px,1.7vw,22px); line-height: 1.15; color: var(--ink); }
.bl-more > a:hover .bl-more-title { color: var(--heritage); }
@media (min-width: 760px) { .bl-more { grid-template-columns: 1fr 1fr; } .bl-more > a.bl-more-next { text-align: right; align-items: flex-end; } }
@media (prefers-reduced-motion: reduce) { .bl-row, .bl-row-title, .bl-arrow, .bl-cta, .bl-more > a { transition: none; } }

/* Taller wide frame for portrait photos (Teen Tours on 7–12). Sits after the
   tablet-crops block so it wins in the 640–999 band too. */
.th2-frame-wide-tall img { height: clamp(240px,26vw,380px); }

/* --- Testimonials ---------------------------------------------------------
   About Us > Testimonials (#205, #246, #265; Arlene's #5). The 18 client
   quotes the homepage carousel carried until round 3, gathered on one page:
   parents on canvas, camp directors on navy, then the usual closing band.
   Each card leads with the brand star rather than a five-star rating. --- */
.tt-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.tt-h1, .tt-h2, .tt-close-h, .tt-quote p { font-family: var(--font-serif); font-weight: 400; }

.tt-mast { background: var(--canvas); padding: calc(var(--header-h, 113px) + clamp(44px,6vw,80px)) 0 clamp(44px,6vw,72px); }
.tt-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px,2.4vw,26px);
  font-family: var(--font-body); font-size: clamp(11px,1vw,12px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze);
}
.tt-eyebrow-rule { width: clamp(34px,4vw,56px); height: 1px; background: var(--star); flex: none; }
.tt-h1 { margin: 0 0 clamp(18px,2.4vw,26px); font-size: clamp(40px,6.4vw,88px); line-height: .98; letter-spacing: -.026em; color: var(--ink); max-width: 14ch; }
.tt-gold { color: var(--bronze); }
.tt-lead { margin: 0; font-family: var(--font-body); font-size: clamp(16px,1.6vw,19px); line-height: 1.74; color: rgba(11,40,71,.9); max-width: 56ch; }

.tt-parents { background: #FFFFFF; padding: clamp(56px,8vw,96px) 0; }
.tt-directors { background: var(--heritage); color: var(--canvas); padding: clamp(56px,8vw,96px) 0; }
.tt-h2 { margin: 0 0 clamp(26px,3.6vw,44px); font-size: clamp(30px,4.2vw,54px); line-height: 1; letter-spacing: -.022em; color: var(--ink); }
.tt-directors .tt-h2 { color: var(--canvas); }

.tt-grid { display: grid; gap: clamp(16px,2vw,24px); }
.tt-card {
  margin: 0; display: flex; flex-direction: column; gap: clamp(14px,1.8vw,20px);
  padding: clamp(24px,3vw,36px); background: var(--canvas); border: 1px solid rgba(11,40,71,.14);
}
.tt-directors .tt-card { background: rgba(255,246,236,.05); border-color: rgba(255,217,168,.24); }
.tt-star { flex: none; color: var(--star); }
.tt-quote { margin: 0; flex: 1; }
.tt-quote p { margin: 0; font-size: clamp(18px,1.7vw,21px); line-height: 1.5; color: var(--ink); }
.tt-directors .tt-quote p { color: var(--canvas); }
/* Long quotes clamp to six lines and open in full in a modal on "Read more"
   (site.js adds .is-clamped, so with JS off every quote shows in full). */
.tt-grid.is-clamped .tt-quote p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.tt-more {
  align-self: flex-start; margin-top: -4px; padding: 0 0 3px; background: none; border: 0;
  border-bottom: 1px solid var(--star); cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze);
}
.tt-more:hover { color: var(--ink); }
.tt-more:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
.tt-more[hidden] { display: none; }
.tt-directors .tt-more { color: var(--gold); }
.tt-directors .tt-more:hover { color: var(--canvas); }

html.tt-modal-open { overflow: hidden; }
.tt-modal {
  padding: 0; border: 0; background: transparent; max-width: min(960px, calc(100vw - 32px));
  width: 100%; max-height: calc(100vh - 48px); overflow: visible;
}
.tt-modal::backdrop { background: rgba(7,27,49,.74); }
.tt-modal-panel {
  position: relative; max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--canvas); color: var(--ink);
  padding: clamp(28px,3.6vw,48px) clamp(24px,4.4vw,60px) clamp(24px,3vw,36px);
  box-shadow: 0 24px 60px -18px rgba(7,27,49,.6);
  display: flex; flex-direction: column; gap: clamp(16px,2vw,22px);
}
.tt-modal-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--heritage); cursor: pointer;
}
.tt-modal-close:hover { background: rgba(11,40,71,.08); }
.tt-modal-close:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.tt-modal-quote { margin: 0; }
.tt-modal-quote p { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(18px,1.6vw,21px); line-height: 1.5; color: var(--ink); }
.tt-modal-cite { margin: 0; display: flex; flex-direction: column; gap: 4px; padding-top: clamp(14px,1.8vw,18px); border-top: 1px solid rgba(11,40,71,.16); }
.tt-cite { display: flex; flex-direction: column; gap: 4px; padding-top: clamp(12px,1.6vw,16px); border-top: 1px solid rgba(11,40,71,.16); }
.tt-directors .tt-cite { border-top-color: rgba(255,217,168,.24); }
.tt-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.tt-directors .tt-name { color: var(--canvas); }
.tt-role { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.tt-directors .tt-role { color: var(--gold); }

.tt-close { background: var(--canvas); padding: clamp(64px,8vw,100px) 0; }
.tt-close-grid { display: grid; gap: clamp(30px,5vw,88px); align-items: center; }
.tt-close-h { margin: 0 0 clamp(16px,2.2vw,22px); font-size: clamp(34px,5vw,64px); line-height: 1.02; letter-spacing: -.025em; color: var(--ink); max-width: 16ch; }
.tt-close-lead { margin: 0 0 clamp(26px,3.4vw,38px); font-family: var(--font-body); font-size: clamp(16px,1.5vw,19px); line-height: 1.7; color: rgba(11,40,71,.9); max-width: 46ch; }
.tt-cta {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 20px clamp(26px,3.2vw,40px); background: var(--heritage); color: var(--canvas); text-decoration: none;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .02em;
  transition: background 260ms ease, gap 260ms ease;
}
.tt-cta:hover { background: var(--bronze); gap: 20px; }
.tt-cta:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

@media (min-width: 760px) {
  .tt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .tt-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-close-grid { grid-template-columns: 1.06fr .94fr; }
  .tt-close .cs-seal-column { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-cta { transition: none; }
}

/* Round of 25 Sep (#340 #341 #350 #351 #353) -------------------------------- */
/* #340: below the two-column layout the 7-12 hero shows the whole photo, so no
   one on the edges is cut off. */
@media (max-width: 999px) {
  .th2-mast .th2-frame img { height: auto; aspect-ratio: 3 / 2; }
}
/* #341/#350: on phones the Our Process photo runs edge to edge (no framed box)
   and uses a closer crop of the group (the <picture> source). */
@media (max-width: 699px) {
  .pc-mast .pc-frame { border: 0; padding: 0; margin: 0 -20px; }
  .pc-mast .pc-mast-img { height: auto; aspect-ratio: 1160 / 1093; }
}
/* #351: on phones the Why Work With slider shows one whole photo at a time. */
@media (max-width: 699px) {
  .ww-slide { flex-basis: 100%; }
}
/* #353: keep the phone number (and the email) on one line. */
.ww-talk-body a[href^="tel:"], .ww-talk-body a[href^="mailto:"] { white-space: nowrap; }

/* =====================================================================
   Redesign: Our Process, Summer Camp FAQs, Testimonials (mk-)
   Taken rule for rule from the approved mockups (camp-specialists-preview,
   version 2, 25 Sep): blended photo header, light blue hover, How it works
   with drifting photos, pinned Our Camps and Programs list, one clean FAQ
   list with topic chips, rotating parent stories, camp director cards, and
   the closing band with the CS badge behind it.
   ===================================================================== */
/* light blue hover + lift on list rows */
.pc-camp,.fq-btn,.mk-q{transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.pc-camp:hover{background:rgba(216,240,244,.12);transform:translateY(-2px)}
.fq-item .fq-btn:hover{background:#D8F0F4;transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,40,71,.08)}
/* hero copy block under the blended masthead */
.mk-intro{background:var(--heritage);color:var(--canvas);padding:0 clamp(20px,5vw,64px) clamp(44px,6vw,80px)}
.mk-intro p{max-width:760px;margin:0 auto;font-family:var(--font-serif);font-size:clamp(20px,2.4vw,30px);line-height:1.35}
.mk-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---- Our Process: How it works, normal scroll, photos drift ---- */
.mk-flow{background:var(--heritage);color:var(--canvas);padding:clamp(56px,8vw,110px) 0 clamp(8px,2vw,24px)}
.mk-flow .mk-steps-eyebrow{margin-bottom:clamp(24px,4vw,44px)}
.mk-fs{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:var(--maxw);margin:0 auto clamp(52px,7vw,96px);padding:0 clamp(20px,5vw,64px);box-sizing:border-box;align-items:center}
.mk-fs-media{overflow:hidden;border-radius:18px;aspect-ratio:4/3.3;background:#0a2240}
.mk-fs-media img{width:100%;height:122%;object-fit:cover;display:block;will-change:transform}
.mk-fs-n{display:inline-block;font:700 11px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);padding-bottom:8px;border-bottom:1px solid var(--star);margin-bottom:16px}
.mk-fs h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,4vw,52px);line-height:1.05;margin:0 0 14px;max-width:18ch}
.mk-fs p{font-size:clamp(15px,1.3vw,18px);line-height:1.62;margin:0;max-width:56ch;opacity:.92}
.mk-fs p a{color:var(--gold)}
.mk-flow{background:var(--mist);color:var(--heritage)}
.mk-flow .mk-steps-eyebrow{color:#9A6412}
.mk-flow .mk-fs-n{color:#9A6412;border-bottom-color:rgba(11,40,71,.25)}
.mk-flow .mk-fs p{opacity:1;color:#23384F}.mk-flow .mk-fs p a{color:var(--heritage);font-weight:700}
.mk-flow .mk-fs-media{background:#c4e4ea;box-shadow:0 14px 34px rgba(11,40,71,.14)}
@media (min-width:900px){.mk-fs{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px)}.mk-fs:nth-of-type(even) .mk-fs-media{order:2}}
.fq-btn{grid-template-columns:minmax(0,1fr) auto!important}
@media (max-width:899px){.mk-chips{position:static}.mk-chips-row{flex-wrap:wrap;overflow:visible}}
.mk-steps-eyebrow{font:700 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--mist);margin:0 0 14px}

/* ---- blended photo band with copy on top (Best of all, featured quote) ---- */
.mk-blend{position:relative;overflow:hidden;background:var(--heritage);color:var(--canvas);min-height:clamp(620px,80vw,760px);display:flex;align-items:flex-end}
.mk-blend-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-blend-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,49,.15) 0%,rgba(7,27,49,.35) 35%,rgba(7,27,49,.9) 62%,var(--heritage) 100%)}
.mk-blend-copy{position:relative;width:100%;padding:clamp(40px,6vw,90px) 0}
.mk-blend h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(32px,4.6vw,60px);line-height:1.04;margin:0 0 18px;max-width:17ch}
.mk-blend h2 .tm-script{display:block;font-size:clamp(38px,5.4vw,70px)}
.mk-blend p{font-size:clamp(15px,1.3vw,18px);line-height:1.64;margin:0 0 14px;max-width:62ch;opacity:.93}
@media (min-width:900px){.mk-blend-scrim{background:linear-gradient(90deg,rgba(7,27,49,.92) 0%,rgba(7,27,49,.75) 42%,rgba(7,27,49,.1) 75%)}.mk-blend{align-items:center}}

/* ---- FAQs: one clean page ---- */
.mk-chips{position:sticky;top:56px;z-index:20;background:var(--canvas);border-bottom:1px solid rgba(11,40,71,.1)}
.mk-chips-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:14px clamp(20px,5vw,64px);max-width:var(--maxw);margin:0 auto}
.mk-chips-row::-webkit-scrollbar{display:none}
.mk-chip{flex:none;white-space:nowrap;font:600 14px/1 var(--font-body);color:var(--heritage);text-decoration:none;padding:11px 16px;border:1px solid rgba(11,40,71,.22);border-radius:999px;transition:background .25s,transform .25s}
.mk-chip:hover,.mk-chip.on{background:#D8F0F4;border-color:#D8F0F4;transform:translateY(-1px)}
.fq-questions .fq-group{scroll-margin-top:150px}
/* stacked photo band on phones: photo on top, words below the fade, faces never covered */
@media (max-width:899px){
 .mk-blend.mk-stack{display:block;min-height:0}
 .mk-stack .mk-blend-img{position:relative;display:block;height:auto;aspect-ratio:1/0.92}
 .mk-stack .mk-blend-scrim{bottom:auto;height:92vw;background:linear-gradient(180deg,rgba(7,27,49,0) 50%,rgba(7,27,49,.6) 80%,var(--heritage) 100%)}
 .mk-stack .mk-blend-copy{padding-top:6px}
}
/* closing band: badge + photo behind, parallax */
.mk-close{position:relative;overflow:hidden;background:var(--heritage);color:var(--canvas);padding:clamp(80px,14vw,170px) 0;text-align:center;isolation:isolate}
.mk-close-photo{position:absolute;left:0;right:0;top:-15%;width:100%;height:130%;object-fit:cover;opacity:.2;will-change:transform;z-index:-2}
.mk-close::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(11,40,71,.35) 0%,rgba(11,40,71,.85) 70%);z-index:-1}
.mk-close-badge{position:absolute;left:50%;top:50%;width:clamp(380px,62vw,720px);height:auto;margin:calc(clamp(380px,62vw,720px)/-2) 0 0 calc(clamp(380px,62vw,720px)/-2);opacity:.34;will-change:transform;pointer-events:none;z-index:-1}
.mk-close-copy{position:relative;max-width:640px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.mk-close .mk-eb{display:inline-flex;align-items:center;gap:12px;font:700 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.mk-close h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(38px,5.4vw,66px);line-height:1.02;margin:0 0 16px}
.mk-close h2 .tm-script{display:block;color:var(--gold)}
.mk-close p{font-size:clamp(16px,1.4vw,19px);line-height:1.6;opacity:.9;margin:0 auto 30px;max-width:44ch}
.mk-close-cta{display:inline-flex;align-items:center;gap:12px;background:var(--canvas);color:var(--heritage);font:700 16px/1 var(--font-body);text-decoration:none;padding:19px 30px;border-radius:999px;transition:background .25s,transform .25s,box-shadow .25s}
.mk-close-cta:hover{background:var(--mist);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}

/* ---- Testimonials v2: rotating parent stories on photos ---- */
.mk-rot{position:relative;background:var(--heritage);color:var(--canvas);overflow:hidden}
.mk-rot-media{position:relative;aspect-ratio:1/0.92;overflow:hidden}
.mk-rot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 7s ease}
.mk-rot-img.on{opacity:1;transform:scale(1)}
.mk-rot-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,49,0) 50%,rgba(7,27,49,.6) 80%,var(--heritage) 100%)}
.mk-rot-copy{position:relative;padding:4px 0 clamp(44px,6vw,90px)}
.mk-rot-eb{font:700 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.mk-rot-box{position:relative;touch-action:pan-y;transition:height .5s ease}
.mk-rs{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;transform:translateX(24px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.mk-rs.on{opacity:1;transform:none;pointer-events:auto}
.mk-rs blockquote{margin:0 0 16px;font-family:var(--font-serif);font-size:clamp(26px,3.4vw,44px);line-height:1.12;max-width:24ch}
.mk-rs .mk-full{background:none;border:0;padding:0;margin:0 0 16px;font:700 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.mk-rs figcaption{font:600 15px/1.3 var(--font-body)}
.mk-rs figcaption span{display:block;font:700 10px/1.8 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.mk-rot-ctrl{display:flex;align-items:center;gap:16px;margin-top:26px}
.mk-rot-ctrl button{width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,246,236,.4);background:transparent;color:var(--canvas);font-size:18px;cursor:pointer;transition:background .25s,transform .25s,color .25s}
.mk-rot-ctrl button:hover{background:var(--mist);color:var(--heritage);transform:translateY(-2px)}
.mk-rot-count{font:700 12px/1 var(--font-body);letter-spacing:.2em;min-width:64px}
.mk-rot-bar{flex:1;max-width:220px;height:2px;background:rgba(255,246,236,.2);overflow:hidden}
.mk-rot-bar i{display:block;height:100%;width:0;background:var(--star)}
@media (min-width:900px){
 .mk-rot{min-height:min(88vh,820px);display:flex;align-items:center}
 .mk-rot-media{position:absolute;inset:0;aspect-ratio:auto}
 .mk-rot-media::after{background:linear-gradient(90deg,rgba(7,27,49,.94) 0%,rgba(7,27,49,.78) 45%,rgba(7,27,49,.1) 80%)}
 .mk-rot-copy{width:100%;padding:90px 0}
 .mk-rs blockquote{max-width:20ch}
}
.mk-sheet{border:0;padding:0;max-width:640px;width:calc(100% - 28px);border-radius:20px;background:var(--canvas);color:var(--heritage)}
.mk-sheet::backdrop{background:rgba(7,27,49,.6)}
.mk-sheet-in{padding:34px 26px 28px;max-height:78vh;overflow:auto}
.mk-sheet-in p{font-family:var(--font-serif);font-size:20px;line-height:1.5;margin:0 0 18px}
.mk-sheet-in b{display:block;font:600 15px var(--font-body)}
.mk-sheet-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:999px;border:0;background:var(--mist);color:var(--heritage);font-size:18px;cursor:pointer}

/* ---- Testimonials v2: camp directors, editorial on warm canvas ---- */
.mk-dirs{background:var(--canvas-warm);padding:clamp(64px,9vw,130px) 0}
.mk-dirs-grid{display:grid;gap:clamp(28px,4vw,40px)}
@media (min-width:900px){.mk-dirs-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:start}.mk-dirs-head{position:sticky;top:120px}}
.mk-dirs-eb{display:flex;align-items:center;gap:12px;font:700 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin:0 0 18px}
.mk-dirs-eb:before{content:"";width:36px;height:1px;background:var(--star)}
.mk-dirs h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.04;margin:0 0 16px;color:var(--heritage)}
.mk-dirs h2 .tm-script{display:block;color:var(--bronze)}
.mk-dirs-sub{font-size:16px;line-height:1.6;color:#4A5767;margin:0;max-width:40ch}
.mk-dirs-seal{width:92px;height:auto;margin-top:28px}
.mk-d{position:relative;margin:0 0 6px;padding:26px 22px 24px 22px;border-radius:18px;transition:background .25s,transform .25s,box-shadow .25s}
.mk-d:hover{background:var(--mist);transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,40,71,.08)}
.mk-d:before{content:"\201C";display:block;font-family:var(--font-serif);font-size:84px;line-height:.6;height:34px;color:var(--star)}
.mk-d blockquote{margin:0 0 18px;font-family:var(--font-serif);font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:var(--heritage)}
.mk-d figcaption{display:flex;align-items:center;gap:12px;font:600 15px/1.2 var(--font-body);color:var(--heritage)}
.mk-d figcaption:before{content:"";width:28px;height:1px;background:var(--star)}
.mk-d figcaption span{font:700 10px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.mk-d.mk-hide{display:none}
@media (max-width:899px){.mk-dirs-seal{display:none}.mk-d{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.mk-dirs-more{margin-left:0}}
.mk-dirs-more{margin:10px 0 0 22px;background:none;border:1px solid rgba(11,40,71,.3);border-radius:999px;padding:14px 22px;font:700 13px/1 var(--font-body);color:var(--heritage);cursor:pointer;transition:background .25s,transform .25s}
.mk-dirs-more:hover{background:var(--mist);transform:translateY(-2px)}

/* ---- Our Camps: pinned list that reads through as you scroll ---- */
.mk-camps{position:relative;background:var(--heritage);color:var(--canvas);height:300vh}
.mk-camps-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-top:clamp(84px,11vh,120px);box-sizing:border-box;overflow:hidden}
.mk-camps h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1;margin:0 0 8px}
.mk-camps-sub{font-size:15px;color:rgba(255,246,236,.7);margin:0 0 16px}
.mk-cchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 clamp(20px,5vw,64px) 4px;max-width:var(--maxw);margin:0 auto;width:100%;box-sizing:border-box}
.mk-cchips::-webkit-scrollbar{display:none}
.mk-cchip{flex:none;white-space:nowrap;font:600 13px/1 var(--font-body);color:var(--canvas);background:transparent;border:1px solid rgba(255,246,236,.28);border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.mk-cchip.on{background:var(--mist);color:var(--heritage);border-color:var(--mist)}
.mk-cwin{position:relative;flex:1;min-height:0;overflow:hidden;margin-top:14px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%)}
.mk-clist{list-style:none;margin:0 auto;padding:0 clamp(20px,5vw,64px);max-width:var(--maxw);will-change:transform}
/* The list starts right under the chips (no empty band) and only fades at an edge
   once it has scrolled past it; site.js toggles these. */
.mk-cwin.mk-cwin-top{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%)}
.mk-cwin.mk-cwin-end{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%)}
.mk-cwin.mk-cwin-top.mk-cwin-end{-webkit-mask-image:none;mask-image:none}
.mk-cg{font:700 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);padding:30px 0 12px}
.mk-ci{display:flex;gap:14px;align-items:flex-start;padding:15px 12px;margin:0 -12px;border-radius:12px;font-size:17px;line-height:1.4;opacity:.45;transition:opacity .35s,background .35s,transform .35s}
.mk-ci svg{flex:none;margin-top:4px;color:var(--star)}
.mk-ci,.mk-ci *{color:var(--canvas)}.mk-ci .pc-camp-star,.mk-ci .pc-camp-star path{color:#E0A73A!important;fill:#E0A73A!important}
.mk-ci.on{opacity:1;background:rgba(216,240,244,.12);transform:translateX(4px)}
.mk-ci.near{opacity:.7}
.mk-camps-foot{padding:6px clamp(20px,5vw,64px) calc(clamp(16px,3vh,28px) + 76px);max-width:var(--maxw);margin:0 auto;width:100%;box-sizing:border-box;font:700 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,246,236,.55)}
@media (min-width:900px){.mk-camps-foot{padding-bottom:28px}.mk-ci{font-size:20px}}

/* directors v3: light blue cards in a peek slider */
.mk-dtrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 14px;margin:0 calc(-1*clamp(20px,5vw,64px));padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px);scroll-padding-left:clamp(20px,5vw,64px)}
.mk-dtrack::-webkit-scrollbar{display:none}
.mk-dtrack .mk-d{flex:0 0 84%;max-width:440px;scroll-snap-align:start;margin:0;padding:26px 22px 24px;background:var(--mist);border-radius:20px;display:flex;flex-direction:column;box-shadow:0 10px 26px rgba(11,40,71,.07)}
.mk-dtrack .mk-d:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,40,71,.13)}
.mk-dtrack .mk-d blockquote{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.mk-dtrack .mk-dmore{align-self:flex-start;background:none;border:0;padding:0;margin:0 0 16px;font:700 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.mk-dctrl{display:flex;align-items:center;gap:14px;margin-top:10px}
.mk-dctrl button{width:44px;height:44px;border-radius:999px;border:1px solid rgba(11,40,71,.3);background:transparent;color:var(--heritage);font-size:17px;cursor:pointer;transition:background .25s,transform .25s}
.mk-dctrl button:hover{background:var(--mist);transform:translateY(-2px)}
.mk-dcount{font:700 12px/1 var(--font-body);letter-spacing:.2em;color:var(--heritage)}
@media (min-width:900px){.mk-dtrack{margin:0;padding-left:0;padding-right:0;scroll-padding-left:0}.mk-dtrack .mk-d{flex-basis:calc(50% - 7px)}}
@media (max-width:899px){.mk-dtrack .mk-d{margin:0!important}.mk-dirs-grid{grid-template-columns:minmax(0,1fr)}}
.mk-dirs-list,.mk-dirs-head{min-width:0}
.mk-dirs{overflow-x:clip}

/* Real-site fixes on top of the mockup layer (no visual change intended):
   the topic chips follow the header's actual height (site.js sets --mk-chips-top),
   FAQ jumps land just under the chips (html already adds 90px of scroll padding),
   and motion stays still for people who ask for reduced motion. */
@media (min-width:900px){.mk-chips{top:var(--mk-chips-top,70px)}}
.fq-questions .fq-group{scroll-margin-top:50px}
@media (prefers-reduced-motion:reduce){
 .mk-rot-img,.mk-rs,.mk-rot-box,.mk-ci,.mk-cchip,.mk-close-cta,.mk-d,.mk-chip,.pc-camp,.fq-btn{transition:none}
 .mk-fs-media img,.mk-close-photo,.mk-close-badge{transform:none!important}
}
/* Stacy's own header photos on the redesigned pages (#326 Our Process, #310 FAQs),
   placed so faces clear both the logo and the headline. */
/* The helmets group sits low in its photo, so this header is sized from the width
   (not capped to the screen height) and the photo is raised as far as it can go
   while the counselor's helmet stays just below the logo (146px from the top).
   The slow zoom centres on his helmet so it never drifts up into the logo. */
.tm-mast.mk-mast-process{height:clamp(560px,calc(60vw + 230px),900px)}
.mk-hero-process{object-position:50% min(0px,max(calc(146px - 15vw),calc(clamp(560px,calc(60vw + 230px),900px) - 66.667vw)));transform-origin:50% 16%}
@media (min-width:700px){.mk-mast-process .tm-mast-copy{bottom:clamp(60px,9vw,130px)}}   /* heading sits a little higher on this header */
.mk-hero-faq{object-position:50% 45%}
@media (min-width:700px){.mk-mast-faq .tm-mast-copy{bottom:clamp(20px,2.2vw,32px)}}   /* FAQ headline sits lower, clear of the faces */
@media (max-width:699px){.mk-hero-process{object-position:50% 50%}.mk-hero-faq{object-position:52% 50%}}
/* FAQ blue hover box: breathing room inside it, while the question text stays in
   line with the rest of the list (the box grows outward by the same amount). */
.fq-item .fq-btn{--fq-pad:clamp(14px,1.6vw,22px);padding-left:var(--fq-pad);padding-right:var(--fq-pad);margin-left:calc(-1 * var(--fq-pad));width:calc(100% + 2 * var(--fq-pad))}

/* Our Story closing note: story copy only, the site-wide .mk-close band follows */
.st-close-solo .st-close-grid { grid-template-columns: 1fr; max-width: 820px; }

/* --- Site-wide header (2026-09-29) ---------------------------------------
   Every inner page opens with the same full-bleed photo header as Our Process,
   FAQs, Testimonials and About (.tm-mast). Pages that used to open with a split
   header keep their intro copy in .cs-intro right under the photo. */
.cs-intro{background:var(--heritage);color:var(--canvas);padding:0 clamp(20px,5vw,64px) clamp(52px,7vw,92px)}
.cs-intro-inner{max-width:780px;margin:0 auto}
.cs-intro-p{margin:0;font-family:var(--font-body);font-size:clamp(17px,1.6vw,20px);line-height:1.74;color:var(--canvas);opacity:.92}
.cs-intro .wc-mast-lede{max-width:none}
.cs-hero-benefits{object-position:50% 40%;transform-origin:50% 40%}
.cs-hero-a712{object-position:60% 20%;transform-origin:60% 20%}
.cs-hero-teen{object-position:50% 50%;transform-origin:50% 50%}
.cs-hero-why{object-position:50% 35%;transform-origin:50% 35%}
.cs-hero-blog{object-position:50% 45%;transform-origin:50% 45%}

/* Headlines: balanced line breaks, no single-word lines (09-29) */
.mk-close h2 { text-wrap: balance; }
.mk-close-copy { max-width: 860px; }
.cs-nw { white-space: nowrap; }
@media (max-width:480px){ .au-h1 { font-size: clamp(34px,9.4vw,42px); } .aac-h1 { font-size: clamp(28px,8.4vw,33px); } }
/* Closing band: a little more of each page's photo shows through */
.mk-close-photo { opacity: .28; }

/* Contact v2 (09-29): lighter form section in mist blue, CS submark backdrop,
   and a strip of camp photos under the header so the page matches the rest. */
.ct-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; background: var(--heritage); padding: 0 0 4px; }
.ct-strip img { display: block; width: 100%; height: clamp(130px,17vw,240px); object-fit: cover; }
@media (min-width:700px){ .ct-strip { grid-template-columns: repeat(4,1fr); } }
.ct-get { background: var(--mist); color: var(--heritage); }
.ct-get::before { background: radial-gradient(55% 45% at 0% 0%, rgba(255,255,255,.55), transparent 65%),
                              radial-gradient(50% 42% at 100% 100%, rgba(255,217,168,.35), transparent 64%); }
.ct-get-mark { position: absolute; right: clamp(-160px,-8vw,-60px); top: clamp(20px,4vw,60px); width: clamp(320px,46vw,640px); height: auto; opacity: .08; pointer-events: none; }
.ct-get .ct-eyebrow, .ct-get .ct-form-h, .ct-get .ct-row-h { text-shadow: none; }
.ct-get .ct-eyebrow-mist { color: var(--bronze); }
.ct-get .ct-form-h { color: var(--heritage); }
.ct-get .ct-form-lead { color: var(--heritage); border-top-color: rgba(11,40,71,.22); }
.ct-get .ct-req { color: var(--bronze); }
.ct-get .ct-form, .ct-get .ct-row, .ct-get .ct-send, .ct-get .ct-success { border-color: rgba(11,40,71,.2); }
.ct-get .ct-row-h { color: var(--heritage); }
.ct-get .ct-lbl { color: var(--bronze); }
.ct-get .ct-field input, .ct-get .ct-field select { color: var(--heritage); border-bottom-color: rgba(11,40,71,.35); }
.ct-get .ct-field input:focus, .ct-get .ct-field select:focus { border-bottom-color: var(--heritage); }
.ct-get .ct-field input::placeholder { color: rgba(11,40,71,.45); }
.ct-get .ct-chip span { color: var(--heritage); border-color: rgba(11,40,71,.4); background: rgba(255,255,255,.35); }
.ct-get .ct-chip input:checked + span { background: var(--heritage); color: var(--canvas); border-color: var(--heritage); }
.ct-get .ct-submit { background: var(--heritage); color: var(--canvas); }
.ct-get .ct-submit:hover { background: var(--heritage-deep); color: var(--gold); }
.ct-get .ct-reassure { color: var(--heritage); }
.ct-get .ct-thanks { color: var(--bronze); }
.ct-get .ct-thanks-p, .ct-get .ct-again { color: var(--heritage); }
.ct-get .ct-frame { border-color: rgba(11,40,71,.25); }

/* Pinfeed 09-29 (Stacy): skateboard must show in the Specialty Camp photo -> portrait frame, whole rider + board */
.th2-split .th2-frame-skate{max-width:420px;width:100%}
.th2-split .th2-frame-skate img{height:auto;aspect-ratio:3/4}
/* Pinfeed 09-29 (Stacy): Our Process header, the kids were sinking into the dark fade -> fade starts lower, kids stay bright */
@media (min-width:700px){.mk-mast-process .tm-mast-scrim{background:linear-gradient(180deg,rgba(7,27,49,.45) 0%,rgba(7,27,49,.08) 28%,rgba(7,27,49,.08) 62%,rgba(7,27,49,.7) 88%,var(--heritage) 100%),linear-gradient(90deg,rgba(7,27,49,.55) 0%,rgba(7,27,49,.2) 34%,rgba(7,27,49,0) 50%)}}

/* 13-17 Career Experiences tab list (Pinfeed 09-29) */
.tn-career-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px,3vw,36px); max-width: 480px; }
.tn-career-list li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid rgba(11,40,71,.16); font-family: var(--font-serif); font-size: clamp(20px,2vw,24px); line-height: 1.2; color: var(--ink); }
.tn-career-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--star); }

/* Headings: no single word stranded on the last line (Hamza 10-01) */
h1, h2, h3, h4 { text-wrap: balance; }
.bl-row-title { text-wrap: balance; }

/* Pinfeed 10-01 (Stacy, mobile): photo headers were cropping heads and the copy sat on
   top of the kids (cookies hidden on 7-12, boys covered on Our Process, second girl cut
   on FAQs, teen header too dark). On phones the photo now stands on its own, sized close
   to its real shape, and the headline sits underneath it on navy. */
@media (max-width:699px){
  .tm-mast, .au-mast, .aac-mast, .st-mast { --mh: calc(var(--header-h, 100px) + 70vw); height: auto; }
  .tm-mast-img, .au-mast-img, .aac-mast-img, .st-mast-img { position: relative; inset: auto; display: block; height: var(--mh); transform: none; animation: none; }
  .tm-mast-scrim, .au-mast-scrim, .aac-mast-scrim, .st-mast-scrim { bottom: auto; height: var(--mh);
    background: linear-gradient(180deg, rgba(7,27,49,.6) 0%, rgba(7,27,49,.12) 24%, rgba(7,27,49,0) 40%, rgba(7,27,49,0) 84%, var(--heritage) 100%); }
  .tm-mast-copy, .au-mast-copy, .aac-mast-copy, .st-mast-copy { position: relative; bottom: auto; padding: 6px 0 clamp(36px,9vw,48px); }
  body.solid-header .au-mast, body.solid-header .aac-mast { margin-top: 0; }
}
/* Pinfeed 10-01 (Stacy, mobile): too much empty space on All About Camp (#391) and
   under the "Our families" copy on Our Process (#398). */
@media (max-width:699px){
  .aac-explore { padding: 36px 0 28px; }
  .aac-gallery { padding-top: 24px; }
  .mk-blend.mk-stack .mk-blend-copy { padding-bottom: 8px; }
  .mk-camps-stick { padding-top: 72px; }
}

/* Newsletter signup in the footer, site-wide (Pinfeed #382/#389, Stacy). Uses the
   newsletter line from the Contact page. Signups go to the same Google Sheet as the match
   form, marked "Newsletter signup", until an email platform is chosen. */
.footer-news { max-width: 1220px; margin: 0 auto clamp(40px,5vw,60px); padding-bottom: clamp(36px,4.6vw,56px); border-bottom: 1px solid rgba(255,255,255,.14); display: grid; gap: 20px 56px; align-items: end; }
@media (min-width: 900px) { .footer-news { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); } }
.footer-news-h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px,3vw,38px); line-height: 1.08; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.footer-news-h em { font-family: var(--font-script); font-style: italic; color: var(--gold, #FFD9A8); }
.footer-news-form { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-news-form input { flex: 1 1 220px; min-width: 0; height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 16px; }
.footer-news-form input::placeholder { color: rgba(255,255,255,.55); }
.footer-news-form input:focus { outline: none; border-color: var(--gold, #FFD9A8); background: rgba(255,255,255,.1); }
.footer-news-form button { flex: 0 0 auto; height: 54px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--canvas, #FDF6EC); color: var(--heritage, #0B2847); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 200ms, color 200ms; }
.footer-news-form button:hover { background: var(--gold, #FFD9A8); }
@media (max-width: 480px) { .footer-news-form button { flex: 1 1 100%; } }
.footer-news-note { flex: 1 1 100%; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); }
.footer-news-note.is-ok { color: var(--gold, #FFD9A8); font-size: 15px; }
.footer-news-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-news-note { flex: 1 1 100%; margin: 4px 0 0; font-size: 15px; color: var(--bronze); }

/* Blog management system (2026-10-01): posts written in the admin can carry links and numbered
   lists. Links in post text underline like .prose a (the "Get started." button, a.bl-cta, sits
   outside p and li and keeps its look); numbered lists keep the dash-list spacing, with the
   number in the dash's accent colour instead of the dash. */
.bl-body p a, .bl-body li a { color: var(--heritage); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-body ol { list-style: none; margin: 0 0 clamp(20px,2.2vw,26px); padding: 0; counter-reset: bl-ol; }
.bl-body ol > li { counter-increment: bl-ol; }
.bl-body ol > li::before { content: counter(bl-ol) "."; top: 0; width: auto; height: auto; background: none; color: var(--star); font-weight: 700; }

/* Pinfeed 10-02 -------------------------------------------------------------
   Newsletter band: Mist Blue + Canvas so the bottom of every page isn't all
   navy (call with Stacy 10-02). The band bleeds edge to edge out of the
   footer's padding; content stays on the 1220px footer grid. */
.site-footer { --fp: clamp(20px,5vw,64px); }
.site-footer .footer-news {
  max-width: none;
  margin: calc(-1 * clamp(60px,8vw,96px)) calc(-1 * var(--fp)) clamp(52px,6.4vw,76px);
  padding: clamp(44px,5.6vw,64px) max(var(--fp), calc((100% + 2 * var(--fp) - 1220px) / 2));
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(255,246,236,.75), transparent 60%),
    var(--mist, #D8F0F4);
  border-bottom: 0; border-top: 3px solid var(--gold, #FFD9A8);
  align-items: center;
}
.site-footer .footer-news .footer-col-head { color: #9A6B1F; }
.site-footer .footer-news-h { color: var(--heritage, #0B2847); }
.site-footer .footer-news-h em { color: var(--heritage, #0B2847); }
.site-footer .footer-news-form input { background: var(--canvas, #FFF6EC); border-color: rgba(11,40,71,.28); color: var(--heritage, #0B2847); }
.site-footer .footer-news-form input::placeholder { color: rgba(11,40,71,.55); }
.site-footer .footer-news-form input:focus { background: #fff; border-color: var(--heritage, #0B2847); }
.site-footer .footer-news-form button { background: var(--heritage, #0B2847); color: var(--canvas, #FFF6EC); }
.site-footer .footer-news-form button:hover { background: var(--heritage-deep, #071B31); color: var(--gold, #FFD9A8); }
.site-footer .footer-news-note { color: rgba(11,40,71,.7); }
.site-footer .footer-news-note.is-ok { color: var(--heritage, #0B2847); font-weight: 600; }

/* All About Camp photo strip (#415): no navy bands above and below; the
   strips sit flush against their gold rules and fill the row. */
.aac-gallery { padding: 0; }
.aac-shot img { height: clamp(170px,24vw,280px); }

/* Benefits of Camp (#414, call 10-02): dock-jump section removed; "Building
   resilient kids" becomes a Mist Blue band with a full-bleed photo that fades
   into it, instead of a long white block with a framed thumbnail. */
.wc-unplug { padding: clamp(60px,7.4vw,88px) 0 clamp(56px,7vw,84px); }
.wc-res-bleed { position: relative; overflow: hidden; background: var(--mist); padding: clamp(60px,7.4vw,92px) 0; }
.wc-res-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
.wc-res-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; display: block; }
.wc-res-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--mist) 0%, rgba(216,240,244,.55) 22%, rgba(216,240,244,0) 55%); }
.wc-res-bleed .wc-inner { position: relative; }
.wc-res-bleed .wc-res-grid { grid-template-columns: 1fr; gap: clamp(20px,2.6vw,30px); max-width: 46%; }
.wc-res-bleed .wc-res-body { border-top-color: rgba(11,40,71,.3); }
@media (max-width: 899px) {
  .wc-res-bleed { padding: 0 0 clamp(52px,12vw,72px); }
  .wc-res-photo { position: relative; width: 100%; height: 68vw; }
  .wc-res-photo::after { background: linear-gradient(180deg, rgba(216,240,244,0) 55%, var(--mist) 100%); }
  .wc-res-bleed .wc-res-grid { max-width: none; margin-top: -8px; }
}
.aac-explore { padding-bottom: clamp(28px,3.6vw,44px); }

/* Dead-space pass (call 10-02: "if there's any dead space anywhere..."). */
.mk-close { padding: clamp(64px,9vw,120px) 0; }
.tn-band { padding: clamp(56px,7.4vw,84px) 0 clamp(60px,8vw,88px); }
.au-intro { padding-bottom: clamp(52px,7vw,80px); }
.au-explore { padding-bottom: clamp(52px,7vw,76px); }
.ww-talk { padding: clamp(56px,7.4vw,80px) 0 clamp(60px,8vw,84px); }
.tm-ten { padding: clamp(48px,6.4vw,72px) 0 clamp(52px,7vw,80px); }
.ct-get { padding: clamp(52px,7vw,76px) 0 clamp(56px,7.4vw,80px); }
.ct-news { padding: clamp(48px,6.4vw,72px) 0 clamp(52px,7vw,76px); }
.aac-intro { padding-bottom: clamp(44px,6vw,64px); }

/* Pinfeed 10-05 (Stacy/Arlene, mostly mobile) ---------------------------------------- */
/* Forms (#418, #419, #451): four gender options, a self-describe write-in, sibling info. */
[data-gender-self][hidden] { display: none; }
.field-opt, .ct-opt { font-weight: 400; letter-spacing: normal; text-transform: none; opacity: .75; }
.sex-row label { text-align: center; line-height: 1.25; }
[data-gender-self] { margin-top: 10px; }
.ct-self { margin-top: 4px; }
/* #453: leadership line under the three names on Our Story. */
.st-officers-note { margin: clamp(18px,2.4vw,24px) 0 0; padding-top: clamp(18px,2.4vw,24px); border-top: 1px solid rgba(255,217,168,.36); }
/* #447: parent quotes scroll as cards, the same swipe as the camp partner cards. */
.mk-ptrack { align-items: flex-start; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: auto !important; padding: 6px 0 4px; }
.mk-ptrack::-webkit-scrollbar { display: none; }
.mk-ptrack .mk-rs { position: relative; left: auto; right: auto; opacity: 1; transform: none; pointer-events: auto; flex: 0 0 84%; max-width: 460px; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 20px; background: rgba(7,27,49,.72); border: 1px solid rgba(255,217,168,.32); backdrop-filter: blur(4px); }
.mk-ptrack .mk-rs blockquote { flex: 1; font-size: clamp(21px,2vw,26px); line-height: 1.3; max-width: none; }
.mk-ptrack .mk-rs .mk-full { align-self: flex-start; }
.mk-rot-ctrl { margin-top: 18px; }
@media (min-width:900px) { .mk-ptrack { max-width: 520px; } .mk-ptrack .mk-rs { flex-basis: 100%; max-width: none; background: none; border: 0; backdrop-filter: none; padding: 0; } .mk-ptrack .mk-rs blockquote { font-size: clamp(26px,2.6vw,36px); line-height: 1.15; } }

@media (max-width:699px) {
  /* Dead space (#420-423, #426, #428, #429, #435-439, #443, #446, #448, #450). */
  .tm-mast-copy, .au-mast-copy, .aac-mast-copy, .st-mast-copy { padding-bottom: 22px; }
  .mk-intro { padding-bottom: 36px; }
  .tn-next { padding: 40px 0 44px; }
  .tn-next-head { margin-bottom: 32px; }
  .tn-world { padding-top: 40px; padding-bottom: 44px; }
  .wc-unplug { padding: 40px 0 36px; }
  .mk-camps-foot { padding-bottom: 84px; }
  .au-intro { padding-top: 22px; }
  .ww-world { padding: 32px 0 44px; }
  .ww-strip { margin-bottom: 36px; }
  .ww-sommelier { margin-top: 36px; }
  .ww-talk { padding: 40px 0 0; }
  .ww-talk-grid { gap: 28px; }
  .st-1992 { padding: 40px 0 40px; }
  .st-growth { padding: 48px 0 48px; }
  .st-close { padding: 36px 0 36px; }
  .tm-ten { padding: 32px 0 28px; }
  .tm-leaders { padding: 24px 0 36px; }
  .tm-leader-row { padding-top: 22px; padding-bottom: 22px; }
  .tm-join { padding-top: 44px; }
  .mk-rot-media { aspect-ratio: 1 / 0.78; }
  .mk-rot-copy { margin-top: -28px; padding-bottom: 36px; }
  .mk-close { padding: 48px 0; }
  .tm-mast.mk-mast-process { height: auto; }
  .ct-get { padding-bottom: 28px; }
  .ct-news { padding-top: 36px; }

  /* Photos edge to edge instead of boxed (#430, #433, #434, #440-#442). */
  .ww-strip { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .ww-strip-track { gap: 10px; }
  .ww-strip .ww-frame, .ww-sommelier .ww-frame, .ww-talk .ww-frame { padding: 0; border: 0; }
  .ww-slide { flex-basis: 88%; }
  .ww-strip-img { height: 64vw; }
  .ww-sommelier > .ww-frame, .ww-talk-grid > .ww-frame { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .ww-somm-img { height: 72vw; }
  .ww-talk-img { height: 104vw; }
  .tm-frame.tm-leader-shot, .tm-frame.tm-leader-shot-wide { max-width: none; padding: 0; border: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .tm-leader-shot img { aspect-ratio: 4 / 3.4; }
  /* Pinfeed (Raffi 10-06): blog post feature photo edge to edge like the
     other phone photos, flush under the title band. */
  .bl-article { padding-top: 0; }
  .bl-figure { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .bl-figure-img { height: 72vw; }
  .bl-article-grid { gap: 28px; }

  /* #427: About Us header photo drops below the logo so her smile shows. */
  .au-mast-img { box-sizing: border-box; padding-top: 64px; background: var(--heritage-deep); object-position: 52% 0%; }
  .au-mast-scrim { background: linear-gradient(180deg, var(--heritage-deep) 0px, rgba(7,27,49,.85) 60px, rgba(7,27,49,.25) 110px, rgba(7,27,49,0) 40%, rgba(7,27,49,0) 84%, var(--heritage) 100%); }

  /* #444: Join our team - CS seal beside the heading, copy pulled up. */
  .tm-join-grid > div:first-child { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 16px; align-items: start; }
  .tm-join-grid > div:first-child > .cs-seal { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .tm-join-grid > div:first-child > .cs-seal img { width: 84px; }
  .tm-join-grid { gap: 24px; }
}