/* ==========================================================================
   Finesse Nutrition — design system
   Faithful reproduction of the existing site: same palette, same typefaces,
   same soft-shadowed block layout. Consolidated where the original was
   inconsistent, and corrected where it failed WCAG AA.

   Contents
     1  Tokens
     2  Reset and base
     3  Layout
     4  Typography
     5  Buttons
     6  Header and navigation
     7  Hero
     8  Cards
     9  Location blocks
    10  Practitioner bio
    11  Pricing
    12  FAQ
    13  Forms
    14  CTA band
    15  Blog
    16  Footer
    17  Utilities and states
   ========================================================================== */

/* ==========================================================================
   1  TOKENS
   ==========================================================================

   COLOUR is unchanged from the previous system. Every value below was either
   sampled from the current site or is the minimum correction needed to reach
   WCAG AA. Nothing new has been introduced. What changed is the PROPORTION:
   green is now used sparingly and deliberately rather than sprinkled, and the
   neutral range does most of the work.

   TYPE has changed, and this is the one identity-level decision in the pass.
   The wordmark is a high-contrast serif. The site was set entirely in a
   geometric sans, so the brand's most distinctive asset was fighting the
   typography on every page. Display headings now use a serif that echoes the
   logo. Montserrat is retained for interface text — nav, buttons, labels,
   eyebrows — and Lato for body copy. To revert, point --font-display at
   --font-heading and nothing else needs touching.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------
     --color-primary is the identity green, for fills, rules and icons. It
     measures 3.90:1 on white: passes the 3:1 non-text rule, fails text.
     --color-primary-strong is the same hue darkened until white text on it
     passes AA. It is the only green allowed under white text or as link text. */

  --color-primary:        #3B9244;
  --color-primary-strong: #2F7A39;
  --color-primary-hover:  #215921;
  --color-primary-soft:   #EDF4EE;
  --color-primary-deep:   #1B3F22;   /* darkened identity green, for dark grounds */

  /* Brand orange. Never carries text — 1.99:1 with white either way. Labels
     sitting on it are always ink.                                            */

  --color-accent:         #FFA32E;
  --color-accent-hover:   #E08E1E;
  --color-accent-soft:    #FFF4E4;

  /* --- Neutrals ---------------------------------------------------------- */

  --color-ink:            #242424;
  --color-heading:        #262A2E;
  --color-text:           #4C4F57;
  --color-text-muted:     #6B6B6B;
  --color-text-inverse:   #FFFFFF;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F6F6F4;   /* warmed a touch; pure grey read clinical */
  --color-surface-sand:   #F1EFE9;   /* second neutral, so tinted bands can alternate */
  --color-surface-dark:   #262A2E;
  --color-border:         #E6E4DF;
  /* Boundary of an interactive control (button outline, input, toggle). WCAG
     requires 3:1 for non-text UI, and the previous value measured 1.71:1 on
     white. #847F74 clears 3:1 on white, on --color-surface-alt AND on
     --color-surface-sand, so a control is legible on every ground the site
     uses. --color-border stays light; it only ever draws decorative rules. */
  --color-border-strong:  #847F74;
  --color-focus:          #215921;
  --color-error:          #B3261E;
  --color-error-soft:     #FDECEA;
  --color-overlay:        rgba(27, 33, 30, 0.55);  /* image band scrim */

  /* --- Type families ----------------------------------------------------- */

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-heading: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Type scale --------------------------------------------------------
     Fluid. The old scale topped out at 36px, which is why every page opened
     quietly. Display now reaches 60px on a wide viewport and stays readable
     at 32px on a phone.                                                      */

  --font-size-xs:      0.75rem;                            /* 12    */
  --font-size-sm:      0.8125rem;                          /* 13    */
  --font-size-base:    0.9375rem;                          /* 15    */
  --font-size-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);   /* 16–17 */
  --font-size-md:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17–19 */
  --font-size-lg:      clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* 19–22 */
  --font-size-xl:      clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22–28 */
  --font-size-2xl:     clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);   /* 26–36 */
  --font-size-3xl:     clamp(2rem, 1.5rem + 2.4vw, 3rem);          /* 32–48 */
  --font-size-display: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);    /* 36–60 */

  --line-tight:   1.08;
  --line-heading: 1.18;
  --line-snug:    1.45;
  --line-body:    1.7;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.045em;
  --tracking-label:  0.14em;

  /* Reading measure. Prose that runs the full container width is the most
     common readability failure on brochure sites.                            */
  --measure:        66ch;
  --measure-narrow: 54ch;

  /* --- Space ------------------------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radii -------------------------------------------------------------
     The old system put a 30px radius on every surface. At that size, on cards
     AND images AND panels, it reads soft rather than considered. Pulled back
     to a restrained scale; the pill is kept for tags, where it belongs.       */

  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-image: 3px;
  --radius-pill:  999px;

  /* --- Shadows -----------------------------------------------------------
     Depth now comes mostly from borders and ground colour. Shadow is reserved
     for things that genuinely float.                                         */

  --shadow-sm: 0 1px 2px rgba(38, 42, 46, 0.05);
  --shadow-md: 0 2px 8px rgba(38, 42, 46, 0.06);
  --shadow-lg: 0 18px 48px rgba(38, 42, 46, 0.13);

  /* --- Layout ------------------------------------------------------------ */

  --container:        1200px;
  --container-narrow: 780px;
  --container-wide:   1400px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --section-y:        clamp(var(--space-16), 9vw, var(--space-32));
  --section-y-tight:  clamp(var(--space-12), 6vw, var(--space-20));

  /* --- Controls ---------------------------------------------------------- */

  --control-height-sm: 38px;
  --control-height:    48px;
  --control-height-lg: 56px;

  --transition:      180ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* ==========================================================================
   2  RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* Feature media and heroes use negative margins to run off the viewport
     edge. clip contains that without creating a scroll container the way
     overflow:hidden would (which breaks position:sticky on the header). */
  overflow-x: clip;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
iframe { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: var(--space-5); }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-10) 0;
}

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

::selection {
  background: var(--color-primary-soft);
  color: var(--color-ink);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -10);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-strong);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-2); }

/* ==========================================================================
   3  LAYOUT

   SECTION ARCHETYPES. The previous system had exactly one — padding, a
   left-aligned header, a grid — repeated twenty-five times and alternating
   white and grey. That is why the pages read as a template. There are now five,
   used deliberately:

     .section              default ground, standard rhythm
     .section--alt         warm neutral ground
     .section--sand        second neutral, so consecutive tinted bands differ
     .section--dark        inverted, for the closing CTA
     .section--feature     asymmetric split; media bleeds to the viewport edge

   Plus .band, a full-width photograph with a scrim and text over it, which is
   the main device for letting the photography carry a page.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section          { padding-block: var(--section-y); }
.section--tight   { padding-block: var(--section-y-tight); }
.section--alt     { background: var(--color-surface-alt); }
.section--sand    { background: var(--color-surface-sand); }
.section--soft    { background: var(--color-primary-soft); }
.section--dark    { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.section--dark :is(h1,h2,h3,h4,h5,h6) { color: var(--color-text-inverse); }
.section--dark p  { color: rgba(255,255,255,0.82); }

/* Section header. Left aligned by default; --center only where a band or a
   short list genuinely reads better centred. */
.section__header { max-width: var(--measure); margin-bottom: clamp(var(--space-10), 4vw, var(--space-16)); }
.section__header > :last-child { margin-bottom: 0; }
.section__header .lede { margin-top: var(--space-5); }
.section__header--center { margin-inline: auto; text-align: center; }
.section__header--center .section__eyebrow { justify-content: center; }
.section__header--center .lede { margin-inline: auto; }

/* Eyebrow. Small, tracked, with a short rule — the one place tracking that
   wide is appropriate. */
.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-strong);
  margin: 0 0 var(--space-5);
}
.section__eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 1px;
  background: var(--color-primary);
}

/* --- Prose split ----------------------------------------------------------
   Heading in a narrow left column, body in a wider right column. Running copy
   has to stay near 66ch to be readable, which on a 1200px container leaves a
   third of the row empty. This uses that space for the heading instead of
   letting the section sit lopsided.                                          */

.prose-split { display: grid; gap: var(--space-8); }
.prose-split__head { max-width: 30ch; }
.prose-split__head h2 { font-size: var(--font-size-xl); }
@media (min-width: 1100px) { .prose-split__head h2 { font-size: var(--font-size-2xl); } }
.prose-split__head > :last-child { margin-bottom: 0; }
.prose-split__body > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .prose-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--space-12), 6vw, var(--space-20));
    align-items: start;
  }
  .prose-split--sticky .prose-split__head { position: sticky; top: calc(var(--space-20) + var(--space-8)); }
}

/* --- Feature split -------------------------------------------------------
   Text in a readable column, photograph running off the edge of the viewport.
   This is what stops images reading as boxed decoration.                     */

.feature { display: grid; gap: var(--space-10); align-items: center; }
.feature__body { max-width: var(--measure); }
.feature__media { position: relative; }
.feature__media picture { display: block; }
.feature__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(var(--space-12), 6vw, var(--space-24)); }
  .feature--reverse .feature__body  { order: 2; }
  .feature--reverse .feature__media { order: 1; }

  /* Bleed the media past the container to the viewport edge. calc keeps it
     exact at any gutter, and overflow-x is clipped on <body>.               */
  .feature--bleed .feature__media {
    margin-right: calc((100vw - min(100vw, var(--container))) / -2 - var(--gutter));
  }
  .feature--bleed.feature--reverse .feature__media {
    margin-right: 0;
    margin-left: calc((100vw - min(100vw, var(--container))) / -2 - var(--gutter));
  }
  .feature--bleed .feature__media picture { display: block; }
.feature__media img { border-radius: var(--radius-image) 0 0 var(--radius-image); }
  .feature--bleed.feature--reverse .feature__media picture { display: block; }
.feature__media img { border-radius: 0 var(--radius-image) var(--radius-image) 0; }
}

/* --- Full-width image band ----------------------------------------------- */

.band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(340px, 46vw, 520px);
  isolation: isolate;
  background: var(--color-surface-dark);
}
.band__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* <picture> is the flow child, not <img>. Without a height on it, height:100%
   on the image resolves against auto and the photo overflows the band. */
.band__media picture { display: block; width: 100%; height: 100%; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
@media (min-width: 900px) {
  /* Subjects sit right of the text column rather than behind the headline. */
  .band__media img { object-position: 72% 26%; }
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Mobile: text sits over the middle of the frame, so the scrim is vertical
     and heavy. Worst case (a blown-out white pixel) still clears AA. */
  background: linear-gradient(180deg, rgba(27,33,30,0.55) 0%, rgba(27,33,30,0.86) 55%, rgba(27,33,30,0.90) 100%);
}
@media (min-width: 900px) {
  .band::after {
    background: linear-gradient(90deg, rgba(27,33,30,0.88) 0%, rgba(27,33,30,0.84) 38%, rgba(27,33,30,0.30) 78%, rgba(27,33,30,0.18) 100%);
  }
}
.band__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-16) var(--gutter);
}
.band__body { max-width: 34rem; color: var(--color-text-inverse); }
.band__body h2 { font-size: var(--font-size-2xl); max-width: 16ch; }
.band__body p { max-width: 40ch; font-size: var(--font-size-base); }
.band__body :is(h1,h2,h3) { color: var(--color-text-inverse); }
.band__body p { color: rgba(255,255,255,0.88); }
.band__eyebrow { color: var(--color-text-inverse); }
.band__eyebrow::after { background: var(--color-text-inverse); }

/* --- Grid ---------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-8); }
.grid--align-center { align-items: center; }
.grid--align-start  { align-items: start; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(var(--space-12), 5vw, var(--space-20)); }
  .grid--split   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-12), 5vw, var(--space-20)); }
}

/* ==========================================================================
   4  TYPOGRAPHY

   Three families, each with one job:
     --font-display  serif, echoes the wordmark. Page and section headings.
     --font-heading  Montserrat. Interface: nav, buttons, labels, eyebrows,
                     small headings. Never used at display size.
     --font-body     Lato. Running copy.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { color: var(--color-heading); margin: 0 0 var(--space-5); text-wrap: balance; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }

h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--line-heading); }
h3 { font-size: var(--font-size-lg);  font-weight: var(--weight-semibold); letter-spacing: -0.005em; }
h4 { font-size: var(--font-size-md);  font-weight: var(--weight-semibold); }
h5 { font-size: var(--font-size-base); font-weight: var(--weight-semibold); }
h6 {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

p { margin: 0 0 var(--space-5); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--color-primary-strong) 38%, transparent);
  transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; }

strong, b { font-weight: var(--weight-bold); color: var(--color-heading); }
small { font-size: var(--font-size-sm); }

.lede {
  font-size: var(--font-size-md);
  font-weight: var(--weight-light);
  line-height: var(--line-snug);
  color: var(--color-text);
  max-width: var(--measure-narrow);
}

.text-muted { color: var(--color-text-muted); }
.text-meta {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Photograph. Cropped by its container, never letterboxed. object-position is
   set per placement so faces are not cut by the crop. */
.figure { display: block; margin: 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-image); }
.figure--tall img { aspect-ratio: 4 / 5;  object-fit: cover; object-position: center 22%; }
.figure--wide img { aspect-ratio: 3 / 2;  object-fit: cover; object-position: center 30%; }
.figure--square img { aspect-ratio: 1;    object-fit: cover; object-position: center 26%; }
.figure__caption {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* Link list — a set of destinations, ruled rather than boxed. */
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: none; }
.link-list > li { margin: 0; border-bottom: 1px solid var(--color-border); }
.link-list > li:first-child { border-top: 1px solid var(--color-border); }
.link-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.link-list > li > a::after {
  content: "\2192";
  color: var(--color-primary);
  transition: transform var(--transition);
}
.link-list > li > a:hover { color: var(--color-primary-strong); padding-left: var(--space-4); }
.link-list > li > a:hover::after { transform: translateX(5px); }

/* Numbered editorial steps. Replaces a row of three identical cards — the
   process is a sequence, and numbering it says so without a box. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-10); counter-reset: step; }
@media (min-width: 900px) { .steps--3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-12); } }
.steps > li { counter-increment: step; margin: 0; padding-top: var(--space-6); border-top: 2px solid var(--color-heading); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.steps h3 { margin-bottom: var(--space-3); }
.steps p  { font-size: var(--font-size-base); color: var(--color-text); margin-bottom: 0; }

/* Pull quote / statement. One per page at most. */
.statement {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-regular);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  max-width: 24ch;
  margin: 0;
}

/* Key/value facts, used on location pages instead of another card. */
.facts { display: grid; gap: 0; margin: 0; }
.facts__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.facts__row:first-child { border-top: 1px solid var(--color-border); }
.facts__key {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.facts__value { margin: 0; font-size: var(--font-size-body); color: var(--color-heading); }
.facts__value a { font-family: var(--font-heading); font-weight: var(--weight-semibold); text-decoration: none; }
@media (min-width: 640px) {
  .facts__row { grid-template-columns: 10rem minmax(0,1fr); gap: var(--space-6); align-items: baseline; }
}

.breadcrumbs { padding-block: var(--space-6); font-size: var(--font-size-sm); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border); }
.breadcrumbs a { font-family: var(--font-heading); text-decoration: none; color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary-strong); }
.breadcrumbs [aria-current] { font-family: var(--font-heading); color: var(--color-heading); }

/* ==========================================================================
   5  BUTTONS
   Three paddings on the current site (7/22, 8/26, 10/30) merged to one scale.
   The default is taller than the original so the tap target clears 44px.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

/* Sizes change the box, not the type. The label stays small and tracked at
   every size — that uppercase-with-spacing treatment is carried over from the
   current site and is what makes the button read as a button. */
.btn--sm { min-height: var(--control-height-sm); padding: var(--space-3) var(--space-5); letter-spacing: var(--tracking-wide); }
.btn--lg { min-height: var(--control-height-lg); padding: var(--space-5) var(--space-10); }
.btn--block { display: flex; width: 100%; }

/* Primary — brand green. Hover goes to brand orange exactly as the current
   site does, but the label switches to ink so the pairing passes AA.        */
.btn--primary {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-hover);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}
.btn--primary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn--primary:active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* Secondary — outlined green. */
.btn--secondary {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-text-inverse);
}

/* Tertiary — text button with an arrow affordance. */
.btn--tertiary {
  min-height: 0;
  padding: var(--space-2) 0;
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-primary-strong);
  text-decoration: none;
}
.btn--tertiary:hover { color: var(--color-primary-hover); }
.btn--tertiary::after { content: "\2192"; transition: transform var(--transition); }
.btn--tertiary:hover::after { transform: translateX(4px); }

/* On dark surfaces */
.section--dark .btn--secondary,
.band .btn--secondary,
.cta-band .btn--secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}
.section--dark .btn--secondary:hover,
.band .btn--secondary:hover,
.cta-band .btn--secondary:hover {
  background: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  color: var(--color-heading);
}

/* .cta-band__panel is a light panel sitting inside the dark band. Buttons in
   it revert to the light-surface treatment, or they render white on white. */
.cta-band__panel .btn--secondary {
  color: var(--color-heading);
  border-color: var(--color-border-strong);
}
.cta-band__panel .btn--secondary:hover {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-text-inverse);
}

/* ==========================================================================
   6  HEADER AND NAVIGATION

   Two rows by design, not by accident:

     Row 1  .site-utility  — the two phone numbers and their location labels.
     Row 2  .site-header   — logo, primary nav, single CTA.

   The previous single-row header put seven nav items, two labelled phone
   numbers and a button on one line. At 1120px that overflows and the nav
   wraps, which is what made the header look broken. Giving the numbers their
   own quiet strip fixes the wrap AND stops two phone numbers competing with
   the navigation for attention. Two numbers is correct for this business and
   neither is being demoted — they are simply not nav items.

   Mobile menu is a checkbox + label, driven entirely by CSS. With CSS
   disabled the links render as a plain visible list. No JavaScript.
   ========================================================================== */

/* --- Utility strip ------------------------------------------------------ */

.site-utility {
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
}
.site-utility__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
}
.site-utility__note {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--weight-light);
}
.site-utility__phones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.site-utility__phone {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
  text-decoration: none;
  color: var(--color-heading);
  white-space: nowrap;
}
.site-utility__phone:hover { color: var(--color-primary-hover); }
.site-utility__label {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.site-utility__number {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-strong);
}
.site-utility__phone:hover .site-utility__number { color: var(--color-primary-hover); }

/* --- Masthead ----------------------------------------------------------- */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.site-header__brand { display: inline-flex; line-height: 0; }
.site-header__brand img { width: 168px; height: auto; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-heading);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle:focus-visible + .nav-toggle__label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-heading);
  content: "";
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after  { position: absolute; top: 6px; }

.site-nav { grid-column: 1 / -1; display: none; }
.nav-toggle:checked ~ .site-nav { display: block; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-1);
}

.site-nav__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--color-border);
}
.site-nav__link:hover { color: var(--color-primary-strong); background: var(--color-primary-soft); }
.site-nav__link.is-current { color: var(--color-primary-strong); font-weight: var(--weight-semibold); }

.site-header__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.site-header__actions .btn { width: 100%; }

@media (min-width: 992px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    padding-block: var(--space-5);
  }
  .site-header__brand img { width: 186px; }
  .nav-toggle__label { display: none; }

  .site-nav { display: block; grid-column: auto; justify-self: end; }
  .site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
    padding: 0;
  }
  .site-nav__link {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    border-bottom: 0;
    border-radius: 0;
  }
  .site-nav__link:hover { background: none; }
  /* Underline grows from the centre. Cheaper visually than a filled pill and
     it keeps the row height perfectly even.                                 */
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform var(--transition);
  }
  .site-nav__link:hover::after { transform: scaleX(1); }
  .site-nav__link.is-current::after { transform: scaleX(1); }
  .site-nav__link.is-current { box-shadow: none; }

  .site-header__actions {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }
  .site-header__actions .btn { width: auto; }
}

/* ==========================================================================
   7  HERO

   Two forms only:
     .hero--feature   homepage. Editorial split; the photograph runs off the
                      right edge of the viewport rather than sitting in a box.
     .hero--page      every inner page. Type only, generous, no ornament. The
                      page's own photography appears further down where it has
                      something to say.
   ========================================================================== */

.hero { position: relative; }

.hero__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.hero__title { margin-bottom: var(--space-6); }
.hero__lede {
  font-size: var(--font-size-md);
  font-weight: var(--weight-light);
  line-height: var(--line-snug);
  color: var(--color-text);
  max-width: 46ch;
  margin-bottom: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
.hero__actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) {
  .hero__actions { gap: var(--space-4); }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* Qualifying points. Ruled rather than ticked — the tick-in-a-box read as
   a feature list from a software site. */
.hero__points { list-style: none; padding: 0; margin: var(--space-10) 0 0; display: grid; gap: 0; max-width: 42ch; }
.hero__points li {
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  line-height: var(--line-snug);
}
.hero__points li:last-child { border-bottom: 1px solid var(--color-border); }

/* --- Feature hero -------------------------------------------------------- */

.hero--feature { background: var(--color-surface); padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.hero--feature .hero__title { font-size: var(--font-size-display); }
.hero__media picture { display: block; }
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 24%;
  border-radius: var(--radius-image);
}

@media (min-width: 900px) {
  .hero--feature .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(var(--space-12), 6vw, var(--space-24));
    align-items: center;
  }
  /* Runs to the viewport edge. */
  .hero--feature .hero__media {
    margin-right: calc((100vw - min(100vw, var(--container))) / -2 - var(--gutter));
  }
  .hero--feature .hero__media picture { display: block; }
.hero__media img {
    aspect-ratio: 5 / 6;
    border-radius: var(--radius-image) 0 0 var(--radius-image);
  }
}

/* --- Page hero ----------------------------------------------------------- */

.hero--page {
  background: var(--color-surface);
  padding-block: clamp(var(--space-10), 5vw, var(--space-20)) clamp(var(--space-10), 4vw, var(--space-16));
  border-bottom: 1px solid var(--color-border);
}
.hero--page .hero__inner { display: block; }
.hero--page .hero__title { font-size: var(--font-size-3xl); max-width: 18ch; }
.hero--page .hero__lede  { max-width: var(--measure-narrow); }

/* Legacy aliases so existing markup keeps working. */
.hero--compact { background: var(--color-surface); padding-block: clamp(var(--space-10), 5vw, var(--space-20)) clamp(var(--space-10), 4vw, var(--space-16)); border-bottom: 1px solid var(--color-border); }
.hero--compact .hero__inner { display: block; }
.hero--compact .hero__title { font-size: var(--font-size-3xl); max-width: 18ch; }
.hero--compact .hero__lede  { max-width: var(--measure-narrow); }

/* ==========================================================================
   8  CARDS

   Cards were doing every job on the site. They now do one: a small, equal
   group of peers. Ground and border carry them; shadow is reserved for things
   that float above the page.
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition), transform var(--transition);
}
.card:hover { border-color: color-mix(in srgb, var(--color-border-strong) 45%, var(--color-border)); }
.card__icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-size: var(--font-size-md);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-2);
}
.card__title { margin: 0; font-size: var(--font-size-md); font-weight: var(--weight-semibold); }
.card__body  { margin: 0; font-size: var(--font-size-base); color: var(--color-text); max-width: none; }
.card__footer { margin-top: auto; padding-top: var(--space-5); }

.card--compact { padding: var(--space-6); }
.card--flat    { background: none; border: 0; padding: 0; }
.card--brand   { background: var(--color-primary-soft); border-color: transparent; }
.card--link:hover { transform: translateY(-2px); }

/* ==========================================================================
   9  LOCATION BLOCKS

   Two structurally different things, and the markup says so. A storefront
   carries a full address and a map. A service-area practice carries neither
   and cannot: config.php has no address fields for it.

   These were two near-identical white cards. They are now open blocks
   separated by rules, which reads as editorial rather than as a component
   library, and lets the difference between the two show.
   ========================================================================== */

.location { display: grid; gap: var(--space-6); }
.location__body { display: grid; gap: var(--space-4); align-content: start; }
.location__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-strong);
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-heading);
}
.location__name { margin: 0; font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
.location__address { font-style: normal; margin: 0; line-height: var(--line-snug); color: var(--color-text); }
.location__phone {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-strong);
  text-decoration: none;
  justify-self: start;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.location__phone:hover { color: var(--color-primary-hover); border-bottom-color: currentColor; }
.location__meta { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.location__map { border-radius: var(--radius-image); overflow: hidden; background: var(--color-surface-alt); }
.location__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

@media (min-width: 900px) {
  .location--storefront { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-12); align-items: start; }
}

.location--service-area { grid-template-columns: 1fr; }
.location__areas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.location__areas li {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}
.location__note {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  max-width: none;
}

/* ==========================================================================
   10  PRACTITIONER BIO
   ========================================================================== */

.bio { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .bio { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-16); align-items: start; } }
.bio__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-image);
}
.bio__name { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
.bio__credential {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}
.bio__body { font-weight: var(--weight-regular); }
.bio__quote {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: var(--line-heading);
  color: var(--color-heading);
}
.bio__quote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-style: normal;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.bio__specialties { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bio__specialties li {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}

/* ==========================================================================
   11  PRICING
   Three peers in a row of ruled columns. The featured one is marked by ground
   and weight, not by a coloured outline.
   ========================================================================== */

.pricing { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .pricing--3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; } }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
@media (min-width: 900px) {
  .pricing--3 .price-card { border-radius: 0; border-left-width: 0; }
  .pricing--3 .price-card:first-child { border-left-width: 1px; border-radius: var(--radius-md) 0 0 var(--radius-md); }
  .pricing--3 .price-card:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
}
.price-card--featured {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  z-index: 1;
}
.price-card__flag {
  align-self: start;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-accent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 0;
}
.price-card__name { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-md); font-weight: var(--weight-semibold); }
.price-card__terms {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.price-card__desc { margin: 0; font-size: var(--font-size-base); color: var(--color-text); max-width: none; }
.price-card__action { margin-top: auto; padding-top: var(--space-8); }

/* Aside / callout. Used sitewide, so it has to be quiet. */
.price-note {
  margin: var(--space-10) 0 0;
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  background: none;
  border-left: 2px solid var(--color-primary);
  border-radius: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-snug);
  color: var(--color-text);
  max-width: var(--measure);
}
.section--alt .price-note { background: none; }

/* ==========================================================================
   12  FAQ
   ========================================================================== */

.faq { display: grid; gap: 0; max-width: var(--measure); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item:first-child { border-top: 1px solid var(--color-border); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}
.faq__question:hover { color: var(--color-primary-strong); }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-light);
  color: var(--color-primary);
  line-height: 1;
}
.faq__item[open] .faq__question::after { content: "\2212"; }
.faq__item[open] .faq__question { color: var(--color-primary-strong); }
.faq__answer { padding: 0 0 var(--space-6); font-size: var(--font-size-base); color: var(--color-text); }
.faq__answer p { max-width: var(--measure); }

/* ==========================================================================
   13  FORMS
   ========================================================================== */

.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--space-2); }
.field__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-heading);
}
.field__required { color: var(--color-error); }
.field__control {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-heading);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field__control::placeholder { color: var(--color-text-muted); }
.field__control:focus {
  outline: none;
  border-color: var(--color-primary-strong);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field__help { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }
.field__error { font-size: var(--font-size-sm); color: var(--color-error); font-weight: var(--weight-bold); margin: 0; }
.field--invalid .field__control { border-color: var(--color-error); background: var(--color-error-soft); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); }
.field--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary-strong); }
.field--check label { font-family: var(--font-body); font-size: var(--font-size-base); text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); color: var(--color-text); }
.form__note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   14  CTA BAND
   Closes every page. Dark ground, one panel, no ornament.
   ========================================================================== */

.cta-band { background: var(--color-surface-dark); color: var(--color-text-inverse); padding-block: var(--section-y); }
.cta-band__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
.cta-band__title {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  max-width: 16ch;
}
.cta-band__body { color: rgba(255,255,255,0.82); font-weight: var(--weight-light); max-width: 44ch; }
.cta-band__panel {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-8);
}
.cta-band__panel .field__label { color: var(--color-heading); }

.cta-phones { display: grid; gap: 0; }
.cta-phone { display: block; text-decoration: none; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.cta-phone:first-child { border-top: 1px solid var(--color-border); }
.cta-phone__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.cta-phone__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-strong);
  line-height: 1.1;
}
.cta-phone:hover .cta-phone__number { color: var(--color-primary-hover); }
.cta-phone__meta { display: block; margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }

.cta-scheduler { min-height: 420px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-alt); }
.cta-scheduler iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.cta-scheduler__fallback { padding: var(--space-8); text-align: center; }

@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0,1fr) minmax(0,0.95fr); gap: clamp(var(--space-12), 6vw, var(--space-24)); }
  .cta-band__title { font-size: var(--font-size-3xl); }
}

/* ==========================================================================
   15  BLOG
   ========================================================================== */

.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.post-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card__title { margin: 0; font-size: var(--font-size-md); font-weight: var(--weight-semibold); }
.post-card__title a { color: var(--color-heading); text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary-strong); }
.post-card__excerpt { margin: 0; font-size: var(--font-size-sm); font-weight: var(--weight-light); }
.post-card__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Post body typography — long-form reading measure. */
.post-body { max-width: var(--container-narrow); font-size: var(--font-size-md); }
.post-body > * + * { margin-top: var(--space-5); }
.post-body h2 { margin-top: var(--space-10); font-size: var(--font-size-xl); }
.post-body h3 { margin-top: var(--space-8); font-size: var(--font-size-lg); }
.post-body ul, .post-body ol { padding-left: var(--space-6); }
.post-body li + li { margin-top: var(--space-2); }
.post-body img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.post-body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--font-size-md);
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-block: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.post-byline__reviewed { color: var(--color-text-muted); }

/* ==========================================================================
   16  FOOTER
   ========================================================================== */

.site-footer {
  /* Warm neutral rather than the same grey as every alt section. */
  background: var(--color-surface-sand);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--font-size-sm);
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-10);
}
.site-footer__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.site-footer__brand img { width: 170px; }
.site-footer__tagline { font-weight: var(--weight-light); margin: var(--space-4) 0 var(--space-2); }
.site-footer__credential { color: var(--color-text-muted); margin: 0; }
.site-footer__address { font-style: normal; line-height: var(--line-snug); margin: 0 0 var(--space-3); }
.site-footer__phone { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); }
.site-footer__meta { color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}
.site-footer__social { display: flex; gap: var(--space-4); }
.site-footer__copyright { font-size: var(--font-size-xs); margin: var(--space-4) 0 0; }

@media (min-width: 768px)  { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .site-footer__inner { grid-template-columns: repeat(5, 1fr); } }

/* ==========================================================================
   17  UTILITIES AND STATES
   ========================================================================== */

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

.stack     { display: grid; gap: var(--space-4); }
.stack--lg { gap: var(--space-8); }
.cluster   { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.center    { text-align: center; }
.measure   { max-width: 65ch; }

/* Build-time contract violation banner. Rendered by header.php. */
.contract-error {
  background: var(--color-error-soft);
  border-left: 4px solid var(--color-error);
  color: var(--color-error);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}
.contract-error ul { margin: var(--space-3) 0; }
.contract-error p  { color: var(--color-text); margin: 0; }

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

@media print {
  .site-header, .site-footer, .cta-band, .skip-link { display: none; }
  body { font-size: 12pt; color: var(--color-ink); }
  a::after { content: " (" attr(href) ")"; font-size: 10pt; }
}