/* ==========================================================================
   Self-hosted webfonts — the same families the WordPress site used
   (Open Sans for body, Poppins for headings and nav), plus Noto Sans
   Devanagari so the Hindi pages render properly in body copy.
   Served locally: no third-party request, no render-blocking external CSS.
   ========================================================================== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-devanagari-500.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-devanagari-600.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-devanagari-700.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-devanagari-800.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-devanagari-devanagari-400.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-devanagari-devanagari-600.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-devanagari-devanagari-700.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* ==========================================================================
   Design tokens — single source of truth.
   Brand blues carried over from the previous Kadence palette so the site
   stays visually recognisable after the swap.
   ========================================================================== */
:root {
  /* Brand */
  --c-brand:        #2B6CB0;
  --c-brand-dark:   #265E9A;
  --c-brand-darker: #1E4C7C;
  --c-brand-tint:   #EAF2FA;
  --c-brand-tint-2: #D6E6F5;

  /* Action colours */
  --c-whatsapp:       #25D366;   /* icon-only surfaces */
  --c-whatsapp-btn:   #128437;   /* deeper, so white text clears 4.5:1 */
  --c-whatsapp-dark:  #0E7130;

  /* Neutrals */
  --c-ink:        #1A2733;
  --c-ink-2:      #3B3B3B;
  --c-ink-3:      #515151;
  --c-muted:      #626262;
  --c-line:       #E1E5EA;
  --c-surface:    #FFFFFF;
  --c-surface-2:  #F7F9FB;
  --c-surface-3:  #EDF2F7;

  --c-header:  #222222;   /* matches the previous Kadence sticky-header colour */
  --c-star:    #F5A623;
  --c-focus:   #2B6CB0;

  /* Typefaces — the same pairing the WordPress site used:
     Open Sans for body copy, Poppins for headings and navigation. */
  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --font-body:    'Open Sans', 'Noto Sans Devanagari', var(--font-fallback);
  --font-heading: 'Poppins', 'Noto Sans Devanagari', var(--font-fallback);

  /* Fluid type scale (mobile → desktop, no media queries needed) */
  --t-xs:   0.8125rem;
  --t-sm:   0.875rem;
  --t-base: clamp(1rem,      0.97rem + 0.15vw, 1.0625rem);
  --t-lg:   clamp(1.0625rem, 1rem    + 0.3vw,  1.1875rem);
  --t-xl:   clamp(1.25rem,   1.15rem + 0.5vw,  1.5rem);
  --t-2xl:  clamp(1.5rem,    1.3rem  + 1vw,    2rem);
  --t-3xl:  clamp(1.875rem,  1.5rem  + 1.8vw,  2.75rem);
  --t-4xl:  clamp(2.125rem,  1.6rem  + 2.6vw,  3.5rem);

  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-body:  1.7;

  --fw-normal: 400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* Spacing — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;

  /* Fluid section rhythm */
  --section-y: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --gutter:    clamp(1rem, 0.55rem + 2vw, 2rem);
  --maxw:      1180px;
  --maxw-prose: 68ch;

  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(16,35,54,.06), 0 1px 3px rgba(16,35,54,.08);
  --sh-2: 0 2px 4px rgba(16,35,54,.06), 0 4px 12px rgba(16,35,54,.08);
  --sh-3: 0 4px 8px rgba(16,35,54,.06), 0 12px 28px rgba(16,35,54,.12);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .2s;

  /* Height of the sticky mobile action bar, so content can clear it */
  --mobilebar-h: 62px;

  /* Header height — the hero pulls up underneath this. */
  --header-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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

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

/* The page starts with a dark header over a dark hero, so the page canvas is
   dark. Prevents any sub-pixel sliver of white at the very top. */
html { background: var(--c-header); }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Devanagari needs a touch more leading to stay readable */
html[lang="hi-IN"] body { line-height: 1.8; }

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

/* Safety net for inline icons: zero-specificity default so any icon without an
   explicit size rule stays text-sized instead of expanding to the viewport.
   :where() means every real rule below still wins. */
:where(svg) { width: 1.15em; height: 1.15em; flex: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.015em; }
h3 { font-size: var(--t-xl);  letter-spacing: -0.01em; line-height: var(--lh-snug); }
h4 { font-size: var(--t-lg);  line-height: var(--lh-snug); }

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

a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-brand-dark); }

strong, b { font-weight: var(--fw-semi); color: var(--c-ink); }

ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--s-2); }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--c-brand);
  color: #fff;
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* Layout primitives */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tint   { background: var(--c-surface-2); }
.section--brand  { background: var(--c-brand-tint); }
.prose { max-width: var(--maxw-prose); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font-family: var(--font-heading);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                 /* comfortable tap target */
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  font-size: var(--t-base);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; width: 1.15em; height: 1.15em; }

.btn--primary { background: var(--c-brand); color: #fff; box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--c-brand-dark); color: #fff; box-shadow: var(--sh-3); }

.btn--ghost { background: transparent; color: var(--c-brand); border-color: var(--c-brand); }
.btn--ghost:hover { background: var(--c-brand); color: #fff; }

.btn--wa { background: var(--c-whatsapp-btn); color: #fff; }
.btn--wa:hover { background: var(--c-whatsapp-dark); color: #fff; }

.btn--onDark {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn--onDark:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

.btn--white { background: #fff; color: var(--c-brand); }
.btn--white:hover { background: var(--c-brand-tint); color: var(--c-brand-dark); }

.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
/* The logo artwork is white, so the header is dark — transparent while it sits
   over a hero image, solid #222 once stuck or on pages with no hero image. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-header);
  /* No border: it would add 1px to the header height and leave a white sliver
     above the hero, which pulls up by exactly --header-h. Divider is a shadow. */
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header[data-variant="transparent"] { background: transparent; }
.site-header.is-stuck {
  background: var(--c-header);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 2px 14px rgba(0,0,0,.22);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 68px;
}
.brand { flex: none; display: inline-flex; align-items: center; }
.brand img { width: auto; height: 42px; }

.nav { margin-left: auto; display: none; min-width: 0; }   /* desktop only */
.nav ul { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
.nav a, .nav .nav-toggle {
  font-family: var(--font-heading);
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  color: rgba(255,255,255,.88);
  font-size: var(--t-sm);
  font-weight: var(--fw-med);
  text-decoration: none;
  border-radius: var(--r-md);
  white-space: nowrap;
}
.nav a:hover, .nav .nav-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a[aria-current="page"] { color: #fff; font-weight: var(--fw-semi); }
.nav .caret { width: .7em; height: .7em; transition: transform var(--dur) var(--ease); }
.nav-item--has-children:hover .caret, .nav-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--s-2);
  display: block;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.submenu ul { flex-direction: column; align-items: stretch; gap: 0; }
.submenu a { display: block; padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--c-ink-2); }
.submenu a:hover { background: var(--c-brand-tint); color: var(--c-brand-dark); }
.submenu a[aria-current="page"] { color: var(--c-brand); }
.nav-item--has-children:hover > .submenu,
.nav-item--has-children:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }
.lang-switch {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm); font-weight: var(--fw-med);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.lang-switch:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); }
.header-call { display: none; flex: none; }

.burger {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-md);
  color: #fff;
}
.burger svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .burger { display: none; }
  .header-call { display: inline-flex; }
  .header-actions { margin-left: var(--s-2); }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr min(86vw, 360px);
  visibility: hidden;
}
.drawer[data-open="true"] { visibility: visible; }
.drawer__scrim {
  background: rgba(16,35,54,.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  background: #fff;
  padding: var(--s-5) var(--s-5) calc(var(--s-8) + var(--mobilebar-h));
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.drawer[data-open="true"] .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.drawer__brand { font-weight: var(--fw-bold); color: var(--c-brand); font-size: var(--t-lg); }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav li { margin: 0; border-bottom: 1px solid var(--c-line); }
.drawer nav a, .drawer .nav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%;
  padding: var(--s-4) var(--s-1);
  color: var(--c-ink);
  font-weight: var(--fw-med);
  text-decoration: none;
}
.drawer .submenu-m { display: none; padding-bottom: var(--s-2); }
.drawer .submenu-m[data-open="true"] { display: block; }
.drawer .submenu-m li { border: 0; }
.drawer .submenu-m a {
  padding: var(--s-3) var(--s-1) var(--s-3) var(--s-5);
  font-weight: var(--fw-normal);
  font-size: var(--t-sm);
  color: var(--c-ink-3);
}
.drawer .caret { width: .8em; height: .8em; transition: transform var(--dur) var(--ease); }
.drawer .nav-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
body[data-lock="true"] { overflow: hidden; }

/* Directions button — carries the Google Maps pin so it is recognisable at a
   glance, with a text label so its purpose is never ambiguous. */
.btn--maps { background: #fff; color: var(--c-ink); box-shadow: var(--sh-2); }
.btn--maps:hover { background: #F1F5F9; color: var(--c-ink); box-shadow: var(--sh-3); }
.btn--maps img { width: 18px; height: 26px; flex: none; }

/* ==========================================================================
   Hero — full-bleed background photo under a dark scrim, white headline.
   The header sits transparently on top of this, which is why the logo is white.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h));   /* pull up under the transparent header */
  padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 7vw, 6.5rem));
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 5rem);
  background-color: #232828;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
.hero::before {                              /* the #232828 / 45% overlay */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,40,40,.52) 0%, rgba(35,40,40,.42) 55%, rgba(35,40,40,.62) 100%);
  z-index: -1;
}
.hero__grid { display: grid; gap: var(--s-8); align-items: center; }
.hero h1 { color: #fff; margin-bottom: var(--s-5); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero__lead { font-size: var(--t-lg); color: rgba(255,255,255,.94); max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-whatsapp); flex: none;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__inner { max-width: 46rem; }
}

/* Interior page head — same full-bleed treatment as the hero. */
.pagehead {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(3rem, 1.6rem + 6vw, 6rem));
  padding-bottom: clamp(3rem, 1.6rem + 5vw, 5.5rem);
  background-color: var(--c-header);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,40,40,.62) 0%, rgba(35,40,40,.52) 100%);
  z-index: -1;
}
.pagehead h1 { color: #fff; margin-bottom: var(--s-3); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.pagehead__lead { font-size: var(--t-lg); color: rgba(255,255,255,.93); max-width: 66ch; }
/* Pages with no background image (contact, legal) keep a flat dark head. */
.pagehead--plain { background-image: none; }

/* Breadcrumbs sit on the dark head */
.pagehead .crumbs { color: rgba(255,255,255,.72); }
.pagehead .crumbs a { color: rgba(255,255,255,.72); }
.pagehead .crumbs a:hover { color: #fff; }
.pagehead .crumbs li + li::before { color: rgba(255,255,255,.4); }

/* Breadcrumbs */
.crumbs { font-size: var(--t-sm); color: var(--c-muted); margin-bottom: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--c-line); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-brand); text-decoration: underline; }

/* ==========================================================================
   Doctor intro
   ========================================================================== */
.doctor { display: grid; gap: var(--s-8); align-items: center; }
.doctor__credential {
  display: block;
  color: var(--c-brand);
  font-weight: var(--fw-semi);
  font-size: var(--t-base);
  margin-top: var(--s-2);
  margin-bottom: var(--s-5);
}
.doctor__media img {
  width: 100%; border-radius: var(--r-lg);
  box-shadow: var(--sh-2); object-fit: cover;
}
@media (min-width: 900px) {
  .doctor { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
  .doctor--reverse .doctor__media { order: -1; }
}

/* ==========================================================================
   Section heading
   ========================================================================== */
.sec-head { max-width: 62ch; margin-bottom: var(--s-10); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: var(--s-4); color: var(--c-ink-3); font-size: var(--t-lg); }

/* ==========================================================================
   Treatment area cards
   ========================================================================== */
.cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: var(--c-brand-tint-2);
}
.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  flex: none;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--t-lg); }
.card p { color: var(--c-ink-3); font-size: var(--t-sm); }
.card__more {
  margin-top: auto; padding-top: var(--s-2);
  color: var(--c-brand); font-weight: var(--fw-semi); font-size: var(--t-sm);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.card__more svg { width: 1.1em; height: 1.1em; }
a.card:hover .card__more { gap: var(--s-3); }

/* Services (plain list of h3+p) */
.services { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .services { grid-template-columns: repeat(2, 1fr); } }
/* Three across, so nine services fill three even rows rather than 4 + 4 + 1. */
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
.service { padding-left: var(--s-5); border-left: 3px solid var(--c-brand-tint-2); }
.service h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.service p { color: var(--c-ink-3); font-size: var(--t-sm); }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats { background: var(--c-brand); color: #fff; }
.stats__grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
}
.stat__num {
  display: block;
  font-size: var(--t-4xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: var(--s-3); font-size: var(--t-sm); opacity: .92; }

/* Trust badges */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
  box-shadow: var(--sh-1);
}
.badge svg { width: 18px; height: 18px; color: var(--c-brand); flex: none; }

/* ==========================================================================
   Testimonials — a continuous marquee. Cards are a fixed width and clamped
   height so the row reads evenly instead of leaving a ragged orphan.
   ========================================================================== */
.tst-section { overflow: hidden; }

.marquee {
  position: relative;
  margin-top: var(--s-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee__group { display: flex; gap: var(--s-5); padding-inline: calc(var(--s-5) / 2); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Pause when someone wants to read one */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.tst {
  display: flex; flex-direction: column; gap: var(--s-4);
  flex: 0 0 auto;
  width: min(340px, 78vw);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.tst__stars { display: flex; gap: 2px; color: var(--c-star); }
.tst__stars svg { width: 17px; height: 17px; }
.tst blockquote {
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--t-base);
  display: -webkit-box;
  -webkit-line-clamp: 7;          /* keeps a very long review from stretching the row */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tst__author {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--s-3);
  font-weight: var(--fw-semi); color: var(--c-ink); font-size: var(--t-sm);
}
.tst__avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-brand-tint);
  color: var(--c-brand-dark);
  font-weight: var(--fw-bold);
}

/* Reduced motion, or no JS/animation support: a plain swipeable row. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Content prose (legal pages, condition body copy)
   ========================================================================== */
.content h2 { margin-top: var(--s-12); margin-bottom: var(--s-4); font-size: var(--t-2xl); }
.content h3 { margin-top: var(--s-8);  margin-bottom: var(--s-3); }
.content > :first-child { margin-top: 0; }
.content p, .content ul, .content ol { margin-bottom: var(--s-4); color: var(--c-ink-2); }
.content ul { padding-left: 0; list-style: none; }
.content ul li {
  position: relative;
  padding-left: var(--s-8);
  margin-bottom: var(--s-3);
}
.content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
}
.content img { border-radius: var(--r-lg); margin-block: var(--s-8); box-shadow: var(--sh-2); }

/* Gallery — a single scrolling row, full width. Sources are 900x600, so a
   460px card needs 920 device pixels on a 2x screen, a 1.02x upscale.
   (examination-clinic is the one photo still only 450x300.) */
.gallery-marquee {
  position: relative;
  overflow: hidden;          /* the track is width:max-content; without this it
                                widens the page instead of scrolling inside */
  /* Break out of the reading column: the photos deserve the full width. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--s-12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery-marquee .marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.gallery-marquee .marquee__group { display: flex; gap: var(--s-4); padding-inline: calc(var(--s-4) / 2); }
.gallery-marquee:hover .marquee__track,
.gallery-marquee:focus-within .marquee__track { animation-play-state: paused; }

.gal__item {
  flex: 0 0 auto;
  width: 460px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.gal__item img {
  display: block;
  width: 460px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .gallery-marquee .marquee__track { animation: none; }
  .gallery-marquee .marquee__group[aria-hidden="true"] { display: none; }
}

/* Images that need rounding outside .content */
.rounded, .contact-photo { border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.contact-photo { margin-top: var(--s-8); }

/* ==========================================================================
   Treatment tiles — the condition photo with its name over it, as on the
   previous site, rather than a generic icon card.
   ========================================================================== */
.tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* a final odd tile centres instead of stranding left */
  gap: var(--s-4);
}
.tile { flex: 0 0 100%; }        /* one per row on small screens */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 2;
  background: var(--c-ink);
  text-decoration: none;
  box-shadow: var(--sh-2);
  isolation: isolate;
}
.tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
  z-index: -2;
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,26,36,.18) 0%, rgba(16,26,36,.34) 45%, rgba(16,26,36,.84) 100%);
  z-index: -1;
  transition: background var(--dur) var(--ease);
}
.tile:hover .tile__img { transform: scale(1.06); }
.tile:hover::after {
  background: linear-gradient(180deg, rgba(43,108,176,.28) 0%, rgba(16,26,36,.45) 45%, rgba(16,26,36,.90) 100%);
}
.tile__label {
  position: absolute;
  left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--t-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.tile__label svg { width: 1em; height: 1em; opacity: 0; transform: translateX(-6px); transition: all var(--dur) var(--ease); }
.tile:hover .tile__label svg { opacity: 1; transform: translateX(0); }

/* Fixed widths so rows hold exactly two, then exactly three. A leftover tile
   wraps and centres at the same size as the rest. */
@media (min-width: 700px) {
  .tile { flex: 0 0 calc((100% - var(--s-4)) / 2); }
}
@media (min-width: 1000px) {
  .tile { flex: 0 0 calc((100% - 2 * var(--s-4)) / 3); }
}

/* ==========================================================================
   Trust signals — large enough to actually read and register.
   ========================================================================== */
.trust { background: var(--c-surface-2); border-block: 1px solid var(--c-line); }
.trust__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-8);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 640px) { .trust__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.trust__item {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  padding: var(--s-6) var(--s-4);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.trust__ico {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
.trust__ico svg { width: 30px; height: 30px; stroke-width: 1.6; }
.trust__label {
  font-family: var(--font-heading);
  font-size: var(--t-lg);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: 1.25;
}

/* ==========================================================================
   Split block — supporting points on one side, the photo on the other.
   ========================================================================== */
.split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
  margin-block: var(--s-10);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
  .split__media { order: 2; }
}
.split__points { display: grid; gap: var(--s-6); }
.point { padding-left: var(--s-5); border-left: 3px solid var(--c-brand-tint-2); }
.point h3 { margin: 0 0 var(--s-2); font-size: var(--t-lg); }
.point p { margin: 0; color: var(--c-ink-3); }
.split__media { margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.split__media img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  margin: 0; border-radius: 0; box-shadow: none;
}

/* ==========================================================================
   Contact panel + WhatsApp form
   ========================================================================== */
.contact-grid { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

.info-list { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-5); }
.info-list li { margin: 0; display: flex; gap: var(--s-4); align-items: flex-start; }
.info-list .ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
.info-list .ico svg { width: 20px; height: 20px; }
.info-list .lbl { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: var(--fw-semi); margin-bottom: 2px; }
.info-list .val { color: var(--c-ink); font-weight: var(--fw-med); }
.info-list a.val { text-decoration: none; }
.info-list a.val:hover { color: var(--c-brand); text-decoration: underline; }

.form-card {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
@media (min-width: 600px) { .form-card { padding: var(--s-8); } }
.form-card h3 { margin-bottom: var(--s-2); }
.form-card__note { font-size: var(--t-sm); color: var(--c-muted); margin-bottom: var(--s-6); }

.field { margin-bottom: var(--s-5); }
.field label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}
.field .req { color: #C53030; }
.field input, .field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  background: var(--c-surface-2);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: #C9D3DE; }
.field input:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(43,108,176,.16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C53030; }
.field .err { display: none; margin-top: var(--s-2); font-size: var(--t-sm); color: #C53030; }
.field .err[data-show="true"] { display: block; }

.form-foot { font-size: var(--t-sm); color: var(--c-muted); margin-top: var(--s-4); text-align: center; }

/* ==========================================================================
   Final CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-darker) 100%);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--s-4); }
.cta-band p { color: rgba(255,255,255,.92); max-width: 58ch; margin-inline: auto; font-size: var(--t-lg); }
.cta-band .hero__actions { justify-content: center; }

/* ==========================================================================
   Footer — three columns (bio + contact, address + hours, map), matching the
   previous layout, with the legal row underneath.
   ========================================================================== */
.site-footer {
  background: var(--c-ink);
  color: #B9C4CF;
  padding-top: var(--section-y);
  padding-bottom: calc(var(--s-8) + var(--mobilebar-h));
  font-size: var(--t-sm);
}
@media (min-width: 1024px) { .site-footer { padding-bottom: var(--s-8); } }

.footer-grid { display: grid; gap: var(--s-10); }
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.25fr .8fr 1.1fr; gap: var(--s-12); } }

.footer-title {
  color: #fff;
  font-size: var(--t-lg);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.site-footer p { line-height: 1.75; }
.site-footer p + p { margin-top: var(--s-4); }
.site-footer a { color: #B9C4CF; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-phone { display: flex; align-items: center; gap: var(--s-3); }
.footer-phone__ico { display: inline-flex; color: #fff; }
.footer-phone__ico svg { width: 17px; height: 17px; }
.footer-phone a { color: #fff; font-weight: var(--fw-semi); }

.footer-hours strong { color: #fff; font-weight: var(--fw-semi); }
.footer-fee { margin-top: var(--s-4); }

/* Square social buttons, as the previous footer had */
.social { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.09);
  color: #fff;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social a:hover { background: var(--c-brand); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }

/* Square map, directly under the address block. Lazy-loaded. */
.footer-map {
  margin-top: var(--s-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  line-height: 0;
  aspect-ratio: 1 / 1;
  max-width: 340px;
}
.footer-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer-list li { margin: 0; }

.footer-bottom {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs);
}
.footer-bottom nav { display: flex; gap: var(--s-3); align-items: center; }
.footer-bottom nav span { opacity: .4; }

/* ==========================================================================
   Sticky mobile action bar  — the main mobile CRO element
   ========================================================================== */
.mobilebar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgba(16,35,54,.10);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobilebar a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--mobilebar-h);
  background: #fff;
  color: var(--c-ink);
  font-weight: var(--fw-semi);
  font-size: var(--t-sm);
  text-decoration: none;
}
.mobilebar a svg { width: 20px; height: 20px; flex: none; }
.mobilebar .m-call { color: var(--c-brand); }
.mobilebar .m-wa   { background: var(--c-whatsapp-btn); color: #fff; }
.mobilebar .m-wa:hover { background: var(--c-whatsapp-dark); }
@media (min-width: 1024px) { .mobilebar { display: none; } }

/* Floating desktop WhatsApp bubble */
.wa-float { display: none; }
@media (min-width: 1024px) {
  .wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 150;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--c-whatsapp); color: #fff;
    border-radius: 50%;
    box-shadow: var(--sh-3);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .wa-float:hover { background: var(--c-whatsapp-dark); transform: scale(1.06); }
  .wa-float svg { width: 28px; height: 28px; }
}

/* 404 */
.nf { text-align: center; padding-block: var(--s-24); }
.nf__code { font-size: clamp(4rem, 12vw, 7rem); font-weight: var(--fw-bold); color: var(--c-brand-tint-2); line-height: 1; }

/* Footer map — matches the embed the previous site carried on every page,
   but lazy-loaded so it costs nothing until it is scrolled near. */
.footer-map {
  margin-top: var(--s-10);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  line-height: 0;
}
.footer-map iframe { display: block; width: 100%; border: 0; filter: grayscale(.25); }

/* CTA band with the page's photo beside the copy, rather than the photo
   stranded in an empty section underneath. */
.cta-band--split { text-align: left; }
.cta-band__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .cta-band__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-12); }
}
.cta-band--split p { margin-inline: 0; }
.cta-band--split .hero__actions { justify-content: flex-start; }
.cta-band__media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 25%;
}
@media (min-width: 900px) {
  .cta-band__media img { aspect-ratio: 3 / 4; max-height: 440px; margin-left: auto; width: auto; }
}

/* Contact page columns */
.contact-col__title { font-size: var(--t-2xl); margin-bottom: var(--s-4); }
.contact-col__intro { color: var(--c-ink-3); margin-bottom: var(--s-6); }
.contact-col--form { position: relative; }
@media (min-width: 900px) { .contact-col--form { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.contact-photo { margin: var(--s-8) 0 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.contact-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 22%; margin: 0; border-radius: 0; box-shadow: none; }
.info-list .status-badge { margin-top: var(--s-3); }

/* ==========================================================================
   Live clinic status badge
   Populated by clinic.js from the clinic's own timezone, so a visitor
   abroad still sees the clinic's real open/closed state.
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
.status-badge[data-state="open"] .status-dot { animation: status-pulse 2.4s ease-in-out infinite; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: .65; }
}
.status-detail { font-weight: var(--fw-normal); opacity: .92; }

/* On the dark header */
.status-badge--header { display: none; }
@media (min-width: 1160px) { .status-badge--header { display: inline-flex; } }
.status-badge--header[data-state="open"] {
  color: #6EE7A8; background: rgba(37,211,102,.13); border-color: rgba(37,211,102,.34);
}
.status-badge--header[data-state="closed"] {
  color: rgba(255,255,255,.82); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2);
}

/* In the drawer and on light surfaces */
.status-badge[data-state="open"] {
  color: #1B7F46; background: #E6F8EE; border-color: #B7E7CD;
}
.status-badge[data-state="closed"] {
  color: var(--c-ink-3); background: var(--c-surface-3); border-color: var(--c-line);
}

/* In the dark footer */
.status-badge--footer { margin-bottom: var(--s-2); }
.status-badge--footer[data-state="open"] {
  color: #6EE7A8; background: rgba(37,211,102,.13); border-color: rgba(37,211,102,.32);
}
.status-badge--footer[data-state="closed"] {
  color: #B9C4CF; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16);
}

/* ==========================================================================
   Consultation fee
   ========================================================================== */
.fee-card {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-tint-2);
  border-radius: var(--r-lg);
}
.fee-card__label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: var(--fw-semi);
  color: var(--c-brand-dark);
  margin-bottom: var(--s-1);
}
.fee-card__amount {
  font-family: var(--font-heading);
  font-size: var(--t-3xl);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: 1;
  margin-right: var(--s-2);
}
.fee-card__validity { font-size: var(--t-sm); color: var(--c-ink-3); font-weight: var(--fw-med); }
.fee-card__note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-ink-3); }

.fee-pill {
  display: inline-block;
  padding: 1px var(--s-2);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: var(--fw-semi);
}
.cta-band__fee {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: rgba(255,255,255,.9);
}
.cta-band__fee strong { color: #fff; }

/* ==========================================================================
   Language nudge — a suggestion, never an automatic redirect
   ========================================================================== */
.lang-nudge {
  background: var(--c-brand-darker);
  color: #fff;
  font-size: var(--t-sm);
  position: relative;
  z-index: 101;
}
.lang-nudge__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}
.lang-nudge__cta {
  color: #fff;
  font-weight: var(--fw-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.lang-nudge__cta:hover { color: #fff; opacity: .85; }
.lang-nudge__close {
  margin-left: auto;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  flex: none;
}
.lang-nudge__close:hover { background: rgba(255,255,255,.16); }
.lang-nudge__close svg { width: 17px; height: 17px; }

/* The hero tucks under the transparent header; when the nudge bar is shown it
   is part of normal flow, so nothing needs to move. */