/* ==========================================================================
   Dr. A K Sinha Memorial Kanchan Dental Clinic — Design System
   Navy + Gold. Every value below is an extracted or derived logo colour
   from the Brand Colour System Report; none was picked by eye.
   WhatsApp green is the one sanctioned colour outside the brand families.
   ========================================================================== */

:root{
  /* ==================================================================
     Brand — measured off the official logo and favicon. The palette is
     navy, blue and gold: 64% blue / 18% gold / 18% neutral of the mark's
     own ink. There is no teal, mint or cyan in this brand, and no black:
     the palette bottoms out at #02152A.
     ================================================================== */

  /* Navy — the "Kanchan" wordmark. Headings, dark grounds, the footer.
     Three steps: the trust band, the footer one shade deeper so it reads
     as its own plane, and an abyss stop for scrims. */
  --navy:#03294E;        /* Dark 1 — wordmark, trust band, top bar        */
  --navy-900:#041F3C;    /* Dark 2 — footer, a plane of its own           */
  --navy-950:#02152A;    /* Dark 3 — deepest stop, scrims. Used sparingly */
  --navy-800:#024182;    /* Deep Ocean — primary hover, gradient midpoint */
  --navy-700:#072E55;    /* Elevated card / input on a dark ground        */
  --navy-soft:#072E55;

  /* Blue — the tooth ribbon. The action colour, never an area colour:
     white on #0458A5 is 7.13:1. #0378D5 is the focus ring and icon fill
     and is never text; #1396F0 is decorative only. */
  --blue:#0458A5;
  --blue-600:#024182;
  --blue-700:#03294E;
  --blue-300:#0378D5;
  --blue-200:#1396F0;
  --blue-050:#EEF4FA;
  --blue-100:#DCE9F6;

  /* Gold — the orbiting ellipse and the "DENTAL CLINIC" lettering.
     A garnish at roughly 5% of the page, and a line-and-edge colour
     rather than a surface one.

     The three are NOT interchangeable, and the split is deliberate:
       --accent      #BA801C  decorative rules, borders, icon strokes >=20px.
                              3.39:1 on white — never text.
       --accent-ink  #8B5606  every gold text and small gold icon on a
                              light ground. 6.12:1.
       --accent-300  #F5C55C  gold on navy only — 9.10:1, the brand's
                              strongest pairing. 1.9:1 on white, so it
                              never appears on a light ground. */
  --accent:#BA801C;
  --accent-ink:#8B5606;
  --accent-300:#F5C55C;
  --accent-200:#FCDF78;
  --accent-100:#E8D5A8;
  --accent-050:#FBF4E6;
  --accent-line:#DDE7F0;

  /* Tinted ground for the alternating sections. The brand's own light is
     the tooth enamel, which measures cool and blue-leaning — so the wash
     is cool, never warm cream. */
  --tint:#F5F8FB;

  --wa:#25D366;
  --wa-dark:#1DAF52;

  /* Neutrals */
  --ink:#03294E;
  --body:#33475F;
  --muted:#5F7186;
  --line:#DDE7F0;
  --line-soft:#E8EEF4;
  --line-strong:#CBD8E4;
  --bg:#FFFFFF;
  --bg-soft:#F5F8FB;
  --bg-soft-2:#EEF4FA;

  /* Text on dark grounds is its own token set — the light-surface colours
     are illegible reversed and are never used there. */
  --on-dark:#C6D6E6;
  --on-dark-muted:#9DB3CA;
  --on-dark-faint:#8FA9C4;

  /* Semantic. Warning amber sits inside the brand's gold hue family, so
     a warning is always a filled panel plus a triangle icon — a treatment
     no decorative gold element is ever allowed to borrow. */
  --ok:#12805C;
  --ok-ink:#0E6B4D;
  --ok-bg:#E8F5EF;
  --ok-line:#BFE3D3;
  --warn:#A9611A;
  --warn-ink:#8A4E10;
  --warn-bg:#FDF3E3;
  --warn-line:#F0D9A8;
  --err:#B42318;
  --err-ink:#B42318;
  --err-bg:#FDECEA;
  --err-line:#F5C2BD;

  /* Focus. Never removed; switches to white on navy so it stays visible. */
  --focus:#0378D5;
  --focus-ring:rgba(3,120,213,.20);

  /* Gradients. Both logo ramps travel in lightness and barely move in
     hue, so these do too. The gold ramp keeps its desaturated #C79D56
     stop at 65% — that dip is what reads as metal instead of yellow. */
  --grad-primary:linear-gradient(135deg,#03294E 0%,#024182 55%,#0458A5 100%);
  --grad-ribbon:linear-gradient(135deg,#0458A5 0%,#0378D5 100%);
  --grad-gold:linear-gradient(100deg,#8B5606 0%,#BA801C 30%,#F5C55C 50%,#C79D56 65%,#BA801C 100%);
  --grad-surface:linear-gradient(180deg,#FFFFFF 0%,#F5F8FB 100%);
  --grad-scrim:linear-gradient(90deg,rgba(3,41,78,.88) 0%,rgba(3,41,78,.45) 60%,rgba(3,41,78,.20) 100%);

  /* Champagne gold on white is 1.9:1 and vanishes, so a star is a gold
     fill with a bronze stroke rather than a fill alone. */
  --star:#F5C55C;
  --star-stroke:#8B5606;
  --star-empty:#DDE7F0;

  /* ==================================================================
     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 navy. */
  --sh-xs:0 1px 2px rgba(3,41,78,.06);
  --sh-sm:0 2px 8px rgba(3,41,78,.06);
  --sh:0 6px 22px rgba(3,41,78,.08);
  --sh-md:0 12px 34px rgba(3,41,78,.10);
  --sh-lg:0 22px 60px rgba(3,41,78,.14);
  --sh-card:0 24px 56px -34px rgba(3,41,78,.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}
/* On navy the blue ring would disappear into the ground, so it flips to
   white — the report requires 3:1 against every background it appears on. */
.topbar :focus-visible,.cta :focus-visible,.footer :focus-visible,
.bk :focus-visible,.drawer :focus-visible{outline-color:#fff}

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}

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

/* Stars.
   Champagne gold is 9.10:1 on navy and 1.9:1 on white — on a light ground
   a filled champagne star is very nearly invisible. So a star is always a
   gold fill carrying a bronze stroke, which is what makes its silhouette
   readable; on navy the stroke simply disappears into the fill and costs
   nothing. Every star on the site goes through this one rule. */
.hero__stars .icon,
.reviews__score-stars .icon,
.review__stars .icon{
  fill:var(--star);stroke:var(--star-stroke);stroke-width:1.1;
}

/* ---------- 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(4,88,165,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(4,88,165,.28);background:var(--blue-600);border-color:var(--blue-600)}
.btn:active{transform:translateY(0)}
.btn .icon{width:18px;height:18px}

.btn--wa{--btn-bg:var(--wa);--btn-bd:var(--wa);box-shadow:0 6px 18px rgba(37,211,102,.26)}
.btn--wa:hover{background:var(--wa-dark);border-color:var(--wa-dark);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:#128C3E;--btn-bd:#CBEFD8;box-shadow:var(--sh-sm)}
.btn--wa-ghost:hover{background:#F2FCF6;color:#0E7A35;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(0,0,0,.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 Smile 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 gold arrow. */
.btn--lux{
  --btn-bg:var(--navy-900);--btn-fg:#fff;--btn-bd:var(--navy-900);
  box-shadow:0 10px 26px rgba(3,41,78,.22);
}
.btn--lux:hover{
  background:var(--navy-800);border-color:var(--navy-800);
  box-shadow:0 14px 32px rgba(3,41,78,.28);
}
.btn--lux .icon--accent{color:var(--accent-300)}

.btn--lux-ghost{
  --btn-bg:#fff;--btn-fg:var(--navy-900);--btn-bd:var(--accent-100);
  box-shadow:0 4px 14px rgba(3,41,78,.06);
}
.btn--lux-ghost:hover{
  background:#fff;color:var(--navy-900);border-color:var(--accent);
  box-shadow:0 8px 20px rgba(3,41,78,.10);
}
.btn--lux-ghost .icon{color:var(--accent-ink)}

/* Small gold-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-ink);
  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(--navy);color:var(--on-dark);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(--accent-300);opacity:.95}
.topbar__item a{transition:color .16s var(--ease)}
.topbar__item a:hover{color:#fff}
.topbar__sep{width:1px;height:14px;background:rgba(245,197,92,.25)}
.topbar__spacer{flex:1}
.topbar__social{display:inline-flex;align-items:center;gap:6px}
.topbar__social span{margin-right:4px;color:var(--on-dark-faint);font-size:12.5px}
.topbar__social a{
  width:24px;height:24px;border-radius:50%;color:var(--on-dark);
  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(3,41,78,.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 inline mark below it is a fallback: the
   sibling rule hides it while the <img> is in the DOM, and the img's onerror
   removes itself, which lets the fallback back in if the file is missing. */
.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__mark{width:46px;height:46px;flex:none}
.brand__name{font-size:21.5px;font-weight:800;letter-spacing:-.025em;color:var(--navy);line-height:1.05}
.brand__name em{font-style:normal;color:var(--blue)}
.brand__sub{display:block;font-size:9.8px;font-weight:700;letter-spacing:.19em;color:var(--blue);margin-top:4px}

.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(4,88,165,.20);
}
.header__cta .btn:hover{box-shadow:0 10px 22px rgba(4,88,165,.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(3,41,78,.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(3,41,78,.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(245,249,253,.9) 0%,rgba(245,249,253,.4) 3.5%,rgba(245,249,253,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}

/* Google rating card */
/* Inline social proof under the CTAs — deliberately smaller than the
   headline and the primary button. */
.hero__rating{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:26px;
}
.hero__rating .g-mark{width:20px;height:20px;flex:none}
.hero__rating strong{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.hero__stars{display:inline-flex;gap:2px;color:var(--star)}
.hero__stars .icon{width:15px;height:15px}
.hero__rating-count{font-size:14px;color:var(--muted);font-weight:600}

/* ------------------------------------------------------------------
   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, CTAs and rating 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}
  .hero .hero__rating{min-height:58px;margin-top:16px}
}

/* From 1360 up the CTA pair fits one row and the rating one line. */
@media (min-width:1360px){
  .hero .slide__actions{min-height:66px}
  .hero .hero__rating{min-height:32px}
}
@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}
  .hero .hero__rating{min-height:32px}
}

/* 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}
  .hero .hero__rating{min-height:58px;margin-top:12px;gap:8px}
  .hero .hero__rating-count{font-size:13.4px}
}

/* 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(3,41,78,.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(4,88,165,.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(3,41,78,.22);transition:all .28s var(--ease);
}
.hero__dots button:hover{background:rgba(3,41,78,.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(3,41,78,.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-lg);border-color:var(--blue)}
.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)}
.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(3,41,78,.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. */
.lux-strip{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px clamp(28px,4vw,64px);
  margin:0 auto clamp(30px,3.4vw,46px);
}
.lux-strip li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;align-items:center;line-height:1.3;
}
.lux-strip .lux-chip{grid-column:1;grid-row:1 / span 2;width:38px;height:38px;border-radius:50%}
.lux-strip .lux-chip .icon{width:19px;height:19px}
.lux-strip b{grid-column:2;grid-row:1;font-size:15px;font-weight:750;color:var(--navy-900)}
.lux-strip span{grid-column:2;grid-row:2;font-size:13.2px;color:var(--body);margin-top:2px}

.cards--lux .card{
  background:#fff;border:1px solid var(--accent-line);border-radius:var(--r-lg);
  box-shadow:0 2px 14px rgba(3,41,78,.05);
}
.cards--lux .card:hover{
  transform:translateY(-6px);
  border-color:var(--accent-100);
  box-shadow:0 18px 40px rgba(3,41,78,.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-ink);
  border:1px solid var(--accent-line);
  box-shadow:0 6px 18px rgba(3,41,78,.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){
  .lux-strip{gap:12px 20px;margin-bottom:26px}
  .lux-strip li{column-gap:9px}
  .lux-strip .lux-chip{width:32px;height:32px}
  .lux-strip .lux-chip .icon{width:16px;height:16px}
  .lux-strip b{font-size:13.4px}
  .lux-strip span{font-size:11.8px}
  .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%}
.split__badge{
  position:absolute;right:-18px;bottom:-22px;
  background:var(--blue);color:#fff;border-radius:var(--r-lg);
  padding:18px 22px;box-shadow:0 18px 40px rgba(4,88,165,.32);
  display:flex;align-items:center;gap:13px;max-width:276px;
}
.split__badge .icon{width:32px;height:32px;flex:none;opacity:.95}
.split__badge b{display:block;font-size:22px;line-height:1.1;font-weight:800}
.split__badge span{font-size:12.6px;opacity:.9;font-weight:600;line-height:1.4}

/* 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(3,41,78,.14);
}
.split__badge--lux{
  right:24px;bottom:-24px;max-width:none;
  background:var(--navy-900);color:#fff;border-radius:var(--r);
  padding:20px 26px;gap:16px;align-items:center;
  box-shadow:0 18px 40px rgba(3,41,78,.30);
}
.split__badge--lux .icon{width:34px;height:34px;color:var(--accent-300);opacity:1}
.split__badge--lux b{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1}
.split__badge--lux span{font-size:13px;opacity:.86;line-height:1.4;margin-top:4px}

.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(3,41,78,.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(3,41,78,.09);
}
.benefits__label{
  font-size:15.4px;font-weight:700;line-height:1.35;color:var(--navy-900);
}

@media (max-width:960px){
  .split__badge--lux{right:16px;padding:16px 20px;gap:13px}
  .split__badge--lux .icon{width:28px;height:28px}
  .split__badge--lux b{font-size:22px}
}
@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%}
.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)}
.doctor--lux .doctor__frame{
  border-radius:20px;
  border:1px solid var(--accent-100);
  box-shadow:0 22px 54px rgba(3,41,78,.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(3,41,78,.32);
}
.doctor__exp--lux .icon{width:28px;height:28px;color:var(--accent-300)}
.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(3,41,78,.05);
}
.pill--lux .icon{color:var(--accent-ink)}
.doctor--lux .doctor__bio{color:var(--body)}

/* Credentials read as figures: bronze 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(3,41,78,.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-ink);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(3,41,78,.72) 0%,rgba(3,41,78,.18) 42%,rgba(3,41,78,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(3,41,78,.62) 0%,rgba(3,41,78,.06) 46%,rgba(3,41,78,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(3,41,78,.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(3,41,78,.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(3,41,78,.06);
}
.gallery--lux .gallery__item::after{
  background:linear-gradient(to top,rgba(3,41,78,.78) 0%,rgba(3,41,78,.20) 44%,rgba(3,41,78,0) 70%);
}
.gallery--lux .gallery__cap{
  font-size:14.5px;font-weight:650;letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(3,41,78,.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(3,41,78,.90) 0%,rgba(3,41,78,.62) 20%,rgba(3,41,78,.12) 48%,rgba(3,41,78,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(3,41,78,.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(--bg-soft)}

/* Rating banner leads the section so the social proof registers instantly. */
.reviews__score{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,44px);
  box-shadow:var(--sh-sm);
  max-width:960px;margin:0 auto clamp(32px,3.4vw,50px);
}
.reviews__score-main{display:flex;align-items:center;gap:18px}
.reviews__score-num{font-size:clamp(42px,4.4vw,58px);font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.reviews__score-stars{display:flex;gap:4px;color:var(--star)}
.reviews__score-stars .icon{width:21px;height:21px}
.reviews__score-sub{font-size:14.5px;color:var(--muted);font-weight:650;margin-top:8px}
.reviews__score-divider{width:1px;align-self:stretch;background:var(--line)}
.reviews__score-g{display:flex;align-items:center;gap:13px;text-align:left}
.reviews__score-g .g-logo{height:26px;flex:none}
.reviews__score-g b{display:block;font-size:15.5px;font-weight:750;color:var(--ink)}
.reviews__score-g span{display:block;font-size:13.5px;color:var(--muted);font-weight:600;margin-top:2px}

.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:rgba(3,41,78,.2);transition:all .28s var(--ease)}
.dots button:hover{background:rgba(3,41,78,.38)}
.dots button[aria-current="true"]{width:30px;background:var(--blue)}

.reviews__summary{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:30px;font-size:14.8px;color:var(--muted);font-weight:600;
}
.reviews__summary strong{color:var(--navy)}
.reviews__summary .icon{width:17px;height:17px;color:var(--blue)}

/* ==========================================================================
   10. PROCESS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);position:relative}
.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(4,88,165,.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 — brand navy + gold
   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:#041F3C;
  --cta-navy-2:#024182;
  --cta-line:rgba(186,128,28,.28);
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(4,88,165,.30) 0%, rgba(3,41,78,0) 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(4,88,165,.20) 0%, rgba(3,41,78,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);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),rgba(186,128,28,.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:rgba(255,255,255,.80);
}
.cta__text b{color:var(--accent-300);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)}

/* Primary — the dominant action: gold rule plus a soft gold glow. */
.cta__btn--primary{
  background:linear-gradient(180deg,rgba(4,88,165,.32),rgba(3,41,78,.55));
  border-color:var(--accent);color:#fff;padding:0 32px;
  box-shadow:0 0 0 1px rgba(186,128,28,.18), 0 10px 30px rgba(186,128,28,.20);
}
.cta__btn--primary .icon{color:var(--accent-300)}
.cta__btn--primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(4,88,165,.46),rgba(3,41,78,.55));
  box-shadow:0 0 0 1px rgba(186,128,28,.30), 0 16px 38px rgba(186,128,28,.28);
}

/* Secondary — quieter by design: no glow, no accent, plain surface. */
.cta__btn--wa{
  background:var(--tint);border-color:var(--tint);color:var(--navy-900);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.cta__btn--wa .icon{color:#25D366}
.cta__btn--wa:hover{transform:translateY(-2px);background:#fff;border-color:#fff}

/* Tertiary — inside the contact card. */
.cta__btn--outline{
  width:100%;background:transparent;border-color:var(--cta-line);color:var(--accent-300);
}
.cta__btn--outline:hover{border-color:var(--accent);background:rgba(186,128,28,.08)}

/* ---- Trust points ---- */
.cta__points{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 18px;margin-top:34px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.10);
}
.cta__points li{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta__point-ico{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--cta-line);background:rgba(255,255,255,.03);
  color:var(--accent-300);margin-bottom:14px;
}
.cta__point-ico .icon{width:25px;height:25px;stroke-width:1.5}
.cta__points b{font-size:14.6px;font-weight:750;color:#fff;line-height:1.35}
.cta__points li > span:last-child{
  font-size:14.2px;color:rgba(255,255,255,.72);line-height:1.35;padding-bottom:12px;position:relative;
}
.cta__points li > span:last-child::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26px;height:2px;background:var(--accent);opacity:.75;border-radius:2px;
}

/* ---- 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(4,88,165,.22) 0%, rgba(3,41,78,0) 62%),
    var(--cta-navy-2);
  box-shadow:0 26px 60px rgba(0,0,0,.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(4,88,165,.55), rgba(3,41,78,.95));
  border:1px solid var(--cta-line);
  box-shadow:0 0 0 8px rgba(186,128,28,.05), 0 10px 26px rgba(0,0,0,.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:rgba(255,255,255,.86);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__points{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 12px;margin-top:16px;padding-top:16px;
  }
  .cta__points li{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:9px;align-items:center;text-align:left;
  }
  .cta__point-ico{
    grid-column:1;grid-row:1 / span 2;align-self:center;
    width:auto;height:auto;border:0;background:none;border-radius:0;margin:0;
  }
  .cta__point-ico .icon{width:20px;height:20px}
  .cta__points b{grid-column:2;grid-row:1;font-size:13px;line-height:1.25}
  .cta__points li > span:last-child{
    grid-column:2;grid-row:2;font-size:12.4px;line-height:1.25;padding-bottom:0;
  }
  .cta__points li > span:last-child::after{display:none}

  .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(--grad-primary);position:relative;overflow:hidden}
/* On the Deep Ocean gradient the section head reverses: white heading,
   pale-blue supporting copy, gold eyebrow and rule. White is 14.67:1 at
   the dark end and 7.13:1 at the light end, so it is safe the whole way
   across the surface. */
.bk .s-title{color:#fff}
.bk .s-sub{color:var(--on-dark)}
.bk .eyebrow{color:var(--accent-300)}
.bk .eyebrow--lux .icon{color:var(--accent-300)}
.bk .s-rule--lux{background:linear-gradient(90deg,transparent,var(--accent-300) 22%,var(--accent-300) 78%,transparent)}
.bk .s-rule--lux::after{background:var(--navy);border-color:var(--accent-300)}

/* 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:#fff;stroke-width:1;opacity:.07}
.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(3,41,78,.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(--ink)}
.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-strong);background:#fff;font-size:15px;color:var(--body);
  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:#6B7C91}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);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='%235F7186' 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-ink);font-weight:650;min-height:0}
.field.is-invalid input,.field.is-invalid select{border-color:var(--err);border-width:2px;box-shadow:0 0 0 4px rgba(180,35,24,.10)}

/* 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(--blue);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(4,88,165,.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(4,88,165,.7)}
.bk__submit:active{transform:translateY(0)}
.bk__submit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* 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(4,88,165,.62);
}
/* 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(--blue-050);border:1px solid var(--blue-100);color:var(--blue-700);font-size:14.4px;font-weight:650;
  align-items:flex-start;gap:10px;
}
.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:var(--bg-soft);
}
.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(4,88,165,.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(4,88,165,.13) 0%,rgba(4,88,165,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-ink);stroke-width:2.2}
.loc .s-rule--lux::after{background:var(--bg-soft)}

/* 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(3,41,78,.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-ink)}
/* 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}
.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:var(--muted);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);
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy-soft) 100%);
  color:#fff;font-size:16px;font-weight:750;letter-spacing:.01em;
  box-shadow:0 14px 30px -14px rgba(4,88,165,.66);
  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;transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 18px 36px -14px rgba(4,88,165,.72)}
.loc__cta:hover .loc__cta-arr{transform:translateX(4px)}
.loc__cta:active{transform:translateY(0)}
.loc__cta:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* --- 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:#DDE7F0;box-shadow:0 24px 56px -34px rgba(3,41,78,.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 #DDE7F0;
  box-shadow:0 14px 34px -16px rgba(3,41,78,.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:#EEF4FA;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%,#DDE7F0 42% 47%,transparent 47% 100%),
    linear-gradient(28deg,transparent 0 66%,#DCE9F6 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(3,41,78,.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(--navy-900);border-top:2px solid var(--accent);color:var(--on-dark);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(4,88,165,.30) 0%,rgba(3,41,78,0) 62%);
}
.footer__decor::after{
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(rgba(186,128,28,.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)}
.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:var(--accent-300)}
.footer .brand__sub{color:var(--on-dark)}

/* The gold rule under the wordmark — the one 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),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:var(--on-dark-muted)}
.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(--blue);border-color:var(--blue);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(--blue);border-radius:2px}
.footer__links{display:grid;gap:14px}
.footer__links a{display:inline-flex;align-items:center;gap:10px;color:var(--on-dark-muted);transition:color .18s var(--ease),transform .18s var(--ease)}
.footer__links a .icon{width:13px;height:13px;color:var(--blue-300);flex:none}
.footer__links a:hover{color:var(--accent-300);transform:translateX(3px)}
.footer__links a:hover .icon{color:var(--accent-300)}

.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:var(--on-dark);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(186,128,28,.55),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);stroke-width:1.1;opacity:.75}

.footer__bottom-inner{
  padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:var(--on-dark-faint);
}
.footer__legal{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.footer__legal a{padding:2px 18px;color:var(--on-dark-muted);transition:color .18s var(--ease)}
.footer__legal a + a{border-left:1px solid rgba(186,128,28,.42)}
.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:#fff;font-weight:700;font-size:14.5px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(3,41,78,.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(3,41,78,.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(3,41,78,.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(3,41,78,.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(3,41,78,.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(3,41,78,.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 bar */
.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(3,41,78,.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}
/* Two columns when the clinic has published no WhatsApp number. */
.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}
  .hero__rating{bottom:88px;padding:13px 16px;min-width:154px}
  .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))}
  .reviews__score-divider{display:none}
  .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}
  .hero__rating{margin-top:22px}
  .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}
  .split__badge{right:14px;bottom:-20px}
  .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}
  .reviews__score{padding:24px 20px;gap:18px;flex-direction:column}
  .reviews__score-num{font-size:44px}
  .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__mark{width:37px;height:37px}
  .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__mark{width:34px;height:34px}
  .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(3,41,78,.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__mark{width:36px;height:36px}
  .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)}
  .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(3,41,78,0) 0%,
      rgba(3,41,78,.05) 26%,
      rgba(3,41,78,.30) 37%,
      rgba(3,41,78,.60) 44%,
      rgba(3,41,78,.81) 51%,
      rgba(3,41,78,.93) 60%,
      rgba(3,41,78,.98) 74%,
      #041F3C 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(3,41,78,.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-300)}

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

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

  /* Compact trust strip in place of the desktop rating row. */
  .hero__rating{
    display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
    width:max-content;max-width:100%;
    margin-top:16px;padding:7px 12px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  }
  .hero__rating .g-mark{order:1;width:16px;height:16px}
  .hero__stars{order:2;gap:1px}
  .hero__stars .icon{width:12.5px;height:12.5px}
  .hero__rating strong{order:3;font-size:13.2px;color:#fff;letter-spacing:0}
  .hero__rating-count{
    order:4;font-size:12px;color:rgba(255,255,255,.82);
    padding-left:8px;border-left:1px solid rgba(255,255,255,.26);white-space:nowrap;
  }

  /* Dots sit in the bottom reserve, clear of the trust strip 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}
}

@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(186,128,28,.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(--blue)}
.prose a{color:var(--blue);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(--blue);font-weight:700}
.contact-card a:hover{color:var(--blue-700)}

@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/gold
   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(--focus);outline-offset:2px}
.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(3,41,78,.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(3,41,78,.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:var(--muted);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);
}