/* ============================================================
   LIGHTHOUSE ORAL & MAXILLOFACIAL SURGERY
   Design concept: "The Guiding Light" — a harbor-deep navy paired
   with a warm lighthouse-lamp gold. Calm, trustworthy, precise —
   the visual language of a beacon that guides patients safely
   through surgery, echoing the practice's own name and tagline.
   ============================================================ */

/* CMS photo fields (data-cms-img / data-cms-hero): the static fallback
   photo baked into the HTML is shown immediately on page load (no
   blank/pending state, no gray gap while content.js loads). If the
   admin's published photo differs from the fallback, content.js
   preloads the new photo off-screen, then briefly fades the visible
   <img> out, swaps its src, and fades back in (.cms-swap-out below) --
   a quick, intentional crossfade instead of a jarring pop, and only
   ever happens on the rare case where the two photos actually differ. */
[data-cms-img] img,
[data-cms-hero] img {
  transition: opacity 180ms ease;
}
[data-cms-img] img.cms-swap-out,
[data-cms-hero] img.cms-swap-out {
  opacity: 0;
}

:root {
  /* ---- Type scale ---- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.5rem, 1rem + 4.5vw, 5rem);

  /* ---- Spacing (4px system) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  /* Button corner. Buttons are rectangular, not pills. Held at 0 for
     perfectly sharp corners -- raise to 0.25rem if a hair of softening is
     ever wanted. This single token drives every button and chip. */
  --radius-btn: 0;

  /* Clear space below the sticky header, used by sidebars and anchor
     offsets. Keep roughly in step with .header__bar padding-block. */
  --header-clearance: 7.5rem;

  /* ---- Motion ---- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Content widths ---- */
  --content-narrow: 640px;
  --content-default: 1000px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---- Fonts ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;
}

/* ================= LIGHT MODE (default) ================= */
:root,
[data-theme='light'] {
  /* Surfaces — warm sand / sea-foam paper tones */
  --color-bg: #f8f6f1;
  --color-surface: #fdfcf9;
  --color-surface-2: #ffffff;
  --color-surface-offset: #f0ece2;
  --color-surface-offset-2: #e8e2d4;
  --color-surface-dynamic: #dfd8c7;
  --color-divider: #e3ddd0;
  --color-border: #d8d0bd;

  /* Text — deep harbor ink */
  --color-text: #10233a;
  --color-text-muted: #56657a;
  --color-text-faint: #97a1b0;
  --color-text-inverse: #f8f6f1;

  /* Primary — harbor navy */
  --color-primary: #0e2a4a;
  --color-primary-hover: #163a63;
  --color-primary-active: #0a1e35;
  --color-primary-highlight: #dbe4ee;

  /* Accent — lighthouse lamp gold */
  --color-accent: #c8862c;
  --color-accent-hover: #b3741f;
  --color-accent-active: #935e18;
  --color-accent-highlight: #f3e2c4;

  /* ---- Call to action -------------------------------------------------
     Drives every .btn--primary, most visibly "Request Appointment".
     A brighter, cleaner blue than the header navy (#0e2a4a): same family,
     clearly separate hue and value, so the button reads as a button
     against the bar rather than blending into it.
     To try another shade, change only these three values.
       bright azure (current) #1565c0 / #0f4e96 / #fff
       cerulean               #0b6fb8 / #085a97 / #fff
       steel blue             #2a6496 / #1e4d75 / #fff
     ------------------------------------------------------------------ */
  --color-cta: #1565c0;
  --color-cta-hover: #0f4e96;
  --color-cta-text: #ffffff;

  /* Deep sea (secondary accent for variety, used sparingly) */
  --color-sea: #1c5a6e;
  --color-sea-highlight: #d7e7ea;

  /* Status colors (semantic, minimal use) */
  --color-success: #3d7a45;
  --color-success-highlight: #dbe8d9;
  --color-warning: #9c5b23;
  --color-warning-highlight: #ecdcc6;
  --color-error: #9c3b3b;
  --color-error-highlight: #ecd6d6;

  --shadow-sm: 0 1px 2px oklch(0.2 0.03 250 / 0.07);
  --shadow-md: 0 6px 20px oklch(0.2 0.03 250 / 0.10);
  --shadow-lg: 0 20px 48px oklch(0.2 0.03 250 / 0.16);

  /* Theme-invariant light text — for permanently-dark surfaces (hero photo, navy gradients) that don't flip with theme */
  --color-on-dark: #f8f6f1;
  --color-on-dark-muted: oklch(0.9 0.01 90 / 0.75);
}

/* ================= DARK MODE ================= */
[data-theme='dark'] {
  --color-bg: #0a1726;
  --color-surface: #0f1e30;
  --color-surface-2: #132538;
  --color-surface-offset: #142639;
  --color-surface-offset-2: #1a3049;
  --color-surface-dynamic: #203a55;
  --color-divider: #1c3349;
  --color-border: #274563;

  --color-text: #eae6da;
  --color-text-muted: #a3aec0;
  --color-text-faint: #647388;
  --color-text-inverse: #10233a;

  --color-primary: #7fa4cc;
  --color-primary-hover: #a2bfdd;
  --color-primary-active: #cddaea;
  --color-primary-highlight: #1c3552;

  --color-accent: #e0a84f;
  --color-accent-hover: #eec278;
  --color-accent-active: #f5d69b;
  --color-accent-highlight: #3a2e1a;

  /* CTA on dark: a bright azure that lifts well clear of the navy header
     and the navy card behind it. Alternatives: cerulean #2f9be0 / #55b2ec
     -- steel #5b9bd5 / #7db3e0 */
  --color-cta: #3d9bf0;
  --color-cta-hover: #63b1f5;
  --color-cta-text: #06203a;

  --color-sea: #5aa8bf;
  --color-sea-highlight: #17303a;

  --color-success: #79b57f;
  --color-success-highlight: #1e3320;
  --color-warning: #d3925a;
  --color-warning-highlight: #3a2a18;
  --color-error: #d38080;
  --color-error-highlight: #3a2020;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 24px 56px oklch(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0a1726;
    --color-surface: #0f1e30;
    --color-surface-2: #132538;
    --color-surface-offset: #142639;
    --color-surface-offset-2: #1a3049;
    --color-surface-dynamic: #203a55;
    --color-divider: #1c3349;
    --color-border: #274563;

    --color-text: #eae6da;
    --color-text-muted: #a3aec0;
    --color-text-faint: #647388;
    --color-text-inverse: #10233a;

    --color-primary: #7fa4cc;
    --color-primary-hover: #a2bfdd;
    --color-primary-active: #cddaea;
    --color-primary-highlight: #1c3552;

    --color-accent: #e0a84f;
    --color-accent-hover: #eec278;
    --color-accent-active: #f5d69b;
    --color-accent-highlight: #3a2e1a;

    --color-cta: #3d9bf0;
    --color-cta-hover: #63b1f5;
    --color-cta-text: #06203a;

    --color-sea: #5aa8bf;
    --color-sea-highlight: #17303a;

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 24px 56px oklch(0 0 0 / 0.5);
  }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}

.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--default {
  max-width: var(--content-default);
}
.container--narrow {
  max-width: var(--content-narrow);
}

section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}

/* Tighter vertical rhythm for Who We Are, What to Expect, Meet Our Team,
   and Patient Stories -- these four sections read as one continuous
   "about the practice" flow, so the generous default section padding
   left too much empty space above/below each one. */
.intro,
.process,
.surgeons,
.testimonials {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section-eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--color-accent);
  display: inline-block;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  max-width: 20ch;
}

.section-lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-top: var(--space-4);
  line-height: 1.55;
}

.section-head {
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
}
.section-head--center {
  text-align: center;
  margin-inline: auto;
}
.section-head--center .section-lede {
  margin-inline: auto;
}
.section-head--center .section-eyebrow::before {
  display: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--space-4) var(--space-8);
  /* Rectangular buttons, not pills. --radius-btn is the one place to
     change this; set it to 0 for perfectly sharp corners. */
  border-radius: var(--radius-btn);
  white-space: nowrap;
  min-height: 44px;
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive),
    border-color var(--transition-interactive);
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-cta);
  color: var(--color-cta-text);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-cta-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--color-on-dark);
  border: 1.5px solid oklch(from var(--color-on-dark) l c h / 0.4);
}
.btn--outline:hover {
  border-color: var(--color-on-dark);
  background: oklch(from var(--color-on-dark) l c h / 0.08);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.btn--sm {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-xs);
  min-height: 38px;
}

.btn--block {
  width: 100%;
}

/* ============================================================
   HEADER
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(from var(--color-bg) l c h / 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
  transition:
    transform 0.3s var(--ease-in-out),
    box-shadow 0.3s var(--ease-in-out),
    background 0.3s var(--ease-in-out);
}
.header--hidden {
  transform: translateY(-100%);
}
.header--scrolled {
  box-shadow: var(--shadow-sm);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Taller header. Raising this is the single lever for header height --
     the bar is flex-centred, so both the logo and the nav re-centre on
     their own. If you change it, also check --header-clearance below. */
  padding-block: var(--space-6);
}

/* Keep the taller bar from eating the viewport on phones. */
@media (max-width: 900px) {
  .header__bar {
    padding-block: var(--space-4);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  flex-shrink: 0;
}
.brand__logo {
  height: 56px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand__logo--mobile {
  height: 48px;
}
.brand__logo--footer {
  height: 64px;
}

.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
}
.nav__list a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  position: relative;
  white-space: nowrap;
}
.nav__list a:hover {
  color: var(--color-text);
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: width var(--transition-interactive);
}
.nav__list a:hover::after {
  width: 100%;
}

/* Nav dropdown (Gallery: Before & After / Videos) */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.nav__dropdown-trigger:hover {
  color: var(--color-text);
}
.nav__dropdown-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-interactive);
}
.nav__dropdown:hover .nav__dropdown-trigger svg,
.nav__dropdown:focus-within .nav__dropdown-trigger svg {
  transform: rotate(180deg);
}
.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 14px;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-interactive),
    transform var(--transition-interactive),
    visibility 0s linear var(--transition-interactive);
  z-index: 10;
}
.nav__dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--transition-interactive),
    transform var(--transition-interactive),
    visibility 0s linear 0s;
}
.nav__dropdown-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.nav__dropdown-menu a:hover {
  background: var(--color-surface-offset);
  color: var(--color-primary);
}
.nav__dropdown-menu--wide {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  min-width: 460px;
}
@media (max-width: 1300px) {
  .nav__dropdown-menu--wide {
    left: auto;
    right: -40px;
    transform: translateY(-6px);
  }
  .nav__dropdown:hover .nav__dropdown-menu--wide,
  .nav__dropdown:focus-within .nav__dropdown-menu--wide {
    transform: translateY(0);
  }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.theme-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.theme-toggle:hover,
.menu-toggle:hover {
  background: var(--color-surface-offset);
}
.menu-toggle {
  display: inline-flex;
}

.header__phones {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: var(--space-1);
}

@media (min-width: 1320px) {
  .header__phones {
    display: flex;
  }
}

.header__phone {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  line-height: 1.2;
}

.header__phone-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.header__actions .btn[data-open-request-form] {
  display: none;
}

@media (min-width: 640px) {
  .header__actions .btn[data-open-request-form] {
    display: inline-flex;
  }
}

@media (min-width: 1140px) {
  .nav {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-in-out);
  /* The panel itself never scrolls -- only .mobile-nav__list does (below).
     This keeps the close button and footer (phone numbers, request-
     appointment link) always reachable, and lets the middle nav-links
     list scroll independently when the window is short and the full
     menu can't fit -- fixes the previously non-scrollable compacted state. */
  overflow: hidden;
  max-height: 100vh;
}
.mobile-nav.is-open {
  transform: translateX(0);
}
.mobile-nav__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-10);
  flex-shrink: 0;
}
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav__list a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  padding-block: var(--space-3);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.mobile-nav__group-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-4);
}
.mobile-nav__list li:has(> .mobile-nav__group-label) + li a,
.mobile-nav__list li + li:has(a[href^="#service-"]) a {
  padding-inline-start: var(--space-3);
}
.mobile-nav__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
  flex-shrink: 0;
}
.mobile-nav__footer a {
  font-weight: 600;
  color: var(--color-primary);
}

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

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--color-on-dark);
  overflow: hidden;
  padding-top: var(--space-20);
}
.hero__content {
  margin-top: auto;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-slideshow__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease;
  will-change: opacity;
}
.hero-slideshow__layer.is-active {
  opacity: 1;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(0.14 0.04 250 / 0.35) 0%, oklch(0.1 0.04 250 / 0.55) 55%, oklch(0.08 0.03 250 / 0.88) 100%);
  transition: opacity 300ms ease;
}
/* Admin-controlled full-transparency mode: set via data-hero-dim="off" on
   <body> by content.js when the CMS toggle is off. Removes the dark
   overlay entirely so the photo/video shows at its true, unfiltered
   brightness and color — for use when no hero text is shown over it. */
body[data-hero-dim="off"] .hero__scrim {
  opacity: 0;
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block-end: clamp(var(--space-16), 8vw, var(--space-24));
  width: 100%;
}
.hero__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: oklch(from var(--color-accent) l c h / 1);
  margin-bottom: var(--space-6);
  max-width: 34ch;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-hero);
  letter-spacing: -0.01em;
  max-width: 16ch;
  color: #fbf8f1;
}
.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  max-width: 56ch;
  color: oklch(0.95 0.01 90 / 0.88);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}


/* ============================================================
   TRUST STRIP
   ============================================================ */

.trust-strip {
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-divider);
}
.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  text-align: center;
}
@media (min-width: 720px) {
  .trust-strip .container {
    grid-template-columns: repeat(4, 1fr);
  }
}
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
}
.trust-item span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   INTRO / WELCOME (asymmetric two column)
   ============================================================ */

.intro {
  background: var(--color-surface);
}
.intro .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .intro .container {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-20);
  }
}
.intro__figures {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.intro__figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.intro__figure img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
.intro__figure--secondary img {
  aspect-ratio: 16 / 10;
}
.intro__figure-tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.intro__figure-badge {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.intro__figure-badge svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.intro__figure-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
}
.intro__figure-badge span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.intro__body p {
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 58ch;
}
.intro__body p:first-of-type {
  margin-top: var(--space-6);
}

.intro__list {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-4);
}
.intro__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.intro__list svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  background: var(--color-surface-offset);
  position: relative;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition:
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive),
    border-color var(--transition-interactive);
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: oklch(from var(--color-accent) l c h / 0.4);
}
.service-card--feature {
  background: linear-gradient(155deg, #0e2a4a 0%, #163a63 100%);
  color: var(--color-on-dark);
  border-color: transparent;
}
@media (min-width: 640px) {
  .service-card--feature {
    grid-column: span 2;
  }
}
@media (min-width: 1080px) {
  .service-card--feature {
    grid-column: span 1;
    grid-row: span 2;
  }
}
.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  flex-shrink: 0;
}
.service-card--feature .service-card__icon {
  background: oklch(1 0 0 / 0.12);
  color: var(--color-accent);
}
.service-card__icon svg {
  width: 24px;
  height: 24px;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}
.service-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-grow: 1;
}
.service-card--feature p {
  color: oklch(0.95 0.01 90 / 0.85);
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: auto;
}
.service-card--feature .service-card__link {
  color: var(--color-accent);
}
.service-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-interactive);
}
.service-card:hover .service-card__link svg {
  transform: translateX(3px);
}

.service-more {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.chip {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}

/* ============================================================
   PROCESS / WHAT TO EXPECT
   ============================================================ */

.process {
  background: var(--color-surface);
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  counter-reset: step;
}
@media (min-width: 780px) {
  .process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}
.process-step {
  position: relative;
  padding-top: var(--space-10);
}
.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-4);
}
.process-step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1.5px;
  background: var(--color-border);
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.process-step p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   SURGEONS
   ============================================================ */

.surgeons {
  background: var(--color-surface-offset);
}
.surgeon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 780px) {
  .surgeon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.surgeon-card {
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.surgeon-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.surgeon-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}
.surgeon-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}
.surgeon-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.surgeon-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}
.surgeon-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-interactive);
}
.surgeon-card__link:hover svg {
  transform: translateX(3px);
}

.surgeon-grid--four {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .surgeon-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .surgeon-grid--four {
    grid-template-columns: repeat(3, 1fr);
  }
}
.surgeon-card--photo {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.surgeon-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-offset);
}
.surgeon-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.surgeon-card__body {
  padding: 0.625rem var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.surgeon-card__body p {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.surgeon-card__body .surgeon-card__link {
  margin-top: 0;
  padding-top: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonials {
  background: #0e2a4a;
  color: var(--color-on-dark);
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/texture-water.png') center / cover no-repeat;
  opacity: 0.14;
  mix-blend-mode: luminosity;
}
.testimonials .container {
  position: relative;
}
.testimonials .section-eyebrow {
  color: var(--color-accent);
}
.testimonials .section-title {
  color: var(--color-on-dark);
}
.testimonial-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 780px) {
  .testimonial-track {
    grid-template-columns: repeat(3, 1fr);
  }
}
.testimonial-card {
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  backdrop-filter: blur(6px);
}
.testimonial-card__stars {
  display: flex;
  gap: 2px;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.testimonial-card__stars svg {
  width: 16px;
  height: 16px;
}
.testimonial-card p {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  color: oklch(0.97 0.01 90 / 0.95);
  line-height: 1.6;
}
.testimonial-card__author {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
}
.testimonial-card__author span {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: oklch(0.9 0.01 90 / 0.6);
  margin-top: 2px;
}

/* ============================================================
   LOCATIONS / CONTACT
   ============================================================ */

.locations {
  background: var(--color-surface);
}
.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 780px) {
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.location-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}
.location-card__head {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-border);
}
.location-card__head span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.location-card__head h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  margin-top: 0.1875rem;
  line-height: 1.25;
}
.location-card__body {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.location-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.location-row svg {
  width: 17px;
  height: 17px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.location-row strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.location-row span,
.location-row a {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.location-row a:hover {
  color: var(--color-primary);
}
.location-card__actions {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-6);
  flex-wrap: wrap;
}

.hours-table {
  margin-top: 0.1875rem;
  display: grid;
  gap: 0.125rem;
}
.hours-table div {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  gap: var(--space-3);
  line-height: 1.3;
}
.hours-table div strong {
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.cta {
  position: relative;
  color: var(--color-on-dark);
  overflow: hidden;
}
.cta__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(155deg, #0e2a4a 0%, #0a1e35 100%);
}
.cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, oklch(from var(--color-accent) l c h / 0.25), transparent 60%);
}
.cta .container {
  position: relative;
  text-align: center;
}
.cta__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  max-width: 20ch;
  margin-inline: auto;
  color: #fbf8f1;
}
.cta__lede {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: oklch(0.95 0.01 90 / 0.85);
  max-width: 50ch;
  margin-inline: auto;
}
.cta__actions {
  margin-top: var(--space-10);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--color-primary-active, #0a1e35);
  color: oklch(0.9 0.01 90 / 0.75);
}
[data-theme='dark'] .footer {
  background: #071320;
}
.footer .container {
  padding-block: var(--space-16) var(--space-10);
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 780px) {
  .footer__top {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}
.footer__brand .brand {
  color: #fbf8f1;
}
.footer__brand p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  max-width: 34ch;
  color: oklch(0.9 0.01 90 / 0.65);
}
.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid oklch(1 0 0 / 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(1 0 0 / 0.8);
}
.footer__social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #241705;
}
.footer__social svg {
  width: 18px;
  height: 18px;
}
.footer__col h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.5);
  margin-bottom: var(--space-4);
}
.footer__col ul {
  display: grid;
  gap: var(--space-3);
}
.footer__col a {
  font-size: var(--text-sm);
  color: oklch(0.92 0.01 90 / 0.8);
}
.footer__col a:hover {
  color: var(--color-accent);
}
.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid oklch(1 0 0 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: oklch(0.9 0.01 90 / 0.5);
}
.footer__bottom a {
  color: inherit;
}
.footer__bottom a:hover {
  color: var(--color-accent);
}

/* ============================================================
   PAGE HERO (Before & After / Videos interior pages)
   ============================================================ */

.page-hero {
  position: relative;
  color: var(--color-on-dark);
  overflow: hidden;
  /* Tightened globally to match the Videos page treatment -- was
     calc((var(--space-20) + var(--space-10)) / 2) / var(--space-16). */
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #0e2a4a 0%, #0a1e35 100%);
}
.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 82% 15%, oklch(from var(--color-accent) l c h / 0.22), transparent 60%);
}
.page-hero .container {
  position: relative;
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.page-hero__eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--color-accent);
  display: inline-block;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  /* 30% smaller than --text-3xl (clamp(2.5rem,1rem+4vw,5rem)). */
  font-size: clamp(1.75rem, 0.7rem + 2.8vw, 3.5rem);
  max-width: 20ch;
  color: #fbf8f1;
}
.page-hero__lede {
  /* Tightened globally to match the Videos page treatment -- was
     var(--space-5). */
  margin-top: var(--space-3);
  /* ~40% smaller than --text-lg (clamp(1.125rem,1rem+0.75vw,1.5rem)),
     with the minimum floored at 0.8rem/12.8px to stay legible on mobile
     rather than following the scale down to 0.675rem. */
  font-size: clamp(0.8rem, 0.6rem + 0.45vw, 0.9rem);
  max-width: 56ch;
  color: oklch(0.95 0.01 90 / 0.85);
}

/* ============================================================
   BEFORE & AFTER GALLERY
   ============================================================ */

.gallery-section {
  background: var(--color-surface);
}
.gallery-section + .gallery-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
}
.gallery-section__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  text-align: center;
}

/* Before/after case-grid section: heading was removed entirely, so the
   generous default top padding (previously balancing a heading above the
   grid) now just reads as a big empty gap under the header. Cut it down
   to a small breathing gap instead; bottom padding is also tightened so it
   doesn't leave a large dead band before the photos section below. */
#legacy-before-after-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-4);
}

/* The "More From Lighthouse" strip directly below the before/after grid was
   inheriting a tall top gap from its own section padding. Pull it up so the
   two sit snugly together. (A direct id selector, not an adjacent-sibling
   one, because a hidden #folders-root div sits between the two sections.) */
#legacy-photos-section {
  padding-top: var(--space-4);
}

/* "More From Lighthouse" / any secondary photo-strip section: much tighter
   than the default section rhythm above — small compact label instead of
   a full-size heading, minimal space above it. */
.gallery-section--photos {
  padding-block: var(--space-10);
}
.gallery-section--photos.gallery-section + .gallery-section {
  padding-top: var(--space-10);
}
.gallery-section--photos .gallery-section__heading {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 720px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Desktop stays at two columns (was three) so each before/after image is
   large enough to actually view — three across made the square tiles too
   small on wide screens. */

.case-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
.case-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.case-card__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.case-card__pane {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface-offset);
}
.case-card__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--transition-interactive);
}
.case-card__pane span {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background: oklch(0.1 0.03 250 / 0.55);
  color: var(--color-on-dark);
  backdrop-filter: blur(4px);
  line-height: 1;
}
.case-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.case-card__body h3 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}
.case-card__body p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   SMILE GALLERY — single photo grid
   ============================================================ */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1180px) {
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.photo-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-offset);
  aspect-ratio: 3 / 4;
  transition:
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
.photo-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Landscape orientation mode: same uniform-crop idea, wider tiles. */
body[data-gallery-orientation="landscape"] .photo-card {
  aspect-ratio: 4 / 3;
}

/* Mixed orientation mode: masonry columns, each photo keeps its natural
   shape — no forced crop, so a landscape shot in a run of portraits shows
   fully instead of losing its edges. Uses CSS multi-column layout, which
   has solid cross-browser support without needing JS to compute placement. */
body[data-gallery-orientation="mixed"] .photo-grid {
  display: block;
  column-count: 2;
  column-gap: var(--space-2);
}
@media (min-width: 640px) {
  body[data-gallery-orientation="mixed"] .photo-grid {
    column-count: 3;
  }
}
@media (min-width: 1180px) {
  body[data-gallery-orientation="mixed"] .photo-grid {
    column-count: 4;
  }
}
body[data-gallery-orientation="mixed"] .photo-card,
body[data-gallery-orientation="mixed"] .media-tile {
  aspect-ratio: auto;
  width: 100%;
  margin-bottom: var(--space-2);
  break-inside: avoid;
  display: block;
}
body[data-gallery-orientation="mixed"] .photo-card img,
body[data-gallery-orientation="mixed"] .media-tile img {
  height: auto;
  object-fit: initial;
}

/* ============================================================
   SMILE GALLERY — organized folders > galleries > photos
   ============================================================ */

#folders-root[hidden] {
  display: none !important;
}

.folder-section + .folder-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
}

.folder-section__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-10);
  text-align: center;
}

.gallery-block {
  margin-bottom: var(--space-12);
}
.gallery-block:last-child {
  margin-bottom: 0;
}

.gallery-block__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.gallery-block__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
}
.gallery-block__lock-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Locked gallery placeholder card — shown instead of the photo grid until unlocked */
.gallery-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.gallery-locked__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gallery-locked__icon svg {
  width: 26px;
  height: 26px;
}
.gallery-locked p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.gallery-locked .btn {
  margin-top: var(--space-1);
}

/* Per-photo blur states, applied to the .photo-card / .case-card__pane image wrapper */
.media-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-offset);
  aspect-ratio: 3 / 4;
  transition:
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
body[data-gallery-orientation="landscape"] .media-tile {
  aspect-ratio: 4 / 3;
}
.media-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter var(--transition-interactive);
}

/* Hover-reveal: blurred by default, sharpens on hover/tap, no password ever needed */
.media-tile--hover img {
  filter: blur(18px) saturate(0.9);
}
.media-tile--hover:hover img,
.media-tile--hover:focus-within img,
.media-tile--hover.is-revealed img {
  filter: blur(0) saturate(1);
}
.media-tile--hover::after {
  content: "Hover to reveal";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-dark);
  background: oklch(0.1 0.03 250 / 0.28);
  opacity: 1;
  transition: opacity var(--transition-interactive);
  pointer-events: none;
}
.media-tile--hover:hover::after,
.media-tile--hover:focus-within::after,
.media-tile--hover.is-revealed::after {
  opacity: 0;
}

/* Locked individual photo: fully blurred, requires this photo's own password */
.media-tile--locked img {
  filter: blur(22px) saturate(0.85);
}
.media-tile--locked.is-unlocked img {
  filter: blur(0) saturate(1);
}
.media-tile--locked__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: oklch(0.1 0.03 250 / 0.4);
  color: var(--color-on-dark);
  cursor: pointer;
  border: none;
  width: 100%;
  padding: 0;
}
.media-tile--locked.is-unlocked .media-tile--locked__overlay {
  display: none;
}
.media-tile--locked__overlay svg {
  width: 26px;
  height: 26px;
}
.media-tile--locked__overlay span {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Password prompt modal, reused for both gallery-level and photo-level unlock */
.unlock-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: oklch(0.08 0.02 250 / 0.6);
  backdrop-filter: blur(4px);
}
.unlock-modal[hidden] {
  display: none !important;
}
.unlock-modal__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 360px;
  padding: var(--space-8);
  text-align: center;
}
.unlock-modal__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}
.unlock-modal__icon svg {
  width: 24px;
  height: 24px;
}
.unlock-modal__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.unlock-modal__card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.unlock-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.unlock-modal__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-base);
}
.unlock-modal__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.unlock-modal__error {
  font-size: var(--text-sm);
  color: var(--color-error);
  min-height: 1.2em;
}
.unlock-modal__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.unlock-modal__actions .btn {
  flex: 1;
}

/* ============================================================
   SMILE GALLERY — global Portrait / Landscape orientation toggle
   Controlled by data-gallery-orientation on <body>, set from the
   admin-managed content field "gallery/orientation".
   ============================================================ */

body[data-gallery-orientation="landscape"] .case-card__pane,
body[data-gallery-orientation="landscape"] .photo-card {
  aspect-ratio: 4 / 3;
}

/* Before/after pairs share a single square shape so the two panes are the
   same height and neither leaves a gap beside/under it (mixing a landscape
   "before" with a taller square "after" used to leave dead space below the
   before). Matches the admin preview. */
.case-card__pane--before {
  aspect-ratio: 1 / 1 !important;
}
.case-card__pane--after {
  aspect-ratio: 1 / 1 !important;
}

/* ============================================================
   VIDEOS PAGE — no gap before the grid.
   The tightened .page-hero / .page-hero__lede spacing that used to be
   scoped to this page only is now the global default above (applies
   to every page using .page-hero). Only the gallery-section gap below
   the hero stays videos-page-specific, since .gallery-section is also
   shared by the Before & After page (which uses its own custom hero,
   not .page-hero), so changing it globally would affect that page too.
   ============================================================ */
body[data-cms-page="videos"] .gallery-section {
  padding-top: var(--space-4);
}

/* ============================================================
   VIDEO GRID
   ============================================================ */

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  /* Stretch every card to the row's tallest so the testimonial placards
     share a uniform height even when descriptions differ in length. */
  align-items: stretch;
}
@media (min-width: 640px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.video-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
.video-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.video-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-primary);
  overflow: hidden;
}
.video-card__media img,
.video-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-card__play svg {
  width: 56px;
  height: 56px;
  color: var(--color-on-dark);
  filter: drop-shadow(0 4px 14px oklch(0 0 0 / 0.4));
}
.video-card__body {
  padding: var(--space-6);
}
.video-card__category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 14%, transparent);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.video-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}
.video-card__body p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.video-card__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}
.video-card__download:hover {
  text-decoration: underline;
}
.video-card__download svg {
  width: 16px;
  height: 16px;
}
/* Brief highlight when a patient is deep-linked to a specific video via
   /videos.html?video=<id> (emailed watch links). */
.video-card--flag {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius);
  animation: video-card-flag-pulse 1.6s ease-in-out 3;
}
@keyframes video-card-flag-pulse {
  0%,
  100% {
    outline-color: var(--color-accent);
  }
  50% {
    outline-color: transparent;
  }
}
.video-card__media {
  cursor: pointer;
}
.video-card__media--locked {
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-card__media--locked .video-card__locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-on-dark);
}
.video-card__media--locked .video-card__locked svg {
  width: 30px;
  height: 30px;
}
.video-card__media--locked .video-card__locked span {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============================================================
   VIDEO LIGHTBOX — full-screen player opened by clicking a
   video card. Real <video controls> with audio, not the muted
   card-thumbnail preview.
   ============================================================ */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: oklch(0.05 0.01 250 / 0.88);
  backdrop-filter: blur(6px);
}
.video-lightbox[hidden] {
  display: none !important;
}
.video-lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
}
.video-lightbox__inner video {
  width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-md);
  background: black;
  display: block;
}
.video-lightbox__inner .video-lightbox__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border: 0;
  border-radius: var(--radius-md);
  background: black;
  display: block;
}
.video-lightbox__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: oklch(1 0 0 / 0.12);
  color: var(--color-on-dark);
  border: none;
  cursor: pointer;
  transition: background var(--transition-interactive);
}
.video-lightbox__close:hover {
  background: oklch(1 0 0 / 0.22);
}
.video-lightbox__close svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 640px) {
  .video-lightbox__close {
    top: -2.75rem;
    right: 0;
  }
}

/* ============================================================
   EMPTY STATE (before/after + videos, shared)
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  max-width: 480px;
  margin-inline: auto;
  padding-block: var(--space-16);
}
.empty-state[hidden],
.case-grid[hidden],
.photo-grid[hidden],
.video-grid[hidden] {
  display: none !important;
}
.empty-state__icon {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.empty-state__icon svg {
  width: 36px;
  height: 36px;
}
.empty-state h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
}
.empty-state p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.empty-state .btn {
  margin-top: var(--space-2);
}
.empty-state__icon--spin svg {
  animation: empty-state-spin 0.9s linear infinite;
}
@keyframes empty-state-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   SCROLL REVEAL (opacity/clip-path only, no CLS)
   ============================================================ */

.reveal {
  opacity: 1;
}
@supports (animation-timeline: scroll()) {
  .reveal {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
}
@keyframes reveal-fade {
  to {
    opacity: 1;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ============================================================
   INFO PAGE (procedures / patient center / who-we-are content)
   ============================================================ */

.info-page {
  padding: var(--space-24) 0 var(--space-20);
}
.info-page .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-16);
  align-items: start;
}
@media (max-width: 900px) {
  .info-page .container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

.info-page__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: var(--space-12) 0 var(--space-4);
  font-weight: 500;
}
.info-page__body h2:first-child,
.info-page__body > div > h2:first-child {
  margin-top: 0;
}
.info-page__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
  font-weight: 500;
}
.info-page__body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.info-page__body ul {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  list-style: disc;
}
.info-page__body li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  display: list-item;
}
.surgeon-page-photo {
  float: left;
  width: 220px;
  margin: 0 var(--space-8) var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-offset);
  box-shadow: var(--shadow-sm);
}
.surgeon-page-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
@media (max-width: 640px) {
  .surgeon-page-photo {
    float: none;
    width: 200px;
    margin: 0 auto var(--space-6);
  }
}

.info-page__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-highlight);
  text-underline-offset: 2px;
}
.info-page__body a:hover {
  color: var(--color-accent-hover);
}
.info-page__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-8);
  aspect-ratio: 16/9;
  background: var(--color-surface-offset);
}
.info-page__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.info-page__diagram {
  float: left;
  width: 320px;
  margin: 0 var(--space-8) var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-offset);
  box-shadow: var(--shadow-sm);
}
.info-page__diagram img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media (max-width: 640px) {
  .info-page__diagram {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto var(--space-6);
  }
}

.info-sidebar {
  display: grid;
  gap: var(--space-6);
  position: sticky;
  top: var(--header-clearance);
}
.info-sidebar__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.info-sidebar__card h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.info-sidebar__card ul {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-sidebar__card li a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  transition: color var(--transition-interactive);
}
.info-sidebar__card li:last-child a {
  border-bottom: none;
}
.info-sidebar__card li a:hover {
  color: var(--color-accent);
}
.info-sidebar__card li a.is-active {
  color: var(--color-accent);
  font-weight: 600;
}
.info-sidebar__cta {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--color-text-inverse);
}
.info-sidebar__cta h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  color: var(--color-text-inverse);
  font-weight: 500;
}
.info-sidebar__cta p {
  font-size: var(--text-sm);
  color: var(--color-primary-highlight);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}
.info-sidebar__cta .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.info-sidebar__cta a.info-sidebar__phone {
  display: block;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-decoration-color: rgba(248,246,241,0.4);
  padding-top: var(--space-2);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-8);
}
.info-grid__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.info-grid__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
  font-weight: 500;
}
.info-grid__card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   REFERRAL FORM
   ============================================================ */

.referral-form {
  padding: var(--space-24) 0 var(--space-20);
}
.referral-form .container {
  max-width: var(--content-default);
}
.referral-form__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.referral-form__head {
  padding: var(--space-8) var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.referral-form__head h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.referral-form__head p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.6;
}
.referral-form__body {
  padding: var(--space-8);
  display: grid;
  gap: var(--space-8);
}
.form-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 720px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}
.form-row__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  padding-top: var(--space-3);
}
.form-row__label .form-row__required {
  color: var(--color-accent);
  margin-left: 2px;
}
.form-row__fields {
  display: grid;
  gap: var(--space-2);
}
.form-row__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 500px) {
  .form-row__cols {
    grid-template-columns: 1fr;
  }
}
.form-row__cols-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 500px) {
  .form-row__cols-labels {
    grid-template-columns: 1fr;
  }
}
.form-field {
  display: grid;
  gap: var(--space-1);
}
.form-field small {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.form-field small.form-field__error {
  color: var(--color-error);
  display: none;
}

.field-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.field-input::placeholder {
  color: var(--color-text-faint);
}
.field-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
/* :user-invalid only fires after the visitor has actually interacted, so an
   untouched empty required field is never painted red. The old
   :invalid:not(:placeholder-shown) trick silently depended on every input
   carrying a placeholder attribute, which broke the moment one didn't.
   Browsers without :user-invalid simply drop the rule — no red, no harm. */
.field-input:user-invalid:not(:focus) {
  border-color: var(--color-error);
}
textarea.field-input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* ---- Dropdowns ----------------------------------------------------------
   Native <select> styled to match .field-input exactly. appearance:none
   removes the platform control so the border, radius and type stay
   consistent; the chevron is an inline SVG data URI so it needs no extra
   request and no CSP allowance. currentColor is not usable inside a data
   URI, hence the per-theme stroke below. */
select.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-4) + 1.1rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23647388' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem 1rem;
  cursor: pointer;
}
/* An unchosen dropdown reads as placeholder text, like an empty input.
   :has() covers optional dropdowns too, where :invalid never matches. */
select.field-select:has(option[value=""]:checked) {
  color: var(--color-text-faint);
}
select.field-select option {
  color: var(--color-text);
  background: var(--color-surface);
}

.file-drop {
  position: relative;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.file-drop:hover,
.file-drop--dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.file-drop input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file-drop__icon {
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.file-drop__icon svg {
  width: 32px;
  height: 32px;
}
.file-drop__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.file-drop__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.file-drop__list {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  text-align: left;
}
.file-drop__list:empty {
  margin-top: 0;
}
.file-drop__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.file-drop__file button {
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--space-1);
}
.file-drop__file button:hover {
  color: var(--color-error);
}

.referral-form__foot {
  padding: var(--space-6) var(--space-8) var(--space-8);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}
.referral-form__foot .btn {
  min-width: 220px;
  border: 1.5px solid var(--color-success);
}
.referral-form__foot .btn--primary {
  border: 1.5px solid var(--color-success);
}
.referral-form__note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.form-status {
  display: none;
  margin: 0 var(--space-8) var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.form-status--success {
  background: var(--color-success-highlight);
  color: var(--color-success);
  border: 1px solid oklch(from var(--color-success) l c h / 0.3);
}
.form-status--error {
  background: var(--color-error-highlight);
  color: var(--color-error);
  border: 1px solid oklch(from var(--color-error) l c h / 0.3);
}
.form-status.is-visible {
  display: block;
}

.referral-form__body[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
}

/* ============ CHOICE TOGGLES (Lab page: single-select + multi-select tag pickers) ============ */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
  gap: var(--space-2);
  justify-content: start;
}
.choice-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive);
  user-select: none;
}
.choice-toggle:hover {
  border-color: var(--color-primary);
}
.choice-toggle.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
}
.choice-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.choice-toggle__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.choice-toggle.is-selected .choice-toggle__check {
  background: var(--color-surface);
  color: var(--color-primary);
}
.choice-toggle__check svg {
  width: 11px;
  height: 11px;
  opacity: 0;
}
.choice-toggle.is-selected .choice-toggle__check svg {
  opacity: 1;
}
.choice-grid--checklist {
  grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
  gap: var(--space-2);
  justify-content: start;
}
.choice-toggle--checklist {
  justify-content: flex-start;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: 400;
}
.choice-toggle--checklist:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-text);
}
.choice-toggle--checklist.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
}
.choice-toggle--checklist:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.choice-toggle--checklist .choice-toggle__check {
  border-radius: 3px;
}
.choice-toggle--checklist.is-selected .choice-toggle__check {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-primary);
}
.choice-grid--body,
.body-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  max-width: 420px;
  margin: 0;
}
.body-map__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.body-map__row-label {
  flex: 0 0 auto;
  width: 52px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-faint);
}
.choice-toggle--arch {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .body-map__row-label {
    width: 40px;
    font-size: var(--text-xs);
  }
  .choice-toggle--arch {
    padding: var(--space-2) 2px;
    font-size: var(--text-xs);
  }
}

/* ============================================================
   EVENTS PAGE — uses .page-hero for the top title band (matching
   lab.html / videos.html), so this section only needs a tightened
   top gap plus its normal generous bottom padding.
   ============================================================ */

.events-section {
  padding-top: var(--space-4);
  padding-bottom: clamp(var(--space-16), 9vw, var(--space-24));
}

.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 720px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.event-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.event-card__photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface);
}
.event-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
}
.event-card__photo--placeholder svg {
  width: 40px;
  height: 40px;
}
.event-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.event-card__badge {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}
.event-card__badge--open {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.event-card__badge--soon {
  background: var(--color-primary-highlight);
  color: var(--color-accent);
}
.event-card__badge--closed {
  background: oklch(from var(--color-text-faint) l c h / 0.15);
  color: var(--color-text-muted);
}
.event-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}
.event-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.event-card__meta--location {
  color: var(--color-text-faint);
}
.event-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: var(--space-1);
}
.event-card__description p {
  margin: 0 0 var(--space-2);
}
.event-card__description ul,
.event-card__description ol {
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
}
.event-card__spots {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
}
.event-card__cta {
  margin-top: auto;
  align-self: stretch;
}
.event-card__cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============ EVENT SIGNUP MODAL ============ */
.event-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.event-modal[hidden] {
  display: none;
}
.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.1 0.02 250 / 0.6);
  backdrop-filter: blur(2px);
}
body.event-modal-open {
  overflow: hidden;
}
.event-modal__panel {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.event-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 0;
}
.event-modal__close:hover {
  color: var(--color-text);
}
.event-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  padding-right: var(--space-8);
}
.event-modal__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.event-modal__form {
  display: grid;
  gap: var(--space-4);
}
/* Author `display: grid` above otherwise beats the browser's low-specificity
   [hidden] default, so a form set to hidden=true via JS (post-submit
   success, or the closed/not-open/full state) would stay visibly laid out.
   This restores the expected hide behavior. */
.event-modal__form[hidden] {
  display: none;
}
.event-modal__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 420px) {
  .event-modal__row--split {
    grid-template-columns: 1fr;
  }
}
.event-modal__field {
  display: grid;
  gap: var(--space-1);
}
.event-modal__field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Occurrence picker: shown inside #event-modal only for events with more
   than one upcoming session -- radio "cards" so the visitor picks ONE to
   attend. Full/closed/not-open sessions render disabled (not hidden),
   matching how a full single-occurrence event was already surfaced. */
.event-occurrence-picker {
  margin-bottom: var(--space-4);
}
.event-occurrence-picker[hidden] {
  display: none;
}
.event-occurrence-picker__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.event-occurrence-picker__list {
  display: grid;
  gap: var(--space-2);
  max-height: 220px;
  overflow-y: auto;
}
.event-occurrence-picker__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.event-occurrence-picker__option:hover {
  border-color: var(--color-primary);
}
.event-occurrence-picker__option:has(input:checked) {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.event-occurrence-picker__option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.event-occurrence-picker__option input[type="radio"] {
  margin-right: var(--space-2);
  accent-color: var(--color-primary);
}
.event-occurrence-picker__date {
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}
.event-occurrence-picker__state {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ===========================================================================
   Sidebar appointment request form
   ---------------------------------------------------------------------------
   Lives in the right-hand column of the two location pages and the three
   surgeon pages. Deliberately compact: the sidebar column is ~335px, so
   labels sit above their inputs and only the name row splits into two.

   The sidebar is normally sticky, but a form this tall is taller than the
   viewport and sticky positioning then fights the scroll. Pages carrying
   the form use .info-sidebar--form, which turns sticky off.
   ======================================================================== */
.info-sidebar--form {
  position: static;
  top: auto;
  align-self: start;
}

.appt-form {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* The header is sticky, so leave room for it when the Request Appointment
     button scrolls this form into view or the #request-appointment anchor is
     followed from another page. */
  scroll-margin-top: var(--header-clearance);
}
.appt-form__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.appt-form__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.appt-form__body {
  display: grid;
  gap: var(--space-4);
}
/* Compact override of the site-wide .field-input for the narrow column. */
.appt-form .field-input {
  font-size: var(--text-sm);
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
}
.appt-form textarea.field-input {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}
/* ---- Overrides for the CMS-rendered path -------------------------------
   js/form-renderer.js emits the same markup it uses on the full-width
   Referral and Lab pages: .form-row > .form-row__label + .form-row__fields,
   with single choices as <select> here and multi-choices as .choice-toggle
   button grids. That layout
   is a 240px label column beside the inputs, which cannot fit a sidebar, so
   everything below collapses it to one narrow column and matches the look of
   the static fallback markup above. Both render paths end up identical. */
.appt-form .form-row {
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: 0;
  border: 0;
}
.appt-form .form-row__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0;
}
.appt-form .form-row__required {
  color: var(--color-accent);
}
.appt-form .form-row__fields {
  display: grid;
  gap: var(--space-2);
}
/* First/last name render as a paired two-column row; keep that, but the rest
   of the multi-column helpers collapse. */
.appt-form .form-row__cols,
.appt-form .form-row__cols-labels {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
/* One option per row. Two columns fits more on screen but every second
   label wrapped to a ragged second line in a 320px sidebar, which read as
   scrappy; full-width rows keep each option on one line. */
.appt-form .choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.appt-form .choice-toggle {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  font-size: var(--text-sm);
  min-height: 38px;
  line-height: 1.25;
}
.appt-form select.field-select {
  font-size: var(--text-sm);
  min-height: 42px;
}
.appt-form .form-field__error {
  font-size: var(--text-xs);
}
.appt-form__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-1);
}
.appt-form__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-cta);
  flex-shrink: 0;
}
.appt-form__consent span {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.appt-form__submit {
  width: 100%;
  margin-top: var(--space-5);
}
.appt-form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.appt-form__legal {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
  margin: var(--space-4) 0 0;
}
.appt-form__legal a {
  color: var(--color-text-muted);
  text-decoration: underline;
}
.appt-form__call {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.appt-form__call strong {
  color: var(--color-accent);
  font-weight: 600;
}
.appt-form .form-status {
  margin-bottom: var(--space-4);
}

/* The name pair deliberately stays side by side at every width. Stacking it
   left two unlabelled boxes, because the only thing naming them is the
   "First" / "Last" column caption underneath -- and 142px per field at a
   390px viewport is still comfortable. */