/* ==========================================================================
   Clinova Dental — design system
   Palette derived from the brand mark: aqua #ACD8E1, mint #8FC5C0, ink #3D4245
   ========================================================================== */

/* ---------- Fonts (self-hosted; no third-party requests, GDPR-safe) ------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------------------------------- Tokens -------------------------------- */
:root{
  /* brand */
  --ink:#123037;            /* deep petrol — dark surfaces & headings */
  --ink-2:#0C2429;
  --teal:#2F7C86;           /* primary action — 4.9:1 on white */
  --teal-700:#245F68;
  --teal-050:#EAF4F5;
  --mint:#8FC5C0;
  --aqua:#ACD8E1;
  --gold:#AD8548;           /* premium accent — 3.4:1 on white, meets 1.4.11 */
  --gold-ink:#7E6234;       /* accessible gold for text (5.7:1 on white) */
  --gold-deep:#8A6C3B;      /* gold that carries white text at 4.9:1 */
  --wa:#0E7268;             /* WhatsApp green, darkened to 5.8:1 with white */
  --wa-dark:#0B6259;

  /* neutrals */
  --bg:#FFFFFF;
  --mist:#EDF4F5;      /* deep enough that a band change is visible */
  --surface:#FFFFFF;
  --line:#DDE8E9;
  --line-soft:#EAF1F2;
  --text:#2C3438;           /* 12.1:1 on white */
  --text-soft:#5A6469;      /* 6.2:1 on white */
  --text-invert:#FFFFFF;
  --text-invert-soft:#C3D6D9;
  --danger:#B3261E;
  --success:#1F6B4A;

  /* type scale */
  --f-display:'Jost',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s-xs:.8125rem; --s-sm:.9375rem; --s-base:1.0625rem; --s-lg:1.1875rem;
  --s-xl:1.375rem; --s-2xl:1.75rem; --s-3xl:2.25rem; --s-4xl:3rem; --s-5xl:3.75rem;

  /* space (4/8 rhythm) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;

  --wrap:1200px; --wrap-narrow:760px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(18,48,55,.06),0 1px 3px rgba(18,48,55,.05);
  --sh-2:0 6px 16px rgba(18,48,55,.07),0 2px 6px rgba(18,48,55,.05);
  --sh-3:0 18px 46px rgba(18,48,55,.12),0 4px 12px rgba(18,48,55,.06);
  --dur:220ms; --ease:cubic-bezier(.22,.61,.36,1);

  --z-header:100; --z-drawer:200; --z-float:90; --z-skip:300;

  /* Sticky offsets derive from this instead of a magic number. */
  --header-h:76px;
}
@media (min-width:1024px){:root{--header-h:88px}}

/* ---------------------------------- Reset --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);
  font-size:var(--s-base);line-height:1.7;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga";overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--teal-700);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--teal)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:3px}
::selection{background:var(--aqua);color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}

/* -------------------------------- Typography ------------------------------ */
/* Jost's elegance lives at the light end and at scale — 400/500 everywhere
   was leaving the display face doing nothing. */
h1,h2,h3,h4,h5{font-family:var(--f-display);color:var(--ink);font-weight:500;
  line-height:1.15;letter-spacing:-.012em;margin:0 0 var(--sp-4);text-wrap:balance}
h1{font-size:clamp(2.35rem,1.25rem + 3.7vw,4.35rem);font-weight:300;
  letter-spacing:-.026em;line-height:1.05}
h2{font-size:clamp(1.85rem,1.25rem + 2.2vw,2.7rem);font-weight:300;letter-spacing:-.02em}
h3{font-size:clamp(1.25rem,1.05rem + .7vw,var(--s-xl));font-weight:500}
h4{font-size:var(--s-lg);font-weight:500}
p{margin:0 0 var(--sp-4);max-width:72ch}
strong{font-weight:600;color:var(--ink)}
small{font-size:var(--s-xs)}

.kicker{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-display);
  font-size:.75rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 var(--sp-4)}
.kicker::before{content:"";width:28px;height:1px;background:var(--gold);flex:none}
.kicker--center{justify-content:center}
.kicker--light{color:var(--aqua)}
.kicker--light::before{background:var(--aqua)}

.lede{font-size:clamp(1.0625rem,1rem + .35vw,var(--s-lg));color:var(--text-soft);line-height:1.75;max-width:64ch}
.eyebrow{font-family:var(--f-display);font-size:var(--s-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.rule{width:64px;height:2px;background:var(--gold);border:0;margin:var(--sp-5) 0}
.center{text-align:center}
.center .lede,.center p{margin-left:auto;margin-right:auto}
.center .rule{margin-left:auto;margin-right:auto}

/* --------------------------------- Layout --------------------------------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media (min-width:768px){.wrap{width:min(100% - 4rem,var(--wrap))}}
.wrap--narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:clamp(3.5rem,2rem + 6vw,var(--sp-9))}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,var(--sp-7))}
/* One tier wider, for the two sections that open a chapter. */
.section--wide{padding-block:clamp(4.5rem,2.5rem + 8vw,9rem)}
/* #F4F9F9 against white is 1.06:1 — the band change was invisible. Deeper
   tint plus a declared hairline so the rhythm is actually legible. */
.section--mist{background:var(--mist);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.section--mist + .section--mist{border-top:0}
.section--ink{position:relative;overflow:hidden;background:var(--ink);color:var(--text-invert-soft)}
/* The arch, full-bleed and cropped, as the brand's structural device. */
.section--ink::before{content:"";position:absolute;right:-6%;top:50%;translate:0 -50%;
  width:min(56%,720px);aspect-ratio:324/211;pointer-events:none;opacity:.09;
  background:currentColor;color:var(--aqua);
  -webkit-mask:url(../img/arch.svg) no-repeat center/contain;
          mask:url(../img/arch.svg) no-repeat center/contain}
@media (max-width:880px){.section--ink::before{width:120%;right:-30%;opacity:.07}}
.section--ink>*{position:relative;z-index:1}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink p{color:var(--text-invert-soft)}
.section--ink a{color:#fff}
/* Section heads are centred: kicker, then heading, then the lede beneath it.
   Held to a readable measure and centred in the band, so the space left over
   falls evenly on both sides instead of pooling on the right. */
.section-head{max-width:64ch;margin:0 auto var(--sp-7);text-align:center}
.section-head>.kicker{justify-content:center}
.section-head>.lede,.section-head>p{margin-left:auto;margin-right:auto}

/* Body prose is held to a readable measure by design; centring it turns one
   large hole on the right into even margins on both sides. */
.wrap>.prose{margin-inline:auto}

/* Grid and flex children default to min-width:auto, which means a wide child
   (a table with a min-width) forces the whole column open and pushes the text
   beside it off-screen. Every layout child must be allowed to shrink. */
.grid>*,.split>*,.tx-layout>*,.contact-grid>*,.steps>*,.hero__grid>*{min-width:0}
.prose,.table-scroll{max-width:100%}

.grid{display:grid;gap:var(--sp-5)}
@media (min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:880px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){.g-4{grid-template-columns:repeat(4,1fr)}}

.split{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:960px){
  .split{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,4vw,4.5rem)}
  .split--wide-left{grid-template-columns:1.25fr .75fr}
  .split--reverse>*:first-child{order:2}
}

/* --------------------------------- Buttons -------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:.75rem 1.6rem;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:var(--f-display);font-size:var(--s-sm);font-weight:500;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;background:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}

.btn--primary{background:var(--teal);color:#fff;box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--teal-700);color:#fff;box-shadow:var(--sh-2)}
/* Teal on the ink bands is only 2.89:1 — below the 3:1 floor for a control,
   and visibly quieter than the outline button next to it. Aqua is 9.09:1
   and finally gives the logo's lightest colour a job. */
.section--ink .btn--primary,.ctaband .btn--primary,.aside-card--ink .btn--primary{
  background:var(--aqua);color:var(--ink-2);box-shadow:none}
.section--ink .btn--primary:hover,.ctaband .btn--primary:hover,
.aside-card--ink .btn--primary:hover{background:#C8E6EE;color:var(--ink-2)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-700);background:var(--teal-050)}
.btn--outline-light{border-color:rgba(255,255,255,.42);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-dark);color:#fff}
.btn--gold{background:var(--gold-deep);color:#fff}
.btn--gold:hover{background:var(--gold-ink);color:#fff}
.btn--sm{min-height:40px;padding:.5rem 1.1rem;font-size:var(--s-xs)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.btn-row--center{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:.45em;font-family:var(--f-display);
  font-weight:500;font-size:var(--s-sm);letter-spacing:.03em;color:var(--teal-700);text-decoration:none}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------------------------------- Skip ---------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--ink);
  color:#fff;padding:.85rem 1.25rem;border-radius:0 0 var(--r-sm) 0;text-decoration:none}
.skip-link:focus{left:0;color:#fff}

/* --------------------------------- Topbar --------------------------------- */
.topbar{background:var(--ink);color:var(--text-invert-soft);font-size:var(--s-xs)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:42px;flex-wrap:wrap}
.topbar__list{display:flex;align-items:center;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.topbar__list a{color:var(--text-invert-soft);text-decoration:none;display:inline-flex;align-items:center;gap:.45em}
.topbar__list a:hover{color:#fff}
.topbar__list svg{width:15px;height:15px;color:var(--mint)}
@media (max-width:719px){.topbar__hide-sm{display:none}}

/* Language switcher */
.langsw{display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);padding:2px}
/* Visually a small pill, but a full 44px hit area — this is the only
   language control on the site. */
.langsw a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.25rem .6rem;border-radius:var(--r-pill);
  font-family:var(--f-display);font-size:.7rem;font-weight:500;letter-spacing:.1em;
  text-decoration:none;color:var(--text-invert-soft);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
@media (min-width:1024px){.langsw a{min-height:32px}}
.langsw a[aria-current="true"]{background:var(--mint);color:var(--ink-2)}
.langsw a:not([aria-current]):hover{background:rgba(255,255,255,.14);color:#fff}

/* --------------------------------- Header --------------------------------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);transition:box-shadow var(--dur) var(--ease)}
.site-header.is-stuck{box-shadow:var(--sh-2)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:76px}
@media (min-width:1024px){.header__in{min-height:88px}}

.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__mark{width:34px;height:39px;flex:none}
/* Original supplied artwork; height-driven so the lockup keeps its ratio. */
.brand__logo{display:block;width:auto;height:40px;flex:none}
@media (min-width:1024px){.brand__logo{height:54px}}
.footer .brand__logo{height:52px}
.drawer__head .brand__logo{height:36px}
@media (min-width:1024px){.brand__mark{width:40px;height:46px}}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--f-display);font-size:1.22rem;font-weight:500;letter-spacing:.19em;color:var(--ink)}
.brand__sub{font-family:var(--f-display);font-size:.62rem;font-weight:300;letter-spacing:.34em;color:var(--text-soft);margin-top:4px}
@media (min-width:1024px){.brand__name{font-size:1.45rem}.brand__sub{font-size:.7rem}}
.footer .brand__name,.footer .brand__sub{color:#fff}
.footer .brand__sub{color:var(--text-invert-soft)}

/* Primary nav. The breakpoint is 1280, not 1024: German labels
   ("Kostenloser Behandlungsplan", "Behandlungsreise") need ~1250px and were
   pushing the CTA off-screen between 1024 and 1240 with no burger fallback. */
.nav{display:none}
@media (min-width:1280px){.nav{display:flex;align-items:center;gap:2px}}
/* Flex, so the dropdown chevron can never wrap onto its own line. */
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;padding:.65rem .85rem;border-radius:var(--r-sm);
  font-family:var(--f-display);font-size:.95rem;font-weight:400;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav__link:hover{color:var(--teal-700);background:var(--teal-050)}
.nav__link[aria-current="page"]{color:var(--teal-700);font-weight:500}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;background:var(--gold)}
.nav__chev{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.nav__item[data-open="true"] .nav__chev{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(94vw,640px);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:var(--sp-5);opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.nav__item[data-open="true"] .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;list-style:none;margin:0;padding:0}
/* A short menu does not need the 640px treatment panel. */
.mega--plain{width:max-content;min-width:200px;padding:var(--sp-3)}
.mega--plain .mega__grid{grid-template-columns:1fr}
.mega--plain .mega__link{padding:.55rem .8rem}
.mega__link{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .7rem;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);transition:background var(--dur) var(--ease)}
.mega__link:hover{background:var(--mist);color:var(--teal-700)}
.mega__link svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.mega__label{font-family:var(--f-display);font-size:.92rem;font-weight:500;line-height:1.3}
.mega__desc{display:block;font-size:.78rem;color:var(--text-soft);line-height:1.45;margin-top:2px}
.mega__foot{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap}

/* The CTA appears from tablet up so there is always a visible primary action;
   below 1280 it drops the secondary WhatsApp button and the longer label. */
.header__cta{display:none}
@media (min-width:600px){
  .header__cta{display:flex;align-items:center;gap:var(--sp-3);flex:0 1 auto;min-width:0}
}
@media (max-width:1279px){.header__cta .btn--ghost{display:none}}
.cta-short{display:none}
@media (max-width:1279px){.cta-long{display:none}.cta-short{display:inline}}

/* Burger */
.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;flex:none}
@media (min-width:1280px){.burger{display:none}}
.burger span{position:relative;display:block;width:20px;height:1.5px;background:var(--ink)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;
  background:var(--ink);transition:transform var(--dur) var(--ease),top var(--dur) var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
.drawer[data-open="true"]{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(12,36,41,.55);opacity:0;transition:opacity var(--dur) var(--ease)}
.drawer[data-open="true"] .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(92vw,400px);background:#fff;
  box-shadow:var(--sh-3);transform:translateX(100%);transition:transform 280ms var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:max(var(--sp-6),env(safe-area-inset-bottom))}
.drawer[data-open="true"] .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:#fff;z-index:1}
.drawer__close{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer}
.drawer__close svg{width:20px;height:20px}
.drawer__body{padding:var(--sp-4) var(--sp-5)}
.mnav{list-style:none;margin:0;padding:0}
.mnav>li{border-bottom:1px solid var(--line-soft)}
.mnav a,.mnav button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;min-height:52px;padding:.75rem 0;font-family:var(--f-display);font-size:1.05rem;
  color:var(--ink);text-decoration:none;background:none;border:0;text-align:left;cursor:pointer}
.mnav a[aria-current="page"]{color:var(--teal-700);font-weight:500}
.mnav button svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.mnav button[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__sub{list-style:none;margin:0 0 var(--sp-3);padding:0;display:none}
.mnav__sub[data-open="true"]{display:block}
.mnav__sub a{min-height:46px;font-size:.95rem;color:var(--text-soft);padding-left:var(--sp-4);
  border-left:2px solid var(--line)}
.mnav__sub a:hover{color:var(--teal-700);border-left-color:var(--mint)}
.drawer__cta{padding:var(--sp-5);display:grid;gap:var(--sp-3);border-top:1px solid var(--line-soft);margin-top:auto}

/* ---------------------------------- Hero ---------------------------------- */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(1100px 620px at 88% -14%,rgba(172,216,225,.55),transparent 62%),
   radial-gradient(760px 520px at 4% 8%,rgba(143,197,192,.26),transparent 58%),
   linear-gradient(180deg,#FBFEFE 0%,#F1F8F9 100%)}
.hero__in{position:relative;z-index:2;padding-block:clamp(3rem,2rem + 6vw,5.5rem)}
.hero__grid{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:1000px){.hero__grid{grid-template-columns:1.08fr .92fr;gap:clamp(3rem,4.5vw,5rem)}}
.hero h1{margin-bottom:var(--sp-5)}
.hero h1 em{font-style:normal;color:var(--teal);position:relative;white-space:nowrap}
.hero__usps{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-3)}
@media (min-width:560px){.hero__usps{grid-template-columns:repeat(2,1fr)}}
.hero__usps li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--s-sm);color:var(--text)}
.hero__usps svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:3px}

/* Hero visual: a specimen of the written plan the clinic actually sends.
   The product is the document, so the document is the hero image. */
.hero__art{position:relative;padding:1.25rem .75rem 1.75rem}
.plan-sheet{position:absolute;inset:1.25rem .75rem 1.75rem;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line)}
.plan-sheet--back{transform:rotate(3.5deg);opacity:.5;box-shadow:var(--sh-1)}
.plan-sheet--mid{transform:rotate(-2deg);opacity:.8;box-shadow:var(--sh-2)}
.plan-sheet--front{position:relative;inset:auto;transform:rotate(-.6deg);
  box-shadow:0 30px 60px -22px rgba(18,48,55,.32),0 4px 14px rgba(18,48,55,.06);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);margin:0;z-index:2}
@media (prefers-reduced-motion:reduce){
  .plan-sheet--front,.plan-sheet--mid,.plan-sheet--back{transform:none}
}
.plan__head{display:flex;align-items:center;gap:.7rem;padding-bottom:var(--sp-4);
  border-bottom:1.5px solid var(--ink);margin-bottom:var(--sp-4)}
.plan__head img{flex:none}
.plan__title strong{display:block;font-family:var(--f-display);font-size:1.15rem;
  font-weight:500;letter-spacing:.01em;color:var(--ink);line-height:1.2}
.plan__title span{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-soft);margin-top:3px}

.plan__days{list-style:none;margin:0 0 var(--sp-5);padding:0}
.plan__days li{display:grid;grid-template-columns:4.4rem 1fr;gap:.75rem;align-items:baseline;
  padding:.48rem 0;border-bottom:1px dashed var(--line)}
.plan__days li:last-child{border-bottom:0}
.plan__days .k{font-family:var(--f-display);font-size:var(--s-xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700);font-variant-numeric:tabular-nums}
.plan__days .v{font-size:var(--s-sm);color:var(--text)}

.plan__meta{margin:0 0 var(--sp-4);padding:var(--sp-4) 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:.45rem}
.plan__meta>div{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline}
.plan__meta dt{font-size:var(--s-xs);color:var(--text-soft);margin:0}
.plan__meta dd{margin:0;font-family:var(--f-display);font-size:var(--s-sm);font-weight:500;
  color:var(--ink);text-align:right}

.plan__total{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline;
  margin:0 0 var(--sp-4);padding:.85rem 0 0;border-top:1.5px solid var(--ink);max-width:none}
.plan__total>span{font-size:var(--s-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft)}
.plan__total strong{font-family:var(--f-display);font-size:var(--s-sm);font-weight:500;
  color:var(--ink);text-align:right;max-width:18ch}
.plan__foot{font-size:var(--s-xs);line-height:1.55;color:var(--text-soft);margin:0;max-width:none}

.hero__blob{position:absolute;inset:-14% -14% auto auto;width:82%;aspect-ratio:1;z-index:0;
  background:linear-gradient(140deg,var(--aqua),var(--mint));border-radius:58% 42% 46% 54%/48% 52% 48% 52%;
  filter:blur(3px);opacity:.42}
.factlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.factlist li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:.7rem 0;border-bottom:1px dashed var(--line);font-size:var(--s-sm)}
.factlist li:last-child{border-bottom:0}
.factlist dt,.factlist .k{color:var(--text-soft)}
.factlist .v{font-family:var(--f-display);font-weight:500;color:var(--ink);text-align:right}

/* Trust strip */
.trust{border-top:1px solid var(--line-soft);background:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (min-width:880px){.trust__grid{grid-template-columns:repeat(4,1fr)}}
.trust__cell{padding:var(--sp-6) var(--sp-4);text-align:center;border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.trust__cell:nth-child(2n){border-right:0}
@media (min-width:880px){
  .trust__cell{border-bottom:0}
  .trust__cell:nth-child(2n){border-right:1px solid var(--line-soft)}
  .trust__cell:last-child{border-right:0}
}
.trust__num{font-family:var(--f-display);font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);
  font-weight:400;color:var(--teal);line-height:1;font-variant-numeric:tabular-nums}
.trust__label{display:block;margin-top:.6rem;font-size:var(--s-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-soft)}

/* ---------------------------------- Cards --------------------------------- */
/* A 1.25:1 border made the cards barely exist as objects. Slightly stronger
   edge, a resting shadow, and a real hover reward. */
.card{background:var(--surface);border:1px solid #D3E2E4;border-radius:var(--r-md);
  padding:var(--sp-6);height:100%;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(18,48,55,.03);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:var(--mint);box-shadow:0 14px 30px -12px rgba(18,48,55,.16)}
.card:hover .link-arrow svg{transform:translateX(4px)}
.card__icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--teal-050);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);flex:none}
.card__icon svg{width:26px;height:26px;color:var(--teal)}
.card h3{margin-bottom:var(--sp-2)}
.card p{color:var(--text-soft);font-size:var(--s-sm);margin-bottom:var(--sp-4)}
.card__foot{margin-top:auto;padding-top:var(--sp-2)}

/* full-card link */
.card--link{position:relative}
.card--link .stretch::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.card--link:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.card--link:hover{transform:none}}

.card--ghost{background:transparent;border-color:rgba(255,255,255,.16)}
.section--ink .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14)}
.section--ink .card:hover{border-color:var(--mint)}
.section--ink .card p{color:var(--text-invert-soft)}
.section--ink .card__icon{background:rgba(143,197,192,.16)}
.section--ink .card__icon svg{color:var(--mint)}

/* Numbered steps */
.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:var(--sp-5)}
@media (min-width:880px){.steps--4{grid-template-columns:repeat(4,1fr)}.steps--3{grid-template-columns:repeat(3,1fr)}}
/* The number was smaller than the body text it introduced. It is a sequence,
   so it gets to look like one: a hanging numeral on a shared rail. */
.steps{position:relative}
.steps li{counter-increment:step;position:relative;padding-top:4.1rem}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;top:-.4rem;left:0;
  font-family:var(--f-display);font-size:clamp(2.4rem,3.4vw,3.2rem);font-weight:300;
  line-height:1;letter-spacing:-.02em;color:var(--aqua);font-variant-numeric:tabular-nums}
.steps li::after{content:"";position:absolute;top:3.1rem;left:0;width:28px;height:1px;background:var(--gold)}
.steps h3{font-size:var(--s-lg);margin-bottom:var(--sp-2)}
.steps p{font-size:var(--s-sm);color:var(--text-soft);margin:0}
.section--ink .steps li::before{color:var(--mint)}
.section--ink .steps li::after{background:var(--aqua)}
/* One hairline behind the whole row so it reads as a timeline. */
@media (min-width:880px){
  .steps::before{content:"";position:absolute;left:0;right:0;top:1.35rem;height:1px;
    background:var(--line);z-index:0}
  .section--ink .steps::before{background:rgba(255,255,255,.16)}
  .steps li{z-index:1}
}

/* Feature list with checks */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--s-sm)}
.checks svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:3px}
.section--ink .checks svg{color:var(--mint)}
@media (min-width:640px){.checks--2{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------- Accordion ------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  padding:1.15rem 0;cursor:pointer;list-style:none;font-family:var(--f-display);
  font-size:var(--s-lg);font-weight:500;color:var(--ink);min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-700)}
.faq summary .ic{width:22px;height:22px;flex:none;margin-top:4px;color:var(--teal);
  transition:transform var(--dur) var(--ease)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq__a{padding:0 0 1.3rem;max-width:76ch}
.faq__a p:last-child{margin-bottom:0}
.faq__a p{color:var(--text-soft)}

/* -------------------------------- CTA band -------------------------------- */
.ctaband{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.ctaband::after{content:"";position:absolute;right:-6%;bottom:-46%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(143,197,192,.34),transparent 66%);pointer-events:none}
.ctaband__in{position:relative;z-index:1;display:grid;gap:var(--sp-6);align-items:center;
  padding-block:clamp(3rem,2rem + 4vw,4.5rem)}
@media (min-width:900px){.ctaband__in{grid-template-columns:1.15fr .85fr}}
.ctaband h2{color:#fff;margin-bottom:var(--sp-3)}
.ctaband p{color:var(--text-invert-soft);margin-bottom:0}
.ctaband .btn-row{margin-top:0}
@media (min-width:900px){.ctaband .btn-row{justify-content:flex-end}}

/* --------------------------------- Prose ---------------------------------- */
.prose{max-width:76ch}
.prose>*:first-child{margin-top:0}
.prose h2{margin-top:var(--sp-7);font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.prose h3{margin-top:var(--sp-6);font-size:var(--s-xl)}
.prose p,.prose li{color:var(--text)}
.prose ul,.prose ol{margin:0 0 var(--sp-5);padding-left:1.15rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--teal)}
.prose blockquote{margin:var(--sp-6) 0;padding:var(--sp-5) var(--sp-6);background:var(--mist);
  border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:var(--sp-5) 0;font-size:var(--s-sm)}
.prose th,.prose td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--f-display);font-weight:500;color:var(--ink);background:var(--mist)}
.prose img{border-radius:var(--r-md);margin:var(--sp-5) 0}

/* Table wrapper for small screens. Focusable so keyboard users can scroll it,
   with a fade on the right edge to signal that content continues. */
.table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.table-scroll:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.table-scroll table{margin:0;min-width:520px;width:100%;border-collapse:collapse}
/* These tables live outside .prose, so they need their own cell styling. */
.table-scroll th,.table-scroll td{text-align:left;padding:.95rem 1.15rem;
  border-bottom:1px solid var(--line-soft);font-size:var(--s-sm);vertical-align:top}
.table-scroll thead th{font-family:var(--f-display);font-size:var(--s-xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
  background:var(--mist);border-bottom:1px solid var(--line);white-space:nowrap}
.table-scroll tbody th{font-family:var(--f-display);font-weight:500;color:var(--ink)}
.table-scroll tbody tr:last-child th,.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll tbody tr:hover{background:var(--mist)}
.table-scroll td:last-child{font-family:var(--f-display);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.table-scroll th:first-child,.table-scroll td:first-child{padding-left:1.25rem}
.table-scroll th:last-child,.table-scroll td:last-child{padding-right:1.25rem}
.table-hint{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 0;
  font-size:var(--s-xs);color:var(--text-soft)}
.table-hint svg{width:15px;height:15px;flex:none}
@media (min-width:760px){.table-hint{display:none}}

/* --------------------------------- Pagehead ------------------------------- */
.pagehead{position:relative;overflow:hidden;background:
   radial-gradient(900px 460px at 82% -30%,rgba(172,216,225,.5),transparent 62%),
   linear-gradient(180deg,#FBFEFE,#F1F7F8);
  border-bottom:1px solid var(--line-soft);padding-block:clamp(2.5rem,1.5rem + 4vw,4.25rem)}
/* The arch fills the right-hand space every page head used to leave empty. */
.pagehead::after{content:"";position:absolute;right:-4%;bottom:-38%;width:min(38%,420px);
  aspect-ratio:324/211;pointer-events:none;opacity:.16;background:var(--teal);
  -webkit-mask:url(../img/arch.svg) no-repeat center/contain;
          mask:url(../img/arch.svg) no-repeat center/contain}
@media (max-width:900px){.pagehead::after{display:none}}
.pagehead>*{position:relative;z-index:1}
.pagehead h1{margin-bottom:var(--sp-4)}
.pagehead .lede{margin-bottom:0}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;margin:0 0 var(--sp-5);
  padding:0;font-size:var(--s-xs);color:var(--text-soft)}
.crumbs a{color:var(--text-soft);text-decoration:none}
.crumbs a:hover{color:var(--teal-700);text-decoration:underline}
.crumbs li:not(:last-child)::after{content:"/";margin-left:.45rem;color:var(--line)}
.crumbs [aria-current]{color:var(--ink)}

/* ------------------------------- Treatment pg ----------------------------- */
.tx-layout{display:grid;gap:var(--sp-7)}
@media (min-width:1000px){.tx-layout{grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2.5rem,4vw,4rem);align-items:start}}
.tx-aside{display:grid;gap:var(--sp-5)}
/* Capped and scrollable: the card stack is taller than a laptop viewport, so
   without this its bottom is unreachable once it sticks. */
@media (min-width:1000px){
  .tx-aside{position:sticky;top:calc(var(--header-h) + 1.5rem);
    max-height:calc(100dvh - var(--header-h) - 3rem);overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
}
.aside-card{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5)}
.aside-card h3,.aside-card__title{font-family:var(--f-display);font-size:var(--s-lg);
  font-weight:500;color:var(--ink);line-height:1.25;margin:0 0 var(--sp-3);max-width:none}
.aside-card--ink{background:var(--ink);border-color:var(--ink)}
.aside-card--ink h3,.aside-card--ink .aside-card__title,
.aside-card--ink p,.aside-card--ink li{color:#fff}
.aside-card--ink p{color:var(--text-invert-soft)}
.aside-card .btn{width:100%}
.aside-card .btn+.btn{margin-top:var(--sp-3)}

.quickfacts{list-style:none;margin:0 0 var(--sp-6);padding:0;display:grid;gap:var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);background:var(--mist)}
@media (min-width:640px){.quickfacts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.quickfacts{grid-template-columns:repeat(4,1fr)}}
.quickfacts .k{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft)}
.quickfacts .v{display:block;font-family:var(--f-display);font-size:var(--s-lg);font-weight:500;color:var(--ink);margin-top:.25rem}

/* ---------------------------------- Forms --------------------------------- */
.form{display:grid;gap:var(--sp-4)}
.form__row{display:grid;gap:var(--sp-4)}
@media (min-width:640px){.form__row--2{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--f-display);font-size:var(--s-sm);font-weight:500;color:var(--ink)}
.field .req{color:var(--danger);margin-left:.15em}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .9rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--s-base);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--mint)}
/* Scoped away from checkboxes: a 3px glow is invisible around a 20px native
   box, so those keep the global focus ring. */
.field input:not([type=checkbox]):not([type=radio]):focus,
.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(47,124,134,.16)}
.field input[type=checkbox]:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.field .hint{font-size:var(--s-xs);color:var(--text-soft)}
.field .err{font-size:var(--s-xs);color:var(--danger);font-weight:500}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--danger)}
/* File drop zone — the site asks for a photo or X-ray on every page, so the
   form has to be able to receive one. */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:var(--sp-6) var(--sp-4);
  border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--mist);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.dropzone:hover,.dropzone.is-over{border-color:var(--teal);background:var(--teal-050)}
.dropzone svg{width:26px;height:26px;color:var(--teal)}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone input[type=file]:focus-visible+.dropzone__cta{outline:3px solid var(--teal);outline-offset:3px;border-radius:3px}
.dropzone__cta{font-family:var(--f-display);font-size:var(--s-sm);font-weight:500;color:var(--teal-700)}
.dropzone__files{font-size:var(--s-xs);color:var(--text-soft)}
.dropzone__files:empty{display:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--s-xs);color:var(--text-soft)}
.consent input{width:20px;height:20px;min-height:20px;margin-top:2px;flex:none;accent-color:var(--teal)}
.notice{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);border:1px solid;font-size:var(--s-sm)}
.notice--ok{background:#EEF7F2;border-color:#BFE0CE;color:var(--success)}
.notice--err{background:#FDF1F0;border-color:#F0C9C6;color:var(--danger)}
.notice p:last-child{margin-bottom:0}
.notice:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* --------------------------------- Contact -------------------------------- */
.contact-grid{display:grid;gap:var(--sp-7)}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr .85fr;gap:clamp(2.5rem,4vw,4rem);align-items:start}}
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-5)}
.info-list li{display:flex;gap:var(--sp-4);align-items:flex-start}
.info-list .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--teal-050);flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.info-list .ic svg{width:21px;height:21px;color:var(--teal)}
.info-list .k{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft)}
.info-list .v{display:block;font-family:var(--f-display);font-size:var(--s-lg);color:var(--ink);margin-top:.15rem}
.info-list a{color:var(--ink);text-decoration:none}
.info-list a:hover{color:var(--teal-700);text-decoration:underline}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:.6rem 0;
  border-bottom:1px dashed var(--line);font-size:var(--s-sm)}
.hours li:last-child{border-bottom:0}
.hours .d{color:var(--text-soft)}
.hours .t{font-family:var(--f-display);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.hours li[data-closed="true"] .t{color:var(--text-soft);font-weight:400}
.map{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--mist)}
.map iframe{display:block;width:100%;height:420px;border:0}

/* --------------------------------- Footer --------------------------------- */
.footer{background:var(--ink-2);color:var(--text-invert-soft);font-size:var(--s-sm)}
.footer__top{padding-block:var(--sp-8);display:grid;gap:var(--sp-7)}
@media (min-width:760px){.footer__top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.footer__top{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.footer h3{color:#fff;font-size:var(--s-sm);letter-spacing:.15em;text-transform:uppercase;
  font-weight:500;margin-bottom:var(--sp-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer a{color:var(--text-invert-soft);text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer p{color:var(--text-invert-soft)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.11);padding-block:var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;font-size:var(--s-xs)}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--sp-4);list-style:none;margin:0;padding:0}
.footer__disclaimer{font-size:var(--s-xs);color:#8FA3A8;max-width:80ch;margin-top:var(--sp-4)}
/* Components reused on the dark footer must not inherit ink-on-ink colours. */
.footer strong{color:#fff}
.footer .hours li{border-bottom-color:rgba(255,255,255,.16)}
.footer .hours .d{color:var(--text-invert-soft)}
.footer .hours .t{color:#fff}
.footer .hours li[data-closed="true"] .t{color:var(--text-invert-soft)}
.social{display:flex;gap:.6rem}
.social a{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.social a:hover{background:rgba(255,255,255,.1);border-color:var(--mint)}
.social svg{width:18px;height:18px}

/* ------------------------------ Floating CTAs ----------------------------- */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:var(--z-float);width:54px;height:54px;
  border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;
  justify-content:center;box-shadow:0 10px 26px rgba(18,48,55,.34);text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.wa-float:hover{transform:scale(1.06);color:#fff;background:var(--ink-2);box-shadow:0 14px 32px rgba(18,48,55,.42)}
.wa-float svg{color:#7BE3A8}
/* Above 1000px the header already carries a WhatsApp button, and the FAB
   was overlapping the sticky sidebar card. */
@media (min-width:1000px){.wa-float{display:none}}
.wa-float svg{width:30px;height:30px}
@media (max-width:1023px){.wa-float{bottom:calc(72px + env(safe-area-inset-bottom))}}

.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float);display:grid;
  grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(18,48,55,.08);padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:1024px){.mobilebar{display:none}}
.mobilebar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:60px;padding:.5rem .3rem;font-family:var(--f-display);font-size:.78rem;letter-spacing:.01em;
  text-align:center;line-height:1.15;
  color:var(--ink);text-decoration:none;border-right:1px solid var(--line-soft)}
.mobilebar a:last-child{border-right:0}
.mobilebar a svg{width:20px;height:20px;color:var(--teal)}
.mobilebar a.is-accent{background:var(--teal);color:#fff}
.mobilebar a.is-accent svg{color:#fff}
body{padding-bottom:0}
/* The bar is 60px plus the home-indicator inset, so reserve both or the last
   rows of every page sit underneath it on a notched phone. */
@media (max-width:1023px){body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}}

/* --------------------------------- Blog ----------------------------------- */
.post-card{display:flex;flex-direction:column;gap:var(--sp-3);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-6);height:100%;position:relative;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.post-card:hover{border-color:var(--mint);box-shadow:var(--sh-2)}
.post-card h3{margin:0;font-size:var(--s-lg)}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.post-card:hover h3 a{color:var(--teal-700)}
.post-card time{font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.post-card p{font-size:var(--s-sm);color:var(--text-soft);margin:0}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--sp-7)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  min-height:44px;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-family:var(--f-display)}
.pagination .current{background:var(--teal);color:#fff;border-color:var(--teal)}
.pagination a:hover{border-color:var(--teal);color:var(--teal-700)}

/* --------------------------------- Utility -------------------------------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:var(--sp-4)}
.badge{display:inline-flex;align-items:center;gap:.4em;padding:.3rem .7rem;border-radius:var(--r-pill);
  background:var(--teal-050);color:var(--teal-700);font-family:var(--f-display);font-size:.72rem;
  font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.badge--gold{background:#FAF4E9;color:var(--gold-ink)}
.divider-art{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* Reveal on scroll — only ever hidden when JS is present to un-hide it again. */
.clinova-js [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.clinova-js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .clinova-js [data-reveal]{opacity:1;transform:none}
}

/* Body copy never drops below 16px on a phone — 15px card text is the single
   most repeated string on the site. */
@media (max-width:767px){
  .card p,.steps p,.checks li,.hero__usps li,.factlist li,.info-list .k,
  .post-card p,.faq__a,.aside-card p{font-size:1rem}
  .hours li{font-size:.9375rem}
}

/* ------------------------------ Before / after ---------------------------- */
/* Side by side, not a drag slider: both states stay visible, it needs no JS,
   and it prints and screen-reads correctly. */
/* Plan tabs. The specimen sheets sit stacked behind one another already, so the
   tabs go above the card rather than beside it. */
.plan__tabs{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.plan__tab{padding:.4rem .85rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--text-soft);cursor:pointer;font-family:var(--f-display);
  font-size:.78rem;letter-spacing:.02em;transition:border-color .2s,background .2s,color .2s}
.plan__tab:hover{border-color:var(--teal);color:var(--ink)}
.plan__tab:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.plan__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Cases. A single case stacks; two or more become a horizontal slider so the
   section stays one screen tall however many cases the clinic sends us.
   scroll-behavior is pinned to auto on purpose: a mandatory snap container that
   animates its first snap is read by Chrome as a real scroll before first paint,
   and Chrome stops collecting LCP candidates after the first scroll. The arrows
   ask for smoothness in JS instead. */
.cases{display:grid;gap:var(--sp-6)}
.cases__track{display:grid;gap:var(--sp-7)}

/* The heading column leaves the right half of the section head empty, which is
   where the controls go: a case card is taller than a screen, so controls sitting
   under the track are never visible at the same time as the photographs. */
.cases-head{display:grid;gap:var(--sp-5);justify-items:center;margin-bottom:var(--sp-6)}
.cases-head .section-head{margin-bottom:0}
.cases__controls{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
/* The slider only switches on once main.js has measured the track. main.js is
   deferred and sits ~135KB into the document, so gating this on the head's
   js-class instead left a long window where the snap-scroller was live but its
   height was still the tallest slide: a 290px hole under short cases, and a
   tall mandatory-snap container that fought vertical scrolling on phones.
   Until then the cases simply stack, which is what the results page does. */
/* overflow-y is pinned to hidden, and that pin is the whole gap fix. Asking for
   overflow-x:auto makes the other axis compute to auto as well, while the grid
   row stays as tall as the tallest case even though JS clamps the track to the
   one on screen. That left the track a scrollable box of its own -- 290px on a
   desktop, 820px on a phone -- so a wheel or a swipe over a card scrolled the
   card inside itself, opening blank space under a short case while the page
   stood still. Nothing is lost by clipping: the track is always exactly the
   height of the slide in view, so only the taller off-screen ones are cut.
   content-box travels with it, because the height JS writes is a slide height,
   and under border-box the 2px below would eat the card's own bottom edge. */
.cases--slider.is-ready .cases__track{grid-auto-flow:column;grid-auto-columns:100%;
  box-sizing:content-box;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px}
.cases--slider.is-ready .cases__track::-webkit-scrollbar{display:none}
/* Slides must not stretch to the tallest one: cases differ in text length, and a
   stretched short slide leaves a block of empty card below its content. The track
   is given the active slide's height in JS instead. */
.cases--slider.is-ready .cases__track>.case{scroll-snap-align:start;align-self:start}
.cases--slider.is-ready .cases__track[style*="height"]{transition:height .35s ease}
@media (prefers-reduced-motion:reduce){.cases--slider.is-ready .cases__track{transition:none}}
.cases--slider.is-ready .cases__track:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media (max-width:900px){
  .cases--slider.is-ready .cases__track{scroll-snap-type:x proximity}
}

.cases__nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-5)}
.cases__arrow{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.cases__arrow svg{width:1.15rem;height:1.15rem}
.cases__arrow:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.cases__arrow:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.cases__arrow:disabled{opacity:.35;cursor:default}
.cases__count{margin:0;font-family:var(--f-display);font-size:var(--s-sm);
  font-variant-numeric:tabular-nums;color:var(--text-soft);min-width:9ch;text-align:center}

.cases__dots{display:flex;justify-content:center;gap:.5rem}
.cases__dot{width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;
  background:var(--line);cursor:pointer;transition:background .2s,transform .2s}
.cases__dot:hover{background:var(--mint)}
.cases__dot:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.cases__dot[aria-current="true"]{background:var(--teal);transform:scale(1.25)}
.case{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:0 1px 0 rgba(18,48,55,.03)}
.case__pair{display:grid;grid-template-columns:1fr}
@media (min-width:720px){.case__pair{grid-template-columns:1fr 1fr}}
/* Clinic photographs arrive in whatever ratio the camera or the phone produced,
   from 5:4 to 2:1. A fixed box with object-fit keeps a before and its after the
   same height side by side without cropping each file by hand first. */
.case__shot{position:relative;background:var(--mist);aspect-ratio:1200/751}
.case__shot + .case__shot{border-top:1px solid var(--line)}
@media (min-width:720px){.case__shot + .case__shot{border-top:0;border-left:1px solid var(--line)}}
.case__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.case__tag{position:absolute;left:.9rem;top:.9rem;display:inline-flex;align-items:center;
  padding:.34rem .85rem;border-radius:var(--r-pill);font-family:var(--f-display);
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.case__tag--before{background:rgba(12,36,41,.88);color:#fff}
.case__tag--after{background:var(--aqua);color:var(--ink-2)}
/* Further angles of the same case, results page only. */
.case__view{margin:0;padding:.7rem 1.1rem;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--mist);font-family:var(--f-display);
  font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.case__body{padding:var(--sp-6)}
.case__body h3{margin-bottom:var(--sp-3)}
.case__body p{color:var(--text-soft);font-size:var(--s-sm)}
/* A card two-thirds wider than a readable measure leaves a hole to the right of
   the description. Past 1040px the facts move into that hole and become a spec
   column instead of a row, so the card is full either way. */
@media (min-width:1040px){
  .case__body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,.85fr);
    column-gap:clamp(2rem,3vw,3.25rem)}
  .case__body h3{grid-column:1}
  .case__body .prose{grid-column:1;margin-bottom:0}
  .case__body .case__facts{grid-column:2;grid-row:1 / span 2;align-self:start;
    grid-template-columns:1fr;margin:0;padding:0 0 0 var(--sp-6);
    border-top:0;border-left:1px solid var(--line);gap:var(--sp-4)}
}
.case__facts{list-style:none;margin:var(--sp-5) 0 0;padding:var(--sp-5) 0 0;
  border-top:1px solid var(--line-soft);display:grid;gap:var(--sp-4)}
@media (min-width:640px){.case__facts{grid-template-columns:repeat(3,1fr)}}
.case__facts .k{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-soft)}
.case__facts .v{display:block;font-family:var(--f-display);font-size:var(--s-base);
  font-weight:500;color:var(--ink);margin-top:.2rem}
.case__note{margin:var(--sp-5) 0 0;max-width:84ch;font-size:var(--s-xs);line-height:1.65;
  color:var(--text-soft)}

/* Print */
@media print{
  .site-header,.topbar,.mobilebar,.wa-float,.ctaband,.drawer{display:none!important}
  body{padding-bottom:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ---------------------------------- Team ---------------------------------- */

/* One dentist today, so the solo case opens out into a portrait and a dossier
   rather than sitting alone in a three-up grid looking like a gap. */
.team{display:grid;gap:var(--sp-7)}
.doc{display:grid;gap:var(--sp-6);align-items:start}

/* Homepage: portrait over a short introduction, side by side. */
@media (min-width:880px){
  .team--compact{grid-template-columns:repeat(2,1fr);gap:clamp(2rem,3vw,3.5rem)}
}
.team--compact.team--solo{grid-template-columns:1fr}
.team--compact .doc__figure{max-width:340px}
.team--compact .doc__lede{font-size:var(--s-base);line-height:1.6;max-width:46ch}

/* Team page: the whole dossier, so the portrait gets its own column and the
   sides alternate — two identical blocks stacked read as a template. */
.team--full{gap:clamp(3rem,5vw,5rem)}
.team--full .doc + .doc{padding-top:clamp(3rem,5vw,5rem);border-top:1px solid var(--line)}
@media (min-width:960px){
  .team--full .doc{grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(2.5rem,4vw,4.5rem)}
  .team--full .doc:nth-child(even){grid-template-columns:1fr minmax(280px,380px)}
  .team--full .doc:nth-child(even) .doc__aside{order:2}
  .team--full .doc:nth-child(even) .doc__figure::after{left:auto;right:-22px}
}

.doc__aside{position:relative}
/* The dossier beside it runs several screens long. Without this the portrait
   scrolls away in the first paragraph and the column is empty for the rest. */
@media (min-width:960px){
  .team--full .doc__aside{position:sticky;top:calc(var(--header-h) + 1.5rem)}
}
.doc__figure{position:relative;margin:0;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.doc__figure img{position:relative;z-index:1;display:block;width:100%;height:auto;
  aspect-ratio:1290/1593;object-fit:cover;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--mist)}
/* The arch peeking out from behind the photograph. Anchored to the figure, not
   the column: hung off the column it lands on top of the name. */
.doc__figure::after{content:"";position:absolute;left:-22px;bottom:-22px;width:56%;
  aspect-ratio:324/211;pointer-events:none;z-index:0;opacity:.5;background:var(--mint);
  -webkit-mask:url(../img/arch.svg) no-repeat center/contain;
          mask:url(../img/arch.svg) no-repeat center/contain}
.doc__name{margin:var(--sp-5) 0 var(--sp-1)}
.doc__role{font-family:var(--f-display);font-weight:500;
  font-size:var(--s-sm);color:var(--gold-ink);margin:0}

.doc__lede{font-family:var(--f-display);font-size:clamp(1.15rem,1.05rem + .5vw,var(--s-xl));
  line-height:1.5;color:var(--ink);max-width:58ch;margin-bottom:var(--sp-5)}
.doc__main .prose{margin-bottom:var(--sp-6)}
.doc__sub{margin:0 0 var(--sp-3);font-weight:600}
.doc__sub+*{margin-top:0}
.doc__cv+.doc__sub,.chips+.doc__sub{margin-top:var(--sp-6)}

/* Credential rows: label rail on the left, fact on the right. */
.doc__cv{margin:0;border-top:1px solid var(--line)}
.doc__cv>div{display:grid;gap:.15rem var(--sp-4);padding:.7rem 0;border-bottom:1px solid var(--line)}
@media (min-width:560px){
  .doc__cv>div{grid-template-columns:minmax(140px,.34fr) 1fr;align-items:baseline}
}
.doc__cv dt{font-family:var(--f-display);font-size:var(--s-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft)}
.doc__cv dd{margin:0;font-size:var(--s-sm);color:var(--text)}

.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{font-size:var(--s-xs);line-height:1.3;padding:.45rem .8rem;border-radius:var(--r-pill);
  background:var(--teal-050);border:1px solid #D2E6E8;color:var(--teal-700)}

.doc__pubs{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);counter-reset:pub}
.doc__pubs li{counter-increment:pub;position:relative;padding-left:2.2rem;
  font-size:var(--s-sm);line-height:1.6;color:var(--text-soft);max-width:76ch}
.doc__pubs li::before{content:counter(pub,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--f-display);font-weight:500;color:var(--aqua);font-variant-numeric:tabular-nums}
.doc__pubs cite{font-style:normal;color:var(--text)}
.doc__pubs a{display:inline-block;margin-top:.15rem;color:var(--teal-700);
  text-decoration:underline;text-underline-offset:2px;word-break:break-word}
/* A publication shown with its own first page. A reader recognises a journal
   page at a glance where a reference string has to be read, and on a clinic
   site that recognition is the whole point of listing the papers at all. The
   image repeats what the citation beside it already says, so it is decorative:
   empty alt, link hidden from assistive tech, no duplicate of the doi link.
   Selectors are .doc__pubs a.doc__pubshot rather than .doc__pubshot because
   the plain-link rule above would otherwise out-specify them. */
.doc__pubs li.has-shot{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
@media (min-width:560px){
  .doc__pubs li.has-shot{grid-template-columns:190px minmax(0,1fr);
    column-gap:var(--sp-5);align-items:start}
}
.doc__pubs a.doc__pubshot{display:block;max-width:190px;margin:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;text-decoration:none;
  box-shadow:0 1px 3px rgba(18,48,55,.08);transition:border-color .2s,box-shadow .2s}
@media (min-width:560px){.doc__pubs a.doc__pubshot{max-width:none}}
.doc__pubs a.doc__pubshot:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(18,48,55,.14)}
.doc__pubs a.doc__pubshot:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.doc__pubs a.doc__pubshot img{display:block;width:100%;height:auto}
.team__note{margin-top:var(--sp-6)}

/* Support staff: short cards, deliberately not the dentist treatment. */
.staff{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.staff__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);text-align:left}
.staff__photo{display:block;width:84px;height:84px;border-radius:var(--r-pill);
  object-fit:cover;margin-bottom:var(--sp-4);background:var(--mist)}
.staff__name{font-size:var(--s-lg);margin:0 0 var(--sp-1)}
.staff__role{font-family:var(--f-display);font-size:var(--s-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 var(--sp-3)}
.staff__text{font-size:var(--s-sm);color:var(--text-soft);margin:0}
.doc__more{margin:var(--sp-5) 0 0}

/* ------------------------------ Certificates ------------------------------ */
/* Documents come in every orientation a phone camera allows, so the tile is a
   fixed frame and the photograph is contained inside it rather than cropped —
   a certificate with its heading cut off is worse than no certificate. */
/* Columns rather than a grid, and no fixed frame. Half these documents are
   portrait and half landscape; forcing both into one 4:3 tile painted the
   portraits at barely half the tile width with empty bands either side, and
   left every document too small to read. Each one now keeps its own shape and
   fills the column, and the column flow closes the gaps a ragged grid leaves. */
.certs{list-style:none;margin:0;padding:0;columns:3 250px;column-gap:var(--sp-5)}
.certs__item{break-inside:avoid;margin:0 0 var(--sp-6)}
.certs__shot{position:relative;display:block;border-radius:var(--r-md);
  background:var(--mist);box-shadow:0 1px 0 rgba(18,48,55,.04);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.certs__shot:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.certs__shot:hover{transform:none}}
.certs__img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--line)}
.certs__zoom{position:absolute;right:.55rem;bottom:.55rem;width:30px;height:30px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.certs__zoom svg{width:15px;height:15px;color:var(--teal-700)}
.certs__shot:hover .certs__zoom,.certs__shot:focus-visible .certs__zoom{opacity:1}
@media (hover:none){.certs__zoom{opacity:1}}
.certs__kind{margin:var(--sp-4) 0 var(--sp-1);font-family:var(--f-display);font-size:.68rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.certs__title{margin:0 0 var(--sp-2);font-family:var(--f-display);font-size:var(--s-base);
  font-weight:500;line-height:1.3;color:var(--ink)}
.certs__meta{margin:0;font-size:var(--s-xs);line-height:1.55;color:var(--text-soft)}

.cert-person + .cert-person{margin-top:var(--sp-8);padding-top:var(--sp-7);
  border-top:1px solid var(--line)}
.cert-person__head{margin-bottom:var(--sp-5)}
.cert-person__head h3{margin:0 0 var(--sp-1)}
.cert-person__head a{color:inherit;text-decoration:none}
.cert-person__head a:hover{color:var(--teal-700)}
.certs__note{margin:var(--sp-2) 0 0;font-size:var(--s-xs);line-height:1.5;color:var(--text-soft);
  padding-left:.7rem;border-left:2px solid var(--gold)}

/* -------------------------------- Clinic shots ---------------------------- */
/* Columns, not a cropped grid: the set mixes 9:16 phone shots with 4:3
   landscapes and neither should be trimmed to fit a slot. */
.shots{list-style:none;margin:0;padding:0;columns:3 260px;column-gap:var(--sp-5)}
.shots__item{break-inside:avoid;margin:0 0 var(--sp-5)}
.shots__img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--mist);
  transition:box-shadow var(--dur) var(--ease)}
.shots__item:hover .shots__img{box-shadow:var(--sh-2)}
@media (max-width:640px){.shots{columns:2 150px;column-gap:var(--sp-4)}}

/* ------------------------------ Journey steps ----------------------------- */
/* The illustrations are 4:5 portraits that carry their own rounded frame and
   their own corner badges, so this adds no border of its own and keeps the
   step number out of the image — three of the five already have something in
   the top-left corner. */
.journey{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.journey__shot{margin:0 0 var(--sp-4);border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:1122/1402;background:var(--mist)}
.journey__img{display:block;width:100%;height:100%;object-fit:cover}
.journey__num{margin:0 0 var(--sp-2);font-family:var(--f-display);font-weight:600;
  font-size:.72rem;letter-spacing:.14em;color:var(--gold-ink)}
.journey h3{font-size:var(--s-lg);margin-bottom:var(--sp-2)}
.journey p{font-size:var(--s-sm);color:var(--text-soft);margin:0}
.section--ink .journey p{color:var(--text-invert-soft)}