.cols-divided {
  display: grid;
  /* 1px gap over a border-coloured ground draws the dividers, so they stay
     correct however the columns wrap -- border-left would mis-draw on row 2. */
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .cols-divided { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .cols-divided { grid-template-columns: repeat(4, 1fr); } }
.cols-divided > * {
  background: var(--surface-card);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

/* ==========================================================================
   The ProActive Massage Clinic — site.css
   Warm stone + deep teal. Single source of truth for the design system.

   Colour rule: the brand teal (#53AFA2) is an ACCENT, never a page ground.
   It appears on rules, icons, badges, overlays and card edges. Body text and
   buttons use --brand-deep (6.6:1 on --surface); the identity teal itself
   only manages 2.62:1 and cannot legally carry text.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Surfaces — plain, warm, barely-there */
  --surface:       #FBFAF8;
  --surface-alt:   #F4F2EE;
  --surface-card:  #FFFFFF;
  --border:        #E4E0D9;
  --border-strong: #D3CEC4;

  /* Brand — teal as accent, not ground */
  --brand:         #53AFA2;  /* identity: fills, rules, overlays, icons     */
  --brand-deep:    #13655C;  /* text, links, buttons — 6.6:1 on --surface   */
  --brand-darkest: #0F3B36;  /* headings, the single full-bleed CTA band    */
  --brand-wash:    #EAF4F2;  /* tinted cards and badges                     */

  /* Ink */
  --ink:           #243330;  /* body — 12.7:1 on --surface                  */
  --ink-muted:     #5C6865;  /* captions, meta — 6.1:1                      */
  --on-dark:       #FBFAF8;
  --on-dark-muted: #BCD4CF;

  /* Type */
  --font-display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter",   -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0:  clamp(1rem,    0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.4rem,  1.25rem + 0.7vw,  1.75rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.4vw,  2.5rem);
  --step-4:  clamp(2.1rem,  1.6rem + 2.4vw,   3.4rem);

  /* Space and shape */
  --header-h:   4.5rem;
  --gutter:     1.25rem;
  --measure:    68ch;
  --section-y:  clamp(3.25rem, 7vw, 5.75rem);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px -12px rgba(19, 101, 92, 0.18);
  --shadow-lift: 0 18px 40px -16px rgba(19, 101, 92, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------- 2. Reset/base */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-darkest); }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-darkest);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p  { text-wrap: pretty; }
p + p, p + ul, p + ol, ul + p, h2 + p, h3 + p, h4 + p { margin-top: 0.9rem; }

strong, b { font-weight: 600; color: var(--brand-darkest); }

blockquote { margin: 0; font-style: normal; }

ul, ol { padding-left: 1.2em; }
li + li { margin-top: 0.35rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

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

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--brand-darkest); color: var(--on-dark);
  padding: 0.7rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--on-dark); }

/* -------------------------------------------------------------- 3. Layout */

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

.section { padding-block: var(--section-y); }
.section--alt  { background: var(--surface-alt); }
.section--wash { background: var(--brand-wash); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1rem; }
.prose h3, .prose h4 { margin-top: 2rem; }

/* Section header: rule + eyebrow + heading + standfirst */

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 0.85rem;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; flex: none;
  background: var(--brand); border-radius: 2px;
}
.section-head--center .eyebrow { justify-content: center; }

.standfirst {
  margin-top: 1rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Grids */

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--media-first > :first-child { order: 2; }
}
/* Needed wherever a column is sticky: centred items are only as tall as their
   content, so position:sticky would have nothing to scroll against. */
.split--top { align-items: start; }

/* -------------------------------------------------------------- 4. Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-deep); color: #fff;
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: var(--brand-darkest); color: #fff; box-shadow: var(--shadow-lift); }

.btn--outline {
  background: transparent; color: var(--brand-deep);
  border-color: var(--border-strong);
}
.btn--outline:hover { background: var(--brand-wash); color: var(--brand-darkest); border-color: var(--brand-deep); }

.btn--ghost { background: transparent; color: var(--brand-deep); padding-inline: 0.25rem; }
.btn--ghost:hover { color: var(--brand-darkest); text-decoration: underline; }
.btn--ghost::after { content: "\2192"; transition: transform 0.18s var(--ease); }
.btn--ghost:hover::after { transform: translateX(3px); }

/* On the dark CTA band */
.btn--on-dark { background: var(--on-dark); color: var(--brand-darkest); }
.btn--on-dark:hover { background: #fff; color: var(--brand-darkest); }
.btn--on-dark-outline { background: transparent; color: var(--on-dark); border-color: rgba(251, 250, 248, 0.45); }
.btn--on-dark-outline:hover { background: rgba(251, 250, 248, 0.12); color: var(--on-dark); border-color: var(--on-dark); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--step--1); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------- 5. Header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: 40px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--brand-darkest);
}
.brand__name span { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-deep); margin-top: 0.15rem; }

.site-nav ul { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: 0.5rem 0.7rem;
  font-size: 0.94rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.site-nav a:hover { background: var(--brand-wash); color: var(--brand-darkest); }
.site-nav a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-tel {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.94rem;
  color: var(--brand-deep); text-decoration: none; white-space: nowrap;
}
.header-tel:hover { color: var(--brand-darkest); text-decoration: underline; }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem; cursor: pointer; color: var(--brand-darkest);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

@media (max-width: 68rem) {
  .nav-toggle { display: inline-flex; order: 3; }
  .header-tel { display: none; }
  .site-nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    display: none;
    padding: 0.75rem var(--gutter) 1.25rem;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .site-nav .nav-tel { display: block; }
  .header-actions .btn { padding: 0.6rem 1rem; font-size: var(--step--1); }
}
@media (min-width: 68.0625rem) { .site-nav .nav-tel { display: none; } }

/* Phones: the brand name and the Book Now button were fighting over the bar,
   leaving a 16px gap and wrapping the name on to two lines. Drop the button
   and carry the booking CTA into the drawer instead, the way .nav-tel already
   carries the phone number. */
.site-nav .nav-book { display: none; }
@media (max-width: 36rem) {
  .header-actions .btn { display: none; }
  .site-nav .nav-book { display: block; }
  .site-nav .nav-book a {
    margin-top: 0.85rem;
    background: var(--brand-deep); color: #fff;
    border: 0; border-radius: var(--radius-pill);
    text-align: center; font-weight: 600;
    padding: 0.85rem 1rem;
  }
  .site-nav .nav-book a:hover { background: var(--brand-darkest); color: #fff; }
}

/* Very narrow phones: the name already needs two lines here, and the tagline
   under it pushed the bar past its own height and on to the border. Keep the
   name legible, drop the tagline. */
@media (max-width: 24rem) {
  .brand { gap: 0.55rem; }
  .brand img { width: 34px; height: 34px; }
  .brand__name { font-size: 0.95rem; }
  .brand__name span { display: none; }
}

/* ------------------------------------------------------------ 5b. Fold */
/* Hero + credential strip together fill the viewport below the sticky
   header, so the logos land ON the fold line rather than wherever the
   copy happens to end. min-height, not height: if the content is taller
   than the viewport (short laptops, large text) the fold simply grows. */

.fold {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.fold > .hero { flex: 1 1 auto; display: flex; align-items: center; }
.fold > .hero > .container { width: 100%; }
.fold > .credentials { flex: 0 0 auto; }

/* ----------------------------------------------------------------- 6. Hero */
/* Split: copy on the left, image panel on the right. Light ground, so the
   brand teal stays an accent rather than becoming the hero background. */

.hero {
  background:
    radial-gradient(120% 90% at 85% 10%, var(--brand-wash) 0%, transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: clip;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.02fr 0.98fr; }
}

.hero__copy { max-width: 34rem; }
/* Capped below the global h1 scale so the credential strip clears the fold. */
.hero h1 { margin-top: 0.3rem; font-size: clamp(1.9rem, 1.4rem + 2.5vw, 3.05rem); }
/* The keyword highlight: a soft teal underline rather than a colour swap,
   so the headline keeps its contrast. */
.hero h1 mark {
  background: none;
  color: var(--brand-deep);
  position: relative;
  /* isolate so the ::after underline below stays inside this stacking
     context; without it, z-index:-1 would drop behind the hero background. */
  isolation: isolate;
  white-space: nowrap;
}
.hero h1 mark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.06em;
  height: 0.28em;
  background: var(--brand);
  opacity: 0.26;
  border-radius: 2px;
  z-index: -1;
}
/* Deliberately recessive: #6B7572 is the faintest tone that still clears
   4.5:1 on --surface, so these recede without failing contrast. */
.hero__locations {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.2rem 0.55rem;
  margin-bottom: 0.8rem;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero__locations span {
  color: #6B7572;
  transition: color 0.18s var(--ease);
}
.hero__locations span:hover { color: var(--brand-deep); }
.hero__locations .sep { color: #B6BDB9; }
.hero__locations .sep:hover { color: #B6BDB9; }

.hero__lead {
  margin-top: 0.9rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 30rem;
}
.hero .btn-row { margin-top: 1.35rem; }

/* Keyword pills under the lead */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; list-style: none; padding: 0; }
.pill-row li { margin: 0; }
.pill-row span,
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.pill-row svg, .chip svg { width: 0.95rem; height: 0.95rem; color: var(--brand-deep); flex: none; }

/* Social proof: avatar stack + star rating, following the reference site. */
.rating {
  display: flex; align-items: center; gap: 0.85rem;
  margin-top: 1.15rem; padding-top: 1.05rem;
  border-top: 1px solid var(--border);
}
.rating__avatars { display: flex; flex: none; }
.rating__avatars span {
  width: 2.15rem; height: 2.15rem; margin-left: -0.6rem;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-deep);
  border: 2px solid var(--surface); border-radius: 50%;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.82rem; line-height: 1;
}
.rating__avatars span:first-child { margin-left: 0; }
.rating__avatars svg { width: 1.05rem; height: 1.05rem; }
.rating__stars { display: flex; gap: 0.1rem; color: var(--brand-deep); }
.rating__stars svg { width: 1rem; height: 1rem; }
.rating__text { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.2rem; }
.rating__text strong { color: var(--brand-darkest); }

/* Image panel + the card that overlaps its corner */
.hero__panel { position: relative; }
.hero__frame {
  position: relative;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(15, 59, 54, 0.42);
  border: 1px solid rgba(83, 175, 162, 0.22);
}
.hero__frame img {
  width: 100%; height: clamp(16rem, 32vw, 23rem);
  object-fit: cover; object-position: 55% center;
}
.hero__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 59, 54, 0.45), transparent 55%);
}
.floating-card {
  position: absolute; bottom: -1.25rem; left: -0.75rem;
  display: flex; align-items: center; gap: 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 0.85rem 1.1rem;
  max-width: calc(100% - 1.5rem);
}
.floating-card__icon {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-deep);
  border-radius: var(--radius-sm);
}
.floating-card__icon svg { width: 1.4rem; height: 1.4rem; }
.floating-card__label {
  display: block;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.floating-card__value {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--brand-deep); line-height: 1.15;
}
@media (max-width: 36rem) {
  .floating-card { position: static; margin-top: 1rem; left: 0; bottom: 0; max-width: none; }
}

/* Compact hero for interior pages */
.page-head {
  background: var(--brand-darkest);
  color: var(--on-dark);
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
}
.page-head h1 { color: #fff; }
.page-head .eyebrow { color: var(--brand); }
.page-head .eyebrow::before { background: var(--brand); }
.page-head p { margin-top: 1rem; font-size: var(--step-1); color: var(--on-dark-muted); max-width: 54ch; }

/* ----------------------------------------------------- 7. Credential strip */

.credentials {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
  padding-block: 0.9rem;
}
.credentials__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 1rem 2.25rem;
}
.credentials__claim {
  font-family: var(--font-display); font-weight: 600;
  color: var(--brand-darkest); font-size: var(--step-0);
}
.credentials__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 1.75rem; }
.credentials__logos img {
  height: 48px; width: auto;
  filter: grayscale(1); opacity: 0.85;
  transition: filter 0.2s var(--ease), opacity 0.2s var(--ease);
}
.credentials__logos img:hover { filter: none; opacity: 1; }

/* ------------------------------------------------------------- 8. Cards */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card h3, .card h4 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-muted); }
.card > .btn--ghost { margin-top: auto; padding-top: 1rem; align-self: flex-start; }

a.card { text-decoration: none; color: inherit; }
a.card:hover, .card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-deep);
}

/* Outcome cards — teal top edge is the accent */
.card--outcome { border-top: 3px solid var(--brand); }
.card--outcome .card__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-deep); margin-bottom: 0.6rem;
}

/* Icon cards — "Why choose us" */
.card__icon {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  background: var(--brand-wash);
  border-radius: var(--radius-sm);
  color: var(--brand-deep);
  margin-bottom: 1rem;
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

/* Media card (image + caption) */
.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card--media .card__body { padding: 1.25rem; }

/* --------------------------------------------------------- 9. Testimonials */

.quote {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.quote__stars { display: flex; gap: 0.15rem; color: var(--brand-deep); }
.quote__stars svg { width: 1.05rem; height: 1.05rem; }
.quote blockquote { font-size: var(--step-1); line-height: 1.5; color: var(--brand-darkest); }
.quote figcaption { margin-top: auto; font-size: var(--step--1); color: var(--ink-muted); }
.quote figcaption strong { display: block; color: var(--brand-darkest); font-size: var(--step-0); }

/* -------------------------------------------------------- 10. Memberships */
/* Monthly plans are the headline offer. Single sessions are still bookable
   but deliberately carry no price here: rates differ by clinic, so the
   figure is confirmed at booking rather than quoted site-wide. */

/* Four cards now: fixed steps of 1, 2 then 4 columns, so the last card never
   wraps on to a row of its own the way auto-fit let it. */
.plan-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 34rem) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .plan-grid { grid-template-columns: repeat(4, 1fr); } }
/* The "Most popular" badge straddles its card's top edge. Once the grid wraps,
   that card sits below another and the 1.25rem gap leaves the badge touching
   the card above, so the row gap has to clear the badge. */
@media (max-width: 68rem) { .plan-grid { row-gap: 2.5rem; } }
.plan {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.plan:hover { box-shadow: var(--shadow-card); }
.plan__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--brand-darkest);
}
.plan__tagline { margin-top: 0.15rem; font-size: var(--step--1); color: var(--ink-muted); }
.plan__price {
  margin-top: 1.1rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-3); color: var(--brand-darkest); line-height: 1;
}
/* "/month" rides at body size so the figure keeps the weight */
.plan__price span {
  font-family: var(--font-body); font-size: var(--step-0);
  font-weight: 500; color: var(--ink-muted);
}
.plan__frequency {
  margin-top: 0.5rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--ink);
}
.plan .ticks { margin-top: 1.1rem; font-size: var(--step--1); gap: 0.5rem; }
/* margin-top:auto pins every CTA to the same baseline across uneven cards */
.plan .btn { margin-top: auto; width: 100%; justify-content: center; }
.plan .ticks + .btn { margin-top: 1.5rem; }

/* The one highlighted tier. Move data-popular to re-badge. */
.plan[data-popular] {
  border: 2px solid var(--brand-deep);
  box-shadow: var(--shadow-lift);
}
.plan[data-popular]::before {
  content: attr(data-popular);
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--brand-deep); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.85rem; border-radius: var(--radius-pill);
  white-space: nowrap;
}
@media (min-width: 48rem) { .plan[data-popular] { transform: scale(1.03); } }

/* Member extras: the perks that come with every plan */
.extras { margin-top: 1.5rem; }
.extras h3 { font-size: var(--step-1); color: var(--brand-darkest); }
.extras .ticks { margin-top: 1rem; }
/* Wider tracks than .ticks--2 so the six extras land as 3 x 2, not 4 + 2. */
.extras .ticks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Small print under a section: plans, booking, referrals. */
.fine-print { margin-top: 1.25rem; font-size: var(--step--1); color: var(--ink-muted); }

/* Offers / corporate panel */
.panel {
  background: var(--brand-wash);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  /* a little deeper at the foot so a closing list does not crowd the edge */
  padding-bottom: clamp(1.75rem, 3.2vw, 2.4rem);
}
/* .prose sets its own heading rhythm; .panel had none, so a sub-heading sat
   flush against the paragraph or list above it. */
.panel :is(p, ul, ol) + :is(h3, h4) { margin-top: 1.6rem; }
.panel h3, .panel h4 { color: var(--brand-darkest); }
.panel--dark { background: var(--brand-darkest); color: var(--on-dark-muted); border-color: transparent; }
.panel--dark h3, .panel--dark h4, .panel--dark strong { color: #fff; }

/* ----------------------------------------------------------- 11. Locations */

.location { display: flex; flex-direction: column; gap: 0.5rem; }
.location__city {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--brand-darkest);
}
.location address { font-style: normal; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.6; }
.area-served { margin-top: 1.5rem; font-size: var(--step--1); color: var(--ink-muted); }

/* ------------------------------------------------- 12. Checklist / features */

.ticks { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { position: relative; padding-left: 1.9rem; margin: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 1.15rem; height: 1.15rem;
  background: var(--brand-wash);
  border-radius: 50%;
}
.ticks li::after {
  content: ""; position: absolute; left: 0.33rem; top: 0.68em;
  width: 0.5rem; height: 0.28rem;
  border-left: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(-45deg);
}
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* ------------------------------------------------------------ 13. Accordion */

.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--brand-darkest);
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: 0.4em;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion summary:hover { color: var(--brand-deep); }
.accordion__body { padding-bottom: 1.35rem; max-width: var(--measure); }
.accordion__body > * + * { margin-top: 0.8rem; }

.faq-group + .faq-group { margin-top: clamp(2rem, 4vw, 3rem); }
.faq-group > h3 { margin-bottom: 0.75rem; }

/* ----------------------------------------------------------- 14. CTA band */
/* The ONE full-bleed brand band per page. */

.cta-band {
  background: var(--brand-darkest);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 4.75rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, rgba(83, 175, 162, 0.28), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 1rem; font-size: var(--step-1); color: var(--on-dark-muted); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: 2rem; justify-content: center; }
.cta-band__meta { margin-top: 1.5rem; font-size: var(--step--1); color: var(--on-dark-muted); }
.cta-band__meta a { color: var(--on-dark); }

/* --------------------------------------------------------------- 15. Hours */

.hours { display: grid; gap: 0.4rem; list-style: none; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; margin: 0;
  border-bottom: 1px dotted var(--border-strong); padding-block: 0.4rem; }
.hours span:last-child { font-weight: 600; color: var(--brand-darkest); }

/* -------------------------------------------------------------- 16. Footer */

.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.site-footer h2, .site-footer h3 { font-size: var(--step-0); margin-bottom: 0.85rem; }
.site-footer__grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-deep); text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }

.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.footer-logos img { height: 40px; width: auto; filter: grayscale(1); opacity: 0.65; }

.social { display: flex; gap: 0.5rem; margin-top: 1rem; }
.social a {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 50%; color: var(--brand-deep);
}
.social a:hover { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.social svg { width: 1.1rem; height: 1.1rem; }

.site-footer__bottom {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; align-items: center;
}

/* --------------------------------------------------- 17. Embeds and misc */

.embed { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-card); }
.embed iframe { width: 100%; border: 0; display: block; }

.figure { border-radius: var(--radius); overflow: hidden; }
.figure img { width: 100%; }
.figure figcaption { font-size: var(--step--1); color: var(--ink-muted); padding-top: 0.6rem; }

.portrait { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.pill {
  display: inline-block; padding: 0.3rem 0.8rem;
  background: var(--brand-wash); color: var(--brand-deep);
  border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 600;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.tag-list li { margin: 0; }

/* Google reviews widget (reviews.js) — inherit the card look */
#google-reviews { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); list-style: none; padding: 0; }
#google-reviews li, #google-reviews .review-item {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; margin: 0;
}
#google-reviews .review-meta { font-size: var(--step--1); color: var(--ink-muted); }
#google-reviews .review-stars ul { display: flex; gap: 0.15rem; padding: 0; list-style: none; }
#google-reviews .review-stars li { background: none; border: 0; padding: 0; }
#google-reviews .review-stars i { color: var(--brand-deep); }

/* TODO markers for copy still awaiting Danielle's sign-off. */
.needs-review {
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
}

/* ------------------------------------------- 17b. Section archetypes
   Each homepage section gets its own shape, so the page does not read as
   one card grid repeated eight times. */

/* Featured quote: oversized pull-quote, not a card in a row ---------------- */
.feature-quote {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) { .feature-quote { grid-template-columns: 1.4fr 1fr; } }

.feature-quote__body { position: relative; padding-top: 2.5rem; }
.feature-quote__body::before {
  content: "\201C";
  position: absolute; top: -1.4rem; left: -0.3rem;
  font-family: var(--font-display); font-size: 7rem; line-height: 1;
  color: var(--brand); opacity: 0.3;
}
.feature-quote blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-3); line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--brand-darkest);
}
.feature-quote figcaption {
  margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--step--1); color: var(--ink-muted);
}
.feature-quote figcaption strong { color: var(--brand-darkest); }

.roster { border-left: 3px solid var(--brand); padding-left: 1.25rem; }
.roster h3 { font-size: var(--step-0); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-deep); margin-bottom: 0.9rem; }
.roster ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.roster li { margin: 0; display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); font-size: var(--step--1); }
.roster li span:last-child { color: var(--ink-muted); white-space: nowrap; }

/* Bento tiles: one large, two small — image-led, text minimal -------------- */
.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; }
  .bento > :first-child { grid-row: span 2; }
}

.tile {
  position: relative; display: flex; align-items: flex-end;
  min-height: 13rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radius);
  overflow: hidden; isolation: isolate;
  text-decoration: none;
  background: var(--brand-darkest);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bento > .tile:first-child { min-height: 20rem; }
.tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(15, 59, 54, 0.9) 0%, rgba(15, 59, 54, 0.55) 45%, rgba(15, 59, 54, 0.15) 100%);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile:hover img { transform: scale(1.04); }
.tile__num {
  position: absolute; top: 1.1rem; right: 1.25rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  color: var(--brand); letter-spacing: 0.08em;
}
.tile h3 { color: #fff; font-size: var(--step-2); }
.bento > .tile:first-child h3 { font-size: var(--step-3); }
.tile p { color: var(--on-dark-muted); margin-top: 0.4rem; font-size: var(--step--1); max-width: 30ch; }
.tile__more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.9rem; font-size: var(--step--1); font-weight: 600; color: #fff;
}
.tile__more::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.tile:hover .tile__more::after { transform: translateX(3px); }

/* Numbered list: hairline rows, no card chrome ---------------------------- */
.reasons { list-style: none; padding: 0; counter-reset: reason; display: grid; gap: 0; }
.reasons > li {
  counter-increment: reason;
  display: grid; gap: 0.3rem 1.1rem;
  grid-template-columns: auto 1fr;
  padding-block: 1.1rem;
  border-top: 1px solid var(--border);
  margin: 0;
}
.reasons > li:last-child { border-bottom: 1px solid var(--border); }
.reasons > li::before {
  content: counter(reason, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--brand-deep); letter-spacing: 0.08em;
  padding-top: 0.2rem;
}
.reasons h3 { font-size: var(--step-1); }
.reasons p { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }
@media (min-width: 62rem) {
  .sticky-head { position: sticky; top: 6.5rem; }
}

/* Horizontal rail: scroll-snap row instead of another grid ---------------- */
.rail-wrap { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 20rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  /* bleed to the screen edge so it reads as a rail, not a cropped grid */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.rail-hint { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.25rem; }

/* Chip cloud: replaces long bullet lists ---------------------------------- */
.cloud { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 48rem) { .cloud { grid-template-columns: repeat(3, 1fr); } }
.cloud__group > h3 {
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-deep); margin-bottom: 0.85rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
}
.cloud__group ul { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0; }
.cloud__group li { margin: 0; }

/* Divided columns on a tinted ground ------------------------------------- */
.cols-divided {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 52rem) { .cols-divided { grid-template-columns: repeat(3, 1fr); } }
.cols-divided > * {
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  border-top: 1px solid var(--border);
}
.cols-divided > :first-child { border-top: 0; }
@media (min-width: 52rem) {
  .cols-divided > * { border-top: 0; border-left: 1px solid var(--border); }
  .cols-divided > :first-child { border-left: 0; }
}

/* Content that follows a split, full width.
   A split pairs an intro with a photo; supporting lists and sub-topics go
   here instead, so the text column cannot tower over the image beside it. */
.below-split {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border);
}
.below-split h3 { font-size: var(--step-1); margin-bottom: 0.75rem; }
.below-split h3 + p, .below-split p + h3 { margin-top: 0.75rem; }
.below-split p { color: var(--ink-muted); max-width: var(--measure); }
.below-split--2 { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 52rem) { .below-split--2 { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------- 17e. Reviews-page archetypes */

/* Score-led hero: the number is the headline. */
.rating-hero {
  background: radial-gradient(95% 80% at 20% 25%, var(--brand-wash) 0%, transparent 60%), var(--surface);
  border-bottom: 1px solid var(--border);
}
.rating-hero__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
}
@media (min-width: 52rem) { .rating-hero__grid { grid-template-columns: auto 1fr; } }
.rating-hero .btn-row { margin-top: 2rem; }

.score {
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 2rem;
  min-width: 12rem;
}
.score__figure {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 8vw, 4.25rem); line-height: 1;
  color: var(--brand-deep);
}
.score__stars { display: flex; justify-content: center; gap: 0.15rem; color: var(--brand-deep); margin-top: 0.6rem; }
.score__stars svg { width: 1.15rem; height: 1.15rem; }
.score__count { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-muted); }

/* Review wall: columns let five reviews of very different lengths settle
   without leaving one column short. */
.review-wall { columns: 1; column-gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 46rem) { .review-wall { columns: 2; } }
@media (min-width: 72rem) { .review-wall { columns: 3; } }

.review {
  break-inside: avoid;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.review__head { display: flex; align-items: center; gap: 0.75rem; }
.review__avatar {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-deep);
  border-radius: 50%;
  font-family: var(--font-display); font-weight: 600;
}
.review__who { font-family: var(--font-display); font-weight: 600; color: var(--brand-darkest); line-height: 1.2; }
.review__when { font-size: var(--step--1); color: var(--ink-muted); }
.review__stars { display: flex; gap: 0.1rem; color: var(--brand-deep); margin-top: 0.9rem; }
.review__stars svg { width: 0.95rem; height: 0.95rem; }
.review p { margin-top: 0.7rem; color: var(--ink); font-size: var(--step--1); line-height: 1.6; }
.review p + p { margin-top: 0.6rem; }

.attribution { margin-top: 1.5rem; font-size: var(--step--1); color: var(--ink-muted); }

/* ------------------------------------------ 17d. Gifts-page archetypes
   A gifting page has one job: make the two options obvious and appealing.
   The card itself is drawn in CSS rather than photographed, so it stays on
   palette and stays sharp at any size. */

.gift-hero {
  background:
    radial-gradient(100% 85% at 80% 20%, var(--brand-wash) 0%, transparent 62%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.gift-hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
}
@media (min-width: 62rem) { .gift-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }

/* The card visual: a tinted card behind, the gift card in front. */
.giftcard { position: relative; margin-inline: auto; max-width: 25rem; padding: 1.5rem 0.5rem 2rem; }
.giftcard__back {
  position: absolute; inset: 0.5rem 1.75rem 2.75rem 0.25rem;
  background: linear-gradient(140deg, var(--brand-deep), var(--brand-darkest));
  border-radius: calc(var(--radius) * 1.4);
  transform: rotate(-7deg);
  box-shadow: 0 20px 45px -22px rgba(15, 59, 54, 0.6);
}
.giftcard__front {
  position: relative;
  background: linear-gradient(160deg, #fff, var(--surface));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: 0 26px 50px -20px rgba(15, 59, 54, 0.4);
  transform: rotate(2.5deg);
  padding: 1.5rem 1.6rem 1.35rem;
  aspect-ratio: 85 / 54;            /* standard card proportions */
  display: flex; flex-direction: column;
}
.giftcard__top { display: flex; align-items: center; gap: 0.6rem; }
.giftcard__top img { width: 30px; height: 30px; }
.giftcard__brand {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.78rem; line-height: 1.15; color: var(--brand-darkest);
}
.giftcard__label {
  margin-top: auto;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  color: var(--brand-deep); line-height: 1;
}
.giftcard__rule {
  margin-top: 0.7rem; padding-top: 0.55rem;
  border-top: 1px dashed var(--border-strong);
  display: flex; justify-content: space-between;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .giftcard__front, .giftcard__back { transition: transform 0.4s var(--ease); }
  .giftcard:hover .giftcard__front { transform: rotate(1deg) translateY(-4px); }
  .giftcard:hover .giftcard__back { transform: rotate(-9deg); }
}

/* The two options, given real weight */
.gift-options {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: stretch;
}
.gift-option {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gift-option:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--brand); }
/* Same as the plan cards: the data-flag pill straddles the top edge, so once
   these stack the gap has to clear it. */
@media (max-width: 40rem) { .gift-options { row-gap: 2.5rem; } }
.gift-option__icon {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-deep);
  border-radius: var(--radius-sm); margin-bottom: 1.1rem;
}
.gift-option__icon svg { width: 1.6rem; height: 1.6rem; }
.gift-option h3 { font-size: var(--step-2); }
.gift-option__delivery {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem; font-size: var(--step--1); font-weight: 600; color: var(--brand-deep);
}
.gift-option > p { margin-top: 0.75rem; color: var(--ink-muted); }
.gift-option .ticks { margin-top: 1.1rem; font-size: var(--step--1); gap: 0.5rem; }
.gift-option .btn { margin-top: auto; width: 100%; justify-content: center; }
.gift-option .ticks + .btn { margin-top: 1.6rem; }
.gift-option[data-flag]::before {
  content: attr(data-flag);
  position: absolute; top: 0; right: 1.5rem; transform: translateY(-50%);
  background: var(--brand-deep); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); white-space: nowrap;
}

/* Occasions */
.occasions { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.occasions li { margin: 0; }

/* ------------------------------------------- 17c. About-page archetypes
   Biography is a different shape of content from the homepage: a person, a
   chronology, a credential list, a process. These forms suit that, and none
   repeat the homepage's bento / rail / chip-cloud / numbered-rows set. */

/* Portrait-led intro. Mirrors the homepage hero deliberately: image on the
   LEFT, portrait rather than landscape, so the two do not read as one layout. */
.about-hero {
  background: radial-gradient(110% 80% at 15% 15%, var(--brand-wash) 0%, transparent 58%), var(--surface);
  border-bottom: 1px solid var(--border);
}
.about-hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
}
@media (min-width: 62rem) { .about-hero__grid { grid-template-columns: 0.82fr 1.18fr; } }

.about-hero__portrait { position: relative; max-width: 24rem; }
.about-hero__portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 30px 60px -28px rgba(15, 59, 54, 0.45);
  border: 1px solid rgba(83, 175, 162, 0.22);
}
.about-hero__badge {
  position: absolute; right: -0.85rem; bottom: -1rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 0.7rem 1rem; text-align: center;
}
.about-hero__badge strong {
  display: block; font-family: var(--font-display);
  font-size: var(--step-1); color: var(--brand-deep); line-height: 1.1;
}
.about-hero__badge span {
  display: block; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.about-hero__role {
  font-size: var(--step-1); color: var(--brand-deep); font-weight: 600; margin-top: 0.4rem;
}
@media (max-width: 36rem) { .about-hero__badge { position: static; margin-top: 1rem; display: inline-block; } }

/* Philosophy: a standalone statement. No quote glyph and no companion
   column, so it cannot be confused with the homepage pull-quote. */
.statement { background: var(--surface-alt); border-block: 1px solid var(--border); }
.statement__inner {
  max-width: 54rem;
  border-left: 3px solid var(--brand);
  padding: clamp(0.5rem, 2vw, 1rem) 0 clamp(0.5rem, 2vw, 1rem) clamp(1.25rem, 3vw, 2.25rem);
}
.statement blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-2); line-height: 1.38; letter-spacing: -0.012em;
  color: var(--brand-darkest);
}
.statement cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}

/* Clinic: text card overlapping the image. */
.overlap { display: grid; gap: 1rem; }
.overlap__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius);
}
.overlap__panel {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
}
@media (min-width: 62rem) {
  .overlap { grid-template-columns: repeat(12, 1fr); gap: 0; align-items: center; }
  .overlap__media { grid-column: 1 / 9; grid-row: 1; }
  .overlap__panel { grid-column: 7 / 13; grid-row: 1; z-index: 1; }
}

/* Conditions: compact directory columns, not pills and not cards. */
.index-cols { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); list-style: none; padding: 0; margin: 0; }
@media (min-width: 52rem) { .index-cols { columns: 3; } }
.index-cols li {
  break-inside: avoid;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--step--1);
  margin: 0;
}

/* Session: horizontal numbered process with a connector. */
.stepper { list-style: none; padding: 0; margin: 0; counter-reset: pace; display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .stepper { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.stepper > li { position: relative; counter-increment: pace; margin: 0; padding-top: 3.25rem; }
.stepper > li::before {
  content: counter(pace);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  background: var(--surface-card); border: 2px solid var(--brand);
  color: var(--brand-deep); border-radius: 50%;
  font-family: var(--font-display); font-weight: 600;
  z-index: 1;
}
@media (min-width: 62rem) {
  .stepper > li::after {
    content: ""; position: absolute; top: 1.19rem; left: 2.5rem; right: -1.25rem;
    height: 2px; background: var(--border);
  }
  .stepper > li:last-child::after { display: none; }
}
.stepper h3 { font-size: var(--step-0); margin-bottom: 0.3rem; }
.stepper p { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }

/* ------------------------------------------------------- 18. Motion/print */

@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; scroll-behavior: auto !important;
  }
  .btn:hover, a.card:hover, .card--hover:hover { transform: none; }
}

@media print {
  .site-header, .cta-band, .nav-toggle, .social, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}