/*
Theme Name: Halo Dental - Divi 5 Child Theme
Theme URI: https://halodentalwa.com
Description: Luxury standalone child theme designed for Divi 5 and Halo Dental Clinic (Dr. Timur Ernoff, DDS). Features warm alabaster & champagne palette, feathered card dissolve transitions, full gettext multilingual support (EN/ES/RU with UK flag), custom appointment booking modal, and responsive Divi 5 shortcodes.
Author: Halo Dental Studio
Author URI: https://halodentalwa.com
Template: Divi
Version: 2.6.5
Text Domain: halodental
*/

/* Divi Container & Layout Compatibility Overrides */
.halodental-page-wrap {
  width: 100% !important;
  position: relative;
  background: #FAF8F5;
  color: #1C1917;
  overflow-x: hidden;
}

/* Force 100% width for section containers, while preserving inner side margins */
.et_pb_page_builder #main-content .halodental-page-wrap,
#main-content .container.halodental-container-reset,
.et_pb_section:has(.halodental-page-wrap),
.et_pb_section:has([class*="halodental-"]),
body.halodental-standalone-page .et_pb_section,
body.halodental-custom-page .et_pb_section {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Enforce 32px side padding and 1280px max-width on all inner rows & containers */
.et_pb_row,
.et_pb_column,
.et_pb_code,
.et_pb_text_inner,
.container,
.hero-grid,
.services-grid,
.doctor-grid,
.staff-grid,
.team-grid,
.team-row-5,
.tech-grid,
.reviews-grid,
.contact-grid {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

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

/* Suppress Divi default 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.et-fb.halodental-standalone-page #main-header,
body.et-fb.halodental-standalone-page #top-header,
body:has(.halodental-page-wrap) #main-header,
body:has(.halodental-page-wrap) #top-header {
  display: none !important;
}

body.halodental-standalone-page #page-container,
body.halodental-custom-page #page-container,
body:has(.halodental-page-wrap) #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove any white line/seam between site-header and the first section */
.site-header {
  border-bottom: none !important;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Out-specify Divi's later `.et_pb_section { position: relative }` so the
   Divi-block header section actually sticks (0,2,0 beats 0,1,0).
   !important needed: legacy `.et_pb_section { position: relative !important }` rules exist below. */
.site-header.et_pb_section {
  position: sticky !important;
  top: 0;
  z-index: 100;
}

.site-header.scrolled {
  border-bottom: 1px solid var(--color-border) !important;
}

body.halodental-standalone-page #main-content,
body.halodental-custom-page #main-content,
body.et-fb #main-content,
#main-content,
.halodental-main-content,
.et_builder_inner_content {
  background: transparent !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hero and top bar backgrounds - luxury brand colors */
.top-bar {
  background: var(--color-menu-bg, #F6EBDE) !important;
  background-color: var(--color-menu-bg, #F6EBDE) !important;
}

.hero-section {
  background: linear-gradient(180deg, var(--color-menu-bg, #F6EBDE) 0%, #FFFFFF 65%, var(--color-bg, #FCFAF7) 100%) !important;
  margin-top: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Native Divi Module Styling & Visual Editor Enhancements */
.et_pb_text {
  margin-bottom: 0 !important;
}
.et_pb_text_inner {
  width: 100%;
}
.et_pb_text p:last-child {
  margin-bottom: 0 !important;
}

/* Staff photo opacity fix inside Divi Visual Builder */
.staff-img-wrap img {
  opacity: 1 !important;
  transform: none !important;
}

/* Equal-gap flex row alignments for 3-column card grids */
.services-section .et_pb_row,
.team-section .et_pb_row,
.technology-section .et_pb_row,
.reviews-section .et_pb_row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

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

@media (max-width: 900px) {
  .services-section .et_pb_column.et_pb_column_1_3,
  .team-section .et_pb_column.et_pb_column_1_3 {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 768px) {
  .services-section .et_pb_column.et_pb_column_1_3,
  .team-section .et_pb_column.et_pb_column_1_3,
  .technology-section .et_pb_column.et_pb_column_1_3,
  .reviews-section .et_pb_column.et_pb_column_1_3 {
    width: 100% !important;
  }
}

.halodental-section-wrap {
  position: relative;
  width: 100%;
}


/* Button Rounded Corners Override for Divi Framework */
body #page-container .et_pb_button,
body .et_pb_button,
body .btn,
body input[type="submit"],
body button {
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
}

/* Explicit Section Separation & Bottom Margins */
.et_pb_section:has([class*="halodental-"]),
.halodental-section-wrap,
.hero-section,
.services-section,
.doctor-section,
.team-section,
.staff-section,
.technology-section,
.tech-section,
.reviews-section,
.contact-section {
  margin-bottom: 48px !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;
  }
}


/* ==========================================================================
   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; /* clip, not hidden: hidden would make this ancestor a scroll container and break the sticky header */
  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: #F9F4EC !important;
  background-color: #F9F4EC !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;
}

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

/* Smooth Scrolling & Anchor Target Offsets */
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
   ========================================================================== */
/* 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;
}

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

/* Reference navbar layout: logo DEAD CENTER (desktop only).
   Absolute geometry — Divi 5 block columns ignore flex sizing. */
@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;
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(1) {
    right: calc(50% + 97px);
    display: flex !important;
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(2) {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(3) {
    left: calc(50% + 97px);
    display: flex !important;
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(4),
  .header-centered-wrap > .header-action-group {
    right: 0;
    display: flex !important;
    z-index: 21;
  }
  .header-centered-wrap > .et_pb_column:nth-of-type(5) {
    display: none !important;
  }
}

/* Card corner halos: staff cards ONLY */
.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: 1140px content width */
#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;
}

.site-header .header-centered-wrap {
  max-width: 1204px !important;
}

/* Text↔image gutters: 64px gap in hero + doctor split rows (desktop) */
@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): cream navbar in ALL states incl. scrolled;
   empty Divi sections (180px white band) collapse to nothing. */
.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: classic look (image_c9efd9.png) */
.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;
  }
}