/* ==========================================================================
   Dental Fit — master stylesheet.
   The homepage establishes this system; every other route inherits it.
   Sections: 1 base · 2 atmosphere · 3 header/nav · 4 buttons · 5 glass
             6 reveal engine · 7 hero · 8 sections · 9 footer · 10 mobile bar
   ========================================================================== */

/* --- 1. base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);background:var(--bg-page);
  color:var(--text-primary);-webkit-font-smoothing:antialiased;
  text-wrap:pretty;overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
h1,h2{margin:0;letter-spacing:-.032em;font-weight:var(--fw-bold);line-height:1.14}
h3,h4{margin:0;letter-spacing:-.018em;font-weight:var(--fw-semibold);line-height:1.28}
p{margin:0}
::selection{background:var(--coral-100);color:var(--text-primary)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:6px}
.shell{width:var(--shell-w);margin-inline:auto}
.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}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--white);
  padding:12px 20px;border-radius:0 0 var(--radius-md) 0;font-weight:var(--fw-bold)}
.skip-link:focus{left:0}

.eyebrow{
  font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-300);margin-bottom:20px;
}
.eyebrow .hl{color:var(--accent)}
.h-sec{font-size:clamp(27px,3.2vw,40px);line-height:1.14;letter-spacing:-.028em}
.h-sub{font-size:clamp(25px,2.9vw,36px);line-height:1.16;letter-spacing:-.026em}
.lede{font-size:clamp(15.5px,1.15vw,17px);line-height:1.68;color:var(--text-secondary);
  font-weight:400;max-width:54ch}
.hand{font-family:var(--font-hand);color:var(--text-secondary);line-height:1.22}
/* Sections share one continuous field: no section paints its own band, and a
   soft light seam sits over each join so boundaries dissolve. */
.section{position:relative;z-index:1;padding-top:clamp(72px,9vw,118px);
  scroll-margin-top:var(--header-h)}
.section::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% -50%;
  width:min(1500px,120vw);height:300px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side ellipse,rgba(255,255,255,.55),
    rgba(255,255,255,0) 78%);
}

/* --- 2. atmosphere -------------------------------------------------------- */
.page{
  position:relative;overflow-x:clip;
  background:linear-gradient(180deg,#E6EAF7 0%,#EDEFFA 16%,#F5F6FD 38%,#F8F9FE 52%,
    #F2F4FC 68%,#EBEEF9 84%,#E6EAF7 100%);
}
.atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(48% 20% at 76% 3%,rgba(255,255,255,.58),rgba(255,255,255,0)),
    radial-gradient(42% 14% at 14% 30%,rgba(255,255,255,.40),rgba(255,255,255,0)),
    radial-gradient(46% 16% at 84% 58%,rgba(255,255,255,.36),rgba(255,255,255,0)),
    radial-gradient(50% 18% at 30% 86%,rgba(255,255,255,.40),rgba(255,255,255,0));
}
.atmos-layer{position:absolute;inset:0;will-change:transform}
.ring{position:absolute;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.22);
  -webkit-mask-image:linear-gradient(160deg,transparent,#000 32%,#000 62%,transparent 88%);
  mask-image:linear-gradient(160deg,transparent,#000 32%,#000 62%,transparent 88%)}
.wash{position:absolute;border-radius:50%}
/* small glass teeth drifting through the whole page — the brief's environmental
   elements, deliberately used instead of generic bubbles */
.gtooth{position:absolute;pointer-events:none;user-select:none}
/* Continuity forms: very large, very soft shapes anchored so each one spans a
   section boundary. They are what stops the page reading as stacked bands. */
.bridge{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}

@keyframes df-drift{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}
  50%{transform:translate3d(0,-22px,0) rotate(calc(var(--r,0deg) + 2deg))}}
@keyframes df-drift-slow{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}
  50%{transform:translate3d(0,26px,0) rotate(calc(var(--r,0deg) - 2deg))}}
@keyframes df-breathe{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(-.35deg)}
  50%{transform:translate3d(0,-14px,0) scale(1.012) rotate(.35deg)}}
@keyframes df-glow{0%,100%{opacity:.72;scale:1}50%{opacity:1;scale:1.045}}
@keyframes df-shimmer{0%,100%{opacity:.22;scale:.96}50%{opacity:.50;scale:1.04}}
@keyframes df-enter{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* --- 3. header + navigation ---------------------------------------------- */
.site-header{position:sticky;top:0;z-index:60;padding:14px 0;pointer-events:none}
.header-pill{
  pointer-events:auto;width:var(--shell-w);margin-inline:auto;
  display:flex;align-items:center;gap:22px;padding:10px 10px 10px 22px;
  border-radius:var(--radius-pill);
  background:linear-gradient(150deg,rgba(255,255,255,.50),rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.50);
  -webkit-backdrop-filter:blur(16px) saturate(1.9) brightness(1.03);
  backdrop-filter:blur(16px) saturate(1.9) brightness(1.03);
  box-shadow:var(--glass-rim),0 6px 22px rgba(46,58,110,.055);
  transition:background var(--dur-slow) var(--ease-soft),
             box-shadow var(--dur-slow) var(--ease-soft),
             transform var(--dur-slow) var(--ease-soft);
}
.site-header.is-stuck .header-pill{
  /* opaque enough that content scrolling under it never smears through */
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.88));
  box-shadow:var(--glass-rim),0 14px 36px rgba(46,58,110,.13);
}

.brand { display: block; color: inherit; margin-right: auto; } 
.brand-name { font-size: 20px; font-weight: var(--fw-extrabold); letter-spacing: -0.035em; line-height: 1.05; } 
/* Dental */ 
.brand-dental { background: #FF7500; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } 
/* Fit */ 
.brand-fit { background: linear-gradient( 90deg, #1370FF 0%, #1D75FF 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Multispeciality Dental Clinic */ .brand-sub { display: block; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.11em; text-transform: uppercase; color: #000000; margin-top: 2px; }

.nav{display:flex;align-items:center;gap:4px}
.nav > li{list-style:none}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:9px 14px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:var(--fw-semibold);color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-std),background var(--dur-fast) var(--ease-std);
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-normal) var(--ease-out);
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--text-primary)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link .chev{transition:transform var(--dur-normal) var(--ease-out)}
.has-menu{position:relative}
.has-menu:hover .nav-link .chev,.has-menu:focus-within .nav-link .chev{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  min-width:520px;padding:12px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(1.6);
  backdrop-filter:blur(var(--glass-blur-lg)) saturate(1.6);
  box-shadow:var(--glass-rim),0 24px 60px rgba(46,58,110,.18);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transition:opacity var(--dur-normal) var(--ease-out),
             transform var(--dur-normal) var(--ease-out),visibility 0s .26s;
  list-style:none;margin:0;
}
.has-menu:hover .dropdown,.has-menu:focus-within .dropdown{
  opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s;
}
.dropdown a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-radius:var(--radius-md);
  font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text-primary);
  transition:background var(--dur-fast) var(--ease-std),padding-left var(--dur-normal) var(--ease-out);
}
.dropdown a .arr{opacity:0;transform:translateX(-6px);color:var(--accent);
  transition:opacity var(--dur-normal) var(--ease-out),transform var(--dur-normal) var(--ease-out)}
.dropdown a:hover{background:rgba(242,105,79,.09);padding-left:18px}
.dropdown a:hover .arr{opacity:1;transform:none}

.header-phone{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border-radius:var(--radius-pill);font-size:13.5px;font-weight:var(--fw-bold);
  color:var(--text-primary);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-std);
}
.header-phone:hover{background:rgba(255,255,255,.6)}
.nav-toggle{display:none}

/* --- 4. buttons ----------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;cursor:pointer;font-family:inherit;font-weight:var(--fw-bold);
  border-radius:var(--radius-pill);white-space:nowrap;overflow:hidden;
  transition:transform var(--dur-normal) var(--ease-out),
             box-shadow var(--dur-normal) var(--ease-out),
             background var(--dur-normal) var(--ease-std);
}
.btn .arr{transition:transform var(--dur-normal) var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.987);transition-duration:80ms;
  filter:brightness(.97)}
.btn-primary:active{box-shadow:inset 0 3px 7px rgba(140,40,20,.34),
  inset 0 -1px 0 rgba(255,190,172,.24),0 1px 2px rgba(200,67,42,.18)}
.btn-primary:active::after{opacity:.55}
.btn-lg{height:52px;padding:0 26px;font-size:15.5px}
.btn-md{height:44px;padding:0 22px;font-size:14.5px}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px}

/* A lacquered button: a bright upper half, a darker lower half, a hard
   specular band across the top third and a soft bounce light along the
   bottom edge — the gloss comes from the light model, not from a glow. */
/* Primary button */
.btn-primary {
  background: linear-gradient(
    90deg,
    #D6674C 0%,
    #FF7802 100%
  );

  color: #fff;

  box-shadow:
    0 2px 6px rgba(214, 103, 76, 0.18);

  text-shadow: none;
}

/* Remove the old glossy effects */
.btn-primary::before,
.btn-primary::after {
  display: none;
}

.btn-primary:hover {
  background: linear-gradient(
    90deg,
    #D6674C 0%,
    #FF7802 100%
  );

  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(214, 103, 76, 0.24);
}

.btn-primary:active {
  background: linear-gradient(
    90deg,
    #D6674C 0%,
    #FF7802 100%
  );

  transform: translateY(0) scale(0.98);
}

/* Hero CTA */
.hero-actions .btn-primary {
  background: linear-gradient(
    90deg,
    #D6674C 0%,
    #FF7802 100%
  );

  color: #fff;

  box-shadow:
    0 2px 6px rgba(214, 103, 76, 0.18);

  text-shadow: none;
}

.hero-actions .btn-primary:hover {
  background: linear-gradient(
    90deg,
    #D6674C 0%,
    #FF7802 100%
  );

  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(214, 103, 76, 0.24);
}

.hero-actions .btn-primary:active {
  background: linear-gradient(
    90deg,
    #D6674C 0%,
    #FF7802 100%
  );

  transform: translateY(0) scale(0.98);
}

.btn-ghost{
  background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.40));
  color:var(--text-primary);border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--glass-rim),0 1px 2px rgba(46,58,110,.04),0 6px 18px rgba(46,58,110,.06);
}
.btn-ghost:hover{background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(255,255,255,.62));
  transform:translateY(-2px);
  box-shadow:var(--glass-rim),0 2px 4px rgba(46,58,110,.05),0 14px 30px rgba(46,58,110,.12)}

.link-cta{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  font-weight:var(--fw-bold);color:var(--accent);white-space:nowrap;
}
.link-cta .arr{transition:transform var(--dur-normal) var(--ease-out)}
.link-cta:hover .arr{transform:translateX(5px)}

/* --- 5. glass surfaces ---------------------------------------------------- */
/* Glass is a MATERIAL, not a tint. Four things make it read as one:
   1  a directional surface gradient, so light falls across the panel
   2  high backdrop saturation with modest blur — the page shows THROUGH it,
      rather than a milky blue film sitting on top
   3  a lit top-left rim and a shaded bottom-right rim (--glass-rim)
   4  a trace of grain, which is what stops it looking like plastic
   Solid surfaces sit alongside it deliberately: the contrast is the point. */
.glass{
  position:relative;isolation:isolate;border-radius:var(--radius-lg);
  background:linear-gradient(148deg,rgba(255,255,255,.50),rgba(255,255,255,.20) 62%,
    rgba(255,255,255,.30));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--glass-rim),0 1px 2px rgba(46,58,110,.04),
             0 10px 30px rgba(46,58,110,.075);
  /* real translucency: the page actually shows through, blurred and
     saturated, instead of a flat tinted rectangle sitting on top of it */
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.7) brightness(1.02);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.7) brightness(1.02);
}
.glass::after{ /* grain — the second thing (after the rim) that stops a
  blurred, saturated surface reading as plastic */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:-1;opacity:.05;mix-blend-mode:overlay;background-image:var(--grain);
}
.glass-thin{background:linear-gradient(148deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  border-color:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(1.6)}
.glass-thick{-webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(1.8) brightness(1.03);
  backdrop-filter:blur(var(--glass-blur-lg)) saturate(1.8) brightness(1.03)}
/* clean, unblurred, opaque — the counterweight that makes the glass read */
.solid{position:relative;background:var(--white);border:1px solid rgba(30,42,74,.06);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(46,58,110,.05),0 12px 34px rgba(46,58,110,.07)}

/* the shared interactive card behaviour */
.lift{transition:transform var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out),
      border-color var(--dur-slow) var(--ease-out),
      background var(--dur-slow) var(--ease-out)}
.lift:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.85);
  box-shadow:var(--glass-rim),0 2px 4px rgba(46,58,110,.05),var(--shadow-hover)}
.lift:hover.glass{background:linear-gradient(148deg,rgba(255,255,255,.72),
  rgba(255,255,255,.42) 62%,rgba(255,255,255,.52))}

/* --- 6. reveal engine ----------------------------------------------------- */
/* JS sets .is-in on the section; children animate on a per-section rhythm. */
/* will-change only while the element is still waiting to animate: a layer
   left permanently promoted composites separately from its parent's gradient
   and shows up as a faint rectangle over it. */
[data-anim]{opacity:0;will-change:opacity,transform}
.is-in [data-anim]{will-change:auto}
[data-anim="rise"]{transform:translate3d(0,30px,0)}
[data-anim="rise-sm"]{transform:translate3d(0,16px,0)}
[data-anim="slide"]{transform:translate3d(-32px,0,0)}
[data-anim="scale"]{transform:translate3d(0,22px,0) scale(.965)}
[data-anim="mask"]{opacity:1;clip-path:inset(0 0 100% 0)}
.is-in [data-anim]{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .78s var(--ease-out) var(--d,0ms),
             transform .92s var(--ease-out) var(--d,0ms),
             clip-path 1.05s var(--ease-out) var(--d,0ms);
}
.calm .is-in [data-anim],.is-in.calm [data-anim]{transition-duration:1.05s,1.2s,1.3s}

/* --- 7. hero -------------------------------------------------------------- */
/* Round 8: rebuilt against the client's supplied photographic banner — the
   tooth is now baked into the photo itself (not a separate travelling
   layer), so the job here is reproducing the photo's own composition:
   full-bleed city/rooftop background, a glass card holding the copy over
   the left of it, the tooth's own plinth sitting in the right two-thirds. */
/* the photo runs the full height of the viewport, behind the header — the
   header reserves its own row in flow (for every other page, which has no
   photo behind it), so here the hero is pulled up under it with a matching
   negative margin and the lost space is added back as top padding, which
   also keeps the glass panel and its content clear of the header */
.hero{position:relative;z-index:1;isolation:isolate;overflow:hidden;
  margin-top:calc(-1 * var(--header-h));
  padding:calc(var(--header-h) + clamp(26px,3.4vw,52px)) 0 clamp(16px,2.6vw,36px);
  min-height:clamp(1000px,100vh,860px);display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:-1.5%;z-index:-1;
  background:url("../assets/hero-city.jpg") center 32%/cover no-repeat;
  animation:df-hero-float 16s ease-in-out infinite;
  will-change:transform;
}
/* very subtle — a few px of drift over 16s, so the tooth on its plinth reads
   as sitting in real air rather than pasted flat, without redrawing the
   composition the Figma design specifies */
@keyframes df-hero-float{
  0%,100%{transform:translate3d(0,0,0) scale(1.012)}
  50%{transform:translate3d(0,-8px,0) scale(1.02)}
}
/* a light veil so the header and copy always have enough contrast against
   the sky, without flattening the photograph underneath it; it also drifts,
   very slightly, so the light across the scene doesn't sit dead-still */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,32,64,.16) 0%,rgba(20,32,64,.04) 30%,
    rgba(20,32,64,0) 52%),
    linear-gradient(0deg,rgba(20,32,64,.10),rgba(20,32,64,0) 30%);
  animation:df-hero-light 9s ease-in-out infinite;
}
@keyframes df-hero-light{0%,100%{opacity:1}50%{opacity:.82}}
/* was `width:100%` — that silently cancelled .shell's own max-width/auto-margin
   centering (a more specific selector beats the base rule), so the glass
   panel ran flush to the true left edge of the viewport instead of sitting
   in the same inset gutter as the header pill above it. */
.hero > .shell{position:relative}
/* Copy sits in a real sheet of glass over the photograph — the point of the
   supplied design — with a live backdrop blur, since nothing here needs to
   stay a containing-block-free box any more (the old travelling-tooth
   anchor this used to have to avoid is gone). */
.hero-grid{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;max-width:min(600px,50%);
  justify-content:center;
  padding:clamp(28px,3.2vw,44px) clamp(28px,3vw,40px);
  border-radius:var(--radius-xl);
  background:linear-gradient(150deg,rgba(255,255,255,.50),rgba(255,255,255,.20) 60%,
    rgba(255,255,255,.30));
  border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(22px) saturate(1.7) brightness(1.05);
  backdrop-filter:blur(22px) saturate(1.7) brightness(1.05);
  box-shadow:var(--glass-rim),0 24px 60px rgba(20,32,64,.16);
}
.hero-grid::after{ /* grain, same as .glass, so the panel matches the rest of the page's material */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:-1;opacity:.05;mix-blend-mode:overlay;background-image:var(--grain);
}
.hero-grid > *{position:relative;z-index:3}
.hero-h1{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.03em;
  margin-bottom:18px;text-transform:uppercase}
/* the H1 lines rise from behind a mask on load */
.hero-h1 .line{display:block;overflow:hidden}
.hero-h1 .line > span{display:block;transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--ease-out) var(--d,0ms)}
.loaded .hero-h1 .line > span{transform:none}
.hero-sub{font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--text-secondary);
  font-weight:var(--fw-medium);margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-rating{font-size:14px;font-weight:var(--fw-semibold);color:var(--text-secondary);margin-bottom:16px}
.hero-rating b{color:var(--text-primary);font-weight:var(--fw-extrabold)}
/* Round 8: flattened to match the Figma reference — plain marks sitting
   directly on the photo, no card chrome (no background/border/blur), since
   the glass panel behind them already carries the surface */
.trust-row{display:flex;flex-wrap:wrap;gap:22px}
.trust{
  display:flex;align-items:center;gap:10px;position:relative;
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out);
}
.trust:hover{transform:translateY(-2px)}
.trust-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);box-shadow:0 2px 6px rgba(30,42,74,.14);
  font-size:14px;font-weight:var(--fw-extrabold);line-height:1;flex:none}
.trust-name{font-size:13.5px;font-weight:var(--fw-bold);line-height:1.2;color:var(--text-primary)}
/* darker than the usual navy-300 meta tone — that's too low-contrast sitting
   directly on the photo, where the glass panel's tint thins out */
.trust-meta{font-size:12px;color:var(--navy-500);font-weight:var(--fw-semibold);margin-top:1px}

/* in flow under the trust cards, so it can never land on anything at any width */
.hero-hand{margin-top:22px;font-size:23px;transform:rotate(-2deg);
  color:var(--navy-700)}
.scroll-cue{display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:11.5px;font-weight:var(--fw-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--white);text-shadow:0 1px 4px rgba(20,32,64,.35)}
.scroll-cue svg{animation:df-cue 2.4s ease-in-out infinite;filter:drop-shadow(0 1px 3px rgba(20,32,64,.4))}
@keyframes df-cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(4px);opacity:1}}

/* --- 8. sections ---------------------------------------------------------- */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head > div{min-width:0;max-width:60ch}
.sec-head .lede{margin-top:14px}

/* Round 8c: the treatments header carries a third block (subhead + tagline)
   between the title and the "view all" button, per the client's reference */
.treat-h2{font-weight:var(--fw-extrabold)}
.treat-h2 .hl-blue{color:var(--treat-blue)}
.treat-head-right{max-width:320px}
.treat-head-right .lede{margin-top:0}
.treat-hand{font-size:17px;margin-top:8px;transform:rotate(-1deg)}

/* 8.1 treatments — a lead feature panel + a card grid, not a flat grid */
.treat-lead{
  color:inherit;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;
  border-radius:var(--radius-xl);overflow:hidden;margin-bottom:20px;
  background:linear-gradient(126deg,rgba(255,255,255,.62),rgba(255,255,255,.24) 58%,
    rgba(255,247,244,.36));
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--glass-rim),0 2px 4px rgba(46,58,110,.04),0 18px 50px rgba(46,58,110,.09);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  transition:box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.treat-lead:hover{transform:translateY(-4px);
  box-shadow:var(--glass-rim),0 28px 66px rgba(46,58,110,.17)}
.treat-lead-body{padding:clamp(28px,3.4vw,46px);display:flex;flex-direction:column;
  align-items:flex-start;gap:16px;justify-content:center}
.treat-lead-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--radius-pill);background:var(--accent-tint);color:var(--accent-active);
  font-size:11.5px;font-weight:var(--fw-extrabold);letter-spacing:.1em;text-transform:uppercase}
.treat-lead h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;
  font-weight:var(--fw-bold);color:var(--text-primary)}
.treat-lead-art{position:relative;min-height:230px;overflow:hidden}
.treat-lead-art{min-height:clamp(240px,26vw,320px)}
.treat-lead-art::before{content:"";position:absolute;top:50%;left:50%;width:88%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 70%)}

/* Round 8c: cards run horizontal — icon left, copy right, a circular arrow
   pinned to the bottom-right corner — matching the client's reference.
   12 cards in 4 equal columns = 3 full rows, no orphan row, all one width */
.treat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;grid-auto-rows:1fr}
.treat-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:24px 44px 26px 22px;min-height:150px;color:inherit;overflow:hidden;
  background:linear-gradient(148deg,rgba(255,255,255,.48),rgba(255,255,255,.20) 64%,
    rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.52);border-radius:var(--radius-lg);
  box-shadow:var(--glass-rim),0 1px 2px rgba(46,58,110,.04),0 10px 28px rgba(46,58,110,.06);
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(1.6);
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),
             background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out);
}
/* a coral wash rises from the bottom on hover — movement, not a glow border */
.treat-card::before{content:"";position:absolute;inset:auto 0 0 0;height:100%;
  background:linear-gradient(180deg,rgba(242,105,79,0) 40%,rgba(242,105,79,.09));
  transform:translateY(60%);opacity:0;
  transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
.treat-card:hover{transform:translateY(-5px);
  background:linear-gradient(148deg,rgba(255,255,255,.68),rgba(255,255,255,.38) 64%,
    rgba(255,255,255,.46));
  border-color:rgba(255,255,255,.88);
  box-shadow:var(--glass-rim),0 2px 5px rgba(46,58,110,.05),var(--shadow-hover)}
/* the hovered card comes forward; its siblings quietly recede — a hint, not a spotlight */
.treat-grid:hover .treat-card:not(:hover){opacity:.88}
.treat-grid .treat-card{transition:transform var(--dur-slow) var(--ease-out),
  box-shadow var(--dur-slow) var(--ease-out),background var(--dur-slow) var(--ease-out),
  border-color var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-std)}
.treat-card:hover::before{transform:translateY(0);opacity:1}
.treat-card > *{position:relative;z-index:1}
.treat-card h3{margin-top:14px;font-size:14.5px;font-weight:var(--fw-bold);line-height:1.28}
.treat-card p{margin-top:5px;font-size:12.5px;line-height:1.48;color:var(--text-secondary);font-weight:400}
/* two-tone circular badge — navy line-icon with a coral accent stroke on part
   of the glyph, sitting in a soft blue-white circle, per the client's newest
   reference (round icon + vertical card, not the earlier glass-tile crops) */
.icon-badge{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--navy-900);background:linear-gradient(150deg,var(--blue-100),var(--white) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(46,58,110,.10);
  transition:transform var(--dur-slow) var(--ease-out)}
.treat-card:hover .icon-badge{transform:translateY(-2px) scale(1.03)}
.arr-circle{
  position:absolute;right:16px;bottom:16px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;flex:none;color:var(--accent);
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 8px rgba(46,58,110,.10);
  transition:background var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),
             color var(--dur-slow) var(--ease-out)}
.treat-card:hover .arr-circle{background:var(--accent);color:var(--white);transform:translateX(2px)}
.treat-card.is-all{background:linear-gradient(150deg,rgba(242,105,79,.10),rgba(255,255,255,.42));
  border-color:rgba(242,105,79,.26)}
.treat-card.is-all h3{color:var(--accent-active)}
.treat-note{margin-top:14px;font-size:12.5px;color:var(--navy-300);font-weight:var(--fw-semibold)}

/* 8.2 kids — Round 11: rebuilt against the client's own reference + supplied
   mascot cutout (glowing two-tone tooth, heart and star already baked into
   one asset), replacing the old built-from-parts "tooth planet" scene. */
.kids{position:relative;margin-top:clamp(72px,9vw,110px);z-index:1;
  scroll-margin-top:var(--header-h)}
/* Round 11b: the mascot PNG carries its own baked-in scene (a cool
   blue window/room, colour-picked directly from the client's asset at
   #CFDDF0 — not a clean cutout. The old peach-forward card made that patch
   sit on top of the art like a sticker. The card now shifts from warm
   (behind the text) to that exact picked blue (behind the art), so the two
   meet instead of clashing. */
.kids-inner{position:relative;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(30px,4vw,54px);border-radius:var(--radius-xl);overflow:hidden;
  background:linear-gradient(100deg,rgba(255,246,242,.72) 0%,rgba(255,246,242,.5) 30%,
    rgba(224,233,246,.58) 55%,rgba(207,221,240,.68) 78%,rgba(207,221,240,.85) 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--glass-rim),0 16px 48px rgba(46,58,110,.10);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.6)}
.kids-inner::before{content:"";position:absolute;top:-24%;left:-10%;width:46%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,225,214,.55),rgba(255,225,214,0) 70%)}
.kids-copy{position:relative;z-index:2}
.kids-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 11px;
  margin-bottom:18px;border-radius:var(--radius-pill);color:var(--accent-active);
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.85);
  font-size:11.5px;font-weight:var(--fw-extrabold);letter-spacing:.1em;text-transform:uppercase}
.kids-h2{font-weight:var(--fw-extrabold);margin-bottom:22px}
.kids-h2 .hl-blue{color:var(--treat-blue)}
.kids-features{display:flex;gap:clamp(16px,2.2vw,26px);margin-top:24px}
.kids-feature{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:0 0 auto}
.kids-feature span:last-child{font-size:12.5px;font-weight:var(--fw-bold);
  color:var(--text-primary);line-height:1.32;white-space:nowrap}

.kids-world{position:relative;z-index:1;aspect-ratio:1/.88;min-height:300px}
.kids-world > *{position:absolute}
/* a wash in the exact blue picked from the mascot's own background
   (#CFDDF0), sized well past the art's own edge, so its baked-in scene
   fades into the card rather than sitting on it as a visible oval patch */
.kw-sky{top:50%;left:50%;width:145%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.9),rgba(215,227,243,.7) 34%,
    rgba(207,221,240,.6) 58%,rgba(207,221,240,0) 82%);
  animation:df-glow 16s ease-in-out infinite}
/* an extra feather on top of the PNG's own soft alpha — its edge still
   reads slightly hard at 100% scale, this fades it the rest of the way */
.kw-mascot{bottom:2%;left:50%;width:82%;translate:-50% 0;
  filter:drop-shadow(0 22px 38px rgba(30,42,74,.14));
  -webkit-mask-image:radial-gradient(58% 60% at 50% 46%,#000 60%,transparent 97%);
  mask-image:radial-gradient(58% 60% at 50% 46%,#000 60%,transparent 97%);
  animation:df-breathe 19s ease-in-out infinite}
.kids-hand{position:absolute;top:6%;right:2%;z-index:2;max-width:150px;
  font-size:19px;line-height:1.22;text-align:right;color:var(--navy-500);
  transform:rotate(-2deg)}

/* 8.3 why — restrained, calm section */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
/* deliberately solid, unblurred and opaque — sitting between two glass
   sections, this is what gives the glass elsewhere something to be read against */
/* The cards stay solid and opaque; the OBJECTS are the glass. That contrast is
   what lets a translucent object read as translucent. */
.why-card{display:flex;flex-direction:column;gap:20px;padding:30px 28px 32px}
.glass-obj{
  position:relative;display:block;width:104px;height:104px;flex:none;
  filter:drop-shadow(0 12px 20px rgba(46,58,110,.14));
  transition:transform var(--dur-slow) var(--ease-out)}
.glass-obj svg{width:100%;height:100%;display:block;overflow:visible}
/* the light the object sits in, so it looks lit rather than pasted on */
.glass-obj::before{
  content:"";position:absolute;inset:-24%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),
    rgba(255,238,232,.42) 46%,rgba(255,238,232,0) 76%)}
.why-card:hover .glass-obj{transform:translateY(-4px)}
.why-card:hover{border-color:rgba(30,42,74,.10);
  box-shadow:0 2px 4px rgba(46,58,110,.05),0 22px 50px rgba(46,58,110,.11)}
.why-card h3{font-size:16.5px;font-weight:var(--fw-semibold);margin-bottom:10px;line-height:1.34}
.why-card p{font-size:14px;line-height:1.62;color:var(--text-secondary);font-weight:400}
.icon-tint{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--accent-tint);color:var(--accent);
  transition:transform var(--dur-slow) var(--ease-out)}
.why-card:hover .icon-tint{transform:translateY(-2px)}
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.why-grid{grid-template-columns:1fr}}

/* 8.4 dentist */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,.72fr);
  gap:clamp(22px,3vw,44px);align-items:center}
.doc-art{position:relative;max-width:400px;justify-self:center;width:100%}
.doc-art::before{content:"";position:absolute;top:44%;left:50%;width:150%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.95) 0%,rgba(255,248,244,.5) 30%,
      rgba(233,236,252,.34) 54%,rgba(233,236,252,0) 76%);
  animation:df-glow 17s ease-in-out infinite}
.doc-art::after{content:"";position:absolute;top:46%;left:50%;width:96%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.7) 60deg,
    rgba(255,255,255,0) 150deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 97.5%,#000 98%,#000 100%);
  mask:radial-gradient(closest-side,transparent 97.5%,#000 98%,#000 100%);
  animation:df-spin 120s linear infinite}
/* The photograph is untouched; only its edges are dissolved, so she sits in
   the same light as everything else instead of inside a card. */
.doc-art img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 12%;
  /* An oval vignette sized SMALLER than the frame, so the fade lands inside
     the picture and every edge falls away into the page. Her face stays fully
     opaque; only the surround dissolves. The photograph itself is untouched. */
  -webkit-mask-image:radial-gradient(58% 68% at 50% 40%,#000 30%,
    rgba(0,0,0,.92) 52%,rgba(0,0,0,.42) 74%,transparent 97%);
  mask-image:radial-gradient(58% 68% at 50% 40%,#000 30%,
    rgba(0,0,0,.92) 52%,rgba(0,0,0,.42) 74%,transparent 97%);
  transition:transform 1.4s var(--ease-out)}
.doc-grid:hover .doc-art img{transform:scale(1.015)}
/* a thin sheet of glass catching light in front of the lower edge */
/* a sheet of light lying across the lower third, tying her into the field */
.doc-art .doc-veil{position:absolute;z-index:2;inset:auto -6% -4% -6%;height:42%;
  pointer-events:none;
  background:linear-gradient(178deg,rgba(255,255,255,0),rgba(255,255,255,.34) 62%,
    rgba(248,250,255,.6));
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 92%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 92%)}
.doc-art .gtooth-float{position:absolute;z-index:3;width:17%;top:4%;left:-8%;opacity:.34;
  filter:blur(.6px);--r:-16deg;transform:rotate(-16deg);
  animation:df-drift 26s ease-in-out infinite}
.creds{display:flex;flex-direction:column;gap:14px}
.cred{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;line-height:1.5;
  color:var(--text-secondary);font-weight:400}
.cred b{color:var(--text-primary);font-weight:var(--fw-semibold);display:block;margin-bottom:1px}
.cred .icon-tint{width:34px;height:34px;border-radius:10px}
.doc-body{font-size:15px;line-height:1.72;color:var(--text-secondary);
  font-weight:400;margin-bottom:18px;max-width:46ch}

/* 8.5 team — horizontal rail with scroll snap */
.rail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.rail-nav{display:flex;gap:8px}
.rail-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.72);color:var(--text-primary);
  box-shadow:var(--glass-rim),0 4px 14px rgba(46,58,110,.08);
  transition:transform var(--dur-normal) var(--ease-out),background var(--dur-normal) var(--ease-std),
             opacity var(--dur-normal) var(--ease-std)}
.rail-btn:hover{background:rgba(255,255,255,.85);transform:translateY(-2px)}
.rail-btn:active{transform:translateY(0) scale(.94)}
.rail-btn[disabled]{opacity:.32;cursor:default;transform:none}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 22px;
  scrollbar-width:thin;scrollbar-color:rgba(30,42,74,.16) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(30,42,74,.16);border-radius:99px}
.rail::-webkit-scrollbar-track{background:transparent}
.member{flex:0 0 auto;width:170px;scroll-snap-align:start;text-align:center;color:inherit;
  transition:transform var(--dur-slow) var(--ease-out)}
.member:hover{transform:translateY(-5px)}
.rail:hover .member:not(:hover){opacity:.82}
.member{transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-std)}
.member-photo{position:relative;display:block;width:140px;height:140px;margin:0 auto 14px;
  border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.9);
  box-shadow:0 10px 28px rgba(46,58,110,.14);
  transition:box-shadow var(--dur-slow) var(--ease-out)}
.member:hover .member-photo{box-shadow:0 20px 44px rgba(46,58,110,.22)}
.member-photo img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out),filter var(--dur-slow) var(--ease-std)}
/* a light warm grade so the eight portraits read as one set rather than eight
   differently-lit photographs; it lifts on hover so the face comes forward */
.member-photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:50%;
  background:linear-gradient(168deg,rgba(255,150,110,.24),rgba(242,105,79,.16) 55%,
    rgba(255,190,150,.10));
  mix-blend-mode:soft-light;
  transition:opacity var(--dur-slow) var(--ease-std);
}
.member-photo img{filter:saturate(1.06) contrast(1.02)}
.member:hover .member-photo::after{opacity:.45}
.member:hover .member-photo img{transform:scale(1.07)}
.member-photo.is-placeholder{display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blue-100),var(--white));
  font-size:32px;font-weight:var(--fw-extrabold);color:var(--blue-400);letter-spacing:-.02em}
.member h3{font-size:14.5px;font-weight:var(--fw-semibold);margin-bottom:5px}
.member p{font-size:12.5px;line-height:1.48;color:var(--navy-300);font-weight:400}

/* 8.6 smile transformations — before and after shown side by side, no slider.
   Each case carries its own number so the sequence is unambiguous. */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.ba-card{position:relative;margin:0;padding:12px 12px 14px}
.ba-num{
  position:absolute;top:-10px;left:-10px;z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:var(--fw-extrabold);color:var(--white);
  background:linear-gradient(178deg,#F4775E,var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(242,105,79,.32);
}
/* interactive before/after: one frame, a clipped overlay, and a draggable
   handle — the "after" photo is the base, the "before" is revealed by
   dragging, so the same image never has to be shown twice */
.ba-compare{position:relative;aspect-ratio:1/1;border-radius:var(--radius-md);
  overflow:hidden;background:var(--blue-100);touch-action:pan-y;cursor:ew-resize;
  --pos:50%}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;user-select:none;-webkit-user-drag:none;
  transition:transform 1.1s var(--ease-out)}
.ba-card:hover .ba-img{transform:scale(1.035)}
.ba-before-wrap{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:2;
  transform:translateX(-50%);pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  translate:-50% 0;background:rgba(255,255,255,.85);
  box-shadow:0 0 0 1px rgba(30,42,74,.10)}
.ba-grip{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--navy-700);
  box-shadow:0 4px 14px rgba(30,42,74,.24),inset 0 1px 0 rgba(255,255,255,.9)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;z-index:3;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:100%}
.ba-range::-moz-range-thumb{width:32px;height:100%;border:0;background:transparent}
.ba-range:focus-visible ~ .ba-handle::before{background:var(--accent)}
.ba-tag{position:absolute;bottom:8px;z-index:2;padding:4px 10px;
  border-radius:var(--radius-pill);
  font-size:10px;font-weight:var(--fw-extrabold);letter-spacing:.09em;
  text-transform:uppercase;background:rgba(27,37,64,.62);color:var(--white);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba-tag-before{left:8px}
.ba-tag-after{right:8px}
.ba-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:14px 6px 2px}
.ba-meta h3{font-size:14.5px;font-weight:var(--fw-semibold)}
.ba-meta p{font-size:12.5px;color:var(--navy-300);font-weight:400}

/* 8.7 inside the clinic — a drag/swipe filmstrip, the same rail mechanics
   as the team section: the primary room leads, the two supporting shots
   follow, and the whole strip moves with a pointer drag or the nav buttons. */
.clinic-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;cursor:grab;padding:2px 2px 10px;
  scrollbar-width:thin;scrollbar-color:rgba(30,42,74,.16) transparent}
.clinic-rail:active{cursor:grabbing}
.clinic-rail::-webkit-scrollbar{height:6px}
.clinic-rail::-webkit-scrollbar-thumb{background:rgba(30,42,74,.16);border-radius:99px}
.clinic-rail::-webkit-scrollbar-track{background:transparent}
.clinic-shot{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.62);flex:0 0 auto;scroll-snap-align:start;
  box-shadow:var(--glass-rim),0 2px 5px rgba(46,58,110,.05),0 20px 50px rgba(46,58,110,.14);
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);
}
.clinic-shot.is-primary{width:min(760px,74vw);aspect-ratio:16/9}
.clinic-shot:not(.is-primary){width:min(420px,58vw);aspect-ratio:4/3}
.clinic-rail:hover .clinic-shot:not(:hover){opacity:.9}
.clinic-shot img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06) translate3d(0,var(--ky,0px),0);
  transition:transform 1.3s var(--ease-out)}
.clinic-shot:hover{transform:translateY(-3px);
  box-shadow:var(--glass-rim),0 4px 8px rgba(46,58,110,.06),0 26px 56px rgba(46,58,110,.18)}
.clinic-shot:hover img{transform:scale(1.045) translate3d(0,var(--ky,0px),0)}
/* a thin sheet of light across each frame, tying them to the glass language */
.clinic-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:var(--glass-rim);
  background:linear-gradient(202deg,rgba(255,255,255,.20),rgba(255,255,255,0) 42%)}

/* 8.8 reviews — a smooth drag/swipe carousel, same rail mechanics as team
   and the clinic filmstrip, so the page's horizontal-interaction language
   stays consistent site-wide rather than each section inventing its own. */
.review-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;cursor:grab;padding:2px 2px 10px;
  scrollbar-width:thin;scrollbar-color:rgba(30,42,74,.16) transparent}
.review-rail:active{cursor:grabbing}
.review-rail::-webkit-scrollbar{height:6px}
.review-rail::-webkit-scrollbar-thumb{background:rgba(30,42,74,.16);border-radius:99px}
.review-rail::-webkit-scrollbar-track{background:transparent}
.review-rail:hover .review:not(:hover),.review-rail:hover .score-card:not(:hover){opacity:.9}
.review{display:flex;flex-direction:column;gap:20px;padding:30px 28px;margin:0;
  flex:0 0 auto;width:min(320px,80vw);scroll-snap-align:start}
.review.lift:hover{transform:translateY(-4px)}
.review blockquote{margin:0;font-size:14.5px;line-height:1.72;color:var(--text-primary);
  font-weight:400}
/* no avatar: we do not have photographs of these patients, and using a staff
   portrait in their place would misrepresent who is speaking. A coral rule
   carries the attribution instead. */
.review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--border-subtle)}
.review figcaption::before{content:"";width:3px;height:30px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--coral-300),var(--accent))}
.rv-name{font-size:13.5px;font-weight:var(--fw-bold)}
.rv-meta{font-size:12px;color:var(--navy-300);font-weight:var(--fw-semibold);margin-top:2px}
.score-card{position:relative;display:flex;flex-direction:column;gap:20px;padding:26px 24px;
  flex:0 0 auto;width:min(300px,80vw);scroll-snap-align:start;margin:0;
  background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(255,255,255,.52))}
/* the ratings block glows: a warm bloom behind it plus a lit rim, so the one
   piece of hard proof on the page is the brightest thing in its section */
.score-card.is-glow{
  box-shadow:var(--glass-rim),0 2px 6px rgba(46,58,110,.06),
             0 18px 44px rgba(46,58,110,.12),
             0 0 0 1px rgba(255,255,255,.5),
             0 0 46px rgba(255,196,176,.55);
}
.score-card.is-glow::before{
  content:"";position:absolute;inset:-22%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,198,.75),rgba(255,214,198,0) 72%);
  animation:df-glow 7s ease-in-out infinite;
}
.score-card.is-glow .score-n{color:var(--navy-900)}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:center}
.score-n{font-size:30px;font-weight:var(--fw-extrabold);letter-spacing:-.03em;line-height:1;
  margin:10px 0 6px}
.score-t{font-size:11.5px;line-height:1.4;color:var(--navy-300);font-weight:var(--fw-semibold)}
.score-mark{width:38px;height:38px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  background:var(--white);box-shadow:0 3px 10px rgba(30,42,74,.14);
  font-size:18px;font-weight:var(--fw-extrabold);line-height:1}
.rating-line{font-size:13.5px;color:var(--text-secondary);font-weight:var(--fw-semibold);
  margin-top:22px}

/* 8.9 find us */
.find{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,2.6vw,34px);align-items:stretch}
.facts{display:flex;flex-direction:column;gap:18px;padding:30px 28px;justify-content:center}
.fact{display:flex;gap:14px;align-items:flex-start}
.fact .icon-tint{width:34px;height:34px;border-radius:10px}
.fact-k{font-size:12px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy-300);margin-bottom:3px}
.fact-v{font-size:14.5px;font-weight:var(--fw-medium);line-height:1.5}
.map{position:relative;min-height:300px;border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--glass-rim),0 16px 44px rgba(46,58,110,.13)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:saturate(.6) contrast(.95) brightness(1.04);
  transition:filter var(--dur-slow) var(--ease-std)}
.map:hover iframe{filter:saturate(.85) contrast(.98) brightness(1.02)}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:var(--glass-rim);border-radius:inherit;
  background:linear-gradient(200deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%)}
.map-cta{position:absolute;left:16px;bottom:16px;z-index:2}
.addr{font-size:15px;line-height:1.86;color:var(--text-secondary);font-weight:400}

/* 8.10 book */
.book{position:relative;z-index:1;overflow:hidden;
  padding:clamp(84px,10vw,130px) 0 clamp(80px,9vw,110px);text-align:center}
.book::before{content:"";position:absolute;top:50%;left:50%;width:min(900px,90%);aspect-ratio:1.6;
  translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,255,255,.85),rgba(255,244,240,.35) 42%,
    rgba(255,244,240,0) 72%);animation:df-glow 19s ease-in-out infinite}
/* two slow-drifting blooms so the CTA's field of light stays alive rather
   than sitting under one static glow */
.book::after{content:"";position:absolute;top:14%;left:8%;width:340px;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,196,.30),rgba(255,214,196,0) 70%);
  filter:blur(20px);animation:df-drift-slow 24s ease-in-out infinite}
.book .shell::after{content:"";position:absolute;bottom:6%;right:6%;width:300px;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,222,246,.34),rgba(214,222,246,0) 70%);
  filter:blur(20px);animation:df-drift 27s ease-in-out infinite}
.book .shell{position:relative;z-index:1}
.book .eyebrow,.book .lede{margin-inline:auto}
.book .lede{text-align:center;margin-top:14px}
.book-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.book-sign{margin-top:30px;font-size:26px;transform:rotate(-2deg)}

/* --- 9. footer ------------------------------------------------------------ */
.site-footer{position:relative;z-index:1;background:var(--bg-navy-panel);color:var(--text-inverse);
  padding:clamp(48px,6vw,72px) 0 clamp(28px,3vw,40px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,44px);padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .brand-name{font-size:22px;color:var(--white)}
.site-footer .brand-sub{color:rgba(255,255,255,.55)}
.foot-blurb{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.6);
  font-weight:400;margin-top:16px;max-width:34ch}
.foot-col h2{font-size:11.5px;font-weight:var(--fw-extrabold);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.74);
  transition:color var(--dur-fast) var(--ease-std),padding-left var(--dur-normal) var(--ease-out)}
.foot-col a:hover{color:var(--white);padding-left:5px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding-top:24px;font-size:12.5px;color:rgba(255,255,255,.5);font-weight:var(--fw-medium)}
.foot-bottom a{color:rgba(255,255,255,.68)}
.foot-bottom a:hover{color:var(--white)}

/* --- 10. persistent mobile bar -------------------------------------------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.80);border-top:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 -8px 30px rgba(46,58,110,.14);
  transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out);
}
.mobile-bar.is-on{transform:none}
.mb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  height:52px;border-radius:var(--radius-md);font-size:11.5px;font-weight:var(--fw-bold);
  color:var(--text-primary);background:rgba(255,255,255,.7);border:1px solid var(--border-subtle);
  transition:transform var(--dur-fast) var(--ease-out)}
.mb:active{transform:scale(.96)}
.mb.is-book{background:var(--accent);color:var(--white);border-color:transparent}
.mb.is-wa svg{color:var(--green-500)}

/* --- 11. responsive ------------------------------------------------------- */
@media (max-width:1180px){
  .dropdown{min-width:440px}
  .doc-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);}
  .doc-grid .creds{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .find{grid-template-columns:1fr 1fr}
  .find .map{grid-column:1/-1;min-height:320px}
}
@media (max-width:1000px){
  .nav > li:not(.has-menu):not(.nav-keep){display:none}
  .header-phone .label{display:none}
  .treat-lead{grid-template-columns:1fr}
  .treat-lead-art{order:-1;min-height:190px;max-height:34vh}
}

/* Tablet — the glass panel widens over the photo and drops its 50% cap */
@media (max-width:900px){
  :root{--header-h:88px}
  /* the fixed clamp() min-height was written for the wide two-column
     composition; once the panel stacks full-width its own content can run
     taller than that, and .hero's overflow:hidden was clipping the bottom
     of the glass panel (trust row, hand-note) — let the section size to
     its content instead */
  .hero{min-height:0;height:auto;padding-bottom:clamp(36px,8vw,60px)}
  .hero-grid{max-width:min(560px,88%);margin-inline:auto}
  .treat-lead-art{min-height:0}
  .treat-grid{grid-template-columns:1fr 1fr}
  .treat-head-right{max-width:none}
  .hero-actions{width:100%}
  .scroll-cue{display:none}
  .hero-hand{margin-top:14px;transform:rotate(-2deg)}
  .kids-inner{grid-template-columns:1fr}
  .kids-world{order:-1;min-height:260px}
  /* stacked here too (mascot above copy) — the wash follows, top-to-bottom */
  .kids-inner{padding-bottom:clamp(48px,6vw,66px);
    background:linear-gradient(190deg,rgba(207,221,240,.72) 0%,
      rgba(224,233,246,.6) 55%,rgba(255,246,242,.62) 100%)}
  .doc-grid{grid-template-columns:1fr}
  .doc-art{order:-1;max-width:420px;margin-inline:auto}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

/* Phone — recomposed, not compressed */
@media (max-width:720px){
  body{padding-bottom:86px}
  .mobile-bar{display:grid}
  .site-header{padding:10px 0}
  .header-pill{padding:8px 8px 8px 16px;gap:10px}
  .nav{display:none}
  .nav-toggle{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.75);cursor:pointer;
    color:var(--text-primary)}
  /* the bottom bar already carries Book, so the header keeps only
     brand · call · menu — no icon-only mystery buttons */
  .header-pill > .btn{display:none}
  .header-phone{padding:9px 11px}
  .brand-sub{display:none}
  .brand-name{font-size:19px}

  .section{padding-top:clamp(58px,13vw,80px)}
  .hero-grid{max-width:none;width:100%}
  .hero-actions .btn{flex:1 1 100%}
  .trust-row{flex-wrap:nowrap;overflow-x:auto;width:100vw;margin-left:calc(50% - 50vw);
    padding:2px 4vw 6px;scroll-snap-type:x proximity}
  .trust{flex:0 0 auto;scroll-snap-align:start}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px}
  .treat-grid{grid-template-columns:1fr;gap:10px}
  .treat-card{min-height:0;padding:20px 44px 20px 18px}
  .icon-badge{width:46px;height:46px}
  .kids-features{flex-wrap:wrap;gap:18px 22px;margin-top:18px}
  .kids-feature span:last-child{white-space:normal;max-width:100px}
  .kids-hand{display:none}
  .kids-inner{padding-bottom:clamp(64px,17vw,88px)}
  .why-grid{grid-template-columns:1fr}
  .doc-grid .creds{grid-template-columns:1fr}
  .rail{width:100vw;margin-left:calc(50% - 50vw);padding-inline:4vw}
  .rail-nav{display:none}
  .member{width:142px}
  .member-photo{width:120px;height:120px}
  .ba-grid{grid-template-columns:1fr}
  .clinic-rail{width:100vw;margin-left:calc(50% - 50vw);padding:2px 4vw 10px}
  .clinic-shot.is-primary{width:88vw}
  .clinic-shot:not(.is-primary){width:70vw}
  .review-rail{width:100vw;margin-left:calc(50% - 50vw);padding:2px 4vw 10px}
  .find{grid-template-columns:1fr}
  .find .map{min-height:260px}
  .book-actions .btn{flex:1 1 100%}
  .foot-top{grid-template-columns:1fr;gap:28px}
  .foot-bottom{flex-direction:column;gap:8px}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(238,241,250,.96);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  padding:22px 6vw calc(30px + env(safe-area-inset-bottom));overflow-y:auto;
  opacity:0;transition:opacity var(--dur-normal) var(--ease-std);
}
.drawer.is-open{display:block}
.drawer.is-shown{opacity:1}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer-close{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.7);border:1px solid var(--border-subtle);cursor:pointer;
  color:var(--text-primary)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav > a,.drawer details > summary{
  padding:15px 2px;border-bottom:1px solid var(--border-subtle);
  font-size:17px;font-weight:var(--fw-bold);color:var(--text-primary);
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.drawer details > summary::-webkit-details-marker{display:none}
.drawer details[open] > summary .chev{transform:rotate(180deg)}
.drawer details ul{list-style:none;margin:0;padding:6px 0 10px}
.drawer details ul a{display:block;padding:11px 2px 11px 14px;font-size:14.5px;
  font-weight:var(--fw-semibold);color:var(--text-secondary)}
.drawer-foot{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.drawer-foot .btn{width:100%}

/* --- 12. reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  [data-anim]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .hero-h1 .line > span{transform:none !important}
  .mobile-bar{transform:none}
}

/* --- 13. load-in + small fixes -------------------------------------------- */
[data-load]:not(.line){opacity:0;transform:translate3d(0,18px,0)}
.loaded [data-load]:not(.line){opacity:1;transform:none;
  transition:opacity .8s var(--ease-out) var(--d,0ms),transform .95s var(--ease-out) var(--d,0ms)}
.trust > span{display:block;min-width:0}
.trust-name,.trust-meta,.rv-name,.rv-meta,.fact-k,.fact-v{display:block}
.review figcaption > span{display:block;min-width:0}
.brand-name{display:block}
.brand-sub{display:block}
.hero-h1 .line{padding-bottom:.06em}
.icon-tint svg{display:block}
.dropdown li{margin:0}
.nav{margin:0;padding:0}
@media (prefers-reduced-motion:reduce){[data-load]{opacity:1 !important;transform:none !important}}

/* --- 14. mobile: fewer decorative elements, lighter motion --------------- */
@media (max-width:900px){
  /* the page-wide drifting teeth are atmosphere for a wide canvas; on a
     phone they only add clutter, so they thin out and dim */
  .atmos-layer[data-par="0.16"]{display:none}
  .atmos-layer[data-par="0.10"] .gtooth{opacity:.18}
  .bridge{opacity:.3 !important}
}

/* --- 15. performance guards ---------------------------------------------- */
/* Backdrop blur is the expensive part of this design. On phones the page
   behind most cards is nearly flat, so the blur buys almost nothing visually
   while costing a composite per card — swap those few surfaces for a solid
   equivalent and keep the blur where it actually reads (header, hero, stage). */
@media (max-width:720px){
  .treat-card,.glass,.treat-lead,.kids-inner{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(148deg,rgba(255,255,255,.86),rgba(255,255,255,.72));
  }
  /* stacked at this width — mascot (cool) on top, copy (warm) below, so the
     wash runs top-to-bottom instead of left-to-right */
  .kids-inner{background:linear-gradient(190deg,rgba(207,221,240,.94) 0%,
    rgba(224,233,246,.92) 55%,rgba(255,246,242,.92) 100%)}
  .glass::after{display:none}
  .treat-grid:hover .treat-card:not(:hover),.rail:hover .member:not(:hover){opacity:1}
}
/* hint the compositor only where something actually moves continuously */
.atmos-layer{will-change:transform}

/* --- 16. touch targets ---------------------------------------------------- */
@media (pointer:coarse),(max-width:720px){
  .header-phone{min-width:44px;min-height:44px}
  .rail-btn{width:44px;height:44px}
  .drawer nav > a,.drawer details > summary{min-height:52px}
  .link-cta{min-height:44px;align-items:center}
  .ba-range{touch-action:pan-y}
}

/* --- 17. the aligner, shown at rest in its own panel ---------------------- */
/* Round 8: the hero's travelling-tooth journey is retired (see section 7),
   so the Clear Aligners panel no longer needs a "no journey" fallback —
   its photograph is simply always shown. */
.aligner-static{
  display:block;position:absolute;top:50%;left:50%;width:76%;
  translate:-50% -50%;
  filter:drop-shadow(0 16px 30px rgba(30,42,74,.16));
}

/* ==========================================================================
   18. INTERNAL-PAGE COMPOSITION SYSTEM
   ==========================================================================
   Shared patterns for every route that ISN'T the homepage. The homepage
   fixes the design LANGUAGE (tokens, glass, buttons, icons, motion) — these
   are different COMPOSITIONS built from that same language: editorial
   splits, storytelling rows, timelines, accordions, staggered layouts.
   None of this is used on the homepage; the homepage is untouched. */

/* -- 18.1 editorial hero — a calmer relative of the homepage hero. No full-
   bleed photo/glass panel; a plain split with the art integrated into the
   page's own atmosphere (a soft radial glow behind it, a real shadow, a
   gentle mask) rather than floating as a cut-out PNG. */
.ed-hero{position:relative;padding-top:clamp(72px,9vw,118px);
  padding-bottom:clamp(46px,6vw,72px);overflow:hidden;scroll-margin-top:var(--header-h)}
.ed-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.ed-hero-copy .eyebrow{margin-bottom:16px}
.ed-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.03em;
  font-weight:var(--fw-extrabold);color:var(--text-primary);margin-bottom:20px}
.ed-hero .lede{font-size:clamp(16px,1.3vw,18.5px);max-width:52ch;margin-bottom:28px}
.ed-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ed-hero-art{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  aspect-ratio:4/4.6;box-shadow:0 24px 60px rgba(46,58,110,.16)}
.ed-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.ed-hero-art::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 42% 32%,rgba(255,255,255,.9),rgba(233,238,252,.5) 44%,
    rgba(233,238,252,0) 78%)}
.ed-hero-art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -40px 60px -30px rgba(20,28,54,.35)}
.ed-hero.is-compact{padding-bottom:clamp(30px,4vw,48px)}
.ed-hero.is-compact .ed-hero-grid{grid-template-columns:1fr;text-align:center}
.ed-hero.is-compact .lede{margin-inline:auto}
.ed-hero.is-compact .ed-hero-actions{justify-content:center}

/* -- 18.2 story — horizontal storytelling: text one side, a large image the
   other, alternating with .is-reverse so a multi-block page doesn't repeat
   the same left/right rhythm every time. */
.story{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.6vw,64px);align-items:center}
.story.is-reverse{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.story.is-reverse .story-art{order:2}
.story.is-reverse .story-copy{order:1}
.story-copy h2{margin-bottom:16px}
.story-copy .lede{margin-bottom:0}
.story-art{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  aspect-ratio:5/4.1;box-shadow:0 20px 50px rgba(46,58,110,.14)}
.story-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out)}
.story:hover .story-art img{transform:scale(1.025)}

/* -- 18.3 principles — 3–4 beliefs as large asymmetric typography rather
   than identical cards: a big index mark, a short heading, a line of copy,
   staggered vertically so the block reads as one composition. */
.principles{display:grid;gap:0}
.principle{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--border-subtle)}
.principle:last-child{border-bottom:1px solid var(--border-subtle)}
.principle:nth-child(2){margin-left:clamp(0px,6vw,64px)}
.principle:nth-child(4){margin-left:clamp(0px,6vw,64px)}
.principle-n{font-family:var(--font-hand);font-size:clamp(34px,4vw,52px);
  color:var(--accent);line-height:1;padding-top:4px}
.principle h3{font-size:clamp(19px,1.8vw,24px);font-weight:var(--fw-bold);
  letter-spacing:-.01em;margin-bottom:8px;max-width:26ch}
.principle p{font-size:14.5px;line-height:1.68;color:var(--text-secondary);
  font-weight:400;max-width:48ch}

/* -- 18.4 feature row — sparse iconography, not a card grid: a short list
   of capabilities read top to bottom, each with one small tinted mark. */
.feature-row{display:flex;flex-direction:column;gap:2px}
.feature-row-item{display:flex;align-items:flex-start;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--border-subtle)}
.feature-row-item:first-child{border-top:1px solid var(--border-subtle)}
.feature-row-item .icon-tint{width:38px;height:38px;border-radius:11px;flex:none}
.feature-row-item h3{font-size:15.5px;font-weight:var(--fw-bold);margin-bottom:3px}
.feature-row-item p{font-size:13.5px;line-height:1.6;color:var(--text-secondary);font-weight:400}

/* -- 18.5 editorial gallery — an asymmetric masonry-feel grid for authentic
   clinic photography, not a uniform card grid. Row spans vary by hand per
   image so the grid itself has composition. */
.egallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:120px;gap:12px}
.egallery figure{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 10px 26px rgba(46,58,110,.10)}
.egallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out)}
.egallery figure:hover img{transform:scale(1.04)}
.egallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;
  font-size:12.5px;font-weight:var(--fw-semibold);color:#fff;
  background:linear-gradient(0deg,rgba(20,28,54,.55),rgba(20,28,54,0));
  opacity:0;transition:opacity var(--dur-normal) var(--ease-out)}
.egallery figure:hover figcaption{opacity:1}
.egallery .span-a{grid-column:span 4;grid-row:span 3}
.egallery .span-b{grid-column:span 2;grid-row:span 2}
.egallery .span-c{grid-column:span 2;grid-row:span 3}
.egallery .span-d{grid-column:span 3;grid-row:span 2}

/* -- 18.6 treatment rows — a large horizontal featured row: image one side,
   name/description/arrow the other, alternating so a stack of these never
   repeats the homepage grid. */
.trow-list{display:flex;flex-direction:column;gap:clamp(26px,3.6vw,44px)}
.trow{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,44px);align-items:center;color:inherit}
.trow.is-reverse{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.trow.is-reverse .trow-art{order:2}
.trow.is-reverse .trow-body{order:1}
.trow-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:6/5;box-shadow:0 16px 40px rgba(46,58,110,.12)}
.trow-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out)}
.trow:hover .trow-art img{transform:scale(1.035)}
.trow-body h3{font-size:clamp(19px,1.9vw,25px);font-weight:var(--fw-bold);
  letter-spacing:-.015em;margin-bottom:10px}
.trow-body p{font-size:14.5px;line-height:1.68;color:var(--text-secondary);
  font-weight:400;max-width:44ch;margin-bottom:16px}
.trow-body .link-cta .arr{transition:transform var(--dur-normal) var(--ease-out)}
.trow:hover .link-cta .arr{transform:translateX(5px)}

/* -- 18.7 compact treatment list — deliberately lighter than the homepage
   grid: plain rows, a hairline divider, no glass/blur, for the "complete
   list" section only. */
.tlist{display:flex;flex-direction:column}
.tlist a{display:flex;align-items:center;gap:16px;padding:16px 4px;
  border-bottom:1px solid var(--border-subtle);color:inherit;
  transition:padding-left var(--dur-normal) var(--ease-out)}
.tlist a:first-child{border-top:1px solid var(--border-subtle)}
.tlist a:hover{padding-left:8px}
.tlist .t-ic{width:30px;height:30px;flex:none;color:var(--accent)}
.tlist .t-name{font-size:15px;font-weight:var(--fw-semibold);flex:1 1 auto}
.tlist .t-arr{flex:none;color:var(--navy-300);
  transition:transform var(--dur-normal) var(--ease-out),color var(--dur-normal) var(--ease-out)}
.tlist a:hover .t-arr{color:var(--accent);transform:translateX(4px)}

/* -- 18.8 timeline — a process/journey shown as connected steps rather than
   generic numbered cards. */
.timeline{position:relative;display:flex;flex-direction:column;gap:0}
.timeline::before{content:"";position:absolute;top:6px;bottom:6px;left:15px;width:1px;
  background:var(--border-soft)}
.tl-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);
  gap:20px;padding-bottom:clamp(26px,3.4vw,38px)}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--white);border:2px solid var(--accent);
  color:var(--accent);font-weight:var(--fw-extrabold);font-size:13px}
.tl-step h3{font-size:16.5px;font-weight:var(--fw-bold);margin-bottom:6px}
.tl-step p{font-size:14px;line-height:1.66;color:var(--text-secondary);font-weight:400;max-width:56ch}

/* -- 18.9 FAQ accordion — native <details>, spacious, matches the mobile
   drawer's own disclosure pattern rather than inventing a new one. */
.faq{display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--border-subtle);padding:20px 0}
.faq details:first-child{border-top:1px solid var(--border-subtle)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;font-size:15.5px;font-weight:var(--fw-semibold);
  color:var(--text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;color:var(--accent);transition:transform var(--dur-normal) var(--ease-out)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .faq-a{font-size:14.5px;line-height:1.7;color:var(--text-secondary);
  font-weight:400;max-width:64ch;margin-top:14px}

/* -- 18.10 key facts strip — reuses .fact/.icon-tint from the homepage's
   Find Us block, laid out as a horizontal strip instead of a stacked list. */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(18px,2.6vw,32px);padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.keyfacts .fact{align-items:flex-start}

/* -- 18.11 large before/after feature — the same drag-compare mechanics as
   the homepage cards (.ba-compare, reused as-is), just presented big and
   singular rather than in a small grid. */
.ba-feature{max-width:720px;margin-inline:auto}
.ba-feature .ba-compare{aspect-ratio:4/3;border-radius:var(--radius-xl)}
.ba-feature .ba-meta{margin-top:16px;text-align:center}

/* -- 18.12 staggered team — different-sized blocks instead of a uniform
   grid, so specialists don't read as an employee directory. */
.team-stagger{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tmember{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-surface);box-shadow:0 10px 28px rgba(46,58,110,.09);color:inherit}
.tmember-photo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--blue-100)}
.tmember-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out)}
.tmember:hover .tmember-photo img{transform:scale(1.04)}
.tmember-photo.is-placeholder{display:grid;place-items:center;font-weight:var(--fw-extrabold);
  font-size:22px;color:var(--navy-300)}
.tmember-body{display:block;padding:14px 16px 18px}
.tmember-body h3{font-size:14.5px;font-weight:var(--fw-bold);margin-bottom:2px}
.tmember-body p{font-size:12.5px;color:var(--text-secondary);font-weight:400;line-height:1.4}
.tmember.is-lg{grid-column:span 3;grid-row:span 2}
.tmember.is-lg .tmember-photo{aspect-ratio:4/4.6}
.tmember.is-md{grid-column:span 3}
.tmember.is-sm{grid-column:span 2}

/* -- 18.13 doctor profile hero — a large authentic portrait feature for a
   dedicated profile page (roomier than the homepage's paired dentist
   section, and without its credentials rail, which appears further down
   the profile page in .feature-row instead). */
.profile-hero{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(28px,4.6vw,60px);align-items:center}
.profile-hero-art{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  aspect-ratio:4/5;box-shadow:0 24px 60px rgba(46,58,110,.16)}
.profile-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.profile-hero .eyebrow{margin-bottom:14px}
.profile-hero h1{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.03em;
  font-weight:var(--fw-extrabold);margin-bottom:6px}
.profile-role{font-size:15.5px;font-weight:var(--fw-semibold);color:var(--accent-active);
  margin-bottom:18px}

/* -- 18.14 contact actions — three prominent, near-equal-weight ways to
   reach the clinic, not a form-first page. */
.contact-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.caction{display:flex;flex-direction:column;gap:14px;padding:26px 24px;
  border-radius:var(--radius-lg);background:var(--bg-surface);
  box-shadow:0 10px 28px rgba(46,58,110,.09);color:inherit;
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)}
.caction:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(46,58,110,.14)}
.caction .icon-tint{width:44px;height:44px;border-radius:13px}
.caction h3{font-size:16px;font-weight:var(--fw-bold)}
.caction p{font-size:13.5px;color:var(--text-secondary);font-weight:400}

/* -- 18.15 stat band — large approved numbers (rating, review counts) shown
   as a statement rather than a small score card. */
.stat-band{display:flex;flex-wrap:wrap;gap:clamp(32px,6vw,72px);align-items:baseline}
.stat{display:flex;flex-direction:column;gap:4px}
.stat-n{font-size:clamp(38px,5vw,58px);font-weight:var(--fw-extrabold);
  letter-spacing:-.02em;color:var(--text-primary);line-height:1}
.stat-n .unit{font-size:.42em;font-weight:var(--fw-bold);color:var(--navy-300);margin-left:2px}
.stat-l{font-size:13.5px;color:var(--text-secondary);font-weight:var(--fw-semibold)}

/* -- 18.16 large testimonial feature — one quote at a time, set big. */
.testimonial-feature{max-width:820px}
.testimonial-feature blockquote{font-size:clamp(20px,2.4vw,29px);line-height:1.42;
  letter-spacing:-.01em;font-weight:var(--fw-medium);color:var(--text-primary);margin-bottom:22px}
.testimonial-feature figcaption{display:flex;align-items:center;gap:12px;font-size:14px}
.testimonial-feature .rv-name{font-weight:var(--fw-bold);color:var(--text-primary);display:block}
.testimonial-feature .rv-meta{color:var(--text-secondary);display:block}

/* -- 18.17 emergency / utility strip — flat, clear, minimal decoration */
.util-strip{display:flex;flex-wrap:wrap;gap:14px}
.util-strip .btn{flex:1 1 220px}

@media (max-width:1080px){
  .egallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .egallery .span-a{grid-column:span 4;grid-row:span 2}
  .team-stagger{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tmember.is-lg{grid-column:span 4;grid-row:span 2}
  .tmember.is-md{grid-column:span 2}
  .tmember.is-sm{grid-column:span 2}
}

@media (max-width:900px){
  .ed-hero-grid{grid-template-columns:1fr;text-align:left}
  .ed-hero-art{order:-1;max-width:420px;margin-inline:auto}
  .story,.story.is-reverse{grid-template-columns:1fr}
  .story.is-reverse .story-art,.story .story-art{order:-1}
  .story.is-reverse .story-copy,.story .story-copy{order:2}
  .principle{grid-template-columns:auto minmax(0,1fr)}
  .principle:nth-child(2),.principle:nth-child(4){margin-left:0}
  .trow,.trow.is-reverse{grid-template-columns:1fr}
  .trow.is-reverse .trow-art,.trow .trow-art{order:-1}
  .trow.is-reverse .trow-body,.trow .trow-body{order:2}
  .profile-hero{grid-template-columns:1fr;max-width:420px;margin-inline:auto;text-align:center}
  .contact-actions{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .ed-hero{padding-top:clamp(58px,13vw,80px)}
  .egallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
  .egallery .span-a,.egallery .span-b,.egallery .span-c,.egallery .span-d{
    grid-column:span 2;grid-row:span 2}
  .team-stagger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tmember.is-lg,.tmember.is-md,.tmember.is-sm{grid-column:span 2;grid-row:auto}
  .tmember.is-lg .tmember-photo{aspect-ratio:4/5}
  .contact-actions{grid-template-columns:1fr}
  .stat-band{gap:32px}
  .util-strip .btn{flex:1 1 100%}
}

/* ==========================================================================
   19. PHONE + TABLET RECOMPOSITION
   ==========================================================================
   Most visitors are on a phone, so this layer is written phone-first: the
   first block is the phone/tablet base (everything up to 1100px), the second
   only adds what a tablet's extra width earns. Nothing above 1100px changes.

   Two jobs:
   a) the banner — the tooth leads, then the headline, then the two actions,
      stacked and centred (the client's own wireframe), instead of a glass
      card sitting on top of the tooth;
   b) scroll length — card groups run as sideways swipe rows, long copy is
      clamped behind "Read more", and spacing is tightened. No content is
      removed. */

@media (max-width:1100px){
  :root{--hero-art-h:clamp(290px,47svh,440px);--gut:4vw}

  /* -- 19.1 banner -------------------------------------------------------- */
  .hero{display:block;min-height:0;height:auto;padding:0 0 26px;overflow:hidden}
  /* a soft, blurred copy of the same photo fills the full width, so the
     sharp tooth crop in front of it never shows a hard edge on wide screens */
  .hero-bg{inset:0 0 auto 0;height:var(--hero-art-h);animation:none;will-change:auto;
    background:url("../assets/hero-tooth-blur.jpg") center/100% 100% no-repeat}
  .hero-bg::before{content:"";position:absolute;inset:0;
    background:url("../assets/hero-tooth-portrait.jpg") center/auto 100% no-repeat;
    --w:calc(var(--hero-art-h) * .806);
    -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - var(--w) / 2),
      #000 calc(50% - var(--w) / 2 + 70px),#000 calc(50% + var(--w) / 2 - 70px),
      transparent calc(50% + var(--w) / 2));
    mask-image:linear-gradient(90deg,transparent calc(50% - var(--w) / 2),
      #000 calc(50% - var(--w) / 2 + 70px),#000 calc(50% + var(--w) / 2 - 70px),
      transparent calc(50% + var(--w) / 2));
    animation:df-hero-tooth 14s ease-in-out infinite}
  /* the photo dissolves into the page, so the headline sits on a calm surface */
  .hero-bg::after{inset:auto 0 0 0;height:30%;animation:none;
    background:linear-gradient(180deg,rgba(238,241,250,0),rgba(238,241,250,.86) 62%,var(--bg-page))}
  .hero > .shell{padding-top:calc(var(--hero-art-h) - 26px)}
  .hero-grid{max-width:none;width:100%;margin:0;padding:0;align-items:center;text-align:center;
    background:none;border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-grid::after{display:none}
  .hero-eyebrow,.hero-rating,.hero-hand,.scroll-cue{display:none}
  .hero-h1{font-size:clamp(30px,9.2vw,58px);line-height:1.04;margin-bottom:8px}
  .hero-sub{font-size:15px;margin-bottom:18px}
  .hero-actions{flex-direction:column;flex-wrap:nowrap;gap:10px;width:100%;max-width:440px;
    margin:0 auto 16px}
  .hero-actions .btn{flex:none;width:100%}
  .trust-row{flex-wrap:nowrap;justify-content:center;gap:8px;width:100%;margin:0;padding:0;overflow:visible}
  .trust{flex:0 1 auto;gap:8px;padding:7px 12px 7px 8px;border-radius:var(--radius-pill);
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
    box-shadow:0 2px 10px rgba(46,58,110,.07);text-align:left}
  .trust-mark{width:24px;height:24px;font-size:13px}
  .trust-name{font-size:11.5px;white-space:nowrap}
  .trust-meta{font-size:10.5px;white-space:nowrap;margin-top:0}

  /* -- 19.2 shared rhythm ------------------------------------------------- */
  .section{padding-top:clamp(40px,7vw,60px)}
  .sec-head{gap:12px;margin-bottom:18px}
  .rail-head{gap:10px;margin-bottom:16px !important}
  .rail-head .h-sub,.rail-head .h-sec{margin-bottom:8px !important}
  .h-sec{font-size:clamp(23px,5.6vw,34px)}
  .h-sub{font-size:clamp(22px,5.2vw,32px)}
  .lede{font-size:14.5px;line-height:1.58}
  .sec-head .lede{margin-top:8px}
  .eyebrow{margin-bottom:8px}

  /* a full-bleed sideways swipe row: the cards run edge to edge and the next
     one always peeks in, which is what tells a thumb there is more */
  .treat-grid,.ba-grid,.rail,.clinic-rail,.review-rail{
    width:100vw;margin-left:calc(50% - 50vw);padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .treat-grid::-webkit-scrollbar,.ba-grid::-webkit-scrollbar,.rail::-webkit-scrollbar,
  .clinic-rail::-webkit-scrollbar,.review-rail::-webkit-scrollbar{display:none}
  .rail-nav{display:none}

  /* -- 19.3 treatments: lead feature + a two-row swipe grid ---------------- */
  .treat-hand{display:none}
  .treat-head-right{max-width:none}
  .sec-head > .link-cta.btn{display:none} /* the grid's own last tile is "All treatments" */
  .treat-lead{grid-template-columns:minmax(0,1fr) 34%;margin-bottom:12px;border-radius:var(--radius-lg)}
  .treat-lead-body{padding:16px 0 16px 18px;gap:8px}
  .treat-lead-tag{font-size:10px;padding:4px 10px}
  .treat-lead h3{font-size:20px}
  .treat-lead .lede{font-size:13.5px;line-height:1.45}
  .treat-lead .link-cta{font-size:13.5px;min-height:0}
  .treat-lead-art{order:0;min-height:0;max-height:none}
  .aligner-static{width:118%}
  .treat-grid{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;
    grid-auto-columns:42%;grid-auto-rows:auto;gap:10px;padding-block:4px 10px}
  .treat-card{min-height:104px;padding:14px 12px 14px 14px;scroll-snap-align:start;border-radius:var(--radius-md)}
  .treat-card .icon-badge{width:40px;height:40px}
  .treat-card .icon-badge svg{width:22px;height:22px}
  .treat-card h3{margin-top:10px;font-size:13px;line-height:1.25}
  .treat-card p,.treat-card .arr-circle{display:none}
  .treat-card.is-all p{display:block;font-size:11.5px;margin-top:2px}

  /* -- 19.4 kids: copy and mascot side by side, features in one row -------- */
  .kids{margin-top:clamp(36px,6vw,56px)}
  .kids-inner{grid-template-columns:minmax(0,1fr) 40%;gap:0 6px;align-items:center;
    padding:18px 16px 18px 18px;border-radius:var(--radius-lg)}
  .kids-copy{display:contents}
  .kids-copy > *{position:relative;z-index:2;grid-column:1}
  .kids-tag{justify-self:start;margin-bottom:10px;font-size:10px;padding:4px 11px 4px 8px}
  .kids-h2{font-size:clamp(20px,5.4vw,30px);margin-bottom:12px}
  .kids-copy > .btn{justify-self:start}
  .kids-world{order:0;grid-column:2;grid-row:1 / span 3;min-height:0;aspect-ratio:1/1.05;align-self:center}
  .kw-mascot{width:118%;bottom:0}
  .kids-copy > .kids-features{grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;
    gap:8px;margin-top:16px}
  .kids-feature{flex-direction:row;align-items:center;gap:7px;min-width:0}
  .kids-feature .icon-badge,.kids-feature > :first-child{width:32px;height:32px;flex:none}
  .kids-feature span:last-child{font-size:11px;white-space:normal;max-width:none;line-height:1.2}
  .kids-hand{display:none}

  /* -- 19.5 why: three compact rows instead of three tall cards ------------ */
  .why-grid{grid-template-columns:1fr;gap:8px}
  .why-card{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .glass-obj{width:58px;height:58px}
  .why-card h3{font-size:15px;margin-bottom:3px}
  .why-card p{font-size:13px;line-height:1.5}

  /* -- 19.6 dentist: portrait beside the name, bio behind "Read more" ------ */
  .doc-grid{grid-template-columns:104px minmax(0,1fr);gap:0 16px;align-items:center}
  .doc-grid > div:first-child{display:contents}
  .doc-grid > div:first-child > *{grid-column:1 / -1}
  .doc-grid > div:first-child > .eyebrow{grid-column:2;grid-row:1;align-self:end;margin-bottom:4px}
  .doc-grid > div:first-child > h2{grid-column:2;grid-row:2;align-self:start;margin-bottom:0 !important}
  .doc-art{order:0;grid-column:1;grid-row:1 / span 2;max-width:none;margin:0}
  .doc-art::after,.doc-art .doc-veil,.doc-art .gtooth-float{display:none}
  .doc-art::before{width:130%}
  .doc-art img{aspect-ratio:1;border-radius:50%;object-position:50% 14%;
    -webkit-mask-image:none;mask-image:none;border:3px solid rgba(255,255,255,.9);
    box-shadow:0 10px 26px rgba(46,58,110,.16)}
  .doc-grid > div:first-child > .lede{margin:14px 0 8px !important}
  .doc-body{font-size:14px;line-height:1.6;margin-bottom:12px;max-width:none}
  .doc-grid > div:first-child > .btn{justify-self:start}
  .doc-grid .creds{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:18px !important}
  .cred{font-size:12px;line-height:1.4;gap:9px}
  .cred .icon-tint{width:30px;height:30px}

  /* -- 19.7 team rail ------------------------------------------------------ */
  .rail{gap:10px;padding-block:4px 8px}
  .member{width:124px}
  .member-photo{width:104px;height:104px;margin-bottom:10px}
  .member h3{font-size:13px;margin-bottom:3px}
  .member p{font-size:11.5px}

  /* -- 19.8 before/after: a swipe row. On touch the photo itself scrolls the
     row, and only the round grip drags the comparison — otherwise the two
     horizontal gestures would fight each other. */
  .ba-grid{display:flex;grid-template-columns:none;gap:12px;padding-block:14px 10px}
  .ba-card{flex:0 0 76%;max-width:340px;scroll-snap-align:start;padding:10px 10px 10px}
  .ba-compare{aspect-ratio:5/4;touch-action:auto;cursor:default}
  .ba-range{pointer-events:none}
  .ba-grip{pointer-events:auto;touch-action:none;width:44px;height:44px;cursor:ew-resize}
  .ba-num{top:-8px;left:-6px;width:28px;height:28px;font-size:12.5px}
  .ba-meta{padding:10px 4px 0}
  .ba-meta h3{font-size:13.5px}
  .ba-meta p{font-size:12px}

  /* -- 19.9 clinic + reviews rails ----------------------------------------- */
  .clinic-rail,.review-rail{gap:12px;padding-block:2px 8px}
  .clinic-shot{border-radius:var(--radius-lg)}
  .clinic-shot.is-primary{width:80%;max-width:560px}
  .clinic-shot:not(.is-primary){width:62%;max-width:420px}
  .review{width:78%;max-width:340px;padding:20px 20px 18px;gap:14px}
  .review blockquote{font-size:14px;line-height:1.6}
  .review figcaption{padding-top:12px}
  .score-card{width:78%;max-width:320px;padding:20px;gap:16px}
  .rating-line{display:none} /* the score card in the row already says this */

  /* -- 19.10 find us ------------------------------------------------------- */
  .find{grid-template-columns:1fr;gap:14px}
  .find .h-sub{margin-bottom:10px !important}
  .addr{font-size:14px;line-height:1.6}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:18px 16px}
  .fact{gap:10px}
  .fact .icon-tint{width:30px;height:30px}
  .fact-k{font-size:10.5px;margin-bottom:1px}
  .fact-v{font-size:13px;line-height:1.4}
  .fact:nth-child(4){grid-column:1 / -1}
  .find .map{min-height:190px;border-radius:var(--radius-lg)}

  /* -- 19.11 book ---------------------------------------------------------- */
  .book{padding:clamp(44px,8vw,70px) 0 clamp(40px,7vw,60px)}
  .book .lede{margin-top:8px}
  .book-actions{gap:10px;margin-top:20px;max-width:440px;margin-inline:auto}
  .book-actions .btn{flex:1 1 100%;padding-inline:14px}
  .book-actions .btn-ghost{flex:1 1 calc(50% - 5px);min-width:0;font-size:14px}
  .book-sign{display:none}

  /* -- 19.12 footer: link groups in two columns ---------------------------- */
  .site-footer{padding:34px 0 22px}
  .foot-top{grid-template-columns:1fr 1fr;gap:24px 18px;padding-bottom:22px}
  .foot-brand,.foot-col:last-child{grid-column:1 / -1}
  .foot-blurb{margin-top:10px;max-width:none;font-size:13px;line-height:1.6}
  .foot-col h2{margin-bottom:10px}
  .foot-col ul{gap:2px}
  .foot-col a{display:block;padding:6px 0;font-size:13px}
  .foot-col:last-child ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
  .foot-bottom{padding-top:16px;gap:6px}

  /* -- 19.13 "Read more" clamp (toggled by site.js) ------------------------ */
  .is-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clamp,3);overflow:hidden}
  .clamp-more{display:inline-flex;align-items:center;min-height:36px;margin:-4px 0 8px;padding:0;
    background:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;
    font-weight:var(--fw-bold);color:var(--accent-active)}
}
@media (min-width:1101px){.clamp-more{display:none}}
@keyframes df-hero-tooth{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}

/* -- 19.14 tablet: what the extra width earns ------------------------------ */
@media (min-width:721px) and (max-width:1100px){
  :root{--hero-art-h:clamp(400px,46svh,580px);--gut:4vw}
  .hero{padding-bottom:36px}
  .hero-sub{font-size:17px;margin-bottom:22px}
  .trust{padding:9px 16px 9px 10px}
  .trust-name{font-size:13px}
  .trust-meta{font-size:11.5px}

  .treat-lead{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .treat-lead-body{padding:24px 0 24px 28px}
  .treat-lead h3{font-size:26px}
  .treat-lead .lede{font-size:15px}
  /* twelve tiles fit as a plain 4 x 3 grid here — no swiping needed */
  .treat-grid{width:auto;margin-left:0;padding-inline:0;overflow:visible;
    grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-columns:auto}
  .treat-card{min-height:112px}

  .kids-inner{grid-template-columns:minmax(0,1fr) 34%;padding:28px 28px 28px 32px}
  .kids-feature span:last-child{font-size:12.5px}

  .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .why-card{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}

  .doc-grid{grid-template-columns:150px minmax(0,1fr);gap:0 24px}
  .doc-grid .creds{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cred{flex-direction:column;gap:8px}

  .member{width:140px}
  .member-photo{width:120px;height:120px}
  .ba-card{flex-basis:40%}
  .review,.score-card{width:44%}
  .clinic-shot.is-primary{width:62%}
  .clinic-shot:not(.is-primary){width:44%}

  .find{grid-template-columns:1fr 1fr;gap:18px}
  .find > div:first-child{grid-column:1 / -1}
  .find .map{grid-column:auto;min-height:0}

  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-col:last-child{grid-column:auto}
  .foot-col:last-child ul{display:flex}
}

/* -- 19.15 inner pages, phone + tablet -------------------------------------- */
@media (max-width:1100px){
  .ed-hero{padding-top:18px;padding-bottom:8px}
  .section[style*="padding-top"]{padding-top:18px !important}
  .ed-hero-grid{grid-template-columns:1fr;gap:18px;text-align:left}
  .ed-hero-art{order:-1;max-width:none;margin:0;aspect-ratio:16/9;border-radius:var(--radius-lg)}
  .ed-hero-copy .eyebrow{margin-bottom:8px}
  .ed-hero h1{font-size:clamp(27px,7.4vw,42px);margin-bottom:10px}
  .ed-hero .lede{font-size:15px;margin-bottom:16px}
  .ed-hero-actions{gap:10px}
  .ed-hero-actions .btn{flex:1 1 0;min-width:0;padding-inline:12px;font-size:14px;height:48px}
  .ed-hero.is-compact{padding-bottom:4px}

  .profile-hero{grid-template-columns:1fr;gap:16px;max-width:none;text-align:center}
  .profile-hero-art{width:min(46%,210px);aspect-ratio:1;border-radius:50%;margin-inline:auto;
    border:3px solid rgba(255,255,255,.9)}
  .profile-hero-art img{object-position:50% 12%}
  .profile-hero h1{font-size:clamp(26px,7vw,38px)}
  .profile-role{margin-bottom:10px}
  .profile-hero .ed-hero-actions{margin-top:14px !important}

  .story,.story.is-reverse{grid-template-columns:1fr;gap:16px}
  .story-art{aspect-ratio:16/9;border-radius:var(--radius-lg)}
  .story-copy h2{margin-bottom:8px}
  .story-copy .feature-row{margin-top:10px !important}
  .feature-row-item{padding:12px 0;gap:12px}
  .feature-row-item h3{font-size:14.5px}
  .feature-row-item p{font-size:13px;line-height:1.5}
  .principle{padding:14px 0;gap:14px}
  .principle-n{font-size:30px}
  .principle h3{font-size:16.5px;margin-bottom:4px;max-width:none}
  .principle p{font-size:13.5px;line-height:1.55}

  /* treatment rows: a thumbnail beside the copy, not a full-width photo above it */
  .trow-list{gap:10px}
  .trow,.trow.is-reverse{grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;
    padding:10px;border-radius:var(--radius-lg);background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(46,58,110,.06)}
  .trow .trow-art,.trow.is-reverse .trow-art{order:0;aspect-ratio:1;border-radius:var(--radius-md);box-shadow:none}
  .trow .trow-body,.trow.is-reverse .trow-body{order:1}
  .trow-body h3{font-size:16px;margin-bottom:3px}
  .trow-body p{font-size:13px;line-height:1.45;margin-bottom:4px;max-width:none}
  .trow-body .link-cta{font-size:13px;min-height:0}
  .trow-body .treat-lead-tag{font-size:9.5px;padding:3px 9px;margin-bottom:6px}

  .tlist a{padding:12px 2px;gap:12px}
  .tlist .t-ic{width:26px;height:26px}
  .tlist .t-name{font-size:14.5px}
  .faq details{padding:14px 0}
  .faq summary{font-size:14.5px}
  .faq .faq-a{font-size:14px;line-height:1.6;margin-top:10px}
  .tl-step{gap:14px;padding-bottom:18px}
  .tl-step h3{font-size:15.5px;margin-bottom:3px}
  .tl-step p{font-size:13.5px;line-height:1.55}
  .keyfacts{grid-template-columns:1fr 1fr;gap:14px 12px;padding:18px 0}
  .stat-band{gap:18px 28px}
  .stat-n{font-size:34px}
  .testimonial-feature blockquote{font-size:18px;margin-bottom:14px}

  .team-stagger{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tmember.is-lg,.tmember.is-md,.tmember.is-sm{grid-column:auto;grid-row:auto}
  .tmember .tmember-photo,.tmember.is-lg .tmember-photo{aspect-ratio:1/1.02}
  .tmember-photo img{object-position:50% 18%}
  .tmember-body{padding:10px 12px 12px}
  .tmember-body h3{font-size:13.5px}
  .tmember-body p{font-size:11.5px}

  .contact-actions{grid-template-columns:1fr;gap:8px}
  .caction{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;padding:14px 16px}
  .caction .icon-tint{grid-row:1 / span 2;width:40px;height:40px}
  .caction h3{font-size:15px}
  .caction p{font-size:13px}
  .util-strip{gap:10px}
}
@media (max-width:720px){
  /* clinic photo wall becomes a swipe row with its captions always on */
  .egallery{display:flex;grid-template-columns:none;gap:10px;
    width:100vw;margin-left:calc(50% - 50vw);padding:2px var(--gut) 8px;
    scroll-padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .egallery::-webkit-scrollbar{display:none}
  .egallery figure{flex:0 0 74%;height:210px;scroll-snap-align:start}
  .egallery figcaption{opacity:1}
}
@media (min-width:721px) and (max-width:1100px){
  .ed-hero{padding-top:26px}
  .ed-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:28px;align-items:center}
  .ed-hero.is-compact .ed-hero-grid{grid-template-columns:1fr}
  .ed-hero-art{order:0;aspect-ratio:1/1}
  .ed-hero-actions .btn{flex:0 1 auto;padding-inline:20px}
  .ed-hero.is-compact .ed-hero-actions .btn,.profile-hero .ed-hero-actions .btn{flex:0 1 auto}
  .profile-hero .ed-hero-actions{justify-content:center}
  .story,.story.is-reverse{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:26px;align-items:center}
  .story-art{aspect-ratio:5/4}
  .story.is-reverse .story-art{order:-1}
  .trow-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .team-stagger{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contact-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .caction{display:flex}
  .keyfacts{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* -- 19.16 fixes found in the device pass ----------------------------------- */
@media (max-width:1100px){
  /* the full nav + phone number + button no longer fit the header pill here */
  .nav > li:not(.has-menu):not(.nav-keep){display:none}
  .header-phone .label{display:none}
  .clamp-more{display:flex;width:fit-content}
  /* wide crops of portrait photos: keep the face, lose the shoulders */
  .ed-hero-art img,.story-art img{object-position:50% 22%}
  /* browsers indent figure/blockquote 40px a side by default — too much on a phone */
  .testimonial-feature{margin-inline:0}
  .testimonial-feature blockquote{margin-inline:0}
}