/* ==========================================================================
   MASTER STYLESHEET — Laigo Dental Clinic
   Single source of truth for all visual styling.
   ==========================================================================

   DO NOT define colors, fonts, spacing, shadows, or breakpoints directly in
   any other file. Always reference the CSS custom properties defined here.

   Design System sections:
   01. CSS Custom Properties (Design Tokens)
   02. Typography
   03. Animation Keyframes
   04. Utility Classes
   05. Navbar
   06. CTA Button
   07. Form Styles
   08. Accordion
   09. Card Styles (Unified Pattern)
   10. Section Spacing & Layout
   11. Hero Section
   12. Responsive Breakpoint Utilities
   13. Page-Specific Component Styles
   14. Scroll-Reveal Utilities
   15. Scroll-Down Indicator
   16. Premium Service Cards
   17. FAQ Elevation
   18. Animated Nav Indicator
   19. Polish Utilities
   20. Stats Strip
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. CSS CUSTOM PROPERTIES — Design Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ===== COLOR PALETTE ===== */

  /* Primary Purple — the brand accent */
  --color-primary:          #7C3AED;
  --color-primary-hover:    #6D28D9;
  --color-primary-active:   #5B21B6;
  --color-primary-dark:     #4C1D95;

  /* Purple Tints — lighter variants for backgrounds, hover states */
  --color-primary-50:       #F5F3FF;
  --color-primary-100:      #EDE9FE;
  --color-primary-200:      #DDD6FE;
  --color-primary-300:      #C4B5FD;
  --color-primary-400:      #A78BFA;

  /* Purple Shades — deeper variants for text, active states */
  --color-primary-600:      #7C3AED;
  --color-primary-700:      #6D28D9;
  --color-primary-800:      #5B21B6;
  --color-primary-900:      #4C1D95;
  --color-primary-950:      #3B0764;

  /* Warm Gold Accent — CTA contrast against purple */
  --color-accent-gold:       #D4AF37;
  --color-accent-gold-light: #F5E6B8;
  --color-accent-gold-dark:  #B8960F;

  /* Neutrals — White / Off-white */
  --color-white:            #FFFFFF;
  --color-off-white:        #FAFAFA;
  --color-purple-tint:      #F9F7FF;
  --color-surface:          #F9FAFB;

  /* Neutrals — Grays (for text, borders, muted) */
  --color-gray-50:          #F9FAFB;
  --color-gray-100:         #F3F4F6;
  --color-gray-200:         #E5E7EB;
  --color-gray-300:         #D1D5DB;
  --color-gray-400:         #9CA3AF;
  --color-gray-500:         #6B7280;
  --color-gray-600:         #4B5563;
  --color-gray-700:         #374151;
  --color-gray-800:         #1F2937;
  --color-gray-900:         #111827;

  /* Semantic assignments */
  --color-text-heading:     var(--color-gray-900);
  --color-text-body:        var(--color-gray-600);
  --color-text-muted:       var(--color-gray-400);
  --color-text-inverse:     var(--color-white);
  --color-border:           var(--color-gray-200);
  --color-border-light:     var(--color-gray-100);
  --color-border-focus:     var(--color-primary-300);

  /* Backgrounds */
  --color-bg-page:          var(--color-white);
  --color-bg-section:       var(--color-gray-50);
  --color-bg-primary-soft:  var(--color-primary-50);
  --color-bg-purple-tint:   var(--color-purple-tint);

  /* ===== TYPOGRAPHY ===== */

  /* Type scale ratio */
  --text-scale-ratio:       1.25;

  /* Font families — Inter for body, Playfair Display for headings */
  --font-body:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                            'Helvetica Neue', Arial, sans-serif;
  --font-heading:           'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-display:           'Playfair Display', 'Georgia', 'Times New Roman', serif;

  /* Font sizes — base 16px, modular scale */
  --text-xs:                0.75rem;    /* 12px */
  --text-sm:                0.875rem;   /* 14px */
  --text-base:              1rem;       /* 16px */
  --text-lg:                1.125rem;   /* 18px */
  --text-xl:                1.25rem;    /* 20px */
  --text-2xl:               1.5rem;     /* 24px */
  --text-3xl:               1.875rem;   /* 30px */
  --text-4xl:               2.25rem;    /* 36px */
  --text-5xl:               3rem;       /* 48px */
  --text-6xl:               3.75rem;    /* 60px */

  /* Font weights */
  --font-light:             300;
  --font-normal:            400;
  --font-medium:            500;
  --font-semibold:          600;
  --font-bold:              700;
  --font-black:             900;

  /* Line heights */
  --leading-tight:          1.15;
  --leading-snug:           1.25;
  --leading-normal:         1.7;
  --leading-relaxed:        1.75;

  /* Letter spacing */
  --tracking-tight:         -0.02em;
  --tracking-normal:        0;
  --tracking-wide:          0.025em;
  --tracking-wider:         0.05em;

  /* ===== SPACING SCALE — 4px base unit ===== */

  --space-1:                0.25rem;    /* 4px  */
  --space-2:                0.5rem;     /* 8px  */
  --space-3:                0.75rem;    /* 12px */
  --space-4:                1rem;       /* 16px */
  --space-5:                1.25rem;    /* 20px */
  --space-6:                1.5rem;     /* 24px */
  --space-8:                2rem;       /* 32px */
  --space-10:               2.5rem;     /* 40px */
  --space-12:               3rem;       /* 48px */
  --space-14:               3.5rem;     /* 56px */
  --space-16:               4rem;       /* 64px */
  --space-20:               5rem;       /* 80px */
  --space-24:               6rem;       /* 96px */
  --space-32:               8rem;       /* 128px */

  /* Section vertical padding */
  --section-padding-y:      var(--space-24);
  --section-padding-x:      var(--space-6);

  /* ===== BORDER RADIUS ===== */

  --radius-sm:              0.25rem;    /* 4px  */
  --radius-md:              0.5rem;     /* 8px  */
  --radius-lg:              0.75rem;    /* 12px */
  --radius-xl:              1rem;       /* 16px */
  --radius-pill:            9999px;

  /* ===== SHADOWS ===== */

  --shadow-sm:              0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:              0 4px 6px -1px rgba(0, 0, 0, 0.06),
                            0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:              0 10px 15px -3px rgba(0, 0, 0, 0.06),
                            0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:              0 20px 25px -5px rgba(0, 0, 0, 0.08),
                            0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl:             0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Theme-specific shadows */
  --shadow-primary-glow:    0 0 20px rgba(124, 58, 237, 0.3);
  --shadow-primary-glow-lg: 0 0 40px rgba(124, 58, 237, 0.25);
  --shadow-card-hover:      0 10px 25px -5px rgba(0, 0, 0, 0.1),
                            0 4px 10px -6px rgba(0, 0, 0, 0.05);

  /* ===== TRANSITIONS ===== */

  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;
  --transition-slow:        400ms ease;

  /* ===== RESPONSIVE BREAKPOINTS (mobile-first) ===== */

  --bp-sm:                  640px;
  --bp-md:                  768px;
  --bp-lg:                  1024px;
  --bp-xl:                  1280px;

  /* ===== LAYOUT ===== */

  --container-max:          1200px;
  --container-padding:      var(--space-4);
  --navbar-height:          4.5rem;

  /* ===== Z-INDEX SCALE ===== */

  --z-base:                 0;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-navbar:               500;
  --z-overlay:              800;
  --z-modal:                1000;
  --z-toast:                1100;
}


/* --------------------------------------------------------------------------
   02. TYPOGRAPHY — Base & Heading Styles
   -------------------------------------------------------------------------- */

html {
  font-size: 100%; /* 16px base; respect user preferences */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
}

/* Heading hierarchy */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-heading);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-heading);
}

/* Paragraphs */
p {
  margin-bottom: var(--space-4);
  color: var(--color-text-body);
}

p:last-child {
  margin-bottom: 0;
}

/* Small / caption text */
.text-sm,
.text-caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Links (base) */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

/* Inline emphasis */
strong, b {
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
}

/* Responsive heading scaling */
@media (min-width: 768px) {
  h1, .h1 { font-size: var(--text-5xl); }
  h2, .h2 { font-size: var(--text-4xl); }
  h3, .h3 { font-size: var(--text-3xl); }
}

@media (min-width: 1024px) {
  h1, .h1 { font-size: var(--text-6xl); }
  h2, .h2 { font-size: var(--text-5xl); }
}


/* --------------------------------------------------------------------------
   03. ANIMATION KEYFRAMES
   -------------------------------------------------------------------------- */

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide up + fade */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Subtle pulse (for CTA buttons) */
@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
  }
}

/* Navbar underline indicator slide */
@keyframes slideIndicator {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ===== RESPECT PREFERS-REDUCED-MOTION ===== */

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

  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   04. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Scroll-triggered animation base — visible when .is-visible is added */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.stagger-children > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay utilities for stagger (uses inline style for nth-child precision) */
.stagger-1  { transition-delay: 0ms; }
.stagger-2  { transition-delay: 100ms; }
.stagger-3  { transition-delay: 200ms; }
.stagger-4  { transition-delay: 300ms; }
.stagger-5  { transition-delay: 400ms; }
.stagger-6  { transition-delay: 500ms; }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Text utilities */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-primary    { color: var(--color-primary); }
.text-heading    { color: var(--color-text-heading); }
.text-body       { color: var(--color-text-body); }
.text-muted      { color: var(--color-text-muted); }
.text-inverse    { color: var(--color-text-inverse); }

/* Font family utilities */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* Font weight utilities */
.font-light      { font-weight: var(--font-light); }
.font-normal     { font-weight: var(--font-normal); }
.font-medium     { font-weight: var(--font-medium); }
.font-semibold   { font-weight: var(--font-semibold); }
.font-bold       { font-weight: var(--font-bold); }
.font-black      { font-weight: var(--font-black); }

/* Background utilities */
.bg-primary       { background-color: var(--color-primary); }
.bg-primary-soft  { background-color: var(--color-bg-primary-soft); }
.bg-white         { background-color: var(--color-white); }
.bg-off-white     { background-color: var(--color-off-white); }
.bg-purple-tint   { background-color: var(--color-bg-purple-tint); }
.bg-surface       { background-color: var(--color-surface); }
.bg-gray-50       { background-color: var(--color-gray-50); }

/* Spacer utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   05. NAVBAR
   -------------------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Shadow appears when scrolled (toggle via JS: .navbar--scrolled) */
.navbar--scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

/* Compact on scroll-down — slightly smaller, subtle shrink */
.navbar--compact {
  height: calc(var(--navbar-height) - 0.75rem);
}

.navbar--compact .navbar__logo {
  font-size: var(--text-lg);
}

.navbar--compact .navbar__logo img {
  height: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  .navbar--compact,
  .navbar--compact .navbar__logo,
  .navbar--compact .navbar__logo img {
    transition: none;
  }
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Logo */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.navbar__logo:hover {
  color: var(--color-primary-hover);
}

.navbar__logo img {
  height: 2.5rem;
  width: auto;
}

/* Nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.navbar__link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.navbar__link--active {
  color: var(--color-primary);
}

/* Animated underline indicator */
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.navbar__link:hover::after,
.navbar__link--active::after {
  transform: scaleX(1);
}

/* Mobile menu toggle (hamburger) */
.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

.navbar__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-heading);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.navbar__toggle--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle--open span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navbar spacing offset for page content */
.navbar-spacer {
  height: var(--navbar-height);
}

/* Responsive: mobile nav — handled in Section 13 (Page-Specific Component Styles) */


/* --------------------------------------------------------------------------
   06. CTA BUTTON
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* Primary CTA */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-primary-glow);
  transform: translateY(-1px) scale(1.02);
}

.btn--primary:active {
  background-color: var(--color-primary-active);
  box-shadow: none;
  transform: translateY(0) scale(0.98);
}

/* Pulse animation on primary CTA for hero emphasis */
.btn--primary-pulse {
  animation: subtlePulse 2.5s ease-in-out infinite;
}

/* Secondary / outline */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.btn--outline:active {
  background-color: var(--color-primary-100);
}

/* White outline (for dark backgrounds / hero) */
.btn--white-outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--white-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Ghost button */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.btn--ghost:hover {
  background-color: var(--color-primary-50);
}

/* Button sizes */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

/* Disabled state */
.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   07. FORM STYLES
   -------------------------------------------------------------------------- */

/* Form group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

/* Label */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-heading);
}

.form-label--required::after {
  content: ' *';
  color: #EF4444;
}

/* Input, Textarea, Select base */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-heading);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* Placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Focus state — purple ring */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  background-color: var(--color-white);
}

/* Hover (idle) */
.form-input:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--color-gray-300);
}

/* Error state */
.form-input--error,
.form-textarea--error,
.form-select--error {
  border-color: #EF4444;
}

.form-input--error:focus,
.form-textarea--error:focus,
.form-select--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Disabled */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Textarea specific */
.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

/* Select custom arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M4.293 5.293a1 1 0 0 1 1.414 0L8 7.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
  padding-right: var(--space-10);
}

/* Checkbox & Radio */
.form-checkbox,
.form-radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Help text */
.form-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--text-xs);
  color: #EF4444;
}

/* Inline form row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 639px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   08. ACCORDION — FAQ & Services
   -------------------------------------------------------------------------- */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-white);
  transition: box-shadow var(--transition-base);
}

.accordion__item:hover {
  border-color: var(--color-primary-200);
}

.accordion__item--open {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-md);
}

/* Trigger (clickable header) */
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  text-align: left;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.accordion__trigger:hover {
  background-color: var(--color-gray-50);
}

.accordion__item--open .accordion__trigger {
  color: var(--color-primary);
  background-color: var(--color-gray-50);
}

/* Chevron icon */
.accordion__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-muted);
  transition:
    transform var(--transition-base),
    color var(--transition-fast);
}

.accordion__item--open .accordion__icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Collapsible content */
.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.accordion__item--open .accordion__content {
  grid-template-rows: 1fr;
}

.accordion__body {
  overflow: hidden;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}

.accordion__item--open .accordion__body {
  padding-bottom: var(--space-5);
}


/* --------------------------------------------------------------------------
   09. CARD STYLES — Unified pattern for service cards, FAQ items, etc.
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

/* Hover lift */
.card--hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-color: var(--color-primary-200);
}

/* Card with subtle shadow by default */
.card--elevated {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card--elevated:hover {
  box-shadow: var(--shadow-xl);
}

/* Left purple accent bar — slides in on hover via ::before */
.card--accent {
  position: relative;
}

.card--accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: var(--color-primary);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transition: width var(--transition-base);
  z-index: 1;
}

.card--accent:hover::before {
  width: 3px;
}

.card--accent.card--accent--always::before {
  width: 3px;
}

/* Card image area */
.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-gray-100);
}

/* Card body */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  flex: 1;
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}

/* Card footer */
.card__footer {
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Icon card (service feature cards) */
.card--icon {
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.card--icon .card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color-primary-50);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
}


/* --------------------------------------------------------------------------
   10. SECTION SPACING & LAYOUT
   -------------------------------------------------------------------------- */

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--lg {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

/* Section with alternate background */
.section--alt {
  background-color: var(--color-bg-section);
}

.section--primary-soft {
  background-color: var(--color-bg-primary-soft);
}

/* Subtle purple-tint alternate section — barely-there background */
.section--purple-tint {
  background-color: var(--color-bg-purple-tint);
}

/* Section header (centered title + subtitle pattern) */
.section__header {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-12);
  text-align: center;
}

.section__header h2 {
  margin-bottom: var(--space-4);
}

.section__header p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* Overline / label above heading */
.section__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Grid layouts for cards */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   11. HERO SECTION
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh; /* Respect mobile address bar */
  padding-top: var(--navbar-height);
  padding-bottom: var(--space-16);
  overflow: hidden;
  background-color: var(--color-primary-900);
}

/* Overlay gradient for depth */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(76, 29, 149, 0.92) 0%,
      rgba(124, 58, 237, 0.85) 50%,
      rgba(109, 40, 217, 0.88) 100%
    );
  z-index: 1;
}

/* Hero background image (set via inline style or class) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional pattern overlay */
.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  background-image:
    radial-gradient(circle at 1px 1px, var(--color-white) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Hero content sits above the overlay */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  color: var(--color-text-inverse);
}

.hero__content h1 {
  color: var(--color-white);
  max-width: 700px;
  margin-bottom: var(--space-6);
}

.hero__content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  max-width: 560px;
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}

/* Hero CTA row */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Hero split (image + text on larger screens) */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hero--split .hero__visual {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}

.hero--split .hero__visual img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1023px) {
  .hero--split .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero--split .hero__visual {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 639px) {
  .hero__content h1 {
    font-size: var(--text-3xl);
  }

  .hero__content p {
    font-size: var(--text-base);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }
}


/* ==========================================================================
   12. RESPONSIVE BREAKPOINT UTILITIES
   ========================================================================== */

/* Mobile-first visibility */
@media (max-width: 639px)  { .hide-sm  { display: none !important; } }
@media (max-width: 767px)  { .hide-md  { display: none !important; } }
@media (max-width: 1023px) { .hide-lg  { display: none !important; } }

@media (min-width: 640px)  { .show-sm  { display: none !important; } }
@media (min-width: 768px)  { .show-md  { display: none !important; } }
@media (min-width: 1024px) { .show-lg  { display: none !important; } }


/* ==========================================================================
   13. PAGE-SPECIFIC COMPONENT STYLES
   All classes used in index.html, referencing ONLY CSS custom properties.
   ========================================================================== */

/* ── Skip Link ─────────────────────────────────────────────────────────── */
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--space-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  z-index: var(--z-modal);
}


/* ── Navbar Components ─────────────────────────────────────────────────── */
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-heading);
  text-decoration: none;
}

.navbar__logo-icon {
  font-size: var(--text-2xl);
}

.navbar__brand-text {
  white-space: nowrap;
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  z-index: calc(var(--z-header) + 1);
}

.navbar__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-heading);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.navbar__links {
  display: flex;
  list-style: none;
  gap: var(--space-lg);
}

.navbar__link {
  position: relative;
  color: var(--color-text-body);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--color-primary);
}

.navbar__cta {
  white-space: nowrap;
}

/* Mobile nav */
@media (max-width: 1023px) {
  .navbar__hamburger {
    display: flex;
  }

  .navbar__menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--navbar-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: var(--z-header);
    overflow-y: auto;
  }

  .navbar__menu.is-open {
    transform: translateX(0);
  }

  .navbar__links {
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }

  .navbar__link {
    font-size: var(--text-lg);
    display: block;
    padding: var(--space-sm) 0;
  }

  .navbar__cta {
    margin-top: var(--space-lg);
    width: 100%;
  }
  /* Backdrop overlay when mobile menu is open */
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-navbar) - 1);
    opacity: 1;
    transition: opacity var(--transition-base);
  }
  /* Prevent backdrop-filter on navbar from breaking menu panel fixed positioning */
  body.menu-open .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* ── Hero Content ──────────────────────────────────────────────────────── */
.hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700), var(--color-primary-600));
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(60, 7, 100, 0.55);
  z-index: 1;
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero__subheadline {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: var(--color-primary-200);
  max-width: 650px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}


/* ── Section Headings ──────────────────────────────────────────────────── */
.section__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: 700;
  color: var(--color-text-heading);
  text-align: center;
  margin-bottom: var(--space-md);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}


/* ── About Section ─────────────────────────────────────────────────────── */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  align-items: start;
}

.about__philosophy {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-body);
}

.about__philosophy p + p {
  margin-top: var(--space-md);
}

.about__subheading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-heading);
  margin-bottom: var(--space-md);
}

.about__dentist-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.about__dentist-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.about__dentist-photo {
  aspect-ratio: 1;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__dentist-photo-icon {
  font-size: 5rem;
  opacity: 0.5;
}

.about__dentist-info {
  padding: var(--space-xl);
}

.about__dentist-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

.about__dentist-credentials {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.about__dentist-bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

@media (max-width: 767px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}


/* ── Contact Section ───────────────────────────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-3xl);
}

.contact__info {
  padding: var(--space-2xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact__info-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-heading);
  margin-bottom: var(--space-lg);
}

.contact__info p {
  margin-bottom: var(--space-md);
  color: var(--color-text-body);
}

.contact__info-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.contact__info-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.contact__info-address {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-primary-200);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 767px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
}


/* ── Location Section ──────────────────────────────────────────────────── */
.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.location__map {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-100);
}

.location__map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.location__map-icon {
  font-size: 3rem;
}

.location__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.location__address {
  font-style: normal;
  font-size: var(--text-lg);
  color: var(--color-text-body);
  line-height: 1.8;
}

.location__address strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-heading);
  margin-bottom: var(--space-sm);
}

.location__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.location__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.location__contact-link:hover {
  color: var(--color-primary-hover);
}

.location__directions-btn {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .location__grid {
    grid-template-columns: 1fr;
  }

  .location__map {
    aspect-ratio: 16/9;
  }
}


/* ── Gallery Grid ──────────────────────────────────────────────────────── */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1023px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .gallery__grid {
    grid-template-columns: 1fr;
  }
}


/* ── Inquiry / Chat ────────────────────────────────────────────────────── */
.inquiry {
  background: var(--color-off-white);
}

.inquiry__chat {
  max-width: 700px;
  margin: 0 auto var(--space-lg);
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  scroll-behavior: smooth;
}

.chat-bubble {
  max-width: 80%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  animation: fadeIn var(--transition-fast) ease both;
}

.chat-bubble--bot {
  align-self: flex-start;
  background: var(--color-white);
  color: var(--color-text-body);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

.chat-bubble--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-bottom-right-radius: var(--radius-sm);
}

.chat-bubble__text {
  margin: 0;
}

.chat-bubble--user .chat-bubble__text {
  color: var(--color-text-inverse);
}

.inquiry__form {
  max-width: 700px;
  margin: 0 auto;
}

.inquiry__input-group {
  display: flex;
  gap: var(--space-sm);
}

.inquiry__input {
  flex: 1;
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
}

.inquiry__submit {
  border-radius: var(--radius-pill);
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ── Modal Overlay ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
  backdrop-filter: blur(4px);
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp var(--transition-base) ease both;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0;
}

.modal__close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-xs);
  line-height: 1;
  transition: color var(--transition-fast);
}

.modal__close:hover {
  color: var(--color-text-heading);
}

.modal__body {
  padding: var(--space-xl);
}


/* ── Lightbox ──────────────────────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-modal) + 1);
  padding: var(--space-2xl);
}

.lightbox-overlay.is-open {
  display: flex;
}

.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: rgba(255,255,255,0.15);
  border: none;
  color: var(--color-white);
  font-size: var(--text-3xl);
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  z-index: 1;
}

.lightbox__close:hover {
  background: rgba(255,255,255,0.25);
}

.lightbox__content {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lightbox__content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}


/* ── Footer ────────────────────────────────────────────────────────────── */
.footer {
  background: var(--color-gray-900);
  color: var(--color-gray-300);
  padding: var(--space-3xl) 0;
  text-align: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-white);
}

.footer__logo {
  font-size: var(--text-2xl);
}

.footer__copy {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

.footer__location {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}


/* ── Form Feedback ─────────────────────────────────────────────────────── */
.form-feedback {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: none;
}

.form-feedback:not(:empty) {
  display: block;
}

.form-feedback--success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.form-feedback--error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}


/* ── Appointment Form ──────────────────────────────────────────────────── */
.appointment__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


/* ── FAQs Loading ──────────────────────────────────────────────────────── */
.faqs__loading {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-2xl);
  font-size: var(--text-lg);
}


/* ── Button Variants ───────────────────────────────────────────────────── */
.btn--pill {
  border-radius: var(--radius-pill);
}

.btn--full {
  width: 100%;
  justify-content: center;
}


/* ── Gallery Placeholder Cards ─────────────────────────────────────────── */
.gallery__item {
  aspect-ratio: 4/3;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.gallery__item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.gallery__placeholder-icon {
  font-size: 3rem;
  opacity: 0.4;
}


/* ── Generic open-modal-btn ────────────────────────────────────────────── */
.open-modal-btn {
  cursor: pointer;
}


/* ── Accordion Content Classes ─────────────────────────────────────────── */
.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text-heading);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.accordion__header:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.accordion__header[aria-expanded="true"] {
  border-color: var(--color-primary-300);
  background: var(--color-gray-50);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.accordion__header-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
}

.accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition-base);
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base);
}

.accordion__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.accordion__icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.accordion__header[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__header[aria-expanded="true"] .accordion__icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.accordion__panel {
  background: var(--color-white);
  border: 1px solid var(--color-primary-300);
  border-top: none;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}

.accordion__panel[hidden] {
  display: none;
}

.accordion__panel-text {
  color: var(--color-text-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}

.accordion__sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.accordion__subitem {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary-300);
}

.accordion__subitem-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-heading);
}

.accordion__subitem-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}


/* ── Active Nav Link ──────────────────────────────────────────────────── */
.navbar__link--active {
  color: var(--color-primary);
}

.navbar__link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}


/* ── Hamburger Open State ─────────────────────────────────────────────── */
.navbar__hamburger--open .navbar__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger--open .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger--open .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Gallery Placeholder Details ──────────────────────────────────────── */
.gallery__placeholder-text {
  font-weight: 600;
  font-size: var(--text-sm);
}

.gallery__placeholder-badge {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-gray-200);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
}


/* ── Lightbox Placeholder ─────────────────────────────────────────────── */
.lightbox__image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-3xl);
  background: var(--color-gray-800);
  border-radius: var(--radius-lg);
  min-width: 300px;
  min-height: 200px;
}

.lightbox__placeholder-icon {
  font-size: 5rem;
  opacity: 0.6;
}

.lightbox__placeholder-text {
  font-size: var(--text-xl);
  color: var(--color-white);
  font-weight: 600;
}

.lightbox__placeholder-badge {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  background: rgba(255,255,255,0.1);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
}

.lightbox__caption {
  color: var(--color-gray-300);
  text-align: center;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}


/* ── Chat Extras ──────────────────────────────────────────────────────── */
.chat-bubble--actions {
  background: transparent;
  border: none;
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
}

.chat-action-btn {
  font-size: var(--text-sm);
}

.chat-bubble--typing {
  background: var(--color-gray-100);
  padding: var(--space-sm) var(--space-lg);
  min-width: 60px;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--color-primary-400);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}


/* ==========================================================================
   14. SCROLL-REVEAL UTILITIES
   Extends animate-on-scroll. Works with existing .stagger-1–.stagger-6
   and .stagger-children (section 04). All respect prefers-reduced-motion.
   ========================================================================== */

/* Base reveal — hidden by default, revealed via .is-visible (JS scroll observer) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants — combine with .reveal for custom directions */
.reveal-left {
  transform: translateX(-30px);
}

.reveal-left.is-visible {
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(30px);
}

.reveal-right.is-visible {
  transform: translateX(0);
}

/* Subtle zoom-in variant */
.reveal-scale {
  transform: scale(0.95);
}

.reveal-scale.is-visible {
  transform: scale(1);
}

/* Stagger-children auto-delay for .reveal children (1–6) */
.stagger-children > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .reveal:nth-child(2) { transition-delay: 100ms; }
.stagger-children > .reveal:nth-child(3) { transition-delay: 200ms; }
.stagger-children > .reveal:nth-child(4) { transition-delay: 300ms; }
.stagger-children > .reveal:nth-child(5) { transition-delay: 400ms; }
.stagger-children > .reveal:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-children > .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   15. SCROLL-DOWN INDICATOR
   Bouncing chevron at the bottom of the hero section.
   ========================================================================== */

.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.scroll-indicator:hover {
  opacity: 1;
}

/* Chevron arrow — built with CSS borders */
.scroll-indicator__arrow {
  display: block;
  width: 24px;
  height: 24px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator__arrow:nth-child(2) {
  animation-delay: 0.15s;
  margin-top: -8px;
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  40% {
    transform: rotate(45deg) translateY(8px);
  }
  60% {
    transform: rotate(45deg) translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator__arrow {
    animation: none;
  }
}


/* ==========================================================================
   16. PREMIUM SERVICE CARDS
   Replaces flat accordion look with elevated, interactive cards.
   ========================================================================== */

.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

/* Hover lift effect */
.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Left accent bar — slides in from 0 width on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.service-card:hover::before {
  width: 3px;
}

/* Open state — accent bar always visible */
.service-card.is-open::before {
  width: 3px;
}

/* Icon circle — refined: 56px, subtle bg, thin purple border */
.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-gray-50);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary-200);
  font-size: var(--text-xl);
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.service-card:hover .service-card__icon {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-400);
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

/* Header row — clickable, icon + title + chevron */
.service-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  text-align: left;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.service-card__header:hover {
  background-color: var(--color-gray-50);
}

.service-card.is-open .service-card__header {
  color: var(--color-primary);
}

/* Header text */
.service-card__title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: inherit;
}

.service-card__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition:
    transform var(--transition-base),
    color var(--transition-fast);
}

.service-card.is-open .service-card__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Expandable body — max-height transition for smooth open/close */
.service-card__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--transition-slow),
    opacity var(--transition-slow),
    padding var(--transition-slow);
}

.service-card.is-open .service-card__body {
  max-height: 2000px;
  opacity: 1;
  padding: 0 var(--space-6) var(--space-5);
}

.service-card__body-inner {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}

/* Sub-service items — nested, staggered, with left purple border */
.service-card__sub {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.service-card__sub-item {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-50);
  border-left: 3px solid var(--color-primary-300);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text-body);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.service-card.is-open .service-card__sub-item {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger child sub-items on open */
.service-card.is-open .service-card__sub-item:nth-child(1) { transition-delay: 0ms; }
.service-card.is-open .service-card__sub-item:nth-child(2) { transition-delay: 75ms; }
.service-card.is-open .service-card__sub-item:nth-child(3) { transition-delay: 150ms; }
.service-card.is-open .service-card__sub-item:nth-child(4) { transition-delay: 225ms; }
.service-card.is-open .service-card__sub-item:nth-child(5) { transition-delay: 300ms; }
.service-card.is-open .service-card__sub-item:nth-child(6) { transition-delay: 375ms; }

.sub-item__name {
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
}

.sub-item__desc {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Mobile — full-width, slightly reduced hover effects */
@media (max-width: 639px) {
  .service-card:hover {
    transform: translateY(-2px);
  }

  .service-card__header {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .service-card__icon {
    width: 48px;
    height: 48px;
    font-size: var(--text-lg);
  }

  .service-card__title {
    font-size: var(--text-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover {
    transform: none;
  }

  .service-card::before {
    transition: none;
  }

  .service-card__sub-item {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   17. FAQ ELEVATION — Extends .accordion & .accordion__item (section 08)
   Smooth expand/collapse with max-height + opacity, purple accent on open,
   and staggered entrance when the FAQ section scrolls into view.
   ========================================================================== */

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base);
}

.faq-item:hover {
  border-color: var(--color-primary-200);
}

/* Open state — left accent bar only, clean white background */
.faq-item.is-open {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-md);
  background-color: var(--color-white);
}

.faq-item.is-open::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-primary);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.faq-item {
  position: relative;
}

/* FAQ header / trigger */
.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  text-align: left;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.faq-item__trigger:hover {
  background-color: var(--color-gray-50);
}

.faq-item.is-open .faq-item__trigger {
  color: var(--color-primary);
}

/* Chevron icon — rotates 180° on open */
.faq-item__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition:
    transform var(--transition-base),
    color var(--transition-fast);
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Category pill tag */
.faq-item__category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-gray-100);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}

.faq-item__category:empty {
  display: none;
}

/* Expandable body — smooth max-height + opacity (not snap) */
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  transition:
    max-height var(--transition-slow),
    opacity var(--transition-slow),
    padding var(--transition-slow);
}

.faq-item.is-open .faq-item__body {
  max-height: 2000px;
  opacity: 1;
  padding: 0 var(--space-6) var(--space-5);
}

/* Stagger entrance when section comes into view */
.faq-stagger .faq-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.faq-stagger .faq-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-stagger .faq-item:nth-child(1) { transition-delay: 0ms; }
.faq-stagger .faq-item:nth-child(2) { transition-delay: 100ms; }
.faq-stagger .faq-item:nth-child(3) { transition-delay: 200ms; }
.faq-stagger .faq-item:nth-child(4) { transition-delay: 300ms; }
.faq-stagger .faq-item:nth-child(5) { transition-delay: 400ms; }
.faq-stagger .faq-item:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .faq-item__body {
    transition: none;
  }

  .faq-stagger .faq-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   18. ANIMATED NAV INDICATOR
   Sliding underline/pill that transitions between active nav sections.
   ========================================================================== */

.nav-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition:
    left var(--transition-base),
    width var(--transition-base);
}

/* Alternative: pill-style indicator for nav items */
.nav-indicator--pill {
  height: 100%;
  background-color: var(--color-primary-100);
  border-radius: var(--radius-md);
  z-index: 0;
  transition:
    left var(--transition-base),
    width var(--transition-base),
    opacity var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .nav-indicator,
  .nav-indicator--pill {
    transition: none;
  }
}


/* ==========================================================================
   19. POLISH UTILITIES
   Form focus animations, hover-lift, section dividers, success/glow
   keyframes. All respect prefers-reduced-motion.
   ========================================================================== */

/* ── Form input focus ring animation (smooth expansion, not abrupt) ────── */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-400);
  animation: focusRingExpand var(--transition-slow) ease-out forwards;
}

@keyframes focusRingExpand {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  }
}

/* ── Generic hover-lift utility ────────────────────────────────────────── */
.hover-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover {
    transform: none;
  }
}

/* ── Section divider (purple gradient) — use between MAJOR sections only ── */
.section-divider {
  width: 100%;
  height: 1px;
  border: none;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary-300) 20%,
    var(--color-primary) 50%,
    var(--color-primary-300) 80%,
    transparent 100%
  );
}

.section-divider--thick {
  height: 3px;
}

.section-divider--subtle {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary-200) 30%,
    var(--color-primary-200) 70%,
    transparent 100%
  );
  opacity: 0.5;
}

/* ── Success animation: checkmark pop (form submission feedback) ───────── */
@keyframes checkmarkPop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.checkmark-animate {
  animation: checkmarkPop var(--transition-slow) ease-out both;
}

/* ── Subtle glow for CTA emphasis (enhances existing subtlePulse) ──────── */
@keyframes subtleGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(124, 58, 237, 0.4),
      0 0 20px rgba(124, 58, 237, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(124, 58, 237, 0),
      0 0 30px rgba(124, 58, 237, 0.2);
  }
}

.glow-pulse {
  animation: subtleGlow 2.5s ease-in-out infinite;
}

/* ── Reduced-motion fallback for all polish animations ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    animation: none;
  }

  .checkmark-animate {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }

  .glow-pulse {
    animation: none;
  }
}


/* ── Hero Sparkle Delight ─────────────────────────────────────────────── */
.hero__sparkle {
  display: inline-block;
  font-size: 0.6em;
  vertical-align: super;
  animation: sparklePop 2.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes sparklePop {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sparkle {
    animation: none;
    opacity: 1;
  }
}


/* ── Animated Form Feedback ───────────────────────────────────────────── */
.form-feedback--animated {
  animation: slideUp 0.4s ease both, checkmarkPop 0.5s ease 0.1s;
}

@keyframes checkmarkPop {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .form-feedback--animated {
    animation: none;
  }
}


/* ==========================================================================
   20. STATS STRIP
   Full-width stats strip with large numbers + labels.
   Numbers animate on scroll into view (counter-up via JS + CSS).
   ========================================================================== */

.stats-strip {
  background-color: var(--color-bg-purple-tint);
  padding: var(--space-12) 0;
}

.stats-strip__inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-10);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  min-width: 160px;
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.stat-item__number--animating {
  animation: countUpFade var(--transition-slow) ease-out both;
}

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

.stat-item__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.stat-item__suffix {
  font-size: 0.6em;
  font-weight: var(--font-semibold);
  color: var(--color-primary-400);
}

@media (max-width: 767px) {
  .stats-strip__inner {
    gap: var(--space-6);
  }

  .stat-item {
    min-width: 120px;
  }

  .stat-item__number {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 639px) {
  .stats-strip__inner {
    flex-direction: column;
    align-items: center;
  }

  .stat-item {
    min-width: unset;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-item__number--animating {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   21. NAVBAR PHONE — persistent click-to-call in nav
   ========================================================================== */
.navbar__phone {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.navbar__phone:hover {
  color: var(--color-primary);
}
@media (max-width: 1023px) {
  .navbar__phone {
    display: none;
  }
  .navbar__menu.is-open .navbar__phone {
    display: flex;
    margin-bottom: var(--space-md);
    font-size: var(--text-base);
  }
}


/* ==========================================================================
   22. HERO TRUST BAR — star rating + stats line below hero CTAs
   ========================================================================== */
.hero__trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
}
.hero__trust-bar span {
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .hero__trust-bar {
    opacity: 1;
  }
}


/* ==========================================================================
   23. FAQ POST-CTA — call-to-action after FAQ list
   ========================================================================== */
.faq-post-cta {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-2xl);
  background: var(--color-purple-tint);
  border-radius: var(--radius-lg);
}
.faq-post-cta p {
  font-size: var(--text-lg);
  color: var(--color-text-heading);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}
.faq-post-cta .btn {
  margin: var(--space-xs);
}
.faq-post-cta span {
  display: inline-block;
  margin: 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* ==========================================================================
   24. LOCATION HOURS — clinic schedule in location section
   ========================================================================== */
.location__hours {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.location__hours h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-heading);
  margin-bottom: var(--space-sm);
}
.location__hours p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0;
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   25. MAP CARD — styled location map placeholder with Google Maps link
   ========================================================================== */
.location__map-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.location__map-card {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-base);
  cursor: pointer;
}
.location__map-card:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-md);
}
.location__map-pin {
  font-size: 3rem;
}
.location__map-label {
  font-weight: 600;
  color: var(--color-text-heading);
}
.location__map-hint {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
}


/* ==========================================================================
   End of master.css — Laigo Dental Clinic Design System
   ========================================================================== */