@charset "UTF-8";
/* ==========================================================================
   W18 — GUIDE FAMILY LAYER (loaded only by the four /guides/ pages; body class "gd").
   Informational-resource identity inside the Inglewood brand:
     • calm warm reading surfaces (no commercial photo bleeds, few dark bands);
     • title-led heroes, framed media;
     • strong observation / check / meaning hierarchy;
     • navy only for the homeowner/professional boundary and one orientation block;
     • blue = cooling cue + links; garnet = heating cue + call action.
   Per-guide signatures: .gd-nc sequence · .gd-fz diagram + thaw · .gd-sc cycle chart +
   heat/cool comparison · .gd-th Check / If that's not it decision rows.
   Built on the W13 gd-* rules in site.css; no markup or copy changed.
   ========================================================================== */
.gd main { --cloud: #F7F3ED; --stone: #EFE8DD; --line: #E6E0D5; color: var(--p-text); }
.gd main p, .gd main li { color: inherit; }

/* ---------- Type ---------- */
.gd main h2 { font-size: clamp(1.85rem, 1.35rem + 1.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; text-wrap: balance; }
.gd main .gd-h2 { font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem); }
.gd main h3 { letter-spacing: -0.012em; }
.gd main .eyebrow { color: var(--p-sub); }
.gd main .eyebrow::before { width: 30px; background: linear-gradient(90deg, #A8304A, #E4677F 45%, #6FA0EE 60%, #1D5BC7); }
.gd main .eyebrow--light { color: #C9D2E5; }
.gd main .sec-head > p, .gd main .gd-intro, .gd main .gd-point-grid > div:first-child > p:last-child { color: var(--p-sub); }
.gd main a:not(.btn):not(.textlink) { font-weight: 600; }

/* ---------- Guide hero: title-led, calm, framed media ---------- */
.gd .gd-hero { background: var(--p-warm); padding: 40px 0 68px; border-bottom: 1px solid var(--p-warm-line); }
.gd .gd-hero h1 { font-size: clamp(2.3rem, 1.55rem + 2vw, 3.35rem); font-weight: 850; letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 22px; }
.gd .gd-hero h1 .accent { margin-top: 6px; font-weight: 750; }
.gd .gd-hero .lede { font-size: 1.1rem; line-height: 1.64; color: var(--p-text); max-width: 58ch; }
.gd .gd-hero-photo { border-radius: 18px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.gd .gd-hero .eyebrow { margin-bottom: 14px; }

/* ---------- Sections ---------- */
.gd .gd-sec { padding: 88px 0; }
.gd .gd-sec--tight { padding: 64px 0; }
.gd .gd-sec--flush { padding-top: 0; }
.gd .gd-sec--end { padding: 0 0 96px; }
.gd .gd-sec--cloud + .gd-sec--end, .gd .gd-sec--stone + .gd-sec--end { padding-top: 88px; }
.gd .sec-head { margin-bottom: 40px; }

/* ---------- Professional-help transition + closing next step ---------- */
.gd .gd-stop { background: #fff; border-radius: 18px; padding: 40px 44px; border-top: 4px solid var(--heat); align-items: start; box-shadow: 0 1px 2px rgba(23,33,58,.05); }
.gd .gd-sec--cloud .gd-stop, .gd .gd-sec--stone .gd-stop { box-shadow: none; }
.gd .gd-stop-next { border-left: 1px solid var(--p-warm-line); padding: 4px 0 4px 32px; }
.gd .gd-stop-next p { color: var(--p-sub); }
.gd .get-help { background: #fff; color: var(--p-text); border: 1px solid var(--p-warm-line); border-left: 6px solid var(--heat); border-radius: 16px; padding: 28px 32px; }
.gd .get-help h2 { color: var(--ink); font-size: 1.5rem; }
.gd .get-help p { color: var(--p-sub); }
.gd main .btn-call { background: var(--p-act); color: #fff; box-shadow: none; }
.gd main .btn-call:hover { background: var(--p-act-deep); color: #fff; }

/* ---------- Homeowner / professional boundary (shared) ---------- */
.gd .vs-grid { border-radius: 20px; }
.gd .vs-you { background: #fff; padding: 38px 40px; }
.gd .vs-you li { border-top-color: var(--p-warm-line); }
.gd .vs-you li::before { border-color: var(--cobalt); color: var(--cobalt); }
.gd .vs-pro { padding: 38px 40px; }
.gd .vs-grid h3 { font-size: 1.4rem; font-weight: 800; }

/* ======================================================================
   GUIDE 1 — AC running but not cooling: DIAGNOSTIC SEQUENCE
   ====================================================================== */
.gd-nc .gd-hero h1 .accent { color: var(--cobalt); }
/* Three patterns: a compact comparison strip, not cards */
.gd-nc .gd-sec--tight { background: #fff; }
.gd-nc .gd-patterns { border-top: 0; background: var(--p-warm); border-radius: 18px; padding: 8px 12px; }
.gd-nc .gd-patterns > div { padding: 26px 26px 28px; }
.gd-nc .gd-patterns > div + div { border-left: 1px solid var(--p-warm-line); padding-left: 26px; }
.gd-nc .gd-patterns .gd-pat-n { font-size: 2.6rem; -webkit-text-stroke-color: var(--cobalt); }
.gd-nc .gd-patterns h3 { font-size: 1.22rem; }
/* Six checks: vertical sequence, CHECK left / WHAT IT TELLS YOU right */
.gd-nc .gd-path li { gap: 20px 56px; padding-bottom: 40px; }
.gd-nc .gd-path li::before { background: #fff; color: var(--cobalt); border: 2px solid var(--cobalt); }
.gd-nc .gd-path li::after { background: linear-gradient(180deg, #9CC1F5, #CFE0FA); }
.gd-nc .gd-path h3 { font-size: 1.28rem; font-weight: 800; }
.gd-nc .gd-path-means { background: #fff; border-left: 0; border-top: 3px solid var(--sky); border-radius: 0 0 14px 14px; }
.gd-nc .gd-means-label { color: var(--cobalt) !important; }
/* Observation -> can point to */
.gd-nc .gd-table th { color: var(--p-sub); }
.gd-nc .gd-table td { border-bottom-color: var(--p-warm-line); }
.gd-nc .gd-table td:last-child { color: var(--p-text); }
.gd-nc .gd-table tbody tr td:first-child { padding-left: 18px; border-left: 3px solid var(--sky); }
/* Refrigerant + hottest afternoon: kept together as a paired note (not an isolated reassurance) */
.gd-nc .gd-notes { background: var(--p-warm); border-top: 0; border-radius: 18px; padding: 0 40px 36px; }
.gd-nc .gd-notes h3 { font-size: 1.25rem; font-weight: 800; }

/* ======================================================================
   GUIDE 2 — Frozen coil / leaking water: LOCATION DIAGRAM + SAFE RESPONSE
   ====================================================================== */
.gd-fz .gd-hero--ink { background: var(--p-warm); color: var(--p-text); }
.gd-fz .gd-hero--ink .airflow { display: none; }
.gd-fz .gd-hero--ink h1 { color: var(--ink); }
.gd-fz .gd-hero--ink h1 .accent { color: var(--cobalt); }
.gd-fz .gd-hero .crumbs--light ol, .gd-fz .gd-hero .crumbs--light a { color: var(--muted); }
.gd-fz .gd-hero .eyebrow--light { color: var(--p-sub); }
.gd-fz .gd-hero-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.gd-fz .gd-diagram { padding: 26px 26px 22px; border-radius: 20px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.gd-fz .gd-diagram .dg-legend li { font-size: .98rem; }
.gd-fz .gd-jump a { border-color: var(--ink); color: var(--ink); background: #fff; }
.gd-fz .gd-jump a:hover { background: var(--ink); color: #fff; }
.gd-fz .gd-why h2 { font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem); }
/* Thaw sequence: numbered, calm */
.gd-fz .steps-num li::before { background: transparent; border: 0; color: transparent; -webkit-text-stroke: 1.4px var(--cobalt); font-size: 2rem; width: auto; left: 0; top: -4px; }
.gd-fz .steps-num li { padding-left: 54px; }
.gd-fz .steps-num h3 { font-size: 1.2rem; font-weight: 800; }
/* Where water appears: observation list with location markers */
.gd-fz .gd-where { border-top-color: var(--ink); }
.gd-fz .gd-where > div { position: relative; padding-left: 22px; border-bottom-color: var(--p-warm-line); }
.gd-fz .gd-where > div::before { content: ""; position: absolute; left: 0; top: 32px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px #E4EDFB; }
.gd-fz .gd-where h3 { font-size: 1.22rem; font-weight: 800; }
.gd-fz .vs-you { background: var(--p-warm); }

/* ======================================================================
   GUIDE 3 — Short cycling: CYCLE PATTERN + HEAT/COOL COMPARISON
   ====================================================================== */
.gd-sc .gd-hero--cool { background: var(--p-warm); }
.gd-sc .gd-hero h1 .accent { color: var(--p-sub); }
.gd-sc .gd-hero-grid--chart { grid-template-columns: .85fr 1.15fr; }
.gd-sc .gd-chart { padding: 32px 32px 24px; border-radius: 20px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.gd-sc .gd-chart figcaption { font-size: 1.25rem; font-weight: 800; }
.gd-sc .gd-chart-note { font-size: .95rem; color: var(--p-sub); }
/* Comparison: two light lanes — cool and heat — with shared causes above */
.gd-sc .gd-lanes { border: 0; box-shadow: none; gap: 24px; border-radius: 0; overflow: visible; }
.gd-sc .gd-lanes .lane { border-radius: 18px; background: #EEF3FC; border-top: 5px solid var(--cobalt); color: var(--p-text); }
.gd-sc .gd-lanes .lane + .lane { background: #FBF0F2; border-top-color: var(--heat); color: var(--p-text); }
.gd-sc .gd-lanes .lane + .lane h3, .gd-sc .gd-lanes .lane + .lane li strong { color: var(--ink); }
.gd-sc .gd-lanes .lane + .lane .eyebrow--light { color: var(--heat); }
.gd-sc .gd-lanes .lane:first-child .eyebrow { color: var(--cobalt); }
.gd-sc .gd-lanes .lane li { border-top-color: rgba(23,33,58,.1); }
.gd-sc .gd-lanes .lane + .lane li { border-top-color: rgba(168,48,74,.18); }
.gd-sc .gd-lanes .lane + .lane a { color: var(--heat); }
.gd-sc .gd-lane-note { color: var(--p-text); background: #fff; border-radius: 10px; padding: 12px 14px; margin-top: 8px !important; }
.gd-sc .gd-lane-note a { color: var(--heat); }
.gd-sc .gd-factors li { border-top-color: var(--p-warm-line); }

/* ======================================================================
   GUIDE 4 — Thermostat problems: CHECK / IF THAT'S NOT IT DECISION ROWS
   ====================================================================== */
.gd-th .gd-hero h1 .accent { color: var(--p-sub); }
.gd-th .gd-sec--tight { background: #fff; }
.gd-th .gd-types { border-top: 1px solid var(--p-warm-line); }
.gd-th .gd-types h3 { font-size: 1.12rem; }
.gd-th .gd-probs { border-top: 2px solid var(--ink); }
.gd-th .gd-prob { grid-template-columns: .75fr 1.15fr 1.1fr; gap: 0 40px; padding: 30px 0; border-bottom-color: var(--p-warm-line); }
.gd-th .gd-prob h3 { font-size: 1.28rem; font-weight: 800; }
.gd-th .gd-prob > div:nth-of-type(1) .gd-means-label { color: var(--cobalt) !important; }
.gd-th .gd-prob > div:nth-of-type(2) { padding-left: 28px; border-left: 2px solid var(--p-warm-line); }
.gd-th .gd-prob > div:nth-of-type(2) .gd-means-label { color: var(--heat) !important; }
.gd-th .gd-prob > div:nth-of-type(2) .gd-means-label::before { content: "\2192\00a0"; }
.gd-th .gd-decide { border-radius: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .gd-fz .gd-hero-grid, .gd-sc .gd-hero-grid--chart { grid-template-columns: 1fr; }
  .gd-th .gd-prob { grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  .gd-nc .gd-patterns > div + div { border-left: 0; padding-left: 26px; border-top: 1px solid var(--p-warm-line); }
  .gd .gd-stop-next { border-left: 0; padding-left: 0; border-top: 1px solid var(--p-warm-line); padding-top: 22px; }
}
@media (max-width: 720px) {
  .gd .gd-hero { padding: 24px 0 48px; }
  .gd .gd-hero h1 { font-size: 2.15rem; }
  .gd .gd-sec { padding: 60px 0; }
  .gd .gd-sec--tight { padding: 48px 0; }
  .gd .gd-sec--end { padding-bottom: 64px; }
  .gd .gd-sec--cloud + .gd-sec--end, .gd .gd-sec--stone + .gd-sec--end { padding-top: 60px; }
  .gd .gd-stop { padding: 28px 22px; }
  .gd .get-help { padding: 22px 20px; }
  .gd .vs-you, .gd .vs-pro { padding: 28px 22px; }
  .gd-nc .gd-patterns { padding: 0 4px; }
  .gd-nc .gd-patterns > div { padding: 22px 18px; }
  .gd-nc .gd-path li { gap: 14px; padding-bottom: 32px; }
  .gd-nc .gd-notes { padding: 0 20px 28px; }
  .gd-nc .gd-table tbody tr td:first-child { padding-left: 0; border-left: 0; }
  .gd-nc .gd-table tr { border-left: 3px solid var(--sky); padding-left: 14px; }
  .gd-fz .gd-diagram { padding: 14px; }
  .gd-sc .gd-chart { padding: 22px 16px 18px; }
  .gd-th .gd-prob { grid-template-columns: 1fr; gap: 12px; }
  .gd-th .gd-prob > div:nth-of-type(2) { padding-left: 16px; }
}
@media (max-width: 720px) { .gd-sc .gd-chart-lbl { font-size: 24px; } .gd-sc .gd-chart-axis { font-size: 20px; } }

/* W18-R — Short Cycling: contextual photo in the opening; the cycle chart moves to "Is it really short cycling?" */
.gd-sc .sc-photo img { object-position: 60% 40%; }
@media (min-width: 1025px) { .gd-sc .sc-rec .gd-point-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.gd-sc .sc-rec .gd-chart { margin-top: 32px; background: #fff; box-shadow: 0 1px 2px rgba(23,33,58,.06); border: 1px solid var(--p-warm-line); }
.gd-sc .sc-rec { background: var(--p-warm); }