/* ==========================================================================
   Kavitha Dental Care | styles.css
   Design language: Apple HIG (clarity, deference, depth).
   System type · 8pt spacing · one accent (cobalt) · translucent chrome ·
   purposeful motion only.
   ==========================================================================

   CONTENTS
   1. Tokens & reset
   2. Typography & layout primitives (container, grid, section, eyebrow)
   3. Buttons & links
   4. Nav
   5. Hero
   6. Trust strip
   7. Pillars (Why KDC)
   8. Treatment cards
   9. Editorial band
   10. Steps (process)
   11. About
   12. Reviews
   13. FAQ
   14. Visit
   15. CTA band
   16. Footer
   17. Booking modal & form
   18. Reveal motion & reduced motion
   19. Responsive
   ========================================================================== */

/* 1. Tokens & reset
   Semantic, appearance-adaptive colors (HIG "Dark Mode": backgrounds dim,
   foregrounds brighten, not blind inversions). No manual appearance toggle:
   the site follows the system preference. */
:root {
  color-scheme: light dark;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* brand accent: surfaces & buttons */
  --blue:        #1140c8;
  --blue-dark:   #0c31a0;
  --blue-soft:   rgba(17, 64, 200, 0.10);
  /* brand accent: text, icons, focus (lightens in dark for contrast) */
  --blue-text:   #1140c8;
  --grad-a:      #0e3ab0;
  --grad-b:      #1140c8;
  --grad-c:      #5b8df2;
  --yellow:      #f7d434;
  --star:        #e8b400;

  /* text */
  --ink:         #1d1d1f;
  --ink-2:       #424245;
  --gray:        #6e6e73;
  --gray-3:      #86868b;

  /* surfaces */
  --bg:          #ffffff;
  --bg-gray:     #f5f5f7;
  --bg-cream:    #faf6ec;
  --surface:     #ffffff;
  --field-bg:    #ffffff;
  --field-border:#d2d2d7;
  --seg-checked: #ffffff;
  --inverse-bg:  #ffffff;
  --inverse-bg-hover: #ececf0;
  --inverse-ink: #1d1d1f;
  --nav-bg:      rgba(255, 255, 255, 0.72);
  --sheet-bg:    rgba(255, 255, 255, 0.94);
  --btn-quiet-hover: #e8e8ed;
  --nav-link:    rgba(29, 29, 31, 0.78);

  --nav-solid-bg:       #ffffff;
  --sheet-solid-bg:     #ffffff;
  --sheet-nav-link:     #1d1d1f;
  --sheet-ghost-color:  #1d1d1f;
  --sheet-ghost-border: rgba(0, 0, 0, 0.12);
  --nav-border-color:   rgba(0, 0, 0, 0.10);

  /* lines, states */
  --hairline:    rgba(0, 0, 0, 0.10);
  --hairline-2:  rgba(0, 0, 0, 0.06);
  --focus:       #1140c8;
  --dot:         #c7c7cc;
  --error:       #d70015;

  --radius-lg:   28px;
  --radius-md:   18px;
  --radius-sm:   12px;
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.065);
  --shadow-pop:  0 32px 80px rgba(0, 0, 0, 0.22);
  --ease:        cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --nav-h:       56px;
  --content-max: 1128px;
}

/* Dark palette: applied when the system prefers dark (and the visitor
   hasn't chosen light) or when the visitor explicitly chooses dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:        #2a5be6;
    --blue-dark:   #1e47c9;
    --blue-soft:   rgba(130, 165, 255, 0.16);
    --blue-text:   #9dbcff;
    --grad-a:      #7fa0f5;
    --grad-b:      #a4c0ff;
    --grad-c:      #cfdcff;

    --ink:         #f5f5f7;
    --ink-2:       #a1a1a6;
    --gray:        #a1a1a6;
    --gray-3:      #8e8e93;

    --bg:          #000000;
    --bg-gray:     #161618;
    --bg-cream:    #1a1812;
    --surface:     #1d1d1f;
    --field-bg:    #000000;
    --field-border:#424245;
    --seg-checked: #5e5e63;
    --inverse-bg:  #f5f5f7;
    --inverse-bg-hover: #d9d9de;

    --nav-bg:      rgba(16, 16, 18, 0.72);
    --sheet-bg:    rgba(22, 22, 24, 0.94);
    --btn-quiet-hover: #38383a;
    --nav-link:    rgba(245, 245, 247, 0.78);

    --nav-solid-bg:       #121214;
    --sheet-solid-bg:     #121214;
    --sheet-nav-link:     #f5f5f7;
    --sheet-ghost-color:  #f5f5f7;
    --sheet-ghost-border: rgba(255, 255, 255, 0.18);
    --nav-border-color:   rgba(255, 255, 255, 0.12);

    --hairline:    rgba(255, 255, 255, 0.14);
    --hairline-2:  rgba(255, 255, 255, 0.08);
    --focus:       #9dbcff;
    --dot:         #5a5a5e;
    --error:       #ff6961;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue:        #2a5be6;
  --blue-dark:   #1e47c9;
  --blue-soft:   rgba(130, 165, 255, 0.16);
  --blue-text:   #9dbcff;
  --grad-a:      #7fa0f5;
  --grad-b:      #a4c0ff;
  --grad-c:      #cfdcff;

  --ink:         #f5f5f7;
  --ink-2:       #a1a1a6;
  --gray:        #a1a1a6;
  --gray-3:      #8e8e93;

  --bg:          #000000;
  --bg-gray:     #161618;
  --bg-cream:    #1a1812;
  --surface:     #1d1d1f;
  --field-bg:    #000000;
  --field-border:#424245;
  --seg-checked: #5e5e63;
  --inverse-bg:  #f5f5f7;
  --inverse-bg-hover: #d9d9de;

  --nav-bg:      rgba(16, 16, 18, 0.72);
  --sheet-bg:    rgba(22, 22, 24, 0.94);
  --btn-quiet-hover: #38383a;
  --nav-link:    rgba(245, 245, 247, 0.78);

  --nav-solid-bg:       #121214;
  --sheet-solid-bg:     #121214;
  --sheet-nav-link:     #f5f5f7;
  --sheet-ghost-color:  #f5f5f7;
  --sheet-ghost-border: rgba(255, 255, 255, 0.18);
  --nav-border-color:   rgba(255, 255, 255, 0.12);

  --hairline:    rgba(255, 255, 255, 0.14);
  --hairline-2:  rgba(255, 255, 255, 0.08);
  --focus:       #9dbcff;
  --dot:         #5a5a5e;
  --error:       #ff6961;
}

:root[data-theme="light"] {
  color-scheme: light;
  --blue:        #1140c8;
  --blue-dark:   #0c31a0;
  --blue-soft:   rgba(17, 64, 200, 0.10);
  --blue-text:   #1140c8;
  --grad-a:      #0e3ab0;
  --grad-b:      #1140c8;
  --grad-c:      #5b8df2;
  --yellow:      #f7d434;
  --star:        #e8b400;

  --ink:         #1d1d1f;
  --ink-2:       #424245;
  --gray:        #6e6e73;
  --gray-3:      #86868b;

  --bg:          #ffffff;
  --bg-gray:     #f5f5f7;
  --bg-cream:    #faf6ec;
  --surface:     #ffffff;
  --field-bg:    #ffffff;
  --field-border:#d2d2d7;
  --seg-checked: #ffffff;
  --inverse-bg:  #ffffff;
  --inverse-bg-hover: #ececf0;
  --inverse-ink: #1d1d1f;
  --nav-bg:      rgba(255, 255, 255, 0.72);
  --sheet-bg:    rgba(255, 255, 255, 0.94);
  --btn-quiet-hover: #e8e8ed;
  --nav-link:    rgba(29, 29, 31, 0.78);

  --nav-solid-bg:       #ffffff;
  --sheet-solid-bg:     #ffffff;
  --sheet-nav-link:     #1d1d1f;
  --sheet-ghost-color:  #1d1d1f;
  --sheet-ghost-border: rgba(0, 0, 0, 0.12);
  --nav-border-color:   rgba(0, 0, 0, 0.10);

  --hairline:    rgba(0, 0, 0, 0.10);
  --hairline-2:  rgba(0, 0, 0, 0.06);
  --focus:       #1140c8;
  --dot:         #c7c7cc;
  --error:       #d70015;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Keep every linked section clear of the sticky navigation. This is more
   reliable than scroll-padding alone when a visitor opens a deep hash URL. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* Touch baseline: no double-tap zoom wait, no long-press text selection
   on controls (content text stays selectable) */
button, a, [role="button"], summary {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
summary { -webkit-touch-callout: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--blue); color: #fff; }

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

body.is-locked { overflow: hidden; }

/* Skip navigation: first focusable element (HIG Accessibility) */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 980px;
  background: var(--surface);
  color: var(--blue-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-pop);
  transform: translateY(-64px);
  opacity: 0;
}
.skip-link:focus-visible { transform: none; opacity: 1; }

/* 2. Typography & layout primitives
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.022em; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.container--narrow { max-width: 760px; }

.section { padding-block: clamp(72px, 8vw, 108px); }

.section--gray  { background: var(--bg-gray); }
.section--cream { background: var(--bg-cream); }

.section__head {
  max-width: 680px;
  margin: 0 0 clamp(36px, 4vw, 56px);
}

.section__head h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin-top: 16px;
}

.section__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--gray);
  max-width: 540px;
  margin: 16px 0 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--yellow);
}

/* Monospace annotation tag: labels a box or visual (HIG Labels) */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  color: #1d1d1f;
  background: var(--yellow);
  padding: 6px 9px;
  border-radius: 5px;
}

.grid { display: grid; gap: clamp(18px, 2vw, 24px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.chev {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

/* 3. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 980px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 160ms var(--ease-out), box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); box-shadow: 0 10px 24px var(--blue-soft); }

.btn--inverse { background: var(--inverse-bg); color: var(--inverse-ink); }
.btn--inverse:hover { background: var(--inverse-bg-hover); }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn--ghost:hover { background: rgba(0, 0, 0, 0.04); }

.btn--lg  { font-size: 17px; padding: 17px 32px; }
.btn--sm  { font-size: 13px; padding: 9px 18px; }
.btn--block { width: 100%; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue-text);
  text-decoration: none;
  cursor: pointer;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:hover .chev { transform: translateX(3px); }

.btn--link { padding: 14px 4px; font-weight: 500; }
.btn--link-light { color: #fff; }

/* 4. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--hairline-2); }

.nav__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.nav__mark { width: 26px; height: 24px; object-fit: contain; }
.nav__name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.nav__name em { font-style: normal; font-weight: 700; }
.nav__brand-text { display: inline-flex; align-items: baseline; }
.nav__sub { display: none; }

.nav__links {
  display: flex;
  gap: clamp(18px, 2.2vw, 28px);
  margin-inline: auto;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--ink); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.nav__links + .nav__actions { margin-left: 0; }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-text);
  text-decoration: none;
}
.nav__phone svg { width: 14px; height: 14px; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav__sheet {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  position: absolute;
  inset: var(--nav-h) 0 auto 0;
  background: var(--sheet-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline-2);
  box-shadow: 0 32px 48px rgba(0, 0, 0, 0.10);
  padding: 20px 24px 28px;
  /* Exit is faster than enter (HIG/Emil: release is snappy) */
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms;
  pointer-events: none;
}
.nav--open .nav__sheet {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.nav__sheet nav { display: grid; }
.nav__sheet nav a {
  padding: 12px 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.nav__sheet-cta {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
}

/* 5. Hero, split lockup: copy left, annotated showcase right */
.hero { padding: clamp(64px, 8vw, 112px) 0 clamp(64px, 7vw, 96px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(40px, 4vw, 64px);
  align-items: center;
}
.hero__copy { min-width: 0; }

.hero__title {
  font-size: clamp(46px, 4.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.034em;
  margin-top: 20px;
}

/* Offer pill: sits above the headline (mobile-first reference layout) */
.offer-pill {
  display: none;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 24px;
  padding: 5px 16px 5px 5px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 980px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.offer-pill__chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--blue);
  padding: 8px 11px;
  border-radius: 980px;
}
.offer-pill__text { white-space: nowrap; font-size: 13px; }
.offer-pill__text strong { color: var(--blue-text); font-weight: 600; }

.btn__arrow { width: 15px; height: 15px; }
.btn__label-short { display: none; }

.hero__accent { color: var(--blue); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__accent {
    background: linear-gradient(94deg, var(--grad-a) 0%, var(--grad-b) 46%, var(--grad-c) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hero__sub {
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
  color: var(--gray);
  max-width: 470px;
  margin: 22px 0 0;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 32px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--gray);
  margin: 28px 0 0;
}
.hero__proof-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.hero__proof-group { white-space: nowrap; }
.hero__proof strong { color: var(--ink); font-weight: 600; }
.hero__stars { color: var(--star); font-size: 12px; letter-spacing: 2.5px; }
.hero__proof .dot { color: var(--dot); }

.hero__media { position: relative; margin: 0; }
.hero__media :is(img, video) {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: 70% center;
  border-radius: var(--radius-lg);
  outline: 1px solid var(--hairline-2);
  outline-offset: -1px;
  background: var(--bg-gray);
}
.hero__media .tag { position: absolute; z-index: 2; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); }
.hero__media .tag--tl { top: 18px; left: -10px; }
.hero__media .tag--br { bottom: 18px; right: -10px; }

/* Keep the primary visual stable while the figure itself reveals. A hero
   image should never be cropped differently during first paint. */
.js .hero__media :is(img, video) { transform: none; transition: none; }

/* 6. Trust strip
   -------------------------------------------------------------------------- */
.trust { background: var(--bg-gray); padding: 22px 0; }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
}
.trust__item {
  display: grid;
  place-items: center;
  min-height: 40px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 0 18px;
  border-left: 1px solid var(--hairline);
}
.trust__item:first-child { border-left: 0; }

/* SF-Symbols-style line icons in a tinted chip: one consistent
   style, weight and corner radius across every card (HIG Icons). */
.icon-chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue-text);
}
.icon-chip svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-chip--sm { width: 42px; height: 42px; border-radius: 12px; }
.icon-chip--sm svg { width: 21px; height: 21px; }

/* 7. Pillars (Why KDC)
   -------------------------------------------------------------------------- */
.pillar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-gray);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
}
.pillar .icon-chip { margin-bottom: 18px; }
.pillar h3 { font-size: 21px; letter-spacing: -0.015em; margin-top: 10px; }
.pillar p { font-size: 15px; line-height: 1.55; color: var(--gray); margin-top: 10px; }

/* 8. Treatment cards
   -------------------------------------------------------------------------- */
.treatments { align-items: stretch; }

.tcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.tcard__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-gray); }
.tcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

/* Hover lift is pointer-only; on touch, :hover sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
  .tcard:hover .tcard__media img { transform: scale(1.04); }
}
/* Press feedback belongs to the card’s appointment control. */

.tcard__body {
  display: flex;
  flex: 1;
  min-height: 218px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 26px 30px;
}
.tcard__body h3 { font-size: 21px; letter-spacing: -0.015em; }
.tcard__body p { font-size: 15px; line-height: 1.5; color: var(--gray); }
.tcard__price { font-size: 13px !important; font-weight: 600; color: var(--ink-2) !important; }
.tcard__body .link { margin-top: auto; padding-top: 8px; }

.tcard--cta {
  background: var(--blue);
  color: #fff;
  justify-content: center;
  min-height: 0;
}
.tcard--cta h3 { color: #fff; }
.tcard--cta p { color: rgba(255, 255, 255, 0.82); }
.tcard--cta .btn { margin-top: 12px; }

/* 9. Bento band, grouped boxes (HIG Boxes: distinct groups, succinct
   labels, small relative to the view, no nesting) */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}

.bento__media {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  position: relative;
  margin: 0;
}
.bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  outline: 1px solid var(--hairline-2);
  outline-offset: -1px;
  background: var(--bg-gray);
}
.bento__media .tag { position: absolute; left: 16px; bottom: 16px; }

.bento__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.bento__cell p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.bento__cell p strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* 10. Steps (process)
   -------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; gap: 32px; }
.step { border-top: 1px solid var(--hairline); padding-top: 22px; }
.step .icon-chip { margin-bottom: 16px; }
.step h3 { font-size: 19px; letter-spacing: -0.012em; margin-top: 10px; }
.step p { font-size: 15px; line-height: 1.55; color: var(--gray); margin-top: 8px; }

/* 11. About
   -------------------------------------------------------------------------- */
.about__layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: start;
}
.about__layout .section__head { margin-bottom: 0; }
.about__story { max-width: 620px; padding-top: 6px; }
.about__story > p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.about__story > p + p { margin-top: 18px; }
.about__story strong { color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; list-style: none; }
.chips li {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 980px;
  padding: 7px 15px;
}

/* Complete treatment directory: a compact reference list outside the feature carousel. */
.treatment-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-2);
}
.treatment-directory li {
  position: relative;
  min-height: 56px;
  padding: 17px 0 17px 20px;
  border-bottom: 1px solid var(--hairline-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.treatment-directory li::before {
  position: absolute;
  top: 26px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}
@media (max-width: 900px) { .treatment-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .treatment-directory { grid-template-columns: 1fr; } }

/* 12. Reviews
   -------------------------------------------------------------------------- */
.reviews {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
}
.review {
  display: flex;
  flex-direction: column;
  min-height: 236px;
  background: var(--bg-gray);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.review__stars { font-size: 14px; letter-spacing: 3px; color: var(--star); }
.review p:not(.review__stars) { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 14px; }
.review footer { font-size: 13px; color: var(--gray); margin-top: auto; padding-top: 18px; }
.review footer strong { color: var(--ink); font-weight: 600; }

/* 13. FAQ
   -------------------------------------------------------------------------- */
.faq-layout .section__head,
.faq-layout .faq { max-width: 840px; }
.faq { display: grid; gap: 12px; }

.faq__item {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__icon { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-gray); }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__body { padding: 0 56px 22px 24px; animation: faqIn 0.25s var(--ease-out); }
.faq__body p { font-size: 15px; line-height: 1.6; color: var(--gray); }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* 14. Visit
   -------------------------------------------------------------------------- */
.visit__cards { align-items: stretch; }
.vcard {
  background: var(--bg-gray);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.vcard h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  letter-spacing: -0.012em;
}
.vcard h3 svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue-text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vcard p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.vcard a { color: var(--blue-text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.vcard a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vcard__muted { font-size: 13px !important; color: var(--gray) !important; }
.vcard .link { margin-top: auto; padding-top: 6px; }
.vcard .vcard__branch-link { margin-top: 0; padding-top: 0; }

.visit__media { margin: 28px 0 0; }
.visit__media img {
  width: 100%;
  height: clamp(300px, 34vw, 420px);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
}

/* 15. CTA band
   -------------------------------------------------------------------------- */
.cta {
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: clamp(80px, 10vw, 128px) 0;
}
.cta h2 {
  font-size: clamp(40px, 5.6vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.cta h2 em { font-style: normal; color: var(--yellow); }
.cta p { font-size: 17px; color: rgba(255, 255, 255, 0.82); margin-top: 16px; }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 36px;
}

/* 16. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--bg-gray); padding: 64px 0 32px; }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.footer__brand { display: flex; gap: 16px; align-items: flex-start; }
.footer__brand img { width: 34px; height: 31px; object-fit: contain; }
.footer__brand p { font-size: 13px; line-height: 1.6; color: var(--gray); max-width: 300px; }
.footer__brand strong { color: var(--ink); }

.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.footer__col a { font-size: 13px; color: var(--gray); text-decoration: none; }
.footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__col p { font-size: 13px; color: var(--gray); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--hairline-2);
  margin-top: 48px;
  padding-top: 24px;
}
.footer__legal p { font-size: 13px; color: var(--gray); }

/* 17. Booking modal & form
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.3s ease;
}

.modal__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: clamp(22px, 3vw, 32px);
  animation: panelIn 0.4s var(--ease-out);
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Exit is faster than enter */
.modal.is-closing .modal__panel { animation: panelOut 160ms ease-in forwards; }
.modal.is-closing .modal__backdrop { animation: backdropOut 160ms ease-in forwards; }
@keyframes panelOut    { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes backdropOut { to { opacity: 0; } }

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-gray);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.modal__close:hover { background: var(--btn-quiet-hover); }
.modal__close:active { transform: scale(0.94); }
.modal__close svg { width: 15px; height: 15px; }

.modal__panel h3 { font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.02em; margin-top: 6px; }
.modal__sub { font-size: 13.5px; line-height: 1.5; color: var(--gray); margin-top: 6px; }

/* Two-column booking grid: the whole flow stays on screen without scrolling
   on phones and desktop alike. Full-width children opt out via .field--full. */
.modal__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 16px; }
.modal__form form > .field--full,
.modal__form form > .form-error,
.modal__form form > .btn,
.modal__form form > .modal__note { grid-column: 1 / -1; }

.field { display: grid; gap: 7px; }
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.modal__form .field { gap: 5px; }
.modal__form .field label { font-size: 12px; }
.modal__form .field input,
.modal__form .field select { height: 44px; padding: 0 12px; }
.modal__form .btn--lg { padding: 13px 24px; font-size: 15.5px; }

@media (max-width: 480px) {
  .modal__form .modal__sub { display: none; }
}

.field label { font-size: 13px; font-weight: 600; color: var(--ink); }

.field input, .field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder { color: var(--gray-3); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--blue-text);
  box-shadow: 0 0 0 3.5px var(--blue-soft);
}
.field input[type="date"] { min-width: 0; }

.seg { display: flex; background: var(--bg-gray); border-radius: var(--radius-sm); padding: 4px; height: 48px; }
.seg__opt { flex: 1; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt span {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.seg__opt input:checked + span { background: var(--seg-checked); color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

.form-error { font-size: 13px; font-weight: 500; color: var(--error); }

/* Live slot picker (booking.js): open times from the HMS availability API,
   grouped into parts of day so the picker stays on screen without scrolling */
.dayparts { display: flex; flex-wrap: wrap; gap: 6px; }
.daypart { position: relative; }
.daypart input { position: absolute; opacity: 0; pointer-events: none; }
.daypart span {
  display: grid;
  place-items: center;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
  background: var(--bg-gray);
  border-radius: 980px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.daypart input:checked + span { background: var(--seg-checked); color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); }
.daypart input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slots__status { font-size: 13px; color: var(--gray); }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot span {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--bg-gray);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.slot:hover span { border-color: var(--field-border); }
.slot input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.slot input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

.modal__note { font-size: 12px; line-height: 1.45; color: var(--gray); text-align: center; }

.modal__success { text-align: center; padding: 24px 0 8px; display: grid; justify-items: center; gap: 12px; }
.modal__success[hidden] { display: none; }
.success-mark { color: var(--blue-text); }
.success-mark svg { width: 64px; height: 64px; }
.modal__success .btn { margin-top: 10px; }
.booking-summary { font-size: 15px; font-weight: 600; color: var(--ink); }
.booking-token {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  word-break: break-all;
  color: var(--gray);
}
.link--danger { color: var(--error); }
.link--danger:hover { color: var(--error); }

/* 18. Reveal motion & reduced motion
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js section:target .reveal { opacity: 1; transform: none; }

[data-reveal-order="1"] { transition-delay: 0.07s; }
[data-reveal-order="2"] { transition-delay: 0.14s; }
[data-reveal-order="3"] { transition-delay: 0.21s; }
[data-reveal-order="4"] { transition-delay: 0.28s; }
[data-reveal-order="5"] { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Fewer and gentler, not zero: keep opacity/color feedback, remove movement */
  .js .reveal { opacity: 1; transform: none; transition: opacity 0.2s ease; }
  .js .hero__media :is(img, video) { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, background-color, color, border-color, box-shadow !important;
    transition-duration: 0.15s !important;
    transition-delay: 0s !important;
  }
}

/* 26. Spatial treatment carousel: floating glass panels, not a framed slider. */
#treatments { overflow: visible; }
#treatments .container { max-width: min(1500px, 96vw); }
.treatment-story.is-scroll-story { position: relative; margin-top: clamp(28px, 4vw, 56px); }
.treatment-story.is-scroll-story .treatment-story__pin {
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) 58px;
  gap: 12px;
  height: min(94svh, 720px);
  min-height: 590px;
  z-index: 2;
}
.treatment-story.is-scroll-story .treatment-story__stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 45% 52% at 50% 50%, rgba(70, 138, 255, .10), transparent 72%),
    radial-gradient(ellipse 32% 38% at 70% 32%, rgba(255, 204, 95, .08), transparent 76%);
  perspective: 1900px;
  perspective-origin: 50% 48%;
}
.treatment-story.is-scroll-story .treatment-story__stage::before {
  position: absolute;
  inset: 14% 18% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74, 126, 213, .10), transparent 68%);
  filter: blur(22px);
  content: "";
  pointer-events: none;
}
.treatment-story.is-scroll-story .treatment-story__track {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  transform-style: preserve-3d;
}
.home-page .treatment-story.is-scroll-story .tcard {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: clamp(620px, 47vw, 710px);
  height: clamp(500px, 69vh, 575px);
  max-height: calc(100% - 8px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 40px;
  color: var(--ink);
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 30px 80px rgba(30, 60, 110, .10), 0 8px 30px rgba(20, 50, 90, .07), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(120,160,220,.10);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 760ms cubic-bezier(.22,1,.36,1), opacity 680ms cubic-bezier(.22,1,.36,1), filter 680ms cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity, filter;
}
.home-page .treatment-story.is-scroll-story .tcard::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.12) 34%, rgba(151,198,255,.10) 70%, rgba(255,255,255,.42)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  pointer-events: none;
}
.home-page .treatment-story.is-scroll-story .tcard::after {
  position: absolute;
  right: -16%;
  bottom: -24%;
  left: 12%;
  z-index: 1;
  height: 35%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(156, 205, 255, .20), transparent 68%);
  filter: blur(18px);
  content: "";
  pointer-events: none;
}
.home-page .treatment-story.is-scroll-story .tcard[aria-hidden="true"] { pointer-events: none; }
.home-page .treatment-story.is-scroll-story .tcard__media {
  position: relative;
  z-index: 0;
  flex: 0 0 61%;
  width: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 32px 32px 21px 21px;
  background: rgba(227, 238, 255, .7);
}
.home-page .treatment-story.is-scroll-story .tcard__media::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 28%;
  background: linear-gradient(transparent, rgba(255,255,255,.50));
  content: "";
  pointer-events: none;
}
.home-page .treatment-story.is-scroll-story .tcard__media img,
.home-page .treatment-story.is-scroll-story .tcard__media video { width: 100%; height: 100%; object-fit: cover; }
.home-page .treatment-story.is-scroll-story .tcard__body {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  gap: 7px;
  padding: 18px 30px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.70));
}
.home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: clamp(25px, 2.2vw, 31px); line-height: 1.08; }
.home-page .treatment-story.is-scroll-story .tcard__body p { max-width: 54ch; font-size: 14px; line-height: 1.42; color: var(--ink-2); }
.home-page .treatment-story.is-scroll-story .tcard__body .link { padding-top: 3px; color: var(--blue); }
.home-page .treatment-story.is-scroll-story .tcard__body .link .chev { display: inline-block; transition: transform 180ms ease; }
.home-page .treatment-story.is-scroll-story .tcard--cta { background: rgba(255,255,255,.47); }
.home-page .treatment-story.is-scroll-story .tcard--cta .tcard__body { justify-content: center; padding: 42px; background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(222,237,255,.55)); }
.home-page .treatment-story.is-scroll-story .tcard--cta h3 { color: var(--ink); }
.home-page .treatment-story.is-scroll-story .tcard--cta p { color: var(--ink-2); }
.home-page .treatment-story.is-scroll-story .tcard--cta .btn { color: #fff; background: var(--blue); }
.treatment-story.is-scroll-story .treatment-story__controls {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 48px 52px;
  align-items: center;
  gap: 10px;
  width: min(100%, 490px);
  min-height: 58px;
  margin-inline: auto;
}
.treatment-story.is-scroll-story .treatment-story__arrow {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 22px rgba(34, 63, 105, .08), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.treatment-story.is-scroll-story .treatment-story__dots { gap: 5px; }
.treatment-story.is-scroll-story .treatment-story__dot { flex-basis: 17px; width: 17px; height: 44px; }
.treatment-story.is-scroll-story .treatment-story__dot::after { width: 6px; height: 6px; background: rgba(84, 100, 122, .36); }
.treatment-story.is-scroll-story .treatment-story__dot[aria-current="step"]::after { width: 26px; background: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .home-page .treatment-story.is-scroll-story .tcard.is-active:hover .link .chev { transform: translateX(3px); }
  .treatment-story.is-scroll-story .treatment-story__arrow:not(:disabled):hover { background: rgba(255,255,255,.82); }
}
@media (max-width: 1199px) {
  .home-page .treatment-story.is-scroll-story .tcard { width: clamp(530px, 65vw, 660px); }
}
@media (max-width: 768px) {
  /* `overflow-x: hidden` makes the page an unintended scroll container in
     mobile Safari/Chromium, which releases the carousel's sticky frame. */
  .home-page { overflow: visible; }
  #treatments .container { max-width: none; }
  .treatment-story.is-scroll-story { width: calc(100% + 2 * var(--page-gutter)); margin-inline: calc(-1 * var(--page-gutter)); }
  .treatment-story.is-scroll-story .treatment-story__pin { top: calc(var(--nav-h) + 6px); height: min(85svh, 650px); min-height: 470px; grid-template-rows: minmax(0, 1fr) 50px; gap: 5px; }
  .treatment-story.is-scroll-story .treatment-story__stage { perspective: 1250px; }
  .home-page .treatment-story.is-scroll-story .tcard { width: min(88vw, 470px); height: min(70svh, 530px); max-height: calc(100% - 4px); border-radius: 30px; }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 58%; border-radius: 24px 24px 16px 16px; }
  .home-page .treatment-story.is-scroll-story .tcard__body { padding: 15px 20px 18px; gap: 5px; }
  .home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: clamp(21px, 6vw, 27px); }
  .home-page .treatment-story.is-scroll-story .tcard__body p { font-size: 12.5px; }
  .home-page .treatment-story.is-scroll-story .tcard__body .link { font-size: 13px; }
  .home-page .treatment-story.is-scroll-story .tcard--cta .tcard__body { padding: 26px; }
  .treatment-story.is-scroll-story .treatment-story__controls { grid-template-columns: 44px minmax(0, 1fr) 42px 44px; width: min(100%, 390px); min-height: 50px; }
  .treatment-story.is-scroll-story .treatment-story__arrow { width: 44px; height: 44px; }
}

/* Team section: uses the existing neutral surface, type scale and card language. */
.team__leaders,
.team__grid { display: grid; gap: 18px; }
.team__leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-card { display: flex; flex-direction: column; min-height: 220px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); background: var(--surface); }
.team-card--leader { min-height: 390px; background: var(--bg-gray); }
.team-card h3 { font-size: clamp(20px, 2vw, 25px); letter-spacing: -0.02em; }
.team-card p { margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.team-card .team-card__role { margin-top: 0; color: var(--blue-text); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.team-card .team-card__credential { color: var(--gray); font-size: 13px; font-weight: 600; }
.team__closing { max-width: 820px; margin: clamp(42px, 6vw, 72px) auto 0; text-align: center; }
.team__closing strong { font-size: clamp(22px, 3vw, 32px); letter-spacing: -.025em; }
.team__closing p { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team__leaders, .team__grid { grid-template-columns: 1fr; } .team-card, .team-card--leader { min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  .home-page .treatment-story.is-scroll-story .tcard { transition: opacity 180ms ease; }
}

/* Dark Mode: the hand-drawn logo mark is near-black artwork,
   invert it (hue-rotate brings the tooth back to blue) on dark surfaces. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__mark,
  :root:not([data-theme="light"]) .footer__brand img { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .nav__mark,
:root[data-theme="dark"] .footer__brand img { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="light"] .nav__mark,
:root[data-theme="light"] .footer__brand img { filter: none; }

/* Appearance toggle: follows the system until the visitor chooses. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.theme-toggle:hover { background: var(--blue-soft); }
.theme-toggle svg { width: 20px; height: 20px; }

.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* HIG Accessibility: 44pt minimum hit targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn--sm { min-height: 44px; }
  .modal__close { width: 44px; height: 44px; }
}

/* 19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .nav__phone { display: none; }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger {
    display: flex;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10), 0 0 0 1px var(--hairline-2);
  }
  .nav__actions { gap: 12px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 0; }
  .trust__item { border-left: 0; }
  .trust__item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--hairline); }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__media { margin-top: 40px; }
  .hero__sub { max-width: 560px; }
  .hero__media .tag--tl { left: 12px; }
  .hero__media .tag--br { right: 12px; }

  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(170px, auto); }
  .bento__media { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
}

@media (max-width: 640px) {
  .section { padding-block: 72px; }
  .container { padding-inline: 20px; }
  .nav__inner { padding-inline: 20px; }
  /* Reference nav: logo + toggle + burger, booking lives in the sheet & hero */
  .nav__actions .btn { display: none; }

  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .tcard--cta { min-height: 300px; }
  .tcard__body { min-height: 0; }

  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; }
  .trust__item,
  .trust__item:not(:nth-child(3n + 1)) { border-left: 0; padding-inline: 10px; }

  .bento { grid-template-columns: 1fr; }
  .bento__media { min-height: 230px; }

  /* Mobile hero, reference layout: offer pill, oversized headline,
     one-row CTAs, frameless full-bleed visual */
  .hero { padding-bottom: 0; }
  .offer-pill { display: inline-flex; }
  .hero__title { font-size: clamp(40px, 11.5vw, 52px); margin-top: 16px; }
  .hero__sub { font-size: 16.5px; }

  .hero__cta { margin-top: 28px; flex-wrap: nowrap; gap: 16px; }
  .btn--lg { padding: 15px 20px; font-size: 15px; }
  .btn__label-full { display: none; }
  .btn__label-short { display: inline; }

  .hero__proof { margin-top: 22px; }
  .hero__proof .dot { display: none; }
  .hero__media { margin: 32px -20px 0; }
  .hero__media :is(img, video) {
    aspect-ratio: 6 / 5;
    object-fit: cover;
    object-position: center;
    background: var(--bg-cream);
    border-radius: 0;
  }
  .hero__media .tag--tl { top: 14px; left: 14px; }
  .hero__media .tag--br { bottom: 14px; right: 14px; }

  .trust__item { border-left: 0; padding: 0 18px; }

  .steps { gap: 24px; }

  .about__layout { grid-template-columns: 1fr; gap: 36px; }
  .about__layout .section__head { margin-bottom: 0; }
  .about__story { padding-top: 0; }

  .reviews { grid-template-columns: 1fr; }

  .field-row { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; }
}

/* 20. Boxed home refresh
   --------------------------------------------------------------------------
   The homepage uses a calm modular canvas: one idea per surface, consistent
   radii, and clear gaps between boxes. Content stays in the existing order so
   anchors, focus management, and the booking flow remain unchanged. */
.home-page {
  --home-gap: clamp(12px, 1.6vw, 18px);
  background: var(--bg-gray);
}

.home-page > .section,
.home-page > .trust,
.home-page > .cta {
  background: transparent;
}

.home-page .section {
  padding-block: clamp(44px, 5.8vw, 78px);
}

.home-page .hero {
  padding: clamp(24px, 4vw, 48px) 0 clamp(18px, 3vw, 28px);
}

.home-page .hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--home-gap);
  align-items: stretch;
}

.home-page .hero__copy,
.home-page .hero__media {
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.055);
}

.home-page .hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}

.home-page .offer-pill {
  display: inline-flex;
  margin-top: 0;
}

.home-page .hero__title {
  margin-top: 18px;
}

.home-page .hero__media {
  display: flex;
  align-items: stretch;
  padding: 12px;
  overflow: visible;
}

.home-page .hero__media :is(img, video) {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  outline: 0;
}

.home-page .hero__media .tag--tl { top: 28px; left: -10px; }
.home-page .hero__media .tag--br { right: -10px; bottom: 28px; }

.home-page .trust {
  padding: 0 0 clamp(24px, 3vw, 36px);
}

.home-page .trust__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--home-gap);
}

.home-page .trust__item,
.home-page .trust__item:first-child,
.home-page .trust__item:not(:nth-child(3n + 1)) {
  min-height: 68px;
  padding: 12px 16px;
  border: 1px solid var(--hairline-2);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.035);
}

.home-page .section__head {
  max-width: none;
  margin-bottom: var(--home-gap);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--hairline-2);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.home-page .section__head h2 {
  max-width: 760px;
  margin-top: 12px;
}

.home-page .section__head .section__sub {
  max-width: 620px;
}

.home-page .pillar,
.home-page .tcard,
.home-page .bento__cell,
.home-page .bento__media,
.home-page .step,
.home-page .review,
.home-page .faq__item,
.home-page .vcard {
  border: 1px solid var(--hairline-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
}

.home-page .grid,
.home-page .bento,
.home-page .steps {
  gap: var(--home-gap);
}

.home-page .pillar {
  min-height: 236px;
  padding: clamp(22px, 2.7vw, 32px);
  border-radius: 22px;
  background: var(--surface);
}

.home-page .tcard {
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
}

.home-page .tcard__body {
  min-height: 202px;
  padding: 24px 24px 26px;
}

.home-page .tcard--cta {
  border-color: transparent;
  background: var(--blue);
}

.home-page .bento__media {
  overflow: hidden;
  border-radius: 22px;
}

.home-page .bento__cell {
  border-radius: 22px;
  background: var(--surface);
}

.home-page .step {
  min-height: 250px;
  padding: 22px;
  border-top: 1px solid var(--hairline-2);
  border-radius: 22px;
  background: var(--surface);
}

.home-page .about__layout {
  padding-top: clamp(26px, 3vw, 36px);
  padding-bottom: clamp(26px, 3vw, 36px);
  border: 1px solid var(--hairline-2);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.055);
}

.home-page .about__layout .section__head {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .reviews {
  max-width: none;
}

.home-page .review {
  min-height: 224px;
  border-radius: 22px;
  background: var(--surface);
}

.home-page .faq-layout .section__head,
.home-page .faq-layout .faq {
  max-width: none;
}

.home-page .faq__item {
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.035);
}

.home-page .vcard {
  border-radius: 22px;
  background: var(--surface);
}

.home-page .visit__media {
  margin-top: var(--home-gap);
  padding: 12px;
  border: 1px solid var(--hairline-2);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.045);
}

.home-page .visit__media img {
  border-radius: 18px;
}

.home-page .cta {
  padding: 18px 0 clamp(48px, 6vw, 80px);
}

.home-page .cta .container {
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(44px, 6vw, 76px);
  border-radius: 28px;
  background: var(--blue);
  box-shadow: 0 16px 34px rgba(17, 64, 200, 0.18);
}

.home-page + .footer {
  border-top: 1px solid var(--hairline-2);
}

@media (max-width: 960px) {
  .home-page .hero__grid {
    grid-template-columns: 1fr;
  }

  .home-page .hero__media {
    margin-top: 0;
  }

  .home-page .trust__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-page .about__layout {
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .home-page .section {
    padding-block: 34px 48px;
  }

  .home-page .section__head {
    margin-bottom: 12px;
    padding: 20px;
    border-radius: 20px;
  }

  .home-page .section__head h2 {
    font-size: clamp(30px, 8.8vw, 42px);
  }

  .home-page .trust {
    padding-bottom: 18px;
  }

  .home-page .trust__grid {
    gap: 10px;
  }

  .home-page .trust__item,
  .home-page .trust__item:first-child,
  .home-page .trust__item:not(:nth-child(3n + 1)) {
    min-height: 60px;
    padding: 10px;
    border: 1px solid var(--hairline-2);
    border-radius: 14px;
    font-size: 10px;
  }

  .home-page .pillar {
    min-height: 0;
    border-radius: 20px;
  }

  .home-page .tcard,
  .home-page .step,
  .home-page .review,
  .home-page .vcard {
    border-radius: 20px;
  }

  .home-page .tcard__body {
    min-height: 0;
    padding: 20px;
  }

  .home-page .step {
    min-height: 0;
  }

  .home-page .about__layout {
    gap: 24px;
    padding: 20px;
    border-radius: 22px;
  }

  .home-page .review {
    min-height: 0;
  }

  .home-page .visit__media {
    padding: 8px;
    border-radius: 22px;
  }

  .home-page .visit__media img {
    border-radius: 16px;
  }

  .home-page .cta {
    padding: 12px 0 48px;
  }

  .home-page .cta .container {
    padding-top: 38px;
    padding-bottom: 38px;
    border-radius: 22px;
  }
}

/* 21. Hero alignment correction
   --------------------------------------------------------------------------
   Keep the two hero boxes on one deliberate baseline without letting the
   image inherit an uncontrolled height from a wrapped headline. */
.home-page .hero__grid {
  align-items: start;
}

.home-page .hero__title {
  font-size: clamp(42px, 3.9vw, 58px);
}

.home-page .hero__copy,
.home-page .hero__media {
  height: clamp(520px, 58vh, 620px);
  min-height: 0;
}

.home-page .hero__copy {
  padding: clamp(28px, 3vw, 40px);
}

.home-page .hero__media :is(img, video) {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (min-width: 1200px) {
  .home-page .hero__accent {
    white-space: nowrap;
  }
}

@media (max-width: 960px) {
  .home-page .hero__copy,
  .home-page .hero__media {
    height: auto;
    min-height: 0;
  }

  .home-page .hero__media :is(img, video) {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   Mobile Reference Layout (≤768px)
   Matches reference image:
   - Consistent 20px content grid with safe-area support
   - White header with two-line brand lockup & 44px blue hamburger
   - Fully rounded offer pill on a single line with yellow chip
   - Apple-style bold headline with tight line-height
   - Two-line supporting paragraph
   - Horizontal two-column 56px CTA pair (blue with shadow + soft gray)
   - Full-bleed horse-with-braces hero image
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --nav-h: 74px;
    --border: var(--hairline);
    --soft-background: var(--bg-gray);
  }

  /* One consistent 20px mobile content grid */
  .container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  /* 1. Header */
  .nav {
    background: var(--nav-solid-bg) !important;
    border-bottom: 1px solid var(--nav-border-color) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nav__inner {
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }

  .nav__mark {
    width: 44px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .nav__brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .nav__name {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--blue);
  }

  .nav__name em {
    font-style: normal;
    font-weight: 700;
    color: var(--blue);
  }

  .nav__sub {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray);
    line-height: 1.2;
    margin-top: 3px;
  }

  /* Hide desktop navigation elements on mobile */
  .nav__links,
  .nav__phone,
  .nav__actions .btn,
  .nav__actions .theme-toggle {
    display: none !important;
  }

  .nav__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  /* 44px minimum touch target blue hamburger */
  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5.5px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0 -4px 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .nav__burger span {
    display: block;
    width: 27px;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .nav--open .nav__burger span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }
  .nav--open .nav__burger span:nth-child(2) {
    opacity: 0;
  }
  .nav--open .nav__burger span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }


  .nav__sheet {
    position: fixed;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px));
    background: var(--sheet-solid-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    box-shadow: none;
    border-bottom: none;
    padding: 24px 24px calc(40px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 150ms ease, visibility 150ms ease;
  }

  .nav--open .nav__sheet {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  .nav__sheet nav a {
    color: var(--sheet-nav-link) !important;
    font-size: 20px;
    font-weight: 600;
    padding: 12px 0;
    text-decoration: none;
  }

  .nav__sheet .btn--ghost {
    color: var(--sheet-ghost-color) !important;
    box-shadow: inset 0 0 0 1.5px var(--sheet-ghost-border) !important;
  }

  .theme-toggle--sheet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    background: var(--bg-gray);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--hairline);
    margin-top: 4px;
    cursor: pointer;
  }
  .theme-toggle--sheet svg {
    width: 18px;
    height: 18px;
  }

  /* Page base & Hero structure */
  .home-page {
    background: var(--bg);
    overflow-x: hidden;
  }

  .home-page .hero {
    min-height: calc(100svh - var(--nav-h) - env(safe-area-inset-top, 0px));
    min-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    padding: 20px 0 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--bg);
  }

  .home-page .hero__grid {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    padding-bottom: 0;
  }

  .home-page .hero__copy {
    flex: 0 0 auto;
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Location eyebrow is shown in header lockup */
  .home-page .hero__copy > .eyebrow {
    display: none;
  }

  /* 2. Offer pill */
  .home-page .offer-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 0;
    padding: 5px 16px 5px 5px;
    background: var(--bg-gray);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    box-sizing: border-box;
    align-self: flex-start;
  }

  .home-page .offer-pill__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    background: #f7d434;
    color: #0c31a0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .home-page .offer-pill__text {
    font-size: 13.5px;
    color: var(--gray);
    white-space: nowrap;
    line-height: 1.2;
  }

  .home-page .offer-pill__text strong {
    color: var(--blue-text);
    font-weight: 700;
  }

  /* 3. Headline */
  .home-page .hero__title {
    margin-top: 26px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 10vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 100%;
  }

  .home-page .hero__accent {
    display: inline;
    white-space: nowrap;
    color: var(--blue-text);
    -webkit-text-fill-color: var(--blue-text);
    background: none;
  }

  /* 4. Supporting paragraph */
  .home-page .hero__sub {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.48;
    color: var(--gray);
    max-width: 360px;
  }

  /* 5. CTA row - properly align both buttons */
  .home-page .hero__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 24px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Primary button */
  .home-page .hero__cta .btn--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    height: 56px;
    padding: 0 8px;
    background: var(--blue);
    color: #ffffff;
    font-size: clamp(13px, 3.4vw, 15px);
    font-weight: 600;
    border-radius: 14px;
    border: none;
    box-shadow: 0 8px 24px rgba(17, 64, 200, 0.28);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
  }

  .home-page .hero__cta .btn--primary .btn__label-full {
    display: none;
  }

  .home-page .hero__cta .btn--primary .btn__label-short {
    display: inline;
    white-space: nowrap;
  }

  .home-page .hero__cta .btn--primary .btn__arrow {
    display: none;
  }

  /* Secondary button */
  .home-page .hero__cta .btn--link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    height: 56px;
    padding: 0 4px;
    background: var(--bg-gray);
    color: var(--ink);
    border: 1px solid var(--hairline);
    font-size: clamp(11.5px, 3.1vw, 13px);
    letter-spacing: -0.015em;
    font-weight: 600;
    border-radius: 14px;
    box-shadow: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
  }

  .home-page .hero__cta .btn--link .chev {
    margin-left: 2px;
    font-size: 14px;
    line-height: 1;
  }

  /* Hide proof ratings on mobile hero */
  .home-page .hero__proof {
    display: none;
  }

  /* 6. Horse hero image - extends until the last of the viewport */
  .home-page .hero__media {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin: 20px -20px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    min-height: 380px;
    opacity: 1 !important;
    transform: none !important;
  }

  .home-page .hero__media picture {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
  }

  .home-page .hero__media :is(img, video) {
    display: block;
    width: 100%;
    flex: 1 0 auto;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    object-position: 70% 8%;
    border-radius: 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .home-page .hero__media .tag {
    display: none;
  }

  /* Trust strip: cleanly spaced below hero, cards with legible text */
  .trust {
    padding: 40px 0 32px;
    background: var(--bg);
  }

  .home-page .trust__grid,
  .trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .trust .trust__grid .trust__item {
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 16px 12px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface);
    box-sizing: border-box;
  }

  .trust__item:last-child {
    grid-column: 1 / -1;
  }

  /* Blue consultation tile: natural height, no dead space */
  .tcard--cta {
    min-height: 0;
  }

  .tcard--cta .tcard__body {
    padding: 28px 24px;
  }

  /* Footer: keep the hours range on one line */
  .footer__col .nowrap {
    white-space: nowrap;
  }
}

/* Mobile line-break helper: hidden by default */
.br-m {
  display: none;
}

/* Very compact devices (≤380px) */
@media (max-width: 380px) {
  .home-page .offer-pill {
    padding: 4px 10px 4px 4px;
    gap: 6px;
  }
  .home-page .offer-pill__chip {
    padding: 6px 9px;
    font-size: 10.5px;
  }
  .home-page .offer-pill__text {
    font-size: 11.5px;
  }
  .home-page .hero__title {
    font-size: 34px;
  }
  .home-page .hero__cta {
    gap: 8px;
  }
  .home-page .hero__cta .btn--primary {
    font-size: 13px;
    padding: 0 4px;
  }
  .home-page .hero__cta .btn--link {
    font-size: 11.5px;
    letter-spacing: -0.02em;
    padding: 0 4px;
  }
  .home-page .hero__cta .btn--link .chev {
    margin-left: 1px;
    font-size: 13px;
  }
}

/* 22. Refinement system: preserve the established compositions and palette.
   Shared 8pt rhythm; 180ms feedback, 280ms surfaces, 640ms first reveals. */
:root {
  --space-unit: 8px;
  --page-gutter: 24px;
  --card-inset: clamp(24px, 2.7vw, 32px);
  --motion-feedback: 180ms;
  --motion-surface: 280ms;
  --motion-reveal: 640ms;
  --shadow-rest: 0 2px 8px rgba(0, 0, 0, 0.025);
}
html { scrollbar-gutter: stable; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.grid > *, .bento > *, .footer__grid > *, .field-row > * { min-width: 0; }
.container, .nav__inner {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
.home-page .section { padding-block: clamp(48px, 5.8vw, 80px); }
.home-page .section__head { padding: var(--card-inset); margin-bottom: calc(var(--space-unit) * 3); }
.home-page .section__head h2 { line-height: 1.12; font-weight: 650; }
.home-page :is(.pillar, .step, .review, .vcard, .bento__cell) { padding: var(--card-inset); }
.home-page :is(.section__head, .pillar, .tcard, .bento__cell, .step, .review, .faq__item, .vcard) {
  box-shadow: var(--shadow-rest);
}
.home-page :is(.pillar, .tcard, .bento__cell, .step, .review, .vcard) { border-radius: 22px; }
.home-page .tcard__body { padding: var(--card-inset); }
.home-page .about__layout .section__head { padding: 0; margin-bottom: 0; }
.home-page .hero__title { line-height: 1.08; font-weight: 700; }
.home-page .hero__sub { line-height: 1.6; }
.home-page .hero__copy, .home-page .hero__media { box-shadow: var(--shadow-rest); }
.home-page .hero__grid { align-items: stretch; }
.home-page .hero__copy { height: auto; min-height: clamp(520px, 58vh, 620px); }
.home-page .hero__media { height: auto; min-width: 0; }
.offer-pill { max-width: 100%; }
.offer-pill__text { white-space: normal; }
.home-page .hero__copy > .eyebrow + .offer-pill { margin-top: 16px; }
.btn, .nav__phone, .link { min-height: 44px; }
.btn { transition: background-color var(--motion-feedback) ease, color var(--motion-feedback) ease, transform var(--motion-feedback) var(--ease-out), box-shadow var(--motion-feedback) ease; }
.btn:active { transform: scale(.98); transition-duration: 100ms; }
.link { transition: color var(--motion-feedback) ease, opacity var(--motion-feedback) ease; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ''; position: absolute; bottom: 6px; inset-inline: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-feedback) var(--ease-out);
}
.nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__sheet { overscroll-behavior: contain; }
.nav__burger span { transition: transform var(--motion-surface) var(--ease-out), opacity var(--motion-feedback) ease; }
.nav--open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.faq__item { overflow: hidden; }
.faq__body { animation: none; }
.faq__item summary { padding-block: 22px; }
.faq__item summary:focus-visible { outline-offset: -4px; }
.faq__item[data-expanded="false"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[data-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.vcard a, .footer__col a { overflow-wrap: anywhere; }
.footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.footer__brand img { flex-shrink: 0; }
.footer__col a { min-height: 32px; display: inline-flex; align-items: center; }
.footer__col .nowrap { white-space: normal; }
.modal__panel { max-height: min(90dvh, 780px); }
.modal__close { width: 44px; height: 44px; top: 10px; right: 10px; }
.modal__panel, .modal__backdrop { animation: none; }
.modal__panel {
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity var(--motion-surface) var(--ease-out), transform var(--motion-surface) var(--ease-out);
}
.modal__backdrop { opacity: 0; transition: opacity var(--motion-surface) ease; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal.is-open .modal__backdrop { opacity: 1; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.js .reveal {
  transform: translateY(14px);
  transition-duration: var(--motion-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible, .js .reveal:focus-within { opacity: 1; transform: none; }
.js .reveal.is-settled { transition-delay: 0ms; }
.js .tcard.reveal.is-settled {
  transition: transform var(--motion-surface) var(--ease-out), box-shadow var(--motion-surface) ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(.98); }
  .nav__links a:hover::after { transform: scaleX(1); }
  .home-page .tcard.is-settled:hover, .home-page .tcard.is-settled:focus-within {
    transform: translateY(-3px); box-shadow: var(--shadow-card);
  }
  .tcard:hover .tcard__media img { transform: scale(1.025); }
  .link:hover .chev { transform: translateX(2px); }
}
@media (max-width: 960px) {
  .home-page .hero__copy { min-height: 0; }
}
@media (max-width: 768px) {
  :root { --page-gutter: 20px; --card-inset: 24px; }
  .nav__inner { gap: 12px; }
  .nav__brand { min-width: 0; gap: 10px; }
  .nav__brand-text { min-width: 0; }
  .nav__sub { font-size: clamp(7px, 2vw, 9px); }
  .nav__name { font-size: clamp(16px, 4.5vw, 19px); white-space: nowrap; }
  .nav--open .nav__burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav--open .nav__burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .home-page .hero { min-height: calc(100svh - var(--nav-h)); }
  .home-page .hero__copy > .eyebrow + .offer-pill { margin-top: 0; }
  .home-page .offer-pill__text { white-space: normal; }
  .home-page .hero__media { margin-inline: calc(-1 * var(--page-gutter)); }
  .home-page .hero__cta .btn--primary { box-shadow: 0 4px 12px var(--blue-soft); }
  .home-page .trust { padding-top: 24px; }
  .home-page .section { padding-block: 40px; }
  .home-page .section__head { margin-bottom: 16px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col a { min-height: 44px; }
}
@media (max-width: 380px) {
  :root { --card-inset: 20px; }
  .home-page .section__head h2 { font-size: 29px; }
  .modal__panel { padding: 36px 16px 20px; }
  .modal__close { top: 6px; right: 6px; width: 34px; height: 34px; }
  .modal__panel h3 { margin-top: 4px; }
  .modal__form form { gap: 8px 10px; margin-top: 12px; }
  .modal__form .field input,
  .modal__form .field select { height: 42px; }
  .modal__form .btn--lg { padding: 12px 20px; font-size: 15px; }
  .daypart span { height: 26px; padding: 0 10px; font-size: 12px; }
  .slots { gap: 4px; }
  .slot span { height: 28px; padding: 0 6px; font-size: 12px; }
  .modal__form .modal__note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible, .js .tcard.reveal.is-settled,
  .home-page .tcard.is-settled:hover, .btn:hover, .btn:active,
  .tcard:hover .tcard__media img, .link:hover .chev,
  .modal__panel, .modal.is-open .modal__panel { transform: none; }
  .js .reveal { opacity: 1; }
}
@media print {
  .js .reveal { opacity: 1; transform: none; }
}

@media (max-width: 960px) { body.is-menu-open { overflow: hidden; } }
@media (max-width: 768px) {
  .footer__col:last-child { grid-column: 1 / -1; }
}

/* 23. Motion & interaction layer: js/motion.js
   --------------------------------------------------------------------------
   Append-only motion layer. Every effect animates transform / opacity /
   clip-path / stroke-dashoffset only, so no rule here can move layout or
   spacing. All movement lives inside (prefers-reduced-motion: no-preference);
   hidden initial states additionally require html.motion-ready, set by
   js/motion.js only when JS + IntersectionObserver are live, so the page
   stays fully visible without JavaScript. Hover-driven motion is gated to
   (hover: hover) and (pointer: fine). */

/* a. Scroll progress bar (element created by motion.js) */
#kdc-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 80;
  pointer-events: none;
  background: linear-gradient(90deg, var(--blue), var(--grad-c) 55%, var(--yellow));
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

/* b. Scrollspy: current section highlighted in the nav (color only) */
.nav__links a.is-active { color: var(--ink); }
.nav__sheet nav a.is-active { color: var(--blue-text); }

/* c. Animated counters: tabular figures; motion.js locks the final width
   before counting so neighbouring words never shift */
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {

  /* d. Hero entrance: blur-to-sharp, slightly longer and softer */
  .js .hero .reveal {
    transition-property: opacity, transform, filter;
    transition-duration: 850ms;
    filter: blur(10px);
  }
  .js .hero .reveal.is-visible { filter: blur(0); }

  /* e. Hero image settles from a gentle zoom (mobile keeps it locked through
     the existing `transform: none !important` rules) */
  @keyframes kdc-hero-zoom {
    from { transform: scale(1.055); }
    to   { transform: none; }
  }
  .js .hero__media :is(img, video) { animation: kdc-hero-zoom 1.5s var(--ease-out) 0.15s both; }

  /* f. One sheen across the offer pill once the entrance settles */
  .offer-pill { position: relative; overflow: hidden; }
  .offer-pill::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: 0;
    width: 34%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: translateX(-170%) skewX(-18deg);
    animation: kdc-sheen 1.1s var(--ease-out) 1.7s 1 both;
    pointer-events: none;
  }
  @keyframes kdc-sheen { to { transform: translateX(430%) skewX(-18deg); } }

  /* g. The two hero tags drift on independent slow loops */
  .hero__media .tag--tl { animation: kdc-float 7s ease-in-out infinite alternate; }
  .hero__media .tag--br { animation: kdc-float 8.5s ease-in-out 1.4s infinite alternate-reverse; }
  @keyframes kdc-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
  }

  /* h. Headline gradient breathes (desktop gradient only, mobile uses a
     flat colour, where this cannot show) */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__accent {
      background-size: 220% 100%;
      animation: kdc-shimmer 9s var(--ease-in-out) infinite;
    }
  }
  @keyframes kdc-shimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
  }

  /* i. Small one-shot pops as content reveals */
  @keyframes kdc-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .js .eyebrow.reveal.is-visible::before { animation: kdc-pop 0.5s var(--ease-out) 0.1s both; }
  .js .hero__proof-rating.is-visible .hero__stars { animation: kdc-pop 0.6s var(--ease-out) 0.55s both; }
  .js .review.is-visible .review__stars { animation: kdc-pop 0.5s var(--ease-out) 0.2s both; }

  /* j. Icons draw themselves in when their card reveals (pathLength is
     normalised to 100 by motion.js) */
  .motion-ready .icon-chip svg :is(path, rect, circle),
  .motion-ready .vcard h3 svg :is(path, rect, circle) {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
  }
  .motion-ready .reveal.is-visible .icon-chip svg :is(path, rect, circle),
  .motion-ready .vcard.reveal.is-visible h3 svg :is(path, rect, circle) {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 700ms var(--ease-out);
  }

  /* k. Editorial image reveal: clip + fade, one shot */
  @keyframes kdc-img-in {
    from { clip-path: inset(10% 8% 10% 8% round 24px); opacity: 0; }
    45%  { opacity: 1; }
    to   { clip-path: inset(0% 0% 0% 0% round 0px); opacity: 1; }
  }
  .motion-ready .tcard.reveal.is-visible .tcard__media img { animation: kdc-img-in 0.9s var(--ease-out) 0.05s backwards; }
  .motion-ready .bento__media.reveal.is-visible img { animation: kdc-img-in 1s var(--ease-out) 0.1s backwards; }
  .motion-ready .visit__media.reveal.is-visible img { animation: kdc-img-in 1s var(--ease-out) 0.1s backwards; }

  /* l. Scroll-parallax headroom (desktop fine pointers only, set by JS) */
  .motion-parallax .bento__media img,
  .motion-parallax .visit__media img { scale: 1.12; will-change: transform; }
  .motion-parallax .home-page .visit__media { overflow: hidden; }

  /* m. Trust strip: cascade the five badges */
  .js .trust .trust__item:nth-child(2).reveal { transition-delay: 60ms; }
  .js .trust .trust__item:nth-child(3).reveal { transition-delay: 120ms; }
  .js .trust .trust__item:nth-child(4).reveal { transition-delay: 180ms; }
  .js .trust .trust__item:nth-child(5).reveal { transition-delay: 240ms; }

  /* n. Buttons: sheen trail + arrow nudge */
  .btn--primary, .btn--inverse { position: relative; overflow: hidden; }
  .btn--primary::after,
  .btn--inverse::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -24%;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-140%) skewX(-20deg);
    transition: transform 650ms var(--ease-out);
    pointer-events: none;
  }
  .btn__arrow { transition: transform 180ms var(--ease-out); }

  /* o. Lift feedback once the reveal has settled (mirrors the existing
     .tcard treatment) */
  .home-page :is(.pillar, .step, .review, .vcard, .bento__cell, .faq__item).reveal.is-settled {
    transition: transform var(--motion-surface) var(--ease-out), box-shadow var(--motion-surface) ease;
  }
  .home-page .trust__item.reveal.is-settled {
    transition: transform var(--motion-surface) var(--ease-out), box-shadow var(--motion-surface) ease;
  }

  /* p. CTA band: slow drifting glow behind the copy */
  .home-page .cta .container { position: relative; overflow: hidden; isolation: isolate; }
  .home-page .cta .container::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
      radial-gradient(38% 55% at 22% 28%, rgba(91, 141, 242, 0.55), transparent 70%),
      radial-gradient(32% 46% at 82% 74%, rgba(247, 212, 52, 0.16), transparent 70%);
    animation: kdc-drift 16s var(--ease-in-out) infinite alternate;
    pointer-events: none;
  }
  @keyframes kdc-drift {
    from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
  }

  /* q. Booking modal: fields cascade in; the success mark draws itself */
  @keyframes kdc-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes kdc-draw { to { stroke-dashoffset: 0; } }
  .modal.is-open .modal__form form > * { animation: kdc-rise 0.5s var(--ease-out) both; }
  .modal.is-open .modal__form form > :nth-child(2) { animation-delay: 50ms; }
  .modal.is-open .modal__form form > :nth-child(3) { animation-delay: 100ms; }
  .modal.is-open .modal__form form > :nth-child(4) { animation-delay: 150ms; }
  .modal.is-open .modal__form form > :nth-child(5) { animation-delay: 200ms; }
  .modal.is-open .modal__form form > :nth-child(n + 6) { animation-delay: 260ms; }

  .modal__success:not([hidden]) .success-mark { animation: kdc-pop 0.6s var(--ease-out) both; }
  .motion-ready .modal__success:not([hidden]) :is(circle, path) {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
  }
  .motion-ready .modal__success:not([hidden]) circle { animation: kdc-draw 0.55s var(--ease-out) 0.15s forwards; }
  .motion-ready .modal__success:not([hidden]) path   { animation: kdc-draw 0.4s var(--ease-out) 0.65s forwards; }
  .modal__success:not([hidden]) h3         { animation: kdc-rise 0.5s var(--ease-out) 0.5s both; }
  .modal__success:not([hidden]) .modal__sub { animation: kdc-rise 0.5s var(--ease-out) 0.62s both; }
  .modal__success:not([hidden]) .btn        { animation: kdc-rise 0.5s var(--ease-out) 0.74s both; }

  /* r. Appearance-toggle icon spins in when it becomes the visible one
     (armed by JS after load so the icon does not spin on first paint) */
  .motion-theme .theme-toggle .icon-moon,
  .motion-theme .theme-toggle .icon-sun { animation: kdc-spin 0.45s var(--ease-out); }
  @keyframes kdc-spin {
    from { transform: rotate(-80deg) scale(0.5); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  /* Hover-only motion: touch devices fire false hovers on tap */
  @media (hover: hover) and (pointer: fine) {
    .btn--primary:hover::after,
    .btn--inverse:hover::after { transform: translateX(480%) skewX(-20deg); }
    .btn--primary:hover .btn__arrow { transform: translateX(3px); }

    .home-page :is(.pillar, .step, .review, .vcard, .bento__cell, .faq__item).reveal.is-settled:hover,
    .home-page :is(.pillar, .step, .review, .vcard, .bento__cell, .faq__item).reveal.is-settled:focus-within {
      transform: translateY(-3px);
      box-shadow: var(--shadow-card);
    }
    .home-page .trust__item.reveal.is-settled:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }
    .chips li {
      transition: transform 180ms var(--ease-out), border-color 180ms ease, color 180ms ease;
    }
    .chips li:hover {
      transform: translateY(-2px);
      border-color: var(--blue-text);
      color: var(--blue-text);
    }
    .faq__item:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); }
  }
}

/* 24. Desktop box system
   --------------------------------------------------------------------------
   Keep the desktop canvas modular without letting fixed card heights or
   hover transforms bleed into the section below. Mobile keeps its dedicated
   reference layout above; these rules only apply to the desktop range. */
@media (min-width: 961px) {
  .home-page {
    --home-gap: clamp(16px, 1.65vw, 24px);
  }

  .home-page > section {
    isolation: isolate;
  }

  .home-page .hero {
    padding-block: clamp(32px, 4.5vw, 56px) clamp(24px, 3vw, 36px);
  }

  .home-page .hero__grid {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--home-gap);
  }

  .home-page .hero__copy,
  .home-page .hero__media {
    height: auto;
    min-height: clamp(500px, 62vh, 600px);
  }

  .home-page .hero__copy {
    justify-content: center;
  }

  .home-page .hero__media {
    display: flex;
    align-items: stretch;
  }

  .home-page .hero__media :is(img, video) {
    height: auto;
    min-height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .home-page .trust {
    padding-bottom: clamp(28px, 3.5vw, 44px);
  }

  .home-page .section {
    padding-block: clamp(52px, 5.5vw, 80px);
  }

  .home-page .section__head {
    margin-bottom: var(--home-gap);
  }

  .home-page .grid,
  .home-page .bento,
  .home-page .about__layout {
    min-width: 0;
  }

  .home-page .pillar,
  .home-page .tcard,
  .home-page .step,
  .home-page .review,
  .home-page .vcard,
  .home-page .bento__cell {
    min-height: 0;
  }

  .home-page .treatments,
  .home-page .reviews,
  .home-page .visit__cards,
  .home-page .steps {
    align-items: stretch;
    grid-auto-rows: minmax(0, auto);
  }

  .home-page .tcard__body {
    min-height: 0;
  }

  .home-page .tcard--cta,
  .home-page .tcard--cta .tcard__body {
    height: 100%;
  }

  .home-page .tcard--cta .tcard__body {
    justify-content: center;
  }

  .home-page .step {
    padding: clamp(22px, 2.1vw, 30px);
  }

  .home-page .review {
    padding: clamp(24px, 2.3vw, 32px);
  }

  .home-page .faq-layout .faq {
    gap: var(--home-gap);
  }

  .home-page .faq__item,
  .home-page .vcard,
  .home-page .visit__media,
  .home-page .cta .container {
    position: relative;
    z-index: 0;
  }

  .home-page .visit__media img {
    display: block;
  }
}

/* 25. Treatment story: centered cards that track page scroll without lag */
.treatment-story { position: relative; min-width: 0; }
.treatment-story__controls { display: none; }
.tcard__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.treatment-story.is-scroll-story .treatment-story__pin {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 58px;
  gap: 12px;
  height: clamp(450px, calc(100svh - var(--nav-h) - 44px), 680px);
}
.treatment-story.is-scroll-story .treatment-story__stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1080px;
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hairline) 74%, transparent);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--blue-soft) 48%, transparent), transparent 62%),
    linear-gradient(145deg, var(--surface), var(--bg-gray));
}
.treatment-story.is-scroll-story .treatment-story__track {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  margin: 0;
}
.home-page .treatment-story.is-scroll-story .tcard {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(500px, calc(100% - 120px));
  height: calc(100% - 24px);
  max-height: 620px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hairline) 82%, transparent);
  border-radius: 24px;
  box-shadow: 0 18px 52px rgba(19, 34, 62, 0.14), 0 2px 8px rgba(19, 34, 62, 0.06);
  transform-origin: center center;
  transition: none;
  will-change: transform, opacity;
}
.home-page .treatment-story.is-scroll-story .tcard[aria-hidden="true"] { pointer-events: none; }
.home-page .treatment-story.is-scroll-story .tcard__media {
  flex: 0 0 clamp(210px, 44%, 320px);
  width: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--bg-gray);
}
.home-page .treatment-story.is-scroll-story .tcard__media img,
.home-page .treatment-story.is-scroll-story .tcard__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-page .treatment-story.is-scroll-story .tcard__body {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  gap: 9px;
  padding: clamp(20px, 2.5vw, 30px);
}
.home-page .treatment-story.is-scroll-story .tcard__body h3 {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.16;
}
.home-page .treatment-story.is-scroll-story .tcard__body p { font-size: 14px; line-height: 1.48; }
.home-page .treatment-story.is-scroll-story .tcard__body .link { padding-top: 4px; }
.home-page .treatment-story.is-scroll-story .tcard--cta .tcard__body { justify-content: center; }

.treatment-story.is-scroll-story .treatment-story__controls,
.treatment-story.is-static-carousel .treatment-story__controls {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 48px 44px;
  align-items: center;
  gap: clamp(4px, 1vw, 12px);
  width: min(100%, 520px);
  min-height: 58px;
  margin-inline: auto;
}
.treatment-story__arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(19, 34, 62, 0.07);
  cursor: pointer;
  transition: background-color var(--motion-feedback) ease, color var(--motion-feedback) ease, opacity var(--motion-feedback) ease;
}
.treatment-story__arrow svg { width: 20px; height: 20px; }
.treatment-story__arrow:disabled { opacity: 0.38; cursor: default; }
.treatment-story__arrow:not(:disabled):active { background: var(--bg-gray); }
.treatment-story__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.treatment-story__dot {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.treatment-story__dot::after {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink-2) 38%, transparent);
  content: "";
  transition: width var(--motion-feedback) ease, background-color var(--motion-feedback) ease;
}
.treatment-story__dot[aria-current="step"]::after {
  width: 17px;
  background: var(--blue);
}
.treatment-story__count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.treatment-story__count-divider { opacity: 0.48; }
@media (hover: hover) and (pointer: fine) {
  .treatment-story__arrow:not(:disabled):hover { background: var(--bg-gray); }
  .treatment-story__dot:hover::after { background: var(--blue); }
}

/* Reduced motion keeps the same cards in a native, still, swipeable gallery. */
.treatment-story.is-static-carousel .treatment-story__pin { position: static; height: auto; }
.treatment-story.is-static-carousel .treatment-story__stage {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  overflow: visible;
}
.treatment-story.is-static-carousel .treatment-story__track {
  display: flex;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 4px max(2px, calc((100% - 380px) / 2)) 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.treatment-story.is-static-carousel .treatment-story__track::-webkit-scrollbar { display: none; }
.home-page .treatment-story.is-static-carousel .tcard {
  flex: 0 0 min(380px, 82vw);
  height: 520px;
  min-height: 0;
  scroll-snap-align: center;
  transition: none;
}
.home-page .treatment-story.is-static-carousel .tcard:not(.is-active) { transform: scale(0.88); opacity: 0.76; }
.home-page .treatment-story.is-static-carousel .tcard.is-active { transform: none; opacity: 1; }
.home-page .treatment-story.is-static-carousel .tcard__media { aspect-ratio: 4 / 3; }
.home-page .treatment-story.is-static-carousel .tcard__body { min-height: 210px; }
.home-page .treatment-story.is-static-carousel .tcard--cta { min-height: 300px; }
.home-page .treatment-story.is-static-carousel .tcard--cta .tcard__body { min-height: 0; }

@media (max-width: 768px) {
  .home-page .treatment-story:is(.is-scroll-story, .is-static-carousel) {
    width: calc(100% + 2 * var(--page-gutter));
    margin-inline: calc(-1 * var(--page-gutter));
  }
  .treatment-story.is-scroll-story .treatment-story__pin {
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 10px);
    grid-template-rows: minmax(0, 1fr) 54px;
    gap: 8px;
    height: clamp(420px, calc(100svh - var(--nav-h) - env(safe-area-inset-top, 0px) - 28px), 650px);
  }
  .treatment-story.is-scroll-story .treatment-story__stage { border-radius: 25px; }
  .home-page .treatment-story.is-scroll-story .tcard {
    width: min(440px, calc(100% - 64px));
    height: calc(100% - 16px);
    border-radius: 22px;
  }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: clamp(180px, 43%, 250px); }
  .home-page .treatment-story.is-scroll-story .tcard__body {
    gap: 7px;
    padding: 20px;
  }
  .home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: clamp(19px, 5vw, 23px); }
  .home-page .treatment-story.is-scroll-story .tcard__body p { font-size: 13.5px; }
  .treatment-story.is-scroll-story .treatment-story__controls,
  .treatment-story.is-static-carousel .treatment-story__controls {
    grid-template-columns: 40px minmax(0, 1fr) 42px 40px;
    gap: 4px;
    width: 100%;
    min-height: 54px;
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }
  .treatment-story__arrow { width: 40px; height: 40px; }
  .treatment-story__dots { gap: 0; }
  .treatment-story__dot { flex-basis: 21px; width: 21px; height: 44px; }
  .treatment-story__count { font-size: 11px; }
  .treatment-story.is-static-carousel .treatment-story__stage { width: 100%; }
  .treatment-story.is-static-carousel .treatment-story__track {
    width: 100%;
    padding-inline: max(20px, calc((100% - min(360px, 84vw)) / 2));
    scroll-padding-inline: max(20px, calc((100% - min(360px, 84vw)) / 2));
  }
  .home-page .treatment-story.is-static-carousel .tcard {
    flex-basis: min(360px, 84vw);
    height: clamp(480px, 130vw, 520px);
  }
  .home-page .treatment-story.is-static-carousel .tcard__body { min-height: 202px; }
}

@media (max-width: 380px) {
  .home-page .treatment-story.is-scroll-story .tcard { width: min(440px, calc(100% - 52px)); }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 40%; }
  .home-page .treatment-story.is-scroll-story .tcard__body { gap: 6px; padding: 17px; }
  .home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: 18px; }
  .home-page .treatment-story.is-scroll-story .tcard__body p { font-size: 12.5px; }
  .home-page .treatment-story.is-scroll-story .tcard__body .link { font-size: 13px; }
  .treatment-story.is-scroll-story .treatment-story__controls,
  .treatment-story.is-static-carousel .treatment-story__controls { grid-template-columns: 36px minmax(0, 1fr) 40px 36px; }
  .treatment-story__arrow { width: 36px; height: 36px; }
  .treatment-story__dot { flex-basis: 19px; width: 19px; }
}

@media (max-height: 640px) {
  .treatment-story.is-scroll-story .treatment-story__pin {
    top: calc(var(--nav-h) + 8px);
    height: clamp(360px, calc(100svh - var(--nav-h) - 24px), 520px);
  }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 40%; }
}
@media (max-width: 640px) and (max-height: 640px) {
  .treatment-story.is-scroll-story .treatment-story__pin {
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
    height: clamp(390px, calc(100svh - var(--nav-h) - env(safe-area-inset-top, 0px) - 20px), 520px);
  }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .treatment-story__arrow,
  .treatment-story__dot::after { transition: none; }
  .treatment-story.is-static-carousel .treatment-story__track { scroll-behavior: auto; }
  .home-page .treatment-story.is-scroll-story.is-reduced-motion .tcard {
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }
  .home-page .treatment-story.is-scroll-story.is-reduced-motion .tcard.is-active {
    transition-delay: 0s;
  }
}

/* Spatial carousel cascade: deliberately after legacy treatment-story rules. */
#treatments { overflow: visible; }
#treatments .container { max-width: min(1500px, 96vw); }
.treatment-story.is-scroll-story { margin-top: clamp(28px, 4vw, 56px); }
.treatment-story.is-scroll-story .treatment-story__pin { top: calc(var(--nav-h) + 8px); height: min(94svh, 720px); min-height: 590px; }
.treatment-story.is-scroll-story .treatment-story__stage { max-width: none; overflow: visible; border: 0; border-radius: 0; background: radial-gradient(ellipse 45% 52% at 50% 50%, rgba(70,138,255,.10), transparent 72%), radial-gradient(ellipse 32% 38% at 70% 32%, rgba(255,204,95,.08), transparent 76%); perspective: 1900px; perspective-origin: 50% 48%; }
.treatment-story.is-scroll-story .treatment-story__track { transform-style: preserve-3d; }
.home-page .treatment-story.is-scroll-story .tcard { width: clamp(620px, 47vw, 710px); height: clamp(500px, 69vh, 575px); max-height: calc(100% - 8px); border: 1px solid rgba(255,255,255,.74); border-radius: 40px; background: rgba(255,255,255,.42); box-shadow: 0 30px 80px rgba(30,60,110,.10), 0 8px 30px rgba(20,50,90,.07), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(120,160,220,.10); backdrop-filter: blur(26px) saturate(130%); -webkit-backdrop-filter: blur(26px) saturate(130%); transition: transform 760ms cubic-bezier(.22,1,.36,1), opacity 680ms cubic-bezier(.22,1,.36,1), filter 680ms cubic-bezier(.22,1,.36,1); }
.home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 61%; border-radius: 32px 32px 21px 21px; }
.home-page .treatment-story.is-scroll-story .tcard__body { gap: 7px; padding: 18px 30px 24px; background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.70)); }
.home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: clamp(25px, 2.2vw, 31px); line-height: 1.08; }
.home-page .treatment-story.is-scroll-story .tcard__body p { font-size: 14px; line-height: 1.42; }
.home-page .treatment-story.is-scroll-story .tcard--cta { background: rgba(255,255,255,.47); }
.home-page .treatment-story.is-scroll-story .tcard--cta .tcard__body { padding: 42px; background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(222,237,255,.55)); }
.home-page .treatment-story.is-scroll-story .tcard--cta h3 { color: var(--ink); }
.home-page .treatment-story.is-scroll-story .tcard--cta p { color: var(--ink-2); }
.home-page .treatment-story.is-scroll-story .tcard--cta .btn { color: #fff; background: var(--blue); }
.treatment-story.is-scroll-story .treatment-story__controls { grid-template-columns: 52px minmax(0,1fr) 48px 52px; gap: 10px; width: min(100%,490px); }
.treatment-story.is-scroll-story .treatment-story__arrow { width: 52px; height: 52px; border-color: rgba(255,255,255,.78); background: rgba(255,255,255,.55); box-shadow: 0 8px 22px rgba(34,63,105,.08), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.treatment-story.is-scroll-story .treatment-story__dots { gap: 5px; }
.treatment-story.is-scroll-story .treatment-story__dot { flex-basis: 17px; width: 17px; }
.treatment-story.is-scroll-story .treatment-story__dot::after { width: 6px; height: 6px; background: rgba(84,100,122,.36); }
.treatment-story.is-scroll-story .treatment-story__dot[aria-current="step"]::after { width: 26px; background: var(--blue); }
@media (max-width: 1199px) { .home-page .treatment-story.is-scroll-story .tcard { width: clamp(530px,65vw,660px); } }
@media (max-width: 768px) {
  #treatments .container { max-width: none; }
  .treatment-story.is-scroll-story .treatment-story__pin { top: calc(var(--nav-h) + 6px); height: min(85svh,650px); min-height: 470px; grid-template-rows: minmax(0,1fr) 50px; gap: 5px; }
  .treatment-story.is-scroll-story .treatment-story__stage { perspective: 1250px; }
  .home-page .treatment-story.is-scroll-story .tcard { width: min(88vw,470px); height: min(70svh,530px); max-height: calc(100% - 4px); border-radius: 30px; }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 58%; border-radius: 24px 24px 16px 16px; }
  .home-page .treatment-story.is-scroll-story .tcard__body { padding: 15px 20px 18px; gap: 5px; }
  .home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: clamp(21px,6vw,27px); }
  .home-page .treatment-story.is-scroll-story .tcard__body p { font-size: 12.5px; }
  .treatment-story.is-scroll-story .treatment-story__controls { grid-template-columns: 44px minmax(0,1fr) 42px 44px; width: min(100%,390px); min-height: 50px; }
  .treatment-story.is-scroll-story .treatment-story__arrow { width: 44px; height: 44px; }
}

/* Keep the sticky mobile carousel in the document scroll context. This must
   follow the mobile home-page shell, which otherwise sets overflow-x:hidden. */
@media (max-width: 768px) {
  .home-page { overflow: visible !important; }
}

/* Content refresh: trust proof, treatment Q&A and campaign entry point. */
.nav__links { gap: clamp(14px, 1.7vw, 22px); }

.rating-spotlight {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 26px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, var(--blue-soft));
  box-shadow: 0 12px 26px rgba(20, 54, 120, 0.08);
}
.rating-spotlight__rating {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}
.rating-spotlight__rating strong { font-size: clamp(40px, 4.5vw, 48px); letter-spacing: -0.045em; }
.rating-spotlight__stars { color: var(--star); font-size: 17px; letter-spacing: 2px; }
.rating-spotlight__scale { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.rating-spotlight a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--blue-text);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.rating-spotlight a:hover { text-decoration: underline; text-underline-offset: 3px; }

.visit__maps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(20px, 3vw, 32px);
}
.map-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline-2);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-rest);
}
.map-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}
.map-card__head h3 { font-size: 18px; letter-spacing: -0.015em; }
.map-card__head a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--blue-text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.map-card__head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.map-card iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 28vw, 340px);
  border: 0;
  background: var(--bg-gray);
}

.review footer span { display: block; margin-top: 4px; color: var(--blue-text); font-size: 12px; }

.faq-topics {
  max-width: 1128px;
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: clamp(36px, 5vw, 58px);
  border-top: 1px solid var(--hairline);
}
.faq-topics__head { max-width: 720px; margin-bottom: 30px; }
.faq-topics__head h3 { font-size: clamp(28px, 4vw, 42px); line-height: 1.08; margin-top: 14px; }
.faq-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(18px, 2vw, 26px);
}
.qa-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(24, 52, 96, 0.055);
}
.qa-card__topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--blue-text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.qa-card h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; margin-top: 20px; }
.qa-card > p:not(.qa-card__price) { color: var(--gray); font-size: 15px; line-height: 1.6; margin-top: 12px; }
.qa-card__price {
  width: fit-content;
  margin-top: 18px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-text);
  font-size: 14px;
  font-weight: 700;
}
.qa-card__item {
  margin-top: 14px;
  border-top: 1px solid var(--hairline-2);
}
.qa-card__item:first-of-type { margin-top: 24px; }
.qa-card__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 15px 0 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
.qa-card__item summary::-webkit-details-marker { display: none; }
.qa-card__item .faq__icon { width: 24px; height: 24px; background: var(--bg-gray); }
.qa-card__item .faq__icon::before,
.qa-card__item .faq__icon::after { width: 10px; }
.qa-card__item > p { padding: 10px 34px 2px 0; color: var(--gray); font-size: 14px; line-height: 1.6; }
.qa-card__item[open] summary { color: var(--blue-text); }

@media (min-width: 761px) {
  /* No-JS fallback: reserve four description lines so chips start near the
     same height; main.js equalises each row exactly. Headings stay natural so
     a one-line heading never leaves a gap before its description. */
  .qa-card > p:not(.qa-card__price) { min-height: 6.4em; }
}

.footer__brand { align-items: flex-start; }
@media (max-width: 760px) {
  .faq-topic-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .rating-spotlight { width: 100%; }
  .visit__maps { grid-template-columns: 1fr; }
  .map-card iframe { height: min(72vw, 320px); min-height: 240px; }
}

@media (max-width: 480px) {
  .rating-spotlight { gap: 4px 10px; padding-right: 12px; }
  .rating-spotlight__stars { font-size: 14px; letter-spacing: 1.5px; }
  .rating-spotlight__scale { font-size: 12px; }
  .rating-spotlight a { min-height: 24px; font-size: 12px; }
  .footer__brand { flex-direction: column; }
}

/* Keep the clinic image in the first mobile viewport without sacrificing the
   rating, treatment headline, or booking actions. */
@media (max-width: 768px) {
  .home-page .hero {
    min-height: 0;
    padding: 14px 0 0;
    overflow: visible;
  }
  .home-page .hero__grid { gap: 0; }
  .home-page .hero__title {
    margin-top: 14px;
    font-size: clamp(35px, 9.5vw, 43px);
    line-height: 1.03;
  }
  .home-page .hero__sub {
    margin-top: 11px;
    font-size: 15.5px;
    line-height: 1.42;
  }
  .home-page .rating-spotlight {
    margin-top: 13px;
    padding: 8px 12px;
    gap: 2px 10px;
    border-radius: 16px;
  }
  .home-page .rating-spotlight__rating { gap: 6px; }
  .home-page .rating-spotlight__rating strong { font-size: clamp(36px, 9vw, 42px); }
  .home-page .rating-spotlight__stars { font-size: 15px; letter-spacing: 1px; }
  .home-page .rating-spotlight__scale { font-size: 13px; }
  .home-page .rating-spotlight a { min-height: 25px; font-size: 12px; }
  .home-page .hero__cta { margin-top: 13px; gap: 9px; }
  .home-page .hero__media {
    flex: 0 0 auto;
    height: clamp(190px, 28svh, 245px);
    min-height: 0;
    margin-top: 13px;
  }
  .home-page .hero__media :is(img, video) {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-position: 70% 18%;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .home-page .hero__title { margin-top: 11px; font-size: clamp(33px, 9vw, 38px); }
  .home-page .hero__sub { margin-top: 8px; }
  .home-page .rating-spotlight { margin-top: 9px; }
  .home-page .hero__cta { margin-top: 9px; }
  .home-page .hero__media { margin-top: 9px; }
}

/* Final viewport-specific refinements from the latest review. */
.hero__cta--mobile { display: none; }
.footer__legal a {
  color: var(--blue-text);
  text-decoration: none;
  text-underline-offset: 3px;
}
.footer__legal a:hover { text-decoration: underline; }

@media (min-width: 1200px) {
  :root { --content-max: min(1600px, 96vw); }
  #treatments .container { max-width: min(1760px, 96vw); }
  .home-page .hero__media :is(img, video) { object-fit: contain; }

  .home-page .treatment-story.is-scroll-story .tcard {
    width: clamp(680px, 52vw, 940px);
    height: clamp(520px, 70vh, 650px);
    max-height: calc(100% - 12px);
  }
  .home-page .treatment-story.is-scroll-story .tcard__media { flex-basis: 56%; }
  .home-page .treatment-story.is-scroll-story .tcard__body { padding: 26px clamp(30px, 3.2vw, 48px) 32px; }
  .home-page .treatment-story.is-scroll-story .tcard__body h3 { font-size: clamp(28px, 2.35vw, 36px); }
  .home-page .treatment-story.is-scroll-story .tcard__body p { font-size: clamp(15px, 1vw, 17px); }
  .treatment-story.is-scroll-story .treatment-story__controls { width: min(100%, 560px); }
}

@media (max-width: 768px) {
  body.has-mobile-booking { padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }

  .home-page .hero__copy > .hero__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
  }

  .home-page .hero__copy > .hero__cta .btn--primary {
    width: min(100%, 380px);
    min-height: 60px;
    height: 60px;
    border-radius: 16px;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(17, 64, 200, 0.28);
  }

  .home-page .hero__copy > .hero__cta .btn__arrow {
    display: block;
    width: 18px;
    height: 18px;
  }

  .home-page .hero__copy > .hero__cta .btn--link {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    color: var(--ink-2);
    border: 0;
    box-shadow: none;
    font-size: 14px;
  }

  .home-page .hero__cta--mobile {
    display: grid;
    position: fixed;
    z-index: 55;
    inset-inline: 0;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px max(var(--page-gutter), env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hairline-2);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 -10px 28px rgba(19, 34, 62, 0.09);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 12px));
    transition: transform 240ms var(--ease-out), opacity 180ms ease, visibility 0s linear 240ms;
  }
  .home-page .hero__cta--mobile.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 240ms var(--ease-out), opacity 180ms ease, visibility 0s;
  }
  .home-page .hero__cta--mobile .btn--primary {
    padding-inline: 12px;
    font-size: 17px;
  }
  .home-page .hero__cta--mobile .btn--link {
    padding-inline: 8px;
    font-size: 14px;
  }
  .home-page .hero__cta--mobile .btn--primary,
  .home-page .hero__cta--mobile .btn--link {
    height: 64px;
    min-height: 64px;
    border-radius: 16px;
  }
  .home-page .hero__cta-call-short { display: none; }
  .home-page .hero__media {
    height: auto;
    min-height: 0;
    margin: 13px calc(-1 * var(--page-gutter)) 0;
    overflow: visible;
  }
  .home-page .hero__media :is(img, video) {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: 1024 / 910;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 380px) {
  .home-page .hero__copy > .hero__cta { margin-top: 14px; }
  .home-page .hero__cta-call-full { display: none; }
  .home-page .hero__cta-call-short { display: inline; }
}

@media (max-width: 640px) and (max-height: 700px) {
  .home-page .hero__copy > .hero__cta { margin-top: 9px; }
}

/* KDC milestones, care highlights and the three-location visit layout. */
.kdc-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-gap);
}
.kdc-milestones__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--hairline-2);
  border-radius: 24px;
  background: var(--surface);
}
.kdc-milestones__item dt {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.4;
}
.kdc-milestones__item dd {
  order: -1;
  color: var(--blue-text);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kdc-milestones__item--featured { background: var(--blue); border-color: transparent; }
.kdc-milestones__item--featured :is(dt, dd) { color: #fff; }
.kdc-care-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-gap);
  margin-top: var(--home-gap);
}
.kdc-care-highlight {
  padding: var(--card-inset);
  border: 1px solid var(--hairline-2);
  border-radius: 24px;
  background: var(--surface);
}
.kdc-care-highlight__label {
  color: var(--blue-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.kdc-care-highlight h3 { margin-top: 14px; font-size: 22px; line-height: 1.2; }
.kdc-care-highlight h3 + p { margin-top: 14px; color: var(--gray); font-size: 15px; line-height: 1.6; }
.kdc-locations-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 20px 24px;
  margin-top: var(--home-gap);
  border: 1px solid var(--hairline-2);
  border-radius: 20px;
  background: var(--surface);
  font-size: 15px;
}
.kdc-locations-note > span { color: var(--ink-2); }
.kdc-locations-note .link { margin-left: auto; }
.kdc-review-ratings { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kdc-review-ratings > p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--bg-gray);
}
.kdc-review-ratings > p > span { font-size: 14px; color: var(--ink-2); }
.kdc-review-ratings strong { font-size: 22px; letter-spacing: -0.02em; }
.home-page .visit__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-page .visit__cards > .vcard { grid-column: auto; }
@media (max-width: 1080px) {
  .home-page .visit__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .kdc-care-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kdc-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kdc-milestones__item { gap: 8px; padding: 22px 18px; border-radius: 20px; }
  .kdc-milestones__item dd { font-size: clamp(29px, 8vw, 42px); }
  .kdc-milestones__item dt { font-size: 13px; }
  .kdc-care-highlight h3 { font-size: 21px; }
  .kdc-locations-note { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
  .kdc-locations-note .link { margin-left: 0; }
  .kdc-review-ratings { flex-direction: column; }
  .kdc-review-ratings > p { width: 100%; }
  .home-page .visit__cards { grid-template-columns: 1fr; }
}

/* Desktop alignment: keep section edges and card content on one grid. */
@media (min-width: 961px) {
  :root { --content-max: 1320px; }

  #treatments .container { max-width: var(--content-max); }

  .nav__inner { gap: 20px; }
  .nav__brand, .nav__actions { flex-shrink: 0; }
  .nav__links { gap: clamp(12px, 1.2vw, 18px); }
  .nav__links a, .nav__actions .btn { white-space: nowrap; }
  .nav__actions { gap: 12px; }

  .home-page .hero__copy { min-width: 0; }
  .home-page .hero__media { position: relative; }
  .home-page .hero__media :is(img, video) {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    min-height: 0;
    object-fit: cover;
  }
  .home-page .hero__proof { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .home-page .hero__proof-group { white-space: normal; }

  /* Clip offstage cards without changing the sticky scroll container. */
  .treatment-story.is-scroll-story .treatment-story__stage { overflow: clip; }
  .home-page .treatment-story.is-scroll-story .tcard {
    width: clamp(540px, 52vw, 760px);
  }

  .home-page .about__layout,
  .home-page .cta .container {
    max-width: calc(var(--content-max) - 2 * var(--page-gutter));
    width: calc(100% - 2 * var(--page-gutter));
    padding-inline: var(--card-inset);
  }
  .home-page .about__layout { gap: clamp(32px, 4vw, 64px); }
  .faq-topics { max-width: none; }
  .team__leaders, .team__grid { gap: var(--home-gap); }
  .home-page .visit__maps { gap: var(--home-gap); margin-top: var(--home-gap); }
  .home-page .vcard { display: flex; flex-direction: column; align-items: flex-start; }
  .home-page .vcard > .link { margin-top: auto; }
  .home-page .vcard > p:last-of-type { margin-bottom: 16px; }

  @supports (grid-template-rows: subgrid) {
    .kdc-care-highlights { row-gap: 14px; }
    .kdc-care-highlight {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 14px;
    }
    .kdc-care-highlight h3,
    .kdc-care-highlight h3 + p { margin-top: 0; }
  }
}

@media (min-width: 961px) and (max-width: 1199px) {
  .nav__phone { display: none; }
  .home-page .hero__copy { padding: 28px; }
}

/* Dark appearance for the treatment carousel's glass cards only. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .treatment-story {
    --treatment-card-surface: rgba(29, 31, 38, 0.96);
    --treatment-card-body: linear-gradient(180deg, #252832, #1d1f26);
    --treatment-card-cta: linear-gradient(145deg, #27334b, #1d1f26);
    --treatment-card-border: rgba(255, 255, 255, 0.16);
    --treatment-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --treatment-card-copy: #c3c7d0;
    --treatment-card-link: #a4c0ff;
  }
}
:root[data-theme="dark"] .treatment-story {
  --treatment-card-surface: rgba(29, 31, 38, 0.96);
  --treatment-card-body: linear-gradient(180deg, #252832, #1d1f26);
  --treatment-card-cta: linear-gradient(145deg, #27334b, #1d1f26);
  --treatment-card-border: rgba(255, 255, 255, 0.16);
  --treatment-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --treatment-card-copy: #c3c7d0;
  --treatment-card-link: #a4c0ff;
}
.home-page .treatment-story.is-scroll-story .tcard {
  background: var(--treatment-card-surface, rgba(255, 255, 255, 0.42));
  border-color: var(--treatment-card-border, rgba(255, 255, 255, 0.74));
  box-shadow: var(--treatment-card-shadow, 0 30px 80px rgba(30, 60, 110, 0.10), 0 8px 30px rgba(20, 50, 90, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(120, 160, 220, 0.10));
}
.home-page .treatment-story.is-scroll-story .tcard__body {
  background: var(--treatment-card-body, linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.70)));
}
.home-page .treatment-story.is-scroll-story .tcard--cta {
  background: var(--treatment-card-surface, rgba(255, 255, 255, 0.47));
}
.home-page .treatment-story.is-scroll-story .tcard--cta .tcard__body {
  background: var(--treatment-card-cta, linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(222, 237, 255, 0.55)));
}
.home-page .treatment-story.is-scroll-story .tcard__body p { color: var(--treatment-card-copy, var(--ink-2)); }
.home-page .treatment-story.is-scroll-story .tcard__body .link { color: var(--treatment-card-link, var(--blue)); }

/* Hero video (living-painting horse): 16:9 source, subject sits right of centre,
   so always cover the frame and bias the crop toward the horse. */
.home-page .hero__media video {
  object-fit: cover;
  object-position: 68% 40%;
  background: #eaf2fb;
}