/* ==========================================================================
   Dinçalya Smile — global stylesheet
   Design reference: 2613px wide comps  ->  1560px viewport (scale 0.6)
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#020b12;          /* brand near-black          */
  --ink-2:#0b141c;
  --gold:#c2a363;
  --gold-line:#c58e34;   /* 1px card outlines, measured off the comp */
  --gold-dark:#a8894b;
  --green:#13b550;
  --green-dark:#0f9a43;
  /* WhatsApp's own green — brighter than the site green, and only ever used for it */
  --wa:#25d366;
  --wa-dark:#1ebe5a;
  --purple:#4b0a64;
  --purple-dark:#3b0850;
  --clock:#180d1e;
  --navy:#0a1a28;         /* footer / dark sections    */
  --text:#111417;
  --muted:#5b6169;
  --line:#e3e5e8;
  --white:#fff;

  /* the header on a wide screen: a 142px logo row (75px logo + 31/36 padding)
     above a 44px menu bar. The bar is what stays on the edge when the page
     scrolls, so everything that parks itself at the top measures from it. */
  --header-top:142px;
  --nav-h:44px;

  --container:1200px;
  --wide:1500px;      /* tech cards + benefits strip — 93.6% of the comp   */
  --doctors:1410px;   /* doctors band — 87.4% of the comp                  */
  --gallery:1550px;   /* smile gallery — 97.2% of the comp                 */
  --blog:1300px;      /* blog row — 80.3% of the comp                      */

  --f-sans:"Roboto","Helvetica Neue",Arial,sans-serif;
  --f-display:"Poppins","Roboto",sans-serif;
  --f-cond:"Roboto Condensed","Roboto",sans-serif;
  --f-serif:"Playfair Display",Georgia,serif;

  --header-h:186px;

  /* diagonal “north-east” arrow used inside buttons */
  --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5 17.5 6.5'/%3E%3Cpath d='M9 6.5h8.5V15'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* an in-page jump lands below the pinned menu bar, not under it */
html{scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.55;
  color:var(--text);
  background:#fff;
  overflow-x:clip;          /* not hidden: hidden would break position:sticky */
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.container-wide{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:24px}
.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}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:237px;min-height:48px;padding:0 15px 0 28px;border-radius:6px;
  font-size:18px;font-weight:600;letter-spacing:.1px;line-height:1;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
/* also used by .tcard__more, so it is deliberately not scoped to .btn */
.btn__arrow{
  flex:none;width:26px;height:26px;font-size:0;line-height:0;
  background:currentColor;
  -webkit-mask:var(--arrow-ne) center/contain no-repeat;
  mask:var(--arrow-ne) center/contain no-repeat;
}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-dark)}
.btn--purple{background:var(--purple);color:#fff}
.btn--purple:hover{background:var(--purple-dark)}
.btn--gold{background:var(--gold);color:var(--ink);justify-content:center;padding-inline:26px;
  font-weight:700;letter-spacing:.4px}
.btn--gold:hover{background:var(--gold-dark)}
.btn--center{margin-inline:auto}
.btn-row{display:flex;flex-wrap:wrap;gap:22px}
.btn-wrap{display:flex;justify-content:center}

/* “Get Price Now” appears many times, always centred on its own row */
/* the repeated Get-Price button: it used to sit in a 116px band of its own,
   between two sections that were each already padded, so the page read as a
   run of buttons with content in between. The band is now the button plus a
   breath. */
.cta-row{padding:16px 0;display:flex;justify-content:center}

/* ---------- section furniture ---------- */
.section{padding:52px 0}
.section-head{margin-bottom:44px}
.section-title{font-size:52px;line-height:1.12;font-weight:700;letter-spacing:-.5px}
.section-sub{margin-top:10px;font-size:19px;color:#3d434a}
.section-title--display{font-family:var(--f-display);font-weight:700}
.center{text-align:center}

/* ==========================================================================
   Header
   ========================================================================== */
/* the menu comes along for the ride: the header is pinned, but parked one
   logo row up, so the brand and the socials scroll away with the page and
   only the menu bar is left on the edge — the row anyone actually reaches
   back for. Nothing moves at the top of the page; the bar arrives after the
   first 142px, which is the row it replaced. */
.site-header{background:var(--ink);color:#fff;position:sticky;
  top:calc(var(--header-top) * -1);z-index:40}
.site-header .container{max-width:1348px}   /* the header runs wider than the page container */
.header-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 36px}
.brand{display:inline-block}
.brand img{width:280px;height:auto}
.header-tools{display:flex;align-items:center;gap:26px}
.socials{display:flex;align-items:center;gap:22px}
.socials a{color:var(--gold);display:grid;place-items:center;transition:opacity .18s}
.socials a:hover{opacity:.7}
.socials svg{width:22px;height:22px;fill:currentColor}
.btn-appointment{
  display:inline-flex;align-items:center;justify-content:center;
  height:50px;padding:0 26px;border-radius:4px;background:var(--gold);color:var(--ink);
  font-weight:700;font-size:15px;letter-spacing:.4px;transition:background-color .18s;
}
.btn-appointment:hover{background:var(--gold-dark)}

.header-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:2px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  display:inline-flex;align-items:center;height:42px;padding:0 26px;border-radius:3px;
  font-size:16px;color:#fff;transition:background-color .18s,color .18s;white-space:nowrap;
}
.nav a:hover{background:rgba(194,163,99,.22)}
.nav a[aria-current="page"]{background:var(--gold);color:var(--ink);font-weight:500}
.lang{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(255,255,255,.55);
  border-radius:3px;font-size:12px;color:#fff}
.lang{cursor:pointer;transition:border-color .18s}
.lang:hover{border-color:#fff}
.lang__flag{display:grid;place-items:center;width:26px;height:17px;border-radius:2px;overflow:hidden}
.lang img,.lang svg{width:26px;height:17px;border-radius:2px}
/* three bars that fold into a cross — the only chrome the open menu needs */
.nav-toggle{display:none;position:relative;width:44px;height:44px;place-items:center;color:#fff;
  border-radius:50%;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.nav-toggle__bars{position:relative;display:block;width:25px;height:2px;border-radius:2px;
  background:currentColor;transition:background-color .16s ease}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;
  width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
/* closed, the bars sit on the header and need no frame. Open, the same 44px
   square is the only way out of a full-screen sheet, so it has to read as a
   button — but in the sheet's own language, which is a gold hairline, not a
   grey disc: the appointment button below it is drawn exactly this way. The
   cross itself goes white, the colour the eye was already following before
   the sheet opened, and draws in a size smaller so the ring has room. */
.nav-toggle[aria-expanded="true"]{color:#fff;background:transparent;
  box-shadow:inset 0 0 0 1px rgba(194,163,99,.5)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{width:19px;left:3px;height:1.5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}

/* the menu's own block of actions — only ever shown inside the mobile overlay */
.nav__foot{display:none}
/* Treatments carries a disclosure on phones; on desktop it is only a link */
.nav__group{display:contents}
.nav__more,.nav__sub{display:none}

/* ==========================================================================
   Hero  (home)
   ========================================================================== */
.hero{position:relative;background:var(--ink) url("../img/hero.jpg") center/cover no-repeat;
  aspect-ratio:2613/1091;min-height:560px;max-height:760px;display:flex;align-items:flex-end;
  overflow:hidden}
.hero .container{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:end;
  padding-bottom:clamp(48px,11%,170px);width:100%}
.hero-copy{padding-bottom:0}
.hero-eyebrow{font-family:var(--f-cond);font-size:30px;font-weight:700;letter-spacing:.2px;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-title{font-family:var(--f-cond);font-size:64px;line-height:1.02;font-weight:700;color:#fff;
  margin-top:2px;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.hero-copy .btn-row{margin-top:30px;gap:22px}
.hero-copy .btn{min-width:237px}

/* quick-offer form — used in the hero and in dark panels */
.offer{background:rgba(2,11,18,.6);padding:34px 30px 40px;width:100%;max-width:470px}
.hero__panel{position:relative;background:rgba(2,11,18,.6);padding:42px 30px 28px 32px;
  margin-right:40px}
.hero__panel::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:100vw;
  background:rgba(2,11,18,.6);pointer-events:none}
.hero .offer{max-width:none;background:none;padding:0}
.offer--panel{background:var(--ink) url("../img/bg-offer.jpg") center/cover no-repeat}
.offer__title{font-family:var(--f-display);font-size:34px;line-height:1.18;font-weight:600;color:#fff}
.offer form{margin-top:22px;display:grid;gap:14px}
.offer input{
  width:100%;height:46px;padding:0 16px;border:0;border-radius:2px;background:#fbfbfb;
  font-size:14px;color:#222;
}
.offer input::placeholder{color:#8b9096}
.offer .field-phone{position:relative;display:flex;align-items:center;background:#fbfbfb;border-radius:2px;height:46px}
.offer .field-phone .dial{display:flex;align-items:center;gap:8px;height:100%;
  padding:0 12px 0 14px;margin-right:10px;border-right:1px solid #e4e6e9;border-radius:2px 0 0 2px;
  font-size:14px;font-weight:500;color:#222;white-space:nowrap;cursor:pointer;
  transition:background-color .15s}
.offer .field-phone .dial:hover{background:#f0f1f3}

/* flag chip — one 3:2 box for every flag, hairline so pale flags keep an edge */
.dial__flag,.lang__flag{position:relative;flex:none;display:block;border-radius:2px;overflow:hidden}
.dial__flag{width:24px;height:16px}
.lang__flag{width:26px;height:17px}
.dial__flag svg,.lang__flag svg{width:100%;height:100%;display:block}
.dial__flag::after,.lang__flag::after{content:"";position:absolute;inset:0;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.lang__flag::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

.dial__code{font-variant-numeric:tabular-nums}
.dial__caret,.lang__caret{flex:none;display:block;width:10px;transition:transform .18s}
.dial__caret{color:#8b9096}
.dial__caret svg,.lang__caret svg{width:10px;height:6px;display:block}
[aria-expanded="true"] .dial__caret,[aria-expanded="true"] .lang__caret{transform:rotate(180deg)}

/* the drop-down shared by the phone-code and language buttons */
.picker{position:absolute;top:calc(100% + 6px);z-index:60;min-width:212px;max-height:262px;overflow:auto;
  padding:6px;background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 18px 40px rgba(2,11,18,.22)}
.field-phone .picker{left:0}
.header-bar .picker{right:0;top:calc(100% + 4px);min-width:172px}
.picker__opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:4px;
  font-size:14px;font-weight:400;color:#222;text-align:left;transition:background-color .15s}
.picker__opt:hover{background:#f1f2f4}
.picker__opt[aria-selected="true"]{background:rgba(194,163,99,.18);font-weight:700}
.picker__flag{position:relative;flex:none;display:block;width:24px;height:16px;border-radius:2px;
  overflow:hidden}
.picker__flag svg{width:100%;height:100%;display:block}
.picker__flag::after{content:"";position:absolute;inset:0;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.picker__name{flex:1}
.picker__code{color:var(--muted)}
.offer .field-phone input{height:44px;padding-left:6px}
.offer button[type="submit"]{
  height:46px;background:var(--gold);color:var(--ink);font-weight:700;font-size:13px;
  letter-spacing:1.2px;border-radius:2px;transition:background-color .18s;
}
.offer button[type="submit"]:hover{background:var(--gold-dark)}

/* ==========================================================================
   Opening-hours strip
   ========================================================================== */
.hours{background:var(--clock);color:#cfc4d6;padding:22px 0 18px}
.hours .container{max-width:none;padding-inline:34px}
.hours__status{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:2.4px;
  text-transform:uppercase;color:#b9a9c2}
.hours__dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.hours__time{font-size:44px;line-height:1.1;font-weight:300;color:#fff;letter-spacing:-1px;margin-top:2px}
.hours__date{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:#8d7f96}
.hours__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hours__last{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#b9a9c2}
/* the scale reads bottom-up: ticks rise off the rule, labels sit under it */
.hours__scale{margin-top:18px}
.hours__track{position:relative;height:15px;border-bottom:1px solid rgba(194,163,99,.28)}
.hours__tick{position:absolute;bottom:0;width:1px;height:7px;background:rgba(194,163,99,.5)}
.hours__tick.is-strong{height:15px;background:rgba(226,208,165,.6)}   /* the 4-hour marks */
.hours__fill{position:absolute;bottom:-1px;height:2px;background:var(--gold)}
.hours__now{position:absolute;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--gold);
  transform:translateX(-50%)}
.hours__labels{position:relative;height:17px;margin-top:6px;font-size:11px;font-style:italic;
  letter-spacing:1px;color:#8d7f96}
.hours__labels span{position:absolute;transform:translateX(-50%)}
.hours__labels span.is-strong{color:#e6d4a5}
.hours__foot{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:#7d7086}

/* inner-page banner */
.page-banner{position:relative;background:var(--ink) url("../img/hero.jpg") center 73%/cover no-repeat;
  min-height:274px;height:16.4vw;display:flex;align-items:center}
/* the height tracks the width, so the crop stays put on every screen; below
   1400px the band is taller than the photo slice, so it needs a lower anchor */
@media (max-width:1400px){.page-banner{background-position:center 82%}}
/* on the two article pages the headline inside the piece is the page's own
   h1, so the band carries a label instead — it still looks the same */
.page-banner h1,.page-banner__title{position:relative;z-index:2;font-size:38px;font-weight:700;
  color:#fff;letter-spacing:-.3px}
.page-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(2,11,18,.45) 0%,rgba(2,11,18,0) 40%)}
.hours--compact{padding:8px 0 11px}
.hours--compact .hours__time,.hours--compact .hours__status{display:none}

/* ==========================================================================
   Intro + clinic collage
   ========================================================================== */
/* the intro runs on a wider measure than the rest of the site — the comp puts
   the copy on a 640px column, which is what makes the paragraphs break where
   they do; --container also feeds the collage bleed further down             */
.intro{padding:56px 0 34px;overflow-x:clip;--container:1320px}
.intro__grid{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:60px;align-items:start}
.intro__title{font-family:var(--f-serif);font-style:italic;font-size:63px;line-height:1.1;
  font-weight:500;color:#2b1b3d;letter-spacing:-.5px}
.intro__body{margin-top:40px;display:grid;gap:23px;font-size:19px;line-height:1.22;
  color:#2f343a;max-width:640px}
.intro__quote{font-family:var(--f-serif);font-style:italic;font-size:26px;color:#2b1b3d}
.intro .btn-row{margin-top:36px}
/* the collage breaks out of the container and runs to the right edge of the
   viewport — `width:100%` here would over-constrain the box and the negative
   margin would simply be dropped, so the width is left to stretch on its own */
.collage{position:relative;aspect-ratio:1306/820;
  margin-right:min(0px,calc((var(--container) - 100vw)/2 - 24px))}
.collage img{position:absolute;object-fit:cover;display:block}
/* a (certificates) sits behind c (signage); b (lounge) floats in front with a
   white gutter, exactly as in the comp                                        */
.collage__a{left:13.5%;top:0;width:43.1%;height:31.3%;z-index:1}
.collage__b{left:0;top:31.3%;width:55.4%;height:68.7%;z-index:3;
  border:8px solid #fff}
.collage__c{left:55.8%;top:0;width:44.2%;height:89.1%;z-index:2}


/* ==========================================================================
   Technology section
   ========================================================================== */
.tech-intro{padding:40px 0 30px;text-align:center}
/* on the inner pages the intro heads the split band, so it drops to the same
   wide measure and ranges left with it                                      */
.tech-intro:has(+ .tech-split){text-align:left;--container:1500px}
.tech-intro:has(+ .tech-split) h2{font-size:46px}
.tech-intro:has(+ .tech-split) p{margin-inline:0;font-size:15.5px}
.tech-intro h2{font-family:var(--f-display);font-size:62px;font-weight:700;letter-spacing:-.8px;color:#111}
.tech-intro p{margin:16px auto 0;max-width:820px;font-size:18px;color:#3d434a;line-height:1.6}
.tech{background:#000;padding:30px 0 34px}
.tech__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:stretch}
/* the three technology cards ship as finished artwork on the home page */
.tech-shot{display:block;width:100%;height:100%;object-fit:contain;border-radius:16px}
/* each technology card is a button that opens its clip in the gallery
   lightbox; the artwork carries its own frame, so the button adds nothing
   but the hit area and the focus ring                                      */
.tech-play{display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:pointer;border-radius:16px}
.tech-card{border:1px solid var(--gold-line);border-radius:16px;padding:32px 34px 26px;
  display:flex;flex-direction:column;min-height:640px;color:#fff}
.tech-card--left{padding-left:60px}   /* comp: content sits 101/2613 in from the edge */
.tech-card__pill{align-self:flex-start;border:1px solid var(--gold);border-radius:999px;
  padding:6px 18px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.tech-card__logo{margin-top:22px;height:38px;width:auto}
.tech-card h3{font-family:var(--f-display);font-size:44px;font-weight:600;line-height:1;margin-top:12px}
.tech-card__sub{font-family:var(--f-display);font-size:21px;color:var(--gold);margin-top:6px}
.tech-card__text{margin-top:18px;font-size:14px;line-height:1.5;color:#e7e9ec}
.tech-card__media{margin-top:auto;padding-block:22px;display:grid;place-items:center}
.tech-card__media img{max-height:300px;width:auto}
.tech-card__foot{display:flex;justify-content:center;padding-top:6px}
.tech-card__foot img{height:52px;width:auto}
.tech-card--center{text-align:center}
.tech-card--center .tech-card__title{font-family:var(--f-display);font-size:26px;letter-spacing:.5px;
  text-transform:uppercase;color:#fff}
.tech-card--center .rule{width:88px;height:3px;background:var(--gold);margin:12px auto 0;border-radius:2px}
.tech-flow{display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;color:#fff;
  flex-wrap:wrap}
.tech-flow .g{color:var(--gold)}
.tech-flow .r{color:#e8323c;font-weight:700}
.tech-card--right{text-align:center}
.tech-card--right .tech-card__logo{margin-inline:auto}
.tech-card--right h4{font-family:var(--f-display);font-size:21px;color:var(--gold);margin-top:16px;font-weight:500}

.features{background:#fff;padding:22px 0 8px}
.features__inner{background:#050c12;border-radius:14px;padding:26px 34px}
.features__row{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{display:flex;align-items:center;gap:16px;padding:6px 22px;color:#fff}
.feature+.feature{border-left:1px solid rgba(255,255,255,.14)}
.feature img{width:46px;height:46px;flex:none}
.feature h4{font-size:15px;font-weight:700}
.feature p{font-size:12px;line-height:1.4;color:#c8ccd1;margin-top:3px}

/* ==========================================================================
   How we work
   ========================================================================== */
.steps__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:56px;margin-top:56px;text-align:center}
.step__icon{height:112px;display:grid;place-items:center}
.step__icon img{max-height:104px;width:auto}
/* 20px, not 22: the widest label is 17 characters and the column is 186px at
   the 56px gap — this keeps every heading on one line with room to spare  */
.step h3{margin-top:32px;font-size:20px;font-style:italic;font-weight:700;color:#111}
.step p{margin-top:16px;font-size:17px;line-height:1.5;color:#3d434a}

/* ==========================================================================
   Treatments strip
   ========================================================================== */
.treatments{padding:56px 0 22px;overflow:hidden;--container:1320px}
.treatments__grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:60px;align-items:start}
.treatments__grid>*,.reviews__grid>*{min-width:0}
.treatments__intro p{margin-top:26px;font-size:19px;line-height:1.45;color:#2f343a}
.treatments__intro .btn-row{margin-top:36px;flex-direction:column;align-items:flex-start;gap:16px}
.treatments__intro .btn{width:237px}
.tcards{display:flex;gap:24px}
.tcard{flex:0 0 430px;background:#000;color:#fff;display:flex;flex-direction:column;overflow:hidden}
.tcards--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px}
.tcards--grid .tcard{flex:none}
.tcard__img{aspect-ratio:613/537;object-fit:cover;width:100%}
.tcard__body{padding:18px 24px 24px;flex:1}
.tcard__body h3{font-size:22px;font-weight:700}
.tcard__body p{margin-top:10px;font-size:15px;line-height:1.45;color:#cfd3d8}
.tcard__more{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--gold);color:var(--ink);padding:16px 26px;font-size:18px;font-weight:500;
  transition:background-color .18s}
.tcard__more:hover{background:var(--gold-dark)}
.dots{display:flex;gap:9px;justify-content:center;padding-top:22px}
.dots button{width:14px;height:14px;background:var(--purple);border-radius:2px;opacity:.85}
.dots button[aria-current="true"]{background:var(--ink);opacity:1}
.dots--light button{background:#8b2fb5}
.dots--light button[aria-current="true"]{background:#fff}
.treatments .dots{justify-content:flex-start;padding-left:0}

/* ==========================================================================
   Our doctors (dark carousel band)
   ========================================================================== */
.doctors{position:relative;background:#050f18;color:#fff;overflow:visible}
.doctors__stage{position:relative;isolation:isolate;width:100%;aspect-ratio:2613/1137;min-height:520px;
  background:#050f18 url("../img/bg-doctors.jpg") center top/100% 100% no-repeat}
/* Our Teams — the same stage in daylight -----------------------------------
   Layout, deck, spotlight and breakpoints all come from .doctors; only the
   room changes. On white the cut-outs have nothing to stand on, so the ground
   is drawn: a gold hairline exactly on the floor (deck top 15% + its 62%) and
   a pool of warm light resting on it.
   Nobody is dimmed here. On the dark stage the spotlight reads by taking
   light away from the others; on white that only makes silhouettes, so the
   effect is carried entirely by the light itself — the centred portrait
   steps forward and the pool under it comes up.                            */
.doctors--teams{background:#fff;color:var(--text)}
.doctors--teams .doctors__stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,0) calc(77% - 1px),var(--gold) calc(77% - 1px),
      var(--gold) 77%,rgba(0,0,0,0) 77%),
    radial-gradient(44% 18% at 50% 77%, rgba(194,163,99,.20) 0%, rgba(194,163,99,0) 100%),
    #fff;
}
.doctors--teams .doctors__head h2{color:var(--ink)}
.doctors--teams .doctors__head p{color:var(--muted)}
.doctors--teams .doctors__deck .slider__slide::before{
  background:radial-gradient(closest-side,rgba(194,163,99,.42),rgba(194,163,99,0) 74%)}
.doctors--teams .doctors__deck .doc__name b{color:var(--ink)}
.doctors--teams .doctors__deck .doc__name span{color:var(--muted)}
/* same purple as the dark band; only the current one changes, because there
   it is picked out in white and white is invisible on this ground           */
.doctors--teams .doctors__deck .dots button[aria-current="true"]{background:var(--purple)}
.doctors__head,
.doctors__deck{max-width:var(--doctors);margin-inline:auto;padding-inline:24px}
.doctors__head{position:absolute;left:0;right:0;top:4.5%;z-index:2;text-align:right;
  pointer-events:none}
.doctors__head h2{font-family:var(--f-display);font-size:clamp(26px,2.6vw,40px);font-weight:700;color:var(--gold)}
.doctors__head p{margin-top:6px;font-size:clamp(12px,1vw,15px);color:#dfe3e7}
.badge-10{position:absolute;left:6.6%;top:-7%;width:20.7%;z-index:6;pointer-events:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.doctors__doc{position:absolute;z-index:3}
.doctors__dots{position:absolute;left:0;right:0;top:82%;z-index:2}
.doctors__dots .dots{padding:0}

/* about-page doctor grid — the same lineup as the team page, five up so the
   ten portraits fill two complete rows and each gold rule runs unbroken */
.team{padding:20px 0 10px}
.team__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:46px 0;align-items:start}
.team figure{margin:0;display:flex;flex-direction:column;padding-inline:14px;text-align:left}
.team img:not(.badge-10){display:block;width:100%;height:auto}
.team figcaption{padding-top:14px;border-top:1px solid var(--gold)}
.team h3{font-family:var(--f-display);font-size:15px;font-weight:500;line-height:1.32;color:#111}
.team p{margin-top:4px;font-size:13px;color:var(--muted)}
.team__feature{position:relative}
.team__feature .badge-10{position:absolute;left:0;top:-16px;width:56%;max-width:132px;z-index:2;
  pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.28))}
/* the same line-up appears twice on this page: under Our Doctors it is a
   portrait wall, under Our Teams each card goes to that dentist's page, so
   the whole card is the link — the name answers the way it does on the team
   page, which is where these cards send you */
.team__card{position:relative;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.team__card:hover{transform:translateY(-3px)}
.team__card:hover h3,.team__card:focus-within h3{color:var(--gold-dark)}
.team__go{position:absolute;inset:0;z-index:2}
.team__go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.team__card{transition:none}.team__card:hover{transform:none}}

/* clinic photo wall (about) — the clinic is one room, so the photographs run
   as a single strip instead of a block of squares, and the strip walks itself
   along a step at a time: the far end of the wall is never left behind a
   scrollbar nobody drags. It stops the moment a pointer, a finger or the
   keyboard is on it, and it never starts at all under reduced motion. */
.clinic-grid{display:flex;gap:34px;margin-top:38px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.clinic-grid::-webkit-scrollbar{display:none}
.clinic-grid img{flex:0 0 calc((100% - 68px)/3);width:auto;min-width:0;
  aspect-ratio:1;object-fit:cover;scroll-snap-align:start}

/* ==========================================================================
   Smile gallery
   ========================================================================== */
.gallery{padding:36px 0 8px}
.gallery .dots{padding-top:22px}
.gallery-bleed{max-width:var(--gallery);margin-inline:auto;padding-inline:16px}

/* ==========================================================================
   Blog posts (dark band)
   ========================================================================== */
.blog{background:#040d16 url("../img/bg-blog.jpg") center/cover no-repeat;padding:46px 0 40px;color:#fff}
.blog .container-wide{max-width:var(--blog)}
.blog__head{text-align:center;margin-bottom:34px}
.blog__head h2{font-size:40px;font-weight:700}
.blog__head p{margin-top:8px;font-size:15px;color:#dbdfe4}
.post img{width:100%;aspect-ratio:538/370;object-fit:cover;border-radius:9px}
.post h3{margin-top:14px;font-size:17px;font-style:italic;font-weight:700}
.post p{margin-top:12px;font-size:12px;line-height:1.5;color:#c9ced4}
.post a.more{display:inline-block;margin-top:18px;font-size:12.5px;color:#e6eaee}
.post a.more:hover{color:var(--gold)}
.blog__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px}
.blog__foot .dots{padding:0}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{padding:56px 0;--container:1320px}
.reviews__grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px}
.reviews__aside h2{font-size:50px;font-weight:700;letter-spacing:-.4px}
.reviews__stars{margin-top:14px;height:34px;width:auto}
.reviews__marks{display:flex;align-items:center;gap:18px;margin-top:20px}
.reviews__marks img{height:44px;width:auto}
.reviews__marks .sep{width:1px;height:38px;background:var(--line)}
.reviews__aside p{margin-top:18px;font-size:18px;color:#3d434a}
.reviews__aside .btn{margin-top:28px}
/* the 3-up layout comes from the slider's --per; this wrapper must stay a
   plain block or the whole carousel gets squeezed into one grid track        */
.reviews__list{border-left:1px solid var(--line);padding-left:56px}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.review__top h3{font-size:19px;font-weight:700}
.review__top img{height:28px;width:auto}
/* the star/Trustpilot marks carry width/height attributes in the markup       */
.review__top svg{width:28px;height:28px}
.review p{margin-top:18px;font-size:18px;line-height:1.55;color:#2f343a}
.reviews__list .dots{justify-content:flex-start;padding-top:8px}

/* ==========================================================================
   FAQ + side offer panel
   ========================================================================== */
.faq-block{padding:20px 0 0}
.faq-block__grid{display:grid;grid-template-columns:minmax(0,1fr) 525px;gap:56px;align-items:start}
/* the panel closes the page, so it runs to the bottom of the section however
   short the accordion beside it is — otherwise a white strip opens above the
   footer and breaks the join                                               */
.faq-block .offer--panel{align-self:stretch}
.faq-block h2{font-size:40px;font-weight:700;letter-spacing:-.4px}
.accordion{margin-top:30px;display:grid;gap:10px}
.acc__item{background:var(--ink);color:#fff;overflow:hidden}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-size:14.5px;font-weight:700;text-align:left;color:#fff}
.acc__btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .22s}
.acc__item.is-open .acc__btn{background:#1b232a}
.acc__item.is-open .acc__btn svg{transform:rotate(180deg)}
.acc__panel{display:none;padding:0 24px 24px;font-size:14px;line-height:1.75;color:#dbdfe4}
.acc__item.is-open .acc__panel{display:block}
/* light accordion (treatment detail / price list) */
.accordion--light .acc__item{background:#fff;border:1px solid #d9c9a8;color:var(--text)}
.accordion--light .acc__btn{color:var(--text)}
.accordion--light .acc__item.is-open .acc__btn{background:#fff}
.accordion--light .acc__panel{color:#3d434a;padding-inline:32px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{position:relative;background:var(--navy) url("../img/bg-footer.jpg") center/cover no-repeat;
  color:#dfe4ea;padding:70px 0 34px;margin-top:-1px}
/* End of page: the offer panel sits directly on the footer and both carry the
   same photograph, which read as two crops meeting at a seam. Anchoring the
   image to the viewport makes both boxes sample one and the same picture, so
   the wireframe runs straight through the join. Which section closes the page
   differs — .faq-block on the home pages, .tech-split on the nine inner ones —
   so this is bound to the panel itself rather than to either section. Above
   1024px only: iOS Safari does not honour a fixed attachment.              */
@media (min-width:1025px){
  .offer--panel,
  .site-footer{
    background:var(--navy) url("../img/bg-footer.jpg") center/cover fixed no-repeat;
  }
}

.site-footer__grid{display:grid;grid-template-columns:minmax(0,300px) repeat(2,minmax(0,190px)) minmax(0,1fr);
  gap:40px}
.footer-brand img.logo{width:266px}
.footer-brand .marks{margin-top:44px;display:grid;gap:32px;justify-items:start}
.footer-brand .marks img{width:auto}
.footer-brand .marks .ht{height:112px}
.footer-brand .marks .cert{width:188px}
.site-footer nav a{display:block;padding:6px 0;font-size:15px;color:#dfe4ea;transition:color .18s}
.site-footer nav a:hover{color:var(--gold)}
.footer-contact p{font-size:15px;line-height:1.6;color:#dfe4ea}
.footer-contact a{display:block;margin-top:18px;font-size:15px}
.footer-contact a:hover{color:var(--gold)}
.footer-contact .tel{margin-top:18px}
.footer-contact .tel a{margin-top:2px}
.footer-col__head{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--gold);letter-spacing:.2px}
.footer-col__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  text-align:left;color:inherit;font:inherit;pointer-events:none}
.footer-col__toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 6px 0 0;opacity:0;
  transition:transform .2s}
.footer-quick{display:none}
.site-footer__bar{display:flex;align-items:center;justify-content:center;gap:40px;
  margin-top:56px;font-size:14px;color:#dfe4ea;position:relative}
.site-footer__bar img{height:28px;width:auto;position:absolute;right:0}

/* ==========================================================================
   Utility bands
   ========================================================================== */
.band-dark{background:var(--ink);color:#fff}
.strip-cta{background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px 34px;margin:38px 0}
.strip-cta h3{font-size:24px;font-weight:700;line-height:1.25}

/* ==========================================================================
   Inner-page technology split
   ========================================================================== */
.tech-split{background:#fff;padding:0;--container:1500px;overflow-x:clip}
.tech-split__grid{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:100px;align-items:stretch}
/* the card breaks out of the container and runs to the left edge of the
   viewport while the form stays on the container line. No width here: with
   one, the negative margin would be over-constrained and simply dropped.   */
.tech-split__card{background:#000;border-radius:0;padding:22px 22px 18px;
  margin-left:min(0px,calc((var(--container) - 100vw)/2 - 24px))}
.tech-split__card .tech-card{border:1px solid var(--gold-line);min-height:auto}
.tech-split__card .tech-card__media img{max-height:230px}
.tech-split__card .dots{padding-top:16px;justify-content:flex-start}
.tech-split .offer{max-width:none;height:100%}

/* ==========================================================================
   Article (treatment detail)
   ========================================================================== */
.article__grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
/* the aside travels with the reader at its own full height — the stops list is
   short enough now that it does not need a scroller of its own */
.article__aside{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.article__aside .offer--light{background:#fff;padding:0;max-width:none}
.article__aside .offer--light .offer__title{font-family:var(--f-display);font-size:19px;
  font-weight:600;color:var(--gold)}
.article__aside .offer--light input,
.article__aside .offer--light .field-phone{background:#fff;border:1px solid #d9dcdf;height:42px}
.article__aside .offer--light .field-phone input{border:0;height:40px}
.toc__label{margin-top:30px;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:#6c727a}
.toc{margin-top:12px;border-left:1px solid var(--line)}
.toc li{padding:0}
.toc a{display:block;padding:9px 16px;font-size:14px;line-height:1.35;color:#2f343a;
  border-left:3px solid transparent;margin-left:-1px;transition:color .18s,border-color .18s}
.toc a:hover{color:var(--gold-dark)}
/* without the script the first stop is marked; with it, the one being read */
.toc li:first-child a{border-left-color:var(--gold);font-weight:500}
.toc--live li:first-child a{border-left-color:transparent;font-weight:400}
.toc--live a.is-current{border-left-color:var(--gold);font-weight:500;color:var(--text)}
.article__aside .btn{margin-top:26px}
.article__body h1{font-size:38px;font-weight:700;letter-spacing:-.4px}
.article__body h2{font-size:34px;font-weight:700;letter-spacing:-.4px;margin-top:44px}
.article__body p{margin-top:20px;font-size:15px;line-height:1.62;color:#2f343a}
.article__body .btn-wrap{margin:34px 0}
.article__body .accordion{gap:12px}

/* ==========================================================================
   Contact page
   ========================================================================== */
.map img{width:100%;height:clamp(340px,42vw,660px);object-fit:cover;display:block}
/* the map is a picture, so nothing about it says it can be opened. One button,
   sitting on it where a map's own controls sit, says what the tap will do. */
.map__link{display:block;position:relative}
/* top right, not bottom right: the offer panel below the map rides up over the
   map's lower corners, and a button half under a black box is worse than none */
.map__open{position:absolute;right:20px;top:20px;
  display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 14px 0 20px;
  border-radius:4px;background:var(--white);color:var(--ink);
  font-family:var(--f-cond);font-size:15px;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(2,11,18,.22);transition:background-color .18s,color .18s}
.map__link:hover .map__open{background:var(--gold);color:var(--ink)}
.map__link:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.contact{padding:0 0 10px}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:56px;align-items:start;
  margin-top:-190px;position:relative;z-index:2}
.contact__info{padding-top:210px}
.contact__info h2{font-size:31px;font-weight:700;line-height:1.25;max-width:420px}
.contact__info p{margin-top:22px;font-size:16px;line-height:1.55;color:#2f343a}
.contact__tel a{display:inline-block}
.contact__tel a+a{display:block;margin-left:58px}
.offer--solid{background:#000;max-width:none}
.contact__form .btn-wrap{margin-top:26px}
.strip-cta .btn-appointment{flex:none}

@media (max-width:1100px){
  .contact__grid{margin-top:0}
  .contact__info{padding-top:34px}
}

/* ==========================================================================
   Smile gallery — photo / video grid and the lightbox it opens
   ========================================================================== */
.gallery-page{padding-top:40px}
.gallery-page+.gallery-page{padding-top:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-grid--video{grid-template-columns:repeat(2,1fr);gap:22px}
.shot{position:relative;display:block;padding:0;overflow:hidden;border-radius:8px;background:#000;
  cursor:pointer}
.shot img{display:block;width:100%;aspect-ratio:621/842;object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gallery-grid--video .shot img{aspect-ratio:16/9}
.shot:hover img{transform:scale(1.045)}

.shot__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(2,11,18,.5);border:1px solid rgba(255,255,255,.65);
  transition:background-color .2s,border-color .2s}
.shot__play::after{content:"";margin-left:5px;border-left:17px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.shot:hover .shot__play{background:var(--gold);border-color:var(--gold)}
.shot:hover .shot__play::after{border-left-color:var(--ink)}

.shot__meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;padding:34px 18px 16px;text-align:left;color:#fff;
  background:linear-gradient(0deg,rgba(2,11,18,.88),rgba(2,11,18,0))}
.shot__title{font-size:15px;font-weight:600;line-height:1.3}
.shot__len{flex:none;font-size:12px;letter-spacing:1px;color:var(--gold)}

.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  gap:14px;padding:32px;background:rgba(2,11,18,.93)}
/* the stage takes the room the arrows leave, so a picture has a width to size
   itself against rather than one it has to invent from its own file */
.lightbox__stage{margin:0;display:flex;flex-direction:column;gap:16px;
  flex:1 1 auto;min-width:0;max-width:min(1100px,100%)}
.lightbox__media{display:flex;justify-content:center}
.lightbox__media img{width:auto;max-width:100%;max-height:76vh;border-radius:6px}
/* a document is opened to be looked at, so it grows past its own file size —
   stopped well short of the point where the scan turns to mush */
.lightbox__media img[data-fill]{width:min(100%,640px);height:auto}
.lightbox__media iframe,
.lightbox__media video{width:min(1000px,84vw);aspect-ratio:16/9;border:0;border-radius:6px;
  background:#000}
.lightbox figcaption{text-align:center;font-size:14px;color:#dfe3e7}
.lightbox__close{position:absolute;top:16px;right:22px;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;font-size:30px;line-height:1;color:#fff;
  background:rgba(255,255,255,.1);transition:background-color .18s}
.lightbox__nav{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  font-size:32px;line-height:1;color:#fff;background:rgba(255,255,255,.1);
  transition:background-color .18s}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24)}
body.is-locked{overflow:hidden}

/* ==========================================================================
   Our Teams — the clinic as one lineup standing on a gold floor line
   ========================================================================== */
.team-lede{padding:58px 0 8px}
.team-lede p{max-width:62ch;font-size:17px;line-height:1.62;color:#2f343a}
.team-lede p+p{margin-top:18px}

/* the head physician is the only person on the dark ground */
.team-lead{background:var(--ink);color:#fff;margin-top:56px}
.team-lead__grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:60px;
  align-items:end;padding-top:54px;border-bottom:1px solid var(--gold)}
.team-lead__figure{margin:0}
.team-lead__figure img{display:block;width:100%;height:auto}
.team-lead__copy{padding-bottom:54px}
.team-lead__name{font-family:var(--f-display);font-size:34px;font-weight:600;line-height:1.15;
  letter-spacing:-.4px}
.team-lead__role{margin-top:8px;font-size:15px;color:var(--gold)}
.team-lead__copy p{margin-top:22px;max-width:54ch;font-size:15px;line-height:1.66;color:#c5cad0}

/* everyone else stands on a line that runs unbroken across the row: the columns
   carry their own padding and butt up against each other, so the rules meet */
.team-group{padding-top:58px}
.team-group > h2{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.2px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
/* items are top-aligned and equally padded, so every portrait is the same size and
   every rule sits at the same height — the row reads as one unbroken line */
/* one row per group, three to a line: the columns carry their own gutter in
   the card's padding, so only the rows need a gap */
.team-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 0;margin-top:40px;
  align-items:start}
.team-member{display:flex;flex-direction:column;padding-inline:22px}
.team-member img{display:block;width:100%;height:auto}
.team-member__id{padding:16px 0 0;border-top:1px solid var(--gold)}
.team-member__id b{display:block;font-family:var(--f-display);font-size:16px;font-weight:500;
  line-height:1.32}
.team-member__id span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}

/* a card that leads somewhere says so by lifting, and by the name taking the
   clinic's gold the moment the pointer is over it */
.team-member--link{color:inherit;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.team-member--link:hover{transform:translateY(-3px)}
.team-member--link:hover .team-member__id b,
.team-member--link:focus-visible .team-member__id b{color:var(--gold-dark)}
.team-lead__name a{color:inherit}
.team-lead__name a:hover{color:var(--gold)}

/* ==========================================================================
   Doctor detail — portrait and facts on the left, the CV on the right.
   ======================================================================== */
.crumbs{padding-top:14px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-dark)}
.crumbs span[aria-hidden]{margin:0 8px;color:#c9ced4}
.crumbs [aria-current]{color:var(--text)}

.doctor{padding:30px 0 52px}
.doctor__grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:56px;align-items:start}
/* the portrait and the two ways of reaching this dentist stay in view while
   the CV scrolls past them */
.doctor__aside{position:sticky;top:calc(var(--nav-h) + 18px)}
.doctor__figure{margin:0;border-top:3px solid var(--gold)}
.doctor__figure img{display:block;width:100%;height:auto}
.doctor__facts{margin:20px 0 0;border-top:1px solid var(--line)}
.doctor__facts > div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.doctor__facts dt{font-size:13px;line-height:1.45;color:var(--muted)}
.doctor__facts dd{margin:0;font-size:14px;line-height:1.45}
.doctor__book{margin-top:20px;width:100%;justify-content:center}
.doctor__wa{display:block;margin-top:12px;text-align:center;font-size:13.5px;color:var(--muted)}
.doctor__wa:hover{color:var(--wa-dark)}

.doctor__name{font-family:var(--f-display);font-size:34px;font-weight:600;
  line-height:1.14;letter-spacing:-.3px}
.doctor__role{margin-top:8px;font-size:15px;color:var(--gold-dark)}
.doctor__body > p{margin-top:16px;max-width:70ch;font-size:15.5px;line-height:1.72}

/* Each part of a CV is a different shape of fact, so each gets its own
   treatment: pairs for competencies, a dated column for posts held, plain
   lists for courses. Headings are set the way the rest of the site sets a
   section heading, so a profile reads as part of the site and not as a form. */
.cv{margin-top:36px}
.cv > h2{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.2px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.cv > p{margin-top:14px;max-width:70ch;font-size:14.5px;line-height:1.7;color:var(--muted)}

.cv__defs{margin:0}
.cv__defs > div{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.cv__defs dt{font-size:14.5px;font-weight:600}
.cv__defs dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

.cv__jobs{list-style:none;margin:0;padding:0}
/* Years get their own column. After the name, how long someone has been doing
   this is the fact a patient weighs, and standing the dates in a column turns a
   list of posts into the shape of a career. */
.cv__job{display:grid;grid-template-columns:86px minmax(0,1fr);gap:0 22px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cv__when{grid-column:1;grid-row:1;padding-top:2px;
  font-family:var(--f-cond);font-size:14px;color:var(--muted);white-space:nowrap}
.cv__where{grid-column:2;grid-row:1}
.cv__did,.cv__note{grid-column:2;grid-row:2}
.cv__where b{display:block;font-family:var(--f-display);font-size:16.5px;font-weight:600;line-height:1.3}
.cv__where span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
/* the stylesheet strips list markers site-wide, so an indent here would be an
   empty step in the left edge — the duties sit flush under the post they
   belong to, and the courses flush under their heading */
.cv__did{margin:10px 0 0}
.cv__did li{margin-top:7px}
.cv__list{margin:8px 0 0}
.cv__list li{margin-top:9px}
.cv__did li,.cv__list li{font-size:14.5px;line-height:1.62;color:var(--muted)}
.cv__note{margin-top:10px;font-size:14px;line-height:1.62;color:var(--muted)}

/* the other nine, small, at the foot of every profile */
.team-group--rest{padding-top:46px;border-top:1px solid var(--line);margin-top:8px}
.team-row--rest{grid-template-columns:repeat(5,1fr);margin-top:26px}
.team-row--rest .team-member{padding-inline:12px}
.team-row--rest .team-member__id b{font-size:14px}
.team-row--rest .team-member__id span{font-size:12.5px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav a{padding:0 18px;font-size:15px}
}
@media (max-width:1240px){
  .tech__grid{gap:22px}
  .tech-card{min-height:0;padding:24px 20px}
  .tech-card h3{font-size:34px}
  .features__inner{grid-template-columns:repeat(2,1fr);gap:8px 0}
  .feature:nth-child(3){border-left:0}
}
@media (max-width:1024px){
  :root{--container:100%}

  /* ---- one header row: wordmark left, language + menu bars right ----
     the two desktop rows become flex items of the header container, so the
     socials and the gold CTA can step aside and let the menu carry them   */
  .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .header-top{flex:0 1 auto;min-width:0;position:relative;z-index:2;gap:0;padding:13px 0}
  .brand img{width:188px}
  .header-tools{display:none}
  .header-bar{flex:none;gap:4px;padding:0}

  .lang{order:1;position:relative;z-index:2;gap:7px;height:44px;padding:0 8px;border:0}
  .lang__flag{order:1;width:30px;height:20px}
  .lang__caret{order:2;color:var(--gold)}
  .nav-toggle{display:grid;order:2;z-index:2}

  /* the header rides along on a phone, so the menu is one thumb away wherever
     the reader has got to. body sets overflow-x:clip rather than hidden so
     this keeps working.                                                     */
  /* the banner is a label on a small screen, not a cover photograph: it says
     which page you are on and then gets out of the way. On a phone the old
     274px band was a third of the screen for a single line of type. */
  .page-banner{min-height:150px;height:auto;padding-block:26px}
  .page-banner h1,.page-banner__title{font-size:30px}

  .site-header{position:sticky;top:0}

  /* ---- the menu itself: a full viewport sheet sitting under the header ----
     the header is already pinned to the top, so opening the sheet neither
     lifts it out of flow nor pads the body — nothing underneath moves      */
  html.nav-open{overflow:hidden}
  html.nav-open body{overflow:hidden}
  /* the contact bar outranks the header, so it steps aside for the menu */
  html.nav-open .fixbar{opacity:0;visibility:hidden;pointer-events:none}

  .nav{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--nav-top,76px) + 20px) 24px max(28px,env(safe-area-inset-bottom)) 24px;
    background:radial-gradient(130% 56% at 100% 0,rgba(194,163,99,.17),rgba(194,163,99,0) 62%),
               var(--ink);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease;
  }
  /* opens on the spot and fades on the way out: the links carry the entrance */
  .nav.is-open{opacity:1;visibility:visible;transition:none}

  /* the link stack in the hero's condensed cut — sized to be read at a glance
     rather than shouted: the row still clears a 44px thumb target           */
  .nav>a,.nav>.nav__group>a{
    height:auto;padding:15px 0;border-radius:0;
    font-family:var(--f-cond);font-weight:700;font-size:clamp(19px,5.4vw,23px);line-height:1.1;
    letter-spacing:.2px;white-space:normal;
    transition:color .18s ease;
  }
  .nav>a,.nav>.nav__group{
    border-bottom:1px solid rgba(255,255,255,.1);
    opacity:0;transform:translateY(16px);
    transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1);
  }
  .nav>a:last-of-type{border-bottom:0}
  .nav>a:hover,.nav>.nav__group>a:hover{background:none;color:var(--gold)}
  .nav>a[aria-current="page"],
  .nav>.nav__group>a[aria-current="page"]{background:none;color:var(--gold)}
  .nav.is-open>a,.nav.is-open>.nav__group{opacity:1;transform:none}
  .nav.is-open>:nth-child(1){transition-delay:40ms}
  .nav.is-open>:nth-child(2){transition-delay:75ms}
  .nav.is-open>:nth-child(3){transition-delay:110ms}
  .nav.is-open>:nth-child(4){transition-delay:145ms}
  .nav.is-open>:nth-child(5){transition-delay:180ms}
  .nav.is-open>:nth-child(6){transition-delay:215ms}
  .nav.is-open>:nth-child(7){transition-delay:250ms}

  /* Treatments stays a link to every service; the chevron beside it unfolds
     the names, and a gold rule ties the list back to the row it belongs to */
  .nav__group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .nav__more{display:grid;place-items:center;align-self:stretch;width:54px;margin-right:-12px;
    color:var(--gold)}
  .nav__more svg{width:15px;height:9px;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .nav__group.is-open .nav__more svg{transform:rotate(180deg)}
  .nav__sub{display:block;grid-column:1/-1;overflow:hidden;max-height:0;
    transition:max-height .34s cubic-bezier(.4,0,.2,1)}
  .nav__sub a{display:block;height:auto;border-radius:0;white-space:normal;
    padding:10px 0 10px 16px;border-left:1px solid rgba(194,163,99,.4);
    font-size:15px;font-weight:400;color:#c7ccd3;transition:color .18s ease}
  .nav__sub a:first-child{padding-top:2px}
  .nav__sub a:last-child{padding-bottom:20px}
  .nav__sub a:hover,.nav__sub a:active{background:none;color:var(--gold)}

  /* booking, phone and the social set — pinned to the foot of the sheet */
  .nav__foot{
    display:flex;flex-direction:column;gap:22px;margin-top:auto;
    padding-top:28px;border-top:1px solid rgba(194,163,99,.3);
    opacity:0;transform:translateY(16px);
    transition:opacity .4s ease 285ms,transform .4s cubic-bezier(.2,.7,.3,1) 285ms;
  }
  .nav.is-open .nav__foot{opacity:1;transform:none}
  /* these are not part of the stack, so they shed the nav link styling */
  .nav__foot a{height:auto;padding:0;border-radius:0;white-space:nowrap}
  .nav .nav__cta{display:flex;align-items:center;justify-content:center;height:52px;border-radius:4px;
    border:1px solid var(--gold);color:var(--gold);font-weight:600;font-size:15px;letter-spacing:.6px;
    transition:background-color .18s ease,color .18s ease}
  .nav .nav__cta:hover,.nav .nav__cta:active{background:var(--gold);color:var(--ink)}
  .nav__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .nav .nav__tel{font-size:16px;font-weight:500;letter-spacing:.3px;color:var(--gold);
    font-variant-numeric:tabular-nums}
  .socials--menu{gap:2px;margin-left:-9px}
  .nav .socials--menu a{padding:9px;color:var(--gold)}
  .socials--menu svg{width:22px;height:22px}

  .hero .container{grid-template-columns:1fr;padding-bottom:40px}
  .hero{aspect-ratio:auto;min-height:auto;max-height:none;padding-block:40px;align-items:stretch}
  .hero__panel{margin-right:0}
  .hero__panel::after{display:none}
  .offer{max-width:none}
  .lede-offer{grid-template-columns:minmax(0,1fr) 350px;gap:40px}
  .lede-offer__text > p:only-child{font-size:18px}
  .lede-offer .offer{padding:24px 22px 28px}
  .intro__grid,.treatments__grid,.reviews__grid,.faq-block__grid,
  .tech-split__grid,.article__grid,.contact__grid{grid-template-columns:1fr;gap:34px}
  /* the article leads on a phone: the stops come first as chips, and the offer
     form drops below the piece, where someone is actually ready to act on it */
  .article__grid{display:flex;flex-direction:column}
  .article__aside{position:static;display:contents}
  .toc__label{order:1;margin-top:0}
  .toc{order:2}
  .article__body{order:3}
  .article__aside .offer--light{order:4}
  .article__aside .btn{order:5;display:none}   /* the row just below repeats it */

  /* every stop on screen at once: a wrapping set of chips, nothing to swipe.
     The label and its chips are one thing, so they do not take the 34px the
     column puts between separate blocks — that gap is pulled back to 9px. */
  .toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(9px - 34px);border-left:0}
  .toc a{margin-left:0;padding:8px 13px;border:1px solid var(--line);border-radius:999px;
    font-size:13px;line-height:1.25}
  .toc li:first-child a{border-color:var(--gold);background:var(--gold);color:var(--ink);
    font-weight:600}
  .toc--live li:first-child a{border-color:var(--line);background:none;color:#2f343a;
    font-weight:400}
  .toc--live li a.is-current{border-color:var(--gold);background:var(--gold);color:var(--ink);
    font-weight:600}
  .reviews__list{border-left:0;padding-left:0}
  .tech__grid{grid-template-columns:1fr}
  .steps__grid{grid-template-columns:repeat(2,1fr);gap:48px 40px}
  .clinic-grid img{flex-basis:calc((100% - 34px)/2)}
  .team-lead__grid{grid-template-columns:220px minmax(0,1fr);gap:36px}
  .team-lead__name{font-size:28px}
  .doctor__grid{grid-template-columns:250px minmax(0,1fr);gap:34px}
  .doctor__name{font-size:29px}
  .cv__defs > div{grid-template-columns:190px minmax(0,1fr);gap:16px}
  .team-row--rest{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .tcards--grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  /* now sits under the heading, so it follows the copy's own gutter */
  .doctors__stage .badge-10{position:static;width:210px;margin:22px 0 0}
  .article__body h1,.section-title,.tech-intro h2,.blog__head h2,.faq-block h2{font-size:38px}
  .hero-title{font-size:44px}
  .hero-eyebrow{font-size:22px}
  .intro__title{font-size:44px}
  /* 10 portraits only tile into whole rows at 5, 2 or 1 up, so the tablet step
     keeps 5 columns and takes the caption down a size instead                */
}
@media (max-width:720px){
  .container,.container-wide,.gallery-bleed{padding-inline:16px}
  .hours .container{padding-inline:16px}
  .btn-appointment{height:40px;padding-inline:16px;font-size:13px}
  .brand img{width:168px}
  .nav{padding-inline:16px}
  /* the Dinçalya Smile pair stays on one line — 237px each is what broke it */
  .intro .btn-row{flex-wrap:nowrap;gap:12px}
  .intro .btn{flex:1 1 0;min-width:0;font-size:clamp(13px,3.6vw,17px);
    padding:0 clamp(9px,2.4vw,15px) 0 clamp(12px,3.4vw,28px);gap:clamp(5px,1.8vw,18px)}
  .intro .btn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .intro .btn__arrow{width:clamp(18px,5vw,26px);height:clamp(18px,5vw,26px)}
  /* one card to a row here, so it was filling most of a phone screen: 568px
     for a photograph, three lines and a button. The picture takes a wider
     crop and the type steps down — the card still leads with its image, it
     just stops being the whole screen. */
  .tcards--grid{grid-template-columns:1fr}
  .tcards--grid .tcard__img{aspect-ratio:16/10}
  .tcards--grid .tcard__body{padding:14px 16px 18px}
  .tcards--grid .tcard__body h3{font-size:19px}
  .tcards--grid .tcard__body p{margin-top:8px;font-size:14px}
  .tcards--grid .tcard__more{padding:13px 16px;font-size:16px}
  /* nine stacked squares is a scroll, not a gallery. On a phone the clinic
     photos become the same strip the rest of the site uses: one square in the
     middle, its neighbours showing at the edges. */
  .clinic-grid{gap:12px;margin-top:26px;
    padding-inline:12%;scroll-padding-inline:12%}
  .clinic-grid img{flex-basis:100%;scroll-snap-align:center}
  .map__open{left:12px;right:12px;top:12px;height:46px;padding:0 12px 0 16px;
    justify-content:center}
  .team__grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid--video{grid-template-columns:1fr}
  /* the arrows come out of the row and sit on the photograph's own edges: the
     picture then gets the whole screen instead of the strip between two
     buttons, and each arrow is wide enough for a thumb */
  .lightbox{padding:16px;gap:0}
  .lightbox__stage{width:100%}
  .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;font-size:28px;background:rgba(2,11,18,.62);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .lightbox__nav--prev{left:10px}
  .lightbox__nav--next{right:10px}
  .lightbox__close{top:10px;right:12px;width:44px;height:44px;background:rgba(2,11,18,.62)}
  .lightbox__media img{max-height:70vh}
  .strip-cta{flex-direction:column;align-items:flex-start;padding:22px}
  .collage{grid-auto-rows:10px}
  .site-footer__bar{flex-direction:column;gap:18px;text-align:center}
  .site-footer__bar img{position:static}
  .tcard{flex-basis:min(320px,82vw)}
  /* the 46px heading belongs to the two-column band; one column needs less */
  .tech-intro:has(+ .tech-split) h2{font-size:31px}
  .tech-intro:has(+ .tech-split) p br{display:none}
  .team-lead__grid{grid-template-columns:1fr;gap:0;padding-top:38px}
  /* the column is the whole screen here, so the portrait sits in the middle of
     it rather than against the left edge with a third of the band empty */
  .team-lead__figure{max-width:210px;margin-inline:auto}
  .team-lead__copy{padding-bottom:40px}

  /* the line-up becomes the strip the rest of the site uses: one portrait in
     the middle, its neighbours showing at the edges. Two to a screen made each
     face too small to read, and nine of them a long scroll.
     doctor-detail's own row (.team-row--rest) sits inside a .team-group too,
     so it is named out: that page is not what was asked for. */
  .team-group .team-row:not(.team-row--rest){display:flex;grid-template-columns:none;gap:12px;margin-top:26px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding-inline:12%;scroll-padding-inline:12%;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .team-group .team-row:not(.team-row--rest)::-webkit-scrollbar{display:none}
  .team-group .team-row:not(.team-row--rest) .team-member{flex:0 0 100%;scroll-snap-align:center}
  /* a card that lifts on hover has nowhere to lift to inside a scroller, and
     the transform would fight the snap */
  .team-group .team-row:not(.team-row--rest) .team-member--link:hover{transform:none}

  .team-row{grid-template-columns:repeat(2,1fr)}
  .team-member{padding-inline:12px}
  /* one column on a phone: the portrait leads, the CV follows, and nothing
     sticks — a sticky column on a short screen only eats the reading area */
  .doctor{padding:18px 0 36px}
  .doctor__grid{grid-template-columns:1fr;gap:26px}
  /* the column is the whole screen now, so the facts and the two buttons use
     it; only the portrait keeps its width, and it sits in the middle rather
     than against the left edge with a quarter of the band empty */
  .doctor__aside{position:static;max-width:none}
  .doctor__figure{max-width:260px;margin-inline:auto}
  .doctor__name{font-size:26px}
  .doctor__body > p{font-size:15px}
  .cv{margin-top:28px}
  .cv__defs > div{grid-template-columns:1fr;gap:4px;padding:12px 0}
  /* 86px'lik tarih sütunu 390px'te yeri yer; tarih başlığın üstüne çıkıyor */
  .cv__job{grid-template-columns:1fr;gap:0}
  .cv__when{grid-column:1;grid-row:1;padding-top:0;margin-bottom:5px}
  .cv__where{grid-column:1;grid-row:2}
  .cv__did,.cv__note{grid-column:1;grid-row:3}
  .team-group--rest{padding-top:34px}
  .team-row--rest{grid-template-columns:repeat(2,1fr)}
  .crumbs{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .nav>a,.nav>.nav__group,.nav__foot{opacity:1;transform:none;transition:none}
  .nav__sub,.nav__more svg{transition:none}
  .nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{transition:none}
}

/* ==========================================================================
   Slider — every section that shows dots is swipeable
   ========================================================================== */
.slider{position:relative}
.slider__track{
  display:flex;gap:var(--slide-gap,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* proximity, not mandatory: mandatory forces the browser to re-align the
     container on every layout change, and with scroll-behavior:smooth on the
     box that correction played as an animation. Smooth is requested per call
     in main.js instead, so nothing the browser does on its own animates.    */
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;cursor:grab;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.slider__track.is-dragging *{pointer-events:none}
.slider__slide{
  flex:0 0 calc((100% - (var(--per,3) - 1) * var(--slide-gap,18px)) / var(--per,3));
  scroll-snap-align:start;min-width:0;
}
.slider .dots{padding-top:18px}
.slider__track:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* per-section tuning */
.treatments .slider{--per:2.6;--slide-gap:24px}   /* 2 cards + a bit over half */
.gallery .slider{--per:4;--slide-gap:11px}
.blog .slider{--per:4;--slide-gap:12px}
.reviews .slider{--per:3;--slide-gap:44px}
.doctors .slider{--per:5;--slide-gap:26px}
.tech-split .slider{--per:1;--slide-gap:22px}

@media (max-width:1024px){
  .treatments .slider,.blog .slider,.reviews .slider{--per:2}
  .gallery .slider{--per:3}
  .doctors .slider{--per:3}
}
/* ---- phone: one card in the middle, its neighbours showing at both edges ----
   The track is padded by exactly the leftover half of the screen, so a centred
   snap point lines the card up with the viewport. The strip then reads as a
   deck you are standing in the middle of, rather than a row cut off on the
   right. Because that padding is (100% - card)/2, scrollLeft for card i stays
   i * step — the same arithmetic main.js already uses.
   Snapping is mandatory here and only here: a swipe has to land on a card,
   and on a phone every strip is a single fixed-width column, so there is no
   layout change for the browser to re-snap against.                        */
@media (max-width:720px){
  .treatments .slider,.blog .slider,.reviews .slider,.gallery .slider,
  .doctors .slider,.tech-split .slider{--per:1;--slide-gap:12px}

  .slider__track{scroll-snap-type:x mandatory;padding-inline:12%}
  .slider__slide{flex:0 0 100%;scroll-snap-align:center}

  /* the strip that becomes a stacked grid on a phone keeps its own edges */
  .features__row.slider__track{padding-inline:0}

  /* the smile gallery is the exception: two photographs to a screen, filling
     it edge to edge. Nothing peeks, so the cards align to the left instead */
  .gallery .slider{--per:2}
  .gallery .slider__track{padding-inline:0}

  /* the other exception, for the opposite reason: a photograph half off the
     screen still reads as a photograph, but half a sentence is just letters
     cut down the middle. The review strip drops the peek and gives the card
     the whole width — one review, whole, or none of it. */
  .reviews__list .slider__track{padding-inline:0}
  .reviews__list .slider__slide{scroll-snap-align:start}
  .gallery .slider__slide{flex:0 0 calc((100% - var(--slide-gap,12px)) / 2);
    scroll-snap-align:start}
}

/* ==========================================================================
   Slider placement inside each section
   ========================================================================== */
/* doctors deck sits on the dark stage, cutouts anchored to the floor line */
/* height carries the track's bottom padding so the content box stays at 62%:
   the name label hangs 2.6em below its slide and, without room inside the
   scroller, that overflow made the track scrollable on the y axis (overflow-x
   :auto turns an unset overflow-y into auto) — the wheel then scrolled the
   deck instead of the page.                                                 */
.doctors__deck{position:absolute;left:0;right:0;top:15%;height:calc(62% + 100px)}
.doctors__deck .slider,
.doctors__deck .slider__track{height:100%}
.doctors__deck .slider__track{align-items:flex-end;padding-bottom:100px}
.doctors__deck .slider__slide{display:flex;align-items:flex-end;height:100%;position:relative}
.doctors__deck .doc{margin:0;width:100%;height:100%;display:flex;align-items:flex-end;position:relative}
.doctors__deck img{width:100%;height:100%;object-fit:contain;object-position:bottom;
  transform:scale(.93);transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
/* the portrait centred in the track steps forward and lights up */
.doctors__deck .is-featured img{transform:scale(1.04)}
.doctors__deck .slider__slide::before{
  content:"";position:absolute;left:50%;bottom:0;width:150%;aspect-ratio:1;max-height:100%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(202,172,110,.20),rgba(202,172,110,0) 72%);
  opacity:0;transition:opacity .45s ease}
.doctors__deck .is-featured::before{opacity:1}
.doctors__deck .doc__name{
  position:absolute;left:0;right:0;top:calc(100% + 14px);text-align:center;
  transition:color .45s ease}
/* the whole portrait opens that dentist's profile. It is laid over the card
   rather than wrapped around it, so the slider's own sizing chain is untouched
   and a drag across the strip still scrolls instead of navigating. The name
   sits below the figure here, so the hit area reaches down to cover it. */
.doc__go{position:absolute;inset:0 0 -60px;z-index:3}
.doc__go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.doctors__deck .doc__name b{display:block;font-size:14px;font-weight:700;line-height:1.25;color:#fff}
.doctors__deck .doc__name span{display:block;margin-top:3px;font-size:12px;line-height:1.3;color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .doctors__deck img,.doctors__deck .slider__slide::before,.doctors__deck .doc__name{transition:none}
}
.doctors__deck .dots{position:absolute;left:0;right:0;top:calc(100% + 16px);padding:0}
.doctors__deck .dots button{background:#8b2fb5}
.doctors__deck .dots button[aria-current="true"]{background:#fff}

/* small screens: the band stops being a fixed-ratio stage and simply flows */
@media (max-width:1024px){
  .doctors__stage{aspect-ratio:auto;min-height:0;padding:26px 0 34px;background-size:cover}
  .doctors__head{position:static;text-align:left}
  .doctors__deck{position:static;height:auto;margin-top:24px}
  .doctors__deck .slider,.doctors__deck .slider__track{height:auto}
  .doctors__deck .slider__slide{height:auto}
  .doctors__deck .doc{height:auto;display:block}
  .doctors__deck img{height:auto;transform:none;filter:none}
  .doctors__deck .slider__slide::before{display:none}
  .doctors__deck .doc__name{position:static;opacity:1;transform:none;margin-top:12px}
  .doc__go{inset:0}
  .doctors__deck .dots{position:static;padding-top:22px}
  .doctors__head,.doctors__deck{max-width:none;padding-inline:0}
  /* the name and the glow are back inside the box here, so the track needs no
     room reserved for them                                                   */
  .doctors__deck .slider__track{padding-bottom:2px}
  /* the stage stops being a fixed ratio, so the drawn floor has no fixed % to
     sit on — plain white                                                     */
  .doctors--teams .doctors__stage{background:#fff}
}

/* gallery */
.gallery .slider__slide img{width:100%;aspect-ratio:621/842;object-fit:cover}
/* the smile strip and the certificate in the footer open the full picture, so
   they answer to a pointer the way the gallery page's buttons do */
.gallery .slider__slide img,.clinic-grid img,.cert{cursor:zoom-in;transition:opacity .18s ease}
.gallery .slider__slide img:hover,.clinic-grid img:hover,.cert:hover{opacity:.86}
.gallery .slider__slide img:focus-visible,.clinic-grid img:focus-visible,.cert:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}
.gallery .slider .dots{padding-top:22px}

/* blog — CTA left, dots right, one row (as in the comp) */
.blog .slider{padding-bottom:0}
.blog .dots button{background:#8b2fb5}
.blog .dots button[aria-current="true"]{background:#fff}

/* reviews */
.reviews__list .slider .dots{padding-top:26px;justify-content:flex-start}

/* treatments — the card strip runs past the container's right edge, and --per
   above is fractional, so two whole cards and ~57% of a third are in view and
   the row reads as scrollable */
.treatments__viewport{width:calc(100% + (100vw - min(100vw,var(--container)))/2 + 24px)}
.treatments__viewport .slider .dots{justify-content:flex-start}
.treatments .slider__slide{display:flex}
.treatments .tcard{width:100%;flex:1 1 auto;min-width:0}

/* inner-page technology slider */
.tech-split__card .slider .dots{padding-top:16px;justify-content:flex-start}
.tech-split__card .slider .dots button{background:#8b2fb5}
.tech-split__card .slider .dots button[aria-current="true"]{background:#fff}
.tech-split__card .slider__slide{display:flex}
.tech-split__card .tech-card{width:100%}
/* the finished artwork cards keep their own aspect ratio */
/* One rule covers both artworks. The landscape card (1662x843) at the card's
   ~857px content width comes out 435px tall, so it fills the band edge to
   edge; the two portrait cards still in the deck would be 1189px tall at that
   width, so max-height clamps the box and object-fit:contain centres them on
   the black plate instead. Swap those two for landscape art and they fill in
   the same way with no CSS change.                                         */
.tech-split__card .tech-play{height:auto}
.tech-split__card picture{display:block;width:100%}
.tech-split__card .tech-shot{width:100%;height:auto;max-height:460px;object-fit:contain}

/* ==========================================================================
   Price planner (price-list page)
   ========================================================================== */
.planner{background:#000;padding:34px 0 42px;color:#fff}
/* chart and plan stack on the left, the palette rides alongside; on one
   column the palette moves between them so picking a treatment never means
   scrolling past the plan */
.planner__grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;grid-template-areas:"chart palette" "plan palette";
  gap:20px 24px;align-items:start}
.chart{grid-area:chart}.plan{grid-area:plan}.palette{grid-area:palette}

.chart,.plan,.palette{background:#0d0d0d;border:1px solid rgba(255,255,255,.09);border-radius:14px}
.chart{padding:22px 26px 8px}
.chart__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chart__marking{font-size:15px;color:#9aa0a7}
.chart__marking b{color:var(--gold);font-weight:700;font-size:17px;margin-left:4px}
.chart__tools{display:flex;align-items:center;gap:10px;flex:none}
/* the same affordance the chart's own reset has, one treatment at a time */
.pal__clear{margin-left:auto;white-space:nowrap;border:1px solid rgba(255,255,255,.22);
  border-radius:8px;padding:7px 12px;font-size:12.5px;color:#c9ced4;
  transition:border-color .18s,color .18s}
.pal__clear:hover{border-color:var(--gold);color:var(--gold)}
/* Clear belongs to the phone palette. On the desktop palette every row already
   carries its own counter and the chart keeps a "Clear chart" of its own, so a
   Clear per row was one button too many. */
.pal__clear{display:none}
/* zygomatic's only control was that button — with it gone the row has nothing
   left to drop open, so the empty band under the chip goes too */
.pal__tools:not([hidden]):not(:has(> :not(.pal__clear))){display:none}

.chart__reset{white-space:nowrap}
.chart__reset{border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:8px 14px;
  font-size:13px;color:#d8dce0;transition:.18s}
.chart__reset:hover{border-color:var(--gold);color:var(--gold)}
/* one live sentence under the bar: what hovering / clicking will do, or what just happened */
.chart__readout{margin-top:10px;min-height:22px;font-size:14px;line-height:1.5;color:#b7bcc3}
.chart__stage{position:relative;padding:6px 0 10px}
.chart__arch-label{position:absolute;left:0;right:0;text-align:center;font-size:11.5px;
  letter-spacing:1.2px;color:#6f747b}
.chart__arch-label--upper{top:10px}
.chart__arch-label--lower{bottom:14px}
.chart__svg{width:100%;height:auto;max-height:520px;margin-inline:auto;display:block;overflow:visible}

/* --------------------------------------------------------------------------
   Teeth. Each <g class="tooth"> is drawn in its own frame: roots at -y, crown
   at +y, gum line at y=9. The body is cut into a root and a crown so each can
   show its own work. What is on a tooth is written by the script as
     data-cap    natural | crown | veneer | bridge     the crown's surface
     data-root   natural | none                        none = replaced by a fixture
     data-screw  none | short | long                   the fixture in the bone
   and, while the cursor is over it,
     data-ghost  <mark>   a preview of the treatment in hand
     data-drop   1        the treatment in hand is here and a click removes it
   -------------------------------------------------------------------------- */
.tooth{cursor:pointer;--fx:none;filter:var(--fx);transition:filter .16s ease}
.tooth__hit{fill:transparent;stroke:transparent;stroke-width:16}
.tooth__root,.tooth__crown{fill:url(#toothFill);stroke:rgba(0,0,0,.55);stroke-width:.6;
  transition:fill .16s ease,opacity .16s ease}
.tooth__lines path{stroke:#b9bcc0;stroke-width:1.1;fill:none;opacity:.85;pointer-events:none;transition:opacity .16s}
.tooth__screw,.tooth__sheen,.tooth__margin,.tooth__wash{opacity:0;pointer-events:none;transition:opacity .16s ease}
/* FDI numbers sit just past each biting edge, upright whatever the tooth's
   rotation, so the plan's "11 · 21" can be found on the chart */
.tooth__num{font-family:var(--f-cond);font-size:10.5px;fill:#5f656c;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;letter-spacing:.3px;transition:fill .16s}
.tooth.is-on .tooth__num,.tooth.is-hot .tooth__num{fill:#c9ced4}

/* crown: a cap in the marked gold, with the margin line where it meets the tooth */
.tooth[data-cap="crown"] .tooth__crown,
.tooth[data-cap="bridge"] .tooth__crown{fill:url(#toothGold)}
.tooth[data-cap="crown"] .tooth__margin{fill:#7a5a14;opacity:1}
.tooth[data-cap="crown"] .tooth__lines path,
.tooth[data-cap="bridge"] .tooth__lines path{stroke:rgba(0,0,0,.42)}

/* veneer: porcelain-bright, outlined in gold, with a polish sweep across it */
.tooth[data-cap="veneer"] .tooth__crown{fill:url(#pearl);stroke:#d8b45e;stroke-width:1.4}
.tooth[data-cap="veneer"] .tooth__sheen{fill:url(#sheen);opacity:.9}
.tooth[data-cap="veneer"] .tooth__lines path{opacity:0}

/* implant: the root is gone, a threaded fixture sits in its place */
.tooth[data-root="none"] .tooth__root{opacity:0}
.tooth[data-screw="short"] .tooth__screw,
.tooth[data-screw="long"] .tooth__screw{opacity:1}

/* the full-jaw bridge behind the crowns, on the gum line */
.archfx{pointer-events:none}
.archfx__band{fill:none;stroke:url(#bandFill);stroke-width:9;stroke-linecap:round}
.archfx__edge{fill:none;stroke:#f2d79a;stroke-width:1;stroke-linecap:round;opacity:.7}
.archfx__ghost{opacity:.45}

/* hover: the tooth lifts, and the preview is drawn in the treatment's own
   colour but held back, so the eye reads "this is what a click gives you" */
.tooth.is-hot{--fx:drop-shadow(0 0 8px rgba(194,163,99,.55))}
.tooth[data-ghost="crown"] .tooth__wash,
.tooth[data-ghost="bridge"] .tooth__wash,
.tooth[data-ghost="anchor"] .tooth__wash{fill:url(#toothGold);opacity:.6}
.tooth[data-ghost="veneer"] .tooth__wash{fill:url(#pearl);stroke:#d8b45e;stroke-width:1.4;opacity:.75}
.tooth[data-ghost="screw"] .tooth__screw,
.tooth[data-ghost="anchor"] .tooth__screw{opacity:.55}
.tooth[data-ghost="screw"] .tooth__root,
.tooth[data-ghost="bridge"] .tooth__root,
.tooth[data-ghost="anchor"] .tooth__root{opacity:.35}
/* the treatment in hand is already here: the marks fade and the tooth is haloed
   white, so a click reads as "back to natural" */
.tooth[data-drop="1"]{--fx:drop-shadow(0 0 8px rgba(255,255,255,.3))}
.tooth[data-drop="1"][data-screw="short"] .tooth__screw,
.tooth[data-drop="1"][data-screw="long"] .tooth__screw,
.tooth[data-drop="1"][data-cap="crown"] .tooth__margin,
.tooth[data-drop="1"][data-cap="veneer"] .tooth__sheen{opacity:.35}
.tooth[data-drop="1"] .tooth__wash{fill:url(#toothFill);opacity:.8}

/* a click focuses the <g>, and the browser draws its own ring around the
   rotated bounding box — kill it on :focus, and mark keyboard focus on the tooth */
.tooth:focus{outline:none}
.tooth:focus-visible .tooth__crown{stroke:var(--gold);stroke-width:2.4;stroke-dasharray:5 3;stroke-linejoin:round}


/* plan card */
.plan{padding:24px 26px 26px}
/* the head is the heading alone now: the send button waits below the list, so
   the plan is read before it is sent */
.plan__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.plan__head h3{font-size:22px;font-weight:700}
.plan__count{margin-top:4px;font-size:14px;color:#9aa0a7}
.plan__count b{color:var(--gold)}
/* Veneers come in set sizes, so the count carries the whole ladder and lights
   the rung you are on. It is a readout, not a row of switches — the chip steps
   through it — so nothing here looks or behaves pressable. */
.plan__ladder{display:inline-flex;align-items:baseline;gap:6px;margin-left:10px;
  padding-left:10px;border-left:1px solid rgba(255,255,255,.14);
  font-family:var(--f-cond);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.plan__ladder b{color:#6f757b;font-weight:600;transition:color .2s}
.plan__ladder b.is-on{color:var(--gold);font-weight:700}
.plan__ladder i{font-style:normal;color:#41474d}
.plan__wa{display:flex;width:100%;margin-top:18px;justify-content:center;
  align-items:center;gap:10px;background:#128c33;color:#fff;
  border-radius:9px;padding:14px 22px;font-size:15px;font-weight:700;transition:background-color .18s}
.plan__wa:hover{background:#0f7a2c}
.plan__wa svg{width:20px;height:20px}
.plan__label{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#8e9299}
.plan__list{margin-top:12px;display:grid;gap:10px}
.plan__list li{display:flex;align-items:center;gap:12px;background:#151515;
  border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:11px 16px;font-size:14px}
.plan__list li b{font-weight:700}
.plan__list li span{color:#9aa0a7}
.plan__ico{width:24px;height:26px;flex:none}
.plan__empty{color:#8e9299;justify-content:center}
.plan__teeth{margin-left:auto;font-family:var(--f-cond);letter-spacing:.4px;
  font-size:13px;color:#7d838a;text-align:right}
.plan__list li .plan__remove{margin-left:14px}
.plan__total{margin-top:14px;font-size:13.5px;line-height:1.5;color:#8e9299}
.plan__total b{color:var(--gold);font-size:15px}
.plan__total[hidden]{display:none}
.plan__remove{margin-left:auto;width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#c9ced4;font-size:13px;line-height:1}
.plan__remove:hover{border-color:#e0523f;color:#e0523f}
.plan__note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);
  font-size:13.5px;line-height:1.55;color:#9aa0a7}
.plan__more{display:inline-block;margin-top:14px;font-size:13.5px;color:#d8dce0;
  border-bottom:1px solid rgba(216,220,224,.45);padding-bottom:2px}
.plan__more:hover{color:var(--gold);border-color:var(--gold)}

/* palette — each row's icon is the exact mark the chart draws, so the palette
   doubles as the legend */
.palette{padding:20px 18px 22px;position:sticky;top:calc(var(--nav-h) + 16px)}
.pal__title{font-size:17px;font-weight:700}
.pal__hint{margin-top:4px;font-size:13.5px;line-height:1.5;color:#8e9299}
.pal__group{margin:18px 0 6px;font-size:12.5px;color:#6f747b}
.pal__item{margin-top:8px;background:#141414;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;overflow:hidden;transition:border-color .18s,background-color .18s}
.pal__item.is-active{background:#191510;border-color:rgba(194,163,99,.55)}
.pal__item.has-picks{border-color:rgba(255,255,255,.14)}
.pal__item.is-active.has-picks{border-color:rgba(194,163,99,.55)}
.pal__item:hover{border-color:rgba(255,255,255,.22)}
/* a package holds the whole smile, so the rest of the palette steps back while
   one is planned — still readable, plainly not available */
.pal__item.is-locked{opacity:.4;border-color:rgba(255,255,255,.07)}
.pal__item.is-locked:hover{border-color:rgba(255,255,255,.07)}
.pal__item.is-locked .pal__pick{cursor:not-allowed}
.pal__pick{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;
  font-size:14.5px;font-weight:600;color:#fff;text-align:left}
.pal__badge{margin-left:auto;flex:none;min-width:24px;height:22px;padding:0 7px;
  display:none;place-items:center;border-radius:999px;font-size:12px;font-weight:700;
  font-family:var(--f-cond);color:#0d0d0d;background:var(--gold)}
.pal__item.has-picks .pal__badge{display:grid}
.pal__icon{width:20px;height:28px;flex:none}
.pal__icon--arch{width:28px;height:20px}
.pal__tools[hidden]{display:none}
.pal__tools{display:flex;align-items:center;gap:10px;padding:2px 14px 14px;flex-wrap:wrap}
.pal__step{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:var(--gold);font-size:18px;line-height:1;display:grid;place-items:center;transition:.16s}
.pal__step:hover{background:rgba(255,255,255,.13)}
.pal__reel{width:52px;height:96px;border-radius:9px;background:#0f0f0f;display:grid;
  align-content:center;justify-items:center;font-size:15px;color:#4d5157;
  border:1px solid rgba(255,255,255,.07)}
.pal__reel span{line-height:24px}
.pal__reel .is-on{color:var(--gold);font-weight:700;font-size:17px}
/* the middle slot is typed into — pressing + twenty times is no way to count */
.pal__num{width:100%;padding:0;border:0;border-radius:5px;background:none;text-align:center;
  font-family:inherit;font-size:17px;font-weight:700;line-height:24px;color:var(--gold);
  -moz-appearance:textfield}
.pal__num::-webkit-outer-spin-button,.pal__num::-webkit-inner-spin-button{-webkit-appearance:none}
.pal__num:focus{outline:none;background:rgba(194,163,99,.16)}
.pal__count{font-size:13.5px;color:#9aa0a7;flex:1;min-width:110px}
.pal__count b{color:var(--gold)}
/* jaw chips for whole-jaw work: the choice a patient can make without the chart */
.pal__jaw{flex:1;min-width:110px;height:36px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:#d8dce0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);transition:.16s}
.pal__jaw:hover{border-color:rgba(255,255,255,.35)}
.pal__jaw[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0d0d0d}

/* what the chosen package covers, under the treatment it belongs to */
.pal__scope{flex:0 0 100%;margin-top:2px;font-size:13px;color:#9aa0a7}
.pal__scope:empty{display:none}
.pal__item.has-picks .pal__scope{color:var(--gold)}

/* touch has no hover: previews would only ever flash on the tapped tooth */
@media (hover:none){
  .tooth.is-hot,.tooth[data-drop="1"]{filter:none}
  .tooth[data-ghost] .tooth__wash,.tooth[data-ghost] .tooth__screw{opacity:0}
  .tooth[data-ghost] .tooth__root{opacity:1}
  .tooth[data-drop="1"][data-screw="short"] .tooth__screw,
  .tooth[data-drop="1"][data-screw="long"] .tooth__screw,
  .tooth[data-drop="1"][data-cap="crown"] .tooth__margin,
  .tooth[data-drop="1"][data-cap="veneer"] .tooth__sheen{opacity:1}
  .tooth[data-drop="1"] .tooth__wash{opacity:0}
  .archfx__ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tooth,.tooth__root,.tooth__crown,.tooth__screw,.tooth__sheen,.tooth__margin,.tooth__wash,.tooth__num,.tooth__lines path{transition:none}
}

/* the dock lives only on one-column layouts */
.dock{display:none}

@media (max-width:1100px){
  .planner__grid{grid-template-columns:1fr;grid-template-areas:"chart" "palette" "plan"}
  .palette{position:static}
  .dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;max-width:560px;margin-inline:auto;
    display:flex;align-items:center;gap:10px;
    padding:8px 8px 8px 16px;border-radius:14px;background:rgba(20,20,20,.92);
    border:1px solid rgba(194,163,99,.4);box-shadow:0 12px 34px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transition:transform .22s ease,opacity .22s ease}
  .dock[hidden]{display:none}
  .dock.is-away{transform:translateY(calc(100% + 16px));opacity:0;pointer-events:none}
  .dock__sum{flex:1;font-size:13.5px;color:#c9ced4;line-height:1.3}
  .dock__sum b{color:var(--gold)}
  .dock__wa{flex:none;display:inline-flex;align-items:center;gap:8px;background:#128c33;color:#fff;
    border-radius:9px;padding:11px 14px;font-size:13.5px;font-weight:700}
  .dock__wa svg{width:18px;height:18px}
}
@media (max-width:720px){
  /* one column on a phone: the palette becomes a row of chips above the chart,
     so picking a treatment and tapping teeth happen on the same screen.
     The plan sits between them — a tap on a tooth lands in a list the thumb is
     already looking at, instead of one two screens further down. */
  .planner{padding:18px 0 32px}
  .planner__grid{grid-template-areas:"palette" "plan" "chart";gap:14px}
  .chart,.plan,.palette{padding-inline:14px}
  .chart{padding-top:16px}
  .chart__bar{flex-wrap:nowrap;align-items:center}
  .chart__reset{padding:7px 11px;font-size:12.5px}
  .chart__marking{font-size:14px}
  .chart__marking b{font-size:16px}
  .chart__readout{font-size:13.5px;min-height:20px;margin-top:6px}
  /* let the chart use the card's full width */
  .chart__stage{margin-inline:-8px;padding-bottom:4px}
  .chart__arch-label--upper{top:6px}
  .chart__arch-label--lower{bottom:8px}
  .tooth__num{display:none}
  /* the arches only need to be big enough to tap: shrinking them brings the
     plan up to where a phone can see it without scrolling past the teeth */
  .chart__svg{max-height:min(42vh,312px)}

  .palette{padding:14px 14px 12px}
  .pal__title,.pal__hint,.pal__group{display:none}
  .palette{display:flex;flex-wrap:wrap;gap:8px}
  .pal__item{display:contents}
  .pal__pick{width:auto;order:1;gap:8px;padding:9px 12px 9px 10px;border-radius:999px;font-size:13.5px;
    background:#141414;border:1px solid rgba(255,255,255,.12);transition:border-color .18s,background-color .18s}
  .pal__pick > span{display:none}
  .pal__pick::before{content:attr(data-short);order:1}
  /* Picking a treatment is the moment the chart changes meaning, so the chip
     answers for it: it springs once, throws a gold ring, and then stays lit.
     The class only flips when the choice actually changes, so the spring never
     replays while teeth are being tapped. */
  .pal__pick.is-active{background:#221c12;border-color:var(--gold);color:var(--gold);
    box-shadow:0 0 0 1px rgba(194,163,99,.45), 0 4px 14px rgba(194,163,99,.18);
    animation:palPicked .5s cubic-bezier(.2,.7,.3,1)}
  .pal__pick.is-active .pal__icon{filter:drop-shadow(0 0 5px rgba(194,163,99,.5))}
  .pal__pick.has-picks:not(.is-active){border-color:rgba(194,163,99,.45)}
  @keyframes palPicked{
    0%   {transform:scale(.93);box-shadow:0 0 0 0 rgba(194,163,99,.6), 0 0 0 rgba(194,163,99,0)}
    45%  {transform:scale(1.07);box-shadow:0 0 0 9px rgba(194,163,99,0), 0 0 0 rgba(194,163,99,0)}
    100% {transform:scale(1);box-shadow:0 0 0 1px rgba(194,163,99,.45), 0 4px 14px rgba(194,163,99,.18)}
  }
  /* the controls that drop under the chips arrive with the choice */
  .pal__item.is-active .pal__tools{animation:palTools .34s cubic-bezier(.2,.7,.3,1)}
  @keyframes palTools{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .pal__icon{width:16px;height:22px}
  .pal__icon--arch{width:22px;height:16px}
  .pal__badge{order:2;margin-left:2px;min-width:20px;height:18px;font-size:11px}
  /* the active treatment's controls drop under the chips as one full row */
  .pal__tools{order:3;flex-basis:100%;padding:4px 0 0;gap:8px}
  .pal__reel{width:58px;height:38px;border-radius:8px}
  .pal__reel span{display:none}
  .pal__num{font-size:16px;line-height:36px}
  .pal__step{width:38px;height:38px}
  /* the counter row has five things in it on a 390px screen, so the running
     count gives way first rather than wrapping under the buttons */
  .pal__count{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.25}
  /* back on the phone, where the chips have no counter of their own */
  .pal__clear{display:block;padding:6px 10px;font-size:12px}
  .pal__item:not(.has-picks) .pal__clear{display:none}
  .pal__tools:not([hidden]):not(:has(> :not(.pal__clear))){display:flex}
  .pal__jaw{min-width:0;height:38px}

  .plan__head{flex-direction:column}
  .plan__list li{flex-wrap:wrap}
  .plan__list li .plan__remove{order:2;margin-left:auto}
  .plan__teeth{order:3;width:100%;margin-left:0;text-align:left}
}

/* price-list intro copy */
/* ---- a page's opening text with the offer form beside it ----
   Someone landing on an inner page can ask for a quote without going looking
   for the form, and the page still opens with its own heading rather than a
   form in the banner. The panel is the one the home page's FAQ block uses, so
   nothing new is introduced to look at. */
.lede-offer{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px}
/* The page has to speak before the form does. Left column stretches to the
   panel's height and centres what it holds, so a two-line introduction sits
   against the middle of the panel instead of hanging from the top with a
   drop of empty white under it. */
.lede-offer__text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.lede-offer__text p{max-width:60ch;font-size:16px;line-height:1.7;color:var(--text)}
.lede-offer__text p + p{margin-top:15px}
/* a page that introduces itself says what it is first: the heading is set at
   the price page's scale, one step under the banner, and the paragraph under
   it keeps the measure it already had */
.lede-offer__text h2{font-size:clamp(27px,3.2vw,38px);line-height:1.14;font-weight:700;
  letter-spacing:-.5px;max-width:20ch}
.lede-offer__text h2 + p{margin-top:18px}
/* the opening paragraph carries the page; the ones after it support it */
.lede-offer__text > p:first-of-type{font-size:18px;line-height:1.62}
/* a page whose introduction is a single sentence is making a statement, so it
   is set like one rather than like a footnote under the banner */
.lede-offer__text > p:only-child{max-width:54ch;font-size:19px;line-height:1.6}
/* the panel keeps its own height whatever the column beside it does, and is
   set down a size: beside an introduction it is an offer, not the headline */
.lede-offer .offer{max-width:none;align-self:start;padding:28px 26px 32px}
.lede-offer .offer__title{font-size:24px;line-height:1.22}
.lede-offer .offer form{margin-top:18px;gap:12px}
.section--lede{padding-bottom:40px}

.price-intro{padding:56px 0 40px}
.price-intro h2{font-size:40px;font-weight:700;letter-spacing:-.5px}
.price-intro p{margin-top:22px;font-size:15px;line-height:1.62;color:#2f343a}


/* ==========================================================================
   Phone layout (≤720px): everything that runs in a row on the desktop is
   swiped one card at a time here. The next card peeks past the right edge
   so the strip reads as movable, the purple squares below say where you
   are, and the round arrows do the same job for people who do not swipe.
   ========================================================================== */
/* nothing may push the page sideways: whatever leaks is cut, not scrolled */
html,body{overflow-x:clip}

/* .slider--mobile: a grid on wide screens, a slider on phones */
.slider--mobile .dots,.slider__arrow{display:none}
.slider__nav{display:contents}
@media (min-width:721px){
  .slider--mobile .slider__track{display:grid;overflow:visible;scroll-snap-type:none;cursor:auto;padding-bottom:0}
  /* the endless strip's copies belong to the phone; a grid shows the real
     cards only (they are the ones without aria-hidden) */
  .slider--mobile .slider__track > [aria-hidden="true"]{display:none}
  .tech__grid.slider__track{gap:44px}
  .steps__grid.slider__track{gap:56px}
  .features__row.slider__track{gap:0}
  .features__row .slider__slide+.slider__slide .feature{border-left:1px solid rgba(255,255,255,.14)}
}

@media (max-width:720px){
  /* ---- hero: a landscape photograph with the words on it; the offer form
     rides up over its bottom edge, and the strip below sits straight on it ---- */
  .hero{padding-block:0 14px;background:var(--ink)}
  .hero .container{padding:0 16px;gap:0}
  .hero-copy{aspect-ratio:4/3;margin-inline:-16px;padding:20px 16px 86px;
    background:var(--ink) url("../img/hero.jpg") center/cover no-repeat;
    display:flex;flex-direction:column;justify-content:flex-end}
  .hero-copy::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(2,11,18,0) 45%,rgba(2,11,18,.72) 100%)}
  .hero-copy{position:relative}
  .hero-copy>*{position:relative}
  .hero-eyebrow{font-size:20px}
  .hero-title{font-size:38px}
  .hero-copy .btn-row{display:none}
  .hero__panel{margin:-62px 0 0;padding:20px 18px 18px;
    background:rgba(2,11,18,.94);border:1px solid rgba(194,163,99,.4)}
  .hero .offer__title{font-size:24px}

  /* the opening row stacks: the text first, the form under it */
  .lede-offer{grid-template-columns:1fr;gap:24px}
  .lede-offer__text > p:only-child{font-size:17px;max-width:none}
  .lede-offer .offer{max-width:430px;margin-inline:auto}
  .page-banner{min-height:116px;padding-block:20px}
  .page-banner h1,.page-banner__title{font-size:clamp(22px,6.2vw,26px)}

  .section--lede{padding-bottom:26px}

  /* ---- the vertical rhythm, one step tighter than the desktop one: on a
     phone every band is full width, so the space between them reads as twice
     what the same figure reads as on a wide screen ---- */
  .cta-row{padding:10px 0}
  .section{padding:34px 0}
  .hours{padding:16px 0 14px}
  .intro{padding:34px 0 24px}
  .tech-intro{padding:28px 0 20px}
  .tech{padding:22px 0 26px}
  .gallery{padding:26px 0 6px}
  .blog{padding:32px 0 28px}
  .reviews{padding:36px 0}

  /* ---- sliders ---- */
  .slider--mobile{--per:1;--slide-gap:12px}
  .slider--mobile .dots{display:flex}
  .slider--mobile .slider__track{padding-bottom:4px}

  /* the future of dentistry: three video cards */
  .tech-play{height:auto}

  /* faster · accuracy · comfort · results: one dark panel, stacked */
  .features{padding:18px 0 4px}
  .features__inner{padding:6px 20px}
  .features__row.slider__track{display:grid;grid-template-columns:1fr;gap:0;overflow:visible;
    scroll-snap-type:none;padding-bottom:0;padding-inline:0}
  .features .slider__arrow,.features .dots{display:none}
  .feature{border-left:0;padding:14px 0}
  .features__row .slider__slide+.slider__slide .feature{border-top:1px solid rgba(255,255,255,.14)}
  .feature img{width:44px;height:44px}
  .feature h4{font-size:16px}
  .feature p{font-size:13px;margin-top:4px}

  /* how we work: five steps in order */
  .steps__grid{margin-top:26px}
  .step{padding:22px 18px 26px;border:1px solid var(--gold-line);border-radius:14px;height:100%}
  .step__icon{height:96px}
  .step__icon img{max-height:88px}
  .step h3{margin-top:18px;font-size:19px}
  .step p{font-size:15px;margin-top:10px}

  /* treatments: the dots and the strip line up with the text above */
  .treatments{padding:34px 0 16px}
  .treatments__viewport{width:100%}
  .treatments__intro .btn-row{flex-direction:row;gap:10px}
  .treatments__intro .btn{width:auto;flex:1;min-width:0;font-size:15px;padding:0 12px 0 16px}
  .treatments .dots,.treatments__viewport .slider .dots{justify-content:center}

  /* doctors and teams: one portrait on stage */
  .doctors__head{padding-inline:16px}
  .doctors__stage .badge-10{margin-left:16px}
  .doctors__deck img{max-height:min(420px,58vh);width:auto;max-width:100%;margin-inline:auto;display:block}
  .doctors__deck .doc__name b{font-size:17px}
  .doctors__deck .doc__name span{font-size:13px}

  /* one control row under the strip: ‹ ■ ■ ■ › — two bare chevrons in the
     squares' own purple, on the squares' own centre line. Only three squares
     show at a time. */
  .slider__nav{--arrow:var(--purple);display:flex;align-items:center;justify-content:center;
    gap:2px;padding-top:16px}
  /* room for three squares, kept whether three or fewer are lit, so the
     chevrons never shuffle sideways as the groups change */
  /* several sections pad their own dot row down; inside the control row that
     would drop the squares below the chevrons, so it is reset here at a
     weight those section rules cannot beat */
  .slider .slider__nav .dots{padding:0;gap:9px;justify-content:center;align-items:center;
    position:static;min-width:60px}
  .slider__nav .dots .is-out{display:none}
  /* the box is a thumb's worth of tap area; only the chevron inside is seen */
  .slider__arrow{display:grid;place-items:center;width:34px;height:34px;background:none;
    color:var(--arrow);transition:opacity .18s,color .18s}
  .slider__arrow:hover{color:var(--purple-dark)}
  .slider__arrow svg{width:11px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;
    stroke-linecap:round;stroke-linejoin:round}
  .slider__arrow[disabled]{opacity:.3}
  /* on the dark bands the squares are a lighter purple, so the chevrons are too */
  .tech .slider__nav,.doctors__deck .slider__nav{--arrow:#8b2fb5}
  .tech .slider__arrow:hover,.doctors__deck .slider__arrow:hover{color:#a34fd0}
  .doctors__deck .slider__nav{padding-top:18px}
  .treatments .dots,.treatments__viewport .slider .dots,.reviews__list .slider .dots{justify-content:center}
  .blog__foot{flex-wrap:wrap;gap:16px}

  /* ---- footer: logos centred, three fold-out lists, contact always in reach ---- */
  .site-footer{padding:44px 0 28px}
  .site-footer__grid{grid-template-columns:1fr;gap:0}
  .footer-brand{text-align:center;padding-bottom:26px}
  .footer-brand img.logo{width:220px;margin-inline:auto}
  .footer-brand .marks{margin-top:26px;justify-items:center;gap:22px}
  .footer-brand .marks .ht{height:90px}
  .footer-brand .marks .cert{width:160px}
  .footer-col{border-top:1px solid rgba(255,255,255,.14)}
  .footer-col__head{margin:0}
  .footer-col__toggle{pointer-events:auto;padding:16px 4px;font-size:16px}
  .footer-col__toggle::after{opacity:1}
  .footer-col__toggle[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:4px}
  .footer-col__body{display:none;padding:0 4px 16px}
  .footer-col.is-open .footer-col__body{display:block}
  .footer-contact .footer-col__body a{margin-top:12px}
  .footer-quick{display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:22px 0 4px;border-top:1px solid rgba(255,255,255,.14)}
  .footer-quick a{font-size:17px;font-weight:600;color:#fff}
  .footer-quick a:hover{color:var(--gold)}
  .site-footer__bar{margin-top:26px}
  .site-footer__bar span{font-size:12.5px}
}

/* ==========================================================================
   Fixed contact bar, on every page.
   A phone gets a two-button bar along the bottom — request a call, WhatsApp;
   wider screens get WhatsApp alone as a pill in the bottom-right corner.
   Each opens a small card above itself; the WhatsApp card carries the
   clinic's live status.
   ========================================================================== */
.fixbar{position:fixed;z-index:60;right:24px;bottom:24px;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
/* the same buttons as everywhere else on the site: square-cornered, arrowed */
.fixbar__btn{display:inline-flex;align-items:center;gap:12px;min-width:200px;height:48px;
  padding:0 15px 0 20px;border-radius:6px;font-size:16px;font-weight:600;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:background-color .18s}
.fixbar__btn svg{width:20px;height:20px;flex:none}
.fixbar__btn span{flex:1;text-align:left}
.fixbar__call{display:none;background:var(--purple)}
.fixbar__call:hover{background:var(--purple-dark)}
.fixbar__wa{background:var(--wa)}
.fixbar__wa:hover{background:var(--wa-dark)}

/* ---- the heartbeat ----
   The bar has to be noticed without nagging, so it beats twice and then rests
   for two seconds, the way a pulse does. The ring is pushed out of a pseudo
   element rather than the button's own box, so nothing around it reflows, and
   the two buttons on a phone are offset from each other so they do not thump
   in unison. */
.fixbar__btn{position:relative;animation:fixbarBeat 2.8s ease-in-out infinite}
.fixbar__btn::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;box-shadow:0 0 0 0 currentColor;
  animation:fixbarRing 2.8s cubic-bezier(.25,0,.2,1) infinite}
.fixbar__wa::after{color:var(--wa)}
.fixbar__call::after{color:var(--purple)}
.fixbar__call,.fixbar__call::after{animation-delay:.4s}
/* a pressed or hovered button is already answering; it stops beating */
.fixbar__btn:hover,.fixbar__btn:focus-visible,
.fixbar__btn[aria-expanded="true"]{animation-play-state:paused}
.fixbar__btn:hover::after,.fixbar__btn:focus-visible::after,
.fixbar__btn[aria-expanded="true"]::after{animation:none;box-shadow:none}

@keyframes fixbarBeat{
  0%,  100% {transform:scale(1)}
  6%        {transform:scale(1.05)}
  13%       {transform:scale(1)}
  19%       {transform:scale(1.032)}
  26%       {transform:scale(1)}
}
@keyframes fixbarRing{
  0%   {box-shadow:0 0 0 0 currentColor;opacity:.5}
  55%  {box-shadow:0 0 0 15px currentColor;opacity:0}
  100% {box-shadow:0 0 0 0 currentColor;opacity:0}
}
.fixbar__pop{position:absolute;right:0;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 32px));
  background:var(--ink);color:#fff;border:1px solid var(--gold-line);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);transform-origin:bottom right;
  animation:fixbar-in .2s ease}
.fixbar__pop[hidden]{display:none}
@keyframes fixbar-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.fixbar__close{position:absolute;top:12px;right:12px;width:34px;height:34px;
  display:grid;place-items:center;color:#fff;font-size:26px;line-height:1;border-radius:50%}
.fixbar__close:hover{background:rgba(255,255,255,.18)}

/* the card is shaped like the app it opens: a green banner carrying whoever is
   at the desk, the message on the ground a chat is read on, and one green
   button along the bottom */
.fixbar__pop--wa{background:#ece5dd;border-color:transparent;border-radius:12px}
.fixbar__head{display:flex;align-items:center;gap:14px;padding:18px 54px 18px 18px;
  background:var(--wa);color:#fff}
.fixbar__avatar{position:relative;flex:none;width:56px;height:56px;border-radius:50%;background:#fff;
  display:grid;place-items:center}
.fixbar__avatar img{width:46px;height:auto}
/* the presence dot straddles the white portrait and the green banner, so it
   carries its own white ring to stay legible on either */
.fixbar__avatar::after{content:"";position:absolute;right:0;bottom:1px;width:14px;height:14px;
  border-radius:50%;background:#9aa0a7;border:2.5px solid #fff}
.fixbar.is-online .fixbar__avatar::after{background:#12b950}
.fixbar__who{min-width:0}
.fixbar__name{font-family:var(--f-display);font-size:20px;font-weight:700;color:#fff;
  line-height:1.15}
.fixbar__role{margin-top:2px;font-size:14px;color:rgba(255,255,255,.86)}
/* the ground a chat is read on, with the faint weave the app has */
.fixbar__chat{padding:18px;background:#ece5dd;
  background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);
  background-size:13px 13px}
.fixbar__bubble{display:inline-block;max-width:94%;background:#fff;color:#111;
  border-radius:2px 10px 10px 10px;padding:11px 14px;font-size:14px;line-height:1.5;
  box-shadow:0 1px 1px rgba(0,0,0,.12)}
.fixbar__from{display:block;margin-bottom:3px;font-size:13.5px;font-weight:700;color:#128c4a}
.fixbar__bubble small{display:block;margin-top:6px;font-size:11px;color:#6f747b}
.fixbar.is-online .fixbar__bubble small{color:#128c4a}
/* three dots in an empty bubble — how a chat shows that someone is writing */
.fixbar__typing{display:inline-flex;align-items:center;gap:5px;
  background:#fff;border-radius:2px 10px 10px 10px;padding:14px 16px}
.fixbar__typing i{width:7px;height:7px;border-radius:50%;background:#9aa0a7;
  animation:typingDot 1.1s infinite ease-in-out}
.fixbar__typing i:nth-child(2){animation-delay:.15s}
.fixbar__typing i:nth-child(3){animation-delay:.3s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.fixbar__go{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0;padding:0 20px;height:58px;background:#fff;
  color:var(--wa);font-size:16.5px;font-weight:700;transition:background-color .18s}
.fixbar__pop--wa .fixbar__go{margin:14px;height:52px;border-radius:8px;
  background:var(--wa);color:#fff}
.fixbar__pop--wa .fixbar__go:hover{background:var(--wa-dark)}
.fixbar__go svg{width:22px;height:22px;flex:none}
.fixbar__go span{flex:none}
/* the call-back card is the offer form in miniature, on the same dark ground */
.fixbar__pop--call{display:none;background:var(--ink);border:1px solid var(--gold-line)}
.fixbar__pop--call .fixbar__close{color:var(--gold);border:1px solid rgba(194,163,99,.45);
  border-radius:2px;width:32px;height:32px;top:10px;right:10px}
.fixbar__pop--call .fixbar__close:hover{background:rgba(194,163,99,.15)}
.fixbar__pop .offer{max-width:none;padding:20px 18px 18px;background:none}
.fixbar__pop .offer__title{font-size:24px;padding-right:40px}
.fixbar__pop .offer p{margin-top:8px;font-size:14px;line-height:1.5;color:#c9ced4}
.fixbar__pop .offer form{margin-top:14px}
@media (max-width:720px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .fixbar{left:0;right:0;bottom:0;flex-direction:row;align-items:stretch;gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(2,11,18,.96);border-top:1px solid var(--gold-line);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .fixbar__btn{flex:1;min-width:0;height:48px;padding:0 14px;box-shadow:none;font-size:15px;
    justify-content:center;white-space:nowrap}
  /* side by side there is no room to swell into, so the beat is shallower */
  .fixbar__btn{animation-name:fixbarBeatTight}
  @keyframes fixbarBeatTight{
    0%,100%{transform:scale(1)}
    6%     {transform:scale(1.028)}
    13%    {transform:scale(1)}
    19%    {transform:scale(1.018)}
    26%    {transform:scale(1)}
  }
  .fixbar__btn span{flex:none}
  /* the phone gets the second button back — and only the phone */
  .fixbar__call{display:inline-flex}
  .fixbar__pop--call{display:block}
  .fixbar__pop{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));
    width:auto;transform-origin:bottom center}
  /* the price planner's own summary bar rides above the contact bar */
  .dock{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .pal__pick.is-active,.pal__item.is-active .pal__tools{animation:none}
  .fixbar__pop{animation:none}
  .fixbar__btn,.footer-col__toggle::after{transition:none}
  .fixbar__typing i{animation:none}
  /* no heartbeat for anyone who has asked the system to hold still */
  .fixbar__btn,.fixbar__btn::after{animation:none;transform:none;box-shadow:none}
}