/* ==========================================================================
   Halo Dental Clinic - Divi 5 Integration Styles
   Warm Alabaster / Champagne Luxury Medical Aesthetic
   ========================================================================== */

/* Divi Parent Framework Resets for Halo Dental Components */
body.halodental-custom-page #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hide Divi parent header completely on custom Halo Dental pages (both frontend and builder) */
body.halodental-standalone-page #main-header,
body.halodental-standalone-page #top-header,
body.halodental-custom-page #main-header,
body.halodental-custom-page #top-header,
body:has(.halodental-page-wrap) #main-header,
body:has(.halodental-page-wrap) #top-header,
body.halodental-standalone-page #main-footer,
body.halodental-custom-page #main-footer,
body:has(.halodental-page-wrap) #main-footer {
  display: none !important;
}

/* Divi Builder Canvas Adjustments */
body.et-fb .site-header {
  position: relative !important;
}

#main-content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Global Layout Container Resets for Divi & Halo Dental */
.halodental-page-wrap {
  width: 100% !important;
  position: relative;
  background: var(--color-bg);
  color: var(--color-ink-light);
  overflow-x: clip; /* clip (not hidden): keeps position:sticky working */
}

/* Outer section wrappers span 100% full viewport width with seamless edge-to-edge background colors */
.et_pb_section,
.et_section_regular,
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.cta-banner-section,
.cta-banner,
.contact-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}


/**
 * Halo Dental Clinic - Main Stylesheet
 * Brand: Crisp modern clinical with luxury gold accents & champagne ivory menu
 */

:root {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Refined Brand Color Palette derived from Halo Logo */
  --color-menu-bg: #F6EBDE;        /* Exact champagne ivory tone from logo */
  --color-menu-bg-alpha: rgba(246, 235, 222, 0.96);
  --color-bg: #FCFAF7;             /* Soft alabaster base */
  --color-surface: #FFFFFF;
  --color-surface-warm: #FAF5ED;
  --color-card: #FFFFFF;
  --color-border: #E8DEC8;
  --color-border-subtle: #F0E8D8;
  
  --color-ink: #1C1917;            /* Deep warm espresso slate ink */
  --color-ink-light: #44403C;      /* Readable warm body ink */
  --color-ink-muted: #78716C;      /* Muted secondary tone */
  
  --color-gold: #B38719;           /* Rich halo gold */
  --color-gold-light: #C59B27;     /* Bright gold */
  --color-gold-glint: #F5E6A8;     /* Luminous glint */
  --color-gold-soft: #FBF4E2;      /* Gentle gold wash */
  
  --color-primary: #0284C7;        /* High-trust medical sky blue */
  --color-primary-hover: #0369A1;
  --color-primary-soft: #E0F2FE;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 2px 6px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 10px 25px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 20px 40px rgba(28, 25, 23, 0.12);
  --shadow-halo: 0 8px 30px rgba(197, 155, 39, 0.25);
  
  --container-max: 1240px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink-light);
  background-color: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* NOTE: no overflow-x here — body overflow propagates to the viewport and
     clip/hidden on the viewport disables window scrolling and breaks sticky. */
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Big Tilted Semi-Transparent Halo Rings Background Elements */
.bg-halo-ring {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.52;
  transition: transform 0.6s ease;
  filter: drop-shadow(0 0 14px rgba(197, 155, 39, 0.35));
}
.bg-halo-ring-hero {
  width: 620px;
  height: 260px;
  top: 30px;
  right: -70px;
  transform: rotate(-24deg);
  opacity: 0.58;
}
.bg-halo-ring-services {
  width: 680px;
  height: 280px;
  bottom: -60px;
  left: -120px;
  transform: rotate(20deg);
  opacity: 0.50;
}
.bg-halo-ring-doctor {
  width: 580px;
  height: 250px;
  top: 40px;
  left: -80px;
  transform: rotate(-18deg);
  opacity: 0.54;
}
.bg-halo-ring-cta {
  width: 520px;
  height: 220px;
  top: -30px;
  right: -40px;
  transform: rotate(-15deg);
  opacity: 0.55;
}



/* Golden Halo Divider Component */
.halo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 28px auto;
  max-width: 420px;
  position: relative;
  z-index: 2;
}
.halo-divider-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
  opacity: 0.5;
}
.halo-divider-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: ringGlow 4s ease-in-out infinite alternate;
}
@keyframes ringGlow {
  0% { filter: drop-shadow(0 0 2px rgba(197, 155, 39, 0.3)); }
  100% { filter: drop-shadow(0 0 8px rgba(197, 155, 39, 0.7)); }
}

/* Top Utility Bar */
.top-bar {
  background: #F1E2D0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  padding: 8px 0;
  color: var(--color-ink-light);
}
.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.top-bar-item a:hover {
  color: var(--color-gold);
}
.lang-switcher {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(232, 222, 200, 0.85);
      border-radius: 9999px;
      padding: 3px;
      gap: 2px;
      box-shadow: 0 1px 4px rgba(28, 25, 23, 0.04);
    }
    .lang-btn {
      background: transparent;
      border: none;
      padding: 4px 10px;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      border-radius: 9999px;
      cursor: pointer;
      color: var(--color-ink-muted);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      text-decoration: none;
      line-height: 1;
    }
    .lang-flag {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    .lang-btn:hover:not(.active):not(.current-lang) {
      color: var(--color-ink);
      background: rgba(255, 255, 255, 0.6);
    }
    .lang-btn.active, .lang-btn.current-lang {
      background: #FFFFFF;
      color: var(--color-ink);
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(28, 25, 23, 0.08), 0 0 0 1px rgba(232, 222, 200, 0.5);
    }

/* Centered Navigation Cluster — pale cream #F9F4EC (matches navbar reference;
   NOT white — must match the seamless hero/page tone in ALL states) */
.site-header {
  background: #F9F4EC !important;
  background-color: #F9F4EC !important;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.scrolled {
  box-shadow: var(--shadow-md);
  background: #F9F4EC !important;
  background-color: #F9F4EC !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.header-centered-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  min-height: 76px;
  position: relative;
  transition: min-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), gap 0.35s ease;
}
.site-header.scrolled .header-centered-wrap {
  min-height: 62px;
  gap: 26px;
}

.header-nav-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link, .header-nav-group a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-link:hover, .header-nav-group a:hover {
  color: var(--color-gold);
}
.nav-link::after, .header-nav-group a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width 0.25s ease;
}
.nav-link:hover::after, .header-nav-group a:hover::after {
  width: 100%;
}

/* Center Square Badge */
.header-center-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 114px;
  height: 114px;
  background: var(--color-menu-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12), 0 0 0 1px rgba(197, 155, 39, 0.25);
  margin-top: -19px;
  margin-bottom: -19px;
  position: relative;
  z-index: 20;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.site-header.scrolled .header-center-badge {
  width: 68px;
  height: 68px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.10);
}
.header-center-badge:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(179, 135, 25, 0.3);
}
.header-center-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.site-header.scrolled .header-center-badge img {
  padding: 2px;
}

.header-action-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 8px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
  text-align: center;
  font-family: inherit;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, #C59B27 0%, #B38719 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(179, 135, 25, 0.35);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #C59B27 100%);
  box-shadow: 0 6px 20px rgba(179, 135, 25, 0.45);
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--color-primary);
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.38);
  transform: translateY(-2px);
}
.btn-secondary {
  background: #FFFFFF;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.05);
}
.btn-secondary:hover {
  border-color: var(--color-gold);
  color: var(--color-gold) !important;
  background: var(--color-surface-warm);
  transform: translateY(-2px);
}
.btn-outline-white {
  background: #FFFFFF !important;
  color: var(--color-ink) !important;
  border: 1.5px solid var(--color-border) !important;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.06);
}
.btn-outline-white:hover {
  background: var(--color-surface-warm) !important;
  border-color: var(--color-gold) !important;
  color: #7D590B !important;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--color-ink);
  position: absolute;
  right: 20px;
}

/* Hero Section */
.hero-section {
  position: relative;
  padding: 70px 0 90px;
  background: linear-gradient(180deg, var(--color-menu-bg) 0%, #FFFFFF 65%, var(--color-bg) 100%);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 58px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}
.hero-title span.accent-gold {
  color: var(--color-gold);
  font-style: italic;
}
.hero-subtitle {
  font-size: 17.5px;
  color: var(--color-ink-light);
  margin-bottom: 34px;
  max-width: 550px;
  line-height: 1.7;
}
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.trust-stat-item {
  display: flex;
  flex-direction: column;
}
.trust-stat-num {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}
.trust-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-visual-wrap {
  position: relative;
}
.hero-visual-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
}
.hero-visual-card img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}
.hero-floating-badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 290px;
}
.halo-mini-icon {
  width: 46px;
  height: 46px;
  background: var(--color-gold-soft);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  flex-shrink: 0;
  animation: pulseGlint 3s infinite ease-in-out;
}
@keyframes pulseGlint {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); box-shadow: 0 0 14px rgba(197, 155, 39, 0.4); }
}
.floating-text-bold {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
}
.floating-text-sub {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

/* Section Headers */
.section-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 52px;
  position: relative;
  z-index: 2;
}
.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: 14px;
}
.section-desc {
  font-size: 16.5px;
  color: var(--color-ink-muted);
  line-height: 1.7;
}

/* Unified Animated Icon Box */
.icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(28, 25, 23, 0.10);
  flex-shrink: 0;
}
.icon-box svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.35s ease;
  stroke-width: 1.8;
}

/* Services Section */
.services-section {
  padding: 96px 0;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 2;
}
.service-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold);
}
.service-card:hover .icon-box {
  background: var(--color-gold);
  color: #FFFFFF;
  border-color: var(--color-gold);
  box-shadow: 0 6px 18px rgba(179, 135, 25, 0.4);
}
.service-card:hover .icon-box svg {
  transform: scale(1.12) rotate(4deg);
}
.service-card-image-wrap {
  height: 190px;
  position: relative;
  overflow: hidden;
  background: #FAF5ED;
}
.service-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-card-image-wrap img {
  transform: scale(1.08);
}
.service-card-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(28, 25, 23, 0.15) 0%, rgba(28, 25, 23, 0.02) 40%, rgba(255, 255, 255, 0.35) 80%, #FFFFFF 100%);
}
/* Smooth feathered transition between card image and text body (no sharp edge) */
.service-card-image-wrap::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 58px;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.20) 25%, 
    rgba(255, 255, 255, 0.65) 60%, 
    rgba(255, 255, 255, 0.94) 85%, 
    #FFFFFF 100%);
  pointer-events: none;
  z-index: 3;
}
.service-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  letter-spacing: 0.06em;
  border: 1px solid rgba(232, 222, 200, 0.75);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.service-card-icon-top {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
}
.service-card-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #FFFFFF;
}
.service-card-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
  line-height: 1.25;
}
.service-card-desc {
  font-size: 14.5px;
  color: var(--color-ink-light);
  margin-bottom: 20px;
  line-height: 1.65;
  flex-grow: 1;
}
.service-card-features {
  list-style: none;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}
.service-card-features li {
  font-size: 13.5px;
  color: var(--color-ink-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-card-features li svg {
  color: var(--color-gold);
  flex-shrink: 0;
}
.service-card-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.service-card-link:hover {
  color: var(--color-ink);
  gap: 10px;
}

/* Doctor Section */
.doctor-section {
  padding: 96px 0;
  background: var(--color-surface-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.doctor-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.doctor-image-wrap {
  position: relative;
  display: block;
}
.doctor-portrait-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
}
.doctor-portrait-card img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.doctor-experience-badge {
  position: absolute;
  bottom: 28px;
  right: 28px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.16), 0 2px 6px rgba(179, 135, 25, 0.2);
  border: 1.5px solid var(--color-border);
  text-align: center;
  z-index: 5;
  animation: badgePop 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes badgePop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.85);
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.exp-years {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}
.exp-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  margin-top: 4px;
}

.doctor-name {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.15;
}
.doctor-creds {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gold);
  margin-top: 6px;
  margin-bottom: 20px;
}
.doctor-bio-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-ink-light);
  margin-bottom: 20px;
}
.doctor-quote-box {
  background: #FFFFFF;
  border-left: 4px solid var(--color-gold);
  padding: 18px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 26px;
  box-shadow: var(--shadow-sm);
}
.doctor-quote-text {
  font-style: italic;
  font-size: 15px;
  color: var(--color-ink);
  line-height: 1.6;
}
.doctor-highlights-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.doc-highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}
.doc-highlight-item svg {
  color: var(--color-gold);
  flex-shrink: 0;
}

/* Staff Section */
.staff-section {
  padding: 96px 0;
  background: #FFFFFF;
  position: relative;
}
.staff-grid,
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 22px !important;
  position: relative;
  z-index: 2;
}
/* Staff Cards & Scroll Reveal Animation */
.staff-card {
  background: var(--color-surface-warm);
  border: 1px solid rgba(232, 222, 200, 0.75);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  will-change: opacity, transform;
}
.staff-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}
.staff-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08);
  border-color: rgba(197, 155, 39, 0.6);
}
.staff-img-wrap {
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: #FAF5ED;
  position: relative;
}
.staff-img-wrap::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(180deg, 
    rgba(250, 245, 237, 0) 0%, 
    rgba(250, 245, 237, 0.25) 30%, 
    rgba(250, 245, 237, 0.70) 70%, 
    #FAF5ED 100%);
  pointer-events: none;
  z-index: 3;
}
.staff-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.staff-card.animate-in .staff-img-wrap img {
  opacity: 1;
  transform: scale(1);
}
.staff-card:hover .staff-img-wrap img {
  transform: scale(1.06);
}
/* Staggered entrance timing */
.staff-card:nth-child(1) { transition-delay: 0.05s; }
.staff-card:nth-child(1) .staff-img-wrap img { transition-delay: 0.10s; }

.staff-card:nth-child(2) { transition-delay: 0.16s; }
.staff-card:nth-child(2) .staff-img-wrap img { transition-delay: 0.22s; }

.staff-card:nth-child(3) { transition-delay: 0.27s; }
.staff-card:nth-child(3) .staff-img-wrap img { transition-delay: 0.34s; }

.staff-card:nth-child(4) { transition-delay: 0.38s; }
.staff-card:nth-child(4) .staff-img-wrap img { transition-delay: 0.46s; }

.staff-card:nth-child(5) { transition-delay: 0.49s; }
.staff-card:nth-child(5) .staff-img-wrap img { transition-delay: 0.58s; }
.staff-info {
  padding: 16px 12px;
}
.staff-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.staff-role {
  font-size: 12px;
  color: var(--color-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Technology Section */
.tech-section {
  padding: 96px 0;
  background: var(--color-bg);
  position: relative;
}
/* Tech Grid & 3D Rotating Cards */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  perspective: 1200px;
}
.tech-card {
  background: #FFFFFF;
  border: 1px solid rgba(232, 222, 200, 0.85);
  border-radius: var(--radius-md);
  padding: 34px 24px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.04);
  transform-style: preserve-3d;
  opacity: 0;
  transform: perspective(1200px) rotateY(-55deg) rotateX(12deg) translateY(45px) scale(0.9);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  will-change: transform, opacity;
}
.tech-card.animate-in {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(0) scale(1);
}
.tech-card:nth-child(1) { transition-delay: 0.08s; }
.tech-card:nth-child(2) { transition-delay: 0.22s; }
.tech-card:nth-child(3) { transition-delay: 0.36s; }
.tech-card:nth-child(4) { transition-delay: 0.50s; }

.tech-card:hover {
  transform: perspective(1200px) translateY(-10px) rotateY(8deg) rotateX(-2deg) scale(1.03);
  box-shadow: 0 20px 42px rgba(28, 25, 23, 0.10), 0 0 24px rgba(197, 155, 39, 0.22);
  border-color: rgba(197, 155, 39, 0.75);
}
.tech-card .icon-box {
  margin: 0 auto 20px;
  transition: transform 0.5s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.tech-card:hover .icon-box {
  background: var(--color-gold);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(197, 155, 39, 0.45);
  transform: rotate(360deg) scale(1.15);
}
.tech-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.tech-desc {
  font-size: 13.5px;
  color: var(--color-ink-muted);
  line-height: 1.55;
}

/* Clinic Tour */
.tour-section {
  padding: 20px 0 96px;
  background: var(--color-bg);
  position: relative;
}
.tour-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.tour-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.tour-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tour-card:hover img {
  transform: scale(1.03);
}
.tour-overlay-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(28, 25, 23, 0.85);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* Reviews Section */
.reviews-section {
  padding: 96px 0;
  background: var(--color-surface-warm);
  border-top: 1px solid var(--color-border);
  position: relative;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}
.review-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stars-row {
  display: flex;
  gap: 4px;
  color: var(--color-gold);
  margin-bottom: 16px;
  font-size: 18px;
}
.review-quote {
  font-size: 15px;
  color: var(--color-ink-light);
  line-height: 1.7;
  margin-bottom: 24px;
}
.review-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 16px;
}
.author-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}
.author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}
.author-location {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* CTA Banner - Warm Luxury Pearl/Champagne Palette */
.cta-banner {
  background: linear-gradient(135deg, #FAF4E8 0%, #F5ECDB 50%, #ECE0C8 100%);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: 60px 48px;
  margin: 40px auto 96px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(179, 135, 25, 0.14), 0 2px 8px rgba(28, 25, 23, 0.04);
  border: 2px solid var(--color-border);
}
.cta-banner-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--color-ink);
}
.cta-banner-sub {
  font-size: 16px;
  color: var(--color-ink-light);
  max-width: 580px;
  line-height: 1.6;
}
.cta-banner .btn-gold {
  background: var(--color-gold);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(179, 135, 25, 0.35);
}
.cta-banner .btn-gold:hover {
  background: #967012;
  transform: translateY(-2px);
}
.cta-banner .btn-outline-white,
.cta-banner .btn-phone {
  background: #FFFFFF !important;
  color: var(--color-ink) !important;
  border: 1.5px solid var(--color-border) !important;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
}
.cta-banner .btn-outline-white svg,
.cta-banner .btn-phone svg {
  color: var(--color-gold);
  transition: transform 0.25s ease, color 0.25s ease;
}
.cta-banner .btn-outline-white:hover,
.cta-banner .btn-phone:hover {
  background: var(--color-surface-warm) !important;
  border-color: var(--color-gold) !important;
  color: #967012 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(179, 135, 25, 0.16);
}
.cta-banner .btn-outline-white:hover svg,
.cta-banner .btn-phone:hover svg {
  color: #967012;
  transform: scale(1.1);
}
.cta-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}
.cta-banner-btns {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

/* Contact Section */
.contact-section {
  padding: 0 0 96px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.contact-info-card {
  background: var(--color-menu-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-item-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
.contact-item {
  display: flex;
  gap: 16px;
}
.contact-item .icon-box {
  background: #FFFFFF;
}
.contact-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  margin-bottom: 4px;
}
.contact-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.4;
}
.contact-hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.contact-hours-table td {
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--color-border);
}
.contact-hours-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--color-ink);
}

.map-frame-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  min-height: 380px;
}
.map-frame-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}

/* Footer - Warm Alabaster / Champagne Surface (Matching Screenshot 2) */
.site-footer {
  background: #F6EBDE !important;
  color: var(--color-ink-light);
  padding: 64px 0 32px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  position: relative;
}
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  margin-bottom: 40px !important;
}
.footer-brand-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.footer-brand-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-light);
  max-width: 320px;
  margin-bottom: 20px;
}
.footer-col-title {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer-links li {
  font-size: 14px;
  line-height: 1.5;
}
.footer-links a {
  color: var(--color-ink-light);
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-links a:hover {
  color: var(--color-gold);
  padding-left: 4px;
}
.footer-links a:hover {
  color: var(--color-gold);
  padding-left: 4px;
}
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--color-ink-muted);
}
.footer-bottom a {
  color: var(--color-ink-muted);
  text-decoration: none;
}
.footer-bottom a:hover {
  color: var(--color-gold);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(28, 25, 23, 0.7);
  backdrop-filter: blur(6px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.active {
  display: flex;
}
.booking-modal {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  max-width: 620px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.modal-header {
  padding: 24px 32px;
  background: var(--color-menu-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-ink-muted);
  line-height: 1;
}
.modal-body {
  padding: 32px;
  max-height: 80vh;
  overflow-y: auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
.form-group.full-width {
  grid-column: span 2;
}
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-ink);
  outline: none;
  transition: border-color 0.2s ease;
  background: #FFFFFF;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-soft);
}
.form-textarea {
  resize: vertical;
  min-height: 80px;
}
.booking-success-message {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.booking-success-message.active {
  display: block;
}
.success-check-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* Responsive */
@media (max-width: 1080px) {
  .header-centered-wrap {
    gap: 16px;
  }
  .header-nav-group {
    gap: 16px;
  }
  .nav-link {
    font-size: 13.5px;
  }
  .header-center-badge {
    width: 96px;
    height: 96px;
    margin-top: -12px;
    margin-bottom: -12px;
  }
}
@media (max-width: 900px) {
  .header-nav-group, .header-action-group {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
    margin-left: auto;
  }
  .header-centered-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
  }
  .header-center-badge {
    width: 78px;
    height: 78px;
    margin-top: -4px;
    margin-bottom: -4px;
  }
  /* Mobile Navigation Slide-Down Drawer */
  .site-header.mobile-open .header-nav-group {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 16px 36px rgba(28, 25, 23, 0.12);
    padding: 24px 20px;
    gap: 16px;
    z-index: 999;
  }
  .site-header.mobile-open .header-nav-group .nav-link {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
    border-bottom: 1px solid rgba(232, 222, 200, 0.4);
    color: var(--color-ink);
  }
  .site-header.mobile-open .header-action-group {
    display: block !important;
    position: absolute;
    top: calc(100% + 280px);
    left: 20px;
    right: 20px;
    z-index: 1000;
  }
  .site-header.mobile-open .header-action-group .btn {
    width: 100%;
    text-align: center;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .staff-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .doctor-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px !important;
  }

  /* Clean, centered mobile utility top bar (no overflow or right-clipping) */
  .top-bar {
    padding: 8px 0;
  }
  .top-bar-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .top-bar-left {
    display: none; /* Secondary address hidden from top bar on mobile to avoid clutter */
  }
  .top-bar-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
  }
  .top-bar-item {
    font-size: 12px;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
  .lang-switcher {
    margin: 0 auto;
  }

  /* Hero Section Mobile Optimization */
  .hero-section {
    padding: 36px 0 48px;
    overflow: hidden;
  }
  .hero-badge {
    font-size: 11.5px;
    padding: 6px 14px;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    margin-bottom: 16px;
    line-height: 1.4;
  }
  .hero-title {
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 16px;
    word-break: break-word;
  }
  .hero-subtitle {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-bottom: 28px;
  }
  .hero-cta-group .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* 3-column balanced trust row: never overflows horizontally */
  .hero-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 18px;
    text-align: center;
  }
  .trust-stat-item {
    align-items: center;
  }
  .trust-stat-num {
    font-size: 22px;
  }
  .trust-stat-label {
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.25;
  }

  /* Hero visual & floating badge */
  .hero-floating-badge {
    position: relative;
    bottom: auto;
    left: auto;
    margin: -24px auto 0;
    max-width: 270px;
    padding: 14px 18px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .tech-grid {
    grid-template-columns: 1fr;
  }
  .tour-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-info-card {
    padding: 24px 18px;
  }
  .contact-hours-table td {
    font-size: 13px;
    padding: 6px 0;
  }
  .contact-hours-table td:last-child {
    white-space: nowrap;
  }
  .map-frame-wrap {
    min-height: 300px;
  }
  .map-frame-wrap iframe {
    min-height: 300px;
  }

  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .cta-banner-title {
    font-size: 28px;
  }
  .cta-banner-btns {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .cta-banner-btns .btn {
    width: 100%;
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  .footer-bottom div {
    text-align: center;
    justify-content: center;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group.full-width {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px !important;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-trust-row {
    gap: 6px;
  }
  .trust-stat-num {
    font-size: 19px;
  }
  .trust-stat-label {
    font-size: 9px;
  }
  .staff-grid {
    grid-template-columns: 1fr;
  }
  .section-title {
    font-size: 28px;
  }
  .doctor-name {
    font-size: 26px;
  }
}


/* ==========================================================================
   halo Dental Clinic - Universal Button & Section Margin System
   ========================================================================== */

/* Universal Pill-Shape Rounded Corners for ALL Buttons */
.btn,
a.btn,
button.btn,
input.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.et_pb_button,
body #page-container .et_pb_button,
.et_pb_more_button,
.et_pb_promo_button,
.et_pb_newsletter_button,
.wp-block-button__link,
.cta-banner .btn,
.hero-cta-group .btn,
.header-action-group .btn,
.contact-form button,
.contact-form input[type="submit"],
.modal-content button,
.modal-content input[type="submit"] {
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
}

/* Explicit Vertical Section Margins & Spacing Hierarchy */
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.cta-banner-section,
.cta-banner,
.contact-section {
  margin-top: 0 !important;
  margin-bottom: 56px !important;
}

.hero-section {
  padding: 80px 0 100px !important;
  margin-bottom: 48px !important;
}

.services-section {
  padding: 100px 0 !important;
  margin-bottom: 48px !important;
}

.doctor-section {
  padding: 100px 0 !important;
  margin-bottom: 48px !important;
}

.staff-section,
.team-section {
  padding: 100px 0 !important;
  margin-bottom: 48px !important;
}

.tech-section,
.technology-section {
  padding: 100px 0 !important;
  margin-bottom: 48px !important;
}

.reviews-section {
  padding: 100px 0 !important;
  margin-bottom: 48px !important;
}

.cta-banner {
  margin: 64px auto !important;
  padding: 64px 48px !important;
  border-radius: 24px !important;
}

.contact-section {
  padding: 100px 0 !important;
  margin-bottom: 64px !important;
}

.container {
  max-width: var(--container-max, 1240px);
  margin: 0 auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  position: relative;
}

.section-header {
  margin-top: 0 !important;
  margin-bottom: 56px !important;
  padding: 0 16px !important;
}

.services-grid,
.doctor-grid,
.staff-grid,
.team-grid,
.tech-grid,
.reviews-grid,
.contact-grid {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  gap: 32px !important;
}

@media (max-width: 768px) {
  .hero-section,
  .services-section,
  .doctor-section,
  .team-section,
  .staff-section,
  .technology-section,
  .tech-section,
  .reviews-section,
  .contact-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    margin-bottom: 36px !important;
  }
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .section-header {
    margin-bottom: 36px !important;
  }
}


/* ==========================================================================
   Halo Dental Clinic - Layout Enhancements (v2.0.0)
   - Max-Width Limit: 1280px Centered Container
   - Team Cards: 5 in 1 Row Desktop, 2 per Row Mobile
   - Location Section: Generous 50/50 Grid Modules with Min-Height 520px
   ========================================================================== */

:root {
  --container-max: 1280px !important;
}

/* Enforce 1280px Max-Width Limitation across all containers */
.container,
.site-header .container,
.site-footer .container,
.hero-section .container,
.services-section .container,
.doctor-section .container,
.team-section .container,
.staff-section .container,
.technology-section .container,
.tech-section .container,
.reviews-section .container,
.contact-section .container,
.halodental-page-wrap .container {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  position: relative;
  box-sizing: border-box;
}

/* Issue 2: Team Members Cards Grid (Desktop: 5 in 1 row, Mobile: 2 per row) */
.staff-grid,
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  position: relative;
  z-index: 2;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.team-section .et_pb_row,
.staff-section .et_pb_row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.team-section .et_pb_column.et_pb_column_1_3,
.staff-section .et_pb_column.et_pb_column_1_3 {
  width: calc(20% - 16px) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .staff-grid,
  .team-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .team-section .et_pb_column.et_pb_column_1_3,
  .staff-section .et_pb_column.et_pb_column_1_3 {
    width: calc(33.333% - 14px) !important;
  }
}

@media (max-width: 768px) {
  .staff-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .team-section .et_pb_column.et_pb_column_1_3,
  .staff-section .et_pb_column.et_pb_column_1_3 {
    width: calc(50% - 10px) !important;
  }
}

@media (max-width: 480px) {
  .staff-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .team-section .et_pb_column.et_pb_column_1_3,
  .staff-section .et_pb_column.et_pb_column_1_3 {
    width: calc(50% - 8px) !important;
  }
  .staff-card {
    padding: 12px 8px !important;
  }
  .staff-info {
    padding: 12px 8px !important;
  }
  .staff-name {
    font-size: 17px !important;
  }
  .staff-role {
    font-size: 11px !important;
  }
}

/* Issue 1: Location & Contact Section Expansion (No more thin modules) */
.contact-section {
  padding: 96px 0 !important;
  margin-bottom: 64px !important;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.08fr !important;
  gap: 40px !important;
  align-items: stretch !important;
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 1280px !important;
  margin-top: 40px !important;
}

.contact-info-card {
  background: var(--color-surface-warm, #FAF5ED) !important;
  border: 1.5px solid var(--color-border, #E8DEC8) !important;
  border-radius: var(--radius-lg, 22px) !important;
  padding: 44px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 540px !important;
  box-shadow: var(--shadow-md, 0 10px 25px rgba(28,25,23,0.08)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.contact-item-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  margin-bottom: 36px !important;
}

.contact-item {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

.contact-item .icon-box {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 4px 12px rgba(28,25,23,0.06) !important;
  flex-shrink: 0 !important;
}

.contact-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--color-gold) !important;
  margin-bottom: 6px !important;
}

.contact-value {
  font-size: 16.5px !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  line-height: 1.5 !important;
}

.contact-hours-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 10px !important;
}

.contact-hours-table td {
  padding: 8px 0 !important;
  font-size: 14.5px !important;
  border-bottom: 1px dashed rgba(232, 222, 200, 0.8) !important;
  color: var(--color-ink) !important;
}

.contact-hours-table tr:last-child td {
  border-bottom: none !important;
}

.contact-hours-table td:last-child {
  text-align: right !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
}

.map-frame-wrap {
  position: relative !important;
  border-radius: var(--radius-lg, 22px) !important;
  overflow: hidden !important;
  border: 1.5px solid var(--color-border, #E8DEC8) !important;
  box-shadow: var(--shadow-md, 0 10px 25px rgba(28,25,23,0.08)) !important;
  min-height: 540px !important;
  height: 100% !important;
  width: 100% !important;
  background: #EFE8DA !important;
}

.map-frame-wrap iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 540px !important;
  border: none !important;
  display: block !important;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact-info-card {
    padding: 32px 24px !important;
    min-height: auto !important;
  }
  .map-frame-wrap,
  .map-frame-wrap iframe {
    min-height: 380px !important;
  }
}


/* WordPress & Divi Full Width Layout */
body {
  background-color: var(--color-bg, #FCFAF7) !important;
}

#page-container,
.et_builder_inner_content,
.halodental-page-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background-color: var(--color-bg, #FCFAF7) !important;
  box-shadow: none !important;
}

.site-header {
  left: 0 !important;
  right: 0 !important;
}

#main-header.scrolled .header-center-badge,
.site-header.scrolled .header-center-badge {
  width: 68px;
  height: 68px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.10);
}

/* --- Additional Layout Fixes (v2.0.3) --- */

/* Reduce Section Gaps */
.et_pb_section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

/* Hide default Divi footer branding */
#footer-bottom {
    display: none !important;
}

/* Fix Divi Visual Builder container shift */
/* Ensure the container only centers automatically on the live frontend, not inside the builder */
body:not(.et-fb) .container {
    margin-left: auto !important;
    margin-right: auto !important;
}
body.et-fb .container {
    /* In the builder, rely on Divi's native wrapping for centering to avoid right-shifts */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Style the Book Online button to match the brand */
a.btn-book-online, .btn-book-online a {
    background-color: var(--color-gold-solid) !important;
    color: var(--color-ink) !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-align: center !important;
}
a.btn-book-online:hover, .btn-book-online a:hover {
    background-color: var(--color-ink) !important;
    color: var(--color-surface) !important;
    transform: translateY(-2px) !important;
}


/* ==========================================================================
   Halo Dental Clinic - Section Spacing, Halo Elements & 5-in-Row Team System
   ========================================================================== */

/* 1. Explicit Section Margins & Spacing */
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.cta-banner-section,
.contact-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  margin-top: 0 !important;
  margin-bottom: 60px !important;
  position: relative !important;
}

.et_pb_section.hero-section,
.et_pb_section.services-section,
.et_pb_section.doctor-section,
.et_pb_section.team-section,
.et_pb_section.staff-section,
.et_pb_section.technology-section,
.et_pb_section.tech-section,
.et_pb_section.reviews-section,
.et_pb_section.cta-banner-section,
.et_pb_section.contact-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  margin-bottom: 60px !important;
}

.section-header {
  margin-top: 0 !important;
  margin-bottom: 64px !important;
  padding: 0 16px !important;
  text-align: center;
}

/* 2. Team Members in 1 Single Horizontal Row (5 Columns across) */
.team-grid,
.staff-grid,
.team-row-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  align-items: stretch !important;
}

.staff-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 1200px) {
  .team-grid,
  .staff-grid,
  .team-row-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .team-grid,
  .staff-grid,
  .team-row-5 {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 24px !important;
  }
}

/* 3. Halo Background Rings & Card Halos */
.bg-halo-ring {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  filter: blur(1px);
  transition: opacity 0.5s ease;
}

.bg-halo-ring svg {
  width: 100%;
  height: 100%;
}

.bg-halo-ring-hero {
  top: -40px;
  right: -60px;
  width: 580px;
  height: 340px;
}

.bg-halo-ring-services {
  top: 20px;
  left: -80px;
  width: 520px;
  height: 300px;
}

.bg-halo-ring-doctor {
  bottom: 20px;
  left: -60px;
  width: 540px;
  height: 320px;
}

.bg-halo-ring-cta {
  top: -40px;
  right: -50px;
  width: 480px;
  height: 280px;
}

.card-halo-ring {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 130px;
  height: 85px;
  pointer-events: none;
  opacity: 0.22;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 0;
}

.service-card:hover .card-halo-ring,
.staff-card:hover .card-halo-ring,
.tech-card:hover .card-halo-ring,
.review-card:hover .card-halo-ring {
  opacity: 0.55;
  transform: scale(1.1) rotate(6deg);
}

/* 4. Halo Golden Section Dividers */
.halo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 70px auto;
  max-width: 640px;
  width: 90%;
  position: relative;
  z-index: 2;
}

.halo-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(179, 135, 25, 0.45), transparent);
}

.halo-divider-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  animation: floatHalo 4s ease-in-out infinite;
}

@keyframes floatHalo {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}


/* ==========================================================================
   Halo Dental Clinic - Golden Halo Design System & Divider Rules
   ========================================================================== */

/* Background Halo Rings */
.bg-halo-ring {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
  overflow: visible !important;
  transition: opacity 0.5s ease;
}

.bg-halo-ring svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.bg-halo-ring-hero {
  top: -20px !important;
  right: 0 !important;
  width: 520px !important;
  height: 280px !important;
  max-width: 55vw !important;
}

.bg-halo-ring-services {
  top: 10px !important;
  left: -20px !important;
  width: 480px !important;
  height: 260px !important;
}

.bg-halo-ring-doctor {
  bottom: 10px !important;
  left: -20px !important;
  width: 500px !important;
  height: 270px !important;
}

.bg-halo-ring-cta {
  top: -20px !important;
  right: -10px !important;
  width: 460px !important;
  height: 250px !important;
}

/* Card Halo Rings */
.card-halo-ring {
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  width: 130px !important;
  height: 85px !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1 !important;
}

.service-card:hover .card-halo-ring,
.staff-card:hover .card-halo-ring,
.tech-card:hover .card-halo-ring,
.review-card:hover .card-halo-ring {
  opacity: 0.85 !important;
  transform: scale(1.1) rotate(6deg) !important;
}

/* Golden Halo Section Dividers */
.halo-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 60px auto !important;
  max-width: 680px !important;
  width: 90% !important;
  position: relative !important;
  z-index: 3 !important;
  clear: both !important;
}

.halo-divider-line,
.halo-divider-rule {
  flex: 1 !important;
  height: 1.5px !important;
  display: block !important;
  background: linear-gradient(90deg, transparent, #B38719, #C59B27, #B38719, transparent) !important;
}

.halo-divider-ring {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  animation: floatHalo 4s ease-in-out infinite !important;
}

.halo-divider-ring svg {
  display: block !important;
  overflow: visible !important;
}

@keyframes floatHalo {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}

/* Ensure Sections & Divi Containers have relative positioning & visible overflow */
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.cta-banner-section,
.contact-section,
.et_pb_section {
  position: relative !important;
  overflow: visible !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  margin-bottom: 60px !important;
}


/* ==========================================================================
   Halo Dental Clinic - Divi 5 Side Margins & Golden Halo System
   ========================================================================== */

/* 1. Universal Side Padding & Container Margins */
.container,


@media (max-width: 768px) {
  .container,
  .hero-grid,
  .services-grid,
  .doctor-grid,
  .staff-grid,
  .team-grid,
  .team-row-5,
  .tech-grid,
  .reviews-grid,
  .contact-grid,
  .et_pb_row,
  .et_pb_column,
  .et_pb_code,
  .halodental-page-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 2. Section Vertical Margins & Padding */
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.cta-banner-section,
.contact-section,
.et_pb_section {
  position: relative !important;
  overflow: visible !important;
  padding-top: 90px !important;
  padding-bottom: 90px !important;
  margin-bottom: 60px !important;
}

/* 3. Background Halo Rings (Visually Stunning SVG Ellipses) */
.bg-halo-ring {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
  display: block !important;
  overflow: visible !important;
}

.bg-halo-ring svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.bg-halo-ring-hero {
  top: -30px !important;
  right: -20px !important;
  width: 540px !important;
  height: 300px !important;
}

.bg-halo-ring-services {
  top: 10px !important;
  left: -20px !important;
  width: 480px !important;
  height: 260px !important;
}

.bg-halo-ring-doctor {
  bottom: 10px !important;
  left: -20px !important;
  width: 520px !important;
  height: 280px !important;
}

.bg-halo-ring-team {
  top: 0 !important;
  right: -30px !important;
  width: 480px !important;
  height: 260px !important;
}

.bg-halo-ring-tech {
  top: 20px !important;
  left: -30px !important;
  width: 460px !important;
  height: 250px !important;
}

.bg-halo-ring-cta {
  top: -20px !important;
  right: -10px !important;
  width: 460px !important;
  height: 250px !important;
}

/* 4. Golden Halo Section Dividers */
.halo-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 60px auto !important;
  max-width: 680px !important;
  width: 90% !important;
  position: relative !important;
  z-index: 3 !important;
  clear: both !important;
}

.halo-divider-line,
.halo-divider-rule {
  flex: 1 !important;
  height: 2px !important;
  display: block !important;
  background: linear-gradient(90deg, transparent, #B38719, #C59B27, #B38719, transparent) !important;
}

.halo-divider-ring {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.halo-divider-ring svg {
  display: block !important;
  overflow: visible !important;
}

/* ==========================================================================
   Halo Dental v2.6.0 - Divi 5 Background Halos, Golden Dividers & Side Margins
   ========================================================================== */

/* 1. Mandatory Visible Overflow on Divi Sections */
.et_pb_section,
.et_section_regular,
.et_block_section,
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.cta-banner-section,
.contact-section,
.halodental-section-wrap {
  position: relative !important;
  overflow: visible !important;
}

/* 2. Background Halo Rings (Thick Golden Ellipses) */
.bg-halo-ring {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0.85 !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
}

.bg-halo-ring svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.bg-halo-ring-hero {
  top: -30px !important;
  right: -20px !important;
  width: 540px !important;
  height: 300px !important;
  max-width: 55vw !important;
}

.bg-halo-ring-services {
  top: 10px !important;
  left: -40px !important;
  width: 500px !important;
  height: 280px !important;
}

.bg-halo-ring-doctor {
  bottom: 10px !important;
  left: -40px !important;
  width: 520px !important;
  height: 290px !important;
}

.bg-halo-ring-cta {
  top: -30px !important;
  right: -20px !important;
  width: 480px !important;
  height: 260px !important;
}

/* 3. Golden Section Dividers */
.halo-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 60px auto !important;
  max-width: 680px !important;
  width: 90% !important;
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.halo-divider-line,
.halo-divider-rule {
  flex: 1 !important;
  height: 2px !important;
  display: block !important;
  background: linear-gradient(90deg, transparent, #B38719, #C59B27, #B38719, transparent) !important;
}

.halo-divider-ring {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  animation: floatHalo 4s ease-in-out infinite !important;
}

.halo-divider-ring svg {
  display: block !important;
  overflow: visible !important;
}

/* 4. Team Members 5 Columns in 1 Horizontal Row */
.team-grid,
.staff-grid,
.team-row-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 48px auto !important;
  align-items: stretch !important;
}

@media (max-width: 1024px) {
  .team-grid,
  .staff-grid,
  .team-row-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .team-grid,
  .staff-grid,
  .team-row-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .team-grid,
  .staff-grid,
  .team-row-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}


/* ==========================================================================
   Halo Dental v2.6.2 - Background Halos Tilt, Full Width Page Wrap & Footer Line Resets
   ========================================================================== */

/* 1. Page Wrap - Standard Background Color (#FCFAF7), No Page Shadow, 100% Full Width */
.halodental-page-wrap,
#halodental-page-wrap,
body.halodental-standalone-page #page-container,
body.halodental-custom-page #page-container,
body:has(.halodental-page-wrap) #page-container {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  background-color: var(--color-bg, #FCFAF7) !important;
  color: var(--color-ink-light, #44403C);
  overflow-x: clip;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Tilted Background Halo Rings (Distinct Dynamic Rotation Angles) */
.bg-halo-ring {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.55 !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  transition: transform 0.6s ease;
  filter: drop-shadow(0 0 14px rgba(197, 155, 39, 0.35)) !important;
}

.bg-halo-ring svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.bg-halo-ring-hero {
  top: -30px !important;
  right: -50px !important;
  width: 620px !important;
  height: 280px !important;
  transform: rotate(-24deg) !important;
  opacity: 0.58 !important;
}

.bg-halo-ring-services {
  top: 20px !important;
  left: -80px !important;
  width: 580px !important;
  height: 270px !important;
  transform: rotate(20deg) !important;
  opacity: 0.50 !important;
}

.bg-halo-ring-doctor {
  bottom: 20px !important;
  left: -60px !important;
  width: 560px !important;
  height: 260px !important;
  transform: rotate(-18deg) !important;
  opacity: 0.54 !important;
}

.bg-halo-ring-team {
  top: 0 !important;
  right: -40px !important;
  width: 520px !important;
  height: 250px !important;
  transform: rotate(16deg) !important;
  opacity: 0.48 !important;
}

.bg-halo-ring-tech {
  top: 20px !important;
  left: -40px !important;
  width: 500px !important;
  height: 240px !important;
  transform: rotate(-14deg) !important;
  opacity: 0.48 !important;
}

.bg-halo-ring-cta {
  top: -20px !important;
  right: -30px !important;
  width: 520px !important;
  height: 250px !important;
  transform: rotate(-15deg) !important;
  opacity: 0.55 !important;
}

/* 3. Footer Line Resets - Remove any dark/black bottom lines */
#main-footer,
#footer-bottom,
#et-footer-nav,
.site-footer,
.footer-bottom {
  border-color: var(--color-border, #E8DEC8) !important;
  box-shadow: none !important;
}

#main-footer {
  background-color: var(--color-menu-bg, #F6EBDE) !important;
  border-top: none !important;
}

#footer-bottom {
  background-color: transparent !important;
  border-top: 1px solid var(--color-border, #E8DEC8) !important;
}

.site-footer {
  background: var(--color-menu-bg, #F6EBDE) !important;
  border-top: 1px solid var(--color-border, #E8DEC8) !important;
}

.footer-bottom {
  border-top: 1px solid var(--color-border, #E8DEC8) !important;
  padding-top: 28px !important;
}


/* ==========================================================================
   Halo Dental Optional Halo Utility System
   Add CSS Class 'no-halo', 'no-bg-halo', or 'no-card-halo' in Divi / WP Editor to hide halos
   ========================================================================== */
.no-halo .bg-halo-ring,
.no-halo .card-halo-ring,
.no-halo .halo-divider-ring,
.hide-halo .bg-halo-ring,
.hide-halo .card-halo-ring,
.hide-halo .halo-divider-ring,
.no-bg-halo .bg-halo-ring,
.hide-bg-halo .bg-halo-ring,
.no-card-halo .card-halo-ring,
.hide-card-halo .card-halo-ring,
.no-halos .bg-halo-ring,
.no-halos .card-halo-ring,
.no-halos .halo-divider-ring,
body.no-bg-halos .bg-halo-ring,
body.no-card-halos .card-halo-ring,
.bg-halo-ring-reviews,
[data-halo="off"] .bg-halo-ring,
[data-halo="off"] .card-halo-ring,
[data-halo="false"] .bg-halo-ring,
[data-halo="false"] .card-halo-ring {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ==========================================================================
   Card Widths & Grid Column Optimization (v2.6.4)
   - Prevents nested padding from squeezing 1/3 grid columns and cards
   - Enforces spacious ~385px card widths in 1280px containers
   ========================================================================== */

/* 1. Main outer containers get 32px side padding & 1280px max-width */
.container,
.site-header .container,
.site-footer .container,
.hero-section .container,
.services-section .container,
.doctor-section .container,
.team-section .container,
.staff-section .container,
.technology-section .container,
.tech-section .container,
.reviews-section .container,
.contact-section .container,
.halodental-page-wrap .container,
.hero-grid,
.doctor-grid,
.contact-grid {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
  position: relative;
}

/* 2. Inner columns, text modules, and card grid containers DO NOT add extra side padding */
.et_pb_column,
.et_pb_code,
.et_pb_text,
.et_pb_text_inner,
.services-grid,
.staff-grid,
.team-grid,
.team-row-5,
.tech-grid,
.reviews-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Divi Row flex layout & 1/3 column expansions */
.services-section .et_pb_row,
.technology-section .et_pb_row,
.tech-section .et_pb_row,
.reviews-section .et_pb_row {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
}

.services-section .et_pb_column.et_pb_column_1_3,
.technology-section .et_pb_column.et_pb_column_1_3,
.tech-section .et_pb_column.et_pb_column_1_3,
.reviews-section .et_pb_column.et_pb_column_1_3 {
  width: calc(33.333% - 19px) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex-shrink: 0 !important;
}

.services-section .et_pb_text,
.technology-section .et_pb_text,
.tech-section .et_pb_text,
.reviews-section .et_pb_text,
.services-section .et_pb_text_inner,
.technology-section .et_pb_text_inner,
.tech-section .et_pb_text_inner,
.reviews-section .et_pb_text_inner {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. Standalone & Shortcode Card Grids (3 Columns & 4 Columns) */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.tech-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.service-card,
.tech-card,
.review-card,
.staff-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 5. Responsive Adjustments */
@media (max-width: 992px) {
  .services-grid,
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .services-section .et_pb_column.et_pb_column_1_3,
  .technology-section .et_pb_column.et_pb_column_1_3,
  .tech-section .et_pb_column.et_pb_column_1_3,
  .reviews-section .et_pb_column.et_pb_column_1_3 {
    width: calc(50% - 14px) !important;
  }
}

@media (max-width: 640px) {
  .services-grid,
  .tech-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
  }
  .services-section .et_pb_column.et_pb_column_1_3,
  .technology-section .et_pb_column.et_pb_column_1_3,
  .tech-section .et_pb_column.et_pb_column_1_3,
  .reviews-section .et_pb_column.et_pb_column_1_3 {
    width: 100% !important;
  }
}



/* ==========================================================================
   Full-Width Clean White Header & Restored Brand Colors
   - Restores crisp white (#FFFFFF) background for .site-header
   - Restores champagne (#F6EBDE) for .top-bar
   - Full-width alabaster base (#FCFAF7) for page
   ========================================================================== */
.site-header,
#siteHeader,
#main-header,
.et-l--header {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  box-sizing: border-box !important;
}

.site-header.scrolled,
#siteHeader.scrolled,
#main-header.scrolled {
  width: 100% !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

.top-bar {
  background: var(--color-menu-bg, #F6EBDE) !important;
  background-color: var(--color-menu-bg, #F6EBDE) !important;
}

#page-container,
.et_builder_inner_content,
.halodental-page-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background-color: var(--color-bg, #FCFAF7) !important;
  box-shadow: none !important;
}

/* Ensure inner container of menu is centered at 1280px */
.site-header .container,
.site-header .header-centered-wrap {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   Mobile header fix (item 6): logo too small + not centered on phones.
   Single row, larger centered badge, burger overlaid at right edge.
   ========================================================================== */
@media (max-width: 900px) {
  /* Trim the legacy 90px !important section padding on the header only */
  .site-header.et_pb_section {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
  }
  .header-centered-wrap {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .header-centered-wrap > .et_pb_column {
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
  }
  /* Burger column pinned to the right edge so the logo stays truly centered */
  .header-centered-wrap > .et_pb_column.et-last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .header-center-badge {
    width: 104px !important;
    height: 104px !important;
    margin: -10px auto !important;
  }
  .site-header.scrolled .header-center-badge {
    width: 84px !important;
    height: 84px !important;
  }
}

/* ==========================================================================
   Chrome sections must escape the legacy `.et_pb_section { padding:90px
   !important; margin-bottom:60px !important }` blanket rule (0,1,0).
   (0,2,0) + !important wins on every device.
   ========================================================================== */
.top-bar.et_pb_section {
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
}
.site-header.et_pb_section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}

/* Mobile: tighter chrome padding (must come AFTER the global chrome rule) */
@media (max-width: 900px) {
  .site-header.et_pb_section {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* Top bar: keep the classic left/right split on mobile (left = address+phone,
   right = schedule+lang). Must come after the older centered-top-bar rules. */
@media (max-width: 900px) {
  .top-bar-inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    gap: 10px;
  }
  .top-bar-left {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .top-bar-right {
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: auto !important;
    text-align: right !important;
    flex-shrink: 0;
  }
  .top-bar-item {
    font-size: 11px;
    justify-content: flex-start;
    text-align: left;
    gap: 4px;
  }
  .top-bar-right .top-bar-item {
    justify-content: flex-end;
    text-align: right;
    white-space: nowrap;
  }
  .lang-switcher { margin: 0 !important; }
}

/* Top bar polish: right column hugs right edge (desktop); keep the two
   columns side-by-side on phones instead of Divi's stacked 100% columns. */
.top-bar-right { text-align: right; }
.top-bar-right .top-bar-item { justify-content: flex-end; }
.top-bar-right .lang-switcher { justify-content: flex-end; }
@media (max-width: 900px) {
  .top-bar-inner { flex-wrap: nowrap; }
  .top-bar .top-bar-left,
  .top-bar .top-bar-right { width: auto !important; flex: 0 1 auto !important; }
  .top-bar-left { min-width: 0; }
  .top-bar-left .top-bar-item:first-child { line-height: 1.25; }
}

/* Top bar: right-align inside the Divi text-module wrapper (it shrinks to
   content, so column-level alignment can't reach it) and kill wpautop <p> margins. */
.top-bar .et_pb_text { width: 100%; }
.top-bar .et_pb_text_inner { text-align: right; }
.top-bar .et_pb_text_inner p { margin: 0; }
.top-bar-left .et_pb_text_inner { text-align: left; }

/* ==========================================================================
   THIN-STRIP HEADER (restores original design proportions; this block is
   last so it wins over the earlier chrome-padding rules):
   - top bar: ONE row on desktop (items inline)
   - header: thin 76px rectangle, 114px badge overhangs it by its original
     -19px margins (floats above the strip); scrolled state keeps badge 68px
   - mobile: compact strip, badge 104px with small overhang
   ========================================================================== */
.top-bar .et_pb_text_inner,
.top-bar .et_pb_text_inner p {
  display: flex;
  align-items: center;
  gap: 18px;
}
.top-bar-right .et_pb_text_inner,
.top-bar-right .et_pb_text_inner p { justify-content: flex-end; }

.site-header.et_pb_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.site-header .et_pb_row,
.site-header .header-centered-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 900px) {
  .site-header.et_pb_section {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .site-header .header-center-badge {
    margin-top: -12px !important;
    margin-bottom: -12px !important;
  }
  .site-header.scrolled .header-center-badge {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* top bar stays two stacked columns on phones (one row can't fit 4 items) */
  .top-bar .et_pb_text_inner { display: block; }
  .top-bar-left .et_pb_text_inner p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .top-bar-right .et_pb_text_inner p { display: block; }
  .top-bar-left .top-bar-item { line-height: 1.2; }
}

/* wpautop injects <br> between inline items; inside the flex <p> it becomes
   a phantom flex item adding a whole line of height. Kill it. */
.top-bar .et_pb_text_inner p br { display: none; }

/* Divi's default .et_pb_column margin-bottom:30px inflates the chrome rows */
.top-bar .et_pb_column,
.header-centered-wrap > .et_pb_column {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   BUILDER-EDITED NAV (user rebuilt header in Divi builder 2026-10-19):
   two nav groups (left + right of logo), links separated by <br> inside one
   text module -> make them horizontal rows, and let header columns size to
   content instead of 5 x 25% (which overflowed and wrapped).
   ========================================================================== */
.header-centered-wrap {
  justify-content: space-between;
  /* Reference design: menu+CTA form one centered block with generous side
     margins (~17%), not stretched across the full 1216px container. */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.header-centered-wrap > .et_pb_column {
  flex: 0 0 auto !important;
  width: auto !important;
}
@media (min-width: 901px) {
  .header-centered-wrap > .et_pb_column:nth-of-type(5),
  .header-centered-wrap > .et_pb_column.et-last-child:has(#mobileMenuBtn),
  .header-centered-wrap > .et_pb_column.et-last-child:has(.mobile-menu-btn),
  .header-centered-wrap > .et_pb_column:empty {
    display: none !important;
  }
}
.header-centered-wrap .header-nav-group .et_pb_text_inner {
  display: flex;
  align-items: center;
}
.header-centered-wrap .header-nav-group .et_pb_text_inner p {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
}
.header-centered-wrap .header-nav-group p br { display: none; }

/* ==========================================================================
   MOBILE DRAWER rebuilt for the two nav groups (builder edit): instead of
   two overlapping absolute panels, open state wraps the header row and each
   group becomes a full-width in-flow row: logo/burger, navL, navR, CTA.
   ========================================================================== */
@media (max-width: 900px) {
  .site-header.mobile-open {
    box-shadow: 0 16px 36px rgba(28, 25, 23, 0.12);
  }
  .site-header.mobile-open .header-centered-wrap {
    flex-wrap: wrap !important;   /* beats item-6 block's nowrap !important */
    justify-content: center !important;
  }
  .site-header.mobile-open .header-centered-wrap > .et_pb_column { order: 5; }
  .site-header.mobile-open .header-centered-wrap > .et_pb_column:nth-of-type(2) { order: 1; }
  .site-header.mobile-open .header-centered-wrap > .et_pb_column:nth-of-type(1) { order: 2; padding-top: 16px; }
  .site-header.mobile-open .header-centered-wrap > .et_pb_column:nth-of-type(3) { order: 3; }
  .site-header.mobile-open .header-nav-group {
    position: static !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    background: #FFFFFF;
    padding: 4px 20px 8px;
    gap: 0;
    border-bottom: none;
    box-shadow: none;
  }
  .site-header.mobile-open .header-nav-group .et_pb_text_inner p {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header.mobile-open .header-action-group {
    order: 4;
    position: static !important;
    top: auto !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 8px 20px 20px;
    background: #FFFFFF;
  }
  .site-header.mobile-open .header-action-group .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Smooth Scrolling & Anchor Target Offsets (compensates for sticky header)
   ========================================================================== */
html {
  scroll-behavior: smooth;
}
.hero-section,
.services-section,
.doctor-section,
.team-section,
.technology-section,
.reviews-section,
.cta-banner-section,
.contact-section,
#hero,
#services,
#doctor,
#team,
#technology,
#reviews,
#booking,
#contact {
  scroll-margin-top: 130px !important;
}

/* ==========================================================================
   Halo Dental Luxury Brand Aesthetics: Restored Colors, Halos & Gradients
   Matches reference design:
   - Warm champagne (#F6EBDE) top utility bar
   - Crisp thin white (#FFFFFF) sticky header with subtle champagne border
   - Floating champagne/gold badge with dual glow
   - Hero luxury gradient: champagne -> white -> soft alabaster
   - Radiant glowing halo background rings with 18px golden drop shadow
   - Alternating warm alabaster (#FCFAF7), warm sand (#FAF5ED), and white sections
   - Golden CTA gradient banner and gold metallic action buttons
   ========================================================================== */
/* Reference design (image_cab81f.png): top utility bar = warm beige
   (#F6EBDE ≈ #F3E9DF), navbar = pale cream #F9F4EC — flat, BORDERLESS, and
   seamless with the page background below it (NOT a white strip). */
.top-bar {
  background: var(--color-menu-bg, #F6EBDE) !important;
  background-color: var(--color-menu-bg, #F6EBDE) !important;
  border-bottom: none !important;
}

.site-header,
#siteHeader {
  background: #F9F4EC !important;
  background-color: #F9F4EC !important;
  border-bottom: none !important;
}

.site-header.scrolled,
#siteHeader.scrolled {
  background: #F9F4EC !important;
  background-color: #F9F4EC !important;
  border-bottom: 1px solid rgba(232, 222, 200, 0.7) !important;
  box-shadow: 0 6px 20px rgba(28, 25, 23, 0.08) !important;
}

.header-center-badge {
  background: var(--color-menu-bg, #F6EBDE) !important;
  border: 1.5px solid var(--color-border, #E8DEC8) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12), 0 0 0 1px rgba(197, 155, 39, 0.25) !important;
}

.hero-section {
  background: linear-gradient(180deg, #F9F4EC 0%, #FBF8F2 55%, #FCFAF7 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.doctor-section,
.reviews-section {
  background-color: var(--color-surface-warm, #FAF5ED) !important;
  position: relative !important;
  overflow: hidden !important;
}

.team-section {
  background-color: #FFFFFF !important;
  position: relative !important;
  overflow: hidden !important;
}

.services-section,
.technology-section,
.contact-section {
  background-color: var(--color-bg, #FCFAF7) !important;
  position: relative !important;
  overflow: hidden !important;
}

.cta-banner-section {
  background: linear-gradient(135deg, #FAF4E8 0%, #F5ECDB 50%, #ECE0C8 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.bg-halo-ring {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.65 !important;
  filter: drop-shadow(0 0 18px rgba(197, 155, 39, 0.45)) !important;
}

.halo-divider-rule,
.halo-divider-line {
  background: linear-gradient(90deg, transparent, #B38719, #C59B27, #B38719, transparent) !important;
}

.btn-gold,
.btn.btn-gold,
.header-action-group .btn {
  background: linear-gradient(135deg, #C59B27 0%, #B38719 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(179, 135, 25, 0.35) !important;
  border: none !important;
}

.btn-gold:hover,
.btn.btn-gold:hover,
.header-action-group .btn:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #C59B27 100%) !important;
  box-shadow: 0 6px 20px rgba(179, 135, 25, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   Reference navbar layout (image_cab81f.png): logo badge DEAD CENTER at 50%
   viewport width; left/right menu groups flank it at 40px; CTA pinned to the
   right edge. Desktop only — phones keep the flex row + burger drawer.

   Mechanism: Divi 5 block columns ignore flex-grow/basis (observed), so all
   placement is absolute against the row's exact center — deterministic:
   badge  = centered (translateX -50%)
   navL   = right edge at 50% - 97px  (badge half 57 + gap 40)
   navR   = left edge at 50% + 97px
   CTA    = right edge of the row
   ========================================================================== */
@media (min-width: 901px) {
  .header-centered-wrap {
    position: relative;
    min-height: 76px;
  }
  .header-centered-wrap > .et_pb_column {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    width: auto !important;
    float: none !important;
  }
  /* col1 = left nav group */
  .header-centered-wrap > .et_pb_column:nth-of-type(1) {
    right: calc(50% + 97px);
    display: flex !important;
  }
  /* col2 = logo badge: dead center */
  .header-centered-wrap > .et_pb_column:nth-of-type(2) {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* col3 = right nav group */
  .header-centered-wrap > .et_pb_column:nth-of-type(3) {
    left: calc(50% + 97px);
    display: flex !important;
  }
  /* col5 = CTA: pinned to the right edge of the header row */
  .header-centered-wrap > .et_pb_column:nth-of-type(4),
  .header-centered-wrap > .header-action-group {
    right: 0;
    display: flex !important;
    z-index: 21;
  }
  /* col6 = burger (mobile only) */
  .header-centered-wrap > .et_pb_column:nth-of-type(5) {
    display: none !important;
  }
}

/* Card corner halos: staff cards ONLY — service/tech/review card halos were
   removed per user request (2026-10-19). CSS guard in case markup still
   carries injected rings. */
.service-card .card-halo-ring,
.tech-card .card-halo-ring,
.review-card .card-halo-ring {
  display: none !important;
}

/* ==========================================================================
   Content margins per reference image_e54da2.png: section/footer content is
   1140px wide (≈70px side margins at a 1280 viewport) instead of near
   full-bleed 1280 rows with only 32px. Top bar stays near full-bleed (its
   own reference shows items almost at the window edges).
   ========================================================================== */
#main-content .et_pb_row,
.halodental-main-content .et_pb_row,
.halodental-page-wrap .et_pb_row,
.site-footer .et_pb_row {
  max-width: 1204px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Header row shares the same content grid => its CTA edge aligns with
   section content edges (matches navbar reference 85-97% band). */
.site-header .header-centered-wrap {
  max-width: 1204px !important;
}

/* ==========================================================================
   Text↔image gutters inside split sections (reference complaint: columns
   touch with 0px gutter in hero + doctor 50/50 rows). Give the two columns
   a 64px gap (32px padding each side) on desktop; stacked mobile unaffected.
   ========================================================================== */
@media (min-width: 981px) {
  .hero-section .et_pb_row > .et_pb_column:first-child,
  .doctor-section .et_pb_row > .et_pb_column:first-child {
    padding-right: 32px !important;
  }
  .hero-section .et_pb_row > .et_pb_column:last-child,
  .doctor-section .et_pb_row > .et_pb_column:last-child {
    padding-left: 32px !important;
  }
}

/* ==========================================================================
   FINAL guards (must stay last):
   1. Navbar stays pale cream #F9F4EC in ALL states — including .scrolled /
      .sticky (older blocks load later in style.css and turned it white).
   2. EMPTY Divi sections render 180px of white (legacy 90px section padding)
      between the menu and the first real section — collapse them.
   ========================================================================== */
.site-header,
#siteHeader,
#main-header,
.site-header.scrolled,
#siteHeader.scrolled,
#main-header.scrolled,
.site-header.sticky,
#siteHeader.sticky,
#main-header.sticky {
  background: #F9F4EC !important;
  background-color: #F9F4EC !important;
}

.et_pb_section:empty,
.et_pb_section.et_flex_section:empty {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer section: keep the classic look (reference image_c9efd9.png) —
   legacy `.et_pb_section { padding: 90px !important; margin-bottom: 60px }`
   must not inflate the footer block section. */
.site-footer.et_pb_section {
  padding: 64px 0 32px !important;
  margin-bottom: 0 !important;
  background: #F6EBDE !important;
}

/* ==========================================================================
   Halo header fixes (2026-10-21):
   1) Top bar groups lay their separate text modules out horizontally.
   2) Logo badge overhangs the nav strip — never clipped by the row and never
      covered by the sections below (z-index above page content).
   ========================================================================== */
.top-bar-left,
.top-bar-right {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px !important;
}
.top-bar-right {
  justify-content: flex-end;
  gap: 24px !important;
}
.top-bar .et_pb_text,
.header-nav-group .et_pb_text {
  margin: 0 !important;
}
.top-bar .et_pb_text_inner p,
.header-nav-group .et_pb_text_inner p {
  margin: 0 !important;
}
.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.site-header {
  position: relative;
  z-index: 200;
}
.header-centered-wrap,
.header-centered-wrap > .et_pb_column,
.header-center-badge {
  overflow: visible !important;
}
.header-center-badge {
  position: relative;
  z-index: 210;
}




/* ==========================================================================
   Mobile top bar refinements (<=768px):
   2) phones show as icons only — tapping an icon dials the number
   3) address shows as the pin icon only — tapping opens directions
   4) language pills sit vertically to the LEFT of the logo, hidden on scroll
   5) the hours ("schedule") hide on scroll as well
   ========================================================================== */
@media (max-width: 768px) {
  /* phones: icon only, whole item is the tap-to-call target
     (matched by link type — works in any column) */
  .top-bar .top-bar-item {
    position: relative;
  }
  .top-bar .top-bar-item a[href^="tel:"] {
    font-size: 0 !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    text-decoration: none;
  }
  .top-bar .top-bar-item svg {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
  }
  /* address: icon only, whole item opens map directions */
  a.top-bar-item[href*="maps"] {
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  /* language pills: moved next to the logo by JS, vertical (left of badge) */
  .header-centered-wrap > .lang-switcher {
    position: absolute;
    left: calc(50% - 112px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  .header-centered-wrap > .lang-switcher .lang-btn {
    padding: 3px 8px;
    width: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }
  /* 4+5: pills and hours disappear once the user scrolls (or drawer opens) */
  .site-header.scrolled .lang-switcher,
  .site-header.mobile-open .lang-switcher {
    display: none !important;
  }
  .halodental-sticky-header:has(.scrolled) .top-bar .top-bar-item:not(a):not(:has(a)) {
    display: none !important;
  }
}
/* Map card: vertically center the map inside the card */
.map-frame-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Scrolled state: the top utility bar compacts together with the logo badge */
.top-bar.et_pb_section,
.top-bar .et_pb_row,
.top-bar .top-bar-item,
.top-bar .top-bar-item svg,
.top-bar .lang-btn {
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.35s ease, height 0.35s ease;
}
.halodental-sticky-header:has(.scrolled) .top-bar.et_pb_section {
  padding: 0 !important;
}
.halodental-sticky-header:has(.scrolled) .top-bar .et_pb_row {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
.halodental-sticky-header:has(.scrolled) .top-bar .top-bar-item {
  font-size: 12.5px !important;
}
.halodental-sticky-header:has(.scrolled) .top-bar .top-bar-item svg {
  width: 12px;
  height: 12px;
}
.halodental-sticky-header:has(.scrolled) .top-bar .lang-btn {
  padding: 2px 9px;
  font-size: 10.5px;
}
/* Location/contact section: no background halo ring (user request 2026-10-22) */
.contact-section .bg-halo-ring {
  display: none !important;
}

/* ==========================================================================
   Sticky whole header (top utility bar + nav) + breathing logo badge.
   The badge is larger before scrolling and compacts once the header sticks;
   the nav groups track the badge width so the 40px gap to the logo holds.
   ========================================================================== */
.halodental-sticky-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 300;
}


/* Header rows share the content grid (1204px incl. 32px padding = 1140px
   content), so nav/top bar items align with the page content edges */
@media (min-width: 901px) {
  .site-header .header-centered-wrap {
    max-width: 1204px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(4) {
    right: 32px !important;
  }
}
/* Top utility bar: constrained row + one-line items (was in Custom CSS) */
.top-bar.et_pb_section {
  padding: 6px 0 !important;
}
.top-bar .et_pb_row {
  width: 100% !important;
  max-width: 1204px !important;
  margin: 0 auto !important;
  padding: 8px 32px !important;
  box-sizing: border-box !important;
}
.top-bar .et_pb_text {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.top-bar .et_pb_column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (min-width: 901px) {
  :root {
    --halo-badge-size: 150px;
  }
  .site-header.scrolled,
  #siteHeader.scrolled {
    --halo-badge-size: 100px;
  }
  .header-center-badge {
    width: var(--halo-badge-size) !important;
    height: var(--halo-badge-size) !important;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .header-center-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(1) {
    right: calc(50% + var(--halo-badge-size) / 2 + 40px) !important;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(3) {
    left: calc(50% + var(--halo-badge-size) / 2 + 40px) !important;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ==========================================================================
   Top utility bar: every info item stays on ONE line (long address + two
   phone numbers were breaking mid-number inside shrunken flex items). Whole
   items wrap to the next line as a unit instead.
   ========================================================================== */
@media (min-width: 901px) {
  .top-bar .et_pb_text_inner p,
  .top-bar a,
  .top-bar span {
    white-space: nowrap !important;
  }
  .top-bar .et_pb_text {
    flex-shrink: 0 !important;
  }
  .top-bar-left,
  .top-bar-right {
    flex-wrap: wrap;
  }
}