/* ============================================================
   Restoration Medix — City Landing Page additions
   Loads AFTER landing/styles.css. City-specific sections only.
============================================================ */

/* hero plain image bg (city pages use real img, not image-slot) */
.hero .bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* breadcrumb */
.crumb{ background:var(--paper); border-bottom:1px solid var(--line); }
.crumb .wrap{ display:flex; align-items:center; gap:8px; padding:11px 28px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--gray); flex-wrap:wrap; }
.crumb a{ color:var(--teal-3); font-weight:500; }
.crumb a:hover{ color:var(--navy); }
.crumb .sep{ color:var(--gray-3); }
.crumb .here{ color:var(--navy); }

/* ── LOCAL INTRO ─────────────────────────────────────────── */
.local{ background:#fff; }
.local-grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:48px; align-items:start; margin-top:44px; }
.local-body > p{ font-size:16.5px; line-height:1.7; color:var(--gray); margin-top:18px; }
.local-body > p:first-child{ margin-top:0; }
.local-body strong{ color:var(--navy); font-weight:700; }
.local-body h3{ font-size:23px; margin-top:34px; }
.local-body a.inline{ color:var(--teal-3); font-weight:700; border-bottom:1.5px solid rgba(46,155,155,.3); }
.local-body a.inline:hover{ color:var(--navy); border-color:var(--navy); }

/* facts sidebar card */
.facts-card{ background:var(--navy); color:#fff; border-radius:16px; padding:28px; position:sticky; top:96px; box-shadow:var(--shadow-card); }
.facts-card .fc-title{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.fact{ display:flex; gap:13px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.fact:last-child{ border-bottom:none; }
.fact .fic{ width:34px; height:34px; border-radius:9px; background:rgba(91,206,206,.14); color:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fact .fl{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.fact .fv{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:#fff; line-height:1.3; margin-top:2px; }
.facts-card .fc-cta{ margin-top:22px; }

/* ── NEIGHBORHOODS ───────────────────────────────────────── */
.hoods{ background:var(--paper); }
.hood-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.hood-chip{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 18px; transition:background .15s,border-color .15s,color .15s; }
.hood-chip:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.hood-note{ display:flex; align-items:center; gap:10px; margin-top:26px; font-size:14px; color:var(--gray); }
.hood-note svg{ color:var(--teal-3); flex-shrink:0; }
.city-map{ margin-top:32px; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-soft); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{ background:#fff; }
.faq-list{ max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-q{ background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .15s; }
.faq-q[open]{ border-color:var(--teal-3); }
.faq-q summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--navy); }
.faq-q summary::-webkit-details-marker{ display:none; }
.faq-q summary .qmark{ width:28px; height:28px; flex-shrink:0; border-radius:7px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .2s, background .2s; }
.faq-q[open] summary .qmark{ transform:rotate(45deg); background:var(--teal-3); }
.faq-q .faq-a{ padding:0 24px 22px; font-size:15.5px; line-height:1.7; color:var(--gray); }
.faq-q .faq-a a{ color:var(--teal-3); font-weight:700; }

/* ── NEARBY CITIES ───────────────────────────────────────── */
.nearby{ background:var(--navy); color:#fff; }
.nearby h2{ color:#fff; }
.nearby-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; }
.nearby-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:13px; padding:22px; transition:background .15s,border-color .15s,transform .15s; display:flex; flex-direction:column; gap:6px; }
.nearby-card:hover{ background:rgba(91,206,206,.1); border-color:var(--teal); transform:translateY(-3px); }
.nearby-card .nc-city{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:#fff; }
.nearby-card .nc-sub{ font-size:13px; color:rgba(255,255,255,.6); }
.nearby-card .nc-link{ margin-top:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; color:var(--teal); display:inline-flex; align-items:center; gap:6px; }

@media (max-width:1020px){
  .local-grid{ grid-template-columns:1fr; gap:32px; }
  .facts-card{ position:relative; top:0; }
  .nearby-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nearby-grid{ grid-template-columns:1fr 1fr; }
  .faq-q summary{ font-size:16px; padding:17px 18px; }
}
@media (max-width:480px){
  .nearby-grid{ grid-template-columns:1fr; }
}