/* ==========================================================================
   THRIVE HEALTH COLLECTIVE — DESIGN SYSTEM
   A calm, premium, wellness-focused visual language.
   Table of contents:
     1.  Font faces
     2.  Design tokens (custom properties)
     3.  Reset & base
     4.  Accessibility helpers
     5.  Typography
     6.  Layout & containers
     7.  Buttons
     8.  Cards
     9.  Organic shapes & dividers
     10. Header & navigation
     11. Hero
     12. Sections (home, services, about, contact)
     13. Footer
     14. Blog
     15. Forms
     16. Animations & scroll reveal
     17. Utilities
     18. Media queries / responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT FACES
   Runalto: brand heading/logo serif. Bundled file is licensed "free for
   personal use" — a commercial licence must be purchased from sensatype.com
   before this site launches publicly (see theme README).
   Poppins: body/subheading sans-serif, self-hosted (SIL OFL licensed).
   Smithgroove: handwritten accent font (replaces the earlier placeholder,
   "Tangerine Skies", which was never actually supplied). No licence file
   was bundled with these font files — confirm Smithgroove is licensed for
   this commercial use before launch, the same way Runalto's licence needed
   confirming (see theme README).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Runalto';
  src: url('../fonts/runalto/Runalto.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Smithgroove';
  src: url('../fonts/Smithgroove/Smithgroove.otf') format('opentype'),
       url('../fonts/Smithgroove/Smithgroove.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colour palette (from brand guidelines, do not alter hex values) */
  --color-sand: #E0DED1;   /* warm neutral background */
  --color-mist: #BCC5C6;   /* soft blue-grey */
  --color-sage: #D0D5CF;   /* soft green-grey background */
  --color-slate: #6C7B76;  /* deep sage/slate, dark sections & body text */
  --color-teal: #748D8B;   /* muted teal, primary accent */
  --color-clay: #948267;   /* warm gold/brown, secondary accent */

  /* Derived neutrals — not brand colours, added only to guarantee accessible
     contrast on very light/dark sections without introducing harsh black/white. */
  --color-paper: #FAF9F4;
  --color-ink: #2C2A25;
  --color-white: #FFFFFF;

  /* Semantic tokens */
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-text-soft: var(--color-slate);
  --color-accent: var(--color-teal);
  --color-accent-warm: var(--color-clay);
  --color-border: rgba(44, 42, 37, 0.10);

  /* Typography */
  --font-heading: 'Runalto', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Smithgroove', 'Segoe Script', 'Brush Script MT', cursive;

  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-md: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem);
  --text-lg: clamp(1.4rem, 1.3rem + 0.5vw, 1.75rem);
  --text-xl: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --text-2xl: clamp(2.2rem, 1.9rem + 1.5vw, 3.2rem);
  --text-3xl: clamp(2.8rem, 2.3rem + 2.5vw, 4.4rem);
  --text-4xl: clamp(3.4rem, 2.6rem + 4vw, 5.6rem);

  /* Brand type hierarchy (per guidelines): eyebrow/subheading sizes as a
     fraction of the heading size they sit beside, with wide tracking. */
  --tracking-subheading: 0.1em;   /* "tracking 100" */
  --tracking-paragraph: 0.015em;  /* "tracking 15" */
  --tracking-heading: 0;
  --leading-paragraph: 1.7;

  /* Spacing scale — generous, "breathing" spa-like rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* Radii — soft, rounded, organic */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.5rem;
  --radius-pill: 999px;

  /* Shadows — soft, warm-tinted, never harsh */
  --shadow-sm: 0 2px 10px rgba(44, 42, 37, 0.06);
  --shadow-md: 0 12px 32px rgba(44, 42, 37, 0.08);
  --shadow-lg: 0 24px 60px rgba(44, 42, 37, 0.12);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-med: 500ms;
  --duration-slow: 900ms;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: var(--tracking-paragraph);
  line-height: var(--leading-paragraph);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
img { font-style: italic; } /* keeps alt text legible if an image fails to load */

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

ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-calm);
}
.skip-link:focus {
  top: 1rem;
}

/* Visible, gentle-but-clear focus states everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

/* "Eyebrow" / subheading style per brand guidelines: uppercase, wide tracking,
   sized at ~25% of the heading it accompanies. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  color: var(--color-accent-warm);
  margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Accent / handwritten phrase — brand rule: max 1-3 words, sentence case. */
.accent-phrase {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-accent-warm);
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
}

.lede {
  font-size: var(--text-md);
  color: var(--color-text-soft);
}

.prose {
  font-size: var(--text-base);
  line-height: var(--leading-paragraph);
}
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: var(--text-xl); margin-top: 1.6em; }
.prose h3 { font-size: var(--text-lg); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 1.25em 0; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-accent-warm); }
.prose blockquote {
  margin: 2em 0;
  padding: 1.5em 2em;
  background: var(--color-sage);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
  border-left: 4px solid var(--color-accent-warm);
}
.prose img { border-radius: var(--radius-lg); }
.prose figcaption { font-size: var(--text-sm); color: var(--color-text-soft); margin-top: 0.5em; }

/* --------------------------------------------------------------------------
   6. LAYOUT & CONTAINERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  position: relative;
  padding-block: var(--space-9);
}
.section--tight { padding-block: var(--space-7); }
.section--roomy { padding-block: var(--space-10); }

.section-head {
  margin-bottom: var(--space-7);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.bg-sand { background-color: var(--color-sand); }
.bg-mist { background-color: var(--color-mist); }
.bg-sage { background-color: var(--color-sage); }
.bg-slate { background-color: var(--color-slate); color: var(--color-paper); }
.bg-teal { background-color: var(--color-teal); color: var(--color-paper); }
.bg-clay { background-color: var(--color-clay); color: var(--color-paper); }
.bg-paper { background-color: var(--color-paper); }
.bg-white { background-color: var(--color-white); }
.bg-slate h1, .bg-slate h2, .bg-slate h3, .bg-slate h4,
.bg-teal h1, .bg-teal h2, .bg-teal h3, .bg-teal h4,
.bg-clay h1, .bg-clay h2, .bg-clay h3, .bg-clay h4 { color: var(--color-paper); }
.bg-slate .lede, .bg-teal .lede, .bg-clay .lede { color: rgba(250, 249, 244, 0.85); }
.bg-slate .eyebrow, .bg-teal .eyebrow, .bg-clay .eyebrow { color: var(--color-sand); }

.grid {
  display: grid;
  gap: var(--space-6);
}
/* minmax(0, 1fr), not plain 1fr: a bare `1fr` track has an implicit
   automatic minimum size equal to its content's min-content width, so a
   wide, unbreakable child (an embedded form plugin's markup, a long run of
   text) forces the track — and the whole grid — wider than the container,
   overflowing the viewport horizontally. minmax(0, ...) removes that floor
   so the track shrinks to the available space and its content wraps/scrolls
   within it instead. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-calm),
              background-color var(--duration-fast) var(--ease-calm),
              color var(--duration-fast) var(--ease-calm),
              box-shadow var(--duration-fast) var(--ease-calm);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background-color: var(--color-teal);
  color: var(--color-paper);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background-color: var(--color-slate); box-shadow: var(--shadow-md); }

/* Homepage hero primary button: wider than the standard .btn, and
   optionally bold via the "Bold Primary Button Text" ACF field. */
.btn-primary--hero {
  padding-inline: 3.25em;
  min-width: 280px;
}
.btn--bold { font-weight: 700; }

.btn-secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: currentColor;
}
.btn-secondary:hover { background-color: var(--color-ink); color: var(--color-paper); }

.btn-warm {
  background-color: var(--color-clay);
  color: var(--color-paper);
}
.btn-warm:hover { background-color: var(--color-slate); }

.btn-ghost {
  background: rgba(250, 249, 244, 0.15);
  color: inherit;
  border-color: rgba(250, 249, 244, 0.5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(250, 249, 244, 0.28); }

/* For use on colour-block backgrounds (bg-teal / bg-slate / bg-clay) where a
   solid, high-contrast primary action is needed alongside a .btn-ghost. */
.btn-light {
  background-color: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { background-color: var(--color-sand); }

.btn-sm { padding: 0.7em 1.5em; font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

/* Base size for every inline icon printed by thrive_icon() (inc/icons.php).
   Specific contexts (card-icon, footer-social, etc.) override this with
   their own explicit sizing below; `.icon--sm` is for small inline uses
   like the header phone number. */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.icon--sm {
  width: 20px;
  height: 20px;
}

.card {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  transition: transform var(--duration-med) var(--ease-calm),
              box-shadow var(--duration-med) var(--ease-calm);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Used when a section has an optional background image (e.g. "Why Thrive")
   showing faintly behind translucent cards. */
.card--translucent {
  background: rgba(250, 249, 244, 0.62);
  border-color: rgba(44, 42, 37, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card--translucent:hover { background: rgba(250, 249, 244, 0.78); }

/* Section-level optional background image + soft white overlay, used by
   the "Why Thrive" section when an editor sets a background image. */
.section--has-bg-image { overflow: hidden; }
.section-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 244, 0.86);
}
.section--has-bg-image > .container { position: relative; z-index: 1; }

.card-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-sage);
  color: var(--color-slate);
  margin-bottom: var(--space-4);
}
.card-icon svg { width: 1.75rem; height: 1.75rem; }

.card-service {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.card-service__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-service__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-calm);
}
.card-service:hover .card-service__media img { transform: scale(1.06); }
.card-service__body { padding: var(--space-6); }
.card-service__body h3 { font-size: calc(var(--text-2xl) * 0.5625); }
.card-service__body details {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.card-service__body summary {
  cursor: pointer;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  list-style: none;
}
.card-service__body summary::-webkit-details-marker { display: none; }
.card-service__body summary::after { content: '+'; float: right; }
.card-service__body details[open] summary::after { content: '\2212'; }
.card-service__body details .prose { margin-top: var(--space-3); font-size: var(--text-sm); }

.card-team {
  text-align: center;
  padding: 0;
}
.card-team__media {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.card-team__media img { width: 100%; height: 100%; object-fit: cover; }
.card-team__body { padding: var(--space-5); }
.card-team__body h3 { font-size: var(--text-lg); }
.card-team__role {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
}
/* Credentials sit right under Profession, deliberately smaller/quieter so
   Profession (.card-team__role) reads as the more prominent of the two. */
.card-team__credentials {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  margin-top: 0.15rem;
}
.card-team__intro {
  margin-top: var(--space-3);
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}
.card-team__link { margin-top: var(--space-4); }

/* About page practitioner list — a single stacked column of rows (photo
   left, details right), built to comfortably hold long-form bios rather
   than the fixed-height preview cards used elsewhere (.card-team above,
   used by the homepage team preview, is untouched). */
.team-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.team-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-7);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  /* Clears the sticky header when jumped to via #anchor-id, so the row
     doesn't land hidden underneath it. */
  scroll-margin-top: 6.5rem;
}
.team-row__media {
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.team-row__media img { width: 100%; height: 100%; object-fit: cover; }
.team-row__body { flex: 1 1 auto; min-width: 0; }
.team-row__body h3 { font-size: var(--text-lg); }
.team-row__body .card-team__role { margin-bottom: var(--space-3); }
.team-row__link { margin-top: var(--space-4); }
@media (max-width: 700px) {
  .team-row { flex-direction: column; }
  .team-row__media { width: 100%; flex-basis: auto; aspect-ratio: 4 / 3; }
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-5) 0;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  color: var(--color-ink);
}
.faq-item__icon {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  transition: transform var(--duration-fast) var(--ease-calm);
}
.faq-item[data-open="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-med) var(--ease-calm);
}
.faq-item__answer-inner { padding-bottom: var(--space-5); color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   9. ORGANIC SHAPES & DIVIDERS
   -------------------------------------------------------------------------- */
.shape-blob {
  position: absolute;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(0px);
  z-index: 0;
  pointer-events: none;
}
.shape-blob--sage { background: var(--color-sage); }
.shape-blob--mist { background: var(--color-mist); }
.shape-blob--clay { background: var(--color-clay); opacity: 0.18; }
.shape-blob--teal { background: var(--color-teal); opacity: 0.15; }

.hex-cluster {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1 / 1;
  opacity: 0.5;
  pointer-events: none;
  color: var(--color-clay);
}
.hex-cluster svg { width: 100%; height: 100%; }

/* Hexagon image crop — echoes the honeycomb mark in the logo. A larger,
   softly-tinted hexagon sits behind the image (via ::before) to stand in
   for the drop shadow that clip-path would otherwise cut away, keeping the
   layered, organic look used elsewhere on the site. */
.hex-frame {
  position: relative;
  aspect-ratio: 1 / 1.05;
}
.hex-frame::before {
  content: '';
  position: absolute;
  inset: -1.25rem;
  background: var(--color-clay);
  opacity: 0.16;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}
.hex-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.section-divider {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}
.section-divider svg { width: 100%; height: 48px; display: block; }
@media (min-width: 768px) {
  .section-divider svg { height: 80px; }
}

/* --------------------------------------------------------------------------
   10. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-med) var(--ease-calm),
              border-color var(--duration-med) var(--ease-calm);
}

/* Homepage only: the header floats over the hero's own background photo +
   white overlay (template-parts/home/hero.php), starting fully transparent,
   then fades in the same solid/blurred bar every other page already has
   once the visitor scrolls (assets/js/main.js toggles .site-header--solid).
   `position: sticky` still reserves its own height in the document flow
   even before it "sticks" — which pushed the hero down and broke the
   overlay. `position: fixed` removes it from the flow entirely (so the
   hero can start right at the top of the viewport, with the header
   floating on top via z-index) while still pinning it to the viewport
   throughout scrolling, matching the persistent behaviour every other
   page's sticky header has. WordPress's body_class() adds the class `home`
   (NOT `front-page` — a common mix-up, since it's named after
   is_front_page(), not is_home()) whenever this page is set as the site's
   front page in Settings → Reading. */
body.home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
body.home .site-header.site-header--solid {
  background: rgba(250, 249, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.announcement-bar {
  background: var(--color-slate);
  color: var(--color-paper);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-subheading);
  padding: 0.6rem var(--container-pad);
}
.announcement-bar a { text-decoration: underline; text-underline-offset: 2px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: 25px;
  padding-bottom: var(--space-4);
}
.site-branding { display: flex; align-items: center; }
.site-branding img { max-height: 65px; width: auto; }

.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: var(--space-6); }
.primary-nav a {
  font-size: calc(var(--text-sm) * 0.9);
  font-weight: 500;
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  padding: 0.5rem 0;
  position: relative;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-accent-warm);
  transition: right var(--duration-fast) var(--ease-calm);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-phone { display: none; font-size: calc(var(--text-base) * 0.9); }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--color-sage);
  border-radius: var(--radius-md);
  border: none;
  color: var(--color-ink);
}
.menu-toggle svg { width: 1.4rem; height: 1.4rem; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle:not([aria-expanded="true"]) .icon-close { display: none; }

.mobile-nav {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--color-paper);
  z-index: 200;
  padding: var(--space-6) var(--container-pad);
  transform: translateY(-100%);
  transition: transform var(--duration-med) var(--ease-calm);
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { transform: translateY(0); }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-5); }
/* Scoped to the actual <nav> menu links only — NOT .mobile-nav__cta's
   button, which is a sibling of <nav>, not a descendant. That button
   otherwise inherited this large heading-sized font-size, and since the
   .btn styles are sized in `em`s, it rendered enormous. */
.mobile-nav nav a {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}
.mobile-nav__cta { margin-top: var(--space-8); }

@media (min-width: 960px) {
  .primary-nav { display: block; }
  .menu-toggle { display: none; }
  .header-phone { display: flex; }
}

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-10);
}

/* Services page only: extra bottom padding on the hero so the overlapping
   service cards below (#services-list, see section 12) have room to break
   into the hero's own padding rather than crowding right up against its
   heading/copy. `body.page-template-page-services-php` is the standard
   WordPress body class for a page using page-services.php (added by
   body_class() based on the assigned Page Attributes → Template), so this
   only affects this one page's hero — About/Contact keep the normal
   padding since they share the same page-hero.php template part. */
body.page-template-page-services-php .hero {
  padding-bottom: calc(var(--space-10) + 5rem);
}
@media (max-width: 700px) {
  body.page-template-page-services-php .hero { padding-bottom: calc(var(--space-10) + 2.5rem); }
}

/* Homepage-only hero: full-bleed background photo (via .section-bg-image,
   shared with the "Why Thrive" background-image treatment) with a taller,
   more editorial feel than the plain-colour interior-page hero. */
.hero--home {
  min-height: 95vh;
  display: flex;
  align-items: center;
}
.hero--home .hero__copy { max-width: none; }
.hero--home .lede { color: var(--color-slate); }
.hero--home .section-bg-image::after {
  background: rgba(250, 249, 244, 0.82);
}
.hero--home .hero__headline { font-size: calc(var(--text-4xl) * 0.85); }
@media (max-width: 700px) {
  .hero--home .hero__headline { font-size: calc(var(--text-4xl) * 0.7); }

  /* On desktop, .hero--home's 95vh + align-items:center leaves a large
     centred gap above the copy, which comfortably clears the fixed
     transparent site-header (see the position:fixed comment in section 10)
     floating on top of it. On short mobile viewports that centring slack
     shrinks toward zero, so the copy's actual top offset falls back to
     .hero's own padding-top (var(--space-9), 6rem) — shorter than the
     header's own rendered height (~107px: 25px padding-top + 65px logo +
     1rem padding-bottom), which let the heading start underneath/behind
     it. Bumping just the top padding here (bottom stays as set by .hero)
     guarantees clearance plus real breathing room, independent of how
     tall the copy block ends up being. */
  .hero--home { padding-top: calc(var(--space-9) + var(--space-7)); }
}

/* Optional full-bleed variant of the shared interior-page hero
   (template-parts/global/page-hero.php, fullbleed=true) — used by the
   Join Thrive page's team-photo hero. Same treatment as .hero--home but a
   little shorter, since interior pages don't need quite the same impact. */
.hero--fullbleed {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.hero--fullbleed .section-bg-image::after {
  background: rgba(250, 249, 244, 0.78);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.hero__copy { max-width: 620px; }
.hero__headline { margin-bottom: var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* Hero "Trust Statements" — a row of short, calm confidence markers below
   the supporting copy, styled deliberately differently from .lede (small,
   uppercase, wide tracking, warm accent colour) rather than looking like
   more body copy. */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
}
.trust-list__item {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  color: var(--color-accent-warm);
}
.trust-list__item .icon { color: var(--color-teal); }

/* "New Patients" reassurance strip — same small icon+label pattern as
   .trust-list, recoloured for the dark bg-slate section it sits in. */
.reassurance-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
}
.reassurance-list__item {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  color: var(--color-sand);
}
.reassurance-list__item .icon { color: var(--color-sand); opacity: 0.85; }

.hero__media {
  position: relative;
  z-index: 1;
}
.hero__media-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__media-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__media-float {
  position: absolute;
  bottom: -1.75rem;
  left: -1.75rem;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  max-width: 240px;
  z-index: 3;
}
.hero__media-float .accent-phrase { display: block; margin-bottom: 0.25rem; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------------------------------
   12. SECTIONS
   -------------------------------------------------------------------------- */
/* Homepage "Gentle Intro" 4-column feature grid — soft card background so
   each column pops off the section's own bg-paper background. */
.intro-features {
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-7);
}
.intro-features__item {
  text-align: center;
  /* The section itself is bg-paper — a card in that same colour wouldn't
     be visible at all, so these use --color-sage instead for real contrast. */
  background: var(--color-sage);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.intro-features__item h3 { font-size: var(--text-md); }
/* The shared .card-icon circle also defaults to --color-sage — since the
   card itself is now that same colour, override just here so the icon
   circle stays visible instead of blending into the card. */
.intro-features__item .card-icon { background: var(--color-paper); }
@media (max-width: 960px) {
  .intro-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .intro-features { grid-template-columns: 1fr; }
}

.why-grid, .value-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why-grid h3 { font-size: calc(var(--text-2xl) * 0.5); }
/* Homepage "Why Thrive" benefit cards stay slightly translucent once
   revealed, rather than settling at full opacity like other .reveal
   elements (see section 16, ANIMATIONS & SCROLL REVEAL). */
.why-grid .reveal.is-visible { opacity: 0.7; }
/* About page "Mission & Values" cards only — tighter padding and smaller
   body copy than the shared .card/.why-grid defaults (used elsewhere by
   the homepage's Why Thrive and the Services page's What to Expect, both
   left untouched). Scoped to #about-values (template-parts/about/values.php). */
#about-values .card { padding: 15px; }
#about-values .card p { font-size: 14px; }
/* 4 columns on desktop (homepage preview + Services page), stepping down
   at narrower widths rather than the previous auto-fit (which could land
   on 3 or 5 columns depending on exact viewport width). */
.services-grid { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-6); }
@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}
/* Services page only: the first row of service cards overlaps up into the
   hero above (template-parts/global/page-hero.php) by roughly half a
   card's height, breaking the seam between the two sections — but the
   section's own sage background must NOT move. #services-list's own top
   padding is zeroed out so the grid's margin is the ONLY thing controlling
   the gap, and `display: flow-root` establishes a new block formatting
   context on the section: without it, a negative top margin on a
   descendant with nothing but padding-less ancestors between it and the
   section (.container has no vertical padding either) collapses straight
   through and drags the section's own box — background included — up with
   it, instead of staying put while only the cards overlap. flow-root fixes
   that WITHOUT clipping the overlap (unlike `overflow: hidden`, which
   would just cut the cards off at the section's edge). Later category
   groups' grids (if services are split into categories) are unaffected —
   only the first grid, immediately after the hero, overlaps. */
#services-list {
  padding-top: 0;
  padding-bottom: calc(var(--space-9) + 2rem);
  display: flow-root;
}
/* Services page only: this section's container is wider than the site's
   normal 1280px max-width (--container-max), giving the services grid more
   breathing room on large screens. */
#services-list .container { max-width: 1600px; }
/* Homepage services preview: widened to match, now that the grid is a
   fixed 4 columns rather than auto-fitting — at the normal 1280px
   container width, 4 columns would otherwise look cramped. */
#home-services .container { max-width: 1600px; }
#services-list .services-grid:first-of-type {
  margin-top: -10rem;
  position: relative;
}
@media (max-width: 700px) {
  #services-list .services-grid:first-of-type { margin-top: -5rem; }
}
/* Homepage team preview: 5 columns in one row on desktop, widened container
   to match (matches the same treatment as #home-services / #services-list). */
#home-team .container { max-width: 1600px; }
.team-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1500px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Homepage testimonials: up to 3 review-widget embeds stacked one below
   the other in a single column. */
.testimonial-widgets {
  grid-template-columns: 1fr;
}
.testimonial-widgets__item {
  overflow: auto;
}

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-7);
  text-align: center;
}
.cta-band .accent-phrase { display: block; margin-bottom: var(--space-2); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }

.split-media {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.split-media__figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media__figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .split-media { grid-template-columns: 1fr 1fr; }
  .split-media--reverse .split-media__figure { order: 2; }
}

.collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.collage__item { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.collage__item img { width: 100%; height: 100%; object-fit: cover; }
.collage__item--a { grid-column: span 4; grid-row: span 2; }
.collage__item--b { grid-column: span 2; }
.collage__item--c { grid-column: span 2; }
.collage__item--d { grid-column: span 3; }
.collage__item--e { grid-column: span 3; }
@media (max-width: 700px) {
  .collage { grid-template-columns: repeat(2, 1fr); }
  .collage__item--a, .collage__item--b, .collage__item--c, .collage__item--d, .collage__item--e { grid-column: span 1; grid-row: auto; }
}

/* Footer CTA band: lives INSIDE <footer> (not a separate section) so its
   surroundings are always the footer's own slate background — no strip of
   page background can ever show behind it. A negative top margin pokes it
   up above the footer's top edge, overlapping whatever section precedes
   the footer (the FAQ section, on the homepage); a positive bottom margin
   then clears space before the footer-grid content below. Because it's the
   first element inside <footer>, which itself comes after that preceding
   section in the DOM, it naturally paints above it with no z-index needed. */
.footer-cta-overlap {
  margin-top: -6rem;
  margin-bottom: 4rem;
}
@media (max-width: 700px) {
  .footer-cta-overlap { margin-top: -3rem; margin-bottom: 2.5rem; }
}

/* Extends the LAST section's own bottom padding (whatever that section
   happens to be on a given template — FAQ, blog preview, a page's own CTA
   band, etc.) so it comfortably clears the footer CTA band's overlap.
   Deliberately targets the final section itself, rather than padding
   #main-content as a whole: padding #main-content instead just adds blank
   neutral space that exactly cancels out .footer-cta-overlap's negative
   margin, leaving the card sitting flush at the boundary with no visible
   overlap at all. Targeting the section itself means the extra space is
   part of THAT section's own coloured background, so the CTA band visibly
   overflows out of the footer and into it.

   The value here is .footer-cta-overlap's |margin-top| (6rem / 3rem on
   mobile) PLUS a genuine visible gap on top of that (3rem / 1.5rem) —
   without that extra bit, the padding exactly cancels the card's negative
   margin and it ends up sitting flush against the last section's content
   with no breathing room at all.

   Only added when the footer CTA is actually configured (see
   thrive_footer_cta_is_enabled() in inc/helpers.php, applied as a class in
   header.php). */
#main-content.has-footer-cta > *:last-child { padding-bottom: 9rem; }
@media (max-width: 700px) {
  #main-content.has-footer-cta > *:last-child { padding-bottom: 4.5rem; }
}

/* --------------------------------------------------------------------------
   JOIN THRIVE PAGE COMPONENTS
   -------------------------------------------------------------------------- */
/* "Is Thrive Right For You?" checklist — a plainly readable vertical list
   (unlike the small-caps .trust-list/.reassurance-list rows elsewhere). */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
}
.checklist__item .icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--color-teal);
}

/* "What You'll Receive" — a short, icon-led benefits grid on a dark
   section; deliberately just an icon + label, no supporting paragraph. */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-7);
  max-width: 760px;
  margin-inline: auto;
}
.benefits-grid__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-paper);
  font-weight: 500;
}
.benefits-grid__item .icon { flex-shrink: 0; color: var(--color-sand); }
@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
}

/* Founder message signature block. */
.founder-signature { margin-top: var(--space-5); }
.founder-signature__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}
.founder-signature__title {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

/* "Current Opportunities" — a simple divided list of open roles. */
.opportunities-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
}
.opportunities-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.opportunities-list__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-sage);
  color: var(--color-slate);
}
.opportunities-list__title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--text-md);
}
/* This section's own bottom padding-block (--space-9, inherited from
   .section) stacks with the CTA band directly below it on this page — that
   band is itself a .section (another --space-9) wrapping a .cta-band box
   that adds its own further --space-8 of internal padding before the
   heading. Combined, the CTA ends up sitting noticeably further from this
   list than the gap between any other two sections on this page, on both
   mobile and desktop (none of that padding is breakpoint-specific).
   Trimming just this section's own bottom padding brings the combined gap
   back in line with the page's normal section-to-section rhythm. */
#join-thrive-opportunities { padding-bottom: var(--space-7); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-slate);
  color: var(--color-paper);
  /* No top padding here by design — when the CTA band is present, its own
     margin-top/margin-bottom fully control the space above the footer
     content (see .footer-cta-overlap); when it's absent, .footer-main--top-space
     below adds the normal breathing room back in. */
  padding-block: 0 var(--space-6);
}
.footer-main--top-space {
  padding-top: var(--space-9);
}
.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1.4fr 1fr 1fr;
  margin-bottom: var(--space-8);
}
.footer-brand img { max-height: 168px; width: auto; margin-bottom: var(--space-4); filter: brightness(0) invert(1); }
.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a:hover { color: var(--color-sand); }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 249, 244, 0.35);
  transition: background var(--duration-fast) var(--ease-calm);
}
.footer-social a:hover { background: rgba(250, 249, 244, 0.15); }
.footer-social svg { width: 1.1rem; height: 1.1rem; }
.footer-bottom {
  border-top: 1px solid rgba(250, 249, 244, 0.2);
  padding-top: var(--space-5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(250, 249, 244, 0.7);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. BLOG
   -------------------------------------------------------------------------- */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card {
  display: flex; flex-direction: column;
  overflow: hidden; padding: 0;
}
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-sage); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-calm); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.post-card__meta { font-size: var(--text-xs); letter-spacing: var(--tracking-subheading); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.post-card__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
.post-card__excerpt { color: var(--color-text-soft); font-size: var(--text-sm); flex: 1; }

.featured-post { grid-template-columns: 1fr; }
@media (min-width: 800px) { .featured-post { grid-template-columns: 1.1fr 0.9fr; } }
.featured-post__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.featured-post__media img { width: 100%; height: 100%; object-fit: cover; }

.category-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.category-pill {
  padding: 0.5em 1.2em;
  border-radius: var(--radius-pill);
  background: var(--color-sage);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
}
.category-pill[aria-current="page"], .category-pill:hover { background: var(--color-teal); color: var(--color-paper); }

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-8); }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding-inline: 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.pagination a:hover { background: var(--color-sage); }
.pagination .current { background: var(--color-teal); color: var(--color-paper); }

.single-post__header { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.single-post__header h1 { font-size: calc(var(--text-4xl) * 0.5); }
.single-post__meta { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; color: var(--color-text-soft); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.single-post__thumb { border-radius: var(--radius-xl); overflow: hidden; margin-block: var(--space-7); box-shadow: var(--shadow-md); }
.single-post__thumb img { width: 100%; height: auto; }
.post-nav { display: grid; gap: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-7); margin-top: var(--space-8); }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link { display: block; }
.post-nav__link--next { text-align: right; }
.post-nav__label { font-size: var(--text-xs); letter-spacing: var(--tracking-subheading); text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.35rem; }
.post-nav__title { font-family: var(--font-heading); font-size: var(--text-md); }

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.contact-form-wrap {
  background: var(--color-paper);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  max-width: 100%;
}
.contact-form-wrap form { display: flex; flex-direction: column; gap: var(--space-4); }
/* Defensive: the form itself comes from a third-party plugin shortcode
   (Gravity Forms, CF7, etc. — see thrive_render_form_shortcode() in
   inc/helpers.php), so its markup isn't under our control. Some of these
   plugins render fixed-width tables/iframes (reCAPTCHA, older layout
   markup) that don't respect a narrow mobile column on their own. */
.contact-form-wrap img,
.contact-form-wrap iframe,
.contact-form-wrap table,
.contact-form-wrap svg {
  max-width: 100%;
  height: auto;
}
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap textarea,
.contact-form-wrap select {
  width: 100%;
  padding: 0.9em 1.1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
.contact-form-wrap label { font-size: var(--text-sm); font-weight: 500; margin-bottom: 0.35rem; display: inline-block; }
.contact-form-wrap input[type="submit"],
.contact-form-wrap button[type="submit"] {
  align-self: flex-start;
}

.contact-details-list { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-details-item { display: flex; gap: var(--space-4); align-items: flex-start; }
/* Flex items default to min-width:auto, which floors this column at its
   content's min-content width instead of letting it shrink to fit. A long
   unbroken string (an email address, a full street address on one line)
   then forces the row — and the page — wider than the viewport on mobile.
   min-width:0 removes that floor; overflow-wrap lets the string itself
   break instead of just overflowing its box. */
.contact-details-item > *:not(.contact-details-item__icon) {
  min-width: 0;
  overflow-wrap: break-word;
}
.contact-details-item__icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--color-sage);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-slate);
}
.contact-details-item__icon svg { width: 1.3rem; height: 1.3rem; }
.map-embed { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 50px; }
.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
  /* Greyscale keeps the map on-brand (muted, calm) instead of Google's
     default saturated colours; Google's own UI controls inside the iframe
     stay interactive as normal, just recoloured. */
  filter: grayscale(1);
}
.map-embed__fallback {
  min-height: 320px;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  background: var(--color-sage);
}
.map-embed__admin-hint {
  max-width: 46ch;
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  background: var(--color-paper);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* --------------------------------------------------------------------------
   16. ANIMATIONS & SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-calm),
              transform var(--duration-slow) var(--ease-calm);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.no-scroll { overflow: hidden; }
.relative { position: relative; }
.visually-hidden-empty:empty { display: none; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__media-float { position: static; margin-top: -3rem; margin-inline: var(--space-4); }
  .contact-form-wrap { padding: var(--space-5); }
  .contact-form-wrap h2 { font-size: calc(var(--text-3xl) * 0.8); }
}