/* =========================================================================
   BRIGHT SMILE DENTAL STUDIO — DESIGN SYSTEM
   Mobile-first. Token-driven. Minimal JS dependency.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Color tokens */
  --color-bg:            #FBF9F5;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F3EFE6;
  --color-ink:           #1B2523;
  --color-ink-soft:      #4A5652;
  --color-muted:         #7A8783;
  --color-border:        #E4DFD3;

  --color-primary:       #0F4C46;   /* deep teal — trust / clinical calm */
  --color-primary-dark:  #0A3733;
  --color-primary-light: #E5EFEC;
  --color-accent:        #C98A4B;   /* warm terracotta gold — human warmth */
  --color-accent-dark:   #A8703A;
  --color-accent-light:  #F6E9D8;

  --color-success:       #2E7D5B;
  --color-star:          #E3A234;
  --color-whatsapp:      #25A162;
  --color-whatsapp-dark: #1C8250;

  --color-focus:         #1C6EDB;

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   1.6rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.1rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15,30,27,0.08);
  --shadow-md: 0 8px 24px rgba(15,30,27,0.10);
  --shadow-lg: 0 20px 48px rgba(15,30,27,0.14);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 780px;
  --header-h: 64px;
  --bottom-bar-h: 62px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;
}

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

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
svg{ display:block; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}
h1{ font-size: var(--fs-3xl); }
h2{ font-size: var(--fs-2xl); }
h3{ font-size: var(--fs-lg); }
h4{ font-size: var(--fs-md); }
p{ margin: 0 0 var(--sp-4); color: var(--color-ink-soft); }
a{ color: var(--color-primary); text-decoration-thickness: 1.5px; }
ul{ margin:0; padding:0; }
li{ list-style:none; }
button{ font-family: inherit; }

:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--color-primary); color:#fff;
  padding: var(--sp-2) var(--sp-4); z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------------------
   3. LAYOUT HELPERS
   --------------------------------------------------------------------- */
.container{
  width:100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container-narrow{ max-width: var(--container-narrow); }
.section{ padding: var(--sp-9) 0; }
.section-tight{ padding: var(--sp-7) 0; }
.section-alt{ background: var(--color-surface-alt); }
.section-primary{ background: var(--color-primary); color:#fff; }
.section-primary h2, .section-primary h3{ color:#fff; }
.section-primary p{ color: rgba(255,255,255,0.85); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing:.08em;
  font-weight: 700; color: var(--color-accent-dark);
  margin-bottom: var(--sp-3);
}
.section-head{ max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center{ margin-inline:auto; text-align:center; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0;
}

.grid{ display:grid; gap: var(--sp-6); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
@media (min-width: 640px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 900px){
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

/* ---------------------------------------------------------------------
   4. DEMO BANNER
   --------------------------------------------------------------------- */
.demo-banner{
  background: var(--color-accent-dark);
  color:#fff;
  font-size: var(--fs-xs);
  text-align:center;
  padding: var(--sp-2) var(--sp-4);
  line-height:1.4;
}
.demo-banner strong{ text-transform:uppercase; letter-spacing:.04em; }
.demo-banner a{ color:#fff; text-decoration:underline; }

/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size: var(--fs-sm);
  padding: 0.85em 1.4em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor:pointer;
  min-height: 48px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  text-decoration:none;
  line-height:1.2;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.btn-primary:hover{ background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-whatsapp{ background: var(--color-whatsapp); color:#fff; border-color: var(--color-whatsapp); }
.btn-whatsapp:hover{ background: var(--color-whatsapp-dark); border-color: var(--color-whatsapp-dark); }
.btn-outline{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary-light); }
.btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover{ background: rgba(255,255,255,0.12); }
.btn-accent{ background: var(--color-accent); color:#fff; border-color: var(--color-accent); }
.btn-accent:hover{ background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn-sm{ padding: 0.6em 1.1em; font-size: var(--fs-xs); min-height:40px; }
.btn-block{ width:100%; }
.btn .icon{ width:1.15em; height:1.15em; flex-shrink:0; }

.cta-row{ display:flex; flex-wrap:wrap; gap: var(--sp-3); }
.cta-row.center{ justify-content:center; }

/* ---------------------------------------------------------------------
   6. HEADER / NAVIGATION
   --------------------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(251,249,245,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--header-h);
  gap: var(--sp-3);
}
.brand{ display:flex; align-items:center; gap:.6em; text-decoration:none; color:var(--color-primary-dark); flex-shrink:0; }
.brand-mark{ width:36px; height:36px; border-radius:10px; flex-shrink:0; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-md); line-height:1.1; }
.brand-name small{ display:block; font-family: var(--font-body); font-weight:500; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color: var(--color-muted); }

.nav-primary{ display:none; }
.nav-primary ul{ display:flex; gap: var(--sp-5); align-items:center; }
.nav-primary a{ color: var(--color-ink); font-weight:600; font-size: var(--fs-sm); text-decoration:none; padding: .3em 0; border-bottom: 2px solid transparent; }
.nav-primary a:hover, .nav-primary a[aria-current="page"]{ border-bottom-color: var(--color-accent); color: var(--color-primary-dark); }

.header-actions{ display:flex; align-items:center; gap: var(--sp-2); }
.header-call-btn{ display:flex; }
.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: var(--radius-sm);
  background: var(--color-primary-light); border:none; cursor:pointer;
}
.menu-toggle svg{ width:22px; height:22px; color: var(--color-primary-dark); }

.mobile-nav{
  display:none; position: fixed; inset:0; top: var(--header-h);
  background: var(--color-bg); z-index:480; overflow-y:auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-9);
}
.mobile-nav.is-open{ display:block; }
.mobile-nav ul{ display:flex; flex-direction:column; gap: var(--sp-1); }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-4) var(--sp-2); font-size: var(--fs-md); font-weight:600;
  color: var(--color-ink); text-decoration:none; border-bottom:1px solid var(--color-border);
  min-height:48px;
}
.mobile-nav .mobile-nav-cta{ margin-top: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-3); }

body.nav-open{ overflow:hidden; }

@media (min-width: 960px){
  .nav-primary{ display:block; }
  .menu-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ---------------------------------------------------------------------
   7. STICKY MOBILE ACTION BAR
   --------------------------------------------------------------------- */
.sticky-action-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:490;
  display:flex; height: var(--bottom-bar-h);
  background: var(--color-surface);
  border-top:1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(15,30,27,0.10);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sticky-action-bar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; font-size: var(--fs-xs); font-weight:700;
  color: var(--color-ink); border-right:1px solid var(--color-border);
}
.sticky-action-bar a:last-child{ border-right:none; }
.sticky-action-bar a.bar-call{ background: var(--color-primary); color:#fff; }
.sticky-action-bar a.bar-whatsapp{ background: var(--color-whatsapp); color:#fff; }
.sticky-action-bar svg{ width:20px; height:20px; }

@media (min-width: 960px){
  .sticky-action-bar{ display:none; }
}
.has-sticky-bar{ padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0)); }
@media (min-width: 960px){ .has-sticky-bar{ padding-bottom:0; } }

/* ---------------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------------- */
.hero{ padding: var(--sp-7) 0 var(--sp-8); background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%); }
.hero-inner{ display:grid; gap: var(--sp-7); align-items:center; }
.hero-copy h1{ font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.hero-copy p.lead{ font-size: var(--fs-md); max-width: 46ch; }
.hero-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.hero-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
.hero-badge{
  position:absolute; left: var(--sp-4); bottom: var(--sp-4);
  background: rgba(255,255,255,0.95); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-md);
  display:flex; align-items:center; gap: var(--sp-3); max-width: 88%;
}
.hero-badge .stars{ color: var(--color-star); font-size: var(--fs-md); letter-spacing:2px; }
.hero-badge .rating-text{ font-size: var(--fs-xs); color: var(--color-ink-soft); }
.hero-quicklinks{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-sm); }
.hero-quicklinks .tag{
  display:inline-flex; align-items:center; gap:.4em; background:#fff; border:1px solid var(--color-border);
  padding: .45em .9em; border-radius: var(--radius-pill); font-weight:600; color: var(--color-ink-soft);
}
@media (min-width: 900px){
  .hero{ padding: var(--sp-9) 0 var(--sp-10); }
  .hero-inner{ grid-template-columns: 1.05fr 1fr; }
  .hero-copy h1{ font-size: var(--fs-4xl); }
}

/* ---------------------------------------------------------------------
   9. TRUST STRIP
   --------------------------------------------------------------------- */
.trust-strip{ background: var(--color-primary-dark); color:#fff; padding: var(--sp-5) 0; }
.trust-strip .container{
  display:flex; flex-wrap:wrap; gap: var(--sp-6); justify-content:space-between; align-items:center;
}
.trust-item{ display:flex; align-items:center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight:600; }
.trust-item svg{ width:20px; height:20px; color: var(--color-accent); flex-shrink:0; }
.trust-item .stars{ color: var(--color-star); letter-spacing:1px; }
.trust-item small{ display:block; font-weight:400; color: rgba(255,255,255,0.7); font-size:.7rem; }

/* ---------------------------------------------------------------------
   10. PROBLEM PATHWAY CARDS
   --------------------------------------------------------------------- */
.problem-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
@media (min-width:640px){ .problem-grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width:960px){ .problem-grid{ grid-template-columns: repeat(4,1fr); } }
.problem-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--sp-5); text-decoration:none; display:flex; flex-direction:column; gap: var(--sp-3);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  min-height: 100%;
}
.problem-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.problem-card .emoji{ font-size:1.8rem; }
.problem-card h3{ font-size: var(--fs-sm); color: var(--color-ink); margin-bottom:0; font-family: var(--font-body); font-weight:700; }
.problem-card span.go{ font-size: var(--fs-xs); font-weight:700; color: var(--color-primary); margin-top:auto; }

/* ---------------------------------------------------------------------
   11. SERVICE / TREATMENT CARDS
   --------------------------------------------------------------------- */
.service-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.service-card h3{ margin-bottom:0; }
.service-card .who-for{ font-size: var(--fs-xs); color: var(--color-accent-dark); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.service-card .benefit{ font-size: var(--fs-sm); color: var(--color-ink-soft); flex-grow:1; }
.service-card .card-ctas{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.treatment-feature{
  background: var(--color-surface); border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
}
.treatment-feature .tf-body{ padding: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-3); flex-grow:1; }
.treatment-feature .tf-media{ aspect-ratio: 16/10; overflow:hidden; background: var(--color-surface-alt); }
.treatment-feature .tf-media img{ width:100%; height:100%; object-fit:cover; }
.treatment-feature dl{ display:grid; gap: var(--sp-2); font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.treatment-feature dt{ font-weight:700; color: var(--color-primary-dark); }
.treatment-feature dd{ margin:0 0 var(--sp-2); color: var(--color-ink-soft); }

/* ---------------------------------------------------------------------
   12. WHY US / FEATURE LIST
   --------------------------------------------------------------------- */
.feature-grid{ display:grid; grid-template-columns:1fr; gap: var(--sp-5); }
@media (min-width:640px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .feature-grid{ grid-template-columns: repeat(3,1fr); } }
.feature-item{ display:flex; gap: var(--sp-4); align-items:flex-start; }
.feature-icon{
  width:48px; height:48px; border-radius: var(--radius-md); background: var(--color-primary-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feature-icon svg{ width:24px; height:24px; color: var(--color-primary); }
.feature-item h3{ font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.feature-item p{ font-size: var(--fs-sm); margin-bottom:0; }

/* ---------------------------------------------------------------------
   13. DENTIST PROFILE
   --------------------------------------------------------------------- */
.dentist-panel{ display:grid; gap: var(--sp-7); align-items:center; }
.dentist-photo{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.dentist-photo img{ width:100%; aspect-ratio: 3/4; object-fit:cover; }
.dentist-credentials{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-5); }
.credential-badge{
  background: var(--color-primary-light); color: var(--color-primary-dark); font-weight:700; font-size: var(--fs-xs);
  padding: .4em .9em; border-radius: var(--radius-pill);
}
@media (min-width: 900px){
  .dentist-panel{ grid-template-columns: 0.85fr 1.15fr; }
}

/* ---------------------------------------------------------------------
   14. PROCESS STEPS
   --------------------------------------------------------------------- */
.steps-grid{ display:grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width:640px){ .steps-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .steps-grid{ grid-template-columns: repeat(4,1fr); } }
.step-card{ position:relative; padding-top: var(--sp-2); }
.step-num{ font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-accent); font-weight:700; display:block; margin-bottom: var(--sp-2); }
.step-card h3{ font-size: var(--fs-md); }
.step-card p{ font-size: var(--fs-sm); margin-bottom:0; }

/* ---------------------------------------------------------------------
   15. GALLERY
   --------------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }
@media (min-width:640px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
.gallery-item{ position:relative; border-radius: var(--radius-md); overflow:hidden; background: var(--color-surface-alt); cursor:pointer; border:none; padding:0; }
.gallery-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition: transform var(--transition-base); }
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(180deg, transparent, rgba(10,30,27,0.75)); color:#fff; font-size: var(--fs-xs); font-weight:600; text-align:left;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:900; background: rgba(10,20,18,0.92);
  display:none; align-items:center; justify-content:center; padding: var(--sp-5);
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width: min(92vw, 1000px); max-height:85vh; border-radius: var(--radius-md); }
.lightbox-close{
  position:absolute; top: var(--sp-4); right: var(--sp-4); width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.15); border:none; color:#fff; font-size:1.4rem; cursor:pointer;
}

/* ---------------------------------------------------------------------
   16. BEFORE / AFTER SLIDER
   --------------------------------------------------------------------- */
.ba-case{ background: var(--color-surface); border-radius: var(--radius-lg); border:1px solid var(--color-border); overflow:hidden; box-shadow: var(--shadow-sm); }
.ba-slider{
  position:relative; aspect-ratio: 4/3; overflow:hidden; touch-action: pan-y; user-select:none;
}
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-slider .ba-after{ clip-path: inset(0 0 0 50%); }
.ba-slider .ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0; transform: translateX(-1px);
  border-left: 3px solid #fff; cursor: ew-resize;
}
.ba-slider .ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; border-radius:50%;
  background:#fff; transform: translate(-50%,-50%); box-shadow: var(--shadow-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C46' stroke-width='2'%3E%3Cpath d='M8 8L4 12L8 16M16 8L20 12L16 16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.ba-labels{ position:absolute; top: var(--sp-3); left: var(--sp-3); right: var(--sp-3); display:flex; justify-content:space-between; pointer-events:none; }
.ba-labels span{ background: rgba(10,30,27,0.65); color:#fff; font-size: var(--fs-xs); font-weight:700; padding:.3em .8em; border-radius: var(--radius-pill); }
.ba-body{ padding: var(--sp-5); }
.ba-body dl{ display:grid; gap:.2em var(--sp-3); grid-template-columns: auto 1fr; font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }
.ba-body dt{ font-weight:700; color: var(--color-primary-dark); }
.ba-body dd{ margin:0; color: var(--color-ink-soft); }
.ba-disclaimer{ font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------
   17. REVIEWS
   --------------------------------------------------------------------- */
.review-summary{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-6); margin-bottom: var(--sp-7); }
.review-score{ text-align:center; }
.review-score .num{ font-family: var(--font-display); font-size: var(--fs-4xl); color: var(--color-primary-dark); line-height:1; }
.review-score .stars{ color: var(--color-star); font-size: var(--fs-lg); letter-spacing:2px; }
.review-score p{ margin: var(--sp-1) 0 0; font-size: var(--fs-xs); }

.review-grid{ display:grid; grid-template-columns:1fr; gap: var(--sp-4); }
@media (min-width:640px){ .review-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .review-grid{ grid-template-columns: repeat(3,1fr); } }
.review-card{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-5); }
.review-card .stars{ color: var(--color-star); letter-spacing:2px; margin-bottom: var(--sp-2); display:block; }
.review-card p{ font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.review-meta{ display:flex; justify-content:space-between; font-size: var(--fs-xs); color: var(--color-muted); font-weight:600; }

.demo-tag{
  display:inline-block; font-size: 0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background: var(--color-accent-light); color: var(--color-accent-dark); padding:.25em .7em; border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}

/* ---------------------------------------------------------------------
   18. LOCATION / MAP
   --------------------------------------------------------------------- */
.location-panel{ display:grid; gap: var(--sp-6); }
@media (min-width: 900px){ .location-panel{ grid-template-columns: 1fr 1fr; align-items:stretch; } }
.map-frame-wrap{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); box-shadow: var(--shadow-sm); min-height:320px; }
.map-frame-wrap iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }
.map-placeholder{
  height:100%; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sp-3); background: var(--color-surface-alt); text-align:center; padding: var(--sp-6);
}
.location-details{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-6); }
.location-details dl{ display:grid; gap: var(--sp-1) var(--sp-3); grid-template-columns: auto 1fr; margin: var(--sp-4) 0; font-size: var(--fs-sm); }
.location-details dt{ font-weight:700; color: var(--color-primary-dark); align-self:start; padding-top:.15em; }
.location-details dd{ margin:0 0 var(--sp-3); color: var(--color-ink-soft); }

.hours-table{ width:100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours-table td{ padding: .35em 0; border-bottom: 1px dashed var(--color-border); }
.hours-table td:last-child{ text-align:right; font-weight:600; }
.hours-table tr:last-child td{ border-bottom:none; }
.hours-today{ color: var(--color-success); font-weight:700; }

/* ---------------------------------------------------------------------
   19. FAQ ACCORDION
   --------------------------------------------------------------------- */
.faq-list{ border-top:1px solid var(--color-border); }
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; font-weight:700; cursor:pointer; list-style:none; font-size: var(--fs-md);
  color: var(--color-primary-dark);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex-shrink:0; width:22px; height:22px; transition: transform var(--transition-base); color: var(--color-accent); }
.faq-item[open] summary .chev{ transform: rotate(180deg); }
.faq-item .faq-answer{ padding: 0 0 var(--sp-5); font-size: var(--fs-sm); max-width: 68ch; }
.faq-item .faq-answer p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------------
   20. EMERGENCY BANNER
   --------------------------------------------------------------------- */
.emergency-band{ background: var(--color-accent-dark); color:#fff; }
.emergency-band .container{ display:flex; flex-wrap:wrap; gap: var(--sp-5); align-items:center; justify-content:space-between; padding: var(--sp-6) 0; }
.emergency-band h2{ color:#fff; margin-bottom: var(--sp-1); font-size: var(--fs-xl); }
.emergency-band p{ color: rgba(255,255,255,0.9); margin-bottom:0; }

/* ---------------------------------------------------------------------
   21. FORM (short appointment request)
   --------------------------------------------------------------------- */
.short-form{ display:grid; gap: var(--sp-4); max-width:520px; }
.form-field{ display:flex; flex-direction:column; gap: var(--sp-1); }
.form-field label{ font-weight:700; font-size: var(--fs-sm); }
.form-field input, .form-field select{
  min-height:48px; padding: 0 var(--sp-4); border-radius: var(--radius-sm); border:1.5px solid var(--color-border);
  font-size: var(--fs-base); background:#fff; font-family:inherit;
}
.form-field input:focus, .form-field select:focus{ border-color: var(--color-primary); }
.form-note{ font-size: var(--fs-xs); color: var(--color-muted); }

/* ---------------------------------------------------------------------
   22. CARDS: PRICING / KNOWLEDGE / TESTIMONIAL GENERIC
   --------------------------------------------------------------------- */
.info-card{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-5); }
.article-card{ display:flex; flex-direction:column; gap: var(--sp-3); text-decoration:none; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; }
.article-card .ac-media{ aspect-ratio: 16/9; background: var(--color-primary-light); display:flex; align-items:center; justify-content:center; }
.article-card .ac-media svg{ width:40px; height:40px; color: var(--color-primary); }
.article-card .ac-body{ padding: 0 var(--sp-5) var(--sp-5); }
.article-card h3{ font-size: var(--fs-md); color: var(--color-ink); margin-bottom: var(--sp-1); }
.article-card p{ font-size: var(--fs-sm); margin-bottom:0; }
.article-cat{ font-size: var(--fs-xs); font-weight:700; color: var(--color-accent-dark); text-transform:uppercase; letter-spacing:.04em; }

/* ---------------------------------------------------------------------
   23. BREADCRUMBS
   --------------------------------------------------------------------- */
.breadcrumbs{ padding: var(--sp-4) 0 0; font-size: var(--fs-xs); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap: .4em; align-items:center; }
.breadcrumbs a{ color: var(--color-muted); text-decoration:none; font-weight:600; }
.breadcrumbs a:hover{ color: var(--color-primary); }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:.4em; color: var(--color-border); }
.breadcrumbs li[aria-current]{ color: var(--color-ink-soft); }

/* ---------------------------------------------------------------------
   24. PAGE HERO (secondary pages)
   --------------------------------------------------------------------- */
.page-hero{ padding: var(--sp-6) 0 var(--sp-7); background: var(--color-primary-light); }
.page-hero h1{ margin-bottom: var(--sp-3); }
.page-hero p.lead{ max-width: 62ch; font-size: var(--fs-md); }

/* ---------------------------------------------------------------------
   25. FOOTER
   --------------------------------------------------------------------- */
.site-footer{ background: var(--color-primary-dark); color: rgba(255,255,255,0.85); padding: var(--sp-9) 0 var(--sp-6); }
.footer-grid{ display:grid; gap: var(--sp-7); grid-template-columns: 1fr; }
@media (min-width:640px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand{ display:flex; align-items:center; gap: var(--sp-2); margin-bottom: var(--sp-3); text-decoration:none; }
.footer-brand .brand-name{ color:#fff; }
.footer-col h3{ color:#fff; font-family: var(--font-body); font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.05em; margin-bottom: var(--sp-3); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-2); }
.footer-col a{ color: rgba(255,255,255,0.8); text-decoration:none; font-size: var(--fs-sm); }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); margin-top: var(--sp-7); padding-top: var(--sp-5); display:flex; flex-wrap:wrap; gap: var(--sp-4); justify-content:space-between; font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
.footer-bottom a{ color: rgba(255,255,255,0.6); }
.social-links{ display:flex; gap: var(--sp-3); }
.social-links a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; }
.social-links svg{ width:18px; height:18px; color:#fff; }
.footer-disclaimer{ font-size: var(--fs-xs); color: rgba(255,255,255,0.55); margin-top: var(--sp-5); max-width: 800px; }

/* ---------------------------------------------------------------------
   26. UTILITIES
   --------------------------------------------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.lazy-img{ background: var(--color-surface-alt); }
.badge-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }