/* ============================================
   Rasmussen Prosthodontics
   ============================================ */

:root {
  --blue: #48BAE8;
  --blue-dark: #2A7AB5;
  --blue-light: #7DD3F0;
  --dark: #2B2B2B;
  --dark-mid: #404040;
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --border: #D0D0D0;
  --text: #2B2B2B;
  --text-mid: #4A4A4A;
  --text-light: #6B6B6B;
  --gray: #999;
  --font-serif: 'Josefin Sans', sans-serif;
  --font-sans: 'Palanquin', sans-serif;
  --max-w: 1180px;
  --header-h: 76px;
  --ease: 0.25s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(72, 186, 232, 0.18);
}
/* Custom tooth cursor only for devices with a precise pointer (skip touch devices) */
@media (pointer: fine) {
  body { cursor: url('../images/tooth-cursor-32.png') 16 4, auto; }
}

img { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

a { color: var(--blue-dark); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--blue); }

@media (pointer: fine) {
  a, a:hover, button:hover, input[type="submit"]:hover, .btn:hover {
    cursor: url('../images/tooth-cursor-32.png') 16 4, pointer;
  }
  /* White tooth cursor on dark backgrounds for visibility */
  .site-footer, .site-footer *,
  .cta-banner, .cta-banner *,
  .call-bar, .call-bar *,
  .hero, .hero * {
    cursor: url('../images/tooth-cursor-32-white.png') 16 4, auto;
  }
  .site-footer a, .site-footer button,
  .cta-banner a, .cta-banner button,
  .call-bar a, .call-bar button,
  .hero a, .hero button {
    cursor: url('../images/tooth-cursor-32-white.png') 16 4, pointer;
  }
}

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--dark);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: 3rem; letter-spacing: -0.02em; }
h2 { font-size: 2.2rem; letter-spacing: -0.01em; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1rem; }

/* --- Skip Nav --- */
.skip-nav {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: var(--white); padding: 0.75rem 1.5rem;
  z-index: 10000; font-weight: 600; transition: top var(--ease);
}
.skip-nav:focus { top: 0; color: var(--white); }

/* --- Container --- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

/* ============================================
   Header & Navigation
   ============================================ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid #E5E5E5;
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
}

.site-logo img { height: 50px; width: auto; }

.main-nav { display: flex; align-items: center; }

.nav-list { display: flex; gap: 0; align-items: center; }

.nav-list > li { position: relative; }

.nav-list > li > a {
  display: block; padding: 0.5rem 0.9rem;
  color: var(--text-mid); font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.01em; transition: color var(--ease);
}
.nav-list > li > a:hover { color: var(--blue-dark); }
.nav-list > li > a[aria-current="page"] { color: var(--blue-dark); font-weight: 600; }

/* Dropdown */
.nav-dropdown { position: relative; }

.dropdown-toggle { cursor: pointer; }
.dropdown-toggle::after {
  content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}

.dropdown-menu {
  position: absolute; top: 100%; left: 0;
  background: var(--white); border: 1px solid #E5E5E5;
  min-width: 240px; padding: 0.5rem 0;
  opacity: 0; visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.dropdown-menu a {
  display: block; padding: 0.55rem 1.25rem;
  font-size: 0.88rem; color: var(--text-mid);
  border-bottom: 1px solid #F0F0F0;
  transition: background var(--ease), color var(--ease);
}
.dropdown-menu li:last-child a { border-bottom: none; }
.dropdown-menu a:hover { background: var(--off-white); color: var(--blue-dark); }

/* Mobile toggle */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 0.75rem; z-index: 1001;
  min-width: 44px; min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--dark);
  margin: 5px 0; transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative; min-height: 75vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: var(--dark);
}
.hero-bg {
  position: absolute; inset: -10%;
  background-size: cover; background-position: center;
  opacity: 0.45;
  animation: heroZoom 18s ease-out forwards;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(42,122,181,0.55) 0%, rgba(72,186,232,0.35) 50%, rgba(42,122,181,0.5) 100%);
  z-index: 1; pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2; color: var(--white);
  padding: 2rem; max-width: 760px;
  animation: heroFadeIn 1.2s ease-out both;
}
.hero-content h1 {
  color: var(--white); font-size: 3.4rem; margin-bottom: 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  letter-spacing: -0.01em;
}
.hero-content p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.92; }
.hero-content .btn { animation: heroFadeIn 1.2s ease-out 0.4s both; }

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.45rem 0.9rem;
  margin-bottom: 1rem;
}
.hero-rating {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  color: var(--white);
}
.hero-rating-stars {
  color: #FFC857;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-rating-text {
  font-size: 0.95rem; font-weight: 500;
  opacity: 0.95; white-space: nowrap;
}

/* Hero animations */
@keyframes heroZoom {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes heroFadeIn {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

.hero-small { min-height: 360px; }
.hero-small .hero-content h1 { font-size: 3.6rem; letter-spacing: -0.02em; }
.hero-small .hero-content p { font-size: 1.1rem; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-block; padding: 0.8rem 2rem;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform 0.2s ease, box-shadow 0.2s ease, letter-spacing 0.2s ease;
  text-align: center;
  letter-spacing: 0.01em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(42, 122, 181, 0.28);
    letter-spacing: 0.04em;
  }
}
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.btn:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }

.btn-primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }

.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--dark); }

.btn-outline-dark { background: transparent; color: var(--blue-dark); border-color: var(--blue-dark); }
.btn-outline-dark:hover { background: var(--blue-dark); color: var(--white); }

/* Button row utility - flexes on desktop, stacks on mobile */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.btn-row .btn { margin: 0; }

.btn-text {
  background: none; border: none; padding: 0;
  color: var(--blue-dark); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; font-family: var(--font-sans);
  touch-action: manipulation;
}
.btn-text:hover { color: var(--blue); }
.btn-text::after { content: ' \2192'; }

/* ============================================
   Sections
   ============================================ */
.section { padding: 5rem 0; }
.section-alt { background: var(--off-white); }
.section-dark { background: var(--dark); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }

.section-header { margin-bottom: 3rem; }
.section-header.centered { text-align: center; }
.section-header h2 { margin-bottom: 0.5rem; }
.section-header p { color: var(--text-light); font-size: 1.05rem; max-width: 560px; }
.section-header.centered p { margin: 0 auto; }

.section-rule {
  width: 48px; height: 2px; background: var(--blue);
  margin: 1rem 0 0; border: none;
}
.section-header.centered .section-rule { margin: 1rem auto 0; }

/* ============================================
   Service Links (grid on overview page)
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.service-link {
  display: block; position: relative; overflow: hidden;
  background: var(--dark); min-height: 280px;
  transition: opacity var(--ease);
}
.service-link img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; opacity: 0.55;
  transition: opacity var(--ease), transform 0.5s ease;
}
.service-link:hover img { opacity: 0.35; transform: scale(1.03); }

.service-link-text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: 280px; padding: 2rem;
  color: var(--white);
}
.service-link-text h3 { color: var(--white); margin-bottom: 0.3rem; font-size: 1.35rem; }
.service-link-text p { font-size: 0.9rem; opacity: 0.85; margin: 0; }

/* Service list (text-based, for sidebar or alt layout) */
.service-list { border-top: 1px solid var(--border); }
.service-list li { border-bottom: 1px solid var(--border); }
.service-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 0; color: var(--text); font-weight: 500;
  transition: color var(--ease), padding-left var(--ease);
}
.service-list a:hover { color: var(--blue-dark); padding-left: 0.5rem; }
.service-list a::after { content: '\2192'; color: var(--gray); transition: color var(--ease); }
.service-list a:hover::after { color: var(--blue-dark); }

/* ============================================
   Two-column content layouts
   ============================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-text h2 { margin-bottom: 1rem; }
.split-text p { color: var(--text-mid); }
.split-img img { width: 100%; height: 420px; object-fit: cover; }

.split-reverse .split-img { order: -1; }

/* ============================================
   Credentials / Check list
   ============================================ */
.check-list { margin-bottom: 1.5rem; }
.check-list li {
  padding: 0.4rem 0 0.4rem 1.5rem; position: relative; color: var(--text-mid);
}
.check-list li::before {
  content: "\2014"; position: absolute; left: 0;
  color: var(--blue); font-weight: 700;
}

/* ============================================
   Reviews Carousel
   ============================================ */
.reviews-carousel { position: relative; overflow: hidden; }

.reviews-track {
  display: flex; transition: transform 0.45s ease;
}

.review-card {
  flex: 0 0 calc(33.333% - 1.333rem);
  margin-right: 2rem;
  padding: 2.25rem; border: 1px solid var(--border); background: var(--white);
}
.review-card:last-child { margin-right: 0; }

.review-stars { color: #E8B923; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.75rem; }

.review-card blockquote {
  font-style: italic; color: var(--text-mid); font-size: 0.95rem;
  line-height: 1.7; margin-bottom: 1.25rem;
}

.review-author { font-weight: 600; font-size: 0.9rem; color: var(--dark); }
.review-source { font-size: 0.8rem; color: var(--gray); margin-top: 0.15rem; }

.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; margin-top: 2rem;
}

.carousel-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border); cursor: pointer;
  font-size: 1.2rem; color: var(--dark); transition: all var(--ease);
  font-family: var(--font-sans); line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.carousel-btn:hover { border-color: var(--blue); color: var(--blue); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.carousel-btn:disabled:hover { border-color: var(--border); color: var(--dark); }

.carousel-dots {
  display: flex; gap: 0.5rem; align-items: center;
}
.carousel-dot {
  width: 8px; height: 8px; background: var(--border);
  border: none; cursor: pointer; transition: background var(--ease);
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.carousel-dot.active { background: var(--blue); width: 24px; }

@media (max-width: 992px) {
  .review-card { flex: 0 0 calc(50% - 1rem); }
}
@media (max-width: 768px) {
  .review-card { flex: 0 0 100%; margin-right: 0; padding: 1.75rem 1.5rem; }
  .reviews-track { gap: 1rem; }
  .carousel-controls { gap: 0.75rem; margin-top: 1.5rem; }
}

/* ============================================
   Locations
   ============================================ */
.locations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.location-card { border: 1px solid var(--border); }
.location-card-map { height: 220px; background: #E5E5E5; }
.location-card-map iframe { width: 100%; height: 100%; border: 0; }
.location-card-info { padding: 2rem; }
.location-card-info h3 { margin-bottom: 0.75rem; color: var(--dark); }
.location-card-info p { font-size: 0.95rem; color: var(--text-mid); margin-bottom: 0.35rem; }
.location-card-info .phone-link {
  display: inline-block; font-weight: 600; color: var(--blue-dark);
  font-size: 1.05rem; margin-top: 0.75rem;
}
.location-card-info .phone-link:hover { color: var(--blue); }

/* Contact page split layout */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-split .section-header { text-align: left; }
.contact-split .section-header h2 { font-size: 1.75rem; }
.locations-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.locations-stack .location-card-map { height: 180px; }
.locations-stack .location-card-info { padding: 1.25rem 1.5rem; }
@media (max-width: 992px) {
  .contact-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================
   CTA Banner
   ============================================ */
.cta-banner {
  background: var(--blue); text-align: center;
  padding: 5rem 2rem; color: var(--white);
}
.cta-banner h2 { color: var(--white); margin-bottom: 0.75rem; }
.cta-banner p { font-size: 1.05rem; margin-bottom: 2rem; color: rgba(255,255,255,0.85); max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-primary {
  background: var(--white); color: var(--dark); border-color: var(--white);
}
.cta-banner .btn-primary:hover {
  background: var(--dark); border-color: var(--dark); color: var(--white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ============================================
   Contact Form
   ============================================ */
.contact-form { max-width: 640px; margin: 0 auto; }
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block; margin-bottom: 0.35rem;
  font-weight: 600; font-size: 0.9rem; color: var(--dark);
}
/* Required-field asterisk is rendered via CSS so it's NOT part of the
   label's DOM text. Netlify uses the label textContent as the field name
   in email notifications, and we don't want "*" ending up in the subject. */
.form-group label.req::after {
  content: ' *';
  color: #C0392B;
  font-weight: 600;
}
.form-group .optional { color: var(--text-light); font-weight: 400; font-size: 0.85rem; margin-left: 0.25rem; }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 0.75rem 0.85rem;
  border: 1px solid var(--border); font-family: var(--font-sans);
  /* 16px prevents iOS Safari from zooming in on focus */
  font-size: 1rem; color: var(--text); background: var(--white);
  transition: border-color var(--ease);
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form-group select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%232B2B2B' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--blue);
}
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: #C0392B; }
.form-group .error-message { color: #C0392B; font-size: 0.82rem; margin-top: 0.3rem; display: none; }
.form-group textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ============================================
   Bio / About
   ============================================ */
.bio-section { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
.bio-photo { overflow: hidden; }
.bio-photo img { width: 100%; height: auto; object-fit: cover; }
.bio-text h2 { margin-bottom: 0.4rem; }
.bio-text .subtitle { color: var(--blue-dark); font-size: 1rem; font-weight: 500; margin-bottom: 1.5rem; }
.bio-text p { color: var(--text-mid); }

/* About page bio heading - keep "Dr. Jonathan Rasmussen, DDS, MS" on a single line
   as long as possible; scale font down to fit, only wrap on very narrow viewports. */
#bio-heading {
  white-space: nowrap;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.4rem;
}
@media (max-width: 480px) {
  #bio-heading {
    white-space: normal;
    font-size: 1.7rem;
  }
}

/* About page bio: header spans full width on top. Below, body sits on the
   left with the CTA underneath it (below memberships); photo takes the wider
   right column. On mobile, everything stacks: header > photo > CTA > body. */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  grid-template-areas:
    "header header"
    "body   photo"
    "cta    photo";
  column-gap: 3rem;
  row-gap: 1.5rem;
  align-items: start;
}
.bio-grid-header { grid-area: header; margin-bottom: 0.5rem; }
.bio-grid-photo  { grid-area: photo; }
.bio-grid-cta    { grid-area: cta; text-align: left; }
.bio-grid-body   { grid-area: body; }
.bio-grid-photo img { width: 100%; height: auto; display: block; }
.bio-grid-body > p:first-child { margin-top: 0; }
.bio-grid-body p { color: var(--text-mid); }
.bio-grid-header .subtitle { color: var(--blue-dark); font-size: 1rem; font-weight: 500; margin-bottom: 0; }
.bio-grid-cta .btn { min-width: 240px; }

@media (max-width: 992px) {
  .bio-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "photo"
      "cta"
      "body";
    column-gap: 0;
    row-gap: 1.5rem;
  }
  .bio-grid-header { margin-bottom: 0; }
}

.memberships {
  margin-top: 2rem; padding: 1.5rem;
  background: var(--off-white); border-left: 3px solid var(--blue);
}
.memberships h3 { margin-bottom: 0.75rem; font-size: 1.1rem; }
.memberships ul li {
  padding: 0.25rem 0 0.25rem 1.25rem; position: relative;
  color: var(--text-mid); font-size: 0.93rem;
}
.memberships ul li::before {
  content: "\2022"; position: absolute; left: 0; color: var(--blue); font-weight: 700;
}

/* ============================================
   FAQ / Accordion
   ============================================ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-question {
  width: 100%; background: transparent; border: none; text-align: left;
  padding: 1.15rem 0; font-family: var(--font-sans); font-size: 1rem;
  font-weight: 600; color: var(--dark); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: color var(--ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.faq-question:hover { color: var(--blue-dark); }
.faq-question:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.faq-question::after {
  content: "+"; font-size: 1.3rem; font-weight: 300; color: var(--blue);
  flex-shrink: 0; margin-left: 1rem;
}
.faq-question[aria-expanded="true"]::after { content: "\2212"; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer-inner { padding: 0 0 1.25rem; color: var(--text-mid); line-height: 1.7; }

/* ============================================
   Info Cards (patient info)
   ============================================ */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.info-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
.info-card { padding: 2rem; border: 1px solid var(--border); border-top: 3px solid var(--blue); }
.info-card h3 { margin-bottom: 0.75rem; color: var(--dark); }
.info-card p { color: var(--text-mid); font-size: 0.95rem; }
.info-card ul { list-style: disc; padding-left: 1.25rem; }
.info-card ul li { color: var(--text-mid); font-size: 0.93rem; margin-bottom: 0.3rem; }

/* ============================================
   Service Detail Page
   ============================================ */
.service-detail { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; }
.service-sidebar { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }

.service-content h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.service-content h2:first-child { margin-top: 0; }
.service-content h3 {
  color: var(--blue-dark);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.service-content p { color: var(--text-mid); }

/* Spacing under an inline CTA button so following text isn't cramped */
.service-content div.mt-3:has(> .btn),
.section-header div.mt-3:has(> .btn),
.split-text div.mt-3:has(> .btn) {
  margin-bottom: 2.25rem;
}
.service-content ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.service-content ul li { color: var(--text-mid); margin-bottom: 0.35rem; }

.service-content .feature-img {
  width: 100%; height: 340px; object-fit: cover; margin: 2rem 0;
}

/* ============================================
   Footer
   ============================================ */
.site-footer { background: var(--dark); color: #AAA; padding: 4rem 0 0; }

.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid #444;
}
.footer-brand img { height: 45px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.88rem; color: #888; line-height: 1.6; }

.footer-col h4 {
  color: var(--white); font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
.footer-col ul li { margin-bottom: 0.4rem; }
.footer-col ul li a { color: #888; font-size: 0.88rem; }
.footer-col ul li a:hover { color: var(--blue-light); }

.footer-contact-item { margin-bottom: 0.5rem; font-size: 0.88rem; color: #888; }
.footer-contact-item a { color: #888; }
.footer-contact-item a:hover { color: var(--blue-light); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 0; font-size: 0.82rem; color: #777; flex-wrap: wrap; gap: 1rem;
}
.footer-legal a { color: #777; margin-left: 1.5rem; }
.footer-legal a:hover { color: var(--blue-light); }

/* ============================================
   Cookie Banner
   ============================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0;
  /* Sit above the persistent call-bar (~70px tall) plus any iOS home-indicator inset */
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  background: var(--dark); color: var(--white);
  padding: 1.1rem 1.5rem; z-index: 9999;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
  transform: translateY(calc(100% + 70px + env(safe-area-inset-bottom, 0px)));
  transition: transform 0.4s ease;
}
.cookie-banner.visible { transform: translateY(0); }

@media (max-width: 480px) {
  .cookie-banner { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
.cookie-banner-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cookie-banner p { margin: 0; font-size: 0.88rem; flex: 1; min-width: 250px; }
.cookie-banner a { color: var(--blue-light); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-btn {
  padding: 0.65rem 1.1rem; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--blue); font-family: var(--font-sans);
  min-height: 40px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cookie-btn-accept { background: var(--blue); color: var(--white); }
.cookie-btn-accept:hover { background: var(--blue-dark); }
.cookie-btn-decline { background: transparent; color: var(--blue-light); border-color: var(--blue-light); }
.cookie-btn-decline:hover { background: rgba(72,186,232,0.1); }

/* ============================================
   Legal Pages
   ============================================ */
.legal-content { max-width: 760px; margin: 0 auto; padding: 3rem 2rem; }
.legal-content h1 { margin-bottom: 0.5rem; }
.legal-content .last-updated { color: var(--text-light); font-size: 0.88rem; margin-bottom: 2rem; }
.legal-content h2 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 0.6rem; }
.legal-content h3 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.legal-content p, .legal-content li { color: var(--text-mid); font-size: 0.93rem; line-height: 1.8; }
.legal-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-content ul li { margin-bottom: 0.35rem; }

/* ============================================
   Editorial / supporting copy
   ============================================ */
.lead-note {
  font-size: 1.1rem; line-height: 1.65;
  color: var(--text-mid);
  font-style: italic;
  max-width: 680px;
  margin: 0.5rem auto 1.25rem;
}

/* Mission Statement callout */
.mission-statement {
  position: relative;
  margin: 1.5rem 0;
  padding: 2.5rem 3rem;
  background: var(--off-white);
  border-left: 4px solid var(--blue);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
}
.mission-statement p { margin: 0; }
@media (max-width: 768px) {
  .mission-statement {
    padding: 1.5rem 1.25rem;
    font-size: 1.05rem;
  }
}

/* Meet the Team - photo grid (3 columns on desktop) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  margin-top: 2rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team-card img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  background: var(--off-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.team-name {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark);
  line-height: 1.3;
}
.team-role {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-light);
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    max-width: 560px;
  }
  .team-card img { max-width: 180px; }
}
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  .team-card img { max-width: 140px; }
  .team-name { font-size: 1rem; }
  .team-role { font-size: 0.85rem; }
}

/* Callout below the team grid — pushed down and set apart with a rule + button */
.team-cta {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team-cta p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--dark);
  max-width: 640px;
  margin: 0 0 1.75rem;
}
/* Keep the button a natural size (don't let the mobile full-width btn rule
   stretch it and make it look off-center) */
.team-cta .btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 260px;
}
@media (max-width: 768px) {
  .team-cta { margin-top: 3rem; padding-top: 2rem; }
  .team-cta p { font-size: 1.1rem; margin-bottom: 1.5rem; }
}
.insurance-note {
  border-left: 3px solid var(--blue);
  background: var(--off-white);
  padding: 1.25rem 1.5rem;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.6;
}
.insurance-note p { margin: 0; }
.insurance-note strong { color: var(--dark); font-weight: 600; }

.service-image-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.75rem;
  margin: 2rem 0 2.5rem;
  align-items: start;
}
.service-image-link {
  display: block;
  overflow: hidden;
  background: var(--off-white);
  border-bottom: 3px solid var(--blue);
}
.service-image-link img {
  display: block; width: 100%; height: 200px;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.45s ease;
}
.service-image-link:hover img { transform: scale(1.04); filter: brightness(1.05); }
.service-image-body h3 { margin-top: 0; margin-bottom: 0.6rem; }
.service-image-body p { margin-bottom: 0; }
@media (max-width: 768px) {
  .service-image-card { grid-template-columns: 1fr; gap: 1rem; }
  .service-image-link img { height: 220px; }
}

.form-response-note {
  margin-top: 1.25rem;
  font-size: 0.92rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.55;
}

/* Netlify honeypot field - visually hidden but still in the DOM so bots see & fill it */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Inline form response message shown on success (or error) */
.form-status {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 600;
  text-align: center;
  border-left: 4px solid var(--blue);
  background: rgba(72, 186, 232, 0.08);
  color: var(--dark);
}
.form-status.form-status-error {
  border-left-color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  color: #7d2117;
}

/* ============================================
   Utility
   ============================================ */
.text-center { text-align: center; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.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;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ============================================
   Sticky Call Bar
   ============================================ */
.call-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  background: var(--dark);
  border-top: 2px solid var(--blue);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.call-bar-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  color: var(--white);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  border: none; background: transparent;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.call-bar-btn + .call-bar-btn {
  border-left: 1px solid rgba(255,255,255,0.15);
}
@media (hover: hover) {
  .call-bar-btn:hover {
    background: var(--blue);
    color: var(--white);
  }
}
.call-bar-btn:focus-visible {
  background: var(--blue);
  color: var(--white);
}
.call-bar-btn .call-bar-text {
  display: flex; flex-direction: column; line-height: 1.2;
}
.call-bar-btn .call-bar-label {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.8;
}
.call-bar-btn .call-bar-number {
  font-size: 1rem; font-weight: 600;
}
.call-bar-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 992px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.8rem; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split-reverse .split-img { order: 0; }
  .bio-section { grid-template-columns: 1fr; }
  .bio-photo { max-width: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 60vh; }
  .hero-content h1 { font-size: 2.5rem; }
  .hero-small .hero-content h1 { font-size: 2.9rem; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .info-grid, .info-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
}

@media (max-width: 768px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: block; }

  .main-nav {
    position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
    background: var(--white); box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    flex-direction: column; padding: 5rem 1.5rem 2rem;
    transition: right var(--ease); overflow-y: auto;
  }
  .main-nav.open { right: 0; }

  .nav-list { flex-direction: column; width: 100%; gap: 0; }
  .nav-list > li > a { padding: 0.8rem 0; font-size: 1rem; border-bottom: 1px solid #F0F0F0; }

  /* Mobile dropdown */
  .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 0 1rem;
    min-width: auto;
  }
  .dropdown-menu a { padding: 0.5rem 0; border-bottom: none; font-size: 0.9rem; }

  .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
  .nav-overlay.visible { display: block; }
  .main-nav { z-index: 1001; }

  /* Hide persistent fixed UI when the mobile nav is open */
  body.nav-open .call-bar,
  body.nav-open .cookie-banner { display: none; }

  /* Hero: taller and more breathing room on tablets/phones so the content
     (eyebrow + heading + rating + paragraph + buttons) isn't smashed. */
  .hero { min-height: 68vh; }
  .hero-content { padding: 2.5rem 1.5rem; max-width: 100%; }
  .hero-content h1 { font-size: 2.15rem; margin-bottom: 1.1rem; }
  .hero-content p { font-size: 1.05rem; margin-bottom: 1.75rem; line-height: 1.55; }
  .hero-eyebrow { font-size: 0.72rem; padding: 0.5rem 0.9rem; margin-bottom: 1.1rem; }
  .hero-rating { margin-bottom: 1.25rem; }
  .hero-rating-stars { font-size: 1.05rem; }
  .hero-rating-text { font-size: 0.9rem; }
  .hero-small { min-height: 340px; }
  .hero-small .hero-content { padding: 2rem 1.5rem; }
  .hero-small .hero-content h1 { font-size: 2.3rem; }
  .hero-content .btn {
    display: block; width: 100%;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .hero-content .btn + .btn { margin-top: 0.75rem; }
  .section { padding: 3.5rem 0; }

  /* Inline btn margins from older markup shouldn't push buttons off when stacked */
  .btn + .btn { margin-left: 0 !important; }

  /* Bigger tap targets in footer link lists */
  .footer-col ul li { margin-bottom: 0; }
  .footer-col ul li a { display: inline-block; padding: 0.5rem 0; font-size: 0.95rem; }
  .footer-contact-item { padding: 0.25rem 0; }
  .footer-contact-item a { display: inline-block; padding: 0.35rem 0; }
  .footer-legal a {
    display: inline-block;
    padding: 0.5rem 0.75rem 0.5rem 0;
    margin-right: 0.5rem; margin-left: 0;
  }

  .services-grid { grid-template-columns: 1fr; }
  .service-link-text { min-height: 200px; }
  .locations-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .info-grid, .info-grid.cols-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal a { margin-left: 0; margin-right: 1rem; }
  .cookie-banner-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.45rem; }
  .container { padding: 0 1.25rem; }
  .header-inner { padding: 0 1.25rem; }
  /* Hero: give it real vertical room on small phones so the multi-part
     content (eyebrow, heading, rating, paragraph, two buttons) breathes. */
  .hero { min-height: 78vh; }
  .hero-content { padding: 2.5rem 1.25rem; }
  .hero-content h1 { font-size: 1.9rem; margin-bottom: 1rem; }
  .hero-content p { font-size: 1rem; line-height: 1.55; margin-bottom: 1.75rem; }
  .hero-small { min-height: 320px; }
  .hero-small .hero-content { padding: 2rem 1.25rem; }
  .hero-small .hero-content h1 { font-size: 2rem; }
  .hero-small .hero-content p { font-size: 1rem; }
  .btn {
    display: block; width: 100%;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .btn + .btn { margin-top: 0.75rem; }
  .hero-content .btn { width: 100%; }
  .section { padding: 3rem 0; }
  .cta-banner { padding: 3.5rem 1.25rem; }
  .legal-content { padding: 2rem 1.25rem; }
  .call-bar-btn { padding: 0.7rem 0.5rem; gap: 0.4rem; }
  .call-bar-btn .call-bar-label { font-size: 0.6rem; letter-spacing: 0.08em; }
  .call-bar-btn .call-bar-number { font-size: 0.88rem; }
  .call-bar-icon { width: 16px; height: 16px; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner { padding: 0.9rem 1.1rem; }
  .cookie-banner-actions { width: 100%; justify-content: stretch; }
  .cookie-banner-actions .cookie-btn { flex: 1; }
  /* Service card text fits comfortably on narrow phones */
  .service-link-text { padding: 1.5rem 1.25rem; }
}