/* ============================================================
   File: assets/css/site.css
   Purpose: Brand layer over Bootstrap 5.3 for wellnesswithalee.com.
            A lighter, earthy take on the planagarden.net look the owner
            chose as the reference: paper surfaces, sage/moss accents
            lifted from her existing logo mark, warm clay as the second
            accent, Fraunces for display and Spectral for body copy.
            --wwa-* tokens are bridged onto the --bs-* vars Bootstrap
            reads, plus the purpose classes Bootstrap does not cover.
            The sibling stylesheets (blog.css, guides.css, glossary.css,
            blog-pager.css) read these tokens and nothing else.
   Brand:   logo mark sage #708468 / wordmark forest #143008 (sampled
            from the Wix-era logo PNG, 2026-10-04); palette otherwise
            derived from planagarden's paper #f3ecdb / forest #33503a
   Fonts:   Fraunces + Spectral, self-hosted (assets/fonts/fonts.css)
   Author:  Juhriah Web Solutions
   Created: 2026-10-04 — first CSS pass on the CCC base; one pass only
            by house rule, the owner reviews screenshots before round two
   ============================================================ */

/* ── BRAND TOKENS + BOOTSTRAP BRIDGE ─────────────────────── */
:root {
  /* surfaces */
  --wwa-paper:         #f8f4ea;  /* page background */
  --wwa-paper-2:       #f0e9d9;  /* alternating section surface */
  --wwa-card:          #fdfbf5;  /* cards, panels, inputs */
  --wwa-tint:          #e9efe2;  /* sage callout tint */
  --wwa-tint-warm:     #f3e6d5;  /* clay callout tint */
  --wwa-border:        #ddd3bd;

  /* ink */
  --wwa-ink:           #2b2a22;  /* body copy */
  --wwa-body-soft:     #4e4a3f;  /* secondary copy */
  --wwa-muted:         #6b6757;  /* captions, meta — AA on paper, paper-2 and card */
  --wwa-forest-ink:    #1a3010;  /* display headings — the wordmark green */

  /* accents */
  --wwa-sage:          #708468;  /* logo mark — rules, chips, icons, large text only */
  --wwa-moss:          #4b6245;  /* links, buttons, small accent text */
  --wwa-moss-deep:     #2f4530;  /* footer + inquiry band surface, hover */
  --wwa-clay:          #b8743f;  /* warm second accent — eyebrows, markers */
  --wwa-clay-deep:     #8a5530;  /* clay as text */
  --wwa-red-text:      #a33a2a;

  /* text on the deep-moss surfaces */
  --wwa-on-dark:       #f8f4ea;
  --wwa-on-dark-soft:  #d9d3c1;
  --wwa-on-dark-label: #b9c6ae;
  --wwa-on-dark-muted: #c6c1ad;

  /* aliases the sibling stylesheets were written against */
  --wwa-accent:        var(--wwa-sage);
  --wwa-accent-strong: var(--wwa-moss);
  --wwa-surface:       var(--wwa-paper-2);
  --wwa-callout-tint:  var(--wwa-tint);
  --wwa-ink-deep:      var(--wwa-moss-deep);
  --wwa-ink-soft:      var(--wwa-moss-deep);

  --wwa-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --wwa-font-body:    'Spectral', Georgia, 'Times New Roman', serif;

  /* Bootstrap bridge — the framework reads these everywhere */
  --bs-body-font-family: var(--wwa-font-body);
  --bs-body-font-size: 1.0625rem;      /* 17px */
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--wwa-ink);
  --bs-body-bg: var(--wwa-paper);
  --bs-border-color: var(--wwa-border);
  --bs-link-color: var(--wwa-moss);
  --bs-link-hover-color: var(--wwa-moss-deep);
  --bs-link-color-rgb: 75, 98, 69;
  --bs-link-hover-color-rgb: 47, 69, 48;  /* moss-deep — without it a:hover fell back to Bootstrap blue */
  --bs-emphasis-color: var(--wwa-forest-ink);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { background: var(--wwa-paper); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wwa-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--wwa-forest-ink);
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 500; }
h3 { font-size: 1.35rem; }
strong { font-weight: 600; }

/* 1100px shell — Bootstrap's wider caps overridden site-wide */
.container {
  max-width: 1100px;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── SKIP LINK ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1100;
  background: var(--wwa-moss);
  color: var(--wwa-on-dark);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
/* Two purpose buttons, used by the hero, service pages and the band. */
.btn-primary-action,
.btn-secondary-action {
  --bs-btn-font-family: var(--wwa-font-body);
  --bs-btn-font-size: 0.95rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-y: 11px;
  --bs-btn-padding-x: 24px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.btn-primary-action {
  --bs-btn-bg: var(--wwa-moss);
  --bs-btn-border-color: var(--wwa-moss);
  --bs-btn-color: var(--wwa-on-dark);
  --bs-btn-hover-bg: var(--wwa-moss-deep);
  --bs-btn-hover-border-color: var(--wwa-moss-deep);
  --bs-btn-hover-color: var(--wwa-on-dark);
  --bs-btn-active-bg: var(--wwa-moss-deep);
  --bs-btn-active-border-color: var(--wwa-moss-deep);
  --bs-btn-active-color: var(--wwa-on-dark);
}
.btn-secondary-action {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--wwa-moss);
  --bs-btn-color: var(--wwa-moss);
  --bs-btn-hover-bg: var(--wwa-tint);
  --bs-btn-hover-border-color: var(--wwa-moss-deep);
  --bs-btn-hover-color: var(--wwa-moss-deep);
  --bs-btn-active-bg: var(--wwa-tint);
  --bs-btn-active-border-color: var(--wwa-moss-deep);
  --bs-btn-active-color: var(--wwa-moss-deep);
}

/* ── SITE HEADER (light) ─────────────────────────────────── */
.site-header {
  background: var(--wwa-paper);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--wwa-border);
}
.site-header .navbar { padding: 12px 0; }
.site-logo { display: inline-flex; align-items: center; gap: 0.7em; }
.site-logo:hover, .site-logo:focus { text-decoration: none; }
/* The owner's existing lockup (assets/images/brand/wwa-lockup.png, 868×306
   source, transparent) — rendered at a fixed height, width follows. The
   footer uses wwa-mark-light.png, the same lotus recoloured paper for the
   deep-moss surface. */
.site-logo-lockup { height: 52px; width: auto; display: block; }
.site-logo-mark { height: 2.4em; width: auto; flex: none; }
.site-logo-text {
  display: block;
  font-family: var(--wwa-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--wwa-forest-ink);
  line-height: 1.15;
}
.site-logo-text small {
  display: block;
  font-family: var(--wwa-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--wwa-muted);
  letter-spacing: 0.04em;
}
.header-cta {
  --bs-btn-bg: var(--wwa-moss);
  --bs-btn-border-color: var(--wwa-moss);
  --bs-btn-color: var(--wwa-on-dark);
  --bs-btn-hover-bg: var(--wwa-moss-deep);
  --bs-btn-hover-border-color: var(--wwa-moss-deep);
  --bs-btn-hover-color: var(--wwa-on-dark);
  --bs-btn-active-bg: var(--wwa-moss-deep);
  --bs-btn-active-border-color: var(--wwa-moss-deep);
  --bs-btn-active-color: var(--wwa-on-dark);
  --bs-btn-font-size: 0.9rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 20px;
  white-space: nowrap;
}

/* ── HEADER PAGE NAV ─────────────────────────────────────── */
.header-nav { justify-content: flex-end; gap: 18px; }
.header-nav-list { gap: 2px; }
.header-nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--wwa-body-soft);
  transition: color 0.15s;
}
.header-nav-link:hover, .header-nav-link:focus { color: var(--wwa-moss); text-decoration: none; }
.header-nav-toggle {
  border: 1px solid var(--wwa-border);
  color: var(--wwa-moss);
  font-size: 1rem;
  padding: 6px 10px;
}
.header-nav-toggle:focus { box-shadow: 0 0 0 2px var(--wwa-sage); }
@media (max-width: 991.98px) {
  .header-nav { padding-top: 12px; }
  .header-nav .header-cta { margin-top: 10px; display: inline-block; }
}

/* ── BREADCRUMB BAR ──────────────────────────────────────── */
.breadcrumb-bar {
  background: var(--wwa-paper-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--wwa-border);
}
.breadcrumb-bar .breadcrumb {
  --bs-breadcrumb-divider: '\203A';
  --bs-breadcrumb-divider-color: var(--wwa-muted);
  --bs-breadcrumb-item-active-color: var(--wwa-moss);
  margin-bottom: 0;
  font-size: 13px;
}
.breadcrumb-bar .breadcrumb a { color: var(--wwa-muted); }
.breadcrumb-bar .breadcrumb a:hover { color: var(--wwa-moss); text-decoration: none; }

/* ── HOME HERO — split: copy left, her photo right ────────── */
.hero {
  background: var(--wwa-paper);
  padding: 56px 0 48px;
  position: relative;
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wwa-clay-deep);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--wwa-clay);
}
.hero h1 { margin-bottom: 18px; }
.hero h1 em { color: var(--wwa-moss); font-style: italic; }
.hero-sub {
  font-size: 1.15rem;
  color: var(--wwa-body-soft);
  max-width: 560px;
  margin-bottom: 16px;
}
.hero-geo {
  font-size: 0.95rem;
  color: var(--wwa-muted);
  margin-bottom: 28px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(43, 42, 34, 0.14);
}
.hero-media figcaption {
  font-size: 12px;
  color: var(--wwa-muted);
  margin-top: 8px;
  text-align: right;
}

/* ── CONTENT-PAGE HERO — light photo band ────────────────── */
/* Replaces the base's dark photo band: a scoped photo (body[data-page])
   under a paper-toned wash, title in an opaque paper panel. */
.page-hero {
  background: var(--wwa-paper-2) center center / cover no-repeat;
  background-attachment: fixed;   /* design sweep 2026-10-05: the About hero treatment is the site default */
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--wwa-border);
  position: relative;
}
/* Design sweep 2026-10-05 (user; Home + About are the reference): every
   content-page hero is the About second-pass hero — the page photo shows
   unfiltered and fixed, the panel spans the full container as a 0.9 paper
   card, and the page's whole intro sits inside it (paragraphs at an 820px
   measure). The old 55% paper filter and the 760px panel are gone. */
.page-hero::before { display: none; }
.page-hero .container { position: relative; }
.page-hero-panel {
  background: rgba(253, 251, 245, 0.9);
  border: 1px solid rgba(221, 211, 189, 0.6);
  border-radius: 16px;
  padding: 40px 40px 32px;
  max-width: none;
}
.page-hero h1 { margin-bottom: 10px; max-width: 900px; }
.page-hero-sub,
.page-hero #blog-hero-sub {
  color: var(--wwa-body-soft);
  margin-bottom: 0;
  max-width: 820px;
}
@media (hover: none), (max-width: 768px) {
  .page-hero { background-attachment: scroll; }
}
.page-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wwa-clay-deep);
  margin-bottom: 10px;
}
/* Photo per page family. Her own studio photo (practice-space.jpg) carries
   the hub/contact/about bands; the rest are the owner-chosen stock set
   (Taildropped imagesAlee.zip, 2026-10-04 — source files kept in
   ~/sandbox-artifacts/wellnesswithalee/photos-2026-10-04/imagesAlee/,
   16:9 cuts at 1920 wide, EXIF stripped). The panel sits over the left of
   the band, so each photo was picked for what shows on its right half. */
body[data-page="about"] .page-hero,
body[data-page="contact"] .page-hero,
body[data-page="work-with-me"] .page-hero { background-image: url("../images/practice-space.jpg"); }
body[data-page^="service-"] .page-hero { background-image: url("../images/hero-services.jpg"); }            /* swastikarora-yoga: plank by the water */
body[data-page="service-whole-person-wellness-coaching"] .page-hero { background-image: url("../images/hero-service-coaching.jpg"); }   /* mohamed_hassan-man: sun illustration */
body[data-page="service-meditation-mindfulness"] .page-hero { background-image: url("../images/hero-service-meditation.jpg"); } /* activedia-meditation */
body[data-page="service-reiki"] .page-hero { background-image: url("../images/hero-service-reiki.jpg"); }   /* sunriseforever-meditation */
body[data-page="learn"] .page-hero { background-image: url("../images/hero-learn.jpg"); }        /* retrateapr-rocks: stacked stones */
body[data-page="guides"] .page-hero { background-image: url("../images/hero-guides.jpg"); }      /* 18121281-zen: raked sand, stone right (set 2) */
body[data-page="blog"] .page-hero { background-image: url("../images/hero-blog.jpg"); }          /* glady-leaves: green leaves (set 2) */
body[data-page="glossary"] .page-hero { background-image: url("../images/hero-glossary.jpg"); }  /* pixelcreatures-yoga: rolled mat */
body[data-page="location"] .page-hero { background-image: url("../images/hero-locations.jpg"); } /* leninscape-yoga: meditation on a dock */

/* ── SECTIONS ────────────────────────────────────────────── */
.section { padding: 64px 0; }
.section-alt { background: var(--wwa-paper-2); }
.section-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wwa-clay-deep);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--wwa-clay);
}
.section-intro {
  color: var(--wwa-body-soft);
  max-width: 620px;
  margin-top: 8px;
}
.section-note { font-size: 14px; color: var(--wwa-muted); }

/* Two-column prose block used by the about / service / location pages */
.page-intro { max-width: 720px; }
.page-intro p { font-size: 1.1rem; color: var(--wwa-body-soft); }
.page-columns { margin-top: 28px; }
.page-columns h2,
.page-columns h3 { font-size: 1.2rem; color: var(--wwa-moss); margin-bottom: 10px; }
.page-columns ul { padding-left: 18px; color: var(--wwa-body-soft); line-height: 1.9; margin-bottom: 0; }
.page-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(43, 42, 34, 0.12);
}

/* ── NAV CARDS (practice areas, pathways, guides, latest) ── */
.page-nav-grid { margin-top: 32px; }
.page-nav-card {
  --bs-card-border-color: var(--wwa-border);
  --bs-card-border-radius: 14px;
  --bs-card-bg: var(--wwa-card);
  color: var(--wwa-ink);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.page-nav-card:hover {
  border-color: var(--wwa-sage);
  box-shadow: 0 8px 22px rgba(112, 132, 104, 0.18);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--wwa-ink);
}
.page-nav-card .card-body { padding: 26px 22px; }
.page-nav-icon { font-size: 1.5rem; margin-bottom: 12px; line-height: 1; color: var(--wwa-sage); }
.page-nav-title { font-family: var(--wwa-font-display); font-size: 1.15rem; font-weight: 600; color: var(--wwa-forest-ink); margin-bottom: 6px; }
.page-nav-note { font-size: 15px; color: var(--wwa-body-soft); margin-top: 4px; }
.page-nav-cta { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--wwa-moss); }

/* ── START-WITH-WHAT-YOU-NEED ROUTER TABLE ───────────────── */
.start-table { margin-top: 28px; }
.start-table .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--wwa-border);
  margin-bottom: 0;
}
.start-table th {
  font-family: var(--wwa-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wwa-forest-ink);
  padding: 12px 16px;
  border-bottom: 2px solid var(--wwa-sage);
}
.start-table td { padding: 14px 16px; vertical-align: top; color: var(--wwa-body-soft); }
.start-table td a { font-weight: 600; }

/* ── INSIGHT COLUMNS ─────────────────────────────────────── */
.insight-grid { margin-top: 32px; }
.insight-title { font-size: 1.2rem; color: var(--wwa-moss); margin-bottom: 8px; }
.insight-copy { font-size: 15.5px; color: var(--wwa-body-soft); }

/* ── MEET ALEE ───────────────────────────────────────────── */
.meet-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.meet-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(43, 42, 34, 0.12);
}

/* ── CALLOUT BOX ─────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--wwa-sage);
  background: var(--wwa-tint);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin: 24px 0;
  font-size: 15.5px;
}
.callout strong { color: var(--wwa-moss-deep); }
.callout-warm {
  border-left-color: var(--wwa-clay);
  background: var(--wwa-tint-warm);
}
.callout-warm strong { color: var(--wwa-clay-deep); }


/* ── INQUIRY FORM BAND (deep moss) ───────────────────────── */
.lead-section {
  background: var(--wwa-moss-deep);
  color: var(--wwa-on-dark);
  padding: 64px 0;
}
.lead-inner {
  max-width: 680px;
  text-align: center;
}
.lead-inner h2 { color: var(--wwa-on-dark); margin-bottom: 10px; }
.lead-inner h2 em { color: var(--wwa-on-dark-label); font-style: italic; }
.lead-inner > p { color: var(--wwa-on-dark-soft); margin-bottom: 32px; }
.lead-form {
  background: rgba(248, 244, 234, 0.06);
  border: 1px solid rgba(248, 244, 234, 0.14);
  border-radius: 14px;
  padding: 32px;
  text-align: left;
}
.lead-form .form-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wwa-on-dark-label);
  font-weight: 600;
  margin-bottom: 5px;
}
.lead-form .form-control,
.lead-form .form-select {
  background-color: rgba(248, 244, 234, 0.08);
  border: 1px solid rgba(248, 244, 234, 0.2);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--wwa-on-dark);
  font-size: 15px;
  transition: border-color 0.2s;
}
.lead-form .form-control::placeholder { color: var(--wwa-on-dark-muted); }
.lead-form .form-control:focus,
.lead-form .form-select:focus {
  background-color: rgba(248, 244, 234, 0.12);
  border-color: var(--wwa-on-dark-label);
  box-shadow: none;
  color: var(--wwa-on-dark);
}
.lead-form .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c6c1ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.lead-form .form-select option { background: var(--wwa-moss-deep); color: var(--wwa-on-dark); }
.lead-form textarea.form-control { resize: vertical; min-height: 90px; }

.consent-row {
  margin: 14px 0;
  font-size: 13px;
  color: var(--wwa-on-dark-label);
}
.consent-row .form-check-input {
  background-color: rgba(248, 244, 234, 0.08);
  border-color: rgba(248, 244, 234, 0.35);
}
.consent-row .form-check-input:checked {
  background-color: var(--wwa-sage);
  border-color: var(--wwa-sage);
}
.consent-row .form-check-label { color: var(--wwa-on-dark-label); }

.form-submit {
  --bs-btn-bg: var(--wwa-paper);
  --bs-btn-border-color: var(--wwa-paper);
  --bs-btn-color: var(--wwa-moss-deep);
  --bs-btn-hover-bg: var(--wwa-card);
  --bs-btn-hover-border-color: var(--wwa-card);
  --bs-btn-hover-color: var(--wwa-forest-ink);
  --bs-btn-active-bg: var(--wwa-card);
  --bs-btn-active-border-color: var(--wwa-card);
  --bs-btn-active-color: var(--wwa-forest-ink);
  --bs-btn-disabled-bg: #5c6e57;
  --bs-btn-disabled-border-color: #5c6e57;
  --bs-btn-disabled-color: var(--wwa-on-dark-muted);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-y: 13px;
  --bs-btn-padding-x: 24px;
  width: 100%;
  margin-top: 8px;
}
.form-note {
  font-size: 12.5px;
  color: var(--wwa-on-dark-muted);
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Form state — toggled by lead-form.js via data-state, never element.style */
.form-error {
  display: none;
  background: rgba(163, 58, 42, 0.18);
  border: 1px solid rgba(163, 58, 42, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #f4c3b8;
  margin-bottom: 12px;
}
.form-error[data-state="visible"] { display: block; }
.lead-capture-form[data-state="hidden"] { display: none; }
.form-success {
  display: none;
  text-align: center;
  padding: 24px;
  color: var(--wwa-on-dark);
}
.form-success[data-state="visible"] { display: block; }
.form-success .success-icon { font-size: 2.5rem; margin-bottom: 12px; color: var(--wwa-on-dark-label); }
.form-success h3 { color: var(--wwa-on-dark); font-size: 1.4rem; }
.form-success p { color: var(--wwa-on-dark-soft); margin-top: 8px; margin-bottom: 0; }
.form-success a { color: var(--wwa-on-dark-label); }

/* Field hint inside the dark panel — Bootstrap's .text-muted would be dark on dark */
.lead-form .label-hint { color: var(--wwa-on-dark-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Honeypot — must stay in the POST but never render (server fakes success on fill) */
.honeypot-field { display: none; }

/* ── FOOTER (deep moss) ──────────────────────────────────── */
.site-footer {
  background: var(--wwa-moss-deep);
  color: var(--wwa-on-dark-muted);
  padding: 44px 24px 24px;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto 28px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-brand .site-logo-text { color: var(--wwa-on-dark); }
.footer-brand .site-logo-text small { color: var(--wwa-on-dark-label); }
.footer-brand p {
  font-size: 13.5px;
  color: var(--wwa-on-dark-muted);
  margin-top: 10px;
  max-width: 280px;
}
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wwa-on-dark-label);
  margin-bottom: 10px;
}
.footer-links a {
  display: block;
  font-size: 14px;
  color: var(--wwa-on-dark-soft);
  margin-bottom: 6px;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--wwa-on-dark); text-decoration: none; }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(248, 244, 234, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--wwa-on-dark-muted);
}

/* ── SMALL SCREENS ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero-split { grid-template-columns: 1fr; gap: 28px; }
  .hero-media { max-width: 520px; }
  .meet-grid { grid-template-columns: 1fr; gap: 28px; }
  .meet-media { max-width: 420px; }
}
@media (max-width: 640px) {
  .hero { padding: 40px 0 36px; }
  .section { padding: 48px 0; }
  .page-hero { padding: 36px 0 32px; }
  .page-hero-panel { padding: 24px 20px; }
  .lead-form { padding: 20px; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── CONTENT ROUND 2026-10-04 (home/about) ── */
/* Latest Learning strip nested under Featured Guides on the home page. */
.latest-learning { margin-top: 48px; }

/* ── CONTENT ROUND 2026-10-04 (services) ── */
.page-hero-panel .hero-actions { margin-top: 24px; }
body[data-page^="service-"] .section .hero-actions,
body[data-page="work-with-me"] .section .hero-actions { margin-top: 20px; }
body[data-page^="service-"] .hero-actions .btn,
body[data-page="work-with-me"] .hero-actions .btn { white-space: normal; }
.topic-list,
.fit-list {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--wwa-body-soft);
  line-height: 1.9;
}
.topic-list { columns: 2 280px; column-gap: 40px; }
.topic-list li { break-inside: avoid; }
.fit-list { max-width: 720px; }
.callout p:last-child { margin-bottom: 0; }

/* ── CONTENT ROUND 2026-10-04 (layout) ── */
/* Footer newsletter block (home doc "Newsletter / Footer Copy"). */
.footer-newsletter {
  max-width: 1100px;
  margin: 0 auto 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(248, 244, 234, 0.14);
  color: var(--wwa-on-dark-soft);
}
.footer-newsletter p { max-width: 640px; font-size: 15px; }
.footer-newsletter-title {
  font-family: var(--wwa-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--wwa-on-dark);
  margin-bottom: 8px;
}
.footer-newsletter-cta {
  --bs-btn-border-color: var(--wwa-on-dark-label);
  --bs-btn-color: var(--wwa-on-dark);
  --bs-btn-hover-bg: var(--wwa-paper);
  --bs-btn-hover-border-color: var(--wwa-paper);
  --bs-btn-hover-color: var(--wwa-moss-deep);
  --bs-btn-active-bg: var(--wwa-paper);
  --bs-btn-active-border-color: var(--wwa-paper);
  --bs-btn-active-color: var(--wwa-moss-deep);
}

/* ── CONTENT ROUND 2026-10-04 (local/learn) ── */
/* Location + Learn pages: closing-button row, the page-hero's stacked
   intro paragraphs, and the Learn hub's topic chips. */
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
body[data-page="location"] .btn { white-space: normal; }
.page-hero-sub + .page-hero-sub { margin-top: 12px; }
.page-intro + .section-label,
.page-intro + h2 { margin-top: 40px; }

/* Current-offerings list on the three city pages (dated entries only). */
.offering-list { list-style: none; padding: 0; margin: 20px 0 0; max-width: 720px; }
.offering-item { padding: 14px 0; border-top: 1px solid var(--wwa-border); }
.offering-title { font-family: var(--wwa-font-display); font-weight: 600; color: var(--wwa-forest-ink); }
.offering-detail,
.offering-note { font-size: 15px; color: var(--wwa-body-soft); }

/* "Start by topic" chips on the Learn hub. */
.learn-topic-list { list-style: none; padding: 0; margin: 24px 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.learn-topic-link {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--wwa-border);
  border-radius: 999px;
  background: var(--wwa-card);
  color: var(--wwa-moss);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.learn-topic-link:hover {
  border-color: var(--wwa-sage);
  background: var(--wwa-tint);
  color: var(--wwa-moss-deep);
  text-decoration: none;
}

/* ── CONTENT ROUND 2026-10-04 (hubs) ── */
/* Guides hub roster: a pillar without a published guide yet. */
.guide-list-item-pending { opacity: 0.78; border-style: dashed; }
.guide-list-item-pending .guide-list-meta { color: var(--wwa-muted); }
/* Blog hub: the doc's "two kinds of articles" columns above the post grid. */
.blog-kinds { margin-bottom: 8px; }

/* ── CONTENT ROUND 2026-10-04 (about story rows) ── */
/* Alternating story rows (owner ask): text beside a photo, sides flipping
   row to row. The hero/opening row keeps .meet-grid (photo left); the
   story rows start with text left, then .story-row-media-left flips. */
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.story-row-media-left { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.story-row .page-intro { max-width: none; }
.story-media { margin: 0; }
.story-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(43, 42, 34, 0.12);
}
@media (max-width: 991.98px) {
  .story-row,
  .story-row-media-left { grid-template-columns: 1fr; gap: 28px; }
  /* Photo always sits under the text on one column, whichever side it had. */
  .story-row .story-media { order: 2; max-width: 520px; }
}

/* ── INTRO HERO (home, owner ask 2026-10-04) ─────────────────
   Full first screen: one photo fading in, a down arrow at the bottom that
   scrolls to the thesis hero (#intro). Height is the viewport minus the
   sticky header; the thesis hero gets scroll-margin so it lands below the
   header. Motion is gated on prefers-reduced-motion. */
.intro-hero {
  position: relative;
  height: calc(100svh - 87px);
  min-height: 480px;
  overflow: hidden;
  background: var(--wwa-moss-deep);
}
.intro-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  opacity: 0;
  animation: intro-hero-fade 1.8s ease-out 0.15s forwards;
}
/* Soft paper wash at the foot so the arrow reads on any photo and the band
   hands off to the paper page below. */
.intro-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(248, 244, 234, 0), rgba(248, 244, 234, 0.85));
  pointer-events: none;
}
.intro-hero-arrow {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 1;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wwa-moss);
  color: var(--wwa-on-dark);
  font-size: 1.25rem;
  box-shadow: 0 10px 24px rgba(43, 42, 34, 0.22);
  opacity: 0;
  animation: intro-hero-fade 0.9s ease-out 1.4s forwards, intro-hero-nudge 2.2s ease-in-out 2.4s infinite;
}
.intro-hero-arrow:hover,
.intro-hero-arrow:focus { background: var(--wwa-moss-deep); color: var(--wwa-on-dark); text-decoration: none; }
.hero { scroll-margin-top: 87px; }
@keyframes intro-hero-fade { to { opacity: 1; } }
@keyframes intro-hero-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-hero-photo,
  .intro-hero-arrow { opacity: 1; animation: none; }
}
@media (max-width: 640px) {
  .intro-hero { height: calc(100svh - 87px); min-height: 420px; }
  .intro-hero-arrow { bottom: 20px; width: 50px; height: 50px; }
}

/* ── FIXED-PHOTO SECTION (home "Start With What You Need", owner ask) ──
   The photo is a fixed, unfiltered background so the page scrolls past it
   and it shows clean at the page edges; the content sits in a translucent
   paper panel so the table stays readable. iOS never paints fixed
   backgrounds correctly, so touch/no-hover devices fall back to scroll. */
.section-fixed-photo {
  background: var(--wwa-paper-2) url("../images/home-fixed-start.jpg") center center / cover no-repeat; /* epilmurmu-rocks (set 2) */
  background-attachment: fixed;
}
.section-panel {
  background: rgba(253, 251, 245, 0.9);
  border: 1px solid rgba(221, 211, 189, 0.6);
  border-radius: 16px;
  padding: 40px 40px 32px;
}
.section-panel .start-table { margin-top: 20px; }
@media (hover: none), (max-width: 768px) {
  .section-fixed-photo { background-attachment: scroll; }
}
@media (max-width: 640px) {
  .section-panel { padding: 24px 18px 18px; }
}

/* Start table on phones: each row stacks its two cells (the need, then the
   route + link) instead of squeezing two narrow columns side by side. */
@media (max-width: 640px) {
  .start-table .table,
  .start-table tbody,
  .start-table tr,
  .start-table td { display: block; width: 100%; }
  .start-table tr { padding: 12px 0; border-bottom: 1px solid var(--wwa-border); }
  .start-table tr:last-child { border-bottom: 0; }
  .start-table td { padding: 4px 0; border: 0; }
}

/* Centred section head (home "Work With Alee", owner ask): heading + intro
   centred above tablet width, left-aligned below it. */
@media (min-width: 992px) {
  .section-head-centered { text-align: center; }
  .section-head-centered .page-intro { margin-left: auto; margin-right: auto; }
}

/* Closing copy inside a section (home "Start where you are."): a sub-heading
   with breathing room above it, no buttons — the inquiry band follows. */
.section-close { margin-top: 40px; }
.section-close h3 { font-size: 1.6rem; font-weight: 500; margin-bottom: 10px; }

/* Centred section (home "Virtual + In-Person", owner ask): heading, intro,
   button row and closing copy all centred at every width. */
.section-centered { text-align: center; }
.section-centered .page-intro { margin-left: auto; margin-right: auto; }
.section-centered .hero-actions { justify-content: center; }

/* ── FIXED-PHOTO INQUIRY BAND (home, owner ask) ───────────────
   Same idea as .section-fixed-photo: the photo is fixed and unfiltered so it
   shows clean at the page edges; the form sits in a translucent deep-moss
   panel so the existing dark-panel form styling still reads. */
.lead-section-photo {
  background: var(--wwa-moss-deep) url("../images/home-fixed-contact.jpg") center center / cover no-repeat; /* entity-zen: temple in a gorge (set 2) */
  background-attachment: fixed;
}
.lead-section-photo .lead-inner {
  background: rgba(47, 69, 48, 0.9);
  border-radius: 16px;
  padding: 40px 32px 32px;
}
@media (hover: none), (max-width: 768px) {
  .lead-section-photo { background-attachment: scroll; }
}
@media (max-width: 640px) {
  .lead-section-photo .lead-inner { padding: 24px 14px 18px; }
}

/* ── LEFT-BLEED STORY ROW (home "What Wellness", owner ask) ───
   The 5/7 grid and the container stay, so the text column keeps its exact
   position and width. From 1200px up (container fixed at 1100px, so the
   body-to-container gap is 50vw - 550px) the figure pulls left by that gap
   plus the container padding, grows by the same amount, and stretches to
   the row height; the photo cover-fills it. The section clips the few px
   of scrollbar slack from the vw math so no horizontal scroll appears. */
@media (min-width: 1200px) {
  .section:has(> .container > .story-row-bleed-left),
  .section:has(> .container > .story-row-bleed-right) { overflow-x: clip; }
  /* Mirror of the left bleed: text left, photo growing to the body's right edge. */
  .story-row-bleed-right .story-media {
    position: relative;
    align-self: stretch;
    margin-right: calc(-50vw + 526px);
    width: calc(100% + 50vw - 526px);
    max-width: none;
    justify-self: start;
  }
  /* Her photo is square: out of flow so the row height comes from the text
     column and the photo cover-fills it (otherwise a wide panel makes the
     row as tall as it is wide). */
  .story-row-bleed-right .story-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px 0 0 16px;
  }
  .story-row-bleed-left .story-media {
    align-self: stretch;
    margin-left: calc(-50vw + 526px);
    width: calc(100% + 50vw - 526px);
    max-width: none;
  }
  .story-row-bleed-left .story-media img {
    height: 100%;
    object-fit: cover;
    border-radius: 0 16px 16px 0;
  }
}

/* Story row that drops its photo as soon as the row stacks (home "Learn
   Before You Book", owner ask) — same 991.98px breakpoint as .story-row's
   one-column rule, so the photo never appears under the text. */
@media (max-width: 991.98px) {
  .story-row-no-media-stacked .story-media { display: none; }
}

/* ── RIGHT-BLEED HERO (home thesis hero, owner ask) ───────────
   Mirror of .story-row-bleed-left for the 7/5 hero grid: from 1200px the
   photo column pulls to the body's right edge and stretches to the row
   height; the text column keeps its position and width. Her photo is a
   1170px square, so the panel never upscales at these widths. */
@media (min-width: 1200px) {
  .hero:has(> .container > .hero-split-bleed-right) { overflow-x: clip; }
  .hero-split-bleed-right .hero-media {
    align-self: center;
    margin-right: calc(-50vw + 526px);
    width: calc(100% + 50vw - 526px);
    max-width: none;
    aspect-ratio: 1 / 1;
    max-height: 560px;        /* = the height of the plank row below at 1366/1702 (owner ask) */
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
  }
  /* Square photo in a square-until-capped panel: at 1366 it shows almost
     whole; at wider screens the 560px cap crops a little top and bottom
     rather than letting the row outgrow its neighbour. */
  .hero-split-bleed-right .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    border-radius: 0;
  }
}
/* Ultrawide (owner's 3440px screen): the plank row below grows with the
   viewport once its 3:2 photo is taller than the text (from ~1900px), so
   her hero panel follows the same height — the plank panel's width
   (50vw - 108px) at 3:2 — and the two rows stay level. Only the hero row
   changes here. */
@media (min-width: 1900px) {
  .hero-split-bleed-right .hero-media {
    max-height: calc((50vw - 108px) * 2 / 3);
  }
}

/* About hero (owner ask 2026-10-04): the panel spans the full 1100px
   container like the rest of the page and its copy is centred; paragraphs
   keep a readable measure inside it. */
body[data-page="about"] .page-hero-panel {
  max-width: none;
  text-align: center;
}
body[data-page="about"] .page-hero-panel .page-hero-sub,
body[data-page="about"] .page-hero-panel h1 {
  margin-left: auto;
  margin-right: auto;
}
body[data-page="about"] .page-hero-panel .page-hero-sub { max-width: 760px; }
body[data-page="about"] .page-hero-panel h1 { max-width: 900px; }

/* About hero, second pass (owner ask): the panel goes semi-transparent like
   the home "Start With What You Need" section — unfiltered fixed photo behind
   a 0.9 paper panel — and carries the portrait row as its second row. */
body[data-page="about"] .page-hero { background-attachment: fixed; }
body[data-page="about"] .page-hero::before { display: none; }
body[data-page="about"] .page-hero-panel {
  background: rgba(253, 251, 245, 0.9);
  border: 1px solid rgba(221, 211, 189, 0.6);
  border-radius: 16px;
  padding: 40px 40px 32px;
}
body[data-page="about"] .page-hero-row {
  text-align: left;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--wwa-border);
}
body[data-page="about"] .page-hero-row .page-intro { max-width: none; }
@media (hover: none), (max-width: 768px) {
  body[data-page="about"] .page-hero { background-attachment: scroll; }
}
@media (max-width: 640px) {
  body[data-page="about"] .page-hero-panel { padding: 24px 18px 18px; }
}

/* ── WIDE CONTAINER + THREE-COLUMN STORY ROW (About, owner ask) ──
   .container-wide is the 1400px shell for rows that need more room than
   the site's 1100px container (Bootstrap's own xxl stops at 1320).
   (The About row inside it is a plain .story-duo now.) */
.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── CREDENTIAL BADGES (About "Training + Background", owner ask) ──
   Each credential is a card with an icon disc; the grid fills as many
   equal columns as fit (3 on desktop, 2 on tablet, 1 on phones). */
.credential-grid {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.credential-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wwa-card);
  border: 1px solid var(--wwa-border);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--wwa-ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
}
.credential-badge-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wwa-tint);
  color: var(--wwa-moss);
  font-size: 1.1rem;
}
@media (max-width: 640px) {
  .credential-grid { grid-template-columns: 1fr; }
}

/* ── TWO-COLUMN TEXT ROW (About, owner ask) ───────────────────
   Two text blocks side by side at desktop, stacked under 992px. */
.story-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.story-duo .page-intro { max-width: none; }
/* Vertical rule between the two columns (owner ask): the first column pads
   away from it, the second carries it as its left border. */
.story-duo > :first-child { padding-right: 48px; }
.story-duo > :last-child { padding-left: 48px; border-left: 1px solid var(--wwa-border); }
@media (max-width: 991.98px) {
  .story-duo { grid-template-columns: 1fr; gap: 28px; }
  .story-duo > :first-child { padding-right: 0; }
  .story-duo > :last-child { padding-left: 0; border-left: 0; }
}

/* Work With Me hero (owner ask 2026-10-04): the panel spans the full 1100px
   container like the rows below it; copy stays left-aligned. */
body[data-page="work-with-me"] .page-hero-panel { max-width: none; }
body[data-page="work-with-me"] .page-hero-panel .page-hero-sub { max-width: 820px; }

/* ═══ round 5 · contact lane (2026-10-05) ═══ */
/* Inquiry forms (partials/lead_form.php, partials/group_form.php): checkbox
   and radio groups inside the dark form panel — one column on phones, the
   checkbox grid two columns from the sm breakpoint — a visible keyboard
   focus ring (Contact doc §9), and a hairline between two stacked form
   bands (contact page: general form, then group form). */
.lead-form .choice-group legend.form-label { margin-bottom: 8px; }
.check-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 24px;
}
@media (min-width: 576px) {
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.choice-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}
.lead-form .choice-group .form-check { margin-bottom: 0; }
.lead-form .choice-group .form-check-input {
  background-color: rgba(248, 244, 234, 0.08);
  border-color: rgba(248, 244, 234, 0.35);
}
.lead-form .choice-group .form-check-input:checked {
  background-color: var(--wwa-sage);
  border-color: var(--wwa-sage);
}
.lead-form .choice-group .form-check-label {
  color: var(--wwa-on-dark);
  font-size: 15px;
  cursor: pointer;
}
.lead-form .form-control:focus-visible,
.lead-form .form-select:focus-visible,
.lead-form .form-check-input:focus-visible,
.lead-form .form-submit:focus-visible {
  outline: 2px solid var(--wwa-on-dark-label);
  outline-offset: 2px;
}
.lead-section + .lead-section { border-top: 1px solid rgba(248, 244, 234, 0.14); }

/* ═══ round 5 · faq lane (2026-10-05) ═══ */
/* FAQ accordion (partials/faq_accordion.php, data in app/Views/public/faqs/):
   one native <details class="faq-item"> per question on a hairline-ruled
   list, the question an h3 inside the <summary>, the browser's disclosure
   marker swapped for an FA chevron that turns while the item is [open].
   Reads on both the paper and the alternating surface.
   Last Modified: 2026-10-05 — the accordion now lives in the floating FAQ
   card and on /faq, not in an inline section; their layout tweaks are in
   the "round 5 · FAQ card + page" block. */
.faq-list {
  max-width: 820px;
  margin-top: 28px;
  border-top: 1px solid var(--wwa-border);
}
.faq-item { border-bottom: 1px solid var(--wwa-border); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}
.faq-question:hover h3 { color: var(--wwa-moss); }
.faq-question:focus-visible {
  outline: 2px solid var(--wwa-moss);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-chevron {
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--wwa-sage);
}
.faq-item[open] > .faq-question .faq-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .faq-chevron { transition: transform 0.2s ease; }
}
.faq-answer {
  max-width: 720px;
  padding: 0 4px 20px;
  color: var(--wwa-body-soft);
}
.faq-answer p:last-child { margin-bottom: 0; }

/* ═══ round 5 · seo lane (2026-10-05) ═══ */
/* Editorial byline on guides (Visual_Content_System §3 "Author/updated
   module"): By Alee · Published <date> · Updated <date>, under the
   sub-head in guides/show.php. Blog posts carry the same facts inside the
   existing #post-meta row (blog.css), with the author link styled here. */
.editorial-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--wwa-muted);
}
.editorial-meta-sep { color: var(--wwa-muted); }
.editorial-meta a,
.post-byline a {
  color: var(--wwa-accent-strong);
  font-weight: 600;
}
/* An uploaded post image now carries width/height attributes (no layout
   shift); height:auto keeps its natural aspect ratio under blog.css's
   width:100% + max-height cap instead of taking the attribute's height. */
#post-hero-img img { height: auto; }
/* Branded 404 (public/not_found.php): search box above the way-back cards. */
.not-found-search { max-width: 560px; }
.not-found-search-label { font-weight: 600; color: var(--wwa-forest-ink); }
.not-found-search-row {
  display: flex;
  gap: 10px;
}
.not-found-search-row .form-control { flex: 1 1 auto; min-width: 0; }
.not-found-search-row .btn { flex: 0 0 auto; }
.not-found-heading { margin-top: 48px; }

/* ═══ round 5 · policies lane (2026-10-05) ═══ */
/* Policy pages (/wellness-disclaimer, /privacy, /terms — PolicyController,
   app/Views/public/policies/): her studio photo behind the hero like the
   about / contact bands, the "Last updated" line inside the hero panel, a
   760px prose measure, and the clay "in draft" note Privacy and Terms carry
   until legal review. The sticky header is 87px tall, so deep-linked
   sections (wellness-disclaimer#<id>) stop clear of it. */
body[data-page="policy"] .page-hero { background-image: url("../images/practice-space.jpg"); }
.policy-updated {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--wwa-muted);
}
.policy-body { max-width: 760px; }
.policy-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-section { scroll-margin-top: 104px; }
.policy-section + .policy-section { margin-top: 44px; }
.policy-section h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin-bottom: 14px;
}
.policy-section h3 {
  font-size: 1.15rem;
  margin: 28px 0 8px;
}
.policy-list { padding-left: 20px; margin-bottom: 0; }
.policy-list li + li { margin-top: 8px; }
.policy-section code {
  font-size: 0.9em;
  color: var(--wwa-ink);
  background: var(--wwa-paper-2);
  padding: 1px 6px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.policy-review-note {
  margin: 0 0 40px;
  padding: 14px 18px;
  border-left: 3px solid var(--wwa-clay);
  border-radius: 0 10px 10px 0;
  background: var(--wwa-tint-warm);
  color: var(--wwa-ink);
}
.policy-review-note p { margin: 0; }
.policy-review-note .fa-circle-info { color: var(--wwa-clay-deep); margin-right: 6px; }

/* Disclaimer asides (partial public/policies/disclaimer_aside.php).
   Service pages: a quiet bordered card in its own .section-disclaimer
   band just before "Continue learning" — no bottom padding, so the two
   plain bands read as one. Glossary term pages: the same card at
   footnote weight inside .term-article (the compound heading selector
   outranks glossary.css's .term-article h2). */
.section-disclaimer { padding-bottom: 0; }
.service-disclaimer {
  max-width: 760px;
  padding: 20px 24px;
  border: 1px solid var(--wwa-border);
  border-radius: 12px;
  background: var(--wwa-card);
  font-size: 15.5px;
  color: var(--wwa-body-soft);
}
.service-disclaimer p { margin-bottom: 10px; }
.service-disclaimer p + .disclaimer-heading { margin-top: 20px; }
.term-disclaimer {
  margin: 32px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--wwa-border);
  border-radius: 6px;
  background: var(--wwa-card);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wwa-body-soft);
}
.term-disclaimer p { margin: 0 0 8px; }
.service-disclaimer .disclaimer-heading,
.term-disclaimer .disclaimer-heading {
  margin: 0 0 8px;
  font-family: var(--wwa-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wwa-clay-deep);
}
.service-disclaimer .disclaimer-more,
.term-disclaimer .disclaimer-more {
  margin: 12px 0 0;
  font-size: 14.5px;
  font-weight: 600;
}

/* Footer bottom row (§12): the scope sentence wraps inside its own
   column so the policy links can stay on the same row at desktop; the
   existing ≤640px rule stacks and centres all three. */
.footer-bottom .footer-scope-note { flex: 0 1 auto; max-width: 600px; }
.footer-policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.footer-policy-links a { color: var(--wwa-on-dark-soft); }
.footer-policy-links a:hover { color: var(--wwa-on-dark); }

/* ═══ round 5 · merge (2026-10-05): form focus in the palette ═══
   Bootstrap 5.3 hard-codes its blue border + glow on focused inputs,
   selects, checkboxes and radios; the site's focus ring is sage. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--wwa-sage);
  box-shadow: 0 0 0 0.25rem rgba(112, 132, 104, 0.3);
}

/* ═══ round 5 · sitemap page (2026-10-05) ═══ */
/* Visitor-facing site map (/sitemap — public/sitemap.php, SitemapController::page):
   the rocks photo behind the hero like Learn, then seven sections, each an
   h2 over link + blurb lists — two columns from 768px, a tighter grid for
   the glossary's per-category list (data-layout="compact"). A pillar guide
   not yet published (data-state="pending") prints as plain text with a
   small clay status label. Sections stop clear of the 87px sticky header
   when linked by fragment. */
body[data-page="sitemap"] .page-hero { background-image: url("../images/hero-learn.jpg"); }
.sitemap-section { scroll-margin-top: 104px; }
.sitemap-section + .sitemap-section {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--wwa-border);
}
.sitemap-section-heading { margin-bottom: 20px; }
.sitemap-group-heading {
  font-size: 1.2rem;
  margin: 32px 0 14px;
}
.sitemap-group-heading a { color: var(--wwa-forest-ink); }
.sitemap-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitemap-list[data-layout="compact"] {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 32px;
}
.sitemap-entry { min-width: 0; }
.sitemap-entry-link,
.sitemap-entry-label {
  font-weight: 600;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.sitemap-entry-link { color: var(--wwa-accent-strong); }
.sitemap-entry-label { color: var(--wwa-ink); }
.sitemap-entry-status {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wwa-clay-deep);
}
.sitemap-entry-blurb {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--wwa-body-soft);
}
.sitemap-list[data-layout="compact"] .sitemap-entry-blurb {
  margin-top: 0;
  font-size: 0.875rem;
  color: var(--wwa-muted);
}
@media (min-width: 768px) {
  .sitemap-list[data-layout="standard"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ round 5 · header dropdowns (2026-10-05) ═══
   Last Modified: 2026-10-05 — Work With Me ▾ / Locations ▾ / Learn ▾ in the
   header (layouts/public_main.php). Bootstrap 5.3's dropdown + collapse do
   the behaviour; this block only themes them. Desktop (≥992px): a paper
   panel hanging from the header's bottom edge. Inside the mobile collapse
   (<992px): plain stacked lists, indented under their toggle. The header
   bar itself is untouched — it must stay 87px (see the intro hero).
   Last Modified: 2026-10-05 — Guides ▸ submenu inside Learn ▾ (user: "the
   learn needs a sub menu for the guides"): .header-submenu* rules — a
   flyout beside the panel on desktop, an in-place accordion on mobile;
   public/js/header-nav.js sets data-open / data-side / aria-expanded. */
.header-nav-list {
  /* Bootstrap colours an open toggle (.nav-link.show) with this var, which
     otherwise resolves to black. */
  --bs-navbar-active-color: var(--wwa-moss);
}
.header-nav-list .nav-link:focus-visible {
  /* inset ring: never clipped by the scrollable mobile panel */
  box-shadow: inset 0 0 0 2px var(--wwa-moss);
  border-radius: 4px;
}
.header-nav-link[aria-current] {  /* "page" on About/Contact, "true" on an open section's toggle */
  color: var(--wwa-moss);
  text-decoration: underline;
  text-decoration-color: var(--wwa-moss);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* toggle: FA chevron instead of Bootstrap's border caret */
.header-dropdown-toggle::after { display: none; }
.header-dropdown-chevron {
  margin-left: 0.4em;
  font-size: 0.62em;
  vertical-align: 0.18em;
}
.header-dropdown-toggle[aria-expanded="true"] .header-dropdown-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .header-dropdown-chevron,
  .header-submenu-chevron { transition: transform 0.15s; }
}

/* menu panel */
.header-dropdown-menu {
  --bs-dropdown-min-width: 13rem;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-font-size: 0.95rem;
  --bs-dropdown-color: var(--wwa-ink);
  --bs-dropdown-bg: var(--wwa-paper);
  --bs-dropdown-border-color: var(--wwa-border);
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-inner-border-radius: 13px;
  --bs-dropdown-divider-bg: var(--wwa-border);
  --bs-dropdown-divider-margin-y: 6px;
  --bs-dropdown-link-color: var(--wwa-ink);
  --bs-dropdown-link-hover-color: var(--wwa-moss-deep);
  --bs-dropdown-link-hover-bg: var(--wwa-tint);
  --bs-dropdown-link-active-color: var(--wwa-moss-deep);
  --bs-dropdown-link-active-bg: var(--wwa-tint);
  --bs-dropdown-item-padding-x: 18px;
  --bs-dropdown-item-padding-y: 6px;
  font-family: var(--wwa-font-body);
}
.header-dropdown-item {
  white-space: normal;   /* guide titles run 58–86 characters */
  line-height: 1.45;
}
.header-dropdown-item:focus-visible {
  outline: 2px solid var(--wwa-moss);
  outline-offset: -2px;
}
.header-dropdown-item[aria-current] {  /* "page" on a link, "true" on the Guides toggle */
  font-weight: 600;
  color: var(--wwa-moss-deep);
  box-shadow: inset 3px 0 0 var(--wwa-moss);
}

/* Guides ▸ — a nested list inside Learn ▾. Deliberately not a
   .dropdown-menu (Bootstrap would try to manage it); its links still read
   the --bs-dropdown-* values set on the panel. header-nav.js writes
   data-open on the li and aria-expanded on the toggle. */
.header-submenu-chevron {
  margin-left: 0.4em;
  font-size: 0.62em;
  vertical-align: 0.18em;
}
.header-submenu-toggle[aria-expanded="true"] .header-submenu-chevron { transform: rotate(90deg); }
.header-submenu-menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-submenu[data-open="true"] > .header-submenu-menu { display: block; }
.header-submenu-item {
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (min-width: 992px) {
  .header-dropdown-menu {
    /* 22px = from the nav link's bottom (64px) to the header's bottom
       border (86px) in the fixed 87px header, so the panel hangs from it */
    --bs-dropdown-spacer: 22px;
    /* an absolute panel inside a narrow <li> would shrink to min-width and
       stack every guide title on 3–4 lines; size to content, then cap */
    width: max-content;
    max-width: 20rem;    /* keeps Learn ▾ inside the viewport at 992px */
    max-height: calc(100svh - 104px);
    overflow-y: auto;
    box-shadow: 0 14px 32px rgba(43, 42, 34, 0.12);
  }
  /* A scroll container clips its absolutely positioned children, so the
     panel that hosts a flyout (Learn ▾, five rows) drops the cap. */
  .header-dropdown-menu:has(.header-submenu) {
    max-height: none;
    overflow: visible;
  }

  .header-submenu { position: relative; }
  .header-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-submenu-toggle[aria-expanded="true"] {  /* the row that owns the open flyout */
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
  }
  .header-submenu-menu {
    position: absolute;
    /* -9px = the list's 1px border + 8px top padding, so its first link
       sits level with the Guides row. left: 100% lays its border over
       the panel's own, and there is no gap for the pointer to fall into. */
    top: -9px;
    left: 100%;
    /* 15rem fits right of the Learn panel at 1366px (panel 899–1107px);
       narrower windows flip it left (data-side, header-nav.js) */
    width: 15rem;
    /* its top sits ~120px down (87px header + panel padding + the Learn
       hub row); a short window scrolls the list instead of cutting it */
    max-height: calc(100svh - 136px);
    overflow-y: auto;
    padding: 8px 0;
    background: var(--wwa-paper);
    border: 1px solid var(--wwa-border);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(43, 42, 34, 0.12);
  }
  .header-submenu[data-side="left"] > .header-submenu-menu {
    left: auto;
    right: 100%;
  }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .header-submenu[data-open="true"] > .header-submenu-menu { animation: header-submenu-reveal 0.12s ease-out; }
}
@keyframes header-submenu-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 991.98px) {
  /* A long open menu must stay reachable under the sticky header: the
     panel scrolls within the viewport instead of running off its foot. */
  .header-nav.collapsing,
  .header-nav.show { max-height: calc(100svh - 87px); }
  .header-nav.show { overflow-y: auto; }
  .header-dropdown-menu {
    --bs-dropdown-spacer: 0;
    --bs-dropdown-item-padding-x: 12px;
    margin: 0 0 8px 8px;
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--wwa-border);
    border-radius: 0;
  }
  /* Guides ▸ expands in place, one step further in than Learn's items */
  .header-submenu-menu {
    margin: 0 0 4px 12px;
    border-left: 2px solid var(--wwa-border);
  }
}

/* ═══ round 5 · FAQ card + page (2026-10-05) ═══
   Owner ask (2026-10-05): the FAQs float in a card instead of sitting
   inline on the page.
   - .faq-launcher (partials/faq.php): a fixed moss pill in the
     bottom-right corner that opens Bootstrap's offcanvas #faq-panel —
     .faq-panel, a paper card sliding in from the right edge with the
     page's .faq-* accordion (faq lane block above) and a link to /faq.
     Bootstrap's own CSS drops the slide under prefers-reduced-motion
     (.offcanvas { transition: none }), so nothing is added for that here.
   - /faq (public/faq.php): the rocks photo behind the hero like Learn,
     the .faq-jump topic list, one .faq-page-section per library set and
     the closing .faq-page-actions row.
   - Header Guides ▸ chevron: keeps pointing right on desktop. */
:root {
  --faq-launcher-inset: 16px;    /* gap from the viewport's bottom and right edges */
  --faq-launcher-height: 44px;
}

/* Launcher. z-index 1030 (Bootstrap's fixed layer): above the sticky
   header (z-index 100 — its dropdown menus stack inside it) and below the
   offcanvas backdrop (1040) and panel (1045), so the open card covers it. */
.faq-launcher {
  position: fixed;
  right: calc(var(--faq-launcher-inset) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--faq-launcher-inset) + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--faq-launcher-height);
  padding: 0 18px 0 14px;
  border: 1px solid var(--wwa-moss-deep);
  border-radius: 999px;
  background: var(--wwa-moss);
  color: var(--wwa-on-dark);
  font-family: var(--wwa-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(43, 42, 34, 0.24);
  cursor: pointer;
}
.faq-launcher:hover { background: var(--wwa-moss-deep); }
/* Two-tone ring: the paper band reads against the deep-moss footer and
   the photo bands, the forest outline against the paper surfaces. */
.faq-launcher:focus-visible {
  outline: 2px solid var(--wwa-forest-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--wwa-paper), 0 8px 22px rgba(43, 42, 34, 0.24);
}
.faq-launcher-icon { font-size: 1.15rem; }
/* At the very foot of a page the pill would sit on the footer's last row
   (the policy links), so pages that carry it get that much more footer. */
body:has(.faq-launcher) .site-footer {
  padding-bottom: calc(24px + var(--faq-launcher-height) + var(--faq-launcher-inset) + env(safe-area-inset-bottom, 0px));
}

/* Panel: full width on phones, a 440px card with rounded leading
   corners from 576px. Header and footer stay put; the body scrolls. */
.faq-panel {
  --bs-offcanvas-width: 100%;
  --bs-offcanvas-bg: var(--wwa-paper);
  --bs-offcanvas-color: var(--wwa-ink);
  --bs-offcanvas-border-color: var(--wwa-border);
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 18px;
  box-shadow: -14px 0 36px rgba(43, 42, 34, 0.18);
}
@media (min-width: 576px) {
  .faq-panel {
    --bs-offcanvas-width: 440px;
    border-radius: 18px 0 0 18px;
  }
}
.faq-panel-header {
  gap: 16px;
  border-bottom: 1px solid var(--wwa-border);
}
.faq-panel-heading {
  font-size: 1.35rem;
  line-height: 1.25;
}
.faq-panel-close {
  /* Bootstrap's focus glow is blue; the site's rings are moss */
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(75, 98, 69, 0.35);
}
.faq-panel-body { overscroll-behavior: contain; }  /* the list's scroll never carries on into the page */
.faq-panel .faq-list {
  max-width: none;
  margin-top: 0;
  border-top: 0;
}
.faq-panel .faq-question { padding: 14px 2px; }
.faq-panel .faq-question h3 { font-size: 1.05rem; }
.faq-panel-footer {
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--wwa-border);
  background: var(--wwa-card);
}
.faq-panel-all-link { font-weight: 600; }
.faq-panel-all-link .fa-arrow-right {
  margin-left: 6px;
  font-size: 0.85em;
}

/* /faq — the master page */
body[data-page="faq"] .page-hero { background-image: url("../images/hero-learn.jpg"); }   /* retrateapr-rocks, as Learn */
.faq-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-jump-link {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--wwa-border);
  border-radius: 999px;
  background: var(--wwa-card);
  font-size: 0.95rem;
  line-height: 1.4;
}
.faq-jump-link:hover {
  border-color: var(--wwa-moss);
  background: var(--wwa-tint);
  text-decoration: none;
}
.faq-jump-link:focus-visible {
  outline: 2px solid var(--wwa-moss);
  outline-offset: 2px;
}
.faq-page-section {
  margin-top: 48px;
  scroll-margin-top: 104px;   /* lands clear of the 87px sticky header */
}
.faq-page-section .faq-list { margin-top: 20px; }
.faq-page-actions {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--wwa-border);
}

/* Header Guides ▸ (desktop): the flyout opens sideways, so its chevron
   keeps pointing right; the 90° turn in the header dropdowns block stays
   for the mobile in-place accordion only. */
@media (min-width: 992px) {
  .header-submenu-toggle[aria-expanded="true"] .header-submenu-chevron { transform: none; }
}

/* ═══ design sweep · hubs (2026-10-05) ═══ */
/* Hub and support pages (learn, guides hub + sources, blog hub, glossary
   hub, contact, faq), user ask 2026-10-05 with Home + About as the
   reference: each page's intro sits in the hero panel, prose is paired
   with a photo in .story-row, and parallel items are set in columns. The
   rows, figures and grids are the existing .story-row / .story-media /
   .insight-grid / .callout classes; only what they cannot do is here. */

/* Learn: the six pillar blocks are one .insight-grid (3 columns from
   992px). Each keeps its id (learn#yoga …, linked from the home and
   service pages), so a fragment lands clear of the 87px sticky header.
   learn#pillars (the glossary hero's "Explore by Topic") lands the whole
   section under the header; its own 64px top padding then spaces the label. */
body[data-page="learn"] .learn-pillar { scroll-margin-top: 104px; }
body[data-page="learn"] #pillars { scroll-margin-top: 87px; }

/* Guides hub: the six-guide roster spans the full container, three
   columns from 992px (guides.css gives two from 700px). The hub section
   carries .guides-hub because body[data-page="guides"] also covers every
   guide page and the sources page. */
@media (min-width: 992px) {
  body[data-page="guides"] .guides-hub .guide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Guides sources page: the first guide's list starts right under the hero
   (guides.css spaces and rules off every .guide-sources block, which on
   this page doubled the section's own top padding). */
body[data-page="guides"] .sources-index .guide-sources:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Contact: the quick-path cards now open their section (the intro moved
   into the hero), and the location and scope notes sit side by side from
   992px as two equal-height callouts. */
body[data-page="contact"] .section > .container > .page-nav-grid:first-child { margin-top: 0; }
body[data-page="contact"] .contact-notes { margin-top: 8px; }   /* + the row's 16px column gutter = 24px under the cards */
body[data-page="contact"] .contact-notes .callout { margin: 0; height: 100%; }

/* FAQ: from 576px the "Jump to a topic" pills become an even column list
   (two columns, three from 992px), each pill filling its cell, held to the
   accordion's 820px measure so the list lines up with the questions below.
   Phones keep the wrapping pill row — one pill per line would be taller. */
@media (min-width: 576px) {
  body[data-page="faq"] .faq-jump { max-width: 820px; }
  body[data-page="faq"] .faq-jump-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
  body[data-page="faq"] .faq-jump-link { display: block; }
}
@media (min-width: 992px) {
  body[data-page="faq"] .faq-jump-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══ design sweep · services (2026-10-05) ═══ */
/* The five service pages (user ask 2026-10-05, Home + About as the
   reference): the intro sits in the hero panel, prose and lists alternate
   with photos in .story-row / .story-row-media-left, short paired sections
   share a .story-duo, and two closings use .section-centered. Those classes
   do the layout; only what they cannot do is here. */

/* A topic list beside a photo keeps two columns: the .story-row text column
   is ~586px wide at desktop and the base .topic-list needs 600px for two,
   so it would fall back to one long column. One column on phones. */
body[data-page^="service-"] .story-row .topic-list { columns: 2 240px; }
/* …except meditation's explore list: it sits beside a 4:5 portrait, whose
   height one column matches. */
body[data-page="service-meditation-mindfulness"] .story-row .topic-list { columns: auto; }

/* ═══ design sweep · locations (2026-10-05) ═══ */
/* The virtual page and the three service-area pages (user ask 2026-10-05,
   Home + About as the reference): each page's intro sits in the hero
   panel (LOCATIONS heroIntro), and the body alternates text with photos in
   .story-row / .story-row-media-left around the marked CURRENT OFFERINGS
   block. Those classes do the layout; only what they cannot do is here. */

/* A "ways to work together" list beside a photo keeps two columns: the
   .story-row text column is ~586px wide at desktop and the base
   .topic-list needs 600px for two (same fix as the services block). One
   column on phones. */
body[data-page="location"] .story-row .topic-list { columns: 2 240px; }

/* Two headed blocks stacked in one story-row text column (a list and a
   paragraph, or two paragraphs) get the same 40px break as .page-intro + h2. */
body[data-page="location"] .story-row .topic-list + .page-intro,
body[data-page="location"] .story-row .page-intro + .page-intro { margin-top: 40px; }

/* The hero buttons jump to these headings and to the offerings band; land
   them clear of the 87px sticky header (before the sweep they landed under
   it). The band keeps its own 64px top padding below the header. */
body[data-page="location"] #virtual-services,
body[data-page="location"] #ways-to-work { scroll-margin-top: 104px; }
body[data-page="location"] #current-offerings { scroll-margin-top: 87px; }

/* ═══ design sweep · orchestrator fixes (2026-10-05, QA M1 + L1) ═══ */
/* M1 — fragment landings: hero buttons and in-body links that target a
   heading or a content block landed under the 87px sticky header. Every
   id'd heading, the three hub content anchors and the services grid now
   carry the same 104px margin the learn/location anchors already use.
   (The guide reader scrolls programmatically with its own header offset;
   this only affects direct #sec-N navigation.) */
h2[id], h3[id],
#blog-content, #guides-content, #glossary-content, #services { scroll-margin-top: 104px; }

/* L1 — the floating FAQ pill parks (faded out, not clickable) while a hero
   is on screen at phone width, so it never covers hero text or buttons on
   first load; js/faq-launcher.js sets data-state. */
.faq-launcher[data-state="parked"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  .faq-launcher { transition: opacity 0.25s ease, transform 0.25s ease; }
}

/* ═══ service pages · centred closing rows (2026-10-05, user) ═══
   The disclaimer card and the "Continue learning" row on the five service
   pages are centred: the sections take .section-centered (heading, copy
   and buttons centred) and the 760px disclaimer card sits in the middle. */
.section-centered .service-disclaimer { margin-left: auto; margin-right: auto; }

/* ═══ About hero pyramid (2026-10-05, owner ask) ═══
   The portrait sits at the apex of the translucent panel, centred and
   narrow; the heading and opening paragraphs widen beneath it (existing
   About rules); the story row is the full-width base — one column now that
   the portrait no longer sits beside it. */
.page-hero-portrait {
  width: clamp(160px, 22vw, 240px);
  margin: 0 auto 24px;
}
.page-hero-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(43, 42, 34, 0.14);
}
body[data-page="about"] .page-hero-row .page-intro { max-width: none; }
body[data-page="about"] .page-hero-row .page-intro h2 { text-align: left; }

/* ═══ footer newsletter block centred (2026-10-05, owner ask on About) ═══
   The block only renders on pages without an inquiry form; its title,
   line and "Join the List" button sit on the centre line everywhere it
   shows, so About and its siblings match. */
.footer-newsletter { text-align: center; }
.footer-newsletter p { margin-left: auto; margin-right: auto; }

/* ═══ credits page + footer credit (2026-10-05) ═══ */
/* /credits (app/Views/public/credits.php, SitePagesController::show) reuses
   the policy pages' prose layout (.policy-page / .policy-body /
   .policy-section / .policy-list); only its hero photo is its own — the
   stacked stones Learn, FAQ and the site map carry.
   Footer credit (layouts/public_main.php): "Website by Juhriah Web
   Solutions · hosting and care" follows the copyright in .footer-bottom and
   takes the rest of that line (a 50% basis leaves no room beside it for the
   600px scope note), so the scope note and the five policy links share the
   next line instead of the links wrapping alone. Size and colour come from
   .footer-bottom, as the scope sentence's do; the link takes the footer link
   colour plus an underline, because colour alone barely separates it from
   the words around it. At ≤640px the row is a centred column, so the
   credit drops back to its own size. */
body[data-page="credits"] .page-hero { background-image: url("../images/hero-learn.jpg"); }   /* retrateapr-rocks, as Learn */
.footer-credit { flex: 1 1 50%; }
.footer-credit a {
  color: var(--wwa-on-dark-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credit a:hover { color: var(--wwa-on-dark); }
@media (max-width: 640px) {
  .footer-credit { flex: 0 0 auto; }
}