/* Heartland Heating & Cooling — "Comfort dispatch"
   Structure advantage: the hero is a dispatch board (today's windows + on-call), because for
   HVAC the sale is "can you come today?" Everything else supports that promise.
   Light, cool, trustworthy. Manrope for a modern-utility feel. */

.cs-body[data-trade="hvac"] {
  --cs-font: "Manrope", "Inter", system-ui, sans-serif;
  --cs-font-display: "Manrope", "Inter", system-ui, sans-serif;
  --cs-brand: #0e7c86;
  --cs-brand-dark: #0b5f67;
  --cs-brand-soft: rgba(14, 124, 134, 0.10);
  --cs-accent-2: #e07a1f; /* heat */
  --cs-cool: #2f8fd6;      /* cool */
  --cs-r: 12px;
  --cs-r-lg: 20px;
}
.cs-body[data-trade="hvac"][data-scheme="light"] { --cs-bg: #f4f7f8; --cs-bg-2: #e9eff1; --cs-surface: #ffffff; --cs-surface-2: #f0f4f5; }

/* Hero: text left, dispatch board right */
.hh-hero { padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 5vw, 72px); position: relative; overflow: hidden; }
.hh-hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; background: radial-gradient(60% 60% at 70% 30%, var(--cs-brand-soft), transparent 70%); pointer-events: none; }
.hh-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; }
.hh-hero .cs-h1 { max-width: 14ch; margin: 0 0 18px; }
.hh-hero .cs-h1 em { font-style: normal; color: var(--cs-brand); }
.hh-hero .cs-lead { margin-bottom: 26px; }
.hh-hero .cs-trust { margin-top: 22px; }

/* Dispatch board */
.hh-board { background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); box-shadow: var(--cs-shadow-lg); overflow: hidden; }
.hh-board-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--cs-line); background: var(--cs-surface-2); }
.hh-board-head strong { font-size: 14px; }
.hh-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--cs-brand-dark); }
.hh-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-brand); position: relative; }
.hh-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--cs-brand); opacity: 0; animation: hh-ping 2.4s ease-out infinite; }
@keyframes hh-ping { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
.hh-slots { list-style: none; padding: 8px 10px; display: grid; gap: 6px; }
.hh-slot { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; font-size: 14px; }
.hh-slot:hover { background: var(--cs-surface-2); }
.hh-slot time { font-weight: 700; font-variant-numeric: tabular-nums; }
.hh-slot .hh-slot-l { color: var(--cs-ink-2); }
.hh-slot .cs-pill { font-size: 11.5px; padding: 4px 9px; }
.hh-slot--open .cs-pill { background: var(--cs-brand-soft); color: var(--cs-brand-dark); border-color: transparent; }
.hh-slot--few .cs-pill { background: rgba(224, 122, 31, 0.12); color: #9a4f0d; border-color: transparent; }
.hh-slot--full { opacity: 0.55; }
.hh-board-foot { padding: 14px 18px 18px; border-top: 1px solid var(--cs-line); display: grid; gap: 10px; }
.hh-board-foot .cs-small { color: var(--cs-muted); }
.hh-oncall { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cs-line); font-size: 13.5px; color: var(--cs-ink-2); }
.hh-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cs-ink); color: var(--cs-bg); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.hh-oncall strong { color: var(--cs-ink); }

/* Triage: two doors */
.hh-triage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hh-door { position: relative; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--cs-r-lg); border: 1px solid var(--cs-line); background: var(--cs-surface); display: grid; gap: 12px; align-content: start; overflow: hidden; }
.hh-door::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--hh-door-c, var(--cs-brand)); }
.hh-door--urgent { --hh-door-c: var(--cs-accent-2); }
.hh-door--planned { --hh-door-c: var(--cs-cool); }
.hh-door .cs-eyebrow { color: var(--hh-door-c); margin: 0; }
.hh-door h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.hh-door ul { list-style: none; display: grid; gap: 8px; color: var(--cs-ink-2); font-size: 0.95rem; }
.hh-door li { display: flex; gap: 10px; }
.hh-door li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hh-door-c); flex: none; margin-top: 0.55em; }
.hh-door .cs-actions { margin-top: 6px; }

/* Season split */
.hh-season { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); overflow: hidden; background: var(--cs-surface); }
.hh-season > div { padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.hh-season > div + div { border-left: 1px solid var(--cs-line); }
.hh-season h3 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.hh-season h3 svg { width: 22px; height: 22px; stroke-width: 1.5; }
.hh-season--cool h3 svg { color: var(--cs-cool); }
.hh-season--heat h3 svg { color: var(--cs-accent-2); }
.hh-season p { color: var(--cs-ink-2); }
.hh-checks { list-style: none; display: grid; gap: 8px; font-size: 0.95rem; color: var(--cs-ink-2); }
.hh-checks li { display: flex; gap: 10px; align-items: flex-start; }
.hh-checks svg { width: 16px; height: 16px; color: var(--cs-brand); flex: none; margin-top: 3px; stroke-width: 2; }

/* Services + membership */
.hh-services { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.hh-svc { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--cs-line); }
.hh-svc li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--cs-line); align-items: baseline; }
.hh-svc strong { display: block; font-size: 1.05rem; }
.hh-svc span.cs-muted { font-size: 0.9rem; }
.hh-member { background: var(--cs-ink); color: var(--cs-bg); border-radius: var(--cs-r-lg); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.cs-body[data-scheme="dark"] .hh-member { background: var(--cs-surface-2); color: var(--cs-ink); border: 1px solid var(--cs-line); }
.hh-member .cs-eyebrow { color: var(--cs-brand); margin: 0; }
.hh-member h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.hh-member p { opacity: 0.8; font-size: 0.95rem; }
.hh-member ul { list-style: none; display: grid; gap: 8px; font-size: 0.95rem; }
.hh-member li { display: flex; gap: 10px; }
.hh-member li svg { width: 16px; height: 16px; color: var(--cs-brand); flex: none; margin-top: 3px; stroke-width: 2; }
.hh-member .cs-btn--ghost { color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.hh-member .cs-btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* Area */
.hh-area { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.hh-map { aspect-ratio: 5 / 4; }
.hh-map svg text { font-family: var(--cs-font); font-size: 11px; font-weight: 600; fill: var(--cs-ink-2); }
.hh-map .hh-dot { fill: var(--cs-brand); }
.hh-map .hh-ring { fill: var(--cs-brand-soft); stroke: var(--cs-brand); stroke-width: 1; opacity: 0.7; }
.hh-towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Request */
.hh-request { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.hh-request .cs-card { box-shadow: var(--cs-shadow); }
.hh-request-side { display: grid; gap: 18px; position: sticky; top: 90px; }
.hh-request-side .cs-h2 { margin-bottom: 6px; }
.hh-request-side ol { list-style: none; display: grid; gap: 10px; color: var(--cs-ink-2); font-size: 0.95rem; counter-reset: r; }
.hh-request-side ol li { display: flex; gap: 12px; counter-increment: r; }
.hh-request-side ol li::before { content: counter(r); width: 22px; height: 22px; border-radius: 50%; background: var(--cs-brand-soft); color: var(--cs-brand-dark); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }

@media (max-width: 960px) {
  .hh-hero-grid { grid-template-columns: 1fr; }
  .hh-services, .hh-area, .hh-request { grid-template-columns: 1fr; }
  .hh-request-side { position: static; }
}
@media (max-width: 680px) {
  .hh-triage, .hh-season { grid-template-columns: 1fr; }
  .hh-season > div + div { border-left: 0; border-top: 1px solid var(--cs-line); }
  .hh-slot { grid-template-columns: 84px 1fr auto; }
}