/* =====================================================================
   Mathie Electrical — design system v2 (Phase 2, Oct 2026)
   Tokens + self-hosted fonts + homepage components. Scoped to body.v2 so the
   older views and sub-pages are untouched until they are migrated.
   ===================================================================== */
@font-face{font-family:Barlow;font-weight:300 400;font-display:swap;src:url(/assets/fonts/Barlow-Regular.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(/assets/fonts/Barlow-Medium.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600 700;font-display:swap;src:url(/assets/fonts/Barlow-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:300 600;font-display:swap;src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700 900;font-display:swap;src:url(/assets/fonts/BarlowCondensed-Bold.woff2) format("woff2")}

:root{
  --ink:#0A0C0D; --graphite:#141819; --paper:#F5F4F0; --white:#fff; --line:#E2E0DA; --line-d:rgba(255,255,255,.12);
  --mute:#5D6366; --mute-d:rgba(255,255,255,.68); --teal:#03CFD1; --teal-ink:#04777A; --sms:#34C759;
  --fd:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --fb:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.0625rem; --t-lg:1.25rem; --t-xl:1.625rem; --t-2xl:2.25rem; --t-3xl:3.25rem; --t-4xl:4.75rem;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --r-c:8px; --r-k:12px; --mx:1240px; --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- buttons: primary, secondary, link ---------- */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 var(--t-md)/1 var(--fb);padding:16px 26px;border-radius:var(--r-c);text-decoration:none;border:1.5px solid transparent;white-space:nowrap;cursor:pointer;min-height:52px}
.v2-btn--p{background:var(--teal);color:#000}
.v2-btn--p:hover{background:#fff}
.v2-btn--s{border-color:rgba(255,255,255,.42);color:#fff;background:transparent}
.v2-btn--s:hover{background:#fff;color:#000;border-color:#fff}
.v2-btn--s.on-l{border-color:var(--ink);color:var(--ink)}.v2-btn--s.on-l:hover{background:var(--ink);color:#fff}
.v2-btn--sms{background:var(--sms);color:#fff;border-radius:999px}
.v2-link{font-weight:600;color:var(--teal-ink);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.v2-dark .v2-link{color:var(--teal)}
.v2-arr::after{content:"";width:14px;height:10px;display:inline-block;margin-left:8px;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10"><path d="M9 0l5 5-5 5-1-1 3.3-3.3H0V4.3h11.3L8 1z"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10"><path d="M9 0l5 5-5 5-1-1 3.3-3.3H0V4.3h11.3L8 1z"/></svg>') no-repeat center/contain}
.v2 a:focus-visible,.v2 button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* =====================================================================
   Service, suburb and guide pages (38 pages, header.site template) on the v2 system
   ===================================================================== */
html body.v2.sub{background:var(--paper)!important;color:var(--ink)!important}
html body.v2.sub .topbar{display:none!important}
html body.v2.sub .wrap{max-width:var(--mx)!important;padding-left:var(--s4)!important;padding-right:var(--s4)!important}
/* header */
html body.v2.sub header.site{background:var(--ink)!important;border:0!important;box-shadow:none!important;position:sticky;top:0;z-index:500}
html body.v2.sub header.site .nav{height:72px!important;align-items:center}
html body.v2.sub header.site .logo{display:flex!important;align-items:center;gap:12px;color:#fff!important;text-decoration:none}
html body.v2.sub header.site .logo img{width:36px;height:36px;border-radius:8px}
html body.v2.sub header.site .logo b{font:700 1.25rem/1 var(--fd)!important;color:#fff!important;letter-spacing:.01em!important;text-transform:none!important}
html body.v2.sub header.site .logo small{display:none!important}
html body.v2.sub header.site .nav-links a{font:500 var(--t-sm) var(--fb)!important;color:rgba(255,255,255,.76)!important;text-transform:none!important;letter-spacing:0!important}
html body.v2.sub header.site .nav-links a:hover{color:#fff!important}
html body.v2.sub header.site .call-btn{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.4)!important;border-radius:var(--r-c)!important;font:600 var(--t-sm) var(--fb)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important}
html body.v2.sub header.site .nav-cta{background:var(--teal)!important;color:#000!important;border-radius:var(--r-c)!important;font:600 var(--t-sm) var(--fb)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important}
/* hero */
html body.v2.sub .hero{background:var(--ink)!important}
html body.v2.sub .hero h1,html body.v2.sub .hero .mega{font:700 clamp(2.6rem,5.4vw,4.4rem)/1.02 var(--fd)!important;letter-spacing:-.015em!important;text-transform:none!important;color:#fff!important}
html body.v2.sub .hero h1 .hl,html body.v2.sub .hero h1 em,html body.v2.sub .hl{color:var(--teal)!important;-webkit-text-fill-color:currentColor!important;background:none!important;font-style:normal!important}
html body.v2.sub .eyebrow,html body.v2.sub .crumbs,html body.v2.sub .crumbs a{font:600 var(--t-xs) var(--fd)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--teal)!important;text-shadow:none!important}
html body.v2.sub .hero .sub,html body.v2.sub .hero p.sub{font:400 var(--t-lg)/1.55 var(--fb)!important;color:var(--mute-d)!important;text-shadow:none!important}
html body.v2.sub .hero .byline{color:rgba(255,255,255,.6)!important;text-shadow:none!important}
html body.v2.sub .cta-main{background:var(--teal)!important;color:#000!important;border-radius:var(--r-c)!important;box-shadow:none!important;min-height:52px;padding:15px 26px!important}
html body.v2.sub .cta-main .cta-txt b{font:600 var(--t-md) var(--fb)!important;text-transform:none!important;letter-spacing:0!important;color:#000!important}
html body.v2.sub .cta-main .cta-ico,html body.v2.sub .cta-main small,html body.v2.sub .cta-main .cta-arrow{display:none!important}
html body.v2.sub .cta-alt>a{border-radius:var(--r-c)!important;font:600 var(--t-sm) var(--fb)!important;text-transform:none!important;letter-spacing:0!important}
html body.v2.sub .cta-alt>a.imsg{border-radius:999px!important}
html body.v2.sub .hero-bolt,html body.v2.sub .circuit{display:none!important}
/* sections + type */
html body.v2.sub main h2,html body.v2.sub .s h2{font:700 clamp(2rem,3.4vw,3rem)/1.04 var(--fd)!important;letter-spacing:-.015em!important;text-transform:none!important;color:var(--ink)!important;border:0!important}
html body.v2.sub main h3{font:700 var(--t-xl)/1.15 var(--fd)!important;text-transform:none!important;letter-spacing:-.01em!important}
html body.v2.sub main p,html body.v2.sub .lede{color:var(--mute)}
html body.v2.sub .lede{font-size:var(--t-lg)!important;line-height:1.6!important}
html body.v2.sub .white-sec{background:#fff!important}
html body.v2.sub .tag{font:600 var(--t-xs) var(--fd)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--teal-ink)!important;background:none!important;border:0!important;padding:0!important}
/* cards: grid cells, project cards, reviews, faq */
html body.v2.sub .grid .cell,html body.v2.sub .pcard,html body.v2.sub .review,html body.v2.sub .faq details,html body.v2.sub .faq-item{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-k)!important;box-shadow:none!important;overflow:hidden}
html body.v2.sub .grid .cell{padding:var(--s4)!important}
html body.v2.sub .grid .cell h3{color:var(--ink)!important}
html body.v2.sub .pcard{transition:transform .3s var(--ease),box-shadow .3s var(--ease)!important}
html body.v2.sub .pcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,12,13,.10)!important}
html body.v2.sub .num{font:700 var(--t-xl) var(--fd)!important;color:var(--teal-ink)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
html body.v2.sub .quote,html body.v2.sub blockquote{font:500 var(--t-xl)/1.25 var(--fd)!important;color:var(--ink)!important;border-color:var(--teal)!important}
html body.v2.sub .faq summary{font:700 var(--t-lg)/1.25 var(--fd)!important;text-transform:none!important;color:var(--ink)!important;padding:var(--s3)!important}
html body.v2.sub .faq details p{padding:0 var(--s3) var(--s3)!important}
html body.v2.sub .gal img,html body.v2.sub .pgrid img{border-radius:var(--r-k)}
/* trust row */
html body.v2.sub .trust{background:#fff!important;border-bottom:1px solid var(--line)!important;border-top:0!important}
html body.v2.sub .trust b{font:700 var(--t-lg) var(--fd)!important;color:var(--ink)!important}
html body.v2.sub .trust span{color:var(--mute)!important}
/* buttons */
html body.v2.sub .btn,html body.v2.sub .btn-teal{border-radius:var(--r-c)!important;font:600 var(--t-md)/1 var(--fb)!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;min-height:52px}
html body.v2.sub .btn-teal{background:var(--teal)!important;color:#000!important;border-color:var(--teal)!important}
html body.v2.sub .btn-ghost{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important}
/* forms */
html body.v2.sub .qform{background:#fff!important;border:1px solid var(--line)!important;border-top:4px solid var(--teal)!important;border-radius:var(--r-k)!important;box-shadow:none!important}
html body.v2.sub .qform input,html body.v2.sub .qform select,html body.v2.sub .qform textarea{border:1px solid var(--line)!important;border-radius:var(--r-c)!important;background:#fff!important;font:400 1rem var(--fb)!important;min-height:48px;box-shadow:none!important}
html body.v2.sub .qform input:focus,html body.v2.sub .qform select:focus,html body.v2.sub .qform textarea:focus{border-color:var(--ink)!important;outline:3px solid var(--teal)!important;outline-offset:1px!important}
html body.v2.sub .qform label{font:600 var(--t-sm) var(--fb)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important}
html body.v2.sub .qform button[type=submit],html body.v2.sub .qform .fsub{background:var(--teal)!important;color:#000!important;border-radius:var(--r-c)!important;font:600 var(--t-md) var(--fb)!important;text-transform:none!important;letter-spacing:0!important;min-height:52px;box-shadow:none!important}
/* footer */
html body.v2.sub footer{background:#060707!important;color:var(--mute-d)!important;border-top:0!important}
html body.v2.sub footer a{color:var(--mute-d)!important}html body.v2.sub footer a:hover{color:#fff!important}
html body.v2.sub footer h3,html body.v2.sub footer h4,html body.v2.sub footer b{color:#fff!important}
html body.v2.sub .legal{color:rgba(255,255,255,.45)!important}
/* sticky bar (phones) */
html body.v2.sub .callbar--3 a{font:600 1rem var(--fb)!important;text-transform:none!important;letter-spacing:0!important}
@media(max-width:700px){
  html body.v2.sub .wrap{padding-left:20px!important;padding-right:20px!important}
  html body.v2.sub header.site .nav{height:64px!important}
  html body.v2.sub .hero h1,html body.v2.sub .hero .mega{font-size:2.5rem!important}
  html body.v2.sub main h2{font-size:2rem!important}
}
html body.v2.sub header.site .nav-links{gap:22px!important}
@media(max-width:1180px){html body.v2.sub header.site .nav-links{gap:16px!important}html body.v2.sub header.site .nav-links a{font-size:.875rem!important}}
html body.v2.sub .faq summary:focus-visible,html body.v2.sub header.site a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}