/* ── Figtree, self-hosted variable font, one file for weights 300-700 ── */
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   KURPIS CENTER, Implant & Cosmetic Dentistry
   Light / teal system, matched to the supplied reference boards.
   ============================================================ */

:root{
  /* ground */
  --bg:        #F6F4F0;
  --bg-2:      #FFFFFF;
  --bg-3:      #EDE8DE;
  --card:      #FFFFFF;

  /* teal ramp  (swap these for a blue build) */
  --t-900:     #1C1410;
  --t-800:     #2B201A;
  --t-700:     #8E1F22;
  --t-500:     #B5292C;
  --t-400:     #B79848;
  --t-300:     #F4C053;
  --t-100:     #F1E3C4;
  --t-50:      #FCF6EA;

  /* soft card tints, taken from the boards */
  --tint-1:    #FBF3E4;
  --tint-2:    #F7F0E6;
  --tint-3:    #FAEEEC;
  --tint-4:    #F5F1E7;

  /* type */
  --ink:       #1A1410;
  --ink-mut:   #6B5D52;
  --ink-fai:   #9C8F82;
  --on-dark:   #F5EFE3;
  --on-dark-m: #BFAE93;
  --on-dark-f: #8E7F6B;

  --rule:      #E8DFD2;
  --rule-dark: rgba(245,239,227,.16);

  --r-sm: 16px;
  --r:    20px;
  --r-lg: 40px;
  --r-xl: 40px;

  --ff-d: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-s: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: clamp(18px, 2.2vw, 20px);
  --maxw: 1410px;

  --sh-sm: 0 2px 10px rgba(40,26,18,.06);
  --sh:    0 18px 44px -22px rgba(40,26,18,.24);
  --sh-lg: 0 40px 90px -40px rgba(40,26,18,.36);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-s);
  font-size:16px;
  line-height:1.45;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:2px solid var(--t-500); outline-offset:3px; border-radius:6px; }

/* ---------- type ---------- */
.display{
  font-family:var(--ff-d);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.026em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
.d-xl{ font-size:clamp(2.5rem, 7.6vw, 6.9rem); line-height:1.0; letter-spacing:-.03em; }
.d-lg{ font-size:clamp(2.1rem, 5.7vw, 5rem); line-height:1.06; letter-spacing:-.032em; }
.d-md{ font-size:clamp(1.4rem, 2.2vw, 1.85rem); line-height:1.16; letter-spacing:-.02em; }

.display em{ font-style:normal; font-weight:400; color:var(--t-500); }
.display .thin{ font-weight:300; color:var(--ink-mut); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-s);
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--t-700);
  background:var(--t-50);
  border:1px solid var(--t-100);
  padding:7px 15px;
  border-radius:100px;
  margin:0;
  width:fit-content;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--t-500); flex-shrink:0;
}
.eyebrow.inv{
  color:var(--t-300);
  background:rgba(234,246,245,.08);
  border-color:rgba(234,246,245,.18);
}

.lede{
  font-size:clamp(1rem, 1.25vw, 1.15rem);
  line-height:1.68;
  max-width:62ch;
  color:var(--ink-mut);
  margin:0;
}
.on-dark{ color:var(--on-dark); }
.on-dark .lede{ color:var(--on-dark-m); }
.on-dark .display{ color:var(--on-dark); }
.on-dark .display em{ color:var(--t-300); }

p{ margin:0; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- layout ---------- */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
section{ position:relative; }
.sec-pad{ padding-block:clamp(64px, 8.6vw, 120px); }

/* centred by default, exactly like every Glowdent section header */
.sec-head{
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:18px;
  margin-bottom:clamp(40px, 5vw, 72px);
}
.sec-head .display{ max-width:18ch; }
.sec-head .lede{ max-width:58ch; }
/* two-column sections keep their heading on the left */
.sec-head.left{ align-items:flex-start; text-align:left; }
.sec-head.left .display{ max-width:none; }

/* ---------- chrome ---------- */
.grain{ display:none; }
.progress{
  position:fixed; top:0; left:0; z-index:8000;
  height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--t-700), var(--t-400), var(--t-300));
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:15px; left:50%;
  transform:translateX(-50%);
  z-index:7000;
  width:calc(100% - 28px);
  max-width:1360px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:8px 8px 8px 18px;
  border-radius:100px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--rule);
  box-shadow:var(--sh-sm);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 34px -16px rgba(40,26,18,.2);
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo{
  display:block; flex-shrink:0;
  height:38px; width:auto;
  border-radius:5px;
  box-shadow:0 2px 8px -2px rgba(40,26,18,.35);
}
.brand-logo img{ height:38px; width:auto; display:block; border-radius:5px; }
@media (max-width:640px){
  .brand-logo, .brand-logo img{ height:32px; }
}
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-mark{
  font-family:var(--ff-d);
  font-size:1.16rem; font-weight:600;
  letter-spacing:-.02em; color:var(--ink);
}
.brand-sub{
  font-size:.53rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--t-700); margin-top:3px;
}
.nav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:block; padding:9px 14px;
  font-size:.82rem; font-weight:500;
  color:var(--ink-mut);
  border-radius:100px;
  transition:color .28s var(--ease), background-color .28s var(--ease);
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--t-700); background:var(--t-50); }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:100px;
  background:var(--t-500); color:#fff;
  font-size:.82rem; font-weight:600;
  white-space:nowrap; flex-shrink:0;
  box-shadow:0 8px 20px -8px rgba(181,41,44,.62);
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.nav-cta:hover{ background:var(--t-700); transform:translateY(-1px); }

.nav-burger{ display:none; }

@media (max-width:1200px){
  .nav-links{ display:none; }
  .nav-burger{
    display:flex; align-items:center; gap:9px;
    padding:11px 18px; border-radius:100px;
    border:1px solid var(--rule);
    font-size:.8rem; font-weight:500; color:var(--ink-mut);
  }
  .nav-burger:hover{ color:var(--t-700); border-color:var(--t-300); }
}
@media (max-width:640px){
  .nav{ padding:7px 7px 7px 12px; top:9px; }
  .nav-tel.brand-sub{ display:none; }
  .nav-cta{ padding:11px 16px; font-size:.76rem; }
}

.drawer{
  position:fixed; inset:0; z-index:7500;
  background:var(--bg);
  padding:92px var(--pad) 40px;
  overflow-y:auto;
  transform:translateY(-100%);
  transition:transform .6s var(--ease-io);
}
.drawer.open{ transform:translateY(0); }
.drawer ul{ list-style:none; margin:0; padding:0; }
.drawer li{ border-top:1px solid var(--rule); }
.drawer a{
  display:block; padding:16px 0;
  font-family:var(--ff-d); font-size:1.6rem; font-weight:500;
  letter-spacing:-.025em; color:var(--ink);
}
.drawer a:hover{ color:var(--t-500); }
.drawer-close{
  position:absolute; top:24px; right:var(--pad);
  font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-700);
}

/* ============================================================
   HERO
   ============================================================ */

/* the hero line mask lived here; its @keyframes wrapper was lost to the
   old dash regex, leaving orphaned declarations. Rebuilt in the motion
   hierarchy at the end of this file. */

/* buttons */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px;
  border-radius:100px;
  font-size:.88rem; font-weight:600;
  transition:transform .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease);
  will-change:transform;
}
.btn-teal{
  background:var(--t-500); color:#fff;
  box-shadow:0 14px 32px -14px rgba(181,41,44,.7);
}
.btn-teal:hover{ background:var(--t-700); transform:translateY(-2px); }
.btn-ghost{
  border:1px solid var(--rule); color:var(--ink);
  background:rgba(255,255,255,.7);
}
.btn-ghost:hover{ border-color:var(--t-300); color:var(--t-700); }
.btn-light{ background:#fff; color:var(--t-800); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

/* ---------- generated 3D implant render ---------- */
.render{
  position:relative;
  display:grid; place-items:center;
  min-height:clamp(330px, 42vw, 540px);
}
0%,100%{ transform:translateY(-10px) rotate(-1.2deg); }
  50%    { transform:translateY(10px)  rotate(1.2deg); }

0%,100%{ opacity:.55; }
  50%    { opacity:.95; }
@media (prefers-reduced-motion:reduce){
  .render .float, .render .shine{ animation:none; }
}

0%,100%{ transform:translateY(-7px); }
  50%    { transform:translateY(7px); }
@media (prefers-reduced-motion:reduce){ .chip{ animation:none; } }
@media (max-width:1000px){
  .chip.c1{ left:0; } .chip.c2{ right:0; } .chip.c3{ left:4%; }
}
@media (max-width:560px){
  .chip{ font-size:.71rem; padding:9px 13px; }
  .chip.c2{ display:none; }
}

/* stats */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(40px,5vw,72px);
}
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .render{ order:-1; min-height:300px; }
}
@media (max-width:620px){ .stats{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ overflow:hidden; display:flex; background:var(--t-900); padding-block:18px; }
.marquee-track{ display:flex; flex-shrink:0; will-change:transform; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:30px;
  padding-right:30px; white-space:nowrap;
  font-size:.76rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-m);
}
.marquee-track span::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--t-400); flex-shrink:0;
}

/* ============================================================
   PREMISE
   ============================================================ */
.premise{ background:var(--bg); }
.premise-copy{
  font-family:var(--ff-d);
  font-size:clamp(1.6rem, 3.5vw, 3rem);
  font-weight:400;
  line-height:1.24;
  letter-spacing:-.03em;
  max-width:21ch;
  margin:0;
}
.premise-copy .w{ color:#9C907F; transition:color .32s var(--ease); }
.premise-copy .w.lit{ color:var(--ink); }
.premise-copy .w.key.lit{ color:var(--t-500); font-weight:500; }
@media (max-width:900px){
  .premise-grid{ grid-template-columns:1fr; align-items:start; }
  .premise-copy.premise-side{ max-width:none; }
}

/* ============================================================
   EVIDENCE
   ============================================================ */
.evidence{ background:var(--bg-2); }
.ev-top{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-end; gap:24px;
  margin-bottom:clamp(28px,3.6vw,46px);
}
.ba{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--bg-3);
  aspect-ratio:1000/460;
  cursor:ew-resize; user-select:none; touch-action:pan-y;
  box-shadow:var(--sh-lg);
  border:1px solid var(--rule);
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-after{ clip-path:inset(0 0 0 50%); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:3px; background:#fff;
  transform:translateX(-1.5px);
  pointer-events:none;
  box-shadow:0 0 20px rgba(0,0,0,.35);
}
.ba-knob{
  position:absolute; top:50%; left:50%;
  width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%;
  background:#fff; color:var(--t-700);
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  pointer-events:none;
}
.ba-tag{
  position:absolute; top:16px;
  padding:8px 16px; border-radius:100px;
  font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(9px); pointer-events:none;
}
.ba-tag.b{ left:16px; background:rgba(28,20,16,.78); color:#fff; }
.ba-tag.a{ right:16px; background:var(--t-500); color:#fff; }

.ba-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:24px; }
.ba-dot{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--rule); background:#fff;
  font-size:.76rem; font-weight:600; color:var(--ink-mut);
  display:grid; place-items:center;
  transition:all .3s var(--ease);
  font-variant-numeric:tabular-nums;
}
.ba-dot:hover{ border-color:var(--t-300); color:var(--t-700); }
.ba-dot.on{ background:var(--t-500); border-color:var(--t-500); color:#fff; }
.ba-note{ margin-left:auto; font-size:.76rem; color:var(--ink-fai); max-width:38ch; line-height:1.5; }

/* ============================================================
   SYSTEMS
   ============================================================ */
.systems{
  background:
    radial-gradient(65% 90% at 88% 8%, rgba(244,192,83,.22), transparent 60%),
    var(--t-900);
}
.sys.open .sys-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.sys-tags li{
  list-style:none; padding:8px 15px;
  border:1px solid var(--rule-dark);
  background:rgba(234,246,245,.05);
  border-radius:100px;
  font-size:.76rem; color:var(--t-300);
}
.sys-dis{
  margin-top:clamp(28px,3.6vw,42px);
  padding-top:22px;
  border-top:1px solid var(--rule-dark);
  font-size:.8rem; line-height:1.62;
  color:var(--on-dark-f); max-width:70ch;
}
@media (max-width:700px){
        }

/* ============================================================
   DENTIST
   ============================================================ */
.doctor{ background:var(--bg); overflow:hidden; }
.dent-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(30px,4.6vw,72px);
  align-items:center;
}
.dent-media{ position:relative; }
.dent-fig{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:1100/1400;
  max-height:74vh;
  background:var(--bg-3);
  box-shadow:var(--sh-lg);
}
.dent-fig img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.dent-badge{
  position:absolute; right:-14px; bottom:26px; z-index:3;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:18px 22px;
  box-shadow:var(--sh-lg);
  max-width:230px;
}
.dent-badge .bn{
  font-family:var(--ff-d); font-size:1.7rem; font-weight:600;
  line-height:1; letter-spacing:-.03em; color:var(--t-500);
}
.dent-badge .bl{ font-size:.76rem; color:var(--ink-fai); margin-top:6px; line-height:1.4; }
.dent-cap{ margin-top:16px; font-size:.76rem; line-height:1.55; color:var(--ink-fai); max-width:44ch; }
.creds{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:10px; }
.creds li{
  font-size:.88rem; color:var(--ink-mut);
  background:var(--bg-2);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:13px 16px;
}

.creds li b{ color:var(--ink); font-weight:600; }
@media (max-width:940px){
  .dent-grid{ grid-template-columns:1fr; }
  .dent-fig{ aspect-ratio:4/3.2; max-height:none; }
  .dent-fig img{ object-position:50% 26%; }
  .dent-badge{ right:14px; bottom:14px; }
}

/* ============================================================
   BENCH
   ============================================================ */
.bench{ background:var(--bg-2); }
.doc{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:14px 14px 24px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.doc:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.doc-fig{
  position:relative;
  border-radius:var(--r); overflow:hidden;
  aspect-ratio:1/1.1;
  background:var(--bg-3);
  margin-bottom:18px;
}
.doc-fig img{
  width:100%; height:100%; object-fit:cover; object-position:50% 16%;
  transition:transform .8s var(--ease);
}
.doc:hover .doc-fig img{ transform:scale(1.045); }
.doc-body{ padding-inline:8px; }
.doc-spec{
  display:inline-block;
  font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-700); background:var(--t-50);
  padding:5px 11px; border-radius:100px;
  margin-bottom:11px;
}
.doc-nm{
  font-family:var(--ff-d);
  font-size:1.16rem; font-weight:600; line-height:1.18;
  letter-spacing:-.025em; color:var(--ink); margin:0;
}
.doc-bio{ margin-top:9px; font-size:.81rem; line-height:1.58; color:var(--ink-fai); }
@media (max-width:1020px){ .bench-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bench-grid{ grid-template-columns:1fr; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.longev{ background:var(--bg); }
@media (max-width:900px){
  .rev-grid{ grid-template-columns:1fr 1fr; }
  .rev.feature{ grid-column:span 2; }
}
@media (max-width:600px){
  .rev-grid{ grid-template-columns:1fr; }
  .rev.feature{ grid-column:span 1; }
}

/* ============================================================
   SECOND OPINION
   ============================================================ */
.second{ background:var(--bg-2); }
.sec-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
  background:linear-gradient(140deg, var(--t-700) 0%, var(--t-900) 100%);
  border-radius:var(--r-xl);
  padding:clamp(30px,4.4vw,72px);
  color:var(--on-dark);
  position:relative; overflow:hidden;
}

.sec-grid > *{ position:relative; z-index:2; }
.sec-grid .display{ color:#fff; }
.sec-grid .lede{ color:var(--on-dark-m); }
@media (max-width:900px){ .sec-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--bg); }


.svc:nth-child(4n+1){ background:var(--tint-1); }
.svc:nth-child(4n+2){ background:var(--tint-2); }
.svc:nth-child(4n+3){ background:var(--tint-3); }
.svc:nth-child(4n+4){ background:var(--tint-4); }

.svc .ico{
  width:44px; height:44px; border-radius:13px;
  background:rgba(255,255,255,.85);
  display:grid; place-items:center;
  color:var(--t-700); margin-bottom:6px;
}




@media (max-width:1020px){  }
@media (max-width:520px){  }

/* ============================================================
   VISIT + FORM
   ============================================================ */
.visit{ background:var(--bg-2); }

.info-row{
  display:grid; grid-template-columns:100px 1fr;
  gap:18px; padding:16px 0;
  border-top:1px solid var(--rule);
  align-items:baseline;
}
.info-row:last-child{ border-bottom:1px solid var(--rule); }
.info-row dt{
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-fai);
}
.info-row dd{ margin:0; font-size:.94rem; line-height:1.6; color:var(--ink); }
.info-row dd a{ color:var(--t-700); font-weight:600; }
.info-row dd a:hover{ text-decoration:underline; }

.form-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  padding:clamp(26px,3.2vw,46px);
  box-shadow:var(--sh-lg);
}
.form-card h3{
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.05rem);
  line-height:1.12; letter-spacing:-.03em;
  margin:0 0 10px; color:var(--ink);
}
.form-card > p{ font-size:.88rem; color:var(--ink-mut); margin-bottom:26px; }
.fields{ display:grid; gap:14px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label{
  display:block; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-fai); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px;
  border-radius:var(--r-sm);
  background:var(--bg-2);
  border:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--ff-s); font-size:.92rem;
  transition:border-color .3s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:92px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--t-400); background:#fff;
  box-shadow:0 0 0 4px rgba(181,41,44,.12);
}
.field input::placeholder, .field textarea::placeholder{ color:#BBAC9C; }
.form-card button[type=submit]{ width:100%; justify-content:center; margin-top:6px; }
.form-foot{
  margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 18px;
  font-size:.74rem; color:var(--ink-fai);
}
.form-foot span{ display:inline-flex; align-items:center; gap:7px; }
.form-foot i{ color:var(--t-500); font-style:normal; font-weight:700; }
.form-msg{ margin-top:14px; font-size:.85rem; color:var(--t-700); min-height:1.2em; }
@media (max-width:940px){  }
@media (max-width:520px){ .f2{ grid-template-columns:1fr; } }

/* ============================================================
   CLOSER + FOOTER
   ============================================================ */
.closer{
  background:linear-gradient(180deg, var(--bg-2) 0%, var(--t-100) 100%);
  padding-block:clamp(60px,8vw,120px);
  text-align:center; overflow:hidden;
}
.closer .wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.closer .lede{ text-align:center; }

.foot{ background:var(--t-900); color:var(--on-dark); padding-block:clamp(46px,5.6vw,76px) 28px; }
.foot-grid{
  display:grid; grid-template-columns:1.5fr repeat(3,1fr);
  gap:clamp(24px,3vw,46px);
  padding-bottom:42px;
}
.foot-brand .brand-mark{ font-size:1.6rem; color:#fff; }


.foot h4{
  font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--t-400); margin:0 0 15px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot ul a{ font-size:.855rem; color:var(--on-dark-m); transition:color .28s var(--ease); }
.foot ul a:hover{ color:#fff; }


.socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule-dark);
  display:grid; place-items:center;
  color:var(--on-dark-m);
  transition:all .3s var(--ease);
}
.socials a:hover{ border-color:var(--t-400); color:#fff; background:rgba(244,192,83,.16); }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------- reveals ---------- */
.js-on [data-rv]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1);
}
.js-on [data-rv].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js-on [data-rv].js-on [data-rv].in{ opacity:1 !important; transform:none !important; }
  }

/* ============================================================
   ADDED SECTIONS
   ============================================================ */

.wipe{ margin:0; overflow:hidden; border-radius:var(--r-lg); }
.wipe img{ width:100%; height:100%; object-fit:cover; }
/* The images used to open downward behind a clip-path, a curtain
   pulling back. Removed: the figure already fades and rises with the
   rest of its section, and the photograph should simply be there. */
@media (prefers-reduced-motion:reduce){
  .js-on .wipe > img{ clip-path:none !important; transform:none !important; }
}








@media (max-width:760px){
  
  
}

.premise-copy{ font-weight:400; }

.lnk{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px;
  font-size:.88rem; font-weight:600; color:var(--t-700);
  border-bottom:1px solid var(--t-300);
  padding-bottom:3px;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.lnk:hover{ gap:14px; color:var(--t-500); }
@media (max-width:860px){ .ev-split{ grid-template-columns:1fr; } }


@media (max-width:900px){ .diag-grid{ grid-template-columns:1fr; } }

@media (max-width:860px){
  .office-grid{ grid-template-columns:1fr; }
  .og-a{ grid-row:auto; aspect-ratio:4/3; }
  .og-b{ aspect-ratio:16/9; }
}

@media (max-width:860px){ .flyin-grid{ grid-template-columns:1fr; } }

@media (max-width:820px){
  .fin-inner{ grid-template-columns:1fr; }
  .fin-nums{ grid-template-columns:1fr; gap:18px; }
}

.faq{ background:var(--bg); }
.faq-list{ border-top:1px solid var(--rule); max-width:960px; }
.fq{ border-bottom:1px solid var(--rule); }
.fq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--ff-d);
  font-size:clamp(1.05rem,1.65vw,1.3rem);
  font-weight:500; letter-spacing:-.02em; color:var(--ink);
}
.fq summary::-webkit-details-marker{ display:none; }
.fq summary i{
  position:relative; width:34px; height:34px; flex-shrink:0;
  border:1px solid var(--rule); border-radius:50%;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             transform .4s var(--ease);
}
.fq summary i::before, .fq summary i::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--t-700); transform:translate(-50%,-50%);
}
.fq summary i::before{ width:12px; height:1.6px; }
.fq summary i::after{ width:1.6px; height:12px; transition:opacity .3s var(--ease); }
.fq[open] summary i{ background:var(--t-500); border-color:var(--t-500); transform:rotate(90deg); }
.fq[open] summary i::before, .fq[open] summary i::after{ background:#fff; }
.fq[open] summary i::after{ opacity:0; }
.fq summary:hover i{ border-color:var(--t-300); }
.fq-a{ padding:0 0 24px; max-width:74ch; }
.fq-a p{ font-size:.95rem; line-height:1.7; color:var(--ink-mut); }

.bookref{ font-style:italic; color:var(--t-700); }


.foot-brand a, .foot-bot a{ color:var(--on-dark-m); }
.foot-brand a:hover, .foot-bot a:hover{ color:#fff; }

/* ============================================================
   PHOTO BANDS, X-RAY PLATE, WORDMARK
   ============================================================ */

/* ---- full-bleed 4-across photo mosaic ---- */
.mosaic{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; background:var(--rule);
}
@media (max-width:820px){
  .mosaic{ grid-template-columns:1fr 1fr; }
  .mosaic figure{ aspect-ratio:1/1; }
}

/* ---- dark X-ray plate ---- */
.xband{
  position:relative; overflow:hidden;
  background:var(--t-900);
  padding-block:clamp(60px,8vw,120px);
  color:var(--on-dark);
}
@media (max-width:700px){ .xband-stats{ grid-template-columns:1fr; gap:20px; } }

/* ---- before/after pair inside an accordion panel ---- */

/* ---- wide team photograph ---- */
.team-wide{
  margin:0 0 clamp(16px,2vw,26px);
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:16/6.4; box-shadow:var(--sh);
}
@media (max-width:700px){ .team-wide{ aspect-ratio:16/9; } }

/* ---- wordmark plate ---- */
.wordmark{
  background:var(--bg-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(56px,7vw,110px);
  text-align:center;
}
@media (max-width:700px){
  .wm-imgs{ grid-template-columns:1fr; }
  .wm-imgs figure{ aspect-ratio:16/10; }
}

/* ---- footer plate ---- */
.foot-logo{
  width:190px; height:auto; border-radius:6px;
  box-shadow:0 4px 16px -6px rgba(0,0,0,.6);
}


/* ---- brand plate in nav needs no text beside it ---- */
.brand{ gap:0; }


/* ============================================================
   MEASURE SCALE, three deliberate line lengths, not eight
   ============================================================ */
.m-tight{ max-width:16ch; }
.m-mid{ max-width:24ch; }
.m-wide{ max-width:34ch; }
@media (max-width:700px){
  .m-tight.m-mid.m-wide{ max-width:none; }
}

/* ============================================================
   THE THREE SYSTEMS, always open, one alignment axis.
   Column 2 sets the axis: title, lead, body and tags all begin
   on the same x. Nothing hides behind a click.
   ============================================================ */
.sys-stack{ border-top:1px solid var(--rule-dark); }

@media (max-width:1000px){
  .sysblock{ grid-template-columns:56px minmax(0,1fr); }
  .sysblock-fig{ grid-column:2; aspect-ratio:16/9; }
  .sysblock-pair{ aspect-ratio:auto; }
}
@media (max-width:600px){
  .sysblock{ grid-template-columns:1fr; gap:18px; }
  .sysblock-num{ padding-top:0; }
  .sysblock-fig{ grid-column:1; }
}

/* ============================================================
   THE JOURNEY, four numbered steps, image-led
   ============================================================ */
.journey{ background:var(--bg); }
@media (max-width:940px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   PREMISE, centred scroll reveal, photographs floating beside
   ============================================================ */
.premise{ background:var(--bg); padding-block:clamp(80px,11vw,170px); overflow:hidden; }
.premise .wrap{ position:relative; }
.premise-copy{
  position:relative; z-index:2;
  font-family:var(--ff-d);
  font-size:clamp(1.5rem,3.1vw,2.6rem);
  font-weight:400; line-height:1.26;
  letter-spacing:-.026em;
  max-width:23ch; margin:0 auto; text-align:center;
}
.premise-copy .w{ color:#9C907F; transition:color .32s var(--ease); }
.premise-copy .w.lit{ color:var(--ink); }
.premise-copy .w.key.lit{ color:var(--t-500); }
.pf{
  position:absolute; z-index:1; margin:0;
  width:clamp(150px,17vw,240px);
  aspect-ratio:4/3;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh);
}
.pf img{ width:100%; height:100%; object-fit:cover; }
.pf-l{ left:0; top:2%; }
.pf-r{ right:0; bottom:0; }
@media (max-width:980px){
  .pf{ position:relative; width:100%; max-width:330px; margin:0 auto 26px; }
  .pf-r{ margin:26px auto 0; }
  .premise-copy{ max-width:none; }
}

/* ============================================================
   THREE SYSTEMS, light cards
   ============================================================ */
.systems{ background:var(--bg-2); }
.syscards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); }
.syscard{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:14px 14px 26px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.syscard:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.syscard > figure{
  margin:0 0 20px; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/2.8; background:var(--bg-3);
}
.syscard > figure img{ width:100%; height:100%; object-fit:cover; }
.syscard-pair{ display:grid; grid-template-columns:1fr 1fr; gap:6px; aspect-ratio:4/2.8; }
.syscard-pair > span{ position:relative; display:block; overflow:hidden; border-radius:12px; }
.syscard-pair img{ width:100%; height:100%; object-fit:cover; }
.syscard-pair em{
  position:absolute; left:7px; bottom:6px;
  padding:3px 9px; border-radius:100px;
  background:rgba(26,20,16,.82);
  font-style:normal; font-size:.56rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.syscard-n{
  display:block; padding:0 8px;
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
  color:var(--t-500); font-variant-numeric:tabular-nums;
}
.syscard h3{
  margin:9px 0 0; padding:0 8px;
  font-family:var(--ff-d); font-size:1.2rem; font-weight:500;
  line-height:1.18; letter-spacing:-.024em; color:var(--ink);
}
.syscard h3 sup{ font-size:.45em; vertical-align:super; color:var(--t-400); }
.syscard p{ margin:11px 0 0; padding:0 8px; font-size:.86rem; line-height:1.6; color:var(--ink-mut); }
.sys-dis{
  margin-top:clamp(24px,3vw,38px);
  font-size:.78rem; line-height:1.6; color:var(--ink-fai); max-width:76ch;
}
@media (max-width:900px){ .syscards{ grid-template-columns:1fr; } }

/* ============================================================
   EVIDENCE
   ============================================================ */
.evidence{ background:var(--bg); }
.ev-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.3vw,18px);
  margin-top:clamp(28px,3.4vw,46px);
}
.ev-strip figure{
  margin:0; aspect-ratio:1/1.16;
  border-radius:var(--r); overflow:hidden; background:var(--bg-3);
}
.ev-strip img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .ev-strip{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   DOCTOR + BENCH
   ============================================================ */
.doctor{ background:var(--bg-2); }
.dent-grid{
  display:grid; grid-template-columns:.86fr 1.14fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}
.dent-media{ position:relative; }
.dent-fig{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1100/1260; max-height:62vh;
  background:var(--bg-3); box-shadow:var(--sh);
}
.dent-fig img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.dent-badge{
  position:absolute; right:-12px; bottom:22px; z-index:3;
  background:#fff; border:1px solid var(--rule);
  border-radius:var(--r); padding:16px 20px;
  box-shadow:var(--sh); max-width:214px;
}
.dent-badge .bn{
  font-family:var(--ff-d); font-size:1.5rem; font-weight:500;
  line-height:1; letter-spacing:-.03em; color:var(--t-500);
}
.dent-badge .bl{ font-size:.74rem; color:var(--ink-fai); margin-top:6px; line-height:1.4; }
.creds{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:8px; }
.creds li{
  font-size:.86rem; color:var(--ink-mut);
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:12px 16px;
}
.creds li b{ color:var(--ink); font-weight:600; }
.bench-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(13px,1.5vw,20px); }
.doc{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:13px 13px 22px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.doc:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.doc-fig{
  border-radius:var(--r); overflow:hidden;
  aspect-ratio:1/1.08; background:var(--bg-3); margin-bottom:16px;
}
.doc-fig img{
  width:100%; height:100%; object-fit:cover; object-position:50% 16%;
  transition:transform .8s var(--ease);
}
.doc:hover .doc-fig img{ transform:scale(1.04); }
.doc-body{ padding-inline:7px; }
.doc-spec{
  display:inline-block; font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-500); background:var(--t-50);
  padding:4px 10px; border-radius:100px; margin-bottom:10px;
}
.doc-nm{
  font-family:var(--ff-d); font-size:1.02rem; font-weight:500;
  line-height:1.2; letter-spacing:-.022em; color:var(--ink); margin:0;
}
.doc-bio{ margin-top:8px; font-size:.79rem; line-height:1.55; color:var(--ink-fai); }
@media (max-width:1020px){ .bench-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bench-grid{ grid-template-columns:1fr; } }
@media (max-width:940px){
  .dent-grid{ grid-template-columns:1fr; }
  .dent-fig{ aspect-ratio:4/3.1; max-height:none; }
  .dent-fig img{ object-position:50% 26%; }
  .dent-badge{ right:14px; bottom:14px; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--bg); }











@media (max-width:1020px){  }
@media (max-width:520px){  }

/* ============================================================
   SECOND OPINION, light
   ============================================================ */
.second{ background:var(--bg-2); }
.sec-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,60px); align-items:center;
}
.so-list{ list-style:none; counter-reset:s; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.so-list li{
  counter-increment:s;
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  font-size:.88rem; color:var(--ink-mut);
}
.so-list li::before{
  content:counter(s,decimal-leading-zero);
  font-size:.68rem; font-weight:700; color:var(--t-500);
  font-variant-numeric:tabular-nums;
}


.so-fig figcaption{
  padding:12px 18px; font-size:.76rem; color:var(--ink-fai);
  border-top:1px solid var(--rule);
}
@media (max-width:900px){ .sec-grid{ grid-template-columns:1fr; } }

/* ============================================================
   REVIEWS / FAQ / VISIT
   ============================================================ */
.longev{ background:var(--bg); }
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.5vw,20px); }
.rev{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rev:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.rev.feature{
  grid-column:span 2;
  background:linear-gradient(140deg, var(--t-700), var(--t-900));
  border-color:transparent; color:var(--on-dark);
}
.rev q{
  font-family:var(--ff-d); font-size:clamp(1rem,1.4vw,1.2rem);
  font-weight:400; line-height:1.42; letter-spacing:-.018em;
  quotes:none; display:block; color:var(--ink);
}
.rev.feature q{ font-size:clamp(1.2rem,2vw,1.6rem); color:#fff; }
@media (max-width:900px){ .rev-grid{ grid-template-columns:1fr 1fr; } .rev.feature{ grid-column:span 2; } }
@media (max-width:600px){ .rev-grid{ grid-template-columns:1fr; } .rev.feature{ grid-column:span 1; } }

.faq{ background:var(--bg-2); }
.faq-grid{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px,4vw,64px); align-items:start;
}
.faq-grid .sec-head{ margin-bottom:0; }
@media (max-width:860px){ .faq-grid{ grid-template-columns:1fr; } }

.visit{ background:var(--bg); }
.info-rows{ margin-top:28px; }

.visit-fig img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   HERO, Glowdent pattern: full-bleed photograph, light type,
   two staggered cards
   ============================================================ */

.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  transform:scale(1.08);
  will-change:transform;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,14,10,.92) 4%, rgba(20,14,10,.55) 42%, rgba(20,14,10,.3) 78%),
    linear-gradient(to right, rgba(20,14,10,.72), rgba(20,14,10,.12) 62%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }

.hero-trustline{
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:clamp(22px,3vw,40px);
  font-size:.83rem; color:rgba(246,244,240,.88);
}
.hero-trustline .stars{ color:var(--t-300); letter-spacing:.08em; }
.hero-trustline b{ color:#fff; font-weight:600; }

.hero-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.hero-left{ min-width:0; }
.hero h1{ color:#F6F4F0; margin:0; }
.hero h1 em{ color:var(--t-300); font-style:normal; font-weight:400; }
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.08em; }
.hero h1 .ln > span{
  display:block;
  animation:lnUp 1.05s cubic-bezier(.16,1,.3,1) forwards;
}
.hero h1 .ln:nth-of-type(1) > span{ animation-delay:.08s; }
.hero h1 .ln:nth-of-type(2) > span{ animation-delay:.19s; }
.hero h1 .ln:nth-of-type(3) > span{ animation-delay:.30s; }
@keyframes lnUp{ from{ transform:translateY(106%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .hero h1 .ln > span{ animation:none; } }

.hero-desc{
  margin-top:clamp(18px,2.4vw,28px);
  max-width:48ch;
  font-size:clamp(.98rem,1.18vw,1.1rem);
  line-height:1.6;
  color:rgba(246,244,240,.78);
}
.hero .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,34px); }

.btn-white{
  background:#fff; color:var(--ink);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.55);
}
.btn-white:hover{ transform:translateY(-2px); background:var(--t-300); }
.btn-outline{
  border:1px solid rgba(246,244,240,.4);
  color:#F6F4F0;
}
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* two staggered cards, Glowdent's 24px radius */





}
@media (prefers-reduced-motion:reduce){  }
.hcard-label{
  display:block;
  font-size:.64rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--t-500);
}
.hcard-n{
  display:block; margin-top:10px;
  font-family:var(--ff-d);
  font-size:2.1rem; font-weight:500; line-height:1;
  letter-spacing:-.04em; color:var(--ink);
}
.hcard-n i{ font-style:normal; color:var(--t-500); }
.hcard p{
  margin-top:12px;
  font-size:.77rem; line-height:1.52; color:var(--ink-mut);
}
.hcard-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.hcard-list li{
  font-size:.79rem; color:var(--ink-mut);
  display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:center;
}
.hcard-list li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--t-400);
}

@media (max-width:1080px){
  .hero-body{ grid-template-columns:1fr; }
  
  
}
@media (max-width:560px){
  
  
  .hcard-tall, 
}

/* ---- stat bar sitting under the hero ---- */

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
  margin:0;
}
.stat{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:22px 22px 20px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stat:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.stat .n{
  font-family:var(--ff-d);
  font-size:clamp(1.8rem,2.8vw,2.5rem);
  font-weight:500; line-height:1;
  letter-spacing:-.04em; color:var(--ink);
}
.stat .n i{ font-style:normal; color:var(--t-500); }
.stat .l{ margin-top:8px; font-size:.78rem; line-height:1.45; color:var(--ink-fai); }
@media (max-width:620px){ .stats{ grid-template-columns:1fr 1fr; } }

/* ---- bench heading, left aligned in one column ---- */
.bench-head{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  margin:clamp(48px,6vw,88px) 0 clamp(22px,2.6vw,34px);
  padding-top:clamp(34px,4vw,54px);
  border-top:1px solid var(--rule);
}
.bench-head h3{ margin:0; }
.bench-head .lede{ max-width:56ch; }

/* ============================================================
   MOTION, richer per-element choreography
   ============================================================ */
/* headings reveal line by line behind a mask */
.js-on .rv-line{ display:block; overflow:hidden; }
.js-on .rv-line > span{
  display:block;
  transform:translateY(105%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.js-on .rv-line.in > span{ transform:translateY(0); }

/* cards arrive with a touch of rotation, not a flat fade */
.js-on [data-rv]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),
             transform .95s cubic-bezier(.16,1,.3,1);
}
.js-on [data-rv].in{ opacity:1; transform:none; }

.js-on .syscard[data-rv], .js-on .doc[data-rv], .js-on .stat[data-rv]{
  transform:translateY(38px) scale(.975);
}
.js-on .syscard[data-rv].in, .js-on .doc[data-rv].in, .js-on .stat[data-rv].in{
  transform:none;
}

/* hover lift on every card surface */
.svc, .stat, .doc, .syscard, .rev, 

@media (prefers-reduced-motion:reduce){
  .js-on .rv-line > span{ transform:none !important; }
}

.nav{ transition:transform .45s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.nav.tuck{ transform:translateX(-50%) translateY(-135%); }
.syscard,.svc,.doc,.stat{ transform-style:preserve-3d; }

/* hero headline sized to its own column, not the full grid */
.hero .d-xl{ font-size:clamp(2.2rem, 5.5vw, 5rem); }


@media (max-width:1180px){ .hero .d-xl{ font-size:clamp(2.2rem, 7vw, 4rem); } }

/* ============================================================
   HORIZONTAL PHOTO STRIP, Glowdent's .on-scroll band
   ============================================================ */
.photostrip{
  overflow:hidden;
  background:var(--bg);
  padding-block:clamp(10px,1.4vw,18px);
  display:flex;
}
.photostrip-track{
  display:flex; flex-shrink:0; gap:10px;
  will-change:transform;
  animation:stripRun 64s linear infinite;
}
.photostrip:hover .photostrip-track{ animation-play-state:paused; }
@keyframes stripRun{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 5px)); }
}
@media (prefers-reduced-motion:reduce){
  .photostrip-track{ animation:none; }
}
.photostrip figure{
  margin:0; flex-shrink:0;
  width:clamp(150px,13vw,210px);
  aspect-ratio:1/1.14;
  border-radius:18px; overflow:hidden;
  background:var(--bg-3);
}
.photostrip img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.photostrip figure:hover img{ transform:scale(1.07); }

/* ============================================================
   REVIEW CARD VARIANTS
   ============================================================ */
.rev{ border-radius:20px; }
.rev-ink{
  grid-column:span 2;
  background:linear-gradient(140deg, var(--t-700), var(--t-900));
  border-color:transparent; color:var(--on-dark);
}
.rev-ink q{ color:#fff; font-size:clamp(1.2rem,2vw,1.6rem); }
.rev-ink cite{ color:var(--on-dark-m); }
.rev-ink cite b{ color:#fff; }
.rev-gold{
  background:linear-gradient(150deg, #F6E3B8, #EBD09A);
  border-color:transparent;
}
.rev-gold q, .rev-gold cite b{ color:#3A2A10; }
.rev-gold cite{ color:#6B5326; }
.rev-gold .rev-stars{ color:#9A6B12; }
@media (max-width:900px){ .rev-ink{ grid-column:span 2; } }
@media (max-width:600px){ .rev-ink{ grid-column:span 1; } }

/* ============================================================
   FOOTER, contact cards + oversized wordmark
   ============================================================ */






@media (max-width:820px){  }



.ev-top{ display:block; }
.ba-nav{ justify-content:center; }
.ba-note{ margin-left:0; text-align:center; max-width:46ch; }


/* ============================================================
   CORRECTIONS
   ============================================================ */

/* credential list reads as one line, label then detail */
.creds li{
  display:block;
  font-size:.86rem; line-height:1.5; color:var(--ink-mut);
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:13px 17px;
}
.creds li b{ display:inline; color:var(--ink); font-weight:600; }

/* review attribution: name over role, not run together */
.rev cite{
  font-style:normal; font-size:.78rem; line-height:1.5;
  color:var(--ink-fai); margin-top:auto; padding-top:4px;
}
.rev cite b{ display:block; font-weight:600; color:var(--ink-mut); margin-bottom:2px; }
.rev-ink cite{ color:var(--on-dark-m); }
.rev-ink cite b{ color:#fff; }
.rev-gold cite{ color:#6B5326; }
.rev-gold cite b{ color:#3A2A10; }
.rev-stars{ color:#C9922B; font-size:.86rem; letter-spacing:.14em; }
.rev-ink .rev-stars{ color:var(--t-300); }

/* the numbered list sits on the crimson panel, so it must be light */
.second .sec-grid{ color:var(--on-dark); }
.so-list li{ color:rgba(245,239,227,.86); }
.so-list li::before{ color:var(--t-300); font-weight:700; }
.second .sec-grid .lede{ color:rgba(245,239,227,.8); }

/* form controls, restored */
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px;
  border-radius:12px;
  background:var(--bg-2);
  border:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--ff-s); font-size:.92rem;
  transition:border-color .3s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:96px; font-family:var(--ff-s); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--t-500); background:#fff;
  box-shadow:0 0 0 4px rgba(181,41,44,.1);
}
.field input::placeholder, .field textarea::placeholder{ color:#B5A897; }

/* the form card should not stretch to the column */

.form-card{ align-self:end; }

/* FAQ answer contrast */
.fq-a p{ font-size:.92rem; line-height:1.68; color:var(--ink-mut); }
.fq summary span{ flex:1; }

/* footer link colours, restored */
.foot-brand a, .foot-bot a{ color:var(--on-dark-m); }
.foot-brand a:hover, .foot-bot a:hover{ color:#fff; }


/* premise photographs large enough to register */
.pf{ width:clamp(170px,19vw,268px); }
.pf-l{ left:0; top:-2%; }
.pf-r{ right:0; bottom:-4%; }

/* ============================================================
   HERO CARDS, matched size, held still
   ============================================================ */
.hero-cards{ display:flex; align-items:stretch; gap:14px; }
.hcard{
  width:206px;
  min-height:214px;
  display:flex; flex-direction:column;
  background:rgba(246,244,240,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:24px;
  padding:22px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6);
  animation:none;
}
.hcard-tall, .hcard-short{ width:206px; margin-bottom:0; }

@media (max-width:560px){
  .hero-cards{ flex-direction:column; }
  .hcard, .hcard-tall, .hcard-short{ width:auto; min-height:0; }
}

/* ============================================================
   NAV, call button
   ============================================================ */
.nav-tel{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:100px;
  border:1px solid var(--rule);
  font-size:.82rem; font-weight:600; color:var(--t-500);
  white-space:nowrap; flex-shrink:0;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease);
}
.nav-tel:hover{ background:var(--t-500); border-color:var(--t-500); color:#fff; }
.nav-tel-ico{ display:grid; place-items:center; }
@media (max-width:640px){ .nav-tel span:last-child{ display:none; } .nav-tel{ padding:10px; } }

/* ============================================================
   CREDENTIAL MARQUEE, no cards, no panel
   ============================================================ */

.credline-lead{
  text-align:center; margin:0 0 clamp(20px,2.6vw,32px);
  font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-fai);
}






}
@media (prefers-reduced-motion:reduce){  }

/* ============================================================
   CONTINUOUS SCROLL DRIFT
   This is the thing that makes Glowdent feel alive: elements
   keep moving with the scroll at different rates, rather than
   fading in once and stopping.
   ============================================================ */
[data-par]{ will-change:transform; }

/* ============================================================
   FOOTER, newsletter block
   ============================================================ */
.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;
}
.foot-news p{
  font-size:.83rem; line-height:1.6; color:var(--on-dark-f);
  margin:0 0 16px; max-width:34ch;
}
.news-form{
  display:flex; align-items:center; gap:8px;
  background:rgba(245,239,227,.07);
  border:1px solid var(--rule-dark);
  border-radius:100px;
  padding:5px 5px 5px 18px;
  max-width:300px;
}
.news-form input{
  flex:1; min-width:0;
  background:none; border:0; outline:none;
  color:#fff; font-family:var(--ff-s); font-size:.85rem;
}
.news-form input::placeholder{ color:var(--on-dark-f); }
.news-form button{
  width:36px; height:36px; border-radius:50%;
  background:var(--t-500); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.news-form button:hover{ background:var(--t-300); color:var(--t-900); transform:translateX(2px); }
.news-msg{ margin-top:10px; font-size:.76rem; color:var(--t-300); min-height:1em; }
.foot-grid{ grid-template-columns:1.25fr 1fr 1fr 1fr; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }


/* ============================================================
   MEASURED AGAINST GLOWDENT
   hero 691/914 of its width; logo strip 74px tall with the
   marks in full colour; footer cards 3 x 220px at 24px radius.
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  min-height:min(80vh, 760px);
  display:flex; align-items:flex-end;
  padding-block:clamp(126px,16vh,178px) 50px;
  background:var(--t-900);
}

/* ---- credential marks: real colours, rounded, even fade ---- */





/* ---- footer contact cards ---- */
.foot-contact{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,20px);
  padding-bottom:clamp(34px,4.2vw,54px);
}
.fc{
  display:flex; flex-direction:column; justify-content:center;
  gap:10px;
  min-height:196px;
  background:rgba(245,239,227,.055);
  border:1px solid var(--rule-dark);
  border-radius:24px;
  padding:28px 26px;
}
.fc-ico{
  width:44px; height:44px; border-radius:50%;
  background:var(--t-500); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
  margin-bottom:4px;
}
.fc-l{
  font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-400);
}
.fc-v{ font-size:.94rem; color:#fff; line-height:1.55; }
.fc-v a{ color:#fff; }
.fc-v a:hover{ color:var(--t-300); }
@media (max-width:860px){ .foot-contact{ grid-template-columns:1fr; }
  .fc{ min-height:0; } }

/* ---- second-opinion scan, shown whole ---- */
.so-fig{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5);
}
.so-fig img{
  width:100%; height:auto; display:block;
  object-fit:contain; background:#fff;
}
.so-fig figcaption{
  padding:13px 20px; font-size:.75rem; color:var(--ink-fai);
  background:#fff; border-top:1px solid var(--rule);
}

@media (max-width:900px){
  .hero-body{ grid-template-columns:1fr; }
  .hero-cards{ margin-top:10px; }
}
/* trim the hero to Glowdent proportions */
.hero{ padding-block:clamp(108px,13.5vh,156px) 50px; }
.hero-trustline{ margin-bottom:clamp(16px,2.2vw,30px); }
.hero-desc{ margin-top:clamp(14px,1.9vw,22px); }
.hero .hero-actions{ margin-top:clamp(18px,2.4vw,28px); }


/* ============================================================
   VISIT: the photograph sits on the form's baseline
   ============================================================ */
.visit-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.visit-grid > div:first-child{ display:flex; flex-direction:column; }
.visit-fig{
  /* grows to fill the column so its base lands exactly on the form's */
  aspect-ratio:16/9.6;
  margin:clamp(24px,3vw,38px) 0 0;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh);
}
.visit-fig img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:940px){
  .visit-grid{ grid-template-columns:1fr; }
  .visit-fig{ margin-top:clamp(24px,3vw,38px); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.foot-logo{
  width:186px; height:auto; border-radius:6px;
  box-shadow:0 4px 16px -6px rgba(0,0,0,.6);
}
.socials{ display:flex; gap:9px; }
.socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule-dark);
  display:grid; place-items:center;
  color:var(--on-dark-m);
  transition:all .3s var(--ease);
}
.socials a:hover{ border-color:var(--t-400); color:#fff; background:rgba(183,152,72,.16); }

.foot-bot{
  border-top:0;
  padding-top:0;
  display:block;
  text-align:center;
  font-size:.76rem; color:var(--on-dark-f);
}
.foot-bot a{ color:var(--on-dark-m); }
.foot-bot a:hover{ color:#fff; }

/* wordmark: first letter on the left gutter, last on the right,
   the rest spread evenly between them */
.foot-wordmark{
  display:flex; justify-content:space-between; align-items:center;
  width:100%;
  margin:clamp(14px,1.6vw,22px) 0 clamp(16px,2vw,26px);
  font-family:var(--ff-d);
  font-size:clamp(3.6rem,17.5vw,15rem);
  font-weight:600; line-height:.8;
  color:rgba(245,239,227,.08);
  user-select:none;
  overflow:hidden;
}
.foot-wordmark span{ display:block; flex:0 0 auto; }

/* ============================================================
   REFINEMENT PASS
   Restraint, not more effects. Bigger where it carries argument,
   tighter inside cards, fewer repeated eyebrow labels.
   ============================================================ */

/* ---- hero: one quiet card, nothing competing ---- */
.hero-cards{ display:flex; }
.hcard{
  width:250px; min-height:0;
  padding:24px 24px 26px;
  border-radius:24px;
}
.hcard-label{ font-size:.66rem; letter-spacing:.12em; }
.hcard-n{ font-size:2.6rem; margin-top:12px; }
.hcard p{ margin-top:10px; font-size:.8rem; line-height:1.55; }
@media (max-width:560px){ .hcard{ width:auto; } }

/* ---- premise: the decisive bridge, not an interlude ---- */
.premise-copy{
  font-size:clamp(1.7rem,3.6vw,3.05rem);
  max-width:20ch;
  line-height:1.2;
}
.premise-tail{
  position:relative; z-index:2;
  max-width:52ch; margin:clamp(24px,3vw,38px) auto 0;
  text-align:center;
  font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.65; color:var(--ink-mut);
}
.premise-tail em{ font-style:normal; font-weight:600; color:var(--t-500); }
.pf{ width:clamp(180px,20vw,290px); }

/* ---- systems: the cards carry the argument, so give them room ---- */
.syscards{ gap:clamp(16px,1.9vw,26px); }
.syscard{ padding:16px 16px 30px; }
.syscard > figure{ aspect-ratio:4/2.6; margin-bottom:22px; }
.syscard h3{ font-size:1.3rem; line-height:1.16; }
.syscard-prob{
  margin:12px 0 0 !important; padding:0 8px;
  font-size:.83rem; line-height:1.5;
  font-weight:600; color:var(--t-500);
}
.syscard p{ font-size:.875rem; line-height:1.62; }
.syscard-n{ font-size:.72rem; }

/* ---- the long-form patient story, placed right after the proof ---- */
.story{
  margin:clamp(30px,3.6vw,48px) auto 0;
  max-width:74ch;
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--t-500);
  border-radius:20px;
  padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; gap:16px;
}
.story-stars{ color:#C9922B; font-size:.86rem; letter-spacing:.14em; }
.story q{
  quotes:none; display:block;
  font-family:var(--ff-d);
  font-size:clamp(1.08rem,1.55vw,1.35rem);
  font-weight:400; line-height:1.5; letter-spacing:-.018em;
  color:var(--ink);
}
.story cite{
  font-style:normal; font-size:.8rem; line-height:1.5; color:var(--ink-fai);
}
.story cite b{ display:block; font-weight:600; color:var(--ink-mut); margin-bottom:2px; }

/* ---- credentials: each one states its consequence ---- */
.creds{ gap:9px; }
.creds li{ padding:15px 18px; }
.creds li b{ display:block; font-size:.9rem; color:var(--ink); margin-bottom:4px; }
.creds li span{ display:block; font-size:.82rem; line-height:1.55; color:var(--ink-mut); }

/* ---- treatments: reconstruction is the strategic centre ---- */



@media (max-width:1020px){  }
@media (max-width:520px){  }

/* ---- second opinion: a deliberate mid-page moment, with air ---- */
.second{ padding-block:clamp(76px,10vw,148px); }
.sec-grid{
  background:linear-gradient(140deg, var(--t-700) 0%, var(--t-900) 100%);
  border-radius:var(--r-xl);
  padding:clamp(34px,4.6vw,76px);
  color:var(--on-dark);
}
.sec-grid .display{ color:#fff; }
.second .eyebrow{
  color:var(--t-300);
  background:rgba(245,239,227,.1);
  border-color:rgba(245,239,227,.22);
}
.second .eyebrow::before{ background:var(--t-300); }

/* ---- FAQ: present, useful, almost invisible until touched ---- */
.faq{ padding-block:clamp(52px,6.4vw,86px); }
.faq .display{ font-size:clamp(1.7rem,3.2vw,2.6rem); }
.fq summary{ padding:17px 0; font-size:clamp(.98rem,1.25vw,1.08rem); }
.fq summary i{ width:28px; height:28px; }
.fq-a{ padding-bottom:19px; }
.fq-a p{ font-size:.9rem; }

/* ---- micro: fewer repeated labels, steadier rhythm ---- */
.evidence .sec-head .eyebrow,
.bench-head .eyebrow{ display:none; }

/* one radius language for imagery */
.syscard > figure, .svc-img > figure, .ev-strip figure,
.doc-fig, .photostrip figure{ border-radius:18px; }

/* small cards were losing their copy at page scale */
.doc-bio{ font-size:.83rem; }

.stat .l, .fc-l{ letter-spacing:.11em; }

/* tighten inside cards, breathe between sections */
.doc{ padding:12px 12px 20px; }



/* ============================================================
   CREDENTIAL MARKS, static
   ============================================================ */
.credline{
  background:var(--bg);
  padding-block:clamp(30px,3.6vw,48px);
  border-bottom:1px solid var(--rule);
}
.credline-lead{
  text-align:center; margin:0 0 clamp(18px,2.2vw,28px);
  font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-fai);
}
.credline-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  align-items:center; gap:clamp(20px,4vw,64px);
  max-width:900px; margin-inline:auto;
}
.credline-row span{ display:grid; place-items:center; }
.credline-row img{
  height:clamp(40px,3.6vw,52px); width:auto;
  object-fit:contain; border-radius:10px;
}
@media (max-width:640px){
  .credline-row{ grid-template-columns:1fr 1fr; gap:26px; }
}

/* ============================================================
   TREATMENTS
   Three columns, so reconstruction can lead across two without
   leaving a hole. Images support the card, they do not run it.
   ============================================================ */
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.5vw,20px);
  align-items:stretch;
}
.svc{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:14px;
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
.svc:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--t-100); }
.svc > figure{
  margin:0 0 16px;
  border-radius:18px; overflow:hidden;
  aspect-ratio:16/7.4;
  background:var(--bg-3);
}
.svc > figure img{ width:100%; height:100%; object-fit:cover; }
.svc-body{
  display:flex; flex-direction:column; gap:8px;
  flex:1 1 auto;
  padding:4px 10px 14px;
}
.svc h3{
  font-family:var(--ff-d); font-size:1.08rem; font-weight:600;
  line-height:1.2; letter-spacing:-.024em; margin:0; color:var(--ink);
}
.svc p{ font-size:.85rem; line-height:1.58; color:var(--ink-mut); margin:0; }
.svc .go{
  margin-top:auto; padding-top:8px;
  font-size:.77rem; font-weight:600; color:var(--t-500);
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .3s var(--ease);
}
.svc:hover .go{ gap:11px; }

/* reconstruction leads: two columns wide, larger type, wider crop */
.svc-lead{ grid-column:span 2; }
.svc-lead > figure{ aspect-ratio:16/5.2; }
.svc-lead h3{ font-size:1.42rem; }
.svc-lead p{ font-size:.92rem; max-width:58ch; }

@media (max-width:1020px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-lead{ grid-column:span 2; }
  .svc-lead > figure{ aspect-ratio:16/6.4; }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc-lead{ grid-column:span 1; }
  .svc > figure, .svc-lead > figure{ aspect-ratio:16/8.5; }
}

/* portraits in cards should frame the face, not the collarbone */
.svc > figure img{ object-position:50% 26%; }
.svc-img[data-par="0.04"] > figure img{ object-position:50% 10%; }  /* veneers portrait */
.svc-lead > figure img{ object-position:50% 42%; }
.syscard > figure img{ object-position:50% 40%; }

/* ============================================================
   DESIGN SYSTEM ENFORCEMENT
   The page had 10 radii, 9 card paddings, 4 button heights and a
   dozen arbitrary sub-14px type sizes produced by clamp() landing
   on decimals. Everything below collapses those into one system.
   Display type is deliberately left alone.
   ============================================================ */

:root{
  /* ---- radii: four values, by role ---- */
  --r-pill:      100px;   /* buttons, chips, eyebrows */
  --r-media:     18px;    /* imagery inside a card */
  --r-card:      20px;    /* card containers */
  --r-editorial: 40px;    /* large standalone figures */

  /* ---- type scale: fixed, legible, no decimals ---- */
  --t-meta:  13px;    /* captions, metadata, legal */
  --t-label: 12.5px;  /* uppercase eyebrows and labels */
  --t-sm:    14.5px;  /* card copy, bios, small body */
  --t-base:  16px;    /* body */
  --t-md:    17.5px;  /* lede, supporting statements */
  --t-lg:    20px;    /* intro paragraphs */

  /* ---- card padding: three values ---- */
  --pad-card:    22px;  /* standard card */
  --pad-card-lg: 30px;  /* feature card */
  --pad-media:   14px;  /* card whose image meets the edge */

  /* ---- controls ---- */
  --btn-h:     52px;
  --btn-pad:   0 28px;
  --nav-btn-h: 42px;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body{ font-size:var(--t-base); line-height:1.6; }

.lede{ font-size:var(--t-md); line-height:1.62; }
.sec-head .lede{ max-width:56ch; }

.eyebrow{
  font-size:var(--t-label);
  letter-spacing:.13em;
  padding:8px 16px;
  border-radius:var(--r-pill);
}

/* small copy was the weakest link, lifted roughly 10% and given air */
.svc p,
.doc-bio,
.syscard p,
.creds li span,
.rev cite,
.story cite,
.hcard p,
.fq-a p,
.info-row dd,
.foot ul a,
.foot-news p,
.so-list li{
  font-size:var(--t-sm);
  line-height:1.62;
}

.stat .l,
.credline-lead,
.dent-cap,
.so-fig figcaption,
.ba-note,
.form-foot,
.foot-bot,
.syscard-n,
.doc-spec,
.hcard-label,
.fc-l,
.ba-tag,
.svc .go,
.field label{
  font-size:var(--t-meta);
  letter-spacing:.11em;
}
.ba-tag, .doc-spec, .hcard-label, .fc-l, .field label,
.stat .l, .credline-lead{ font-size:var(--t-label); }

.info-row dt{ font-size:var(--t-label); letter-spacing:.12em; }
.field input, .field select, .field textarea{ font-size:var(--t-base); }
.nav-links a{ font-size:var(--t-sm); }
.foot h4{ font-size:var(--t-label); letter-spacing:.13em; }

/* heading to supporting-copy spacing, one value */
.sec-head{ gap:16px; }
.sec-head .display + .lede{ margin-top:2px; }

/* ============================================================
   RADII, applied by role
   ============================================================ */
.btn, .nav-cta, .nav-tel, .eyebrow, .chip,
.sys-tags li, .doc-spec, .ba-tag, .ba-dot,
.news-form, .socials a, .fc-ico, .syscard-pair em{ border-radius:var(--r-pill); }

.svc, .syscard, .doc, .rev, .story, .stat, .hcard, .fc,
.creds li, .sec-card{ border-radius:var(--r-card); }

.svc > figure, .syscard > figure, .doc-fig, .ev-strip figure,
.photostrip figure, .syscard-pair > span, .pf{ border-radius:var(--r-media); }

.ba, .dent-fig, .so-fig, .visit-fig, .form-card{ border-radius:var(--r-editorial); }

.brand-logo, .brand-logo img, .foot-logo{ border-radius:6px; }
.credline-row img{ border-radius:8px; }

/* ============================================================
   CARD PADDING, three values
   ============================================================ */
.svc{ padding:var(--pad-media); }
.svc-body{ padding:6px 10px 12px; gap:9px; }
.syscard{ padding:var(--pad-media) var(--pad-media) 26px; }
.doc{ padding:var(--pad-media) var(--pad-media) 20px; }
.rev{ padding:var(--pad-card-lg); }
.story{ padding:var(--pad-card-lg); }
.stat{ padding:var(--pad-card); }
.hcard{ padding:var(--pad-card); }
.fc{ padding:26px var(--pad-card); }
.creds li{ padding:15px 18px; }
.form-card{ padding:clamp(26px,3vw,40px); }

/* ============================================================
   CONTROLS, one height each
   ============================================================ */
.btn{
  min-height:var(--btn-h);
  padding:var(--btn-pad);
  font-size:var(--t-sm);
  align-items:center;
}
.nav-cta, .nav-tel{
  min-height:var(--nav-btn-h);
  padding:0 20px;
  font-size:var(--t-sm);
  display:inline-flex; align-items:center;
}
.nav-burger{ min-height:var(--nav-btn-h); padding:0 18px; align-items:center; }
.form-card button[type=submit]{ min-height:var(--btn-h); }

/* ============================================================
   SECTION RHYTHM
   Spacing carries relationship. Related beats sit closer,
   narrative turns get more air.
   ============================================================ */
.credline{ padding-block:44px; }                 /* quiet, straight after hero */
.premise{ padding-block:132px; }                 /* positioning, 10% tighter */
.systems{ padding-block:116px; }                 /* follows on from the premise */
.evidence{ padding-block:120px 104px; }          /* leads into the strip */
.photostrip{ padding-block:16px; }
.doctor{ padding-block:104px 120px; }            /* proof into authority */
.services{ padding-block:120px; }
.second{ padding-block:132px; }                  /* deliberate interruption */
.longev{ padding-block:120px; }
.faq{ padding-block:96px; }                      /* calmer */
.visit{ padding-block:112px 120px; }
.foot{ padding-block:76px 26px; }

/* ============================================================
   FAQ, editorial rather than a component
   ============================================================ */
.faq{ background:var(--bg); }
.faq-list{ border-top:1px solid var(--rule); max-width:none; }
.fq{ border-bottom:1px solid var(--rule); background:none; }
.fq summary{
  padding:20px 0; gap:28px;
  font-size:var(--t-md); font-weight:500;
  color:var(--ink);
}
.fq summary i{
  width:24px; height:24px; border:0; border-radius:0;
  opacity:.55; transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.fq summary i::before{ width:13px; height:1.5px; background:var(--ink); }
.fq summary i::after{ width:1.5px; height:13px; background:var(--ink); }
.fq[open] summary i{ background:none; transform:rotate(90deg); opacity:1; }
.fq[open] summary i::before, .fq[open] summary i::after{ background:var(--t-500); }
.fq summary:hover i{ opacity:1; }
.fq-a{ padding:0 0 22px; max-width:78ch; }

/* ============================================================
   FOCUSED FIXES FROM THE AUDIT
   ============================================================ */
/* hero supporting copy was getting lost against the photograph */
.hero-desc{
  font-size:var(--t-md);
  line-height:1.58;
  max-width:46ch;
  color:rgba(246,244,240,.92);
}
.hero-trustline{ font-size:var(--t-sm); }

/* the proof card belongs to the composition, not beside it */
.hcard{
  width:268px;
  background:rgba(246,244,240,.94);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 20px 48px -22px rgba(0,0,0,.5);
}
.hcard-n{ font-size:2.4rem; margin-top:10px; }
.hcard p{ margin-top:9px; }

/* credential strip: quiet, evenly weighted, well surrounded */
.credline-row{ gap:clamp(24px,5vw,80px); max-width:840px; }
.credline-row img{ height:44px; }
.credline-lead{ margin-bottom:26px; color:var(--ink-fai); }

/* positioning statement, tightened and strengthened */
.premise-copy{ max-width:21ch; line-height:1.18; }
.premise-tail{ max-width:54ch; margin-top:30px; font-size:var(--t-md); }
.pf{ width:clamp(178px,19vw,262px); }
.pf-l{ top:4%; }
.pf-r{ bottom:2%; }

/* systems carry strategic weight */
.syscard h3{ font-size:1.34rem; line-height:1.18; }
.syscard-prob{ font-size:var(--t-sm) !important; line-height:1.5; }
.syscard p{ font-size:var(--t-sm); }

/* proof: separate the story from the slider it supports */
.story{ margin-top:52px; }
.ba-nav{ margin-top:22px; }
.ev-strip{ margin-top:44px; }

/* team cards readable */
.doc-nm{ font-size:1.1rem; }
.doc-spec{ padding:5px 11px; margin-bottom:11px; }

/* credential rows: label reads first, implication follows */
.creds li b{ font-size:var(--t-base); margin-bottom:5px; }

/* the burgundy interruption, balanced */
.sec-grid{ padding:clamp(36px,4.4vw,68px); gap:clamp(30px,4vw,56px); }
.so-list{ gap:12px; margin-top:26px; }

/* contact form, simple and grounded rather than floating */
.form-card{ box-shadow:0 24px 60px -34px rgba(40,26,18,.3); }
.field input, .field select, .field textarea{ padding:14px 16px; border-radius:12px; }

/* footer, architectural */
.foot ul{ gap:11px; }
.foot-bot{ font-size:var(--t-meta); }

@media (max-width:900px){
  .premise{ padding-block:92px; }
  .systems, .evidence, .doctor, .services, .second,
  .longev, .visit{ padding-block:84px; }
  .faq{ padding-block:72px; }
}

/* remaining sub-scale strays caught in the type audit */
.ba-dot{ font-size:var(--t-meta); }
.dent-badge .bl{ font-size:var(--t-sm); line-height:1.5; }
.syscard-pair em, .sysblock-pair em{ font-size:var(--t-label); letter-spacing:.09em; }
.syscard h3 sup, .svc h3 sup, .sys-ttl sup{ font-size:.42em; }

/* ============================================================
   REVIEWS: one dominant story, supporting cards beneath.
   Feature spans two columns so five cards fill six slots exactly.
   ============================================================ */
.rev-grid{
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  gap:clamp(14px,1.5vw,20px);
}
.rev{ height:100%; }
.rev-ink{ grid-column:span 2; }
.rev q{ font-size:var(--t-base); line-height:1.58; }
.rev-ink q{ font-size:clamp(1.15rem,1.75vw,1.45rem); line-height:1.42; }
.rev cite{ font-size:var(--t-meta); line-height:1.5; }
.rev cite b{ font-size:var(--t-sm); margin-bottom:3px; }
@media (max-width:900px){
  .rev-grid{ grid-template-columns:1fr 1fr; }
  .rev-ink{ grid-column:span 2; }
}
@media (max-width:600px){
  .rev-grid{ grid-template-columns:1fr; }
  .rev-ink{ grid-column:span 1; }
}

/* proof controls: dots and the disclaimer on one clean line */
.ba-nav{ align-items:center; gap:10px; margin-top:24px; }
.ba-note{
  margin-left:auto; max-width:44ch; text-align:right;
  color:var(--ink-mut); line-height:1.5;
}
@media (max-width:760px){
  .ba-note{ margin-left:0; text-align:left; max-width:none; margin-top:10px; }
}

/* the four patient portraits: one row, identical in every respect */
.ev-strip{ align-items:start; }
.ev-strip figure{ aspect-ratio:1/1.16; margin:0; }
.ev-strip img{ object-position:50% 22%; }

/* ============================================================
   FINAL POLISH
   Three targeted fixes found by audit, nothing speculative.
   ============================================================ */

/* ---- 1. SHADOW SYSTEM ------------------------------------------------
   The page carried 12 arbitrary shadows, several fully opaque because
   their alpha had been lost. Three, by elevation role.
   -------------------------------------------------------------------- */
:root{
  --sh-sm: 0 1px 2px rgba(40,26,18,.04), 0 4px 14px -6px rgba(40,26,18,.07);
  --sh:    0 2px 4px rgba(40,26,18,.03), 0 18px 40px -20px rgba(40,26,18,.16);
  --sh-lg: 0 4px 10px rgba(40,26,18,.03), 0 40px 80px -40px rgba(40,26,18,.22);
}
.stat, .creds li, .credline-row span{ box-shadow:none; }
.svc, .syscard, .doc, .rev, .story{ box-shadow:var(--sh-sm); }
.svc:hover, .syscard:hover, .doc:hover, .rev:hover, .stat:hover{ box-shadow:var(--sh); }
.ba, .dent-fig, .so-fig, .visit-fig, .form-card, .dent-badge{ box-shadow:var(--sh-lg); }
.pf{ box-shadow:var(--sh); }
.hcard{ box-shadow:0 2px 6px rgba(0,0,0,.08), 0 24px 50px -26px rgba(0,0,0,.45); }
.foot-logo{ box-shadow:0 2px 10px -3px rgba(0,0,0,.45); }

/* the slider handle had a hard opaque black glow */
.ba-handle{ box-shadow:0 0 14px rgba(0,0,0,.28); }
.ba-knob{ box-shadow:0 2px 6px rgba(0,0,0,.12), 0 10px 26px -10px rgba(0,0,0,.35); }
.btn-teal, .nav-cta{ box-shadow:0 10px 24px -12px rgba(181,41,44,.5); }
.btn-white{ box-shadow:0 10px 26px -12px rgba(0,0,0,.4); }

/* ---- 2. FAQ ----------------------------------------------------------
   Thinnest section on the page and reading as unfinished rather than
   deliberately quiet. Given air and a firmer question, no card, no panel.
   -------------------------------------------------------------------- */
.faq{ padding-block:104px; }
@media (min-width:861px){
  .faq-grid{ grid-template-columns:.72fr 1.28fr; gap:clamp(32px,4.4vw,72px); }
}
.faq-list{ border-top:1px solid var(--rule); }
.fq summary{
  padding:24px 0;
  font-size:18px; font-weight:500; line-height:1.4;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.fq summary:hover{ color:var(--t-700); }
.fq-a{ padding:0 0 26px; max-width:66ch; }
.fq-a p{ font-size:15px; line-height:1.7; color:var(--ink-mut); }
.fq:last-child{ border-bottom:1px solid var(--rule); }

/* ---- 3. CONTACT BALANCE ----------------------------------------------
   The form outweighed the left-hand story. Left strengthened through
   type and spacing rather than by weakening the form.
   -------------------------------------------------------------------- */
@media (min-width:941px){
  .visit-grid{ grid-template-columns:.96fr 1.04fr; }
}
.info-rows{ margin-top:34px; }
@media (min-width:641px){
  .info-row{ grid-template-columns:118px 1fr; padding:18px 0; gap:22px; }
}
@media (max-width:640px){
  .info-row{ padding:16px 0; }
}
.info-row dd{ font-size:16px; line-height:1.62; color:var(--ink); }
.info-row dt{ color:var(--ink-mut); }
.visit-fig{ margin-top:36px; }

/* ---- 4. MICRO CORRECTIONS FROM THE AUDIT ----------------------------- */
/* eyebrow rhythm: one consistent gap beneath every one */
.sec-head .eyebrow{ margin-bottom:2px; }

/* hero supporting copy sits closer to the headline it qualifies */
.hero-desc{ margin-top:22px; }

/* credential marks optically even: wordmarks read wider than roundels */
.credline-row img{ height:42px; max-width:150px; }
.credline-row span:nth-child(1) img{ height:38px; }   /* Columbia wordmark */
.credline-row span:nth-child(4) img{ height:38px; }   /* AAOSH wordmark   */

/* systems: descriptions were the last undersized copy on the page */
.syscard p{ font-size:15px; line-height:1.64; }
.syscard-prob{ font-size:15px !important; line-height:1.52; }
.syscard h3{ font-size:1.36rem; }

/* treatment copy matched to the systems scale */
.svc p{ font-size:15px; line-height:1.62; }
.svc-lead p{ font-size:16px; }

/* team: names and specialities readable at page scale */
.doc-nm{ font-size:1.12rem; }
.doc-bio{ font-size:14.5px; line-height:1.6; }

/* doctor credentials: implication line lifted off the floor */
.creds li span{ font-size:14.5px; line-height:1.6; }
.creds li b{ font-size:16px; }

/* proof: the story is supporting evidence, not part of the slider */
.story{ margin-top:56px; }

/* ---- last three type values outside the scale ------------------------ */
.ba-tag em, .ba em{ font-size:var(--t-label); }
.sys-dis{ font-size:var(--t-meta); }
.creds li{ font-size:var(--t-sm); }

/* card grids share one gutter */
.syscards, .ev-strip{ gap:20px; }

/* ============================================================
   PRECISION PASS
   Measured strays only. Nothing redesigned.
   ============================================================ */

/* ---- card headings collapsed to one value -------------------
   Treatment titles sat at 17.3px, team names at 17.9px and FAQ
   questions at 18px. Three heading sizes inside 0.7px of each
   other is noise, not hierarchy.
   ------------------------------------------------------------ */
.svc h3{ font-size:18px; }
.doc-nm{ font-size:18px; }

/* ---- remaining off-scale values ----------------------------- */
.rev-stars, .story-stars{ font-size:14px; }
.form-card > p{ font-size:var(--t-sm); line-height:1.6; }

/* ---- vertical rhythm: three values, by narrative role --------
   104 follows on, 120 standard, 132 a turn in the argument.
   ------------------------------------------------------------ */
.systems{ padding-block:104px; }   /* runs on from the premise */
.visit{ padding-block:120px; }

/* ---- the one unstyled component on the page -----------------
   The select was still drawing the operating system's own
   chevron, so it read as a browser default beside six fields
   that did not.
   ------------------------------------------------------------ */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:44px;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A7A68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}
.field select:focus{ background-color:#fff; }

/* ---- mobile nav -------------------------------------------------
   The system pass reset .nav-cta padding unconditionally, which
   overrode the small-screen shrink and pushed the button off the
   right edge below 640px. The burger already opens a full menu,
   so the call and consultation actions move into it.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .nav-cta{ display:none; }
  .nav-burger{ padding:0 15px; }
}
.drawer-foot{
  display:grid; gap:10px;
  margin-top:26px; padding-top:24px;
  border-top:1px solid var(--rule);
}
.drawer-foot .btn{
  display:flex; width:100%;
  align-items:center; justify-content:center; gap:10px;
  padding:0 24px; text-align:center;
}
/* the separator was being left stranded at the end of a wrapped line */
.tl-sep{ white-space:nowrap; }
/* numbered steps: the counter centred itself against two-line items,
   so 04 sat below the line it belonged to */
.so-list li{ align-items:start; }
.so-list li::before{ line-height:1.62; }

/* ---- review cards ---------------------------------------------
   .rev is a <blockquote> and still carried the browser's default
   margin of 1em 40px. The 40px each side ate into every grid
   track, so the column gaps read at ~100px against a 20px row gap.
   ------------------------------------------------------------ */
.rev{ margin:0; }
.info-rows{ margin-bottom:0; }

/* ============================================================
   FOOTER AS A FULL-SCREEN ENDING
   The footer becomes its own viewport-height panel. Content is
   distributed top to bottom rather than stacked and padded, so
   the slack lands in the joints instead of at the end.
   ============================================================ */
.foot{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  padding-block:48px 24px;
}
.foot > .wrap{
  display:flex; flex-direction:column;
  width:100%;
  justify-content:space-between;
}
.foot-contact{ padding-bottom:0; }
.foot-grid{ margin-top:clamp(28px,3.2vw,46px); }

/* the wordmark and the legal line stay married at the base */
.foot-wordmark{ margin-block:clamp(16px,2.2vw,30px) clamp(10px,1.2vw,16px); }

/* ---- mobile: the same panel, compressed honestly -------------
   Contact blocks lie down into rows and the two link lists sit
   side by side, which is what makes a full-screen footer
   plausible on a phone at all.
   ------------------------------------------------------------ */
@media (max-width:860px){
  .foot-contact{ grid-template-columns:1fr; gap:10px; }
  .fc{
    display:grid;
    grid-template-columns:44px 1fr;
    grid-template-areas:"ico label" "ico value";
    align-items:center;
    column-gap:16px; row-gap:2px;
    min-height:0; padding:16px 18px; border-radius:18px;
  }
  .fc-ico{ grid-area:ico; margin-bottom:0; align-self:center; }
  .fc-l{ grid-area:label; }
  .fc-v{ grid-area:value; }
}
@media (max-width:520px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .foot-brand, .foot-news{ grid-column:1 / -1; }
}
/* contact cards centred their own content, so the one-line phone
   card sat 12px below the two-line cards either side of it */
.fc{ justify-content:flex-start; }

/* tablet: the compact contact rows sit three across, which is what
   lets the footer still close inside one screen at this width */
@media (min-width:601px) and (max-width:860px){
  .foot-contact{ grid-template-columns:repeat(3,1fr); }
  .fc{ grid-template-columns:38px 1fr; column-gap:12px; padding:14px 14px; }
  .fc-ico{ width:38px; height:38px; }
}
/* compact contact rows: leftover height was being shared between the
   label and value rows, so the three labels landed at three heights */
@media (max-width:860px){
  .fc{ align-content:start; }
  .fc-ico{ align-self:start; }
}

/* ---- faint ink -----------------------------------------------
   #9C8F82 measured 3.15:1 on the page background. It was carrying
   four pieces of genuine reading text (team bios, review
   attributions, form labels, the reassurance line), all of which
   sat below the 4.5:1 legibility floor. One token corrected
   rather than four exceptions added. Still clearly subordinate
   to --ink-mut, so the hierarchy is unchanged.
   ------------------------------------------------------------ */
:root{ --ink-fai:#786B5E; }
/* Dr. Ianzano's is the one landscape source in the row, so the shared
   50% crop left his figure half outside the frame. Framing only, no
   change to the image or the card. */
.doc-fig img[src$="dr-ianzano.jpg"]{ object-position:76% 34%; }

/* ---- intro composition ----------------------------------------
   Both figures were pinned to the page gutter (left:0 / right:0),
   so they read as two objects stuck to the window frame rather
   than as part of the centred composition. Inset only.
   ------------------------------------------------------------ */
.pf-l{ left:22px; }
.pf-r{ right:22px; }

/* ============================================================
   MOBILE
   Measured against glowdent.webflow.io at a 375px viewport:
     gutter 15px            H1 44/lh1.0      H2 38/lh1.1
     H3 22                  body 16/lh1.375  lead 18/lh1.39
     section padding 50-60  button 58h r40 16px, full width
     full-bleed media 345x255 (ar 1.35)
   Our page was running 35px headlines inside 84-120px section
   padding with 1.62 leading, which is a desktop sheet squeezed
   into a phone: too much air, too little type. Page height was
   19,867 against the reference's 11,740.
   ============================================================ */
@media (max-width:640px){

  /* ---- display type: the vw clamps bottomed out at minimums
     picked for desktop shrink, never for a phone ---- */
  .hero .d-xl, .d-xl{ font-size:44px; line-height:1.02; letter-spacing:-.032em; }
  .d-lg{ font-size:38px; line-height:1.08; letter-spacing:-.03em; }
  .d-md{ font-size:28px; line-height:1.14; }
  .faq .display{ font-size:32px; line-height:1.1; }
  .premise-copy{ font-size:30px; line-height:1.2; max-width:none; }
  .premise-tail{ font-size:18px; line-height:1.45; margin-top:22px; }

  /* ---- supporting copy ---- */
  .lede, .hero-desc{ font-size:18px; line-height:1.42; max-width:none; }
  .sec-head .lede{ max-width:none; }

  /* body leading: 1.62 is a desktop measure. The reference runs
     1.375; 1.5 suits longer clinical paragraphs at the same width. */
  .svc p, .syscard p, .syscard-prob, .fq-a p, .doc-bio,
  .creds li span, .rev q, .story q, .so-list li, .info-row dd,
  .foot ul a, .foot-news p{ line-height:1.5; }

  /* ---- card headings ---- */
  .syscard h3{ font-size:22px; line-height:1.2; }
  .svc h3{ font-size:20px; }
  .doc-nm{ font-size:18px; }
  .fq summary{ font-size:18px; padding:20px 0; }
  .creds li b{ font-size:16px; }
  .rev-ink q{ font-size:20px; line-height:1.34; }

  /* ---- section rhythm: reference runs 50 to 60 ---- */
  .credline{ padding-block:36px; }
  .premise, .systems, .evidence, .doctor,
  .services, .longev, .faq, .visit{ padding-block:56px; }
  .second{ padding-block:64px; }          /* the one deliberate turn */
  .photostrip{ padding-block:10px; }
  .sec-pad{ padding-block:56px; }

  /* ---- controls: 56h, 16px, full width, as the reference ---- */
  .btn{
    min-height:56px; font-size:16px;
    width:100%; justify-content:center;
  }
  .hero-actions{ display:grid; grid-auto-flow:row; gap:10px; width:100%; }
  .form-card button[type=submit]{ min-height:56px; font-size:16px; }
}

/* ---- mobile: intro composition ------------------------------
   .pf-l/.pf-r keep their desktop inset values at phone width.
   Once the figures go position:relative those insets become
   relative offsets, which move the image visually but not in
   flow, so the headline was rendering on top of the photograph.
   The width clamp was also bottoming out at 178px.
   ------------------------------------------------------------ */
@media (max-width:980px){
  .pf, .pf-l, .pf-r{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    width:100%; max-width:300px;
    margin:0 auto 20px;
  }
  .pf-r{ margin:0 auto 26px; }
  .premise .wrap{ display:flex; flex-direction:column; }
  .premise-copy{ order:1; }
  .pf-l{ order:0; }
  .pf-r{ order:2; margin-top:26px; }
  .premise-tail{ order:3; }
}

/* ---- mobile: credential marks -------------------------------
   Two wide columns left four small marks floating with large
   uneven gaps. One row of four reads as a credential strip.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .credline-row{
    display:grid; grid-template-columns:1fr 1fr;
    gap:22px 16px; align-items:center; max-width:none;
  }
  .credline-row span{ display:grid; place-items:center; }
  .credline-row img{ height:42px; max-width:100%; width:auto; }
  .credline-row span:nth-child(1) img,
  .credline-row span:nth-child(4) img{ height:38px; }
  .credline-lead{ margin-bottom:18px; }
}

/* ---- mobile: no scroll drift --------------------------------
   The continuous drift engine translates elements without moving
   their flow position. That reads as depth in a wide column and
   as overlapping content in a narrow one.
   ------------------------------------------------------------ */
@media (max-width:860px){
  [data-par]{ transform:none !important; }
}

/* ---- mobile: team roster ------------------------------------
   At one card per row each portrait ran 334px tall, so every
   supporting doctor took most of a screen. Two up reads as a
   roster, which is what it is.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .bench-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .doc{ padding:10px 10px 16px; }
  .doc-fig{ aspect-ratio:1/1.12; margin-bottom:12px; }
  .doc-spec{ font-size:10px; letter-spacing:.05em; padding:4px 9px; margin-bottom:8px;
             white-space:nowrap; }
  .doc-nm{ font-size:15px; line-height:1.24; }
  .doc-bio{ font-size:13px; line-height:1.45; margin-top:6px; }
}

/* ---- FAQ open state -----------------------------------------
   The open rule hid the vertical bar AND rotated the icon 90
   degrees, so the two cancelled and the minus came out vertical.
   Hide the bar, keep the icon upright: plus becomes minus.
   ------------------------------------------------------------ */
.fq[open] summary i{ transform:none; }
.fq[open] summary i::after{ opacity:0; }
.fq summary i::before{ transition:background-color .3s var(--ease); }

/* ---- mobile: practice details -------------------------------
   A label column beside the value left roughly 200px for the
   address, so every value wrapped and "Getting here" broke in
   two. Label above value reads cleanly at this width.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .info-row{
    display:grid; grid-template-columns:1fr; gap:4px;
    padding:15px 0;
  }
  .info-row dt{ font-size:11.5px; letter-spacing:.12em; }
  .info-row dd{ font-size:16px; line-height:1.5; }
  .info-rows{ margin-top:26px; }
}

/* ---- mobile: second opinion panel ---------------------------
   36px of inner padding left the card 267px wide, which was
   narrower than its own CTA label, so the button wrapped and the
   arrow detached to the far edge.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .sec-grid{ padding:26px 22px 28px; }
  .btn{ padding:0 22px; }
  .second .btn{ text-wrap:balance; }
}

/* ============================================================
   MOBILE FOUNDATION
   The page shipped without a viewport meta tag, so phone
   browsers laid it out at ~980px and scaled the result down.
   Every media query below was correct and none of them ran.
   The tag is now in the head; these are the rest of the
   baseline rules that go with it.
   ============================================================ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
*, *::before, *::after{ box-sizing:border-box; }

/* kills the 300ms tap delay without touching viewport scale */
a, button, summary, label, input, select, textarea, .btn, .ba{
  touch-action:manipulation;
}

/* iOS zooms the page when a focused input is under 16px */
input, select, textarea{ font-size:16px; }

@media (max-width:640px){
  /* body floor: research puts the 2026 minimum at 16px with
     17 to 18 preferred for sustained reading on a phone */
  body{ font-size:17px; }
  .svc p, .syscard p, .syscard-prob, .fq-a p,
  .creds li span, .rev q, .story q, .so-list li,
  .info-row dd, .foot ul a, .foot-news p{ font-size:17px; }
  .lede, .hero-desc, .premise-tail{ font-size:18px; }
  .rev cite b{ font-size:16px; }
  .rev cite, .doc-bio, .form-foot span, .ba-note{ font-size:14.5px; }
  .field label{ font-size:13px; }
  .eyebrow{ font-size:13px; }

  /* tap targets: 44px floor, 48 where the control is primary */
  .nav-tel, .nav-burger{ min-height:46px; min-width:46px; }
  .fq summary{ min-height:48px; }
  .foot ul a, .drawer a{ display:inline-block; padding-block:7px; }
  .socials a{ width:44px; height:44px; }
  .ba-dot{ min-width:44px; min-height:44px; }
  .news-form button{ width:44px; height:44px; }
  .svc .go{ display:inline-block; padding-block:8px; }
}

/* ---- tap targets: measured sweep, 44px floor ----------------
   Fifteen controls still measured under 44px on a phone.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .brand{ display:inline-flex; align-items:center; min-height:46px; }
  .drawer-close{ min-height:44px; padding:0 4px; display:inline-flex; align-items:center; }
  .foot ul a, .drawer a{ padding-block:10px; }
  .fc-v a, .foot-bot a{ display:inline-block; padding-block:12px; }
  .news-form{ min-height:52px; align-items:center; }
  .news-form input{ min-height:52px; }
  .nav-links a{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ---- mobile footer ------------------------------------------
   Two link columns at 160px forced half the labels onto two
   lines, so the columns drifted out of step and read as ragged.
   One column per group: every label fits on one line, the
   rhythm is even and the tap targets stay comfortable.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .foot-brand, .foot-news{ grid-column:1 / -1; }
  .foot h4{ margin-bottom:6px; }
  .foot ul{ gap:2px; }
  .foot ul a{ font-size:17px; }

  /* the wordmark was sitting straight on top of the legal line */
  .foot-wordmark{ margin-block:40px 18px; }
  .foot-bot{ line-height:1.6; }
  .foot-bot a{ display:inline-block; margin-top:2px; }
}

/* ============================================================
   BOTH DEVICES: second-opinion panel
   The numbered steps get a fixed counter column so 01 to 04
   sit on one left edge, and the CTA gets air above it.
   ============================================================ */
.so-list li{ grid-template-columns:24px 1fr; gap:10px; align-items:start; }
.so-list li::before{ text-align:left; }
.second .hero-actions{ margin-top:30px; }

/* ============================================================
   MOBILE LAYOUT PASS
   Desktop column structure carried onto the phone, per request.
   ============================================================ */
@media (max-width:640px){

  /* ---- 1. hero: larger type, buttons left, proof card right ---- */
  .hero .d-xl, .d-xl{ font-size:52px; line-height:1.0; letter-spacing:-.035em; }
  .hero-desc{ font-size:19px; line-height:1.45; }

  .hero-body{
    display:grid; grid-template-columns:1fr 1fr;
    gap:16px 12px; align-items:end;
  }
  .hero-left{ display:contents; }
  .hero h1{ grid-column:1 / -1; }
  .hero-desc{ grid-column:1 / -1; margin-bottom:4px; }
  .hero-actions{
    grid-column:1; display:grid; grid-auto-flow:row;
    gap:10px; align-content:end; width:auto;
  }
  .hero-cards{ grid-column:2; display:block; }

  .hero-actions .btn{ padding:0 14px; font-size:15px; min-height:52px; }
  .hcard{ width:100%; padding:15px 13px; }
  .hcard-label{ font-size:10px; letter-spacing:.08em; }
  .hcard-n{ font-size:1.85rem; margin-top:6px; }
  .hcard p{ font-size:12px; line-height:1.4; margin-top:6px; }

  /* ---- 2. credential marks: four across ---- */
  .credline-row{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .credline-row img{ height:30px; }
  .credline-row span:nth-child(1) img,
  .credline-row span:nth-child(4) img{ height:26px; }

  /* ---- 3. three systems: three across ---- */
  .syscards{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .syscard{ padding:8px 8px 14px; }
  .syscard > figure{ margin-bottom:10px; }
  .syscard-n{ font-size:10px; }
  .syscard h3{ font-size:13px; line-height:1.18; }
  .syscard p{ font-size:11px !important; line-height:1.38; }
  .syscard-prob{ font-size:11px !important; line-height:1.32; }
  .syscard h3 sup{ font-size:.5em; }

  /* ---- 4. evidence strip: four across ---- */
  .ev-strip{ grid-template-columns:repeat(4,1fr); gap:7px; }

  /* ---- 5. meet your dentist: two by two ---- */
  .creds{ grid-template-columns:1fr 1fr; gap:9px; }
  .creds li{ padding:12px 12px; }
  .creds li b{ font-size:13px; line-height:1.24; margin-bottom:4px; }
  .creds li span{ font-size:11.5px !important; line-height:1.4; }

  /* ---- 6. treatments: lead spans two, then three and three ---- */
  .svc-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .svc-lead{ grid-column:span 2; }
  .svc{ padding:8px; }
  /* figure height is set once, globally, further down */
  .svc-body{ padding:6px 4px 6px; gap:5px; }
  .svc h3{ font-size:12.5px !important; line-height:1.2; }
  .svc-lead h3{ font-size:15px !important; }
  .svc p{ font-size:11px !important; line-height:1.38; }
  .svc-lead p{ font-size:12px !important; }
  .svc .go{ font-size:10.5px; padding-block:4px; }

  /* ---- 7. reviews: feature spans two, then three ---- */
  .rev-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .rev-ink{ grid-column:span 2; }
  .rev{ padding:14px 13px; }
  .rev q{ font-size:11.5px !important; line-height:1.42; }
  .rev-ink q{ font-size:14px !important; line-height:1.36; }
  .rev-stars{ font-size:11px; }
  .rev cite{ font-size:10.5px !important; line-height:1.35; }
  .rev cite b{ font-size:11.5px !important; }

  /* ---- 8. footer: three contact boxes across ---- */
  .foot-contact{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .fc{
    grid-template-columns:1fr; grid-template-areas:"ico" "label" "value";
    justify-items:start; padding:12px 10px; row-gap:6px;
  }
  .fc-ico{ width:34px; height:34px; }
  .fc-ico svg{ width:16px; height:16px; }
  .fc-l{ font-size:9px; letter-spacing:.07em; line-height:1.3; }
  .fc-v{ font-size:11.5px; line-height:1.4; }
  .fc-v a{ padding-block:0; }

  /* ---- 9. footer link lists: two columns ---- */
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 18px; }
  .foot-brand, .foot-news{ grid-column:1 / -1; }
  .foot ul a{ font-size:15px; padding-block:9px; }

  /* ---- 10. copyright ---- */
  .foot-bot{ line-height:1.35; }
  .foot-bot a{ margin-top:0; }
}

/* ============================================================
   BOTH DEVICES, point 8 only
   ============================================================ */
/* the numbered steps sat on an auto column, so the label edge
   moved with the counter. Fixed column: 01 02 03 04 flush left,
   every label starting on the same line. */
.so-list li{ grid-template-columns:26px 1fr; gap:10px; align-items:start; }
.so-list li::before{ text-align:left; }
/* air above the CTA so it reads as a conclusion, not a list item */
.second .hero-actions{ margin-top:30px; }

/* ============================================================
   MOBILE LAYOUT, matching the desktop column structure
   ============================================================ */
@media (max-width:640px){

  /* ---- 1. hero: bigger headline, buttons left, card right ---- */
  .hero .d-xl, .d-xl{ font-size:50px; line-height:1.0; letter-spacing:-.034em; }
  .hero-desc{ font-size:19px; line-height:1.4; }
  .hero-body{
    display:grid; grid-template-columns:1fr 1fr;
    gap:18px 12px; align-items:start;
  }
  .hero-left{ display:contents; }
  .hero-left > h1, .hero-desc{ grid-column:1 / -1; }
  .hero-actions{ grid-column:1; grid-row:3; align-self:start; }
  .hero-cards{ grid-column:2; grid-row:3; }
  .hero-actions .btn{ min-height:50px; font-size:13.5px; padding:0 12px; gap:7px; }
  .hero-actions .btn .arw{ flex:0 0 auto; }
  .hcard{ width:100%; padding:14px 14px 16px; }
  .hcard-label{ font-size:10px; letter-spacing:.09em; }
  .hcard-n{ font-size:1.9rem; margin-top:6px; }
  .hcard p{ font-size:12.5px; line-height:1.4; margin-top:6px; }

  /* ---- 3. credential marks: four in one row ---- */
  .credline-row{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:10px; align-items:center; max-width:none;
  }
  .credline-row img{ height:30px; max-width:100%; width:auto; }
  .credline-row span:nth-child(1) img,
  .credline-row span:nth-child(4) img{ height:26px; }

  /* ---- 4. three systems: three columns ---- */
  .syscards{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .syscard{ padding:7px 7px 14px; }
  .syscard h3{ font-size:13px; line-height:1.18; }
  .syscard-n{ font-size:10px; }
  .syscard-prob{ font-size:11px !important; line-height:1.34; }
  .syscard p{ font-size:11px; line-height:1.38; }
  .syscard h3 sup{ font-size:.5em; }
  .sys-dis{ font-size:12px; line-height:1.5; }

  /* ---- 5. evidence strip: four in one row ---- */
  .ev-strip{ grid-template-columns:repeat(4,1fr); gap:8px; }

  /* ---- 6. credentials: two by two ---- */
  .creds{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .creds li{ padding:13px 13px; }
  .creds li b{ font-size:13.5px; line-height:1.24; margin-bottom:4px; }
  .creds li span{ font-size:12px; line-height:1.4; }

  /* ---- 7. treatments: 2 / 3 / 3, lead card spanning two ---- */
  .svc-grid{ grid-template-columns:repeat(3,1fr); gap:9px; }
  .svc-lead{ grid-column:span 2; }
  .svc{ padding:7px; }
  .svc-body{ padding:5px 5px 7px; gap:5px; }
  .svc h3{ font-size:12.5px; line-height:1.18; }
  .svc p{ font-size:11px; line-height:1.38; }
  .svc .go{ font-size:10.5px; letter-spacing:.06em; padding-block:5px; }
  .svc-lead h3{ font-size:16px; }
  .svc-lead p{ font-size:12.5px; }

  /* ---- 9. reviews: 2 in row one, 3 in row two ---- */
  .rev-grid{ grid-template-columns:repeat(3,1fr); gap:9px; }
  .rev-ink{ grid-column:span 2; }
  .rev{ padding:13px; }
  .rev q{ font-size:11.5px; line-height:1.42; }
  .rev-ink q{ font-size:14px; line-height:1.34; }
  .rev cite{ font-size:10.5px; line-height:1.34; }
  .rev cite b{ font-size:11.5px; }
  .rev-stars{ font-size:11px; }

  /* ---- 10. footer contact: three in one row ---- */
  .foot-contact{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .fc{
    grid-template-columns:1fr; grid-template-areas:"ico" "label" "value";
    justify-items:start; row-gap:6px; padding:12px 10px 14px;
  }
  .fc-ico{ width:32px; height:32px; }
  .fc-ico svg{ width:15px; height:15px; }
  .fc-l{ font-size:9px; letter-spacing:.07em; line-height:1.3; }
  .fc-v{ font-size:12px; line-height:1.4; }

  /* ---- 11. footer: the two link groups side by side ---- */
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 18px; }
  .foot-brand, .foot-news{ grid-column:1 / -1; }
  .foot ul{ display:grid; grid-template-columns:1fr; gap:1px; }
  .foot ul a{ font-size:14.5px; padding-block:9px; line-height:1.3; }

  /* contact boxes: three across, so the labels need a shared
     two-line slot or they sit at three different heights */
  .fc-l{ min-height:2.6em; }

  /* ---- 12. copyright ---- */
  .foot-bot{ line-height:1.35; font-size:12px; }
  .foot-bot a{ margin-top:0; }
  .foot-wordmark{ margin-block:34px 12px; }
}

/* ============================================================
   ROUND 2, ALL DEVICES
   ============================================================ */

/* ---- treatments: the lead card spans two columns, so a fixed
   aspect made its image far taller than the cards below it.
   This ratio is the two-column width over the one-column image
   height, so row one matches rows two and three. ---- */
.svc-lead > figure{ aspect-ratio:4.582; }

/* ---- red panel: the counter sat on a smaller font than the
   label, so with top alignment it rode above the text. Baseline
   alignment puts the number and its label on one line. ---- */
.so-list li{ align-items:baseline; }
.so-list li::before{ line-height:inherit; }

/* ---- FAQ: no panel open on load. Exclusivity comes from the
   shared name on each <details>, so only one opens at a time. ---- */
.fq[open] summary i{ transform:none; }

/* ============================================================
   ROUND 2, MOBILE
   ============================================================ */
@media (max-width:640px){

  /* ---- moving photo strip: full-size tiles dominated the phone ---- */
  .photostrip figure{ width:104px; }
  .photostrip-track{ gap:8px; }
  .photostrip{ padding-block:6px; }

  /* ---- footer: logo and socials left, newsletter right,
     both stretched so their tops and bottoms line up ---- */
  .foot-grid{ align-items:stretch; }
  .foot-brand{
    grid-column:1; grid-row:1;
    display:flex; flex-direction:column;
    justify-content:space-between; align-items:flex-start;
    gap:14px; height:100%;
  }
  .foot-news{ grid-column:2; grid-row:1; display:flex; flex-direction:column; }
  .foot-news h4{ margin-bottom:6px; }
  .foot-news p{ font-size:13px; line-height:1.42; }
  .news-form{ margin-top:14px; }
  .foot-logo{ max-width:150px; }
  .socials{ gap:7px; }
  .socials a{ width:38px; height:38px; }

  /* ---- base of the footer ---- */
  .foot-wordmark{ padding-right:6px; margin-block:32px 14px; }
  .foot-bot{ line-height:1.28; padding-bottom:10px; }
  .foot{ padding-block:48px 20px; }
}
/* grid items default to min-width:auto, so the newsletter form's
   intrinsic width pushed its whole column past the viewport */
@media (max-width:640px){
  .foot-grid > *{ min-width:0; }
  .news-form{ width:100%; max-width:100%; }
  .news-form input{ min-width:0; flex:1 1 auto; font-size:16px; padding-left:14px; }
  .news-form button{ flex:0 0 auto; }
}
/* the two-column footer restyle pulled these back under the 44px
   tap floor; restore them within the narrower columns */
@media (max-width:640px){
  .foot ul a{ padding-block:13px; }
  .fc-v a{ display:inline-block; padding-block:13px; }
  .foot-bot a{ display:inline-block; padding-block:12px; }
  /* four icons cannot reach 44px inside a 173px column, so 40 is
     the largest that fits without wrapping them onto two rows */
  .socials{ gap:4px; }
  .socials a{ width:40px; height:40px; }
}
@media (max-width:640px){
  .fc-v a{ padding-block:14px; }
  .foot-bot a{ padding-block:15px; }
}

/* ============================================================
   TREATMENT CARD IMAGES, ONE HEIGHT ON EVERY DEVICE
   The lead card spans two columns, so any shared aspect ratio
   gives it a different height from the single-column cards.
   Driving the height directly instead makes all eight identical
   at every viewport width, which is what an aspect ratio cannot
   do across differing column spans.
   ============================================================ */
.svc > figure, .svc-lead > figure{
  aspect-ratio:auto;
  height:clamp(86px, 13.3vw, 191px);
}

/* ---- grid items default to min-width:auto, so card content was
   forcing the team columns wider than their track and pushing the
   right-hand card past the container edge ---- */
.bench-grid > *, .svc-grid > *, .syscards > *, .rev-grid > *,
.foot-contact > *, .creds > *, .ev-strip > *{ min-width:0; }
.doc-spec{ max-width:100%; }

/* ============================================================
   MENU PANEL
   Full viewport, logo top left, X top right, actions pinned to
   the base. Slides in from the right the way the reference does,
   with the links staggering in behind it.
   ============================================================ */
.drawer{
  position:fixed; inset:0;
  width:100%; height:100vh; height:100dvh;
  max-width:none; border-radius:0;
  display:flex; flex-direction:column;
  background:var(--bg);
  padding:0;
  z-index:7600;            /* above the fixed nav at 7000 */
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .52s cubic-bezier(.16,1,.3,1), visibility 0s linear .52s;
  overscroll-behavior:contain;
}
.drawer.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .52s cubic-bezier(.16,1,.3,1), visibility 0s;
}

/* ---- head: logo left, close right ---- */
.drawer-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  border-bottom:1px solid var(--rule);
}
.drawer-brand{ display:inline-flex; align-items:center; min-height:46px; }
.drawer-brand .brand-logo{ display:block; width:96px; border-radius:6px; overflow:hidden; }
.drawer-brand .brand-logo img{ display:block; width:100%; height:auto; }
.drawer-close{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center;
  padding:0; font-size:0; line-height:0;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--rule); border-radius:50%;
  cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.drawer-close svg{ display:block; }
.drawer-close:hover{ color:var(--t-500); border-color:var(--t-300); transform:rotate(90deg); }

/* ---- the page list, scrollable between head and actions ---- */
.drawer-nav{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 18px 8px;
}
.drawer-nav ul{ list-style:none; margin:0; padding:0; }
.drawer-nav li{ border-top:none; border-bottom:1px solid var(--rule); }
.drawer-nav li:last-child{ border-bottom:0; }
.drawer-nav a{
  display:flex; align-items:center;
  min-height:52px; padding:6px 0;
  font-family:var(--ff-d);
  font-size:20px; font-weight:400; letter-spacing:-.015em;
  color:var(--ink); text-decoration:none;
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.drawer-nav a:hover, .drawer-nav a:focus-visible{ color:var(--t-700); padding-left:6px; }

/* links stagger in once the panel has arrived */
.drawer-nav li{ opacity:0; transform:translateY(10px); }
.drawer.open .drawer-nav li{
  opacity:1; transform:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.drawer.open .drawer-nav li:nth-child(1){ transition-delay:.16s }
.drawer.open .drawer-nav li:nth-child(2){ transition-delay:.19s }
.drawer.open .drawer-nav li:nth-child(3){ transition-delay:.22s }
.drawer.open .drawer-nav li:nth-child(4){ transition-delay:.25s }
.drawer.open .drawer-nav li:nth-child(5){ transition-delay:.28s }
.drawer.open .drawer-nav li:nth-child(6){ transition-delay:.31s }
.drawer.open .drawer-nav li:nth-child(7){ transition-delay:.34s }
.drawer.open .drawer-nav li:nth-child(8){ transition-delay:.37s }
.drawer.open .drawer-nav li:nth-child(9){ transition-delay:.40s }
.drawer.open .drawer-nav li:nth-child(10){ transition-delay:.43s }
.drawer.open .drawer-nav li:nth-child(11){ transition-delay:.46s }
.drawer.open .drawer-nav li:nth-child(12){ transition-delay:.49s }
.drawer.open .drawer-nav li:nth-child(13){ transition-delay:.52s }

/* ---- actions pinned to the base ---- */
.drawer-foot{
  flex:0 0 auto;
  display:grid; gap:10px;
  margin:0;
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);
  background:var(--bg);
}
.drawer-foot .btn{
  display:flex; width:100%;
  align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 20px;
  font-size:16px; text-align:center;
}

@media (prefers-reduced-motion:reduce){
  .drawer{ transition:none; }
  .drawer-nav li{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   FOOTER COLUMNS, DESKTOP
   The brand column was wider than the other three.
   ============================================================ */
@media (min-width:861px){
  .foot-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   MOBILE BAR: logo and menu only
   ============================================================ */
@media (max-width:640px){
  .nav-tel[data-desk]{ display:none; }
  .nav{ justify-content:space-between; }
}

/* ============================================================
   MENU TYPOGRAPHY AND RHYTHM
   Lighter weight, a step larger, and the rows share the height
   evenly instead of each sizing to its own content.
   ============================================================ */
.drawer-nav{ display:flex; flex-direction:column; }
.drawer-nav ul{
  display:flex; flex-direction:column;
  justify-content:flex-start;
}
.drawer-nav li{ display:flex; }
.drawer-nav a{
  width:100%;
  font-size:19px;
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.35;
  min-height:0;
  padding:22px 0;
}

/* the two actions carry the same treatment as their desktop
   counterparts: filled crimson primary, outlined secondary */
.drawer-foot .btn-teal{
  background:var(--t-500); color:#fff; border:1px solid var(--t-500);
  box-shadow:0 10px 24px -12px rgba(181,41,44,.5);
}
.drawer-foot .btn-teal:hover{ background:var(--t-700); border-color:var(--t-700); }
.drawer-foot .btn-ghost{
  background:transparent; color:var(--t-700);
  border:1px solid var(--t-300);
  box-shadow:none;
}
.drawer-foot .btn-ghost:hover{
  background:var(--t-500); border-color:var(--t-500); color:#fff;
}

/* ---- social icons: four fixed-width buttons could not fit the
   left footer column, so they spilled 12px past it. A four track
   grid makes them share whatever width the column has, at any
   viewport, instead of overflowing it. ---- */
@media (max-width:640px){
  .socials{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:6px; width:100%;
  }
  .socials a{ width:100%; height:auto; aspect-ratio:1; }
}

/* ---- the doctor portrait was still being scaled 13% by the
   scroll parallax on phones, which crops the frame ---- */
@media (max-width:860px){
  #dentImg{ transform:none !important; }
}

/* ---- footer columns, desktop ---------------------------------
   Equal-width tracks left the last column's content stranded
   ~300px short of the container edge, because the content sits
   at the start of its track. Sizing tracks to their content and
   distributing with space-between puts the logo hard against the
   left edge, Practice hard against the right, and makes every gap
   between them identical.
   ------------------------------------------------------------ */
@media (min-width:861px){
  .foot-grid{
    grid-template-columns:repeat(4, auto);
    justify-content:space-between;
    /* a floor, so the gaps never collapse on a narrow desktop;
       space-between shares out whatever is left over */
    column-gap:28px;
  }
  .foot-news{ max-width:clamp(210px, 21vw, 300px); }
}

/* ---- mobile footer: social row against the email field --------
   The icons were pinned to the base of their column while the
   form stopped 30px short of its own, so the two blocks sat at
   different heights. Both are now anchored to the base of their
   column and the icon row is given the field's height with its
   icons centred, which puts the two on one line.
   ------------------------------------------------------------ */
@media (max-width:640px){
  /* Anchor the last block of each column to the column's base
     rather than relying on how flex shares out slack. The status
     line is taken out of flow so the form really is last. */
  .foot-brand{ justify-content:flex-start; }
  .socials{ margin-top:auto; min-height:64px; align-content:center; }
  .foot-news{ justify-content:flex-start; position:relative; }
  .news-form{ margin-top:auto; margin-bottom:0; }
  .news-msg{ position:absolute; top:100%; left:0; margin:4px 0 0; min-height:0; }
}

/* ============================================================
   PRACTICE DETAILS, ICONS
   Same marks as the footer contact cards, so the two places that
   carry the address, hours and directions read as one system.
   ============================================================ */
.info-row dt{ display:flex; align-items:center; gap:9px; }
.ir-ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:rgba(181,41,44,.10);
  border:1px solid rgba(181,41,44,.16);
  color:var(--t-500);
}
.ir-ico svg{ display:block; }

/* the rating claims are links now, styled as the text they replaced */
.eyebrow a{ color:inherit; text-decoration:none; }
.eyebrow a:hover{ text-decoration:underline; text-underline-offset:3px; }
.tl-link{ color:inherit; text-decoration:none; }
.tl-link:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .ir-ico{ width:26px; height:26px; }
  .ir-ico svg{ width:15px; height:15px; }
  .info-row dt{ gap:8px; }
}

/* ============================================================
   MOBILE HERO: one full screen
   ============================================================ */
@media (max-width:640px){
  .hero{
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; justify-content:center;
    padding-block:96px 40px;
  }
  .hero-inner{ width:100%; }
}

/* ============================================================
   MOBILE FOOTER RHYTHM
   One gap value between every block: contact cards, the logo and
   newsletter row, the two link columns, the wordmark, and the
   legal line, with the same measure closing the footer.
   ============================================================ */
@media (max-width:640px){
  :root{ --foot-gap:34px; }

  .foot{ padding-block:var(--foot-gap) 0; }
  .foot > .wrap{ display:flex; flex-direction:column; gap:var(--foot-gap); }

  .foot-contact{ margin:0; padding-bottom:0; }
  .foot-grid{ margin:0; row-gap:var(--foot-gap); }
  .foot-wordmark{ margin:0; }
  .foot-bot{
    margin:0;
    padding:0 0 var(--foot-gap);
    line-height:1.6;                /* the site's standard measure */
  }
  .foot-bot a{ padding-block:8px; }
}

/* ============================================================
   MOTION PASS
   Values read out of glowdent.webflow.io's live interaction data
   rather than estimated:

     reveal    opacity 0 -> 1, translateY(100px) -> 0
               1000ms, outQuart, 300ms delay, plays once
               variants: translateX(-100px) 40x, translateY(-100px) 20x,
                         translateX(100px) 15x, scale(0.75) 13x
     hover     500ms ease  (colour, background, border, transform)
     links     colour 0.3s ease, padding-left 0.3s ease
     marquee   x 0 -> -100%, 8s to 15s, linear, infinite

   outQuart is cubic-bezier(0.165, 0.84, 0.44, 1).
   ============================================================ */
:root{
  --mo-dur:1000ms;
  --mo-ease:cubic-bezier(0.165, 0.84, 0.44, 1);   /* outQuart */
  --mo-delay:300ms;
  --mo-rise:100px;
  --mo-hover:500ms;
  --mo-hover-ease:ease;
  --mo-link:0.3s;
}

/* ---- reveal ---- */
.js-on [data-rv]{
  opacity:0;
  transform:translateY(var(--mo-rise));
  transition:opacity var(--mo-dur) var(--mo-ease),
             transform var(--mo-dur) var(--mo-ease);
  transition-delay:var(--rv-delay, var(--mo-delay));
}
.js-on [data-rv].in{ opacity:1; transform:none; }

/* the scale variant, for card surfaces */
/* scale leftovers from the same era, also removed */

/* Direction is carried by the keyframes now, via data-rv-dir. These
   static 100px transforms were left over from the transition-based
   version and were shifting elements before they revealed, which put
   the contact form 100px past the right edge of a phone. */

/* ---- hover: one duration and one curve across the page ---- */
.svc, .syscard, .doc, .rev, .story, .stat, .hcard, .fc, .creds li,
.btn, .nav-cta, .nav-tel, .nav-burger, .drawer-close, .socials a,
.news-form button, .ba-dot, .eyebrow, .doc-spec, .foot-logo,
.credline-row img, .drawer-foot .btn{
  transition-duration:var(--mo-hover);
  transition-timing-function:var(--mo-hover-ease);
}
.svc > figure img, .syscard > figure img, .doc-fig img,
.photostrip figure img, .pf img, .dent-fig img, .so-fig img, .visit-fig img{
  transition:transform var(--mo-hover) var(--mo-hover-ease);
}
.btn .arw, .svc .go, .fq summary i{
  transition-duration:var(--mo-hover);
  transition-timing-function:var(--mo-hover-ease);
}

/* ---- links: the reference's own two transitions ---- */
.nav-links a, .foot ul a, .drawer-nav a, .fq summary,
.foot-bot a, .fc-v a, .rev cite a, .tl-link, .eyebrow a{
  transition:color var(--mo-link) ease, padding-left var(--mo-link) ease;
}

/* ---- marquees run linear and unending ---- */
.photostrip-track{ animation-timing-function:linear; animation-iteration-count:infinite; }

@media (prefers-reduced-motion:reduce){
  .js-on [data-rv],
  .js-on [data-rv].in{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- reveal and hover must not fight over the same property -----
   A card is both revealed and hoverable, and the reveal rule wins on
   specificity, so hovers were inheriting the 1000ms reveal curve.
   Once an element has finished arriving it is marked done and takes
   the hover timing instead.
   ------------------------------------------------------------ */
.js-on [data-rv].in.done{
  --rv-delay:0s;
  transition-duration:var(--mo-hover);
  transition-timing-function:var(--mo-hover-ease);
}

/* the drift engine writes an inline transform on these, so a CSS
   transform reveal can never apply to them: they arrive on opacity */
.js-on [data-par][data-rv]{ transform:none !important; }

/* ============================================================
   REVEALS AS ANIMATIONS
   A transition-based reveal competes with hover for the transform
   and transition-delay properties, which is why hovers were
   inheriting the reveal's curve and stagger. Keyframes occupy
   neither, so the reveal and the hover are fully independent.
   Values unchanged: 1000ms outQuart, 300ms base delay, 100px.
   ============================================================ */
@keyframes rvRise  { from{ opacity:0; transform:translateY(100px);} to{ opacity:1; transform:none; } }
@keyframes rvDown  { from{ opacity:0; transform:translateY(-100px);} to{ opacity:1; transform:none; } }
@keyframes rvLeft  { from{ opacity:0; transform:translateX(-100px);} to{ opacity:1; transform:none; } }
@keyframes rvRight { from{ opacity:0; transform:translateX(100px);} to{ opacity:1; transform:none; } }
@keyframes rvScale { from{ opacity:0; transform:scale(.75);} to{ opacity:1; transform:none; } }
@keyframes rvFade  { from{ opacity:0; } to{ opacity:1; } }

.js-on [data-rv]{
  opacity:0;
  transform:none;                       /* the transform belongs to hover again */
  transition:none;
}
.js-on [data-rv].in{
  animation:rvRise var(--mo-dur) var(--mo-ease) var(--rv-delay, var(--mo-delay)) both;
}

/* the same variants the reference uses, by role */
.js-on .syscard[data-rv].in, .js-on .doc[data-rv].in,
.js-on .stat[data-rv].in, .js-on .rev[data-rv].in,
.js-on .svc[data-rv].in{ animation-name:rvScale; }

.js-on .dent-fig[data-rv].in{ animation-name:rvLeft; }
.js-on .so-fig[data-rv].in, .js-on .visit-fig[data-rv].in,
.js-on .form-card[data-rv].in{ animation-name:rvRight; }
.js-on .hcard[data-rv].in, .js-on .dent-badge[data-rv].in{ animation-name:rvDown; }

/* elements the drift engine owns arrive on opacity only, or the
   inline transform it writes would fight the keyframe */
.js-on [data-par][data-rv].in{ animation-name:rvFade; }

/* hover is now unopposed: restore the reference's 500ms ease */
.js-on [data-rv]{
  transition:box-shadow var(--mo-hover) var(--mo-hover-ease),
             background-color var(--mo-hover) var(--mo-hover-ease),
             border-color var(--mo-hover) var(--mo-hover-ease),
             color var(--mo-hover) var(--mo-hover-ease),
             transform var(--mo-hover) var(--mo-hover-ease);
}
/* during the reveal the keyframe owns the transform; suppress the
   transition for that one second so the two cannot interleave */
.js-on [data-rv].in{ transition-property:box-shadow, background-color, border-color, color; }
.js-on [data-rv].in:hover{ transition-property:box-shadow, background-color, border-color, color, transform; }

@media (prefers-reduced-motion:reduce){
  .js-on [data-rv]{ opacity:1; }
  .js-on [data-rv].in{ animation:none; }
}

/* ============================================================
   HEADING LINES
   Each rendered line rises out from behind its own mask, on the
   same 1000ms outQuart the rest of the page uses, each line
   following the one above it by 120ms.
   ============================================================ */
.js-on .rv-line{ display:block; overflow:hidden; }
.js-on .rv-line > span{
  display:block;
  transform:translateY(110%);
  transition:transform var(--mo-dur) var(--mo-ease);
  transition-delay:var(--ln-delay, 0ms);
  will-change:transform;
}
.js-on .rv-line.in > span{ transform:translateY(0); }
.js-on .rv-line .wd{ font-style:inherit; font-weight:inherit; }

/* a heading that splits into lines must not also fade as one block */
.js-on .sec-head .display[data-rv],
.js-on .bench-head .display[data-rv],
.js-on .premise-copy[data-rv],
.js-on .sec-grid .display[data-rv]{ opacity:1; animation:none; }

/* The marks hold still once they are there: no drift, no hover move.
   They do get one small entrance now, which lives on the span, so the
   row and the image itself stay pinned and only the wrapper lifts. */
.credline-row, .credline-row img{
  animation:none !important;
  transform:none !important;
  opacity:1 !important;
}
.credline-row span{ transform:none; }
.credline-row span:hover, .credline-row img:hover{ transform:none !important; }

@media (prefers-reduced-motion:reduce){
  .js-on .rv-line > span{ transform:none !important; transition:none !important; }
}

/* ============================================================
   CORRECTION: headings are not split
   The reference reveals every heading as one block. What looks
   like a line-by-line reveal in a screen recording is the whole
   heading translating up into view, its top line clearing the
   fold first. Undo the split.
   ============================================================ */
.js-on .rv-line{ display:inline; overflow:visible; }
.js-on .rv-line > span{ display:inline; transform:none !important; transition:none !important; }

/* ============================================================
   REVEAL MIX, matched to the reference's own distribution
   Of 217 reveals it uses: translateY(100px) on ~106, the X
   variants on ~51, translateY(-100px) on ~19 and scale(0.75) on
   just 9. Scale was over-applied here; rise is the default.
   ============================================================ */
.js-on .syscard[data-rv].in, .js-on .doc[data-rv].in,
.js-on .rev[data-rv].in, .js-on .svc[data-rv].in{ animation-name:rvRise; }
.js-on .stat[data-rv].in, .js-on .hcard[data-rv].in{ animation-name:rvScale; }

/* ============================================================
   BUTTON LABEL ROLL AND ICON SLIDE
   Two copies of the label stacked in a clipping box, two copies
   of the icon side by side in another. Hover shifts each stack
   by one unit. 500ms ease, as the reference.
   ============================================================ */
.btn, .nav-cta{ overflow:hidden; }
.btn-label{
  display:block; position:relative;
  overflow:hidden;
  height:1.25em; line-height:1.25em;
}
.btn-label > span{
  display:block; height:1.25em; line-height:1.25em;
  transition:transform var(--mo-hover) var(--mo-hover-ease);
}
.btn:hover .btn-label > span,
.btn:focus-visible .btn-label > span,
.nav-cta:hover .btn-label > span{ transform:translateY(-100%); }

.btn-ico{
  display:flex; flex:0 0 auto;
  overflow:hidden;
  width:15px;
}
.btn-ico svg{
  flex:0 0 100%;
  transition:transform var(--mo-hover) var(--mo-hover-ease);
}
.btn:hover .btn-ico svg,
.btn:focus-visible .btn-ico svg,
.nav-cta:hover .btn-ico svg{ transform:translateX(100%); }

/* the arrow no longer nudges on its own: the slide replaces it */
.btn:hover .arw{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .btn-label > span, .btn-ico svg{ transition:none !important; transform:none !important; }
}

/* ============================================================
   HERO TEXT TICKER
   The reference cycles only the first line of its headline:
   a one-line window over a flex column of phrases, the last of
   which repeats the first so the loop closes invisibly.
   Structure and proportions taken from its DOM: window one line
   tall, four items, step then hold.
   ============================================================ */
.tick{
  display:block;
  overflow:hidden;
  /* a touch taller than the line so ascenders and descenders of the
     neighbouring phrase cannot peek past the mask, with the extra
     pulled back off so the headline's line spacing is unchanged */
  height:1.24em;
  margin-block:-0.12em;
  line-height:1.24em;
}
.tick-track{
  display:flex; flex-direction:column;
  will-change:transform;
  animation:tickRun 9s cubic-bezier(0.16,1,0.3,1) infinite;
}
.tick-track > span{
  display:block;
  height:1.24em; line-height:1.24em;
  flex:0 0 auto;
  white-space:nowrap;
}
/* three phrases plus the repeat: hold each, then step a quarter */
@keyframes tickRun{
  0%,    28%  { transform:translateY(0); }
  33.3%, 61%  { transform:translateY(-25%); }
  66.6%, 94%  { transform:translateY(-50%); }
  100%        { transform:translateY(-75%); }
}
.tick-track > span:nth-child(n+2){ color:inherit; }

@media (prefers-reduced-motion:reduce){
  .tick-track{ animation:none; }
}
/* a phrase must never be clipped: if one is ever longer than the
   column it shrinks to fit rather than losing its tail */
.tick-track > span{ max-width:100%; }

/* ---- ticker scope -------------------------------------------
   At phone width the headline column is 339px and a phrase needs
   ~390px at this size, so the line already wrapped before the
   ticker existed. nowrap turns that wrap into a clipped tail, so
   below this width the approved line stands on its own, exactly
   as it did. The ticker runs where a phrase fits on one line.
   ------------------------------------------------------------ */
@media (max-width:860px){
  .tick{ height:auto; margin-block:0; line-height:inherit; overflow:visible; }
  .tick-track{ animation:none; }
  .tick-track > span{ height:auto; line-height:inherit; white-space:normal; }
  .tick-track > span:nth-child(n+2){ display:none; }
}

/* ============================================================
   FOOTER AT SHORT DESKTOP HEIGHTS
   min-height:100vh only guarantees the footer is never smaller
   than a screen. On a 720px-tall laptop its content came to
   895px, so it grew past one screen. The parts that can give
   now scale with viewport height instead of width alone, so the
   panel closes at one screen on short displays too.
   ============================================================ */
@media (min-width:861px){
  .foot{
    padding-block:clamp(22px, 3.6vh, 48px) clamp(14px, 2vh, 24px);
  }
  .foot-contact .fc{
    min-height:clamp(118px, 21vh, 196px);
  }
  .foot-grid{
    margin-top:clamp(16px, 3.6vh, 46px);
  }
  .foot-wordmark{
    font-size:clamp(3rem, min(17.5vw, 20vh), 15rem);
    margin-block:clamp(8px, 2.6vh, 30px) clamp(6px, 1.6vh, 16px);
  }
  .foot ul{ gap:clamp(2px, 0.9vh, 11px); }
}

/* ============================================================
   PER-ELEMENT REVEAL
   Direction is authored per element via data-rv-dir, and the
   delay per element via --rv-delay, both set from the map in
   app.js. Duration and curve stay the reference's 1000ms
   outQuart throughout.
   ============================================================ */
.js-on [data-rv]{ opacity:0; }
.js-on [data-rv].in{
  animation:rvRise var(--mo-dur) var(--mo-ease) var(--rv-delay, 300ms) both;
}
.js-on [data-rv-dir="rise"].in  { animation-name:rvRise;  }
.js-on [data-rv-dir="drop"].in  { animation-name:rvDown;  }
.js-on [data-rv-dir="left"].in  { animation-name:rvLeft;  }
.js-on [data-rv-dir="right"].in { animation-name:rvRight; }
.js-on [data-rv-dir="scale"].in { animation-name:rvScale; }

/* the drift engine owns the transform on these, so they arrive on
   opacity alone rather than fighting it */
.js-on [data-par][data-rv].in{ animation-name:rvFade; }

@media (prefers-reduced-motion:reduce){
  .js-on [data-rv]{ opacity:1; }
  .js-on [data-rv].in{ animation:none; }
}

/* ============================================================
   MOTION HIERARCHY
   Four tiers, one curve family. The tier decides how far a thing
   travels and how long it takes, so weight reads as importance:
   a headline arrives with authority, a caption simply appears.

     1  OPENING   the hero, on load, masked lines
     2  VOICE     headings and statements
     3  CONTENT   cards, copy, media
     4  DETAIL    chips, dots, captions, stars, small marks

   Entrances use outQuart. Nothing overshoots or bounces: the
   restraint is what keeps it editorial rather than playful.
   ============================================================ */
:root{
  --t1-dur:1150ms;   --t1-rise:120%;
  --t2-dur:1000ms;   --t2-rise:100px;
  --t3-dur:1000ms;   --t3-rise:100px;
  --t4-dur:700px;    /* replaced below, kept for clarity */
}
:root{ --t4-dur:700ms; --t4-rise:18px; }

/* ---- TIER 1: the hero, on load ------------------------------
   Each headline line rises out from behind its own mask, the
   lines following one another. This is the only place a mask
   is used, which is what makes the opening feel authored.
   ------------------------------------------------------------ */
@keyframes lnRise{ from{ transform:translateY(112%); } to{ transform:translateY(0); } }

.js-on .hero h1 .ln{ display:block; overflow:hidden; }
.js-on .hero h1 .ln > span,
.js-on .hero h1 .ln > .tick{
  display:block;
  transform:translateY(112%);
}
.js-on .hero.lit h1 .ln > span,
.js-on .hero.lit h1 .ln > .tick{
  animation:lnRise var(--t1-dur) var(--mo-ease) both;
}
.js-on .hero.lit h1 .ln:nth-child(1) > *{ animation-delay:.18s; }
.js-on .hero.lit h1 .ln:nth-child(2) > *{ animation-delay:.30s; }
.js-on .hero.lit h1 .ln:nth-child(3) > *{ animation-delay:.42s; }

/* the rest of the hero follows the headline in */
.js-on .hero .hero-trustline,
.js-on .hero .hero-desc,
.js-on .hero .hero-actions,
.js-on .hero .hero-cards{ opacity:0; }
.js-on .hero.lit .hero-trustline{ animation:rvRise var(--t2-dur) var(--mo-ease) .06s both; }
.js-on .hero.lit .hero-desc    { animation:rvRise var(--t2-dur) var(--mo-ease) .58s both; }
.js-on .hero.lit .hero-actions { animation:rvRise var(--t2-dur) var(--mo-ease) .70s both; }
.js-on .hero.lit .hero-cards   { animation:rvRight var(--t2-dur) var(--mo-ease) .82s both; }

/* ---- TIER 2: section voice ---------------------------------- */
.js-on [data-rv][data-tier="2"].in{ animation-duration:var(--t2-dur); }

/* the premise statement arrives as a block, then its words light */
.js-on .premise-copy{ opacity:0; }
.js-on .premise-copy.in{
  opacity:1;
  animation:rvRise var(--t2-dur) var(--mo-ease) .2s both;
}

/* ---- TIER 4: detail ----------------------------------------
   Small marks travel a short distance over a shorter time, so
   they settle before the thing they belong to has finished.
   ------------------------------------------------------------ */
@keyframes rvLift{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

.js-on [data-detail]{ opacity:0; }
.js-on [data-detail].in{
  animation:rvLift var(--t4-dur) var(--mo-ease) var(--rv-delay, 0ms) both;
}

@media (prefers-reduced-motion:reduce){
  .js-on .hero h1 .ln > span,
  .js-on .hero h1 .ln > .tick,
  .js-on .hero .hero-trustline, .js-on .hero .hero-desc,
  .js-on .hero .hero-actions, .js-on .hero .hero-cards,
  .js-on .premise-copy, .js-on [data-detail]{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}

/* ============================================================
   MOTION POLISH
   Three changes, one pass.

   CONTAINED  Travel is 36px. The smallest section padding on the
              site is 56px, so an element in motion physically
              cannot reach into the section above or below it.
              Containment is structural, not hoped for.

   SUBTLER    36px instead of 100px, and scale settles from 0.94
              rather than 0.75. The motion reads as weight
              shifting rather than things flying in.

   QUICKER    640ms instead of 1000ms, and the ladder starts at
              60ms instead of 300ms, so content answers the
              scroll almost immediately.

   Only transform and opacity animate, so every frame stays on
   the compositor.
   ============================================================ */
:root{
  --mo-dur:640ms;
  --mo-delay:60ms;
  --mo-rise:36px;
  --t1-dur:820ms;
  --t2-dur:640ms;
  --t3-dur:640ms;
  --t4-dur:420ms;
  --t4-rise:10px;
}

@keyframes rvRise  { from{ opacity:0; transform:translate3d(0,36px,0);} to{ opacity:1; transform:none; } }
@keyframes rvDown  { from{ opacity:0; transform:translate3d(0,-36px,0);} to{ opacity:1; transform:none; } }
@keyframes rvLeft  { from{ opacity:0; transform:translate3d(-36px,0,0);} to{ opacity:1; transform:none; } }
@keyframes rvRight { from{ opacity:0; transform:translate3d(36px,0,0);} to{ opacity:1; transform:none; } }
@keyframes rvScale { from{ opacity:0; transform:scale(.94);} to{ opacity:1; transform:none; } }
@keyframes rvLift  { from{ opacity:0; transform:translate3d(0,10px,0);} to{ opacity:1; transform:none; } }

/* the hero mask is clipped by its own line box, so it cannot escape
   either; it only needs to be quicker and less far */
@keyframes lnRise{ from{ transform:translate3d(0,104%,0); } to{ transform:translate3d(0,0,0); } }
.js-on .hero h1 .ln > span,
.js-on .hero h1 .ln > .tick{ transform:translate3d(0,104%,0); }
.js-on .hero.lit h1 .ln:nth-child(1) > *{ animation-delay:.10s; }
.js-on .hero.lit h1 .ln:nth-child(2) > *{ animation-delay:.19s; }
.js-on .hero.lit h1 .ln:nth-child(3) > *{ animation-delay:.28s; }
.js-on .hero.lit .hero-trustline{ animation-delay:.04s; }
.js-on .hero.lit .hero-desc    { animation-delay:.38s; }
.js-on .hero.lit .hero-actions { animation-delay:.47s; }
.js-on .hero.lit .hero-cards   { animation-delay:.56s; }

/* promoted only while a thing is actually waiting to move, then
   released, so we do not hold layers for the life of the page */
.js-on [data-rv]:not(.in),
.js-on [data-detail]:not(.in){ will-change:opacity, transform; }
.js-on [data-rv].in.settled,
.js-on [data-detail].in.settled{ will-change:auto; }

/* ============================================================
   FIRST SCREEN, MATCHED ACROSS DEVICES
   On desktop the hero occupies 80vh, so the credential marks sit
   inside the first screen with roughly 48px to spare. Mobile was
   at a full 100vh, which pushed the marks 124px below the fold.

   The hero is now 80vh everywhere and the strip is sized in vh,
   so the same relationship holds at any screen height rather
   than only at the one it was tuned on.
   ============================================================ */
@media (max-width:640px){
  .hero{
    min-height:80vh;
    min-height:80dvh;
    padding-block:clamp(68px, 8.5vh, 96px) clamp(10px, 1.6vh, 34px);
  }
  /* the hero's own stack tightens with the viewport, not with a
     fixed pixel guess, so a short phone does not overflow */
  .hero-body{ gap:clamp(12px, 2.2vh, 20px) 12px; }
  .hero .d-xl{ font-size:clamp(34px, 6vh, 48px); }
  .hero-desc{ font-size:clamp(16px, 2.2vh, 19px); }
  .hero-actions .btn{ min-height:clamp(46px, 6.2vh, 54px); }

  /* the strip that must land inside that first screen */
  .credline{ padding-block:clamp(14px, 2vh, 36px) clamp(20px, 4.2vh, 36px); }
  .credline-lead{ margin-bottom:clamp(8px, 1.2vh, 18px); }
  .credline-row img{ height:clamp(24px, 3.6vh, 32px); }
  .credline-row span:nth-child(1) img,
  .credline-row span:nth-child(4) img{ height:clamp(21px, 3.2vh, 28px); }
}
/* the trustline had come to rest against the nav; take the room back
   from the card's own copy rather than from the first-screen budget */
@media (max-width:640px){
  .hero{ padding-block:clamp(80px, 9.8vh, 96px) clamp(10px, 1.6vh, 34px); }
  .hcard{ padding:12px 13px 13px; }
  .hcard p{ font-size:12px; line-height:1.34; margin-top:5px; }
  .hcard-n{ font-size:1.75rem; margin-top:4px; }
  .hcard-label{ line-height:1.25; }
}


/* ============================================================
   QUICKER, AND THE SAME SPEED ON A PHONE

   Durations come down about 20%, and the stagger starts sooner,
   so a section answers the scroll rather than trailing it.

   The phone was the slower of the two, and not because its
   numbers differed: on the desktop Lenis damps the wheel, so
   content drifts into view and a 640ms reveal has time to
   finish. A touch flick has no damping, so the same reveal was
   still running after the element had arrived. The lead time is
   widened on small screens instead (see app.js), which is what
   actually equalises them.
   ============================================================ */
:root{
  --mo-dur:520ms;
  --mo-delay:40ms;
  --t1-dur:700ms;
  --t2-dur:520ms;
  --t3-dur:520ms;
  --t4-dur:340ms;
}
.js-on .hero.lit h1 .ln:nth-child(1) > *{ animation-delay:.08s; }
.js-on .hero.lit h1 .ln:nth-child(2) > *{ animation-delay:.15s; }
.js-on .hero.lit h1 .ln:nth-child(3) > *{ animation-delay:.22s; }
.js-on .hero.lit .hero-trustline{ animation-delay:.03s; }
.js-on .hero.lit .hero-desc    { animation-delay:.30s; }
.js-on .hero.lit .hero-actions { animation-delay:.37s; }
.js-on .hero.lit .hero-cards   { animation-delay:.44s; }


/* ============================================================
   MOBILE HERO

   The type was sized in vh, so it answered the height of the
   screen and ignored its width. On a 373px phone that put the
   headline at 45px, "Where the hardest" wrapped onto a second
   line, and the whole first screen stretched far enough to push
   the credential marks 20px below the fold.

   "Where the hardest" needs 8.04px of width for every 1px of
   font-size, so the largest size that sets it on one line is
   (width - gutters) / 8.04. That is what the calc below tracks,
   with roughly 4% in hand, capped at 44px so a large phone does
   not overshoot the desktop scale.
   ============================================================ */
@media (max-width:640px){
  .hero .d-xl{
    font-size:clamp(30px, calc(11.9vw - 4.4px), 44px);
    line-height:1.03;
  }
  .hero-body{ gap:clamp(12px, 2vh, 18px) 12px; }
  .hero-desc{ font-size:clamp(15.5px, 4.3vw, 17px); line-height:1.42; }

  /* the card drove the height of the button row; bring the two
     columns closer to the same height */
  .hcard{ padding:11px 12px 12px; }
  .hcard-label{ font-size:10.5px; line-height:1.22; }
  .hcard-n{ font-size:1.6rem; margin-top:3px; }
  .hcard p{ font-size:11.5px; line-height:1.32; margin-top:4px; }

  .credline{ padding-block:clamp(13px, 1.8vh, 30px) clamp(18px, 3.6vh, 32px); }
  .credline-lead{ margin-bottom:clamp(7px, 1vh, 14px); font-size:10.5px; }
}


/* ============================================================
   MOBILE FOOTER, COMPACT

   1041px on a 759px screen, so it ran to one and a third
   screens. The rhythm stays the one that was asked for, every
   block separated by the same gap, but the gap is 24px instead
   of 34px and the two odd ones are brought into line: the link
   columns carried an extra 42px of their own padding, and the
   last line sat 45px off the bottom.

   The link rows lose the 45px touch height they did not need at
   this size, which is where most of the 200px comes from.
   ============================================================ */
@media (max-width:640px){
  /* the wrap is a flex column and its gap is the rhythm, so every
     block is separated by one value; margins here would stack on top
     of it and were what made three of the gaps 58px */
  .foot .wrap{ gap:24px; }
  .foot{ padding-block:24px 24px; }
  .foot .fc{ padding:10px 9px 11px; }
  .foot .fc-v{ line-height:1.34; }
  .foot-grid{ margin-top:0; padding-bottom:0; row-gap:24px; }
  .foot-grid ul li{ line-height:1.25; }
  .foot-grid ul li a{ padding-block:6px; min-height:0; }
  .foot-wordmark{ margin-block:0; }
  .foot-bot{ padding-block:0; }
  .foot-bot span{ line-height:1.45; }
}

/* ── short phones ─────────────────────────────────────────────
   The width-driven type fixed the wrapping, but a 640px-tall
   screen still has 80px less to work with than the phone this
   was tuned on. The joints give way first, then the smallest
   copy, so the headline keeps its scale.
   ──────────────────────────────────────────────────────────── */
@media (max-width:640px) and (max-height:700px){
  .hero-body{ column-gap:10px; }
  .hero-desc{ font-size:15px; line-height:1.36; }
  .hcard{ padding:10px 11px 11px; }
  .hcard p{ font-size:11px; line-height:1.3; margin-top:3px; }
  .hcard-n{ font-size:1.45rem; }
  .hero-actions .btn{ min-height:44px; }
  .credline{ padding-block:10px 14px; }
  .credline-lead{ margin-bottom:5px; font-size:10px; }
  .credline-row img{ height:22px; }
  .credline-row span:nth-child(1) img,
  .credline-row span:nth-child(4) img{ height:19px; }
}

/* The label roll clips to a single line box by design, so a label that
   wraps loses everything after the first line: at 373px "Free
   Consultation" needed 109px inside a 109px box and tipped onto a
   second line, leaving the button reading "Free". It never wraps now. */
.btn-label, .btn-label > span, .nav-cta .btn-label > span{ white-space:nowrap; }

/* the longest label on the page, in the narrowest pill; give the text
   back the room the padding was holding */
@media (max-width:640px){
  .btn{ padding-inline:10px; }
  .form-card .btn{ font-size:12.4px; letter-spacing:.01em; }
}


/* Promoting every pending reveal meant ~124 compositor layers alive at
   once on a phone before a single one had moved. Animating transform and
   opacity promotes the element for the duration anyway, so the hint is
   left to the browser and the layers are created as they are needed. */
.js-on [data-rv]:not(.in),
.js-on [data-detail]:not(.in){ will-change:auto; }

/* ============================================================
   THE GOOGLE REVIEWS LINK READS AS A LINK

   An underline would fight the typography, so it takes the
   convention for "this opens somewhere else": a small arrow
   leaving the corner. It inherits the colour through a mask,
   so it stays correct on the dark hero and on the light
   section alike, and it steps out on hover.
   ============================================================ */
:root{
  --ext-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7.5 7.5 2.5M4 2.5h3.5V6' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
a[href*="search.google.com"]{ text-decoration:none; }
a[href*="search.google.com"]::after{
  content:"";
  display:inline-block;
  width:.62em; height:.62em;
  margin-left:.32em;
  vertical-align:baseline;
  background-color:currentColor;
  -webkit-mask:var(--ext-arrow) no-repeat center / contain;
          mask:var(--ext-arrow) no-repeat center / contain;
  transition:transform .28s var(--mo-ease);
}
a[href*="search.google.com"]:hover::after{ transform:translate(1.5px, -1.5px); }


/* ============================================================
   MOBILE HERO, SECOND PASS

   The first line cycles on the phone as it does on the desktop.
   That only works if every phrase sets on one line, and the
   longest of the three is "Where the complex" at 8.49px of width
   for each 1px of font-size, so the scale now tracks that phrase
   rather than "Where the hardest" at 8.08.
   ============================================================ */
@media (max-width:640px){
  .hero .d-xl{ font-size:clamp(28px, calc(11.43vw - 4.1px), 44px); }

  .tick{ height:1.24em; margin-block:-0.12em; line-height:1.24em; overflow:hidden; }
  .tick-track{ animation:tickRun 9s cubic-bezier(0.16,1,0.3,1) infinite; }
  .tick-track > span{ display:block; height:1.24em; line-height:1.24em; white-space:nowrap; }
  .tick-track > span:nth-child(n+2){ display:block; }

  /* one line, and set a little lower off the nav */
  .hero-trustline{ margin-top:10px; gap:8px; font-size:clamp(10.5px, 3.2vw, 14px); }
  .hero-trustline .stars{ font-size:clamp(11px, 3.3vw, 15px); letter-spacing:.02em; }
  .tl-link{ font-size:inherit; white-space:nowrap; }

  /* the description belongs to the headline, so it sits closer to it */
  .hero-desc{ margin-top:12px; }
}

/* ============================================================
   THE FIRST SCREEN IS ONE SCREEN

   The hero and the credential strip are now a single flex column
   one viewport tall. The hero takes the height its own spacing
   asks for and the strip absorbs whatever is left, so the rule
   under the four marks lands on the fold at any size rather than
   at one height it was tuned on.

   svh, not dvh: the small viewport is what a phone shows with its
   address bar visible, which is the state the page loads in, and
   unlike dvh it does not resize the hero while you scroll.
   ============================================================ */
.first-screen{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
}
/* On a wide screen the strip keeps the height its own content asks for
   and the hero takes whatever is left, so a short laptop shortens the
   hero rather than pushing the rule past the fold. The hero's 80vh floor
   is released here for the same reason. */
.first-screen > .hero{ flex:1 1 auto; min-height:0; }
.first-screen > .credline{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* On a phone it is the other way round: the hero is exactly as tall as
   its rhythm needs and the strip absorbs the remainder. */
@media (max-width:640px){
  .first-screen > .hero{ flex:0 0 auto; }
  .first-screen > .credline{ flex:1 1 auto; }
}
.first-screen > .credline > .wrap{ width:100%; }


/* ============================================================
   MOBILE HERO RHYTHM

   Two measures, used consistently.

   A, the outer measure, is the room the hero keeps at its edges:
   between the menu and the trust line at the top, and between the
   card and the bottom of the photograph.

   C, the inner measure, separates the blocks: trust line to
   headline, and description to the card.

   The description is deliberately tighter than either, because it
   belongs to the headline above it rather than standing apart.
   ============================================================ */
@media (max-width:640px){
  .hero{
    --hs-a:clamp(26px, 6.4vh, 60px);
    --hs-c:clamp(17px, 4.3vh, 40px);
    --hs-t:clamp(9px, 1.9vh, 19px);
    --nav-h:71px;

    min-height:0;
    padding-block:calc(var(--nav-h) + var(--hs-a)) var(--hs-a);
  }

  .hero-inner{ display:flex; flex-direction:column; gap:var(--hs-c); }
  .hero-trustline{ margin:0; }

  /* h1, description, buttons and card are all direct grid items,
     because .hero-left is display:contents. Zero the row gap and
     let each one carry the measure it needs. */
  .hero-body{ row-gap:0; align-items:start; }
  .hero h1{ margin:0; }
  .hero-desc{ margin-top:var(--hs-t); margin-bottom:0; }
  .hero .hero-actions{ margin-top:var(--hs-c); align-self:start; }
  .hero-cards{ margin-top:var(--hs-c); }

  /* the headline goes as large as the longest phrase allows, which
     is "Where the complex" on one line */
  .hero .d-xl{ font-size:clamp(28px, calc(11.8vw - 4.3px), 46px); }
}


/* ============================================================
   THE FOUR MARKS ARRIVE

   They were deliberately still. A small lift, one after another,
   is enough to acknowledge them without the strip becoming a
   piece of motion in its own right.
   ============================================================ */
@keyframes markLift{
  from{ opacity:0; transform:translate3d(0,9px,0); }
  to  { opacity:1; transform:none; }
}
.js-on [data-marks] > span{ opacity:0; }
.js-on [data-marks].in > span{
  animation:markLift 460ms var(--mo-ease) both;
}
.js-on [data-marks].in > span:nth-child(1){ animation-delay:40ms; }
.js-on [data-marks].in > span:nth-child(2){ animation-delay:110ms; }
.js-on [data-marks].in > span:nth-child(3){ animation-delay:180ms; }
.js-on [data-marks].in > span:nth-child(4){ animation-delay:250ms; }
@media (prefers-reduced-motion:reduce){
  .js-on [data-marks] > span{ opacity:1; animation:none; }
}


/* ── short phones, the measures come down with the screen ─────
   Declared after the rhythm block so these win: same selector,
   so it is source order that decides. At 640px tall the outer
   measure is 21px and the inner 14px, which is what lets the
   whole first screen still finish on the fold.
   ──────────────────────────────────────────────────────────── */
@media (max-width:640px) and (max-height:700px){
  .hero{
    --hs-a:clamp(16px, 3.2vh, 26px);
    --hs-c:clamp(11px, 2.2vh, 17px);
    --hs-t:clamp(6px, 1.2vh, 10px);
  }
}

/* ── short laptops ────────────────────────────────────────────
   A 900px-tall window is untouched, which is where the desktop
   design was signed off. Below 820px the hero has to give back
   what the strip needs, or the rule under the marks falls past
   the fold: the joints go first, then the display size.
   ──────────────────────────────────────────────────────────── */
@media (min-width:861px) and (max-height:820px){
  .hero{ padding-block:clamp(78px, 11.8vh, 108px) clamp(26px, 4.8vh, 50px); }
  .hero .d-xl{ font-size:min(70.4px, 8.6vh); }
  .hero .hero-actions{ margin-top:clamp(14px, 2.6vh, 34px); }
  .hero-desc{ margin-top:clamp(8px, 1.6vh, 17px); }
}

/* ============================================================
   THREE SYSTEMS, ONE PER ROW ON A PHONE

   Three across on a 373px screen left each card 108px wide and
   forced the copy to 11px. Each card now takes a full row with
   its photograph on the left.

   The photograph floats rather than holding a grid column. As a
   strict second column the copy was down to 153px of measure,
   three or four words a line, and the picture stretched to the
   depth of the card, which cropped a smile into a 1:2.3 strip.
   Floated, the heading and the problem sit beside it and the
   long paragraph runs on underneath at full width.
   ============================================================ */
@media (max-width:640px){
  .syscards{
    grid-template-columns:1fr;
    gap:clamp(16px, 4vw, 26px);
  }
  .syscard{
    display:block;
    padding:12px 13px 14px;
  }
  .syscard::after{ content:""; display:block; clear:both; }

  .syscard > figure{
    float:left;
    width:clamp(124px, 36vw, 152px);
    height:clamp(132px, 38vw, 164px);
    /* the three-across ratio would otherwise drive the box */
    aspect-ratio:auto;
    min-width:0;
    margin:2px 14px 9px 0;
  }

  /* stacked, the before and after each get the full width of the
     picture instead of 62px halves */
  .syscard-pair{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
    gap:5px;
  }
  .syscard-pair > span{ min-width:0; }
  /* two stacked frames need more depth than one, or each is 68px */
  figure.syscard-pair{ height:clamp(152px, 44vw, 188px); }
  .syscard-pair em{ font-size:9px; padding:3px 7px; letter-spacing:.06em; }

  .syscard-n{ font-size:11px; }
  .syscard h3{ font-size:15.5px; line-height:1.24; margin-top:5px; }
  .syscard h3 sup{ font-size:.46em; }
  .syscard-prob{ font-size:12.5px !important; line-height:1.4; margin-top:8px; }
  .syscard p:last-child{ font-size:12.5px !important; line-height:1.5; margin-top:8px; }
}