/* =====================================================
   MILLER ORTHODONTICS — DESIGN SYSTEM v2
   Brand: teal / white / deep pine (from m2ortho.com identity)
   Type:  Fraunces (display) + Outfit (body)
   Signature: the "ridgeline smile" — one stroke that reads
   as both a Park City ridge and a smile curve. It appears in
   the eyebrow arc, the hero underline, the hero→page ridge
   divider, and the final CTA. Everything else stays quiet.
   ===================================================== */
:root{
  --white:#FFFFFF;
  --snow:#FFFFFF;
  --cool-gray:#F2F7F8;          /* glacier mist section tint */
  --soft-gray:#E3EBEC;
  --line:#E1EAEB;
  --charcoal:#1C3236;           /* deep pine-slate — headings & dark sections */
  --dark:#0C1F22;               /* deepest pine — utility bar, footer, hero fallback */
  --ink:#2B3E42;                /* body text */
  --slate:#5C6E72;              /* secondary text */
  --teal:#2EC4C6;
  --teal-dark:#128F92;
  --teal-light:#E6F9F9;
  --star:#F2B01E;               /* review-star convention only */
  --radius:24px;
  --radius-sm:16px;
  --shadow-sm:0 2px 10px rgba(12,31,34,.06);
  --shadow:0 14px 40px rgba(12,31,34,.09);
  --shadow-lg:0 30px 70px rgba(12,31,34,.16);
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1180px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Outfit", -apple-system, "Segoe UI", sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--snow);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--teal-dark);text-decoration:none;transition:color .18s ease}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--teal-dark);outline-offset:3px;border-radius:4px}
::selection{background:var(--teal-light);color:var(--charcoal)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;padding:12px 20px;z-index:2000;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.section{padding:clamp(84px,9vw,120px) 0}
.section--tint{background:var(--cool-gray)}
.section--dark{background:linear-gradient(170deg,var(--charcoal) 0%,var(--dark) 100%);color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:600;line-height:1.12;
  color:var(--charcoal);letter-spacing:-.018em;text-wrap:balance;
}
.section--dark h2,.section--dark h3{color:#fff}
h1{font-size:clamp(2.5rem,5.4vw,4.2rem)}
h2{font-size:clamp(2rem,3.7vw,2.9rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
p{max-width:70ch}
.lead{font-size:clamp(1.14rem,1.6vw,1.28rem);line-height:1.65;color:var(--slate);max-width:620px}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-dark);margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:12px;flex-shrink:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 12"><path d="M1 3 Q9 11 17 6 Q25 1 33 9" fill="none" stroke="%232EC4C6" stroke-width="2.4" stroke-linecap="round"/></svg>') no-repeat center/contain}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin:16px auto 0}
.section-head{margin-bottom:clamp(48px,6vw,68px)}
.section-head.center{max-width:760px;margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:16px 32px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-decoration:none!important;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .18s ease, color .18s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:var(--charcoal);color:#fff;box-shadow:0 10px 26px rgba(12,31,34,.22)}
.btn-primary:hover{background:var(--dark);box-shadow:0 16px 34px rgba(12,31,34,.28)}
.btn-teal{background:var(--teal);color:var(--dark);box-shadow:0 10px 26px rgba(46,196,198,.32)}
.btn-teal:hover{background:var(--teal-dark);color:#fff;box-shadow:0 16px 34px rgba(18,143,146,.35)}
.btn-outline{background:transparent;color:var(--charcoal);border-color:currentColor}
.btn-outline:hover{background:var(--teal-light);border-color:var(--teal-dark);color:var(--teal-dark)}
.section--dark .btn-outline{color:#fff;border-color:rgba(255,255,255,.6)}
.section--dark .btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn-ghost{background:var(--teal-light);color:var(--charcoal)}
.btn-ghost:hover{background:#D7F4F4}
.btn-sm{padding:11px 22px;font-size:.92rem}

/* ---------- Utility bar ---------- */
.utility{background:var(--dark);color:#B9CDD0;font-size:.84rem;padding:8px 0;letter-spacing:.01em}
.utility .container{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between}
.utility a{color:#fff;font-weight:500}
.utility a:hover{color:var(--teal);text-decoration:none}
.utility .badge-new{color:var(--teal);font-weight:600}
.utility-links{display:flex;gap:28px;flex-wrap:wrap;align-items:center}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.header.scrolled{box-shadow:0 8px 30px rgba(12,31,34,.08);border-color:var(--line);background:rgba(255,255,255,.94)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;transition:padding .25s ease}
.header.scrolled .header-inner{padding:10px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none!important}
.logo-mark{width:44px;height:44px;flex-shrink:0;transition:transform .3s var(--ease)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05)}
.logo-text{line-height:1.1}
.logo-text strong{display:block;font-family:var(--font-display);font-size:1.26rem;color:var(--charcoal);font-weight:600}
.logo-text span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-dark);font-weight:600}
.nav{display:flex;align-items:center;gap:6px}
.nav > ul{display:flex;list-style:none;gap:6px;align-items:center}
.nav a.nav-link{
  display:block;padding:10px 13px;color:var(--ink);font-weight:500;font-size:.95rem;
  text-decoration:none!important;position:relative;white-space:nowrap;
}
.nav a.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav .has-sub > a.nav-link::after{right:30px}
.nav a.nav-link:hover{color:var(--charcoal)}
.nav a.nav-link:hover::after,.has-sub:focus-within > a.nav-link::after{transform:scaleX(1)}
.has-sub{position:relative}
/* Invisible hover bridge: keeps the parent li hovered while the cursor
   crosses the visual gap between the link and the dropdown */
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.submenu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:246px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s var(--ease) .18s, transform .2s var(--ease) .18s, visibility 0s linear .38s;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.nav .has-sub > a.nav-link{
  padding-right:32px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%235C6E72" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 13px center/9px 5px;
}

.submenu a{display:block;padding:10px 14px;border-radius:10px;color:var(--ink);font-size:.92rem;text-decoration:none!important;transition:background .15s ease,color .15s ease,padding-left .2s var(--ease)}
.submenu a:hover{background:var(--teal-light);color:var(--charcoal);padding-left:18px}
.submenu .sub-child a{padding-left:30px;font-size:.88rem;color:var(--slate)}
.submenu .sub-child a::before{content:"↳ ";color:var(--teal)}
.submenu .sub-child a:hover{padding-left:34px}
/* Divider before the secondary items (Early Treatment etc.) */
.submenu .sub-rule a{border-top:1px solid var(--line);border-radius:0;margin-top:8px;padding-top:13px}
/* Second-level flyout: "Invisalign & Clear Aligners" opens its own panel to the side */
.submenu .has-fly{position:relative}
.submenu .has-fly > a{
  padding-right:34px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path d="M1 1l4 4-4 4" fill="none" stroke="%235C6E72" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center/5px 9px;
}
/* Invisible hover bridge across the gap to the flyout */
.submenu .has-fly::before{content:"";position:absolute;left:100%;top:0;width:14px;height:100%}
.flyout{
  position:absolute;left:calc(100% + 8px);top:-10px;min-width:226px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateX(8px);
  transition:opacity .2s var(--ease) .14s, transform .2s var(--ease) .14s, visibility 0s linear .34s;
}
.has-fly:hover .flyout,.has-fly:focus-within .flyout{
  opacity:1;visibility:visible;transform:translateX(0);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.flyout a{display:block;padding:10px 14px;border-radius:10px;color:var(--ink);font-size:.92rem;text-decoration:none!important;transition:background .15s ease,color .15s ease,padding-left .2s var(--ease)}
.flyout a:hover{background:var(--teal-light);color:var(--charcoal);padding-left:18px}
.header-cta{display:flex;align-items:center;gap:14px}
.header-cta .btn{white-space:nowrap}
.header-phone{font-weight:600;color:var(--charcoal);white-space:nowrap}
.header-phone:hover{color:var(--teal-dark);text-decoration:none}
.menu-toggle{display:none;background:none;border:2px solid var(--charcoal);border-radius:12px;padding:8px 14px;font-weight:600;font-family:var(--font-body);color:var(--charcoal);cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.hero-video-wrap{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(242,247,248,1) 0%, rgba(242,247,248,0) 18%),
    linear-gradient(98deg, rgba(12,31,34,.82) 0%, rgba(12,31,34,.5) 46%, rgba(12,31,34,.18) 78%, rgba(18,143,146,.14) 100%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,700px);padding:clamp(96px,11vw,150px) 0 clamp(120px,12vw,170px)}
.hero h1{color:#fff}
.hero h1 .accent{position:relative;white-space:nowrap;color:#fff}
.hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:14px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 14" preserveAspectRatio="none"><path d="M2 4 Q60 16 100 8 Q150 -2 198 10" fill="none" stroke="%232EC4C6" stroke-width="4" stroke-linecap="round"/></svg>') no-repeat center/100% 100%;
}
.hero .eyebrow{color:var(--teal)}
.hero .lead{margin:24px 0 8px;color:#E8F1F2;max-width:600px}
.hero-tagline{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  color:#9FE9EA;font-size:1.05rem;margin:0 0 34px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.trust-badges{display:flex;flex-wrap:wrap;gap:10px;max-width:640px}
.trust-badges li{
  list-style:none;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;
  padding:8px 16px;font-size:.84rem;font-weight:500;color:#EFF7F8;
}
.trust-badges li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0}
.hero-card{
  position:relative;z-index:2;display:inline-flex;gap:14px;align-items:center;
  background:rgba(255,255,255,.96);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:14px 24px;margin-top:34px;
}
.hero-card .stars{color:var(--star);font-size:1rem;letter-spacing:2px}
.hero-card strong{display:block;font-size:.95rem;color:var(--charcoal)}
.hero-card span{font-size:.8rem;color:var(--slate)}

/* Hero entrance — gentle staggered rise on load */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-inner > div > *{animation:heroRise .8s var(--ease) both}
.hero-inner > div > *:nth-child(1){animation-delay:.05s}
.hero-inner > div > *:nth-child(2){animation-delay:.14s}
.hero-inner > div > *:nth-child(3){animation-delay:.23s}
.hero-inner > div > *:nth-child(4){animation-delay:.3s}
.hero-inner > div > *:nth-child(5){animation-delay:.38s}
.hero-inner > div > *:nth-child(6){animation-delay:.46s}
.hero-inner > div > *:nth-child(7){animation-delay:.54s}
.hero-inner > div > *:nth-child(8){animation-delay:.62s}

.hero-mobile-video{display:none}
.ridgeline{display:block;width:100%;height:56px;color:var(--cool-gray);position:relative;z-index:2;margin-top:-56px}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  .hero-video-wrap{background:url('assets/images/miller-ski-poster.jpg') center/cover no-repeat}
}

/* ---------- Media frames & placeholders ---------- */
.media-frame{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/4.6;background:linear-gradient(160deg,var(--teal-light),var(--soft-gray));
  position:relative;
}
.feature-media{position:relative}
.feature-media::before{
  content:"";position:absolute;inset:26px -18px -18px 26px;border-radius:var(--radius);
  background:radial-gradient(120% 120% at 30% 20%, var(--teal-light) 0%, rgba(230,249,249,0) 70%);
  z-index:-1;
}
.placeholder-label{
  position:absolute;inset:auto 16px 16px 16px;background:rgba(12,31,34,.82);color:#fff;
  font-size:.78rem;padding:10px 14px;border-radius:12px;line-height:1.45;
  backdrop-filter:blur(4px);
}

/* ---------- Stats (floating band that overlaps the hero) ---------- */
.stats-band{padding:0 0 clamp(76px,8vw,104px)}
.stats-band .stats{margin-top:-64px;position:relative;z-index:3}
.stats{
  display:grid;grid-template-columns:repeat(6,1fr);
  background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.stat{
  padding:32px 18px;text-align:center;position:relative;
  transition:background .2s ease;
}
.stat + .stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.stat:hover{background:var(--cool-gray)}
.stat .icon{width:38px;height:38px;margin:0 auto 12px;color:var(--teal-dark);transition:transform .3s var(--ease)}
.stat:hover .icon{transform:translateY(-3px)}
.stat strong{display:block;font-family:var(--font-display);font-size:1.45rem;color:var(--charcoal);line-height:1.2}
.stat span{font-size:.82rem;color:var(--slate);line-height:1.5;display:block;margin-top:4px}

/* ---------- Split / intro sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,72px);align-items:center}
.split .media-frame{aspect-ratio:4/3.2}
.checklist{list-style:none;margin-top:24px;display:grid;gap:13px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:var(--slate)}
.checklist li::before{
  content:"✓";flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--teal-light);color:var(--teal-dark);font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;margin-top:3px;
}

/* ---------- Doctors ---------- */
.doctors{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.doctor-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.doctor-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.doctor-photo{aspect-ratio:16/10;background:linear-gradient(150deg,var(--teal-light),#F4FBFB);position:relative}
.doctor-body{padding:32px 34px 36px}
.doctor-body h3{margin-bottom:4px}
.doctor-role{color:var(--teal-dark);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.doctor-body p{color:var(--slate);font-size:.98rem;margin-bottom:22px}
/* Full bio layout: sticky portrait beside long-form credentials */
.doctor-full{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,4vw,54px);
  align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-sm);margin-bottom:34px;
}
.doctor-full:last-child{margin-bottom:0}
.doctor-full .doctor-photo{border-radius:var(--radius);position:sticky;top:104px;aspect-ratio:4/5}
.doctor-full .doctor-body{padding:0}
.doctor-full .doctor-body h4{margin-top:26px;margin-bottom:8px;font-size:1.02rem;color:var(--charcoal)}
.doctor-full .doctor-body p{margin-bottom:16px;line-height:1.72}
.doctor-full--flip{direction:rtl}
.doctor-full--flip > *{direction:ltr}
@media (max-width:900px){
  .doctor-full{grid-template-columns:1fr}
  .doctor-full .doctor-photo{position:static;aspect-ratio:16/10}
  .doctor-full--flip{direction:ltr}
}

/* ---------- Treatment cards ---------- */
.tx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tx-grid.tx-grid--3{grid-template-columns:repeat(3,1fr)}
.tx-link{margin-top:16px;font-weight:600;color:var(--teal-dark);font-size:.92rem;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.tx-link::after{content:"→";transition:transform .2s var(--ease)}
.tx-card:hover .tx-link::after{transform:translateX(4px)}
.tx-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:30px 26px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.tx-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-dark));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.tx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.tx-card:hover::before{transform:scaleX(1)}
.tx-icon{
  width:54px;height:54px;border-radius:999px;
  background:linear-gradient(150deg,var(--teal-light),#fff);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--teal-dark);
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.tx-card:hover .tx-icon{background:var(--teal);color:var(--dark);transform:scale(1.06)}
.tx-icon svg{width:26px;height:26px}
.tx-card h3{font-size:1.16rem}
.tx-card p{color:var(--slate);font-size:.93rem;flex:1;line-height:1.6}
.tx-card a{font-weight:600;font-size:.92rem;color:var(--charcoal);display:inline-flex;align-items:center;gap:6px}
.tx-card a::after{content:"→";transition:transform .25s var(--ease)}
.tx-card a:hover{color:var(--teal-dark);text-decoration:none}
.tx-card a:hover::after{transform:translateX(4px)}
.tx-card:focus-within{box-shadow:var(--shadow);outline:3px solid var(--teal);outline-offset:2px}

/* ---------- Feature rows (lingual / braces / invisalign / aligners) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,76px);align-items:center}
.feature.flip .feature-media{order:2}
.feature h2{margin-bottom:6px}
.feature h3{color:var(--teal-dark);font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px}
.feature p{color:var(--slate);margin-bottom:16px;max-width:56ch}
.feature .btn{margin-top:10px}
.feature-media .media-frame{aspect-ratio:4/3}

/* ---------- Why choose (dark) ---------- */
.section--dark{position:relative;overflow:hidden}
.section--dark::before{
  content:"";position:absolute;top:-30%;right:-15%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(46,196,198,.12) 0%, rgba(46,196,198,0) 70%);
  pointer-events:none;
}
.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px}
.benefit{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);padding:24px 20px;
  backdrop-filter:blur(4px);
  transition:border-color .25s ease, background .25s ease, transform .3s var(--ease);
}
.benefit:hover{border-color:rgba(46,196,198,.55);background:rgba(46,196,198,.07);transform:translateY(-4px)}
.benefit .b-icon{width:34px;height:34px;color:var(--teal);margin-bottom:14px}
.benefit strong{display:block;color:#fff;font-size:.98rem;margin-bottom:6px}
.benefit span{color:#AFC5C8;font-size:.85rem;line-height:1.55;display:block}

/* ---------- Gallery ---------- */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.filter-btn{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 22px;
  font-family:var(--font-body);font-weight:500;font-size:.9rem;color:var(--slate);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s var(--ease);
}
.filter-btn:hover{border-color:var(--teal-dark);color:var(--teal-dark);transform:translateY(-1px)}
.filter-btn[aria-pressed="true"]{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ba-card{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ba-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ba-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ba-imgs div{aspect-ratio:1/1;background:linear-gradient(150deg,var(--soft-gray),var(--teal-light));position:relative}
.ba-tag{position:absolute;top:10px;left:10px;background:rgba(12,31,34,.85);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.ba-meta{padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.ba-meta strong{color:var(--charcoal);font-size:.95rem}
.ba-meta span{font-size:.8rem;color:var(--teal-dark);font-weight:600}

/* ---------- Reviews ---------- */
.review-track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{
  background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px;position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.review-card::before{
  content:"“";position:absolute;top:6px;right:22px;
  font-family:var(--font-display);font-size:4.6rem;line-height:1;color:var(--teal-light);
  pointer-events:none;
}
.review-card .stars{color:var(--star);letter-spacing:3px}
.review-card p{color:var(--slate);font-size:.95rem;flex:1;line-height:1.65}
.review-card footer{font-weight:600;color:var(--charcoal);font-size:.9rem}
.review-card footer span{display:block;font-weight:400;color:var(--slate);font-size:.8rem}
.rating-summary{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:44px;flex-wrap:wrap}
.rating-summary .big{font-family:var(--font-display);font-size:3.2rem;color:var(--charcoal);line-height:1}

/* ---------- Social ---------- */
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.social-card{
  aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--teal-light),#F4FBFB);
  border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.social-card .platform{
  position:absolute;top:12px;left:12px;background:#fff;border-radius:999px;
  font-size:.72rem;font-weight:600;padding:5px 12px;color:var(--charcoal);box-shadow:var(--shadow-sm);
}
.social-cta{text-align:center;margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.faq-item.open{box-shadow:var(--shadow-sm);border-color:#CFE9EA}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--charcoal);
  padding:20px 60px 20px 24px;position:relative;transition:background .2s ease;
}
.faq-q:hover{background:var(--cool-gray)}
.faq-q::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:500;
  transition:transform .3s var(--ease), background .2s ease, color .2s ease;
}
.faq-q[aria-expanded="true"]::after{content:"–";transform:translateY(-50%) rotate(180deg);background:var(--teal);color:var(--dark)}
.faq-a{padding:0 24px 22px;color:var(--slate);font-size:.96rem;display:none}
.faq-item.open .faq-a{display:block;animation:faqIn .3s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Final CTA ---------- */
.final-cta{
  background:
    radial-gradient(90% 140% at 85% -20%, rgba(46,196,198,.28) 0%, rgba(46,196,198,0) 55%),
    linear-gradient(160deg,var(--charcoal) 0%,var(--dark) 100%);
  border-radius:32px;padding:clamp(64px,8vw,96px) 40px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.final-cta::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;opacity:.13;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0 90 L180 40 L300 75 L460 20 L620 80 L800 30 L960 70 L1080 45 L1200 85 L1200 120 L0 120 Z" fill="white"/></svg>') no-repeat bottom/cover;
}
.final-cta h2{color:#fff;margin-bottom:14px}
.final-cta p{color:#BFD3D6;font-size:1.15rem;margin:0 auto 34px;max-width:52ch}
.final-cta .hero-ctas{justify-content:center;margin-bottom:0}

/* ---------- Contact / Form ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(44px,5vw,64px);align-items:start}
.map-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);aspect-ratio:16/11;background:var(--soft-gray);position:relative}
.map-embed iframe{width:100%;height:100%;border:0}
.contact-details{display:grid;gap:22px}
.contact-block{display:flex;gap:16px;align-items:flex-start}
.contact-block .c-icon{width:46px;height:46px;border-radius:999px;background:var(--teal-light);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-block strong{display:block;color:var(--charcoal);margin-bottom:2px}
.contact-block p, .contact-block a{color:var(--slate);font-size:.95rem}
.mini-form{background:#fff;border-radius:26px;box-shadow:var(--shadow);border:1px solid var(--line);padding:38px 36px;margin-top:8px}
.mini-form h3{margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.mini-form label{display:block;font-size:.82rem;font-weight:600;color:var(--charcoal);margin-bottom:6px}
.mini-form input,.mini-form select,.mini-form textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mini-form input:focus,.mini-form select:focus,.mini-form textarea:focus{
  outline:none;border-color:var(--teal-dark);box-shadow:0 0 0 4px rgba(46,196,198,.18);
}
.mini-form textarea{resize:vertical;min-height:80px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--slate);margin:14px 0 18px}
.consent input{width:auto;margin-top:3px}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:#9FB4B8;padding:84px 0 0;font-size:.92rem}
.footer a{color:#CFDEE0;transition:color .18s ease}
.footer a:hover{color:var(--teal);text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:60px}
.footer h4{color:#fff;font-family:var(--font-body);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}
.footer ul{list-style:none;display:grid;gap:11px}
.footer .brand-blurb{margin:16px 0 22px;line-height:1.75}
.footer-social{display:flex;gap:12px}
.footer-social a{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;text-decoration:none!important;
  transition:background .2s ease, transform .25s var(--ease), color .2s ease;
}
.footer-social a:hover{background:var(--teal);color:var(--dark);transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#6E8488}
.service-areas{color:#6E8488;font-size:.85rem;line-height:1.8;padding-bottom:8px}

/* ---------- Sticky mobile bar ---------- */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(12,31,34,.12);
}
.mobile-bar a{
  flex:1;text-align:center;padding:12px 6px 11px;font-size:.76rem;font-weight:600;
  color:var(--charcoal);text-decoration:none!important;display:flex;flex-direction:column;gap:3px;align-items:center;
}
.mobile-bar a.mb-primary{background:var(--charcoal);color:#fff}
.mobile-bar svg{width:20px;height:20px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}
/* gentle stagger inside card grids */
.tx-grid .reveal:nth-child(2),.review-track .reveal:nth-child(2),.doctors .reveal:nth-child(2),.gallery-grid .reveal:nth-child(2){transition-delay:.08s}
.tx-grid .reveal:nth-child(3),.review-track .reveal:nth-child(3),.gallery-grid .reveal:nth-child(3){transition-delay:.16s}
.tx-grid .reveal:nth-child(4){transition-delay:.24s}

/* ---------- Treatment page components ---------- */
.breadcrumbs{font-size:.85rem;color:var(--slate);padding:18px 0 0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li+li::before{content:"›";margin-right:6px;color:rgba(255,255,255,.35)}
.breadcrumbs a{color:var(--teal-dark)}
.page-hero{
  background:
    radial-gradient(110% 160% at 90% -30%, rgba(46,196,198,.22) 0%, rgba(46,196,198,0) 55%),
    linear-gradient(165deg,var(--dark) 0%,var(--charcoal) 70%,#173F41 100%);
  color:#fff;padding:76px 0 104px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:42px;color:var(--white);
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 42" preserveAspectRatio="none"><path d="M0 42 L0 30 L160 9 L300 25 L470 5 L640 28 L820 10 L990 24 L1200 8 L1200 42 Z" fill="white"/></svg>') no-repeat bottom/cover;
}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.3rem)}
.page-hero .lead{color:#DDE8EA;margin:18px 0 30px;max-width:640px}
.page-hero .breadcrumbs{color:#9FB4B8;padding:0 0 28px}
.page-hero .breadcrumbs a{color:var(--teal)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px 20px 24px;position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:20px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--dark);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(46,196,198,.35)}
.section--dark .step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.section--dark .step strong{color:#fff}
.section--dark .step span{color:#AFC5C8}
.step strong{display:block;color:var(--charcoal);margin-bottom:6px;font-size:.98rem}
.step span{color:var(--slate);font-size:.88rem;line-height:1.55}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hub-cat{margin-bottom:56px}
.hub-cat h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:22px;padding-bottom:12px;border-bottom:2px solid var(--teal-light)}

/* ---------- Verbatim-content helpers (treatment pages) ---------- */
.img-caption{color:var(--slate);font-size:.9rem;margin-top:14px;font-style:italic;max-width:64ch}
.content-flow p{color:var(--slate);margin-top:18px;max-width:70ch}
.content-flow h2{margin-top:52px}
.content-flow h3{margin-top:34px;color:var(--charcoal)}
.content-flow h4{margin-top:26px;color:var(--charcoal);font-size:1.05rem}
.content-flow ul.checklist{margin-bottom:8px}
.content-flow blockquote{
  border-left:4px solid var(--teal);padding:18px 26px;margin:30px 0;
  background:var(--cool-gray);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--charcoal);font-family:var(--font-display);font-style:italic;font-size:1.06rem;line-height:1.6;
}
.media-frame.inline-media{aspect-ratio:16/9;margin-top:28px}
.media-frame.logo-media{aspect-ratio:4/1.4;background:linear-gradient(160deg,#fff,var(--soft-gray));box-shadow:var(--shadow-sm)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .tx-grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4)::before{display:none}
  .stat:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .benefit-grid{grid-template-columns:repeat(3,1fr)}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .review-track{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps,.steps--4,.steps--3{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero-inner,.split,.feature,.contact-grid{grid-template-columns:1fr;gap:44px}
  .feature.flip .feature-media{order:0}
  .doctors{grid-template-columns:1fr}
  /* Mobile hero: no cropped background video — clean rounded block below CTAs */
  .hero-video-wrap,.hero-overlay{display:none}
  .hero{background:
    radial-gradient(120% 90% at 85% 0%, rgba(46,196,198,.2) 0%, rgba(46,196,198,0) 55%),
    linear-gradient(165deg,var(--dark) 0%,var(--charcoal) 72%,#173F41 100%)}
  .hero-inner{padding:64px 0 96px}
  .hero-mobile-video{display:block;margin-top:36px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/9;background:var(--dark)}
  .hero-mobile-video video{width:100%;height:100%;object-fit:cover;display:block}
  .stats-band .stats{margin-top:-48px}
  .nav{
    display:block;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:16px 22px 26px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height:calc(100vh - 80px);overflow-y:auto;
  }
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a.nav-link{padding:13px 10px;font-size:1.02rem}
  .nav a.nav-link::after{display:none}
  .has-sub > a{background-position:right 14px center}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:18px;min-width:0}
  .flyout{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 18px;min-width:0}
  .submenu .has-fly > a{background:none;padding-right:14px}
  .submenu .has-fly::before{display:none}
  .menu-toggle{display:block}
  .header-cta .btn{display:none}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .tx-grid,.gallery-grid,.review-track,.steps,.steps--4,.steps--3,.related-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;border-radius:22px}
  .stat{padding:24px 14px}
  .stat:nth-child(odd)::before{display:none}
  .stat:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .mobile-bar{display:flex}
  body{padding-bottom:66px}
  .utility-links{display:none}
  .header-phone{display:none}
  .hero-ctas .btn{flex:1 1 100%}
  .final-cta{padding:56px 24px;border-radius:24px}
  .mini-form{padding:30px 24px}
  .doctor-body{padding:26px 24px 30px}
  .page-hero{padding:54px 0 80px}
}

/* ---------- Awaiting client input (remove this block before launch) ---------- */
mark.needs-client{
  background:#fff3cd;color:#6b4a00;border:1px dashed #d9a400;
  padding:1px 7px;border-radius:6px;font-size:.92em;font-weight:600;
}

/* ===== v5: real logo mark + Park City's Best award ===== */
img.logo-mark{object-fit:contain}
.footer .logo-mark{width:40px;height:40px}
.hero-award{
  position:absolute;right:28px;top:calc(clamp(96px,11vw,150px) + 40px);
  width:clamp(170px,15vw,220px);height:auto;z-index:3;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.35));
}
@media (max-width:1100px){.hero-award{width:150px}}
@media (max-width:900px){
  .hero-award{position:static;width:96px;margin:0 0 18px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}
}

/* ===== v6: Schedule Your Assessment page ===== */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px)}
.office{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:20px}
.office h3{color:var(--charcoal);margin-bottom:4px}
.office-sub{display:block;font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--slate);margin-top:6px}
.office .contact-block p{color:var(--slate)}
.office-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px}
.office-note{font-size:.85rem}
.narrow-flow{max-width:760px}
.sched-cta{margin-top:32px}
@media (max-width:900px){.office-grid{grid-template-columns:1fr}}

/* ===== v7: two-office bar (every page) ===== */
.utility .util-offices{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px}
.util-office{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-width:0}
.util-name{color:var(--teal);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.74rem}
.utility .util-phone{color:#fff;font-weight:600}
.utility .util-addr{display:inline-flex;align-items:center;gap:6px;color:#B9CDD0;font-weight:400}
.utility .util-addr svg{flex-shrink:0;color:var(--teal)}
.utility .util-addr:hover span{text-decoration:underline}
@media (max-width:760px){
  .utility{padding:8px 0}
  .utility .util-offices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .util-office{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04)}
  .utility .util-phone{font-size:.95rem}
  .utility .util-addr{font-size:.74rem;line-height:1.35;align-items:flex-start}
  .utility .util-addr svg{margin-top:2px}
}

/* ===== v7: homepage contact, both offices with maps ===== */
.office-maps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);align-items:start}
.office-col-title{margin:24px 0 6px;color:var(--charcoal)}
.office-col .contact-details{display:grid;gap:18px;margin-top:16px}
@media (max-width:900px){.office-maps{grid-template-columns:1fr}}

/* ===== v7: two-card treatment grid ===== */
.tx-grid.tx-grid--2{grid-template-columns:repeat(2,1fr);max-width:880px;margin-left:auto;margin-right:auto}
@media (max-width:760px){.tx-grid.tx-grid--2{grid-template-columns:1fr}}

/* ===== v7.1: "call or email to book" block ===== */
.book-by{margin:28px auto 0;max-width:640px;text-align:center}
.book-by-title{font-weight:600;color:var(--charcoal);margin:0 auto 14px;max-width:none}
.book-by-offices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.book-by-office{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.book-by-office strong{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark)}
.book-by-office a[href^="tel"]{font-size:1.15rem;font-weight:700;color:var(--charcoal)}
.book-by-office a[href^="mailto"]{font-size:.92rem;word-break:break-word}
.book-by--dark .book-by-title{color:#fff}
.final-cta .book-by-title{font-size:1.05rem;margin-bottom:14px}
.book-by--dark .book-by-office{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.book-by--dark .book-by-office strong{color:var(--teal)}
.book-by--dark .book-by-office a[href^="tel"]{color:#fff}
.book-by--dark .book-by-office a[href^="mailto"]{color:#BFD3D6}
.final-cta .book-by{margin-top:24px}
.office-col .office-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:560px){.book-by-offices{grid-template-columns:1fr}}
.final-cta .book-by{position:relative;z-index:2;margin-bottom:40px}

/* ===== v7.2: client photos in media frames and before/after cells ===== */
.media-frame > img,.ba-imgs > div > img{width:100%;height:100%;object-fit:cover}
.doctor-photo > img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:inherit}

/* ===== v7.4: Park City's Best badge in the office bar (every page) ===== */
/* Wide screens: badge + two-line label sits between the two offices.
   <=1180px: it takes its own centered row above the offices. */
.utility .util-award{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:.68rem;line-height:1.25;letter-spacing:.08em;text-transform:uppercase}
.util-award span{max-width:160px;text-wrap:balance}
.util-award img{width:auto;height:34px;margin:-7px 0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));transition:transform .3s var(--ease)}
.utility .util-award:hover{color:var(--teal)}
.util-award:hover img{transform:rotate(-6deg) scale(1.06)}
@media (max-width:1180px){
  .utility .util-award{order:-1;flex-basis:100%;justify-content:center;font-size:.7rem}
  .util-award span{max-width:none}
  .util-award img{height:28px;margin:-4px 0}
}
@media (max-width:760px){
  .utility .util-award{grid-column:1/-1;justify-self:center}
}

/* ===== v7.4: Why Choose Us page ===== */
.page-hero--award .container{position:relative}
.page-hero-award{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:clamp(120px,12vw,168px);height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.35))}
.award-list{list-style:none;margin-top:28px;display:grid;gap:16px}
.award-list li{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;box-shadow:var(--shadow-sm)}
.award-list strong{display:block;color:var(--charcoal);margin-bottom:12px}
.award-list mark{display:inline-block;margin-top:12px}
.award-years{display:flex;flex-wrap:wrap;gap:8px}
.award-years span{background:var(--teal-light);color:var(--teal-dark);font-weight:700;font-size:.9rem;padding:3px 13px;border-radius:999px}
.section--dark .lead{color:#BFD3D6}
.award-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.award-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.award-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.award-card img{width:100%;height:auto;aspect-ratio:9/11;object-fit:cover;object-position:top}
.award-card figcaption{padding:14px 18px 18px;font-size:.9rem;line-height:1.5;color:var(--slate)}
.award-card figcaption strong{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--charcoal);margin-bottom:2px}
.award-gallery .reveal:nth-child(2){transition-delay:.08s}
.award-gallery .reveal:nth-child(3){transition-delay:.16s}
.award-gallery .reveal:nth-child(4){transition-delay:.24s}
@media (max-width:1080px){.award-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .page-hero-award{position:static;transform:none;width:84px;margin:4px 0 0}
}
@media (max-width:560px){.award-gallery{grid-template-columns:1fr}}

/* ===== v7.5: header fits 901px and up (no sideways scroll) ===== */
/* .header-inner's "padding:16px 0" wiped the container's side padding, so below
   1180px the logo and buttons sat flush against the window edge. Restore it while
   keeping header content 1180px wide on large screens (same as before). */
@media (min-width:641px){
  .header-inner,.header.scrolled .header-inner{max-width:calc(var(--container) + 56px);padding-left:28px;padding-right:28px}
}
/* Full nav (1241px+): logo + six links + "Schedule Your Assessment" fill the
   1180px row, so the phone (already in the office bar above) is hidden here. */
@media (min-width:1241px){
  .header-inner{gap:12px}
  .header-phone{display:none}
}
/* 901–1240px: the nav collapses into the Menu dropdown, same as tablets;
   phone + Schedule button stay visible. */
@media (min-width:901px) and (max-width:1240px){
  .nav{
    display:block;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:16px 22px 26px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height:calc(100vh - 80px);overflow-y:auto;
  }
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a.nav-link{padding:13px 10px;font-size:1.02rem}
  .nav a.nav-link::after{display:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:18px;min-width:0}
  .flyout{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 18px;min-width:0}
  .submenu .has-fly > a{background:none;padding-right:14px}
  .submenu .has-fly::before{display:none}
  .menu-toggle{display:block}
}

/* ===== v7.4b: Why Choose Us gallery lightbox ===== */
.award-zoom{display:block;cursor:zoom-in}
.lightbox{border:0;padding:0;margin:auto;background:transparent;max-width:min(92vw,900px);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(12,31,34,.88)}
.lightbox img{width:auto;height:auto;max-width:min(92vw,900px);max-height:88vh;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.lightbox-close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--charcoal);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.lightbox-close:hover{background:var(--teal-light)}
body:has(.lightbox[open]){overflow:hidden}
@media (max-width:640px){.lightbox-close{top:8px;right:8px}}

/* ===== v7.6: doctors' photo beside the "Meet Drs." intro (homepage) ===== */
.docs-intro{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center;margin-bottom:clamp(48px,6vw,68px)}
.docs-intro-photo{margin:0;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.docs-intro-photo img{width:100%;height:100%;object-fit:cover}
.docs-intro .lead{margin-top:18px}
@media (max-width:900px){
  .docs-intro{grid-template-columns:1fr}
  .docs-intro-photo{order:2;width:100%;max-width:420px;justify-self:center}
}

/* ===== v7.7: Dr. Robert portrait + Invisalign and LightForce photos ===== */
.media-frame.media-wide{aspect-ratio:2/1}
.media-frame.media-square{aspect-ratio:1/1;max-width:480px;margin:0 auto}
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.media-pair figure{margin:0}
.media-pair .media-frame{aspect-ratio:1/1}
@media (max-width:560px){.media-pair{grid-template-columns:1fr}}
/* Dr. Robert portrait: keep his head in frame on the wide phone crop */
#dr-robert .doctor-photo > img{object-position:50% 5%}
/* Dr. Juliana portrait (v7.7c): keep her raised hand and face in frame on the wide phone crop */
#dr-juliana .doctor-photo > img{object-position:50% 30%}

/* ===== v7.8: iTero & SprintRay page photo pairs ===== */
.media-pair--tall .media-frame{aspect-ratio:3/4}
.media-pair--wide .media-frame{aspect-ratio:3/2}
.media-pair figcaption.img-caption{margin-top:10px}
/* Treatments dropdown: room for "iTero® & SprintRay Technology" on one line */
@media (min-width:901px){.submenu{min-width:264px}}

/* ===== v7.9: Dr. Juliana service-trip photo ===== */
.media-frame.media-4x3{aspect-ratio:4/3}

/* ===== v7.13: ABO seal in Dr. Robert's bio ===== */
.doctor-body .cred-seal{float:right;width:112px;height:auto;margin:6px 0 10px 22px}
.doctor-body h4{clear:both}
@media (max-width:560px){.doctor-body .cred-seal{width:84px;margin-left:16px}}

/* ===== v7.16: team photo in the homepage welcome section (portrait, uncropped) ===== */
.feature-media .media-frame.media-team{aspect-ratio:1136/1385}

/* ===== v7.17: homepage contact: Call/Email to Book buttons level across both offices ===== */
@media (min-width:901px){
  .office-maps{align-items:stretch}
  .office-col{display:flex;flex-direction:column}
  .office-col .office-actions{margin-top:auto;padding-top:20px}
}

/* ===== v7.21: real social icons in the footer (were text characters) ===== */
.footer-social a{color:#fff}
.footer-social svg{width:18px;height:18px;display:block}

/* ===== v7.22: anchor links land below the sticky header =====
   The sticky header covered the top ~72px (45px at 900px and below) of every in-page
   jump (About Us > Our Community, Reviews, Before & After, doctor bios...).
   Offsets = header + what sits above the target heading (eyebrow ~39px; the
   community/doctors photos ~95px) + breathing room. */
:root{--anchor-offset:96px}
@media (max-width:900px){:root{--anchor-offset:64px}}
[id]{scroll-margin-top:var(--anchor-offset)}
h2[id]{scroll-margin-top:calc(var(--anchor-offset) + 42px)}
#community-h2{scroll-margin-top:calc(var(--anchor-offset) + 110px)} /* eyebrow + 52px heading margin above it */
@media (min-width:901px){#docs-h2{scroll-margin-top:calc(var(--anchor-offset) + 110px)}} /* doctors photo sits beside the heading only on desktop */