/* ===== Beacon Ranch Retreat Center: brand tokens ===== */
:root {
  /* Neutral off-white base. Kept cool to avoid the palette reading brown. */
  --cream: #f2f1ed;
  --cream-alt: #eae9e4;    /* alternating sections: only slightly darker */
  --ink: #212120;          /* 14.3:1 on --cream */
  --ink-soft: #4a4a44;     /* 7.9:1  on --cream */
  --olive: #63665a;        /* 5.2:1  on --cream, 4.8:1 on --cream-alt (WCAG AA) */
  --olive-line: #dcdad3;   /* borders only, never text */
  --dark: #212120;
  --dark-soft: #33332f;
  --white: #ffffff;
  --radius: 14px;
  --font-head: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }

ul { padding-left: 0; list-style: none; margin: 0; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container.narrow { max-width: 780px; }

.center { text-align: center; }
.center-text { text-align: center; display: block; }

.section {
  padding: 5rem 0;
}

.section-alt { background: var(--cream-alt); }

.section-dark {
  background: var(--dark);
}

.section-block {
  scroll-margin-top: 110px;
}

.light-text { color: var(--white); }
.light-copy { color: #d8d8d2; }

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 0.75rem;
}

.eyebrow-light { color: #cdccc6; }

.section-lede {
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.5rem;
}

/* ===== Grids ===== */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

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

.align-center { align-items: center; }
.reverse { direction: rtl; }
.reverse > * { direction: ltr; }

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .reverse { direction: ltr; }
}

.rounded-img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.small-img { margin-top: 1rem; }

.stacked-images img:first-child { aspect-ratio: 4/3; object-fit: cover; }

/* ===== Announcement bar ===== */
.announce {
  background: var(--dark);
  color: var(--cream);
  font-size: 0.85rem;
  padding: 0.6rem 0;
  text-align: center;
}
.announce-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: center;
  align-items: center;
}
.announce-label { font-weight: 600; color: var(--olive-line); }
.announce a { border-bottom: 1px solid rgba(255,255,255,0.35); }
.announce a:hover { border-color: var(--white); }
.announce-sep { opacity: 0.5; }

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid, not translucent: a see-through header let headings ghost through
     as a blurred smudge while scrolling underneath it. */
  background: var(--cream);
  border-bottom: 1px solid var(--olive-line);
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; }
.brand-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.brand-sub {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--olive);
  text-transform: uppercase;
}
.main-nav {
  display: flex;
  gap: 1.6rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.main-nav > a { position: relative; padding: 0.3rem 0; }
.main-nav > a:hover { color: var(--olive); }
.nav-cta { white-space: nowrap; }

/* ===== Offerings dropdown ===== */
.nav-group { position: relative; }

.nav-group-toggle {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-group-toggle:hover { color: var(--olive); }
.caret { font-size: 0.7em; transition: transform 0.15s ease; }
.nav-group-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

/*
  Transparent wrapper. It starts flush at the button's bottom edge (top: 100%)
  and its padding-top supplies the visual gap, so the pointer stays inside the
  hover target the whole way down. Also widened past the card on both sides to
  survive a diagonal mouse path.
*/
.nav-submenu {
  position: absolute;
  top: 100%;
  left: -1.4rem;
  padding: 0.55rem 0.5rem 0.5rem;
  display: none;
  z-index: 200;
}

.nav-submenu-inner {
  min-width: 270px;
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  padding: 0.5rem;
}

/* Opens on hover for mice, and on click/focus for keyboard and touch */
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu,
.nav-submenu.open { display: block; }

.nav-submenu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 7px;
}
.nav-submenu a:hover { background: var(--cream-alt); }
/* Current page inside the dropdown */
.nav-submenu a[aria-current="page"] { background: var(--cream-alt); }
.nav-submenu a[aria-current="page"] .submenu-title { color: var(--olive); }

.submenu-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.submenu-note {
  display: block;
  font-size: 0.78rem;
  color: var(--olive);
  margin-top: 0.1rem;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

@media (max-width: 1040px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 1rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--olive-line);
    display: none;
    gap: 0.9rem;
  }
  .main-nav.open { display: flex; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  /* In the mobile drawer the submenu is always expanded and indented,
     so there is no hover-dependent behavior on touch devices. */
  .nav-group-toggle { display: none; }
  .nav-submenu {
    display: block;
    position: static;
    padding: 0;
    left: auto;
  }
  .nav-submenu-inner {
    min-width: 0;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
  }
  .nav-submenu a { padding: 0.45rem 0; }
  .submenu-note { display: none; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }

.btn-dark { background: var(--ink); color: var(--white); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.85rem; }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.center-row { justify-content: center; }

.link-arrow {
  display: inline-block;
  font-weight: 600;
  font-family: var(--font-head);
  margin-top: 0.5rem;
  border-bottom: 1px solid transparent;
}
.link-arrow:hover { border-color: currentColor; }
.link-arrow-light { color: var(--white); }

/* ===== Hero ===== */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero-inner {
  max-width: 720px;
  padding: 0 1.5rem 5rem;
  margin: 0 auto 0 1.5rem;
}
@media (min-width: 700px) {
  .hero-inner { margin-left: 5vw; }
}
.hero h1 { color: var(--white); }
.hero-copy { color: #ececea; font-size: 1.05rem; max-width: 560px; }

/* ===== /start landing page ===== */
.hero-start { min-height: 76vh; }
.hero-secondary { margin-top: 1.25rem; color: #ececea; font-size: 0.95rem; }
.hero-secondary a { border-bottom: 1px solid rgba(255,255,255,0.5); }
.hero-secondary a:hover { border-color: var(--white); }

.closing-note {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--olive-line);
}

.founders-figure { margin: 0; }
.founders-figure img { aspect-ratio: 4/3; object-fit: cover; }
.founders-figure figcaption {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 0.7rem;
  text-align: center;
}

/* ===== Who we serve cards ===== */
/* ===== The Ranch gallery ===== */
.ranch-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.ranch-gallery figure { margin: 0; }
.ranch-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.ranch-gallery figcaption {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 0.7rem;
}
@media (max-width: 860px) {
  .ranch-gallery { grid-template-columns: 1fr; }
}

/* ===== Entry points (audience doors) ===== */
.entry-points { background: var(--cream-alt); }
/* Used when a tinted section already sits directly above it */
.entry-points-base { background: transparent; }
.entry-grid { margin-top: 2.5rem; }

.entry-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.entry-card:hover { transform: translateY(-2px); border-color: var(--olive); }
.entry-card p { flex: 1; }
.entry-card .link-arrow { margin-top: 0.5rem; }

/* ===== Why cards ===== */
.why-grid { margin-top: 2.5rem; }
.why-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--olive-line);
}

/* Offerings: two products under one audience heading. Mirrors the modality
   cards so the site uses one visual language for "these are different things". */
.offering-grid { margin-top: 3rem; align-items: stretch; }

.offering-card {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  display: flex;
  flex-direction: column;
}
.offering-card h3 { font-size: 1.35rem; margin-bottom: 0.9rem; }
.offering-card .modality-tag { align-self: flex-start; }
.offering-meta {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.5rem;
}
.offering-card .btn { align-self: flex-start; margin-top: auto; }

/* ===== Programs ===== */
/* Site-wide photography note, sits on its own line under the footer */
.photo-note-footer {
  flex-basis: 100%;
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  font-style: italic;
  color: #a8a8a1;
  text-align: center;
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
}
@media (max-width: 860px) { .programs-grid { grid-template-columns: 1fr; } }

.program-card {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 0 0 1.75rem;
  scroll-margin-top: 120px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Photo sits flush to the card's top corners; body copy is inset below it. */
.program-card > *:not(.program-img) { margin-left: 1.75rem; margin-right: 1.75rem; }

.program-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 40%;
  margin-bottom: 1.5rem;
  background: var(--cream-alt);
}

.program-card .btn-row { margin-top: auto; }
.program-tag {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--olive);
  margin-bottom: 0.6rem;
}
.program-date { font-weight: 600; color: var(--ink); }

/* ===== Why horses: research findings ===== */
/* Sits inside the why-horses section, so it carries its own top rule. */
.research-block {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--olive-line);
}
.research-intro {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.45;
}

/* One row per finding: a stacked icon-and-figure mark, then its explanation. */
.findings { margin-top: 2.5rem; }

.finding {
  display: grid;
  grid-template-columns: minmax(170px, 220px) 1fr;
  align-items: start;
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--olive-line);
}
.finding:first-child { border-top: none; padding-top: 0.5rem; }

.finding-mark { text-align: center; }
.finding-icon { color: var(--olive); display: block; }
.finding-icon svg {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 0.75rem;
  stroke-width: 1.3;
}

.finding-figure {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.finding-figure-word { font-size: 1.35rem; }
.finding-unit { font-size: 0.6em; font-weight: 600; letter-spacing: 0.04em; }

.finding-body { padding-top: 0.4rem; }
.finding-headline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.finding-detail { margin: 0; font-size: 0.95rem; }

@media (max-width: 700px) {
  .finding { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .finding-body { text-align: left; }
}

/* Bridges the physiological findings into the model Beacon Ranch actually uses */
.eagala-evidence {
  margin-top: 2.5rem;
  padding: 2rem 2.25rem;
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
}
.eagala-evidence h3 { font-size: 1.3rem; margin: 0 0 0.9rem; }
.eagala-evidence p { margin: 0 0 0.8rem; }
.eagala-evidence p:last-child { margin-bottom: 0; }
/* The Beacon Ranch specific claim inside the EAGALA explanation */
.eagala-claim {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}

.eagala-study {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--olive-line);
}
.eagala-study-lede { font-size: 0.92rem; margin-bottom: 0.6rem; }
.eagala-study .link-arrow { font-size: 0.9rem; margin-top: 0; }

.research-sources {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  color: var(--olive);
  text-align: center;
}

@media (max-width: 700px) {
  .eagala-evidence { padding: 1.5rem 1.35rem; }
}

/* ===== EAP / EAL modality cards ===== */
.lede-statement {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 640px;
  margin: 1rem auto 0;
  line-height: 1.45;
}

/*
  Five shared rows: 1 path header, then tag / heading / list / best-fit inside
  the cards. Both cards adopt those rows with subgrid, so the header rules and
  the "Best fit for" borders line up across columns no matter how the copy wraps.
*/
.modality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 1 path header, then tag / heading / purpose list, then the three parts of
     the best-fit block. Splitting those out means the lists start at the same
     height even when the lede above them wraps to a different number of lines. */
  grid-template-rows: repeat(8, auto);
  column-gap: 3rem;
  margin-top: 3rem;
}

.path-header {
  grid-row: 1;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  padding-bottom: 0.85rem;
  margin: 0 0 1.25rem;
  border-bottom: 2px solid var(--ink);
}
.path-header-a { grid-column: 1; }
.path-header-b { grid-column: 2; }

.modality-card { grid-row: 2 / span 7; }
.modality-card-a { grid-column: 1; }
.modality-card-b { grid-column: 2; }

@supports (grid-template-rows: subgrid) {
  .modality-card {
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

@media (max-width: 860px) {
  .modality-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .path-header, .modality-card { grid-column: 1; grid-row: auto; }
  .modality-card { display: flex; flex-direction: column; margin-bottom: 2rem; }
}

.modality-card {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
}

.modality-tag {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  margin: 0 0 0.9rem;
  justify-self: start;   /* grid: keep the badge to its text width */
  align-self: start;
}

.modality-card h3 { font-size: 1.4rem; margin-bottom: 1.2rem; }

/*
  Full bleed to the card's lower corners. No explicit width: this is a grid item,
  and setting one alongside negative margins over-constrains it, so it renders at
  that width but aligns left and leaves a gutter. Negative margins alone let the
  default stretch carry it to both edges.
*/
.modality-img {
  /* Card padding is 1.9rem each side, so the photo is that much wider than its
     grid area and pulled back by the same amount. max-width must be cleared:
     the global img rule caps at 100%, which was clipping the right edge. */
  width: calc(100% + 3.8rem);
  max-width: none;
  margin: 1.75rem -1.9rem -2rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0 0 var(--radius) var(--radius);
  align-self: end;
}

.modality-list { margin-bottom: 1.5rem; }
.modality-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.8rem;
  color: var(--ink-soft);
}
.modality-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olive);
}

.fit-label, .addon-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 0.5rem;
}
/* Was on the old wrapper; sits on the label now that the block is flattened */
.fit-label {
  border-top: 1px solid var(--olive-line);
  padding-top: 1.1rem;
}
.fit-lede { margin-bottom: 1.1rem; font-size: 0.92rem; }

.fit-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
}
.fit-list li:last-child { margin-bottom: 0; }
/* Arrow drawn with borders rather than a glyph, so it renders identically
   regardless of whether the webfont carries the character. */
.fit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0;
  height: 0;
  border-left: 5px solid var(--olive);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}


/*
  Add ons: one continuous card, the two add ons separated by a hairline rule
  rather than sitting in separate boxes. Each has a per-modality split so it is
  clear either one pairs with either EAP or EAL.
*/
.addons-card {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 0.5rem 2.25rem;
  margin-top: 3rem;
}

.addon-block {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.5rem 2.5rem;
  padding: 2.25rem 0;
}
/* Hairline rule between the two add ons, inside the same card */
.addon-block + .addon-block { border-top: 1px solid var(--olive-line); }

/* Logo sits beside the add on name. Swap .addon-logo-empty for an <img> once
   the real marks are supplied; the slot keeps the layout stable either way. */
.addon-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}
/* Fixed height, free width: handles a square mark and a wide wordmark equally
   well. Marks are shown whole, never cropped. */
.addon-logo {
  flex: 0 0 auto;
  height: 60px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}
.addon-logo-empty {
  width: 60px;
  border: 1px dashed var(--olive);
  border-radius: 8px;
  opacity: 0.45;
}
.addon-block-head h3 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}
.addon-block-head p { margin: 0; font-size: 0.9rem; }

.addon-uses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.addon-use { border-left: 2px solid var(--olive-line); padding-left: 1.1rem; }
.addon-use p:last-child { margin: 0; font-size: 0.9rem; }

.use-tag {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 0.35rem;
}

/* Matches .credential-note so both sections close the same way */
.whole-person-note {
  max-width: 780px;
  margin: 2.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--olive-line);
  text-align: center;
  font-size: 0.95rem;
}

/* Pointer from For Teams / For Clinicians up to the add ons section */
.addon-pointer {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--olive);
  border-bottom: 1px solid var(--olive-line);
}
.addon-pointer:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 860px) {
  .addons-card { padding: 0.5rem 1.35rem; }
  .addon-block { grid-template-columns: 1fr; padding: 1.75rem 0; }
  .addon-uses { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Having a licensed counselor on every session is a real differentiator:
   EAGALA requires one for EAP but not for EAL. Stacked and sized up so the
   two credentials read as a pair and the closing line lands as a claim. */
.credential-note {
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 2px solid var(--ink);
}

.credential-label {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1rem;
}

.credential-role {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.credential-plus {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--olive);
  margin: 0.35rem 0;
}

/* Still the emphasis, but sized to sit with the credentials rather than
   tower over them. */
.credential-emphasis {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
}

/* Past programs: evidence of a real calendar, deliberately quieter than the
   upcoming cards so it never competes with something bookable. */
.past-programs {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--olive-line);
}
.past-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 2.5rem;
}
.past-list li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  color: var(--ink-soft);
  font-size: 0.95rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--olive-line);
}
.past-date {
  flex: 0 0 5.5rem;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
}
@media (max-width: 700px) {
  .past-list { grid-template-columns: 1fr; }
}

/* Dated event block, used for the clinician open house */
.event-card {
  margin-top: 2rem;
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.6rem;
}
.event-flag {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 5px;
  margin: 0 0 0.9rem;
}
.event-card h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.event-focus {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--olive);
  margin: 0 0 1.1rem;
}
.event-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem 1.5rem;
  margin: 0 0 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--olive-line);
}
.event-details dt {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.15rem;
}
.event-details dd { margin: 0; font-size: 0.93rem; color: var(--ink); }
.event-host { font-size: 0.88rem; margin: 0 0 1.2rem; }
@media (max-width: 600px) {
  .event-details { grid-template-columns: 1fr; }
}

/* ===== Timeline ===== */
.timeline { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }
.timeline li { color: var(--ink-soft); padding-left: 1.5rem; border-left: 2px solid var(--olive-line); }
.timeline-time {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

/* ===== Pricing ===== */
.pricing-grid { grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
.pricing-card {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}
.pricing-cta {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  margin-top: 1rem;
}
.fine-print { font-size: 0.85rem; color: var(--olive); }

/* Inclusions note, sits under the typical-day timeline */
.pricing-note {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--olive-line);
}
.pricing-note .fine-print { margin-top: 0.75rem; }

/* Both columns start with a heading so the two lists line up */
.fit-columns { margin-top: 2rem; align-items: start; }
.fit-columns h3 { margin-bottom: 1.1rem; }

/* ===== /start pricing tiers ===== */
.price-group { margin-top: 2.5rem; }

.price-head { margin-bottom: 1.1rem; }
.price-head h3 { font-size: 1.15rem; margin: 0 0 0.25rem; }
.price-head p {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0;
}

/*
  Five shared rows: flag / count / total / unit / save. Each tier adopts them via
  subgrid and its parts are pinned to a named row, so a card missing the flag or
  the savings line still lines its price up with the others.
*/
.price-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  gap: 1rem;
}
@supports (grid-template-rows: subgrid) {
  .price-tier {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    justify-items: center;
    align-content: start;
  }
  .tier-flag  { grid-row: 1; }
  .tier-count { grid-row: 2; }
  .tier-total { grid-row: 3; }
  .tier-unit  { grid-row: 4; }
  .tier-save  { grid-row: 5; }
}

.price-tier {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  text-align: center;
}
/* The recommended tier inverts, as it does on the printed pricing sheet */
.price-tier-best { background: var(--ink); border-color: var(--ink); }

.tier-flag {
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin: 0 0 0.7rem;
}
.tier-count {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 0.5rem;
}
.tier-total {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.tier-unit { font-size: 0.85rem; margin: 0; }
.tier-save {
  font-size: 0.78rem;
  color: var(--olive);
  margin: 0.5rem 0 0;
}

.price-tier-best .tier-count { color: #b9bdb2; }
.price-tier-best .tier-total { color: var(--white); }
.price-tier-best .tier-unit,
.price-tier-best .tier-save { color: #d8d8d2; }

.price-footnote {
  font-size: 0.82rem;
  color: var(--olive);
  text-align: center;
  margin-top: 1.75rem;
}

@media (max-width: 760px) {
  .price-tiers { grid-template-columns: 1fr; }
}

/* ===== Check / X lists ===== */
.check-list li, .x-list li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: 0.9rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "✓";
  position: absolute; left: 0; color: var(--olive); font-weight: 700;
}
.x-list li::before {
  content: "×";
  position: absolute; left: 0; color: #b56a5a; font-weight: 700;
}

/* ===== FAQ ===== */
.faq details {
  border-bottom: 1px solid var(--olive-line);
  padding: 1.1rem 0;
}
.faq summary {
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: var(--olive);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0.9rem; }

/* ===== Forms ===== */
.contact-form, .waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.waitlist-form { max-width: 480px; margin-left: auto; margin-right: auto; }

input, select, textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--olive-line);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.section-dark input, .section-dark select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}
.section-dark input::placeholder { color: #b9b6a8; }

/* Visually hidden but read by screen readers, so every field has a label */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: off screen for people, filled in by bots */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-status { margin: 0.75rem 0 0; font-size: 0.9rem; }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--olive); font-weight: 600; }
.form-status.is-error { color: #a8503f; font-weight: 600; }
.section-dark .form-status.is-success { color: #cfe0c2; }
.section-dark .form-status.is-error { color: #e8b0a3; }

.form-note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--olive);
}

button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.contact-side { padding-left: 1rem; }
.contact-side p { margin-bottom: 1.4rem; }
.contact-side a { border-bottom: 1px solid var(--olive-line); }
.contact-img { margin-top: 1.5rem; aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 860px) {
  .contact-side { padding-left: 0; margin-top: 2rem; }
}

/* ===== About sections ===== */
.principles-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; gap: 1.75rem; }
.principle-card {
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 1.75rem;
}
@media (max-width: 860px) { .principles-grid { grid-template-columns: 1fr; } }

.bio-portrait {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
  margin-bottom: 1.25rem;
}
.bio-card h3 { margin-bottom: 1rem; }

/* ===== Standalone signup page ===== */
.signup-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1.25rem 4rem;
  background: var(--cream-alt);
}
.signup-card {
  width: 100%;
  max-width: 620px;
  background: var(--white);
  border: 1px solid var(--olive-line);
  border-radius: var(--radius);
  padding: 2.5rem 2.5rem 2rem;
}

.signup-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 2rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.signup-brand img { width: 40px; height: 40px; object-fit: contain; }

.signup-card h1 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 0.6rem; }
.signup-card > p { margin-bottom: 0; }

.signup-form { margin-top: 2rem; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.field-hint { font-weight: 500; color: var(--olive); letter-spacing: 0; }
.field[hidden] { display: none; }

.signup-submit { width: 100%; margin-top: 0.5rem; }

.signup-footer {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--olive-line);
  font-size: 0.85rem;
  color: var(--olive);
  text-align: center;
}
.signup-footer a { border-bottom: 1px solid var(--olive-line); }

@media (max-width: 560px) {
  .signup-card { padding: 1.75rem 1.35rem 1.5rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ===== Footer ===== */
.site-footer {
  background: var(--dark);
  color: #cdccc6;
  padding: 2.5rem 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand img { width: 40px; height: 40px; object-fit: contain; }
.footer-title {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  margin: 0;
  font-size: 0.85rem;
}
.footer-sub {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--olive-line);
  margin: 0;
}
.footer-info { display: flex; gap: 1.5rem; font-size: 0.9rem; }
.footer-info a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .section { padding: 3.5rem 0; }
  .footer-inner { flex-direction: column; text-align: center; }
}