/* ============================================================
   Center X Equine Therapy - shared stylesheet
   Mobile-first (base = ~375px), enhanced at min-width breakpoints.
   Used by: index, programs, support, team, waitlist.
   ============================================================ */

:root {
  --terracotta: #be562b;
  --terracotta-dark: #a4471f;
  --olive: #70794e;
  --olive-dark: #5c6440;
  --sage: #8a9c85;
  --sage-dark: #74886f;
  --brown: #432211;
  --brown-box: #5c6440;
  --ink: #432211;
  --muted: #6f5d4f;
  --paper: #ffffff;
  --cream: #f7f1e7;
  --cream-soft: #fbf6ee;
  --line: #e7ded3;
  --serif: "Roboto Slab", Georgia, "Times New Roman", serif;
  --sans: Karla, Helvetica, Arial, sans-serif;
  --content: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
}
img { display: block; height: auto; width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, p { margin: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}
/* On dark/photo headers the focus ring needs to read against the image. */
.masthead a:focus-visible,
.masthead summary:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.hero summary:focus-visible {
  outline-color: #fff;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  background: var(--terracotta);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  left: 1rem;
  padding: 0.65rem 0.9rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-160%);
  z-index: 60;
}
.skip-link:focus { transform: translateY(0); }

.proto-banner {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.6rem 1.25rem;
  text-align: center;
}

.wrap { margin: 0 auto; max-width: var(--content); padding: 0 1.25rem; width: 100%; }

/* ---------- Navigation (shared across all pages) ---------- */
.top-nav {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1480px;
  padding: 1.5rem 1.25rem;
}
.brand { color: #fff; display: inline-flex; text-decoration: none; }
.brand svg { height: 58px; width: auto; }
.nav-cluster { display: none; }
.utility-links {
  color: #fff;
  display: flex;
  font-family: var(--sans);
  font-size: 0.72rem;
  gap: 0.5rem;
  justify-content: flex-end;
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
}
.utility-links a { text-decoration: none; }
.nav-links { display: flex; gap: 1.35rem; justify-content: flex-end; }
.nav-links a {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: #f2d8c6; }

.mobile-menu { color: #fff; position: relative; }
.mobile-menu summary {
  border: 1px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  list-style: none;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.85rem;
  text-transform: uppercase;
}
.mobile-menu summary::-webkit-details-marker { display: none; }

/* Toggle label swaps to a close (X) when the overlay is open. */
.mobile-menu .mm-label-close { display: none; }
.mobile-menu[open] .mm-label-open { display: none; }
.mobile-menu[open] .mm-label-close { display: inline; font-size: 1.15rem; line-height: 1; }

/* When open, the toggle becomes a fixed close button above the overlay. */
.mobile-menu[open] summary {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 1001;
  background: rgba(255, 255, 255, 0.1);
}

/* Full-screen overlay (only rendered while the menu is open). */
.mobile-menu nav {
  background: radial-gradient(
    ellipse 60% 45% at center,
    rgba(47, 58, 36, 0.55) 0%,
    rgba(47, 58, 36, 0.55) 25%,
    rgba(47, 58, 36, 0.10) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 5rem 1.5rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu nav a {
  color: #fff;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  text-decoration: none;
}
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible { color: #f2d8c6; }

body.menu-open { overflow: hidden; }

/* ---------- Interior page masthead (programs/support/team/waitlist) ---------- */
.masthead {
  background:
    linear-gradient(rgba(40, 28, 18, 0.46), rgba(40, 28, 18, 0.40)),
    var(--brown);
  background-size: cover;
  background-position: center 45%;
  position: relative;
}
.hero-spacer { height: 52vh; min-height: 300px; max-height: 480px; }
.page-label {
  bottom: 0;
  left: max(1.25rem, calc((100vw - var(--content)) / 2));
  position: absolute;
  transform: translateY(50%);
}
.page-label h1 {
  background: var(--brown-box);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 500;
  line-height: 1;
  padding: 0.85rem 1.4rem 1rem;
}

main { padding-top: 0; }
.page-main { padding-top: 3.75rem; }

/* ---------- Pills / buttons ---------- */
.pill {
  align-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: 0.78rem 1.5rem;
  text-decoration: none;
  text-align: center;
}
.pill.terracotta { background: var(--terracotta); }
.pill.terracotta:hover { background: var(--terracotta-dark); }
.pill.sage { background: var(--sage); }
.pill.sage:hover { background: var(--sage-dark); }
.pill.olive { background: var(--olive); }
.pill.olive:hover { background: var(--olive-dark); }
.pill.ghost { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255,255,255,0.7); }
.pill.ghost:hover { background: rgba(255, 255, 255, 0.28); }

.pill-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

/* ---------- Generic section headings ---------- */
.section { padding-block: 2.75rem; }
/* Anchored sections (deep links like team.html#horses) land with breathing room */
section[id] { scroll-margin-top: 1.5rem; }
.section-tint { background: var(--cream); }
.section h2,
.kicker-title {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.lede { max-width: 720px; }
.subhead {
  color: var(--olive);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.subhead em { color: var(--terracotta); font-style: normal; }
.eyebrow {
  color: var(--olive);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.story-media { border-radius: 4px; overflow: hidden; box-shadow: 0 12px 30px rgba(67, 34, 17, 0.14); }
.story-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.note-box {
  background: var(--cream-soft);
  border-left: 5px solid var(--sage);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 1.4rem 0;
  padding: 0.85rem 1rem;
}
.note-box.olive { border-left-color: var(--olive); }
.note-box strong { color: var(--ink); }

/* ---------- Cards grid ---------- */
.card-grid { display: grid; gap: 1.1rem; }
.card {
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(67, 34, 17, 0.07);
  display: grid;
  gap: 0.5rem;
  padding: 1.4rem;
  background: #fff;
}
.card h3 {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
}
.card a.pill { margin-top: 0.6rem; justify-self: start; }

/* ---------- Form embeds (Fillout) ---------- */
.form-embed {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(67, 34, 17, 0.12);
  min-height: 420px;
  padding: 0.25rem;
  width: 100%;
}
.form-embed.is-live { padding: 0; }
.fillout-embed-inner { min-height: 420px; width: 100%; }
.form-embed-fallback {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  padding: 1.25rem;
}
.givebutter-embed {
  margin-top: 1.25rem;
  max-width: 480px;
  min-height: 520px;
  width: 100%;
}
.givebutter-embed.is-live { min-height: 560px; }
.impact-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin: 1.25rem 0 0;
}
.impact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  padding: 1rem 1.1rem;
}
.impact-card strong {
  color: var(--terracotta);
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
@media (min-width: 640px) {
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donate-live-layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr minmax(280px, 420px);
  }
}

/* ---------- Forms (shared) ---------- */
form.site-form {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(67, 34, 17, 0.12);
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
}
label.field {
  display: grid;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 0.35rem;
}
input, select, textarea {
  background: #fff;
  border: 1px solid #d8cdbe;
  color: var(--ink);
  font: inherit;
  min-height: 46px;
  padding: 0.72rem;
  width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
.field-hint { color: var(--muted); font-size: 0.78rem; font-weight: 400; line-height: 1.45; }
.check-label {
  align-items: start;
  display: grid;
  font-weight: 400;
  gap: 0.6rem;
  grid-template-columns: 1.1rem 1fr;
  font-size: 0.9rem;
}
.check-label input { min-height: auto; width: auto; }

/* ---------- Image carousel (reusable, accessible) ---------- */
.carousel { position: relative; }
.carousel-viewport {
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(67, 34, 17, 0.12);
}
.carousel-track {
  display: flex;
  transition: transform 0.45s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.carousel-slide img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.carousel-controls {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.75rem;
}
.carousel-btn {
  align-items: center;
  background: var(--olive);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: 1.1rem;
  line-height: 1;
}
.carousel-btn:hover { background: var(--olive-dark); }
.carousel-dots { display: flex; gap: 0.4rem; }
.carousel-dot {
  background: #d8cdbe;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 12px;
  width: 12px;
  padding: 0;
}
.carousel-dot[aria-current="true"] { background: var(--terracotta); }
/* Hit area >=44px for the small dots without enlarging the visual dot. */
.carousel-dot { position: relative; }
.carousel-dot::after {
  content: "";
  position: absolute;
  inset: -16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { transition: none; }
}

/* ---------- Footer (shared) ---------- */
footer { background: var(--olive); color: #f4efe4; padding: 3rem 0 2rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand svg { color: #fff; height: 64px; width: auto; }
.footer-contact { margin-top: 0.85rem; }
.footer-contact a { color: #fff; text-decoration: underline; text-underline-offset: 0.16em; }
.footer-contact .addr { font-style: normal; line-height: 1.5; }
.footer-contact .dir { display: inline-block; margin-top: 0.45rem; font-weight: 700; }
footer h3 { color: #fff; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin-bottom: 0.6rem; }
footer p { font-size: 0.9rem; }
.footer-newsletter { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.footer-newsletter label { color: #f4efe4; font-size: 0.8rem; font-weight: 700; display: grid; gap: 0.3rem; }
.footer-newsletter input { background: #fff; border: 0; color: var(--ink); min-height: 44px; padding: 0.6rem 0.7rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.footer-links a {
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
}
.footer-links a:hover { text-decoration: underline; }
.build-credit {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 0.85rem 1.4rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.25rem;
}
.build-credit p { margin: 0; }
.build-credit a { color: #fff; text-decoration: underline; }
.build-credit a:hover { color: var(--terracotta); }
.build-credit .build-cta {
  align-items: center;
  background: var(--terracotta);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  text-decoration: none;
}
.build-credit .build-cta:hover { background: var(--terracotta-dark); color: #fff; }

.legal { font-size: 0.78rem; margin-top: 1rem; padding-top: 0.5rem; }

/* ============================================================
   HOME (index.html)
   ============================================================ */
.hero {
  min-height: 88vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: #2a1c12; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-video.is-active { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(30, 20, 12, 0.45) 0%, rgba(30, 20, 12, 0.15) 38%, rgba(30, 20, 12, 0.62) 100%);
}
.hero-nav-wrap, .hero-body { position: relative; z-index: 2; }
/* Nav must out-stack the hero body so the open mobile menu covers the hero text. */
.hero-nav-wrap { z-index: 6; }
.hero-body {
  align-self: end;
  margin: 0 auto;
  max-width: var(--content);
  padding: 1.5rem 1.25rem 4.75rem;
  width: 100%;
}
.hero-eyebrow {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 500;
  line-height: 1.02;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-copy {
  color: #fff;
  font-size: 1.05rem;
  margin-top: 0.85rem;
  max-width: 36rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.hero-controls {
  position: absolute;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  z-index: 3;
}
.hero-toggle {
  align-items: center;
  background: rgba(30, 20, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero-toggle:hover { background: rgba(30, 20, 12, 0.78); }
.hero-toggle svg { display: block; width: 18px; height: 18px; }

.paths { padding-block: 3.25rem 1rem; }
.paths-grid { display: grid; gap: 1.1rem; }
.path-card a { margin-top: 0.6rem; justify-self: start; }

.mission { padding-block: 2.5rem; }
.mission .loc { color: var(--muted); font-size: 0.95rem; margin-top: 1rem; }
.mission .loc a { color: var(--terracotta); font-weight: 700; }

/* Home previews (Meet the Team / Therapy Horses) */
.previews { padding: 2.75rem 0; }
.preview-grid { display: grid; gap: 1.5rem; }
.preview-card {
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(67, 34, 17, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-media { aspect-ratio: 4 / 3; overflow: hidden; }
.preview-media img { height: 100%; object-fit: cover; }
.preview-media.placeholder {
  align-items: center;
  background: var(--cream);
  display: flex;
  justify-content: center;
}
.preview-media.placeholder span {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 1rem;
  text-align: center;
}
.preview-body { display: grid; gap: 0.55rem; padding: 1.3rem; }
.preview-body h3 {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
}
.preview-body a.pill { justify-self: start; margin-top: 0.4rem; }

.donate-band {
  background:
    linear-gradient(rgba(67, 34, 17, 0.82), rgba(67, 34, 17, 0.82)),
    url("assets/site/hero-3-sunset.jpg") center / cover;
  color: #fff;
  padding: 3.25rem 0;
  text-align: center;
}
.donate-band h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.donate-band p { margin: 0 auto 1.5rem; max-width: 40rem; }

/* Testimonial (trust near conversion) */
.testimonial {
  border-left: 5px solid var(--sage);
  margin: 1.75rem auto 0;
  max-width: 720px;
  padding: 0.5rem 0 0.5rem 1.25rem;
}
.testimonial blockquote {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  margin: 0;
}
.testimonial cite { color: var(--muted); display: block; font-size: 0.85rem; font-style: normal; margin-top: 0.6rem; }

/* Larger pull quote (mission) */
.pullquote {
  border-left: 5px solid var(--sage);
  margin: 1.75rem 0 0;
  max-width: 760px;
  padding: 0.5rem 0 0.5rem 1.5rem;
}
.pullquote blockquote {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.pullquote cite {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
  font-style: normal;
  margin-top: 0.7rem;
}
.pullquote .pullquote-support {
  color: var(--ink);
  margin-top: 1.1rem;
  max-width: 640px;
}

/* See it in action (vertical Short embed) */
.watch { padding-block: 2.5rem 1rem; }
.short-embed {
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border-radius: 16px;
  margin: 1.5rem 0 0;
  max-width: 340px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 14px 34px rgba(67, 34, 17, 0.16);
}
.short-embed iframe { border: 0; display: block; height: 100%; width: 100%; }
.watch-link { margin-top: 1rem; }
.watch-link a { color: var(--terracotta); font-weight: 700; }

/* Footer social icon row */
.social-row { display: flex; gap: 0.6rem; }
.social-row a {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.social-row a:hover { background: var(--terracotta); }
.social-row svg { height: 22px; width: 22px; }

/* ============================================================
   PROGRAMS (programs.html)
   ============================================================ */
.content-row { display: grid; gap: 2.25rem; padding-block: 2.5rem 1.5rem; }
.article { min-width: 0; }
.meta-lines { font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.4rem; }
.meta-lines .fine { color: var(--muted); font-style: italic; }
.lead {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.feature-list { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.feature-list li { margin-bottom: 0.45rem; }
.side-photo { align-self: start; box-shadow: 0 18px 45px rgba(67, 34, 17, 0.18); overflow: hidden; }
.side-photo img { aspect-ratio: 3 / 4; object-fit: cover; }

.service-block { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.75rem; }
.service-block h3 {
  color: var(--olive);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.service-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.7rem;
  padding: 0.25rem 0.6rem;
  text-transform: uppercase;
}
.service-status.now { background: #e4ecd9; color: var(--olive-dark); }
.service-status.future { background: #f3e2d6; color: var(--terracotta-dark); }

.sources { font-size: 0.9rem; }
.sources h3 {
  color: var(--olive);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.sources ul { margin: 0; padding-left: 1.25rem; }
.sources li { margin-bottom: 0.5rem; word-break: break-word; }
.sources a { color: var(--terracotta); font-weight: 700; }

/* ============================================================
   SUPPORT (support.html)
   ============================================================ */
.toggle-row {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 1.5rem;
}
.toggle-row button {
  background: #fff;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
}
.toggle-row button[aria-pressed="true"],
.toggle-row button[aria-checked="true"] { background: var(--terracotta); color: #fff; }

.tier-grid { display: grid; gap: 1rem; margin: 1.5rem 0; }
.tier-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(67, 34, 17, 0.07);
  padding: 1.3rem;
}
.tier-card .amount {
  color: var(--terracotta);
  display: block;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.tier-card h3 {
  color: var(--olive);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.tier-card p { font-size: 0.9rem; }

/* ---------- Donation (Givebutter-style mockup) ---------- */
.donate-layout { display: grid; gap: 1.5rem; margin-top: 1.25rem; align-items: start; }
.donate-choices .tier-grid { margin: 0; }

/* Selectable tier cards (radio semantics) */
button.tier-card {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
button.tier-card .tier-name {
  color: var(--olive);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
button.tier-card .tier-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
button.tier-card:hover { border-color: var(--terracotta); }
button.tier-card[aria-checked="true"] {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 2px var(--terracotta), 0 10px 26px rgba(67, 34, 17, 0.12);
}

/* Givebutter-style panel */
.gb-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(67, 34, 17, 0.14);
  overflow: hidden;
}
.gb-head {
  align-items: center;
  background: #1a1a2e;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
}
.gb-mark { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.01em; }
.gb-mark span { color: #ffd166; }
.gb-demo {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
}
.gb-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem; }
.gb-org { color: var(--muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.gb-amount-line { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gb-amount { color: var(--ink); font-family: var(--serif); font-size: 2.5rem; font-weight: 700; line-height: 1; }
.gb-freq { color: var(--muted); font-size: 0.92rem; }
.gb-donate { width: 100%; margin-top: 0.35rem; }
.gb-secure, .gb-powered { color: var(--muted); font-size: 0.78rem; margin: 0; }
.gb-powered strong { color: var(--ink); }
.gb-confirm {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
}
.gb-confirm[hidden] { display: none; }
.gb-confirm strong { color: var(--olive); font-family: var(--serif); font-size: 1.05rem; }
.gb-confirm span { font-size: 0.88rem; }
.link-btn {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--terracotta);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: 0;
  text-decoration: underline;
}

.support-media { overflow: hidden; box-shadow: 0 16px 40px rgba(67, 34, 17, 0.14); }
.support-media img { aspect-ratio: 4 / 3; object-fit: cover; }

.sponsor-wall { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.sponsor-chip {
  align-items: center;
  background: #fff;
  border: 1px dashed #c9bca9;
  color: var(--muted);
  display: flex;
  font-size: 0.85rem;
  justify-content: center;
  min-height: 80px;
  padding: 1rem;
  text-align: center;
}

/* Named sponsor recognition cards */
.sponsor-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(67, 34, 17, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: center;
  min-height: 80px;
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.sponsor-motif {
  align-items: center;
  background: var(--cream);
  border-radius: 50%;
  color: var(--olive);
  display: flex;
  height: 64px;
  justify-content: center;
  width: 64px;
}
.sponsor-motif svg { height: 34px; width: 34px; }
.sponsor-eyebrow {
  color: var(--olive);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}
.sponsor-name {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
}
.sponsor-card.invite {
  background: var(--cream-soft);
  border-style: dashed;
  border-color: #c9bca9;
  padding: 0;
}
.sponsor-card.invite a {
  align-items: center;
  color: var(--terracotta);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 1.75rem 1.25rem;
  text-decoration: none;
  width: 100%;
}
.sponsor-card.invite .sponsor-motif { background: #fff; color: var(--terracotta); }

.wishlist-list { margin: 0; padding-left: 1.25rem; }
.wishlist-list li { margin-bottom: 0.4rem; }

/* ============================================================
   TEAM (team.html)
   ============================================================ */
.therapist-grid { display: grid; gap: 1.75rem; }
.therapist-card {
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(67, 34, 17, 0.1);
  overflow: hidden;
}
.therapist-photo { aspect-ratio: 4 / 5; }
.therapist-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.therapist-photo.placeholder {
  align-items: center;
  background: var(--cream);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.5rem;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.therapist-photo.placeholder svg { height: 56px; width: 56px; opacity: 0.7; }
.therapist-body { display: grid; gap: 0.7rem; padding: 1.4rem; }
.therapist-body h3 {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
}
.therapist-body .role { color: var(--olive); font-weight: 700; }
.therapist-body h4 {
  border-bottom: 1px solid var(--line);
  color: var(--terracotta-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-top: 0.9rem;
  padding-bottom: 0.3rem;
  text-transform: uppercase;
}

.horse-grid { display: grid; gap: 2rem; }
.horse-card {
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(67, 34, 17, 0.1);
  overflow: hidden;
}
.horse-card .horse-body { display: grid; gap: 0.7rem; padding: 1.4rem; }
.horse-card h3 {
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
}
.horse-meta {
  color: var(--olive);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.horse-card h4 {
  color: var(--olive-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
  text-transform: uppercase;
}

/* Clinical & Equine Team: smaller 3-up cards (headshot + blurb) */
.therapist-grid { gap: 1.25rem; }
.therapist-grid .therapist-photo { aspect-ratio: 1 / 1; }
.therapist-grid .therapist-body { padding: 1.2rem; gap: 0.5rem; }
.therapist-grid .therapist-body h3 { font-size: 1.2rem; }
.therapist-grid .therapist-body > .role { font-size: 0.82rem; }
.therapist-grid .therapist-body > p { font-size: 0.9rem; line-height: 1.5; }

/* Board of Directors grid + compact cards */
.board-grid { display: grid; gap: 1.5rem; }
.therapist-card.compact .therapist-body { padding: 1.2rem; }
.therapist-card.compact .therapist-body h3 { font-size: 1.3rem; }

/* "Read full bio" expander (no JS) */
.bio-more { margin-top: 0.5rem; }
.bio-more > summary {
  align-items: center;
  color: var(--terracotta);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  font-size: 0.9rem;
  list-style: none;
  min-height: 44px;
}
.bio-more > summary::-webkit-details-marker { display: none; }
.bio-more > summary::after { content: "\25BE"; margin-left: 0.4rem; }
.bio-more[open] > summary::after { content: "\25B4"; }
.bio-more > summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; }
.bio-more .less-label { display: none; }
.bio-more[open] .more-label { display: none; }
.bio-more[open] .less-label { display: inline; }
.bio-full { display: grid; gap: 0.7rem; padding-top: 0.4rem; }

/* ============================================================
   Motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ============================================================
   Mobile-only typography (reduce text density on small screens)
   ============================================================ */
@media (max-width: 600px) {
  body { line-height: 1.6; }
  .hero-copy { font-size: 1rem; line-height: 1.5; }
  .lede { line-height: 1.55; }
  .article p { font-size: 1.05rem; line-height: 1.55; }
  .article p + p { margin-top: 0.85rem; }
}

/* ============================================================
   Breakpoints (enhance upward)
   ============================================================ */
@media (min-width: 720px) {
  .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .therapist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .board-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .mobile-menu { display: none; }
  .nav-cluster { display: block; }
  .brand svg { height: 66px; }
  .hero-spacer { height: 60vh; min-height: 420px; max-height: 600px; }
  .hero-body { padding-bottom: 4rem; }
  .pill-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .paths-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content-row { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.82fr); padding-top: 3.5rem; }
  .support-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr); gap: 2.25rem; align-items: start; }
  .donate-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 2rem; }
  .gb-panel { position: sticky; top: 1.25rem; }
  .footer-grid { grid-template-columns: 1.5fr 1fr; }
}