/* ==========================================================================
   Jenny Richmond Studio — "Warm Clay" design system
   Mobile-first, layered up to ultrawide (2560). British English.
   Class names follow the shared build spec exactly.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --off-white: #F8F5F0;
  --sand: #EBDFD2;
  --charcoal: #3E3A34;
  --terracotta: #C08560;
  --sage: #8E9484;

  /* Derived palette */
  --terracotta-deep: #9C5B38;
  --terracotta-light: #E4A87F; /* AA-legible link/accent on charcoal */
  --sand-deep: #DECDBB;
  --charcoal-soft: #5A554C;
  --sage-deep: #6E766A;
  --cream-card: #FDFBF7;

  /* Semantic roles */
  --color-bg: var(--off-white);
  --color-text: var(--charcoal);
  --color-text-soft: var(--charcoal-soft);
  --color-primary: var(--terracotta-deep);
  --color-primary-hover: var(--terracotta);
  --color-accent: var(--sage);
  --color-link: var(--terracotta-deep);

  /* Typography */
  --font-display: "Gluten", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ceilings are set so type keeps scaling to ~2200-2560px rather than
     stalling at ~1430px and leaving ultrawide screens looking undersized. */
  /* Eased off the original 3.6vw/6.5rem: Gluten sets much wider than the
     Fraunces this replaced, and the old curve pushed long headings to five
     lines with an orphaned last word. */
  --fs-h1: clamp(2.3rem, 1.4rem + 2.6vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.3vw, 4.25rem);
  --fs-h3: clamp(1.35rem, 1.02rem + 1.15vw, 2.4rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.5vw, 1.6rem);
  --fs-body: clamp(1rem, 0.95rem + 0.22vw, 1.3rem);
  --fs-lead: clamp(1.15rem, 1.02rem + 0.55vw, 1.75rem);
  --fs-small: clamp(0.85rem, 0.8rem + 0.12vw, 1.05rem);

  --lh-body: 1.65;
  --lh-heading: 1.12;
  --measure: 66ch;

  /* Spacing & layout */
  --space-section: clamp(4rem, 2.8rem + 6.2vw, 13rem);
  --gap: clamp(1.5rem, 0.9rem + 2.1vw, 4.5rem);
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;

  /* Containers grow with the viewport instead of stranding content in a fixed
     1200px island with huge dead gutters on ultrawide displays. */
  --container: clamp(1200px, 80vw, 1920px);
  --container-narrow: clamp(820px, 46vw, 1060px);
  --container-wide: clamp(1440px, 88vw, 2200px);
  --container-pad: clamp(1.25rem, 4vw, 5rem);

  /* Shape */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation & lines */
  --hairline-color: rgba(62, 58, 52, 0.14);
  --hairline: 1px solid var(--hairline-color);
  --shadow-sm: 0 1px 2px rgba(62, 58, 52, 0.06), 0 1px 1px rgba(62, 58, 52, 0.04);
  --shadow: 0 10px 28px rgba(62, 58, 52, 0.08);
  --shadow-lg: 0 20px 50px rgba(62, 58, 52, 0.14);

  /* Motion */
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--off-white), 0 0 0 4px var(--sage-deep);
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; 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(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

svg { fill: currentColor; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; font-weight: 400; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); font-weight: 500; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition);
}
a:hover { color: var(--terracotta); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

strong, b { font-weight: 600; }
em, i { font-style: italic; }

blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--terracotta-deep);
  font-family: var(--font-display);
  /* Gluten ships no true italic, and a synthesised oblique smears its rounded
     terminals badly. The terracotta rule carries the emphasis instead. */
  font-style: normal;
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-lg) 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

::selection { background: var(--terracotta); color: var(--off-white); }

/* ---------------------------------------------------------------------------
   3. SKIP LINK
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 1000;
  background: var(--charcoal);
  color: var(--off-white);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75rem;
  color: var(--off-white);
}

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

/* Wide + ultrawide: the containers above already scale with the viewport, so the
   side padding stays modest. Cap tall media slots so a wider column doesn't
   balloon a 4/5 portrait to well over 1000px tall. */
@media (min-width: 90em) {
  .hero__media,
  .split__media { max-width: 700px; }
  .hero__media { justify-self: end; width: 100%; }
  .split__media { margin-inline: auto; }
}

/* ---------------------------------------------------------------------------
   5. UTILITIES
   --------------------------------------------------------------------------- */
.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 0.75rem; left: 0.75rem;
  width: auto; height: auto;
  padding: 0.75em 1.25em;
  background: var(--charcoal);
  color: var(--off-white);
  border-radius: var(--radius-sm);
  clip: auto;
  z-index: 1000;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   6. EYEBROW
   --------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta-deep);
  margin: 0 0 0.9rem;
}
.section--sand .eyebrow { color: var(--sage-deep); }
.section--charcoal .eyebrow { color: var(--terracotta); }

/* ---------------------------------------------------------------------------
   7. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  background-color: var(--terracotta-deep);
  color: var(--off-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background-color: var(--terracotta);
  color: var(--charcoal);
  box-shadow: var(--shadow);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn--ghost:hover {
  background-color: var(--charcoal);
  color: var(--off-white);
}

.btn--light {
  background-color: var(--off-white);
  color: var(--charcoal);
  box-shadow: var(--shadow-sm);
}
.btn--light:hover {
  background-color: var(--sand);
  color: var(--charcoal);
  box-shadow: var(--shadow);
}

.btn--block { display: flex; width: 100%; }
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* Button rows — canonical .btn-row plus legacy wrapper aliases (identical behaviour) */
.btn-row,
.hero__actions,
.split__actions,
.actions,
.hero__cta,
.section-cta,
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Button rows were leaning on the preceding paragraph's 1.1em bottom margin
   alone (~18px), while .hero__trust below them already had 1.75rem — so the
   buttons sat visibly closer to the copy above than to the line beneath. This
   collapses with the paragraph margin rather than stacking on it, so the gap is
   exactly the value below. .card__meta is excluded: it belongs to a card
   footer, not a copy block. */
.btn-row,
.hero__actions,
.split__actions,
.actions,
.hero__cta,
.section-cta {
  margin-top: clamp(1.75rem, 1.3rem + 1vw, 2.75rem);
}

/* No leading gap when the row opens a block rather than following copy. */
.btn-row:first-child,
.hero__actions:first-child,
.split__actions:first-child,
.actions:first-child,
.hero__cta:first-child,
.section-cta:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   8. SECTIONS & SECTION HEAD
   --------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
  position: relative;
}
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.section--sand { background-color: var(--sand); }
.section--sand-deep { background-color: var(--sand-deep); }
.section--cream { background-color: var(--cream-card); }
.section--charcoal {
  background-color: var(--charcoal);
  color: var(--off-white);
}
.section--charcoal h1,
.section--charcoal h2,
.section--charcoal h3,
.section--charcoal h4 { color: var(--off-white); }
.section--charcoal p { color: var(--sand); }
/* Body links only. Buttons and card CTAs carry their own colour, and this
   rule's (0,1,1) specificity was beating .btn--light (0,1,0) — leaving the
   "Explore 1:1 Pilates" button with terracotta-light text on an off-white fill
   (~1.9:1 contrast) plus a stray underline, so it read as unstyled. */
.section--charcoal a:not(.btn):not(.card__link) {
  color: var(--terracotta-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.section--charcoal a:not(.btn):not(.card__link):hover { color: var(--off-white); }

.section-head {
  max-width: 52ch;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.section-head .lead { margin-bottom: 0; }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lead { margin-inline: auto; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-soft);
  max-width: var(--measure);
}
.section--charcoal .lead { color: var(--sand); }

/* ---------------------------------------------------------------------------
   9. HERO (home)
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero__copy h1 { margin-bottom: 0.5em; }
.hero .lead { margin-bottom: 1.75rem; }
.hero__media { position: relative; z-index: 1; }

.hero__trust {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.hero__trust-item svg { width: 1em; height: 1em; color: var(--terracotta-deep); }
.hero__trust-item + .hero__trust-item::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sage);
  margin-right: 0.85rem;
  margin-left: -0.4rem;
}

/* soft organic shape behind the media */
.hero__shape {
  position: absolute;
  inset: auto -8% -12% auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 40%, var(--sand) 0%, var(--sand-deep) 70%);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  filter: blur(2px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

/* ---------------------------------------------------------------------------
   10. INTERIOR PAGE HERO
   --------------------------------------------------------------------------- */
.page-hero {
  background-color: var(--sand);
  padding-block: clamp(3rem, 2.5rem + 4vw, 6rem);
}
.page-hero--plain { background-color: transparent; }
.page-hero__inner { max-width: 60ch; }
.page-hero h1 { margin-bottom: 0.35em; }
.page-hero .lead { margin-bottom: 0; }
.page-hero .eyebrow { color: var(--sage-deep); }

.breadcrumb {
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.breadcrumb a { color: var(--terracotta-deep); }
.breadcrumb__sep { color: var(--sage-deep); }

/* ---------------------------------------------------------------------------
   11. SPLIT (media + text)
   --------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.split + .split { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 64em) {
  .split { grid-template-columns: 1fr 1fr; }
  /* Column order depends ONLY on .split--reverse, never on DOM order, so a
     template may list media or text first without shifting the visual layout.
     Default: text left, media right. Reverse: media left, text right. */
  .split__body,
  .split__content,
  .split__text { order: 1; }
  .split__media { order: 2; }
  .split--reverse .split__media { order: 1; }
  .split--reverse .split__body,
  .split--reverse .split__content,
  .split--reverse .split__text { order: 2; }
}
.split__body h2,
.split__content h2,
.split__text h2 { margin-bottom: 0.5em; }

/* ---------------------------------------------------------------------------
   12. CARDS
   --------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
}
/* Strict two-up. auto-fit was letting the four service cards spread onto one
   row on wide screens (and 3+1 on a 1080p desktop, orphaning the fourth), so
   the column count is pinned rather than derived from available width. */
.cards--2 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 48em) {
  .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--cream-card);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--sand-deep);
}
.card__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--terracotta-deep);
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--color-text-soft); margin-bottom: 1em; }
.card p:last-child { margin-bottom: 0; }
/* Card CTA — an outline pill in the same language as .btn, just a size down.
   As a bare text link it read as unstyled next to the solid .btn--primary that
   follows the card grid. */
.card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.35em;
  border: 1.5px solid var(--terracotta-deep);
  border-radius: var(--radius-pill);
  background-color: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
  text-decoration: none;
  color: var(--terracotta-deep);
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.card__link:hover {
  background-color: var(--terracotta-deep);
  color: var(--off-white);
  transform: translateY(-2px);
}
.card__link:active { transform: translateY(0); }
.card__link::after {
  content: "\2192";
  transition: transform var(--transition);
}
.card__link:hover::after { transform: translateX(3px); }

/* Whole-card link (service pillar cards) */
.card--service { position: relative; }
.card--service:focus-within { border-color: var(--terracotta); }
.card--service .card__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.section--charcoal .card {
  background: rgba(248, 245, 240, 0.05);
  border-color: rgba(248, 245, 240, 0.14);
  color: var(--off-white);
}
.section--charcoal .card h3 { color: var(--off-white); }
.section--charcoal .card p { color: var(--sand); }

/* ---------------------------------------------------------------------------
   13. CHECKLIST
   --------------------------------------------------------------------------- */
.checklist {
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin: 0;
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-color: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C5B38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85rem;
}
.section--charcoal .checklist li::before {
  background-color: rgba(248, 245, 240, 0.12);
}

/* ---------------------------------------------------------------------------
   14. TRUST BAR
   --------------------------------------------------------------------------- */
/* Self-contained legible band. Works for every current markup:
   (a) <ul class="trustbar"><li class="trustbar__item"> inside a .container
   (b) same, on the pilates page
   (c) <section class="trustbar section--charcoal"><ul class="trustbar__list">
   (d) <div class="trustbar"><div class="trustbar__item"> (about, no .container)
   The .trustbar is always the charcoal panel; the item row is whichever of
   .trustbar / .trustbar__inner / .trustbar__list actually holds the items. */
/* Self-contained full-bleed charcoal band. Rendered only via
   template-parts/trustbar.php — never wrap it in a .section--charcoal. */
.trustbar {
  background-color: var(--charcoal);
  color: var(--off-white);
  padding-block: clamp(2.75rem, 2rem + 2.6vw, 5rem);
}
.trustbar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Pinned column count rather than auto-fit: the stat ("BSc (Hons)") is
     white-space: nowrap and needs ~225px in Gluten, and auto-fit gave it ~144px.
     Now three credentials (the rating/APPI/award tiles were removed), so it is
     1-up on mobile — 2-up would leave a lone orphan — and 3-up on desktop. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.25rem + 2vw, 3.25rem) clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
  align-items: start;
}

@media (min-width: 48em) {
  .trustbar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.trustbar__item {
  position: relative;
  margin: 0;
  padding-top: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}
/* Short terracotta rule above each stat — gives the bar a repeated rhythm
   without needing divider maths that breaks when the grid wraps. */
.trustbar__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--terracotta);
}
.trustbar__stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--off-white);
  white-space: nowrap;
}
.trustbar__label {
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.64rem + 0.12vw, 0.82rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.45;
  color: var(--sand);
  opacity: 0.82;
  max-width: 20ch;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   15. TESTIMONIALS
   --------------------------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--gap);
}
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--cream-card);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.testimonial__stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--terracotta-deep);
  margin-bottom: 0.9rem;
}
.testimonial__stars svg { width: 1.05rem; height: 1.05rem; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 1.25rem;
  max-width: none;
}
.testimonial__quote::before { content: "\201C"; }
.testimonial__quote::after { content: "\201D"; }
.testimonial__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonial__name {
  font-weight: 600;
  color: var(--charcoal);
}
.testimonial__source {
  font-size: var(--fs-small);
  color: var(--sage-deep);
}
.testimonial--sample {
  border-style: dashed;
  border-color: var(--sage);
  background: var(--sand);
}
.testimonial--sample .testimonial__quote { font-style: italic; color: var(--charcoal-soft); }

.section--charcoal .testimonial {
  background: rgba(248, 245, 240, 0.05);
  border-color: rgba(248, 245, 240, 0.14);
}
.section--charcoal .testimonial__quote { color: var(--off-white); }
.section--charcoal .testimonial__name { color: var(--off-white); }
.section--charcoal .testimonial__source { color: var(--sand); }

/* ---------------------------------------------------------------------------
   16. STEPS ("How it works")
   --------------------------------------------------------------------------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.steps__item {
  position: relative;
  padding-top: 3.5rem;
  margin: 0;
}
.steps__item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--terracotta-deep);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
}
.steps__item h3 { font-size: var(--fs-h4); margin-bottom: 0.3em; }
.steps__item p { color: var(--color-text-soft); margin: 0; }
.section--charcoal .steps__item::before { background: var(--terracotta); color: var(--charcoal); }
.section--charcoal .steps__item p { color: var(--sand); }

/* Legacy home "How it works" markup: <li class="step"> with explicit .step__num */
.step {
  position: relative;
  margin: 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.step__num {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--terracotta-deep);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
}
.step__content { flex: 1 1 auto; }
.step__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--charcoal);
  margin-bottom: 0.3em;
}
.step__desc { color: var(--color-text-soft); margin: 0; }
.section--charcoal .step__num { background: var(--terracotta); color: var(--charcoal); }
.section--charcoal .step__title { color: var(--off-white); }
.section--charcoal .step__desc { color: var(--sand); }

/* ---------------------------------------------------------------------------
   17. ACCORDION (native details/summary; JS enhances)
   --------------------------------------------------------------------------- */
.accordion {
  max-width: 52rem;
  border-top: var(--hairline);
}
.accordion__item {
  border-bottom: var(--hairline);
}
.accordion__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--charcoal);
  transition: color var(--transition);
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary::marker { content: ""; }
/* +/- affordance drawn purely in CSS; does not depend on a markup icon span */
.accordion__item > summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--terracotta-deep);
  transition: transform var(--transition);
}
.accordion__item[open] > summary::after { content: "\2212"; } /* minus sign */
.accordion__item > summary:hover { color: var(--terracotta-deep); }
.accordion__item > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 8px; }
.accordion__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  transition: transform var(--transition);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--terracotta-deep);
  border-radius: 2px;
}
.accordion__icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.accordion__icon::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); transition: opacity var(--transition); }
.accordion__item[open] .accordion__icon::after { opacity: 0; }
.accordion__panel {
  padding: 0 0.25rem 1.5rem;
  color: var(--color-text-soft);
}
.accordion__panel > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   18. CTA BAND
   --------------------------------------------------------------------------- */
.cta-band {
  background-color: var(--terracotta-deep);
  color: var(--off-white);
  text-align: center;
}
.cta-band--charcoal { background-color: var(--charcoal); }
.cta-band__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.cta-band h2 { color: var(--off-white); margin-bottom: 0.4em; }
.cta-band p {
  color: var(--off-white);
  opacity: 0.92;
  font-size: var(--fs-lead);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}
.cta-band .eyebrow { color: var(--sand); }
.cta-band .btn-row { justify-content: center; }

/* ---------------------------------------------------------------------------
   19. IMAGE SLOT
   --------------------------------------------------------------------------- */
.img-slot {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--sand);
}
.img-slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Map embeds reuse the .img-slot frame for its radius, ratio and clipping —
   the img selector above doesn't reach an iframe, so it needs its own fill. */
.img-slot > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.img-slot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background-color: var(--sand);
  border: 2px dashed var(--sage);
  color: var(--sage-deep);
}
.img-slot__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  max-width: 24ch;
}
.img-slot__label svg { width: 2rem; height: 2rem; color: var(--sage); }
.img-slot__ratio {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  opacity: 0.8;
}
.img-slot--round { border-radius: 50%; }
.img-slot--soft { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }

/* ---------------------------------------------------------------------------
   20. PILLS
   --------------------------------------------------------------------------- */
.pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1em;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background-color: var(--sand);
  color: var(--charcoal);
  border-radius: var(--radius-pill);
  padding: 0.4em 0.95em;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}
.pill--outline {
  background: transparent;
  border: 1px solid var(--sand-deep);
}
.section--charcoal .pill {
  background: rgba(248, 245, 240, 0.1);
  color: var(--off-white);
}

/* ---------------------------------------------------------------------------
   21. PROSE (long-form the_content)
   --------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
}
.prose > * { max-width: 100%; }
.prose h2 { font-size: var(--fs-h2); margin-top: 1.6em; margin-bottom: 0.5em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.4em; margin-bottom: 0.4em; }
.prose h4 { font-size: var(--fs-h4); margin-top: 1.2em; margin-bottom: 0.4em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.15em; }
.prose ul, .prose ol { margin-bottom: 1.15em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--terracotta-deep); text-decoration: underline; }
.prose a:hover { color: var(--terracotta); }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose blockquote { margin-inline: 0; }
.prose figure { margin: 1.5em 0; }
.prose figcaption {
  font-size: var(--fs-small);
  color: var(--sage-deep);
  margin-top: 0.5em;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--sand);
  padding: 0.15em 0.4em;
  border-radius: 6px;
  font-size: 0.9em;
}
.prose pre {
  background: var(--charcoal);
  color: var(--off-white);
  padding: 1.25em;
  border-radius: var(--radius);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.65em 0.85em;
  border-bottom: var(--hairline);
}
.prose th { font-family: var(--font-display); font-weight: 500; }

/* ---------------------------------------------------------------------------
   22. TOP BAR (contact strip; sits above the sticky header and scrolls away)
   --------------------------------------------------------------------------- */
.topbar {
  background-color: var(--charcoal);
  color: var(--sand);
  font-size: clamp(0.78rem, 0.75rem + 0.12vw, 0.9rem);
  line-height: 1.4;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.75rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
.topbar__tagline {
  margin: 0;
  max-width: none;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78em;
  color: var(--sand);
  opacity: 0.72;
}
.topbar__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__item { margin: 0; }
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--off-white);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
}
.topbar__link:hover,
.topbar__link:focus-visible { color: var(--terracotta-light); }
.topbar__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--terracotta-light);
}

/* Below the header breakpoint the tagline is dead weight — drop it and centre
   the contact details so the bar stays a single tidy line on a phone. */
@media (max-width: 47.99em) {
  .topbar__tagline { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__contact { gap: 0.35rem 1.25rem; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   23. SITE HEADER
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(248, 245, 240, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--hairline-color);
  box-shadow: 0 6px 20px rgba(62, 58, 52, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo a,
.site-header__logo .custom-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo img,
.site-header__logo .custom-logo {
  height: clamp(46px, 4vw, 64px);
  width: auto;
}
.site-header__logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.site-header__logo-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
}

/* Header CTA — desktop only */
.header-cta { display: none; }

/* Nav toggle (hamburger) — mobile only */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex: none;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Primary nav — mobile slide-in panel */
.primary-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(84vw, 340px);
  background: var(--off-white);
  box-shadow: var(--shadow-lg);
  /* Top padding is modest now the drawer carries its own logo — it no longer
     needs to clear the header behind it. */
  padding: 1.5rem clamp(1.5rem, 5vw, 2.5rem) 2rem;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  visibility: hidden;
  z-index: 105;
}
.primary-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}
.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.primary-nav li { margin: 0; }

/* Menu links only. At (0,1,1) this rule outranks .btn (0,1,0), so without the
   exclusion it stripped the drawer buttons of their flex centring and their
   1.6em side padding — text ended up jammed against the pill's left edge. */
.primary-nav a:not(.btn) {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: var(--hairline);
}
.primary-nav a:not(.btn):hover,
.primary-nav .current-menu-item > a:not(.btn),
.primary-nav [aria-current="page"]:not(.btn) { color: var(--terracotta-deep); }

/* Drawer masthead — the site logo sits behind the open panel, so the drawer
   carries its own. */
.primary-nav__brand {
  display: flex;
  align-items: center;
  padding-bottom: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: var(--hairline);
}
.primary-nav__brand a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  text-decoration: none;
}
.primary-nav__brand img {
  height: clamp(58px, 16vw, 76px);
  width: auto;
}

.primary-nav__cta {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.65rem;
}
.primary-nav__cta .btn { width: 100%; }

/* Tap-to-call / tap-to-email inside the drawer. The top bar has usually been
   scrolled past by the time this is opened. */
/* Needs .primary-nav in front: bare .primary-nav__contact (0,1,0) loses to
   .primary-nav ul (0,1,1), which zeroed the margin and left this flush against
   the buttons. */
.primary-nav .primary-nav__contact {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: var(--hairline);
  display: grid;
  gap: 0.85rem;
}
.primary-nav__contact li { margin: 0; }
.primary-nav__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  border-bottom: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.primary-nav__contact a:hover { color: var(--terracotta-deep); }
.primary-nav__contact svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--terracotta-deep);
}

/* backdrop shown when nav open */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(62, 58, 52, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  z-index: 104;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

body.nav-open { overflow: hidden; }

/* The drawer lives inside .site-header for the desktop flex row, but the header
   carries backdrop-filter — and like transform and filter, that makes an element
   a containing block for position:fixed descendants. The drawer was therefore
   sizing against the 71px header box (rendering ~48x104px) instead of the
   viewport, so it never covered the screen. Dropping the filter while the nav is
   open restores the viewport as the containing block; the header sits behind the
   dark backdrop at that moment, so the blur is not missed. */
body.nav-open .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* .site-header is sticky with z-index 100, so it forms a stacking context and
     the drawer's z-index 105 only ranks inside it — leaving the whole header,
     drawer included, beneath the body-level .nav-backdrop at 104. That dimmed the
     menu and, worse, made the backdrop swallow taps on the links. Lifting the
     header above the backdrop while open fixes both, and keeps the close button
     reachable. */
  z-index: 106;
}

/* Desktop nav */
@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }
  /* Drawer-only furniture: the real header already shows the logo, and the
     contact details live in the top bar.

     MUST stay scoped to .primary-nav (0,2,0). The drawer's show rule is
     `.primary-nav .primary-nav__contact` — a bare `.primary-nav__contact`
     here is only (0,1,0) and loses, because a media query adds no
     specificity. That regression left a 239px three-row header on every
     desktop view. Keep both selectors at the same weight. */
  .primary-nav .primary-nav__brand,
  .primary-nav .primary-nav__contact { display: none; }
  .primary-nav {
    position: static;
    width: auto;
    background: none;
    box-shadow: none;
    padding: 0;
    transform: none;
    visibility: visible;
    overflow: visible;
    margin-left: auto;
  }
  .primary-nav ul {
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  }
  /* Same .btn exclusion as the mobile rule — keeps the underline sweep off any
     button that ends up in the desktop bar. */
  .primary-nav a:not(.btn) {
    padding: 0.4rem 0;
    font-size: 1rem;
    border-bottom: none;
    position: relative;
  }
  .primary-nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--terracotta-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }
  .primary-nav a:not(.btn):hover::after,
  .primary-nav .current-menu-item > a:not(.btn)::after,
  .primary-nav [aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
  .primary-nav__cta { display: none; }
  .header-cta { display: inline-flex; flex: none; }
}

/* ---------------------------------------------------------------------------
   24. SITE FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--charcoal);
  color: var(--off-white);
  padding-top: clamp(3rem, 2.5rem + 3vw, 5rem);
}
.site-footer a { color: var(--sand); text-decoration: none; }
.site-footer a:hover { color: var(--off-white); text-decoration: underline; }
.site-footer__cols {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  grid-template-columns: 1fr;
}
.site-footer__col h2,
.site-footer__col h3 {
  color: var(--off-white);
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.site-footer__brand-logo img { height: clamp(52px, 5vw, 68px); width: auto; margin-bottom: 1rem; }
.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--off-white);
  margin-bottom: 0.5rem;
}
.site-footer__tagline { color: var(--sand); font-size: 0.95rem; max-width: 32ch; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer__col li { margin: 0; }
.site-footer address {
  font-style: normal;
  color: var(--sand);
  line-height: 1.7;
}
.site-footer address strong { color: var(--off-white); }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(248, 245, 240, 0.25);
  color: var(--off-white);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.footer-social a:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  color: var(--off-white);
}
.footer-social svg { width: 1.25rem; height: 1.25rem; }

.site-footer__bar {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid rgba(248, 245, 240, 0.15);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--sand);
}
.site-footer__bar p { margin: 0; max-width: none; }

/* Agency credit — quieter than the studio's own details, and the link needs an
   underline because .site-footer a strips it site-wide. */
.site-footer__credit { opacity: 0.72; }
.site-footer__credit a {
  color: var(--sand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.site-footer__credit a:hover { color: var(--off-white); }

@media (min-width: 40em) {
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .site-footer__cols { grid-template-columns: 1.4fr 1fr 1.3fr 1fr; }
}

/* ---------------------------------------------------------------------------
   25. CONTACT FORM (used by page-contact template)
   --------------------------------------------------------------------------- */
.jr-form {
  display: grid;
  gap: 1.15rem;
}
.jr-form__row {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 40em) {
  .jr-form__row--2 { grid-template-columns: 1fr 1fr; }
}
.jr-field { display: flex; flex-direction: column; gap: 0.4rem; }
.jr-field label { font-weight: 600; font-size: 0.95rem; color: var(--charcoal); }
.jr-field .req { color: var(--terracotta-deep); }
.jr-field input,
.jr-field textarea,
.jr-field select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--cream-card);
  border: 1.5px solid var(--sand-deep);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.jr-field textarea { min-height: 9rem; resize: vertical; }
.jr-field input:focus-visible,
.jr-field textarea:focus-visible,
.jr-field select:focus-visible {
  border-color: var(--terracotta-deep);
  box-shadow: 0 0 0 3px rgba(156, 91, 56, 0.15);
}
/* honeypot — visually hidden but not display:none (bots skip display:none) */
.jr-field--hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.jr-form__notice {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.jr-form__notice--ok {
  background: var(--sand);
  border-left: 4px solid var(--sage-deep);
  color: var(--charcoal);
}
.jr-form__notice--err {
  background: #F6E3D9;
  border-left: 4px solid var(--terracotta-deep);
  color: var(--charcoal);
}

/* ---------------------------------------------------------------------------
   26. PAGINATION / POSTS
   --------------------------------------------------------------------------- */
.post-card__meta {
  font-size: var(--fs-small);
  color: var(--sage-deep);
  margin-bottom: 0.5rem;
}
.post-card__thumb { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; margin: calc(-1 * clamp(1.5rem, 1.25rem + 1vw, 2.25rem)); margin-bottom: 1.25rem; }
.post-card__thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.pagination {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: var(--hairline);
  text-decoration: none;
  color: var(--charcoal);
  font-weight: 600;
}
.pagination .page-numbers:hover { background: var(--sand); }
.pagination .page-numbers.current {
  background: var(--terracotta-deep);
  color: var(--off-white);
  border-color: var(--terracotta-deep);
}

/* single post meta */
.entry-meta {
  font-size: var(--fs-small);
  color: var(--sage-deep);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.entry-tags { margin-top: 2rem; }

/* 404 */
.error-404 { text-align: center; }
.error-404 .error-404__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  line-height: 1;
  color: var(--terracotta-deep);
  margin-bottom: 0.25em;
}

/* ---------------------------------------------------------------------------
   27. MOTION — scroll reveal
   --------------------------------------------------------------------------- */
/* Hidden state is gated behind html.js so no-JS visitors see all content
   (including the H1) — the "js" class is set on <html> in header.php. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* staggering helper */
html.js [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
html.js [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
html.js [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
html.js [data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   28. DISPLAY TYPE — Gluten
   Gluten is very round and very open, so the settings this theme carried for
   Fraunces left it looking loose and soft. Heavier weight plus tighter tracking
   and leading is what makes it read as confident rather than bubbly.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.03em;
}

h1 {
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 { line-height: 1.06; }

h1, h2 { text-wrap: balance; }

.step__title,
.accordion__item > summary,
.site-header__logo-text,
.site-footer__brand-name,
.trustbar__stat,
.error-404__code {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Quotes stay lighter — a rounded 600 in a testimonial card shouts over the
   copy around it. */
.testimonial__quote {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The stock hero grid gives the image the larger column (1.1fr vs 1fr), which
   left the headline in 486px and wrapping badly in a wide face. The headline is
   the thing being sold, so it takes the bigger share. */
@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   29. TESTIMONIAL CONVEYOR
   Continuously scrolling review belt. CSS-only — no carousel library.
   --------------------------------------------------------------------------- */
.conveyor {
  position: relative;
  overflow: hidden;
  /* Full-bleed out of the container so the belt runs edge to edge. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 0.5rem;
  /* Fade the belt into the page at both ends rather than cutting hard. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.conveyor__track {
  display: flex;
  width: max-content;
  animation: conveyor-scroll var(--conveyor-duration, 60s) linear infinite;
}

.conveyor__set {
  display: flex;
  gap: var(--gap);
  padding-right: var(--gap);
}

.conveyor__item {
  flex: none;
  width: clamp(17rem, 24vw, 24rem);
}

/* Let people actually finish reading a review. */
.conveyor:hover .conveyor__track,
.conveyor:focus-within .conveyor__track { animation-play-state: paused; }

/* Translating by one set width lands exactly on the duplicate behind it, so the
   restart is invisible. */
@keyframes conveyor-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--conveyor-sets, 2))); }
}

/* No motion: fall back to a normal swipeable row. */
@media (prefers-reduced-motion: reduce) {
  .conveyor {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .conveyor__track { animation: none; width: auto; }
  .conveyor__set:not(:first-child) { display: none; }
  .conveyor__item { scroll-snap-align: start; }
}

/* CTA band detail lines — address / contact / hours each on their own line.
   They were a single run-on sentence inside the paragraph, which wrapped into
   an unreadable block on the terracotta band (client request 2026-08-13). */
.cta-band__details {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  opacity: 0.9;
}
.cta-band__details span { display: block; }