/* ==========================================================================
   Perfect 32 Dental Clinic — design system
   No framework, no build step. Edit tokens below to restyle the whole site.
   ========================================================================== */

:root {
  /* Brand — taken from the clinic's own logo and existing site.
     navy #154161 and cream #F9F9EE are the declared brand colours;
     #BD3730 is the red mark inside logo.png. */
  --navy-900:#0b2438; --navy-800:#10344e; --navy-700:#154161;
  --navy-600:#1d5580; --navy-500:#2a6d9e; --navy-100:#d4e2ec; --navy-50:#eaf1f6;
  --red-600:#bd3730; --red-100:#f7e2e0;
  --gold-500:#b08d3f; --gold-100:#f4ecd9;

  --ink:#0f1e2b; --ink-2:#3d5162; --ink-3:#71869a;
  --line:#dde5ec; --line-2:#eef3f7;
  --bg:#ffffff; --bg-2:#f9f9ee; --bg-3:#f2f2e4;

  --ok:#1f7a4d; --warn:#a8701a; --err:#bd3730;

  /* Type */
  --font-head:"Fraunces","Georgia",serif;
  --font-body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Space + shape */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-full:999px;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --maxw:1180px;
  --shadow-1:0 1px 2px rgba(11,36,56,.06),0 4px 14px rgba(11,36,56,.06);
  --shadow-2:0 12px 34px rgba(11,36,56,.12);
  --shadow-3:0 24px 60px rgba(11,36,56,.16);
  --ring:0 0 0 3px var(--navy-100);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy-700);text-underline-offset:3px}
a:hover{color:var(--navy-800)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;margin:0 0 .5em;letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2.25rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.85rem,3.8vw,2.85rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.075rem,1.6vw,1.25rem);color:var(--ink-2);line-height:1.6}
.muted{color:var(--ink-3)}
.center{text-align:center}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.tint{background:var(--bg-2)}
.deep{background:var(--navy-900);color:#e8f6f8}
.deep h2,.deep h3{color:#fff}
.deep p{color:#b7d7dd}

/* Accessibility ---------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-800);color:#fff;
  padding:.75rem 1.25rem;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--navy-600);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Eyebrow + section head ------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.775rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-700);
  margin-bottom:.85rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--navy-500);border-radius:2px}
.deep .eyebrow{color:var(--navy-500)}
.s-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.s-head.center{margin-inline:auto;text-align:center}
.s-head.center .eyebrow::before{display:none}

/* Buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-size:1rem;font-weight:650;line-height:1;
  padding:.95rem 1.6rem;border-radius:var(--r-full);border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .16s,box-shadow .16s,background .16s,color .16s;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--navy-700);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy-800);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy-600);background:var(--navy-50);color:var(--navy-800)}
.deep .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.deep .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn-wa{background:#25d366;color:#04331b}
.btn-wa:hover{background:#1ebe5b;color:#04331b;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn-lg{padding:1.1rem 2rem;font-size:1.06rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-row.center{justify-content:center}

/* Header ----------------------------------------------------------------- */
.topbar{background:var(--navy-900);color:#cfe9ed;font-size:.85rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;
  justify-content:space-between;padding-block:.55rem}
.topbar a{color:#cfe9ed;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar svg{width:1em;height:1em;opacity:.8}
.topbar-links{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}

.site-head{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2);transition:box-shadow .2s}
.site-head.scrolled{box-shadow:var(--shadow-1)}
.nav{display:flex;align-items:center;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand-mark{width:42px;height:42px;flex:none}
.brand-name{font-family:var(--font-head);font-weight:600;font-size:1.24rem;line-height:1.05;display:block}
.brand-sub{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
/* display:block matters — as an inline element the vertical padding would not
   add to the line box, so each link's painted background bled ~22px over its
   neighbour and the current-page highlight covered the item above it. */
.nav-links a:not(.btn){display:block;padding:.6rem .85rem;border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink-2);font-weight:600;font-size:.96rem;transition:background .15s,color .15s}
.nav-links a:not(.btn):hover{background:var(--navy-50);color:var(--navy-800)}
.nav-links a[aria-current="page"]{color:var(--navy-800);background:var(--navy-50)}
.nav-cta{margin-left:.5rem}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.55rem;cursor:pointer;color:var(--ink)}
.burger svg{width:26px;height:26px}

@media (max-width:940px){
  /* backdrop-filter makes .site-head a containing block for position:fixed
     descendants, which traps the drawer inside the header. Drop it on mobile
     so .nav-links positions against the viewport instead. */
  .site-head{backdrop-filter:none;background:#fff}
  .burger{display:inline-flex}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:#fff;
    flex-direction:column;align-items:stretch;gap:.15rem;padding:5.5rem 1.25rem 2rem;
    box-shadow:var(--shadow-3);transform:translateX(100%);transition:transform .28s ease;
    overflow-y:auto;z-index:120;visibility:hidden}
  .nav-links.open{transform:none;visibility:visible}
  .nav-links a:not(.btn){padding:.9rem 1rem;font-size:1.05rem}
  .nav-cta{margin:.75rem 0 0}
  .nav-cta .btn{width:100%}
  .nav-backdrop{position:fixed;inset:0;background:rgba(11,36,56,.22);z-index:110;
    opacity:0;pointer-events:none;transition:opacity .28s}
  .nav-backdrop.open{opacity:1;pointer-events:auto}
  .nav-close{position:fixed;top:1rem;right:1rem;z-index:130;display:none;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-full);
    width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
  .nav-close.open{display:flex}
}
@media (max-width:520px){ .brand-sub{display:none} .topbar-links{display:none} }

/* Hero ------------------------------------------------------------------- */
.hero{position:relative;background:linear-gradient(165deg,var(--navy-50),#fff 62%);
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,7vw,5rem);overflow:hidden}
.hero::after{content:"";position:absolute;top:-22%;right:-14%;width:620px;height:620px;
  background:radial-gradient(circle,var(--navy-100),transparent 68%);border-radius:50%;
  pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{margin-bottom:1rem}
.hero h1 em{font-style:normal;color:var(--navy-700);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;
  background:var(--sand-100);z-index:-1;border-radius:3px}
.hero-media{position:relative}
.hero-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-3);aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-badge{position:absolute;left:-1rem;bottom:1.5rem;background:#fff;border-radius:var(--r);
  padding:1rem 1.25rem;box-shadow:var(--shadow-2);display:flex;align-items:center;gap:.85rem;
  max-width:min(280px,80%)}
.hero-badge strong{display:block;font-size:1.5rem;font-family:var(--font-head);line-height:1;color:var(--navy-800)}
.hero-badge span{font-size:.82rem;color:var(--ink-3);line-height:1.3}
@media (max-width:900px){.hero-badge{left:auto;right:1rem}}
.trust-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.75rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-full);padding:.45rem .95rem;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.pill svg{width:1.05em;height:1.05em;color:var(--navy-600);flex:none}

/* Page banner ------------------------------------------------------------ */
.banner{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#fff;
  padding-block:clamp(2.75rem,6vw,4.5rem);text-align:center}
.banner h1{color:#fff;margin-bottom:.4rem}
.banner p{color:#b7d7dd;max-width:60ch;margin-inline:auto}
.crumb{font-size:.85rem;color:#9fc9d1;margin-bottom:.85rem}
.crumb a{color:#cfe9ed}

/* Grid + cards ----------------------------------------------------------- */
.grid{display:grid;gap:1.25rem}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--navy-100)}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card-ico{width:52px;height:52px;border-radius:var(--r);background:var(--navy-50);
  color:var(--navy-700);display:grid;place-items:center;margin-bottom:1.1rem}
.card-ico svg{width:26px;height:26px}
.card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;
  font-weight:650;font-size:.92rem;text-decoration:none}
.card-link::after{content:"→";transition:transform .16s}
.card:hover .card-link::after{transform:translateX(4px)}

.stat{text-align:center;padding:1.5rem 1rem}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(2rem,4vw,2.9rem);
  color:var(--navy-600);line-height:1}
.stat span{font-size:.9rem;color:#b7d7dd}

/* Split feature ---------------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split img{border-radius:var(--r-lg);box-shadow:var(--shadow-2);object-fit:cover;width:100%}
.ticks{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2)}
.ticks svg{width:1.35em;height:1.35em;color:var(--navy-600);flex:none;margin-top:.1em}

/* Team ------------------------------------------------------------------- */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .18s,box-shadow .18s}
.doc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.doc img{aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--bg-3)}
.doc-body{padding:1.35rem}
.doc-body h3{margin-bottom:.15rem}
.doc-role{color:var(--navy-700);font-weight:650;font-size:.9rem;margin-bottom:.5rem}
.doc-reg{font-size:.8rem;color:var(--ink-3)}

/* Reviews ---------------------------------------------------------------- */
.stars{display:flex;gap:.15rem;color:#f5a623}
.stars svg{width:1.05rem;height:1.05rem}
.review-card blockquote{margin:0;font-size:1.02rem;color:var(--ink-2);line-height:1.6}
.review-card footer{display:flex;align-items:center;gap:.75rem;margin-top:auto;
  border-top:1px solid var(--line-2);padding-top:1rem}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--navy-100);color:var(--navy-800);
  display:grid;place-items:center;font-weight:700;flex:none}
.review-card cite{font-style:normal;font-weight:650;display:block;font-size:.95rem}
.review-card small{color:var(--ink-3);font-size:.8rem}

/* Gallery ---------------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-3);
  position:relative;cursor:zoom-in;aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:1.5rem .9rem .8rem;font-size:.85rem;
  color:#fff;background:linear-gradient(transparent,rgba(11,36,56,.85))}
.lightbox{position:fixed;inset:0;background:rgba(4,27,31,.94);z-index:200;display:none;
  place-items:center;padding:1.5rem}
.lightbox.open{display:grid}
.lightbox img{max-height:86vh;width:auto;border-radius:var(--r);box-shadow:var(--shadow-3)}
.lightbox button{position:absolute;top:1.25rem;right:1.25rem;width:46px;height:46px;
  border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.26)}

/* FAQ -------------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.75rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--navy-100);box-shadow:var(--shadow-1)}
.faq summary{cursor:pointer;padding:1.15rem 1.35rem;font-weight:650;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--navy-600);line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--navy-50)}
.faq .faq-body{padding:0 1.35rem 1.25rem;color:var(--ink-2)}
.faq .faq-body p:last-child{margin:0}

/* Forms + booking -------------------------------------------------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-1)}
.field{margin-bottom:1.15rem}
.field label,.legend{display:block;font-weight:650;font-size:.93rem;margin-bottom:.45rem;color:var(--ink)}
.req{color:var(--err)}
.hint{font-size:.82rem;color:var(--ink-3);margin-top:.35rem}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.8rem .95rem;
  transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-600);box-shadow:var(--ring)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--err)}
.err-msg{color:var(--err);font-size:.83rem;margin-top:.35rem;display:none;font-weight:600}
.err-msg.show{display:block}
fieldset{border:none;margin:0 0 1.15rem;padding:0}
.phone-wrap{display:flex}
.phone-wrap .cc{display:grid;place-items:center;padding:0 .85rem;background:var(--bg-2);
  border:1.5px solid var(--line);border-right:none;border-radius:var(--r-sm) 0 0 var(--r-sm);
  font-weight:650;color:var(--ink-2);font-size:.95rem}
.phone-wrap input{border-radius:0 var(--r-sm) var(--r-sm) 0}

.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--line);
  border-radius:var(--r-full);padding:.6rem 1.05rem;cursor:pointer;font-size:.92rem;
  font-weight:600;color:var(--ink-2);transition:all .15s;user-select:none}
.chip span:hover{border-color:var(--navy-500);background:var(--navy-50)}
.chip input:checked + span{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--navy-600);outline-offset:2px}
.chip input:disabled + span{opacity:.35;cursor:not-allowed;text-decoration:line-through}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.55rem}
.slots .chip span{justify-content:center;padding:.7rem .5rem;width:100%;font-variant-numeric:tabular-nums}
.closed-note{background:var(--sand-100);border:1px solid #e6d9a8;color:#6b5410;
  border-radius:var(--r-sm);padding:.85rem 1rem;font-size:.9rem;font-weight:600}

.summary{background:var(--navy-50);border:1px solid var(--navy-100);border-radius:var(--r);
  padding:1.25rem;margin-bottom:1.25rem}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.95rem}
.summary dt{color:var(--ink-3);font-weight:600}
.summary dd{margin:0;font-weight:650;color:var(--navy-900)}

.steps{display:flex;gap:.5rem;list-style:none;margin:0 0 2rem;padding:0;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:650;color:var(--ink-3)}
.steps li::before{content:counter(s);counter-increment:s;width:26px;height:26px;border-radius:50%;
  background:var(--line-2);color:var(--ink-3);display:grid;place-items:center;font-size:.8rem}
.steps{counter-reset:s}
.steps li[data-done]::before{background:var(--navy-600);color:#fff;content:"✓"}
.steps li[data-done]{color:var(--navy-800)}

.alert{border-radius:var(--r);padding:1.1rem 1.25rem;font-size:.95rem;margin-bottom:1.25rem;
  border:1px solid;display:flex;gap:.75rem;align-items:flex-start}
.alert svg{width:1.3em;height:1.3em;flex:none;margin-top:.15em}
.alert-info{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy-900)}
.alert-ok{background:#eaf7ef;border-color:#bfe4cd;color:#0d5c33}
.alert p:last-child{margin:0}

/* Footer ----------------------------------------------------------------- */
.site-foot{background:var(--navy-900);color:#a8ccd3;padding:clamp(3rem,6vw,4.5rem) 0 0;font-size:.95rem}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1fr 1fr 1.2fr}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{color:#fff;font-family:var(--font-body);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-foot a{color:#a8ccd3;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-brand .brand-name{color:#fff}
.foot-brand p{color:#7fb0ba;font-size:.92rem;max-width:34ch}
.socials{display:flex;gap:.6rem;margin-top:1.25rem}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;transition:background .15s}
.socials a:hover{background:var(--navy-600)}
.socials svg{width:19px;height:19px;color:#fff}
.foot-bar{border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:.85rem;color:#7fb0ba}

/* Sticky mobile action bar ----------------------------------------------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(11,36,56,.1);
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));gap:.5rem}
.mobile-bar .btn{flex:1;padding:.85rem .5rem;font-size:.92rem}
@media (max-width:760px){
  .mobile-bar{display:flex}
  body{padding-bottom:76px}
}

/* Map -------------------------------------------------------------------- */
.map-frame{border:0;width:100%;aspect-ratio:16/10;border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);background:var(--bg-3);min-height:320px}

/* Utility ---------------------------------------------------------------- */
.hide{display:none!important}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Live Open / Closed Pulse Indicator ------------------------------------ */
.pulse-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 2s infinite;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.pulse-dot.closed {
  background: #94a3b8;
  animation: none;
  box-shadow: none;
}
@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Before & After Smile Transformation Slider ----------------------------- */
.ba-section {
  position: relative;
}
.ba-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.ba-tab {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.6rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: var(--font-body);
}
.ba-tab:hover {
  border-color: var(--navy-500);
  background: var(--navy-50);
  color: var(--navy-800);
}
.ba-tab.active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.ba-container {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  user-select: none;
  overflow: hidden;
  background: var(--bg-3);
  touch-action: pan-y;
  cursor: ew-resize;
}
.ba-img-after {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* The before layer stays FULL SIZE and is revealed by clipping, so the image
   never moves or rescales as the handle is dragged. Sizing the wrapper to a
   percentage instead makes its child image shrink with it, which reads as the
   photo zooming rather than a wipe. */
.ba-img-before-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: inset(0 50% 0 0);
}
.ba-img-before-wrap .ba-img-before {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  z-index: 10;
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(11,36,56,0.35);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.ba-handle-btn svg {
  width: 22px;
  height: 22px;
}
.ba-badge {
  position: absolute;
  bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
  pointer-events: none;
}
.ba-badge.before {
  left: 1.25rem;
  background: rgba(11,36,56,0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.ba-badge.after {
  right: 1.25rem;
  background: rgba(31,122,77,0.9);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.ba-meta {
  padding: 1.35rem 1.75rem;
  background: #fff;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.ba-meta-info h3 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  color: var(--navy-900);
}
.ba-meta-info p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.ba-case-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--navy-50);
  color: var(--navy-700);
}
.ba-note {
  max-width: 860px;
  margin: 1.25rem auto 0;
  font-size: 0.86rem;
  color: var(--ink-3);
  text-align: center;
}

/* Google Reviews Showcase & Carousel ------------------------------------- */
.google-summary-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--shadow-1);
  margin-bottom: 2.25rem;
}
.google-rating-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.google-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}
.google-logo-badge svg {
  width: 28px;
  height: 28px;
}
.google-score {
  font-size: 2.75rem;
  font-weight: 700;
  font-family: var(--font-head);
  line-height: 1;
  color: var(--navy-900);
}
.google-score-details {
  display: flex;
  flex-direction: column;
}
.google-stars {
  display: flex;
  gap: 0.2rem;
  color: #f59e0b;
  margin-bottom: 0.2rem;
}
.google-stars svg {
  width: 1.2rem;
  height: 1.2rem;
}
.google-meta {
  font-size: 0.88rem;
  color: var(--ink-2);
  font-weight: 600;
}
.google-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ok);
  font-size: 0.8rem;
  font-weight: 700;
}
.reviews-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}
.review-filter-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.45rem 1rem;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.review-filter-btn:hover {
  border-color: var(--navy-500);
  background: var(--navy-50);
}
.review-filter-btn.active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.reviews-carousel-wrap {
  position: relative;
  overflow: hidden;
}
.reviews-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1rem;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar {
  display: none;
}
.review-card {
  flex: 0 0 min(370px, 86vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--navy-100);
}
.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.review-treatment-tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--navy-50);
  color: var(--navy-700);
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy-800);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: var(--shadow-1);
}
.carousel-btn:hover {
  background: var(--navy-700);
  color: #fff;
  border-color: var(--navy-700);
  transform: scale(1.05);
}
.carousel-btn svg {
  width: 20px;
  height: 20px;
}

/* Floating Quick Conversion Button (Desktop & Tablet) ------------------- */
.floating-quick-bar {
  position: fixed;
  bottom: 2rem;
  right: 1.75rem;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-3);
  transition: transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
}
.floating-btn:hover {
  transform: scale(1.08);
}
.floating-wa {
  background: #25d366;
  color: #fff;
}
.floating-call {
  background: var(--navy-700);
  color: #fff;
}
.floating-btn svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 760px) {
  .floating-quick-bar { display: none; }
}