/* ==========================================================================
   Hack's Plumbing & Drain -- theme stylesheet, v2 (2026-09-03)

   The comp-derived v1 stylesheet was replaced wholesale in the 10x pass.
   Every class the site's stored markup uses is still styled here (the
   contract is the CLASS NAMES, not the old rules), so the ~250 stored URLs
   keep rendering while the whole estate picks up the new system.

   System in one breath: bright paper, real photography, one expanded
   grotesque (Archivo, self-hosted variable file) for display AND body,
   navy for weight, red for action only, faces never hidden under a scrim.
   ========================================================================== */

@font-face{font-family:"Archivo";
  src:url('/wp-content/themes/hacks-theme/assets/fonts/archivo-var-w400-900.woff2') format('woff2');
  font-weight:400 900;font-stretch:100% 125%;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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --ink:#0F1A2E; --ink-2:#2B3A50; --ink-muted:#56657A;
  --paper:#FFFFFF; --paper-alt:#F4F7FB; --sky:#E9F2FC; --sky-2:#D7E7F8; --sky-line:#C6D9EE;
  --red:#E0312F; --red-dark:#BE1F1D; --red-ink:#D92220; --red-soft:#FDECEC;
  --blue:#2E6FB5; --navy:#22307E; --navy-deep:#131C4E; --navy-line:#2F3F95;
  --trust:#1E8E5A; --amber:#F5A623; --accent-dark:#FFB03A;
  --rule:rgba(15,26,46,.10); --rule-2:rgba(15,26,46,.16);
  --f-display:"Archivo","Arial Black",Arial,sans-serif;
  --f-body:"Archivo",Arial,Helvetica,sans-serif;
  --wd:118%;
  --container:1240px; --gutter:32px;
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px;
  --shadow-sm:0 1px 2px rgba(15,26,46,.05),0 8px 22px rgba(15,26,46,.07);
  --shadow-md:0 2px 6px rgba(15,26,46,.06),0 14px 34px rgba(15,26,46,.13);
  --shadow-lg:0 30px 70px rgba(15,26,46,.20);
  --sp-section:104px; --sp-hero-top:64px; --sp-hero-bottom:0px;}
@media(max-width:860px){:root{--sp-section:64px;}}
@media(max-width:600px){:root{--gutter:20px;}}

html{scroll-behavior:smooth;font-size:16px;overflow-x:clip;}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;height:auto;}
picture{display:contents;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;font-stretch:var(--wd);line-height:1.02;letter-spacing:-.024em;color:var(--ink);}
h3,h4{font-stretch:106%;letter-spacing:-.012em;line-height:1.18;}
h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.05rem);}
strong,b{font-weight:700;}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.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}

/* ---- eyebrow -------------------------------------------------------------- */
.eyebrow{font-family:var(--f-body);font-weight:700;font-stretch:100%;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red-ink);}
.section__head .eyebrow,.why__body .eyebrow,.team__body .eyebrow,.intro__body .eyebrow,.cta__copy .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;}
.section__head .eyebrow::before,.why__body .eyebrow::before,.team__body .eyebrow::before,.intro__body .eyebrow::before,.cta__copy .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--red);flex-shrink:0;}
.cta__copy .eyebrow::before,.specials .eyebrow::before{background:var(--accent-dark);}

/* ---- buttons (the house treatment: gradient, inset highlight, slab, glow, chevron badge) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);font-stretch:100%;
  font-weight:700;font-size:.92rem;letter-spacing:.005em;padding:15px 26px 15px 16px;border-radius:999px;border:1px solid rgba(0,0,0,.10);
  cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.14);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-40%;width:34%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);transform:skewX(-22deg);pointer-events:none;}
.btn:hover::after{animation:btnSheen .65s ease;}
@keyframes btnSheen{from{left:-40%}to{left:130%}}
.btn>*{position:relative;z-index:1;}
.btn svg{width:17px;height:17px;}
.btn__chev{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.24);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.14);flex-shrink:0;transition:transform .16s ease;}
.btn:hover .btn__chev{transform:translateX(3px);}
.btn__chev svg{width:13px;height:13px;}
.btn-red,.btn--primary{background:linear-gradient(180deg,#EF4643 0%,var(--red) 55%,#C92220 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 3px 0 rgba(140,14,13,.45),0 10px 26px rgba(224,49,47,.32);}
.btn-red:hover,.btn--primary:hover{background:linear-gradient(180deg,#F55856 0%,#E63A38 55%,#D02523 100%);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 rgba(140,14,13,.4),0 18px 38px rgba(224,49,47,.42);}
.btn-red:active,.btn--primary:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 6px 16px rgba(224,49,47,.35);}
.btn-navy{background:linear-gradient(180deg,#3446A6 0%,var(--navy) 55%,#1A2566 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 0 rgba(14,20,60,.5),0 10px 24px rgba(29,42,102,.28);}
.btn-navy:hover{background:linear-gradient(180deg,#3E51B4 0%,#2B3A94 55%,#1F2C78 100%);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 rgba(14,20,60,.45),0 18px 34px rgba(29,42,102,.38);}
.btn-navy:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 6px 14px rgba(29,42,102,.3);}
.btn-white{background:#fff;color:var(--navy);text-shadow:none;box-shadow:0 10px 26px rgba(0,0,0,.18);}
.btn-white:hover{background:var(--sky);color:var(--navy-deep);transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.24);}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);text-shadow:none;backdrop-filter:blur(4px);}
.btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-3px);}
.btn:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px rgba(11,18,42,.9);outline-offset:2px;}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}
/* <main> takes tabindex=-1 so the skip link really moves focus; it must not draw the ring. */
#main:focus{outline:none;}

/* ---- utility bar + header (in flow, sticky, always white) ------------------ */
.utility{background:var(--navy-deep);color:rgba(255,255,255,.82);font-size:.8rem;font-weight:500;}
.utility .container{display:flex;align-items:center;justify-content:space-between;height:38px;}
.utility a{color:inherit;}
.utility__left,.utility__right{display:flex;align-items:center;gap:22px;}
.utility__item{display:flex;align-items:center;gap:7px;}
a.utility__item{padding:6px 2px;}
.utility__item svg{width:14px;height:14px;opacity:.85;}
.utility strong{color:#fff;font-weight:600;}
.utility__promo{color:var(--accent-dark);font-weight:600;}
@media(max-width:760px){.utility__left{display:none;} .utility .container{justify-content:center;} .utility__right{gap:14px;} .utility__item{white-space:nowrap;}}
@media(max-width:560px){.utility__right .utility__item:not(.utility__promo){display:none;}}

.header{position:sticky;top:0;left:0;right:0;z-index:90;background:#fff;border-bottom:1px solid var(--rule);transition:box-shadow .28s ease;}
.header.scrolled{box-shadow:0 10px 30px rgba(15,26,46,.10);}
.header .container{display:flex;align-items:center;gap:12px;height:86px;transition:height .28s ease;}
.header.scrolled .container{height:74px;}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand__logo{height:50px;width:auto;flex-shrink:0;transition:height .28s ease;}
.header.scrolled .brand__logo{height:44px;}
.brand__logo--light{display:none;}
.brand__logo--dark{display:block;}
.nav{display:flex;align-items:center;margin-left:auto;}
.nav__items{display:flex;align-items:center;gap:2px;list-style:none;}
.nav__head,.nav__foot,.nav__close,.nav__trust{display:none;}
.nav-overlay{display:none;}
.nav__item{position:relative;}
.nav__link{display:flex;align-items:center;gap:5px;font-weight:600;font-size:.9rem;color:var(--ink);padding:10px 11px;position:relative;cursor:pointer;white-space:nowrap;border-radius:10px;transition:color .14s ease;}
.nav__link:hover,.nav__item:hover .nav__link{color:var(--navy);}
.nav__link .caret{width:11px;height:11px;opacity:.6;transition:transform .2s ease;}
.nav__item:hover .nav__link .caret{transform:rotate(180deg);}
.nav__link::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.nav__link:hover::after,.nav__item:hover .nav__link::after{transform:scaleX(1);}
.nav__menu{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow-md);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70;}
.nav__menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav__item.is-dismissed .nav__menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.nav__menu a{display:block;padding:11px 14px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .14s ease,color .14s ease;}
.nav__menu a:hover{background:var(--sky);color:var(--navy);}
.header__cta{display:flex;align-items:center;gap:16px;flex-shrink:0;margin-left:8px;}
.header__phone{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;}
@media(min-width:761px){a.header__phone{padding:8px 2px;}}
.header__phone .num{font-family:var(--f-display);font-stretch:110%;font-weight:800;font-size:1.22rem;letter-spacing:-.02em;color:var(--navy);display:flex;align-items:center;gap:7px;}
.header__phone .num svg{width:16px;height:16px;color:var(--red);}
.header__phone .lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);margin-top:3px;}
.header__cta .btn-red{padding:13px 20px 13px 12px;font-size:.84rem;max-width:200px;white-space:normal;text-align:center;line-height:1.25;}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px;box-sizing:border-box;align-items:center;justify-content:center;}
.hamburger span{width:26px;height:3px;background:var(--navy);border-radius:2px;transition:.2s;}
.mobile-phone{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--navy);}
@media(max-width:1300px){.nav__items{gap:0;} .nav__link{padding:10px 8px;font-size:.86rem;} .header__phone .lbl{display:none;}}
@media(max-width:1180px){
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(9,16,40,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:190;}
  .nav-overlay.show{opacity:1;visibility:visible;}
  .nav{position:fixed;top:0;right:0;left:auto;height:100dvh;width:90%;max-width:400px;margin-left:0;flex-direction:column;align-items:stretch;background:var(--navy-deep);color:#fff;
    transform:translateX(105%);visibility:hidden;transition:transform .36s cubic-bezier(.4,0,.2,1),visibility .36s;z-index:200;overflow-y:auto;box-shadow:-24px 0 60px rgba(0,0,0,.45);}
  .nav.open{transform:translateX(0);visibility:visible;}
  .nav__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.12);position:sticky;top:0;background:var(--navy-deep);z-index:2;}
  .nav__brand{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:1.25rem;color:#fff;display:flex;flex-direction:column;line-height:1;}
  .nav__brand em{font-family:var(--f-body);font-stretch:100%;font-style:normal;font-weight:700;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark);margin-top:6px;}
  .nav__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;transition:background .15s ease;}
  .nav__close:hover{background:var(--red);}
  .nav__close svg{width:20px;height:20px;}
  .nav__items{display:block;padding:6px 0 0;}
  .nav__item{border-bottom:1px solid rgba(255,255,255,.08);}
  .nav__link{display:flex;align-items:center;justify-content:space-between;padding:17px 24px;font-family:var(--f-display);font-stretch:106%;font-weight:700;font-size:1.1rem;color:#fff;letter-spacing:0;border-radius:0;}
  .nav__link:hover,.nav__item:hover .nav__link{color:#fff;}
  .nav__link::after{display:none;}
  .nav__link .caret{width:17px;height:17px;opacity:.85;transition:transform .28s ease,color .2s ease;}
  .nav__item.expanded .nav__link .caret{transform:rotate(180deg);color:var(--accent-dark);}
  .nav__menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:0;background:rgba(0,0,0,.24);max-height:0;overflow:hidden;transition:max-height .32s ease;}
  .nav__menu::before{display:none;}
  .nav__item.expanded .nav__menu{max-height:520px;}
  .nav__menu a{display:flex;align-items:center;gap:11px;padding:14px 24px 14px 26px;font-size:1rem;font-weight:600;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;white-space:normal;}
  .nav__menu a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-dark);flex-shrink:0;}
  .nav__menu a:active,.nav__menu a:hover{background:rgba(255,255,255,.06);color:#fff;}
  .nav__trust{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:15px;padding:26px 24px;}
  .nav__trust span{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.82);}
  .nav__trust svg{width:19px;height:19px;color:var(--accent-dark);flex-shrink:0;}
  @media(max-height:720px){.nav__trust{display:none;}}
  .nav__foot{display:block;padding:22px 24px calc(28px + env(safe-area-inset-bottom));background:rgba(0,0,0,.22);}
  .nav__cta{width:100%;justify-content:center;padding:17px;font-size:.92rem;margin-bottom:16px;}
  .nav__call{display:flex;align-items:center;justify-content:center;gap:11px;color:#fff;font-family:var(--f-display);font-stretch:110%;font-weight:800;font-size:1.5rem;padding:2px 0;}
  .nav__call svg{width:22px;height:22px;color:var(--accent-dark);}
  .nav__hours{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.66);margin-top:8px;text-align:center;}
  .nav__hours svg{width:15px;height:15px;color:var(--accent-dark);flex-shrink:0;}
  .nav__social{display:flex;justify-content:center;gap:12px;margin-top:22px;}
  .nav__social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease;}
  .nav__social a:hover{background:var(--red);transform:translateY(-2px);}
  .nav__social svg{width:18px;height:18px;color:#fff;}
  body.nav-open{overflow:hidden;}
  .header .container{height:72px;}
  .header.scrolled .container{height:66px;}
  .header__cta{margin-left:auto;gap:4px;}
  .header__cta .btn-red{display:none;}
  .header__phone{display:none;}
  .mobile-phone{display:inline-flex;}
  .mobile-phone svg{width:26px;height:26px;color:var(--red);}
  .hamburger{display:flex;position:relative;z-index:210;}
  .hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .hamburger.active span:nth-child(2){opacity:0;}
  .hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  body.nav-open .hamburger{opacity:0;pointer-events:none;transition:opacity .2s ease;}
  body.nav-open .mobile-phone{opacity:0;pointer-events:none;}
  body.nav-open .action-bar{visibility:hidden;}}
@media(max-width:520px){.brand__logo{height:40px;} .header.scrolled .brand__logo{height:38px;}}
@media(max-width:360px){.brand__logo{height:34px;} .header .container{gap:4px;}}

/* ---- hero: homepage split ------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:#fff;color:var(--ink);padding:var(--sp-hero-top) 0 var(--sp-hero-bottom);}
.hero .container{position:relative;z-index:3;width:100%;}
.hero__wave{display:none;}
.hero--split .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:end;}
.hero__copy{padding:16px 0 80px;max-width:640px;}
.hero__eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--red-ink);margin-bottom:18px;font-size:.74rem;letter-spacing:.16em;
  background:var(--red-soft);padding:8px 14px 8px 11px;border-radius:999px;}
.hero__eyebrow svg{width:13px;height:13px;}
.hero__h1{font-family:var(--f-body);font-stretch:100%;font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--ink-muted);margin-bottom:16px;}
.hero__h2{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:clamp(2.5rem,1.3rem + 3.9vw,4.3rem);line-height:.98;letter-spacing:-.034em;color:var(--ink);margin-bottom:22px;text-transform:none;text-shadow:none;}
.hero__h2 em{font-style:normal;color:var(--red);}
.hero__lede{font-size:1.12rem;line-height:1.62;color:var(--ink-2);max-width:560px;margin-bottom:30px;}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.hero__actions .btn{padding:17px 30px 17px 17px;font-size:1rem;}
.hero__feats{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;margin-bottom:22px;}
.hero__feat{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink-2);}
.hero__feat svg{width:17px;height:17px;color:var(--trust);flex-shrink:0;}
.hero__trust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-muted);padding-top:20px;border-top:1px solid var(--rule);}
.hero__trust .g{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--rule);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#4285F4;flex-shrink:0;}
.hero__trust .stars{color:var(--amber);letter-spacing:.08em;font-size:.9rem;}
.hero__trust b{color:var(--ink);font-weight:700;}
.hero__trust .dot{opacity:.45;}
.hero__visual{position:relative;align-self:stretch;min-height:600px;}
.hero__visual::before{content:"";position:absolute;left:0;right:-40vw;top:48px;bottom:0;border-radius:var(--r-xl) 0 0 0;
  background:linear-gradient(160deg,#EEF5FD 0%,var(--sky-2) 100%);}
.hero__visual::after{content:"";position:absolute;left:8%;top:6%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(224,49,47,.15) 0%,rgba(224,49,47,0) 64%);pointer-events:none;}
.hero__visual img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:auto;max-width:none;height:auto;max-height:100%;z-index:2;
  filter:drop-shadow(0 26px 34px rgba(15,26,46,.24));}
.hero__card{position:absolute;z-index:3;background:#fff;border-radius:16px;box-shadow:var(--shadow-md);padding:12px 16px;display:flex;align-items:center;gap:11px;font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.2;}
.hero__card small{display:block;font-weight:500;font-size:.76rem;color:var(--ink-muted);margin-top:2px;}
.hero__card .g{width:34px;height:34px;border-radius:10px;background:var(--sky);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#4285F4;font-size:1.1rem;flex-shrink:0;}
.hero__card .stars{color:var(--amber);letter-spacing:.06em;font-size:.82rem;display:block;}
.hero__card--rating{left:-34px;bottom:72px;}
.hero__card--since{right:-8px;top:10px;}
.hero__card--since .ic{width:34px;height:34px;border-radius:10px;background:var(--red-soft);color:var(--red-ink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero__card--since .ic svg{width:18px;height:18px;}
.hero__eyebrow,.hero__h1,.hero__h2,.hero__lede,.hero__feats,.hero__actions,.hero__trust{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both;}
.hero__h1{animation-delay:.08s}.hero__h2{animation-delay:.16s}.hero__lede{animation-delay:.26s}.hero__actions{animation-delay:.36s}.hero__feats{animation-delay:.46s}.hero__trust{animation-delay:.56s}
.hero__visual img{animation:heroPop .9s cubic-bezier(.2,.7,.2,1) .2s both;}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroPop{from{opacity:0;transform:translateX(-50%) translateY(26px)}to{opacity:1;transform:translateX(-50%)}}
@media(max-width:1100px){.hero__card--rating{left:-8px;}}
@media(max-width:900px){
  .hero{padding-top:36px;}
  .hero--split .hero__grid{grid-template-columns:1fr;gap:8px;}
  .hero__copy{padding:0 0 28px;max-width:none;}
  .hero__visual{min-height:0;height:min(78vw,440px);margin:0 calc(-1 * var(--gutter));}
  .hero__visual::before{left:var(--gutter);right:0;top:26px;border-radius:var(--r-lg) 0 0 0;}
  .hero__visual img{max-height:100%;max-width:min(88%,420px);}
  .hero__card--rating{left:var(--gutter);bottom:18px;}
  .hero__card--since{right:12px;top:0;}
  .hero__feats{flex-direction:column;align-items:flex-start;gap:8px;}
  .hero__actions .btn{flex:1 1 auto;}}
@media(max-width:460px){.hero__card--since{display:none;} .btn{white-space:normal;min-width:0;padding-left:14px;padding-right:14px;}}

/* ---- hero: inner pages (stored raw markup + service-city template + posts) -- */
.hero--inner{background:var(--navy-deep);color:#fff;padding:64px 0 72px;min-height:0;display:block;}
.hero--inner .hero__media{position:absolute;inset:0;z-index:0;}
.hero--inner .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.hero--inner .hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(19,28,78,.96) 0%,rgba(19,28,78,.88) 42%,rgba(19,28,78,.58) 100%);}
.hero--inner .hero__inner{max-width:820px;margin:0;text-align:left;}
.hero--inner .crumbs,.crumbs{display:flex;justify-content:flex-start;gap:8px;font-size:.8rem;color:rgba(255,255,255,.7);margin-bottom:22px;flex-wrap:wrap;}
.crumbs a{color:#fff;font-weight:600;display:inline-block;padding:6px 3px;margin:-6px 0;}
.hero--inner .hero__eyebrow{color:var(--accent-dark);background:rgba(255,255,255,.08);}
.hero--inner .hero__h1{color:rgba(255,255,255,.72);}
.hero--inner .hero__h2{color:#fff;font-size:clamp(2.2rem,1.3rem + 3.2vw,3.7rem);}
.hero--inner .hero__sub{font-size:1.1rem;color:rgba(255,255,255,.88);max-width:640px;margin:-4px 0 26px;line-height:1.6;}
.hero--inner .hero__actions{justify-content:flex-start;}
.hero--inner .hero__feats{justify-content:flex-start;}
.hero--inner .hero__feat{color:rgba(255,255,255,.92);}
.hero--inner .hero__feat svg{color:var(--accent-dark);}
.hero--inner .hero__trust{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.18);}
.hero--inner .hero__trust b{color:#fff;}
.hero--post{padding:56px 0 60px;}
.hero--post .hero__h1{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:clamp(1.9rem,1.1rem + 2.6vw,3rem);letter-spacing:-.03em;text-transform:none;color:#fff;line-height:1.05;max-width:900px;}
@media(max-width:860px){.hero--inner{padding:44px 0 52px;} .hero--inner .hero__actions .btn{flex:1 1 auto;}}

/* ---- quick nav + trust strip ---------------------------------------------- */
.quicknav{position:relative;z-index:5;background:var(--paper-alt);padding:34px 0 8px;border-top:1px solid var(--rule);}
.quicknav__card{margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;background:none;box-shadow:none;border-radius:0;overflow:visible;}
.qtile{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:22px 12px 20px;background:#fff;border:1px solid var(--rule);border-radius:18px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.qtile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--sky-line);background:#fff;}
.qtile__icon{width:52px;height:52px;border-radius:15px;background:var(--sky);color:var(--navy);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,transform .2s ease;}
.qtile__icon svg{width:26px;height:26px;}
.qtile:hover .qtile__icon{background:var(--red);color:#fff;transform:translateY(-2px) rotate(-4deg);}
.qtile__label{font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.2;}
.qtile__sub{font-size:.76rem;font-weight:500;color:var(--ink-muted);line-height:1.3;margin-top:-6px;}
@media(max-width:960px){.quicknav__card{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.quicknav{padding-top:22px;}
  .quicknav__card{grid-template-columns:none;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;}
  .quicknav__card::-webkit-scrollbar{display:none;}
  .qtile{flex:0 0 40%;min-width:132px;scroll-snap-align:start;padding:18px 8px 16px;gap:9px;}
  .qtile__icon{width:46px;height:46px;border-radius:12px;} .qtile__icon svg{width:24px;height:24px;} .qtile__label{font-size:.82rem;}}
.trust{background:var(--paper-alt);border-bottom:1px solid var(--rule);}
.trust .container{display:flex;align-items:stretch;justify-content:center;gap:0;padding:22px var(--gutter) 30px;flex-wrap:wrap;}
.cert{display:flex;align-items:center;gap:13px;font-weight:700;font-size:.9rem;color:var(--ink);padding:6px 28px;position:relative;text-align:left;}
.cert:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:36px;width:1px;background:var(--rule-2);}
.cert__ic{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy);}
.cert__ic svg{width:21px;height:21px;}
.cert span{line-height:1.25;}
.cert small{display:block;font-weight:500;font-size:.78rem;color:var(--ink-muted);margin-top:2px;}
@media(max-width:640px){.trust .container{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;padding:18px var(--gutter) 26px;}
  .cert{padding:0;justify-content:flex-start;font-size:.82rem;gap:11px;} .cert:not(:last-child)::after{display:none;} .cert__ic{width:38px;height:38px;} .cert__ic svg{width:19px;height:19px;}}

/* ---- sections ------------------------------------------------------------- */
.section{padding:var(--sp-section) 0;}
.section--alt{background:var(--paper-alt);}
.section__head{max-width:820px;margin:0 0 52px;text-align:left;}
.section__head h2{text-transform:none;color:var(--ink);}
.section__head p{color:var(--ink-muted);font-size:1.1rem;line-height:1.6;margin-top:16px;max-width:680px;}
@media(max-width:760px){.section__head{margin-bottom:34px;}}

/* ---- service cards (icon, photo, and the city-page article shape) --------- */
#services{position:relative;overflow:hidden;}
#services .container{position:relative;}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc-card{position:relative;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:30px 28px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--sky-line);}
.svc-card__icon{width:56px;height:56px;border-radius:15px;background:var(--sky);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .22s ease,color .22s ease,transform .22s ease;}
.svc-card__icon svg{width:28px;height:28px;}
.svc-card:hover .svc-card__icon{background:var(--red);color:#fff;transform:rotate(-4deg) scale(1.05);}
.svc-card h3{font-size:1.28rem;color:var(--ink);margin-bottom:10px;}
.svc-card p{color:var(--ink-muted);font-size:.96rem;margin-bottom:16px;}
.svc-card__text p{margin-bottom:0;}
.svc-card__title{font-size:1.2rem;margin-bottom:10px;}
.svc-card__link{color:var(--red-ink);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:6px;padding:12px 0 0;min-height:44px;}
/* The whole card is the target, not a 33px strip (3.5% of the card). Cards that
   hold their own list of links (the region cards on /areas-we-serve/) are excluded. */
.svc-card:not(:has(.area-list)) .svc-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.svc-card__link svg{width:15px;height:15px;transition:transform .15s ease;}
.svc-card:hover .svc-card__link svg{transform:translateX(4px);}
.svc-card__link:hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:3px;}
.svc-card__badge{position:absolute;top:16px;right:16px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(224,49,47,.32);z-index:2;}
.svc-card--feature{border-color:var(--sky-line);}
.svc-card__what{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;font-weight:600;color:var(--ink-2);margin-bottom:12px;}
.svc-card__what svg{width:16px;height:16px;color:var(--trust);flex-shrink:0;margin-top:3px;}
.svc-card--photo{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.svc-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--sky);position:relative;}
.svc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.svc-card--photo:hover .svc-card__media img{transform:scale(1.04);}
.svc-card__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.svc-card__body p{flex:1;}
.svc-card--photo .svc-card__link{margin-top:auto;}
.svc-card--feature.svc-card--photo{grid-column:1/-1;flex-direction:row;}
.svc-card--feature .svc-card__media{flex:0 0 48%;aspect-ratio:auto;min-height:340px;}
.svc-card--feature .svc-card__body{padding:40px 44px 36px;justify-content:center;}
.svc-card--feature h3{font-size:1.9rem;max-width:16ch;}
.svc-card--feature p{font-size:1.06rem;max-width:52ch;}
.area-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);}
.area-list li{font-size:.86rem;line-height:1.9;}
.area-list a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(34,48,126,.3);transition:color .14s ease;display:inline-block;padding:6px 2px;}
.area-list a:hover{color:var(--red-ink);text-decoration-color:var(--red);}
.area-list span{color:var(--ink-muted);}
@media(max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.svc-card--feature.svc-card--photo{flex-direction:column;} .svc-card--feature .svc-card__media{flex:none;aspect-ratio:4/3;min-height:0;} .svc-card--feature .svc-card__body{padding:24px 26px 26px;} .svc-card--feature h3{font-size:1.4rem;}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr;} .area-list{grid-template-columns:1fr;}}
/* The "<service> in nearby cities" list sits straight in the container, not in a
   card. It was two columns on desktop and ONE on a phone: 53 links, three screens
   of scrolling on every gas-line page. */
.container > .area-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 18px;}
.container > .area-list a{padding:9px 2px;}
@media(max-width:600px){.container > .area-list{grid-template-columns:1fr 1fr;gap:2px 14px;}}

/* ---- promise band (homepage) ------------------------------------------------ */
.promise{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;padding:96px 0 84px;}
.promise::before{content:"";position:absolute;left:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(46,111,181,.35),transparent 62%);pointer-events:none;}
.promise .container{position:relative;}
.promise__top{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-bottom:56px;}
.promise__head .eyebrow{color:var(--accent-dark);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;}
.promise__head .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--accent-dark);}
.promise__head h2{color:#fff;font-size:clamp(2.1rem,1.2rem + 3vw,3.4rem);margin-bottom:18px;}
.promise__head p{color:rgba(255,255,255,.82);font-size:1.1rem;line-height:1.6;max-width:560px;}
.promise__truck{position:relative;}
.promise__truck img{width:100%;max-width:560px;margin:0 auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));}
.promise__truck::after{content:"";position:absolute;left:12%;right:12%;bottom:-10px;height:22px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(14px);}
.promise__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14);}
.promise__item{padding:30px 28px 8px 0;border-right:1px solid rgba(255,255,255,.1);margin-right:28px;}
.promise__item:last-child{border-right:0;margin-right:0;}
.promise__n{display:block;font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:1rem;color:var(--accent-dark);letter-spacing:.04em;margin-bottom:14px;}
.promise__item h3{color:#fff;font-size:1.22rem;margin-bottom:8px;}
.promise__item p{color:rgba(255,255,255,.72);font-size:.94rem;line-height:1.55;}
@media(max-width:960px){.promise__top{grid-template-columns:1fr;gap:28px;} .promise__grid{grid-template-columns:1fr 1fr;} .promise__item:nth-child(2){border-right:0;margin-right:0;}}
@media(max-width:560px){.promise{padding:64px 0 56px;} .promise__grid{grid-template-columns:1fr;} .promise__item{border-right:0;margin-right:0;padding:22px 0 4px;border-bottom:1px solid rgba(255,255,255,.1);} .promise__item:last-child{border-bottom:0;}}

/* ---- why (photo + badge) ---------------------------------------------------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.why__media{position:relative;}
.why__media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3;object-fit:cover;max-height:none;}
.why__badge{position:absolute;right:-18px;bottom:-22px;background:var(--red);color:#fff;border-radius:20px;padding:20px 24px;box-shadow:var(--shadow-md);text-align:center;}
.why__badge .n{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.03em;}
.why__badge .l{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:6px;opacity:.95;}
.why__body h2{margin-bottom:18px;}
.why__lead{font-size:1.26rem;line-height:1.48;color:var(--ink);font-weight:600;letter-spacing:-.01em;margin-bottom:16px;}
.why__body>p{color:var(--ink-muted);font-size:1.03rem;margin-bottom:22px;}
.why__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-bottom:30px;}
.why__list li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:.96rem;color:var(--ink-2);}
.why__list svg{width:21px;height:21px;color:var(--trust);flex-shrink:0;margin-top:1px;}
.why__item{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px 24px;}
.section--alt .why__item{background:#fff;}
.why__item h3{font-size:1.08rem;margin-bottom:6px;}
.why__item p{color:var(--ink-muted);font-size:.94rem;line-height:1.55;}
@media(max-width:900px){.why{grid-template-columns:1fr;gap:52px;} .why__media{max-width:600px;} .why__badge{right:12px;}}
@media(max-width:520px){.why__list{grid-template-columns:1fr;}}

/* ---- stats -------------------------------------------------------------------- */
.stats{background:#fff;color:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:46px 0;}
.stat{text-align:left;position:relative;padding:4px 28px;border-left:1px solid var(--rule-2);}
.stat:first-child{border-left:0;padding-left:0;}
.stat__n{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem);line-height:1;letter-spacing:-.035em;color:var(--navy);}
.stat__n span{color:var(--red);font-size:1.25rem;font-weight:800;margin-left:2px;vertical-align:top;}
.stat__l{font-size:.86rem;font-weight:600;color:var(--ink-muted);margin-top:10px;}
@media(max-width:680px){.stats__grid{grid-template-columns:1fr 1fr;gap:26px 0;} .stat{padding:4px 20px;} .stat:nth-child(odd){border-left:0;padding-left:0;}}

/* ---- steps ------------------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.steps--4{grid-template-columns:repeat(4,1fr);}
.step{text-align:left;padding:32px 30px 30px;background:var(--paper-alt);border-radius:var(--r-md);position:relative;}
.section--alt .step{background:#fff;border:1px solid var(--rule);}
.step__num{width:auto;height:auto;margin:0 0 20px;border:0;background:none;border-radius:0;display:block;
  font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.03em;color:var(--red);}
.step h3{font-size:1.28rem;margin-bottom:10px;color:var(--ink);}
.step p{color:var(--ink-muted);font-size:.96rem;line-height:1.6;}
@media(max-width:1000px){.steps--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.steps,.steps--4{grid-template-columns:1fr;gap:16px;}}

/* ---- cinematic band (real job photo) --------------------------------------- */
.cinematic{position:relative;min-height:460px;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:url('/wp-content/themes/hacks-theme/assets/photos/job-copper-repipe.jpg') center 42%/cover no-repeat;}
.cinematic::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,28,78,.92) 0%,rgba(19,28,78,.72) 48%,rgba(19,28,78,.3) 100%);}
.cinematic__inner{position:relative;z-index:1;max-width:var(--container);width:100%;margin:0 auto;padding:96px var(--gutter);text-align:left;}
.cinematic__eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-dark);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;margin-bottom:16px;}
.cinematic__eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--accent-dark);}
.cinematic__line{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:clamp(2rem,1.2rem + 3vw,3.4rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px;max-width:14ch;}
.cinematic__sub{font-size:1.1rem;color:rgba(255,255,255,.88);max-width:560px;line-height:1.6;}
@media(max-width:760px){.cinematic{min-height:0;} .cinematic__inner{padding:64px var(--gutter);}}

/* ---- reviews ---------------------------------------------------------------- */
.rep__intro{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:-24px 0 40px;}
.gbtn{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:12px 22px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease;}
.gbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.gbtn__g{width:24px;height:24px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#4285F4;border:1px solid var(--rule);}
.gbtn .stars{color:var(--amber);letter-spacing:.06em;}
.platchip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--rule);border-radius:999px;font-weight:700;font-size:.86rem;color:var(--ink);background:#fff;transition:border-color .14s ease,transform .14s ease,color .14s ease;}
.platchip svg{width:16px;height:16px;color:var(--navy);}
.platchip:hover{transform:translateY(-2px);border-color:var(--navy);color:var(--navy);}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rev-grid--2{grid-template-columns:repeat(2,1fr);max-width:960px;margin:0;}
.rev{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:34px 30px 26px;display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .18s ease;}
.rev::before{content:"\201C";position:absolute;top:8px;right:26px;font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:5.4rem;line-height:1;color:var(--sky-2);pointer-events:none;}
.rev:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.rev__stars{color:var(--amber);font-size:1.02rem;letter-spacing:.14em;margin-bottom:14px;position:relative;}
.rev p{color:var(--ink-2);font-size:1.02rem;line-height:1.65;flex:1;position:relative;}
.rev__who{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);}
.rev__name{font-weight:700;font-size:.95rem;color:var(--ink);}
.rev__badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--navy);background:var(--sky);padding:6px 12px;border-radius:999px;white-space:nowrap;}
.rev__badge svg{width:13px;height:13px;}
@media(max-width:920px){.rev-grid,.rev-grid--2{grid-template-columns:1fr;max-width:640px;margin:0;}}

/* ---- team ------------------------------------------------------------------ */
.team{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.team__media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;}
.team__body h2{margin-bottom:18px;}
.team__body>p{color:var(--ink-muted);font-size:1.05rem;margin-bottom:24px;}
.team__faces{display:flex;gap:18px;margin-bottom:28px;}
.face{text-align:center;}
.face img{width:82px;height:82px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow-md);margin:0 auto 8px;}
.face span{font-weight:700;font-size:.85rem;display:block;}
@media(max-width:900px){.team{grid-template-columns:1fr;gap:40px;}}

/* ---- specials --------------------------------------------------------------- */
.specials{background:var(--paper-alt);color:var(--ink);position:relative;overflow:hidden;}
.specials .section__head{margin-bottom:28px;}
.specials .section__head h2{color:var(--ink);}
.specials .section__head .eyebrow{color:var(--red-ink);}
.specials .section__head .eyebrow::before{background:var(--red);}
.specials .section__head p{color:var(--ink-muted);}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative;}
.offer{background:var(--paper);color:var(--ink);border-radius:var(--r-md);padding:30px 28px 28px 32px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow-sm);}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red);}
.offer__amt{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.03em;color:var(--red);}
.offer__what{font-weight:700;font-size:1.08rem;margin:10px 0 10px;color:var(--ink);}
.offer__terms{font-size:.82rem;color:var(--ink-muted);flex:1;line-height:1.55;}
.offer .btn{margin-top:20px;justify-content:center;}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr;max-width:460px;margin:0;}}

/* ---- faq (two columns, sticky head) ---------------------------------------- */
.section:has(> .container > .faq) .container{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start;}
.section:has(> .container > .faq) .section__head{margin:0;position:sticky;top:112px;}
.faq{max-width:none;margin:0;}
.faq-item{background:#fff;border:1px solid var(--rule);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:box-shadow .18s ease,border-color .18s ease;}
.faq-item[open]{box-shadow:var(--shadow-md);border-color:var(--sky-line);}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--f-body);font-stretch:100%;font-weight:700;font-size:1.04rem;color:var(--ink);line-height:1.35;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{position:relative;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--sky);}
.faq-item summary .plus::before,.faq-item summary .plus::after{content:"";position:absolute;background:var(--navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.faq-item summary .plus::before{left:7px;right:7px;top:12px;height:2.4px;}
.faq-item summary .plus::after{top:7px;bottom:7px;left:12px;width:2.4px;}
.faq-item[open] summary .plus{background:var(--red);}
.faq-item[open] summary .plus::before{background:#fff;}
.faq-item[open] summary .plus::after{transform:scaleY(0);opacity:0;}
.faq-item__body{padding:0 22px 22px;color:var(--ink-muted);font-size:1rem;line-height:1.65;}
@media(max-width:900px){.section:has(> .container > .faq) .container{grid-template-columns:1fr;gap:28px;} .section:has(> .container > .faq) .section__head{position:static;}}

/* ---- cta band + lead form --------------------------------------------------- */
.cta{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:0;background:url('/wp-content/themes/hacks-theme/assets/photos/fleet.webp') center/cover no-repeat;opacity:.10;}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,48,126,.6),rgba(19,28,78,.9));pointer-events:none;}
.cta .container{position:relative;z-index:1;}
.cta__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:88px 0;}
.cta__copy h2{font-size:clamp(2.1rem,1.2rem + 3vw,3.2rem);color:#fff;margin-bottom:16px;}
.cta__copy>p{color:rgba(255,255,255,.88);font-size:1.08rem;margin:0 0 24px;max-width:none;line-height:1.6;}
.cta__pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px;}
.cta__pts li{display:flex;align-items:center;gap:11px;font-weight:600;color:#fff;}
.cta__pts svg{width:20px;height:20px;color:#6FD08C;flex-shrink:0;}
.cta__call{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:1.05rem;}
.cta__call svg{width:18px;height:18px;color:var(--accent-dark);}
.cta__call:hover{text-decoration:underline;text-underline-offset:3px;}
.radio-proof{display:grid;grid-template-columns:minmax(150px,168px) minmax(0,1fr);align-items:center;gap:18px;max-width:560px;margin:28px 0;}
.radio-proof__mark{min-width:150px;padding:10px 12px;background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);}
.radio-proof__mark img{width:100%;height:auto;}
.radio-proof__copy{min-width:0;}
.radio-proof__eyebrow{display:block;margin-bottom:5px;font-size:.69rem;font-weight:800;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;}
.radio-proof__line{font-family:var(--f-display);font-stretch:var(--wd);font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;}
.radio-proof__line strong{font-weight:800;}
.radio-proof--dark .radio-proof__eyebrow{color:var(--accent-dark);}
.radio-proof--dark .radio-proof__line{color:var(--paper);}
.radio-proof--light .radio-proof__eyebrow{color:var(--navy);}
.radio-proof--light .radio-proof__line{color:var(--navy-deep);}
.radio-proof--specials{margin:0 0 34px;}
.lead{background:#fff;border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow-lg);color:var(--ink);}
.lead h3{font-size:1.55rem;color:var(--navy);margin-bottom:4px;}
.lead__sub{color:var(--ink-muted);font-size:.94rem;margin-bottom:20px;}
.lead__field{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);margin-bottom:14px;}
.lead__two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lead input,.lead select{font-family:var(--f-body);font-size:1rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);padding:13px 14px;border:1px solid var(--rule-2);border-radius:12px;background:#fff;width:100%;}
.lead input:focus,.lead select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(224,49,47,.16);}
.lead input:focus-visible,.lead select:focus-visible,.lead textarea:focus-visible,.lpform input:focus-visible,.lpform select:focus-visible{outline:3px solid var(--red);outline-offset:1px;box-shadow:0 0 0 5px rgba(224,49,47,.22);border-color:var(--red);}
.lead__submit{width:100%;justify-content:center;margin-top:6px;padding:16px;font-size:1.05rem;}
.lead__fine{text-align:center;font-size:.76rem;color:var(--ink-muted);margin-top:14px;}
@media(max-width:860px){.cta__grid{grid-template-columns:1fr;gap:34px;padding:60px 0;}}
@media(max-width:460px){.lead__two{grid-template-columns:1fr;} .lead{padding:22px 20px;} .cta__grid,.intro,.offer-grid{grid-template-columns:minmax(0,1fr);} .radio-proof{grid-template-columns:150px minmax(0,1fr);gap:14px;} .radio-proof__mark{padding:8px 9px;} .radio-proof__eyebrow{font-size:.62rem;letter-spacing:.1em;} .radio-proof__line{font-size:.91rem;}}

/* ---- footer ----------------------------------------------------------------- */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.72);border-top:4px solid var(--red);position:relative;}
.footer>*{position:relative;}
.footer__trust{border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.16);}
.footer__trust .container{display:flex;align-items:center;justify-content:center;gap:16px 0;padding:18px var(--gutter);flex-wrap:wrap;}
.fbadge{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.88rem;color:#fff;padding:4px 28px;position:relative;}
.fbadge:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:22px;width:1px;background:rgba(255,255,255,.16);}
.fbadge svg{width:19px;height:19px;color:var(--accent-dark);flex-shrink:0;}
.radio-proof--footer{max-width:none;margin:0;padding:4px 28px;grid-template-columns:148px minmax(170px,220px);position:relative;}
.radio-proof--footer .radio-proof__mark{min-width:0;padding:7px 9px;}
.radio-proof--footer .radio-proof__eyebrow{font-size:.61rem;}
.radio-proof--footer .radio-proof__line{font-size:.86rem;}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px;padding:62px 0 46px;}
.footer__logo{height:60px;width:auto;}
.footer__about{font-size:.92rem;margin:18px 0 6px;max-width:340px;line-height:1.65;}
.footer__social{display:flex;gap:12px;margin-top:18px;}
.footer__social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease;}
.footer__social a:hover{background:var(--red);transform:translateY(-2px);}
.footer__social svg{width:17px;height:17px;color:#fff;}
.footer h4{font-family:var(--f-body);font-stretch:100%;color:#fff;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px;}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:2px;}
.footer ul a,.footer__contact li{font-size:.92rem;}
.footer ul a{display:block;padding:8px 0;transition:color .14s ease,padding .14s ease;}
.footer ul a:hover{color:#fff;padding-left:4px;}
.footer__contact{list-style:none;}
.footer__contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;line-height:1.55;}
.footer__contact svg{width:17px;height:17px;color:var(--accent-dark);flex-shrink:0;margin-top:3px;}
.footer__contact a{color:#fff;font-weight:700;display:inline-block;padding:2px 0;font-family:var(--f-display);font-stretch:110%;font-size:1.05rem;}
.footer__fcta{display:inline-flex;margin-top:8px;padding:13px 24px 13px 14px;}
.footer__areas{border-top:1px solid rgba(255,255,255,.1);padding:34px 0;text-align:center;position:relative;overflow:hidden;}
.footer__areas::before{content:"";position:absolute;inset:0;background:url('/wp-content/themes/hacks-theme/assets/photos/skyline.jpg') center 30%/cover no-repeat;opacity:.28;}
.footer__areas::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,28,78,.55) 0%,rgba(19,28,78,.92) 100%);}
.footer__areas .container{position:relative;z-index:1;}
.footer__areas h4{color:#fff;font-family:var(--f-display);font-stretch:var(--wd);font-size:1.25rem;font-weight:800;text-transform:none;letter-spacing:-.02em;margin-bottom:10px;}
.footer__areas p{font-size:.92rem;color:rgba(255,255,255,.72);max-width:940px;margin:0 auto;line-height:1.95;}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:.82rem;}
.footer__bar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.totop{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.72);font-weight:600;transition:color .14s ease;padding:12px 4px;}
.totop:hover{color:#fff;}
.totop svg{width:15px;height:15px;color:var(--accent-dark);}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:34px;} .fbadge{padding:4px 18px;font-size:.84rem;} .radio-proof--footer{padding:4px 18px;}}
@media(max-width:600px){.footer__trust .container{gap:12px 0;} .fbadge{padding:4px 14px;} .fbadge:not(:last-child)::after{display:none;} .radio-proof--footer{grid-template-columns:148px minmax(0,1fr);width:100%;padding:10px 14px 4px;}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr;} .footer__bar .container{justify-content:center;text-align:center;}}

/* ---- mobile action bar ------------------------------------------------------- */
.action-bar{display:none;transition:transform .22s ease;}
.action-bar--tucked{transform:translateY(105%);}
@media(max-width:1180px){.action-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy-deep);box-shadow:0 -6px 20px rgba(0,0,0,.2);}
  .action-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px calc(11px + env(safe-area-inset-bottom));color:#fff;font-size:.8rem;font-weight:700;border-right:1px solid rgba(255,255,255,.12);}
  .action-bar a:last-child{border-right:0;}
  .action-bar a.primary{background:var(--red);}
  .action-bar svg{width:20px;height:20px;}
  body{padding-bottom:64px;}}
@media(max-height:430px){.action-bar{display:none;}body{padding-bottom:0;}}
@media(prefers-reduced-motion:reduce){
  /* scroll-behavior is not an animation or a transition, so neutralising
     animation-duration and transition-duration never touched it. Measured with
     reduce active: 'Back to top' scrolled 10,459px over 1,495ms / 180 frames. */
  html{scroll-behavior:auto;}
.action-bar{transition:none;}}

/* ---- reveal (kept visible by theme-overrides; hover motion only) ------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .reveal{opacity:1!important;transform:none!important;}}

/* ---- inner-page components ---------------------------------------------------- */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.intro__media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;max-height:520px;}
.intro__body h2{text-transform:none;margin-bottom:18px;}
.intro__body h3{font-size:1.3rem;margin:26px 0 10px;}
.intro__body p{color:var(--ink-muted);font-size:1.04rem;line-height:1.7;margin-bottom:16px;}
.intro__body ul,.intro__body ol{color:var(--ink-muted);margin:0 0 16px 22px;line-height:1.7;}
.intro__list{list-style:none;display:grid;gap:12px;margin:8px 0 24px;}
.intro__list li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:.98rem;color:var(--ink-2);}
.intro__list svg{width:21px;height:21px;color:var(--trust);flex-shrink:0;margin-top:2px;}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:36px;}}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.proof__card{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:26px 24px;}
.proof__tag{display:inline-block;background:var(--sky);color:var(--navy);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:999px;margin-bottom:12px;}
.proof__card h3{font-size:1.12rem;margin-bottom:6px;}
.proof__card p{color:var(--ink-muted);font-size:.92rem;}
@media(max-width:860px){.proof{grid-template-columns:1fr;}}
.tabs{max-width:960px;margin:0;}
.tabs__bar{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:26px;}
.tabs__btn{font-family:var(--f-body);font-weight:700;font-size:.9rem;padding:12px 22px;border-radius:999px;border:1.5px solid var(--rule-2);background:#fff;color:var(--ink);cursor:pointer;transition:all .16s ease;}
.tabs__btn:hover{border-color:var(--navy);}
.tabs__btn.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(29,42,102,.3);}
.tabs__panel{display:none;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:32px;box-shadow:var(--shadow-sm);}
.tabs__panel.active{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.tabs__col h3{margin-bottom:12px;color:var(--navy);text-transform:uppercase;font-family:var(--f-body);font-stretch:100%;font-weight:700;letter-spacing:.08em;font-size:.76rem;}
.tabs__col ul{list-style:none;display:grid;gap:10px;}
.tabs__col li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;}
.tabs__col li svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;}
.tabs__col--signs li svg{color:var(--red);}
.tabs__col--fix li svg{color:var(--trust);}
@media(max-width:760px){.tabs__panel.active{grid-template-columns:1fr;gap:22px;}}
.vs{max-width:920px;margin:0;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.vs table{width:100%;border-collapse:collapse;background:#fff;}
.vs th{background:var(--navy);color:#fff;font-family:var(--f-body);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;padding:16px 18px;text-align:left;}
.vs th:first-child{width:38%;background:var(--navy-deep);}
.vs td{padding:14px 18px;border-top:1px solid var(--rule);font-size:.94rem;vertical-align:top;}
.vs td:first-child{font-weight:600;}
/* #17784B, not var(--trust): the token is 3.85:1 on the alt rows and 4.14:1 on white
   at this size. The token itself stays, it drives check icons that only need 3:1. */
.vs .yes{color:#17784B;font-weight:700;}
.vs .no{color:var(--ink-muted);}
.vs tr:nth-child(even) td{background:var(--paper-alt);}
/* Phones (2026-10-01): the table was 560px inside a 350px scroller, so the Hack's
   column was cut mid-word and the third column was off-screen with nothing to
   say it scrolls. Three columns now fit the viewport. */
@media(max-width:700px){
  .vs table{table-layout:fixed;}
  .vs th,.vs td{padding:12px 10px;font-size:.84rem;line-height:1.4;overflow-wrap:anywhere;}
  .vs th{font-size:.66rem;letter-spacing:.04em;}
  .vs th:first-child{width:31%;}
  /* The row label is one or two words. `overflow-wrap:anywhere` above is right for the long answers, but it
     split "Emergencies" as "Emergenci / es" on /careers/ at 390: the label column was 81px of text and the
     word is 86. So the label column is a little wider, its text a little smaller and its right padding
     tighter, and a label only breaks between words. NOT hyphens:auto: tried 2026-10-01, it turned
     "Tripped reset only" into "Tripped re-set only" on eleven tables. */
  .vs td:first-child{overflow-wrap:break-word;font-size:.8rem;padding-right:4px;}
}
/* Narrower phones (360 and 375 are still common): at 360 the two answer columns had 92px of text each and
   "documentation", "Professional" and "Conventional" broke mid-word. Tighter padding and a slightly smaller
   size give them 96px. Below about 340 a 13-letter word still will not fit; that is left alone. */
@media(max-width:380px){
  .vs th,.vs td{padding:11px 8px;font-size:.8rem;}
  .vs td:first-child{padding-right:4px;}
  .vs th{font-size:.64rem;}
}
.safety{background:#FFF6E8;border-top:3px solid var(--amber);border-bottom:1px solid rgba(22,32,43,.10);padding:26px 0;}
.safety__inner{display:flex;gap:18px;align-items:flex-start;}
.safety__icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;}
.safety__icon svg{width:24px;height:24px;color:#3A2A08;}
.safety h2{font-size:1.15rem;margin-bottom:8px;text-transform:none;letter-spacing:0;}
.safety p{color:var(--ink);font-size:.96rem;margin-bottom:8px;}
.safety ol{margin:0 0 8px 20px;color:var(--ink);font-size:.94rem;line-height:1.85;}
.safety strong{color:var(--red-ink);}
@media(max-width:600px){.safety__inner{flex-direction:column;gap:12px;}}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ccard{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:28px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.ccard--urgent{border-color:rgba(224,49,47,.35);background:#FFF7F6;}
.ccard__icon{width:46px;height:46px;border-radius:13px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.ccard--urgent .ccard__icon{background:var(--red);}
.ccard__icon svg{width:23px;height:23px;color:#fff;}
.ccard h3{font-size:1.12rem;margin-bottom:8px;}
.ccard p{font-size:.94rem;color:var(--ink-muted);margin-bottom:14px;}
.ccard__big{font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:1.5rem;color:var(--navy);display:block;margin-bottom:6px;line-height:1.2;letter-spacing:-.02em;}
.ccard--urgent .ccard__big{color:var(--red);}
.ccard__note{font-size:.84rem;color:var(--ink-muted);margin-top:auto;padding-top:12px;}
.ccard__note a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:6px 2px;}
.ccard__note a:hover{color:var(--red-ink);}
.ccard a[href^="tel:"],.contact a[href^="tel:"]{display:inline-block;padding:11px 0;}
.ccard dl{margin:0;font-size:.93rem;line-height:1.9;}
.ccard dt{font-weight:700;color:var(--ink);}
.ccard dd{margin:0 0 6px;color:var(--ink-muted);}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;}}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pj{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.pj__city{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red-ink);margin-bottom:10px;}
.pj__city svg{width:14px;height:14px;}
.pj h3{font-size:1.06rem;margin-bottom:10px;line-height:1.35;}
.pj p{font-size:.92rem;color:var(--ink-muted);margin-bottom:14px;}
.pj__more{margin-top:auto;font-weight:700;font-size:.88rem;color:var(--navy);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:12px 0;}
.pj__more:hover{color:var(--red-ink);}
.pj__soon{margin-top:auto;font-size:.84rem;color:var(--ink-muted);}
.pwork{background:var(--paper-alt);border-left:4px solid var(--navy);border-radius:0 12px 12px 0;padding:22px 24px;margin:26px 0;}
.pwork h3{font-size:1rem;margin-bottom:10px;}
.pwork p{color:var(--ink);font-size:.97rem;line-height:1.8;}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr;}}
.hoods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:none;margin:0;}
.hood{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:16px 18px;font-weight:600;font-size:.95rem;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.hood:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--navy);}
.hood svg{width:19px;height:19px;color:var(--trust);flex-shrink:0;}
.hood small{display:block;font-weight:500;font-size:.78rem;color:var(--ink-muted);}
@media(max-width:860px){.hoods{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.hoods{grid-template-columns:1fr;}}
.legal{max-width:760px;margin:0;}
.legal p{color:var(--ink-muted);font-size:1rem;line-height:1.85;margin-bottom:18px;}
.legal p strong{color:var(--ink);}
.legal ul{max-width:760px;margin:0 0 18px;padding-left:20px;color:var(--ink-muted);line-height:1.85;}
.sitemap-list,.notfound-list{list-style:none;padding-left:0;columns:2;column-gap:40px;}
.sitemap-list li,.notfound-list li{margin-bottom:2px;break-inside:avoid;}
.sitemap-list a,.notfound-list a{color:var(--blue);font-weight:600;display:inline-block;padding:7px 2px;}
@media(max-width:600px){.sitemap-list,.notfound-list{columns:1;}}
.postfeat{margin:0 auto 34px;max-width:760px;}

/* ---- v2 round 2 ------------------------------------------------------------- */
/* The old site's banner photos (34585675-scaled.jpg, fleet-wide.webp and kin)
   carry a blue wave baked into the bottom ~12% of the image. A bottom fade in
   the scrim hides it on every inner hero without touching 186 stored posts. */
.hero--inner .hero__scrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(19,28,78,0) 0%,rgba(19,28,78,.96) 100%);}
.faq__aside{margin-top:28px;padding:22px 24px 8px;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow-sm);}
.section--alt .faq__aside{background:#fff;}
.faq__aside h3{font-size:1rem;margin-bottom:10px;color:var(--ink);}
.faq__aside ul{list-style:none;}
.faq__aside li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--rule);line-height:1.45;}
.faq__aside li:last-child{border-bottom:0;}
.faq__aside li::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:7px;}
.faq__aside p{font-size:.86rem;color:var(--ink-muted);padding:12px 0 14px;line-height:1.5;}
.faq__aside p a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.areas{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;}
.areas::before{content:"";position:absolute;inset:0;background:url('/wp-content/themes/hacks-theme/assets/photos/skyline.jpg') center 35%/cover no-repeat;}
.areas::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,28,78,.97) 0%,rgba(19,28,78,.9) 44%,rgba(19,28,78,.35) 100%);}
.areas .container{position:relative;z-index:1;}
.areas__copy{max-width:640px;padding:96px 0;}
.areas__copy .eyebrow{color:var(--accent-dark);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;}
.areas__copy .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--accent-dark);}
.areas__copy h2{color:#fff;margin-bottom:16px;}
.areas__copy>p{color:rgba(255,255,255,.84);font-size:1.08rem;line-height:1.6;margin-bottom:24px;}
.areas__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;}
.areas__chips a,.areas__chips span{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);font-size:.86rem;font-weight:600;color:#fff;transition:background .14s ease,border-color .14s ease,transform .14s ease;}
.areas__chips a:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px);}
.areas__chips .more{opacity:.7;}
@media(max-width:760px){.areas__copy{padding:64px 0;} .areas::after{background:linear-gradient(180deg,rgba(19,28,78,.9) 0%,rgba(19,28,78,.96) 100%);}}
.svc-grid .svc-card:nth-child(3n+2),.rev-grid .rev:nth-child(2),.steps .step:nth-child(2),.promise__item:nth-child(2){transition-delay:.08s}
.svc-grid .svc-card:nth-child(3n),.rev-grid .rev:nth-child(3),.steps .step:nth-child(3),.promise__item:nth-child(3){transition-delay:.16s}
.promise__item:nth-child(4){transition-delay:.24s}
/* header CTA: same button, quieter glow against the white bar */
.header__cta .btn-red{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 2px 0 rgba(140,14,13,.4),0 6px 16px rgba(224,49,47,.22);}
.header__cta .btn-red:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 rgba(140,14,13,.4),0 12px 26px rgba(224,49,47,.32);}
/* blog articles: prose scale, not section-heading scale */
body.single-post .intro__body{max-width:760px;margin:0 auto;}
body.single-post .intro__body h2{font-size:clamp(1.55rem,1.1rem + 1.3vw,2.05rem);margin:36px 0 12px;line-height:1.12;}
body.single-post .intro__body h3{font-size:1.25rem;margin:26px 0 8px;}
body.single-post .intro__body p,body.single-post .intro__body li{font-size:1.08rem;line-height:1.75;color:var(--ink-2);}
body.single-post .intro__body p strong{color:var(--ink);}

/* ---- long-form article (blog posts) -------------------------------------------
   Josh, 2026-09-16: "improve formatting cmon."
   .intro is a two-column body+photo grid; a blog post passes no photo, so the
   prose sat in column one and column two stayed empty -- 420px of dead page,
   and a centred featured image that lined up with none of the text. .article is
   one centred measure that the figure, the contents and the prose all share. */
.article{max-width:760px;margin-inline:auto;}
/* One measure, 760px, shared by the figure, the contents and the prose.
   body.single-post .intro__body (line ~715) already caps the prose at 760 and
   centres it; matching .article to the same number makes every left edge agree
   instead of stacking two different caps and landing 4px apart. */
.article .postfeat{max-width:760px;margin:0 0 32px;}
.article .postfeat img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-md);}

/* Contents. Rendered only when the post has 3+ h2s -- see single.php. */
.toc{border:1px solid var(--rule);border-left:3px solid var(--red);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--paper-alt);padding:22px 26px 20px;margin:0 0 38px;}
.toc__h{font-size:.78rem!important;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-muted);margin:0 0 12px!important;padding:0!important;border:0!important;}
.toc__list{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:toc;}
.toc__list li{counter-increment:toc;display:flex;gap:11px;align-items:baseline;color:var(--ink-muted);}
.toc__list li::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-display);font-stretch:var(--wd);
  font-weight:800;font-size:.76rem;color:var(--red);flex-shrink:0;letter-spacing:.02em;}
.toc__list a{color:var(--navy);font-weight:600;font-size:.97rem;line-height:1.45;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .14s ease,color .14s ease;}
.toc__list a:hover{color:var(--red-ink);border-bottom-color:var(--red);}

/* Article rhythm. Longer measure, more air around headings, a hairline to mark
   each new section so 45 paragraphs stop reading as one block. */
.article__body{font-size:1.06rem;}
.article__body p{font-size:1.06rem;line-height:1.72;margin-bottom:20px;}
.article__body h2{font-size:clamp(1.55rem,1.2rem + 1vw,2rem);line-height:1.18;
  margin:54px 0 16px;padding-top:26px;border-top:1px solid var(--rule);scroll-margin-top:110px;}
.article__body > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.article__body h3{font-size:1.24rem;margin:34px 0 10px;color:var(--navy);scroll-margin-top:110px;}
.article__body ul,.article__body ol{margin:0 0 22px 0;padding-left:26px;line-height:1.72;}
.article__body li{margin-bottom:9px;}
.article__body li::marker{color:var(--red);font-weight:700;}
.article__body strong{color:var(--ink);font-weight:700;}
.article__body a{color:var(--red-ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(224,49,47,.35);}
.article__body a:hover{text-decoration-color:var(--red);}
.article__body img{border-radius:var(--r-md);box-shadow:var(--shadow-md);margin:8px 0 6px;}
.article__body figcaption{font-size:.84rem;color:var(--ink-muted);margin:0 0 26px;}
@media(max-width:760px){
  .article__body p,.article__body{font-size:1.02rem;}
  .article__body h2{margin:40px 0 14px;padding-top:22px;}
  .toc{padding:18px 20px 16px;margin-bottom:30px;}
}

/* ---- /areas-we-serve/ region rows ---------------------------------------------
   Josh, 2026-09-16: "improve formatting."

   The five regions carry 8, 10, 20, 11 and 5 cities. In the 3-up .svc-grid every
   card stretched to the tallest in its row, so South Bay's five links sat above
   a third of a card of white space, and the second row held two cards and a
   hole. Unequal content in an equal grid can only ever look broken.

   One full-width row per region instead: the name and the blurb hold a fixed
   270px column, the cities flow in as many columns as fit. 5 cities and 20
   cities both look deliberate, and adding a sixth region cannot leave a gap.

   Scoped to #areas so .svc-grid keeps its card behaviour everywhere else. The
   hook is the section id the page already has -- no edit to post_content, which
   on this site means no risk of KSES eating the inline SVGs. */
#areas .svc-grid{grid-template-columns:1fr;gap:14px;}
#areas .svc-card{display:grid;grid-template-columns:270px 1fr;gap:16px 44px;align-items:start;padding:28px 30px;}
#areas .svc-card__icon{grid-column:1;grid-row:1;margin-bottom:0;}
#areas .svc-card h3{grid-column:1;grid-row:2;margin-bottom:8px;}
#areas .svc-card p{grid-column:1;grid-row:3;margin-bottom:0;font-size:.93rem;line-height:1.55;}
/* Row 2, not row 1: the list should start level with the region NAME, not with
   the pin icon that sits above it, or the first city floats a line too high. */
#areas .area-list{grid-column:2;grid-row:2/span 2;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:6px 18px;margin:0;padding:0;border-top:0;align-self:start;}
#areas .area-list li{line-height:1.8;}
@media(max-width:860px){
  #areas .svc-card{grid-template-columns:1fr;gap:4px;}
  #areas .svc-card__icon,#areas .svc-card h3,#areas .svc-card p{grid-column:1;}
  #areas .area-list{grid-column:1;grid-row:auto;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);}
}

/* Media slot for a card with no honest photograph — same 4:3 box, same card
   shape, a line glyph on the pale ground instead of a misleading photo.
   See inc/photos.php for why two of the six area services have no picture. */
.svc-card__media--glyph{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--sky) 0%,#fff 100%);border-bottom:1px solid var(--rule);}
.svc-card__media--glyph span{display:inline-flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);color:var(--navy);}
.svc-card__media--glyph svg{width:42px;height:42px;}
.svc-card--feature .svc-card__media--glyph{border-bottom:0;border-right:1px solid var(--rule);}
@media(max-width:760px){.svc-card--feature .svc-card__media--glyph{border-right:0;border-bottom:1px solid var(--rule);}}

/* ---- focus visibility -----------------------------------------------------------
   Three measured WCAG failures, all confirmed by pixel diff before and after.

   1. FAQ summaries (1,043 of them across 157 URLs, plus 5 on /plumbing-services/).
      .faq-item is overflow:hidden with a 14px radius and the summary fills it
      exactly, so a 3px ring at outline-offset:2px was clipped on all four sides --
      focusing a closed summary changed ZERO pixels. overflow:hidden must stay, it
      is what clips child content to the radius, so the ring goes inside instead. */
.faq-item summary:focus-visible{outline-offset:-3px;}

/* 2. The global ring is navy on navy. :focus-visible at main.css:88 resolves to
      rgb(34,48,126), which measures 1.37:1 on the footer's rgb(19,28,78) and
      1.18-1.34:1 on the service-area band, against the 3:1 WCAG 1.4.11 wants --
      38-40 controls on the homepage alone. The navy ring is RIGHT on light
      surfaces (10.7-11.7:1), so this does not blanket-switch to white; it gives
      dark surfaces the same two-layer treatment .btn:focus-visible already uses,
      which measures 16.91:1 there. */
.footer :focus-visible,
.areas :focus-visible,
.cta :focus-visible,
.promise :focus-visible,
.hero :focus-visible,
.action-bar :focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px rgba(11,18,42,.9);outline-offset:2px;}

/* 3. The header CTA got a WHITE ring on the WHITE header. .header__cta .btn-red
      sets its own box-shadow at equal specificity but later in the file, so the
      dark halo behind .btn:focus-visible never applied -- measured 1.00:1, zero
      pixels above delta 60. Re-assert it for the focus state only. */
.header__cta .btn-red:focus-visible{box-shadow:0 0 0 6px rgba(11,18,42,.9);outline:3px solid #fff;outline-offset:2px;}

/* ---- v3 formatting pass (2026-09-16, Fable brief) --------------------------------
   Seven page shapes, ~190 URLs. Everything below reuses the tokens and the
   card grammar already in this file; new class names exist only where a new
   block exists (hacks/jobs, hacks/crew, hacks/projects, hacks/posts). */

/* Job photo cards (hacks/jobs): same 4:3 media slot and card chrome as
   .svc-card--photo, but a <figure> whose caption is the content. */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.job{margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.job:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--sky-line);}
.job__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sky);}
.job__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%;transition:transform .5s ease;}
.job:hover .job__media img{transform:scale(1.04);}
.job figcaption{padding:20px 24px 22px;display:flex;flex-direction:column;flex:1;}
.job__where{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red-ink);margin-bottom:10px;}
.job__where svg{width:14px;height:14px;}
.job figcaption p{color:var(--ink);font-size:1rem;line-height:1.5;margin:0 0 14px;flex:1;}
.job__more{margin-top:auto;font-weight:700;font-size:.88rem;color:var(--navy);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:8px 0 0;line-height:1.4;}
.job__more:hover{color:var(--red-ink);}
@media(max-width:960px){.jobs{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.jobs{grid-template-columns:1fr;}}

/* Project cards with photos (hacks/projects). .pj__thumb in theme-overrides is
   16:9 for the blog's landscape featured images; the job photos are phone
   portraits, so the projects grid uses 4:3 and a slightly higher focal point. */
.projects .pj__thumb{aspect-ratio:4/3;}
.projects .pj__thumb img{object-position:center 40%;}
.projects__all{margin-top:28px;text-align:center;}
.projects__all .pj__more{padding:12px 4px;}

/* Crew band (hacks/crew): the homepage .why layout, photo held to 4:3. */
.crew .why__media img{aspect-ratio:4/3;}
.crew .why__list{grid-template-columns:1fr;gap:12px;}

/* Emergency band: the cinematic band with the crew behind it and a button. */
.cinematic--crew{background-image:url('/wp-content/themes/hacks-theme/assets/photos/crew-band.jpg');background-position:center 30%;}
.cinematic__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.cinematic__actions .btn{padding:17px 30px 17px 17px;font-size:1rem;}
.cinematic__hours{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:.92rem;color:rgba(255,255,255,.82);}
.cinematic__hours svg{width:16px;height:16px;color:var(--accent-dark);flex-shrink:0;}
@media(max-width:600px){.cinematic__actions .btn{flex:1 1 auto;}}

/* Location pages: the auto fleet photo beside a four-line intro is held to 4:3 so a short
   paragraph is not dwarfed by a 520px portrait; the built pages' stored photos are untouched. */
.intro__media--auto img{aspect-ratio:4/3;object-fit:cover;object-position:center 62%;max-height:none;}

/* Location pages: the why block rendered as numbered steps (see blocks/why). */
.steps--why .step__num{font-size:2.2rem;}

/* Estimate page: the form band sits directly under the hero, so the band's
   top padding no longer needs to clear a preceding section. */

/* ---- hero: crew (v3, 2026-09-16) -------------------------------------------------
   Copy over the full-bleed crew photograph. The section carries BOTH classes,
   hero--inner and hero--crew, so the eyebrow, keyword h1, buttons (pill +
   chevron badge), feature checks and spacing are the site's own inner-hero
   grammar; this block only overrides what a full-bleed crew photo needs.

   TWO SEPARATE SCRIM RULESETS, one per breakpoint: desktop wants a
   left-to-right wash (copy left, faces right), mobile top-to-bottom (faces
   top, copy below). The blend render had both gradients in one rule.

   picture{display:contents} at the top of this file removes the <picture>
   box from the tree, so position:absolute on it does nothing and the <img>
   becomes a flex item of the section -- the copy landed at x=1472 in a 1440
   viewport that way, twice. display:block is set explicitly. */
.hero--crew{padding:0;min-height:600px;display:flex;align-items:center;isolation:isolate;}
.hero--crew .hero__media{display:block;position:absolute;inset:0;z-index:0;}
.hero--crew .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%;}
.hero--crew .hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(11,18,52,.93) 0%,rgba(11,18,52,.86) 30%,rgba(11,18,52,.55) 52%,rgba(11,18,52,.22) 72%,rgba(11,18,52,.34) 100%),
             linear-gradient(0deg,rgba(11,18,52,.55) 0%,rgba(11,18,52,0) 38%);}
.hero--crew .container{padding-top:54px;padding-bottom:58px;}
.hero--crew .hero__inner{max-width:760px;}
.hero--crew .hero__h1{margin:14px 0 8px;}
.hero--crew .hero__h2{text-transform:uppercase;font-size:clamp(2.1rem,1.3rem + 2.5vw,3.5rem);line-height:1.02;letter-spacing:-.02em;
  max-width:22ch;margin-bottom:16px;text-shadow:0 2px 28px rgba(5,10,35,.45);}
.hero--crew .hero__lede{color:rgba(255,255,255,.88);font-size:1.05rem;line-height:1.5;max-width:48ch;margin-bottom:26px;}
.hero--crew .hero__actions{margin-bottom:22px;}
.hero--crew .hero__feats{margin-bottom:0;}
.btn__long{display:inline;}
@media(max-width:760px){
  /* Mobile A, "approved to be improved". The crew sits in a clear band across
     the TOP of the frame and the copy starts below the faces, so the headline
     no longer shares a rectangle with them; the sky is cropped out of the
     mobile source so the band is faces, not weather; the two buttons sit side
     by side so both clear the fixed action bar. */
  .hero--crew{min-height:0;display:block;}
  .hero--crew .hero__media img{object-position:50% 0;}
  .hero--crew .hero__scrim{background:linear-gradient(180deg,rgba(11,18,52,.30) 0%,rgba(11,18,52,.10) 14%,rgba(11,18,52,.16) 27%,rgba(11,18,52,.84) 44%,rgba(11,18,52,.97) 100%);}
  .hero--crew .container{padding-top:232px;padding-bottom:26px;}
  .hero--crew .hero__h1{text-shadow:0 1px 10px rgba(5,10,35,.8);margin:12px 0 6px;font-size:.7rem;letter-spacing:.14em;}
  .hero--crew .hero__h2{font-size:2.15rem;max-width:none;margin-bottom:12px;text-shadow:0 2px 20px rgba(5,10,35,.75);}
  .hero--crew .hero__lede{font-size:1rem;margin-bottom:20px;text-shadow:0 1px 12px rgba(5,10,35,.7);}
  .hero--crew .hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
  .hero--crew .hero__actions .btn{padding:14px 12px 14px 10px;font-size:.86rem;justify-content:center;white-space:nowrap;min-width:0;}
  .hero--crew .hero__actions .btn__chev{width:26px;height:26px;}
  .btn__long{display:none;}
  .hero--crew .hero__feats{flex-direction:row;gap:6px 12px;}
  .hero--crew .hero__feat{font-size:.78rem;}
}
@media(max-width:360px){.hero--crew .hero__actions{grid-template-columns:1fr;} .hero--crew .hero__h2{font-size:1.9rem;}}

/* ---- hero: with the estimate form in it (v3, 2026-09-16) ----------------------
   /request-estimate/ is where paid traffic lands. With the form in a band UNDER
   the hero the 1440x900 fold was hero only and the band's copy sat centred
   beside a 1,300px form, 400px of blank navy above it. Copy left, the .lead
   panel right, inside the hero: the form is in the fold on desktop and starts
   ~600px down on a phone instead of 1,530. */
.hero--form .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start;}
.hero--form .hero__inner{max-width:none;padding-top:8px;}
.hero--form .hero__h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.2rem);}
.hero--form .hero__feats{flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 26px;}
.hero--form .hero__call{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:1.05rem;padding:8px 0;}
.hero--form .hero__call svg{width:18px;height:18px;color:var(--accent-dark);}
.hero--form .hero__call:hover{text-decoration:underline;text-underline-offset:3px;}
.hero--form .lead{margin-top:0;grid-column:2;grid-row:1 / span 2;}
.hero--form .hero__grid{grid-template-rows:auto 1fr;}
.hero--form .hero__inner{grid-column:1;grid-row:1;}
/* The three steps fill the column under the copy, which otherwise sat empty
   for 700px beside a 1,300px form. On phones they follow the form (source
   order), so the form stays ~900px down instead of ~1,300. */
.hero--form .hero__steps{grid-column:1;grid-row:2;align-self:start;margin-top:6px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);}
.hero--form .hero__steps .eyebrow{color:var(--accent-dark);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.hero--form .hero__steps .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--accent-dark);}
.hero--form .hero__steps ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.hero__step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;}
.hero__step__n{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-stretch:var(--wd);font-weight:800;font-size:1.3rem;color:var(--accent-dark);}
.hero__step h3{color:#fff;font-size:1.08rem;margin-bottom:4px;}
.hero__step p{color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.55;}
@media(max-width:900px){
  .hero--form .hero__grid{grid-template-columns:1fr;grid-template-rows:none;gap:30px;}
  .hero--form .hero__inner,.hero--form .lead,.hero--form .hero__steps{grid-column:1;grid-row:auto;}
  .hero--form .hero__inner{padding-top:0;}
  .hero--form .hero__trust{display:none;}   /* the feats above it already carry the licence; on a phone this row only pushed the form down */
  .hero--form .hero__feats{margin-bottom:10px;}
  .hero--form .hero__steps{margin-top:0;padding-top:24px;}
}

/* ---- inner hero with a photographed person (v3, 2026-09-16) ---------------------
   The default inner scrim runs .96 -> .58 left to right, which was right for a
   fleet photo and hides a technician standing in the right half. Heroes that
   carry a person use the homepage crew hero's directional wash instead: heavy
   under the copy, light over the subject. Mobile keeps the default scrim: the
   copy covers the whole width there and readability wins. */
.hero--photo .hero__scrim{background:linear-gradient(100deg,rgba(19,28,78,.94) 0%,rgba(19,28,78,.86) 34%,rgba(19,28,78,.5) 56%,rgba(19,28,78,.18) 76%,rgba(19,28,78,.3) 100%);}
.hero--photo .hero__media img{object-position:center 30%;}
/* Per-page horizontal shift. A hero photographed with the person left of centre
   puts their face behind the headline in this copy-left layout. --hero-shift
   slides the photo right by that much of the container (the copy side under
   the .94 scrim becomes plain navy, and the photo's left edge is masked to a
   soft fade so no seam shows). Set inline on the section, e.g. style="--hero-shift:24%".
   Desktop only: on phones the portrait source is used and the copy covers the width. */
@media(min-width:861px){
  .hero--photo .hero__media img{position:relative;left:var(--hero-shift,0);width:100%;   /* slide, do not zoom: the right edge leaves the frame, the copy side becomes navy */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%);}
  .hero--photo .hero__media{background:var(--navy-deep);}
}
@media(max-width:860px){.hero--photo .hero__scrim{background:linear-gradient(90deg,rgba(19,28,78,.94) 0%,rgba(19,28,78,.86) 42%,rgba(19,28,78,.7) 100%);}}


/* Skyline background: serve AVIF/WebP where supported.
   The <picture> filter in inc/images.php only rewrites <img>, so a CSS
   background never got the siblings that are already on disk. skyline.jpg is
   296 KB and sits behind .footer__areas, which is in the footer on EVERY page;
   skyline.avif is 132 KB. The plain url() above stays as the fallback and the
   override only touches background-image, so position/size/repeat from the
   shorthand are preserved. @supports keeps it off any engine that would choke
   on the type() syntax. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .footer__areas::before,
  .areas::before {
    background-image: image-set(
      url('/wp-content/themes/hacks-theme/assets/photos/skyline.avif') type('image/avif'),
      url('/wp-content/themes/hacks-theme/assets/photos/skyline.webp') type('image/webp'),
      url('/wp-content/themes/hacks-theme/assets/photos/skyline.jpg')  type('image/jpeg')
    );
  }
}


/* =========================================================================
   Launch QA, 2026-09-21. Four measured fixes; each number below was read off
   rendered pixels at 1440/768/390, not computed from the stylesheet.
   ========================================================================= */

/* 1. The CTA eyebrow was the one eyebrow on navy still wearing the light-band
      red. Measured 2.72:1 against the band behind it, where 11.8px bold needs
      4.5:1. Every other dark band already switched to --accent-dark and
      measures 5.62 to 8.71; only line 56 above was updated for the CTA, which
      recoloured the 22px dash before the text and left the text itself red.
      That mismatch -- amber rule, red words -- is the tell that it was missed
      rather than chosen. This is the same colour the promise, cinematic, areas
      and inner-hero eyebrows already use, so it adds no new token. */
.cta__copy .eyebrow{color:var(--accent-dark);}

/* 2. "Most Requested" measured 4.46:1 white on --red, 0.04 short of the 4.5
      that 11.5px bold requires. --red-ink is the palette's darker red, already
      carrying every light-band eyebrow at 4.65-5.00, so this needs no new
      value. The shadow keeps the original hue; it sits under the pill and is
      not what the text is read against. */
.svc-card__badge{background:var(--red-ink);}

/* 3. The four stats did not share a baseline: "Same Day" wraps to two lines at
      four columns while 4.9, A+ and 20+ do not, so "Emergency Response" sat a
      full line below the other three labels. Pinning the label to the bottom of
      the grid row aligns all four however the value wraps -- including at 768px,
      where "Years of Hands-On Experience" wraps as well. A min-height on the
      value would have fixed today's copy and broken on the next edit. */
.stat{display:flex;flex-direction:column;}
.stat__l{margin-top:auto;padding-top:10px;}
/*    The flex pair above bottom-aligns the labels, which is right on desktop
      where all four are one line. At 768px three of the four labels wrap and one
      does not, so bottom-aligning left "Google Rating" starting 22px below its
      neighbours. Subgrid gives the value and the label a shared track across all
      four cells, so BOTH the values and the labels start on one line at every
      width. Kept as a progressive enhancement: where subgrid is unsupported the
      flex rules above still apply and the result is the pre-subgrid behaviour,
      not a broken layout. */
@supports (grid-template-rows: subgrid) {
  .stats__grid{grid-template-rows:auto auto;}
  .stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;}
  .stat__l{margin-top:0;padding-top:10px;}
}

/* 4. The 21 city links in the footer band carried an inline style= each,
      written by hacks_area_style(). They are now classed (see inc/areas.php);
      the colour moves here and the current city keeps its highlight.
      On phones the links were 16px tall, set solid in a wrapping sentence.
      WCAG 2.5.8 exempts inline links from the 24px target, so this is not a
      failure -- but twenty of them packed into six lines is a genuinely hard
      thing to hit, and it is in the footer of all 230 pages. Opening the line
      box and padding each link takes the hit area to about 30px without
      breaking the sentence flow. */
.footer__areas p a.farea{color:rgba(255,255,255,.72);text-decoration:none;}
.footer__areas p a.farea--here{color:#fff;font-weight:600;}
.footer__areas p a.farea:hover,
.footer__areas p a.farea:focus-visible{color:#fff;text-decoration:underline;}
@media(max-width:680px){
  .footer__areas p{line-height:2.5;}
  .footer__areas p a.farea{display:inline-block;padding:6px 3px;}
}


/* The same image-set treatment as the skyline block above, for the three CSS
   backgrounds it did not cover. Found 2026-09-21 by listing every resource over
   20 KB on a fully scrolled homepage: job-copper-repipe.jpg was the single
   heaviest asset on the page at 154 KB, and fleet.webp 78 KB behind it, both
   still in their authored format while avif siblings sat on disk. Between them
   that is 232 KB of the homepage, and .cta is on ~148 pages.

   Each override touches background-image ONLY, so position/size/repeat and the
   opacity on the ::before layers all survive from the shorthand above.
   .cinematic--crew has to come after .cinematic: same specificity, and it is a
   modifier that replaces only the image.

   WHY EVERY SELECTOR IS DOUBLED (.cinematic.cinematic). 2026-10-01: WP Rocket's
   "lazy-load CSS backgrounds" rewrites a selector's background ONCE. `.cinematic`
   and `.cta::before` already have a rule further up (the shorthand with the
   fallback image), so Rocket rewrote that one and left these overrides as plain
   url()s, which the browser fetches the moment the stylesheet is parsed. Measured
   on a phone, before any scroll: fleet.avif (63 KB) on every page with a form
   band, plus job-copper-repipe.avif (107 KB) on the homepage, for bands 9,000 and
   15,000 pixels down the page, competing with the hero for the same connection.
   The skyline block above never had the problem only because its selector list
   happens to differ from its fallback's. A doubled class is the same element,
   reads as a different selector to Rocket, and so gets the lazy treatment.

   KEEP THE @supports. Rocket turns each url() into a var(). A declaration that
   contains var() is accepted by every browser at parse time, so in an engine
   without image-set type() (Safari 16) it would not fall back to the shorthand,
   it would compute to no image at all. @supports keeps the whole block away
   from those engines. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .cinematic.cinematic {
    background-image: image-set(
      url('/wp-content/themes/hacks-theme/assets/photos/job-copper-repipe.avif') type('image/avif'),
      url('/wp-content/themes/hacks-theme/assets/photos/job-copper-repipe.webp') type('image/webp'),
      url('/wp-content/themes/hacks-theme/assets/photos/job-copper-repipe.jpg') type('image/jpeg')
    );
  }
  .cta.cta::before {
    background-image: image-set(
      url('/wp-content/themes/hacks-theme/assets/photos/fleet.avif') type('image/avif'),
      url('/wp-content/themes/hacks-theme/assets/photos/fleet.webp') type('image/webp')
    );
  }
  .cinematic--crew.cinematic--crew {
    background-image: image-set(
      url('/wp-content/themes/hacks-theme/assets/photos/crew-band.avif') type('image/avif'),
      url('/wp-content/themes/hacks-theme/assets/photos/crew-band.webp') type('image/webp'),
      url('/wp-content/themes/hacks-theme/assets/photos/crew-band.jpg') type('image/jpeg')
    );
  }
}

/* ---- a short last row is centred, not left with a hole (2026-10-01) ---------------
   Measured at 1440: 18 grids end on one or two cards beside an empty slot -- the
   eight hand-built area pages (feature + 3 + 2), /plumbing-services/ (3-3-2),
   /reviews/ (3-2), the project grids (3-3-3-3-1, 3-2). Each grid becomes six
   half-width tracks with every card spanning two, which is the same three-up
   layout, and the first card of a short LAST row is started one or two tracks in.

   Scope, each line learned from a before/after diff of every grid on all 247 URLs:
   - Not the landing pages. Their own sheet loads after this one and sets .svc-grid
     back to three tracks, so "span 2" there turned a 3x2 grid into one column.
   - Not .rev-grid--2, which is a two-track grid.
   - Not #areas, which is a single column of region cards.
   - Not a grid that is ONE short row (two project cards under a left-aligned
     heading). Those stay left, in line with the heading; only a short row that
     follows full rows is centred. :not(:first-child) / :not(:nth-child(2)) is that.
   Two variants, because a full-width feature card as first child shifts every
   index by one. Desktop only: the two-up and one-up breakpoints are untouched. */
@media(min-width:961px){
  body:not(.single-lp) :is(.svc-grid,.pgrid,.rev-grid:not(.rev-grid--2)){grid-template-columns:repeat(6,1fr);}
  body:not(.single-lp) :is(.svc-grid,.pgrid,.rev-grid:not(.rev-grid--2)) > *{grid-column:span 2;}
  body:not(.single-lp) .svc-grid > .svc-card--feature.svc-card--photo{grid-column:1/-1;}
  body:not(.single-lp) :is(.svc-grid,.pgrid,.rev-grid:not(.rev-grid--2)):not(:has(> .svc-card--feature.svc-card--photo)) > :nth-child(3n+1):nth-last-child(2):not(:first-child){grid-column:2/span 2;}
  body:not(.single-lp) :is(.svc-grid,.pgrid,.rev-grid:not(.rev-grid--2)):not(:has(> .svc-card--feature.svc-card--photo)) > :nth-child(3n+1):last-child:not(:first-child){grid-column:3/span 2;}
  body:not(.single-lp) .svc-grid:has(> .svc-card--feature.svc-card--photo) > :nth-child(3n+2):nth-last-child(2):not(:nth-child(2)){grid-column:2/span 2;}
  body:not(.single-lp) .svc-grid:has(> .svc-card--feature.svc-card--photo) > :nth-child(3n+2):last-child:not(:nth-child(2)){grid-column:3/span 2;}
  body:not(.single-lp) #areas .svc-grid{grid-template-columns:1fr;}
  body:not(.single-lp) #areas .svc-grid > *{grid-column:auto;}
}