/* Bobby S. Lee, DDS: homepage + shared chrome (homepage-spec r1 + FLAVOR ADDENDUM 1).
   Every viewport-relative value is authored as its mechanism (vh / vw / % / calc / clamp / flex /
   grid). Layout is pure CSS @media; no script reads innerWidth. Values come from css/tokens.css. */

/* ================================================================ 0. base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body-ink);
  font: 400 17px/1.65 var(--font-body);
}
h1, h2, h3, p, figure, blockquote { margin: 0; }
button { font-family: inherit; }
main#main { background: var(--sky); }
main#main:focus { outline: none; }

/* chrome height the hero pays for (Section 0.10) */
:root { --chrome-h: var(--mbar-h); }
@media (min-width: 1120px) { :root { --chrome-h: var(--header-h); } }

:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
  position: fixed; left: 16px; top: 8px; z-index: 1001;
  background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-pill);
  font: 700 16px/1.2 var(--font-display); text-decoration: none;
}

/* widget-native marks (never recoloured) */
.g-r { fill: var(--g-red); } .g-b { fill: var(--g-blue); } .g-y { fill: var(--g-yellow); } .g-g { fill: var(--g-green); }
.gmark { display: block; flex: none; }
.fbmark { display: block; clip-path: circle(50%); }
.fb-disc { fill: var(--fb-blue); } .fb-f { fill: var(--white); }
.ico { display: block; flex: none; }
.star { display: block; width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ================================================================ 0.5 the button atom */
a.pill, button.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; height: var(--pill-h, 44px); min-height: 44px; padding: 0 var(--pill-px, 24px);
  min-width: var(--pill-minw, 0);
  border: 2px solid var(--primary); border-radius: var(--radius-pill);
  background: var(--primary); color: var(--white);
  font: 700 var(--pill-fs, 16px)/1.2 var(--font-display); letter-spacing: 0; text-transform: none;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .2s linear, border-color .2s linear, color .2s linear, transform .1s linear;
}
@media (hover: hover) { .pill:hover { background: var(--primary-deep); border-color: var(--primary-deep); } }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }

.pill.pill--outline { background: var(--white); color: var(--primary); border-color: var(--primary); }
@media (hover: hover) { .pill.pill--outline:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } }

/* ================================================================ H0 desktop header (>= 1120) */
.site-header { display: none; }
@media (min-width: 1120px) {
  .site-header {
    display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-h);
    pointer-events: none;   /* the 18px insets and the bar's corners show (and hit) the hero photo */
  }
}
.util-strip, .hdr-bar { width: calc(100% - 2 * var(--chrome-inset)); margin-left: var(--chrome-inset); pointer-events: auto; }
.util-strip { height: var(--util-h); background: var(--sky-strong); }
.util-row {
  width: min(var(--row-max), 100% - 40px); height: 100%; margin: 0 auto;
  display: flex; justify-content: flex-end; align-items: center;
}
.util-link {
  display: inline-flex; align-items: center; gap: 6px; height: var(--util-h); padding: 0 16px;
  font: 500 16px/44px var(--font-display); color: var(--grey-logo); text-decoration: none; white-space: nowrap;
  transition: color .2s linear;
}
@media (hover: hover) { .util-link:hover { color: var(--primary-deep); } }

.hdr-bar {
  position: relative; height: var(--bar-h); background: var(--bar-frost);
  border-radius: 0 0 var(--radius-eh) var(--radius-eh); box-shadow: var(--shadow-eh);
  transition: background-color .3s var(--ease-std);
}
.site-header.is-scrolled .hdr-bar { background: var(--bar-frost-scrolled); }
.site-header.is-stuck .hdr-bar {
  position: fixed; top: 0; left: var(--chrome-inset); right: var(--chrome-inset); width: auto; margin-left: 0;
}
.hdr-row {
  position: relative; height: var(--bar-h); width: min(var(--row-max), 100% - 40px); margin: 0 auto;
  display: grid; grid-template-columns: auto auto; column-gap: 20px; align-items: center;
}
.hdr-logo { justify-self: start; display: flex; }
.hdr-logo img { display: block; width: var(--logo-w); height: auto; aspect-ratio: 618 / 114; }
.hdr-right { display: flex; justify-content: flex-end; align-items: center; }
.hdr-el { padding: 0 10px; }
.hdr-el:last-child { padding-right: 0; }
.nav { display: flex; margin: 0 20px 0 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: stretch; height: 80px; line-height: 80px; }
.nav-item--services { position: static; }   /* the mega panel anchors to .hdr-row */
.nav-link {
  display: flex; align-items: center; padding: 0 20px;
  font: 600 18px/80px var(--font-display); color: var(--grey-logo); text-decoration: none; white-space: nowrap;
  transition: color .2s linear;
}
.has-panel > .nav-link { padding: 0 0 0 20px; }
.nav-caret, .nav-toggle {
  display: flex; align-items: center; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--grey-logo); font-size: 18px; transition: color .2s linear;
}
.nav-caret { width: 32px; height: 80px; padding: 0 0 0 10px; }
.nav-toggle { height: 80px; padding: 0 0 0 20px; font: 600 18px/80px var(--font-display); white-space: nowrap; }
.nav-chevzone { display: flex; align-items: center; width: 32px; height: 80px; padding-left: 10px; }
.nav-chev { display: block; width: .6em; height: .6em; }
.nav-item:hover > .nav-link, .nav-item:hover > .nav-caret, .nav-item:hover > .nav-toggle { color: var(--primary); }
.nav-caret:hover, .nav-toggle:hover { color: var(--primary); }

.hdr-cta { --pill-h: 46px; --pill-px: 24px; --pill-fs: 16px; }

/* active markers: colour + 2px underline (delta 0.9); hover is colour only */
body[data-section="about"] .nav-item--about > .nav-link,
body[data-section="services"] .nav-item--services > .nav-link,
body[data-section="smiles"] .nav-item--smiles > .nav-link,
body[data-section="contact"] .nav-item--contact > .nav-link,
body[data-section="patients"] .nav-item--patients > .nav-toggle,
body[data-section="patients"] .nav-item--patients .nav-label {
  color: var(--primary);
}
body[data-section="about"] .nav-item--about > .nav-link,
body[data-section="services"] .nav-item--services > .nav-link,
body[data-section="smiles"] .nav-item--smiles > .nav-link,
body[data-section="contact"] .nav-item--contact > .nav-link,
body[data-section="patients"] .nav-item--patients .nav-label,
body[data-section="directions"] .util-link--dir span {
  text-decoration: underline 2px; text-underline-offset: 8px;
}
body[data-section="directions"] .util-link--dir { color: var(--primary-deep); }

/* ---- panels (mega + plain) ---- */
.dd-panel {
  position: absolute; z-index: 10; background: var(--white); border-radius: var(--radius-eh); line-height: normal;
  opacity: 0; visibility: hidden; transform: translateY(-9px); pointer-events: none;
  transition: visibility .2s, transform .2s;
}
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 15px; }  /* hover bridge */
.nav-item:hover > .dd-panel,
.nav-item.is-open > .dd-panel,
html:not(.js) .nav-item:focus-within > .dd-panel {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .2s, visibility .2s, transform .2s;
}
.dd-panel--mega {
  left: 0; right: 0; top: calc(100% + 13px);
  display: flex; flex-direction: row; padding: 25px 20px 35px; box-shadow: var(--shadow-eh);
}
.dd-panel--plain {
  left: 0; top: calc(100% + 15px); width: max-content; min-width: var(--dd-w); padding: 0;
  box-shadow: var(--shadow-eh-dd);
}
.mega-col {
  box-sizing: content-box; flex: 1 1 0; display: flex; flex-direction: column;
  padding: 0 15px; border-right: 1px solid var(--sky-strong);
}
.mega-col:first-child { padding: 0 15px 0 0; }
.mega-col:last-child { padding: 0 0 0 15px; border-right: 0; }
.mega-row {
  display: grid; grid-template-columns: 62px minmax(0, 292px); grid-template-rows: 30.8px 19.2px;
  align-items: center; height: 62px; padding: 6px;
  color: var(--grey-logo); text-decoration: none; transition: color .2s linear;
}
.mega-icon { grid-column: 1; grid-row: 1 / span 2; width: 50px; height: 50px; margin-right: 12px; }
.mega-name { grid-column: 2; grid-row: 1; font: 600 20px/29px var(--font-display); white-space: nowrap; }
.mega-desc { grid-column: 2; grid-row: 2; font: 400 12px/17.4px var(--font-display); white-space: nowrap; }
.mega-row:hover { color: var(--primary); }
.dd-row {
  display: block; padding: 18px 20px; font: 600 20px/29px var(--font-display); color: var(--grey-logo);
  text-decoration: none; white-space: nowrap; transition: color .2s linear;
}
.dd-row:hover { color: var(--primary); }

/* current page inside the panels: colour + underline on the label */
body[data-page="hygiene"] .mega-row[data-nav="hygiene"],
body[data-page="bonding"] .mega-row[data-nav="bonding"],
body[data-page="inlays"] .mega-row[data-nav="inlays"],
body[data-page="rootcanal"] .mega-row[data-nav="rootcanal"],
body[data-page="crowns"] .mega-row[data-nav="crowns"],
body[data-page="veneers"] .mega-row[data-nav="veneers"],
body[data-page="whitening"] .mega-row[data-nav="whitening"],
body[data-page="invisalign"] .mega-row[data-nav="invisalign"],
body[data-page="bridges"] .mega-row[data-nav="bridges"],
body[data-page="dental-implants"] .mega-row[data-nav="dental-implants"],
body[data-page="dentures"] .mega-row[data-nav="dentures"],
body[data-page="services"] .mega-row[data-nav="services"],
body[data-page="meet-dr-lee"] .dd-row[data-nav="meet-dr-lee"],
body[data-page="our-office"] .dd-row[data-nav="our-office"],
body[data-page="technologies"] .dd-row[data-nav="technologies"],
body[data-page="insurance"] .dd-row[data-nav="insurance"],
body[data-page="reviews"] .dd-row[data-nav="reviews"],
body[data-page="post-op"] .dd-row[data-nav="post-op"] { color: var(--primary); }
body[data-page="hygiene"] .mega-row[data-nav="hygiene"] .mega-name,
body[data-page="bonding"] .mega-row[data-nav="bonding"] .mega-name,
body[data-page="inlays"] .mega-row[data-nav="inlays"] .mega-name,
body[data-page="rootcanal"] .mega-row[data-nav="rootcanal"] .mega-name,
body[data-page="crowns"] .mega-row[data-nav="crowns"] .mega-name,
body[data-page="veneers"] .mega-row[data-nav="veneers"] .mega-name,
body[data-page="whitening"] .mega-row[data-nav="whitening"] .mega-name,
body[data-page="invisalign"] .mega-row[data-nav="invisalign"] .mega-name,
body[data-page="bridges"] .mega-row[data-nav="bridges"] .mega-name,
body[data-page="dental-implants"] .mega-row[data-nav="dental-implants"] .mega-name,
body[data-page="dentures"] .mega-row[data-nav="dentures"] .mega-name,
body[data-page="services"] .mega-row[data-nav="services"] .mega-name,
body[data-page="meet-dr-lee"] .dd-row[data-nav="meet-dr-lee"],
body[data-page="our-office"] .dd-row[data-nav="our-office"],
body[data-page="technologies"] .dd-row[data-nav="technologies"],
body[data-page="insurance"] .dd-row[data-nav="insurance"],
body[data-page="reviews"] .dd-row[data-nav="reviews"],
body[data-page="post-op"] .dd-row[data-nav="post-op"] { text-decoration: underline 2px; text-underline-offset: 6px; }

/* ---- compact desktop track 1120-1259 (delta 0.13, re-measured for five items) ---- */
@media (min-width: 1120px) and (max-width: 1259px) {
  .hdr-logo img { width: var(--logo-w-compact); }
  .nav { margin-right: 12px; }
  .nav-link { font-size: 16px; padding: 0 12px; }
  .has-panel > .nav-link { padding: 0 0 0 12px; }
  .nav-caret { width: 30px; padding-left: 8px; font-size: 16px; }
  .nav-toggle { font-size: 16px; padding-left: 12px; }
  .nav-chevzone { width: 30px; padding-left: 8px; }
  .hdr-cta { --pill-h: 45px; --pill-px: 18px; --pill-fs: 15px; }
  .mega-row {
    grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
    height: auto; min-height: 62px;
  }
  .mega-name { font-size: 18px; line-height: 26px; }
  .mega-desc { white-space: normal; }
}

/* ================================================================ H0 house chrome (<= 1119) */
.m-bar, .m-drawer, .action-bar { display: none; }
@media (max-width: 1119px) {
  .m-bar {
    display: grid; position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--mbar-h);
    background: var(--bar-frost); padding: 0 20px;
    grid-template-columns: auto auto; column-gap: 14px; align-items: center;
  }
  .m-bar.is-scrolled { background: var(--bar-frost-scrolled); box-shadow: var(--shadow-mbar); }
  .m-drawer {
    display: block; position: fixed; top: var(--mbar-h); left: 0; right: 0; bottom: 0; z-index: 190;
    background: var(--ink); overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 24px;
    visibility: hidden; transform: translateX(100%);
    transition: transform .25s var(--ease-std), visibility .25s;
  }
  body.is-menu-open { overflow: hidden; }
  body.is-menu-open .m-drawer { visibility: visible; transform: none; }
}
.m-logo { justify-self: start; display: flex; align-items: center; min-height: 44px; }
.m-logo img { display: block; width: clamp(150px, 100vw - 170px, 250px); height: auto; aspect-ratio: 618 / 114; }
.m-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.m-tel { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--primary); }
.m-menu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 64px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-field);
  background: var(--primary); color: var(--white); cursor: pointer;
  font: 700 10px/1 var(--font-display); letter-spacing: 1px; text-transform: uppercase;
}
@media (hover: hover) { .m-menu:hover { background: var(--primary-deep); } }
.m-menu__icon { display: block; }
.m-menu__icon--close { display: none; }
body.is-menu-open .m-menu__icon--open { display: none; }
body.is-menu-open .m-menu__icon--close { display: block; }

.m-list, .m-sub { list-style: none; margin: 0; padding: 0; }
.m-row {
  display: flex; align-items: center; min-height: 56px; padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--on-dark-line);
  font: 600 18px/1.3 var(--font-display); color: var(--white); text-decoration: none;
}
div.m-row, .m-rowbtn { padding-right: 0; }
.m-rowbtn { width: 100%; background: none; text-align: left; cursor: pointer; }
.m-link { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; color: inherit; text-decoration: none; }
.m-toggle {
  flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  padding: 0; border: 0; background: none; color: var(--white); cursor: pointer;
}
.m-chev { display: block; transition: transform .2s var(--ease-std); }
.m-item.is-open .m-chev { transform: rotate(180deg); }
.m-sub { display: none; }
.m-item.is-open > .m-sub { display: block; }
.m-child {
  display: flex; align-items: center; min-height: 48px; padding: 0 20px 0 36px;
  border-bottom: 1px solid var(--on-dark-line-soft);
  font: 400 17px/1.3 var(--font-display); color: var(--on-dark-child); text-decoration: none;
}
.m-util { display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px; padding: 0 20px; }
.m-phone {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font: 700 20px/1 var(--font-display); color: var(--white); text-decoration: none;
}
.m-hours { margin: 4px 0 0; font: 400 15px/22px var(--font-body); color: var(--on-dark-soft); }
.m-drawer .m-pill {
  --pill-h: 48px; --pill-px: 24px; margin-top: 16px;
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
@media (hover: hover) { .m-drawer .m-pill:hover { background: var(--white); border-color: var(--white); color: var(--ink); } }
.m-textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 16px/1.3 var(--font-body); color: var(--white); text-decoration: underline; text-underline-offset: 3px;
}
.m-pill + .m-textlink { margin-top: 8px; }
.m-drawer :focus-visible, .m-drawer .pill:focus-visible { outline: var(--focus-dark); }
.m-drawer .m-row:focus-visible, .m-drawer .m-child:focus-visible, .m-drawer .m-toggle:focus-visible,
.m-drawer .m-link:focus-visible { outline-offset: -4px; }

body[data-section="home"] .m-row--home,
body[data-section="about"] .m-row--about,
body[data-section="services"] .m-row--services,
body[data-section="smiles"] .m-row--smiles,
body[data-section="patients"] .m-row--patients,
body[data-section="directions"] .m-row--directions,
body[data-section="contact"] .m-row--contact { box-shadow: inset 4px 0 0 var(--gold); }
body[data-page="meet-dr-lee"] .m-child[data-nav="meet-dr-lee"],
body[data-page="our-office"] .m-child[data-nav="our-office"],
body[data-page="technologies"] .m-child[data-nav="technologies"],
body[data-page="services"] .m-child[data-nav="services"],
body[data-page="hygiene"] .m-child[data-nav="hygiene"],
body[data-page="bonding"] .m-child[data-nav="bonding"],
body[data-page="inlays"] .m-child[data-nav="inlays"],
body[data-page="rootcanal"] .m-child[data-nav="rootcanal"],
body[data-page="crowns"] .m-child[data-nav="crowns"],
body[data-page="veneers"] .m-child[data-nav="veneers"],
body[data-page="whitening"] .m-child[data-nav="whitening"],
body[data-page="invisalign"] .m-child[data-nav="invisalign"],
body[data-page="bridges"] .m-child[data-nav="bridges"],
body[data-page="dental-implants"] .m-child[data-nav="dental-implants"],
body[data-page="dentures"] .m-child[data-nav="dentures"],
body[data-page="insurance"] .m-child[data-nav="insurance"],
body[data-page="reviews"] .m-child[data-nav="reviews"],
body[data-page="post-op"] .m-child[data-nav="post-op"] { box-shadow: inset 4px 0 0 var(--gold); color: var(--white); }

/* ---- bottom action bar (<= 600) ---- */
@media (max-width: 600px) {
  .action-bar {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
    height: var(--actionbar-h); padding-bottom: env(safe-area-inset-bottom);
    grid-template-columns: repeat(3, 1fr);
  }
  body.is-menu-open .action-bar { display: none; }
}
.ab {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 15px/1 var(--font-display); text-decoration: none;
}
.ab--call { background: var(--primary); color: var(--white); }
.ab--request { background: var(--gold); color: var(--ink); }
.ab--dir { background: var(--ink); color: var(--white); }
.ab:focus-visible { outline: var(--focus-dark); outline-offset: -5px; }
.ab--request:focus-visible { outline: 2px dashed var(--ink); }

/* ================================================================ H1 hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  height: calc(80vh + var(--chrome-h));
}
.hero__img {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); }
.hero__block {
  position: absolute; bottom: 8vh; left: 5vw; z-index: 2; width: min(1192px, 90vw); padding: 0 32px;
  display: flex; flex-direction: column;
}
.hero__h1 {
  font: 700 66px/82.5px var(--font-display); letter-spacing: .5px; color: var(--white); text-wrap: balance;
}
.hero__sub { margin: 4px 0 0; font: 400 24px/26.4px var(--font-body); color: var(--white); }
.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.hero__pill { --pill-h: 44px; --pill-px: 32px; --pill-fs: 16px; }
.hero .pill:focus-visible { outline: var(--focus-dark); }
@media (min-width: 601px) and (max-width: 900px) {
  .hero__h1 { font-size: 52px; line-height: 65px; }
}
@media (max-width: 600px) {
  /* main session: HERO-M is cut so the faces sit at 12-35% of its height; centred and top-anchored */
  .hero__img { object-position: 50% 0%; }
  .hero__block { width: 90vw; padding: 0; }
  .hero__h1 { font-size: 40px; line-height: 50px; }
}

/* ================================================================ H2 comfort split */
.comfort { background: var(--sky-strong); padding: 0; }
.comfort__row { max-width: 1400px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.comfort__fig { flex: 0 0 auto; margin: 0; max-width: 700px; }
.comfort__fig img { display: block; width: 700px; max-width: 100%; height: auto; aspect-ratio: 700 / 644; object-fit: cover; }
.comfort__text {
  flex: 1 1 auto; min-width: 0; max-width: 600px; margin: auto; padding: 40px 10px; text-align: center;
}
.comfort__kicker {
  display: block; margin-bottom: 15px;
  font: 400 15px/13.5px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.comfort__h2 { margin: 0 0 7px; font: 600 50px/50px var(--font-display); color: var(--ink); text-wrap: balance; }
.comfort__p { max-width: 470px; margin: 10px auto; font: 400 17px/28.9px var(--font-body); color: var(--ink); }
.comfort__pill { --pill-h: 53.19px; --pill-px: 10px; --pill-minw: min(285px, 100%); --pill-fs: 16px; margin: 5px 0; }  /* 285 wherever it fits; 280 at 320 (no overflow) */
@media (max-width: 1024px) {
  .comfort__row { flex-direction: column; }
  .comfort__fig { margin: 0 auto; max-width: 700px; width: 100%; }
  .comfort__fig img { width: 100%; }
  .comfort__text { margin: 0 auto; padding: 40px 20px; }
  .comfort__pill { margin: 10px auto; }
}
@media (max-width: 768px) { .comfort__h2 { font-size: 40px; line-height: 40px; } }
@media (max-width: 600px) {
  .comfort__h2 { font-size: 34px; line-height: 34px; }
  .comfort__kicker { line-height: 20px; }  /* class B (main review r1): worcester's 13.5px lh assumes one line; ours wraps at 390 */
}

/* ================================================================ H3 services carousel */
.svc { --visible: 1; background: var(--white); padding: 90px 0; overflow-x: clip; }
@media (min-width: 768px) { .svc { --visible: 2; } }
@media (min-width: 1280px) { .svc { --visible: 3; } }
.svc__inner { width: min(var(--row-max), 100% - 40px); margin: 0 auto; }
.svc__kicker { font: 800 18px/25.2px var(--font-display); color: var(--primary); text-align: center; }
.svc__h2 { font: 800 54px/75.6px var(--font-display); color: var(--grey-logo); text-align: center; text-wrap: balance; }
.svc__rule { height: 7px; margin-top: 20px; padding-top: 3px; }
.svc__rule span { display: block; width: 100px; height: 4px; margin: 0 auto; border-top: 4px solid var(--sky-strong); }
.svc__viewport { position: relative; overflow: visible; margin-top: 30px; }
.svc__track {
  --pos: 0; --pitch: 410px;
  display: flex; align-items: stretch; gap: var(--svc-gap); width: 100%;
  margin: 0; padding: 0; list-style: none;
  margin-left: calc(var(--pos) * -1 * var(--pitch));
  transition: margin-left .6s var(--ease-std);
  touch-action: pan-y;
}
.svc-card {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--svc-gap)) / var(--visible));
  position: relative; overflow: hidden; padding-bottom: 60px; text-align: center;
  background: var(--white); border-radius: var(--radius-eh-card); box-shadow: var(--shadow-eh);
  transition: box-shadow .3s;
}
.svc-card__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1.66667 / 1; object-fit: cover;
  transition: transform .4s var(--ease-std);
}
.svc-card__title {
  margin: 27px 0 15px; padding: 0 30px; font: 600 24px/31.2px var(--font-display); color: var(--body-ink);
  transform: translateY(9px); transition: transform .4s var(--ease-std);
}
.svc-card__sub {
  margin: 0 0 20px; padding: 0 30px; font: 400 16px/25.6px var(--font-body); color: var(--card-sub);
  transform: translateY(9px); transition: transform .4s var(--ease-std);
}
.svc-card__link {
  position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-end;
  padding-bottom: 30px; text-decoration: none; transition: padding .4s var(--ease-std);
}
.svc-card__more { font: 500 16px/1.65 var(--font-display); color: transparent; transition: color .4s var(--ease-std); }
@media (hover: hover) {
  .svc-card:hover { box-shadow: var(--shadow-eh-card-hover); }
  .svc-card:hover .svc-card__img { transform: scale(1.1); }
  .svc-card:hover .svc-card__title, .svc-card:hover .svc-card__sub { transform: none; }
  .svc-card:hover .svc-card__link { padding-bottom: 35px; }
  .svc-card:hover .svc-card__more { color: var(--primary); }
}
.svc-card:has(.svc-card__link:focus-visible) { box-shadow: var(--shadow-eh-card-hover); }
.svc-card:has(.svc-card__link:focus-visible) .svc-card__img { transform: scale(1.1); }
.svc-card:has(.svc-card__link:focus-visible) .svc-card__title,
.svc-card:has(.svc-card__link:focus-visible) .svc-card__sub { transform: none; }
.svc-card__link:focus-visible { outline: var(--focus-light); outline-offset: -4px; padding-bottom: 35px; }
.svc-card__link:focus-visible .svc-card__more { color: var(--primary); }
@media (hover: none) { .svc-card__more { color: var(--primary); } }
.svc__nav { display: flex; justify-content: flex-start; gap: 8px; margin-top: 20px; }
.svc__prev, .svc__next {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-eh-card); background: var(--primary); color: var(--white);
  box-shadow: var(--shadow-eh-arrow); cursor: pointer; transition: background-color .2s;
}
@media (hover: hover) {
  .svc__prev:not(:disabled):hover, .svc__next:not(:disabled):hover { background: var(--primary-deep); }
}
.svc__prev:disabled, .svc__next:disabled { opacity: .5; cursor: not-allowed; }
.svc__cta { display: flex; justify-content: center; margin-top: 30px; }
.svc__cta .pill { --pill-h: 56.7px; --pill-px: 27px; --pill-fs: 18px; }
@media (max-width: 780px) { .svc__h2 { font-size: 33px; line-height: 46.2px; } }

/* ================================================================ H4 doctor split */
.doc { padding: 37.5px 0; background: transparent; }
.doc__row {
  max-width: 1192px; margin: 0 auto; padding: 0 20px 0 0;
  display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: center; overflow: hidden;
}
.doc__media { width: 50%; padding: 0 12px 0 0; }
.doc__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.doc__text { width: 50%; padding: 0 0 0 32px; display: flex; flex-direction: column; }
.doc__head { margin-bottom: 32px; }
.doc__h2 { font: 600 36px/39.6px var(--font-display); color: var(--ink); text-wrap: balance; }
.doc__deck { margin: 4px 0 0; font: 700 24px/26.4px var(--font-body); color: var(--primary); }
.doc__body { font: 400 16px/23.47px var(--font-body); letter-spacing: .5px; color: var(--body-ink); }
.doc__btn { margin-top: 32px; }
.doc__btn .pill { --pill-h: 44px; --pill-px: 32px; --pill-fs: 16px; }
@media (max-width: 768px) {
  .doc { padding: 24px 0 32px; }
  .doc__row { flex-direction: column-reverse; padding: 0; }
  .doc__media { width: 100%; padding: 0; margin-bottom: 16px; }
  .doc__text { width: 100%; padding: 0 20px; }
  .doc__h2 { font-size: 30px; line-height: 33px; }
}

/* ================================================================ H5 insurance band */
.ins { background: var(--white); }
.ins__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; background: var(--ins-wash); }
.ins__cell { width: 100%; max-width: 650px; margin: 64px auto; padding: 0 64px; }
.ins__h2 { margin: 0 0 16px; font: 700 33.6px/1 var(--font-display); color: var(--white); text-wrap: balance; }
@media (min-width: 1440px) { .ins__h2 { font-size: 36.8px; } }
.ins__p { display: inline-block; font: 400 16px/24px var(--font-body); color: var(--white); }
.ins__actions { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.ins__pill { --pill-h: 44px; --pill-px: 16px; --pill-fs: 16px; }
.ins__phone { margin: 16px 0 0; }
.ins__phone a {
  display: inline-flex; align-items: center; min-height: 44px; opacity: 1;
  font: 700 16px/1.2 var(--font-body); color: var(--white); text-decoration: none;
}
@media (hover: hover) { .ins__phone a:hover { text-decoration: underline; } }
.ins__phone a:active { text-decoration: underline; }
.ins .pill:focus-visible, .ins__phone a:focus-visible { outline: var(--focus-dark); }
.ins__media { position: relative; min-height: 0; }
.ins__media img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 0%;
}
@media (max-width: 991px) {
  .ins__grid { grid-template-columns: 1fr; }
  .ins__media { display: none; }
}
@media (max-width: 600px) {
  .ins__cell { margin: 32px auto; padding: 0 20px; }
  .ins__h2 { font-size: 30px; line-height: 30px; }
}

/* ================================================================ H6 reviews on granite */
.rev {
  position: relative; overflow: hidden; padding: 50px 0;
  background: var(--granite-ground) url("../assets/tex-granite.jpg") center center / cover no-repeat;
}
.rev__col { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1400px; margin: auto; }
.rev__head {
  display: flex; flex-direction: column; align-items: center; margin: 30px 0; padding: 10px 20px;
  text-align: center; color: var(--grey-logo);
}
.rev__l1 {
  font: 800 48px/52.8px var(--font-display); letter-spacing: 2px; text-transform: uppercase; text-wrap: balance;
}
.rev__l2 { margin-top: 8px; font: 400 28px/33.6px var(--font-body); letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 600px) {
  .rev__l1 { font-size: 34px; line-height: 37.4px; }
  .rev__l2 { font-size: 22px; line-height: 26.4px; }
}
.rev__grid { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1273px) { .rev__grid { justify-content: center; } }
.rev-card {
  box-sizing: content-box; position: relative; width: 39%; min-height: 280px; padding: 50px; margin: 20px;
  background: var(--white); box-shadow: var(--shadow-sf-card); border-radius: 0;
}
@media (max-width: 1060px) { .rev-card { width: 45%; padding: 10px; } }
@media (max-width: 790px) { .rev-card { width: calc(100% - 60px); } }
@media (hover: hover) { .rev-card:hover { transform: translateY(-10px); transition: transform .3s; } }
.rev-card:has(.rev-card__link:focus-visible) { transform: translateY(-10px); transition: transform .3s; }
.rev-card__link { position: absolute; inset: 0; z-index: 1; }
.rev-card__link:focus-visible { outline: var(--focus-light); outline-offset: 4px; }
.rev-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.rev-card__who { display: flex; align-items: center; }
.rev-card__avatar {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin-right: 10px; border-radius: 50%;
  font: 600 26px/1 var(--font-display); color: var(--white);
}
.rev-card__avatar--l { background: var(--primary); }
.rev-card__avatar--e { background: var(--ink); }
.rev-card__avatar--r { background: var(--primary-deep); }
.rev-card__avatar--d { background: var(--grey-logo); }
.rev-card__name { font: 400 17.6px/1.3 var(--font-display); letter-spacing: .5px; color: var(--rev-name); }
.rev-card__stars { display: flex; margin-top: 4px; color: var(--g-star); }
.rev-card__g { width: 60px; height: 60px; }
.rev-card__quote { font: 300 19.2px/1.362 var(--font-display); color: var(--rev-quote); }
.rev__rating {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 10px 0 20px;
  padding: 0 20px; font: 600 16px/1.4 var(--font-display); color: var(--grey-logo); text-align: center;
}
.rev__stars { display: inline-flex; color: var(--g-star); }
.rev__cta .pill { --pill-h: 60px; --pill-px: 20px; --pill-fs: 18px; }

/* ================================================================ H7 contact form */
.ct { background: var(--white); padding: 90px 0; }
.ct__inner { width: min(var(--row-max), 100% - 40px); margin: 0 auto; }
.ct__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.ct__text { width: 45%; display: flex; flex-direction: column; align-items: flex-start; }
.ct__kicker { font: 800 18px/25.2px var(--font-display); color: var(--primary); }
.ct__h2 { font: 800 54px/75.6px var(--font-display); color: var(--grey-logo); text-wrap: balance; }
.ct__rule { align-self: stretch; height: 7px; margin-top: 20px; padding-top: 3px; }
.ct__rule span { display: block; width: 100px; height: 4px; border-top: 4px solid var(--sky-strong); }
.ct__p { margin: 30px 0 28.8px; font: 400 18px/29.7px var(--font-body); color: var(--body-ink); }
.ct__btns { margin-top: 30px; }
.ct__pill { --pill-h: 56.7px; --pill-px: 27px; --pill-fs: 18px; --pill-minw: 200px; }
.ct__card {
  flex: none; width: 45%; padding: 20px; background: var(--white);
  border-radius: var(--radius-form); box-shadow: var(--shadow-eh);
}
.ct-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 16px; }
.ct-field { min-width: 0; }
.ct-field--full, .ct-summary { grid-column: 1 / -1; }
.ct-name { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-label { display: block; margin: 0 0 8px; padding: 0; font: 700 16px/20px var(--font-body); color: var(--grey-logo); }
.ct-req { font: italic 400 13px/20px var(--font-body); color: var(--error); }
.ct-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 16px; }
.ct-sub { min-width: 0; }
.ct-sublabel { display: block; margin-bottom: 8px; padding-top: 5px; font: 400 15px/20px var(--font-body); color: var(--grey-logo); }
.ct-input {
  display: block; width: 100%; height: 44px; margin: 0; padding: 8px 10px;
  border: 1px solid var(--field-line); border-radius: var(--radius-field); box-shadow: var(--shadow-field);
  background: var(--white); font: 400 15px/24px var(--font-body); color: var(--field-text);
  transition: border-color .2s linear;
}
.ct-textarea { height: 96px; resize: vertical; }
.ct-input:focus { border-color: var(--primary); box-shadow: none; outline: var(--focus-light); outline-offset: 2px; }
.ct-input[aria-invalid="true"], .ct-input[aria-invalid="true"]:focus { border-color: var(--error); }
.is-invalid > .ct-label, .is-invalid .ct-sublabel { color: var(--error); }
.is-invalid > .ct-label .ct-req { color: var(--error); }
.ct-msg {
  margin-top: 8px; padding: 13px 24px; background: var(--error-wash); border: 1px solid var(--error);
  font: 400 15px/24.75px var(--font-body); color: var(--error);
}
.ct-summary {
  position: relative; padding: 16px 16px 16px 48px;
  background: var(--error-wash); border: 1px solid var(--error); border-radius: var(--radius-error);
  box-shadow: var(--shadow-summary); font: 400 13.2px/17.6px var(--font-body); color: var(--error);
}
.ct-summary:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.ct-summary__icon { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; }
.ct-summary p { margin: 0; }
.ct-summary ul { margin: 6px 0 0; padding-left: 18px; }
.ct-actions { display: flex; flex-direction: column; align-items: flex-start; }
.ct-submit { --pill-h: 46px; --pill-px: 30px; --pill-fs: 16px; }
.ct-note { margin: 12px 0 0; font: 400 14px/20px var(--font-body); color: var(--body-ink); }
.ct-status { margin: 12px 0 0; font: 700 14px/20px var(--font-body); color: var(--ink); }
.ct-status[hidden] { display: none; }
.ct-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 780px) {
  .ct__row { flex-direction: column; align-items: center; }
  .ct__text, .ct__card { width: 100%; }
  .ct__text { margin-bottom: 30px; }
  .ct__btns { align-self: center; }
  .ct__h2 { font-size: 33px; line-height: 46.2px; }
}
@media (max-width: 640px) {
  .ct-form, .ct-pair { grid-template-columns: 1fr; }
}

/* ================================================================ H8 location */
.loc {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; overflow: hidden;
  background: var(--primary) url("../assets/tex-blue-grain.jpg") center top / cover no-repeat;
}
.loc__panel { width: 50%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.loc__map { position: relative; width: 50%; height: max(100vh, 50.625vw); }
.loc__map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.loc__text { width: 100%; margin: 18px 0 0; padding: 0 24px; text-align: center; color: var(--white); }
.loc__h2 { margin: 0 0 18px; font: 600 clamp(48px, 5vw, 72px)/.9 var(--font-display); color: var(--white); text-wrap: balance; }
.loc__p { margin: 0 0 20px; font: 400 16px/24.8px var(--font-body); text-transform: uppercase; color: var(--white); }
.loc__nap { display: flex; flex-direction: column; align-items: center; }
.loc__link { color: var(--white); text-decoration: none; transition: opacity .3s ease-out; }
.loc__link span { display: block; }
.loc__dir { text-decoration: underline; text-underline-offset: 3px; }
.loc__social { display: flex; justify-content: center; gap: 6px; }
.loc__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; transition: opacity .3s ease-out; }
@media (hover: hover) { .loc__link:hover, .loc__icon:hover { opacity: .6; } }
.loc :focus-visible { outline: var(--focus-dark); }
@media (max-width: 759px) {
  .loc { display: block; }
  .loc__panel { display: flow-root; width: 100%; min-height: 0; }
  .loc__text { padding: 78px 20px 58px; }
  .loc__h2 { font-size: 44px; }
  .loc__link { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .loc__map { width: 100%; height: max(50vh, 330px); }
}

/* ================================================================ H9 footer + legal ribbon */
.site-footer { position: relative; background: var(--white); box-shadow: var(--shadow-footer); }
.ftr__tier { padding: 48px 0; }
.ftr__row {
  width: 100%; max-width: 1308px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-flow: row wrap; justify-content: space-between;
}
.ftr__col { width: fit-content; margin-right: 16px; display: flex; flex-direction: column; align-items: flex-start; }
.ftr__col:last-child { margin-right: 0; }
.ftr__col--logo { width: 250px; }
.ftr__logo { display: block; }
.ftr__logo img { display: block; width: var(--logo-w); height: auto; aspect-ratio: 618 / 114; }
.ftr__title { margin: 0 0 12px; font: 700 19px/1.3 var(--font-display); letter-spacing: 1.9px; color: var(--ink); }
.ftr__link {
  display: block; margin-bottom: 8px; font: 400 16px/23.47px var(--font-body); letter-spacing: .5px;
  color: var(--ink); text-decoration: none; transition: color .25s;
}
.ftr__link span { display: block; }
.ftr__col > :last-child { margin-bottom: 0; }
.ftr__glink { display: block; width: 35.19px; height: 35.19px; transition: opacity .25s; }
.gmark--35 { width: 35.19px; height: 35.19px; }
@media (hover: hover) {
  .ftr__link:hover { color: var(--primary); }
  .ftr__glink:hover { opacity: .8; }
}
body[data-page="home"] .ftr__link[data-nav="home"],
body[data-page="meet-dr-lee"] .ftr__link[data-nav="meet-dr-lee"],
body[data-page="our-office"] .ftr__link[data-nav="our-office"],
body[data-page="technologies"] .ftr__link[data-nav="technologies"],
body[data-page="services"] .ftr__link[data-nav="services"],
body[data-page="our-smiles"] .ftr__link[data-nav="our-smiles"],
body[data-page="directions"] .ftr__link[data-nav="directions"],
body[data-page="contact-us"] .ftr__link[data-nav="contact-us"],
body[data-page="post-op"] .ftr__link[data-nav="post-op"],
body[data-page="insurance"] .ftr__link[data-nav="insurance"] {
  color: var(--primary); text-decoration: underline 2px; text-underline-offset: 4px;
}
.ftr__legal {
  padding: 16px 20px; background: var(--ink); color: var(--white); text-align: center;
  font: 400 14px/20.54px var(--font-body);
}
@media (max-width: 600px) {
  .ftr__tier { padding: 32px 0; }
  .ftr__row { flex-direction: column; align-items: center; text-align: center; }
  .ftr__col, .ftr__col--logo { width: 100%; margin: 32px 0 0; align-items: center; }
  .ftr__col:first-child { margin-top: 0; }
  .ftr__logo { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .ftr__logo img { width: 220px; }
  .ftr__link {
    display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 44px; margin: 0;
  }
  .ftr__glink { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .ftr__legal { padding: 16px 20px calc(16px + 96px); }
}

/* ================================================================ reduced motion (Section 0.9) */
@media (prefers-reduced-motion: reduce) {
  .svc__track { transition: none; }
  .svc-card__img, .svc-card__title, .svc-card__sub, .svc-card__link { transition: none; }
  .svc-card:hover .svc-card__img, .svc-card:has(.svc-card__link:focus-visible) .svc-card__img { transform: none; }
  .svc-card:hover .svc-card__title, .svc-card:hover .svc-card__sub,
  .svc-card:has(.svc-card__link:focus-visible) .svc-card__title,
  .svc-card:has(.svc-card__link:focus-visible) .svc-card__sub { transform: translateY(9px); }
  .rev-card:hover, .rev-card:has(.rev-card__link:focus-visible) { transform: none; }
  .dd-panel, .nav-item:hover > .dd-panel, .nav-item.is-open > .dd-panel { transform: none; }
  .m-drawer, body.is-menu-open .m-drawer { transform: none; transition: none; }
  .m-chev { transition: none; }
}