/* ============================================================
   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 only a placeholder. Admin-managed photos
   stay invisible until content.js knows the current version (see "No
   stale content flash" at the end of this file). If the published photo
   differs, the placeholder is hidden instantly (.cms-swap-out) and the
   current photo fades in once downloaded - the old one never shows. */
[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;
  transition: none; /* hide the outdated photo instantly; fade in the new */
}

: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: 11.75rem;

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

/* The header bar ignores the centred content column and spans the full page
   width, held off the edges by a bleed that grows with the screen -- about
   two inches on a large display, tapering down on smaller ones so a phone
   does not lose half its screen to margin. The extra width is what lets the
   big logo, the full nav and both office numbers share one line. */
.header__bar {
  max-width: none;
  padding-inline: clamp(var(--space-6), 5vw, 2in);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Header height. The bar is flex-centred, so the logo and the nav
     re-centre on their own. Trimmed when the logo doubled in size, so the
     header grew by ~32px rather than the full 56px. If you change it, also
     check --header-clearance below. */
  padding-block: var(--space-3);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  flex-shrink: 0;
}
/* Double-size brand mark. 112px on a full desktop header (twice the old
   56px), stepped down on narrower screens so a 348px-wide logo never crowds
   out the nav or the phone numbers. The source file is 7093px wide, so even
   the largest size is rendered well below native resolution. */
.brand__logo {
  height: 72px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
@media (min-width: 700px) {
  .brand__logo {
    height: 88px;
  }
}
/* The logo only goes to its full size once the six nav items, both buttons
   and the edge margins have room beside it. On a 13-15" laptop it stays at
   88px so the navigation row stays on screen rather than collapsing to the
   menu button. */
@media (min-width: 1440px) {
  .brand__logo {
    height: 112px;
  }
}
.brand__logo--mobile {
  height: 48px;
}
.brand__logo--footer {
  height: 64px;
}

.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  /* 1rem reads as a deliberate gap rather than a cramped one, and still
     leaves room for six top-level items next to the double-size logo.
     It opens up one step on a wide screen and closes one step just above
     the breakpoint where the nav appears at all. */
  gap: 0.2rem; /* the boxes' own padding now provides the breathing room */
  flex-wrap: nowrap;
}
@media (min-width: 1600px) {
  .nav__list {
    gap: 0.5rem;
  }
  .nav__list > li > a,
  .nav__dropdown-trigger {
    padding: 0.5rem 0.75rem;
  }
}
.nav__list > li > a {
  /* Fixed 15px rather than the fluid --text-sm, which scales to 16px on a
     wide screen -- width the header can no longer spare. 14px looked
     undersized next to the enlarged logo. */
  font-size: 0.9375rem;
  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%;
}

/* Every top-level box is the same width - as wide as the longest label -
   via equal grid columns. */
.nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* Main menu labels in upper case (dropdown items keep normal case). Upper
   case reads larger, so it steps down a size with a touch of tracking. */
.nav__list > li > a,
.nav__dropdown-trigger {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem !important;
  font-weight: 600;
}
.nav__dropdown-menu a {
  text-transform: none;
  letter-spacing: normal;
}

/* Top-level menu items sit in flat rectangular boxes (no pills) that fill
   with the practice navy #12293d on hover or keyboard focus. The box
   replaces the thin underline on these items. */
.nav__list > li > a,
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 0;
  justify-content: center;
  width: 100%;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nav__list > li > a:hover,
.nav__list > li > a:focus-visible,
.nav__dropdown:hover > .nav__dropdown-trigger,
.nav__dropdown:focus-within > .nav__dropdown-trigger {
  background: #12293d;
  color: #ffffff;
}
.nav__list > li > a::after {
  display: none;
}
[data-theme='light'] .nav__list > li > a,
[data-theme='light'] .nav__dropdown-trigger {
  background: rgba(18, 41, 61, 0.06);
}
[data-theme='light'] .nav__list > li > a:hover,
[data-theme='light'] .nav__list > li > a:focus-visible,
[data-theme='light'] .nav__dropdown:hover > .nav__dropdown-trigger,
[data-theme='light'] .nav__dropdown:focus-within > .nav__dropdown-trigger {
  background: #12293d;
  color: #ffffff;
}

/* 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: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.nav__dropdown-trigger:hover {
  color: var(--color-text);
}

/* Just above the width where the nav appears at all, the six items step
   back down to 14px and the tighter gap so the row never crowds the
   buttons. Placed after the base rules so it actually wins. */
@media (max-width: 1439px) {
  /* Laptop widths: the generous edge bleed is trimmed so the six nav items,
     the logo and both buttons all stay on the bar instead of the row
     collapsing into the menu button. */
  .header__bar {
    padding-inline: clamp(var(--space-5), 3vw, 3rem);
  }
  .nav__list {
    gap: 0.1rem;
  }
  .nav__list > li > a,
  .nav__dropdown-trigger {
    font-size: 0.875rem;
    padding: 0.4rem 0.4rem;
  }
}
.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);
}
/* The wide (two-column) Procedures menu is the left-most nav item, so it is
   anchored to the trigger's left edge and opens to the right. Centering it
   (the base .nav__dropdown-menu behaviour) would push its left column off the
   left edge of the viewport. */
.nav__dropdown-menu--wide {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  min-width: 460px;
  left: 0;
  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);
}
/* "QR" circle: same 40px ring as the light/dark toggle, sits just left of it
   and links to the printable QR code page. */
.qr-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);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
}
.qr-toggle:hover {
  background: var(--color-surface-offset);
  text-decoration: none;
}
.menu-toggle {
  display: inline-flex;
}

/* Both office numbers, separated by a hairline rule. Hidden here (they live
   in the mobile drawer below 900px); the desktop header block further down
   places them beside the logo at every width from 900px up. */
.header__phones {
  display: none;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  margin-right: var(--space-1);
}


.header__phone + .header__phone {
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
}

.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: 1280px) {
  .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%;
}
/* Admin "Hero text position". Default (no attribute) = bottom-left, the
   original layout. Nudge is a plain translate so it never changes the
   banner height. */
.hero__content {
  translate: var(--hero-nudge-x, 0px) var(--hero-nudge-y, 0px);
}
.hero[data-text-placement] .hero__content {
  display: flex;
  flex-direction: column;
}
.hero[data-text-placement^="top-"] .hero__content {
  margin-top: 0;
  margin-bottom: auto;
  padding-block-start: var(--space-8);
}
.hero[data-text-placement^="middle-"] .hero__content {
  margin-block: auto;
  padding-block-end: var(--space-8);
}
.hero[data-text-placement$="-left"] .hero__content { align-items: flex-start; text-align: left; }
.hero[data-text-placement$="-center"] .hero__content { align-items: center; text-align: center; }
.hero[data-text-placement$="-right"] .hero__content { align-items: flex-end; text-align: right; }
.hero[data-text-placement$="-center"] .hero__actions { justify-content: center; }
.hero[data-text-placement$="-right"] .hero__actions { justify-content: flex-end; }
.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);
  }
}
/* ---------- Office map ----------
   Interactive Google map on the two location pages. Sits between the
   Get Directions button and the page body copy. 16/9 on a wide screen,
   taller and squarer on a phone so the streets around the office stay
   readable. In dark mode the frame is dimmed very slightly and lifts back
   to full brightness on hover/focus, so a bright white map does not punch
   a hole in the dark page before the visitor actually reaches for it. */
.office-map {
  margin: var(--space-8) 0 var(--space-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-alt, var(--color-surface));
}
.office-map__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}
@media (min-width: 700px) {
  .office-map__frame {
    aspect-ratio: 16 / 9;
  }
}
[data-theme='dark'] .office-map__frame {
  filter: brightness(0.9) contrast(1.02);
  transition: filter 0.25s ease;
}
[data-theme='dark'] .office-map:hover .office-map__frame,
[data-theme='dark'] .office-map__frame:focus-within,
[data-theme='dark'] .office-map__frame:focus {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme='dark'] .office-map__frame {
    transition: none;
  }
}

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

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

/* QR code in the page hero -- sits on the right, vertically centered. It is
   absolutely positioned so it never changes the header's height or the
   eyebrow/title/lede positions. Hidden below 900px where the hero is too
   narrow to fit it beside the text. */
.page-hero__qr {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  z-index: 1;
}
.page-hero__qr img {
  width: 112px;
  height: 112px;
  display: block;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 2px 14px oklch(0 0 0 / 0.28);
}
@media (max-width: 900px) {
  .page-hero__qr {
    display: none;
  }
}

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

/* Video inside a photo gallery: poster frame plus the same play badge as video cards */
.media-tile--video {
  cursor: pointer;
  background: #0b1420;
}
.media-tile--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-tile--video .video-card__play {
  pointer-events: none;
}
.media-tile--video:focus-visible {
  outline: 2px solid var(--color-accent, #d8b062);
  outline-offset: 2px;
}
.media-tile--hover.media-tile--video video {
  filter: blur(18px) saturate(0.9);
}

/* 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 {
  /* Top padding halved (was --space-24): the hero already carries its own
     bottom spacing, so the body should start close beneath it. */
  padding: var(--space-12) 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);
  }
}

/* Links the content renderer creates automatically from web addresses,
   email addresses and phone numbers typed as plain text in the admin. Styled
   here rather than relying on a parent class, because not every CMS body
   container carries .info-page__body. */
.content-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-highlight);
  text-underline-offset: 2px;
  /* A long URL must not push the column wider than the page. */
  overflow-wrap: anywhere;
  transition: color var(--transition-interactive);
}
.content-link:hover,
.content-link:focus-visible {
  color: var(--color-accent-hover);
}

.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,
.referral-form__head h2 {
  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);
}
.file-drop__file > span:first-child {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.file-drop__progress {
  font-size: var(--text-xs);
  color: var(--color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The file list and its note sit above the invisible full-area file input,
   otherwise a click on a row's remove (x) button lands on the input and opens
   the file picker instead of removing the file. */
.file-drop__list,
.file-drop__note {
  position: relative;
  z-index: 1;
}
/* Password box for a password-protected imaging zip (referral form). Sits
   just below the drop area, outside it. */
.zip-pass {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
}
.zip-pass[hidden] { display: none; }
.zip-pass.is-error { border-color: var(--color-error); }
.zip-pass__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.zip-pass__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.zip-pass__row { display: flex; gap: var(--space-2); align-items: center; }
.zip-pass__row .field-input { flex: 1; min-width: 0; }
.zip-pass__row .field-input:disabled { opacity: 0.5; }
.zip-pass__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.zip-pass__toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  flex: none;
}
/* Sits above the invisible full-area file input so it receives the click. */
.file-drop__folder {
  position: relative;
  z-index: 1;
  margin-top: var(--space-3);
  background: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.file-drop__folder:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.file-drop__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-error);
  text-align: left;
}

.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;
}
/* "Refer To" surgeon picker on the referral form: full names with
   credentials need wider, left-aligned tiles than the generic grid. */
#refer_to-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
#refer_to-group .choice-toggle {
  justify-content: flex-start;
  text-align: left;
}
@media (max-width: 640px) {
  #refer_to-group { grid-template-columns: minmax(0, 1fr); }
}
.choice-grid--checklist {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  justify-content: start;
}
.choice-toggle--checklist {
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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);
}
/* ============ TOOTH CHART (Referral form: clickable dental chart) ============ */
.tooth-chart {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-3) var(--space-2);
  max-width: 720px;
}
.tooth-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tooth-chart__tooth {
  cursor: pointer;
  outline: none;
}
.tooth-chart__shape {
  fill: var(--color-surface);
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill var(--transition-interactive), stroke var(--transition-interactive);
}
.tooth-chart__num {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-weight: 600;
  pointer-events: none;
  user-select: none;
  transition: fill var(--transition-interactive);
}
.tooth-chart__tooth:hover .tooth-chart__shape {
  stroke: var(--color-primary);
  fill: var(--color-primary-highlight);
  stroke-width: 2;
}
.tooth-chart__tooth.is-selected .tooth-chart__shape {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}
.tooth-chart__tooth.is-selected .tooth-chart__num {
  fill: var(--color-surface);
}
.tooth-chart__tooth:focus-visible .tooth-chart__shape {
  stroke: var(--color-accent);
  stroke-width: 3;
}
.tooth-chart__primary .tooth-chart__shape {
  stroke-dasharray: 3 2;
}
.tooth-chart__midline {
  stroke: var(--color-text-faint);
}
.tooth-chart__side {
  fill: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.tooth-chart__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}
.tooth-chart__summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.tooth-chart__summary-value {
  color: var(--color-text);
  font-weight: 600;
}
.tooth-chart__toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tooth-chart__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
  border-radius: 3px;
}
.tooth-chart__hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ============ REFERRAL GUIDE (patient prep + items to bring, under the referral form) ============ */
.referral-guide {
  padding: 0 0 var(--space-24);
}
.referral-guide .container {
  max-width: var(--content-default);
}
.referral-guide__intro {
  margin-bottom: var(--space-6);
}
.referral-guide__intro h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.referral-guide__intro p {
  color: var(--color-text-muted);
  max-width: 64ch;
  line-height: 1.6;
}
.referral-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 820px) {
  .referral-guide__grid {
    grid-template-columns: 1fr;
  }
}
.referral-guide__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.referral-guide__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.referral-guide__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.referral-guide__card li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
}
.referral-guide__card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
}
.referral-guide__card li strong {
  font-weight: 600;
}
.referral-guide__card p {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.referral-guide__card a {
  color: var(--color-primary);
  font-weight: 600;
}

.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;
}

/* Outline CTA on an event card must stay readable in the light theme too
   (.btn--outline is tuned for dark hero backgrounds). */
.event-card .event-card__cta.btn--outline {
  color: var(--color-text);
  border-color: oklch(from var(--color-text) l c h / 0.35);
}
.event-card .event-card__cta.btn--outline:hover {
  border-color: var(--color-text);
}

/* ---- Event card: eyebrow + sponsor logo row (all templates) ---- */
.event-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.event-card__sponsors {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.event-card__sponsors-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.event-card__sponsor-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.event-card__sponsor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-3);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--transition-interactive);
}
a.event-card__sponsor:hover {
  border-color: var(--color-accent);
}
.event-card__sponsor img {
  display: block;
  max-height: 28px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- Template: Spotlight (title over a full-bleed photo) ---- */
.event-card--spotlight .event-card__hero {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, #163a5f 0%, #0a1e35 100%);
}
.event-card--spotlight .event-card__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card--spotlight .event-card__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 18, 33, 0.92) 0%, rgba(6, 18, 33, 0.45) 45%, rgba(6, 18, 33, 0.05) 100%);
}
.event-card--spotlight .event-card__hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.event-card--spotlight .event-card__hero-text .event-card__title {
  color: #f8f6f1;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.15;
}
.event-card--spotlight .event-card__hero-text .event-card__eyebrow {
  color: #e0a84f;
}
.event-card--spotlight .event-card__hero-text .event-card__badge {
  margin-bottom: 0;
}

/* ---- Template: Editorial (typography-led with a date block) ---- */
.event-card--editorial .event-card__editorial-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.event-card--editorial .event-card__editorial-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.event-card--editorial .event-card__title {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.12;
}
.event-card__dateblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 72px;
  padding-right: var(--space-5);
  border-right: 2px solid var(--color-accent);
}
.event-card__dateblock-day {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.95;
  font-weight: 500;
  color: var(--color-text);
}
.event-card__dateblock-month {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-1);
}
.event-card__dateblock-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: var(--space-2);
}
.event-card--editorial .event-card__photo--strip {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-sm);
  margin-top: var(--space-3);
}

/* ---- Template: Banner (wide, photo beside the details) ---- */
.event-card--banner {
  border-left: 4px solid var(--color-accent);
}
@media (min-width: 720px) {
  .events-grid .event-card--banner {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .event-card--banner .event-card__photo {
    flex: 0 0 42%;
    aspect-ratio: auto;
    min-height: 320px;
  }
  .event-card--banner .event-card__body {
    padding: var(--space-8);
  }
  .event-card--banner .event-card__title {
    font-size: var(--text-xl);
  }
  .event-card--banner .event-card__description {
    max-width: 60ch;
  }
}
.event-card--banner .event-card__banner-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.event-card--banner .event-card__banner-foot .event-card__cta {
  margin-top: var(--space-4);
  align-self: flex-start;
  min-width: 220px;
}
.event-card--banner .event-card__banner-foot .event-card__sponsors {
  margin-top: var(--space-2);
}

/* ---- Template: Professional (understated, gold rule, portrait) ---- */
.event-card--professional {
  border-top: 3px solid var(--color-accent);
}
.event-card--professional .event-card__pro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.event-card--professional .event-card__pro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.event-card--professional .event-card__title {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.15;
}
.event-card__portrait {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.event-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card--professional .event-card__pro-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.event-card--professional .event-card__pro-meta .event-card__badge {
  margin-bottom: var(--space-1);
}
.event-card--professional .event-card__description {
  margin-top: var(--space-3);
}

/* ============ EVENT CARD: ADDITIONAL DESIGNS ============
   Each one borrows the layout of one of the five designs above (the script adds
   both classes, e.g. event-card--night event-card--professional) and changes the
   colors, type and finish. Colors are fixed per design so a card looks the same
   in the light and dark site themes. */
.event-card--night {
  --color-surface-2: #0c1c31;
  --color-border: rgba(216,176,98,0.35);
  --color-text: #f5efe4;
  --color-text-muted: rgba(245,239,228,0.78);
  --color-text-faint: rgba(245,239,228,0.55);
  --color-primary-highlight: rgba(216,176,98,0.16);
  --color-accent: #d8b062;
  --color-on-dark: #f5efe4;
  --color-success: #9fd2a5;
  --color-success-highlight: rgba(159,210,165,0.16);
  --color-cta: #d8b062;
  --color-cta-text: #241705;
  --color-cta-hover: #d8b062;
  background: linear-gradient(180deg, #0c1c31 0%, #08131f 100%);
}
.event-card--night .event-card__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.08; }
.event-card--night .event-card__pro-meta { border-color: rgba(216, 176, 98, 0.35); }

.event-card--bigdate {
  --color-surface-2: #f5efe4;
  --color-border: #dccfb6;
  --color-text: #10233a;
  --color-text-muted: rgba(16,35,58,0.72);
  --color-text-faint: rgba(16,35,58,0.5);
  --color-primary-highlight: rgba(169,120,42,0.14);
  --color-accent: #a9782a;
  --color-on-dark: #10233a;
  --color-success: #2f6b3a;
  --color-success-highlight: #dbe8d9;
  --color-cta: #10233a;
  --color-cta-text: #f5efe4;
  --color-cta-hover: #10233a;
}
.event-card--bigdate .event-card__dateblock { border-right: 0; padding-right: var(--space-2); }
.event-card--bigdate .event-card__dateblock-day { font-size: clamp(4rem, 3rem + 4vw, 6rem); font-weight: 600; color: var(--color-accent); letter-spacing: -0.02em; }
.event-card--bigdate .event-card__dateblock-month { font-size: var(--text-base); letter-spacing: 0.18em; color: var(--color-text); }
.event-card--bigdate .event-card__title { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); font-weight: 600; }

.event-card--cover {
  --color-surface-2: #0a1626;
  --color-border: rgba(255,255,255,0.14);
  --color-text: #ffffff;
  --color-text-muted: rgba(255,255,255,0.82);
  --color-text-faint: rgba(255,255,255,0.58);
  --color-primary-highlight: rgba(232,199,120,0.16);
  --color-accent: #e8c778;
  --color-on-dark: #ffffff;
  --color-success: #9fd2a5;
  --color-success-highlight: rgba(159,210,165,0.16);
  --color-cta: #e8c778;
  --color-cta-text: #241705;
  --color-cta-hover: #e8c778;
}
.event-card--cover .event-card__hero { aspect-ratio: 4 / 5; }
.event-card--cover .event-card__hero-text .event-card__title { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 400; font-style: italic; line-height: 1.08; }
.event-card--cover .event-card__hero-text .event-card__eyebrow { color: #e8c778; }
.event-card--cover .event-card__hero::after { background: linear-gradient(to top, rgba(6, 12, 22, 0.94) 0%, rgba(6, 12, 22, 0.6) 40%, rgba(6, 12, 22, 0.0) 100%); }

.event-card--split {
  --color-surface-2: #dfe6da;
  --color-border: #c3cfbd;
  --color-text: #1f3a2e;
  --color-text-muted: rgba(31,58,46,0.76);
  --color-text-faint: rgba(31,58,46,0.55);
  --color-primary-highlight: rgba(95,138,107,0.18);
  --color-accent: #3f6b4d;
  --color-on-dark: #1f3a2e;
  --color-success: #2f6b3a;
  --color-success-highlight: rgba(255,255,255,0.65);
  --color-cta: #1f3a2e;
  --color-cta-text: #f6f8f3;
  --color-cta-hover: #1f3a2e;
}
.event-card--split { border-left: 0; }
.event-card--split .event-card__title { font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 720px) {
  .events-grid .event-card--split.event-card--banner { flex-direction: row-reverse; }
}

.event-card--paper {
  --color-surface-2: #fbf9f5;
  --color-border: #e6dfd2;
  --color-text: #2e2a25;
  --color-text-muted: rgba(46,42,37,0.72);
  --color-text-faint: rgba(46,42,37,0.5);
  --color-primary-highlight: rgba(141,122,99,0.16);
  --color-accent: #7d6444;
  --color-on-dark: #2e2a25;
  --color-success: #2f6b3a;
  --color-success-highlight: #e3eddc;
  --color-cta: #2e2a25;
  --color-cta-text: #fbf9f5;
  --color-cta-hover: #2e2a25;
}
.event-card--paper { overflow: visible; margin-top: 76px; box-shadow: 0 18px 40px rgba(46, 42, 37, 0.14); text-align: center; }
.event-card--paper .event-card__photo { width: 152px; height: 152px; aspect-ratio: 1; margin: -76px auto 0; border-radius: 50%; border: 6px solid #ffffff; box-shadow: 0 8px 22px rgba(46, 42, 37, 0.22); overflow: hidden; }
.event-card--paper .event-card__photo--placeholder { background: #ece4d6; color: #8d7a63; }
.event-card--paper .event-card__body { align-items: center; }
.event-card--paper .event-card__badge, .event-card--paper .event-card__cta { align-self: center; }
.event-card--paper .event-card__cta { min-width: 220px; }
.event-card--paper .event-card__title { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
.event-card--paper .event-card__description { text-align: center; }
.event-card--paper .event-card__description ul, .event-card--paper .event-card__description ol { display: inline-block; text-align: left; }

.event-card--calendar {
  --color-surface-2: #e6ebef;
  --color-border: #c9d3db;
  --color-text: #10233a;
  --color-text-muted: rgba(16,35,58,0.72);
  --color-text-faint: rgba(16,35,58,0.5);
  --color-primary-highlight: rgba(42,111,158,0.14);
  --color-accent: #2a6f9e;
  --color-on-dark: #10233a;
  --color-success: #2f6b3a;
  --color-success-highlight: rgba(255,255,255,0.7);
  --color-cta: #10233a;
  --color-cta-text: #ffffff;
  --color-cta-hover: #10233a;
}
.event-card--calendar .event-card__dateblock { border-right: 0; padding: 0; min-width: 96px; background: #ffffff; border-radius: 10px; overflow: hidden; align-items: stretch; text-align: center; box-shadow: 0 8px 20px rgba(16, 35, 58, 0.14); }
.event-card--calendar .event-card__dateblock-month { order: -1; margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-accent); color: #ffffff; letter-spacing: 0.16em; }
.event-card--calendar .event-card__dateblock-day { padding-top: var(--space-2); font-size: 3.4rem; font-weight: 700; color: #10233a; }
.event-card--calendar .event-card__dateblock-time { padding: 0 var(--space-3) var(--space-3); margin-top: var(--space-1); color: rgba(16, 35, 58, 0.72); }
.event-card--calendar .event-card__title { font-weight: 600; }

.event-card--clay {
  --color-surface-2: #a5573d;
  --color-border: rgba(242,213,178,0.35);
  --color-text: #fbf1e6;
  --color-text-muted: rgba(251,241,230,0.86);
  --color-text-faint: rgba(251,241,230,0.66);
  --color-primary-highlight: rgba(242,213,178,0.18);
  --color-accent: #f2d5b2;
  --color-on-dark: #fbf1e6;
  --color-success: #d9f0d3;
  --color-success-highlight: rgba(255,255,255,0.14);
  --color-cta: #fbf1e6;
  --color-cta-text: #4a2418;
  --color-cta-hover: #fbf1e6;
  background: linear-gradient(180deg, #a5573d 0%, #7f3f2b 100%);
}
.event-card--clay .event-card__title { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
.event-card--clay .event-card__pro-meta { border-color: rgba(242, 213, 178, 0.35); }

.event-card--frame {
  --color-surface-2: #144a4a;
  --color-border: rgba(230,194,122,0.4);
  --color-text: #eef5f1;
  --color-text-muted: rgba(238,245,241,0.8);
  --color-text-faint: rgba(238,245,241,0.58);
  --color-primary-highlight: rgba(230,194,122,0.16);
  --color-accent: #e6c27a;
  --color-on-dark: #eef5f1;
  --color-success: #bfe6c3;
  --color-success-highlight: rgba(255,255,255,0.12);
  --color-cta: #e6c27a;
  --color-cta-text: #241705;
  --color-cta-hover: #e6c27a;
  background: linear-gradient(180deg, #144a4a 0%, #0b2c2d 100%);
}
.event-card--frame { border-top: 1px solid var(--color-border); outline: 1px solid rgba(230, 194, 122, 0.55); outline-offset: -12px; text-align: center; }
.event-card--frame .event-card__body { padding: var(--space-8) var(--space-8); align-items: center; }
.event-card--frame .event-card__pro-head { flex-direction: column-reverse; align-items: center; }
.event-card--frame .event-card__pro-text { align-items: center; }
.event-card--frame .event-card__title { font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); }
.event-card--frame .event-card__pro-meta { align-items: center; border-left: 0; border-right: 0; }
.event-card--frame .event-card__badge, .event-card--frame .event-card__cta { align-self: center; }
.event-card--frame .event-card__cta { min-width: 220px; }
.event-card--frame .event-card__description { text-align: center; }
.event-card--frame .event-card__description ul, .event-card--frame .event-card__description ol { display: inline-block; text-align: left; }

.event-card--polaroid {
  --color-surface-2: #efe2d0;
  --color-border: #dcc8ad;
  --color-text: #2b2118;
  --color-text-muted: rgba(43,33,24,0.74);
  --color-text-faint: rgba(43,33,24,0.52);
  --color-primary-highlight: rgba(162,75,46,0.14);
  --color-accent: #a24b2e;
  --color-on-dark: #2b2118;
  --color-success: #2f6b3a;
  --color-success-highlight: rgba(255,255,255,0.55);
  --color-cta: #2b2118;
  --color-cta-text: #fbf6ee;
  --color-cta-hover: #2b2118;
}
.event-card--polaroid .event-card__photo { box-sizing: border-box; width: 76%; aspect-ratio: 1 / 1.12; margin: var(--space-8) auto var(--space-2); padding: 12px 12px 46px; background: #fffdf8; box-shadow: 0 14px 30px rgba(43, 33, 24, 0.28); transform: rotate(-2.5deg); }
.event-card--polaroid .event-card__photo--placeholder { background: #fffdf8; color: #b6a48c; }
.event-card--polaroid .event-card__body { align-items: center; text-align: center; }
.event-card--polaroid .event-card__badge, .event-card--polaroid .event-card__cta { align-self: center; }
.event-card--polaroid .event-card__cta { min-width: 220px; }
.event-card--polaroid .event-card__description { text-align: center; }
.event-card--polaroid .event-card__description ul, .event-card--polaroid .event-card__description ol { display: inline-block; text-align: left; }

.event-card--stack {
  --color-surface-2: #23262b;
  --color-border: rgba(236,231,220,0.22);
  --color-text: #ece7dc;
  --color-text-muted: rgba(236,231,220,0.78);
  --color-text-faint: rgba(236,231,220,0.55);
  --color-primary-highlight: rgba(200,191,174,0.16);
  --color-accent: #d8cdb6;
  --color-on-dark: #ece7dc;
  --color-success: #a9d8ae;
  --color-success-highlight: rgba(255,255,255,0.12);
  --color-cta: #ece7dc;
  --color-cta-text: #14161a;
  --color-cta-hover: #ece7dc;
  background: linear-gradient(180deg, #23262b 0%, #14161a 100%);
}
.event-card--stack .event-card__title { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.96; font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); }
.event-card--stack .event-card__pro-meta { border-color: rgba(236, 231, 220, 0.22); }


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

/* ==========================================================================
   PATIENT FORMS  (patient-center/patient-forms.html)
   A download list, not a page of prose. Each row is one file: an extension
   chip so you can see what you are about to open, the title, one line of
   guidance, and the weight of the file. Flat and rectangular throughout to
   match the rest of the site -- no pills.
   ========================================================================== */

.forms-intro {
  max-width: 62ch;
  margin-bottom: var(--space-8);
}
.forms-intro p {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* Audience filter. Three flat tabs sharing one hairline, so the row reads as
   a single control rather than three floating buttons. */
.forms-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  overflow: hidden;
  width: fit-content;
  margin-bottom: var(--space-6);
  background: var(--color-surface);
}
.forms-filter__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.6rem var(--space-5);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.forms-filter__btn + .forms-filter__btn {
  border-left: 1px solid var(--color-border);
}
.forms-filter__btn:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}
.forms-filter__btn.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.forms-filter__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.forms-group + .forms-group {
  margin-top: var(--space-8);
}
.forms-group__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.forms-group__items {
  display: grid;
  gap: var(--space-3);
}

.form-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    transform 0.15s ease;
}
.form-card:hover,
.form-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  transform: translateY(-1px);
}
.form-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* The extension chip does the job an icon usually does, but tells you more:
   PDF, DOCX, XLSX -- you know before clicking whether you can open it. */
.form-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 2rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.form-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.form-card__title {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.form-card__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: 0.15rem;
}
.form-card__meta {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
  margin-top: 0.3rem;
}
.form-card__action {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-cta);
}
.form-card:hover .form-card__action {
  color: var(--color-cta-hover);
}

/* A published form whose download is switched off: still clickable so it can
   be read in the browser, but the action is "View" rather than "Download". */
.form-card--view .form-card__action {
  color: var(--color-text-muted);
}
.form-card--view:hover .form-card__action {
  color: var(--color-text-muted);
}

.forms-state {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.forms-state--empty {
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .form-card {
    align-items: flex-start;
    padding: var(--space-4);
  }
  .form-card__action {
    align-self: center;
  }
  .forms-filter {
    width: 100%;
  }
  .forms-filter__btn {
    flex: 1 1 auto;
    padding-inline: var(--space-3);
    text-align: center;
  }
}

/* ===========================================================================
   COLLAGE
   A timed photo sequence with an optional sliding text panel. Built by
   js/collage.js from settings saved in the admin. All motion values arrive as
   inline custom properties; everything structural lives here.
   =========================================================================== */
.collage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: #000;
  isolation: isolate; /* keeps the photo layering inside the frame */
}

/* Every animated value is set inline by js/collage.js so each hand-over is
   fully controlled; nothing here animates on its own. */
.collage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none; /* the site-wide img cap would clip the blur-fade bleed */
  object-fit: cover;
  opacity: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: opacity, transform, filter, scale;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* A blurred photo smears the black frame in from its edges. For blur-fade the
   photos run a little past the frame (cropped by overflow) so the soft edge
   is never visible. */
.collage[data-collage-transition='blur-fade'] .collage__photo {
  inset: -28px;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
}

@keyframes collage-drift {
  from { scale: 1.02; }
  to { scale: 1.12; }
}

/* Only used when a collage has a single photo (nothing ever swaps). */
.collage__photo--drift.is-active {
  animation-name: collage-drift;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* --- Text panel --------------------------------------------------------- */
.collage__panel {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(1.25rem, 4vw, 3rem);
  pointer-events: none;
}

.collage__panel--top-left { align-items: flex-start; justify-content: flex-start; }
.collage__panel--top-center { align-items: flex-start; justify-content: center; }
.collage__panel--top-right { align-items: flex-start; justify-content: flex-end; }
.collage__panel--middle-left { align-items: center; justify-content: flex-start; }
.collage__panel--middle-center { align-items: center; justify-content: center; }
.collage__panel--middle-right { align-items: center; justify-content: flex-end; }
.collage__panel--bottom-left { align-items: flex-end; justify-content: flex-start; }
.collage__panel--bottom-center { align-items: flex-end; justify-content: center; }
.collage__panel--bottom-right { align-items: flex-end; justify-content: flex-end; }

.collage__panel-inner {
  --collage-offset-x: 0px;
  --collage-offset-y: 0px;
  --collage-panel-duration: 0.7s;
  --collage-panel-easing: ease-out;
  transform: translate(var(--collage-offset-x), var(--collage-offset-y));
}

/* The shade sits on the lines of text, not around the whole panel, so it is
   only a sliver taller than the letters. `box-decoration-break: clone` keeps
   that band on every wrapped line rather than one ragged shape. */
.collage__panel-inner.has-backdrop .collage__panel-heading,
.collage__panel-inner.has-backdrop .collage__panel-body {
  display: inline-block;
  padding: 0.08em 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.collage__panel-inner.has-backdrop .collage__panel-body {
  margin-top: 0.35rem;
}

.collage__panel-heading {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: 500;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}

.collage__panel-body {
  margin: 0.5rem 0 0;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}

/* Entry animations. The end state repeats the nudge offsets so the panel
   settles exactly where placement + nudge put it. */
@keyframes collage-panel-slide-up-blur {
  from { opacity: 0; transform: translate(var(--collage-offset-x), calc(var(--collage-offset-y) + 28px)); filter: blur(10px); }
  to { opacity: 1; transform: translate(var(--collage-offset-x), var(--collage-offset-y)); filter: blur(0); }
}
@keyframes collage-panel-slide-down-blur {
  from { opacity: 0; transform: translate(var(--collage-offset-x), calc(var(--collage-offset-y) - 28px)); filter: blur(10px); }
  to { opacity: 1; transform: translate(var(--collage-offset-x), var(--collage-offset-y)); filter: blur(0); }
}
@keyframes collage-panel-slide-left {
  from { opacity: 0; transform: translate(calc(var(--collage-offset-x) + 48px), var(--collage-offset-y)); }
  to { opacity: 1; transform: translate(var(--collage-offset-x), var(--collage-offset-y)); }
}
@keyframes collage-panel-slide-right {
  from { opacity: 0; transform: translate(calc(var(--collage-offset-x) - 48px), var(--collage-offset-y)); }
  to { opacity: 1; transform: translate(var(--collage-offset-x), var(--collage-offset-y)); }
}
@keyframes collage-panel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.collage__panel-inner.is-entering {
  animation-duration: var(--collage-panel-duration);
  animation-timing-function: var(--collage-panel-easing);
  animation-fill-mode: both;
}
.collage__panel-inner.is-entering[data-collage-panel-transition='slide-up-blur'] { animation-name: collage-panel-slide-up-blur; }
.collage__panel-inner.is-entering[data-collage-panel-transition='slide-down-blur'] { animation-name: collage-panel-slide-down-blur; }
.collage__panel-inner.is-entering[data-collage-panel-transition='slide-left'] { animation-name: collage-panel-slide-left; }
.collage__panel-inner.is-entering[data-collage-panel-transition='slide-right'] { animation-name: collage-panel-slide-right; }
.collage__panel-inner.is-entering[data-collage-panel-transition='fade'] { animation-name: collage-panel-fade; }

/* --- Visitor controls --------------------------------------------------- */
/* Hero banners paint their headline above the photo layer, so a collage panel
   used there is mounted on the hero section itself and lifted above both. */
.collage__panel--hero {
  z-index: 2;
}

.collage__controls {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
}

.collage__arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.collage__arrow:hover,
.collage__arrow:focus-visible {
  background: rgba(0, 0, 0, 0.6);
  border-color: #fff;
}

.collage__dots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.collage__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}

.collage__dot.is-active {
  background: #fff;
}

/* A collage fills whatever frame it replaces. The figure wrappers on the home
   page size themselves from their <img>, so they need an explicit floor once
   that image is gone. */
.intro__figure.has-collage,
.has-collage > .collage {
  min-height: 100%;
}

.intro__figure.has-collage {
  position: relative;
  /* Matches `.intro__figure img` above, so swapping a single photo for a
     collage does not change the height of the column. */
  aspect-ratio: 16 / 10;
}

/* Office-photo collage on its own (the second office slot empty): same
   16:10 landscape frame, just larger - the photo column takes a bigger share
   of the row on a wide screen. */
.intro--single-figure .intro__figure.has-collage {
  aspect-ratio: 16 / 8; /* wide landscape, chosen by the practice */
  /* The frame's size comes from its width only. Letting it stretch to the
     row height made Safari widen it to keep 16:8, which squeezed the text. */
  min-height: 0;
  height: auto;
  min-width: 0;
}
.intro--single-figure .intro__figure.has-collage > .collage {
  min-height: 0;
  height: 100%;
}
.intro--single-figure .intro__figures,
.intro--single-figure .intro__body {
  min-width: 0;
}
@media (min-width: 900px) {
  .intro--single-figure .container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collage__photo {
    transition-duration: 0.001s !important;
  }
  .collage__photo--drift.is-active {
    animation: none !important;
  }
  .collage__panel-inner.is-entering {
    animation-duration: 0.001s !important;
  }
}

/* ---------- No stale content flash ----------
   Photos and copy inside the page body are managed in the admin; the HTML
   only carries build-time placeholders. Keep them invisible until content.js
   has applied the current version (it adds .cms-ready, also on failure).
   Safety net: if the script never runs at all, they appear after 8s. */
html:not(.cms-ready) main [data-cms],
html:not(.cms-ready) main [data-cms-img],
html:not(.cms-ready) main [data-cms-hero] {
  opacity: 0;
  animation: cms-failsafe 0s linear 8s forwards;
}
@keyframes cms-failsafe {
  to { opacity: 1; }
}
html.cms-ready main [data-cms-hero],
html.cms-ready main [data-cms-img] {
  animation: cms-appear 0.35s ease-out both;
}
@keyframes cms-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.cms-ready main [data-cms-hero],
  html.cms-ready main [data-cms-img] { animation: none; }
}

/* ---------- No stale menu flash ----------
   The header menu and mobile menu are arranged in the admin's Navigation
   page; the HTML only carries a fallback copy. Keep both lists invisible
   until content.js has drawn the saved layout (it adds .cms-nav-ready, also
   when the layout can't be loaded). Safety net: appear after 3s regardless. */
html:not(.cms-nav-ready) .nav__list,
html:not(.cms-nav-ready) .mobile-nav__list {
  opacity: 0;
  animation: cms-failsafe 0s linear 3s forwards;
}
html.cms-nav-ready .nav__list,
html.cms-nav-ready .mobile-nav__list {
  animation: cms-appear 0.2s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  html.cms-nav-ready .nav__list,
  html.cms-nav-ready .mobile-nav__list { animation: none; }
}

/* A collage is downloading its first photo: hide the out-of-date placeholder
   instead of showing it, then fade the collage in once it mounts. */
.collage-loading > :not(.collage) {
  opacity: 0 !important;
  transition: none !important;
}
.has-collage > .collage {
  animation: cms-appear 0.5s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .has-collage > .collage { animation: none; }
}


/* ---------- Header layout (900px and wider) ----------
   Logo, light/dark toggle and the two buttons on the top row; the six
   upper-case menu boxes in their own full-width row under the logo, on the same six-column
   grid as the buttons above it: Doctor Referral and Request Appointment sit
   over LAB and EVENTS and the light/dark toggle sits just left of them.
   Below 900px (phones, portrait tablets) the menu button takes over. */
@media (min-width: 900px) {
  .nav {
    display: grid;
  }
  .menu-toggle {
    display: none;
  }
  .header__bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 10px;
    align-items: center;
  }
  .header__bar > .brand {
    grid-column: 1 / 4;
    grid-row: 1;
    justify-self: start;
  }
  .header__bar > .header__actions {
    display: contents;
  }
  /* Office numbers sit immediately to the right of the logo on the top
     row at every desktop width, top-aligned with the LIGHTHOUSE wordmark.
     They share the logo's grid area (columns 1-3) and are pushed right by
     a fixed margin equal to the logo's rendered width, so the logo itself
     is never measured, resized or moved by this rule -- the logo is the
     constant, the numbers fit around it.
       --hdr-logo-w mirrors .brand__logo: the file is 7093x2281, so an
       88px-tall logo is 274px wide and a 112px-tall logo is 348px wide.
       --hdr-wordmark-top is where the top of the LIGHTHOUSE letters sit in
       the file: 846px down of 2281 = 37.1% of the logo's height. The last
       term pulls the text up by its own half-leading + ascender gap so the
       glyph tops (not the line box) line up with the letters. */
  .header__bar {
    --hdr-logo-w: 274px;
    --hdr-logo-h: 88px;
  }
  .header__actions .header__phones {
    display: flex;
    grid-column: 1 / 4;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    margin-left: calc(var(--hdr-logo-w) + var(--space-4));
    margin-top: calc(var(--hdr-logo-h) * 0.371 - 0.28em);
    margin-right: 0;
    white-space: nowrap;
  }
  /* Laptop widths: the single-line pair would run into the light/dark
     toggle, so the two numbers stack instead (two short lines still fit
     inside the logo's height). Above 1200px they sit on one line again. */
  @media (max-width: 1199.98px) {
    .header__actions .header__phones {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
    }
    .header__actions .header__phone + .header__phone {
      margin-left: 0;
      padding-left: 0;
      border-left: 0;
    }
  }
  .header__actions .theme-toggle {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    margin-right: 4px;
  }
  /* Shares the toggle's cell, offset left by one circle + gap. */
  .header__actions .qr-toggle {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    margin-right: calc(4px + 40px + 8px);
  }
  .header__actions .header__referral {
    grid-column: 5;
    grid-row: 1;
    display: inline-flex;
  }
  .header__actions .btn--primary {
    grid-column: 6;
    grid-row: 1;
  }
  .header__bar > .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: subgrid;
    min-width: 0;
  }
  .header__bar .nav__list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-flow: row;
    column-gap: normal;
  }
  .nav__list > li > a,
  .nav__dropdown-trigger,
  .header__actions .header__referral,
  .header__actions .btn--primary {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 0.25rem;
    justify-content: center;
    font-size: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
    justify-self: stretch;
    max-width: none;
  }
  .header__actions .header__referral,
  .header__actions .btn--primary {
    letter-spacing: 0;
  }
  .nav__dropdown-trigger svg {
    display: none;
  }
}


/* ---------- Mobile menu: collapsible sections ----------
   Procedures, Patient Center and Contact Us are tap-to-open sections (one
   open at a time) instead of a single long list. Section headings match the
   stand-alone links (Lab, Events); the links inside sit indented in a
   smaller size so the hierarchy is obvious. */
.mobile-nav__list {
  gap: 0;
}
.mobile-nav__group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  padding-block: var(--space-3);
  color: var(--color-text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  cursor: pointer;
}
.mobile-nav__group-toggle svg {
  flex-shrink: 0;
  transition: transform 180ms ease;
}
.mobile-nav__group-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.mobile-nav__group-toggle[aria-expanded='true'] {
  color: var(--color-primary);
}
.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.mobile-nav__sub[hidden] {
  display: none;
}
.mobile-nav__list .mobile-nav__sub a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding-block: var(--space-2);
  padding-inline-start: 0;
  border-bottom: 0;
  color: var(--color-text-muted);
}
.mobile-nav__list .mobile-nav__sub a:hover,
.mobile-nav__list .mobile-nav__sub a[aria-current='page'] {
  color: var(--color-text);
}

/* Wider screens: the boxes are roomy, so the shared type steps up a size. */
@media (min-width: 1280px) {
  .nav__list > li > a,
  .nav__dropdown-trigger,
  .header__actions .header__referral,
  .header__actions .btn--primary {
    font-size: 0.8125rem !important;
    letter-spacing: 0.04em;
  }
  .header__actions .header__referral,
  .header__actions .btn--primary {
    letter-spacing: 0.01em;
  }
}
/* Full-size logo (112px tall, see .brand__logo at 1440px): the phone
   offset mirrors that size so the numbers keep hugging the logo's right
   edge and the top of the wordmark. */
@media (min-width: 1440px) {
  .header__bar {
    --hdr-logo-w: 348px;
    --hdr-logo-h: 112px;
  }
}

/* ============================================================
   Smile Shade Simulator  (patient-center/shade-simulator.html)
   Compact, flat: one bordered stage, chips as squares, no pills.
   ============================================================ */
.shade-sim { display: grid; gap: var(--space-6); }
.shade-sim [hidden] { display: none !important; }

.shade-sim__steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0;
  margin: 0;
}
.shade-sim__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 0.3rem;
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.shade-sim__steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.shade-sim__steps li strong {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
}
.shade-sim__steps li span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .shade-sim__steps { grid-template-columns: 1fr; }
}

/* Privacy card: plain statements styled like the sidebar link lists. */
.shade-sim-privacy li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.shade-sim-privacy li:last-child { border-bottom: none; padding-bottom: 0; }
.shade-sim-privacy li:first-child { padding-top: 0; }

.shade-sim__drop {
  border: 1px dashed var(--color-border);
  background: var(--color-surface-2);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.shade-sim__drop.is-over { border-color: var(--color-accent); background: var(--color-surface-offset); }
.shade-sim__drop-icon { width: 2.25rem; height: 2.25rem; color: var(--color-accent); margin-bottom: var(--space-2); }
.shade-sim__drop-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin: 0; }
.shade-sim__drop-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; letter-spacing: 0.02em; }
.shade-sim__drop-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }

.shade-sim__status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.shade-sim__status[data-kind="error"] {
  border-left-color: var(--color-error);
  background: var(--color-error-highlight);
  color: var(--color-error);
}
[data-theme="dark"] .shade-sim__status[data-kind="error"] {
  background: rgba(156, 59, 59, 0.18);
  color: #f0b3b3;
}
.shade-sim[data-state="working"] .shade-sim__status[data-kind="info"]::before {
  content: "";
  display: inline-block;
  width: 0.65rem; height: 0.65rem;
  margin-right: 0.6rem;
  vertical-align: -1px;
  border: 2px solid var(--color-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: shade-spin 0.8s linear infinite;
}
@keyframes shade-spin { to { transform: rotate(360deg); } }

.shade-sim__stage { display: grid; gap: var(--space-5); }

.shade-sim__canvas-wrap {
  position: relative;
  border: 1px solid var(--color-border);
  background: #0a1726;
  line-height: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.shade-sim__canvas-wrap canvas { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.shade-sim__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.shade-sim__divider::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2rem; height: 2rem;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background-image:
    linear-gradient(90deg, transparent 0 40%, #0e2a4a 40% 46%, transparent 46% 54%, #0e2a4a 54% 60%, transparent 60%);
}
.shade-sim__tag {
  position: absolute;
  top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4rem 0.55rem;
  background: rgba(10, 23, 38, 0.72);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.shade-sim__tag--before { left: var(--space-3); }
.shade-sim__tag--after { right: var(--space-3); }
.shade-sim.has-target .shade-sim__divider,
.shade-sim.has-target .shade-sim__tag { opacity: 1; }
.shade-sim__compare {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  opacity: 0;
  /* Dragging is handled with pointer events on the photo wrapper (see
     shade-simulator.js); the range stays for keyboard/assistive access. */
  pointer-events: none;
}
.shade-sim.has-target .shade-sim__canvas-wrap { cursor: ew-resize; }
.shade-sim__compare::-webkit-slider-thumb { -webkit-appearance: none; width: 2.5rem; height: 100%; }
.shade-sim__compare::-moz-range-thumb { width: 2.5rem; height: 100%; border: 0; }
.shade-sim__compare:focus-visible { opacity: 1; outline: 2px solid var(--color-accent); outline-offset: -2px; }

.shade-sim__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.shade-sim__result-label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.shade-sim__result-value { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); }
.shade-sim__result-value strong { font-weight: 500; }
.shade-sim__result-group { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); }
.shade-sim__result-alt { font-size: var(--text-sm); color: var(--color-text-muted); }
.shade-sim__result-note {
  flex-basis: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.shade-sim__swatch {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: none;
}

.shade-sim__chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.shade-sim__chip {
  appearance: none;
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: inherit;
  padding: var(--space-3) var(--space-2);
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease;
}
.shade-sim__chip .shade-sim__swatch { width: 100%; height: 1.5rem; max-width: 64px; }
.shade-sim__chip-label { font-size: var(--text-sm); font-weight: 600; line-height: 1; }
.shade-sim__chip-sub { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); line-height: 1; }
.shade-sim__chip:hover { background: var(--color-surface-offset); }
.shade-sim__chip.is-active { background: var(--color-primary); color: var(--color-text-inverse); }
.shade-sim__chip.is-active .shade-sim__chip-sub { color: var(--color-text-inverse); opacity: 0.7; }
.shade-sim__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; z-index: 1; }

.shade-sim__strength {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.shade-sim__strength input { flex: 1; max-width: 280px; accent-color: var(--color-primary); }
.shade-sim__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.shade-sim__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.shade-sim [data-shade-zoom][aria-pressed="true"] { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }