/* ==========================================================================
   Sammy's HVAC & Appliances LLC — Town × Service pages
   File: /assets/css/local-service.css

   One shared stylesheet for every /areas/{town}/{service}.html page, so the
   design stays consistent and the browser caches it once across all 30.
   Palette and type match the rest of the site.
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
:root{
  --navy:#0d1f3c;--dark:#06111f;--red:#c8251d;--red-dark:#a81e17;--gold:#e8920a;
  --green:#10b981;--blue:#1e88e5;--light:#f4f6f9;--border:#e8ecf2;--muted:#8a96a8;
  --body:#3a4558;--head:#0d1f3c;--white:#fff;
  --shadow:0 4px 8px rgba(0,0,0,.09);--shadow-lg:0 12px 30px rgba(0,0,0,.14);
}
body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
     color:var(--body);font-size:16px;line-height:1.7;overflow-x:clip}
main{display:block;width:100%;max-width:100%;overflow-x:clip}
img{max-width:100%;height:auto}

.ls-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ls-sec{padding:64px 20px;width:100%;max-width:100%}
.ls-sec--sm{padding:44px 20px}
.bg-light{background:var(--light)}
.bg-white{background:var(--white)}
.bg-dark{background:var(--dark)}

h1{font-size:clamp(1.75rem,4.6vw,2.85rem);font-weight:800;line-height:1.14;color:var(--white)}
h2{font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:700;line-height:1.22;color:var(--head);margin-bottom:14px}
h3{font-size:clamp(1.02rem,2.2vw,1.22rem);font-weight:700;line-height:1.32;color:var(--head);margin-bottom:9px}
p{margin-bottom:15px;line-height:1.82}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ── Breadcrumb ─────────────────────────────────────────── */
.ls-bc{background:var(--light);border-bottom:1px solid var(--border);padding:11px 20px;font-size:.83rem}
.ls-bc__in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:var(--muted)}
.ls-bc__in a{color:var(--muted);transition:color .15s}
.ls-bc__in a:hover{color:var(--red)}
.ls-bc__cur{color:var(--head);font-weight:600}
.ls-bc__sep{opacity:.45}

/* ── Hero ───────────────────────────────────────────────── */
.ls-hero{position:relative;background:var(--dark);overflow:hidden;padding:66px 20px 72px}
.ls-hero::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 42px,
  rgba(255,255,255,.011) 42px,rgba(255,255,255,.011) 43px)}
.ls-hero__bar{position:absolute;top:0;left:0;width:6px;height:100%;
  background:linear-gradient(180deg,var(--red),var(--gold))}
.ls-hero__in{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.ls-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:17px}
.ls-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(200,37,29,.15);
  border:1px solid rgba(200,37,29,.35);border-radius:4px;padding:5px 12px;font-size:.71rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fca5a5}
.ls-badge--gold{background:rgba(232,146,10,.15);border-color:rgba(232,146,10,.38);color:#fcd34d}
h1 span{color:var(--gold)}
.ls-hero__sub{font-size:1.04rem;color:rgba(255,255,255,.63);line-height:1.8;margin:16px 0 24px;max-width:680px}
.ls-hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.ls-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 27px;
  font-size:1rem;font-weight:700;border-radius:6px;border:none;cursor:pointer;transition:all .22s;
  text-align:center;white-space:nowrap;font-family:inherit}
.ls-btn--red{background:var(--red);color:var(--white);box-shadow:0 4px 14px rgba(200,37,29,.3)}
.ls-btn--red:hover{background:var(--red-dark);transform:translateY(-2px);color:var(--white)}
.ls-btn--ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.36)}
.ls-btn--ghost:hover{background:var(--white);color:var(--navy)}
.ls-trust{display:flex;gap:18px;flex-wrap:wrap}
.ls-trust span{font-size:.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.46)}

/* ── Section headings ───────────────────────────────────── */
.ls-label{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--red);margin-bottom:11px}
.ls-label--gold{color:var(--gold)}
.ls-lead{font-size:1.03rem;line-height:1.85;color:var(--body);max-width:820px}

/* ── Symptom list ───────────────────────────────────────── */
.ls-symp{display:grid;grid-template-columns:1fr;gap:11px;margin-top:26px}
.ls-symp li{display:flex;gap:12px;align-items:flex-start;background:var(--white);
  border:1px solid var(--border);border-left:4px solid var(--red);border-radius:8px;
  padding:14px 17px;font-size:.93rem;line-height:1.6;box-shadow:var(--shadow)}
.ls-symp li::before{content:'!';flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:rgba(200,37,29,.12);color:var(--red);font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ── Local angle (the town-specific block) ──────────────── */
.ls-angle{background:linear-gradient(135deg,var(--dark) 0%,var(--navy) 100%);
  border-radius:14px;padding:36px 34px;position:relative;overflow:hidden;
  border:1px solid rgba(232,146,10,.24)}
.ls-angle::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold),#f59e0b,var(--gold))}
.ls-angle h2{color:var(--white);margin-bottom:15px}
.ls-angle p{color:rgba(255,255,255,.72);font-size:1rem;line-height:1.85;margin-bottom:0}
.ls-angle .ls-label{color:var(--gold)}

/* ── Two-column info ────────────────────────────────────── */
.ls-cols{display:grid;grid-template-columns:1fr;gap:26px;margin-top:26px}
.ls-card{background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:26px 24px;box-shadow:var(--shadow);transition:all .28s}
.ls-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(200,37,29,.2)}
.ls-card p:last-child{margin-bottom:0}
.ls-card__icon{font-size:1.8rem;display:block;margin-bottom:10px}

/* ── Link grids ─────────────────────────────────────────── */
.ls-links{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.ls-links a{background:var(--white);border:1px solid var(--border);border-radius:7px;
  padding:13px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.9rem;font-weight:600;color:var(--head);transition:all .2s}
.ls-links a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(200,37,29,.1)}
.ls-links a span{color:var(--muted);font-size:.78rem;flex-shrink:0}
.ls-links a:hover span{color:var(--red)}

/* ── FAQ ────────────────────────────────────────────────── */
.ls-faq{display:flex;flex-direction:column;gap:12px;margin-top:26px;max-width:900px}
.ls-faq__item{background:var(--white);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;box-shadow:var(--shadow)}
.ls-faq__q{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:17px 20px;font-family:inherit;font-size:.97rem;font-weight:700;color:var(--head);
  display:flex;justify-content:space-between;align-items:center;gap:14px;line-height:1.45}
.ls-faq__q:hover{background:var(--light)}
.ls-faq__pm{flex-shrink:0;font-size:1.28rem;font-weight:400;color:var(--red);transition:transform .25s}
.ls-faq__item.open .ls-faq__pm{transform:rotate(45deg)}
.ls-faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ls-faq__item.open .ls-faq__a{max-height:600px}
.ls-faq__a p{padding:0 20px 18px;font-size:.94rem;color:var(--body);margin:0;line-height:1.8}

/* ── CTA band ───────────────────────────────────────────── */
.ls-cta{background:var(--dark);padding:62px 20px;position:relative;overflow:hidden}
.ls-cta::before{content:'';position:absolute;top:0;left:0;width:7px;height:100%;
  background:linear-gradient(180deg,var(--red),var(--gold))}
.ls-cta__in{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;z-index:1}
.ls-cta h2{color:var(--white);margin-bottom:7px}
.ls-cta h2 span{color:var(--gold)}
.ls-cta p{color:rgba(255,255,255,.52);font-size:.94rem;margin-bottom:0}
.ls-cta__phone{display:flex;align-items:center;gap:11px;background:var(--red);color:var(--white);
  padding:15px 27px;border-radius:6px;transition:background .2s}
.ls-cta__phone:hover{background:var(--red-dark);color:var(--white)}
.ls-cta__lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  opacity:.75;display:block;line-height:1;margin-bottom:3px}
.ls-cta__num{font-size:1.55rem;font-weight:800;line-height:1}

/* ── Responsive ─────────────────────────────────────────── */
@media(min-width:640px){
  .ls-symp{grid-template-columns:repeat(2,1fr)}
  .ls-cols{grid-template-columns:repeat(2,1fr)}
  .ls-links{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .ls-links{grid-template-columns:repeat(3,1fr)}
  .ls-hero{padding:84px 20px 88px}
  .ls-sec{padding:78px 20px}
}
@media(max-width:639px){
  .ls-hero{padding:44px 16px 50px}
  .ls-sec{padding:42px 16px}
  .ls-sec--sm{padding:34px 16px}
  .ls-cta{padding:44px 16px}
  .ls-angle{padding:26px 20px}
  .ls-wrap{padding:0 16px}
  .ls-hero__btns{flex-direction:column}
  .ls-btn{width:100%}
  .ls-cta__in{flex-direction:column;align-items:flex-start}
  .ls-cta__phone{width:100%;justify-content:center}
}