/* Design tokens: BEN OTTO ELECTRIC, LLC — Waconia & West Metro Residential Electrician
   Base system: electrical-residential
   Bespoke tuning: no existing brand colors supplied. Brand blue deepened from
   system #1a73c7 → #1965b8 for a more grounded, trustworthy neighbor feel
   (warmer authority, less corporate-tech). Accent shifted from system lime
   #4caf3f → #3da033 (forest-honest green) to complement the deeper blue and
   reinforce a clean, quality-workmanship character. Type and motion unchanged —
   Poppins/Inter at 200ms is right on-tone for this friendly residential brand.

   Contrast checks:
     body  #283440 on bg #ffffff = 13.6:1  PASS (≥4.5:1)
     on-brand #ffffff on brand #1965b8 = 5.92:1  PASS (≥4.5:1)
     btn text #ffffff on btn bg #1965b8 = 5.92:1  PASS (≥4.5:1)
     ink-strong #11202e on bg #ffffff = 17.7:1  PASS
     muted #566472 on bg #ffffff = 5.74:1  PASS
     on-band #ffffff on band-bg #11202e = 17.7:1  PASS
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{
  /* ── Surface & ink ──────────────────────────────────────────────────────── */
  --bg:#ffffff;
  --surface:#f7fafd;
  --ink:#283440;
  --ink-strong:#11202e;
  --muted:#566472;
  --line:#dfe8f0;

  /* ── Brand palette — bespoke Ben Otto ──────────────────────────────────── */
  /* Deeper, warmer residential blue vs. the system's sky-blue;
     reads as "licensed, trustworthy neighbor" over "corporate tech"          */
  --brand:#1965b8;
  --brand-dark:#0f4a8a;
  --brand-tint:#e3eef9;
  --on-brand:#ffffff;

  /* Forest-green accent: warm, quality-honest, harmonizes with the deep blue */
  --accent:#3da033;

  /* ── Backgrounds ────────────────────────────────────────────────────────── */
  --hero-bg:radial-gradient(1000px 470px at 14% -10%,#e3eef9,transparent),
            radial-gradient(740px 360px at 92% 6%,#e4f2e1,transparent),
            #f4f9fd;
  --header-bg:rgba(255,255,255,.88);
  --footer-bg:#eef4fa;
  --band-bg:#11202e;
  --on-band:#ffffff;
  --on-band-muted:#a9bccd;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-heading:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --fs-base:17px;
  --lh-body:1.66;
  --fw-body:400;
  --fw-head:700;
  --lh-head:1.12;
  --ls-head:-.01em;
  --fs-lead:1.2rem;
  --fs-h1:clamp(2.4rem,5.2vw,3.85rem);
  --fs-h2:clamp(1.7rem,3.6vw,2.5rem);
  --fs-h3:1.3rem;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container:1140px;
  --gutter:24px;
  --section-y:92px;
  --hero-y:102px;
  --nav-h:74px;

  /* ── Spacing scale ──────────────────────────────────────────────────────── */
  --space-3:10px;
  --space-4:16px;
  --space-5:26px;
  --space-6:30px;
  --space-7:56px;

  /* ── Components ─────────────────────────────────────────────────────────── */
  --btn-pad:15px 28px;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow:0 8px 24px rgba(17,32,46,.08);
  --shadow-lg:0 20px 48px rgba(17,32,46,.14);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur:200ms;
  --ease:cubic-bezier(.3,.7,.3,1);
}

/* ── Component accent overrides ─────────────────────────────────────────── */
.btn{background:var(--brand)}
.btn:hover{background:var(--brand-dark)}
.btn.ghost{background:transparent;color:var(--brand)}

/* Eyebrow and card icons use the forest-green accent */
.eyebrow{color:#2a7020}
.card .ic{background:#e4f2e1;color:#2a7020}