@charset "UTF-8";
/* ==========================================================================
   W19 — SERVICE-AREA / LOCATION FAMILY LAYER (body class "loc"; /service-areas/ + 4 cities).
   Sits between the service pages and the guides: warm reading surfaces, title-led openings,
   garnet call role, blue links/cooling cue, navy only as a deliberate reset. ZIP lines stay
   compact. Each page keeps its own W8 composition; this file restyles, it does not template.
     hub  = orientation: photo opening + geographic path list (Inglewood primary)
     hw   = diagnostic: symptom finder + first-visit checks
     ga   = answers: numbered homeowner questions (comfort/uneven heat answer marked)
     cc   = decision: fix it / plan it lanes + signs to plan
     es   = service-first: comfort patterns + service rows
   ========================================================================== */
.loc main { --cloud: #F7F3ED; --stone: #EFE8DD; --line: #E6E0D5; color: var(--p-text); }

/* ---------- Type + labels ---------- */
.loc main h2 { font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.7rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; text-wrap: balance; }
.loc main h1 { font-weight: 850; letter-spacing: -0.034em; text-wrap: balance; }
.loc main .eyebrow { color: var(--p-sub); }
.loc main .eyebrow::before { background: linear-gradient(90deg, #A8304A, #E4677F 45%, #6FA0EE 60%, #1D5BC7); }
.loc main .eyebrow--light { color: #C9D2E5; }
.loc main .sec-head > p { color: var(--p-sub); }
.loc main .lede { color: var(--p-text); }
.loc main a:not(.btn):not(.textlink):not(.finder a) { font-weight: 600; }
.loc main .zip-line { color: var(--p-sub); font-size: .92rem; }

/* ---------- Call role: garnet ---------- */
.loc main .btn-call { background: var(--p-act); color: #fff; box-shadow: 0 8px 20px rgba(168,48,74,.2); }
.loc main .btn-call:hover { background: var(--p-act-deep); color: #fff; }
.loc main .btn-white { background: var(--p-act); color: #fff; box-shadow: 0 8px 20px rgba(168,48,74,.2); }
.loc main .btn-white:hover { background: var(--p-act-deep); color: #fff; }
.loc main .cta-card { box-shadow: none; border: 1px solid var(--p-warm-line); border-radius: 18px; }

/* ---------- Closings: calm, warm, heat/cool rule (no full cobalt fields) ---------- */
.loc .closing { background: #fff; color: var(--p-sub); padding: 88px 0 96px; }
.loc .closing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #A8304A, #E4677F 45%, #6FA0EE 60%, #1D5BC7); }
.loc .closing .airflow { display: none; }
.loc .closing h2 { color: var(--ink); }
.loc .closing p, .loc .closing--light p { color: var(--p-sub); }
.loc .closing p a, .loc .closing .closing-link { color: var(--cobalt); font-weight: 700; }
.loc .closing--light { background: #fff; }

/* ---------- FAQ: heading column + list (site FAQ axis) ---------- */
.loc .faq-single { background: var(--p-warm); padding: 96px 0; }
.loc .faq-list { border-top: 2px solid var(--ink); }
.loc .faq-list details { border-bottom-color: var(--p-warm-line); }
.loc .faq-list h3 { font-size: 1.22rem; font-weight: 800; }
@media (min-width: 1025px) {
  .loc .faq-single .wrap { max-width: var(--wrap); display: grid; grid-template-columns: 340px 1fr; gap: 28px 72px; align-items: start; }
  .loc .faq-single h2 { margin: 0; }
  .loc .faq-single .faq-list { max-width: none; }
}

/* ======================================================================
   HUB — orientation
   ====================================================================== */
.loc-hub .phead { background: var(--p-warm); color: var(--p-text); padding: 44px 0 72px; border-bottom: 1px solid var(--p-warm-line); }
.loc-hub .phead h1 { color: var(--ink); font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.8rem); max-width: 14ch; }
.loc-hub .phead .lede { color: var(--p-text); font-size: 1.15rem; }
.loc-hub .phead .ph { border-radius: 18px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.loc-hub .phead .ph img { object-position: 50% 60%; }
/* Geographic paths: Inglewood primary, then the four nearby cities */
.loc-hub .area-list { border-top: 2px solid var(--ink); }
.loc-hub .area-list li { border-bottom-color: var(--p-warm-line); }
.loc-hub .area-list a { padding-top: 24px; padding-bottom: 24px; }
.loc-hub .area-list .nm { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.loc-hub .area-list .ds { color: var(--p-text); }
.loc-hub .area-list li:first-child { background: var(--p-warm); border-radius: 0 0 16px 16px; margin-bottom: 8px; border-bottom: 0; }
.loc-hub .area-list li:first-child a { padding-left: 24px; padding-right: 24px; }
.loc-hub .area-list li:first-child .nm { font-size: 1.8rem; }
.loc-hub .area-list li:first-child small { color: var(--heat); }
.loc-hub .loc-sec--stone { background: var(--p-warm); }
.loc-hub .loc-note { border-left-color: var(--heat); }

/* ======================================================================
   HAWTHORNE — diagnostic
   ====================================================================== */
.loc-hw .ar-hero { background: var(--p-warm); }
.loc-hw .ar-hero::after { display: none; }
.loc-hw .ar-hero h1 .accent { color: var(--cobalt); }
.loc-hw .finder { border-radius: 18px; box-shadow: 0 20px 44px rgba(23,33,58,.12); border-top: 4px solid var(--cobalt); }
.loc-hw .finder h2 { font-size: 1.45rem; }
.loc-hw .finder a::before { color: var(--heat); }
.loc-hw .loc-photo { border-radius: 18px; }
.loc-hw .loc-sec--stone { background: var(--p-warm); }
.loc-hw .sit-grid { border-top-color: var(--ink); }
.loc-hw .sit h3 { font-weight: 800; }
.loc-hw .sit + .sit { border-left-color: var(--p-warm-line); }

/* ======================================================================
   GARDENA — homeowner answers (heat cue; uneven-heat answer marked)
   ====================================================================== */
.loc-ga .phead { background: linear-gradient(160deg, #FBEFF1 0%, var(--p-warm) 60%); color: var(--p-text); padding: 44px 0 72px; border-bottom: 1px solid var(--p-warm-line); }
.loc-ga .phead .airflow { display: none; }
.loc-ga .phead h1 { color: var(--ink); }
.loc-ga .phead .crumbs--light ol, .loc-ga .phead .crumbs--light a { color: var(--muted); }
.loc-ga .phead .eyebrow--light { color: var(--p-sub); }
.loc-ga .phead .zip-line--light { color: var(--p-sub); }
.loc-ga .phead .zip-line--light::before { border-color: var(--cobalt); }
.loc-ga .phead .ph { border-radius: 18px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.loc-ga .qa-block { border-top-color: var(--p-warm-line); }
.loc-ga .qa-block .qn { -webkit-text-stroke-color: var(--heat); }
.loc-ga .qa-block h2 { font-weight: 800; }
.loc-ga .qa-block:last-child { background: #FBF0F2; border-radius: 16px; padding-left: 24px; padding-right: 24px; border-top: 0; margin-top: 12px; }
.loc-ga .get-help { background: #fff; color: var(--p-text); border: 1px solid var(--p-warm-line); border-left: 6px solid var(--heat); }
.loc-ga .get-help h2 { color: var(--ink); }
.loc-ga .get-help a:not(.btn) { color: var(--cobalt); }

/* ======================================================================
   CULVER CITY — fix it / plan it decision
   ====================================================================== */
.loc-cc .loc-hero { background: var(--p-warm); border-bottom: 1px solid var(--p-warm-line); }
.loc-cc .loc-hero h1 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.6rem); max-width: 18ch; }
.loc-cc .lanes { border-radius: 20px; box-shadow: 0 20px 44px rgba(23,33,58,.10); }
.loc-cc .lane:first-child { background: #fff; }
.loc-cc .lane h2 { font-weight: 800; }
.loc-cc .loc-sec--flush { background: var(--p-warm); padding-bottom: 96px; }
.loc-cc .loc-sec--stone { background: #fff; }
.loc-cc .loc-photo { border-radius: 18px; }
.loc-cc .tick-list svg { color: var(--heat); }

/* ======================================================================
   EL SEGUNDO — service-first, clean (light cool cue)
   ====================================================================== */
.loc-es .loc-hero--cool { background: linear-gradient(160deg, #EEF3FC 0%, var(--p-warm) 65%); border-bottom: 1px solid var(--p-warm-line); }
.loc-es .loc-hero h1 .accent { color: var(--cobalt); }
.loc-es .loc-photo { border-radius: 18px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.loc-es .factor-list li { border-top-color: var(--p-warm-line); }
.loc-es .factor-list strong { font-weight: 800; }
.loc-es .loc-sec--cloud { background: var(--p-warm); }
.loc-es .svc-rows li { border-color: var(--p-warm-line); }
.loc-es .loc-note { background: var(--p-warm); border-left-color: var(--cobalt); }
.loc-es .faq-aside { background: var(--p-warm); }

@media (max-width: 720px) {
  .loc-hub .phead, .loc-ga .phead { padding: 24px 0 48px; }
  .loc-hub .phead h1 { font-size: 2.4rem; }
  .loc-hub .area-list .nm { font-size: 1.25rem; }
  .loc-hub .area-list li:first-child .nm { font-size: 1.5rem; }
  .loc-hub .area-list li:first-child a { padding-left: 16px; padding-right: 16px; }
  .loc .faq-single { padding: 60px 0; }
  .loc .closing { padding: 64px 0 72px; }
  .loc-ga .qa-block:last-child { padding-left: 16px; padding-right: 16px; }
}

/* W19 fixes: component headings keep component scale; Hawthorne FAQ separates from the warm first-visit section */
.loc-ga .qa-block h2 { font-size: clamp(1.4rem, 1.15rem + .7vw, 1.8rem); }
.loc-ga .get-help h2 { font-size: 1.5rem; }
.loc-cc .lane h2 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); }
.loc-hw .faq-single { background: #fff; }