/*
Theme Name:   Sapphire Hair Studio
Theme URI:    https://www.sapphirehairstudio.com/
Author:       Sapphire Hair Studio
Description:  Premium hair restoration theme. Every colour, font, banner, treatment, surgeon, case, story and FAQ is editable from the WordPress dashboard — no code required. Brand colours are emitted as CSS custom properties, so changing one token in the Customizer restyles the whole site live.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sapphire
Tags:         one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options, translation-ready
*/

/* ==========================================================================
   The brand stylesheet follows verbatim.

   Colour, font and spacing tokens live in section 1 as CSS custom properties.
   The Customizer overrides those same properties from an inline <style> block
   printed after this file, so nothing here needs editing to rebrand the site —
   see inc/dynamic-css.php.
   ========================================================================== */

/* =============================================================
   SAPPHIRE HAIR STUDIO
   Brand stylesheet — design tokens, typography, components,
   custom carousels, before/after slider and motion.
   Tailwind handles generic layout utilities; everything with a
   brand opinion lives here.
   ============================================================= */

/* -------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------- */
:root {
  --navy:        #183665;
  --navy-dark:   #0D1F3C;
  --navy-deep:   #0A1830;
  --gold:        #D4A653;
  --gold-light:  #E8C985;
  --warm-white:  #FCFBF8;
  --cream:       #F5F1E8;
  --charcoal:    #242424;
  --gray:        #5E5E5E;
  --white:       #FFFFFF;

  --rule:        rgba(24, 54, 101, 0.14);
  --rule-strong: rgba(24, 54, 101, 0.26);
  --rule-gold:   rgba(212, 166, 83, 0.42);
  --rule-light:  rgba(255, 255, 255, 0.14);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell:   1320px;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 8.5vw, 8.5rem);

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);

  /* A single grade applied to all photography. Stock imagery arrives at
     wildly different saturations; holding them to one grade is what makes
     a page of mixed sources read as one commission. */
  --img-tone:       saturate(0.84) contrast(1.06);
  --img-tone-hover: saturate(1) contrast(1);
  --header-h: 78px;
}

/* -------------------------------------------------------------
   2 · BASE
   ------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.89rem + 0.2vw, 1.0625rem);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a  { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p  { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
figure, dl, dd, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }

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

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

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

.skip-link {
  position: fixed; top: 0; left: 50%; z-index: 200;
  transform: translate(-50%, -110%);
  background: var(--navy); color: var(--white);
  padding: 0.85rem 1.75rem;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* -------------------------------------------------------------
   3 · LAYOUT PRIMITIVES
   ------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--cream { background: var(--cream); }
.section--navy  { background: var(--navy-dark); color: rgba(255, 255, 255, 0.78); }

section[id], main [id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* -------------------------------------------------------------
   4 · TYPOGRAPHY
   ------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::before {
  content: "";
  width: clamp(22px, 3vw, 34px);
  height: 1px;
  background: var(--gold);
  flex: none;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.9rem);
  line-height: 1.07;
  letter-spacing: -0.014em;
  color: var(--navy);
  margin-top: 1.15rem;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}
.section-title--light { color: var(--white); }

.section-head { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }

.section-head__copy {
  max-width: 46ch;
  margin-top: 1.35rem;
  color: var(--gray);
}
.section-head__copy--center { margin-inline: auto; }

.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-title { margin-bottom: 1.5rem; }

/* A head that sits inside a column rather than across the page keeps its
   lead and copy stacked — the two-column split below would otherwise squeeze
   the title into half of an already narrow column. */
.section-head--stack { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (min-width: 900px) {
  .section-head:not(.section-head--center):not(.section-head--split):not(.section-head--stack) {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: end;
  }
  .section-head__copy { margin-top: 0; padding-bottom: 0.5rem; }
}

.section-head--split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .section-head--split { flex-direction: row; align-items: flex-end; }
}

/* Diamond motif — echoes the tips of the logo emblem */
.diamond {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}
.diamond--gold { background: var(--gold); }

/* -------------------------------------------------------------
   5 · BUTTONS & LINKS
   ------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 54px;
  padding: 0 clamp(1.5rem, 2.4vw, 2.25rem);
  border: 1px solid transparent;
  border-radius: 1px;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-dark); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--navy); background: rgba(24, 54, 101, 0.04); }

.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: var(--gold-light); }
.btn--gold::after { background: var(--navy-deep); }

.btn--sm { min-height: 46px; padding: 0 1.35rem; font-size: 0.67rem; }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.link-arrow {
  position: relative;
  padding-bottom: 3px;
}
.link-arrow::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.link-arrow:hover::before,
a:hover .link-arrow::before { transform: scaleX(1); }
.link-arrow svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.45s var(--ease);
}
.link-arrow--navy { color: var(--navy); }
.link-arrow--gold { color: var(--gold); }
.link-arrow:hover svg, a:hover .link-arrow svg { transform: translateX(7px); }

/* Offset hairline frame used behind key photography */
.framed { position: relative; }
.framed img { position: relative; z-index: 1; width: 100%; }
.framed::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--rule-gold);
}
@media (max-width: 767px) {
  .framed::before { inset: 14px -14px -14px 14px; }
}

/* -------------------------------------------------------------
   6 · SCROLL REVEAL
   ------------------------------------------------------------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
   7 · OFFER CAROUSEL
   ------------------------------------------------------------- */
.offer-bar {
  background: var(--navy);
  color: var(--white);
  position: relative;
  z-index: 60;
}
.offer-bar__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.offer-bar__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
}
.offer-bar__arrow:hover { color: var(--gold); }
.offer-bar__arrow svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.offer-bar__viewport {
  position: relative;
  flex: 1 1 auto;
  height: 44px;
  overflow: hidden;
}
.offer-bar__track { height: 100%; }
.offer-bar__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.offer-bar__item .diamond { background: var(--gold); }
.offer-bar__item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (max-width: 480px) {
  .offer-bar__item { font-size: 0.6rem; letter-spacing: 0.09em; gap: 0.5rem; }
  .offer-bar__inner { padding-inline: 0.5rem; }
}

/* -------------------------------------------------------------
   8 · HEADER / NAVIGATION
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 251, 248, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}
.site-header.is-stuck {
  background: rgba(252, 251, 248, 0.97);
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 30px -24px rgba(13, 31, 60, 0.55);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
}
.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand__mark { width: auto; height: 42px; flex: none; }
.brand__text { display: grid; gap: 2px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
}
.brand__sub {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gray);
}
.brand--light .brand__name { color: var(--white); }
.brand--light .brand__sub  { color: rgba(255, 255, 255, 0.5); }
@media (max-width: 400px) {
  .brand__mark { height: 34px; }
  .brand__name { font-size: 1.05rem; letter-spacing: 0.16em; }
  .brand__sub  { font-size: 0.5rem; letter-spacing: 0.26em; }
}

/* Desktop nav */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--navy); }

@media (min-width: 1100px) {
  .nav { display: block; }
}

/* Hamburger */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-right: -8px;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars i {
  display: block;
  height: 1px;
  background: var(--navy);
  transition: transform 0.4s var(--ease), opacity 0.25s ease, width 0.4s var(--ease);
}
.nav-toggle__bars i:nth-child(2) { width: 70%; margin-left: auto; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; width: 100%; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1100px) { .nav-toggle { display: none; } }

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav.is-open { visibility: visible; pointer-events: auto; }
.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 48, 0.5);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }

.mobile-nav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  display: flex;
  flex-direction: column;
  padding: 1.5rem clamp(1.5rem, 6vw, 2.5rem) 2rem;
  background: var(--warm-white);
  border-left: 1px solid var(--rule-gold);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav__panel { transform: none; }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: 1.25rem;
}
.mobile-nav__close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--navy); }
.mobile-nav__close svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round;
}

.mobile-nav__list { border-top: 1px solid var(--rule); }
.mobile-nav__list li { border-bottom: 1px solid var(--rule); }
.mobile-nav__list a {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--navy);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s ease;
}
.mobile-nav.is-open .mobile-nav__list a { opacity: 1; transform: none; }
.mobile-nav__list a:hover { color: var(--gold); }
.mobile-nav__list li:nth-child(1) a { transition-delay: 0.10s; }
.mobile-nav__list li:nth-child(2) a { transition-delay: 0.15s; }
.mobile-nav__list li:nth-child(3) a { transition-delay: 0.20s; }
.mobile-nav__list li:nth-child(4) a { transition-delay: 0.25s; }
.mobile-nav__list li:nth-child(5) a { transition-delay: 0.30s; }
.mobile-nav__list li:nth-child(6) a { transition-delay: 0.35s; }
.mobile-nav__list li:nth-child(7) a { transition-delay: 0.40s; }

.mobile-nav__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.mobile-nav__tel {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}

/* -------------------------------------------------------------
   8b · DROPDOWN NAVIGATION

   Treatments carries its procedures as children. The panel opens on
   hover for a mouse and on the caret button for keyboard and touch,
   which is the only way a pointer-less user reaches it at all.
   ------------------------------------------------------------- */
.nav__list > li { position: relative; }

.nav__list .nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  min-width: 250px;
  margin: 0;
  padding: 0.6rem 0;
  transform: translate(-50%, 8px);
  background: var(--warm-white);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 48px -30px rgba(13, 31, 60, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
/* A gold hairline across the top, echoing the section rules. */
.nav__list .nav__sub::before {
  content: "";
  position: absolute;
  inset: -1px auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
}
.nav__list > li:hover > .nav__sub,
.nav__list > li:focus-within > .nav__sub,
.nav__list > li.is-open > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__sub li { display: block; }
.nav__sub a {
  display: block;
  padding: 0.62rem clamp(1.1rem, 2vw, 1.5rem);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--charcoal);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s var(--ease);
}
.nav__sub a::before { display: none; }
.nav__sub a:hover,
.nav__sub a:focus-visible {
  background: var(--cream);
  color: var(--navy);
  padding-left: calc(clamp(1.1rem, 2vw, 1.5rem) + 5px);
}
.nav__sub .is-current { color: var(--navy); background: var(--cream); }

/* The caret. Hidden from a mouse — hover already opens the panel — but
   always reachable by keyboard, and the whole control on touch. */
.nav__toggle {
  display: none;
  padding: 0 0 0 0.3rem;
  color: inherit;
  vertical-align: middle;
}
.nav__toggle svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
.nav__list > li.is-open > .nav__toggle svg { transform: rotate(180deg); }
@media (hover: none), (pointer: coarse) {
  .nav__toggle { display: inline-block; }
}
.nav__toggle:focus-visible { display: inline-block; }

/* ---- Mobile panel: children sit indented under their parent ---- */
.mobile-nav__list .nav__sub {
  position: static;
  min-width: 0;
  margin: 0.35rem 0 0.6rem;
  padding: 0 0 0 1.15rem;
  transform: none;
  opacity: 1;
  visibility: visible;
  background: none;
  border: 0;
  border-left: 1px solid var(--rule-gold);
  box-shadow: none;
}
.mobile-nav__list .nav__sub::before { display: none; }
.mobile-nav__list .nav__sub a {
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gray);
  white-space: normal;
}
.mobile-nav__list .nav__sub a:hover { background: none; color: var(--navy); padding-left: 4px; }
.mobile-nav__list .nav__toggle { display: none; }

/* -------------------------------------------------------------
   9 · HERO CAROUSEL
   Slides are stacked in one grid cell so the section keeps a
   stable height and cross-fades without any layout shift.
   ------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(1.5rem, 2.4vw, 2.25rem) clamp(2rem, 3.5vw, 3rem);
  --hero-duration: 6500ms;
}

/* Full-bleed image slider: the slides carry photography only, run edge to
   edge, and the track is translated in pixels. */
.hero__viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  animation: heroIn 0.9s var(--ease) both;
}
.hero__viewport.is-dragging { cursor: grabbing; }


.hero__track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}
.hero__track.is-animating { transition: transform 0.7s var(--ease); }

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
  opacity: 0.32;
  transition: opacity 0.55s var(--ease);
}
.hero__slide.is-active { opacity: 1; }

/* No grade, scrim or vignette over the hero: any overlay would dull the type
   and faces that are part of the artwork. */

/* These are finished marketing banners with the logo, headline, icon row and
   call to action baked into the artwork, so every pixel carries content and
   nothing may ever be cropped. Each campaign therefore ships in two layouts
   and the markup swaps between them with <picture>:

     < 768px   hero-N-mobile.jpg   1200x839   (1.43:1 portrait-ish cut)
     >= 768px  hero-N.jpg          1600x500   (16:5 desktop band)

   The ratios below must stay in step with the <source media> query in
   index.html — they are what reserves the right box before the file lands, so
   the track never jumps height on load. No grade either: the banners arrive
   already brand-coloured. */
.hero__slide picture { display: block; }

.hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;

  /* Phones get the tall cut, shown whole: a 16:5 banner is only ~120px high at
     390px wide, which leaves the baked-in body copy and icon labels unreadable. */
  aspect-ratio: 1200 / 839;
}
@media (min-width: 768px) {
  .hero__slide img { aspect-ratio: 1600 / 500; }
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Oversized edge arrows, vertically centred on the image */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: none;
  place-items: center;
  width: clamp(40px, 3.4vw, 54px);
  height: clamp(40px, 3.4vw, 54px);
  padding: 0;
  transform: translateY(-50%);
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 2px 16px rgba(13, 31, 60, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease),
              transform 0.4s var(--ease), opacity 0.35s var(--ease);
}
.hero__arrow svg {
  width: 40%;
  height: 40%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__arrow:hover { background: var(--white); color: var(--gold); }
.hero__arrow--prev { left: clamp(0.75rem, 1.8vw, 2rem); }
.hero__arrow--next { right: clamp(0.75rem, 1.8vw, 2rem); }
.hero__arrow--prev:hover { transform: translate(-5px, -50%); }
.hero__arrow--next:hover { transform: translate(5px, -50%); }
.hero__arrow:focus-visible { outline-offset: 6px; }
.hero.is-moving .hero__arrow { opacity: 0; pointer-events: none; }
@media (min-width: 1024px) {
  .hero__arrow { display: grid; }
  .hero__foot .hero__compact { display: none; }
}

/* Shared footer row: services on the left, carousel controls on the right */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.25rem, 2.2vw, 1.85rem);
  padding-top: clamp(1.1rem, 1.7vw, 1.4rem);
  border-top: 1px solid var(--rule);
}

.hero__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.hero__services li { display: flex; align-items: center; gap: 1.1rem; }
.hero__services li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero__controls { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem); }

.hero__markers { display: flex; align-items: center; gap: 0.45rem; }
.hero__marker {
  display: grid;
  place-items: center;
  padding: 0.9rem 0.25rem;
}
.hero__marker-line {
  position: relative;
  display: block;
  width: clamp(34px, 4vw, 54px);
  height: 2px;
  background: rgba(24, 54, 101, 0.16);
  overflow: hidden;
}
.hero__marker-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero__marker:hover .hero__marker-line { background: rgba(24, 54, 101, 0.4); }
@keyframes heroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__marker.is-active .hero__marker-line::after {
  animation: heroProgress var(--hero-duration) linear both;
}
.hero.is-paused .hero__marker.is-active .hero__marker-line::after { animation-play-state: paused; }
.hero.is-static .hero__marker.is-active .hero__marker-line::after { animation: none; transform: scaleX(1); }

.hero__counter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--gray);
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__counter span { color: var(--navy); }

.round-btn--sm { width: 42px; height: 42px; }
.round-btn--sm svg { width: 15px; height: 15px; }

@media (max-width: 639px) {
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__controls { width: 100%; }
  .hero__controls .carousel-controls { margin-left: auto; }
}

/* -------------------------------------------------------------
   10 · STATISTICS STRIP
   ------------------------------------------------------------- */
.stats {
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  border-block: 1px solid var(--rule);
  background: var(--warm-white);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.stat {
  display: grid;
  gap: 0.4rem;
  padding-inline: clamp(0.75rem, 3vw, 2rem);
  text-align: center;
}
.stat { position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 62%;
  background: var(--rule);
}
.stat:nth-child(3)::before { display: none; }

.stat__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__value--word { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-style: italic; }
.stat__suffix { color: var(--gold); }
.stat__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}

@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(3)::before { display: block; }
}

/* -------------------------------------------------------------
   11 · TREATMENTS
   ------------------------------------------------------------- */
.treatments {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3rem);
}
@media (min-width: 860px) {
  .treatments { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem); }
}

.treatment__link { display: block; }
.treatment__media { position: relative; overflow: hidden; background: var(--cream); }
.treatment__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy);
  opacity: 0.17;
  mix-blend-mode: color;
  transition: opacity 0.7s var(--ease);
}
.treatment__link:hover .treatment__media::after { opacity: 0; }
.treatment__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.7s ease;
  filter: var(--img-tone);
}
.treatment__link:hover .treatment__media img { transform: scale(1.055); filter: var(--img-tone-hover); }

.treatment__body { position: relative; padding-top: 1.6rem; }
.treatment__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.treatment__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.05rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy);
  margin-top: 0.45rem;
}
.treatment__meta {
  margin-top: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}
.treatment__copy {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
}
.treatment .link-arrow { margin-top: 1.25rem; }

.treatments__foot {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2rem, 3vw, 2.75rem);
  border-top: 1px solid var(--rule);
  text-align: center;
}

/* -------------------------------------------------------------
   12 · BEFORE & AFTER SLIDER
   ------------------------------------------------------------- */
.ba { max-width: 1120px; margin-inline: auto; }

.ba__layout { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .ba__layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
}

.ba__frame {
  --ba-pos: 50%;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy-dark);
  border-radius: 1px;
  touch-action: pan-y;
}
.ba__frame:focus-within { outline: 2px solid var(--gold); outline-offset: 4px; }

.ba__img {
  filter: var(--img-tone);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.ba__img--after { clip-path: inset(0 0 0 var(--ba-pos)); }

.ba__tag {
  position: absolute;
  top: clamp(0.85rem, 2vw, 1.35rem);
  z-index: 3;
  padding: 0.4rem 0.85rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(13, 31, 60, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ba__tag--before { left: clamp(0.85rem, 2vw, 1.35rem); }
.ba__tag--after  { right: clamp(0.85rem, 2vw, 1.35rem); background: rgba(212, 166, 83, 0.94); color: var(--navy-deep); }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  z-index: 4;
  width: 1px;
  background: rgba(255, 255, 255, 0.88);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(46px, 8vw, 56px);
  height: clamp(46px, 8vw, 56px);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.ba__grip svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--navy-deep); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 900px; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 56px; height: 900px; border: 0; cursor: ew-resize; }

/* Case rail */
.ba__aside-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1rem;
}

.ba__tabs { display: grid; border-top: 1px solid var(--rule-strong); }
.ba__tab {
  display: flex;
  align-items: baseline;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  width: 100%;
  padding: clamp(0.9rem, 1.8vw, 1.25rem) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  color: var(--gray);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.ba__tab-index {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  flex: none;
}
.ba__tab-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 500;
  line-height: 1.25;
  transition: color 0.35s ease;
}
.ba__tab:hover .ba__tab-name { color: var(--navy); }
.ba__tab.is-active { color: var(--navy); border-bottom-color: var(--gold); }
.ba__tab.is-active .ba__tab-name { color: var(--navy); }

.ba__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.ba__meta dt {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}
.ba__meta dd {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
  margin-top: 0.25rem;
}

.ba__foot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--rule);
}
.ba__note { margin-top: 1rem; font-size: 0.72rem; line-height: 1.6; color: var(--gray); }

@media (max-width: 899px) {
  .ba__frame { aspect-ratio: 1 / 1; }
}

/* -------------------------------------------------------------
   13 · TRANSFORMATION WALL

   A scroll-snap rail rather than a translated track: the cards are
   square artwork of a fixed count, so letting the browser own the
   scrolling gives momentum, trackpads, screen-reader scrolling and
   the arrow buttons for free, and the same markup shows 1, 2 or 3
   cards purely from the flex basis below.
   ------------------------------------------------------------- */
.transformations { --tw-gap: clamp(0.9rem, 1.8vw, 1.75rem); }

.tw { position: relative; }

.tw__rail {
  display: flex;
  gap: var(--tw-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.35rem;
}
.tw__rail::-webkit-scrollbar { display: none; }
.tw__rail:focus-visible { outline-offset: 6px; }

/* One card and a peek of the next on phones — the peek is what tells
   someone the rail scrolls — then two, then three. Cards snap to the
   start edge at every width so the position the arrows scroll to and the
   position the browser snaps to are the same one. */
.tw__card {
  flex: 0 0 min(80%, 400px);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .tw__card { flex-basis: calc((100% - var(--tw-gap)) / 2); }
}
@media (min-width: 1024px) {
  .tw__card { flex-basis: calc((100% - 2 * var(--tw-gap)) / 3); }
}

.tw__card figure {
  height: 100%;
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}
.tw__card figure:hover { transform: translateY(-4px); }

/* No --img-tone here, for the same reason as the hero: these are finished
   brand graphics, already colour-managed, with type baked into the pixels. */
.tw__card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cream);
  border: 1px solid var(--rule);
}

.tw__card figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-top: 0.95rem;
}
.tw__case {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.tw__label { font-size: 0.85rem; line-height: 1.5; color: var(--gray); }

.tw__dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.tw__dot {
  width: 7px; height: 7px;
  background: var(--rule-strong);
  transform: rotate(45deg);
  transition: background-color 0.35s ease, transform 0.35s var(--ease);
}
.tw__dot.is-active { background: var(--gold); transform: rotate(45deg) scale(1.45); }

.tw__note {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--gray);
  text-align: center;
}

/* Phones: break the rail out of the shell gutter so a card can sit centred
   with its neighbours peeking past both page edges. */
@media (max-width: 639px) {
  .tw__rail {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* -------------------------------------------------------------
   14 · WHY SAPPHIRE
   ------------------------------------------------------------- */
.why__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) {
  .why__grid { grid-template-columns: 0.85fr 1fr; gap: clamp(3.5rem, 7vw, 7rem); }
}
.why__media .framed::before { border-color: rgba(212, 166, 83, 0.55); }
.why__media img { aspect-ratio: 4 / 5; object-fit: cover; filter: var(--img-tone); }

.benefits { margin-top: clamp(2.25rem, 4vw, 3rem); }
.benefit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.35rem, 2.5vw, 1.9rem);
  border-top: 1px solid var(--rule-light);
}
.benefit:last-child { border-bottom: 1px solid var(--rule-light); }
.benefit__index {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  padding-top: 0.15rem;
}
.benefit__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.25;
}
.benefit__copy { margin-top: 0.4rem; color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }

/* -------------------------------------------------------------
   15 · TREATMENT JOURNEY
   ------------------------------------------------------------- */
.timeline { display: grid; }

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
  opacity: 0.28;
  transition: opacity 0.7s var(--ease), color 0.7s var(--ease);
}
.step.is-visible .step__num { opacity: 1; }

.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 500;
  color: var(--navy);
}
.step__copy { margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.65; color: var(--gray); }

/* Mobile: vertical timeline */
@media (max-width: 899px) {
  .step {
    position: relative;
    padding-left: 2.25rem;
    padding-bottom: 2.25rem;
    border-left: 1px solid var(--rule);
  }
  .step:last-child { border-left-color: transparent; padding-bottom: 0; }
  .step::before {
    content: "";
    position: absolute;
    left: 0; top: 0.6rem;
    width: 9px; height: 9px;
    background: var(--gold);
    transform: translateX(-50%) rotate(45deg) scale(0);
    transition: transform 0.6s var(--ease);
  }
  .step.is-visible::before { transform: translateX(-50%) rotate(45deg) scale(1); }
  .step__dot { display: none; }
  .step__num { font-size: 1.05rem; letter-spacing: 0.16em; color: var(--gold); opacity: 1; }
  .step__title { margin-top: 0.35rem; }
}

/* Desktop: horizontal timeline */
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(6, 1fr); }
  .step { position: relative; }
  .step__num,
  .step__title,
  .step__copy { padding-right: clamp(1rem, 2vw, 2rem); }

  .step__dot {
    position: relative;
    display: block;
    height: 1px;
    margin: 1.35rem 0 1.6rem;
  }
  .step__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rule);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--ease);
  }
  .step__dot::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 9px; height: 9px;
    background: var(--gold);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform 0.6s var(--ease) 0.15s;
    z-index: 1;
  }
  .step.is-visible .step__dot::after  { transform: scaleX(1); }
  .step.is-visible .step__dot::before { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  .step:last-child .step__dot::after { display: none; }
}

/* -------------------------------------------------------------
   16 · DOCTORS
   ------------------------------------------------------------- */
.doctors { display: grid; gap: clamp(2.75rem, 4vw, 3.25rem); }
@media (min-width: 860px) { .doctors { grid-template-columns: repeat(3, 1fr); } }

.doctor__media { overflow: hidden; background: var(--warm-white); }
.doctor__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.5) saturate(0.84) contrast(1.06);
  transition: transform 1.1s var(--ease), filter 0.8s ease;
}
.doctor:hover .doctor__media img { transform: scale(1.04); filter: var(--img-tone-hover); }

.doctor__body { padding-top: 1.5rem; }
.doctor__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy);
}
.doctor__role {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.doctor__spec {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--charcoal);
}
.doctor__creds { margin-top: 0.6rem; display: grid; gap: 0.2rem; }
.doctor__creds li { font-size: 0.82rem; line-height: 1.6; color: var(--gray); }
.doctor .link-arrow { margin-top: 1.15rem; }

/* -------------------------------------------------------------
   17 · PATIENT STORIES CAROUSEL
   ------------------------------------------------------------- */
.carousel-controls { display: flex; gap: 0.6rem; }
.round-btn {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.round-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.round-btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.stories__viewport { overflow: hidden; }
.stories__track {
  display: flex;
  transition: transform 0.75s var(--ease);
  will-change: transform;
}
.story {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 640px) {
  .story { grid-template-columns: 0.72fr 1fr; }
}

.story__media { overflow: hidden; background: var(--cream); }
.story__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: var(--img-tone); }

.rating { display: flex; gap: 0.5rem; }
.rating .diamond { width: 7px; height: 7px; }
.story__quote {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-top: 1.1rem;
  text-wrap: balance;
}
.story__copy { margin-top: 1.1rem; max-width: 52ch; color: var(--gray); }
.story__name {
  margin-top: 1.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.story__name span { color: var(--gray); font-weight: 400; }
.story__name span::before { content: "— "; }

.story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}
.story__meta dt {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}
.story__meta dd {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--navy);
}

.stories__dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.stories__dot {
  width: 7px; height: 7px;
  background: var(--rule-strong);
  transform: rotate(45deg);
  transition: background-color 0.35s ease, transform 0.35s var(--ease);
}
.stories__dot.is-active { background: var(--gold); transform: rotate(45deg) scale(1.45); }

/* -------------------------------------------------------------
   18 · CLINIC GALLERY
   ------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.15rem);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--warm-white);
}
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy);
  opacity: 0.2;
  mix-blend-mode: color;
  transition: opacity 0.7s var(--ease);
}
.gallery__item:hover::after { opacity: 0; }
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: var(--img-tone);
  transition: transform 1.2s var(--ease), filter 0.7s ease;
}
.gallery__item:hover img { filter: var(--img-tone-hover); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  z-index: 2;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.15rem 0.95rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(to top, rgba(10, 24, 48, 0.82), rgba(10, 24, 48, 0.28) 55%, rgba(10, 24, 48, 0));
}
.gallery__item--a, .gallery__item--f { grid-column: span 2; }
.gallery__item--a img, .gallery__item--f img { aspect-ratio: 16 / 10; }

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(78px, 8.2vw, 108px);
  }
  .gallery__item img { aspect-ratio: auto; }
  .gallery__item--a { grid-column: 1 / 5;  grid-row: 1 / 7; }
  .gallery__item--b { grid-column: 5 / 10; grid-row: 1 / 4; }
  .gallery__item--c { grid-column: 10 / 13; grid-row: 1 / 4; }
  .gallery__item--d { grid-column: 5 / 9;  grid-row: 4 / 7; }
  .gallery__item--e { grid-column: 9 / 13; grid-row: 4 / 10; }
  .gallery__item--f { grid-column: 1 / 9;  grid-row: 7 / 10; }
}

@media (max-width: 479px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item { grid-column: span 1 !important; }
  .gallery__item img { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------
   19 · FAQ
   ------------------------------------------------------------- */
.faq-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: 0.72fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.faq-intro__copy { margin-top: 1.35rem; max-width: 36ch; color: var(--gray); }
.faq-intro .link-arrow { margin-top: 1.5rem; }

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__heading { margin: 0; }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  text-align: left;
  transition: color 0.3s ease;
}
.faq__q {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1rem + 0.65vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  transition: color 0.3s ease;
}
.faq__trigger:hover .faq__q { color: var(--gold); }

.faq__icon {
  position: relative;
  flex: none;
  width: 15px; height: 15px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transition: transform 0.45s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.faq__panel.is-open .faq__inner { opacity: 1; }
.faq__inner p {
  max-width: 62ch;
  padding-bottom: clamp(1.25rem, 2.4vw, 1.85rem);
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* -------------------------------------------------------------
   20 · CONSULTATION CTA
   ------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(24, 54, 101, 0.55) 0%, rgba(13, 31, 60, 0) 55%);
  pointer-events: none;
}
.cta__watermark {
  position: absolute;
  top: 50%;
  right: clamp(-90px, -4vw, -30px);
  transform: translateY(-50%);
  width: clamp(240px, 30vw, 420px);
  opacity: 0.05;
  pointer-events: none;
}
.cta__watermark img { width: 100%; height: auto; }

.cta__grid {
  position: relative;
  display: grid;
  gap: clamp(2.75rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .cta__grid { grid-template-columns: 1.1fr 0.78fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
}
.cta .section-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.35rem); }
.cta__copy { margin-top: 1.4rem; max-width: 40ch; }
.cta__actions { margin-top: clamp(1.85rem, 3vw, 2.5rem); }
.cta__note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Minimal form */
.cform { display: grid; gap: 1.5rem; }
.cform__row { display: grid; gap: 1.5rem; }
@media (min-width: 520px) { .cform__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.65rem 0 0.7rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.35s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 74px; line-height: 1.6; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
  cursor: pointer;
}
.field select option { color: var(--charcoal); background: var(--white); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: #E3785F; }

.cform .btn { margin-top: 0.75rem; }
.cform__status {
  min-height: 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}
.cform__legal { font-size: 0.7rem; line-height: 1.6; color: rgba(255, 255, 255, 0.4); }
.cform__legal a { color: rgba(255, 255, 255, 0.65); text-decoration: underline; text-underline-offset: 3px; }
.cform__legal a:hover { color: var(--gold); }

/* -------------------------------------------------------------
   21 · FOOTER
   ------------------------------------------------------------- */
.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.6);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  font-size: 0.9rem;
}
.footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 720px) {
  .footer__top { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: span 3; }
}
@media (min-width: 1080px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1.15fr 1fr; }
  .footer__brand { grid-column: span 1; }
}

.footer__brand .brand__mark { height: 46px; }
.footer__tagline {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
}
.footer__blurb { margin-top: 0.9rem; max-width: 34ch; font-size: 0.86rem; line-height: 1.75; }

.socials { display: flex; flex-wrap: wrap; gap: 1.35rem; margin-top: 1.6rem; }
.socials a {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.socials a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.footer__title {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-light);
}
.footer__links { display: grid; gap: 0.65rem; }
.footer__links a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease, padding-left 0.35s var(--ease);
}
.footer__links a:hover { color: var(--gold); padding-left: 5px; }
.footer__address { margin-top: 1.25rem; font-size: 0.86rem; line-height: 1.8; color: rgba(255, 255, 255, 0.45); }

.hours { display: grid; gap: 0.6rem; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}
.hours li span:last-child { color: rgba(255, 255, 255, 0.8); }
.footer__col .link-arrow { margin-top: 1.5rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-light);
}
.footer__copy { font-size: 0.75rem; color: rgba(255, 255, 255, 0.42); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.footer__legal a {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s ease;
}
.footer__legal a:hover { color: var(--gold); }

.footer__disclaimer {
  margin-top: 1.75rem;
  max-width: 92ch;
  font-size: 0.7rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------------
   20b · TABLET REFINEMENTS
   Between phone and desktop the portrait cards would otherwise
   run the page very long, so they become horizontal splits.
   ------------------------------------------------------------- */
@media (min-width: 620px) and (max-width: 859px) {
  .treatment__link,
  .doctor {
    display: grid;
    grid-template-columns: 0.78fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }
  .treatment__body,
  .doctor__body { padding-top: 0; }
}

/* -------------------------------------------------------------
   22 · INNER PAGES

   Everything below only appears on the pages under the homepage —
   treatments, results, about, doctors, patient stories, contact.
   Each component reuses the tokens and the type scale above, so a
   change to the brand in section 1 carries through here too.
   ------------------------------------------------------------- */

/* --- Page masthead ------------------------------------------
   The navy band that replaces the hero carousel on inner pages.
   It borrows the CTA's watermark and wash so the top and bottom
   of every page bookend each other. */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3.25rem, 7vw, 6rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(24, 54, 101, 0.6) 0%, rgba(13, 31, 60, 0) 58%);
  pointer-events: none;
}
.page-hero__watermark {
  position: absolute;
  top: 50%;
  right: clamp(-90px, -4vw, -30px);
  transform: translateY(-50%);
  width: clamp(220px, 28vw, 390px);
  opacity: 0.05;
  pointer-events: none;
}
.page-hero__watermark img { width: 100%; height: auto; }

.page-hero__inner { position: relative; max-width: 60rem; }
.page-hero .eyebrow { margin-top: 1.5rem; }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-top: 1.15rem;
  text-wrap: balance;
}
.page-hero__copy {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
  line-height: 1.8;
}
.page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-light);
}
.page-hero__fact {
  display: grid;
  gap: 0.3rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.page-hero__fact b {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--gold);
}

/* --- Breadcrumb --------------------------------------------- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.crumbs li { display: flex; align-items: center; gap: 0.55rem; }
.crumbs li + li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.crumbs a { color: rgba(255, 255, 255, 0.62); transition: color 0.3s ease; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: rgba(255, 255, 255, 0.85); }

/* --- Long-form copy ------------------------------------------ */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.25rem; }
.prose p { color: var(--gray); }
.prose h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
  font-weight: 500;
  color: var(--navy);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.prose h3 + p { margin-top: 0.9rem; }
.prose ul { display: grid; gap: 0.65rem; margin-top: 1.25rem; }
.prose ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.75;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }

/* --- Alternating detail rows (treatments, doctors) ------------ */
.tdetail {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.tdetail:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .tdetail { grid-template-columns: 0.82fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); }
  /* Every second row swaps sides, so the eye zig-zags down the page
     instead of running along one hard column edge. */
  .tdetail:nth-of-type(even) .tdetail__media { order: 2; }
}
.tdetail__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: var(--img-tone);
}
.tdetail__index {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.tdetail__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--navy);
  margin-top: 0.6rem;
}
.tdetail__meta {
  margin-top: 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.tdetail__copy { margin-top: 1.35rem; max-width: 54ch; color: var(--gray); }
.tdetail__copy + .tdetail__copy { margin-top: 1rem; }
.tdetail .btn, .tdetail .link-arrow { margin-top: 1.75rem; }

/* --- Spec strip ---------------------------------------------- */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: clamp(1.35rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 620px) { .specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.specs dt {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}
.specs dd {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
}

/* --- Comparison table ----------------------------------------
   Wide tables get their own scroller so the page body never has
   to scroll sideways to accommodate one. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.compare th, .compare td {
  padding: clamp(0.9rem, 2vw, 1.35rem) clamp(0.85rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--gray);
}
.compare thead th {
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 500;
  color: var(--navy);
}
.compare tbody th {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare__hint {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--gray);
}

/* --- Pillars (standards, how we work) ------------------------ */
.pillars {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 700px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars--3 { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.pillar__index {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 500;
  color: var(--navy);
  margin-top: 0.5rem;
}
.pillar__copy { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.75; color: var(--gray); }

.section--navy .section-head__copy { color: rgba(255, 255, 255, 0.62); }
.section--navy .pillar { border-top-color: var(--rule-light); }
.section--navy .pillar__title { color: var(--white); }
.section--navy .pillar__copy { color: rgba(255, 255, 255, 0.62); }

/* --- Review grid --------------------------------------------- */
.reviews { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 720px)  { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--rule);
}
.review__quote {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}
.review__copy { margin-top: 0.9rem; font-size: 0.92rem; line-height: 1.75; color: var(--gray); }
.review__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding-top: 1.35rem;
}
.review__name {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.review__name span { color: var(--gray); font-weight: 400; }
.review__name span::before { content: "— "; }
.review__tag { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* --- Rating summary ------------------------------------------ */
.score {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 760px) { .score { grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.score__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
}
.score__value small { font-size: 0.36em; color: var(--gray); }
.score__label {
  margin-top: 0.6rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}
.score__copy { color: var(--gray); max-width: 56ch; }
.score .rating { margin-bottom: 0.9rem; }
.review .rating { margin-bottom: 0.2rem; }

/* Opening hours beside the CTA copy on inner pages, where the homepage
   carries the consultation form instead. */
.cta__aside-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.cta__hours {
  gap: 0;
  margin-top: 1rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--rule-light);
}
.cta__hours li {
  padding-block: clamp(0.7rem, 1.4vw, 0.95rem);
  border-bottom: 1px solid var(--rule-light);
  font-size: 0.88rem;
}
.cta__hours a { color: var(--gold); }
.cta__hours a:hover { color: var(--gold-light); }

/* --- Contact page -------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1fr 0.85fr; gap: clamp(3rem, 6vw, 5.5rem); }
}
.contact-cards { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 620px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
.contact-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
}
.contact-card__title {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-card__body {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
}
.contact-card__body a { transition: color 0.3s ease; }
.contact-card__body a:hover { color: var(--gold); }
.contact-card__note { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.7; color: var(--gray); }
.contact-card address { font-style: normal; }

.hours--panel li { color: var(--gray); font-size: 0.92rem; }
.hours--panel li span:last-child { color: var(--navy); font-weight: 500; }
.hours--panel li + li { padding-top: 0.6rem; border-top: 1px solid var(--rule); }

/* The consultation form is styled for a navy ground; on the contact
   page it sits in its own navy panel rather than on the page itself. */
.form-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
}
.form-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--white);
}
.form-panel__copy { margin-top: 0.9rem; margin-bottom: 1.75rem; font-size: 0.95rem; line-height: 1.75; }

/* --- Closing band -------------------------------------------- */
.endnote {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--rule);
  background: var(--warm-white);
}
.endnote__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.endnote__copy {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem);
  line-height: 1.25;
  color: var(--navy);
  max-width: 34ch;
}

/* -------------------------------------------------------------
   23 · MOTION PREFERENCES
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .step__num { opacity: 1 !important; }
  .btn:hover { transform: none; }
  .tw__card figure:hover { transform: none; }
}

/* -------------------------------------------------------------
   24 · PRINT
   ------------------------------------------------------------- */
@media print {
  .offer-bar, .site-header, .mobile-nav, .ba__range, .carousel-controls,
  .stories__dots, .tw__dots, .cta__watermark { display: none !important; }
  /* The rail prints as a wrapped grid rather than one clipped row */
  .tw__rail { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}