/* ==========================================================================
   Rajshri Dental Clinic — Design System
   Navy-led, teal-supported, on cool white. Every value below is taken from
   the Brand Colour System Report, which measured them from the official
   logo and favicon. Colours marked "measured" are literal pixels of the
   artwork; the rest are the report's derived neutrals, tints and states.
   Nothing here is a fifth blue, a new teal, or an invented hue.
   ========================================================================== */

:root{
  /* ==================================================================
     Navy — the brand's anchor. #002F7F is the measured wordmark navy and
     it owns the primary action, the eyebrow rules and the one saturated
     band above the footer. The darker steps are its hover and pressed
     states, and both are themselves measured logo colours.
     ================================================================== */
  --blue:#002F7F;          /* measured — Rajshri Navy, primary action     */
  --blue-600:#00246B;      /* measured — hover                            */
  --blue-700:#001C59;      /* measured — pressed                          */
  --blue-050:#EAF1FA;      /* soft blue wash: bands, icon circles, hovers */
  --blue-100:#DCEBF7;      /* deeper wash: tile hover, text on navy       */
  --blue-200:#DCEBF7;      /* body copy on a navy ground (10.08:1)        */
  --link:#0250AF;          /* measured — inline links (7.58:1)            */

  /* Display ink. Deliberately NOT #002F7F: at heading size the saturated
     navy vibrates, so headings, figures and dark chips use the report's
     Deep Ink Navy instead. --navy and --navy-900 are the same value and
     are kept apart only because the templates already say which is which. */
  --navy:#0F2547;
  --navy-900:#0F2547;

  /* The two dark grounds the site is allowed. Not black — the brand's own
     dark is a saturated navy. */
  --footer:#001B4D;
  --footer-deep:#00133A;

  /* ==================================================================
     Teal — the second voice: care, freshness, hygiene. Roughly half the
     navy's presence, matching the logo's own 2:1 ratio. #019CA3 is only
     3.34:1 on white, so teal *text* steps down to --accent-ink and a
     teal fill carrying a small label steps to --accent-ui.
     ================================================================== */
  --accent:#019CA3;        /* measured — Clinic Teal: rules, rings, icons */
  --accent-600:#017C7A;    /* measured — teal hover (5.04:1)              */
  --accent-700:#016B69;    /* measured — teal pressed (6.35:1)            */
  --accent-ink:#00696E;    /* accessible teal for text (6.47:1)           */
  --accent-ui:#00838A;     /* accessible teal fill for small labels       */
  --accent-100:#D6EFF1;    /* teal tile hover, badge fill                 */
  --accent-050:#E6F6F7;    /* soft teal wash                              */
  --accent-line:#D6EFF1;   /* hairline on a teal ground                   */

  /* Sparkle cyan, from the four glints in the mark. Dark grounds only:
     1.99:1 on white, 8.33:1 on the footer navy. */
  --accent-300:#0CCBD6;    /* measured — accent                           */
  --accent-200:#52F3F7;    /* measured — cyan glow, dark grounds only     */

  /* WhatsApp keeps its own brand green: a recoloured WhatsApp mark is not
     recognisable. It is the one non-brand hue with a platform reason. */
  --wa:#25D366;
  --wa-dark:#1EBE5A;
  /* Ink for text and glyphs sitting on WhatsApp green: 7.70:1 on #25D366,
     6.23:1 on the hover green. White on either fails. */
  --wa-ink:#0F2547;

  /* ==================================================================
     Ink and surface. 60-65% of every page is white or cool white; the
     tinted bands are the brand's whole surface presence.
     ================================================================== */
  --ink:#0F2547;           /* headings (15.26:1)                          */
  --body:#334E68;          /* paragraphs (8.64:1)                         */
  --muted:#5B6B82;         /* captions, metadata (5.43:1)                 */
  --subtle:#64748B;        /* placeholders — the lightest text permitted  */
  --line:#D9E2EC;          /* default hairline                            */
  --line-strong:#C7D3E0;   /* hover borders, rules on a tint              */
  --line-soft:#E6EDF5;     /* dividers inside a card                      */
  --bg:#FFFFFF;
  --bg-soft:#F6F9FC;       /* the page canvas                             */
  --bg-soft-2:#F1F5FA;     /* third-tier band, disabled inputs            */
  --tint:#F6F9FC;          /* alternating section ground                  */
  --tint-blue:#EAF1FA;
  --tint-teal:#E6F6F7;

  --star:#F5A623;          /* stars must read as gold to be understood    */

  /* ==================================================================
     States. The green is a genuine green, pushed 26 degrees off the brand
     teal so "success" can never be mistaken for "brand". None of these
     four is a decorative colour.
     ================================================================== */
  --ok:#0E7C4A;      --ok-bg:#E8F6EF;   --ok-line:#BFE5D2;
  --warn:#B45309;    --warn-bg:#FEF4E2; --warn-line:#F3D9A8;
  --err:#C0392B;     --err-bg:#FDECEA;  --err-line:#F5C6C0;
  --info:#013A96;    --info-bg:#EAF1FA; --info-line:#C5DAF2;

  --focus:#019CA3;                       /* 3px ring, 2px offset          */
  --focus-dark:#0CCBD6;                  /* the ring on a navy ground     */
  --focus-ring:rgba(1,156,163,.22);
  --disabled-bg:#E2E8F0;
  --disabled-ink:#98A6B8;

  /* ==================================================================
     Type — one family for the whole site. There is no second face and no
     display alias: the premium sections separate themselves with weight,
     tracking and colour, never with another typeface.
     ================================================================== */
  --font:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Scale */
  --fs-display:clamp(34px,5vw - 6px,62px);
  --fs-h2:clamp(28px,2.9vw,44px);
  --fs-h3:clamp(19px,1.5vw,24px);
  --fs-eyebrow:12.5px;
  --fs-body-lg:clamp(15.5px,1.15vw,17.5px);
  --fs-body:15.5px;
  --fs-sm:13.6px;
  --fs-btn:15.5px;
  --fs-label:11.8px;
  --fs-nav:15px;

  /* Radii */
  --r-sm:10px;
  --r:14px;
  --r-lg:16px;
  --r-xl:22px;
  --r-2xl:26px;
  --r-pill:999px;

  /* Shadows — one ramp, all cast in the brand's deep ink navy, never black. */
  --sh-xs:0 1px 2px rgba(15,37,71,.06);
  --sh-sm:0 2px 8px rgba(15,37,71,.06);
  --sh:0 6px 22px rgba(15,37,71,.08);
  --sh-md:0 12px 34px rgba(15,37,71,.10);
  --sh-lg:0 22px 60px rgba(15,37,71,.14);
  --sh-card:0 24px 56px -34px rgba(15,37,71,.32);

  /* Layout — content rail is 1320px on large desktop and ~92% of the
     viewport below that, so sections breathe instead of sitting in a
     narrow central column. */
  --wrap:1320px;
  --gutter:clamp(14px,4vw,44px);
  --header-h:82px;
  --topbar-h:38px;

  /* Vertical rhythm */
  --sec-y:clamp(56px,6.4vw,108px);
  --sec-y-tight:clamp(44px,4.6vw,76px);

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


/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
picture{display:block}
/* Where we crop with object-fit:cover, the <picture> wrapper must fill the box
   so the img's height:100% has something to resolve against. */
.slide__media picture,.card__media picture,.gallery__item picture,.doctor__frame picture{
  display:block;width:100%;height:100%;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,figcaption,blockquote,dl,dd{margin:0}
address{font-style:normal}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.2;letter-spacing:-.02em}

.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* A narrower rail for long-form copy that should not run edge to edge. */
.wrap--narrow{max-width:calc(940px + var(--gutter) * 2)}
.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}
/* The skip link is the first thing a keyboard reaches, and a focused
   control has to be visible (2.4.7). Clipped is fine until then. */
a.sr-only:focus-visible{
  position:fixed;top:12px;left:12px;z-index:1000;
  width:auto;height:auto;margin:0;padding:10px 18px;overflow:visible;clip:auto;
  background:#fff;color:var(--blue);border-radius:var(--r-sm);
  font-weight:700;font-size:15px;text-decoration:none;
  box-shadow:0 10px 26px rgba(15,37,71,.24);outline:3px solid var(--focus);outline-offset:2px;
}

.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon--fill{fill:currentColor;stroke:none}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--blue);--btn-fg:#fff;--btn-bd:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);min-height:50px;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-weight:700;font-size:15.5px;letter-spacing:.01em;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
  box-shadow:0 6px 18px rgba(0,47,127,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,47,127,.28);background:var(--blue-600);border-color:var(--blue-600)}
.btn:active{transform:translateY(0)}
.btn .icon{width:18px;height:18px}

/* WhatsApp's own green stays exactly as WhatsApp publishes it — it is their
   colour, not ours to restyle — but white on it is 1.98:1, so the label and
   glyph take the brand ink instead: 7.7:1 on the fill, 6.2:1 on the hover. */
.btn--wa{--btn-bg:var(--wa);--btn-bd:var(--wa);--btn-fg:var(--wa-ink);box-shadow:0 6px 18px rgba(37,211,102,.26)}
.btn--wa:hover{background:var(--wa-dark);border-color:var(--wa-dark);color:var(--wa-ink);box-shadow:0 12px 26px rgba(37,211,102,.32)}

.btn--ghost{--btn-bg:#fff;--btn-fg:var(--blue);--btn-bd:var(--line);box-shadow:var(--sh-sm)}
.btn--ghost:hover{background:#fff;color:var(--blue-600);border-color:var(--blue-100);box-shadow:var(--sh)}

.btn--wa-ghost{--btn-bg:#fff;--btn-fg:#0F7A35;--btn-bd:#CBEFD8;box-shadow:var(--sh-sm)}
.btn--wa-ghost:hover{background:#F2FCF6;color:#0C6E2E;border-color:#A9E5C0;box-shadow:var(--sh)}

.btn--light{--btn-bg:#fff;--btn-fg:var(--blue);--btn-bd:#fff;box-shadow:0 10px 26px rgba(15,37,71,.18)}
.btn--light:hover{background:#fff;color:var(--blue-700);border-color:#fff}

.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55);box-shadow:none}
.btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;box-shadow:none}

.btn--lg{padding:17px 34px;font-size:16.5px;min-height:58px}
.btn--block{width:100%}

/* ---------- Section chrome ---------- */
.section{padding:var(--sec-y) 0}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:var(--sec-y-tight) 0}

.s-head{max-width:720px;margin:0 auto clamp(34px,3.6vw,58px);text-align:center}
.s-head--left{margin-inline:0;text-align:left}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--blue);opacity:.65}
.s-head--left .eyebrow{margin-bottom:12px}
.s-title{font-size:clamp(28px,2.9vw,44px);line-height:1.15}
.s-sub{margin-top:16px;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.7;color:var(--body)}
.s-rule{width:64px;height:4px;border-radius:4px;background:var(--blue);margin:18px auto 0}

/* ==========================================================================
   PREMIUM ("lux") PRIMITIVES
   Opt-in modifiers used only by Treatments, Why Choose Us, Meet Your Dentist
   and the clinic gallery. The base classes above are untouched, so every other
   section keeps the existing medical-blue treatment.
   ========================================================================== */
.section--lux{background:var(--tint)}

.eyebrow--lux{
  color:var(--accent-ink);font-size:12.5px;letter-spacing:.22em;font-weight:700;
  gap:14px;margin-bottom:14px;
}
.eyebrow--lux::before,.eyebrow--lux::after{
  content:"";width:26px;height:1px;background:var(--accent);opacity:.75;border-radius:0;
}
.s-head--left .eyebrow--lux::after{display:none}

.s-title--lux{
  font-weight:800;letter-spacing:-.03em;
  color:var(--navy-900);line-height:1.12;
}

/* Hairline with a small diamond — the section divider in the approved look. */
.s-rule--lux{
  position:relative;width:186px;height:1px;border-radius:0;
  background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);
  opacity:.85;margin-top:20px;
}
.s-rule--lux::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--tint);border:1px solid var(--accent);
}
.section--lux .s-rule--lux::after{background:var(--tint)}
.s-head--left .s-rule--lux{margin-inline:0;width:150px}
.s-head--left .s-rule--lux::after{left:0;transform:translate(-50%,-50%) rotate(45deg)}

/* Primary CTA for these sections: deep navy with a cyan arrow. */
.btn--lux{
  --btn-bg:var(--blue);--btn-fg:#fff;--btn-bd:var(--blue);
  box-shadow:0 10px 26px rgba(15,37,71,.22);
}
.btn--lux:hover{
  background:var(--blue-600);border-color:var(--blue-600);
  box-shadow:0 14px 32px rgba(15,37,71,.28);
}
.btn--lux .icon--accent{color:var(--accent)}

.btn--lux-ghost{
  --btn-bg:#fff;--btn-fg:var(--blue);--btn-bd:var(--blue);
  box-shadow:0 4px 14px rgba(15,37,71,.06);
}
.btn--lux-ghost:hover{
  background:var(--blue-050);color:var(--blue);border-color:var(--blue);
  box-shadow:0 8px 20px rgba(15,37,71,.10);
}
.btn--lux-ghost .icon{color:var(--accent)}

/* Small cyan-on-tint icon chip shared by the feature and expertise lists. */
.lux-chip{
  width:42px;height:42px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:var(--accent-050);color:var(--accent);
  border:1px solid var(--accent-100);
}
.lux-chip .icon{width:21px;height:21px}
.s-head--left .s-rule{margin-inline:0}

/* ==========================================================================
   1. TOP BAR
   ========================================================================== */
/* Slim information strip — present but never competing with the header. */
.topbar{background:var(--blue);color:#DCEBF7;font-size:13px;letter-spacing:.005em}
.topbar__inner{display:flex;align-items:center;gap:20px;min-height:var(--topbar-h)}
.topbar__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:500}
.topbar__item .icon{width:14px;height:14px;color:var(--blue-200);opacity:.95}
.topbar__item a{transition:color .16s var(--ease)}
.topbar__item a:hover{color:#fff}
.topbar__sep{width:1px;height:14px;background:rgba(255,255,255,.14)}
.topbar__spacer{flex:1}
.topbar__social{display:inline-flex;align-items:center;gap:6px}
.topbar__social span{margin-right:4px;color:#C7D3E0;font-size:12.5px}
.topbar__social a{
  width:24px;height:24px;border-radius:50%;color:#DCEBF7;
  display:grid;place-items:center;background:rgba(255,255,255,.07);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.topbar__social a .icon{width:12.5px;height:12.5px}
.topbar__social a:hover{background:rgba(255,255,255,.16);color:#fff}

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:200;background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.header.is-stuck{box-shadow:0 6px 26px rgba(15,37,71,.10)}
.header__inner{display:flex;align-items:center;gap:18px;min-height:var(--header-h);max-width:calc(var(--wrap) + var(--gutter) * 2)}

.brand{display:inline-flex;align-items:center;gap:11px;flex:none}

/* The official logo. Sized as a box with object-fit:contain, so whatever the
   file's real aspect ratio is it letterboxes inside — never stretched, never
   cropped, never recoloured. The wordmark below it is the interim fallback
   the data report asks for while the official artwork is outstanding: the
   sibling rule hides it while the <img> is in the DOM, and the img's onerror
   removes itself, which lets the wordmark back in if the file is missing.
   It is type, not a mark: the tooth-and-R monogram is the clinic's own
   artwork and is not redrawn anywhere in this project. */
.brand__logo{
  display:block;flex:none;
  height:62px;width:auto;max-width:300px;
  object-fit:contain;object-position:left center;
}
.brand__logo ~ .brand__fallback{display:none}
.brand__fallback{display:inline-flex;align-items:center;gap:11px}
.brand__text{display:block}
/* The wordmark follows the lockup's own structure — the name in the
   measured navy above the practice type in letterspaced teal caps — and
   goes no further than that. */
.brand__name{font-size:23px;font-weight:800;letter-spacing:-.025em;color:var(--blue);line-height:1.02}
.brand__name em{font-style:normal;color:var(--blue)}
.brand__sub{display:block;font-size:9.6px;font-weight:750;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);margin-top:5px}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:0}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:10px 14px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.nav__link:hover{color:var(--blue)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--blue)}
.nav__link .icon{width:14px;height:14px;opacity:.7}

.header__cta{display:flex;align-items:center;gap:10px;flex:none}
.header__cta .btn{
  padding:13px 24px;font-size:15px;min-height:48px;
  border-radius:12px;box-shadow:0 6px 16px rgba(0,47,127,.20);
}
.header__cta .btn:hover{box-shadow:0 10px 22px rgba(0,47,127,.26)}

.burger{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--navy);
  place-items:center;flex:none;
}
.burger:hover{background:var(--bg-soft)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:400;
  background:#fff;box-shadow:-16px 0 50px rgba(15,37,71,.2);
  transform:translateX(100%);transition:transform .32s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
/* The drawer's logo sits where the wordmark used to: first in the row, with
   the close button opposite it. Kept to the height of that button, so the
   row is exactly as tall as it was.

   Written as `.drawer .drawer__brand` on purpose. The small-screen header
   rule further down centres `.brand` with `order:2` and `margin-inline:auto`
   — which is right for the header bar and wrong here, and would otherwise
   win by coming later in the file. */
.drawer .drawer__brand{order:0;margin-inline:0;min-width:0}
.drawer .drawer__brand .brand__logo{height:40px;max-width:min(200px,calc(100% - 8px))}
.drawer__close{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);flex:none}
.drawer__nav{padding:10px 12px}
.drawer__nav a{display:flex;align-items:center;justify-content:space-between;padding:13px 12px;border-radius:var(--r-sm);font-weight:650;color:var(--ink);font-size:15.5px}
.drawer__nav a:hover{background:var(--blue-050);color:var(--blue)}
.drawer__foot{margin-top:auto;padding:18px;border-top:1px solid var(--line-soft);display:grid;gap:10px}
.drawer__meta{padding:2px 4px 6px;font-size:13.5px;color:var(--muted);display:grid;gap:8px}
.drawer__meta span{display:flex;gap:9px;align-items:flex-start}
.drawer__meta .icon{width:16px;height:16px;color:var(--blue);margin-top:3px}
.scrim{position:fixed;inset:0;background:rgba(15,37,71,.5);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;z-index:350;backdrop-filter:blur(2px)}
.scrim.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   3. HERO SLIDER
   ========================================================================== */
.hero{position:relative;background:var(--bg-soft)}
.hero__viewport{position:relative;overflow:hidden}
.hero__track{position:relative}

.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .75s var(--ease),visibility .75s;
  pointer-events:none;
}
.slide.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.slide__media{position:relative}
.slide__media img{width:100%;height:100%;object-fit:cover;object-position:70% 14%}

/* Desktop: image is the background, text sits on the clean left half */
/* ------------------------------------------------------------------
   Desktop: a true split-screen. The left column holds all the content and
   aligns to the page rail; the right column is the photograph at full
   panel height in its natural colour. No text ever sits over the image.
   ------------------------------------------------------------------ */
@media (min-width:900px){
  .slide{
    display:grid;
    grid-template-columns:50% 50%;
    align-items:stretch;
    min-height:650px;
  }
  /* .slide__media precedes .slide__body in the DOM, so the tracks are
     assigned explicitly rather than left to auto-placement. */
  .slide__media{grid-column:2;grid-row:1;position:relative;inset:auto;height:100%;overflow:hidden}
  .slide__media picture{height:100%}
  .slide__media img{width:100%;height:100%;object-fit:cover;object-position:68% center}
  /* A narrow feather on the panel's inner edge only — enough to soften the
     seam, not enough to wash out the photograph. */
  .slide__media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(246,249,252,.9) 0%,rgba(246,249,252,.4) 3.5%,rgba(246,249,252,0) 9%);
  }
  .slide__body{
    grid-column:1;grid-row:1;
    position:relative;z-index:2;display:flex;align-items:center;min-height:650px;
    padding-block:28px;
    padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));
    padding-right:clamp(24px,2.4vw,40px);
  }
  /* The rail padding lives on .slide__body, so the inner wrap must not add
     its own or the copy column falls out of alignment with the page. */
  .slide__body > .wrap{max-width:none;width:100%;padding-inline:0}
  .slide__copy{width:100%;max-width:none;padding-right:0}
}

@media (min-width:1200px){
  .slide,.slide__body{min-height:660px}
}

@media (min-width:900px){
  .stat__label{white-space:nowrap}
}
@media (min-width:900px) and (max-width:1199px){
  .stat{gap:12px;padding:22px 16px}
  .stat__ico .icon{width:26px;height:26px}
}

.slide__copy{position:relative}
.slide__kicker{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 17px 8px 11px;border-radius:var(--r-pill);
  background:var(--blue-050);color:var(--blue-700);
  font-size:13.5px;font-weight:750;letter-spacing:.02em;margin-bottom:22px;
  border:1px solid var(--blue-100);
}
.slide__kicker .icon{width:16px;height:16px;color:var(--blue)}
/* Stepped rather than fluid, so the headline lands inside the intended
   range at every target width: 34px mobile, 44-48px tablet, 54-58px desktop. */
.slide__title{font-size:34px;line-height:1.08;letter-spacing:-.03em;color:var(--navy)}
.slide__title em{font-style:normal;color:var(--blue)}
@media (min-width:480px){.slide__title{font-size:38px}}
@media (min-width:600px){.slide__title{font-size:44px}}
@media (min-width:900px){.slide__title{font-size:48px}}
@media (min-width:1100px){.slide__title{font-size:56px}}
@media (min-width:1300px){.slide__title{font-size:62px}}

.slide__text{margin-top:20px;font-size:17px;line-height:1.62;color:var(--body);max-width:520px}
@media (min-width:900px){.slide__text{font-size:18.5px}}

.slide__points{display:flex;flex-wrap:wrap;gap:14px clamp(18px,2.2vw,32px);margin-top:30px}
.slide__points li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:11px;align-items:center;
  line-height:1.25;color:var(--muted);font-weight:600;
}
.slide__points li b{grid-column:2;grid-row:1;font-size:15px;font-weight:750;color:var(--ink)}
.slide__points li span{grid-column:2;grid-row:2;font-size:13.4px;margin-top:1px}
.slide__points .tick{
  grid-column:1;grid-row:1 / span 2;
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--blue-050);color:var(--blue);
}
.slide__points .tick .icon{width:19px;height:19px}

.slide__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* Secondary CTA keeps the primary's height but a tighter width, so Book
   Appointment stays the larger of the two whatever the label length. */
.slide__actions .btn--wa-ghost{padding-inline:27px}

/* ------------------------------------------------------------------
   Brand panel — what the right-hand half of a slide shows when the clinic
   has not supplied a photograph.

   It is not a stand-in for one. No stock image and no illustration of a
   practice nobody has photographed: two soft brand washes, a dot grid, a
   tooth outline at 7% and three small glints. That is the decorative
   vocabulary the colour system allows for a light hero, and none of it
   could be mistaken for a picture of this clinic. Upload a photograph in
   the admin panel and the approved photographic hero returns by itself.
   ------------------------------------------------------------------ */
.slide__media--brand{
  position:relative;overflow:hidden;min-height:300px;
  background:
    radial-gradient(78% 62% at 78% 18%, var(--tint-teal) 0%, rgba(230,246,247,0) 62%),
    radial-gradient(86% 70% at 22% 92%, var(--tint-blue) 0%, rgba(234,241,250,0) 66%),
    var(--bg-soft);
}
.slide__media--brand::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(0,47,127,.26) 1.1px,transparent 1.1px);
  background-size:19px 19px;opacity:.4;
  -webkit-mask-image:radial-gradient(72% 72% at 60% 42%,#000,transparent 76%);
  mask-image:radial-gradient(72% 72% at 60% 42%,#000,transparent 76%);
}
.brand-panel{position:absolute;inset:0;display:grid;place-items:center}
.brand-panel__tooth{
  width:min(58%,320px);height:auto;fill:none;
  stroke:var(--blue);stroke-width:.5;opacity:.07;
}
.brand-panel__glint{position:absolute;color:var(--accent);opacity:.5}
.brand-panel__glint .icon{width:100%;height:100%;fill:currentColor;stroke:none}
.brand-panel__glint--1{width:22px;height:22px;top:23%;right:27%}
.brand-panel__glint--2{width:13px;height:13px;top:35%;right:20%;opacity:.36}
.brand-panel__glint--3{width:16px;height:16px;bottom:27%;left:25%;opacity:.42}
@media (min-width:900px){.slide__media--brand{min-height:650px}}

/* ------------------------------------------------------------------
   Reserved content zones (desktop split-screen only).

   Each zone is pinned to the measured worst case across all three slides
   at that breakpoint, so every slide's kicker, headline, description,
   points and CTAs begin at the same y. Changing slide therefore
   never shifts the layout or resizes the hero.

   The headline scales fluidly (below) so the longest one — "Complete
   Dental Care" — always fits two lines; that keeps its reserve at two
   lines instead of three, which is what pays for the hero height budget.
   Reserves are worst-case, and the webfont is narrower than the fallback,
   so a zone can only ever come in under its reserve, never over it.
   ------------------------------------------------------------------ */
@media (min-width:900px){
  .hero .slide__title{font-size:clamp(40px,5vw - 8px,62px)}

  .hero .slide__kicker{min-height:40px;margin-bottom:14px}
  .hero .slide__title{min-height:2.16em}                 /* 2 lines */
  .hero .slide__text{min-height:3.24em;margin-top:12px}  /* 2 lines */
  .hero .slide__points{min-height:40px;margin-top:18px;align-items:center}
  .hero .slide__actions{min-height:140px;margin-top:20px;align-content:center}
}

/* From 1360 up the CTA pair fits one row and the rating one line. */
@media (min-width:1360px){
  .hero .slide__actions{min-height:66px}
}
@media (min-width:1200px) and (max-width:1359px){
  /* Slide 3's CTA pair wraps to two rows here; 144 clears it outright so the
     zone height is identical whether a slide wraps or not. */
  .hero .slide__actions{min-height:144px}
}

/* Narrower desktops: the points wrap to two rows and the rating to two lines. */
@media (min-width:900px) and (max-width:1199px){
  .slide,.slide__body{min-height:600px}
  .slide__body{padding-block:22px;padding-right:clamp(20px,2.2vw,32px)}
  .hero .slide__text{font-size:16.4px}
  .hero .slide__points{min-height:92px;margin-top:14px;gap:12px 16px}
  .hero .slide__points .tick{width:34px;height:34px}
  .hero .slide__points .tick .icon{width:17px;height:17px}
  .hero .slide__actions{min-height:134px;margin-top:16px;gap:12px}
  .hero .slide__actions .btn--lg,
  .hero .slide__actions .btn--wa-ghost,
  .hero .slide__actions .btn--ghost{padding-inline:20px;font-size:15px;min-height:54px}
}

/* Slider controls */
.hero__arrow{
  position:absolute;top:calc(50% - 24px);transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  color:var(--blue);display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(15,37,71,.14);
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.hero__arrow:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 8px 22px rgba(0,47,127,.30)}
.hero__arrow .icon{width:18px;height:18px;stroke-width:2.1}
.hero__arrow--prev{left:max(12px,calc((100vw - var(--wrap))/2 - 60px))}
.hero__arrow--next{right:max(12px,calc((100vw - var(--wrap))/2 - 60px))}

.hero__dots{
  position:absolute;left:0;right:0;bottom:96px;z-index:6;
  display:flex;justify-content:center;align-items:center;gap:9px;
}
.hero__dots button{
  width:9px;height:9px;border-radius:var(--r-pill);
  background:rgba(15,37,71,.22);transition:all .28s var(--ease);
}
.hero__dots button:hover{background:rgba(15,37,71,.42)}
.hero__dots button[aria-current="true"]{width:30px;background:var(--blue)}

/* ==========================================================================
   4. TRUST STATISTICS
   ========================================================================== */
.stats{position:relative;z-index:8;margin-top:-58px}
.stats__card{
  background:#fff;border-radius:18px;box-shadow:0 18px 46px rgba(15,37,71,.13);
  border:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
/* A credibility bar, not four cards: no icon tiles, numbers carry the weight. */
.stat{display:flex;align-items:center;gap:16px;padding:24px 26px;position:relative;min-height:112px}
.stat + .stat::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:1px;background:var(--line)}
.stat__ico{
  width:48px;height:48px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);
}
.stat__ico .icon{width:24px;height:24px;stroke-width:1.6}
.stat__num{font-size:clamp(32px,2.5vw,38px);font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.stat__label{font-size:clamp(12.4px,1.05vw,14.5px);color:var(--muted);font-weight:600;margin-top:7px}

/* ==========================================================================
   5. TREATMENTS
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--blue-100)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
/* A treatment with no photograph shows its own icon on a brand tint, so a
   grid of cards stays a grid rather than collapsing to text. */
.card__media--brand{
  display:grid;place-items:center;
  background:
    radial-gradient(80% 70% at 70% 22%, var(--tint-teal) 0%, rgba(230,246,247,0) 66%),
    var(--tint-blue);
}
.card__media-mark{width:64px;height:64px;fill:none;stroke:var(--blue);stroke-width:1.2;opacity:.55}
.card:hover .card__media img{transform:scale(1.06)}
.card__badge{
  position:absolute;left:16px;top:16px;
  width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--blue);box-shadow:var(--sh-sm);backdrop-filter:blur(4px);
}
.card__badge .icon{width:24px;height:24px}
/* Step number sits opposite the icon so the eye reads the set in order. */
.card__no{
  position:absolute;right:16px;top:16px;
  min-width:34px;height:34px;padding:0 10px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(15,37,71,.55);color:#fff;backdrop-filter:blur(6px);
  font-size:13px;font-weight:800;letter-spacing:.04em;
}
.card__body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.card__title{font-size:21px;font-weight:750;letter-spacing:-.015em}
.card__text{margin-top:11px;font-size:15.5px;line-height:1.65;color:var(--body);flex:1}
.card__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:14.8px;font-weight:750;color:var(--blue);
}
.card__link .icon{width:16px;height:16px;transition:transform .22s var(--ease)}
.card:hover .card__link .icon{transform:translateX(4px)}
.section__foot{display:flex;justify-content:center;margin-top:clamp(30px,3.4vw,52px)}

/* ==========================================================================
   TREATMENTS — premium treatment
   ========================================================================== */
/* Three supporting points between the heading and the grid. */

.cards--lux .card{
  background:#fff;border:1px solid var(--accent-line);border-radius:var(--r-lg);
  box-shadow:0 2px 14px rgba(15,37,71,.05);
}
.cards--lux .card:hover{
  transform:translateY(-6px);
  border-color:var(--accent-100);
  box-shadow:0 18px 40px rgba(15,37,71,.12);
}
/* The icon chip hangs below the image, so the media box must not clip it;
   the hover zoom is contained by the <picture> wrapper instead. */
.cards--lux .card__media{aspect-ratio:4/3;background:var(--tint);overflow:visible}
.cards--lux .card__media picture{overflow:hidden}

/* Number reads as a small premium detail, not a badge to click. */
.cards--lux .card__no{
  left:16px;right:auto;top:16px;
  min-width:40px;height:34px;padding:0 11px;border-radius:9px;
  background:var(--navy-900);color:#fff;backdrop-filter:none;
  font-size:14.5px;font-weight:800;letter-spacing:.02em;
}
/* Icon chip straddles the image edge so the card reads as one object. */
.cards--lux .card__badge{
  left:16px;top:auto;bottom:-22px;
  width:46px;height:46px;border-radius:12px;
  background:#fff;color:var(--accent);
  border:1px solid var(--accent-line);
  box-shadow:0 6px 18px rgba(15,37,71,.10);
}
.cards--lux .card__badge .icon{width:23px;height:23px}
.cards--lux .card__body{padding:38px 24px 26px}
.cards--lux .card__title{
  font-weight:800;font-size:21px;
  letter-spacing:-.022em;color:var(--navy-900);
}
.cards--lux .card__title::after{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--accent);opacity:.85;margin-top:10px;
}
.cards--lux .card__text{margin-top:12px;font-size:15px;line-height:1.68;color:var(--body)}

@media (max-width:767px){
  .cards--lux .card__no{min-width:32px;height:27px;padding:0 8px;font-size:12.5px;left:10px;top:10px;border-radius:8px}
  .cards--lux .card__badge{left:10px;bottom:-17px;width:36px;height:36px;border-radius:var(--r-sm)}
  .cards--lux .card__badge .icon{width:18px;height:18px}
  .cards--lux .card__body{padding:28px clamp(11px,3.2vw,20px) clamp(14px,3.6vw,22px)}
  .cards--lux .card__title{font-size:clamp(15px,4.2vw,20px)}
  .cards--lux .card__title::after{width:26px;margin-top:7px}
  .cards--lux .card__text{margin-top:8px}
}

/* ==========================================================================
   6. WHY CHOOSE US
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(40px,5vw,76px);align-items:center}
.split__media{position:relative}
.split__media img{border-radius:var(--r-xl);box-shadow:var(--sh-md);width:100%}

/* The panel this side of the section shows while the clinic has supplied no
   photograph of itself. It carries the two facts that are confirmed — the
   name and where the practice is — over the same soft brand washes the hero
   panel uses, and nothing that pretends to be a picture of the premises. */
.split__brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:4/3;padding:clamp(24px,2.6vw,38px);
  border-radius:var(--r-xl);border:1px solid var(--line);
  box-shadow:var(--sh-md);
  background:
    radial-gradient(74% 62% at 76% 16%, var(--tint-teal) 0%, rgba(230,246,247,0) 62%),
    radial-gradient(84% 70% at 20% 94%, var(--tint-blue) 0%, rgba(234,241,250,0) 66%),
    #fff;
}
.split__brand-decor{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.split__brand-decor .brand-panel__tooth{width:min(52%,240px)}
.split__brand-name{
  position:relative;margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:800;
  letter-spacing:-.02em;color:var(--blue);line-height:1.15;
}
.split__brand-meta{
  position:relative;margin:6px 0 0;font-size:14.4px;color:var(--muted);font-weight:600;
}

/* Benefits read as a tidy card grid rather than a loose bullet list. */
.benefits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:32px}
.benefits li{
  display:flex;align-items:center;gap:12px;
  font-size:15.2px;font-weight:650;color:var(--ink);
  padding:14px 16px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);
}
.section--soft .benefits li{background:#fff}
.benefits .tick{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--blue-050);color:var(--blue);
}
.benefits .tick .icon{width:14px;height:14px;stroke-width:2.6}
.split__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ==========================================================================
   WHY CHOOSE US — premium treatment
   ========================================================================== */
.split--lux .split__media img{
  border-radius:20px;
  border:1px solid var(--accent-100);
  box-shadow:0 22px 54px rgba(15,37,71,.14);
}

.split--lux .s-sub{color:var(--body)}

.benefits--lux{gap:14px;margin-top:34px}
.benefits--lux li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;align-items:center;
  padding:16px 18px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--accent-line);
  box-shadow:0 2px 12px rgba(15,37,71,.05);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.benefits--lux li:hover{
  border-color:var(--accent-100);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(15,37,71,.09);
}
.benefits__label{
  font-size:15.4px;font-weight:700;line-height:1.35;color:var(--navy-900);
}

@media (max-width:640px){
  .benefits--lux{gap:11px;margin-top:26px}
  .benefits--lux li{padding:13px 14px;column-gap:11px}
  .benefits--lux .lux-chip{width:36px;height:36px;border-radius:var(--r-sm)}
  .benefits--lux .lux-chip .icon{width:18px;height:18px}
  .benefits__label{font-size:14px}
}

/* ==========================================================================
   7. DOCTOR
   ========================================================================== */
.doctor{background:var(--bg-soft)}
.doctor__grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(40px,5vw,76px);align-items:center}
.doctor__media{position:relative}
.doctor__frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-lg);background:#fff;
}
.doctor__frame img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%}

/* What the frame holds until a real photograph of this dentist exists.
   Deliberately not a silhouette or a stock face: an initial, the name and
   the role, on the brand's own ground. It reads as a placeholder because it
   is one, which is the point — a generated portrait presented as this
   dentist would be a misrepresentation. */
.doctor__placeholder{
  aspect-ratio:3/4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:clamp(22px,2.4vw,34px);
  background:
    radial-gradient(78% 58% at 70% 16%, var(--tint-teal) 0%, rgba(230,246,247,0) 64%),
    radial-gradient(86% 66% at 24% 92%, var(--tint-blue) 0%, rgba(234,241,250,0) 68%),
    var(--bg-soft);
}
.doctor__initial{
  display:grid;place-items:center;width:104px;height:104px;margin-bottom:14px;
  border-radius:50%;background:var(--blue);color:#fff;
  font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1;
  box-shadow:0 14px 34px -16px rgba(0,47,127,.6);
}
.doctor__placeholder-name{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.015em}
.doctor__placeholder-role{font-size:13.6px;font-weight:650;color:var(--accent-ink);letter-spacing:.1em;text-transform:uppercase}
.doctor__placeholder--card{aspect-ratio:4/5;padding:18px}
.doctor__placeholder--card .doctor__initial{width:76px;height:76px;font-size:32px;margin-bottom:0}
.doctor__exp{
  position:absolute;left:-16px;bottom:26px;z-index:3;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--line-soft);
}
.doctor__exp .icon{width:30px;height:30px;color:var(--blue)}
.doctor__exp b{display:block;font-size:17px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.01em}
.doctor__exp span{font-size:12.8px;color:var(--muted);font-weight:600}

.doctor__name{font-size:clamp(30px,3.2vw,42px);margin-top:14px;letter-spacing:-.025em}
.doctor__quals{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-size:14.2px;font-weight:700;color:var(--navy);
}
.pill .icon{width:16px;height:16px;color:var(--blue)}
.pill--blue{background:var(--blue-050);border-color:var(--blue-100);color:var(--blue-700)}
.doctor__bio{margin-top:24px;font-size:16.5px;line-height:1.72}
.doctor__bio p + p{margin-top:16px}

/* Credentials as figures — the fastest way to read experience at a glance. */
.doctor__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:30px;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;border:1px solid var(--line);
}
.doctor__stats li{padding:20px 18px;text-align:center;position:relative}
.doctor__stats li + li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--line)}
.doctor__stats b{display:block;font-size:clamp(22px,2vw,27px);font-weight:800;color:var(--blue);line-height:1.1;letter-spacing:-.02em}
.doctor__stats span{display:block;font-size:13px;color:var(--muted);font-weight:650;margin-top:6px}
.doctor__expertise{margin-top:30px}
.doctor__expertise h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.doctor__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.doctor__sign{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.doctor__sign img{height:44px;opacity:.85}

/* ==========================================================================
   MEET YOUR DENTIST — premium treatment
   ========================================================================== */
.doctor--lux{background:var(--tint-blue)}
.doctor--lux .doctor__frame{
  border-radius:20px;
  border:1px solid var(--accent-100);
  box-shadow:0 22px 54px rgba(15,37,71,.16);
}
.doctor__exp--lux{
  left:-18px;bottom:26px;right:auto;
  background:var(--navy-900);border:0;border-radius:var(--r);
  padding:16px 22px;gap:14px;
  box-shadow:0 16px 36px rgba(15,37,71,.32);
}
.doctor__exp--lux .icon{width:28px;height:28px;color:var(--accent)}
.doctor__exp--lux b{color:#fff;font-size:17px;font-weight:750}
.doctor__exp--lux span{color:rgba(255,255,255,.78);font-size:12.8px}

.doctor--lux .doctor__name{
  font-weight:800;letter-spacing:-.03em;
  color:var(--navy-900);margin-top:16px;
}
.pill--lux{
  background:#fff;border-color:var(--accent-100);color:var(--navy-900);
  box-shadow:0 2px 10px rgba(15,37,71,.05);
}
.pill--lux .icon{color:var(--accent)}
.doctor--lux .doctor__bio{color:var(--body)}

/* Credentials read as figures: cyan line icon, large number, small label. */
.doctor__stats--lux{
  background:#fff;border:1px solid var(--accent-line);border-radius:18px;
  box-shadow:0 3px 16px rgba(15,37,71,.06);
  margin-top:32px;
}
.doctor__stats--lux li{padding:24px 16px}
.doctor__stats--lux li + li::before{background:var(--accent-line)}
.doctor__stats--lux .icon{
  width:26px;height:26px;color:var(--accent);margin:0 auto 12px;stroke-width:1.6;
}
.doctor__stats--lux b{
  font-weight:800;letter-spacing:-.03em;
  color:var(--navy-900);
}
.doctor__stats--lux span{color:var(--body);margin-top:7px}

.doctor__expertise--lux h3{
  display:flex;align-items:center;gap:12px;
  color:var(--accent-ink);letter-spacing:.2em;font-weight:700;font-size:12.5px;
}
.doctor__expertise--lux h3::after{
  content:"";flex:0 0 26px;height:1px;background:var(--accent);opacity:.7;
}

@media (max-width:899px){
  .doctor__exp--lux{left:auto;right:16px;bottom:-18px}
}
@media (max-width:640px){
  .doctor__stats--lux li{padding:16px 8px}
  .doctor__stats--lux .icon{width:21px;height:21px;margin-bottom:8px}
}

/* ==========================================================================
   8. GALLERY
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:212px;gap:clamp(12px,1.4vw,20px)}
.gallery__item{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--bg-soft-2);display:block;
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery__item:hover img{transform:scale(1.07)}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,37,71,.72) 0%,rgba(15,37,71,.18) 42%,rgba(15,37,71,0) 70%);
  opacity:0;transition:opacity .3s var(--ease);
}
.gallery__item:hover::after{opacity:1}
.gallery__cap{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  color:#fff;font-size:15px;font-weight:700;
  transform:translateY(8px);opacity:0;transition:all .3s var(--ease);
}
.gallery__item:hover .gallery__cap{transform:translateY(0);opacity:1}
.gallery__item--tall{grid-row:span 2}
.gallery__item--wide{grid-column:span 2}
/* Feature tile: 2 columns x 2 rows. With the six tiles below this fills a
   perfect 4x3 grid on desktop and 2x5 on tablet/mobile — no orphan gaps. */
.gallery__item--feature{grid-column:span 2;grid-row:span 2}

/* Before/After gets permanent labelling — it is the strongest proof on the
   page, so it should read without needing a hover. */
.gallery__item--ba::after{opacity:1;background:linear-gradient(to top,rgba(15,37,71,.62) 0%,rgba(15,37,71,.06) 46%,rgba(15,37,71,0) 66%)}
.gallery__item--ba .gallery__cap{opacity:1;transform:none}
.gallery__ba{position:absolute;inset:0;z-index:2;pointer-events:none}
.gallery__ba::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.85);transform:translateX(-50%);
  box-shadow:0 0 14px rgba(15,37,71,.35);
}
.gallery__ba b{
  position:absolute;top:16px;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.gallery__ba b:first-child{left:16px;background:rgba(15,37,71,.72);color:#fff}
.gallery__ba b:last-child{right:16px;background:rgba(255,255,255,.94);color:var(--blue-700)}

/* ==========================================================================
   SMILE GALLERY — premium treatment
   ========================================================================== */
.gallery--lux .gallery__item{
  border-radius:var(--r-lg);
  border:1px solid var(--accent-line);
  box-shadow:0 3px 16px rgba(15,37,71,.06);
}
.gallery--lux .gallery__item::after{
  background:linear-gradient(to top,rgba(15,37,71,.78) 0%,rgba(15,37,71,.20) 44%,rgba(15,37,71,0) 70%);
}
.gallery--lux .gallery__cap{
  font-size:14.5px;font-weight:650;letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(15,37,71,.5);
}
.gallery--lux .gallery__cap em{font-style:normal;color:var(--accent-300)}

/* Before/After keeps its labelling permanently — it is the strongest proof
   on the page and should read without a hover. */
.gallery--lux .gallery__item--ba::after{
  /* Deeper than the hover tiles: this caption is always on, so it has to
     hold up over the brightest part of any before/after photograph. */
  background:linear-gradient(to top,rgba(15,37,71,.90) 0%,rgba(15,37,71,.62) 20%,rgba(15,37,71,.12) 48%,rgba(15,37,71,0) 68%);
}
.gallery--lux .gallery__ba::before{background:rgba(255,255,255,.92)}
.gallery--lux .gallery__ba b{
  font-size:11px;font-weight:750;letter-spacing:.16em;padding:7px 15px;
  box-shadow:0 4px 14px rgba(15,37,71,.22);
}
.gallery--lux .gallery__ba b:first-child{background:var(--navy-900);color:#fff}
.gallery--lux .gallery__ba b:last-child{background:var(--accent);color:var(--navy-900)}

@media (max-width:640px){
  .gallery--lux .gallery__cap{font-size:12.4px}
  .gallery--lux .gallery__ba b{font-size:9.5px;padding:5px 10px;letter-spacing:.12em}
}

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */
.reviews{background:var(--tint-teal)}

.reviews__viewport{position:relative;overflow:hidden;padding:6px}
.reviews__track{display:flex;transition:transform .55s var(--ease)}
.review{flex:0 0 33.3333%;padding:0 clamp(7px,.8vw,12px);box-sizing:border-box}
.review__card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,2.6vw,36px);height:100%;display:flex;flex-direction:column;
  box-shadow:var(--sh-sm);
}
/* Oversized quote glyph, kept faint so it reads as texture not decoration. */
.review__card::before{
  content:"\201C";position:absolute;right:22px;top:-6px;
  font-size:110px;line-height:1;font-weight:800;
  color:var(--blue);opacity:.07;pointer-events:none;
}
.review__tag{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:18px;
  background:var(--blue-050);border:1px solid var(--blue-100);
  color:var(--blue-700);font-size:12.2px;font-weight:750;letter-spacing:.03em;
}
.review__tag .icon{width:14px;height:14px}
.review__stars{display:flex;gap:4px;color:var(--star);margin-bottom:16px}
.review__stars .icon{width:18px;height:18px}
.review__quote{position:relative;z-index:1;font-size:16.5px;line-height:1.72;color:var(--ink);flex:1;font-weight:450}
.review__who{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.review__who img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--blue-050)}
.review__name{font-size:16px;font-weight:750;color:var(--ink)}
.review__meta{font-size:13.2px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:3px}
.review__meta .icon{width:14px;height:14px}

.dots{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:38px}
.dots button{width:9px;height:9px;border-radius:var(--r-pill);background:var(--line-strong);transition:all .28s var(--ease)}
.dots button:hover{background:var(--muted)}
.dots button[aria-current="true"]{width:30px;background:var(--accent)}

/* ==========================================================================
   10. PROCESS
   ========================================================================== */
/* The track follows the number of steps rather than assuming five, so a
   four-step process fills the row instead of leaving a gap at the end. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);position:relative}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps::before{
  content:"";position:absolute;left:10%;right:10%;top:50px;height:2px;
  background:repeating-linear-gradient(90deg,var(--blue-100) 0 9px,transparent 9px 18px);
  z-index:0;
}
.step{position:relative;z-index:1;text-align:center;padding:0 6px}
.step__ico{
  width:100px;height:100px;margin:0 auto;border-radius:50%;
  background:#fff;border:2px solid var(--blue-100);
  display:grid;place-items:center;color:var(--blue);
  box-shadow:var(--sh-sm);transition:all .28s var(--ease);
}
.step__ico .icon{width:40px;height:40px}
.step:hover .step__ico{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,47,127,.28)}
.step__no{
  display:inline-block;margin-top:20px;font-size:13.5px;font-weight:800;
  letter-spacing:.14em;color:var(--blue);
}
.step__title{font-size:18.5px;font-weight:750;margin-top:6px;letter-spacing:-.01em}
.step__text{font-size:14.8px;line-height:1.62;color:var(--muted);margin-top:9px}

/* ==========================================================================
   11. CTA BANNER — the one saturated navy band above the footer
   Ground is the measured brand navy #002F7F. Accents on it are the sparkle
   cyan (8.33:1), never the teal at label size, and the primary action
   inverts to a white fill with navy text, as a dark ground requires.
   Every rule here is scoped under `.cta`, so nothing in this block can reach
   another section. The shared .btn system is deliberately not reused or
   modified; this section has its own buttons.
   ========================================================================== */
.cta{
  --cta-navy:#002F7F;
  --cta-navy-2:#00246B;
  --cta-line:rgba(255,255,255,.22);
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(1,107,105,.34) 0%, rgba(0,28,89,0) 60%),
    radial-gradient(90% 70% at 8% 100%, rgba(0,28,89,.45) 0%, rgba(0,28,89,0) 60%),
    var(--cta-navy);
}
/* Very low-opacity texture: a fine dot grid plus two outline teeth. It must
   never compete with the text, so both layers sit under 6% opacity. */
.cta__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta__decor::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:22px 22px;opacity:.05;
}
.cta__tooth{
  position:absolute;fill:none;stroke:var(--accent-300);stroke-width:.55;
  opacity:.10;width:210px;height:210px;
}
.cta__tooth--l{left:-46px;top:34px;transform:rotate(-12deg)}
.cta__tooth--r{right:-40px;bottom:20px;transform:rotate(14deg)}

.cta__inner{position:relative;z-index:2;padding-block:clamp(48px,5vw,80px)}
.cta__grid{
  display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(32px,4vw,60px);align-items:center;
}

/* ---- Left column ---- */
.cta__eyebrow{
  display:block;position:relative;padding-bottom:14px;margin-bottom:20px;
  font-size:13px;font-weight:750;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-300);
}
.cta__eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:min(100%,380px);height:1px;
  background:linear-gradient(90deg,var(--accent-300),rgba(12,203,214,.12));
}
.cta__title{
  font-weight:800;color:#fff;
  font-size:clamp(30px,3.5vw,50px);line-height:1.1;letter-spacing:-.032em;
}
.cta__title em{font-style:normal;color:var(--accent-300)}
.cta__text{
  margin-top:16px;max-width:520px;
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.7;color:var(--blue-100);
}
.cta__text b{color:#fff;font-weight:700}

.cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---- Buttons (scoped: the global .btn system is untouched) ---- */
.cta__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:58px;padding:0 28px;border-radius:var(--r);
  font-size:16px;font-weight:750;letter-spacing:.01em;white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background .18s var(--ease),border-color .18s var(--ease);
}
.cta__btn .icon{width:19px;height:19px;flex:none}
.cta__btn-arrow{transition:transform .2s var(--ease)}
.cta__btn:hover .cta__btn-arrow{transform:translateX(4px)}
/* On a navy ground the ring switches to the cyan: the teal at 4.97:1 is
   legal, the cyan at 8.33:1 is unmistakable. */
.cta__btn:focus-visible,.cta__card-num:focus-visible{outline:3px solid var(--focus-dark);outline-offset:3px}
.footer a:focus-visible,.topbar a:focus-visible{outline:3px solid var(--focus-dark);outline-offset:3px}

/* Primary — on a navy ground the primary action inverts: a white fill with
   navy text is the loudest thing available, and a navy button on navy is
   not a button at all. */
.cta__btn--primary{
  background:#fff;border-color:#fff;color:var(--blue);padding:0 32px;
  box-shadow:0 10px 30px rgba(0,28,89,.34);
}
.cta__btn--primary .icon{color:var(--blue)}
.cta__btn--primary:hover{
  transform:translateY(-2px);
  background:var(--blue-100);border-color:var(--blue-100);color:var(--blue-700);
  box-shadow:0 16px 38px rgba(0,28,89,.42);
}

/* Secondary — an outline in white, so no two actions carry equal weight. */
.cta__btn--wa{
  background:transparent;border-color:rgba(255,255,255,.55);color:#fff;
}
.cta__btn--wa .icon{color:var(--wa)}
.cta__btn--wa:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:#fff}

.cta__btn--ghost-light{
  background:transparent;border-color:rgba(255,255,255,.55);color:#fff;
}
.cta__btn--ghost-light .icon{color:var(--accent-300)}
.cta__btn--ghost-light:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:#fff}

/* Tertiary — inside the contact card. */
.cta__btn--outline{
  width:100%;background:transparent;border-color:rgba(255,255,255,.42);color:#fff;
}
.cta__btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ---- Trust points ---- */

/* ---- Right contact card ---- */
.cta__card{
  position:relative;text-align:center;
  padding:clamp(30px,3vw,42px) clamp(22px,2.6vw,38px) clamp(28px,3vw,38px);
  border-radius:var(--r-2xl);border:1px solid var(--cta-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(1,107,105,.24) 0%, rgba(0,28,89,0) 62%),
    var(--cta-navy-2);
  box-shadow:0 26px 60px rgba(15,37,71,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
.cta__card-badge{
  width:74px;height:74px;border-radius:50%;margin:0 auto 22px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(0,47,127,.55), rgba(0,28,89,.95));
  border:1px solid var(--cta-line);
  box-shadow:0 0 0 8px rgba(1,156,163,.05), 0 10px 26px rgba(15,37,71,.35);
}
.cta__card-badge .icon{width:32px;height:32px;color:var(--accent-300)}
.cta__card-eyebrow{
  display:block;font-size:12.5px;font-weight:750;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-300);
}
/* Hairline with a small diamond, matching the section dividers elsewhere. */
.cta__rule{
  display:block;position:relative;height:1px;margin:16px auto;
  width:min(100%,300px);
  background:linear-gradient(90deg,transparent,var(--cta-line) 20%,var(--cta-line) 80%,transparent);
}
.cta__rule::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--cta-navy-2);border:1px solid var(--accent);opacity:.9;
}
.cta__card-num{
  display:block;font-weight:800;
  font-size:clamp(28px,2.9vw,40px);line-height:1.1;color:#fff;letter-spacing:-.03em;
  transition:color .18s var(--ease);
}
.cta__card-num:hover{color:var(--accent-300)}
.cta__card-hours{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:4px 0 24px;font-size:15.4px;color:var(--blue-100);font-weight:600;
}
.cta__card-hours .icon{width:19px;height:19px;color:var(--accent-300);flex:none}
.cta__card-hours i{font-style:normal;color:var(--accent-300);opacity:.8}

/* ---- Responsive ---- */
@media (max-width:1023px){
  .cta__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .cta__card{max-width:520px;margin-inline:auto}
  .cta__eyebrow::after{width:min(100%,320px)}
}
/* Phones: same design, tightened. The desktop rules above are untouched, and
   this block starts below the 768px tier so the tablet layout is unaffected. */
@media (max-width:640px){
  .cta__inner{padding-block:clamp(26px,7vw,32px)}
  .cta__grid{gap:22px}

  .cta__eyebrow{padding-bottom:10px;margin-bottom:14px;font-size:12.2px;letter-spacing:.16em}
  .cta__title{line-height:1.08}
  .cta__text{margin-top:11px;font-size:15px;line-height:1.55}

  .cta__actions{gap:10px;margin-top:16px}
  .cta__btn{width:100%;font-size:15.2px;white-space:normal;padding:0 20px}
  .cta__btn--primary{min-height:54px}          /* stays the taller of the two */
  .cta__btn--wa{min-height:48px}
  .cta__btn--outline{min-height:46px}

  /* Icon moves beside the label instead of above it, and the circular
     container and underline are dropped — roughly a third of the height. */

  .cta__card{border-radius:18px;padding:20px 18px 18px}
  .cta__card-badge{width:38px;height:38px;margin-bottom:10px;box-shadow:none}
  .cta__card-badge .icon{width:19px;height:19px}
  .cta__card-eyebrow{font-size:11.6px;letter-spacing:.16em}
  .cta__rule{margin:10px auto}
  .cta__card-num{font-size:29px}
  .cta__card-hours{font-size:14px;gap:8px;margin:2px 0 13px}
  .cta__card-hours .icon{width:17px;height:17px}

  /* Decoration must not add height on a narrow screen. */
  .cta__tooth{width:150px;height:150px;opacity:.07}
}
@media (max-width:360px){
  .cta__tooth{display:none}
}

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(18px,2vw,28px);align-items:start}
.acc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.acc.is-open{border-color:var(--blue-100);box-shadow:var(--sh)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:22px 24px;min-height:68px;text-align:left;font-size:17px;font-weight:700;color:var(--ink);
}
.acc__btn:hover{color:var(--blue)}
.acc__sign{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);transition:transform .3s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.acc__sign .icon{width:17px;height:17px;stroke-width:2.4}
.acc.is-open .acc__sign{transform:rotate(180deg);background:var(--blue);color:#fff}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.acc.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__panel p{padding:0 24px 24px;font-size:15.8px;line-height:1.72;color:var(--body)}

/* ==========================================================================
   13. APPOINTMENT
   ==========================================================================
   Section-scoped. Everything new is prefixed .bk / .bk__*. The form
   primitives (.form-grid, .field, .err, .form-note, .form-actions,
   .form-status) keep their original names because main.js reads them by
   name for validation and status output. */
.bk{background:var(--tint-blue);position:relative;overflow:hidden}

/* Decorative watermark teeth. Sits behind the card, never interactive. */
.bk__decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.bk__tooth{position:absolute;width:240px;height:240px;fill:none;stroke:var(--blue);stroke-width:1;opacity:.055}
.bk__tooth--l{left:-58px;top:70px;transform:rotate(-14deg)}
.bk__tooth--r{right:-66px;bottom:54px;transform:rotate(12deg)}
.bk .wrap{position:relative;z-index:1}

.bk__card{
  max-width:960px;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:clamp(26px,3.4vw,52px);
  box-shadow:0 26px 64px -34px rgba(15,37,71,.34);
}
.bk__head{
  display:flex;align-items:center;gap:16px;
  padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.bk__head-ico{
  width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);
}
.bk__head-ico .icon{width:28px;height:28px}
.bk__head h3{font-size:clamp(21px,2vw,25px);letter-spacing:-.02em;margin:0}
.bk__head p{margin:5px 0 0;font-size:15px;color:var(--body)}

.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:13.8px;font-weight:700;color:var(--body)}
.field label .req{color:var(--err)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;min-height:52px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:#fff;font-size:15px;color:var(--ink);
  /* hover deepens the hairline; the fill never changes */
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--subtle)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);
}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px;cursor:pointer}
.field .err{font-size:12.6px;color:var(--err);font-weight:650;min-height:0}
.field.is-invalid input,.field.is-invalid select{border-color:var(--err);box-shadow:0 0 0 3px rgba(192,57,43,.14)}

/* Leading icon inside each control. Scoped to .bk__ctl so inputs elsewhere
   on the page keep their own padding. */
.bk__ctl{position:relative;display:block}
.bk__ctl-ico{
  position:absolute;left:16px;top:17px;width:19px;height:19px;
  color:var(--blue);opacity:.78;pointer-events:none;z-index:1;
}
.bk__ctl input,.bk__ctl select,.bk__ctl textarea{padding-left:46px}
.bk__ctl select{padding-right:40px}
.bk__opt{font-weight:600;color:var(--body)}

.form-note{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:13.2px;color:var(--body)}
.form-note .icon{width:16px;height:16px;color:var(--accent-ink);flex:none;margin-top:2px}
.form-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}

/* The single primary action for this section. */
.bk__submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:60px;padding:16px 26px;border:0;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;font-family:inherit;font-size:16.5px;font-weight:750;
  letter-spacing:.01em;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(0,47,127,.62);
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.bk__submit .icon{width:20px;height:20px}
.bk__submit:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(0,47,127,.7)}
.bk__submit:active{transform:translateY(0)}
.bk__submit:focus-visible{outline:3px solid var(--blue-100);outline-offset:3px}

/* Waiting on the request.
   The button keeps everything it had — the same blue, the same width,
   the same 60px (54px on a phone), the same radius and the same place on
   the page. What changes is that it stops answering: no lift under the
   pointer, no shadow reaching for it, and a cursor that says pressing
   again will do nothing. A disabled button still matches :hover in most
   browsers, which is why the hover state is spelled out again here. */
.bk__submit:disabled,
.bk__submit:disabled:hover{
  background:var(--blue);transform:none;cursor:default;
  box-shadow:0 14px 30px -14px rgba(0,47,127,.62);
}
/* A control that is off, rather than merely waiting, is drawn as off:
   lowering the opacity of the navy turns it a muddy grey-blue that reads
   as a rendering fault instead of a state. */
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--disabled-bg);border-color:var(--disabled-bg);color:var(--disabled-ink);
  box-shadow:none;transform:none;cursor:default;
}
/* The calendar mark's own 20px box, so swapping one for the other moves
   nothing either side of it. Drawn rather than fetched: a ring of the
   button's own white at low opacity with one quarter turned up full, and
   the whole thing rotated. */
.bk__spin{
  width:20px;height:20px;flex:none;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.32);border-top-color:#fff;
  animation:bk-spin .7s linear infinite;
}
@keyframes bk-spin{to{transform:rotate(360deg)}}
/* The label is longer than "Book Appointment" and the button is only as
   wide as the form, so on a narrow screen it takes two lines where the
   old one took one. The button must not change height for that — it sits
   above a status line that is appearing at the same moment, and two
   things moving at once reads as the page jumping. So the leading is
   tightened and the vertical padding gives way by the same amount: the
   box stays exactly as tall as it was, with the same width, colour,
   radius, type size and weight. On a desktop the label still fits on one
   line and none of this comes into play — min-height decides there, as
   it always did. */
.bk__submit-txt{min-width:0;line-height:1.25;text-align:center}
.bk__submit.is-loading{padding-top:9px;padding-bottom:9px}

.form-status{
  display:none;margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--info-bg);border:1px solid var(--info-line);color:var(--info);font-size:14.4px;font-weight:650;
  align-items:flex-start;gap:10px;
}
/* A confirmed submission is the one place the site says "success", and it
   says it in the semantic green — never in the brand teal, which would
   make "done" and "brand" the same colour. */
.form-status.is-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.form-status.is-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.form-status.is-shown{display:flex}
.form-status .icon{width:18px;height:18px;flex:none;margin-top:1px}

/* ==========================================================================
   14. CLINIC LOCATION
   ==========================================================================
   Section-scoped under .loc / .map-card--lux. The base .map-card and
   .map-fallback rules stay as they are because main.js injects the Google
   iframe into #mapCard and falls back to the drawn grid when Google is
   unreachable. */
.loc{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F9FC 58%,#EAF1FA 100%);
}
.loc .wrap{position:relative;z-index:1}

/* Decor: dot grid, one soft blue glow, two faint tooth outlines. All of it
   is deliberately near-invisible — it should read as texture, not pattern. */
.loc__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.loc__dots{
  position:absolute;left:0;top:0;width:270px;height:210px;
  background-image:radial-gradient(rgba(0,47,127,.30) 1.1px,transparent 1.1px);
  background-size:17px 17px;
  -webkit-mask-image:linear-gradient(150deg,#000,transparent 72%);
  mask-image:linear-gradient(150deg,#000,transparent 72%);
  opacity:.5;
}
.loc__glow{
  position:absolute;right:-8%;top:-14%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,47,127,.13) 0%,rgba(0,47,127,0) 66%);
}
.loc__tooth{position:absolute;width:210px;height:210px;fill:none;stroke:var(--blue);stroke-width:1;opacity:.06}
.loc__tooth--l{left:26px;top:88px;transform:rotate(-10deg)}
.loc__tooth--r{right:22px;top:120px;transform:rotate(9deg)}

.loc .eyebrow--lux .icon{width:15px;height:15px;color:var(--accent);stroke-width:2.2}
.loc .s-rule--lux::after{background:#F6F9FC}

/* 40 / 60 — the map is meant to carry more weight than the card. */
.location__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(22px,2.6vw,40px);align-items:stretch}

.loc__card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:clamp(24px,1.9vw,30px);
  box-shadow:0 24px 56px -34px rgba(15,37,71,.32);
}
.loc__badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--accent-050);border:1px solid var(--accent-100);
  color:var(--accent-ink);font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;
}
.loc__badge .icon{width:16px;height:16px;color:var(--accent)}
/* The rule follows the badge directly. It used to follow the clinic's
   mark, which stood between the two; with that gone the rule takes over
   the space the mark's own heading held above it, so the badge keeps the
   breathing room it had rather than closing up against the line. */
.loc__rule{
  display:block;width:138px;height:1px;margin:18px 0 0;
  background:linear-gradient(90deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);
  opacity:.85;position:relative;
}
.loc__rule::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#fff;border:1px solid var(--accent);
}

.loc__list{display:grid;gap:0;margin-top:4px;margin-bottom:18px}
.loc__list li{display:flex;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.loc__list li:last-child{border-bottom:0}
/* The Plus Code under the address. Small-town India has no house numbering
   a courier can follow; this is what actually gets somebody to the door. */
.loc__plus{display:block;margin-top:4px;font-size:12.8px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.loc__ico{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);
}
/* Half the chip, like every other icon holder on the site: .stat__ico
   is 24 in 48, .lux-chip 19 in 38, .card__badge 23 in 46. This one was
   20 in 44, which drew the glyph a little small and a little light for
   the circle around it. */
.loc__ico .icon{width:22px;height:22px}
.loc__list b{display:block;font-size:11.6px;letter-spacing:.14em;text-transform:uppercase;color:#5B6B82;font-weight:750}
/* The value under each label. :not(.loc__ico) is the whole of this fix.
   The icon holder is a <span> in this list too, so a bare `span` here was
   also styling it — and winning, being one selector heavier than
   .loc__ico and written after it. It turned the chip into a block, which
   killed the place-items:center that centres the icon and left it jammed
   against the top of the circle; it painted the glyph --ink instead of
   the brand --blue every other icon on the site uses; and it added a 5px
   top margin and a text line-height to a holder that contains no text. */
.loc__list address,.loc__list span:not(.loc__ico),.loc__list a{
  display:block;font-style:normal;font-size:15.6px;line-height:1.55;
  font-weight:650;color:var(--ink);margin-top:5px;
}
.loc__list a:hover{color:var(--blue)}

/* The only call to action in this section. */
.loc__cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:56px;padding:15px 26px;border-radius:var(--r-pill);
  /* Get Directions is high-intent inside the map, so it is the teal fill
     rather than an outline — at the accessible step, because a 16px label
     on the full #019CA3 would sit at 3.34:1. */
  background:var(--accent-ui);
  color:#fff;font-size:16px;font-weight:750;letter-spacing:.01em;
  box-shadow:0 14px 30px -14px rgba(1,156,163,.55);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.loc__cta .icon{width:19px;height:19px}
.loc__cta-arr{margin-left:12px;transition:transform .24s var(--ease)}
.loc__cta:hover{color:#fff;background:var(--accent-600);transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(1,156,163,.6)}
.loc__cta:hover .loc__cta-arr{transform:translateX(4px)}
.loc__cta:active{transform:translateY(0)}
.loc__cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* --- Map ------------------------------------------------------------- */
.map-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh);background:#fff;
  min-height:460px;
}
.map-card iframe{position:relative;z-index:2;width:100%;height:460px;border:0;display:block;filter:saturate(.95)}

/* Premium presentation for this section only. */
/* The map stretches to the row height; the card beside it is sized so that
   height always lands in the 480-520px band. */
.map-card--lux{border-radius:var(--r-2xl);border-color:#D9E2EC;box-shadow:0 24px 56px -34px rgba(15,37,71,.32);min-height:480px}
.map-card.map-card--lux iframe{position:absolute;inset:0;width:100%;height:100%}

/* Branded overlay standing in for the default Google info bubble. Parked in
   the one corner Google leaves free and click-through, so panning, zooming
   and the native controls all still work. */
.map-badge{
  position:absolute;left:20px;bottom:52px;z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:12px;max-width:min(74%,268px);
  padding:13px 17px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.97);border:1px solid #D9E2EC;
  box-shadow:0 14px 34px -16px rgba(15,37,71,.42);
}
.map-badge__pin{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--blue);color:#fff;
}
.map-badge__pin .icon{width:18px;height:18px}
.map-badge__txt b{display:block;font-size:13.6px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.map-badge__txt > span{display:block;font-size:12.8px;line-height:1.45;color:var(--body);margin-top:3px}

/* Drawn street grid sits behind the embed. If the Google iframe cannot be
   reached, this stays visible instead of a blank white rectangle. */
.map-fallback{position:absolute;inset:0;z-index:1;background:#EEF2F7;overflow:hidden}
.map-fallback::before{
  content:"";position:absolute;inset:-10%;
  background:
    linear-gradient(90deg,transparent 0 46px,#fff 46px 52px,transparent 52px 100%) 0 0/168px 100%,
    linear-gradient(0deg,transparent 0 38px,#fff 38px 44px,transparent 44px 100%) 0 0/100% 132px,
    linear-gradient(115deg,transparent 0 42%,#D6EFF1 42% 47%,transparent 47% 100%),
    linear-gradient(28deg,transparent 0 66%,#DCEBF7 66% 74%,transparent 74% 100%);
  opacity:.95;
}
.map-fallback__pin{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-100%);
  display:grid;place-items:center;width:52px;height:52px;border-radius:50% 50% 50% 4px;
  background:var(--blue);color:#fff;rotate:-45deg;
  box-shadow:0 12px 28px rgba(15,37,71,.32);
}
.map-fallback__pin .icon{width:24px;height:24px;rotate:45deg}

/* ==========================================================================
   15. FOOTER
   ==========================================================================
   Scoped under .footer / .footer__*. Nothing here is shared with another
   section — .brand is reused from the header, so only its colours are
   overridden inside the footer, never its geometry. */
.footer{position:relative;background:var(--footer);color:#C7D3E0;font-size:15px;line-height:1.7;overflow:hidden}

/* One soft blue radial plus a very low-opacity dental pattern. Texture, not
   illustration — both sit under the content. */
.footer__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.footer__decor::before{
  content:"";position:absolute;left:50%;top:-42%;width:min(1100px,120%);height:760px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,47,127,.30) 0%,rgba(15,37,71,0) 62%);
}
.footer__decor::after{
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(rgba(12,203,214,.9) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 62%);
  mask-image:linear-gradient(200deg,#000,transparent 62%);
}
.footer > *{position:relative;z-index:1}

.footer__top{padding:clamp(50px,5vw,82px) 0 clamp(30px,2.6vw,42px)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.15fr);gap:clamp(32px,3.6vw,56px)}
/* Three columns while the Treatments column has nothing in it: an empty
   fourth track would leave the contact details stranded in the middle. */
.footer__grid--3{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.25fr)}
.footer .brand__logo{
  /* content-box so the plate's padding sits outside the artwork: under the
     global border-box the padding would eat into the logo and shrink it. */
  box-sizing:content-box;
  height:58px;max-width:270px;
  background:#fff;border-radius:8px;padding:14px 18px;
  object-position:center;
}
.footer .brand__name{color:#fff}
.footer .brand__name em{color:#fff}
.footer .brand__sub{color:var(--accent-300)}

/* Cyan accent under the wordmark — the only accent in the column. */
.footer__accent{display:flex;align-items:center;gap:11px;margin-top:22px;max-width:180px;color:var(--accent-300)}
.footer__accent::before,.footer__accent::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--accent-300),transparent);opacity:.6}
.footer__accent .icon{width:14px;height:14px;flex:none;fill:currentColor;stroke:none}

.footer__about p{margin-top:18px;max-width:340px;color:#C7D3E0}
.footer__social{display:flex;gap:10px;margin-top:22px}
.footer__social a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.footer__social a .icon{width:17px;height:17px}
.footer__social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}

.footer h4{
  color:#fff;font-size:15px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:26px;position:relative;padding-bottom:14px;
}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--accent-300);border-radius:2px}
.footer__links{display:grid;gap:14px}
.footer__links a{display:inline-flex;align-items:center;gap:10px;color:#C7D3E0;transition:color .18s var(--ease),transform .18s var(--ease)}
.footer__links a .icon{width:13px;height:13px;color:var(--accent-300);flex:none}
.footer__links a:hover{color:#fff;transform:translateX(3px)}
.footer__links a:hover .icon{color:var(--accent-200)}

.footer__contact{display:grid;gap:20px}
.footer__contact li{display:flex;gap:13px;align-items:flex-start}
.footer__ico{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:var(--blue-200);
}
.footer__ico .icon{width:17px;height:17px}
.footer__contact address,.footer__contact a{font-style:normal;color:#C7D3E0;padding-top:5px}
.footer__contact a:hover{color:#fff}

/* Hairline between the columns and the legal bar, with a tooth outline
   sitting on it. Replaces the plain border the bottom bar used to carry. */
.footer__div{display:flex;align-items:center;gap:18px;margin-top:clamp(34px,3.4vw,52px)}
.footer__div::before,.footer__div::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.footer__div-ico{flex:none;display:grid;place-items:center;width:34px;height:34px}
.footer__div-ico svg{width:26px;height:26px;fill:none;stroke:var(--accent-300);stroke-width:1.1;opacity:.75}

.footer__bottom{background:var(--footer-deep)}
.footer__bottom-inner{
  padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:#8A99AD;
}
.footer__legal{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.footer__legal a{padding:2px 18px;color:#C7D3E0;transition:color .18s var(--ease)}
.footer__legal a + a{border-left:1px solid rgba(255,255,255,.18)}
.footer__legal a:first-child{padding-left:0}
/* Keep the legal links clear of the floating WhatsApp button, which is
   viewport-fixed and lands over this row at the very bottom of the page. */
@media (min-width:761px){.footer__legal{padding-right:62px}}
.footer__legal a:hover{color:#fff}

/* ---------- Floating actions ---------- */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:300;
  display:flex;flex-direction:column;gap:11px;align-items:flex-end;
}
/* Secondary channel: a compact circle by default, widening to show its
   label only on hover so it never competes with Book Appointment. */
.fab__wa{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:52px;height:52px;padding:0;border-radius:var(--r-pill);overflow:hidden;
  background:var(--wa);color:var(--wa-ink);font-weight:700;font-size:14.5px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(15,37,71,.20);
  transition:width .26s var(--ease),padding .26s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.fab__wa .icon{width:24px;height:24px;flex:none}
.fab__wa span{max-width:0;opacity:0;transition:max-width .26s var(--ease),opacity .18s var(--ease)}
@media (hover:hover) and (pointer:fine) and (max-width:1024px){
  .fab__wa:hover,.fab__wa:focus-visible{
    width:194px;padding:0 20px 0 14px;justify-content:flex-start;
    background:var(--wa-dark);box-shadow:0 10px 26px rgba(15,37,71,.24);
  }
  .fab__wa:hover span,.fab__wa:focus-visible span{max-width:150px;opacity:1}
}
.fab__top{
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);
  border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--sh);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .26s var(--ease);
}
.fab__top.is-shown{opacity:1;visibility:visible;transform:translateY(0)}
.fab__top:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Desktop-only refinement of the two floating buttons.
   ---------------------------------------------------
   The circle used to be a flex row holding the icon AND the label span,
   which stays in flow at max-width:0 — so `gap:9px` still counted between
   them and `justify-content:center` centred a 33px block (24 icon + 9 gap)
   inside 52px, parking the icon 4.5px left of centre. Below, the label is
   taken out of flow entirely and the icon is the only thing being centred,
   so the offset is zero by construction rather than by compensation. */
@media (min-width:1025px){
  .fab{right:24px;bottom:24px;gap:12px}

  .fab__wa{
    position:relative;
    display:grid;place-items:center;gap:0;
    width:52px;height:52px;padding:0;border-radius:50%;overflow:visible;
    box-shadow:0 8px 22px rgba(15,37,71,.22);
    transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
  }
  .fab__wa .icon{width:24px;height:24px;display:block;margin:0;flex:0 0 auto}

  /* Tooltip sits beside the circle and is out of flow, so revealing it can
     never resize or shift the button. aria-label remains the accessible
     name — this is decoration. */
  .fab__wa span{
    position:absolute;right:calc(100% + 12px);top:50%;
    max-width:none;padding:8px 13px;border-radius:9px;
    background:var(--navy-900);color:#fff;font-size:13.4px;font-weight:700;line-height:1.2;
    box-shadow:0 10px 24px rgba(15,37,71,.3);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-50%) translateX(6px);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  }
  .fab__wa:focus-visible span{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}

  /* Hover states are gated on a real pointer so a touch screen this wide
     cannot leave the button stuck in its hover look. */
  @media (hover:hover) and (pointer:fine){
    .fab__wa:hover{
      width:52px;padding:0;justify-content:center;
      background:var(--wa-dark);transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(15,37,71,.26);
    }
    .fab__wa:hover span{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
  }

  .fab__top{
    width:44px;height:44px;padding:0;box-shadow:0 6px 18px rgba(15,37,71,.16);
    /* Was `all`, which faded the focus ring in over 260ms. */
    transition:opacity .26s var(--ease),visibility .26s var(--ease),transform .26s var(--ease),
               background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  }
  .fab__top .icon{width:19px;height:19px;display:block;margin:0}

  /* The global focus ring is rounded at 4px; on a circle it needs to follow
     the shape. */
  .fab__wa:focus-visible,.fab__top:focus-visible{border-radius:50%}
}

/* Mobile sticky Call / WhatsApp / Book bar.
   Two columns when the clinic has no confirmed WhatsApp number, three when
   it has: the bar tracks what is actually offered rather than reserving a
   third of a phone screen for a button that opens nothing. */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:290;display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  box-shadow:0 -6px 24px rgba(15,37,71,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 6px;min-height:58px;background:#fff;
  font-size:12.4px;font-weight:750;color:var(--blue);line-height:1.2;text-align:center;
}
.mobile-bar a.wa{color:#128C3E}
.mobile-bar--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mobile-bar a.book{background:var(--blue);color:#fff}
.mobile-bar .icon{width:19px;height:19px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1150px){
  .header .brand__logo{height:54px;max-width:230px}
  .nav__link{padding:9px 9px;font-size:13.8px}
  .header__cta .btn span.label-long{display:none}
}

@media (max-width:1050px){
  .nav{display:none}
  .burger{display:grid}
  .header__cta{margin-left:auto}
  .split{gap:40px}
  .doctor__grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px}
}

@media (max-width:960px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 16px}
  .steps::before{display:none}
  .doctor__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .map-card,.map-card iframe{min-height:380px;height:380px}
  .map-card--lux{min-height:400px}
  .faq{grid-template-columns:minmax(0,1fr)}
  .location__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  .review{flex-basis:50%}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
}

/* --- Hero: mobile stacked layout (no text over faces) --- */
@media (max-width:899px){
  .slide__media{aspect-ratio:16/10;border-radius:0;inset:auto}
  .slide__media::after{display:none}
  .slide__media img{object-position:72% center}
  .slide__body{padding:30px 0 36px;background:#fff}
  .slide__copy{width:auto;max-width:none;padding-right:0}
  .slide__points{gap:12px 20px;margin-top:24px}
  .slide__points .tick{width:34px;height:34px}
  .slide__points .tick .icon{width:17px;height:17px}
  .doctor__stats{margin-top:26px}
  .hero{background:#fff}
  .hero__arrow{display:none}
  .hero__dots{position:static;margin-top:6px;padding-bottom:26px}
  .stats{margin-top:0}
  .stats__card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-lg)}
  .stat + .stat::before{display:none}
  .stat{padding:16px 14px;gap:11px;min-height:0;border-top:1px solid var(--line-soft)}
  .stat__ico{width:38px;height:38px}
  .stat__ico .icon{width:20px;height:20px}
  .stat__num{font-size:24px}
  .stat__label{font-size:12.6px;margin-top:3px}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(even){border-left:1px solid var(--line-soft)}
  .split{grid-template-columns:minmax(0,1fr);gap:44px}
  .doctor__grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .doctor__media{max-width:400px}
  .doctor__exp{left:auto;right:0;bottom:-16px}
}

/* The top bar runs out of room well before the nav does, so it simplifies earlier. */
@media (max-width:900px){
  .topbar__inner{justify-content:center;gap:14px;flex-wrap:wrap;padding-block:8px}
  .topbar__spacer,.topbar__social{display:none}
  .topbar{font-size:13px}
}

@media (max-width:620px){
  .topbar__hide-sm,.topbar__sep{display:none}
  .topbar{font-size:12.4px}
}
/* Tightened so the address and phone share one line down to ~385px, and the
   two wrapped rows below that still read as a slim band rather than a block. */
@media (max-width:430px){
  .topbar{font-size:12.2px}
  .topbar__inner{gap:3px 10px;padding-block:5px;line-height:1.38}
  .topbar__item{gap:6px}
  .topbar__item .icon{width:12.5px;height:12.5px}
}

@media (max-width:760px){
  /* Buttons go full width here, so a long label should wrap rather than
     push the page sideways. */
  .btn{white-space:normal;text-align:center}
  /* The sticky bar already carries WhatsApp on phones — a floating bubble on
     top of it is redundant and covers content. */
  .fab__wa{display:none}
  .fab{bottom:calc(70px + env(safe-area-inset-bottom));right:14px}
  .mobile-bar{display:grid}
  /* 58px bar + the device's own inset + 20px of breathing room, so the last
     row of content never sits flush against the bar. */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  /* Anything the browser scrolls to near the foot of the page — an anchor, a
     scrollIntoView — stops clear of the bar instead of behind it. */
  html{scroll-padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}

@media (max-width:640px){
  .footer .brand__logo{height:52px;max-width:240px;padding:11px 14px}
  .header__inner{gap:10px;min-height:68px}
  .s-head{margin-bottom:30px}
  .benefits li{padding:13px 14px;font-size:14.8px}
  .review__card{padding:26px 24px}
  .review__quote{font-size:15.8px}
  .doctor__stats li{padding:16px 8px}
  .doctor__stats b{font-size:21px}
  .doctor__stats span{font-size:11.8px}
  .step__title{font-size:17px}
  .acc__btn{padding:18px 18px;font-size:15.8px;min-height:62px}
  .acc__panel p{padding:0 18px 20px;font-size:15.2px}
  .map-card,.map-card iframe{min-height:320px;height:320px}
  .map-card--lux{min-height:320px}
  .loc__card{padding:22px 18px;border-radius:var(--r-xl)}
  .loc__badge{padding:8px 13px;font-size:11px;letter-spacing:.11em}
  .loc__rule{margin:18px 0 2px;width:110px}
  .loc__list li{padding:15px 0;gap:13px}
  .loc__ico{width:40px;height:40px}
  .loc__ico .icon{width:20px;height:20px}
  .loc__list address,.loc__list span:not(.loc__ico),.loc__list a{font-size:15px}
  .loc__list{margin-bottom:20px}
  .loc__cta{min-height:54px;font-size:15.4px;padding:14px 20px}
  .map-badge{left:12px;bottom:46px;padding:10px 13px;gap:10px;border-radius:var(--r);max-width:min(80%,232px)}
  .map-badge__pin{width:30px;height:30px}
  .map-badge__pin .icon{width:16px;height:16px}
  .map-badge__txt b{font-size:12.6px}
  .map-badge__txt > span{font-size:12px}
  .loc__dots{width:180px;height:150px}
  .loc__tooth{width:140px;height:140px}
  .loc__tooth--l{left:-40px;top:70px}
  .loc__tooth--r{right:-46px;top:auto;bottom:80px}
  .loc__glow{width:420px;height:420px}
  .brand{gap:9px}
  .brand__name{font-size:16.5px}
  .brand__sub{font-size:8px;letter-spacing:.12em;margin-top:2px}
  .header__cta{gap:8px}
  .header__cta .btn{padding:10px 15px;font-size:13.5px}
  .burger{width:42px;height:42px}
  .section{padding:52px 0}
  .section--tight{padding:46px 0}
  .s-head{margin-bottom:32px}
  .benefits{grid-template-columns:minmax(0,1fr)}
  /* Vertical timeline on phones: five columns never read well at this width. */
  .steps{grid-template-columns:minmax(0,1fr);gap:0;position:relative}
  .steps::before{
    display:block;left:31px;right:auto;top:16px;bottom:16px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--blue-100) 0 9px,transparent 9px 18px);
  }
  .step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 18px;text-align:left;padding:0 0 30px}
  .step:last-child{padding-bottom:0}
  /* Icon spans all three text rows so the number, title and copy stack
     tightly instead of being spread by the icon's row height. */
  .step__ico{width:64px;height:64px;margin:0;grid-column:1;grid-row:1 / span 3;align-self:start}
  .step__ico .icon{width:28px;height:28px}
  .step__no{grid-column:2;grid-row:1;margin-top:8px;align-self:start}
  .step__title{grid-column:2;grid-row:2;margin-top:3px}
  .step__text{grid-column:2;grid-row:3;margin-top:6px}
  .review{flex-basis:100%}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:15px}
  .form-actions{grid-template-columns:minmax(0,1fr);margin-top:18px}
  .bk__card{padding:22px 18px;border-radius:var(--r-xl)}
  .bk__head{gap:13px;padding-bottom:18px;margin-bottom:22px}
  .bk__head-ico{width:50px;height:50px}
  .bk__head-ico .icon{width:23px;height:23px}
  .bk__head p{font-size:13.8px}
  .field input,.field select,.field textarea{min-height:50px;padding:13px 14px;font-size:15.5px}
  .field textarea{min-height:100px}
  .bk__ctl input,.bk__ctl select,.bk__ctl textarea{padding-left:43px}
  .bk__ctl-ico{left:14px;top:16px;width:18px;height:18px}
  .bk__submit{min-height:54px;font-size:15.8px}
  /* What the button already stands at here, said out loud, so the
     two-line loading label lands on the same number instead of below it.
     The idle rule above is untouched: it renders at this height already,
     driven by its own content. */
  .bk__submit.is-loading{min-height:58px}
  .bk__tooth{width:150px;height:150px}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .footer__top{padding:44px 0 26px}
  .footer__bottom-inner{justify-content:center;text-align:center;padding-block:20px;font-size:13.4px}
  .footer__legal{justify-content:center;font-size:13.4px}
  .footer__legal a{padding:2px 13px}
  .footer__legal a:first-child{padding-left:13px}
  .footer h4{margin-bottom:20px;padding-bottom:12px;font-size:14px}
  .footer__links{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
  .footer__links a{align-items:flex-start;gap:8px}
  .footer__links a .icon{margin-top:6px}
  .footer__contact{gap:16px}
  .footer__about p{margin-top:16px;max-width:none}
  .footer__accent{margin-top:18px}
  .footer__social{margin-top:20px}
  .footer__div{margin-top:30px;gap:14px}
  .footer__div-ico svg{width:22px;height:22px}
  .gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:132px;gap:12px}
  .gallery__cap{opacity:1;transform:none;font-size:12.5px;left:12px;right:12px;bottom:10px}
  .gallery__item::after{opacity:.85}
  .map-card iframe{height:300px}
  .slide__points{gap:9px 16px}
  .slide__points li{font-size:13.8px}
  .btn{padding:12px 20px;font-size:14.5px}
  .slide__actions .btn{flex:1 1 100%}
}

/* --- Treatments: two cards per row on phones (<=767px) ---
   Tablet (768-1023px) and desktop (>=1024px) are untouched; those column
   counts still come from the base rule and the <=960px block above. --- */
@media (max-width:767px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3.2vw,16px)}

  /* Card internals scale with the viewport so two columns stay readable all
     the way down to 320px instead of falling back to a single column. */
  .card__body{padding:clamp(12px,3.4vw,20px) clamp(11px,3.2vw,20px) clamp(14px,3.6vw,22px)}
  .card__title{font-size:clamp(14.5px,4.1vw,19px);line-height:1.26}
  .card__text{margin-top:clamp(6px,1.8vw,10px);font-size:clamp(12.4px,3.3vw,15px);line-height:1.55}
  .card__link{margin-top:clamp(12px,3vw,18px);font-size:clamp(12.6px,3.3vw,14.6px);gap:6px}
  .card__link .icon{width:14px;height:14px}

  /* Shrink the corner chips so the icon and the step number never collide
     on a narrow card. */
  .card__badge{
    left:10px;top:10px;border-radius:11px;
    width:clamp(32px,9vw,42px);height:clamp(32px,9vw,42px);
  }
  .card__badge .icon{width:clamp(17px,4.6vw,22px);height:clamp(17px,4.6vw,22px)}
  .card__no{
    right:10px;top:10px;padding:0 8px;
    min-width:28px;height:clamp(26px,7vw,32px);
    font-size:clamp(11px,2.9vw,12.5px);
  }

  /* Keep the section CTA centred and inside the rail. */
  .section__foot .btn{max-width:100%}
}

@media (max-width:420px){
  .header .brand__logo{height:38px}
  .footer .brand__logo{height:46px;max-width:210px;padding:9px 12px}
  /* Statistics stay a 2x2 grid rather than collapsing to a tall single column. */
  .stats__card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stat{gap:9px;padding:14px 10px}
  .stat__ico{width:34px;height:34px}
  .stat__ico .icon{width:18px;height:18px}
  .stat__num{font-size:21px}
  .stat__label{font-size:11.4px;margin-top:2px}
  .mobile-bar a{font-size:11.4px}
  .brand__sub{display:none}
  .footer .brand__sub{display:block}
  .brand__name{font-size:15.5px}
  .header__cta .btn .icon{display:none}
  .header__cta .btn{padding:10px 13px}
}


/* ==========================================================================
   MOBILE HEADER + IMMERSIVE HERO  (below 768px only)
   ==========================================================================
   Everything below is inside one max-width:767px query and sits after the
   other responsive blocks, so it wins the cascade over the 899/760/640
   rules without editing them. Nothing here can reach 768px and up. */

/* The mobile-only call control is inert on desktop. */
.header__call{display:none}

@media (max-width:767px){
  /* The address/phone strip is redundant on a phone: the header carries a
     call control and the sticky bar carries Call/WhatsApp/Book. Hidden, not
     removed — the markup and the desktop bar are untouched. */
  .topbar{display:none}

  /* The card used to butt straight against the hero's navy edge. On desktop
     it deliberately overlaps (-58px) and on tablet it sits flush; a phone
     needs the seam to read as a break. */
  .stats{margin-top:16px}

  /* Every in-page jump — drawer nav, sticky-bar Book, any scrollIntoView —
     used to land its target at y=0, underneath the 64px sticky header, which
     swallowed the section's eyebrow and the top of its heading. */
  html{scroll-padding-top:76px}

  /* ---------- Header: burger | wordmark | call ---------- */
  .header{box-shadow:0 2px 12px rgba(15,37,71,.05)}
  .header__inner{gap:8px;min-height:64px;justify-content:center}
  /* Dissolve the CTA wrapper so its children become flex items of the row
     and `order` can place them either side of the centred wordmark. */
  .header__cta{display:contents}
  .header__cta .btn{display:none}
  .burger{order:1;display:grid;width:44px;height:44px;border:0;background:none;color:var(--navy)}
  .burger .icon{width:23px;height:23px;stroke-width:2}
  .brand{order:2;margin-inline:auto;gap:9px;min-width:0}
  .header .brand__logo{height:42px;max-width:min(210px,calc(100vw - 132px))}
  .brand__name{font-size:17.5px}
  .brand__sub{display:block;font-size:7.8px;letter-spacing:.15em;margin-top:2px}
  .header__call{
    order:3;display:grid;place-items:center;
    width:44px;height:44px;border-radius:50%;color:var(--blue);
  }
  .header__call .icon{width:22px;height:22px}
  .header__call:active{background:var(--blue-050)}

  /* ---------- Hero: the photograph is the panel ---------- */
  .hero{background:var(--navy-900)}
  .slide__media{
    position:absolute;inset:0;z-index:0;
    aspect-ratio:auto;height:100%;overflow:hidden;
  }
  .slide__media picture{display:block;width:100%;height:100%}
  .slide__media img{width:100%;height:100%;object-fit:cover;object-position:66% center}
  /* Per-slide framing so the dentist stays in the upper half, clear of the
     copy, whatever the crop does at this aspect ratio. */
  .slide:nth-child(1) .slide__media img{object-position:92% center}
  .slide:nth-child(2) .slide__media img{object-position:74% center}
  .slide:nth-child(3) .slide__media img{object-position:58% center}

  /* Readability gradient. The top third keeps the photograph's own colour
     and brightness; the navy only arrives where the copy does. */
  .slide__media::after{
    content:"";display:block;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(15,37,71,0) 0%,
      rgba(15,37,71,.05) 26%,
      rgba(15,37,71,.30) 37%,
      rgba(15,37,71,.60) 44%,
      rgba(15,37,71,.81) 51%,
      rgba(15,37,71,.93) 60%,
      rgba(15,37,71,.98) 74%,
      #0F2547 100%);
  }

  .slide__body{
    position:relative;z-index:2;background:none;
    min-height:clamp(500px,68vh,560px);
    display:flex;align-items:flex-end;
    padding:0 0 66px;              /* the dots live in this reserve */
  }
  .slide__body > .wrap{width:100%}
  .slide__copy{width:100%;max-width:none;padding-right:0}

  .slide__kicker{
    padding:6px 13px 6px 9px;margin-bottom:12px;gap:7px;
    background:rgba(15,37,71,.45);border-color:rgba(255,255,255,.3);
    color:#fff;font-size:10.8px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  }
  .slide__kicker .icon{width:13px;height:13px;color:var(--accent)}

  .slide__title{
    font-size:clamp(27px,8.85vw,38px);line-height:1.1;letter-spacing:-.028em;
    color:#fff;text-shadow:0 2px 20px rgba(15,37,71,.4);
  }
  .slide__title em{color:var(--accent)}

  .slide__text{
    margin-top:10px;max-width:none;
    font-size:14.8px;line-height:1.62;color:rgba(255,255,255,.86);
  }

  /* The hero converts nothing on a phone — the sticky Call/WhatsApp/Book bar
     does, and repeating those actions here only crowded the photograph. So
     both the desktop CTA pair and the feature list stay out, and the panel
     comes down with them. */
  .slide__points,.slide__actions{display:none}

  /* Dots sit in the bottom reserve, clear of the copy above them. */
  .hero__dots{
    position:absolute;left:0;right:0;bottom:22px;z-index:6;
    margin-top:0;padding-bottom:0;gap:7px;
  }
  .hero__dots button{width:8px;height:8px;background:rgba(255,255,255,.45)}
  .hero__dots button:hover{background:rgba(255,255,255,.7)}
  .hero__dots button[aria-current="true"]{width:26px;background:#fff}
}

/* ------------------------------------------------------------------
   Phone hero, brand-panel variant.

   The block above lays white copy over the photograph. With no
   photograph there is nothing to lay it over, so the slide goes back to
   the stacked light layout: panel on top, copy beneath it on white. The
   overrides are additive and scoped to .slide--brand, so a slide that
   does have a photograph is untouched.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  .hero--brand{background:#fff}
  .slide--brand .slide__media{position:relative;inset:auto;height:auto;aspect-ratio:16/10;z-index:0}
  .slide--brand .slide__media::after{display:none}
  .slide--brand .slide__body{
    position:relative;z-index:2;background:#fff;min-height:0;
    display:block;padding:28px 0 58px;
  }
  .slide--brand .slide__kicker{
    padding:7px 15px 7px 10px;margin-bottom:14px;
    background:var(--blue-050);border-color:var(--blue-100);color:var(--blue-700);
    font-size:12.4px;letter-spacing:.02em;text-transform:none;
  }
  .slide--brand .slide__kicker .icon{color:var(--blue)}
  .slide--brand .slide__title{color:var(--navy);text-shadow:none}
  .slide--brand .slide__title em{color:var(--blue)}
  .slide--brand .slide__text{color:var(--body)}
  .hero--brand .hero__dots button{background:var(--line-strong)}
  .hero--brand .hero__dots button[aria-current="true"]{background:var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  /* The rule above would not still this spinner, it would run it at a
     rotation every hundredth of a millisecond — faster than the screen
     can draw, which is a flicker rather than a stop. It is held still
     instead, as a plain ring: the label beside it is what says the
     request is in flight, and the label does not move. */
  .bk__spin{animation:none !important;border-top-color:rgba(255,255,255,.32)}
}

@media print{
  .topbar,.header,.fab,.mobile-bar,.hero__arrow,.hero__dots{display:none !important}
}

/* ==========================================================================
   STANDALONE PAGES
   About Us, Treatments, Gallery, Contact Us and the three legal pages.

   Additive only: every rule below is scoped to a class that exists on no
   other page, and every value comes from the tokens already defined at the
   top of this file. The homepage is not touched by any of it.
   ========================================================================== */
.page-hero{
  position:relative;
  padding:clamp(30px,4.4vw,58px) 0 clamp(28px,4vw,52px);
  background:
    radial-gradient(120% 140% at 50% -40%,rgba(1,156,163,.14),rgba(255,255,255,0) 62%),
    var(--tint);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.page-hero__inner{max-width:760px;margin:0 auto}
.page-hero h1{font-size:clamp(28px,3.1vw,46px);line-height:1.14;letter-spacing:-.02em;color:var(--navy-900)}
.page-hero .s-sub{margin-top:14px}
/* ---------- About Us introduction ---------- */
.page-intro__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.page-intro__copy h2{font-size:clamp(24px,2.4vw,34px);line-height:1.2;color:var(--navy-900)}
.page-intro__copy p{margin-top:16px;font-size:clamp(15.5px,1.1vw,17px);line-height:1.75;color:var(--body)}
.page-intro__figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.page-intro__figure img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

/* ---------- Legal pages ---------- */
.legal{padding:clamp(38px,4.6vw,66px) 0}
.legal__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,52px);align-items:start}
.prose{max-width:72ch;color:var(--body);font-size:16px;line-height:1.78}
.prose > *:first-child{margin-top:0}
.prose h2{
  font-size:clamp(19px,1.6vw,23px);line-height:1.3;color:var(--navy-900);
  margin:clamp(28px,3vw,38px) 0 12px;
}
.prose h3{font-size:17.5px;line-height:1.35;color:var(--navy-900);margin:26px 0 10px}
.prose p{margin:0 0 15px}
.prose ul{margin:0 0 16px;padding-left:22px;list-style:disc}
.prose ol{margin:0 0 16px;padding-left:22px;list-style:decimal}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue-700)}
.prose strong,.prose b{color:var(--navy-900);font-weight:750}
.prose blockquote{
  margin:0 0 16px;padding:14px 18px;border-left:3px solid var(--blue);
  background:var(--bg-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;
}

.legal__aside{
  position:sticky;top:calc(var(--header-h) + 16px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:22px;
}
.legal__aside h2{font-size:16.5px;line-height:1.3;color:var(--navy-900)}
.legal__aside p{margin:8px 0 16px;font-size:14px;line-height:1.65;color:var(--body)}
.legal__list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.legal__list li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:12px;font-size:14.4px;line-height:1.55}
.legal__list .legal__ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);
}
.legal__list .icon{width:17px;height:17px}
.legal__list a{color:var(--ink);font-weight:650}
.legal__list a:hover{color:var(--blue)}
.legal__updated{margin:clamp(26px,3vw,36px) 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.8px;color:var(--muted)}

/* ---------- Contact page ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:clamp(20px,2.2vw,28px);text-align:center;
}
.contact-card__ico{
  width:52px;height:52px;border-radius:14px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);
}
.contact-card__ico .icon{width:24px;height:24px}
.contact-card h3{font-size:16.5px;color:var(--navy-900)}
.contact-card p{margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--body)}
.contact-card a{color:var(--link);font-weight:700}
.contact-card a:hover{color:var(--blue)}

@media (max-width:1024px){
  .legal__grid{grid-template-columns:minmax(0,1fr)}
  .legal__aside{position:static;max-width:520px}
}
@media (max-width:900px){
  .page-intro__grid{grid-template-columns:minmax(0,1fr)}
  .page-intro__figure{order:-1}
  .contact-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .prose{font-size:15.4px}
  .legal__aside{padding:18px}
}

/* ==========================================================================
   DENTIST CAROUSEL
   Shown in place of the single-dentist profile when the clinic has two or
   more active dentists. Same card language, radii, shadows and blue/cyan
   palette as the treatment cards; no new colour, font or motion idiom.

   Additive only: every selector below is new, so a clinic with one dentist
   renders exactly as before.
   ========================================================================== */
.docs{position:relative}
.docs__viewport{position:relative;overflow:hidden;padding:6px;border-radius:var(--r-lg)}
.docs__viewport:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.docs__track{display:flex;transition:transform .55s var(--ease)}
.doc{flex:0 0 33.3333%;padding:0 clamp(7px,.8vw,12px);box-sizing:border-box;display:flex}
.doc__card{
  background:#fff;border:1px solid var(--accent-line);border-radius:var(--r-lg);
  box-shadow:0 2px 14px rgba(15,37,71,.05);overflow:hidden;
  display:flex;flex-direction:column;width:100%;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.doc__card:hover{transform:translateY(-6px);border-color:var(--accent-100);box-shadow:0 18px 40px rgba(15,37,71,.12)}
.doc__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft-2)}
.doc__media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease)}
.doc__card:hover .doc__media img{transform:scale(1.05)}
.doc__body{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
.doc__name{font-size:clamp(18px,1.5vw,21px);line-height:1.25;color:var(--navy-900)}
.doc__role{margin:0;font-size:14.6px;line-height:1.5;color:var(--body)}
.doc__cred{margin-top:2px}
.doc__cta{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:750;color:var(--blue);
}
.doc__cta .icon{width:17px;height:17px;transition:transform .22s var(--ease)}
.doc__cta:hover{color:var(--blue-700)}
.doc__cta:hover .icon{transform:translateX(4px)}

.docs__controls{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,20px);margin-top:30px}
.docs__controls[hidden]{display:none}
.docs__controls .dots{margin-top:0}
.docs__arrow{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--blue);cursor:pointer;
  box-shadow:var(--sh-sm);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.docs__arrow:hover{border-color:var(--blue);background:var(--blue-050)}
.docs__arrow[hidden]{display:none}
.docs__arrow .icon{width:19px;height:19px}

@media (max-width:1024px){ .doc{flex-basis:50%} }
@media (max-width:640px){
  .doc{flex-basis:100%}
  .docs__arrow{width:42px;height:42px}
}

/* ==========================================================================
   DOCTOR PROFILE PAGE
   ========================================================================== */
.docp{padding:clamp(34px,4.4vw,64px) 0}
.docp__grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,4vw,58px);align-items:start}
.docp__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);background:var(--bg-soft-2)}
.docp__media img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.docp__name{font-size:clamp(26px,2.7vw,38px);line-height:1.15;color:var(--navy-900);margin-top:14px}
.docp__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.docp__bio{margin-top:clamp(20px,2.4vw,28px)}
.docp__bio h2{font-size:clamp(19px,1.7vw,24px);line-height:1.3;color:var(--navy-900);margin-bottom:12px}
.docp__bio p{margin:0 0 14px;font-size:clamp(15.5px,1.1vw,17px);line-height:1.75;color:var(--body)}
.docp__stats{
  list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.docp__stats li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 14px;text-align:center;box-shadow:var(--sh-sm);
}
.docp__stats .icon{width:20px;height:20px;color:var(--blue)}
.docp__stats b{display:block;font-size:clamp(19px,1.7vw,24px);color:var(--navy-900);line-height:1.15;margin-top:6px}
.docp__stats span{display:block;font-size:12.8px;color:var(--muted);margin-top:3px}
.docp__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.docp__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,34px)}
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13.2px;color:var(--muted);
}
.crumbs a{color:var(--blue);font-weight:650}
.crumbs a:hover{color:var(--blue-700)}
.crumbs span[aria-hidden]{opacity:.55}

@media (max-width:900px){
  .docp__grid{grid-template-columns:minmax(0,1fr)}
  .docp__media{max-width:420px}
}
@media (max-width:520px){
  .docp__stats{grid-template-columns:minmax(0,1fr)}
  .docp__stats li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;text-align:left;align-items:center}
  .docp__stats b{grid-column:2;grid-row:1;margin-top:0}
  .docp__stats span{grid-column:2;grid-row:2;margin-top:0}
  .docp__stats .icon{grid-row:1 / span 2}
}

/* =====================================================================
   BLOG — the listing at /blog and one article at /blog/{slug}.

   The listing is the site's own card grid: .cards--lux, unchanged, with
   the badge-and-number ornament of a treatment card left off and a
   category, a date and a Read More link in its place. The article is the
   .prose column the legal pages already use. Nothing here restyles an
   existing component.
   ===================================================================== */
/* A card is a summary, not the article. The picture keeps one ratio for
   every card, and the title and excerpt are held to a fixed number of
   lines — so a long title cannot make one card tower over its neighbours,
   and a short excerpt cannot leave a hole under it. The date and the Read
   More link sit on the bottom edge, level across the row. */
.cards--blog .card__body{padding:20px 22px 22px}
.cards--blog .card__media{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.cards--blog .card__media a{display:block;height:100%}
.cards--blog .card__title{
  margin-top:10px;font-size:18.5px;line-height:1.34;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.cards--blog .card__title a{color:inherit}
.cards--blog .card:hover .card__title a{color:var(--blue-700)}
.cards--blog .card__text{
  flex:1;margin-top:8px;font-size:14.6px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

.post__cat{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:5px 12px;border-radius:999px;
  background:var(--blue-050);border:1px solid var(--blue-100);
  color:var(--blue-700);font-size:12px;font-weight:750;
  letter-spacing:.04em;text-transform:uppercase;
}
.post__meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  margin:12px 0 0;font-size:13px;color:var(--muted);
}
.post__meta span{display:inline-flex;align-items:center;gap:7px}
.post__meta .icon{width:16px;height:16px;color:var(--blue)}
.cards--blog .card__link{margin-top:12px}
.cards--blog .post__cat{padding:4px 10px;font-size:11.3px}

/* ---- one article ---- */
.post__head{text-align:center;margin-bottom:clamp(24px,3vw,36px)}
.post__title{
  margin:14px 0 0;font-size:clamp(26px,3vw,42px);line-height:1.16;
  letter-spacing:-.02em;color:var(--navy-900);
}
.post__head .s-rule{margin:16px auto 0}
.post__meta--head{justify-content:center;margin-top:16px}
.post__media{
  margin:0 0 clamp(24px,3vw,38px);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-sm);background:var(--tint);
}
.post__media img{display:block;width:100%;height:auto}
/* A comfortable measure for reading. The cover above it and the tables
   inside it still use the full column; only the text is held in. */
.post__body{max-width:68ch;margin-inline:auto;overflow-wrap:break-word}
.post__body > .table-scroll,.post__body > figure{max-width:100%}
.post__body img{
  display:block;max-width:100%;height:auto;margin:22px 0;
  border-radius:var(--r-sm);border:1px solid var(--line);
}
.post__foot{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin-top:clamp(26px,3vw,38px);
  padding-top:18px;border-top:1px solid var(--line);
}
.post__foot .legal__updated{margin:0;padding:0;border:0}

/* ---- the grid, when there are only one or two articles ----
   Three columns are right once there are three articles. Below that the
   grid would leave a card stranded against a wall of empty space, so a
   single article becomes one wide feature card and a pair sits centred at
   two-up. Same card, same type, same spacing — only the track count and
   the measure change. */
.cards--blog-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}

.cards--blog-one{grid-template-columns:minmax(0,1fr);max-width:940px;margin-inline:auto}
.cards--blog-one .card{flex-direction:row;align-items:stretch}
.cards--blog-one .card__media{flex:0 0 44%;aspect-ratio:auto;border-radius:var(--r) 0 0 var(--r)}
.cards--blog-one .card__title{-webkit-line-clamp:3;font-size:clamp(20px,2.1vw,26px)}
.cards--blog-one .card__text{-webkit-line-clamp:4;font-size:15.5px}
.cards--blog-one .card__media a,
.cards--blog-one .card__media picture{display:block;height:100%}
.cards--blog-one .card__media img{height:100%;object-fit:cover}
.cards--blog-one .card__body{padding:clamp(24px,3vw,38px);justify-content:center}
.cards--blog-one .card__title{font-size:clamp(20px,2.1vw,27px)}
.cards--blog-one .card__text{flex:0 1 auto}

@media (max-width:860px){
  .cards--blog-one .card{flex-direction:column}
  .cards--blog-one .card__media{flex:none;aspect-ratio:3/2;border-radius:var(--r) var(--r) 0 0}
  .cards--blog-one .card__media img{height:100%}
  .cards--blog-one .card__body{padding:26px 24px 24px}
}

/* Article cards carry a paragraph, so they need more room than the picture
   cards do: two-up from tablet width rather than three, and one-up on a
   phone. Scoped to the blog grid — no other card grid changes. */
@media (max-width:1099px){
  .cards--blog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cards--blog,.cards--blog-two{grid-template-columns:minmax(0,1fr)}
}

/* ---- tables written into an article ---- */
.prose table{
  width:100%;border-collapse:collapse;margin:0 0 20px;
  font-size:15px;line-height:1.6;
}
.prose caption{
  caption-side:top;text-align:left;padding-bottom:8px;
  font-size:13.2px;color:var(--muted);
}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--tint);color:var(--navy-900);font-weight:750}
.prose tbody tr:nth-child(even) td{background:var(--bg-soft)}
/* A wide table scrolls inside its own box rather than pushing the page
   sideways — an article's HTML must never cost the layout. The box is put
   there by Html::article() when the page is written. */
.table-scroll{max-width:100%;overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.table-scroll table{margin-bottom:0;min-width:520px}

/* ---- Latest Articles, on the homepage ----
   The grounds alternate down the page. The FAQ above and the appointment
   form below both sit on --bg-soft, so this one is white and separates
   them instead of running into both. */
.blog-home{background:#fff}
.blog-home .card__title{font-size:19.5px}

/* =====================================================================
   THANK YOU
   The page the appointment form lands on. Same card, rule, eyebrow and
   button treatments as the rest of the site — nothing new is invented
   here, it is the site's own language arranged for one message.
   ===================================================================== */
.ty{background:var(--tint);padding:clamp(34px,4.6vw,64px) 0}
.ty__wrap{display:flex;justify-content:center}
.ty__card{
  width:min(720px,100%);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);
  padding:clamp(26px,3.4vw,44px);text-align:center;
}
.ty__tick{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 18px;background:var(--blue-050);color:var(--blue);
}
.ty__tick .icon{width:30px;height:30px;stroke-width:2.2}
.ty__title{font-size:clamp(25px,3.1vw,34px);letter-spacing:-.02em;color:var(--navy);margin-top:10px}
.ty__card .s-rule{margin:14px auto 16px}
.ty__lead{font-size:16.4px;line-height:1.7;color:var(--body);max-width:52ch;margin:0 auto}
.ty__lead b{color:var(--navy)}

.ty__summary{display:grid;gap:0;margin:26px 0 4px;text-align:left}
.ty__summary li{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.ty__summary li:last-child{border-bottom:0}
.ty__ico{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue);
}
.ty__ico .icon{width:19px;height:19px}
.ty__summary b{display:block;font-size:11.6px;letter-spacing:.14em;text-transform:uppercase;color:#5B6B82;font-weight:750}
.ty__summary span{display:block;font-size:15.6px;font-weight:650;color:var(--ink);margin-top:4px}

.ty__next{margin-top:26px;padding:20px clamp(16px,2.4vw,24px);background:var(--tint);border-radius:var(--r-lg);text-align:left}
.ty__next h2{font-size:16.5px;color:var(--navy);margin-bottom:12px}
.ty__steps{display:grid;gap:11px;counter-reset:ty;padding-left:0;list-style:none}
.ty__steps li{
  position:relative;padding-left:34px;font-size:15.2px;line-height:1.6;color:var(--body);
  counter-increment:ty;
}
.ty__steps li::before{
  content:counter(ty);position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:12.4px;font-weight:800;
}
.ty__steps b{color:var(--navy);font-weight:750}
.ty__note{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13.4px;color:var(--muted)}
.ty__note .icon{width:15px;height:15px;color:var(--blue);margin-top:2px}

.ty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:26px}
.ty__wa{margin-top:16px;font-size:14.2px;color:var(--muted)}
.ty__wa a{color:var(--blue);font-weight:700}

@media (max-width:640px){
  .ty__card{padding:24px 18px;border-radius:var(--r-lg)}
  .ty__tick{width:56px;height:56px}
  .ty__actions .btn{width:100%;justify-content:center}
}

/* A page the clinic wrote may open with a picture. Same rounding and
   shadow as every other image on the site. */
.page__cover{
  display:block;width:100%;height:auto;margin:0 0 26px;
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
}