/* ============================================
   Hope Wellbeing Counselling - Main Stylesheet
   Brand-Driven Design System
   ============================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@400;500;600&display=swap');

/* Root CSS Variables - Brand Colors */
:root {
  /* Primary Colors */
  --color-warm-ivory: #FAF7F1;
  --color-soft-cream: #FAEDE1;
  --color-natural-taupe: #DBC7B1;
  --color-soft-sunlight: #F7E8B6;
  --color-pale-sage: #DCE1D0;

  /* Premium stone/green direction */
  --color-warm-stone: #DAD7CD;
  --color-soft-sage: #A3B18A;
  --color-botanical-green: #5C7650;
  --color-deep-forest: #3A5A40;
  --color-evergreen-ink: #344E41;

  /* Text & Headings */
  --color-deep-walnut: #4B3624;

  /* Accents */
  --color-sage-green: #A7B18C;
  --color-olive-green: #7F8C5A;
  --color-olive-leaf: #7F8C5A;
  --color-dusty-rose: #D08A7F;

  /* Functional Colors */
  --color-error: var(--color-dusty-rose);
  --color-success: var(--color-botanical-green);

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Jost', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', sans-serif;

  /* Typography Scales */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1.0625rem;   /* 17px */
  --font-size-lg: 1.1875rem;  /* 19px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2.25rem;   /* 36px */
  --font-size-3xl: 3.25rem;   /* 52px */
  --font-size-4xl: 4.5rem;    /* 72px */

  /* Line Heights */
  --line-height-tight: 1.15;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Spacing */
  --spacing-xs: 0.5rem;       /* 8px */
  --spacing-sm: 1rem;         /* 16px */
  --spacing-md: 1.5rem;       /* 24px */
  --spacing-lg: 2rem;         /* 32px */
  --spacing-xl: 3rem;         /* 48px */
  --spacing-2xl: 4rem;        /* 64px */

  /* Border Radius */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(75, 54, 36, 0.06);
  --shadow-md: 0 4px 12px rgba(75, 54, 36, 0.1);
  --shadow-lg: 0 10px 24px rgba(75, 54, 36, 0.14);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-warm-ivory);
  color: var(--color-deep-walnut);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-deep-walnut);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
}

h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
}

h5 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
}

p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-evergreen-ink);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-botanical-green);
  text-decoration: underline;
}

strong {
  font-weight: 600;
  color: var(--color-deep-walnut);
}

em {
  font-style: italic;
}

/* Lists */
ul, ol {
  margin-bottom: var(--spacing-md);
  margin-left: var(--spacing-md);
}

li {
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-relaxed);
}

/* Blockquotes */
blockquote {
  border-left: 1px solid rgba(52, 78, 65, 0.18);
  padding-left: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  font-style: italic;
  color: var(--color-deep-walnut);
}

/* ============================================
   LAYOUT & CONTAINERS
   ============================================ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: 96px 0;
}

.section-light {
  background-color: var(--color-warm-ivory);
}

.section-cream {
  background-color: var(--color-warm-stone);
}

.section-sunlight {
  background-color: var(--color-soft-sunlight);
}

.section-pale-sage {
  background-color: var(--color-pale-sage);
}

.section-taupe {
  background-color: var(--color-natural-taupe);
}

.section-sage {
  background-color: var(--color-sage-green);
}

.section-sage h2,
.section-sage h3,
.section-sage h4 {
  color: var(--color-deep-walnut);
}

.section-sage p,
.section-sage .accordion-content {
  color: var(--color-deep-walnut);
}

.section-sage .eyebrow,
.section-sage .section-number {
  color: var(--color-deep-walnut) !important;
}

.section-sage .accordion-item {
  border-bottom-color: var(--color-warm-ivory);
}

.section-sage .accordion-icon {
  color: var(--color-deep-walnut);
}

.section-sage .accordion-number {
  color: var(--color-deep-walnut);
}

/* ============================================
   EDITORIAL / NUMBERED SECTION SYSTEM
   ============================================ */

.eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-sm);
}

.eyebrow-sage {
  color: var(--color-sage-green);
}

.eyebrow-olive {
  color: var(--color-olive-leaf);
}

.eyebrow-sunlight {
  color: var(--color-deep-walnut);
}

/* One consistent, delicate section-number treatment site-wide — never a
   dominant colour, always secondary to the heading it introduces. */
.section-number {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  font-weight: 400;
  color: rgba(52, 78, 65, 0.28);
  margin-bottom: clamp(0.5rem, 1vw, 0.9rem);
}

.section-number--small {
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  color: rgba(52, 78, 65, 0.32);
}

.section-number--feature {
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  color: rgba(163, 177, 138, 0.8);
}

@media (max-width: 767px) {
  .section-number {
    font-size: clamp(1.75rem, 10vw, 3rem);
    margin-bottom: 0.5rem;
  }

  .section-number--small {
    font-size: 1rem;
  }
}

.split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  min-height: 600px;
}

.split-media {
  background-size: cover;
  background-position: center;
  min-height: 360px;
  filter: saturate(0.88) sepia(0.05) brightness(1.02) contrast(0.96);
}

/* Portrait exemption: keep Tracie's photo natural, warm, and clear rather
   than applying the full editorial tone used on landscape/stock photography. */
.split-media.split-media-portrait {
  filter: saturate(0.97) brightness(1.01) contrast(0.99);
}

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-2xl);
}

.split-text .container-inner {
  max-width: 460px;
}

.split-reverse {
  direction: rtl;
}

.split-reverse > * {
  direction: ltr;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .split-media {
    min-height: 320px;
  }

  .split-text {
    padding: var(--spacing-xl) var(--spacing-md);
  }
}

/* Balanced variant: for split sections whose text content is short, the
   default 1.3fr/1fr + 600px min-height leaves an oversized image towering
   over a couple of sparse paragraphs. This variant brings the columns
   closer to even and lets the image size follow the (shorter) text column
   instead of forcing an arbitrary tall canvas. */
.split--balanced {
  grid-template-columns: 1fr 1.05fr;
  min-height: 0;
}

.split--balanced .split-media {
  min-height: 480px;
}

.split--balanced .split-text {
  padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl) var(--spacing-xl);
}

.split--balanced .split-text .container-inner {
  max-width: 480px;
}

.split--balanced .split-help-list {
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.split--balanced .split-help-list li {
  margin: 0;
  padding-left: 1.6em;
  position: relative;
  line-height: var(--line-height-relaxed);
}

.split--balanced .split-help-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-dusty-rose);
}

@media (max-width: 900px) {
  .split--balanced {
    grid-template-columns: 1fr;
  }

  .split--balanced .split-media {
    min-height: 320px;
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-evergreen-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
}

.text-link:hover {
  color: var(--color-botanical-green);
  border-bottom-color: var(--color-botanical-green);
}

.text-link-sage,
.text-link-olive,
.text-link-sunlight {
  color: var(--color-evergreen-ink);
}

.text-link-sage:hover,
.text-link-olive:hover,
.text-link-sunlight:hover {
  color: var(--color-botanical-green);
  border-bottom-color: var(--color-botanical-green);
}

.text-link::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.text-link:hover::after {
  transform: translateX(3px);
}

/* --- Related Support (cross-linking module on condition pages) --- */
.related-conditions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.related-conditions__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(52, 78, 65, 0.18);
  color: var(--color-evergreen-ink);
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.related-conditions__link span {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  transition: transform var(--transition-fast);
}

.related-conditions__link:hover {
  color: var(--color-botanical-green);
}

.related-conditions__link:hover span {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .related-conditions__grid {
    grid-template-columns: 1fr;
  }
}

.divided-list > * {
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-natural-taupe);
}

.divided-list > *:first-child {
  padding-top: 0;
}

.divided-list > *:last-child {
  border-bottom: none;
}

/* ============================================
   SUPPORT PATHWAYS — editorial areas-of-support spread
   Replaces a boxed 2-column card grid with a calm magazine-style layout:
   items separated by whitespace alone, with one quiet vertical rule
   down the centre gutter rather than per-item horizontal borders.
   ============================================ */

.support-pathways__header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.support-pathways__number {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-base);
  letter-spacing: 0.08em;
  color: var(--color-soft-sage);
  margin-bottom: var(--spacing-xs);
}

.support-pathways__eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-sm);
}

.support-pathways__intro {
  max-width: 560px;
  margin: var(--spacing-md) auto 0;
  color: var(--color-evergreen-ink);
}

.support-pathways {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-2xl);
  row-gap: var(--spacing-2xl);
}

.support-pathways::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 50%;
  width: 1px;
  background: rgba(52, 78, 65, 0.18);
}

.support-pathways__item h4 {
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-sm);
}

.support-pathways__item p {
  color: var(--color-evergreen-ink);
  opacity: 0.85;
  margin-bottom: var(--spacing-sm);
}

.support-pathways__link {
  color: var(--color-evergreen-ink);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
}

.support-pathways__link:hover {
  color: var(--color-botanical-green);
  border-bottom-color: var(--color-botanical-green);
}

@media (max-width: 768px) {
  .support-pathways {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-xl);
  }

  .support-pathways::before {
    display: none;
  }
}

/* ============================================
   ABOUT HERO — portrait diptych
   Main portrait plus a smaller offset accent image, offset via grid
   alignment rather than absolute positioning so it degrades gracefully.
   ============================================ */

.about-hero__images {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--spacing-md);
  align-items: end;
  width: 100%;
}

.about-hero__image-main {
  border: 1px solid rgba(52, 78, 65, 0.14);
  background: var(--color-warm-stone);
  padding: 10px;
}

.about-hero__image-main img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.97) brightness(1.01) contrast(0.99);
}

.about-hero__image-accent {
  border: 1px solid rgba(52, 78, 65, 0.18);
  background: var(--color-warm-ivory);
  padding: 8px;
  margin-bottom: var(--spacing-2xl);
}

.about-hero__image-accent img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(0.75) sepia(0.08) brightness(1.02) contrast(0.95);
}

@media (max-width: 900px) {
  .about-hero__images {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .about-hero__images {
    grid-template-columns: 1fr 0.62fr;
    gap: var(--spacing-sm);
  }

  .about-hero__image-accent {
    margin-bottom: var(--spacing-lg);
  }
}

/* ============================================
   EDITORIAL SPLIT TEXT — a short emphasis column beside a body-copy
   column, divided by a single hairline. Used for personal-introduction
   and reflective moments (e.g. "Hello, I'm Tracie", "How I Work") where
   a full split-media image isn't wanted.
   ============================================ */

.editorial-split-text {
  display: grid;
  grid-template-columns: 0.85fr 1px 1.15fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.editorial-split-text__divider {
  align-self: stretch;
  width: 1px;
  background: rgba(52, 78, 65, 0.14);
}

.editorial-split-text__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  color: var(--color-evergreen-ink);
}

.editorial-split-text__lead--quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-xs);
}

.editorial-split-text__body p {
  margin-bottom: var(--spacing-md);
}

.editorial-split-text__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .editorial-split-text {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .editorial-split-text__divider {
    display: none;
  }
}

/* ============================================
   BELIEF GRID — signature "What I Believe" entries. Two columns with a
   single centre hairline (same language as .support-pathways), each
   entry a short serif title plus 1-2 sentences, no boxes.
   ============================================ */

.belief-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-2xl);
  row-gap: var(--spacing-2xl);
}

.belief-grid::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 50%;
  width: 1px;
  background: rgba(52, 78, 65, 0.18);
}

.belief-item--full {
  max-width: 640px;
  margin: var(--spacing-2xl) auto 0 auto;
  text-align: center;
}

.belief-item__number {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-base);
  color: var(--color-soft-sage);
  margin-bottom: var(--spacing-xs);
}

.belief-item h3 {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-xs);
}

.belief-item p {
  color: var(--color-evergreen-ink);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 768px) {
  .belief-grid {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-xl);
  }

  .belief-grid::before {
    display: none;
  }

  .belief-item--full {
    max-width: none;
  }
}

/* ============================================
   GENTLE JOURNEY — a calm vertical sequence of steps with a single
   hairline spine running through the step markers. Used where a
   process needs to feel like a guided walk-through, not a corporate
   timeline or a stack of cards.
   ============================================ */

.gentle-journey {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.gentle-journey::before {
  content: '';
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 28px;
  width: 1px;
  background: rgba(52, 78, 65, 0.14);
}

.gentle-journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
}

.gentle-journey-step:first-child {
  padding-top: 0;
}

.gentle-journey-step:last-child {
  padding-bottom: 0;
}

.gentle-journey-step .section-number--small {
  margin-bottom: 0;
  background: var(--color-warm-ivory);
}

.gentle-journey-step__body h3 {
  margin-bottom: var(--spacing-xs);
}

.gentle-journey-step__body p {
  color: var(--color-evergreen-ink);
  opacity: 0.85;
}

.gentle-journey-step__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .gentle-journey::before {
    left: 20px;
  }

  .gentle-journey-step {
    grid-template-columns: 40px 1fr;
    column-gap: var(--spacing-md);
  }
}

/* ============================================
   TIMELINE (sequential-step layout)
   ============================================ */

.timeline {
  max-width: 760px;
  margin: 0 auto;
}

.timeline-step {
  margin-bottom: var(--spacing-2xl);
}

.timeline-step:last-child {
  margin-bottom: 0;
}

/* ============================================
   PAPER TEXTURE UTILITIES
   ============================================ */

.paper-bg,
.paper-cream,
.paper-sage,
.paper-taupe {
  position: relative;
}

.paper-bg,
.paper-cream,
.paper-sage,
.paper-taupe {
  box-shadow: inset 0 0 55px rgba(75, 54, 36, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.paper-bg { background-color: var(--color-warm-ivory); }
.paper-cream { background-color: var(--color-warm-stone); }
.paper-sage { background-color: var(--color-sage-green); }
.paper-taupe { background-color: var(--color-natural-taupe); }

/* Plain breathing-room gap with a centred vertical pause divider, used to
   separate two adjacent textured bands (e.g. a quote section directly
   before a cta-panel) so they don't read as one continuous block. Used
   sparingly — never between every section. */
.section-break {
  background-color: var(--color-warm-ivory);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

/* CTA panel — every closing call-to-action section site-wide shares this
   one meadow-flower family: soft floral photography under a light cream
   wash, kept visible rather than washed to nothing. */
.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(52, 78, 65, 0.18);
  border-bottom: 1px solid rgba(52, 78, 65, 0.18);
}

.cta-panel .container {
  position: relative;
  z-index: 1;
}

/* ============================================
   MEADOW INVITATION SECTIONS
   Soft meadow photography beneath a cream wash — the site's one
   intentional botanical-photography moment. Two families:
   .invitation-section--meadow (newsletter strip — heavier wash) and
   .cta-section--meadow (all closing CTA panels — flowers stay visible).
   Never used as a general-purpose section background.
   ============================================ */

.invitation-section--meadow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-warm-stone);
}

.invitation-section--meadow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../images/sixteen-miles-out-TN6kLg466Bc-unsplash.jpg');
  background-size: cover;
  background-position: center 65%;
  filter: saturate(0.85) contrast(0.92);
  opacity: 0.65;
}

.invitation-section--meadow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(250, 247, 241, 0.55), rgba(250, 247, 241, 0.55)),
    rgba(218, 215, 205, 0.32);
}

.cta-section--meadow::before,
.cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Each page sets --cta-bg-image inline (e.g. style="--cta-bg-image:
     url('/images/example.jpg')") so the rotation of meadow photos varies
     per page; this Lucie Hosova shot is only the fallback if a page
     doesn't set one. */
  background-image: var(--cta-bg-image, url('../images/lucie-hosova-aO_A1hHPueA-unsplash.jpg'));
  background-size: cover;
  background-position: center;
  filter: saturate(0.82) contrast(0.9);
  opacity: 0.58;
}

.cta-section--meadow::after,
.cta-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(250, 247, 241, 0.58), rgba(250, 247, 241, 0.58)),
    rgba(218, 215, 205, 0.18);
}

/* Gentle checklist styling for condition-page content lists */
.section .container ul {
  list-style: none;
  margin-left: 0;
}

.section .container li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.section .container li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-dusty-rose);
}

/* Fine divider before subsequent H3 subheadings within long-form content */
.section .container h3:not(:first-of-type) {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-natural-taupe);
}

.quote-eyebrow {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-sm);
}

/* ============================================
   QUOTE MATTE BACKGROUND (shared by all quote layouts)
   Solid matte Deep Forest / Evergreen Ink tones — no photography,
   no grain, no motion. Text stays warm ivory for legibility.
   ============================================ */

.quote-ripple-bg {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: var(--color-evergreen-ink);
}

/* Matte tone rotation — Evergreen Ink is the dominant premium dark
   background; Deep Forest appears sparingly for deeper contrast only. */
.quote-flora-4, .quote-flora-8 { background-color: var(--color-deep-forest); }

/* ============================================
   PULL QUOTE
   ============================================ */

.pull-quote {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.pull-quote-inner {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-warm-ivory);
  max-width: 700px;
  margin: 0 auto;
}

.pull-quote-inner::before {
  content: '\201C';
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-sm);
  font-style: normal;
}

/* Quote Banner — full-width section, centered, underline accent */
.quote-banner {
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}

.quote-banner blockquote {
  position: relative;
  z-index: 1;
  border-left: none;
  padding-left: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-2xl);
  line-height: 1.4;
  color: var(--color-warm-ivory);
  max-width: 780px;
  margin: 0 auto var(--spacing-lg) auto;
}

.quote-banner .quote-underline {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 2px;
  margin: 0 auto var(--spacing-sm) auto;
  background-color: var(--color-botanical-green);
}

.quote-banner cite {
  position: relative;
  z-index: 1;
  display: block;
  font-style: normal;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-warm-ivory);
}

/* Quote-banner colour variants now render the same restrained rose
   underline as the default — a single consistent accent site-wide. */

/* Quote Card — bordered aside with accent stripe, left-aligned, on full-width ripple */
.quote-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-left: 1px solid rgba(52, 78, 65, 0.18);
  background-color: var(--color-warm-ivory);
  box-shadow: 0 14px 30px -16px rgba(75, 54, 36, 0.2);
  padding: var(--spacing-lg) var(--spacing-xl);
  max-width: 620px;
  margin: 0 auto;
}

.quote-card p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--color-deep-walnut);
  margin-bottom: var(--spacing-sm);
}

.quote-card cite {
  font-style: normal;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-deep-walnut);
}

.quote-card-rose { border-left-color: var(--color-dusty-rose); }
.quote-card-sage { border-left-color: var(--color-sage-green); }
.quote-card-sunlight { border-left-color: var(--color-soft-sunlight); }

/* Quote Split — large mark beside text, two columns, on full-width ripple */
.quote-split-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-lg);
  align-items: start;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.quote-split-inner .quote-mark-big {
  font-family: var(--font-serif);
  font-size: 5.5rem;
  line-height: 0.7;
  color: var(--color-botanical-green);
}

.quote-split-inner blockquote {
  border-left: none;
  padding-left: 0;
  margin: 0 0 var(--spacing-sm) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-sm);
}

.quote-split-inner cite {
  font-style: normal;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warm-ivory);
}

@media (max-width: 640px) {
  .quote-split-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ============================================
   ACCORDION (expandable list)
   ============================================ */

.accordion {
  max-width: 760px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid rgba(52, 78, 65, 0.18);
  border-left: 1px solid transparent;
  margin-left: calc(-1 * var(--spacing-md) - 1px);
  padding-left: var(--spacing-md);
  transition: border-left-color var(--transition-normal), padding-left var(--transition-normal);
}

.accordion-item:hover,
.accordion-item[open] {
  padding-left: calc(var(--spacing-md) + var(--spacing-xs));
}

.accordion-item summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
  cursor: pointer;
  list-style: none;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-item summary::marker {
  content: '';
}

.accordion-number {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-natural-taupe);
  flex-shrink: 0;
  width: 3rem;
  transition: color var(--transition-normal);
}

.accordion-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-deep-walnut);
  flex: 1;
  transition: font-size var(--transition-normal);
}

.accordion-item[open] .accordion-title {
  font-size: var(--font-size-xl);
}

.accordion-icon {
  font-size: var(--font-size-xl);
  color: var(--color-botanical-green);
  transition: transform var(--transition-normal), color var(--transition-normal);
  flex-shrink: 0;
}

.accordion-item[open] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-content {
  padding: 0 0 var(--spacing-lg) calc(3rem + var(--spacing-md));
  color: var(--color-deep-walnut);
  line-height: var(--line-height-relaxed);
}

.accordion-item:hover,
.accordion-item[open] {
  border-left-color: var(--color-evergreen-ink);
}

@media (max-width: 600px) {
  .accordion-content {
    padding-left: 2.5rem;
  }
}

/* ============================================
   BOOK PAGES — editorial folio component
   Click/tap page-reveal interaction. Replaces horizontal scroll cards
   and hover-only reveals; works identically for mouse, touch and
   keyboard. Never causes horizontal overflow.
   ============================================ */

.book-pages__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md) var(--spacing-lg);
}

@media (max-width: 900px) {
  .book-pages__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .book-pages__list {
    grid-template-columns: 1fr;
  }
}

.book-page {
  position: relative;
  border: 1px solid rgba(52, 78, 65, 0.16);
  background: var(--color-warm-ivory);
  transition: transform 400ms ease, border-color 400ms ease;
}

.book-page--active {
  border-color: rgba(52, 78, 65, 0.32);
  transform: translateY(-2px);
}

.book-page__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 2.75rem 1.5rem 1.5rem;
  background: none;
  border: none;
  border-radius: 0;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: inherit;
}

.book-page__number {
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xs);
  color: rgba(52, 78, 65, 0.32);
}

.book-page__seal.botanical-tile {
  width: 60px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--color-soft-sage);
}

.book-page__title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
}

.book-page__intro {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-evergreen-ink);
  opacity: 0.75;
}

.book-page__trigger-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(52, 78, 65, 0.55);
}

.book-page__trigger-label-arrow {
  display: inline-block;
  transition: transform 400ms ease;
}

.book-page--active .book-page__trigger-label-arrow {
  transform: rotate(90deg);
}

.book-page__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 400ms ease, opacity 300ms ease;
}

.book-page--active .book-page__body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.book-page__body > div {
  overflow: hidden;
}

.book-page__text {
  margin: 0 1.5rem 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(52, 78, 65, 0.18);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-evergreen-ink);
  line-height: var(--line-height-relaxed);
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .book-page,
  .book-page__body,
  .book-page__trigger-label-arrow {
    transition: none;
  }

  .book-page--active {
    transform: none;
  }
}

/* ============================================
   TAG LIST (comprehensive keyword/issue lists)
   ============================================ */

.tag-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--spacing-2xl);
}

@media (max-width: 700px) {
  .tag-group-grid {
    grid-template-columns: 1fr;
  }
}

.tag-group {
  margin-bottom: var(--spacing-2xl);
  max-width: 46ch;
}

.tag-group-label {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-md);
}

.tag-list {
  font-size: var(--font-size-sm);
  line-height: 2;
}

.tag {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-evergreen-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.tag-list > *:not(:last-child)::after {
  content: '\00b7';
  display: inline-block;
  margin: 0 0.55em;
  color: rgba(52, 78, 65, 0.35);
}

a.tag:hover,
a.tag:focus-visible {
  color: var(--color-botanical-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.tag:focus-visible {
  outline: 2px solid rgba(92, 118, 80, 0.4);
  outline-offset: 2px;
}

span.tag {
  opacity: 0.65;
}

span.tag {
  opacity: 0.7;
}

/* ============================================
   CRISIS SUPPORT BOX (safeguarding-sensitive pages)
   ============================================ */

.crisis-box {
  background-color: var(--color-warm-ivory);
  border: 1px solid var(--color-natural-taupe);
  border-left: 3px solid var(--color-dusty-rose);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.crisis-box h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.crisis-box ul {
  margin-bottom: 0;
}

/* ============================================
   BLOG ARCHIVE — editorial journal / resource library
   A calm counselling-journal opening: reduced hero padding brings the
   featured piece higher into the first viewport, and the journal index
   below reads as curated magazine entries rather than a card grid.
   ============================================ */

.blog-opening {
  padding: 64px 0 80px;
}

.blog-archive-header {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.blog-archive-header .eyebrow {
  justify-content: center;
  margin-bottom: var(--spacing-xs);
}

.blog-archive-header h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  max-width: 16ch;
  margin: 0 auto var(--spacing-sm);
}

.blog-hero-intro {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  opacity: 0.82;
  max-width: 46ch;
  margin: 0 auto var(--spacing-2xl);
  line-height: var(--line-height-relaxed);
}

/* Topic index — quiet text links to real category destinations only.
   Omit entirely rather than render non-functional filter chips. */
.blog-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--spacing-2xl);
  font-family: var(--font-sans);
}

.blog-topic-link {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-evergreen-ink);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.blog-topic-link:hover, .blog-topic-link.active {
  color: var(--color-botanical-green);
}

.blog-topic-divider {
  color: rgba(52, 78, 65, 0.35);
}

/* Featured article — a magazine spread, not a card */
.blog-featured-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Scoped hover feedback — the whole spread is one link, but only the
   title and Read More should visibly react; the excerpt/meta stay put
   so hovering doesn't underline a whole paragraph of body text. */
.blog-featured-link:hover {
  text-decoration: none;
}

.blog-featured-link:hover h2 {
  color: var(--color-botanical-green);
}

.blog-featured-link:hover .blog-read-more {
  color: var(--color-botanical-green);
  border-bottom-color: currentColor;
}

.blog-featured {
  display: grid;
  grid-template-columns: 1.05fr 1px 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

.blog-featured-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(52, 78, 65, 0.14);
}

/* Framed print — a cream mat around editorial photography, like a gallery
   print rather than a cropped card image. Reused for the featured spread
   and the journal index thumbnails. */
.blog-image-frame {
  display: block;
  background: var(--color-warm-stone);
  padding: 12px;
  border: 1px solid rgba(52, 78, 65, 0.14);
  overflow: hidden;
}

.blog-image-frame img {
  display: block;
  width: 100%;
  filter: saturate(0.85) sepia(0.05) brightness(1) contrast(0.96);
}

.blog-featured-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-featured-content {
  padding-top: 0.2em;
}

.blog-featured-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-sm);
}

.blog-featured h2 {
  font-family: var(--font-serif);
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-sm);
}

@media (max-width: 700px) {
  .blog-featured {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .blog-featured-divider {
    display: none;
  }
}

/* Journal index — narrow metadata column beside wider content column */
.blog-index-section {
  padding: 72px 0;
}

.blog-list {
  max-width: 860px;
  margin: 0 auto;
}

.blog-list-item {
  display: grid;
  grid-template-columns: 190px 1px 1fr;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid rgba(52, 78, 65, 0.12);
}

.blog-list-item-media {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.blog-list-item-thumb img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-list-item:first-child {
  padding-top: 0;
}

.blog-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-list-item-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(52, 78, 65, 0.12);
}

.blog-list-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding-top: 0.3em;
}

.blog-list-item-category {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-botanical-green);
}

.blog-list-item-subtext {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.03em;
  color: var(--color-evergreen-ink);
  opacity: 0.62;
}

@media (max-width: 700px) {
  .blog-list-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .blog-list-item-divider {
    display: none;
  }

  .blog-list-item-meta {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.6em;
  }
}

.blog-meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-sm);
}

.blog-title-link {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  color: var(--color-evergreen-ink);
  text-decoration: none;
  line-height: 1.25;
  margin-bottom: var(--spacing-sm);
  transition: color var(--transition-normal);
}

.blog-title-link:hover {
  color: var(--color-botanical-green);
}

.blog-excerpt {
  color: var(--color-evergreen-ink);
  opacity: 0.85;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
  max-width: 60ch;
}

.blog-read-more {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-evergreen-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.blog-read-more::after {
  content: ' \2192';
}

.blog-read-more:hover, .blog-read-more:focus-visible {
  color: var(--color-botanical-green);
  border-bottom-color: currentColor;
}

.blog-read-more:focus-visible {
  outline: 2px solid rgba(92, 118, 80, 0.45);
  outline-offset: 3px;
}

/* Final support pathway — quiet text-led close before the footer */
.blog-final-cta {
  padding: 56px 0;
  text-align: center;
}

.blog-final-cta-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-md);
}

.blog-final-cta-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.blog-final-cta-divider {
  height: 20px;
}

@media (max-width: 480px) {
  .blog-final-cta-links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .blog-final-cta-divider {
    display: none;
  }
}

/* ============================================
   BLOG POST — editorial essay
   ============================================ */

.blog-post-header {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.blog-post-meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-md);
}

.blog-post-header h1 {
  margin-bottom: var(--spacing-md);
}

.blog-post-deck {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  opacity: 0.85;
  max-width: 620px;
  margin: 0 auto;
}

.blog-post-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.blog-post-content h2, .blog-post-content h3 {
  margin-top: var(--spacing-2xl);
}

/* Marks a fact the practice owner still needs to confirm before a legal
   page (e.g. terms.html) goes live — never leave unresolved in production. */
.tc-placeholder {
  background-color: rgba(219, 199, 177, 0.45);
  color: var(--color-evergreen-ink);
  padding: 0 4px;
  font-style: italic;
}

.blog-post-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(52, 78, 65, 0.18);
  display: block;
  margin: var(--spacing-xl) 0;
  filter: saturate(0.85) sepia(0.05) brightness(1) contrast(0.96);
}

.blog-post-callout {
  max-width: 640px;
  margin: var(--spacing-2xl) auto;
  padding: var(--spacing-xl);
  background-color: var(--color-warm-stone);
  border: 1px solid rgba(52, 78, 65, 0.18);
  text-align: center;
}

.blog-post-callout p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-sm);
}

.blog-post-callout cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.75;
}

.related-posts {
  max-width: 760px;
  margin: var(--spacing-2xl) auto 0 auto;
  padding-top: var(--spacing-2xl);
  border-top: 1px solid rgba(52, 78, 65, 0.12);
}

.related-posts h4 {
  margin-bottom: var(--spacing-lg);
}

.related-posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.hero-badge {
  position: absolute;
  bottom: -40px;
  right: var(--spacing-xl);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-warm-ivory);
  border: 1px solid var(--color-natural-taupe);
  box-shadow: 0 6px 16px rgba(75, 54, 36, 0.12);
  padding: 8px;
  z-index: 3;
}

@media (max-width: 768px) {
  .hero-badge {
    right: var(--spacing-md);
    width: 70px;
    height: 70px;
    bottom: -28px;
  }
}

/* ============================================
   BOTANICAL TILES (circular seals: focus-area / modality / service icons)
   ============================================ */

.botanical-tile {
  width: clamp(88px, 9vw, 132px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 247, 241, 0.45);
  box-shadow: none;
  flex-shrink: 0;
  transition: border-color var(--transition-normal);
}

.botanical-tile img {
  width: 66%;
  height: 66%;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

.botanical-tile--sm {
  width: 44px;
}

.botanical-tile--sage {
  background: var(--color-sage-green);
}

.botanical-tile--olive {
  background: var(--color-natural-taupe);
}

.botanical-tile--taupe {
  background: var(--color-natural-taupe);
}

.botanical-tile--cream {
  background: var(--color-warm-stone);
  border-color: var(--color-natural-taupe);
}

.botanical-tile--forest {
  background: var(--color-evergreen-ink);
}

.botanical-tile--stone {
  background: var(--color-warm-stone);
  border-color: var(--color-botanical-green);
}

/* ============================================
   SPECIALTY GRID — editorial pathway list, not a decorative icon row.
   Each item is a full link block: tile, title, one-line description and
   a visible "Explore →" cue, so clickability never depends on hover alone.
   ============================================ */

.specialty-intro {
  max-width: 600px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.specialty-intro p {
  color: var(--color-evergreen-ink);
  opacity: 0.8;
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

.specialty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2xl) var(--spacing-xl);
  text-align: center;
}

.specialty-item a {
  display: block;
  text-decoration: none;
  padding: var(--spacing-md);
  transition: background-color var(--transition-normal);
}

.specialty-item a:hover,
.specialty-item a:focus-visible {
  background-color: rgba(52, 78, 65, 0.04);
}

.specialty-item a:focus-visible {
  outline: 2px solid rgba(92, 118, 80, 0.5);
  outline-offset: 2px;
}

.specialty-item .botanical-tile {
  width: clamp(112px, 9vw, 132px);
  margin: 0 auto var(--spacing-md) auto;
  transition: border-color var(--transition-normal);
}

.specialty-item a:hover .botanical-tile,
.specialty-item a:focus-visible .botanical-tile {
  border-color: var(--color-evergreen-ink);
}

.specialty-item h4 {
  font-family: var(--font-serif);
  color: var(--color-evergreen-ink);
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xs);
}

.specialty-item p {
  font-family: var(--font-sans);
  color: var(--color-evergreen-ink);
  opacity: 0.72;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  max-width: 26ch;
  margin: 0 auto var(--spacing-sm) auto;
}

.specialty-item__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-evergreen-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.specialty-item a:hover .specialty-item__cta,
.specialty-item a:focus-visible .specialty-item__cta {
  color: var(--color-botanical-green);
  border-bottom-color: currentColor;
}

@media (max-width: 900px) {
  .specialty-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .specialty-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }

  .specialty-item .botanical-tile {
    width: clamp(84px, 22vw, 104px);
  }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

header {
  background-color: rgba(250, 247, 241, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-natural-taupe);
  padding: var(--spacing-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  text-decoration: none;
  position: relative;
  z-index: 210;
}

.logo img {
  height: 82px;
  width: auto;
}

.logo:hover {
  color: var(--color-botanical-green);
}

#nav {
  display: flex;
  gap: var(--spacing-lg);
}

#nav .nav-mobile-actions {
  display: none;
}

#nav a {
  color: var(--color-evergreen-ink);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
}

#nav a:hover {
  color: var(--color-botanical-green);
  border-bottom-color: var(--color-botanical-green);
  text-decoration: none;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  position: relative;
  z-index: 210;
  transition: opacity var(--transition-fast);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid rgba(52, 78, 65, 0.4);
  outline-offset: 3px;
}

.mobile-menu-toggle:hover {
  opacity: 0.7;
}

.mobile-menu-toggle span {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  min-width: 26px;
  height: 1.5px;
  min-height: 1.5px;
  background-color: var(--color-evergreen-ink);
  transform-origin: center;
  transition: transform 240ms ease, opacity 240ms ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle span {
    transition: none;
  }
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-caret {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-evergreen-ink);
  font-size: 10px;
  line-height: 1;
  padding: var(--spacing-sm) 0 var(--spacing-sm) 4px;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--spacing-sm);
  background-color: var(--color-warm-ivory);
  border: 1px solid var(--color-natural-taupe);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(75, 54, 36, 0.14);
  padding: var(--spacing-md) var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 2px var(--spacing-xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 150;
}

/* Invisible bridge over the gap between the trigger and the menu so the
   pointer never leaves a hoverable descendant of .nav-dropdown while
   travelling from the link down into the open menu. Desktop hover only —
   on mobile the menu becomes position:static and this must not exist,
   otherwise it sits on top of the tap-to-expand caret button. */
@media (min-width: 1025px) {
  .nav-dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--spacing-sm));
    height: var(--spacing-sm);
  }
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  font-size: var(--font-size-xs);
  text-transform: none;
  letter-spacing: normal;
  padding: 7px 0;
  border-bottom: none;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  color: var(--color-botanical-green);
  border-bottom: none;
}

.nav-dropdown-viewall {
  grid-column: 1 / -1;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm) !important;
  border-top: 1px solid var(--color-natural-taupe);
  font-weight: 600;
  color: var(--color-evergreen-ink) !important;
}

/* ============================================
   BACK TO TOP
   ============================================ */

.back-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: calc(var(--cookie-banner-h, 0px) + var(--footer-bottom-safe-offset, 0px) + clamp(1rem, 2vw, 1.5rem));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-evergreen-ink);
  border: 1px solid rgba(218, 215, 205, 0.35);
  border-radius: 2px;
  color: var(--color-warm-ivory);
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease,
    visibility 220ms ease, background-color 220ms ease,
    color 220ms ease, bottom 220ms ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--color-botanical-green);
  color: var(--color-warm-ivory);
}

.back-to-top:focus-visible {
  outline: 2px solid rgba(52, 78, 65, 0.35);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .back-to-top {
    right: 1rem;
    bottom: calc(var(--cookie-banner-h, 0px) + var(--footer-bottom-safe-offset, 0px) + 1rem);
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

@media print {
  .back-to-top {
    display: none;
  }
}

#cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background-color: var(--color-sage-green);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: 0 -8px 24px rgba(75, 54, 36, 0.16);
}

.cookie-consent-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.cookie-consent-inner p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-warm-ivory);
  flex: 1 1 320px;
}

.cookie-consent-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

#cookie-consent-banner .btn {
  padding: 10px 22px;
  font-size: 12px;
}

#cookie-consent-banner .btn-secondary {
  background: transparent;
  border: 1px solid var(--color-warm-ivory);
  color: var(--color-warm-ivory);
}

@media (max-width: 600px) {
  .cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-consent-inner p {
    flex: none;
  }

  .cookie-consent-actions {
    justify-content: stretch;
  }

  #cookie-consent-banner .btn {
    flex: 1;
    text-align: center;
  }
}

/* ============================================
   BUTTONS & FORMS
   ============================================ */

button, .btn {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
  text-decoration: none;
  text-align: center;
}

/* Primary — the single premium call-to-action treatment site-wide.
   .btn-rose / .btn-olive / .btn-sunlight are legacy names kept for
   markup compatibility; all "book / get in touch" actions map here. */
.btn-primary,
.btn-rose,
.btn-olive,
.btn-sunlight {
  background-color: var(--color-evergreen-ink);
  border-color: var(--color-evergreen-ink);
  color: var(--color-warm-ivory);
}

.btn-primary:hover,
.btn-rose:hover,
.btn-olive:hover,
.btn-sunlight:hover {
  filter: brightness(0.92);
  background-color: var(--color-evergreen-ink);
  border-color: var(--color-evergreen-ink);
  color: var(--color-warm-ivory);
  text-decoration: none;
}

/* Secondary — quiet Warm Stone fill, legible over photography and
   dark panels alike. .btn-outline / .btn-sage are legacy names. */
.btn-secondary,
.btn-outline,
.btn-sage {
  background-color: var(--color-warm-stone);
  border-color: rgba(52, 78, 65, 0.35);
  color: var(--color-evergreen-ink);
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-sage:hover {
  filter: brightness(0.97);
  background-color: var(--color-warm-stone);
  border-color: rgba(52, 78, 65, 0.5);
  color: var(--color-evergreen-ink);
  text-decoration: none;
}

/* Soft neutral — used sparingly, e.g. small secondary actions on cream panels. */
.btn-taupe {
  background-color: var(--color-natural-taupe);
  border-color: rgba(52, 78, 65, 0.18);
  color: var(--color-evergreen-ink);
}

.btn-taupe:hover {
  filter: brightness(0.96);
  background-color: var(--color-natural-taupe);
  border-color: rgba(52, 78, 65, 0.3);
  color: var(--color-evergreen-ink);
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ============================================
   GLOBAL FORM DESIGN SYSTEM
   Applies automatically to every input/select/textarea on the site — no
   per-form styling needed. The classes below (.form-panel, .form-label,
   .form-input etc.) exist so future forms can be explicit about intent,
   but the bare elements already carry the full branded treatment.
   ============================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-panel {
  background-color: var(--color-warm-ivory);
  border: 1px solid var(--color-natural-taupe);
  padding: var(--spacing-xl);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

label, .form-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  color: var(--color-deep-walnut);
}

.form-label-required {
  color: var(--color-dusty-rose);
  font-weight: 600;
}

input, textarea, select,
.form-control, .form-input, .form-select, .form-textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-natural-taupe);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-deep-walnut);
  background-color: var(--color-warm-ivory);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select, .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C7650' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

select option {
  background-color: var(--color-warm-ivory);
  color: var(--color-deep-walnut);
}

input:focus, textarea:focus, select:focus,
.form-control:focus, .form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 2px solid rgba(92, 118, 80, 0.35);
  outline-offset: 2px;
  border-color: var(--color-botanical-green);
  background-color: var(--color-warm-ivory);
}

/* Keyboard-only focus ring — mouse clicks don't need the outline, but it
   must never disappear for keyboard users. */
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) {
  outline-color: transparent;
}

textarea, .form-textarea {
  min-height: 150px;
  height: auto;
  padding-top: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  font-family: var(--font-sans);
}

input::placeholder, textarea::placeholder {
  color: var(--color-natural-taupe);
  opacity: 1;
}

.form-helper {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-deep-walnut);
  opacity: 0.75;
  margin-top: -2px;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.newsletter-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.newsletter-form input {
  flex: 1 1 220px;
}

.newsletter-form button {
  flex: 0 0 auto;
  width: auto;
}

@media (max-width: 480px) {
  .newsletter-form button {
    width: 100%;
  }
}

/* Branded select popup — mouse-only cosmetic layer over the native <select>,
   see js/branded-select.js. Replaces the OS-forced blue highlight in the
   open dropdown list with the brand palette. */
.branded-select-wrap {
  position: relative;
}

.branded-select-popup {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--color-warm-ivory);
  border: 1px solid var(--color-natural-taupe);
  box-shadow: 0 8px 24px rgba(75, 54, 36, 0.14);
  max-height: 260px;
  overflow-y: auto;
}

.branded-select-popup.is-open {
  display: block;
}

.branded-select-option {
  display: block;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-deep-walnut);
  cursor: pointer;
}

/* Overrides the sitewide .section .container li::before checklist-dot
   decoration (css/style.css ~line 571), which otherwise bleeds through
   whenever this popup renders inside a .container. */
.branded-select-option::before {
  content: none !important;
}

.branded-select-option-placeholder {
  color: var(--color-natural-taupe);
}

.branded-select-option:hover,
.branded-select-option:active {
  background-color: var(--color-warm-stone);
  color: var(--color-botanical-green);
}

.branded-select-option.is-selected {
  background-color: var(--color-warm-stone);
  font-weight: 600;
  color: var(--color-botanical-green);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  background-size: cover;
  background-position: center;
  padding: 0 var(--spacing-md) var(--spacing-lg);
  margin: 0;
  text-align: center;
  height: 80vh;
  min-height: 600px;
  max-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-compact {
  height: 46vh;
  min-height: 360px;
  max-height: 480px;
}

.hero-compact h1 {
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
}

/* ============================================
   EDITORIAL HERO — text-led split hero for interior landing pages
   (Counselling, Supervision). Photography here is a framed foreground
   element within the layout, never a full-bleed background behind text.
   ============================================ */

.editorial-hero {
  background-color: var(--color-warm-ivory);
  padding: 88px 0 72px;
}

.editorial-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1px 0.82fr;
  align-items: center;
  gap: var(--spacing-2xl);
  max-width: 1160px;
}

.editorial-hero__content {
  max-width: 520px;
}

.editorial-hero__label {
  margin-bottom: var(--spacing-xs);
}

.editorial-hero__heading {
  font-family: var(--font-serif);
  color: var(--color-evergreen-ink);
  font-size: clamp(2.5rem, 2vw + 2rem, 3.5rem);
  line-height: 1.12;
  margin-bottom: var(--spacing-sm);
}

.editorial-hero__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  opacity: 0.85;
  margin-bottom: var(--spacing-md);
}

.editorial-hero__text {
  color: var(--color-evergreen-ink);
  opacity: 0.82;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
  max-width: 46ch;
}

.editorial-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.editorial-hero__divider {
  align-self: stretch;
  width: 1px;
  background: rgba(52, 78, 65, 0.14);
}

.editorial-hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.editorial-hero__image {
  display: block;
  width: 100%;
  max-width: 380px;
  background: var(--color-warm-stone);
  padding: 10px;
  border: 1px solid rgba(52, 78, 65, 0.14);
}

/* Each hero page gets its own mat tone and line colour, tied to that
   page's own eyebrow accent, so pages read as distinct rather than
   identical copies of the same frame. */
.editorial-hero--counselling .editorial-hero__image {
  background: var(--color-warm-stone);
  border-color: rgba(92, 118, 80, 0.35);
}

.editorial-hero--supervision .editorial-hero__image {
  background: var(--color-pale-sage);
  border-color: rgba(167, 177, 140, 0.55);
}

.editorial-hero--training .editorial-hero__image {
  background: none;
  border-color: var(--color-natural-taupe);
}

.editorial-hero__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.85) sepia(0.05) brightness(1) contrast(0.96);
}

.editorial-hero__credential {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.7;
  text-align: center;
  margin: 0;
}

/* Text-led variant — used when no photograph suits the page. A quiet
   botanical seal fills the media slot instead of forcing a poor image. */
.editorial-hero__seal {
  width: clamp(100px, 11vw, 140px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-evergreen-ink);
  border: 1px solid rgba(250, 247, 241, 0.3);
}

.editorial-hero__seal img {
  width: 54%;
  height: 54%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .editorial-hero {
    padding: 64px 0 48px;
  }

  .editorial-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    text-align: center;
  }

  .editorial-hero__divider {
    display: none;
  }

  .editorial-hero__content {
    max-width: 620px;
    margin: 0 auto;
  }

  .editorial-hero__text {
    margin-left: auto;
    margin-right: auto;
  }

  .editorial-hero__actions {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .editorial-hero {
    padding: 48px 0 40px;
  }

  .editorial-hero__image {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ============================================
   TRAINING FORMAT STRIP — quiet, text-led credibility row beneath the
   training hero. No icons, no cards; vertical dividers are the only detail.
   ============================================ */

.training-format-strip {
  background-color: var(--color-warm-ivory);
  border-top: 1px solid rgba(52, 78, 65, 0.12);
  border-bottom: 1px solid rgba(52, 78, 65, 0.12);
  padding: var(--spacing-md) 0;
}

.training-format-strip__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--spacing-sm);
}

.training-format-strip__item {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.78;
  padding: 0 var(--spacing-md);
}

.training-format-strip__divider {
  width: 1px;
  height: 14px;
  background: rgba(52, 78, 65, 0.18);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .training-format-strip__inner {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .training-format-strip__divider {
    display: none;
  }

  .training-format-strip__item {
    padding: 0;
  }
}

/* Homepage hero is right-aligned by design for wide desktop layouts, where
   there's enough room for the subject (left) and text (right) to sit clear
   of each other. Below ~1024px the cover-cropped photo brings the subject
   further into frame and the right-aligned text starts overlapping her —
   switch to a centred layout instead of trying to chase a safe crop. */
@media (max-width: 1024px) {
  .hero-home {
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 14% !important;
    padding-right: var(--spacing-md) !important;
    padding-left: var(--spacing-md) !important;
  }

  .hero-content-home {
    text-align: center !important;
  }

  .hero-home-eyebrow {
    justify-content: center !important;
  }

  .hero-home-actions {
    justify-content: center !important;
  }
}

/* On shorter landscape viewports (laptops, Surface-type devices) the default
   80vh hero pushes the statement marquee below the fold. Shrink it just
   enough that header + hero + marquee fit within typical short viewports. */
@media (min-width: 1025px) and (max-height: 950px) {
  .hero-home {
    height: 70vh;
    min-height: 460px;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(75, 54, 36, 0.32) 0%, rgba(219, 199, 177, 0.22) 100%);
  backdrop-filter: saturate(0.86) sepia(0.05) brightness(1.03) contrast(0.95);
  -webkit-backdrop-filter: saturate(0.86) sepia(0.05) brightness(1.03) contrast(0.95);
  z-index: 1;
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 2;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  font-size: clamp(1.9rem, 3.2vw + 1rem, 3.25rem);
  margin-bottom: var(--spacing-md);
  color: var(--color-warm-ivory);
  font-weight: 600;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(75, 54, 36, 0.45), 0 1px 3px rgba(75, 54, 36, 0.5);
}

.hero .tagline {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 1px 14px rgba(75, 54, 36, 0.4), 0 1px 2px rgba(75, 54, 36, 0.45);
}

.hero p {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-warm-ivory);
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(20, 14, 8, 0.45), 0 1px 2px rgba(20, 14, 8, 0.5);
}

.hero .eyebrow {
  color: var(--color-soft-sunlight);
  text-shadow: 0 1px 10px rgba(75, 54, 36, 0.45), 0 1px 2px rgba(75, 54, 36, 0.5);
}

.hero .btn {
  margin-top: 0;
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

/* ============================================
   CARDS & GRID
   ============================================ */

.grid {
  display: grid;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

.grid-cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid--divided > *:not(:first-child) {
  border-left: 1px solid rgba(52, 78, 65, 0.18);
  padding-left: var(--spacing-xl);
}

/* Three known, short contact-pathway columns — force equal columns rather
   than auto-fit's minmax, which wraps awkwardly once divider padding is
   added at narrower container widths. */
.contact-pathways {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 700px) {
  .contact-pathways {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .grid--divided > * {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

.offer-list-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--spacing-2xl);
  align-items: stretch;
}

.offer-list-image-wrap {
  position: relative;
}

.offer-list-image {
  height: 100%;
  min-height: 600px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.88) sepia(0.05) brightness(1.02) contrast(0.96);
}

.offer-list-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

@media (max-width: 900px) {
  .offer-list-layout {
    grid-template-columns: 1fr;
  }

  .offer-list-image {
    height: 320px;
    min-height: 0;
  }
}

.feature-panel {
  position: relative;
  background-color: var(--color-warm-stone);
  border: 1px solid rgba(52, 78, 65, 0.18);
  padding: var(--spacing-lg) var(--spacing-xl);
}

.feature-panel h2,
.feature-panel h3 {
  color: var(--color-evergreen-ink);
  margin-top: 0;
}

.feature-panel p {
  color: var(--color-evergreen-ink);
  opacity: 0.82;
}

.feature-panel__details {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-lg);
  list-style: none;
  margin: 0 0 var(--spacing-lg) 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.65;
}

.feature-panel .feature-panel__details li {
  position: static;
  padding-left: 0;
  margin-bottom: 0;
}

.feature-panel .feature-panel__details li::before {
  content: none;
}

/* Numbered list rows shared by the Training "What I Offer" section */
.offer-item {
  display: flex;
  gap: var(--spacing-md);
  border-bottom: 1px solid rgba(52, 78, 65, 0.18);
  border-left: 1px solid transparent;
  margin-left: calc(-1 * var(--spacing-md) - 1px);
  padding-left: var(--spacing-md);
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  transition: border-left-color var(--transition-normal), padding-left var(--transition-normal);
}

.offer-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.offer-number {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  width: 3rem;
  color: var(--color-botanical-green);
  transition: color var(--transition-normal);
}

.offer-item:hover {
  border-left-color: var(--color-evergreen-ink);
}

/* ============================================
   FOOTER — editorial closing section
   ============================================ */

.site-footer {
  margin-top: 0;
}

/* --- Top CTA strip --- */
.footer-cta-strip {
  background-color: var(--color-warm-ivory);
  border-top: 1px solid rgba(52, 78, 65, 0.18);
  border-bottom: 1px solid rgba(52, 78, 65, 0.18);
}

.footer-cta-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
}

.footer-cta-link {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  text-decoration: none;
}

.footer-cta-link:hover {
  color: var(--color-botanical-green);
}

.footer-cta-link span {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition-fast);
}

.footer-cta-link:hover span {
  transform: translateX(3px);
}

.footer-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(52, 78, 65, 0.18);
}

/* --- Main panel: About / Seal / Explore --- */
.footer-main {
  position: relative;
  background-color: var(--color-evergreen-ink);
  overflow: hidden;
}

.footer-main-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-items: stretch;
}

.footer-script-label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-md);
}

.footer-about-text {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-warm-ivory);
  max-width: 34ch;
  margin-bottom: var(--spacing-lg);
}

.footer-trust-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer-trust-list li {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-ivory);
  opacity: 0.85;
  margin: 0;
}

.footer-logo-seal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-md);
  border-left: 1px solid rgba(218, 215, 205, 0.35);
  border-right: 1px solid rgba(218, 215, 205, 0.35);
  padding-inline: var(--spacing-2xl);
}

.footer-logo-seal {
  position: relative;
  z-index: 1;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.footer-logo-seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-vcard-link {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warm-ivory);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer-vcard-link:hover {
  opacity: 1;
}

.footer-vcard-link span {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition-fast);
}

.footer-vcard-link:hover span {
  transform: translateX(3px);
}

.footer-explore {
  position: relative;
  z-index: 1;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 1.1rem;
  align-content: start;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.footer-nav ul li {
  margin: 0;
  line-height: 1;
}

.footer-nav a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--color-warm-ivory);
  text-decoration: none;
}

.footer-nav a:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Stay Connected strip --- */
.footer-newsletter-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-warm-stone);
  border-bottom: 1px solid rgba(52, 78, 65, 0.18);
}

.footer-newsletter-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../images/niklas-hamann-Cxjh4S2Pmt8-unsplash.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(0.82);
  opacity: 0.55;
}

.footer-newsletter-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(250, 247, 241, 0.68), rgba(250, 247, 241, 0.68)),
    rgba(218, 215, 205, 0.32);
}

.footer-newsletter-strip-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg) calc(var(--spacing-md) + 70px) var(--spacing-lg) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .footer-newsletter-strip-inner {
    padding-right: calc(var(--spacing-md) + 56px);
  }
}

.footer-script-label--inline {
  margin-bottom: 0;
  color: var(--color-evergreen-ink);
  white-space: nowrap;
}

.footer-newsletter-strip .footer-newsletter-form {
  flex: 0 1 380px;
  margin: 0;
}

/* --- Bottom legal strip --- */
.footer-bottom {
  background-color: var(--color-warm-ivory);
  text-align: center;
  padding: var(--spacing-md);
  font-size: var(--font-size-xs);
  letter-spacing: 0.03em;
  color: var(--color-evergreen-ink);
  opacity: 0.75;
}

.footer-bottom a {
  color: var(--color-evergreen-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .footer-main-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-about {
    order: 2;
    max-width: 400px;
  }

  .footer-about-text {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-trust-list {
    align-items: center;
  }

  .footer-logo-seal-col {
    order: 1;
    border-left: none;
    border-right: none;
    padding-inline: 0;
  }

  .footer-explore {
    order: 3;
    text-align: center;
    justify-self: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .footer-nav ul {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .footer-cta-strip-inner {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .footer-divider--vertical {
    display: none;
  }

  .footer-nav {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-lg);
    justify-content: center;
  }

  .footer-nav ul {
    align-items: center;
  }
}

/* ============================================
   EDITORIAL DIVIDER SYSTEM
   Vertical dividers are the site's primary editorial signature — used for
   three-column layouts, numbered sections, footer/contact columns, and
   quiet section pauses. Horizontal lines are reserved for structural
   necessity only (footer/nav borders, FAQ separators, form grouping).
   ============================================ */

.editorial-divider-vertical {
  width: 1px;
  align-self: stretch;
  background: rgba(52, 78, 65, 0.18);
  border: none;
}

.editorial-divider-vertical--short {
  align-self: center;
  height: 72px;
  width: 1px;
  background: rgba(52, 78, 65, 0.18);
}

.editorial-divider-vertical--centered {
  margin-inline: auto;
}

.editorial-divider-vertical--soft {
  background: rgba(52, 78, 65, 0.12);
}

.editorial-divider-vertical--on-dark,
.editorial-divider-vertical--dark,
.editorial-divider-vertical--dark-bg {
  background: rgba(218, 215, 205, 0.45);
}

/* A quiet editorial breath between two sections — used sparingly, never
   between every section. Replaces the old horizontal .fine-divider rule. */
.editorial-divider-vertical--pause {
  width: 1px;
  height: clamp(48px, 7vw, 76px);
  background: rgba(52, 78, 65, 0.18);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .editorial-divider-vertical {
    height: 48px;
    width: 1px;
    margin-inline: auto;
    align-self: center;
  }

  .editorial-section--divided {
    gap: clamp(1.5rem, 6vw, 2.5rem);
  }
}

/* ============================================
   EDITORIAL REFLECTION SECTION
   Three-column calm pause: statement / framed image / reflective copy.
   Doubles as the homepage's early "safe space" moment.
   ============================================ */

.editorial-reflection {
  position: relative;
  background-color: var(--color-warm-ivory);
  padding: var(--spacing-2xl) 0;
}

.editorial-reflection__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 1px 1.1fr 1px 1fr;
  align-items: center;
  gap: var(--spacing-2xl);
}

.editorial-reflection__statement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.editorial-reflection__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-botanical-green);
  margin-bottom: var(--spacing-md);
}

.editorial-reflection__heading {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  line-height: 1.25;
  color: var(--color-deep-walnut);
  margin-bottom: var(--spacing-lg);
}

.editorial-reflection__actions .btn {
  width: auto;
}

.editorial-reflection__image-frame {
  padding: 10px;
  border: 1px solid var(--color-natural-taupe);
}

.editorial-reflection__image {
  display: block;
  width: 100%;
  height: clamp(280px, 30vw, 400px);
  object-fit: cover;
  filter: saturate(0.92) sepia(0.04) brightness(1.02) contrast(0.97);
}

.editorial-reflection__accent {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-olive-leaf);
  margin-top: var(--spacing-md);
}

.editorial-reflection__copy {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-deep-walnut);
}

@media (max-width: 940px) {
  .editorial-reflection__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .editorial-reflection__inner > .editorial-divider-vertical {
    display: none;
  }

  .editorial-reflection__statement {
    align-items: center;
    text-align: center;
  }
}

/* ============================================
   STATEMENT MARQUEE
   Slow, meditative scrolling statement band. Decorative only — never the
   sole carrier of essential information.
   ============================================ */

.statement-marquee {
  position: relative;
  overflow: hidden;
  background: var(--color-warm-stone);
  border-top: 1px solid rgba(52, 78, 65, 0.14);
  border-bottom: 1px solid rgba(52, 78, 65, 0.14);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.statement-marquee__track {
  display: flex;
  width: max-content;
  animation: statement-scroll 50s linear infinite;
}

.statement-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  white-space: nowrap;
}

.statement-marquee__item::after {
  content: '/';
  margin-left: 2rem;
  color: rgba(52, 78, 65, 0.4);
}

@keyframes statement-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .statement-marquee__track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   APPROACH BAND
   Wide muted section for therapeutic approaches, numbered .01–.04.
   ============================================ */

.approach-band {
  position: relative;
  background-color: var(--color-soft-sage);
  padding: var(--spacing-2xl) 0;
}

.approach-band__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--spacing-2xl) auto;
}

.approach-band__header h2 {
  color: var(--color-evergreen-ink);
}

.approach-band__label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-evergreen-ink);
  margin-top: var(--spacing-sm);
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(52, 78, 65, 0.18);
}

.approach-item {
  position: relative;
  padding: var(--spacing-xl) var(--spacing-lg);
  border-right: 1px solid rgba(52, 78, 65, 0.18);
}

.approach-item:last-child {
  border-right: none;
}

.approach-item__number {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-sm);
}

.approach-item h4 {
  color: var(--color-evergreen-ink);
  margin-bottom: var(--spacing-sm);
}

.approach-item p {
  color: var(--color-evergreen-ink);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

@media (max-width: 900px) {
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .approach-item:nth-child(2n) {
    border-right: none;
  }

  .approach-item:nth-child(-n+2) {
    border-top: none;
  }

  .approach-item {
    border-top: 1px solid rgba(52, 78, 65, 0.18);
  }
}

@media (max-width: 560px) {
  .approach-grid {
    grid-template-columns: 1fr;
  }

  .approach-item {
    border-right: none;
    border-top: 1px solid rgba(52, 78, 65, 0.18);
  }
}

/* ============================================
   QUOTE MOTION SECTION
   Now a solid matte Deep Forest panel — no photography, no motion.
   ============================================ */

.quote-motion-section {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 46vw, 560px);
  display: grid;
  place-items: center;
  isolation: isolate;
  background-color: var(--color-evergreen-ink);
}

.quote-motion-section__media {
  display: none;
}

.quote-motion-section__overlay {
  display: none;
}

.quote-motion-section__content {
  position: relative;
  text-align: center;
  max-width: 780px;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.quote-motion-section__label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-md);
}

.quote-motion-section__quote {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-lg);
}

.quote-motion-section__attribution {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-warm-ivory);
}

@keyframes botanical-drift {
  from { transform: scale(1.04) translate3d(-0.6%, -0.4%, 0); }
  to { transform: scale(1.07) translate3d(0.6%, 0.4%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-motion-section__media {
    animation: none;
    transform: scale(1.04);
  }
}

/* ============================================
   UTILITIES
   ============================================ */

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.py-lg { padding: var(--spacing-lg) 0; }
.px-md { padding: 0 var(--spacing-md); }

.hidden {
  display: none;
}

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

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  :root {
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
  }

  .header-inner {
    padding: 0 var(--spacing-sm);
  }

  #nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--color-warm-ivory);
    padding: calc(var(--mobile-header-h, 120px) + var(--spacing-md)) var(--spacing-lg) var(--spacing-lg);
    gap: 0;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  }

  #nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #nav a {
    width: 100%;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--color-natural-taupe);
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    letter-spacing: 0.09em;
    line-height: 1.3;
  }

  #nav a:last-of-type {
    border-bottom: 1px solid var(--color-natural-taupe);
  }

  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
  }

  .nav-dropdown-trigger > a {
    width: 100%;
    padding-right: var(--spacing-2xl);
  }

  .nav-dropdown-caret {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 var(--spacing-sm);
    font-size: 16px;
  }

  .nav-dropdown-menu {
    position: static;
    margin-top: 0;
    display: block;
    grid-template-columns: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
  }

  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 900px;
    pointer-events: auto;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0 0 0 var(--spacing-md);
  }

  .nav-dropdown-menu a {
    display: block;
    width: 100%;
    font-size: clamp(0.86rem, 3.3vw, 0.98rem) !important;
    letter-spacing: 0.07em;
    line-height: 1.3;
    padding-block: 0.55rem !important;
    border-bottom: 1px solid var(--color-natural-taupe) !important;
  }

  .nav-dropdown-viewall {
    border-top: none;
    margin-top: 0;
    padding-top: var(--spacing-sm) !important;
  }

  body.nav-open {
    overflow: hidden;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Quick-action area at the foot of the mobile menu — a clear primary
     CTA plus a quiet way to save Tracie's details, mirroring the footer. */
  #nav .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-lg);
    width: 100%;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(52, 78, 65, 0.18);
  }

  #nav .nav-mobile-actions .nav-mobile-cta {
    width: 100%;
    text-align: center;
    padding: 14px 26px;
    border-bottom: none;
    font-size: 13px;
    color: var(--color-warm-ivory);
  }

  #nav .nav-mobile-actions .nav-mobile-cta:hover {
    color: var(--color-warm-ivory);
  }

  #nav .nav-mobile-actions .nav-mobile-vcard {
    width: auto;
    padding: 0;
    border-bottom: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-evergreen-ink);
  }

  #nav .nav-mobile-actions .nav-mobile-vcard:hover {
    color: var(--color-botanical-green);
  }

  .hero {
    min-height: 400px;
    padding: var(--spacing-xl) var(--spacing-md) !important;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero .tagline {
    font-size: var(--font-size-lg);
  }

  .hero-content {
    max-width: 100% !important;
  }

  .hero-training {
    background-size: cover !important;
    background-position: center 20% !important;
  }

  .hero-content div[style*="flex-wrap: nowrap"] {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .section {
    padding: var(--spacing-xl) 0;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-2xl: 1.5rem;
    --font-size-xl: 1.25rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }

  .logo {
    font-size: var(--font-size-base);
  }

  .logo img {
    height: 56px;
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  .hero {
    min-height: 300px;
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .button, .btn {
    width: 100%;
  }
}

/* ============================================
   FORM PROTECTION (honeypot, Turnstile) & STATUS MESSAGES
   ============================================ */

.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile-wrap {
  margin: 0;
}

.form-status-message, .form-error, .form-success {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-natural-taupe);
}

.form-status-success, .form-success {
  background-color: var(--color-warm-stone);
  color: var(--color-deep-walnut);
  border-color: var(--color-sage-green);
}

.form-status-error, .form-error {
  background-color: var(--color-warm-stone);
  color: var(--color-deep-walnut);
  border-color: var(--color-dusty-rose);
}

/* Error state doesn't rely on colour alone — a small marker precedes the text. */
.form-status-error::before, .form-error::before {
  content: '\26A0  ';
}

.crisis-note {
  font-size: var(--font-size-sm);
  color: var(--color-deep-walnut);
  opacity: 0.85;
  border-top: 1px solid var(--color-natural-taupe);
  padding-top: var(--spacing-sm);
  margin: 0;
}

/* ============================================
   TRAINING AVAILABILITY (scheduled session + register interest)
   ============================================ */

.training-session-panel {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-warm-stone);
  border: 1px solid var(--color-natural-taupe);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.training-session-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-olive-leaf);
  margin-bottom: var(--spacing-sm);
}

.training-session-panel h3 {
  margin-bottom: var(--spacing-sm);
}

.training-session-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-natural-taupe);
  border-bottom: 1px solid var(--color-natural-taupe);
}

.training-session-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.training-session-fact-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-deep-walnut);
  opacity: 0.7;
}

.training-session-full-notice {
  background-color: var(--color-warm-ivory);
  border: 1px solid var(--color-dusty-rose);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.training-session-note {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-deep-walnut);
  opacity: 0.85;
  margin-bottom: var(--spacing-md);
}

.training-panel {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-warm-ivory);
  border: 1px solid var(--color-natural-taupe);
  padding: var(--spacing-xl);
}

.training-panel h3 {
  margin-bottom: var(--spacing-sm);
}

.training-form {
  margin-top: var(--spacing-lg);
  width: 100%;
}

.training-group-note {
  text-align: center;
  font-style: italic;
  color: var(--color-deep-walnut);
  opacity: 0.85;
  margin-top: var(--spacing-xl);
}

/* ============================================
   TESTIMONIALS — a quiet, dignified collection of client words.
   No cards, no star ratings, no decorative quote marks; typography and
   whitespace carry the design. Shared by the homepage preview and the
   full testimonials page via js/testimonials.js.
   ============================================ */

.testimonial-collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-2xl);
  row-gap: var(--spacing-2xl);
}

.testimonial-editorial {
  padding-left: var(--spacing-lg);
  border-left: 1px solid rgba(52, 78, 65, 0.14);
}

.testimonial-editorial__quote {
  margin: 0 0 var(--spacing-md) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-evergreen-ink);
  overflow-wrap: break-word;
}

.testimonial-editorial__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin: 0;
}

.testimonial-editorial__source {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.85;
}

.testimonial-editorial__service {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.55;
}

.testimonial-editorial__service::before {
  content: '\00b7';
  margin-right: var(--spacing-sm);
  opacity: 0.7;
}

.testimonial-editorial__date {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-evergreen-ink);
  opacity: 0.45;
}

.testimonial-editorial__date::before {
  content: '\00b7';
  margin-right: var(--spacing-sm);
  opacity: 0.7;
}

@media (max-width: 700px) {
  .testimonial-collection {
    grid-template-columns: 1fr;
  }
}

/* Featured testimonial — one quote given room to breathe, set apart from
   the collection on a deeper matte background. */
.testimonial-editorial--featured {
  display: grid;
  grid-template-columns: 200px 1px 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
  padding-left: 0;
  border-left: none;
}

.testimonial-editorial--featured .testimonial-editorial__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-soft-sage);
}

.testimonial-editorial__divider {
  align-self: stretch;
  width: 1px;
  background: rgba(250, 247, 241, 0.18);
}

.testimonial-editorial--featured .testimonial-editorial__quote {
  font-size: var(--font-size-2xl);
  line-height: 1.5;
  color: var(--color-warm-ivory);
  margin-bottom: var(--spacing-lg);
}

.testimonial-editorial--featured .testimonial-editorial__source {
  color: var(--color-warm-ivory);
  opacity: 0.9;
}

.testimonial-editorial--featured .testimonial-editorial__service {
  color: var(--color-warm-ivory);
  opacity: 0.55;
}

.testimonial-editorial--featured .testimonial-editorial__date {
  color: var(--color-warm-ivory);
  opacity: 0.45;
}

@media (max-width: 700px) {
  .testimonial-editorial--featured {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    text-align: center;
  }

  .testimonial-editorial--featured .testimonial-editorial__divider {
    display: none;
  }
}

.testimonials-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-evergreen-ink);
  opacity: 0.7;
  font-style: italic;
}

.form-checkbox-group, .consent-group, .form-radio-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.form-checkbox-group input[type="checkbox"], .consent-group input[type="checkbox"],
.form-checkbox, input[type="checkbox"],
.form-radio-group input[type="radio"], .form-radio, input[type="radio"] {
  min-height: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--color-botanical-green);
  border: 1px solid var(--color-natural-taupe);
  cursor: pointer;
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid rgba(92, 118, 80, 0.45);
  outline-offset: 2px;
}

.form-checkbox-group label, .consent-group label, .form-radio-group label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-deep-walnut);
}

/* Consent checkboxes (publish/contact/removal-process agreements) get a
   touch more emphasis since they carry real decisions. */
.consent-group label {
  font-weight: 500;
}