/* ============================================================
   The Lead Replacement Company
   Aesthetic: a solid North-West trades firm, built like
   infrastructure. Flat colour, bordered components, no
   gradients, no glass, no glows.
   Type: Archivo (display) / IBM Plex Sans (body)
   ============================================================ */
:root{
  --bg:#eceff4;
  --surface:#fbfcfe;
  --ink:#131e33;
  --muted:#58657d;
  --brand:#2166d8;
  --brand-deep:#16244a;
  --accent:#f2a71b;
  --accent-ink:#26200c;
  --border:#d3dae5;
  --border-dark:rgba(255,255,255,.18);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --wrap:1160px;
  --r:8px;

  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--bg);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s6)}
.h2{font-family:var(--f-display);font-weight:800;font-size:clamp(27px,3.4vw,40px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);max-width:20ch}
.h2--light{color:#fff}
.lead{font-size:clamp(16.5px,1.5vw,18.5px);color:var(--muted);max-width:60ch;margin-top:var(--s4)}
.lead--light{color:#c9d5ec}

/* kicker */
.eyebrow{font-family:var(--f-display);font-weight:700;font-size:14.5px;color:var(--brand)}
.eyebrow--dark{color:var(--brand)}
.eyebrow--light{color:var(--accent)}
.accentword{color:var(--accent);white-space:nowrap}

/* ---------- Buttons (flat, 8px, no glow) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);font-weight:700;
  font-size:16px;line-height:1;padding:14px 22px;border-radius:var(--r);border:2px solid transparent;transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn--sm{padding:10px 16px;font-size:14.5px}
.btn--lg{padding:16px 26px;font-size:17px}
.btn--block{width:100%;margin-top:var(--s2)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:#1a55bd}
.btn--grant{background:var(--accent);color:var(--accent-ink)}
.btn--grant:hover{background:#e39a12}
.btn--line{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn--line:hover{background:var(--brand);color:#fff}
.btn--line-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--line-light:hover{background:var(--surface);color:var(--ink)}
.btn--soft{background:var(--bg);color:var(--ink);border-color:var(--border)}
.btn--soft:hover{background:#e2e7ef}

/* ---------- Notification bar ---------- */
.notice{background:var(--ink);color:#dbe3f2;font-size:14.5px}
.notice.is-hidden{display:none}
.notice__inner{max-width:var(--wrap);margin-inline:auto;padding:var(--s2) var(--s6);display:flex;align-items:center;gap:var(--s4)}
.notice__text{flex:1;min-width:0}
.notice__badge{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:800;font-size:12.5px;padding:2px 8px;border-radius:4px;margin-right:var(--s2)}
.notice__cta{color:#fff;font-family:var(--f-display);font-weight:700;font-size:14px;white-space:nowrap;border-bottom:1px solid var(--accent);padding-bottom:1px}
.notice__cta:hover{color:var(--accent)}
.notice__dismiss{color:#8595b5;font-size:22px;line-height:1;flex:none}
.notice__dismiss:hover{color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border);transition:padding .15s ease}
.site-header.is-stuck{border-bottom-color:#c4cddb}
.site-header__inner{max-width:var(--wrap);margin-inline:auto;padding:14px var(--s6);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.site-header.is-stuck .site-header__inner{padding-top:10px;padding-bottom:10px}
.brand__mark{height:44px;width:auto;transition:height .15s ease}
.site-header.is-stuck .brand__mark{height:38px}
.site-header__actions{display:flex;align-items:center;gap:var(--s4)}
.phone-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;color:var(--ink);white-space:nowrap}
.phone-link svg{color:var(--brand)}
.phone-link:hover{color:var(--brand)}

/* ---------- Hero (split, flat) ---------- */
.hero{max-width:var(--wrap);margin-inline:auto;padding:var(--s16) var(--s6);display:grid;grid-template-columns:1.06fr .94fr;gap:var(--s12);align-items:center}
.hero__copy{max-width:600px}
.hero__title{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5vw,58px);line-height:1.03;letter-spacing:-.02em;color:var(--ink);margin:var(--s4) 0 var(--s4)}
.hero__sub{font-size:clamp(16.5px,1.5vw,19px);color:var(--muted);max-width:500px;margin-bottom:var(--s8)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.hero__call{font-size:15px;color:var(--muted)}
.hero__call a{color:var(--ink);font-weight:700;font-family:var(--f-display);border-bottom:2px solid var(--brand)}
.hero__panel{position:relative;align-self:stretch;min-height:360px;background:var(--brand);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:var(--s12)}
.hero__frame{background:var(--surface);border:1px solid rgba(255,255,255,.55);border-radius:var(--r);overflow:hidden;width:100%;max-width:330px}
.hero__frame img{width:100%;height:auto;display:block}
.hero__mascot{position:absolute;right:6px;bottom:0;width:172px;height:auto}

/* ---------- Trust strip ---------- */
.trust{background:var(--ink)}
.trust__inner{max-width:var(--wrap);margin-inline:auto;padding:14px var(--s6);display:flex;flex-wrap:wrap;gap:10px var(--s8);justify-content:space-between}
.trust__item{color:#c9d5ec;font-size:14.5px;display:inline-flex;align-items:center;gap:8px}
.trust__label{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--accent)}

/* ---------- Sections ---------- */
.section{padding:var(--s16) 0}

/* why: 2-column editorial + numbered list */
.why{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:start}
.deflist{list-style:none;border-top:1px solid var(--border)}
.deflist__row{padding:var(--s6) 0;border-bottom:1px solid var(--border)}
.deflist__title{font-family:var(--f-display);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:4px}
.deflist__row p{color:var(--muted);font-size:15.5px}

/* grant: flat cobalt + connected numbered sequence */
.section--grant{background:var(--brand);color:#fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:var(--s8) 0 var(--s8);border-top:2px solid rgba(255,255,255,.28)}
.step{padding:var(--s6);border-right:1px solid rgba(255,255,255,.18);position:relative}
.step:first-child{padding-left:0}
.step:last-child{border-right:0;padding-right:0}
.step__num{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:800;font-size:18px;margin:-2px 0 var(--s4);border-radius:2px}
.step__title{font-family:var(--f-display);font-size:19px;font-weight:700;color:#fff;margin-bottom:6px}
.step p{color:#cfdaf0;font-size:15.5px;max-width:34ch}
.section__cta{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.section__cta-note{color:#bcccec;font-size:14.5px}

/* reviews: feature + row */
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);margin-bottom:var(--s8);flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:8px}
.rating__num{font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--ink)}
.rating__stars{color:var(--accent);letter-spacing:1px}
.rating__meta{color:var(--muted);font-size:13.5px}
.quote{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s6)}
.quote--feature{background:transparent;border:0;border-radius:0;padding:var(--s4) 0;margin-bottom:var(--s4)}
.quote--feature p{font-size:clamp(18px,2vw,22px);line-height:1.4;color:var(--ink);max-width:60ch}
.quote p{font-size:15.5px;color:var(--ink);margin-bottom:var(--s3)}
.quote footer{font-family:var(--f-display);font-weight:700;font-size:14.5px;color:var(--brand)}
.reviews__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

/* CTA band (flat navy) */
.ctaband{background:var(--brand-deep);color:#fff}
.ctaband__inner{padding:var(--s12) var(--s6);display:flex;justify-content:space-between;align-items:center;gap:var(--s8);flex-wrap:wrap}
.ctaband__title{font-family:var(--f-display);font-weight:800;font-size:clamp(23px,2.8vw,32px);color:#fff;max-width:18ch;line-height:1.1}
.ctaband__sub{color:#c2d0ea;margin-top:8px}
.ctaband__actions{display:flex;flex-direction:column;gap:var(--s3);min-width:250px}
.ctaband__actions .btn{width:100%}
.ctaband__call{color:#c2d0ea;font-size:14.5px;text-align:center}
.ctaband__call a{color:#fff;border-bottom:1px solid var(--accent)}

/* footer */
.site-footer{background:var(--brand-deep);color:#aebdda}
.site-footer__inner{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s12);padding:var(--s12) var(--s6) var(--s8)}
.site-footer__mark{height:48px;width:auto;margin-bottom:var(--s4)}
.site-footer__brand p{font-size:14.5px;color:#93a4c6;max-width:52ch}
.site-footer__label{font-family:var(--f-display);font-weight:700;font-size:13.5px;color:var(--accent);margin-bottom:var(--s2)}
.site-footer__phone{color:#fff;font-family:var(--f-display);font-weight:700;font-size:22px}
.site-footer__reg{font-size:13.5px;color:#93a4c6;margin-top:var(--s2)}
.site-footer__smallprint{font-size:12.5px;color:#7d8fb3;margin-top:var(--s3);max-width:64ch}
.site-footer__legal{border-top:1px solid rgba(255,255,255,.10)}
.site-footer__legal .wrap{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s4);flex-wrap:wrap;font-size:13px;color:#8496ba}
.site-footer__links{display:flex;gap:var(--s6);flex-wrap:wrap}
.site-footer__links a:hover{color:#fff}

/* sticky mobile bar */
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:10px;padding:10px 14px;background:var(--surface);border-top:1px solid var(--border)}
.mobilebar__btn{flex:1;text-align:center;padding:14px;border-radius:var(--r);font-family:var(--f-display);font-weight:700;font-size:16px}
.mobilebar__btn--call{background:var(--bg);color:var(--ink);border:1px solid var(--border)}
.mobilebar__btn--quote{background:var(--accent);color:var(--accent-ink)}

/* modals */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(19,30,51,.6);overflow-y:auto}
.modal.is-open{display:flex}
.modal__card{background:var(--surface);width:100%;max-width:450px;border-radius:12px;border:1px solid var(--border);padding:var(--s8) var(--s8) var(--s6);position:relative;box-shadow:0 20px 60px rgba(19,30,51,.28);margin:auto}
.modal__card--exit{max-width:410px;text-align:center}
.modal__close{position:absolute;top:10px;right:14px;font-size:28px;line-height:1;color:#9aa7bd}
.modal__close:hover{color:var(--ink)}
.modal__title{font-family:var(--f-display);font-size:25px;font-weight:800;color:var(--ink);margin-bottom:6px}
.modal__intro{color:var(--muted);font-size:15px;margin-bottom:var(--s6)}
.exit__badge{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:4px;margin-bottom:var(--s3)}
.exit__actions{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s2)}

/* forms */
.lrc-form__row{display:flex;gap:var(--s3)}
.lrc-field{width:100%;box-sizing:border-box;padding:13px 14px;margin-bottom:var(--s3);border:1.5px solid var(--border);border-radius:var(--r);font-family:var(--f-body);font-size:15.5px;color:var(--ink);background:var(--surface)}
.lrc-field:focus{outline:none;border-color:var(--brand)}
.lrc-form__error{color:#b3341f;font-size:14px;margin-top:var(--s2);text-align:center}
.lrc-form__privacy{color:var(--muted);font-size:12.5px;text-align:center;margin-top:var(--s3)}
.lrc-thanks{display:none;text-align:center;color:var(--ink);font-size:17px;line-height:1.5;padding:var(--s4) var(--s2) var(--s2);font-family:var(--f-display)}
.lrc-thanks.is-shown{display:block}
.hp{position:absolute;left:-9999px}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--s8);padding-top:var(--s12)}
  .hero__panel{min-height:300px}
  .why{grid-template-columns:1fr;gap:var(--s6)}
  .steps{grid-template-columns:1fr;border-top:0}
  .step{border-right:0;border-top:1px solid rgba(255,255,255,.18);padding:var(--s6) 0}
  .reviews__row{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:1fr;gap:var(--s6)}
  .ctaband__inner{flex-direction:column;align-items:flex-start}
  .ctaband__actions{width:100%}
}
@media (max-width:620px){
  body{font-size:16px}
  .notice__cta{display:none}
  .phone-link__num{display:none}
  .hero__title{font-size:clamp(30px,8vw,38px)}
  .hero__actions .btn{width:100%}
  .lrc-form__row{flex-direction:column;gap:0}
}
@media (max-width:720px){
  .mobilebar{display:flex}
  body{padding-bottom:74px}
}

/* cookie consent bar */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--ink);color:#e5eaf3;border-top:2px solid var(--brand)}
.consent[hidden]{display:none}
.consent__inner{max-width:var(--wrap);margin-inline:auto;padding:13px var(--s6);display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.consent__text{font-size:14px;margin:0;max-width:72ch}
.consent__text a{color:#fff;border-bottom:1px solid var(--accent)}
.consent__actions{display:flex;gap:10px;flex-shrink:0}
@media (max-width:620px){.consent__inner{padding:12px var(--s4)}.consent__actions{width:100%}.consent__actions .btn{flex:1}}

/* reduced-motion net */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}