/* ============================================
   HaleOrtho — Static HTML version
   Design tokens mirror src/index.css
   ============================================ */

:root {
  --background: 38 40% 98%;
  --foreground: 195 40% 12%;
  --card: 0 0% 100%;
  --card-foreground: 195 40% 12%;
  --primary: 187 65% 24%;
  --primary-foreground: 38 40% 98%;
  --primary-glow: 180 55% 45%;
  --secondary: 170 40% 92%;
  --secondary-foreground: 187 65% 20%;
  --muted: 180 20% 95%;
  --muted-foreground: 195 15% 40%;
  --accent: 16 85% 62%;
  --accent-foreground: 195 40% 12%;
  --border: 180 20% 88%;
  --radius: 1rem;

  --gradient-hero:
    radial-gradient(ellipse at top left, hsl(180 55% 88% / 0.6), transparent 60%),
    radial-gradient(ellipse at bottom right, hsl(16 85% 85% / 0.4), transparent 60%),
    linear-gradient(180deg, hsl(38 40% 98%), hsl(180 30% 96%));
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
  --gradient-accent: linear-gradient(135deg, hsl(16 85% 62%), hsl(28 90% 65%));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(180 30% 97%));

  --shadow-soft: 0 4px 24px -8px hsl(187 65% 24% / 0.1);
  --shadow-elegant: 0 20px 60px -20px hsl(187 65% 24% / 0.25);
  --shadow-glow: 0 0 60px hsl(180 55% 45% / 0.35);
  --shadow-accent: 0 12px 40px -12px hsl(16 85% 62% / 0.45);

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.4s var(--ease-smooth);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; letter-spacing: -0.02em; margin: 0; font-weight: 600; line-height: 1.1; }
p { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }

/* Layout */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 2rem;
}
@media (max-width: 768px) {
  .container { padding-inline: 1.25rem; }
}

.section { padding: 6rem 0; }
@media (min-width: 768px) { .section { padding: 8rem 0; } }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: hsl(var(--primary)); font-family: inherit; }
.section-lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  text-wrap: balance;
}
.section-head { max-width: 42rem; margin: 0 auto 4rem; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn svg { width: 18px; height: 18px; }

.btn-hero {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-glow);
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-elegant); }

.btn-accent {
  background: var(--gradient-accent);
  color: hsl(var(--accent-foreground));
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover { transform: translateY(-2px); }

.btn-outline {
  border-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
  background: transparent;
}
.btn-outline:hover { background: hsl(var(--primary) / 0.05); border-color: hsl(var(--primary) / 0.5); }

.btn-outline-light {
  border-color: hsl(var(--primary-foreground) / 0.3);
  color: hsl(var(--primary-foreground));
  background: transparent;
}
.btn-outline-light:hover { background: hsl(var(--primary-foreground) / 0.1); }

.btn .icon-spin-on-hover { transition: transform var(--transition-base); }
.btn:hover .icon-spin-on-hover { transform: rotate(12deg); }

/* ============================================
   Navbar
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth), backdrop-filter 0.5s var(--ease-smooth);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: hsl(var(--border));
  box-shadow: var(--shadow-soft);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem; /* minimum spacing between brand, nav-links, and nav-cta */
  height: 5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .brand-logo { height: 3rem; }
  .brand-name { font-size: 1.25rem; }
}

.nav-links {
  display: none;
  gap: 2rem;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.nav-cta { display: none; }
@media (min-width: 640px) {
  .nav-cta { display: flex; align-items: center; gap: 0.5rem; }
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
}

/* Longer brand name "Osteon Orthopedic Hospital" — tighten desktop nav so it fits */
@media (min-width: 768px) and (max-width: 1199px) {
  .brand-name { font-size: 0.95rem; }
  .brand-logo { height: 2.25rem; }
  .nav-links { gap: 1rem; font-size: 0.8125rem; }
  .nav-row { gap: 0.875rem; }
  .nav-book-link { display: none; }
}

.nav-link {
  position: relative;
  display: inline-block;
  transition: color var(--transition-base);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-smooth);
}
.nav-link:hover { color: hsl(var(--foreground)); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: hsl(var(--foreground)); }
.nav-link.active::after { transform: scaleX(1); background: hsl(var(--primary)); }

.menu-toggle {
  padding: 0.75rem;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: hsl(var(--foreground));
}
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .menu-toggle { display: none; }
}

.mobile-menu {
  display: none;
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  overflow: hidden;
}
.mobile-menu.open { display: block; }
.mobile-menu .container { padding-block: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu a:not(.btn) {
  color: hsl(var(--muted-foreground));
  padding: 0.875rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--transition-base);
}
.mobile-menu a:not(.btn):hover { color: hsl(var(--foreground)); }

/* ============================================
   Hero — Mobile-first editorial composition
   Defaults target mobile; min-width queries scale up.
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  padding: 6.5rem 0 3rem;
}
@media (min-width: 768px) { .hero { padding: 9rem 0 4.5rem; } }
@media (min-width: 1024px) { .hero { padding: 11rem 0 6rem; } }

.hero-grid {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
  }
}

/* Eyebrow pill */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.875rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  background: hsl(var(--card) / 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: hsl(var(--primary));
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) {
  .eyebrow-pill { font-size: 0.8125rem; padding: 0.5rem 1.125rem; gap: 0.625rem; letter-spacing: 0.14em; margin-bottom: 1.75rem; }
}
.dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: hsl(var(--accent));
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Editorial headline — single cohesive size, gradient accent on last name */
.hero-name {
  font-family: 'Playfair Display', serif;
  margin: 0;
  text-wrap: balance;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: hsl(var(--foreground));
}
.hero-name .first {
  display: block;
  font-weight: 500;
}
.hero-name .last {
  display: block;
  font-weight: 700;
  font-style: italic;
  color: hsl(var(--primary));
  padding-bottom: 0.05em;
}
.hero-credentials {
  display: block;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: hsl(var(--primary));
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .hero-credentials { font-size: 0.9rem; margin-top: 1.5rem; }
}
.hero-tagline {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  max-width: 40ch;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .hero-tagline { margin-top: 1.5rem; font-size: 1.125rem; max-width: 38ch; }
}
.hero-tagline strong { color: hsl(var(--foreground)); font-weight: 600; }

/* CTA row — mobile: full-width stacked thumb targets */
.cta-row {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cta-row .btn { width: 100%; justify-content: center; }
@media (min-width: 480px) {
  .cta-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .cta-row .btn { width: auto; }
}
@media (min-width: 768px) {
  .cta-row { margin-top: 2.25rem; gap: 0.875rem; }
}

/* Right column: layered cutout composition
   .hero-portrait wraps everything (relative)
   .hero-stage holds the glow + decorative panel + cutout (aspect-ratio constrained)
   .cred-pills-row sits below on mobile, breaks out via display:contents on desktop */
.hero-portrait {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .hero-portrait { max-width: 26rem; } }
@media (min-width: 1024px) {
  .hero-portrait { margin-left: auto; margin-right: 0; }
}

.hero-stage {
  position: relative;
  aspect-ratio: 4 / 5;
}
/* Landscape studio photo — full horizontal framing to match the source image */
.hero-portrait.variant-rect .hero-stage { aspect-ratio: 1110 / 693; }

.hero-portrait .glow {
  position: absolute;
  inset: -1.5rem;
  background:
    radial-gradient(circle at 30% 30%, hsl(var(--primary-glow) / 0.5), transparent 60%),
    radial-gradient(circle at 70% 70%, hsl(var(--accent) / 0.35), transparent 60%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

/* 3D sphere panel — multi-layer radial gradients simulate a polished orb
   with light from top-left, shadow rim at bottom-right, glass-like inner shine. */
.hero-portrait .frame-panel {
  position: absolute;
  z-index: 1;
  inset: 14% 4% 4% 4%;
  border-radius: 50%;
  background:
    /* Bright specular spot top-left (small intense highlight) */
    radial-gradient(circle at 26% 22%,
      hsl(0 0% 100% / 0.7) 0%,
      hsl(0 0% 100% / 0.15) 12%,
      transparent 28%),
    /* Mid-tone wash across upper third (light ambient bounce) */
    radial-gradient(ellipse at 38% 30%,
      hsl(var(--primary-glow) / 0.45) 0%,
      hsl(var(--primary-glow) / 0.18) 35%,
      transparent 60%),
    /* Warm accent glow on the right (color rim) */
    radial-gradient(circle at 78% 60%,
      hsl(var(--accent) / 0.32) 0%,
      hsl(var(--accent) / 0.1) 30%,
      transparent 55%),
    /* Sphere body — darker at edges for spherical falloff */
    radial-gradient(circle at 50% 50%,
      hsl(var(--primary) / 0.18) 0%,
      hsl(var(--primary) / 0.28) 60%,
      hsl(var(--primary) / 0.42) 100%);
  box-shadow:
    /* Drop shadow grounding the sphere */
    0 50px 80px -25px hsl(var(--primary) / 0.45),
    0 25px 50px -15px hsl(var(--primary) / 0.3),
    /* Inner shadow at bottom-right for depth */
    inset -18px -22px 55px -10px hsl(var(--primary) / 0.45),
    /* Inner highlight at top-left for sphere curvature */
    inset 14px 14px 40px -8px hsl(0 0% 100% / 0.4),
    /* Thin rim ring */
    0 0 0 1px hsl(var(--primary) / 0.14);
}
.hero-portrait .frame-panel::before {
  /* Concentrated specular reflection — the small bright "shine" spot */
  content: '';
  position: absolute;
  top: 12%;
  left: 16%;
  width: 26%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    hsl(0 0% 100% / 0.65) 0%,
    hsl(0 0% 100% / 0.25) 35%,
    transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
.hero-portrait .frame-panel::after {
  /* Bottom-right inner shadow rim — deepens the 3D illusion */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 75% 78%,
      transparent 35%,
      hsl(var(--primary) / 0.18) 75%,
      hsl(var(--primary) / 0.38) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-portrait .cutout {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  height: auto;
  max-height: 112%;
  object-fit: contain;
  object-position: bottom center;
  /* Fade the bottom edge so the white coat doesn't end with a sharp horizontal line */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 75%,
    rgba(0,0,0,0.6) 90%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 75%,
    rgba(0,0,0,0.6) 90%,
    transparent 100%);
}

/* RECT variant — rounded rectangular studio photo card */
.hero-portrait .photo-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow:
    0 40px 80px -25px hsl(var(--primary) / 0.45),
    0 18px 40px -16px hsl(var(--primary) / 0.3),
    0 0 0 1px hsl(var(--primary) / 0.08);
  background: hsl(var(--secondary));
}
.hero-portrait .photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.hero-portrait .photo-card::after {
  /* Subtle gradient overlay for visual depth */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 60%,
    hsl(var(--primary) / 0.18) 100%);
  pointer-events: none;
}

/* ===== Variant toggle: show only the active variant ===== */
.hero-portrait.variant-orb .photo-card { display: none; }
.hero-portrait.variant-rect .frame-panel,
.hero-portrait.variant-rect .cutout { display: none; }

/* Credential pills
   Mobile: horizontal strip BELOW the photo (tap-friendly, no overlap)
   Desktop (1024+): floating absolute around the photo */
.cred-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
  justify-content: center;
}
@media (min-width: 1024px) {
  .cred-pills-row {
    display: contents;
  }
}

.cred-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.8rem;
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  font-size: 0.75rem;
}
.cred-pill .ic {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}
.cred-pill .ic svg { width: 13px; height: 13px; }
.cred-pill .label {
  display: block;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.15;
  font-size: 0.78rem;
}
.cred-pill .sub {
  display: block;
  margin-top: 1px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.02em;
}

/* Desktop: floating absolute placement */
@media (min-width: 1024px) {
  .cred-pill {
    position: absolute;
    z-index: 3;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    box-shadow:
      0 18px 40px -16px hsl(var(--primary) / 0.35),
      0 0 0 1px hsl(0 0% 100% / 0.4) inset;
    font-size: 0.8125rem;
  }
  .cred-pill .ic { width: 2rem; height: 2rem; border-radius: 9px; }
  .cred-pill .ic svg { width: 14px; height: 14px; }
  .cred-pill .label { font-size: 0.8125rem; }
  .cred-pill .sub { font-size: 0.78rem; margin-top: 2px; }
  .cred-pill.tl { top: -6%;   left: -14%; }
  .cred-pill.mr { top: 42%;   right: -14%; }
  .cred-pill.bl { bottom: 8%; left: -10%; }

  /* Landscape hero: pills sit in a row UNDER the photo, never over the face */
  .hero-portrait.variant-rect .cred-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.25rem;
    justify-content: center;
  }
  .hero-portrait.variant-rect .cred-pill { position: static; }
}

/* Integrated stats band */
.hero-stats {
  position: relative;
  z-index: 10;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid hsl(var(--border) / 0.7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0;
}
@media (min-width: 768px) {
  .hero-stats { margin-top: 4rem; padding-top: 2.5rem; grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .hero-stats { margin-top: 5rem; padding-top: 2.75rem; } }
.hero-stat { text-align: center; position: relative; }
.hero-stat:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, hsl(var(--border)), transparent);
}
.hero-stat:nth-child(2n+1)::before { display: none; }
@media (min-width: 768px) {
  .hero-stat:nth-child(2n+1)::before { display: block; }
  .hero-stat:first-child::before { display: none; }
}
.hero-stat .num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.75rem, 7vw, 3.25rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(var(--primary));
}
.hero-stat .lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) {
  .hero-stat .lbl { margin-top: 0.6rem; font-size: 0.8125rem; letter-spacing: 0.12em; }
}

/* Mesh blobs */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
  animation: blob-float 18s ease-in-out infinite;
}
.blob-1 { background: hsl(var(--primary-glow) / 0.3); width: 500px; height: 500px; top: -10rem; left: -10rem; }
.blob-2 { background: hsl(var(--accent) / 0.2); width: 400px; height: 400px; top: 33%; right: -8rem; animation-delay: -6s; }
.blob-3 { background: hsl(var(--primary) / 0.2); width: 450px; height: 450px; bottom: 0; left: 33%; animation-delay: -12s; }

/* ============================================
   Robotic Joint Replacement spotlight (home page)
   ============================================ */
.robotic-spotlight {
  position: relative;
  background:
    radial-gradient(ellipse at top right, hsl(var(--accent) / 0.08), transparent 60%),
    radial-gradient(ellipse at bottom left, hsl(var(--primary-glow) / 0.1), transparent 60%),
    hsl(var(--secondary) / 0.35);
  border-top: 1px solid hsl(var(--border) / 0.5);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.robotic-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .robotic-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}

.robotic-copy .eyebrow-pill { margin-bottom: 1.5rem; }
.robotic-copy .section-title em { font-style: italic; color: hsl(var(--primary)); }

.robotic-features {
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .robotic-features { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.robotic-features li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.robotic-features .rf-ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  margin-top: 2px;
}
.robotic-features .rf-ic svg { width: 14px; height: 14px; }
.robotic-features strong {
  display: block;
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.robotic-features span {
  font-size: 0.85rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* Stats grid for robotic spotlight (right column) */
.robotic-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  position: relative;
}
@media (min-width: 768px) { .robotic-stats { gap: 1.25rem; } }
.rs-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.rs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elegant); }
.rs-card.highlight {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.rs-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(var(--primary));
  margin-bottom: 0.625rem;
}
.rs-card.highlight .rs-num {
  color: hsl(var(--primary-foreground));
}
.rs-lbl {
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.35;
}
.rs-lbl span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.02em;
}
.rs-card.highlight .rs-lbl { color: hsl(var(--primary-foreground)); }
.rs-card.highlight .rs-lbl span { color: hsl(var(--primary-foreground) / 0.8); }

/* ============================================
   Stats
   ============================================ */
.stats {
  padding: 5rem 0;
  background: hsl(var(--secondary) / 0.4);
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
@media (min-width: 768px) { .stats { padding: 7rem 0; } }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat-value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
}

/* ============================================
   Marquee
   ============================================ */
.marquee-band {
  padding: 2.5rem 0;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  overflow: hidden;
}
.marquee {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
  width: max-content;
}
.marquee span {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: hsl(var(--muted-foreground) / 0.7);
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 768px) { .marquee span { font-size: 1.875rem; } }
.marquee .pip {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: hsl(var(--primary));
}

/* ============================================
   Specialties
   ============================================ */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.specialty-card {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
}
.specialty-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-elegant);
}
.specialty-card .haze {
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: 8rem;
  height: 8rem;
  border-radius: 9999px;
  background: hsl(var(--primary-glow) / 0.1);
  filter: blur(40px);
  transition: background 0.7s var(--ease-smooth);
}
.specialty-card:hover .haze { background: hsl(var(--primary-glow) / 0.3); }
.specialty-card-body { position: relative; }
.specialty-icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-glow);
  margin-bottom: 1.25rem;
  transition: transform 0.5s var(--ease-smooth);
}
.specialty-icon svg { width: 24px; height: 24px; }
.specialty-card:hover .specialty-icon { transform: scale(1.1); }
.specialty-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 600; }
.specialty-card p {
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1.6;
}
.specialty-card .more {
  margin-top: 1.5rem;
  padding: 0.625rem 0;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--primary));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.4s, transform 0.4s;
}
.specialty-card:hover .more { opacity: 1; transform: translateX(4px); }

/* Image-variant of specialty card: photo on top, content below */
.specialty-card.has-media { padding: 0; display: flex; flex-direction: column; }
.specialty-card.has-media .specialty-media {
  position: relative;
  overflow: hidden;
  background: hsl(var(--secondary) / 0.5);
}
.specialty-card.has-media .specialty-media img {
  width: 100%; height: auto; display: block;
  transition: transform 0.7s var(--ease-smooth);
}
.specialty-card.has-media:hover .specialty-media img { transform: scale(1.04); }
.specialty-card.has-media .specialty-card-body { padding: 1.5rem 1.75rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.specialty-card.has-media .more { margin-top: auto; opacity: 1; }

/* All-services grid: 4 columns on wide screens */
.cards-grid.cards-grid-services { gap: 1.25rem; }
@media (min-width: 1280px) { .cards-grid.cards-grid-services { grid-template-columns: repeat(4, 1fr); } }
.cards-grid-services .specialty-card.has-media .specialty-card-body { padding: 2rem 1.25rem 1.25rem; }
.cards-grid-services .specialty-card h3 { font-size: 1.05rem; line-height: 1.35; }
.cards-grid-services .specialty-card p { font-size: 0.85rem; }

/* Service-block (services overview page) image hero */
.service-block .service-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1rem;
  background: hsl(var(--secondary) / 0.5);
  box-shadow: var(--shadow-soft);
}
.service-block .service-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================
   About
   ============================================ */
.about {
  background: hsl(var(--secondary) / 0.3);
}
.about-grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; } }

.portrait {
  position: relative;
}
.portrait .glow {
  position: absolute;
  inset: -1rem;
  background: var(--gradient-primary);
  opacity: 0.2;
  filter: blur(60px);
  border-radius: 9999px;
}
.portrait .frame {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-elegant);
  aspect-ratio: 4 / 5;
  max-width: 28rem;
  margin: 0 auto;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--primary) / 0.3), transparent 50%);
}
.portrait-tag {
  position: absolute;
  bottom: -1.5rem;
  right: -0.5rem;
  background: hsl(var(--card));
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-elegant);
  border: 1px solid hsl(var(--border));
  max-width: 220px;
}
@media (min-width: 768px) { .portrait-tag { right: 2rem; } }
.portrait-tag .row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.portrait-tag .stars-row { color: hsl(var(--accent)); font-size: 0.95rem; }
.portrait-tag .pt-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px; object-fit: cover;
  border: 2px solid hsl(var(--card));
  box-shadow: 0 2px 6px -2px hsl(187 65% 24% / 0.25);
  flex-shrink: 0;
}
.portrait-tag p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.45; }
.portrait-tag .pt-attribution {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: hsl(var(--foreground));
  font-weight: 600;
}
.portrait-tag .pt-attribution .via {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.about-body h2 { font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; }
.about-body > p {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}
.creds-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .creds-grid { grid-template-columns: repeat(3, 1fr); } }
.cred {
  background: hsl(var(--card));
  border-radius: 0.875rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-soft);
}
.cred svg {
  width: 24px;
  height: 24px;
  color: hsl(var(--primary));
  margin-bottom: 0.5rem;
}
.cred h3 { font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600; margin: 0; }
.cred p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

/* ============================================
   Process
   ============================================ */
.process { position: relative; overflow: hidden; }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.connector {
  display: none;
  position: absolute;
  top: 1.375rem;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
}
@media (min-width: 768px) { .connector { display: block; } }
.connector line {
  stroke: hsl(var(--primary));
  stroke-width: 2;
  stroke-dasharray: 6 6;
}
.step { position: relative; text-align: center; }
.step-num {
  position: relative;
  margin: 0 auto 1.5rem;
  min-width: 5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 9999px;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  display: inline-grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--primary));
  white-space: nowrap;
}
.step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.step p {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
}

/* ============================================
   Testimonials
   ============================================ */
.testimonials {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  position: relative;
  overflow: hidden;
}
.testimonials .blob-bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}
.testimonials .blob-bg .blob-a { background: hsl(var(--primary-glow)); width: 600px; height: 600px; top: -10rem; left: -10rem; }
.testimonials .blob-bg .blob-b { background: hsl(var(--accent)); width: 500px; height: 500px; bottom: 0; right: 0; animation-delay: -8s; }
.testimonials .container { position: relative; }
.testimonials .eyebrow { color: inherit; opacity: 0.8; }
.reviews {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
.review {
  background: hsl(var(--primary-foreground) / 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--primary-foreground) / 0.1);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: background 0.5s var(--ease-smooth);
}
.review:hover { background: hsl(var(--primary-foreground) / 0.1); }
.review .quote-icon { width: 32px; height: 32px; opacity: 0.4; margin-bottom: 1rem; }

/* Reviewer avatar (real Google profile photos) */
.review .meta .avatar {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid hsl(var(--primary-foreground) / 0.2);
  box-shadow: 0 4px 12px hsl(0 0% 0% / 0.18);
}
@media (min-width: 768px) {
  .review .meta .avatar { width: 4rem; height: 4rem; }
}
.review .meta {
  align-items: center;
  gap: 0.875rem;
}
.review .meta .who { flex: 1; min-width: 0; }
.review .meta .author a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s var(--ease-smooth);
}
.review .meta .author a:hover { opacity: 0.75; }
/* On light service-page testimonials */
.section:not(.testimonials) .review .meta .avatar {
  border-color: hsl(var(--border));
}

/* Verified-via attribution chip on testimonials */
.review .via {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: hsl(var(--primary-foreground) / 0.12);
  border: 1px solid hsl(var(--primary-foreground) / 0.18);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--primary-foreground) / 0.85);
}
.review .via svg { width: 12px; height: 12px; }
/* On light bg testimonials (service pages), use primary tint */
.section:not(.testimonials) .review .via {
  background: hsl(var(--secondary));
  border-color: hsl(var(--border));
  color: hsl(var(--primary));
}
.review .body {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-style: normal;
  font-weight: 400;
}
.review .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review .author { font-weight: 600; }
.review .role { font-size: 0.875rem; opacity: 0.7; }
.review .stars-row { color: hsl(var(--accent)); }

/* ============================================
   FAQ
   ============================================ */
.faq .container { max-width: 48rem; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  padding: 0 1.5rem;
  box-shadow: var(--shadow-soft);
}
.faq-trigger {
  width: 100%;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: inherit;
  cursor: pointer;
}
.faq-trigger .chev {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: hsl(var(--primary));
  transition: transform 0.3s var(--ease-smooth);
}
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-content {
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
  padding-bottom: 1.25rem;
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger { list-style: none; }

/* ============================================
   Contact CTA
   ============================================ */
.contact {
  position: relative;
  overflow: hidden;
}
.contact-card {
  position: relative;
  background: var(--gradient-primary);
  border-radius: 1.5rem;
  padding: 2.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-elegant);
  color: hsl(var(--primary-foreground));
}
@media (min-width: 768px) { .contact-card { padding: 4rem; } }
.contact-card .blob-bg {
  position: absolute;
  inset: 0;
  opacity: 0.3;
}
.contact-card .blob-a { background: hsl(var(--accent)); width: 400px; height: 400px; top: -8rem; right: -8rem; }
.contact-card .blob-b { background: hsl(var(--primary-foreground)); width: 300px; height: 300px; bottom: -5rem; left: -5rem; animation-delay: -7s; }
.contact-card .grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 768px) { .contact-card .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact-card h2 { font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; margin-bottom: 1.25rem; }
.contact-card p.lede { font-size: 1.125rem; opacity: 0.9; max-width: 28rem; text-wrap: balance; }
.contact-card .cta-row { margin-top: 2rem; gap: 0.75rem; }
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: hsl(var(--primary-foreground) / 0.9);
}
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-info-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: hsl(var(--primary-foreground) / 0.15);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info p { padding-top: 0.625rem; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: hsl(var(--secondary) / 0.4);
  border-top: 1px solid hsl(var(--border));
  margin-top: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease-smooth);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}
.footer-main {
  display: grid;
  gap: 2.5rem;
  padding-top: 4rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) { .footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-main { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.footer-col .brand { margin-bottom: 1rem; }
.footer-tagline {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 32ch;
}
.footer-address { font-style: normal; }
.footer-nap {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.75rem;
  line-height: 1.55;
}
.footer-nap .footer-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.footer-nap a {
  color: inherit;
  overflow-wrap: anywhere;
  transition: color var(--transition-base);
}
.footer-nap a[href^="tel:"],
.footer-nap a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.25rem 0;
}
.footer-nap a[href^="tel:"] { min-height: 36px; font-variant-numeric: tabular-nums; }
.footer-nap a:hover { color: hsl(var(--foreground)); }
.footer-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  margin: 0 0 1.25rem;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0;
  color: hsl(var(--muted-foreground));
  transition: color var(--transition-base);
}
.footer-list a:hover { color: hsl(var(--foreground)); }
.footer-list .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--gradient-accent);
  color: hsl(var(--accent-foreground));
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-accent);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.footer-list .footer-cta:hover {
  color: hsl(var(--accent-foreground));
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent), 0 8px 22px -8px hsl(16 85% 30% / 0.45);
}
.footer-list .footer-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  color: hsl(var(--muted-foreground));
}
.footer-areas li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.6);
  margin-right: 0.5rem;
  vertical-align: middle;
}
.footer-bottom {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.5);
}
.footer-bottom-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom-row { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-copy {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
  line-height: 1.5;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.footer-legal a { transition: color var(--transition-base); }
.footer-legal a:hover { color: hsl(var(--foreground)); }

/* ============================================
   Inner page hero (compact, shares language with main hero)
   ============================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  padding: 8rem 0 4rem;
  text-align: center;
}
@media (min-width: 768px) { .page-hero { padding: 10rem 0 5rem; } }

/* Compact variant — listing pages like /blog/ where the hero is a thin intro, not a full inner-page hero. */
.page-hero--tight { padding: 6rem 0 2.25rem; }
.page-hero--tight h1 { font-size: clamp(1.85rem, 4vw, 3rem); }
.page-hero--tight p.lede { margin-top: 1rem; font-size: 1rem; max-width: 36rem; }
.page-hero--tight .eyebrow { margin-bottom: 0.75rem; }
.page-hero--tight .breadcrumb { margin-bottom: 0.875rem; }
@media (min-width: 768px) { .page-hero--tight { padding: 7.5rem 0 2.75rem; } }

.page-hero .container { position: relative; z-index: 10; max-width: 52rem; }
.page-hero .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
  padding: 0.4rem 1rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  background: hsl(var(--card) / 0.65);
  backdrop-filter: blur(12px);
  border-radius: 9999px;
  box-shadow: var(--shadow-soft);
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
.page-hero h1 em {
  font-style: italic;
  font-weight: 700;
  color: hsl(var(--primary));
  font-family: inherit;
}
.page-hero p.lede {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  text-wrap: pretty;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Breadcrumb */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
  transition: color var(--transition-base);
}
.breadcrumb a:hover { color: hsl(var(--primary)); }
.breadcrumb svg { width: 14px; height: 14px; opacity: 0.5; }
.breadcrumb [aria-current="page"] { color: hsl(var(--foreground)); font-weight: 500; }

/* Article-style content blocks for inner pages */
.prose {
  max-width: 48rem;
  margin: 0 auto;
}
.prose h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.prose h3 {
  font-size: 1.375rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.25rem;
}
.prose p strong { color: hsl(var(--foreground)); font-weight: 600; }
.prose ul, .prose ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 1.0625rem;
  line-height: 1.75;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }

/* Service detail block (used on /services/) */
.service-block {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) {
  .service-block { grid-template-columns: 220px 1fr; padding: 3rem; gap: 3rem; }
}
.service-block + .service-block { margin-top: 1.5rem; }
.service-block .icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-glow);
  margin-bottom: 1rem;
}
.service-block .icon-wrap svg { width: 28px; height: 28px; }
.service-block h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.service-block p { color: hsl(var(--muted-foreground)); line-height: 1.7; margin-bottom: 1rem; }
.service-block .procedure-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.service-block .procedure-list span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Contact form */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.contact-form {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 768px) { .contact-form { padding: 2.5rem; } }
.contact-form .field { margin-bottom: 1.25rem; }
.contact-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--background));
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.required-marker { color: hsl(0 65% 45%); font-weight: 700; margin-left: 0.15em; }
.field-optional { color: hsl(var(--muted-foreground)); font-weight: 400; margin-left: 0.25em; }
.form-required-note { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0 0 1.25rem; }
.form-status { min-height: 1.25em; margin: 0.5rem 0 0.75rem; font-size: 0.9rem; }
.form-status.error,
.form-status.is-error { color: hsl(0 65% 45%); }
.form-status.success,
.form-status.is-success {
  color: hsl(155 55% 32%);
  background: hsl(155 55% 32% / 0.08);
  border: 1px solid hsl(155 55% 32% / 0.25);
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  font-weight: 500;
}
.form-status.is-loading { color: hsl(var(--muted-foreground)); }
.form-status.is-error {
  background: hsl(0 65% 45% / 0.06);
  border: 1px solid hsl(0 65% 45% / 0.2);
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"],
.contact-form select[aria-invalid="true"] {
  border-color: hsl(0 65% 50%);
  box-shadow: 0 0 0 3px hsl(0 65% 50% / 0.15);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .field-row {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) { .contact-form .field-row { grid-template-columns: 1fr 1fr; } }

.contact-info-card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  max-width: 100%;
}
.contact-info-card h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.contact-info-card .row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-top: 1px solid hsl(var(--border));
}
.contact-info-card .row:first-of-type { border-top: none; }
.contact-info-card .row .icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: hsl(var(--secondary));
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.contact-info-card .row .icon svg { width: 18px; height: 18px; }
.contact-info-card .row .label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.125rem;
}
.contact-info-card .row .value { font-size: 0.95rem; color: hsl(var(--foreground)); overflow-wrap: anywhere; word-break: break-word; }
.contact-info-card .row .value a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.25rem 0;
  max-width: 100%;
}
.contact-info-card .row .value a[href^="tel:"] { min-height: 36px; font-variant-numeric: tabular-nums; }
.contact-info-card .row .value a:hover { color: hsl(var(--primary)); }
.contact-info-card .map {
  margin-top: 1.5rem;
  aspect-ratio: 16/10;
  background: hsl(var(--secondary));
  border-radius: 0.875rem;
  overflow: hidden;
}
.contact-info-card .map iframe { width: 100%; height: 100%; border: 0; }

/* ============================================
   Blog index cards
   ============================================ */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elegant); }
.blog-card .cover {
  --cover-image: none;
  aspect-ratio: 16 / 10;
  background:
    var(--cover-image) center / cover no-repeat,
    var(--gradient-primary);
  position: relative;
  overflow: hidden;
  transition: transform 0.6s var(--ease-smooth);
}
.blog-card:hover .cover { transform: scale(1.03); }
.blog-card .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, hsl(var(--primary) / 0.18)),
    radial-gradient(ellipse at top right, hsl(var(--accent) / 0.18), transparent 60%);
  pointer-events: none;
}
.blog-card .body { padding: 1.5rem 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.blog-card .meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;
}
.blog-card .tag {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-weight: 600;
}
.blog-card h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.625rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}
.blog-card h3 a { color: inherit; transition: color var(--transition-base); }
.blog-card:hover h3 a { color: hsl(var(--primary)); }
.blog-card p {
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  flex: 1;
}
.blog-card .read-more {
  padding: 0.625rem 0;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--primary));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
}

/* Service detail page hero (uses page-hero with extras) */
.service-detail-hero {
  text-align: left;
}
.service-detail-hero .container { max-width: 64rem; }
.service-detail-hero .hero-row {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .service-detail-hero .hero-row { grid-template-columns: auto 1fr; gap: 3rem; }
}
.service-detail-hero .hero-icon {
  display: inline-grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1.25rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-glow);
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .service-detail-hero .hero-icon { margin-bottom: 1rem; }
}
.service-detail-hero .hero-icon svg { width: 32px; height: 32px; }

/* Inline service-card Book button (sits in the CTA row at the bottom of each card) */
.card-cta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  flex-wrap: wrap;
}
.btn-book-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.625rem 1rem;
  min-height: 44px;
  background: var(--gradient-accent);
  color: hsl(var(--accent-foreground));
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-accent);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.btn-book-sm:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent), 0 6px 18px -8px hsl(16 85% 30% / 0.4); }
.btn-book-sm svg { width: 14px; height: 14px; }
.card-cta-row .more { margin: 0; opacity: 1; }

/* Service-detail booking bar — bottom sticky bar inside main content */
.book-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: hsl(var(--card) / 0.96);
  border-top: 1px solid hsl(var(--border));
  box-shadow: 0 -8px 24px -12px hsl(187 65% 24% / 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.875rem 1rem;
}
.book-bar-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.book-bar-text { font-size: 0.95rem; color: hsl(var(--foreground)); margin: 0; }
.book-bar-text strong { font-weight: 600; color: hsl(var(--primary)); }
.book-bar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .book-bar-text { font-size: 0.85rem; flex: 1 1 100%; text-align: center; }
  .book-bar-actions { flex: 1 1 100%; justify-content: center; }
}

/* Hero image banner shown below page-hero on service detail and blog post pages */
.service-hero-image,
.post-hero-image {
  padding: 0 1rem 2rem;
}
.service-hero-image .container,
.post-hero-image .container { max-width: 64rem; padding: 0; }
.service-hero-image .frame,
.post-hero-image .frame {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  background: hsl(var(--secondary) / 0.5);
  box-shadow: var(--shadow-elegant);
}
.service-hero-image .frame img,
.post-hero-image .frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Two-column section list (procedures, what-to-expect) */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }
.feature-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  box-shadow: var(--shadow-soft);
}
.feature-item .num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  font-size: 0.875rem;
}
.feature-item h4 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.feature-item p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 0; }

/* ============================================
   Reveal animations (vanilla replacement for framer-motion whileInView)
   Content is visible by default — only hidden when JS is active so
   crawlers and no-JS users always see the content.
   ============================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Keyframes
   ============================================ */
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.95); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

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

/* ============================================
   Contact info — clickable + copy button pattern
   ============================================ */
.contact-info-values {
  flex: 1;
  min-width: 0;
  padding-top: 0.625rem;
  line-height: 1.5;
}
.contact-info-values a,
.contact-info-row a.contact-info-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), opacity var(--transition-base);
}
.contact-info-values a:hover,
.contact-info-row a.contact-info-link:hover {
  border-bottom-color: currentColor;
  opacity: 0.9;
}
.contact-info-row a.contact-info-link {
  flex: 1;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-top: 0.625rem;
  line-height: 1.5;
}
.contact-info-values .sep {
  display: inline-block;
  margin: 0 0.4rem;
  opacity: 0.5;
}

.copy-btn {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.4rem;
  background: hsl(var(--primary-foreground) / 0.12);
  border: 1px solid hsl(var(--primary-foreground) / 0.18);
  color: hsl(var(--primary-foreground));
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-base), transform var(--transition-base);
}
.copy-btn:hover { background: hsl(var(--primary-foreground) / 0.22); transform: translateY(-1px); }
.copy-btn:active { transform: translateY(0); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn::after {
  content: 'Copied!';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
  z-index: 10;
}
.copy-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: hsl(var(--foreground));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth);
  z-index: 10;
}
.copy-btn.copied::after,
.copy-btn.copied::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.copy-btn.copied { background: hsl(var(--accent) / 0.3); border-color: hsl(var(--accent) / 0.55); }

.contact-info-card .copy-btn {
  background: hsl(var(--secondary));
  border-color: hsl(var(--border));
  color: hsl(var(--primary));
}
.contact-info-card .copy-btn:hover { background: hsl(var(--primary) / 0.1); }

/* Labeled contact-info pattern (matches /contact/ page card style) */
.contact-info-body {
  flex: 1;
  min-width: 0;
  padding-top: 0;
}
.contact-info-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
  margin-bottom: 0.35rem;
}
.contact-info-body .contact-info-link,
.contact-info-body a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 0.25rem 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-info-body br + a { margin-top: 0.15rem; }
.contact-info-row {
  align-items: flex-start;
  padding: 0.25rem 0;
}

/* ============================================
   Education & Training timeline
   ============================================ */
.section-timeline .prose { max-width: 52rem; }

.timeline-intro {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
}

.cred-chips,
.prose .cred-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none !important;
  padding: 0;
  margin: 0 auto 3rem;
  max-width: 48rem;
  font-size: 0.8125rem;
}
.cred-chips li,
.prose .cred-chips li { list-style: none; margin: 0; }
.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.cred-chip svg {
  width: 14px;
  height: 14px;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.cred-chip strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.timeline,
.prose .timeline {
  position: relative;
  list-style: none !important;
  padding: 0;
  margin: 0;
}
.timeline li,
.prose .timeline li { list-style: none; }
.prose .timeline li + li { margin-top: 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 1.1875rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    hsl(var(--primary) / 0.12) 0%,
    hsl(var(--primary) / 0.5) 12%,
    hsl(var(--primary) / 0.5) 88%,
    hsl(var(--primary) / 0.12) 100%
  );
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 1.75rem;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--secondary) / 0.55), var(--shadow-soft);
  color: hsl(var(--primary));
  z-index: 1;
}
.timeline-dot svg { width: 16px; height: 16px; }

.timeline-item--current .timeline-dot {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.timeline-item--current .timeline-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid hsl(var(--primary) / 0.35);
  animation: timelinePulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes timelinePulse {
  0%, 100% { opacity: 0; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item--current .timeline-dot::after { animation: none; opacity: 0.7; }
}

.timeline-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.timeline-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 10px 28px -10px hsl(var(--primary) / 0.22);
}
.timeline-period {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  margin: 0 0 0.625rem;
}
.timeline-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  line-height: 1.3;
  color: hsl(var(--foreground));
}
.timeline-where {
  font-size: 0.875rem;
  color: hsl(var(--primary));
  font-weight: 500;
  margin: 0 0 0.5rem;
}
.timeline-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

@media (min-width: 768px) {
  .timeline::before { left: 1.5rem; }
  .timeline-item { padding-left: 4.25rem; padding-bottom: 2rem; }
  .timeline-dot { width: 3rem; height: 3rem; }
  .timeline-dot svg { width: 18px; height: 18px; }
  .timeline-card { padding: 1.375rem 1.5rem; }
  .timeline-card h3 { font-size: 1.3125rem; }
}

/* Memberships block */
.memberships-block {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
}
.memberships-eyebrow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin: 0 0 1.25rem;
}
.membership-grid,
.prose .membership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  list-style: none !important;
  padding: 0;
  margin: 0;
}
.membership-grid li,
.prose .membership-grid li { list-style: none; margin: 0; }
@media (min-width: 640px) {
  .membership-grid,
  .prose .membership-grid { grid-template-columns: repeat(3, 1fr); }
}
.membership-grid li {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: var(--shadow-soft);
}
.membership-grid li strong {
  font-size: 0.9375rem;
  color: hsl(var(--foreground));
  font-weight: 600;
  letter-spacing: 0.01em;
}
.membership-grid li span {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ============================================
   Section helpers + Conditions linked grid
   ============================================ */
.section-sub-center {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2.75rem;
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
}

.conditions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .conditions-grid { grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
}
@media (min-width: 1024px) {
  .conditions-grid { grid-template-columns: repeat(3, 1fr); }
}

.condition-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  padding: 1.25rem 1.25rem 1.125rem;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.condition-card:hover,
.condition-card:focus-visible {
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 14px 32px -12px hsl(var(--primary) / 0.22);
  outline: none;
}
.condition-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  margin-bottom: 0.875rem;
}
.condition-icon svg { width: 18px; height: 18px; }
.condition-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.3;
  color: hsl(var(--foreground));
}
.condition-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  margin: 0 0 1rem;
  flex: 1;
}
.condition-cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--primary));
  letter-spacing: 0.01em;
  transition: transform 0.2s ease;
  align-self: flex-start;
}
.condition-card:hover .condition-cta { transform: translateX(3px); }

/* ============================================
   FAQ list
   ============================================ */
.faq-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item[open] {
  border-color: hsl(var(--primary) / 0.35);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  list-style: none;
  line-height: 1.45;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ''; }
.faq-q:hover { color: hsl(var(--primary)); }
.faq-chev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: hsl(var(--primary));
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-chev { transform: rotate(45deg); }
.faq-a {
  padding: 0 1.125rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
}
.faq-a p { margin: 0; }
.faq-a p + p { margin-top: 0.75rem; }
.faq-a a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .faq-q { padding: 1.125rem 1.375rem; font-size: 1rem; }
  .faq-a { padding: 1rem 1.375rem 1.25rem; }
}

/* Hero Call CTA — sized to match the primary Book Appointment button */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
  border-radius: 0.75rem;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.btn-call:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 18px 40px -16px hsl(var(--primary) / 0.4);
  background: hsl(var(--card));
}
.btn-call.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

.btn-call .btn-call-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
}
.btn-call .btn-call-icon svg { width: 16px; height: 16px; }

.btn-call .btn-call-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* On mobile, full-width like the other hero CTA */
@media (max-width: 479px) {
  .btn-call { width: 100%; }
}

/* ─────────────────────────────────────────────
   Visiting Consultant — hospital affiliations
   ───────────────────────────────────────────── */
.section.affiliations { background: hsl(var(--secondary) / 0.4); }

/* When About is followed directly by Affiliations, both share a near-identical
   tint — collapse the seam so the combined 16rem padding doesn't read as a void. */
.section.about:has(+ .section.affiliations) { padding-bottom: 2.5rem; }
.section.about + .section.affiliations { padding-top: 2.5rem; }
@media (min-width: 768px) {
  .section.about:has(+ .section.affiliations) { padding-bottom: 3.5rem; }
  .section.about + .section.affiliations { padding-top: 3.5rem; }
}
.affiliation-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.875rem;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 600px) { .affiliation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .affiliation-grid { grid-template-columns: repeat(3, 1fr); } }
.affiliation-pill {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
  padding-left: 2.25rem;
}
.affiliation-pill::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
}
.affiliation-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elegant);
  border-color: hsl(var(--primary) / 0.4);
}

/* ─────────────────────────────────────────────
   Published Research
   ───────────────────────────────────────────── */
.publications-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.publication {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--primary));
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.publication:hover { transform: translateY(-2px); box-shadow: var(--shadow-elegant); }
.publication h3 {
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: hsl(var(--foreground));
}
.publication .pub-meta {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}
.publication .pub-meta a {
  color: hsl(var(--primary));
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--primary) / 0.3);
  transition: border-color var(--transition-base);
}
.publication .pub-meta a:hover { border-bottom-color: hsl(var(--primary)); }

/* ─────────────────────────────────────────────
   Surgical & Patient Story Videos
   ───────────────────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media (min-width: 600px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }

/* Home horizontal scrollers — show ~3, the rest scroll to the right */
.home-scroller {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.25rem 1.25rem;
  margin: 0 -0.25rem;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--primary) / 0.45) transparent;
}
.home-scroller > * {
  scroll-snap-align: start;
  min-width: 0;
}
.home-scroller::-webkit-scrollbar { height: 8px; }
.home-scroller::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.4);
  border-radius: 99px;
}
.home-scroller::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 600px) {
  .home-scroller { grid-auto-columns: 46%; }
}
@media (min-width: 1024px) {
  .home-scroller { grid-auto-columns: calc((100% - 3rem) / 3); }
}

.video-card {
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elegant); }

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: hsl(var(--muted));
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.video-card:hover .video-thumb img { transform: scale(1.04); }

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 50%);
  pointer-events: none;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: hsl(var(--primary));
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform var(--transition-base), background var(--transition-base);
  z-index: 1;
  padding-left: 4px;
}
.video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

.video-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.video-body .tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  background: hsl(var(--primary) / 0.08);
  border-radius: 999px;
}
.video-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: hsl(var(--foreground));
}

/* Section against testimonials' dark backdrop — video cards stay light */
.testimonials .video-card {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}
.testimonials .reviews-video-row .eyebrow { color: hsl(var(--primary-foreground)); }

/* ─────────────────────────────────────────────
   Clinic Photo Gallery — masonry-style grid
   ───────────────────────────────────────────── */
.section.gallery { background: hsl(var(--secondary) / 0.3); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 0.75rem;
}
@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 1rem; }
}
@media (min-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 1.125rem; }
}

.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  background: hsl(var(--muted));
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter var(--transition-base);
}
.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elegant);
}
.gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.04);
}

/* Layout span variants */
.gallery-item-wide  { grid-column: span 2; }
.gallery-item-tall  { grid-row: span 2; }
.gallery-item-large { grid-column: span 2; grid-row: span 2; }

/* On the tightest mobile breakpoint, a "wide" tile would swallow the whole row;
   keep it visually balanced but still wide. */
@media (max-width: 599px) {
  .gallery-item-wide { grid-column: span 2; }
  .gallery-item-tall { grid-row: span 2; }
}

/* Subtle inner ring for premium feel */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.6);
  pointer-events: none;
}

/* Focus state for keyboard users */
.gallery-item:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   Navbar phone CTA — tel: link styled as a chip
   ───────────────────────────────────────────── */
/* nav-cta layout is defined in the navbar section near line ~203 */

.nav-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--transition-base), background var(--transition-base);
  white-space: nowrap;
  line-height: 1;
}
.nav-phone svg {
  width: 14px;
  height: 14px;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.nav-phone:hover {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}
.nav-phone:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Hide phone CTA only on the smallest screens — mobile users get tel: from the mobile menu */
@media (max-width: 639px) {
  .nav-phone { display: none; }
}

/* Mobile menu phone link uses .btn .btn-outline (defined in button section) */
/* Trim the number font slightly at narrow desktop widths so it doesn't crowd nav-links */
@media (min-width: 640px) and (max-width: 899px) {
  .nav-phone { padding: 0.4rem 0.55rem; font-size: 0.8rem; gap: 0.35rem; }
  .nav-phone svg { width: 13px; height: 13px; }
}

/* ─────────────────────────────────────────────
   Hero — trust microcopy under CTAs
   Reduces friction at decision moment.
   ───────────────────────────────────────────── */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-trust svg {
  width: 16px;
  height: 16px;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.hero-trust .dot-sep {
  color: hsl(var(--border));
  font-weight: 700;
}
@media (max-width: 539px) {
  .hero-trust .dot-sep { display: none; }
  .hero-trust { flex-direction: column; align-items: flex-start; }
}

/* Above-the-fold mini stats — keeps key numbers on first viewport */
.hero-mini-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
}
.hero-mini-stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 9999px;
  background: hsl(var(--background) / 0.55);
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  line-height: 1.2;
}
.hero-mini-stats strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary));
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero-mini-stats .plus {
  font-size: 0.85em;
  margin-left: 0.04em;
}
.hero-mini-stats .ms-lbl {
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .hero-mini-stats { gap: 0.65rem 0.85rem; margin-top: 1.25rem; }
  .hero-mini-stats li { font-size: 0.85rem; padding: 0.45rem 0.85rem; }
  .hero-mini-stats strong { font-size: 1.15rem; }
}

/* ─────────────────────────────────────────────
   Sticky mobile call bar — only on mobile.
   The single highest-conversion add for a clinic site.
   ───────────────────────────────────────────── */
.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsl(var(--background) / 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid hsl(var(--border));
  box-shadow: 0 -10px 30px rgba(0,0,0,0.08);
}
.mobile-call-bar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.mobile-call-bar .call-cta {
  background: var(--gradient-accent);
  color: hsl(var(--accent-foreground));
  font-weight: 700;
  flex: 2;
  box-shadow: var(--shadow-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  position: relative;
}
.mobile-call-bar .call-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 hsl(var(--accent) / 0.55);
  animation: callPulse 2.6s var(--ease-smooth) infinite;
  pointer-events: none;
}
.mobile-call-bar .book-cta {
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border));
  font-weight: 500;
  flex: 1;
  font-size: 0.85rem;
}
.mobile-call-bar svg { width: 16px; height: 16px; }
@media (max-width: 639px) {
  .mobile-call-bar { display: flex; }
  body { padding-bottom: 76px; } /* prevent content under the bar */
}
@media (prefers-reduced-motion: reduce) {
  .mobile-call-bar .call-cta::before { animation: none; }
}

/* ─────────────────────────────────────────────
   Nav Call CTA — accent button with phone icon + number
   The primary nav action; matches accent button shape but with
   tabular numerals and a subtle phone icon for clarity.
   ───────────────────────────────────────────── */
.nav-call {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.nav-call svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nav-call span {
  display: inline;
}
@media (max-width: 899px) {
  .nav-call span { display: none; } /* icon-only on narrow desktop to save space */
  .nav-call { padding: 0.5rem 0.7rem; }
  .nav-call svg { width: 16px; height: 16px; }
}
@media (max-width: 639px) {
  /* On mobile, nav-cta hides entirely — sticky bottom bar takes over */
}

/* ─────────────────────────────────────────────
   CALL-FIRST HIERARCHY
   The Call CTA is the single primary action across the site.
   Book Appointment is intentionally demoted to a quiet text link
   so the eye lands on the phone number. Pair every Call button
   with a `.cta-secondary-link` instead of a competing button.
   ───────────────────────────────────────────── */
@keyframes callPulse {
  0%   { box-shadow: 0 0 0 0   hsl(var(--accent) / 0.55); }
  70%  { box-shadow: 0 0 0 14px hsl(var(--accent) / 0); }
  100% { box-shadow: 0 0 0 0   hsl(var(--accent) / 0); }
}

/* Stronger glow + gentle pulse on the canonical phone CTA */
.btn-accent[data-cta="phone-primary"] {
  position: relative;
  box-shadow: var(--shadow-accent), 0 14px 36px -14px hsl(16 85% 30% / 0.55);
}
.btn-accent[data-cta="phone-primary"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: callPulse 2.6s var(--ease-smooth) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-accent[data-cta="phone-primary"]::after { animation: none; }
}

/* Demoted Book Appointment — sits underneath / next to a Call button.
   Quiet text link with arrow, never competes for attention. */
.cta-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding: 0.25rem 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed hsl(var(--muted-foreground) / 0.45);
  transition: color var(--transition-base), border-color var(--transition-base);
}
.cta-secondary-link:hover {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary) / 0.6);
}
.cta-secondary-link.on-dark {
  color: hsl(var(--primary-foreground) / 0.78);
  border-bottom-color: hsl(var(--primary-foreground) / 0.35);
}
.cta-secondary-link.on-dark:hover {
  color: hsl(var(--primary-foreground));
  border-bottom-color: hsl(var(--primary-foreground) / 0.7);
}

/* When the row only contains the Call button + one demoted text link,
   stack them vertically and left-align so Call dominates the visual flow. */
.cta-row.cta-call-first {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Demoted Book link in the desktop nav — quieter than btn-outline */
.nav-book-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.65rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: color var(--transition-base), background var(--transition-base);
}
.nav-book-link:hover {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}
@media (max-width: 1023px) {
  .nav-book-link { display: none; }
}

/* Footer mini-map — small embedded Google Map in the brand column.
   Lazy-loaded so it doesn't impact initial paint. Mobile: full-width. */
.footer-mini-map {
  position: relative;
  margin-top: 0.75rem;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 8px 22px -14px hsl(var(--primary) / 0.35);
  background: hsl(var(--muted));
}
.footer-mini-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}
.footer-mini-map .map-overlay {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: hsl(var(--foreground));
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 4px 14px -6px hsl(var(--primary) / 0.3);
  transition: transform var(--transition-base);
}
.footer-mini-map .map-overlay:hover { transform: translateY(-1px); }
.footer-mini-map .map-overlay svg { width: 13px; height: 13px; flex-shrink: 0; }
@media (max-width: 640px) {
  .footer-mini-map iframe { height: 200px; }
}

/* Demoted Book link in the mobile menu — sits below the prominent Call btn */
.mobile-book-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed hsl(var(--muted-foreground) / 0.45);
  align-self: center;
}
.mobile-book-link:hover { color: hsl(var(--primary)); }

/* ─────────────────────────────────────────────
   QUICK CONTACT FORM
   Reusable mini-form used in blog post sidebars and as a section
   on home/about/service pages. Compact, mailto-based, mobile-first.
   ───────────────────────────────────────────── */
.quick-contact {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.1rem;
  padding: 1.5rem;
  box-shadow: 0 18px 38px -22px hsl(var(--primary) / 0.35);
}
.quick-contact .qc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  border-radius: 9999px;
}
.quick-contact .qc-eyebrow svg { width: 12px; height: 12px; }
.quick-contact h3 {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  color: hsl(var(--foreground));
}
.quick-contact .qc-lede {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.45;
}
.quick-contact form {
  display: grid;
  gap: 0.65rem;
}
.quick-contact label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}
.quick-contact input,
.quick-contact select,
.quick-contact textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.quick-contact textarea {
  min-height: 90px;
  resize: vertical;
}
.quick-contact input:focus,
.quick-contact select:focus,
.quick-contact textarea:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}
.quick-contact button[type="submit"] {
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: hsl(var(--accent-foreground));
  background: var(--gradient-accent);
  border: 0;
  border-radius: 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-accent);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.quick-contact button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent), 0 12px 26px -10px hsl(16 85% 30% / 0.45);
}
.quick-contact button[type="submit"] svg { width: 16px; height: 16px; }
.quick-contact .qc-fineprint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  line-height: 1.4;
}
.quick-contact .qc-fineprint a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Blog two-column layout — main article + sticky sidebar form on desktop,
   stacked single column on mobile. The sticky positioning works because the
   sidebar is a grid item with full column height — sticky tracks the parent. */
.blog-layout {
  display: block;
}
.blog-layout > .prose { min-width: 0; }
.blog-sidebar {
  margin-top: 1.5rem;
}
.blog-sidebar .quick-contact { position: static; }
@media (min-width: 960px) {
  .blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
  }
  .blog-sidebar {
    margin-top: 0;
    align-self: start;
    position: sticky;
    top: 96px;
  }
  .blog-sidebar .quick-contact {
    position: static;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* Author bio — bottom of every blog article */
.author-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 1.5rem;
  background: hsl(var(--muted) / 0.55);
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.author-card > picture {
  flex: 0 0 auto;
  width: 92px;
  height: 116px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
}
.author-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.author-meta { min-width: 0; }
@media (max-width: 480px) {
  .author-card > picture { width: 80px; height: 100px; }
}
.author-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--primary));
}
.author-name {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0.2rem 0 0.15rem;
  color: hsl(var(--foreground));
}
.author-cred {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.55rem;
}
.author-bio {
  font-size: 0.9rem;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.65rem;
}
.author-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
}
.author-link:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .author-card { flex-direction: column; }
}

/* Section variant — for home/about/service pages, before the main contact CTA */
.quick-contact-section {
  padding: 4rem 0;
}
.quick-contact-section .container {
  max-width: 640px;
}

/* Form + map side-by-side (home page) */
.quick-contact-section:has(.qc-layout) .container { max-width: 1040px; }
.qc-layout { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .qc-layout { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; gap: 2rem; }
}
.qc-map {
  display: flex;
  flex-direction: column;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 18px 38px -22px hsl(var(--primary) / 0.35);
}
.qc-map-frame { flex: 1 1 auto; min-height: 240px; }
.qc-map-frame iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }
.qc-map-info { padding: 1rem 1.15rem; }
.qc-map-addr {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.6rem;
  line-height: 1.45;
}
.qc-map-addr svg { width: 16px; height: 16px; color: hsl(var(--primary)); flex-shrink: 0; margin-top: 2px; }
.qc-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: hsl(var(--primary));
  text-decoration: none;
}
.qc-map-link svg { width: 16px; height: 16px; }
.qc-map-link:hover { text-decoration: underline; }
.quick-contact-section .quick-contact {
  padding: 2rem;
}
@media (min-width: 768px) {
  .quick-contact-section .quick-contact { padding: 2.5rem; }
  .quick-contact-section .quick-contact h3 { font-size: 1.7rem; }
  .quick-contact-section .qc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
}

/* ─────────────────────────────────────────────
   REVIEWS MARQUEE
   Auto-scrolling horizontal strip of review cards.
   Pauses on hover and respects prefers-reduced-motion.
   ───────────────────────────────────────────── */
.reviews--marquee {
  display: block !important;
  grid-template-columns: none !important;
  max-width: none !important;
  position: relative;
  overflow: hidden;
  padding: 1rem 0;
  /* Soft fade at the edges so cards don't feel cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* Ensure cards inside the marquee are always visible (they may sit
   outside the IntersectionObserver root, so the .reveal fade would never fire) */
.reviews--marquee .review.reveal,
.reviews--marquee .review {
  opacity: 1 !important;
  transform: none !important;
}
.reviews--marquee .marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: marqueeScroll 60s linear infinite;
}
.reviews--marquee:hover .marquee-track,
.reviews--marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
.reviews--marquee .review {
  flex: 0 0 360px;
  max-width: 360px;
  margin: 0;
}
@media (max-width: 640px) {
  .reviews--marquee .review { flex-basis: 300px; max-width: 300px; }
  .reviews--marquee .marquee-track { animation-duration: 50s; gap: 1rem; }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews--marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none; mask-image: none;
  }
  .reviews--marquee .marquee-track { animation: none; }
  .reviews--marquee .review { scroll-snap-align: start; }
}