/* ============================================================
   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;
  }
}

/* Doctor Referral sits immediately left of Request Appointment as a matched
   pair: same size and same sharp corners, outlined in the CTA colour instead
   of filled, so the two read as siblings while the patient-facing action stays
   the louder of the two. Hidden until there is room for both without
   squeezing the nav -- below that width it lives in the mobile drawer footer
   directly above the appointment button. */
/* The outlined referral button carries a 1.5px border the filled CTA does
   not, which made it 2px taller. A transparent border of the same width on
   the CTA keeps the pair exactly level. */
.header__actions .btn[data-open-request-form] {
  border: 1.5px solid transparent;
}

.header__referral {
  display: none;
  background: transparent;
  color: var(--color-cta);
  border: 1.5px solid var(--color-cta);
}
.header__referral:hover {
  background: var(--color-cta);
  color: var(--color-cta-text);
  border-color: var(--color-cta);
  transform: translateY(-1px);
}

@media (min-width: 1000px) {
  .header__referral {
    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);
  }
}
/* No photo in the intro? Hide the empty column and let the copy run the full
   width, capped at a comfortable reading measure so the lines do not get
   uncomfortably long on a wide screen. js/app.js sets .intro--no-photo. */
.intro--no-photo .intro__figures {
  display: none;
}
@media (min-width: 900px) {
  .intro--no-photo .container {
    grid-template-columns: 1fr;
  }
  .intro--no-photo .intro__body {
    max-width: 62rem;
  }
}
.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;
}

/* Clickable addresses -- tapping one opens Google Maps (or the native maps
   app on a phone). Styled as quiet text rather than a loud link so the
   address cards keep reading as information, with the underline appearing
   on hover/focus to show it is tappable. */
.address-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.address-link:hover,
.address-link:focus-visible {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}
/* Inside the location-page Address card the address is the card's whole body,
   so it keeps the same muted body colour as the hours beside it rather than
   inheriting the site's accent link colour. */
.info-grid__card .address-link {
  display: inline-block;
  color: var(--color-text-muted);
}
.info-grid__card .address-link:hover,
.info-grid__card .address-link:focus-visible {
  color: var(--color-primary);
}

/* ============================================================
   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. */