:root{
  color-scheme:light;
  --ink:#0E0F12; --ink-2:#15161A; --ink-3:#1C1E23; --ink-4:#23252B;
  --red:#981018; --red-bright:#C8202B; --red-deep:#6E0C12;
  --bone:#F6F4F1; --white:#FFFFFF; --bone-3:#ECE8E2;
  --charcoal:#222327; --steel:#62666C; --steel-2:#83878D;
  --steel-light:#A9AEB5; --muted-dark:#9CA1A8;
  --line:rgba(16,15,18,.10); --line-2:rgba(16,15,18,.07);
  --line-dark:rgba(255,255,255,.12); --line-dark-2:rgba(255,255,255,.07);
  --font-display:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-body:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-mono:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --maxw:1160px; --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,15,18,.04),0 12px 34px -18px rgba(16,15,18,.22);
  --shadow-lg:0 30px 70px -30px rgba(16,15,18,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--charcoal);background:var(--bone);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:800;color:var(--charcoal)}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(64px,9vw,108px) 0}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--red);opacity:.65}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:#E66}
.eyebrow.on-dark::before{background:#E66}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--steel);max-width:62ch}
.sec-head{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.hl{color:var(--red)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--font-display);
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;padding:.92em 1.5em;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s ease,box-shadow .2s ease,color .2s ease;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 26px -12px rgba(152,16,24,.8)}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--charcoal);transform:translateY(-2px)}
.btn-ghost.on-dark{color:#fff;border-color:var(--line-dark)}
.btn-ghost.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-lg{padding:1.05em 1.8em;font-size:1.03rem}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.90);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.site-head.scrolled{background:rgba(255,255,255,.98);box-shadow:0 6px 22px -16px rgba(16,15,18,.30)}
.head-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:14px clamp(20px,5vw,40px)}
.brand{display:inline-flex;align-items:center}
.brand img{height:34px;width:auto}
.head-cta{display:flex;align-items:center;gap:14px;margin-left:auto}
.head-phone{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-weight:600;
  font-size:.92rem;color:var(--charcoal);letter-spacing:.01em}
.head-phone svg{width:16px;height:16px;color:var(--red-bright)}
.head-phone span{color:var(--steel)}
.head-phone .num{color:var(--charcoal)}
.nav-toggle{display:none}
.head-nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.head-nav a{font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--steel);
  padding:.5em .9em;border-radius:9px;transition:color .15s ease,background .15s ease;white-space:nowrap}
.head-nav a:hover{color:var(--charcoal);background:rgba(16,15,18,.05)}
.head-nav a.active{color:var(--red);background:rgba(152,16,24,.08)}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(56px,8vw,96px)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 540px at 12% -8%,rgba(152,16,24,.34),transparent 60%),
             radial-gradient(700px 500px at 100% 0%,rgba(40,44,55,.55),transparent 55%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(900px 600px at 30% 20%,#000,transparent 78%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,66px);align-items:center}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.05rem);font-weight:900;letter-spacing:-.03em;color:#fff;margin-bottom:1.15rem}
.hero h1 .hl{color:var(--red-bright)}
.hero-sub{font-size:clamp(1.06rem,1.7vw,1.28rem);color:#D5D8DC;max-width:48ch;margin-bottom:1.9rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:2.1rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:1.5rem;border-top:1px solid var(--line-dark-2)}
.trust-item{display:flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.76rem;
  letter-spacing:.04em;color:var(--steel-light)}
.trust-item b{color:#fff;font-weight:600}
.trust-item .tk{color:var(--red-bright)}

/* NOC signature panel */
.noc{background:linear-gradient(180deg,rgba(28,30,35,.92),rgba(18,19,23,.96));
  border:1px solid var(--line-dark);border-radius:18px;padding:22px 22px 18px;font-family:var(--font-mono);
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.noc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--red-bright),transparent)}
.noc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.noc-brand{display:inline-flex;align-items:center;gap:.55em;font-size:.74rem;letter-spacing:.14em;color:#C9CDD3;font-weight:600}
.noc .dot{width:8px;height:8px;border-radius:50%;background:#33D17A;box-shadow:0 0 0 0 rgba(51,209,122,.55);animation:pulse 2.4s infinite}
.noc-status{font-size:.68rem;letter-spacing:.16em;color:#33D17A;font-weight:600}
.noc-loc{font-size:.72rem;color:var(--steel-light);letter-spacing:.06em;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px dashed var(--line-dark)}
.noc-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:.8rem}
.noc-row span{color:var(--steel-light);letter-spacing:.08em}
.noc-row b{font-weight:600;letter-spacing:.08em}
.noc-row .ok{color:#E7EAEE}
.noc-row .star{color:var(--red-bright);letter-spacing:.12em}
.noc-row+.noc-row{border-top:1px solid var(--line-dark-2)}
.noc-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-dark);
  font-size:.68rem;color:var(--steel-light);letter-spacing:.06em;display:flex;align-items:center;gap:.5em}
.noc-foot .dot2{width:5px;height:5px;border-radius:50%;background:var(--red-bright)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(51,209,122,.5)}70%{box-shadow:0 0 0 9px rgba(51,209,122,0)}100%{box-shadow:0 0 0 0 rgba(51,209,122,0)}}

/* hero product image (right of hero, blended into the dark backdrop) */
.hero-visual{position:relative}
.hero-pc-wrap{position:relative;isolation:isolate;width:100%;max-width:clamp(360px,42vw,560px);margin-left:auto}
.hero-pc-wrap::before{content:"";position:absolute;z-index:0;inset:-8% -10% -6% -8%;pointer-events:none;
  background:radial-gradient(46% 42% at 50% 36%,rgba(60,120,255,.40),transparent 70%),
            radial-gradient(42% 40% at 38% 54%,rgba(40,200,170,.30),transparent 72%),
            radial-gradient(44% 42% at 64% 52%,rgba(180,70,210,.30),transparent 72%),
            radial-gradient(40% 36% at 56% 70%,rgba(255,150,70,.15),transparent 74%);
  filter:blur(40px);opacity:.82}
.hero-pc{position:relative;z-index:2;display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.5)) drop-shadow(0 4px 10px rgba(0,0,0,.38))}
.hero-pc-badge{position:absolute;z-index:3;left:-14px;bottom:7%;min-width:184px;
  background:rgba(15,16,20,.74);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  border:1px solid var(--line-dark);border-radius:13px;padding:12px 15px;
  box-shadow:0 22px 46px -22px rgba(0,0,0,.85);font-family:var(--font-mono)}
.hero-pc-badge::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:13px 13px 0 0;
  background:linear-gradient(90deg,var(--red),var(--red-bright),transparent)}
.hpb-top{display:flex;align-items:center;gap:.5em;font-size:.7rem;letter-spacing:.14em;color:#C9CDD3;font-weight:600;margin-bottom:9px}
.hpb-top .dot{width:7px;height:7px;border-radius:50%;background:#33D17A;box-shadow:0 0 0 0 rgba(51,209,122,.55);animation:pulse 2.4s infinite}
.hpb-row{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.72rem;letter-spacing:.06em;padding:3px 0}
.hpb-row span{color:var(--steel-light)}
.hpb-row b{color:#E7EAEE;font-weight:600}
.hpb-row b.star{color:var(--red-bright);letter-spacing:.1em}

/* services (managed, light) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:26px 24px 24px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(152,16,24,.25)}
.svc-ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(152,16,24,.08);color:var(--red)}
.svc-ico svg{width:23px;height:23px}
.svc-card h3{font-size:1.16rem;margin-bottom:.5rem;letter-spacing:-.01em}
.svc-card p{font-size:.96rem;color:var(--steel);margin:0}
.svc-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--steel);
  text-transform:uppercase;display:block;margin-bottom:11px}

/* repair (dark) */
.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 88% 8%,rgba(152,16,24,.22),transparent 60%)}
.dark .wrap{position:relative;z-index:2}
.dark .sec-head h2{color:#fff}
.dark .lead{color:#C2C6CC}
.repair-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,56px);align-items:start}
.repair-list{display:grid;gap:2px}
.repair-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line-dark-2)}
.repair-item:first-child{border-top:0}
.repair-check{flex:none;width:30px;height:30px;border-radius:8px;background:rgba(200,32,43,.16);
  color:var(--red-bright);display:grid;place-items:center;margin-top:2px}
.repair-check svg{width:17px;height:17px}
.repair-item h3{font-size:1.08rem;color:#fff;margin-bottom:.25rem}
.repair-item p{font-size:.93rem;color:#AEB3BA;margin:0}
.repair-aside{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-dark);
  border-radius:18px;padding:30px 28px;position:sticky;top:90px}
.repair-aside .badge{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--red-bright);
  text-transform:uppercase;display:block;margin-bottom:14px}
.repair-aside h3{font-size:1.5rem;color:#fff;margin-bottom:.7rem;line-height:1.18}
.repair-aside p{font-size:.97rem;color:#B7BCC3;margin-bottom:1.4rem}
.repair-aside .btn{width:100%}

/* residential band */
.resi{background:var(--bone)}
.resi-inner{background:linear-gradient(120deg,#fff, #FBFAF8);border:1px solid var(--line-2);
  border-radius:20px;padding:clamp(30px,4.5vw,52px);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:center}
.resi-inner h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.8rem}
.resi-inner p{color:var(--steel);font-size:1.02rem}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chip{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.02em;background:rgba(152,16,24,.07);
  color:var(--red-deep);border:1px solid rgba(152,16,24,.16);border-radius:999px;padding:.42em .9em}
.resi-card{background:var(--ink);border-radius:16px;padding:30px 28px;color:#fff;box-shadow:var(--shadow-lg)}
.resi-card .q{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--red-bright);text-transform:uppercase;margin-bottom:12px}
.resi-card ul{list-style:none;margin:0;padding:0}
.resi-card li{display:flex;gap:11px;padding:9px 0;font-size:.97rem;color:#D9DCE0;border-top:1px solid var(--line-dark-2)}
.resi-card li:first-child{border-top:0}
.resi-card li svg{width:18px;height:18px;color:var(--red-bright);flex:none;margin-top:3px}

/* why us */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:42px}
.why-card{padding:26px 24px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.why-card .n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--red);margin-bottom:12px;display:block}
.why-card h3{font-size:1.12rem;margin-bottom:.45rem}
.why-card p{font-size:.95rem;color:var(--steel);margin:0}
.pull{background:linear-gradient(115deg,var(--red-deep),var(--red) 55%,#B11622);color:#fff;border-radius:20px;
  padding:clamp(30px,4.5vw,52px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.pull::after{content:"";position:absolute;right:-40px;top:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.pull h3{font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;max-width:20ch;letter-spacing:-.02em;position:relative;z-index:2}
.pull p{margin:.5rem 0 0;color:rgba(255,255,255,.85);position:relative;z-index:2;max-width:38ch}
.pull .btn{position:relative;z-index:2;background:#fff;color:var(--red-deep)}
.pull .btn:hover{background:#0E0F12;color:#fff}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.steps + .pull{margin-top:clamp(42px,6vw,72px)}
.step{position:relative;padding:26px 22px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.step .num{font-family:var(--font-display);font-weight:900;font-size:2.4rem;color:rgba(152,16,24,.16);line-height:1;letter-spacing:-.04em}
.step h3{font-size:1.08rem;margin:.4rem 0 .4rem}
.step p{font-size:.93rem;color:var(--steel);margin:0}

/* local serving */
.local-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,56px);align-items:start}
.local-body p{font-size:1.03rem;color:#3A3C41}
.hoods-card{background:var(--white);border:1px solid var(--line-2);border-radius:18px;padding:28px 26px;box-shadow:var(--shadow)}
.hoods-card .q{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--red);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:.5em}
.hoods-card .q svg{width:15px;height:15px}
.hoods-list{display:flex;flex-wrap:wrap;gap:8px}
.hoods-list .chip{background:var(--bone);border-color:var(--line);color:var(--charcoal)}
.hoods-card .sep{height:1px;background:var(--line);margin:20px 0}
.hoods-card .meta-row{display:flex;align-items:center;gap:.6em;font-size:.9rem;color:var(--steel);margin:7px 0}
.hoods-card .meta-row svg{width:16px;height:16px;color:var(--red);flex:none}

/* faq */
.faq-wrap{max-width:840px;margin:0 auto}
.faq{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;color:var(--charcoal);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:1.4rem;color:var(--red);transition:transform .2s ease}
.faq[open] summary::after{content:"\2013"}
.faq .ans{padding:0 22px 20px;color:var(--steel);font-size:.99rem}
.faq .ans p{margin:0}

/* final cta */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 480px at 80% 110%,rgba(152,16,24,.35),transparent 60%),
            radial-gradient(700px 460px at 6% -10%,rgba(40,44,55,.5),transparent 60%)}
.cta .wrap{position:relative;z-index:2}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.85rem);color:#fff;margin-bottom:1rem}
.cta .lead{color:#C7CBD1;margin-bottom:1.6rem}
.cta-call{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-weight:600;
  font-size:1.18rem;color:#fff;margin-bottom:.4rem}
.cta-call svg{width:20px;height:20px;color:var(--red-bright)}
.cta-callnote{font-size:.86rem;color:var(--steel-light);font-family:var(--font-mono);letter-spacing:.04em}

/* form */
.quote-card{background:#fff;border-radius:18px;padding:clamp(26px,3.5vw,38px);box-shadow:var(--shadow-lg);color:var(--charcoal)}
.quote-card h3{font-size:1.35rem;margin-bottom:.35rem}
.quote-card .fnote{color:var(--steel);font-size:.94rem;margin-bottom:1.4rem}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.field label .opt{text-transform:none;letter-spacing:0;color:var(--steel-2);font-weight:500}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--charcoal);
  background:var(--bone);border:1.5px solid var(--line);border-radius:10px;padding:.78em .9em;transition:border-color .15s ease,background .15s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.field textarea{resize:vertical;min-height:92px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote-card .btn{width:100%;margin-top:6px}
.privacy-note{font-size:.78rem;color:var(--steel);margin-top:12px;text-align:center}
.form-success{display:none;text-align:center;padding:18px 6px}
.form-success.show{display:block}
.form-success .ck{width:54px;height:54px;border-radius:50%;background:rgba(152,16,24,.1);color:var(--red);display:grid;place-items:center;margin:0 auto 16px}
.form-success .ck svg{width:28px;height:28px}
.form-success h3{margin-bottom:.4rem}
.form-success p{color:var(--steel);font-size:.96rem}

/* footer */
.foot{background:#0A0B0D;color:#B7BCC3;padding:clamp(54px,7vw,80px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:42px;border-bottom:1px solid var(--line-dark-2)}
.foot-brand img{height:32px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:.92rem;color:#A6ABB3;max-width:34ch;margin-bottom:16px}
.foot-phone{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-weight:600;font-size:1.05rem;color:#fff;margin-bottom:6px}
.foot-phone svg{width:17px;height:17px;color:var(--red-bright)}
.foot-area{font-size:.82rem;color:#9AA0A8;font-family:var(--font-mono);letter-spacing:.03em}
.foot h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot li a{font-size:.92rem;color:#B0B5BC;transition:color .15s ease}
.foot li a:hover{color:var(--red-bright)}
.foot-nearby{padding:26px 0;border-bottom:1px solid var(--line-dark-2);display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.foot-nearby .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9AA0A8;margin-right:6px}
.foot-nearby a{font-size:.86rem;color:#B7BCC3;border:1px solid var(--line-dark-2);border-radius:999px;padding:.34em .85em;transition:all .15s ease}
.foot-nearby a:hover{color:#fff;border-color:var(--red-bright)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;font-size:.82rem;color:#9AA0A8}
.foot-social{display:flex;gap:14px}
.foot-social a{color:#A6ABB3;transition:color .15s ease}
.foot-social a:hover{color:#fff}
.foot-social svg{width:19px;height:19px}

/* accessibility / motion */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red-bright);outline-offset:2px;border-radius:6px}
.resi-ul{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}
.resi-ul li{display:flex;align-items:center;gap:.6em;font-size:.98rem;color:#E7EAEE}
.resi-ul li svg{width:18px;height:18px;color:var(--red-bright);flex:none}
.dark .chip{background:rgba(255,255,255,.06);color:#D7DADF;border:1px solid var(--line-dark-2)}
:root{--uni:#005ED9;--uni-bright:#2E7DEF}
.crosscta{display:flex;align-items:center;justify-content:space-between;gap:24px 34px;flex-wrap:wrap;background:linear-gradient(120deg,#0d0e12,#16181f);border:1px solid var(--line-dark-2);border-radius:20px;padding:clamp(26px,4vw,42px);position:relative;overflow:hidden}
.crosscta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(540px 320px at 90% 12%,rgba(0,94,217,.30),transparent 62%)}
.crosscta>*{position:relative;z-index:2}
.crosscta .cc-copy{max-width:60ch}
.crosscta .eyebrow{color:#6FA6F2;margin-bottom:12px}
.crosscta .eyebrow::before{background:#6FA6F2}
.crosscta h3{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.75rem);color:#fff;letter-spacing:-.02em;margin-bottom:8px;line-height:1.15}
.crosscta p{color:#C2C6CC;font-size:1rem;line-height:1.55}
.crosscta .btn{flex:none}
@media (max-width:680px){.crosscta{flex-direction:column;align-items:flex-start}.crosscta .btn{width:100%}}
@media (max-width:620px){.resi-ul{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* responsive */
@media (max-width:980px){
  .hero-grid,.repair-grid,.resi-inner,.local-grid,.cta-grid{grid-template-columns:1fr}
  .svc-grid,.why-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .repair-aside{position:static}
  .hero-pc-wrap{margin:0 auto}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:16px}
  .svc-grid,.why-grid,.steps,.frow{grid-template-columns:1fr}
  .resi-card{order:-1}
  .head-phone span{display:none}
  .head-phone .num{display:none}
  .hero-actions .btn{flex:1 1 100%}
  .head-nav{order:5;flex-basis:100%;justify-content:center;gap:4px;margin:8px 0 0;border-top:1px solid var(--line);padding-top:8px}
  .hero-pc-wrap{max-width:min(440px,100%)}
  .hero-pc-badge{left:0;bottom:5%;min-width:0;padding:10px 12px}
  .hpb-row{gap:14px}
  .pull{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns:1fr}
}

.brand img{height:34px;width:auto}
.foot-brand img{height:30px;width:auto}
.hero-figure{margin:0 0 0 auto;width:100%;max-width:clamp(420px,48vw,600px);line-height:0}
.hero-figure .hero-art{display:block;width:100%;height:auto;overflow:visible}
@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-art .art-float{animation:artFloat 7s ease-in-out infinite}
@media(max-width:980px){.hero-figure{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.hero-art .art-float{animation:none}}
.natband{display:flex;align-items:center;justify-content:center;gap:.7em;flex-wrap:wrap;text-align:center;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;color:var(--steel-light);margin-top:30px}
.natband b{color:var(--bone)}
.natband .nd{width:6px;height:6px;border-radius:50%;background:#33D17A;flex:none}
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
.brand-chip{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#26282d;background:#fff;border:1.5px solid #E3E0DB;border-radius:999px;padding:12px 22px;box-shadow:0 6px 18px rgba(20,20,25,.05)}
.brand-note{text-align:center;color:#62666C;margin-top:22px;font-size:.95rem}
.brands-sec{padding-top:0}
.recycle-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.rec-col{border-radius:18px;padding:28px 30px;border:1.5px solid #E3E0DB;background:#fff}
.rec-col h3{font-family:var(--font-display);font-size:1.25rem;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.rec-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.rec-col li{position:relative;padding-left:30px;color:#34373d;font-size:1.02rem;line-height:1.45}
.rec-col li::before{position:absolute;left:0;top:-1px;font-weight:800}
.rec-yes{border-color:rgba(51,209,122,.45);background:linear-gradient(180deg,rgba(51,209,122,.06),#fff)}
.rec-yes h3{color:#1f8f54}
.rec-yes li::before{content:"\2713";color:#33A86A}
.rec-no{border-color:rgba(200,32,43,.30);background:linear-gradient(180deg,rgba(200,32,43,.05),#fff)}
.rec-no h3{color:#C8202B}
.rec-no li::before{content:"\2715";color:#C8202B}
@media(max-width:760px){.recycle-cols{grid-template-columns:1fr}}

/* ============================================================
   ORCA IT — multi-page site additions
   ============================================================ */

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:.7em 1.1em;border-radius:0 0 10px 0;z-index:200;font-weight:700}
.skip:focus{left:0}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.02em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar .tb-left{display:flex;align-items:center;gap:.55em;color:#C9CDD3}
.topbar .tb-left b{color:#fff;font-weight:600}
.topbar .tb-right{display:flex;align-items:center;gap:1.2em;color:#C9CDD3}
.topbar .tb-right .num{color:#fff;font-weight:600}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:#33D17A;display:inline-block;box-shadow:0 0 0 3px rgba(51,209,122,.18)}
@media(max-width:760px){.topbar .tb-left{display:none}.topbar .wrap{justify-content:center}}

/* ---------- primary nav w/ dropdowns ---------- */
.head-nav .navitem{position:relative}
.head-nav .navitem>a{display:inline-flex;align-items:center;gap:.35em}
.head-nav .navitem>a .caret{width:11px;height:11px;opacity:.6;transition:transform .18s ease}
.head-nav .navitem:hover>a .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:16px;min-width:260px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:80}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.dropdown.wide{min-width:640px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.dropdown.wide .dd-grid{grid-template-columns:repeat(3,1fr)}
.dropdown a{display:block;padding:.5em .7em;border-radius:9px;font-family:var(--font-body);font-size:.92rem;
  font-weight:500;color:var(--charcoal);line-height:1.35;transition:background .14s ease,color .14s ease}
.dropdown a:hover{background:rgba(152,16,24,.07);color:var(--red)}
.dd-head{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-2);padding:.5em .7em .35em;margin:0}
.dd-foot{margin-top:10px;border-top:1px solid var(--line-2);padding-top:10px}
.dd-foot a{font-weight:700;color:var(--red)}

/* mobile nav */
.mob-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--charcoal)}
.mob-toggle svg{width:22px;height:22px}
.mob-panel{display:none;border-top:1px solid var(--line);background:#fff;max-height:76vh;overflow-y:auto}
.mob-panel.open{display:block}
.mob-panel .wrap{padding-top:14px;padding-bottom:22px}
.mob-panel details{border-bottom:1px solid var(--line-2)}
.mob-panel summary{list-style:none;cursor:pointer;padding:.9em 0;font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;display:flex;align-items:center;justify-content:space-between}
.mob-panel summary::-webkit-details-marker{display:none}
.mob-panel summary::after{content:"+";color:var(--red);font-size:1.3rem;line-height:1}
.mob-panel details[open] summary::after{content:"\2013"}
.mob-panel .mob-links{padding:0 0 .9em;display:grid;gap:1px}
.mob-panel .mob-links a{padding:.5em 0;color:var(--steel);font-size:.95rem}
.mob-panel .mob-links a:hover{color:var(--red)}
.mob-panel>.wrap>a.mob-top{display:block;padding:.9em 0;border-bottom:1px solid var(--line-2);
  font-family:var(--font-display);font-weight:700;font-size:1.02rem}
.mob-cta{display:grid;gap:10px;margin-top:18px}
/* With the phone link gone from the header the full nav fits down to ~1000px,
   so tablets and small laptops keep it instead of dropping to a hamburger. */
@media(max-width:1009px){
  .head-nav{display:none}
  .mob-toggle{display:inline-flex}
  .head-cta .btn-primary{display:none}
}
@media(max-width:620px){
  .head-phone span:not(.num){display:none}
}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--bone-3);border-bottom:1px solid var(--line-2)}
.crumbs ol{list-style:none;margin:0;padding:.85rem 0;display:flex;flex-wrap:wrap;gap:.45em;align-items:center;
  font-family:var(--font-mono);font-size:.73rem;letter-spacing:.02em;color:var(--steel)}
.crumbs li{display:flex;align-items:center;gap:.45em}
.crumbs li+li::before{content:"/";opacity:.42}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--charcoal);font-weight:600}
.crumbs.on-dark{background:var(--ink-2);border-bottom-color:var(--line-dark-2)}
.crumbs.on-dark ol{color:var(--steel-light)}
.crumbs.on-dark a{color:var(--steel-light)}
.crumbs.on-dark a:hover{color:#fff}
.crumbs.on-dark [aria-current]{color:#fff}

/* ---------- page hero (interior) ---------- */
.hero.compact{padding:clamp(48px,6vw,78px) 0 clamp(48px,6vw,74px)}
.hero.compact h1{font-size:clamp(1.95rem,4.4vw,3.15rem)}
.hero-solo{max-width:820px}
.hero-solo .hero-sub{max-width:64ch}
.hero-metrics{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line-dark-2)}
.hero-metric .v{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;line-height:1.1}
.hero-metric .l{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-light)}

/* ---------- hub + sidebar layout ---------- */
.hub{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:clamp(30px,4vw,54px);align-items:start}
.hub-main{min-width:0}
.hub-side{position:sticky;top:96px;display:grid;gap:18px}
@media(max-width:980px){.hub{grid-template-columns:1fr}.hub-side{position:static}}

.widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.widget h3{font-size:1.02rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.5em}
.widget h3 svg{width:17px;height:17px;color:var(--red)}
.widget-title{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--steel-2);margin:0 0 .85rem}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;max-height:none}
.widget ul.scroll{max-height:440px;overflow-y:auto;padding-right:4px}
.widget ul.scroll::-webkit-scrollbar{width:6px}
.widget ul.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.widget li a{display:flex;align-items:center;gap:.55em;padding:.52em .6em;border-radius:9px;font-size:.93rem;
  color:var(--steel);line-height:1.4;transition:background .14s,color .14s,padding-left .14s}
.widget li a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line);flex:none;transition:background .14s}
.widget li a:hover{background:rgba(152,16,24,.06);color:var(--red)}
.widget li a:hover::before{background:var(--red)}
.widget li a.current{background:rgba(152,16,24,.09);color:var(--red);font-weight:600}
.widget li a.current::before{background:var(--red)}
.widget-cta{background:var(--ink);color:#fff;border-color:transparent;position:relative;overflow:hidden}
.widget-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at 100% 0%,rgba(152,16,24,.42),transparent 62%)}
.widget-cta>*{position:relative;z-index:2}
.widget-cta h3{color:#fff}
.widget-cta p{color:var(--steel-light);font-size:.93rem}
.widget-cta .btn{width:100%}
.widget-phone{display:flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-weight:600;color:#fff;margin-top:.8rem;justify-content:center}
.widget-phone svg{width:16px;height:16px;color:#E66}

/* ---------- prose ---------- */
.prose{max-width:none}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.95rem);margin:2.3rem 0 .85rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.12rem,1.8vw,1.28rem);margin:1.7rem 0 .55rem}
.prose p{color:var(--steel);margin:0 0 1.05rem}
.prose ul,.prose ol{color:var(--steel);margin:0 0 1.2rem;padding-left:1.15rem}
.prose li{margin:0 0 .5rem}
.prose li::marker{color:var(--red)}
.prose strong{color:var(--charcoal);font-weight:700}
.prose a:not(.btn){color:var(--red);font-weight:600;border-bottom:1px solid rgba(152,16,24,.28)}
.prose a:not(.btn):hover{border-bottom-color:var(--red)}
.prose .lead{margin-bottom:1.4rem}

/* pull quote */
.quote-block{border-left:3px solid var(--red);padding:.2rem 0 .2rem 1.3rem;margin:1.8rem 0;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.35;color:var(--charcoal)}
.quote-block cite{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-2);font-style:normal;margin-top:.7rem}

/* callout */
.callout{background:var(--bone-3);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;margin:1.7rem 0}
.callout h3{margin:0 0 .5rem;font-size:1.05rem}
.callout p:last-child{margin-bottom:0}
.callout.red{background:rgba(152,16,24,.055);border-color:rgba(152,16,24,.16)}

/* ---------- link tiles ---------- */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.link-grid.tight{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 16px;transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(152,16,24,.32)}
.tile b{font-family:var(--font-display);font-weight:700;font-size:.99rem;color:var(--charcoal);line-height:1.25}
.tile span{font-size:.85rem;color:var(--steel-2);line-height:1.45}
.tile .arrow{margin-top:auto;padding-top:.45rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);font-weight:700}
.tile.dark{background:var(--ink-3);border-color:var(--line-dark)}
.tile.dark b{color:#fff}.tile.dark span{color:var(--steel-light)}

/* compact city / link columns */
.col-links{columns:3;column-gap:26px}
.col-links a{display:block;padding:.34em 0;font-size:.93rem;color:var(--steel);break-inside:avoid}
.col-links a:hover{color:var(--red)}
@media(max-width:860px){.col-links{columns:2}}
@media(max-width:520px){.col-links{columns:1}}

/* ---------- stats band ---------- */
.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0}
.statband .s{background:#fff;padding:22px 20px;text-align:center}
.statband .v{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--charcoal);line-height:1.05}
.statband .v em{font-style:normal;color:var(--red)}
.statband .l{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-2);margin-top:.4rem}
.section.dark .statband{background:var(--line-dark);border-color:var(--line-dark)}
.section.dark .statband .s{background:var(--ink-3)}
.section.dark .statband .v{color:#fff}

/* ---------- comparison table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
table.cmp thead th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel-2);background:var(--bone-3);font-weight:700}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td:first-child{font-weight:600;color:var(--charcoal)}
table.cmp .yes{color:#1E8A50;font-weight:700}
table.cmp .no{color:var(--steel-2)}

/* ---------- pod band ---------- */
.pod{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.pod .p{background:var(--ink-3);border:1px solid var(--line-dark);border-radius:var(--radius);padding:20px}
.pod .p .ic{width:38px;height:38px;border-radius:11px;background:rgba(152,16,24,.22);display:grid;place-items:center;margin-bottom:.85rem}
.pod .p .ic svg{width:19px;height:19px;color:#F08A92}
.pod .p h3{color:#fff;font-size:1.03rem;margin-bottom:.35rem}
.pod .p p{color:var(--steel-light);font-size:.92rem;margin:0}

/* ---------- related / next ---------- */
.related{border-top:1px solid var(--line);padding-top:26px;margin-top:40px}
.related .widget-title{margin-bottom:.9rem}

/* ---------- inline CTA strip ---------- */
.strip{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(24px,3.4vw,34px);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;position:relative;overflow:hidden;margin:2rem 0}
.strip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 300px at 0% 0%,rgba(152,16,24,.4),transparent 60%)}
.strip>*{position:relative;z-index:2}
.strip h3{color:#fff;font-size:clamp(1.15rem,2.2vw,1.5rem);margin-bottom:.35rem}
.strip p{color:var(--steel-light);margin:0;max-width:56ch;font-size:.96rem}

/* ---------- careers ---------- */
.role{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.role .rtop{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.role h3{font-size:1.1rem;margin:0}
.role .meta{font-family:var(--font-mono);font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-2)}
.role p{color:var(--steel);margin:0 0 .8rem;font-size:.95rem}

/* ---------- contact cards ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:1.8rem}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:left}
.ccard .ic{width:40px;height:40px;border-radius:11px;background:rgba(152,16,24,.09);display:grid;place-items:center;margin-bottom:.8rem}
.ccard .ic svg{width:20px;height:20px;color:var(--red)}
.ccard h3{font-size:1rem;margin-bottom:.3rem}
.ccard p{margin:0;font-size:.92rem;color:var(--steel)}
.ccard a{color:var(--red);font-weight:600}

/* form on light background */
.quote-card.light{background:#fff;border:1px solid var(--line);color:var(--charcoal)}
.quote-card.light h3{color:var(--charcoal)}
.quote-card.light label{color:var(--steel)}
.quote-card.light input,.quote-card.light select,.quote-card.light textarea{
  background:var(--bone);border-color:var(--line);color:var(--charcoal)}
.quote-card.light .fnote,.quote-card.light .privacy-note{color:var(--steel-2)}

/* ---------- footer additions ---------- */
.foot-top{align-items:start}
.foot-legal{display:flex;flex-wrap:wrap;gap:.5em 1.2em}
.foot-legal a{color:inherit}
.foot-cols5{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
@media(max-width:1040px){.foot-cols5{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:680px){.foot-cols5{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-cols5{grid-template-columns:1fr}}
.foot-strap{border-top:1px solid var(--line-dark-2);margin-top:26px;padding-top:20px}
.foot-strap .widget-title{color:var(--steel-2);margin-bottom:.7rem}
.foot-strap .col-links a{color:var(--steel-light);font-size:.86rem}
.foot-strap .col-links a:hover{color:#fff}
@media(max-width:860px){.foot-strap .col-links{columns:2}}

/* ---------- misc ---------- */
.center{text-align:center}
.mt0{margin-top:0}
.anchor-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.6rem}
.anchor-nav a{font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.03em;padding:.5em .85em;
  border-radius:999px;border:1px solid var(--line);color:var(--steel);background:#fff}
.anchor-nav a:hover{border-color:var(--red);color:var(--red)}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:1.2rem 0}
.badge-pill{font-family:var(--font-mono);font-size:.71rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.42em .85em;border-radius:999px;background:rgba(152,16,24,.08);color:var(--red);border:1px solid rgba(152,16,24,.16)}
.section.dark .badge-pill{background:rgba(255,255,255,.07);color:#F0A6AC;border-color:var(--line-dark)}
.hr{height:1px;background:var(--line);border:0;margin:2.4rem 0}

/* anchor cards */
a.svc-card{display:flex;flex-direction:column}
a.svc-card .tile-arrow{margin-top:auto;margin-bottom:0;padding-top:.6rem}
a.svc-card .arrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--red);font-weight:700}
a.svc-card:hover .arrow{text-decoration:underline}

/* inner blocks inside the sidebar layout */
.inner-block+.inner-block{margin-top:clamp(38px,5vw,58px)}
.hub-main .sec-head{margin-bottom:clamp(24px,3vw,34px)}
.hub-main .svc-grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.hub-main .why-grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.hub-main .steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.hub-main .strip{margin:0}

/* ---------- light-section fixes for check lists ---------- */
.repair-item{border-top-color:var(--line-2)}
.repair-item h3{color:var(--charcoal)}
.repair-item p{color:var(--steel)}
.repair-check{background:rgba(152,16,24,.09);color:var(--red)}
.section.dark .repair-item{border-top-color:var(--line-dark-2)}
.section.dark .repair-item h3{color:#fff}
.section.dark .repair-item p{color:#AEB3BA}
.section.dark .repair-check{background:rgba(200,32,43,.16);color:var(--red-bright)}
.hub-main .repair-grid{grid-template-columns:1fr}
.hub-main .repair-aside{display:none}

/* ---------- home hero art ---------- */
.hero-art-wrap{position:relative;display:grid;place-items:center}
.hero-orca{width:min(100%,440px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-orca .ring{animation:orcaSpin 34s linear infinite;transform-origin:250px 250px}
@keyframes orcaSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-orca .ring{animation:none}}
.hero .hero-grid{align-items:center}
@media(max-width:900px){.hero-art-wrap{display:none}}

/* real logo mark in the home hero */
.orca-mark{position:relative;display:grid;place-items:center;width:min(100%,420px);aspect-ratio:1}
.orca-mark::after{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--bone);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);z-index:1}
.orca-mark img{width:74%;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.35))}
.orca-pulse{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(200,32,43,.30),rgba(200,32,43,.06) 55%,transparent 72%);
  animation:orcaPulse 6s ease-in-out infinite}
@keyframes orcaPulse{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.04);opacity:1}}
@media(prefers-reduced-motion:reduce){.orca-pulse{animation:none}}

/* spacing polish */
.sec-head h2+.lead{margin-top:.9rem}
.prose h2+p{margin-top:.9rem}

@media(max-width:560px){
  .topbar .tb-right{gap:.9em;font-size:.7rem;justify-content:center;width:100%}
  .topbar .tb-right a:not(:last-child){display:none}
}

/* keep wide dropdowns inside the viewport */
.head-nav .navitem:first-child .dropdown{left:0;transform:translateX(0) translateY(6px)}
.head-nav .navitem:first-child:hover .dropdown,
.head-nav .navitem:first-child:focus-within .dropdown{transform:translateX(0) translateY(0)}
.head-nav .navitem:last-of-type .dropdown{left:auto;right:0;transform:translateX(0) translateY(6px)}
.head-nav .navitem:last-of-type:hover .dropdown,
.head-nav .navitem:last-of-type:focus-within .dropdown{transform:translateX(0) translateY(0)}
.dropdown{max-width:min(92vw,720px)}

/* ---------- Roboto typography tuning ----------
   Roboto is wider and less "display" than the previous headline face, so
   headings get a touch more negative tracking and label styles keep their
   uppercase + letter-spacing treatment to stay visually distinct. */
h1,h2,h3,h4{letter-spacing:-.025em}
.hero h1{letter-spacing:-.032em;font-weight:900}
.sec-head h2{letter-spacing:-.028em;font-weight:900}
.eyebrow,.widget-title,.dd-head,.svc-tag,.badge,.crumbs ol,.topbar,.head-nav a,
.trust-item,.natband,.statband .l,.hero-metric .l,.step .num,.role .meta,
.anchor-nav a,.badge-pill,.quote-block cite,table.cmp thead th,.tile .arrow,
a.svc-card .arrow,.foot .widget-title{font-weight:600}
.head-nav a{letter-spacing:.005em;font-size:.86rem}
.topbar{font-size:.75rem;letter-spacing:.01em}
.eyebrow{letter-spacing:.16em}
.hero-sub,.lead{font-weight:400}
b,strong{font-weight:700}
.btn{font-weight:700;letter-spacing:0}
.foot-phone,.head-phone,.cta-call,.widget-phone{font-weight:600}

/* header fits one row with the wider Roboto metrics */
.head-row{gap:4px 10px;padding:12px clamp(18px,4vw,34px)}
.brand img{height:31px}
.head-nav{margin-left:10px;gap:0}
.head-nav a{padding:.5em .62em;font-size:.845rem}
.head-nav .navitem>a{gap:.25em}
.head-nav .navitem>a .caret{width:10px;height:10px}
.head-cta{gap:12px}
.head-phone{font-size:.85rem;gap:.4em}
.head-cta .btn-primary{padding:.78em 1.15em;font-size:.9rem}
@media(max-width:1240px){
  .head-phone span:not(.num){display:none}
  .head-nav a{padding:.5em .5em;font-size:.82rem}
}

/* =================================================================
   FULL-BLEED FOOTER + UNIFORM 50px VERTICAL RHYTHM
   The footer now spans the viewport with the same gutters as the
   header, and every block on every page gets exactly 50px of space
   above and below it instead of the old mix of 108px / 58px / 0px.
   ================================================================= */
:root{--sp:50px;--gutter:clamp(18px,4vw,34px)}

/* ---- footer matches the header's full-width treatment ---- */
.foot .wrap{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}
/* Footer top padding is doubled deliberately. The columns are ragged, so the
   space that reads as "the bottom" is the gap from the shortest column to the
   rule (about 100px), not the 50px box padding. Matching that at the top is
   what makes the block look balanced. */
.foot{padding:calc(var(--sp) * 2) 0 var(--sp)}
.foot-top{padding-bottom:var(--sp);gap:var(--sp) 34px}
.foot-nearby{padding:var(--sp) 0}
.foot-bottom{padding-top:var(--sp)}

/* ---- section shells ---- */
.hero,.hero.compact{padding:var(--sp) 0}
.section{padding:var(--sp) 0}
.section.cta,.section.alt,.section.dark,.section.band{padding:var(--sp) 0}

/* ---- every block inside a page column ---- */
.hub{gap:var(--sp)}
.hub-side{gap:0}                     /* grid gap replaced by the margin rhythm */
.hub-main.hub-main>*+*,
.hub-side.hub-side>*+*{margin-top:var(--sp)}
.hub-main.hub-main>*{margin-bottom:0}
.hub-main .strip,.hub-main .strip+*{margin:0}
.hub-main.hub-main>.strip+*,
.hub-main.hub-main>.strip{margin-top:var(--sp);margin-bottom:0}
.inner-block+.inner-block{margin-top:var(--sp)}
.sec-head{margin-bottom:var(--sp)}

/* ---- first/last child never adds space against the shell ---- */
/* stop child margins escaping their block and inflating the gap */
.widget>*:last-child,.inner-block>*:last-child,.strip>*:last-child,
.hub-main>*>*:last-child{margin-bottom:0}
.hub-main>*:first-child,.hub-side>*:first-child{margin-top:0}
.hub-main>*:last-child,.hub-side>*:last-child{margin-bottom:0}
.section>.wrap>*:first-child{margin-top:0}
.section>.wrap>*:last-child{margin-bottom:0}


/* every section breathes at BOTH ends, so bands never butt against the next block */
.section,.section.cta,.section.alt,.section.dark,.section.band{padding-top:var(--sp);padding-bottom:var(--sp)}
.hero,.hero.compact{padding-top:var(--sp);padding-bottom:var(--sp)}

/* footer: brand column plus four link columns */
@media(min-width:1100px){.foot-cols5{grid-template-columns:1.15fr repeat(4,minmax(0,1fr))}}
@media(max-width:1099px){.foot-cols5{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.foot-cols5{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-cols5{grid-template-columns:1fr}}
.foot-brand img{width:clamp(190px,15vw,230px);height:auto;margin-bottom:18px}
.foot-cols5 .foot-brand{grid-column:auto}
@media(max-width:1099px){.foot-cols5 .foot-brand{grid-column:1/-1}}

/* =================================================================
   POD PHOTOGRAPH ON DARK SURFACES
   The orca pod sits faintly behind every dark area: hero, dark CTA
   bands, the stat strip, the sidebar CTA and the footer. A flat ink
   layer is stacked over it so contrast never drops below the
   accessible range for the white text on top.
   ================================================================= */
:root{--pod:url("/assets/img/pod.jpg")}

/* hero: gradients wash OVER the parallax photo layer below */
.hero::before{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(14,15,18,.86) 0%,rgba(14,15,18,.74) 50%,rgba(14,15,18,.66) 100%),
    radial-gradient(900px 540px at 12% -8%,rgba(152,16,24,.30),transparent 60%),
    radial-gradient(700px 500px at 100% 0%,rgba(40,44,55,.50),transparent 55%);
}
.hero::after{z-index:1}

/* the pod photo itself: faded to near black, drifts on scroll */
.hero-bg{
  position:absolute;left:0;right:0;top:-25%;height:150%;
  background:var(--pod) center/cover no-repeat;
  filter:grayscale(1) brightness(.42) contrast(1.08);
  opacity:.62;z-index:0;pointer-events:none;
  will-change:transform;transform:translate3d(0,0,0);
}
@media(prefers-reduced-motion:reduce){.hero-bg{will-change:auto}}

/* dark blocks: photo on a free ::before, ink layer over it */
.foot,.section.cta{position:relative;overflow:hidden}
.foot::before,.section.cta::before,.strip::before,.widget-cta::before,.ctaband::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(10,11,13,.90),rgba(10,11,13,.90)),var(--pod) center/cover no-repeat;
}
.foot>.wrap,.section.cta>.wrap{position:relative;z-index:2}
.strip>*,.widget-cta>*,.ctaband>*{position:relative;z-index:2}

/* the existing red glows stay on top of the photo, not under it */
.strip::after,.widget-cta::after{z-index:1}

@media(max-width:760px){
  .foot::before,.section.cta::before,.strip::before,.widget-cta::before,.ctaband::before{
    background:linear-gradient(rgba(10,11,13,.93),rgba(10,11,13,.93)),var(--pod) center/cover no-repeat;
  }
}

/* ---- headings never break mid-word or run to the edge ---- */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual}
.hero h1{max-width:24ch;text-wrap:balance}
.sec-head h2,.section h2{max-width:26ch;text-wrap:balance}
.sec-head .lead,.hero-sub{text-wrap:pretty}
@media(max-width:600px){.hero h1{max-width:100%}.sec-head h2,.section h2{max-width:100%}}

/* stat band: flex so a partial last row fills instead of leaving a grey void */
.statband{display:flex;flex-wrap:wrap}
.statband .s{flex:1 1 180px;min-width:0}

/* =================================================================
   LIGHT FOOTER
   The footer sits on bone rather than near-black. Colours are pulled
   from the light side of the palette so contrast stays comfortably
   above 4.5:1, and the pod photograph is dropped here because it is
   a dark image and only reads on dark surfaces.
   ================================================================= */
.foot{background:var(--bone);color:var(--steel);border-top:1px solid var(--line)}
.foot::before{content:none}
.foot-top{border-bottom:1px solid var(--line)}
.foot h4{color:var(--charcoal)}
.foot li a{color:var(--steel)}
.foot li a:hover{color:var(--red)}
.foot-brand p{color:var(--steel)}
.foot-phone{color:var(--charcoal)}
.foot-phone svg{color:var(--red)}
.foot-area{color:var(--steel)}
.foot-bottom{color:var(--steel);border-top:1px solid var(--line);padding-top:var(--sp)}
.foot-legal a{color:var(--steel)}
.foot-legal a:hover{color:var(--red)}
.foot-social a{color:var(--steel)}
.foot-social a:hover{color:var(--red)}

/* top bar spans the viewport on the same gutters as the header row */
.topbar .wrap{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- founder / CEO introduction ---------- */
.founder{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:clamp(22px,2.6vw,34px);align-items:start}
.founder-photo{margin:0}
.founder-photo picture{display:block}
.founder-photo img{width:100%;height:auto;display:block;border-radius:var(--radius);
  filter:grayscale(1) contrast(1.03);background:var(--line-2)}
.founder-photo figcaption{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.founder-photo .fn{font-weight:700;color:var(--charcoal);font-size:1.02rem}
.founder-photo .fr{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-2)}
.founder-quote{margin:0 0 22px;padding-left:20px;border-left:3px solid var(--red)}
.founder-quote p{font-size:clamp(1.12rem,1.7vw,1.38rem);line-height:1.45;color:var(--charcoal);
  font-weight:600;letter-spacing:-.015em}
.founder-copy p+p{margin-top:1rem}
.section.dark .founder-photo .fn{color:#fff}
.section.dark .founder-quote p{color:#fff}
@media(max-width:820px){
  .founder{grid-template-columns:1fr;gap:24px}
  .founder-photo{max-width:280px}
}

/* ---------- remote session launcher ---------- */
.strip-launch{align-items:center}
.strip-launch h3{font-size:clamp(1.15rem,2vw,1.5rem)}
.strip-launch .btn{white-space:nowrap}
.tb-remote{font-weight:700;color:#fff}
.tb-remote:hover{color:var(--red-bright)}

/* =================================================================
   HERO CLEAN-UP
   The hero had four competing layers: photograph, two red glows, a
   grid overlay and a pulsing halo. The grid and the halo are gone and
   the glows are reduced to one, so the headline is the loudest thing
   in the frame.
   ================================================================= */
.hero::after{content:none}                    /* grid pattern removed */
.hero::before{
  background:
    linear-gradient(90deg,rgba(14,15,18,.90) 0%,rgba(14,15,18,.78) 52%,rgba(14,15,18,.62) 100%),
    radial-gradient(760px 460px at 8% 0%,rgba(152,16,24,.22),transparent 62%);
}
.hero-bg{filter:grayscale(1) brightness(.38) contrast(1.05);opacity:.55}
.orca-pulse{display:none}                     /* pulsing halo removed */

/* hero content: fewer rules, calmer secondary rows */
.hero-trust{border-top:1px solid var(--line-dark-2);padding-top:20px;margin-top:28px;gap:10px 26px}
.hero-metrics{border-top:0;padding-top:14px;margin-top:14px;opacity:.92}
.hero .natband{margin-top:20px;opacity:.88}

/* the Windows 11 machine on the home hero */
.hero-device{position:relative;display:flex;justify-content:center;align-items:center}
.hero-device img{width:100%;max-width:560px;height:auto;display:block;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.55))}
@media(max-width:980px){.hero-device img{max-width:440px;margin:0 auto}}

/* brand logo plate in the hero of each manufacturer page */
.hero-grid-brand{align-items:center}
.brand-plate{background:#fff;border-radius:var(--radius);padding:clamp(26px,3.4vw,44px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 22px 46px rgba(0,0,0,.42);max-width:420px;margin-left:auto}
.brand-plate img{width:100%;height:auto;max-height:88px;object-fit:contain;display:block}
@media(max-width:980px){.brand-plate{margin:0 auto;max-width:320px}}

/* ---------- logo bar + logo grid ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.logo-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(14px,2.2vw,34px);align-items:center;justify-items:center;padding:6px 0}
.logo-bar .logo-cell{display:flex;align-items:center;justify-content:center;width:100%}
.logo-bar .logo-cell img{height:clamp(26px,2.6vw,36px);width:auto;max-width:100%;
  object-fit:contain;display:block}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.logo-grid .logo-cell{background:#fff;display:flex;align-items:center;justify-content:center;
  padding:26px 20px;min-height:104px}
.logo-cell{transition:transform .18s ease,opacity .18s ease,filter .18s ease}
.logo-cell img{filter:grayscale(1);opacity:.62;transition:filter .18s ease,opacity .18s ease}
.logo-cell:hover img,.logo-cell:focus-visible img{filter:grayscale(0);opacity:1}
.logo-grid .logo-cell:hover{transform:translateY(-2px)}
.logo-grid .logo-cell img{max-height:46px;max-width:100%;width:auto;object-fit:contain}
.section.dark .logo-bar .logo-cell img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.7}
.section.dark .logo-bar .logo-cell:hover img{filter:none;opacity:1}
@media(max-width:640px){
  .logo-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
  .logo-bar .logo-cell img{height:26px}
  .logo-grid{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
}

/* replaces inline style attributes so a strict Content-Security-Policy
   needs no 'unsafe-inline' for styles */
.hp-field{display:none}
.section[data-flush="1"]{padding-top:0}

/* The CTA card beside the "what changes" list is roughly half the height of
   the list, which left a large dead area under it on the dark band. Centring
   it in the row splits that space above and below so it reads as deliberate. */
.repair-aside{align-self:center}

/* social marks under the footer logo */
.foot-social{display:flex;gap:16px;margin-top:18px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line);border-radius:999px;
  color:var(--steel);transition:color .15s ease,border-color .15s ease,background .15s ease}
.foot-social a:hover,.foot-social a:focus-visible{color:#fff;background:var(--red);border-color:var(--red)}
.foot-social svg{width:17px;height:17px;display:block}