/* =============================================================================
   PHYSIOTHERAPY CLINIC  —  MAIN STYLESHEET
   -----------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Layout helpers
   4.  Buttons
   5.  Header & navigation
   6.  Hero
   7.  Sections & cards
   8.  Components (stats, process, testimonials, accordion, gallery, forms)
   9.  Footer & floating actions
   10. Animation
   11. Responsive
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   Palette sampled directly from the Aarna Physiotherapy Centre logo:
   teal #01968F, red #EF0E0A, amber #F7BB06 on white.

   Teal carries the brand. Red is used sparingly — it is a warning colour, so
   it stays on required-field marks and closed-day labels rather than buttons.
   ------------------------------------------------------------------------ */
:root {
  --brand-900:   #013F3C;   /* deep teal — dark sections, headings on light */
  --brand-800:   #015C57;
  --brand:       #01968F;   /* logo teal — primary actions */
  --brand-700:   #017A74;
  --brand-400:   #33B3AD;
  --brand-100:   #BFE5E3;
  --brand-50:    #E8F6F5;

  --red:         #EF0E0A;   /* logo red — accents and alerts only */
  --red-600:     #C90C08;
  --red-50:      #FEECEB;

  --amber:       #F7BB06;   /* logo amber — star ratings, highlights */

  --wa:          #1FA855;   /* WhatsApp green — kept for recognisability */
  --wa-600:      #157F44;

  --ink:         #111827;
  --slate:       #475569;
  --muted:       #64748B;
  --line:        #E2E8F0;
  --line-soft:   #EEF2F7;
  --bg:          #FFFFFF;
  --bg-soft:     #F2FAF9;

  --grad-brand:  linear-gradient(135deg, var(--brand-900) 0%, var(--brand) 100%);
  --grad-soft:   linear-gradient(135deg, var(--brand-50) 0%, #F7FCFB 100%);

  --shadow-sm:   0 1px 2px rgba(15, 23, 42, .06);
  --shadow:      0 4px 16px rgba(15, 23, 42, .07);
  --shadow-md:   0 10px 30px rgba(15, 23, 42, .09);
  --shadow-lg:   0 22px 48px rgba(1, 63, 60, .14);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-full: 999px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1200px;
  --header-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--slate);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(2.05rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.55rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-900); }

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

ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }
li { margin-bottom: .4rem; }

/* Visible keyboard focus for accessibility */
:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-900); color: #fff; padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.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;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.section { padding: clamp(64px, 8vw, 108px) 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--grad-soft); }
.section--brand { background: var(--grad-brand); color: #DCEFED; }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 66px);
  align-items: center;
}

/* Column-ratio variants.
   These belong here and NOT in a style="" attribute. An inline style outranks
   every stylesheet rule including one inside a media query, so a ratio set
   inline survives all the way down to 360px and the two columns stay side by
   side — which is exactly how the contact and doctor pages ended up
   unreadable on phones. */
.split--form    { grid-template-columns: 1.3fr 1fr;   align-items: start; }
.split--doc     { grid-template-columns: .85fr 1.15fr; align-items: stretch; }
.split--article { grid-template-columns: 1.6fr 1fr;   align-items: start; }

/* Section heading block */
.head { max-width: 720px; margin: 0 auto clamp(38px, 4.5vw, 58px); text-align: center; }
.head--left { margin-inline: 0; text-align: left; }
.head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brand-50); color: var(--brand-700);
  font-family: var(--font); font-size: .74rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .46rem 1rem; border-radius: var(--r-full); margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.section--brand .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }

.lead { font-size: 1.1rem; color: var(--slate); }
.text-center { text-align: center; }

/* ---------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font); font-size: .95rem; font-weight: 600;
  padding: .92rem 1.75rem; border-radius: var(--r-full);
  border: 2px solid transparent; cursor: pointer; text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(1, 150, 143, .28); }
.btn-primary:hover { background: var(--brand-900); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(1, 63, 60, .32); }

.btn-green { background: var(--wa); color: #fff; box-shadow: 0 8px 20px rgba(31, 168, 85, .28); }
.btn-green:hover { background: var(--wa-600); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31, 168, 85, .34); }

.btn-outline { background: transparent; color: var(--brand-900); border-color: var(--brand-100); }
.btn-outline:hover { background: var(--brand-50); color: var(--brand-900); border-color: var(--brand-400); transform: translateY(-3px); }

.btn-white { background: #fff; color: var(--brand-900); }
.btn-white:hover { background: var(--brand-50); color: var(--brand-900); transform: translateY(-3px); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .13); color: #fff; border-color: #fff; transform: translateY(-3px); }

.btn-sm { padding: .68rem 1.3rem; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------------------
   5. HEADER & NAVIGATION
   ------------------------------------------------------------------------ */
.topbar {
  background: var(--brand-900); color: #A8CFCC;
  font-size: .84rem; padding: .5rem 0;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.topbar a { color: #DAF0EE; }
.topbar a:hover { color: #fff; }
.topbar-info { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.topbar-info span, .topbar-info a { display: inline-flex; align-items: center; gap: .45rem; }
.topbar svg { width: 15px; height: 15px; opacity: .85; }
.topbar-social { display: flex; gap: 12px; align-items: center; }
.topbar-social a:hover { transform: translateY(-1px); }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow); background: rgba(255, 255, 255, .98); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--header-h); min-width: 0; flex-wrap: nowrap;
}

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 4px 14px rgba(1, 63, 60, .14);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
/* On the dark footer the emblem sits on a white tile so its red stays legible */
.brand-mark--light { background: #fff; padding: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--font); font-weight: 700; font-size: 1.13rem; color: var(--brand-900); letter-spacing: -.02em; }
.brand-sub { font-size: .68rem; color: var(--muted); letter-spacing: .04em; font-weight: 500; }

.nav-links {
  display: flex; align-items: center; gap: 2px; list-style: none;
  margin: 0; padding: 0; flex: 0 0 auto;   /* must not shrink under its content */
}
.nav-links li { margin: 0; }
.nav-links > li > a {
  display: block; font-family: var(--font); font-size: .9rem; font-weight: 500;
  color: var(--ink); padding: .55rem .62rem; border-radius: var(--r-sm);
  position: relative; white-space: nowrap;
}
.nav-links > li > a::after {
  content: ''; position: absolute; left: .62rem; right: .62rem; bottom: .3rem;
  height: 2px; background: var(--brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav-links > li > a:hover { color: var(--brand); }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { transform: scaleX(1); }
.nav-links > li > a.active { color: var(--brand); font-weight: 600; }

/* Services dropdown */
.has-drop { position: relative; }
.drop-toggle { display: inline-flex !important; align-items: center; gap: .3rem; }
.drop-toggle svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.has-drop:hover .drop-toggle svg { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 12px; list-style: none; margin: 0;
  width: 520px; columns: 2; column-gap: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.drop li { margin: 0; break-inside: avoid; }
.drop a {
  display: block; padding: .5rem .7rem; border-radius: var(--r-sm);
  font-size: .88rem; color: var(--slate); font-weight: 500;
}
.drop a:hover { background: var(--brand-50); color: var(--brand-900); }
.drop-all { grid-column: 1 / -1; }
.drop-all a { color: var(--brand) !important; font-weight: 600 !important; }

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta .btn-outline { display: none; }   /* see note above */

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--brand-900);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-soft);
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before {
  width: 620px; height: 620px; right: -180px; top: -240px;
  background: radial-gradient(circle, rgba(1, 150, 143, .13) 0%, transparent 68%);
}
.hero::after {
  width: 460px; height: 460px; left: -170px; bottom: -230px;
  background: radial-gradient(circle, rgba(247, 187, 6, .16) 0%, transparent 68%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 58px); align-items: center; }

.hero h1 { margin-bottom: .5rem; }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--slate); max-width: 560px; margin-bottom: 1.9rem; }

.hero-trust {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 2.1rem; padding-top: 1.6rem; border-top: 1px solid rgba(1, 150, 143, .16);
}
.trust-item { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--slate); }
.trust-item svg { width: 19px; height: 19px; color: var(--brand); flex: none; }

.hero-visual { position: relative; }
.hero-img {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: #fff; aspect-ratio: 4 / 3.4;
}
.hero-img img, .hero-img svg { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
  position: absolute; background: #fff; border-radius: var(--r);
  box-shadow: var(--shadow-md); padding: .85rem 1.15rem;
  display: flex; align-items: center; gap: .75rem;
}
.hero-badge-1 { bottom: 26px; left: -18px; animation: floaty 5s ease-in-out infinite; }
.hero-badge-2 { top: 26px; right: -16px; animation: floaty 5s ease-in-out infinite .9s; }
.hero-badge .bi {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none;
}
.hero-badge .bi svg { width: 21px; height: 21px; }
.bi-blue { background: var(--brand-50); color: var(--brand); }
.bi-green { background: var(--brand-50); color: var(--brand); }
.hero-badge b { display: block; font-family: var(--font); font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
.hero-badge small { font-size: .74rem; color: var(--muted); }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* Condition marquee under the hero */
.marquee {
  background: var(--brand-900); color: #fff; padding: .95rem 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: scroll-x 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 1.7rem; padding-inline: .85rem;
  font-family: var(--font); font-size: .8rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; color: #BFE0DD;
}
.marquee-item::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: none;
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Inner page banner */
.page-hero {
  background: var(--grad-brand); color: #D5EBE9; position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 62px);
}
.page-hero::after {
  content: ''; position: absolute; width: 520px; height: 520px; right: -170px; top: -220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .09) 0%, transparent 70%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { max-width: 680px; color: #BCDEDB; margin-bottom: 0; }

.crumbs { font-size: .85rem; margin-bottom: 1.1rem; color: #A4CFCC; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: '/'; opacity: .5; }
.crumbs a { color: #D5EBE9; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; font-weight: 500; }

/* ---------------------------------------------------------------------------
   7. CARDS
   ------------------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px; position: relative; overflow: hidden;
  height: 100%;   /* fill the grid cell so every card in a row matches */
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

.card-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); margin-bottom: 1.25rem;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.card-icon svg { width: 28px; height: 28px; }
.card:hover .card-icon { background: var(--brand); color: #fff; transform: scale(1.06) rotate(-4deg); }

/* Service card */
.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--amber));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .more {
  margin-top: auto; padding-top: 1.15rem; font-family: var(--font);
  font-size: .88rem; font-weight: 600; color: var(--brand);
  display: inline-flex; align-items: center; gap: .4rem;
}
.service-card .more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.service-card:hover .more svg { transform: translateX(4px); }
.stretch::after { content: ''; position: absolute; inset: 0; }

/* Condition chips */
.cond-group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; height: 100%;
}
.cond-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.3rem; }
.cond-head .card-icon { margin: 0; width: 46px; height: 46px; border-radius: 13px; }
.cond-head .card-icon svg { width: 23px; height: 23px; }
.cond-head h3 { margin: 0; font-size: 1.18rem; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-block; background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--slate); font-size: .85rem; padding: .42rem .9rem;
  border-radius: var(--r-full); transition: all .22s var(--ease);
}
a.chip:hover, .chip:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-900); transform: translateY(-2px); }

/* Two-column tick list, for long specialisation lists */
.ticks--cols { grid-template-columns: 1fr 1fr; column-gap: 22px; }
@media (max-width: 720px) { .ticks--cols { grid-template-columns: 1fr; } }

/* Feature list with ticks */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; font-size: .96rem; }
.ticks li::before {
  content: ''; flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: .16rem;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301968F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--brand .ticks li { color: #D0E9E7; }

/* ---------------------------------------------------------------------------
   8. COMPONENTS
   ------------------------------------------------------------------------ */

/* --- Stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 26px 18px; border-radius: var(--r-lg); }
.section--brand .stat { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.stat-num {
  font-family: var(--font); font-weight: 700; line-height: 1;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem); color: #fff;
  display: flex; align-items: baseline; justify-content: center; gap: .06em;
}
.stat-label { font-size: .9rem; color: #A9D4D0; margin-top: .6rem; }

/* --- Process timeline --- */
.process { display: grid; gap: 22px; grid-template-columns: repeat(5, 1fr); position: relative; }
.process::before {
  content: ''; position: absolute; top: 34px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--brand-100), var(--brand-400), var(--brand));
  opacity: .55;
}
.step { text-align: center; position: relative; z-index: 2; }
.step-num {
  width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand-100); color: var(--brand);
  display: grid; place-items: center; font-family: var(--font);
  font-weight: 700; font-size: 1.15rem;
  transition: all .3s var(--ease);
}
.step:hover .step-num { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.08); }
.step h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.step p { font-size: .9rem; color: var(--muted); margin: 0; }

/* --- Testimonials --- */
.tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; height: 100%; display: flex; flex-direction: column; }
.stars { display: flex; gap: 3px; margin-bottom: 1rem; }
.stars svg { width: 17px; height: 17px; color: var(--amber); fill: var(--amber); }
.tcard blockquote { margin: 0 0 1.4rem; font-size: .97rem; color: var(--slate); font-style: normal; flex: 1; }
.tcard blockquote::before { content: '\201C'; font-family: Georgia, serif; font-size: 3rem; line-height: 0; color: var(--brand-100); vertical-align: -.35em; margin-right: .12em; }
.tmeta { display: flex; align-items: center; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff; font-family: var(--font); font-weight: 600; font-size: 1rem;
}
.tmeta b { display: block; font-family: var(--font); color: var(--ink); font-size: .95rem; }
.tmeta small { color: var(--muted); font-size: .82rem; }

/* Horizontal scroll rail (mobile-friendly carousel without JS libraries) */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 7px; }
.rail::-webkit-scrollbar-thumb { background: var(--brand-100); border-radius: 4px; }
.rail::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 4px; }

.tsource {
  display: flex; align-items: center; gap: .45rem; margin-bottom: 1rem;
  font-family: var(--font); font-size: .78rem; font-weight: 600;
  color: var(--brand-700); text-transform: uppercase; letter-spacing: .06em;
}
.tsource svg { width: 15px; height: 15px; color: var(--amber); fill: var(--amber); flex: none; }
.tsource time {
  margin-left: auto; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--muted); font-size: .78rem;
}

.pullquote {
  margin: 1.8rem 0 0; padding: 24px 26px;
  background: var(--brand-50); border-left: 3px solid var(--brand);
  border-radius: var(--r);
}
.pullquote blockquote {
  margin: 0; font-family: var(--font); font-size: 1.08rem; font-weight: 500;
  color: var(--brand-900); line-height: 1.5;
}
/* Curly quotes written as CSS hex escapes. These two lines previously held
   a stray U+0081 control byte (a mangled \201C), which the browser drew as
   a hollow box in front of the quotation mark. An ASCII escape cannot be
   corrupted by an encoding change the way a literal character can. */
.pullquote blockquote::before { content: "\201C"; }
.pullquote blockquote::after  { content: "\201D"; }
.pullquote figcaption {
  margin-top: .7rem; font-size: .86rem; color: var(--muted); font-weight: 500;
}

/* --- Instagram reels --- */
.reels {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.reel {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.reel:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.reel iframe {
  width: 100%; height: 620px; border: 0; display: block; background: var(--bg-soft);
}
.reel figcaption {
  padding: .9rem 1.1rem; font-size: .88rem; color: var(--muted);
  border-top: 1px solid var(--line-soft);
}

/* --- Service catalogue (the full treatment list) --- */
.catalogue { columns: 2; column-gap: 22px; }
.cat-group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%; margin-bottom: 22px;
}
.cat-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.cat-head .card-icon { margin: 0; width: 42px; height: 42px; border-radius: 12px; }
.cat-head .card-icon svg { width: 21px; height: 21px; }
.cat-head h3 { margin: 0; font-size: 1.08rem; }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.cat-list li { margin: 0; font-size: .92rem; display: flex; gap: .6rem; align-items: flex-start; }
.cat-list li::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-top: .62rem;
}
.cat-list a { color: var(--slate); }
.cat-list a:hover { color: var(--brand); text-decoration: underline; }

/* --- Accordion (FAQ) --- */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: 14px; }
.acc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.acc.open { border-color: var(--brand-100); box-shadow: var(--shadow); }
.acc-btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.15rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.45;
}
.acc-btn:hover { color: var(--brand); }
.acc-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-50);
  display: grid; place-items: center; transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.acc-ico svg { width: 14px; height: 14px; color: var(--brand); }
.acc.open .acc-ico { transform: rotate(180deg); background: var(--brand); }
.acc.open .acc-ico svg { color: #fff; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acc.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: .96rem; margin: 0; }

/* --- Gallery --- */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gal-item {
  position: relative; border-radius: var(--r); overflow: hidden; cursor: pointer;
  aspect-ratio: 4 / 3; background: var(--bg-soft); border: 1px solid var(--line);
}
.gal-item img, .gal-item svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gal-item:hover img, .gal-item:hover svg { transform: scale(1.07); }
.gal-cap {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1rem .9rem; color: #fff; font-size: .87rem;
  background: linear-gradient(transparent, rgba(1, 63, 60, .82));
  opacity: 0; transform: translateY(10px); transition: all .3s var(--ease);
}
.gal-item:hover .gal-cap { opacity: 1; transform: translateY(0); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 2.2rem; }
.filter {
  border: 1px solid var(--line); background: #fff; color: var(--slate); cursor: pointer;
  font-family: var(--font); font-size: .88rem; font-weight: 500;
  padding: .55rem 1.25rem; border-radius: var(--r-full); transition: all .22s var(--ease);
}
.filter:hover { border-color: var(--brand-400); color: var(--brand); }
.filter.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(1, 63, 60, .93);
  display: none; place-items: center; padding: 30px;
}
.lightbox.open { display: grid; animation: fade .25s var(--ease); }
.lightbox img, .lightbox svg { max-width: 92vw; max-height: 86vh; border-radius: var(--r); width: auto; }
.lightbox-close {
  position: absolute; top: 22px; right: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 0; color: #fff; font-size: 1.7rem; cursor: pointer;
  line-height: 1; display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .3); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Forms --- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 3.6vw, 42px); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-family: var(--font); font-size: .87rem; font-weight: 600;
  color: var(--ink); margin-bottom: .42rem;
}
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: .96rem; color: var(--ink);
  padding: .82rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(1, 150, 143, .12);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA8BC; }
.field.err input, .field.err select, .field.err textarea { border-color: #DC2626; }
.err-msg { display: none; color: #DC2626; font-size: .82rem; margin-top: .35rem; }
.field.err .err-msg { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 1rem; }

.alert { padding: 1rem 1.2rem; border-radius: var(--r-sm); margin-bottom: 1.4rem; font-size: .94rem; }
.alert-ok { background: var(--brand-50); border: 1px solid #A7E6C1; color: #106634; }
.alert-bad { background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; }

/* Honeypot — hidden from humans, visible to bots */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* --- Info / contact tiles --- */
.info-tile {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px;
  height: 100%;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.info-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-tile .ico {
  width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
}
.info-tile .ico svg { width: 22px; height: 22px; }
.info-tile h4 { margin: 0 0 .25rem; font-size: 1rem; }
.info-tile p, .info-tile a { font-size: .93rem; color: var(--muted); margin: 0; }
.info-tile a:hover { color: var(--brand); }

.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: .93rem; margin: 0;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list b { font-family: var(--font); font-weight: 500; color: var(--ink); }
.hours-list .closed { color: var(--red); }

.map-embed {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); line-height: 0;
}
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* --- CTA band --- */
.cta-band {
  background: var(--grad-brand); border-radius: var(--r-lg); color: #D5EBE9;
  padding: clamp(36px, 5vw, 62px); text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; width: 430px; height: 430px; right: -140px; top: -190px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 70%);
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 620px; margin-inline: auto; margin-bottom: 2rem; }

/* --- Doctor profile --- */
.doc-photo { position: relative; }
.doc-photo .frame {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: var(--grad-soft); aspect-ratio: 4 / 4.6;
}
.doc-photo .frame img, .doc-photo .frame svg { width: 100%; height: 100%; object-fit: cover; }
.doc-exp {
  position: absolute; right: -14px; bottom: 26px; background: var(--brand); color: #fff;
  border-radius: var(--r); padding: 1rem 1.3rem; text-align: center; box-shadow: var(--shadow-md);
}
.doc-exp b { display: block; font-family: var(--font); font-size: 1.5rem; line-height: 1; }
.doc-exp small { font-size: .74rem; opacity: .92; letter-spacing: .05em; text-transform: uppercase; }

.qual-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.qual-list li {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r-sm); padding: 16px 20px; margin: 0;
}
.qual-list b { display: block; font-family: var(--font); color: var(--ink); font-size: .98rem; }
.qual-list span { font-size: .87rem; color: var(--muted); }

/* --- Meta strip on service pages --- */
.meta-strip {
  display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0 0 2rem;
}
.meta-strip li {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .5rem 1.05rem; font-size: .87rem;
}
.meta-strip svg { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* Sticky sidebar */
.sticky { position: sticky; top: calc(var(--header-h) + 22px); }

/* ---------------------------------------------------------------------------
   9. FOOTER & FLOATING ACTIONS
   ------------------------------------------------------------------------ */
.site-footer { background: var(--brand-900); color: #9FC4C1; padding: clamp(52px, 6vw, 76px) 0 0; }
.site-footer h4 {
  color: #fff; font-size: 1.02rem; margin-bottom: 1.25rem;
  position: relative; padding-bottom: .7rem;
}
.site-footer h4::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.foot-grid { display: grid; grid-template-columns: 1.6fr .9fr 1.25fr 1.35fr; gap: 34px; }
.site-footer a { color: #9FC4C1; }
.site-footer a:hover { color: #fff; }
.foot-list { list-style: none; padding: 0; margin: 0; }
.foot-list li { margin-bottom: .5rem; font-size: .92rem; }
.foot-list a { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.5; }
.foot-list a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400);
  flex: none; margin-top: .58rem;   /* align the dot with the first line of text */
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.foot-list a:hover::before { background: var(--brand); transform: scale(1.5); }

.foot-brand .brand { margin-bottom: 1.1rem; }
.foot-brand .brand-name { color: #fff; }
.foot-brand .brand-sub { color: #6FA5A1; }
.foot-brand p { font-size: .92rem; margin-bottom: 1.3rem; }

.foot-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.foot-contact li { display: flex; gap: .75rem; font-size: .92rem; align-items: flex-start; margin: 0; }
.foot-contact svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: .25rem; }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: #CFE7E5;
  transition: all .25s var(--ease);
}
.socials a:hover { background: var(--brand); color: #fff; transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

.foot-bottom {
  margin-top: clamp(38px, 4vw, 54px); border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.4rem 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .86rem;
}
.foot-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

/* Floating action buttons */
.fab-stack {
  position: fixed; right: 20px; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .26);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.fab:hover { transform: scale(1.09) translateY(-2px); color: #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, .32); }
.fab svg { width: 26px; height: 26px; }
.fab-wa { background: var(--wa); }
.fab-call { background: var(--brand); }
.fab-wa::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(1);    opacity: .85; }
  75%, 100% { transform: scale(1.65); opacity: 0; }
}

/* Mobile sticky action bar */
.mobile-bar {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 85;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(15, 23, 42, .09);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font); font-size: .68rem; font-weight: 600;
  padding: .5rem .3rem; border-radius: var(--r-sm); color: var(--brand-900);
}
.mobile-bar a svg { width: 20px; height: 20px; }
.mobile-bar .mb-book { background: var(--brand); color: #fff; }
.mobile-bar .mb-wa { color: var(--wa-600); }

/* ---------------------------------------------------------------------------
   10. ANIMATION  (scroll reveal — light, GPU-friendly)
   ------------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal].in { will-change: auto; }

[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"]  { transform: scale(.95); }

/* Stagger children */
[data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .10s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .22s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .34s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .40s; }
[data-stagger].in > *:nth-child(8) { transition-delay: .46s; }

/* Respect the visitor's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------------------ */
/* --- Header breathing room -----------------------------------------------
   Seven nav links plus two call-to-action buttons only just fit the 1200px
   wrapper. Rather than let the Book button clip, shed the optional pieces in
   stages: the location line, then tighter link padding, then the Call button
   (the number is still in the top bar and on the floating button). */
@media (max-width: 1240px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 1.05rem; }
  .brand-mark { width: 42px; height: 42px; }
  .nav-links > li > a { padding: .55rem .5rem; font-size: .87rem; }
  .nav-links > li > a::after { left: .5rem; right: .5rem; }
  .nav-cta .btn-sm { padding: .62rem 1rem; font-size: .84rem; }
}

/* The last stretch before the menu collapses at 1120px */
@media (max-width: 1200px) {
  .nav { gap: 14px; }
  .brand-name { font-size: 1rem; }
  .nav-links > li > a { padding: .5rem .42rem; font-size: .845rem; }
  .nav-links > li > a::after { left: .42rem; right: .42rem; }
  .nav-cta .btn-sm { padding: .6rem .9rem; font-size: .82rem; }
  .nav-cta .btn svg { width: 16px; height: 16px; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .process::before { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 1120px) {
  :root { --header-h: 72px; }

  /* The frosted-glass effect must go once the menu becomes a full-screen
     panel. A backdrop-filter makes the header a containing block for its
     position:fixed children, so the panel would size itself against the 72px
     header instead of the viewport — showing two links and hiding the rest. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  .topbar { display: none; }

  .nav-toggle { display: flex; }
  .nav-cta .btn { display: none; }

  /* Off-canvas panel. It is deliberately faded and scaled rather than slid in
     from the right: a fixed element translated off-screen horizontally is not
     clipped by body { overflow-x: hidden }, and would add a phantom sideways
     scrollbar on every mobile page. */
  .nav-links {
    position: fixed; inset: var(--header-h) 0 0 0;
    height: calc(100dvh - var(--header-h));   /* explicit, not just inset */
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px 24px 120px; overflow-y: auto;
    border-top: 1px solid var(--line);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav-links > li > a { font-size: 1.02rem !important; padding: .95rem .3rem !important; }
  .brand-sub { display: block; }
  .nav-links > li > a {
    padding: .95rem .3rem; font-size: 1.02rem;
    border-bottom: 1px solid var(--line-soft); border-radius: 0;
  }
  .nav-links > li > a::after { display: none; }

  .drop {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    width: auto; columns: 1; box-shadow: none; border: 0; border-bottom: 1px solid var(--line-soft);
    padding: 0 0 .7rem .9rem; display: none;
  }
  .has-drop.open .drop { display: block; }
  .has-drop:hover .drop { transform: none; }
  .drop-toggle svg { margin-left: auto; }
  .has-drop.open .drop-toggle svg { transform: rotate(180deg); }
  .has-drop > a { display: flex !important; }

  /* The variants are listed explicitly. They match .split's specificity, so
     they would already lose to this rule by source order alone, but naming
     them keeps that true if the file is ever reordered. */
  .hero-grid, .split,
  .split--form, .split--doc, .split--article { grid-template-columns: 1fr; }
  /* No order override here on purpose. The source order is headline → copy →
     photo, and once the hero stacks that is the order to keep: a visitor
     landing on a phone should read what the clinic does before seeing a
     treatment photo with no context around it. */
  .hero-visual { max-width: 520px; margin-inline: auto; }
  .hero-badge-1 { left: 8px; }
  .hero-badge-2 { right: 8px; }
  .hero-badge b { font-size: .95rem; }

  .gal { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .reels { grid-template-columns: repeat(2, 1fr); }
  .reel iframe { height: 540px; }
  .catalogue { columns: 1; }
  .sticky { position: static; }

  /* Make room for the mobile action bar. The bar measures ~71px (9px padding
     + 53px of link + 9px padding) before the gesture inset, so the old flat
     68px left the last footer row sitting underneath it. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .mobile-bar { display: grid; }

  /* The floating Call/WhatsApp bubbles duplicate two of the three buttons in
     the bar below and float over the body text while doing it. Once the bar
     is showing they are redundant. */
  .fab-stack { display: none; }
}

@media (max-width: 780px) {
  .hero-visual {
    display: flex; flex-wrap: wrap; gap: 10px; position: static;
  }
  .hero-img { flex: 1 1 100%; }
  .hero-badge {
    position: static; animation: none;      /* stop floating over the face */
    flex: 1 1 calc(50% - 5px); min-width: 148px;
    box-shadow: var(--shadow); padding: .75rem .9rem;
  }
  .hero-badge b { font-size: 1rem; }
  .hero-badge small { font-size: .72rem; }

  /* Same reason as the hero badges: at this width the overlay lands squarely
     on the doctor's face. Sit it under the photo as a caption instead. */
  .doc-exp {
    position: static; margin-top: 12px; padding: .7rem 1rem;
    display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  }
  .doc-exp b { display: inline; font-size: 1.25rem; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .reels { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .process { grid-template-columns: 1fr; gap: 26px; }
  .step { display: grid; grid-template-columns: 68px 1fr; gap: 1.1rem; text-align: left; align-items: start; }
  .step-num { margin: 0; }
  .form-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; text-align: center; align-items: center; gap: 10px; }
  .foot-bottom nav { gap: 8px 18px; }
  .cta-band .btn-row { flex-direction: column; }
  .cta-band .btn { width: 100%; }
  .rail { grid-auto-columns: 86%; }
}

@media (max-width: 560px) {
  /* "Aarna Physiotherapy Centre" is wide. The brand has flex:none by default,
     so on narrow phones it pushed the menu button off the edge. Let it shrink
     and wrap onto two lines instead. */
  .brand { flex: 1 1 auto; min-width: 0; gap: .55rem; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 1rem; line-height: 1.2; white-space: normal; }
  .brand-sub { font-size: .64rem; }
  .brand-mark { width: 40px; height: 40px; border-radius: 11px; }
  .nav { gap: 12px; }
}

@media (max-width: 380px) {
  .brand-name { font-size: .94rem; }
  .brand-sub { display: none; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .gal { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat { padding: 18px 10px; }
  .hero .btn-row .btn { width: 100%; }
  .card { padding: 24px 22px; }
}

/* ---------------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .fab-stack, .mobile-bar, .marquee, .topbar { display: none !important; }
  body { padding: 0; color: #000; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}