/* ==========================================================================
   David B. Thompson DDS — Design System
   Clean editorial layout, all-black lettering, quiet tinted surfaces.
   Fonts: Instrument Sans (UI + headings) with Instrument Serif italic accents.
   ========================================================================== */

/* ---------- Fonts (self-hosted; Instrument Sans & Instrument Serif, SIL Open Font License) ---------- */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stand-ins sized to match the web fonts, so text doesn't re-wrap and jump if the fonts arrive after the
   first paint on a slow connection (measured in Chrome: Instrument Sans is ~12% wider than Apple's system font) */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 102.15%;
  ascent-override: 94.96%;
  descent-override: 24.47%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Serif Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 78.76%;
  ascent-override: 125.7%;
  descent-override: 39.36%;
  line-gap-override: 0%;
}

:root {
  /* Ink */
  --ink: #000;
  --ink-2: rgba(0, 0, 0, 0.56); /* secondary text — stays AA-readable on white */
  --ink-3: rgba(0, 0, 0, 0.55); /* placeholders, fine print — 4.6:1 on white, panel and input fills */
  --line: rgba(0, 0, 0, 0.1);
  --line-soft: rgba(0, 0, 0, 0.06);

  /* Surfaces */
  --bg: #fff;
  --fill: #f2f2f2; /* inputs, toggles, chips */
  --fill-hover: #ebebeb;

  --panel: #f3f3f3;
  --google-star: #fbbc04; /* Google's review star color */ /* the one surface for large panels: flat, neutral, no gradients */

  /* Type */
  --font: "Instrument Sans", "Instrument Sans Fallback", -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;

  /* Shape + depth */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-card: 0 0 14px rgba(13, 32, 47, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.07), 0 14px 34px rgba(0, 0, 0, 0.09);
  --shadow-photo: 2px 7px 15px rgba(0, 0, 0, 0.1), 8px 27px 28px rgba(0, 0, 0, 0.09);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout */
  --header-h: 72px;
  --strip-full: 0px; /* contact strip under the header on small screens: its full height */
  --strip-h: var(--strip-full); /* …and how much of it shows right now (0 once the page scrolls) */
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(88px, 10vw, 152px);
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-tap-highlight-color: transparent; /* no gray flash on tap; focus styles still show */
  scroll-padding-top: calc(var(--header-h) + var(--strip-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

/* the padding above keeps focused page content clear of the sticky header; the header's own links
   are always on screen, so focusing them must not scroll the page */
.site-header :is(a, button) {
  scroll-margin-top: calc(-1 * (var(--header-h) + var(--strip-h) + 20px));
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

[hidden] {
  display: none !important;
}

fieldset {
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::selection {
  background: #000;
  color: #fff;
}

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
  border-radius: 6px;
}

/* sections that in-page links move focus to don't need a ring (controls keep theirs) */
[tabindex="-1"]:not(a, button, input, select, textarea):focus {
  outline: none;
}

/* skip link: off screen until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* "Pause" / "Play" for everything that moves (WCAG 2.2.2): small grey text with a 24px tap area */
.motion-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px; /* a full-size tap target (it's the only motion control); the negative margin keeps the row's height */
  margin-block: -10px;
  padding: 2px 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.js .motion-toggle {
  display: inline-flex;
}

/* With a mouse or trackpad the reviews row already stops under the pointer, so the button is for touch
   screens only (the owners' call, Oct 20). Keep it there: on phones it's the only way to stop the motion. */
@media (hover: hover) {
  .js .motion-toggle {
    display: none;
  }
}

.motion-toggle:hover {
  color: var(--ink);
}

/* Lenis smooth scrolling */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

/* ---------- Layout ---------- */

.container {
  width: min(1328px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

/* continues the page header directly (no big gap) */
.section--follow {
  padding-top: clamp(40px, 5vw, 64px);
}

.section--tight {
  padding-block: clamp(64px, 7vw, 104px);
}

.rule {
  border-top: 1px solid var(--line);
}

/* ---------- Type ---------- */

h1,
h2,
h3,
h4 {
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.55rem + 3.1vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2rem, 1.45rem + 1.9vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.016em;
}

.h3-lg {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.45;
  letter-spacing: -0.013em;
}

/* single letters swapped to the serif italic — the signature detail */
.it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.lead {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty; /* no single word left alone on the last line */
  max-width: 34em;
}

.muted {
  color: var(--ink-2);
}

.center {
  text-align: center;
  margin-inline: auto;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn--dark {
  background: #000;
  color: #fff;
}

.btn--dark:hover {
  background: #262626;
}

.btn--fill {
  background: var(--fill);
}

.btn--fill:hover {
  background: var(--fill-hover);
}

.btn--outline {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn--outline:hover {
  border-color: rgba(0, 0, 0, 0.22);
}

.btn--sm {
  height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-row.center {
  justify-content: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

@media (pointer: coarse) {
  .text-link {
    position: relative;
  }

  .text-link::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
  }
}

.text-link:hover {
  border-color: #000;
}

.text-link svg {
  width: 14px;
  height: 14px;
}

/* ---------- Small parts ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.badge svg {
  width: 15px;
  height: 15px;
}

.stars {
  display: inline-flex;
  gap: 3px;
}

.stars svg {
  width: 15px;
  height: 15px;
  color: #000;
}

.proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.proof strong {
  font-weight: 500;
}

.proof span.muted {
  color: var(--ink-2);
}

.proof.center {
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 0.8125rem;
  font-weight: 500;
}

.icon-ring {
  display: grid;
  place-items: center;
  flex: none; /* never squeezed into an oval by long text beside it */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
}

.icon-ring svg {
  width: 20px;
  height: 20px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-block: 10px; /* comfortable tap area */
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* the tooth from the building sign, traced (assets/img/logo-tooth.svg); rim takes the text colour */
.brand-mark {
  flex: none;
  width: 20px;
  height: 22.4px;
  color: var(--ink);
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: 20px; /* breathing room after the name */
}

.nav a {
  color: var(--ink-2);
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.nav a:hover,
.nav a.is-active {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* lines up with the page edge; the tap area extends past it */
  border-radius: 50%;
  position: relative;
}

.menu-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: #000;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 25px; }

.menu-open .menu-toggle span:first-child {
  top: 21.5px;
  transform: rotate(45deg);
}

.menu-open .menu-toggle span:last-child {
  top: 21.5px;
  transform: rotate(-45deg);
}

.mobile-menu {
  display: none;
}

.header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 8px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
  line-height: 1.25;
  white-space: nowrap;
}

/* each line is a 24px-tall link (WCAG 2.5.8 target size) */
.hc-addr,
.hc-phone {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.hc-addr {
  font-size: 0.78rem;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.hc-addr:hover {
  color: var(--ink);
}

.hc-phone {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.header-strip {
  display: none;
}

/* ---------- Reviews strip (under the hero) ---------- */

.reviews-strip {
  margin-top: clamp(48px, 6vw, 80px);
}

.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 24px;
}

/* Google summary: official G, label, big rating, gold stars, count */
.g-summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.g-logo {
  width: 40px;
  height: 40px;
  flex: none;
}

.g-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}

.g-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.g-line strong {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.g-line .stars svg {
  width: 18px;
  height: 18px;
}

.g-count {
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.g-summary:hover .g-count {
  color: var(--ink);
  border-color: var(--ink);
}

/* Google's own star color, used only where a rating comes from Google */
.stars--gold svg {
  color: var(--google-star);
}

.reviews-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.review-marquee {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* soft edges: page-colour-to-clear overlays (same look as the old mask on the white page, without a mask pass every frame) */
.review-marquee::before,
.review-marquee::after,
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 6%;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg), rgba(255, 255, 255, 0));
}

.review-marquee::before,
.marquee::before {
  left: 0;
}

.review-marquee::after,
.marquee::after {
  right: 0;
  transform: scaleX(-1);
}

.marquee::before,
.marquee::after {
  width: 7%;
}

.review-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 4px 0 18px; /* room for the cards' shadows */
}

.r-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: none;
  width: 360px;
  /* as tall as a Google review card (name row, stars, five lines of text), so the row doesn't grow when live reviews arrive:
     22px padding ×2 + 2px border + 42px name row + 14px gaps ×2 + 16px stars = 132px, plus 5 lines of 0.9375rem × 1.55 */
  min-height: calc(132px + 7.27rem);
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .r-card:hover {
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: var(--shadow-float);
  }
}

.r-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 0.9375rem;
}

.r-person strong {
  display: block;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.r-person a {
  border-bottom: 1px solid var(--line);
}

.r-src {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* reviewer photo (Google) or initial (website testimonials, as on his current site) */
.r-person .g-photo,
.r-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
}

.r-person .g-photo {
  object-fit: cover;
  background: var(--panel); /* a quiet circle until the photo arrives */
}

.r-avatar {
  display: grid;
  place-items: center;
  background: var(--panel);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1;
}

/* Google "G" in the corner of each real Google review */
.r-card {
  position: relative;
}

.r-g {
  position: absolute;
  top: 24px;
  right: 22px;
  width: 20px;
  height: 20px;
}

.r-card--google .r-person {
  padding-right: 30px;
}

.r-card .stars svg {
  width: 16px;
  height: 16px;
}

.r-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* waiting for the live Google reviews: quiet grey shapes the size of a review card */
.r-card--placeholder {
  pointer-events: none;
}

.ph-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ph-dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel);
}

.ph-lines,
.ph-text {
  display: grid;
  flex: 1;
  gap: 9px;
}

.ph-text {
  margin-top: 30px;
}

.ph-lines span,
.ph-text span {
  height: 10px;
  border-radius: 5px;
  background: var(--panel);
}

.ph-lines span:first-child { width: 48%; }
.ph-lines span:last-child { width: 32%; }
.ph-text span:last-child { width: 64%; }

/* without JavaScript there are no live reviews; the summary and its links above still work */
html:not(.js) [data-review-marquee],
html:not(.js) [data-reviews-foot] {
  display: none;
}

/* Google's required attribution: "Google Maps" in Roboto (or Arial), regular, grey, on one line */
.gm-attrib {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: #5e5e5e;
  white-space: nowrap;
}

.marquee-foot--reviews {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 32px;
  margin-top: 10px;
}

.marquee-foot--reviews .motion-toggle {
  flex: none;
  margin-left: auto;
}

/* the row under the reviews only holds the Pause button, which is for touch screens */
@media (hover: hover) {
  .marquee-foot--reviews {
    display: none;
  }
}

/* reduced motion: a still row you can swipe through instead */
.review-marquee.is-static {
  overflow-x: auto;
  cursor: auto;
}

.review-marquee.is-static::before,
.review-marquee.is-static::after {
  display: none;
}

.review-marquee.is-static .review-track {
  padding-inline: var(--gutter);
}

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ---------- Section heads ---------- */

.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.split-head h2 {
  max-width: 14em;
}

.split-head p {
  color: var(--ink-2);
}

.center-head {
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}

.center-head p {
  margin: 16px auto 0;
  max-width: 30em;
  color: var(--ink-2);
}

/* ---------- Meet the dentist (home) ---------- */

.dentist-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}

.dr-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-photo);
}

.dr-photo picture {
  display: block;
  height: 100%;
}

.dr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.dentist-copy .badge {
  margin-bottom: 24px;
}

.dentist-cred {
  margin-top: 10px;
  color: var(--ink-2);
}

.dentist-copy .lead {
  margin-top: 24px;
}

.dentist-copy .lead + .lead {
  margin-top: 16px;
}

.dentist-belief {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 1px solid var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  max-width: 26em;
}

.dentist-copy .btn-row {
  margin-top: 32px;
}

/* ---------- Marquee ---------- */

.marquee {
  position: relative;
  overflow: hidden;
}

.marquee + .marquee {
  margin-top: 20px;
}

.marquee-track {
  display: flex;
  align-items: baseline;
  width: max-content;
  gap: 28px;
  padding-block: 10px;
}

.js .marquee-track {
  animation: marquee var(--speed, 70s) linear infinite;
}

.motion-paused .marquee-track {
  animation-play-state: paused;
}

.marquee-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.marquee--reverse .marquee-track {
  animation-direction: reverse;
}

@media (hover: hover) {
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

@keyframes marquee {
  to {
    transform: translateX(calc(-50% - 14px));
  }
}

.m-item {
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.m-item.it {
  font-size: clamp(1.65rem, 1.15rem + 1.75vw, 2.75rem);
  letter-spacing: -0.005em;
}

.m-sep {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.2rem);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.2);
}

/* ---------- Segmented toggle ---------- */

.segmented {
  display: flex;
  width: max-content;
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding: 4px;
  border-radius: 999px;
  background: var(--fill);
}

.segmented button,
.segmented a {
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.segmented button[aria-selected="true"],
.segmented a.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* ---------- Bento ---------- */

/* cards wait just off-screen before they glide in; keep them from widening the page */
.section--slides {
  overflow-x: hidden; /* fallback for older Safari */
  overflow-x: clip;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}

.bento.is-leaving,
.bento.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

.bento-card {
  position: relative;
  min-height: 480px;
  background: var(--panel);
  padding: 32px 36px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}

.js .bento-card {
  will-change: transform, opacity;
}

.bento-card--wide { grid-column: span 7; }
.bento-card--narrow { grid-column: span 5; }

.bento-text {
  position: relative;
  z-index: 2;
  max-width: 390px;
  background: var(--panel); /* copy never sits on a mockup, even with larger text */
}

.bento-text p {
  margin-top: 4px;
  color: var(--ink-2);
}

.bento-card--bottom .bento-text {
  position: absolute;
  left: 36px;
  bottom: 32px;
}

.bento-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Device mockups (iPhone-style) ---------- */

.phone {
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  position: absolute;
  width: 268px;
  height: 556px;
  border-radius: 48px;
  /* natural titanium band */
  background: linear-gradient(145deg, #f1f0ec 0%, #c8c6c0 18%, #ebeae6 42%, #b7b5af 70%, #dedcd7 100%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 0 0 0 2px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 34px 64px -18px rgba(0, 0, 0, 0.32);
}

/* black glass border around the display */
.phone::before {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 45px;
  background: #060606;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a6a49e, #e6e5e1 55%, #b9b7b1);
}

.phone-btn.b-action { left: -2.5px; top: 96px; height: 24px; }
.phone-btn.b-vol-up { left: -2.5px; top: 138px; height: 42px; }
.phone-btn.b-vol-down { left: -2.5px; top: 190px; height: 42px; }
.phone-btn.b-power { right: -2.5px; top: 156px; height: 66px; }

.phone-screen {
  position: absolute;
  inset: 9px;
  border-radius: 39px;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: var(--sys);
  font-size: 12px;
  letter-spacing: -0.01em;
}

.phone-island {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  width: 78px;
  height: 23px;
  margin-left: -39px;
  border-radius: 999px;
  background: #000;
}

.status-bar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 86px 1fr;
  align-items: center;
  height: 39px;
  padding-top: 1px;
  font-family: var(--sys);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sb-time {
  justify-self: center;
  padding-left: 8px;
}

.sb-icons {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
}

.sb-icons .sb-signal { width: 15px; height: 10px; }
.sb-icons .sb-wifi { width: 14px; height: 10px; }
.sb-icons .sb-battery { width: 24px; height: 11.5px; --sb-bg: #fff; }

.home-indicator {
  position: absolute;
  z-index: 4;
  bottom: 7px;
  left: 50%;
  width: 92px;
  height: 4px;
  margin-left: -46px;
  border-radius: 3px;
  background: #000;
}

/* Safari, address bar at the top */
.safari-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin: 0 10px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.12);
  font-size: 11.5px;
}

.safari-bar .aa {
  font-weight: 600;
  font-size: 10px;
}

.safari-bar .aa b {
  font-size: 12.5px;
}

.safari-bar .url {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.safari-bar .url svg {
  width: 8px;
  height: 10px;
  color: rgba(0, 0, 0, 0.5);
}

.safari-bar .reload {
  width: 12px;
  height: 12px;
}

/* the practice website's real appointment request page, captured on an iPhone-size screen
   (390 x 722 CSS px; notes/generators/apptcapture.mjs) and shown below the address bar */
.phone-screen .web-shot {
  position: absolute;
  left: 0;
  top: 76px;
  width: 100%;
  height: auto;
}

/* Messages */
.msgs-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 8px 8px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.14);
  background: rgba(249, 249, 249, 0.96);
}

.msgs-head .back {
  display: flex;
  align-items: center;
  color: #007aff;
  font-size: 12px;
}

.msgs-head .back svg {
  width: 14px;
  height: 14px;
  transform: scaleX(-1);
}

.msgs-head .video {
  justify-self: end;
  width: 18px;
  height: 18px;
  color: #007aff;
}

.msgs-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
}

.msgs-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #a9aeb9, #858b97);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.msgs-thread {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 0;
  font-size: 12px;
  line-height: 1.32;
}

.msgs-time {
  margin: 0 0 8px;
  text-align: center;
  font-size: 9px;
  color: #8e8e93;
}

.msgs-time b {
  font-weight: 600;
}

.bub {
  max-width: 80%;
  padding: 7px 11px;
  border-radius: 17px;
}

.bub--out {
  align-self: flex-end;
  background: linear-gradient(180deg, #1a8dff, #0a7cff);
  color: #fff;
}

.bub--in {
  align-self: flex-start;
  background: #e9e9eb;
}

.bub-link {
  align-self: flex-start;
  width: 76%;
  border-radius: 17px;
  overflow: hidden;
  background: #e9e9eb;
  margin-top: 2px;
}

.bub-link .thumb {
  display: grid;
  place-items: center;
  height: 62px;
  background: #f7f7f8;
}

.bub-link .thumb svg {
  width: 22px;
  height: 22px;
}

.bub-link .meta {
  padding: 7px 11px 8px;
  line-height: 1.3;
}

.bub-link strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
}

.bub-link small {
  font-size: 9.5px;
  color: #8e8e93;
}

.msgs-status {
  align-self: flex-end;
  margin: 1px 4px 6px 0;
  font-size: 9px;
  color: #8e8e93;
}

/* Phone call */
.phone-screen.call {
  color: #fff;
  background:
    radial-gradient(120% 70% at 50% 0%, #50555e 0%, rgba(80, 85, 94, 0) 70%),
    linear-gradient(180deg, #2b2e33 0%, #17181b 100%);
}

.call-info {
  padding: 30px 18px 0;
  text-align: center;
}

.call-state {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.call-name {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.call-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 238px; /* low on the screen, like iOS; the phone is anchored so this row peeks above the card */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
  padding: 0 22px;
}

.call-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
}

.call-btn i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
}

.call-btn svg {
  width: 21px;
  height: 21px;
}

.call-btn.end i {
  background: #ff3b30;
}

.call-btn.end svg {
  transform: rotate(135deg);
}

/* cards that sit beside a phone: a Maps place card and a calendar */
.map-card,
.cal-card {
  position: absolute;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-float);
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.map-card {
  overflow: hidden;
}

.mp-map {
  position: relative;
  aspect-ratio: 272 / 104;
  background: #f1eee8;
}

.mp-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* the pin's point rests on the office, in the middle of the map */
.mp-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -24px 0 0 -10px;
  border-radius: 50% 50% 50% 0;
  background: #e8453c;
  transform: rotate(-45deg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), -2px 2px 5px rgba(0, 0, 0, 0.24);
}

.mp-pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

.mp-body {
  padding: 12px 14px 4px;
}

.mp-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mp-meta {
  margin-top: 1px;
  color: #6e6e73;
  font-size: 11px;
}

.mp-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0 6px;
}

.bento-visual .mp-btn {
  flex: 1;
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 9px;
  background: #f0f0f3;
  color: #0060df;
  font-size: 11.5px;
  font-weight: 600;
  pointer-events: auto;
  transition: background 0.2s ease;
}

.bento-visual .mp-btn--go {
  background: #0060df;
  color: #fff;
}

@media (hover: hover) {
  .bento-visual .mp-btn:hover { background: #e5e5ea; }
  .bento-visual .mp-btn--go:hover { background: #0052c2; }
}

.mp-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.mp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 11px;
}

.mp-row span {
  color: #6e6e73;
}

/* iOS-style month: today in red, the appointment circled */
.cal-card {
  padding: 14px 14px 12px;
}

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-month {
  color: #d70015;
}

.cal-year {
  color: #6e6e73;
  font-weight: 600;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 4px;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cal-grid span {
  position: relative;
  z-index: 0;
}

.cal-grid .cal-dow {
  color: #6e6e73;
  font-size: 9px;
  font-weight: 600;
}

.cal-grid .we {
  color: #6e6e73;
}

.cal-grid .today {
  color: #d70015;
  font-weight: 700;
}

.cal-grid .appt {
  color: #fff;
  font-weight: 700;
}

.cal-grid .appt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: #000;
}

.cal-event {
  position: relative;
  margin-top: 8px;
  padding: 8px 10px 8px 17px;
  border-radius: 10px;
  background: #f2f2f6;
  line-height: 1.35;
}

.cal-event::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: #ff3b30;
}

.cal-event strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.cal-event small {
  display: block;
  color: #6e6e73;
  font-size: 10.5px;
}

.ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ui-chips span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 0.6875rem;
  font-weight: 500;
}

/* credit card, ISO card proportions */
.credit-card {
  position: absolute;
  width: 300px;
  aspect-ratio: 85.6 / 53.98;
  padding: 18px 20px 16px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  background:
    url("../img/card-waves.svg") center / cover no-repeat,
    linear-gradient(135deg, #222225 0%, #0c0c0d 52%, #1a1a1c 100%);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset, 0 2px 4px rgba(0, 0, 0, 0.18), 0 26px 48px -14px rgba(0, 0, 0, 0.45);
}

.credit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.07) 100%);
}

.cc-top,
.cc-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cc-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1;
}

.cc-mark small {
  margin-left: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.cc-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-chip {
  width: 38px;
  height: 28px;
}

.cc-contactless {
  width: 15px;
  height: 18px;
  opacity: 0.75;
}

.cc-mid {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.cc-label {
  display: block;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.cc-number {
  display: block;
  margin: 3px 0 12px;
  font-size: 18px;
  letter-spacing: 0.11em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 -0.5px 0 rgba(255, 255, 255, 0.18);
}

.cc-bottom > div span:not(.cc-label) {
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.cc-bottom > div:last-child {
  text-align: right;
}

/* bento mock placement (all upright; anchored to card edges) */
.bv-request .phone { right: 44px; top: 132px; }
/* sits just left of the phone: it overlaps only the phone's metal frame, never the screen
   (the screen shows the real website), and never runs past the card's left edge */
.bv-request .map-card,
.bv-request .cal-card { left: max(20px, calc(100% - 578px)); bottom: 32px; width: min(272px, calc(100% - 330px)); }

.bv-messages .phone,
.bv-call .phone { left: 50%; margin-left: -134px; top: 150px; }
/* anchored to the card's bottom: audio / FaceTime / mute and their labels sit just above the edge */
.bv-call .phone { top: auto; bottom: -226px; }

/* one card, centred like the credit card in "Paying for treatment" */
.bv-insure .ins-card { left: 50%; top: 186px; width: 336px; margin-left: -168px; font-size: 12.44px; }

/* the whole chart fits on desktop; the rest of the form runs off the bottom of the card */
/* the exam form sits centred with the card's grey showing on both sides (never cut off at one edge) */
.bv-exam .exam-sheet { left: 0; right: 0; margin-inline: auto; top: 144px; width: min(660px, calc(100% - 72px)); }

/* the insurance card and credit card link to the payment section and lift on hover */
.bento-visual a.ins-card,
.bento-visual a.credit-card {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

@media (hover: hover) {
  .bento-visual a.ins-card:hover,
  .bento-visual a.credit-card:hover {
    transform: translateY(-6px);
  }

  .bento-visual a.ins-card:hover {
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08), 0 36px 64px -18px rgba(0, 0, 0, 0.4);
  }

  .bento-visual a.credit-card:hover {
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset, 0 4px 10px rgba(0, 0, 0, 0.2), 0 40px 70px -18px rgba(0, 0, 0, 0.6);
  }
}

.bento-visual a.ins-card:active,
.bento-visual a.credit-card:active {
  transform: translateY(-3px);
}

.bento-visual a.ins-card:focus-visible,
.bento-visual a.credit-card:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

/* dental insurance ID card (a generic carrier, no real branding); everything inside is sized in em,
   so the card scales as one piece with its font-size */
.ins-card {
  --ic-ink: #1b3a66;
  position: absolute;
  width: 270px;
  aspect-ratio: 85.6 / 53.98;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #14181d;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.2;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06), 0 20px 40px -16px rgba(0, 0, 0, 0.24);
}

.ic-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3em 1.5em 0;
  color: var(--ic-ink);
}

.ic-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ic-brand b {
  font-weight: 700;
}

.ic-logo {
  width: 1.45em;
  height: 1.45em;
}

.ic-type {
  padding: 0.2em 0.5em;
  border: 1.5px solid currentColor;
  border-radius: 0.35em;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ic-name {
  margin-top: auto;
  padding: 0 1.5em;
}

.ic-label {
  display: block;
  color: #67707b;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ic-value {
  display: block;
  margin-top: 0.25em;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.ic-name .ic-value {
  font-size: 1.45em;
  letter-spacing: 0.04em;
}

.ic-fields {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.5em 0;
}

.ic-band {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 1.15em 2.4em;
  background: var(--ic-ink);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* first exam: a printed comprehensive exam form, filled in (assets/img/exam-form.svg) */
.exam-sheet {
  position: absolute;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.07), 0 18px 40px -12px rgba(0, 0, 0, 0.18);
}

.exam-sheet img {
  display: block;
  width: 100%;
  height: auto;
}



.bv-pay .credit-card { left: 50%; top: 186px; width: 336px; margin-left: -168px; }

/* an empty review form waiting for the visitor — never someone else's review */
.review-compose {
  position: absolute;
  left: 50%;
  top: 172px;
  width: 340px;
  margin-left: -170px;
  padding: 22px 22px 18px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-float);
}

.rc-place {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.rc-sub {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--ink-2);
}

.rc-stars {
  display: flex;
  gap: 8px;
  margin: 18px 0 16px;
  color: #dadce0; /* unrated stars */
}

.rc-stars svg {
  width: 28px;
  height: 28px;
}

.rc-field {
  height: 84px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.rc-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.rc-btn {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
}

.proof .g-mark {
  width: 18px;
  height: 18px;
  flex: none;
}

.proof a {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease;
}

.proof a:hover {
  border-color: #000;
}

.bento-text .text-link {
  margin-top: 14px;
}

/* ---------- FAQ + booking ---------- */

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

/* source order is heading, form, questions (the order phones show); wide screens move the form to the right */
.book-title {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: clamp(32px, 5vw, 72px);
}

.book-grid > .faq {
  grid-column: 1;
  grid-row: 2;
}

.book-grid > .form-frame {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-wrap: pretty;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.faq-q .plus {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.faq-q .plus::before,
.faq-q .plus::after {
  content: "";
  position: absolute;
  background: #000;
  transition: transform 0.35s var(--ease);
}

.faq-q .plus::before {
  left: 0;
  right: 0;
  top: 6.25px;
  height: 1.5px;
}

.faq-q .plus::after {
  top: 0;
  bottom: 0;
  left: 6.25px;
  width: 1.5px;
}

.faq-item.is-open .plus::after {
  transform: scaleY(0);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.faq-a > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.45s; /* stays readable until the close animation ends */
}

.faq-item.is-open .faq-a > div {
  visibility: visible;
  transition-delay: 0s;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a p {
  padding: 0 40px 22px 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* form sits in a neutral tray */
.form-frame {
  padding: 10px;
  border-radius: 42px;
  background: var(--panel);
}

.form-card {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4.5vw, 56px);
  border-radius: var(--r-xl);
  background: #fff;
}

.form-card > h2,
.form-card > .h3-lg {
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.form-card > p.muted {
  margin: 8px auto 0;
  max-width: 28em;
  text-align: center;
  font-size: 0.9375rem;
}

.form-card form {
  margin-top: 32px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.field-group {
  margin-top: 24px;
}

.field-group .field-label {
  display: block;
  margin-bottom: 10px;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  font-size: 1rem; /* 16px: smaller fields make iPhones zoom in when tapped */
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

textarea.input {
  height: 104px;
  padding: 14px 20px;
  border-radius: 22px;
  resize: vertical;
}

.input::placeholder {
  color: var(--ink-3);
}

.input:focus {
  outline: none;
  background: #ececec;
  box-shadow: 0 0 0 1.5px #000;
}

.hint {
  font-size: 0.75rem;
  color: var(--ink-3);
  padding-left: 20px;
}

.options {
  display: grid;
  gap: 8px;
}

.options--2 {
  grid-template-columns: 1fr 1fr;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fill);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: background 0.2s ease, color 0.2s ease;
}

.option:hover {
  background: var(--fill-hover);
}

.option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option .ring {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.5); /* empty state meets 3:1 */
  transition: box-shadow 0.2s ease;
}

.option input:checked + .ring {
  box-shadow: inset 0 0 0 5px #000;
}

.option:has(input:checked) {
  color: var(--ink);
}

.option:has(input:focus-visible) {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* several choices allowed (days, times): a square box instead of a round dot */
.option .ring--box {
  position: relative;
  border-radius: 5px;
}

.option input:checked + .ring--box {
  background: #000;
  box-shadow: none;
}

.option input:checked + .ring--box::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* spam trap: invisible to people, filled in by bots */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  margin-top: 16px;
  text-align: center;
  font-size: 0.9375rem;
  color: #b3261e;
}

.form-done {
  padding: 28px 8px 8px;
  text-align: center;
}

.form-done:focus {
  outline: none;
}

.form-done p + p {
  margin-top: 10px;
}

.form-done-title {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.form-done-preview {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.form-submit {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.form-note {
  margin-top: 16px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-2); /* fine print still has to pass contrast */
}

.form-note a {
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 2px;
}

/* ---------- Closing call to action ---------- */

.cta {
  position: relative;
  padding-block: clamp(120px, 14vw, 200px);
  overflow: clip;
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: center;
}

.cta h2 {
  margin-bottom: 16px;
}

.cta p.muted {
  max-width: 30em;
  margin: 0 auto 36px;
}

.cta .proof {
  margin-top: 28px;
}

/* ---------- Inner page hero ---------- */

.page-hero {
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 112px);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}

.page-hero .badge {
  margin-bottom: 28px;
}

.page-hero h1 {
  margin-bottom: 24px;
}

.page-hero .btn-row {
  margin-top: 36px;
}

.page-hero--solo h1 {
  max-width: 13em;
}

/* a big photo under the heading: wide on desktop, tall on phones */
.page-hero-media {
  position: relative;
  margin: clamp(40px, 5vw, 64px) 0 0;
  aspect-ratio: 2 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-photo);
}

.page-hero-media picture {
  display: block;
  height: 100%;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* Services and New Patients on desktop: the photo sits beside the heading instead of under it, so the
   page's content starts within the first screen. Tablets and phones keep it under the buttons. */
@media (min-width: 961px) {
  .page-hero--split .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(40px, 4.5vw, 72px);
  }

  .page-hero--split .page-hero-media {
    margin: 0;
    aspect-ratio: 5 / 4;
  }
}

.cta--simple {
  padding-block: clamp(96px, 10vw, 152px);
}

.options--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.options--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.option--compact {
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

/* ---------- Legal pages (privacy, accessibility, Good Faith Estimate) ---------- */

.legal {
  max-width: 46rem;
}

.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.4;
  margin: 44px 0 10px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 12px;
}

.legal ul {
  list-style: disc;
  padding-left: 1.25em;
}

.legal li + li {
  margin-top: 8px;
}

.legal strong {
  color: var(--ink);
  font-weight: 500;
}

/* plain underlined links inside running text */
.legal a,
.inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.legal a:hover,
.inline-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- About ---------- */

.practice-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(40px, 7vw, 112px);
  align-items: start;
}

.practice-intro .body + .body {
  margin-top: 16px;
}

.body {
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

/* portraits: same head-and-shoulders 4:5 crop for everyone (notes/generators/team.py) */
.team-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--panel);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.team-card h3 {
  font-size: 1.125rem;
  line-height: 1.4;
}

.team-card .role {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-bottom: 12px;
}

.team-card p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* "Off the clock": each person's interests, pinned to the bottom of the card */
.team-card .team-off {
  margin-top: auto;
  padding-top: 20px;
}

.team-card .team-off-label {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--ink);
}

.team-card .ui-chips span {
  font-size: 0.75rem;
}

/* ---------- Services ---------- */

.cat-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--strip-h) + 16px);
  z-index: 40;
  margin-top: calc(var(--section) * -0.5);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.cat-nav .segmented {
  margin-bottom: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.cat-nav .segmented::-webkit-scrollbar {
  display: none;
}

.cat-nav .segmented a {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cat-nav {
    padding-inline: var(--gutter);
  }

  .cat-nav .segmented a {
    padding: 0 14px;
    font-size: 0.875rem;
  }
}

/* clear the sticky category bar too when jumping to a section */
.service-cat {
  scroll-margin-top: 72px;
}

.service-cat + .service-cat {
  margin-top: clamp(80px, 9vw, 136px);
}

.cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 32px;
}

.cat-head p {
  color: var(--ink-2);
}

.cat-head .count {
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.proc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.proc-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .proc-card:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: var(--shadow-card);
  }
}

.proc-card .num {
  display: block;
  margin-bottom: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-3);
}

.proc-card h3 {
  font-size: 1.125rem;
  margin-bottom: 6px;
}

.proc-card p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* ---------- New patients ---------- */

/* three steps in one bordered panel; each column shares the same rows
   (number, title, text, action) so everything lines up across it */
.process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
}

.process-step {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(28px, 3vw, 40px);
}

.process-step + .process-step {
  border-left: 1px solid var(--line);
}

.ps-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
}

.process-step h3 {
  margin-top: 28px;
  margin-bottom: 8px;
}

.process-step p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.process-step .text-link {
  justify-self: start;
  align-self: end;
  margin-top: 28px;
}

/* payment, insurance & financing: three comparable cards. They share one set of rows
   (question, title, price line, list, button, fine print), so every part lines up */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: 20px;
}

.plan-panel {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

.plan-panel--featured {
  border-color: transparent;
  background: var(--panel);
}

.plan-kicker {
  color: var(--ink-2);
}

.plan-name {
  margin-top: 6px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 14px;
}

.plan-price strong {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.plan-price span {
  color: var(--ink-2);
}

.plan-price b {
  margin-left: 2px;
  font-weight: 500;
  color: var(--ink);
}

.plan-price + .plan-list {
  margin-top: 18px;
}

/* a plain list, no rules between items (Oct 21) */
.plan-list {
  margin-top: 24px;
  margin-bottom: 28px;
}

.plan-list li {
  padding: 6px 0;
}

.plan-cta {
  justify-self: start;
}

.plan-fine {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contact-list {
  display: grid;
  gap: 16px;
}

.contact-card {
  display: flex;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.contact-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 4px;
}

.contact-card p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.contact-card p strong,
.contact-card p a {
  color: var(--ink);
  font-weight: 500;
}

.contact-card .text-link {
  margin-top: 12px;
}

/* Contact: the building (so it's easy to spot from the parking lot) beside the map */
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
}

.visit-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
}

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

.visit-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* the map is another page inside a frame, so show the site's focus ring around it when tabbed to */
.map-frame:focus-within {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* mouse wheel scrolls the page, not the map, until the map is clicked (main.js) */
@media (hover: hover) {
  .js .map-frame:not(.is-live) iframe {
    pointer-events: none;
  }

  .js .map-frame:not(.is-live) {
    cursor: pointer;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px 64px;
  padding-block: 56px;
}

.footer-brand .footer-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.footer-brand p {
  max-width: 24em;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 32px 64px;
}

.footer-cols h2 {
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.footer-cols li {
  margin-bottom: 8px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.footer-cols a {
  transition: color 0.2s ease;
}

.footer-cols a:hover {
  color: var(--ink);
}

.footer-bottom {
  border-top: 1px solid var(--line);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-block: -4px; /* the links' tap padding doesn't push the row out of line */
}

.footer-legal a {
  display: inline-block;
  padding-block: 4px; /* a comfortable tap target without changing the look */
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--ink);
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 24px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

/* ---------- Scroll reveals ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* The big first-screen photos rise in but never start invisible: Chrome only counts a photo as the page's
   main content (LCP) once it has been painted visibly, and a fade from 0 cost the homepage seconds on phones */
.js .page-hero-media[data-reveal] {
  opacity: 1;
}

/* safety net: if the page script hasn't started within a few seconds, show everything */
.reveal-off [data-reveal],
.reveal-off .bento-card {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Scroll-linked effects: bento glide ---------- */

/* Where the browser has scroll-driven animations, these run here, in step with the scroll and off the
   main thread; main.js only drives them in browsers without them. */

.bento-card:nth-child(even) {
  --from: 1; /* cards in the right-hand spot (or every other stacked card) come in from the right */
}

/* slide only, no fade: faded text, even off screen, reads as low contrast to automated accessibility scans */
@keyframes bento-glide {
  from {
    transform: translate3d(calc(var(--from, -1) * min(220px, 16vw)), 0, 0);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* mouse and trackpad: from the moment a card's top meets the bottom of the screen until it's 60% of the way up */
    @media (hover: hover) {
      .js .bento-card {
        animation-name: bento-glide;
        animation-duration: auto;
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out cubic, as before */
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: cover 0% cover 60vh;
      }
    }

  }
}

/* touch screens: each card glides in once as it comes into view (main.js adds .in-view, like the reveals) */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .js .bento-card {
    transition: transform 1.1s var(--ease);
  }

  .js .bento-card:not(.in-view) {
    transform: translate3d(calc(var(--from, -1) * min(220px, 16vw)), 0, 0);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .hc-addr {
    display: none;
  }
}

@media (max-width: 1120px) {
  .nav {
    gap: 22px;
  }

  .bento-card--wide,
  .bento-card--narrow {
    grid-column: span 6;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  :root {
    --strip-full: 34px;
  }

  .header-contact {
    display: none;
  }

  .header-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: var(--strip-full);
    padding: 0 var(--gutter);
    box-shadow: inset 0 1px 0 var(--line-soft); /* a line that takes no space, so the fold below adds up exactly */
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    transition: height 0.25s var(--ease), opacity 0.2s ease, visibility 0s;
  }

  /* Once the page scrolls, the strip folds into the header (main.js adds .strip-hidden). The header gains
     the same amount as bottom margin while the strip shrinks, so nothing below it moves. */
  html.strip-hidden .header-strip {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 0.25s var(--ease), opacity 0.15s ease, visibility 0s 0.25s;
  }

  html.strip-hidden .site-header {
    margin-bottom: var(--strip-full);
  }

  /* sticky things below the header (the Services category bar, the phone menu, anchor jumps) close up too */
  html.strip-hidden {
    --strip-h: 0px;
  }

  .header-strip a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-2);
  }

  .header-strip a:last-child {
    font-weight: 500;
  }

  /* the strip's links fill its full height, for an easy tap */
  .header-strip a {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* full-screen menu: covers everything below the header; the page behind is locked */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h) - var(--strip-h));
    height: calc(100dvh - var(--header-h) - var(--strip-h));
    padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line-soft);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.4s var(--ease), visibility 0.3s;
  }

  .menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* plain words with room between them, no divider lines (like the isomeet reference) */
  .mobile-menu a:not(.btn) {
    display: block;
    padding: 12px 0;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
  }

  .mobile-menu .btn-row {
    flex-direction: column;
    margin-top: auto;
    padding-top: 28px;
  }

  .mobile-menu .btn-row .btn {
    width: 100%;
    height: 52px;
  }

  /* bigger tap targets for small buttons and toggles */
  .btn--sm,
  .segmented button,
  .segmented a {
    height: 44px;
  }

  /* Meet the dentist: name and credentials first, then the photo, then the bio */
  .dentist-grid {
    gap: 0;
  }

  .dentist-copy {
    display: contents;
  }

  .dentist-copy > * {
    order: 5;
  }

  .dentist-copy > .badge {
    order: 1;
    justify-self: start;
  }

  .dentist-copy > h2 {
    order: 2;
  }

  .dentist-copy > .dentist-cred {
    order: 3;
  }

  .dentist-grid > .dr-photo {
    order: 4;
    margin-top: 28px;
  }

  .book-grid,
  .contact-grid,
  .practice-intro,
  .dentist-grid {
    grid-template-columns: 1fr;
  }

  .dr-photo {
    aspect-ratio: 5 / 4;
  }

  .split-head,
  .cat-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .proc-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process,
  .plans {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .process-step,
  .plan-panel {
    grid-row: auto;
    grid-template-rows: none;
  }

  .process-step + .process-step {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .plan-panel + .plan-panel {
    margin-top: 20px;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-card--wide,
  .bento-card--narrow {
    grid-column: 1 / -1;
  }

  /* booking (stacked): heading, then the request form, then the questions (same as the source order) */
  .book-title {
    margin-bottom: 24px;
  }

  .book-title,
  .book-grid > .faq,
  .book-grid > .form-frame {
    grid-column: auto;
    grid-row: auto;
  }

  .book-grid > .form-frame {
    margin-bottom: 48px;
  }

  .footer-cols {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
}

@media (max-width: 640px) {
  :root {
    --section: 72px; /* less empty scrolling between sections */
    --header-h: 64px;
    --strip-full: 40px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .header-actions .btn {
    display: none;
  }

  .page-hero .btn-row .btn,
  .cta .btn-row .btn {
    flex: 1 1 100%;
  }

  .proc-grid,
  .team-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* phones: a compact row per person, portrait on the left, so eight cards don't become a long photo scroll.
     The portrait strip is as tall as the card, so the photo is cropped from one about 280px wide:
     the images' sizes attribute says 280px on phones, not the 116px column width */
  .team-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .team-photo {
    aspect-ratio: auto;
    min-height: 145px;
  }

  .team-body {
    padding: 18px;
  }

  .option {
    gap: 10px;
    padding: 0 14px;
    white-space: nowrap;
  }

  /* form choices: one tidy row each; short choices become chips (filled when selected) */
  .options--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .options--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .options--3 .option,
  .options--5 .option {
    justify-content: center;
    gap: 0;
    padding: 0 4px;
    text-align: center;
  }

  .options--3 .ring,
  .options--5 .ring {
    display: none;
  }

  .options--3 .option:has(input:checked),
  .options--5 .option:has(input:checked) {
    background: #000;
    color: #fff;
  }

  /* services: all four category tabs fit on screen (they wrap to two rows at 320px or with larger text) */
  .cat-nav .segmented {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 26px;
  }

  .cat-nav .segmented a {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 6px;
    font-size: 0.8125rem;
  }

  .proc-card {
    padding: 22px 20px;
  }

  .proc-card .num {
    margin-bottom: 14px;
  }

  .team-card .ui-chips span,
  .form-note {
    font-size: 0.8125rem;
  }

  /* footer links: taller tap areas without spreading the list out */
  .footer-cols li {
    margin-bottom: 0;
    padding-block: 6px;
  }

  .footer-cols a {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
  }

  .bento-card {
    min-height: 490px;
    padding: 28px 24px;
  }

  .r-card {
    width: min(300px, 78vw);
    min-height: calc(128px + 7.27rem); /* 20px padding instead of 22px */
    padding: 20px;
  }

  .dr-photo {
    aspect-ratio: 4 / 5;
  }

  .bento-card--bottom .bento-text {
    left: 24px;
    right: 24px;
    bottom: 28px;
  }

  .form-frame {
    padding: 6px;
    border-radius: 34px;
  }

  /* mockups on phones: the device is the story — center it, drop the overlays */
  .bv-request .phone {
    left: 50%;
    right: auto;
    top: 140px; /* clears the copy above it */
    margin-left: -134px;
  }

  .bv-request .map-card,
  .bv-request .cal-card {
    display: none;
  }

  .bv-insure .ins-card { width: 290px; margin-left: -145px; top: 210px; font-size: 10.74px; }
  /* the whole exam form fits the card, centred, with grey on both sides */
  .bv-exam .exam-sheet { top: 160px; width: calc(100% - 32px); }

  .bv-pay .credit-card { width: 290px; margin-left: -145px; top: 210px; }
  .bv-reviews .review-compose { left: 16px; right: 16px; width: auto; margin-left: 0; top: 160px; }

  .visit-grid {
    grid-template-columns: 1fr;
  }

  .map-frame {
    aspect-ratio: 4 / 3;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .footer-bottom .container {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .page-hero-media {
    aspect-ratio: 4 / 5;
  }
}

/* 400% zoom (320px wide): the mockups start below the longer copy */
@media (max-width: 360px) {
  .bento-visual {
    top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .marquee-track {
    animation: none;
  }

  .js .motion-toggle {
    display: none; /* nothing moves, so nothing to pause */
  }
}

.nowrap {
  white-space: nowrap;
}

/* status bar on the dark call screen */
.phone-screen.call .status-bar {
  color: #fff;
}

.phone-screen.call .sb-battery {
  --sb-bg: #1c1d20;
}

.phone-screen.call .home-indicator {
  background: #fff;
}

/* two cards per row (961–1120px): tighter mock placement */
@media (min-width: 961px) and (max-width: 1120px) {
  /* the phone runs just off the card's edge; the website on its screen stays fully in view */
  .bv-request .phone {
    right: -18px;
  }

  .bv-request .map-card,
  .bv-request .cal-card { left: 16px; width: min(228px, calc(100% - 260px)); }
  .bv-exam .exam-sheet { width: calc(100% - 40px); }

  .bv-reviews .review-compose { top: 160px; }
}

/* ==========================================================================
   Home hero: three office photos cross-fade full screen,
   stay put, and the page slides up over them like a sheet as you scroll.
   ========================================================================== */

.vhero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  height: 100svh;
  margin-top: calc(-1 * (var(--header-h) + var(--strip-full)) - 1px); /* runs up under the see-through header, incl. its 1px border */
  overflow: hidden;
  color: #fff;
  background: #16181b;
}

.vhero-media {
  position: absolute;
  inset: 0;
  background: #16181b;
}

/* darker under the headline, and a band at the top so the menu reads on bright photos */
.vhero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.55) 104px, rgba(0, 0, 0, 0) 270px),
    linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.28) 66%, rgba(0, 0, 0, 0) 86%); /* white text 4.5:1+ on all four photos */
}

.vhero-slides {
  position: absolute;
  inset: 0;
  transform-origin: 50% 60%;
  will-change: transform; /* the scroll zoom gets its own GPU layer from the start, so the first scroll doesn't hitch */
}

/* The incoming photo fades in on top while the outgoing one stays fully visible underneath, then
   drops out once covered. (Fading both at once let the dark backdrop show through mid-fade, so the
   whole screen dimmed for a moment every change.) */
.vhero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0s 1.6s;
}

/* until the page has finished loading only the first photo is in play, so the other three
   (lazy-loaded) don't compete with it or hold up the rest of the page */
.vhero:not(.is-ready) .vhero-slide:not(.is-active) {
  display: none;
}

.vhero-slide.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity 1.6s ease;
}

.vhero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* a slow push-in while each photo is on screen; it holds through the photo's fade-out */
.vhero-slide.is-zooming img {
  animation: vhero-drift 9s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
}

.vhero.is-paused .vhero-slide img {
  animation-play-state: paused;
}

@keyframes vhero-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.vhero-content {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(64px, 11vh, 132px);
  will-change: transform, opacity;
}

.vhero h1 {
  max-width: 12.5em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

.vhero .lead {
  max-width: 30em;
  color: #fff;
}

/* focus rings turn white where the background is a photo (the skip link opens over it too) */
.vhero :focus-visible,
.skip-link:focus-visible,
body:not(.menu-open) .site-header.is-over-hero :focus-visible {
  outline-color: #fff;
}

.btn--light {
  background: #fff;
  color: #000;
}

.btn--glass {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (hover: hover) {
  .btn--light:hover {
    background: rgba(255, 255, 255, 0.86);
  }

  .btn--glass:hover {
    background: rgba(255, 255, 255, 0.22);
  }
}

/* the rest of the page: a white sheet with rounded top corners that rises over the video */
.page-sheet {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -28px 60px -24px rgba(0, 0, 0, 0.45);
}

.sheet-reviews {
  padding-block: clamp(36px, 5vw, 56px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}

.sheet-reviews .reviews-strip {
  margin-top: 0;
}

/* header while it sits over the video: see-through, white text; back to normal once the sheet slides under it */
.site-header {
  transition: background-color 0.35s ease, border-color 0.35s ease, margin-bottom 0.25s var(--ease);
}

body:not(.menu-open) .site-header.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:not(.menu-open) .site-header.is-over-hero .brand-name,
body:not(.menu-open) .site-header.is-over-hero .hc-phone,
body:not(.menu-open) .site-header.is-over-hero .header-strip a {
  color: #fff;
}

body:not(.menu-open) .site-header.is-over-hero .brand-mark {
  color: #fff;
  --logo-face: transparent;
}

body:not(.menu-open) .site-header.is-over-hero .nav a,
body:not(.menu-open) .site-header.is-over-hero .hc-addr,
body:not(.menu-open) .site-header.is-over-hero .header-strip a:first-child {
  color: #fff;
}

body:not(.menu-open) .site-header.is-over-hero .nav a:hover {
  color: #fff;
}

body:not(.menu-open) .site-header.is-over-hero .header-contact {
  border-color: rgba(255, 255, 255, 0.28);
}

body:not(.menu-open) .site-header.is-over-hero .header-strip {
  box-shadow: none;
}

body:not(.menu-open) .site-header.is-over-hero .btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: none;
}

body:not(.menu-open) .site-header.is-over-hero .menu-toggle span {
  background: #fff;
}

/* Browsers with scroll-driven animations zoom the photos and lift the headline here, in step with the
   sheet as it rises (video-hero.js then only switches the header and pauses the photos). */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    body {
      timeline-scope: --sheet;
    }

    .page-sheet {
      view-timeline: --sheet block;
      view-timeline-inset: 0; /* the whole screen, as the script measured it */
    }

    /* from the sheet's top at the bottom of the screen to its top at the top */
    .vhero-slides,
    .vhero-content {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --sheet;
      animation-range: entry 0% entry 100%;
    }

    .vhero-slides {
      animation-name: vhero-zoom;
    }

    .vhero-content {
      animation-name: vhero-lift;
    }
  }
}

@keyframes vhero-zoom {
  to {
    transform: scale(1.08);
  }
}

/* drifts up 90px over the whole rise and is gone before the sheet reaches it */
@keyframes vhero-lift {
  41.667% {
    opacity: 0;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -90px, 0);
  }
}

@media (max-width: 640px) {
  .vhero-slide img {
    object-position: var(--pos-tall, 50% 50%);
  }

  .vhero-content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .page-sheet {
    border-radius: 22px 22px 0 0;
  }
}

/* short screens (landscape phones, 400% zoom): the hero grows with its copy instead of cutting it off */
@media (max-height: 560px) {
  .vhero {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + var(--strip-full) + 24px);
  }

  .vhero-content {
    transform: none !important; /* no scroll fade: part of the copy can still be on screen */
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero-slide {
    transition: none;
  }

  .vhero-slide.is-zooming img {
    animation: none;
  }
}