/* ==========================================================================
   Firefly Energy — Design System v2 (Mission 2A)
   Premium Google-inspired utility. Blue-led interaction, amber as brand accent.
   ========================================================================== */

/* --- 0. Font: Plus Jakarta Sans, variable, self-hosted, latin subset ------ */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Interaction — blue. Google-adjacent family, not Google's palette. */
  --blue-50:#EFF4FE;   --blue-100:#DCE8FD;  --blue-200:#BDD3FB;
  --blue-500:#3B7EF0;  --blue-600:#1A63DC;  /* PRIMARY — 5.44:1 on white */
  --blue-700:#1450B8;  /* hover — 7.32:1 */ --blue-800:#0F3D8C;  /* pressed / ring */

  /* Brand — Firefly amber. Accent only. Never a primary action. */
  --amber:#FFB017; --amber-600:#D98A00; --amber-50:#FFF8EB; --amber-200:#FFE3AC;

  /* Neutrals — slightly cool, to sit with the blue */
  --ink:#0F172A;         /* 18.4:1 */
  --ink-2:#334155;       /* 10.4:1 — secondary body */
  --ink-3:#64748B;       /* 5.1:1  — meta */
  --line:#E7ECF3;
  --line-2:#D4DCE7;
  --bg:#FFFFFF;
  --bg-alt:#F7F9FC;
  --bg-sunk:#EEF2F8;

  --ok:#0E7C5A; --warn:#B45309;

  /* Spacing — 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:44px; --s9:64px; --s10:88px; --s11:120px;

  /* Radius — larger and more confident than v1 */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --wrap:1180px; --prose:66ch;

  /* Type — Plus Jakarta Sans */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --t-xs:0.8125rem; --t-sm:0.9375rem; --t-base:1.0625rem; --t-md:1.125rem;
  --t-lg:1.3125rem; --t-xl:1.5rem; --t-2xl:1.9375rem; --t-3xl:2.5rem; --t-4xl:3.25rem;

  /* Elevation — layered, low alpha. Depth, not decoration. */
  --e1:0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --e2:0 2px 4px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
  --e3:0 4px 8px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.07);
  --e-blue:0 4px 14px rgba(26,99,220,.22);
}

/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:var(--t-base)/1.6 var(--font);
  font-feature-settings:'ss01' 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4{margin:0 0 var(--s5); font-weight:700; line-height:1.15; letter-spacing:-0.025em}
h1{font-size:var(--t-4xl); letter-spacing:-0.035em; font-weight:800}
h2{font-size:var(--t-2xl); letter-spacing:-0.03em}
h3{font-size:var(--t-md); margin-bottom:var(--s2); letter-spacing:-0.015em}
p{margin:0 0 var(--s5); max-width:var(--prose)}
ul,ol{max-width:var(--prose)}
a{color:var(--blue-600); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--blue-700)}
img{max-width:100%; height:auto; display:block}
strong{font-weight:700}

:focus-visible{outline:3px solid var(--blue-800); outline-offset:2px; border-radius:var(--r-sm)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s6)}
.section{padding-block:var(--s10)}
.section--alt{background:var(--bg-alt)}
.section--tight{padding-block:var(--s9)}
.lede{font-size:var(--t-md); color:var(--ink-2); max-width:58ch; line-height:1.6}
.eyebrow{display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-xs);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-600);
  margin:0 0 var(--s4)}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--amber); border-radius:2px}
.section__head{max-width:58ch; margin-bottom:var(--s8)}
.section__head h2{margin-bottom:var(--s3)}
.section__head p{margin:0; color:var(--ink-2); font-size:var(--t-md)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s4); top:var(--s4); z-index:100; background:#fff; padding:var(--s3) var(--s5);
  border-radius:var(--r-sm); box-shadow:var(--e3); outline:3px solid var(--blue-800)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 3. Brand ----------------------------------------------------------- */
.brand{display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--ink)}
.brand__mark{width:32px; height:32px; flex:0 0 32px}
.brand__name{font-size:var(--t-md); font-weight:800; letter-spacing:-0.03em; white-space:nowrap}
.brand__name span{font-weight:500; color:var(--ink-3)}
/* The Firefly logo lockup (logomark + wordmark): a tighter 6px icon-to-text gap.
   Scoped modifier so the shared .brand gap is untouched. The 6px taken out of the
   gap is returned as an outer right margin, so the lockup's footprint — and the
   position of the nav, header CTA and funnel call pill beside it — is unchanged. */
.brand--lockup{gap:6px; margin-right:6px}

/* --- 4. Buttons — blue primary ------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font:700 var(--t-sm)/1 var(--font); letter-spacing:-0.01em; text-decoration:none;
  cursor:pointer; padding:0 var(--s6); min-height:46px; border-radius:var(--r-md);
  border:1px solid transparent; transition:background-color .15s, border-color .15s,
  box-shadow .15s, transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue-600); color:#fff; box-shadow:var(--e-blue)}
.btn--primary:hover{background:var(--blue-700); color:#fff}
.btn--primary:active{background:var(--blue-800)}
.btn--secondary{background:#fff; color:var(--ink); border-color:var(--line-2); box-shadow:var(--e1)}
.btn--secondary:hover{background:var(--bg-alt); border-color:var(--ink-3); color:var(--ink)}
.btn--ghost{background:transparent; color:var(--blue-600); padding-inline:var(--s3)}
.btn--ghost:hover{background:var(--blue-50)}
.btn--lg{font-size:var(--t-base); min-height:54px; padding-inline:var(--s7); border-radius:var(--r-md)}
.btn--block{width:100%}
.btn svg{width:18px; height:18px; flex:0 0 18px}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7)}

/* --- 5. Header ---------------------------------------------------------- */
.header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.header__inner{display:flex; align-items:center; gap:var(--s7); min-height:70px}
.nav{margin-left:auto; display:flex; gap:var(--s1)}
.nav a{padding:var(--s2) var(--s4); border-radius:var(--r-sm); text-decoration:none;
  font-size:var(--t-sm); font-weight:600; color:var(--ink-2)}
.nav a:hover{background:var(--bg-sunk); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--blue-600); background:var(--blue-50)}
.header__cta{display:flex; align-items:center; gap:var(--s4)}
.header__tel{font-weight:700; font-size:var(--t-sm); text-decoration:none; color:var(--ink); white-space:nowrap}
.header__tel:hover{color:var(--blue-600)}
.nav-toggle{display:none; margin-left:auto; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:10px 14px; cursor:pointer; font:700 var(--t-sm) var(--font)}

/* --- 6. Hero — composed, with restrained depth --------------------------- */
.hero{position:relative; padding-block:var(--s10) var(--s9); overflow:hidden;
  background:
    radial-gradient(1100px 520px at 88% -12%, var(--blue-50) 0%, rgba(239,244,254,0) 62%),
    linear-gradient(180deg,#fff 0%,var(--bg-alt) 100%);
  border-bottom:1px solid var(--line);
}
.hero::before{ /* hairline grid motif — CSS only, no request */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(760px 420px at 82% 6%,#000 0%,transparent 72%);
          mask-image:radial-gradient(760px 420px at 82% 6%,#000 0%,transparent 72%);
}
.hero .wrap{position:relative}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:var(--s10); align-items:center}
.hero h1{margin-bottom:var(--s5)}
.hero__sub{font-size:var(--t-md); color:var(--ink-2); max-width:46ch; margin-bottom:0; line-height:1.6}
/* Voice amendment: supporting hero line — carries local/service relevance under the brand headline */
.hero__meta{font-size:var(--t-sm); color:var(--ink-3); max-width:52ch; margin:var(--s4) 0 0; line-height:1.6}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s6) 0 0; padding:0; list-style:none}
.chip{display:inline-flex; align-items:center; gap:6px; padding:7px var(--s4);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:650; color:var(--ink-2); box-shadow:var(--e1)}
.chip svg{width:14px; height:14px; color:var(--blue-600)}
.chip--amber svg{color:var(--amber-600)}

/* --- 7. Panels / cards -------------------------------------------------- */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--e3); padding:var(--s8)}
.panel__head{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5)}
.panel h2{font-size:var(--t-lg); margin:0; letter-spacing:-0.02em}
.panel__lead{font-size:var(--t-sm); color:var(--ink-2); margin:0 0 var(--s6)}
.q-grid{display:grid; gap:var(--s3)}
.q-grid .q-opt{min-height:64px}
.panel__opt{font-size:var(--t-xs); color:var(--ink-3); margin:var(--s4) 0 0; text-align:center}
.panel__note{font-size:var(--t-xs); color:var(--ink-3); text-align:center; margin:var(--s5) 0 0}
.panel__note a{font-weight:700}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s7); box-shadow:var(--e1); transition:box-shadow .15s, border-color .15s, transform .15s}
.card h3{margin-top:0}
.card p{font-size:var(--t-sm); color:var(--ink-2); margin-bottom:var(--s4); line-height:1.6}
.card--link:hover{box-shadow:var(--e3); border-color:var(--blue-200); transform:translateY(-2px)}
.card__link{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm);
  font-weight:700; color:var(--blue-600); text-decoration:none}
.card__link::after{content:"→"; transition:transform .15s}
.card--link:hover .card__link::after{transform:translateX(3px)}

/* Icon tile — the single biggest perceived-quality lift over v1 */
.itile{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-md);
  background:var(--blue-50); color:var(--blue-600); margin-bottom:var(--s5); flex:0 0 44px}
.itile svg{width:22px; height:22px}
.itile--amber{background:var(--amber-50); color:var(--amber-600)}
.itile--sm{width:36px; height:36px; border-radius:var(--r-sm); margin:0; flex:0 0 36px}
.itile--sm svg{width:18px; height:18px}

.grid{display:grid; gap:var(--s6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* --- 8. Trust ----------------------------------------------------------- */
.trust{background:#fff; border-bottom:1px solid var(--line)}
.trust__list{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6);
  list-style:none; margin:0; padding:var(--s8) 0; max-width:none}
.trust__list li{display:flex; align-items:center; gap:var(--s4)}
.trust__list b{display:block; font-size:var(--t-sm); font-weight:700; letter-spacing:-0.01em}
.trust__list span{display:block; font-size:var(--t-xs); color:var(--ink-3); line-height:1.45}

/* --- 9. Service selector — aligned with the quote journey ---------------- */
.selector{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); margin-top:var(--s8)}
.selector a{display:flex; flex-direction:column; gap:var(--s4); padding:var(--s6);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  text-decoration:none; color:var(--ink); font-size:var(--t-sm); font-weight:700;
  line-height:1.35; letter-spacing:-0.01em; box-shadow:var(--e1);
  transition:border-color .15s, box-shadow .15s, transform .15s, background-color .15s}
.selector a:hover{border-color:var(--blue-500); box-shadow:var(--e3);
  transform:translateY(-2px); background:#fff; color:var(--ink)}
.selector a:hover .itile{background:var(--blue-600); color:#fff}
.selector .itile{transition:background-color .15s, color .15s; margin:0}

/* --- 10. Steps ---------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6);
  list-style:none; counter-reset:st; margin:var(--s8) 0 0; padding:0}
.steps li{counter-increment:st; position:relative; padding-top:var(--s7)}
.steps li::before{content:counter(st); position:absolute; top:0; left:0;
  display:grid; place-items:center; width:30px; height:30px; border-radius:var(--r-pill);
  background:var(--blue-600); color:#fff; font-size:var(--t-xs); font-weight:800}
.steps li::after{content:""; position:absolute; top:15px; left:38px; right:-12px; height:1px;
  background:var(--line-2)}
.steps li:last-child::after{display:none}
.steps h3{margin:0 0 var(--s2)}
.steps p{font-size:var(--t-sm); color:var(--ink-2); margin:0}

/* --- 11. Peter ---------------------------------------------------------- */
.peter{display:grid; grid-template-columns:300px 1fr; gap:var(--s10); align-items:center}
.peter__card{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--s8); text-align:center; box-shadow:var(--e2)}
.peter__avatar{width:96px; height:96px; margin:0 auto var(--s5); border-radius:var(--r-pill);
  background:linear-gradient(160deg,var(--blue-50),var(--amber-50));
  border:1px solid var(--line); display:grid; place-items:center; color:var(--blue-600)}
.peter__avatar svg{width:44px; height:44px}
.peter__card b{display:block; font-size:var(--t-md); font-weight:800; letter-spacing:-0.02em}
.peter__card span{display:block; font-size:var(--t-sm); color:var(--ink-3); margin-bottom:var(--s5)}
.credentials{list-style:none; padding:0; margin:var(--s6) 0 0; display:grid; gap:var(--s3)}
.credentials li{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--t-sm); color:var(--ink-2)}
.credentials svg{width:18px; height:18px; flex:0 0 18px; margin-top:2px; color:var(--blue-600)}
.credentials b{color:var(--ink); font-weight:700}

/* --- 12. (Reviews component removed in Mission 8A: no unverified testimonials) --- */

/* --- 13. Areas ---------------------------------------------------------- */
.areas{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6); margin-top:var(--s8)}
.areas__col{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6)}
.areas h3{font-size:var(--t-sm); margin:0 0 var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line); color:var(--ink)}
.areas ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.areas a{font-size:var(--t-sm); color:var(--blue-600); text-decoration:none; font-weight:600}
.areas a:hover{text-decoration:underline}
.areas .plain{font-size:var(--t-sm); color:var(--ink-3)}

/* --- 14. FAQ ------------------------------------------------------------ */
.faq{max-width:760px; margin-top:var(--s8); border:1px solid var(--line);
  border-radius:var(--r-lg); background:#fff; overflow:hidden; box-shadow:var(--e1)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:var(--s6) var(--s9) var(--s6) var(--s6);
  font-weight:700; font-size:var(--t-base); letter-spacing:-0.015em; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--bg-alt)}
.faq summary::after{content:""; position:absolute; right:var(--s6); top:50%; width:9px; height:9px;
  margin-top:-6px; border-right:2px solid var(--blue-600); border-bottom:2px solid var(--blue-600);
  transform:rotate(45deg); transition:transform .18s}
.faq details[open] summary{background:var(--blue-50)}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq details p{padding:0 var(--s6) var(--s6); margin:0; color:var(--ink-2); font-size:var(--t-sm); max-width:none}

/* --- 15. CTA band ------------------------------------------------------- */
.cta-band{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:var(--s10) var(--s8);
  background:linear-gradient(155deg,#12295C 0%,#0F172A 62%); color:#fff; text-align:center}
.cta-band::before{content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(560px 280px at 84% 0%,rgba(59,126,240,.34),transparent 66%)}
.cta-band > *{position:relative}
.cta-band h2{color:#fff; margin-bottom:var(--s4)}
.cta-band p{color:#C3D0E4; max-width:48ch; margin:0 auto var(--s7); font-size:var(--t-md)}
.cta-band .btn-row{justify-content:center; margin-top:0}
.cta-band .btn--secondary{background:rgba(255,255,255,.06); color:#fff;
  border-color:rgba(255,255,255,.24); box-shadow:none}
.cta-band .btn--secondary:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); color:#fff}

/* --- 16. Breadcrumbs / related ------------------------------------------ */
.crumbs{padding-top:var(--s6); font-size:var(--t-sm)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); margin:0; padding:0; max-width:none}
.crumbs li{color:var(--ink-3)}
.crumbs li::after{content:"/"; margin-left:var(--s2); color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--blue-600); text-decoration:underline}

.related-group + .related-group{margin-top:var(--s8)}
.grid + .related-group,.cards + .related-group{margin-top:var(--s9)}
.related__h{font-size:var(--t-md); margin:0 0 var(--s4)}
.related{display:flex; flex-wrap:wrap; gap:var(--s3); margin:0; padding:0; list-style:none}
.related a{display:inline-block; padding:9px var(--s5); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:600; color:var(--ink-2);
  text-decoration:none; box-shadow:var(--e1); transition:border-color .15s, color .15s}
.related a:hover{border-color:var(--blue-500); color:var(--blue-600)}

/* --- 17. Prose / callout ------------------------------------------------ */
.prose{max-width:var(--prose)}
.prose p{color:var(--ink-2)}
.prose ul{padding-left:var(--s6); margin-bottom:var(--s5)}
.prose li{margin-bottom:var(--s3); color:var(--ink-2)}
.prose li::marker{color:var(--blue-500)}
.callout{display:flex; gap:var(--s5); background:var(--blue-50); border:1px solid var(--blue-100);
  border-radius:var(--r-lg); padding:var(--s7); margin:var(--s7) 0; max-width:var(--prose)}
.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}

.split{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s10); align-items:start}

/* --- 18. Footer --------------------------------------------------------- */
.footer{background:var(--bg-alt); border-top:1px solid var(--line); margin-top:var(--s11);
  padding-block:var(--s10) var(--s7)}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s9)}
.footer h3{font-size:var(--t-sm); margin:0 0 var(--s4)}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.footer a{font-size:var(--t-sm); color:var(--ink-2); text-decoration:none}
.footer a:hover{color:var(--blue-600)}
.footer__legal{margin-top:var(--s9); padding-top:var(--s6); border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--ink-3); line-height:1.6}
.footer__legal p{max-width:none; margin:0 0 var(--s2)}

/* --- 19. Mobile sticky bar ---------------------------------------------- */
.mobile-bar{display:none}
@media (max-width:900px){
  .mobile-bar{display:grid; grid-template-columns:1fr 1.25fr; gap:var(--s2);
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); border-top:1px solid var(--line-2);
    backdrop-filter:blur(12px); box-shadow:0 -4px 20px rgba(15,23,42,.07)}
  .mobile-bar .btn{min-height:50px; font-size:var(--t-sm); padding-inline:var(--s4)}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   20. QUOTE FLOW — progressive, one decision at a time
   ========================================================================== */
.q-shell{min-height:100vh; display:flex; flex-direction:column; background:var(--bg-alt)}
.q-top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.q-top__inner{display:flex; align-items:center; gap:var(--s5); min-height:66px}
.q-exit{margin-left:auto; font-size:var(--t-sm); color:var(--ink-3); text-decoration:none; font-weight:600}
.q-exit:hover{color:var(--ink)}

.q-progress{height:3px; background:var(--bg-sunk)}
.q-progress__bar{height:100%; background:var(--blue-600); width:20%;
  transition:width .35s cubic-bezier(.4,0,.2,1); border-radius:0 3px 3px 0}

.q-main{flex:1; display:grid; place-items:start center; padding:var(--s9) var(--s6) var(--s10)}
.q-inner{width:100%; max-width:720px}
.q-meta{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5)}
.q-back{display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font:600 var(--t-sm) var(--font); color:var(--ink-3); padding:6px 10px; border-radius:var(--r-sm)}
.q-back:hover{background:var(--bg-sunk); color:var(--ink)}
[hidden]{display:none!important}
.q-count{font-size:var(--t-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.q-step{display:none}
.q-step[data-active]{display:block; animation:qin .28s cubic-bezier(.4,0,.2,1)}
@keyframes qin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.q-step h2{font-size:var(--t-3xl); margin-bottom:var(--s3); letter-spacing:-0.035em; font-weight:800; margin-top:0}
.q-step .q-hint{color:var(--ink-2); font-size:var(--t-md); margin-bottom:var(--s8)}

/* selectable cards */
.q-options{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-bottom:var(--s7)}
.q-options--1{grid-template-columns:1fr}
.q-opt{display:flex; align-items:center; gap:var(--s5); width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s6);
  font:700 var(--t-sm)/1.35 var(--font); letter-spacing:-0.01em; color:var(--ink);
  min-height:74px; box-shadow:var(--e1); text-decoration:none;
  transition:border-color .14s, box-shadow .14s, background-color .14s, transform .14s}
a.q-opt,a.q-opt:hover,a.q-opt:visited{text-decoration:none; color:var(--ink)}
.q-opt:hover{border-color:var(--blue-500); box-shadow:var(--e2); transform:translateY(-1px)}
.q-opt[aria-pressed="true"]{border-color:var(--blue-600); background:var(--blue-50); box-shadow:var(--e-blue)}
.q-opt[aria-pressed="true"] .itile{background:var(--blue-600); color:#fff}
.q-opt .itile{margin:0}
.q-opt__check{margin-left:auto; width:22px; height:22px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-2); flex:0 0 22px; display:grid; place-items:center; color:#fff}
.q-opt[aria-pressed="true"] .q-opt__check{background:var(--blue-600); border-color:var(--blue-600)}
.q-opt__check svg{width:13px; height:13px; opacity:0}
.q-opt[aria-pressed="true"] .q-opt__check svg{opacity:1}

/* fields */
.q-field{margin-bottom:var(--s6)}
.q-field label{display:block; font-size:var(--t-sm); font-weight:700; margin-bottom:var(--s2)}
.q-field input,.q-field textarea{width:100%; padding:15px var(--s5); font:var(--t-md) var(--font);
  color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-md); min-height:56px}
.q-field input:focus,.q-field textarea:focus{border-color:var(--blue-600);
  box-shadow:0 0 0 4px var(--blue-100); outline:none}
.q-field input::placeholder{color:#9AA7B8}
.q-hint-sm{font-size:var(--t-xs); color:var(--ink-3); margin:var(--s2) 0 0}
.q-postcode{max-width:280px; text-transform:uppercase; letter-spacing:.05em; font-weight:700}

.q-actions{display:flex; gap:var(--s3); align-items:center; margin-top:var(--s7)}
.q-reassure{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s6);
  font-size:var(--t-xs); color:var(--ink-3)}
.q-reassure svg{width:15px; height:15px; color:var(--ok)}

.q-summary{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6); margin-bottom:var(--s7); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6)}
.q-summary div{font-size:var(--t-xs)}
.q-summary span{display:block; color:var(--ink-3); margin-bottom:2px}
.q-summary b{font-size:var(--t-sm); font-weight:700; letter-spacing:-0.01em}

.q-done{text-align:center; padding:var(--s10) 0}
.q-done .itile{margin:0 auto var(--s6); width:64px; height:64px; background:#E7F6EF; color:var(--ok)}
.q-done .itile svg{width:32px; height:32px}

/* --- 21. Responsive ----------------------------------------------------- */
@media (max-width:1100px){
  .selector{grid-template-columns:repeat(3,1fr)}
  .areas,.trust__list{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li::after{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__grid{gap:var(--s9)}
}
@media (max-width:900px){
  :root{--t-4xl:2.375rem; --t-3xl:1.9375rem; --t-2xl:1.625rem; --s10:64px; --s11:80px}
  .hero__grid,.peter,.split{grid-template-columns:1fr; gap:var(--s8)}
  .hero{padding-block:var(--s9) var(--s8)}
  .nav,.header__cta{display:none}
  /* Open state. nav.js clears [hidden] to open the panel; the base rule above
     cannot be the only one or the menu could never appear. Without JS the nav
     has no [hidden] attribute, so the links stay reachable. */
  .nav:not([hidden]){display:flex; flex-direction:column; gap:2px;
    position:absolute; left:0; right:0; top:100%; margin:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--e3); padding:var(--s3) var(--s5) var(--s5)}
  .nav:not([hidden]) a{padding:var(--s4); font-size:var(--t-base)}
  .nav-toggle{display:block}
  .header__inner{min-height:62px}
  .grid--2,.grid--3{grid-template-columns:1fr}
  .cta-band{padding:var(--s9) var(--s6)}
  .q-main{padding:var(--s7) var(--s5) var(--s10)}
  .q-step h2{font-size:var(--t-2xl)}
}
@media (max-width:600px){
  :root{--t-4xl:2.0625rem}
  .selector,.areas,.trust__list,.steps,.footer__grid,.q-options{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
  .btn-row{flex-direction:column}
  .panel{padding:var(--s6)}
  .q-opt{min-height:66px; padding:var(--s4) var(--s5)}
  .q-actions .btn{width:100%}
  .q-actions{flex-direction:column-reverse}
}

/* --- 22. Motion / print ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
@media print{.header,.mobile-bar,.cta-band,.q-top{display:none}}

/* programmatic step focus: keep focus for AT, suppress the visible ring */
.q-step h2:focus{outline:none}

/* --- Hero headline: deliberate two-line treatment (locked copy) ----------
   Each sentence is its own line box, so the break is intentional rather than a
   wrap artefact. Sizes are set so the longer line ('Professional electrician.')
   always fits its column — measured in-browser at 320-1600px, not estimated. */
.hero__h1 span{display:block}
.hero__h1{text-wrap:balance}                      /* safety net if a line ever wraps */
:root{--t-4xl:3rem}                               /* 48px - desktop, 2-col hero */
@media (max-width:1150px){:root{--t-4xl:2.25rem}} /* 36px - narrow 2-col and 1-col */
@media (max-width:600px){:root{--t-4xl:1.75rem}}  /* 28px - phones */
@media (max-width:360px){:root{--t-4xl:1.5rem}}   /* 24px - very small phones */


/* --- Mission 2B amendments -------------------------------------------- */

/* 2. Quote progress: five equal segments spanning the full content column,
      replacing the single left-anchored bar. Same states, same behaviour. */
.q-track{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2);
  list-style:none; margin:0 0 var(--s5); padding:0; width:100%}
.q-track li{height:4px; border-radius:var(--r-pill); background:var(--bg-sunk);
  transition:background-color .32s cubic-bezier(.4,0,.2,1)}
.q-track[data-at="1"] li:nth-child(-n+1),
.q-track[data-at="2"] li:nth-child(-n+2),
.q-track[data-at="3"] li:nth-child(-n+3),
.q-track[data-at="4"] li:nth-child(-n+4),
.q-track[data-at="5"] li:nth-child(-n+5){background:var(--blue-600)}
/* Back left, step count right — balanced across the same width */
.q-meta{justify-content:space-between; width:100%}
.q-back{margin-left:calc(var(--s3) * -1)}   /* optical align with the track edge */


/* "How it works": .steps is an <ol>, so the base ul,ol{max-width:66ch} rule was
   capping it at 821px inside a 1132px content area and bunching the four steps
   left. Release the cap so the existing 4-column grid fills the section evenly. */
.steps{max-width:none}
.steps p{max-width:none}

/* Trust strip: descriptions now wrap to two lines in a 4-column row, so align
   each icon to the top of its item rather than centring it against tall text. */
.trust__list li{align-items:flex-start}
.trust__list li > span:last-child{padding-top:2px}

/* --- 20. Quote funnel additions (Mission 4) ------------------------------ */
/* Steps are hidden ONLY once the script confirms it is running. Without JS
   every step renders and the single form still submits. */
.q-js .q-step{display:none}
.q-js .q-step[data-active]{display:block; animation:qin .28s cubic-bezier(.4,0,.2,1)}
.q-h{font-size:var(--t-3xl); margin:0 0 var(--s3); letter-spacing:-0.035em; font-weight:800}
.q-form{margin:0}
.q-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.q-opt-tag{font-weight:500; color:var(--ink-3); font-size:var(--t-xs)}
.q-error{background:#FDECEC; border:1px solid #F3B7B7; color:#8A1F1F;
  padding:var(--s4) var(--s5); border-radius:var(--r-md); margin:0 0 var(--s6); font-size:var(--t-sm); font-weight:600}
.q-progress__bar{transition:width .3s cubic-bezier(.4,0,.2,1)}
.q-done .itile{margin:0 auto var(--s6); width:64px; height:64px; background:#E7F6EF; color:var(--ok);
  display:flex; align-items:center; justify-content:center; border-radius:var(--r-lg)}
.q-done .itile svg{width:32px; height:32px}
.q-done h1{font-size:var(--t-3xl); margin-bottom:var(--s4)}

/* --- 21. Peter's lead area (private, authenticated) ---------------------- */
body.leads{background:var(--bg-alt); margin:0; font:var(--t-base)/1.5 var(--font); color:var(--ink)}
.lead-wrap{width:100%; max-width:760px; margin:0 auto; padding-inline:var(--s5)}
.lead-top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.lead-top__inner{display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:var(--s4)}
.lead-brand{font-weight:800; letter-spacing:-0.02em}
.lead-back,.lead-out{font-size:var(--t-sm); font-weight:700; text-decoration:none; color:var(--blue-600);
  display:inline-flex; align-items:center; min-height:44px}
.lead-out{color:var(--ink-3)}
.lead-main{padding-block:var(--s7) var(--s10)}
.lead-h1{font-size:var(--t-2xl); margin:0 0 var(--s3); letter-spacing:-0.03em}
.lead-h2{font-size:var(--t-md); margin:var(--s8) 0 var(--s3)}
.lead-sub{color:var(--ink-2); font-size:var(--t-sm); margin:0 0 var(--s6)}
.lead-hint{color:var(--ink-3); font-size:var(--t-xs); margin:0 0 var(--s3)}
.lead-empty{color:var(--ink-2)}
.lead-flash{background:#E7F6EF; border:1px solid #B7E3CD; color:#14563A;
  padding:var(--s4) var(--s5); border-radius:var(--r-md); font-size:var(--t-sm); font-weight:600; margin:0 0 var(--s6)}
.lead-flash--warn{background:#FDECEC; border-color:#F3B7B7; color:#8A1F1F}
.lead-filter{display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s6)}
.lead-filter a{font-size:var(--t-xs); font-weight:700; padding:0 var(--s4); border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line); color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px}   /* thumb-sized: Peter uses this in a van */
.lead-filter a[aria-current]{background:var(--blue-600); border-color:var(--blue-600); color:#fff}
.lead-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.lead-card__link{display:grid; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5); text-decoration:none; color:var(--ink); box-shadow:var(--e1)}
.lead-card__link:hover{border-color:var(--blue-500)}
.lead-card__top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.lead-card__top b{font-size:var(--t-base); letter-spacing:-0.01em}
.lead-card__job{font-size:var(--t-sm); font-weight:600; color:var(--blue-600)}
.lead-card__meta{font-size:var(--t-xs); color:var(--ink-3)}
.lead-warn{font-size:var(--t-xs); font-weight:700; color:#8A1F1F}
.lead-pill{font-size:var(--t-xs); font-weight:700; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--bg-sunk); color:var(--ink-2); white-space:nowrap}
.lead-pill--new{background:var(--blue-50); color:var(--blue-600)}
.lead-pill--won{background:#E7F6EF; color:#14563A}
.lead-pill--lost{background:#F1F2F4; color:var(--ink-3)}
.lead-pill--uncontactable{background:#FFF3E0; color:#8A5A00}
.lead-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin:0 0 var(--s7)}
.lead-actions .btn{flex:1 1 auto; min-height:52px}
.lead-facts{display:grid; grid-template-columns:120px 1fr; gap:var(--s3) var(--s4);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); margin:0}
.lead-facts dt{font-size:var(--t-xs); color:var(--ink-3); font-weight:700}
.lead-facts dd{margin:0; font-size:var(--t-sm); font-weight:600; word-break:break-word}
.lead-quote{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5)}
.lead-quote p{margin:0 0 var(--s3); color:var(--ink-2); font-size:var(--t-sm)}
.lead-quote p:last-child{margin-bottom:0}
.lead-form select,.lead-form textarea{width:100%; padding:14px var(--s4); font:var(--t-base) var(--font);
  border:1.5px solid var(--line-2); border-radius:var(--r-md); background:#fff; color:var(--ink); min-height:52px}
.lead-form textarea{min-height:110px; resize:vertical}
.lead-form select:focus,.lead-form textarea:focus{border-color:var(--blue-600); outline:3px solid var(--blue-50)}
.lead-save{margin-top:var(--s5)}
.lead-save .btn{width:100%}
.lead-form--resend{margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center}
.lead-form--resend .btn{min-height:48px}
@media (max-width:600px){
  .lead-facts{grid-template-columns:1fr; gap:2px var(--s4)}
  .lead-facts dd{margin-bottom:var(--s3)}
  .lead-actions .btn{flex:1 1 100%}
}

/* The funnel renders its own compact header; the site chrome would compete
   with it and push the first question below the fold on a phone. */
.quote-shell .header,
.quote-shell .mobile-bar,
.quote-shell .footer{display:none}
.quote-shell{background:var(--bg-alt)}

/* --- 22. Mission 4.1 conversion pass ------------------------------------ */
/* Peter's number, on screen at every step. The form is never the only path. */
.q-call{display:inline-flex; align-items:center; gap:var(--s2); margin-left:auto;
  padding:8px var(--s4); border-radius:var(--r-pill); background:var(--blue-50);
  color:var(--blue-600); text-decoration:none; font-size:var(--t-sm); min-height:44px}
.q-call:hover{background:var(--blue-100,#DCE8FD)}
.q-call svg{width:17px; height:17px; flex:0 0 17px}
.q-call strong{font-weight:800; letter-spacing:-0.01em; white-space:nowrap}
.q-call__label{display:none}
@media (min-width:560px){ .q-call__label{display:inline} }
/* Mission 8A: on the narrowest phones the logo, the gap and the number pill did not
   fit the funnel's top bar (2px over at 360, 42px at 320). Tighten only this bar's gap
   and the pill's side padding, and let the number break at its space when there is
   still no room. Type size, tap height and the pill itself are unchanged. */
@media (max-width:389px){
  .q-top__inner{gap:var(--s3)}
  .q-call{padding-inline:10px; min-width:0}
  .q-call strong{white-space:normal; line-height:1.2}
}

/* An error belongs beside the field it is about, not at the top of the page. */
.q-field-error{margin:var(--s2) 0 0; font-size:var(--t-sm); font-weight:650; color:#B42318}
.q-field-error::before{content:"↑ "; font-weight:700}
.panel__reassure{font-size:var(--t-sm); color:var(--ink-2); background:var(--bg-sunk);
  border-radius:var(--r-md); padding:var(--s4); margin:0 0 var(--s6); line-height:1.5}
/* Without JS the funnel cannot be completed, so hide it and show the phone.
   These rules live inside <noscript> semantics via the .q-js gate: the form is
   only revealed once the script has confirmed it is running. */
.q-nojs{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s7); margin-bottom:var(--s7)}
.q-nojs p{color:var(--ink-2); margin:0 0 var(--s5)}
html:not(.q-js) #qform,
html:not(.q-js) .q-meta,
html:not(.q-js) .q-progress{display:none}
/* Turnstile in interaction-only mode usually renders nothing at all; this just
   stops it collapsing awkwardly on the rare occasion it does show. */
.q-verify{margin:0 0 var(--s5)}
.q-verify:empty{margin:0}