/* ==========================================================================
   Heel & Beyond Podiatry — design system
   Warm cream / muted gold / serif display. Accessibility-first: the patient
   base skews older and diabetic, so contrast, target size and reduced-motion
   are requirements here, not niceties.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — one warm family throughout, no cool greys mixed in */
  --cream:        #FBF8F3;
  --cream-deep:   #F4EEE4;
  --cream-edge:   #EBE3D6;
  --card:         #FFFDFA;

  /* Ink — every value below is contrast-checked against --cream and --cream-deep.
     The patient base skews older, so we hold body text to WCAG AA (4.5:1). */
  --ink:          #2B2620;   /* 14.15:1 on cream */
  --ink-soft:     #5A5147;   /*  7.33:1 on cream */
  --ink-mute:     #6E6458;   /*  4.94:1 on cream — darkened from #8A7F72 (3.70:1, failed) */

  /* Single accent — muted gold. Nothing else competes with it.
     --gold is the DECORATIVE tone (icons, rules, large display only: 3:1 bar).
     --gold-deep is the TEXT/BUTTON tone and must clear 4.5:1. */
  --gold:         #A07743;   /* decorative only: icons, rules, hairlines (3:1 bar) */
  --gold-deep:    #7D5C31;   /* text + filled buttons: 5.75:1 on cream, 4.5:1+ w/ white */
  --gold-darker:  #654A27;   /* button hover / pressed */
  --gold-wash:    #F0E6D6;

  --line:         #E3DACB;
  --line-strong:  #D2C5AF;

  --danger:       #A63D3D;
  --danger-wash:  #F7EBEB;
  --ok:           #4A6B4E;
  --ok-wash:      #EAF1EA;

  /* Type */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — one ladder, no ad-hoc sizes anywhere in the sheet.
     Every step is a deliberate rung; if a size isn't here, it doesn't get used. */
  --t-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);   /* hero h1 */
  --t-h1:      clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);   /* page h1 */
  --t-h2:      clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);   /* section h2 */
  --t-h3:      clamp(1.25rem, 1.1rem + .6vw, 1.55rem);  /* card / FAQ heading */
  --t-h4:      1.125rem;                                 /* small heading (18px) */
  --t-lead:    clamp(1.1rem, 1.03rem + .35vw, 1.3rem);  /* intro paragraph */
  --t-body:    1.0625rem;                                /* 17px — never below 16 */
  --t-small:   .9375rem;                                 /* 15px — secondary copy */
  --t-fine:    .875rem;                                  /* 14px — meta, buttons */
  --t-label:   .75rem;                                   /* 12px — tracked eyebrows */
  --t-micro:   .6875rem;                                 /* 11px — the floor. */

  /* Weights — used as tokens so hierarchy is deliberate, not accidental */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  /* Tracking */
  --tr-tight:  -.015em;   /* large serif display */
  --tr-normal: 0;
  --tr-wide:   .08em;     /* nav */
  --tr-wider:  .12em;     /* buttons */
  --tr-widest: .22em;     /* eyebrow small-caps */

  /* Rhythm — 4/8 based */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --wrap: 1200px;
  --wrap-narrow: 760px;

  /* Radii — softer on containers, tighter inside */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;

  /* Warm-tinted shadows, not generic black */
  --sh-1: 0 1px 2px rgba(70, 56, 36, .05);
  --sh-2: 0 2px 8px rgba(70, 56, 36, .06), 0 1px 2px rgba(70, 56, 36, .04);
  --sh-3: 0 10px 34px rgba(70, 56, 36, .09), 0 2px 8px rgba(70, 56, 36, .05);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;

  /* z-scale, no 9999s */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 60;
  --z-top: 100;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;      /* fixed header clearance for anchors */
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Motion: honour the OS setting completely. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: var(--w-regular);
  line-height: 1.12;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

/* The signature move from her original: second line set in gold italic. */
.accent-line {
  display: block;
  font-style: italic;
  color: var(--gold-deep);
}

/* ---------- Typewriter ----------
   min-height cannot solve this: phrase length varies, the column width varies, and
   the wrap point moves — measured drift was 135px, shoving the Book Appointment
   buttons down under the user's finger.

   So the box is sized by the LONGEST phrase, permanently in the flow but invisible
   (.tw-sizer), and the animated text is absolutely positioned on top of it. The
   accent line's height is therefore constant at every viewport width, and nothing
   below it can ever move. */
/* The rotating line is its own block, decoupled from the h1's line-breaking.
   A grid with both children in the SAME cell means the (invisible) sizer holds the
   box open at the tallest phrase, and the live text paints on top of it. No absolute
   positioning, no overlap with the paragraph below, no layout shift. */
.hero h1 .accent-line {
  display: grid;
  justify-items: start;      /* don't let the cell centre its children */
  text-align: left;
}
.tw-sizer,
.typewriter-live {
  grid-area: 1 / 1;          /* stack in one cell */
  min-width: 0;
  width: 100%;
  text-align: left;
}
.tw-sizer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.typewriter-live { white-space: pre-wrap; }

/* Caret. Sits on the baseline and blinks; hidden entirely for reduced-motion. */
.caret {
  display: inline-block;
  width: 2px;
  height: 0.78em;
  margin-left: 0.06em;
  background: var(--gold);
  vertical-align: baseline;
  animation: caret-blink 1.05s step-end infinite;
}
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Reduced motion: no typing, no caret, just the finished sentence. */
@media (prefers-reduced-motion: reduce) {
  .caret { display: none; }
}

/* Wide-tracked small-caps eyebrow */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-4);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

.measure { max-width: 65ch; }

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Focus: highly visible. Non-negotiable for this audience. */
:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: var(--z-top);
  background: var(--ink);
  color: var(--cream);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: var(--w-medium);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--cream); }

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

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--s-6); } }

.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; }

.section { padding-block: var(--section-y); }
/* Optical correction: bottom slightly heavier than top. */
.section { padding-bottom: calc(var(--section-y) * 1.08); }

.section-alt { background: var(--cream-deep); }

.section-head { margin-bottom: var(--s-8); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;                    /* > 44px target */
  padding: var(--s-3) var(--s-6);
  font-family: var(--sans);
  font-size: var(--t-fine);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 120ms var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* The filled button carries white text, so it must use the darker tone to clear
   4.5:1. The lighter --gold stays for decorative use (icons, rules, hairlines). */
.btn-primary {
  background: var(--gold-deep);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn-primary:hover {
  background: var(--gold-darker);
  color: #fff;
  box-shadow: var(--sh-2);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--gold-wash);
  border-color: var(--gold);
  color: var(--ink);
}

.btn-block { width: 100%; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--t-fine);
  font-weight: var(--w-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-deep);
  padding-block: var(--s-2);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(251, 248, 243, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 84px;
}

.brand {
  text-decoration: none;
  display: inline-flex;          /* shrink-wrap, so brand-sub aligns to the wordmark */
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 44px;
  line-height: 1;
}
.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-h3);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-sub {
  display: block;
  margin-top: 5px;
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-deep);      /* real text at 11px: must clear 4.5:1, not 3.80:1 */
  text-align: right;
}

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--s-6); }
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-fine);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 10px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; } }

/* Burger */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
  display: block;
  position: relative;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: background var(--dur) var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  background: var(--cream);
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  margin-bottom: var(--s-6);
}
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-links a {
  font-family: var(--serif);
  font-size: var(--t-h2);
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-nav-links a:hover,
.mobile-nav-links a[aria-current="page"] {
  color: var(--gold-deep);
  padding-left: var(--s-2);
}
.mobile-nav-foot { margin-top: auto; padding-top: var(--s-7); }
.mobile-nav-foot .btn { width: 100%; }
.mobile-nav-contact {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.mobile-nav-contact a { color: var(--ink-soft); text-decoration: none; }
.mobile-nav-contact a:hover { color: var(--gold-deep); }

body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}
.hero-grid {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
/* Grid/flex children default to min-width:auto, so the marquee's max-content track
   forces the whole column to expand to fit every phrase (measured: 2416px, i.e.
   horizontal scroll on the entire page). min-width:0 lets the column shrink and
   the marquee scroll inside its own box, which is the point. */
.hero-copy { min-width: 0; }
@media (min-width: 940px) {
  /* Copy column gets the larger share: the display type is big and the typewriter
     phrases need room to sit on one line rather than wrapping into a ragged gap. */
  .hero-grid {
    grid-template-columns: 1.25fr .75fr;
    gap: var(--s-8);
  }
}
.hero h1 {
  font-size: var(--t-display);
  margin-bottom: var(--s-5);
  /* balance redistributes the line boxes, which fights the typewriter's fixed-height
     sizer and floats the accent line away from the first line. */
  text-wrap: initial;
}
.hero .lead { margin-bottom: var(--s-7); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.hero-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--cream-deep);
  aspect-ratio: 4 / 5;
}
@media (min-width: 940px) {
  /* Slight offset so it isn't a boring symmetrical split */
  .hero-media { aspect-ratio: 4 / 4.6; transform: translateY(6px); }
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Photo-optional hero panel.
   Used until a real practice photo is supplied — drop an <img> into
   .hero-media and this panel is simply replaced. */
.hero-panel {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--s-7);
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(169,129,73,.16), transparent 60%),
    radial-gradient(90% 80% at 15% 92%, rgba(169,129,73,.10), transparent 62%),
    linear-gradient(158deg, var(--gold-wash) 0%, var(--cream-deep) 55%, var(--cream) 100%);
}
/* Fine grain so the surface isn't a flat vector wash */
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.hero-panel-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 30ch;
}
.hero-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--s-5);
  color: var(--gold);
}
.hero-panel-quote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.hero-panel-attr {
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- Credentials + marquee ----------
   The marquee carries reassurance phrases (ambient, decorative). The credentials
   themselves stay STATIC below it: "HCPC Registered" is the single strongest trust
   signal on the page for someone deciding whether to let a stranger into their home,
   and a signal that slides past is a signal that gets skipped. Motion for atmosphere,
   static for proof. */
.creds { border-top: 1px solid var(--line); padding-top: var(--s-5); }

.marquee {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-5);
  padding-block: var(--s-1);
  /* Feather both edges so phrases dissolve rather than being chopped by the box */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;   /* slow: delicate, not busy */
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-group {
  display: flex;
  flex: none;
  align-items: center;
}
.marquee-group span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding-right: var(--s-4);
  font-family: var(--serif);
  font-size: var(--t-h4);
  font-style: italic;
  color: var(--ink-mute);
  white-space: nowrap;
}
/* Hairline gold diamond between phrases — the delicate separator */
.marquee-group span::after {
  content: "";
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .7;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track holds 2 identical groups */
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  /* Static: show the first group only, and let it wrap rather than overflow */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: 100%; flex-wrap: wrap; }
  .marquee-group:nth-child(2) { display: none; }
  .marquee-group { flex-wrap: wrap; gap: var(--s-2); }
}

.creds-label {
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-4);
}
.creds-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  list-style: none;
  padding: 0;
}
.creds-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.creds-list svg { flex: none; color: var(--gold); }

/* ---------- Cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-soft); font-size: var(--t-small); }
/* Pin the CTA so buttons line up across cards of unequal length */
.card .link-arrow, .card .btn { margin-top: auto; padding-top: var(--s-5); }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Service (priced) cards ---------- */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card:hover { border-color: var(--gold); box-shadow: var(--sh-2); }
.service-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.service-head h3 { margin: 0; }
.price {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--serif);
  font-size: var(--t-h3);
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* "From" sits inline beside the figure so every price keeps one baseline. */
.price-from {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.service-card p { color: var(--ink-soft); font-size: var(--t-small); }
.service-card .link-arrow { margin-top: auto; padding-top: var(--s-5); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.step { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--line-strong); }
.step-num {
  font-family: var(--serif);
  font-size: var(--t-h4);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-soft); font-size: var(--t-small); }

/* ---------- Values / feature rows ---------- */
.values { display: grid; gap: var(--s-5); }
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.value-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
}
.value h3 { font-size: var(--t-h4); margin-bottom: var(--s-1); }
.value p { font-size: var(--t-small); color: var(--ink-soft); }

/* ---------- Split (about / area) ---------- */
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
.split-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  aspect-ratio: 5 / 4;
  background: var(--cream-deep);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--s-4); }
.cta-band p { color: var(--ink-soft); margin-inline: auto; max-width: 52ch; margin-bottom: var(--s-6); }

/* ---------- Page header ---------- */
.page-head { padding-block: var(--s-8) var(--s-7); }
.breadcrumb { margin-bottom: var(--s-4); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  list-style: none;
  padding: 0;
  font-size: var(--t-small);
  color: var(--ink-mute);
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* standalone nav link, not inline-in-prose */
  color: var(--ink-mute);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--gold-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }
.breadcrumb-sep { color: var(--line-strong); }

/* ---------- Notes / callouts ---------- */
.note {
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.note strong { display: block; color: var(--ink); margin-bottom: var(--s-1); font-weight: var(--w-semi); }

.fineprint {
  font-size: var(--t-small);
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  margin-top: var(--s-7);
  max-width: 70ch;
}

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 70ch; }
.prose h2 {
  font-size: var(--t-h3);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-6); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { margin: var(--s-4) 0; padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose .updated {
  font-size: var(--t-small);
  color: var(--ink-mute);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

/* ---------- Form ---------- */
.book-layout { display: grid; gap: var(--s-8); align-items: start; }
/* Grid children default to min-width:auto and refuse to shrink below their content,
   which pushed the form 5px past the viewport on a 320px phone. */
.book-layout > * { min-width: 0; }
@media (min-width: 960px) {
  .book-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); gap: var(--s-8); }
}

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
}
@media (min-width: 700px) { .form-card { padding: var(--s-7); } }

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

.field { margin-bottom: var(--s-5); }

.field label,
.fieldset-legend {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.req { color: var(--gold-deep); }
.hint {
  display: block;
  font-size: var(--t-fine);
  color: var(--ink-mute);
  margin-top: var(--s-1);
  margin-bottom: var(--s-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;                     /* touch-friendly */
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-mute); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gold); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(169, 129, 73, .18);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238A7F72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-7);
  cursor: pointer;
}

/* Invalid state — only after the user has been told */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--danger);
  background: var(--danger-wash);
}
.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus {
  box-shadow: 0 0 0 3px rgba(166, 61, 61, .16);
}
.error-msg {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--t-fine);
  color: var(--danger);
}
.field.is-invalid .error-msg { display: flex; }
.error-msg svg { flex: none; }

/* Consent checkbox */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.consent:hover { border-color: var(--gold); }
.consent input {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  accent-color: var(--gold-deep);
  cursor: pointer;
}
.consent span { font-size: var(--t-fine); color: var(--ink-soft); line-height: 1.6; }
/* The policy link lives inside the clickable label, so give it a padded hit area of
   its own — otherwise reaching for it toggles the checkbox by mistake. */
.consent a {
  display: inline-block;
  padding: var(--s-2) var(--s-1);
  margin: calc(var(--s-2) * -1) calc(var(--s-1) * -1);
  font-weight: var(--w-medium);
}
.field.is-invalid .consent { border-color: var(--danger); background: var(--danger-wash); }

/* Submit + status */
.form-submit { margin-top: var(--s-6); }
.btn[aria-busy="true"] { opacity: .75; cursor: wait; }
.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  line-height: 1.6;
}
.form-status:empty { display: none; padding: 0; margin: 0; }
.form-status.is-ok {
  background: var(--ok-wash);
  border: 1px solid #C4D6C6;
  color: #33502F;
}
.form-status.is-err {
  background: var(--danger-wash);
  border: 1px solid #E2C3C3;
  color: #7E2F2F;
}
.form-status strong { display: block; margin-bottom: var(--s-1); }
.form-status a { color: inherit; font-weight: var(--w-semi); }

/* Booking aside */
.aside-card {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.aside-card + .aside-card { margin-top: var(--s-5); }
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.contact-list li { display: flex; align-items: center; gap: var(--s-3); }
.contact-list svg { flex: none; color: var(--gold); }
.contact-list a {
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--w-medium);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.contact-list a:hover { color: var(--gold-deep); text-decoration: underline; }
.contact-meta { font-size: var(--t-fine); color: var(--ink-mute); display: block; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 64px;
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--serif);
  font-size: var(--t-h4);
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.faq-q:hover { color: var(--gold-deep); }
.faq-icon { flex: none; color: var(--gold); transition: transform var(--dur) var(--ease); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--ease);
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  color: var(--ink-soft);
  font-size: var(--t-small);
  padding-bottom: var(--s-5);
  max-width: 68ch;
}

/* ---------- Conditions ---------- */
.cond-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .cond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cond-grid { grid-template-columns: repeat(3, 1fr); } }
.cond {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cond:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.cond h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.cond p { font-size: var(--t-small); color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
  padding-top: var(--s-8);
}
/* Two columns: brand on the left, links + contact paired on the right.
   The old 3-column "link farm" split Quick Links and Services into thin, sparse
   stacks; this reads as one deliberate block instead. */
.footer-grid {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}
@media (min-width: 860px) {
  .footer-grid {
    grid-template-columns: minmax(0, 22rem) 1fr;   /* brand doesn't sprawl */
    gap: var(--s-8);
    align-items: start;
  }
}

/* Two link columns at every width, including mobile. The contact column holds an
   email address, so the columns must be allowed to shrink (minmax 0) and the email
   must wrap rather than force a horizontal scroll. */
.footer-cols {
  display: grid;
  /* Quick Links are single words; Contact holds a 23-char email. Give Contact the
     larger share so the address doesn't fracture mid-word on a phone. */
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--s-5) var(--s-4);
}
@media (min-width: 520px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
}

.footer-brand .brand { margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--t-small); color: var(--ink-soft); max-width: 34ch; }
.footer-hours {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--ink-mute);
}

.site-footer h2 {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-4);
}
.footer-links { list-style: none; padding: 0; display: grid; gap: 0; }
.footer-links a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-links a:hover,
.footer-contact a:hover { color: var(--gold-deep); }

.footer-contact { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer-contact li { min-width: 0; }
.footer-contact .label {
  display: block;
  font-size: var(--t-label);
  color: var(--ink-mute);
  margin-bottom: -2px;
}
/* The email is long and the column is narrow on a phone. Shrink it a touch and let
   it break at the @ rather than mid-word, so the address stays legible. */
.footer-contact a {
  min-height: 44px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
}
.footer-contact a[href^="mailto:"] { font-size: var(--t-fine); }

/* ---------- Social links ----------
   Icon buttons: circular, hairline, gold on hover. Always paired with a visible
   or screen-reader label — an unlabelled icon is a guess, not a link. */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.socials a:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
  background: var(--gold-wash);
  transform: translateY(-2px);
}
.socials a:active { transform: translateY(0); }
/* Fixed, not fluid: a viewBox-only SVG with no intrinsic size will expand to fill
   its container if these are ever missing. flex:none stops the grid stretching it. */
.socials svg { width: 18px; height: 18px; flex: none; }

.footer-socials { margin-top: var(--s-5); }

.footer-bar {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-fine);
  color: var(--ink-mute);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; }
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* tappable for reduced dexterity */
  color: var(--ink-mute);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--gold-deep); text-decoration: underline; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: var(--s-10); }
.notfound .code {
  font-family: var(--serif);
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.notfound p { color: var(--ink-soft); margin-inline: auto; max-width: 44ch; margin-bottom: var(--s-6); }

/* ---------- Scroll reveal ----------
   Progressive enhancement: content is VISIBLE by default. JS adds .reveal-ready
   to <html> only once it is certain it can animate and un-hide again. If JS never
   runs, fails, or the browser lacks IntersectionObserver, everything simply shows.
   A clinic site must never depend on JS to display its content. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Print ----------
   Patients do print these pages (prices, contact details). Never let an
   animation or a fixed header eat the content. */
@media print {
  .reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
  .burger, .mobile-nav, .skip-link, .header-cta, .cta-band .btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
  .card, .service-card, .cond, .form-card { break-inside: avoid; }
}