/* ==========================================================================
   Relieve Counseling | site.css
   Roselia M. Ortega, LCSW, Modesto, California

   COLOR
   Every color is a token in :root. Light green carries backgrounds and
   bands. The deeper greens carry text, links, and buttons, because pale
   green can't hold white text and stay readable (all text pairs here pass
   WCAG AA). The therapy page swaps a few tokens (.page-therapy) for a
   cooler eucalyptus version of the same system, so the two services feel
   distinct without looking like two brands.

   MOTION
   One designed moment per page: the hero entrance, and on the classes page
   the curriculum path. Beyond that, motion only answers a tap. Nothing
   important waits on an animation or on JavaScript, and
   prefers-reduced-motion switches all of it off.

   TRANSLATION
   No fixed-width text boxes. Spanish runs 20-25% longer than English.
   ========================================================================== */

@font-face {
  font-family: "Bitter";
  src: url("/bitter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("/bitter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:          #F7FAF5;  /* page */
  --band:        #E3F0DA;  /* the light green */
  --band-line:   #CFE3C3;
  --surface:     #FFFFFF;
  --ink:         #1C2A20;  /* 14:1 on --bg */
  --muted:       #475A4D;  /* 6.2:1 on --band */
  --rule:        #C9DBC2;
  --field-line:  #7C9577;  /* 3.3:1 on white, for input borders */
  --accent:      #2D6A40;  /* buttons, links: white text 6.5:1 */
  --accent-dark: #1F5131;
  --leaf:        #6FAF5C;  /* decorative fills only, never text */
  --leaf-soft:   #D6E8CB;
  --note-bg:     #FFF4DA;  /* compliance panels */
  --note-line:   #E7CF9A;
  --note-edge:   #B7791F;
  --foot:        #173024;
  --foot-text:   #DCE8DE;
  --foot-muted:  #A9BFAE;
  --foot-link:   #B5DFA4;

  /* Body text uses the phone's own font, so it renders instantly on low-end
     devices. Only headings load a webfont, and it's self-hosted. */
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Bitter", Georgia, "Times New Roman", serif;

  --measure: 36rem;
  --wrap: 72rem;
  --gutter: 1.25rem;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 18px 40px -24px rgba(23, 48, 36, .45);
}

.page-therapy {
  --band:        #E0EFEB;
  --band-line:   #C6E0D8;
  --rule:        #C3DAD3;
  --field-line:  #74968E;
  --accent:      #28625E;  /* white text 7:1 */
  --accent-dark: #1C4B47;
  --leaf:        #6AAE9E;
  --leaf-soft:   #D2E8E1;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  /* 17px floor, 18px on desktop. Never shrink it: the audience skews older. */
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .55em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: 2.1rem; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }

p, li { max-width: var(--measure); overflow-wrap: break-word; }
p { margin: 0 0 1em; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }

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

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

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: #fff;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { top: .5rem; color: #fff; }

.muted { color: var(--muted); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: 48rem; }

[id] { scroll-margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  padding-block: .5rem;
}

/* LOGO: a text wordmark until the real logo files arrive. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--accent-dark);
  text-decoration: none;
}
.brand:hover { color: var(--accent); text-decoration: none; }

.nav-toggle { display: none; }

.site-nav { width: 100%; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0 0 .35rem;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.lang-toggle a { font-weight: 600; }

/* Small screens with JavaScript: nav collapses behind a Menu button.
   Without JavaScript it simply stays open. */
@media (max-width: 55.99rem) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .35rem .9rem;
    font: 600 1rem/1 var(--font-body);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 1rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 220ms var(--ease), opacity 160ms var(--ease);
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -5px; }
  .nav-toggle__bars::after  { top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; padding: .25rem 0 .75rem; }
  .js .site-nav li + li a { border-top: 1px solid var(--rule); }
  .js .site-nav a { display: flex; min-height: 50px; border-bottom: 0; }
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .7rem 1.35rem;
  font: 600 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .7; cursor: progress; }

.btn--quiet {
  color: var(--accent);
  background: transparent;
  border-color: var(--band-line);
}
.btn--quiet:hover { color: var(--accent-dark); background: var(--band); border-color: var(--accent); }

@media (max-width: 30rem) {
  .actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Hero
   The first screen answers three questions before anything else: what is
   it, who teaches it, and what does it cost. The next section is sized to
   peek in below it on common laptop and desktop screens.
   -------------------------------------------------------------------------- */

.hero { padding-block: 1.5rem 2.25rem; }

.hero__grid {
  display: grid;
  gap: 1.5rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 1.25rem + 3vw, 3.2rem);
  line-height: 1.07;
  max-width: 23ch;
  margin-bottom: .45em;
}

.hero__lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36rem;
  margin: 0;
}

/* Trust, small screens: name, license, and experience next to her photo. */
.byline {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.15rem;
}
.byline__photo {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--leaf-soft);
}
.byline p { margin: 0; line-height: 1.4; color: var(--muted); }
.byline strong { color: var(--ink); font-weight: 600; }

/* Trust, large screens: photo with a credential card. */
.hero__figure { display: none; margin: 0; }
.hero__photo-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--band);
}
.hero__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.credential {
  position: relative;
  display: grid;
  gap: .1rem;
  margin: -2.75rem .9rem 0;
  padding: .95rem 1.1rem 1rem;
  line-height: 1.4;
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow);
}
.credential__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: .1rem;
}

.status {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 0;
  font-weight: 600;
  color: var(--accent-dark);
}
.status__dot {
  width: .6rem;
  height: .6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 4px var(--leaf-soft);
}

/* Key facts: reads like a program sheet, not a stats banner. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  margin: 1.5rem 0 0;
  border-top: 2px solid var(--accent);
}
.facts > div {
  padding: .65rem 0 .7rem;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-size: .95rem;
  line-height: 1.3;
  color: var(--muted);
}
.facts dd {
  margin: .15rem 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
}
.facts__sub {
  display: block;
  margin-top: .15rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted);
}

.hero__note { margin: 0; }

@media (min-width: 56rem) {
  html { font-size: 18px; }

  .site-header { position: sticky; top: 0; }
  .site-header__inner { flex-wrap: nowrap; padding-block: .6rem; }
  .site-nav { width: auto; }
  .site-nav ul { gap: 1.75rem; padding: 0; }

  [id] { scroll-margin-top: 5.5rem; }

  .hero { padding-block: 2.3rem 2.5rem; }
  .hero__grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    column-gap: 3.5rem;
    row-gap: 1.6rem;
    align-items: start;
  }
  .hero__figure {
    display: block;
    width: 100%;
    max-width: 19.5rem;
    justify-self: end;
  }
  .hero__note { grid-column: 1 / -1; }
  .byline { display: none; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
}

/* Shorter laptop screens: tighten the hero so the next section still peeks. */
@media (min-width: 56rem) and (max-height: 840px) {
  .hero { padding-block: 1.5rem 1.75rem; }
  .hero h1 { font-size: 2.65rem; }
  .hero__lede { font-size: 1.06rem; }
  .hero__grid { row-gap: 1.1rem; }
  .hero__figure { max-width: 16.5rem; }
  .actions { margin-top: 1.1rem; }
  .facts { margin-top: 1.15rem; }
  .facts > div { padding-block: .45rem .5rem; }
  .disclaimer { padding-block: .7rem; }
}

/* --------------------------------------------------------------------------
   Compliance panels. Full body size, never fine print, never animated.
   -------------------------------------------------------------------------- */

.disclaimer {
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-left: 6px solid var(--note-edge);
  border-radius: var(--radius-sm);
  padding: .9rem 1.15rem;
}
.disclaimer p { margin: 0; max-width: none; font-size: 1rem; }
.disclaimer strong { font-family: var(--font-head); font-weight: 700; }

.placeholder {
  background: var(--note-bg);
  border: 2px dashed var(--note-edge);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
}
.placeholder p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.band { padding-block: 3rem; }
.band--tint { background: var(--band); }
.hero + .band { padding-top: 2.25rem; }

.section-head { max-width: 40rem; margin-bottom: 1.75rem; }
.section-head p { color: var(--muted); }
.section-head p:last-child { margin-bottom: 0; }

.two-col { display: grid; gap: 2.5rem; }

@media (min-width: 56rem) {
  .band { padding-block: 4rem; }
  .hero + .band { padding-top: 2.5rem; }
  .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    align-items: start;
  }
  .two-col--form { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  max-width: 38rem;
  padding: 0 0 .7rem 1.75rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .45em;
  width: .8rem;
  height: .45rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Numbered steps: genuinely a sequence, so they earn numbers. */
.steps { counter-reset: step; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  max-width: 36rem;
  padding: .15rem 0 1rem 3rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--band);
  border: 1px solid var(--band-line);
  border-radius: 50%;
}
.band--tint .steps li::before { background: var(--surface); }

/* Ruled link list (about, contact) */
.routes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--accent); }
.routes li { max-width: none; border-bottom: 1px solid var(--rule); }
.routes a {
  display: grid;
  gap: .15rem;
  padding: 1rem 0;
  color: var(--muted);
  text-decoration: none;
}
.routes__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent);
}
.routes a:hover .routes__name { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 56rem) {
  .routes--wide a { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: baseline; }
}

/* --------------------------------------------------------------------------
   Curriculum path (classes page)
   The signature moment: as you scroll, each class marker fills and the line
   grows toward the next, landing on the certificate. Without JavaScript, or
   with reduced motion, everything simply shows filled.
   -------------------------------------------------------------------------- */

.path { list-style: none; margin: 0; padding: 0; max-width: 50rem; }

.path__item {
  position: relative;
  max-width: none;
  padding: 0 0 0 3.5rem;
}

.path__item::before,
.path__item::after {
  content: "";
  position: absolute;
  left: calc(1.25rem - 2px);
  top: 2.55rem;
  bottom: -.3rem;
  width: 4px;
  border-radius: 4px;
}
.path__item::before { background: var(--leaf-soft); }
.path__item::after {
  background: var(--leaf);
  transform-origin: top;
  transition: transform 560ms var(--ease);
}

.path__num {
  position: absolute;
  z-index: 1;
  left: 0;
  top: .25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 50%;
  transition: background-color 320ms var(--ease), color 320ms var(--ease);
}

.is-live .path__item::after { transform: scaleY(0); }
.is-live .path__item.is-passed::after { transform: scaleY(1); }
.is-live .path__item:not(.is-passed) .path__num { color: var(--accent); background: var(--surface); }

.path details { padding: .1rem 0 1.4rem; }

.path summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.path summary::-webkit-details-marker { display: none; }

.path__title {
  grid-column: 1;
  padding-top: .45rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
}
.path__line { grid-column: 1; margin-top: .2rem; color: var(--muted); }

.path__topics {
  margin-top: .7rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.path__topics p { margin: 0; max-width: none; }
.path__topics p + p { margin-top: .5rem; }

/* Shared plus/close icon for anything that expands */
.path summary::after,
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / .8rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px .8rem no-repeat,
    var(--surface);
  transition: transform 260ms var(--ease), border-color 160ms var(--ease);
}
.path summary::after { grid-column: 2; grid-row: 1 / span 2; margin-top: .35rem; }
.path summary:hover::after,
.faq summary:hover::after { border-color: var(--accent); }
.path details[open] > summary::after,
.faq details[open] > summary::after { transform: rotate(45deg); }

/* Where the path lands */
.completion {
  position: relative;
  padding: .35rem 0 0 3.5rem;
}
.completion__mark {
  position: absolute;
  left: 0;
  top: .35rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--leaf-soft);
  transition: background-color 320ms var(--ease), color 320ms var(--ease), box-shadow 480ms var(--ease);
}
.completion__mark svg { width: 1.15rem; height: 1.15rem; }
.is-live .completion:not(.is-passed) .completion__mark {
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 0 var(--leaf-soft);
}

.completion__grid { display: grid; gap: 2rem; }
.completion__rules h3 { padding-top: .45rem; }

.certificate { margin: 0; }
.certificate__label { margin: .45rem 0 .7rem; font-weight: 600; color: var(--muted); }
.certificate__sheet {
  padding: 1.5rem 1.45rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 9px var(--leaf), var(--shadow);
  transition: box-shadow 560ms var(--ease), transform 560ms var(--ease);
}
.is-live .completion:not(.is-passed) .certificate__sheet {
  transform: translateY(8px);
  box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8px var(--rule), 0 0 0 0 rgba(23, 48, 36, 0);
}
.certificate__title {
  margin: .15rem 0 1.1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  text-align: center;
  color: var(--accent-dark);
  max-width: none;
}
.certificate__fields { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.certificate__fields li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  padding-bottom: .4rem;
  color: var(--muted);
  border-bottom: 1px dashed var(--field-line);
}
.certificate__fields strong { font-family: var(--font-head); font-weight: 600; color: var(--ink); }

@media (min-width: 56rem) {
  .completion__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}

/* --------------------------------------------------------------------------
   Therapy page pieces
   -------------------------------------------------------------------------- */

.feels { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--accent); }
.feels li {
  display: grid;
  gap: .3rem;
  max-width: none;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}
.feels__line {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
}
.feels__work { margin: 0; color: var(--muted); }
.feels__plain { margin-top: 1.5rem; }

.approaches {
  display: grid;
  margin: 1.5rem 0 2.25rem;
  border-top: 2px solid var(--accent);
}
.approaches > div { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.approaches h3 { margin-bottom: .3rem; }
.approaches p { margin: 0; color: var(--muted); }

.details { margin: 0 0 1.75rem; border-top: 2px solid var(--accent); }
.details > div { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.details h3 { margin-bottom: .25rem; }
.details p { margin: 0; }

.notice {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.notice h3 { font-size: 1.08rem; }
.notice ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.notice li { margin-bottom: .45rem; }
.notice p:last-child { margin-bottom: 0; }

@media (min-width: 56rem) {
  .feels li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: baseline; }
  .approaches { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  .approaches > div { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   About and contact pieces
   -------------------------------------------------------------------------- */

.about-photo {
  width: 100%;
  max-width: 15rem;
  margin: 0;
}
.about-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.facts--stack { grid-template-columns: 1fr; margin-top: 0; }
.facts--stack > div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}
.facts--stack dd { margin: 0; }

.contact-methods { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.contact-methods > div { padding-top: .8rem; border-top: 2px solid var(--accent); }
.contact-methods h2 {
  margin-bottom: .2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}
.contact-methods .contact-methods__value {
  margin: 0 0 .35rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

@media (min-width: 56rem) {
  .hero--about .hero__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .about-photo { max-width: 19rem; justify-self: end; }
  .contact-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 2px solid var(--accent); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  padding: .85rem 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__body { padding: 0 2.75rem 1.1rem 0; }
.faq__body p { max-width: 40rem; }
.faq__body p:last-child { margin-bottom: 0; }

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

.form-panel {
  padding: 1.35rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form { max-width: 36rem; }

.field { margin-bottom: 1.1rem; }
.field label,
.fieldset legend {
  display: block;
  margin-bottom: .35rem;
  padding: 0;
  font-weight: 600;
}
.optional { font-weight: 400; color: var(--muted); }
.hint {
  display: block;
  margin-bottom: .45rem;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  min-height: 50px;
  padding: .65rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  transition: border-color 160ms var(--ease);
}
textarea { min-height: 7.5rem; line-height: 1.5; resize: vertical; }
input:hover, textarea:hover { border-color: var(--accent); }
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.fieldset { min-width: 0; margin: 0 0 1.1rem; padding: 0; border: 0; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  margin: 0;
  padding: .4rem .95rem .4rem .75rem;
  font-weight: 400;
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.choices label:hover { border-color: var(--accent); }
.choices label:has(input:checked) {
  background: var(--band);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choices input[type="radio"] {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  accent-color: var(--accent);
}

.privacy-note { margin: .9rem 0 0; font-size: .95rem; color: var(--muted); }
.form-error { margin: .9rem 0 0; font-weight: 600; color: #8A2B1A; }

.form-done { padding: .5rem 0; }
.form-done:focus { outline: none; }
.form-done h3 { font-size: 1.35rem; }
.check { width: 3.25rem; height: 3.25rem; margin-bottom: .8rem; }
.check circle { fill: none; stroke: var(--leaf-soft); stroke-width: 3; }
.check path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
}

/* --------------------------------------------------------------------------
   Mobile action bar (landing pages): appears once the hero buttons scroll
   away, hides while the form or booking section is on screen.
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 250, 245, .97);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 24px -18px rgba(23, 48, 36, .5);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 300ms var(--ease), visibility 0s linear 300ms;
}
.sticky-cta.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 300ms var(--ease), visibility 0s;
}
.sticky-cta .btn { width: 100%; }

@media (min-width: 56rem) {
  .sticky-cta { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 2.75rem 2rem;
  color: var(--foot-text);
  background: var(--foot);
}
.site-footer a { color: var(--foot-link); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--foot-link); }
.site-footer h2 {
  margin-bottom: .45rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }

.footer-brand {
  margin-bottom: .6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
}
.footer-cols { display: grid; gap: 1.6rem; }

.crisis {
  max-width: 46rem;
  margin-top: 1.75rem;
  padding: .9rem 1rem;
  border: 1px solid #3E5A48;
  border-left: 5px solid var(--foot-link);
  border-radius: var(--radius-sm);
}
.crisis p { margin: 0; max-width: none; }

.colophon {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  color: var(--foot-muted);
  border-top: 1px solid #2F4A3A;
}
.colophon p { max-width: 62rem; margin: 0 0 .6em; }

@media (min-width: 40rem) {
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero entrance: runs once on load. Opacity starts at zero only for
     text, with no delay on the headline, so the page still paints fast. */
  .rise { animation: rise 560ms var(--ease) both; animation-delay: var(--d, 0ms); }
  .hero__photo { animation: settle 1300ms var(--ease) both; }
  .credential { animation: rise 640ms var(--ease) 260ms both; }

  /* Expanding content (class topics, FAQ answers) */
  details.is-opening > :not(summary) { animation: reveal 300ms var(--ease) both; }

  .form-done:not([hidden]) .check path { animation: draw 560ms var(--ease) 140ms both; }
}

@keyframes rise   { from { opacity: 0; transform: translateY(12px); } }
@keyframes settle { from { transform: scale(1.045); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
@keyframes draw   { from { stroke-dashoffset: 40; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-nav, .nav-toggle, .actions, .btn, .form, .form-panel, .sticky-cta { display: none !important; }
  body { background: #fff; color: #000; }
  .band--tint { background: #fff; }
  .disclaimer { border: 2px solid #000; }
}