/* style.css — FindADentistBroward.com Design System
   Art direction: Clinical-warm. Dental blue-navy primary, soft sky blue,
   cream/warm-white surfaces. Cabinet Grotesk display, Satoshi body.
   Conveys trust, cleanliness, and accessibility. */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&f[]=satoshi@400,500,700&display=swap');

/* ===== TOKENS ===== */
:root {
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Helvetica Neue', sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.65vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.2vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:20px; --space-8:28px; --space-10:36px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13);

  --transition: 180ms cubic-bezier(0.16,1,0.3,1);

  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1240px;
}

/* ===== LIGHT THEME — Dental Blue + Warm White ===== */
:root, [data-theme="light"] {
  --color-bg:              #f7f9fc;
  --color-surface:         #ffffff;
  --color-surface-2:       #f0f4fb;
  --color-surface-3:       #e4ecf8;
  --color-divider:         #dce6f4;
  --color-border:          #c8d8ee;

  --color-text:            #0d1f3c;
  --color-text-muted:      #4a6080;
  --color-text-faint:      #96aac2;
  --color-text-inverse:    #f7f9fc;

  --color-primary:         #1a56c4;
  --color-primary-hover:   #1444a8;
  --color-primary-active:  #0f338a;
  --color-primary-light:   #dce8fb;

  --color-accent:          #e85d26;
  --color-accent-hover:    #c84d1e;
  --color-accent-light:    #fce8df;

  --color-success:         #1a7a4a;
  --color-success-light:   #d4eedf;

  --color-emergency:       #c0392b;
  --color-emergency-light: #fce4e1;
}

/* ===== DARK THEME ===== */
[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --color-bg:              #090f1e;
  --color-surface:         #0f1a2e;
  --color-surface-2:       #142035;
  --color-surface-3:       #1a283d;
  --color-divider:         #1e3055;
  --color-border:          #28406a;

  --color-text:            #c8d8f0;
  --color-text-muted:      #6a8ab0;
  --color-text-faint:      #304060;
  --color-text-inverse:    #090f1e;

  --color-primary:         #4a8aff;
  --color-primary-hover:   #6aa0ff;
  --color-primary-active:  #88b8ff;
  --color-primary-light:   #142035;

  --color-accent:          #ff7a45;
  --color-accent-hover:    #ff9060;
  --color-accent-light:    #2a1508;

  --color-success:         #3db868;
  --color-success-light:   #0f2818;

  --color-emergency:       #e55;
  --color-emergency-light: #2a0808;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}}

/* ===== LAYOUT ===== */
.container { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:clamp(var(--space-5),4vw,var(--space-12)); }
.container--narrow { max-width:var(--content-narrow); }
.container--default { max-width:var(--content-default); }

/* ===== HEADER ===== */
.site-header {
  position:sticky; top:0; z-index:200;
  background: oklch(from var(--color-bg) l c h / 0.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-divider);
  transition: box-shadow var(--transition);
}
.site-header--scrolled { box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding-block:var(--space-4); }

.site-logo { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; color:var(--color-text); flex-shrink:0; }
.logo-text { font-family:var(--font-display); font-weight:800; font-size:var(--text-base); line-height:1.1; color:var(--color-text); }
.logo-text span { display:block; color:var(--color-primary); font-size:var(--text-xs); font-weight:500; letter-spacing:.06em; text-transform:uppercase; }

.header-nav { display:flex; align-items:center; gap:var(--space-6); }
.header-nav a { font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted); text-decoration:none; }
.header-nav a:hover { color:var(--color-primary); }
.header-nav .btn-emergency { background:var(--color-emergency); color:white; border-radius:var(--radius-md); padding:var(--space-2) var(--space-5); font-weight:700; font-size:var(--text-xs); letter-spacing:.04em; }
.header-nav .btn-emergency:hover { background:var(--color-accent-hover); color:white; }

.header-actions { display:flex; align-items:center; gap:var(--space-3); }
.lang-switch { font-size:var(--text-xs); font-weight:700; padding:var(--space-2) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text-muted); text-decoration:none; letter-spacing:.04em; }
.lang-switch:hover { border-color:var(--color-primary); color:var(--color-primary); }
.theme-toggle { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); color:var(--color-text-muted); border:1.5px solid var(--color-border); }
.theme-toggle:hover { color:var(--color-primary); border-color:var(--color-primary); }
.nav-toggle { display:none; flex-direction:column; gap:5px; width:36px; height:36px; align-items:center; justify-content:center; border:1.5px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text-muted); }
.nav-toggle span { display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s,opacity .2s; }

@media(max-width:900px){
  .header-nav { display:none; }
  .nav-toggle { display:flex; }
  .header-nav.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--color-surface); border-bottom:1px solid var(--color-divider); padding:var(--space-6); gap:var(--space-5); box-shadow:var(--shadow-md); z-index:100; }
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, #0d2a6e 0%, #1a56c4 60%, #2878e8 100%);
  color:white; padding-block:clamp(var(--space-16),10vw,var(--space-24));
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(255,255,255,.06) 0%, transparent 70%),
              url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 C30 10 22 18 22 28 C22 38 28 44 34 48 L34 56 C34 60 37 62 40 62 C43 62 46 60 46 56 L46 48 C52 44 58 38 58 28 C58 18 50 10 40 10Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
}
.hero__inner { position:relative; z-index:1; text-align:center; max-width:820px; margin-inline:auto; }
.hero__badge { display:inline-flex; align-items:center; gap:var(--space-2); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-full); padding:var(--space-2) var(--space-5); font-size:var(--text-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:var(--space-6); }
.hero__title { font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl); color:white; margin-bottom:var(--space-5); line-height:1.1; }
.hero__subtitle { font-size:var(--text-lg); color:rgba(255,255,255,.8); margin-bottom:var(--space-10); max-width:580px; margin-inline:auto; }

.search-box { background:white; border-radius:var(--radius-xl); padding:var(--space-4); box-shadow:var(--shadow-lg); display:flex; gap:var(--space-3); max-width:580px; margin-inline:auto; }
.search-box input { flex:1; border:none; outline:none; font-size:var(--text-base); color:#0d1f3c; background:transparent; padding:var(--space-2) var(--space-3); }
.search-box input::placeholder { color:#96aac2; }
.btn-search { background:var(--color-primary); color:white; border:none; border-radius:var(--radius-lg); padding:var(--space-3) var(--space-6); font-size:var(--text-sm); font-weight:700; font-family:var(--font-display); white-space:nowrap; flex-shrink:0; }
.btn-search:hover { background:var(--color-primary-hover); }

/* Emergency bar */
.emergency-bar { background:var(--color-emergency); color:white; padding:var(--space-3) 0; text-align:center; font-size:var(--text-sm); font-weight:600; }
.emergency-bar a { color:white; text-decoration:none; font-weight:700; margin-left:var(--space-3); text-decoration:underline; }

/* ===== STATS ===== */
.stats-bar { background:var(--color-surface); border-bottom:1px solid var(--color-divider); padding-block:var(--space-6); }
.stats-inner { display:flex; justify-content:center; gap:clamp(var(--space-8),5vw,var(--space-20)); flex-wrap:wrap; }
.stat__number { font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); color:var(--color-primary); line-height:1; text-align:center; }
.stat__label { font-size:var(--text-xs); color:var(--color-text-muted); text-align:center; margin-top:var(--space-1); text-transform:uppercase; letter-spacing:.05em; }

/* ===== SECTIONS ===== */
.section { padding-block:clamp(var(--space-12),7vw,var(--space-24)); }
.section--alt { background:var(--color-surface-2); }
.section--dark { background:var(--color-primary); color:white; }
.section__header { text-align:center; margin-bottom:clamp(var(--space-8),4vw,var(--space-16)); }
.section__eyebrow { font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-3); }
.section--dark .section__eyebrow { color:rgba(255,255,255,.6); }
.section__title { font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); color:var(--color-text); margin-bottom:var(--space-4); }
.section--dark .section__title { color:white; }
.section__subtitle { font-size:var(--text-base); color:var(--color-text-muted); max-width:56ch; margin-inline:auto; }
.section--dark .section__subtitle { color:rgba(255,255,255,.72); }

/* ===== CITY GRID ===== */
.city-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px,1fr)); gap:var(--space-4); }
.city-card { background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition); }
.city-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.city-card__name { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); }
.city-card__sub { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }
.city-card__arrow { color:var(--color-primary); opacity:0; transition:opacity var(--transition),transform var(--transition); flex-shrink:0; font-size:1.1rem; }
.city-card:hover .city-card__arrow { opacity:1; transform:translateX(4px); }

/* ===== SERVICE CARDS ===== */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:var(--space-5); }
.service-card { background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); text-decoration:none; display:block; transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition); }
.service-card:hover { box-shadow:var(--shadow-md); border-color:var(--color-primary); transform:translateY(-2px); }
.service-card__icon { width:48px; height:48px; background:var(--color-primary-light); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); font-size:1.5rem; }
.service-card__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); margin-bottom:var(--space-2); }
.service-card__desc { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.6; }
.service-card__link { font-size:var(--text-xs); font-weight:700; color:var(--color-primary); margin-top:var(--space-4); display:inline-flex; align-items:center; gap:4px; }

/* ===== SPECIALTY LINKS ===== */
.specialty-pills { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }
.specialty-pill { background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-2) var(--space-5); font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); text-decoration:none; transition:all var(--transition); }
.specialty-pill:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-light); }

/* ===== HOW IT WORKS ===== */
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-8); }
.step { text-align:center; }
.step__num { width:52px; height:52px; background:var(--color-primary-light); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:var(--text-lg); color:var(--color-primary); margin-inline:auto; margin-bottom:var(--space-4); }
.step__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); margin-bottom:var(--space-2); }
.step__desc { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ===== LEAD FORM ===== */
.lead-section { background:linear-gradient(135deg,#0d2a6e 0%,#1a56c4 100%); padding-block:clamp(var(--space-12),7vw,var(--space-20)); }
.lead-section .section__title { color:white; }
.lead-section .section__subtitle { color:rgba(255,255,255,.75); }
.lead-section .section__eyebrow { color:rgba(255,255,255,.55); }

.lead-form { background:white; border-radius:var(--radius-2xl); padding:clamp(var(--space-8),4vw,var(--space-12)); max-width:660px; margin-inline:auto; box-shadow:var(--shadow-lg); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media(max-width:540px){ .form-grid { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:var(--space-2); }
.form-group--full { grid-column:1/-1; }
.form-label { font-size:var(--text-sm); font-weight:600; color:#0d1f3c; }
.form-input,.form-select,.form-textarea { background:#f7f9fc; border:1.5px solid #c8d8ee; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); font-size:var(--text-base); color:#0d1f3c; width:100%; transition:border-color var(--transition); }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--color-primary); outline:none; background:white; }
.form-textarea { resize:vertical; min-height:90px; }
.hp-field { position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; overflow:hidden; pointer-events:none; }
.btn-submit { width:100%; background:var(--color-primary); color:white; border:none; border-radius:var(--radius-lg); padding:var(--space-4) var(--space-8); font-size:var(--text-base); font-weight:700; font-family:var(--font-display); margin-top:var(--space-4); display:flex; align-items:center; justify-content:center; gap:var(--space-2); }
.btn-submit:hover { background:var(--color-primary-hover); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; }
.form-notice { font-size:var(--text-xs); color:#4a6080; text-align:center; margin-top:var(--space-3); }
.form-success { display:none; text-align:center; padding:var(--space-8); }
.form-success__icon { width:56px; height:56px; background:var(--color-success-light); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-inline:auto; margin-bottom:var(--space-4); color:var(--color-success); }
.form-success__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:#0d1f3c; margin-bottom:var(--space-2); }
.form-success__text { font-size:var(--text-sm); color:#4a6080; }
#rate-limit-msg { display:none; font-size:var(--text-sm); color:var(--color-emergency); text-align:center; margin-top:var(--space-3); }

/* ===== BLOG CARDS ===== */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-6); }
.blog-card { background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:box-shadow var(--transition),transform var(--transition); }
.blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.blog-card__img { height:170px; background:var(--color-primary-light); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.blog-card__body { padding:var(--space-5) var(--space-6); flex:1; display:flex; flex-direction:column; }
.blog-card__cat { font-size:var(--text-xs); font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--space-2); }
.blog-card__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); margin-bottom:var(--space-3); line-height:1.3; }
.blog-card__excerpt { font-size:var(--text-sm); color:var(--color-text-muted); flex:1; margin-bottom:var(--space-4); }
.blog-card__meta { font-size:var(--text-xs); color:var(--color-text-faint); }

/* ===== CITY / PROCEDURE PAGE HERO ===== */
.page-hero { background:linear-gradient(135deg,#0d2a6e 0%,#1a56c4 100%); color:white; padding-block:clamp(var(--space-12),7vw,var(--space-20)); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,0.04)'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }
.page-hero__inner { position:relative; z-index:1; }
.breadcrumb { font-size:var(--text-xs); color:rgba(255,255,255,.55); margin-bottom:var(--space-4); display:flex; align-items:center; gap:var(--space-2); }
.breadcrumb a { color:rgba(255,255,255,.55); text-decoration:none; }
.breadcrumb a:hover { color:white; }
.page-hero__title { font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl); color:white; margin-bottom:var(--space-4); }
.page-hero__subtitle { font-size:var(--text-lg); color:rgba(255,255,255,.8); max-width:56ch; margin-bottom:var(--space-8); }
.hero-cta-group { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.btn-primary { background:white; color:var(--color-primary); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-8); font-weight:700; font-family:var(--font-display); text-decoration:none; font-size:var(--text-base); display:inline-flex; align-items:center; gap:var(--space-2); transition:background var(--transition),transform var(--transition); }
.btn-primary:hover { background:rgba(255,255,255,.9); transform:translateY(-1px); }
.btn-outline { background:rgba(255,255,255,.12); color:white; border:1.5px solid rgba(255,255,255,.3); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-8); font-weight:600; font-family:var(--font-display); text-decoration:none; font-size:var(--text-base); display:inline-flex; align-items:center; gap:var(--space-2); }
.btn-outline:hover { background:rgba(255,255,255,.22); color:white; }

/* ===== FAQ ===== */
.faq-list { max-width:740px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--color-divider); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) 0; font-family:var(--font-display); font-weight:600; font-size:var(--text-base); color:var(--color-text); text-align:left; background:none; border:none; cursor:pointer; }
.faq-question svg { flex-shrink:0; transition:transform .25s; color:var(--color-primary); }
.faq-item.open .faq-question svg { transform:rotate(180deg); }
.faq-answer { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.75; max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s ease; }
.faq-item.open .faq-answer { max-height:500px; padding-bottom:var(--space-5); }

/* ===== ARTICLE ===== */
.article-header { background:var(--color-surface-2); padding-block:clamp(var(--space-10),6vw,var(--space-20)); border-bottom:1px solid var(--color-divider); }
.article-body { max-width:740px; margin-inline:auto; padding-block:clamp(var(--space-10),6vw,var(--space-16)); }
.article-body h2 { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--color-text); margin-top:var(--space-10); margin-bottom:var(--space-4); }
.article-body p { font-size:var(--text-base); color:var(--color-text-muted); line-height:1.78; margin-bottom:var(--space-5); }
.article-body ul,
.article-body ol { padding-left:var(--space-6); margin-bottom:var(--space-5); }
.article-body li { font-size:var(--text-base); color:var(--color-text-muted); line-height:1.7; margin-bottom:var(--space-2); }
.article-cta { background:var(--color-primary-light); border-left:4px solid var(--color-primary); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:var(--space-5) var(--space-6); margin-block:var(--space-8); }
.article-cta p { color:var(--color-text); font-weight:600; margin-bottom:var(--space-3); }
.article-cta a { color:var(--color-primary); font-weight:700; text-decoration:none; }

/* ===== TRUST BADGES ===== */
.trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-5); }
.trust-card { background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; }
.trust-card__icon { font-size:2rem; margin-bottom:var(--space-3); }
.trust-card__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); margin-bottom:var(--space-2); }
.trust-card__desc { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ===== FOOTER ===== */
.site-footer { background:var(--color-text); color:var(--color-text-inverse); padding-block:clamp(var(--space-12),6vw,var(--space-20)); }
[data-theme="dark"] .site-footer { background:#040a14; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-10); margin-bottom:var(--space-12); }
@media(max-width:768px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .footer-grid { grid-template-columns:1fr; } }
.footer-brand p { font-size:var(--text-sm); color:rgba(255,255,255,.45); margin-top:var(--space-4); max-width:30ch; line-height:1.7; }
.footer-col__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-xs); color:rgba(255,255,255,.85); margin-bottom:var(--space-4); text-transform:uppercase; letter-spacing:.07em; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.footer-col a { font-size:var(--text-sm); color:rgba(255,255,255,.45); text-decoration:none; }
.footer-col a:hover { color:var(--color-primary); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:var(--space-6); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); }
.footer-bottom p { font-size:var(--text-xs); color:rgba(255,255,255,.3); }
.footer-bottom a { font-size:var(--text-xs); color:rgba(255,255,255,.35); text-decoration:none; }
.footer-bottom a:hover { color:var(--color-primary); }


/* === Generated pages extra styles === */

/* === Breadcrumb === */
.breadcrumb { background: var(--color-surface-2); border-bottom: 1px solid var(--color-divider); }
.breadcrumb ol { display:flex; gap:var(--space-3); list-style:none; padding: var(--space-4) 0; font-size:var(--text-sm); color:var(--color-text-muted); flex-wrap:wrap; }
.breadcrumb li + li::before { content:"›"; margin-right:var(--space-3); }
.breadcrumb a { color:var(--color-primary); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* === City / Service hero variant === */
.hero--city { padding: var(--space-12) 0; min-height: auto; }
.hero--city .hero__title { font-size:var(--text-xl); }

/* === Article body typography === */
.article-body { font-size:var(--text-base); line-height:1.75; color:var(--color-text); }
.article-body h2 { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; margin: var(--space-12) 0 var(--space-5); color:var(--color-text); }
.article-body h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin: var(--space-8) 0 var(--space-4); color:var(--color-primary); }
.article-body p { margin-bottom:var(--space-6); }
.article-body ul, .article-body ol { margin:var(--space-5) 0 var(--space-6) var(--space-8); }
.article-body li { margin-bottom:var(--space-3); }
.article-body strong { color:var(--color-text); font-weight:600; }
.article-body a { color:var(--color-primary); }
.article-body table { border-radius:var(--radius-lg); overflow:hidden; width:100%; }

/* === FAQ === */
.faq-list { display:flex; flex-direction:column; gap:var(--space-4); }
.faq-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; }
.faq-question { padding:var(--space-6); font-weight:600; font-size:var(--text-base); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-question::after { content:"＋"; font-size:1.2rem; color:var(--color-primary); flex-shrink:0; }
details[open] .faq-question::after { content:"－"; }
.faq-answer { padding:0 var(--space-6) var(--space-6); color:var(--color-text-muted); line-height:1.7; }
.faq-answer a { color:var(--color-primary); }

/* === CTA button === */
.btn { display:inline-flex; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-8); border-radius:var(--radius-full); font-weight:700; font-size:var(--text-base); text-decoration:none; transition:var(--transition); }
.btn--primary { background:var(--color-primary); color:white; }
.btn--primary:hover { background:var(--color-primary-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* === Listing Cards === */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.listing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: var(--transition);
}
.listing-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.listing-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.listing-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.3;
}
.listing-card__type {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
  margin-top: var(--space-1);
}
.listing-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: var(--text-sm);
}
.listing-rating__val {
  font-weight: 700;
  color: var(--color-text);
}
.listing-rating__count {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.star { color: #f59e0b; font-size: 0.85rem; }
.listing-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.listing-card__address,
.listing-card__hours {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.listing-card__hours { font-style: italic; }
.listing-card__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.listing-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  border: 1.5px solid transparent;
}
.listing-btn--phone {
  background: var(--color-primary);
  color: white;
}
.listing-btn--phone:hover { background: var(--color-primary-dark); }
.listing-btn--website {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.listing-btn--website:hover { background: var(--color-primary); color: white; }
.listing-btn--maps {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.listing-btn--maps:hover { border-color: var(--color-primary); color: var(--color-primary); }
.listings-disclaimer {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* === Emergency note (inside forms) === */
.emergency-note {
  background: #fff3cd;
  border: 1.5px solid #f0ad4e;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: #7a4e0a;
  margin-bottom: var(--space-6);
  line-height: 1.6;
}
[data-theme="dark"] .emergency-note {
  background: #3a2c00;
  border-color: #c9880c;
  color: #f5d078;
}