/* =====================================================================
   PRESET: "trades" (electricians, plumbers, HVAC, locksmiths, auto)
   Colourway "Cobalt + Teal". Typography: Archivo (heads) + Inter (body).
   Shapes: soft rounded cards, pill buttons. Hero: split + call panel.
   Change the variables below per client; keep the layout rules.
   Fonts: SIL Open Font License 1.1 (Google Fonts), self-hosted.
   ===================================================================== */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --c-brand: #1546c4; --c-brand-hover: #0f379c; --c-on-brand: #fff;
  --c-accent: #0b7a75; --c-ink: #0b2545; --c-text: #23344a; --c-muted: #4d5d70;
  --c-bg: #fff; --c-alt: #eef4fb; --c-line: #d6e1ee; --c-dark: #0b2545; --c-on-dark: #d3def0;
  --font-head: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head-weight: 800; --head-transform: none; --head-tracking: -.02em;
  --radius-card: 20px; --radius-btn: 999px; --radius-input: 12px; --radius-img: 24px;
  --btn-transform: none; --btn-tracking: 0; --btn-weight: 700;
  --card-border: 1px solid var(--c-line); --card-shadow: 0 10px 28px rgba(11,37,69,.08);
  --sec-pad: 64px;
}

/* ---- Hero: split with call panel ---- */
.hero-split { background: radial-gradient(1200px 500px at 0% 0%, #dce9fb 0%, transparent 60%), linear-gradient(180deg, #f5f9ff, #e8f0fb); padding: 40px 0 48px; border-bottom: 1px solid var(--c-line); }
.hero-split__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 940px) { .hero-split__grid { grid-template-columns: 1.15fr .85fr; gap: 48px; } .hero-split { padding: 72px 0; } }
.hero-split h1 span { color: var(--c-brand); }
.hero-split .lead { font-size: 1.15rem; color: var(--c-text); max-width: 34em; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.hero-badges li { background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 6px 12px; font-size: .88rem; font-weight: 600; color: var(--c-ink); }
.callpanel { background: var(--c-dark); color: var(--c-on-dark); border-radius: 28px; padding: 28px; box-shadow: 0 24px 60px rgba(11,37,69,.28); }
.callpanel h2 { color: #fff; font-size: 1.35rem; margin-bottom: .3em; }
.callpanel .num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 8vw, 2.6rem); color: #fff; text-decoration: none; letter-spacing: -.01em; margin: 6px 0 14px; }
.callpanel .btn--primary { background: #2f6bff; }
.callpanel .btn--primary:hover { background: #1f57e6; }
.callpanel .textback { background: rgba(255,255,255,.07); color: var(--c-on-dark); border-left-color: #5fd4c9; margin-top: 16px; }
.callpanel .textback svg { color: #5fd4c9; }
.callpanel small { display: block; margin-top: 12px; color: #a9bad3; }

/* ---- Emergency strip ---- */
.emergency { background: var(--c-accent); color: #fff; padding: 26px 0; }
.emergency__in { display: grid; gap: 14px; align-items: center; }
@media (min-width: 860px) { .emergency__in { grid-template-columns: 1fr auto; } }
.emergency h2 { color: #fff; font-size: 1.5rem; margin: 0 0 .2em; }
.emergency p { margin: 0; }
.emergency ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; }

/* ---- Service cards: icon row style ---- */
.svc .icon { border-radius: 50%; background: #e3edff; }
.svc h3 { margin-top: 2px; }
.svc a { font-weight: 700; text-decoration: none; display: inline-block; margin-top: 10px; }

/* ---- Sticky bar: one big call button ---- */
.actionbar .btn { min-height: 54px; font-size: 1.1rem; }