/* ============================================
   DAILY DENTAL & BRACESBAR — Main Stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap');

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', sans-serif; font-weight: 400; color: #222; line-height: 1.6; background: #fff; -webkit-font-smoothing: antialiased; }
::selection { background: var(--teal); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* --- Design Tokens --- */
:root {
  --teal: #2FAE95;
  --teal-dark: #23876F;
  --teal-deep: #0E5F4C;
  --navy: #0E2A36;
  --navy-light: #1a4256;
  --mint: #E6F3F0;
  --mint-deep: #CDE6DE;
  --sand: #F6F1E9;
  --coral: #EF8A6B;
  --coral-soft: #F9D9CD;
  --cream: #FCFAF6;
  --white: #FFFFFF;
  --text: #1f2d33;
  --text-light: #5b6b72;
  --border: #e6ebe9;
  --shadow: 0 2px 12px rgba(14,42,54,0.06);
  --shadow-lg: 0 20px 60px -20px rgba(14,42,54,0.22);
  --shadow-xl: 0 40px 100px -40px rgba(14,42,54,0.35);
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  --max-width: 1240px;
  --font-display: 'Instrument Serif', 'Georgia', serif;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { color: var(--navy); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1, h2, .display { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
h4 { font-size: 1.15rem; margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; }
.text-teal { color: var(--teal); }
.text-navy { color: var(--navy); }
.text-white { color: var(--white); }
.text-center { text-align: center; }
.text-light { color: var(--text-light); }

/* --- Layout --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4rem 0; }
.section-sm { padding: 2rem 0; }
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }

/* --- Top Bar --- */
.top-bar { background: var(--navy); color: var(--white); padding: 0.5rem 0; font-size: 0.85rem; }
.top-bar-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.25rem; }
.top-bar-phones { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.top-bar-phone { color: var(--white); font-weight: 500; transition: opacity var(--transition); white-space: nowrap; }
.top-bar-phone:hover { opacity: 0.8; }
.top-bar-right { display: flex; align-items: center; gap: 1rem; }
.top-bar-hours { color: var(--white); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.top-bar-reviews { color: #ffc107; font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.top-bar-reviews svg.google-logo { vertical-align: middle; margin-right: 4px; }
.top-bar-reviews svg { vertical-align: middle; margin-right: 2px; }

/* --- Header / Nav --- */
.header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
.logo img { height: 72px; width: auto; }
.logo { display: flex; align-items: center; }

/* Main nav */
.main-nav { display: flex; align-items: center; gap: 0; }
.nav-list { display: flex; align-items: center; gap: 0; }
.nav-item { position: relative; }
.nav-link { display: block; padding: 1rem 0.85rem; font-weight: 500; font-size: 0.9rem; color: var(--navy); transition: color var(--transition); white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--teal); }
.nav-link.has-dropdown::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; margin-left: 5px; vertical-align: middle; transition: transform var(--transition); }

/* Dropdown */
.dropdown { position: absolute; top: 100%; left: 0; background: var(--white); min-width: 260px; box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius) var(--radius); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition); z-index: 100; }
.nav-item:hover .dropdown, .nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.6rem 1.25rem; font-size: 0.88rem; color: var(--text); transition: all var(--transition); border-left: 3px solid transparent; }
.dropdown a:hover { background: var(--mint); color: var(--teal); border-left-color: var(--teal); }
/* Right-align dropdowns that would overflow */
.nav-item:nth-last-child(-n+3) .dropdown { left: auto; right: 0; }

/* Book CTA in nav */
.nav-cta { margin-left: 0.5rem; }
.nav-cta .btn-primary { padding: 0.6rem 1.25rem; font-size: 0.88rem; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 0.5rem; cursor: pointer; z-index: 1001; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); transition: all var(--transition); border-radius: 2px; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Buttons --- */
.btn { display: inline-block; padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius); border: 2px solid transparent; transition: all var(--transition); text-align: center; cursor: pointer; line-height: 1.4; }
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(57,181,157,0.3); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-white { background: var(--white); color: var(--teal); border-color: var(--white); }
.btn-white:hover { background: var(--mint); border-color: var(--mint); }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* --- Hero Section --- */
.hero { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--white); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(17,60,79,0.85) 0%, rgba(57,181,157,0.7) 100%); }
.hero-content { position: relative; z-index: 1; max-width: 700px; padding: 3rem 1.5rem; }
.hero h1 { color: var(--white); font-size: 2.75rem; margin-bottom: 1rem; }
.hero p { font-size: 1.15rem; margin-bottom: 2rem; opacity: 0.95; }

/* Service hero (smaller) */
.hero-service { min-height: 280px; }
.hero-service h1 { font-size: 2.25rem; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 1rem; opacity: 0.85; justify-content: center; }
.breadcrumb a { color: var(--white); opacity: 0.8; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb span { opacity: 0.6; }

/* --- Cards --- */
.card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-img { width: 100%; height: 220px; object-fit: cover; }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.card-text { font-size: 0.92rem; color: var(--text-light); }

/* Service card (icon style) */
.service-card { text-align: center; padding: 2rem 1.5rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: all var(--transition); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card img { width: 64px; height: 64px; margin: 0 auto 1rem; }
.service-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.service-card p { font-size: 0.88rem; color: var(--text-light); }

/* Team card */
.team-card { text-align: center; padding: 0; }
.team-card img { width: 100%; height: 280px; object-fit: cover; object-position: top; }
.team-card .card-body { padding: 1rem 0.75rem; }
.team-card h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.team-card p { font-size: 0.82rem; color: var(--teal); font-weight: 500; margin-bottom: 0; }

/* Location card */
.location-card { border-left: 4px solid var(--teal); padding: 2rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.location-card .location-photo { width: calc(100% + 4rem); margin: -2rem -2rem 1.5rem -2rem; height: 200px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; border-left: none; }
.location-card h3 { color: var(--teal); margin-bottom: 0.75rem; }
.location-card p { margin-bottom: 0.5rem; font-size: 0.92rem; }
.location-card a.phone { color: var(--teal); font-weight: 600; font-size: 1.1rem; }

/* Why Choose Us */
.feature-box { text-align: center; padding: 2rem 1rem; }
.feature-box img { width: 72px; height: 72px; margin: 0 auto 1rem; }
.feature-box h4 { margin-bottom: 0.5rem; }
.feature-box p { font-size: 0.9rem; color: var(--text-light); }

/* --- Section Backgrounds --- */
.bg-mint { background: var(--mint); }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-white { background: var(--white); }
.bg-light { background: #f8fafa; }

/* --- Membership --- */
.plan-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem; text-align: center; border-top: 4px solid var(--teal); transition: all var(--transition); }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card .price { font-size: 2.5rem; font-weight: 700; color: var(--teal); margin: 1rem 0; }
.plan-card .price span { font-size: 1rem; font-weight: 400; color: var(--text-light); }
.plan-card ul { text-align: left; margin: 1.5rem 0; }
.plan-card ul li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.plan-card ul li::before { content: '\2713'; color: var(--teal); font-weight: 700; margin-right: 0.5rem; }

/* --- Forms --- */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-weight: 500; font-size: 0.92rem; color: var(--navy); }
.form-control { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.95rem; transition: border-color var(--transition); background: var(--white); }
.form-control:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(57,181,157,0.15); }
textarea.form-control { min-height: 120px; resize: vertical; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

/* --- FAQ Accordion --- */
details { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden; }
details summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; background: #f8fafa; transition: background var(--transition); list-style: none; display: flex; align-items: center; justify-content: space-between; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--teal); transition: transform var(--transition); }
details[open] summary::after { content: '\2212'; }
details[open] summary { background: var(--mint); color: var(--teal); }
details .faq-answer { padding: 1rem 1.25rem; font-size: 0.95rem; line-height: 1.7; }

/* --- Footer --- */
.footer { background: var(--navy); color: var(--white); padding: 3rem 0 1.5rem; }
.footer h4 { color: var(--teal); margin-bottom: 1rem; font-size: 1.1rem; }
.footer p, .footer a { font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.footer a:hover { color: var(--teal); }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
.footer-location p { margin-bottom: 0.35rem; }
.footer-location .phone { color: var(--teal); font-weight: 600; font-size: 1rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { margin-bottom: 0; font-size: 0.82rem; }
.social-links { display: flex; gap: 0.75rem; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background var(--transition); }
.social-links a:hover { background: var(--teal); }
.social-links svg { width: 16px; height: 16px; fill: var(--white); }

/* --- Scroll Animations --- */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Service Page Content --- */
.service-content { max-width: 800px; margin: 0 auto; }
.service-content h2 { margin-top: 2rem; }
.service-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.service-content ul li { margin-bottom: 0.35rem; }

/* Comfort amenities list */
.amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.amenity-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.amenity-item::before { content: '\2713'; color: var(--teal); font-weight: 700; font-size: 1.1rem; }

/* CTA section */
.cta-section { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); padding: 3rem 0; text-align: center; color: var(--white); }
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { margin-bottom: 1.5rem; opacity: 0.9; }

/* --- Gallery --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.gallery-item { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.gallery-item:hover img { transform: scale(1.05); }

/* --- Insurance Logos --- */
.insurance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem; align-items: center; }
.insurance-logo { padding: 1rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; font-weight: 600; color: var(--navy); font-size: 0.88rem; min-height: 80px; display: flex; align-items: center; justify-content: center; }

/* --- Hours Table --- */
.hours-table { width: 100%; font-size: 0.9rem; }
.hours-table tr { border-bottom: 1px solid rgba(255,255,255,0.1); }
.hours-table td { padding: 0.35rem 0; }
.hours-table td:first-child { font-weight: 500; padding-right: 1rem; }

/* --- Promo Cards --- */
.promo-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.promo-card img { width: 100%; height: 200px; object-fit: cover; }
.promo-card .card-body { padding: 1.5rem; }

/* --- Blog --- */
.blog-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card img { width: 100%; height: 200px; object-fit: cover; }
.blog-card .card-body { padding: 1.25rem; }
.blog-card .date { font-size: 0.82rem; color: var(--text-light); margin-bottom: 0.5rem; }
.blog-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }

/* --- Maps --- */
.map-embed { border-radius: var(--radius); overflow: hidden; width: 100%; height: 300px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* --- 404 --- */
.page-404 { text-align: center; padding: 6rem 1.5rem; }
.page-404 h1 { font-size: 6rem; color: var(--teal); margin-bottom: 0.5rem; }
.page-404 h2 { margin-bottom: 1rem; }
.page-404 p { margin-bottom: 2rem; color: var(--text-light); }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2rem; }
  .hero h1 { font-size: 2.25rem; }
}

@media (max-width: 768px) {
  /* Mobile nav */
  .main-nav { position: fixed; top: 0; right: -100%; width: 85%; max-width: 360px; height: 100vh; background: var(--white); flex-direction: column; padding: 5rem 1.5rem 2rem; box-shadow: var(--shadow-lg); transition: right var(--transition); overflow-y: auto; z-index: 999; }
  .main-nav.open { right: 0; }
  .nav-list { flex-direction: column; width: 100%; }
  .nav-link { padding: 0.75rem 0; font-size: 1rem; border-bottom: 1px solid var(--border); }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding-left: 1rem; min-width: 0; }
  .nav-item.open .dropdown { display: block; }
  .nav-link.has-dropdown::after { position: absolute; right: 0; }
  .nav-item { position: relative; width: 100%; }
  .nav-cta { margin-left: 0; margin-top: 1rem; }
  .nav-cta .btn-primary { width: 100%; display: block; text-align: center; }
  .hamburger { display: flex; }

  /* Mobile overlay */
  .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; display: none; }
  .nav-overlay.active { display: block; }

  /* Layout */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .top-bar-inner { justify-content: center; }
  .top-bar-phones { gap: 0.75rem; font-size: 0.78rem; }
  .top-bar-right { display: none; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  .hero { min-height: 320px; }
  .hero h1 { font-size: 1.75rem; }
  .section { padding: 2.5rem 0; }
  .hero-service { min-height: 220px; }

  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .top-bar-phones { flex-direction: column; gap: 0.25rem; text-align: center; }
  .grid-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 1440px) {
  :root { --max-width: 1320px; }
}

/* ============================================
   Premium Components (v2)
   ============================================ */

/* Eyebrow labels */
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal-deep); margin-bottom: 1rem; }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.eyebrow.light { color: var(--coral-soft); }

/* Split Hero */
.hero-split { background: linear-gradient(180deg, var(--cream) 0%, var(--mint) 100%); position: relative; overflow: hidden; padding: 5rem 0 6rem; }
.hero-split::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(47,174,149,0.18) 0%, transparent 70%); pointer-events: none; }
.hero-split::after { content: ''; position: absolute; bottom: -25%; left: -15%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(239,138,107,0.14) 0%, transparent 70%); pointer-events: none; }
.hero-split .container { position: relative; z-index: 1; }
.hero-split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.hero-split h1 { color: var(--navy); font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.02; margin-bottom: 1.5rem; }
.hero-split h1 em { font-style: normal; color: var(--teal-deep); font-weight: 700; }
.hero-split .lead { font-size: 1.2rem; color: var(--text); margin-bottom: 2rem; max-width: 520px; line-height: 1.55; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-trust { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border-radius: 100px; box-shadow: var(--shadow); max-width: 420px; }
.hero-trust-stars { color: #F5B400; font-size: 0.95rem; letter-spacing: 2px; }
.hero-trust-text { font-size: 0.85rem; color: var(--text-light); line-height: 1.3; }
.hero-trust-text strong { color: var(--navy); display: block; font-weight: 600; font-size: 0.92rem; }

/* Hero photo mosaic */
.hero-mosaic { position: relative; aspect-ratio: 1 / 1.05; max-width: 560px; margin-left: auto; }
.hero-mosaic-main { position: absolute; top: 0; left: 5%; width: 68%; height: 72%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.hero-mosaic-main img { width: 100%; height: 100%; object-fit: cover; }
.hero-mosaic-sub { position: absolute; bottom: 0; right: 0; width: 58%; height: 52%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 6px solid var(--cream); }
.hero-mosaic-sub img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge { position: absolute; top: 8%; right: 4%; background: var(--coral); color: #fff; padding: 1rem 1.25rem; border-radius: 100px; font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.5rem; transform: rotate(4deg); }
.hero-badge svg { width: 18px; height: 18px; }
.hero-stat-card { position: absolute; bottom: 12%; left: -6%; background: #fff; padding: 1rem 1.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 0.85rem; }
.hero-stat-card .stat-num { font-family: var(--font-display); font-size: 2rem; color: var(--teal-deep); font-weight: 500; line-height: 1; }
.hero-stat-card .stat-label { font-size: 0.82rem; color: var(--text-light); line-height: 1.3; max-width: 110px; }

/* Stats strip */
.stats-strip { background: var(--navy); color: #fff; padding: 2.5rem 0; }
.stats-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; align-items: center; }
.stat-block { text-align: center; border-right: 1px solid rgba(255,255,255,0.12); padding: 0.5rem 1rem; }
.stat-block:last-child { border-right: none; }
.stat-block .stat-num { font-family: var(--font-display); font-size: 2.75rem; font-weight: 500; color: #fff; line-height: 1; margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.stat-block .stat-num sup { font-size: 1.25rem; color: var(--teal); font-weight: 600; margin-left: 2px; }
.stat-block .stat-label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.72); font-weight: 500; }

/* Section headers */
.section-head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { font-size: 1.08rem; color: var(--text-light); }

/* Service tile (image-backed) */
.service-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; display: block; color: #fff; box-shadow: var(--shadow); transition: all var(--transition); }
.service-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.service-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-tile:hover .service-tile-img { transform: scale(1.06); }
.service-tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,42,54,0) 35%, rgba(14,42,54,0.88) 100%); }
.service-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; z-index: 1; }
.service-tile h3 { color: #fff; margin-bottom: 0.25rem; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
.service-tile p { color: rgba(255,255,255,0.85); font-size: 0.88rem; margin-bottom: 0; line-height: 1.4; }
.service-tile-arrow { position: absolute; top: 1.25rem; right: 1.25rem; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: all var(--transition); z-index: 1; }
.service-tile-arrow svg { width: 18px; height: 18px; fill: #fff; transition: transform var(--transition); }
.service-tile:hover .service-tile-arrow { background: var(--coral); }
.service-tile:hover .service-tile-arrow svg { transform: translate(2px, -2px); }

/* Feature row (editorial) */
.feature-row { display: grid; grid-template-columns: 0.45fr 1fr; gap: 3rem; padding: 2.5rem 0; border-top: 1px solid var(--border); align-items: center; }
.feature-row:first-child { border-top: none; }
.feature-row-num { font-family: var(--font-display); font-size: 5rem; color: var(--teal); line-height: 0.9; font-weight: 400; letter-spacing: -0.03em; }
.feature-row h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; margin-bottom: 0.75rem; }
.feature-row p { color: var(--text-light); font-size: 1.02rem; margin-bottom: 0; max-width: 540px; }

/* Testimonial card */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testimonial { background: #fff; padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; flex-direction: column; }
.testimonial-stars { color: #F5B400; margin-bottom: 1rem; letter-spacing: 3px; }
.testimonial-quote { font-size: 1.02rem; color: var(--text); line-height: 1.55; margin-bottom: 1.5rem; flex: 1; }
.testimonial-quote { /* no decorative quote mark */ }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--teal-deep); font-size: 0.95rem; flex-shrink: 0; }
.testimonial-meta { font-size: 0.88rem; }
.testimonial-meta strong { display: block; color: var(--navy); font-weight: 600; }
.testimonial-meta span { color: var(--text-light); font-size: 0.82rem; }

/* Location module (full-bleed image) */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.loc-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow); transition: all var(--transition); }
.loc-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.loc-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.loc-tile:hover .loc-tile-img { transform: scale(1.05); }
.loc-tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,42,54,0) 40%, rgba(14,42,54,0.92) 100%); }
.loc-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem; color: #fff; z-index: 1; }
.loc-tile-body h3 { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; margin-bottom: 0.25rem; }
.loc-tile-body .addr { font-size: 0.92rem; opacity: 0.9; margin-bottom: 0.35rem; }
.loc-tile-body .phone-lg { font-size: 1.25rem; font-weight: 500; color: #fff; display: inline-block; margin-top: 0.35rem; }
.loc-tile-body .phone-lg:hover { color: var(--coral-soft); }
.loc-tile-link { display: inline-block; margin-top: 0.75rem; color: var(--coral-soft); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
.loc-tile-link:hover { color: #fff; }
.loc-tile-tag { position: absolute; top: 1.25rem; left: 1.25rem; background: rgba(255,255,255,0.95); color: var(--teal-deep); padding: 0.35rem 0.85rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; z-index: 1; }

/* Promo ribbon */
.promo-ribbon { background: linear-gradient(135deg, var(--coral) 0%, #E46B4A 100%); color: #fff; padding: 3.5rem 0; text-align: center; position: relative; overflow: hidden; }
.promo-ribbon::before { content: ''; position: absolute; top: -50%; left: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.promo-ribbon::after { content: ''; position: absolute; bottom: -50%; right: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.promo-ribbon .container { position: relative; z-index: 1; }
.promo-ribbon h2 { color: #fff; font-family: var(--font-display); font-weight: 500; margin-bottom: 0.75rem; }
.promo-ribbon .eyebrow { color: rgba(255,255,255,0.85); }
.promo-ribbon p { font-size: 1.1rem; opacity: 0.95; max-width: 620px; margin: 0 auto 1.75rem; }
.btn-coral { background: #fff; color: var(--coral); border-color: #fff; }
.btn-coral:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Specials mini-cards */
.specials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.special-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); display: flex; flex-direction: column; }
.special-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.special-card-img { height: 200px; background-size: cover; background-position: center; position: relative; }
.special-card-tag { position: absolute; top: 1rem; left: 1rem; background: var(--coral); color: #fff; padding: 0.3rem 0.75rem; border-radius: 100px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.special-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.special-card-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-bottom: 0.5rem; }
.special-card-body p { color: var(--text-light); font-size: 0.92rem; margin-bottom: 1rem; flex: 1; }

/* Full-width split CTA */
.split-cta { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); min-height: 400px; overflow: hidden; }
.split-cta-img { background-size: cover; background-position: center; position: relative; }
.split-cta-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--navy) 100%); }
.split-cta-content { padding: 4rem 3rem; color: #fff; display: flex; flex-direction: column; justify-content: center; max-width: 560px; }
.split-cta-content h2 { color: #fff; font-family: var(--font-display); font-weight: 500; margin-bottom: 1rem; }
.split-cta-content p { opacity: 0.85; margin-bottom: 1.75rem; font-size: 1.05rem; }

/* Team tile (consistent circle avatar) */
.team-tile { text-align: center; background: transparent; box-shadow: none; padding: 0.5rem; transition: all var(--transition); }
.team-tile:hover { transform: translateY(-4px); }
.team-avatar { position: relative; width: 100%; max-width: 220px; margin: 0 auto 1rem; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: var(--mint); box-shadow: var(--shadow); }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 0.5s ease; }
.team-tile:hover .team-avatar img { transform: scale(1.06); }
.team-avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.8); }
.team-tile h4 { margin: 0.5rem 0 0.15rem; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.team-tile .role { font-size: 0.82rem; color: var(--teal-deep); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 0; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; }
.team-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 3.5rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.team-section-head h2 { margin-bottom: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.85rem; }
.team-section-head .count { font-size: 0.85rem; color: var(--text-light); font-weight: 500; }

/* Lead dentist callout used on per-location pages */
.lead-dentist { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: center; background: linear-gradient(135deg, var(--cream) 0%, #fff 100%); padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 3rem; position: relative; overflow: hidden; }
.lead-dentist::before { content: ''; position: absolute; top: -40%; right: -10%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(47,174,149,0.12) 0%, transparent 70%); pointer-events: none; }
.lead-dentist-photo { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-xl); background: var(--mint); }
.lead-dentist-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.lead-dentist-photo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.85); }
.lead-dentist-body { position: relative; z-index: 1; }
.lead-dentist-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--coral); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.4rem 0.85rem; border-radius: 999px; margin-bottom: 0.85rem; }
.lead-dentist-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; margin: 0 0 0.25rem; color: var(--navy); }
.lead-dentist-body .role { font-size: 0.92rem; color: var(--teal-deep); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin: 0 0 0.85rem; }
.lead-dentist-body p { color: var(--text); font-size: 1.02rem; line-height: 1.55; margin: 0; }
@media (max-width: 720px) { .lead-dentist { grid-template-columns: 1fr; text-align: center; padding: 1.75rem; gap: 1.5rem; } .lead-dentist-photo { max-width: 200px; margin: 0 auto; } }

/* Insurance marquee */
.insurance-strip { padding: 2.5rem 0; background: var(--sand); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.insurance-strip .container { display: flex; align-items: center; gap: 3rem; justify-content: center; flex-wrap: wrap; }
.insurance-strip .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-light); font-weight: 600; border-right: 1px solid var(--border); padding-right: 2rem; }
.insurance-strip .names { display: flex; gap: 2.25rem; flex-wrap: wrap; color: var(--navy); font-weight: 500; font-size: 0.95rem; }

/* Buttons refresh (hero CTAs) */
.btn-ghost { background: transparent; color: var(--navy); border-color: transparent; padding-left: 0.5rem; padding-right: 0.5rem; }
.btn-ghost:hover { color: var(--teal-deep); }
.btn-ghost::after { content: ' \2192'; transition: transform var(--transition); display: inline-block; margin-left: 0.4rem; }
.btn-ghost:hover::after { transform: translateX(4px); }

.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

/* Make nav sharper */
.nav-link { font-weight: 500; font-size: 0.92rem; }
.nav-cta .btn-primary { border-radius: 100px; padding: 0.65rem 1.4rem; box-shadow: 0 6px 18px -6px rgba(47,174,149,0.4); }
.nav-cta .btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(47,174,149,0.55); }

/* Section padding refresh */
.section { padding: 5rem 0; }
.section-tight { padding: 3.5rem 0; }

@media (max-width: 1024px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-mosaic { max-width: 460px; margin: 0 auto; }
  .stats-strip .container { grid-template-columns: repeat(2, 1fr); }
  .stat-block:nth-child(2) { border-right: none; }
  .feature-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .testimonial-grid, .loc-grid, .specials-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .split-cta { grid-template-columns: 1fr; }
  .split-cta-img { min-height: 280px; }
}

@media (max-width: 680px) {
  .section { padding: 3.5rem 0; }
  .hero-split { padding: 3rem 0 4rem; }
  .hero-mosaic { max-width: 340px; }
  .testimonial-grid, .loc-grid, .specials-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .stats-strip { padding: 1.75rem 0; }
  .stats-strip .container { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .stat-block { border-right: none; }
  .stat-block .stat-num { font-size: 2rem; }
  .feature-row-num { font-size: 3.5rem; }
  .hero-badge { padding: 0.65rem 0.9rem; font-size: 0.8rem; top: 4%; right: 2%; }
  .hero-stat-card { left: -2%; padding: 0.75rem 1rem; }
  .hero-stat-card .stat-num { font-size: 1.5rem; }
  .insurance-strip .label { border-right: none; padding-right: 0; }
}