/* AttiCali EcoShield: service + city pages (reuses style.css tokens, buttons, header, footer, FAQ, mobile bar) */

/* ---------- header: Services menu (all pages) ---------- */
.nav-menu{position:relative;margin-left:auto}
.bar .bar-nav{margin-left:0}
.nav-sum{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;font-weight:800;cursor:pointer;background:var(--mint);color:var(--navy);-webkit-tap-highlight-color:transparent;user-select:none;transition:background-color .2s ease}
.nav-sum::-webkit-details-marker{display:none}
.nav-sum::after{content:none}
.nav-sum:hover{background:var(--mint-deep)}
.nav-sum svg{width:16px;height:16px;transition:rotate .35s var(--spring)}
.nav-menu[open] .nav-sum svg{rotate:180deg}
.nav-panel{position:absolute;top:calc(100% + 10px);left:0;width:min(620px,calc(100vw - 32px));background:var(--paper);color:var(--navy);border-radius:24px;padding:14px;box-shadow:0 24px 60px -18px rgba(20,40,74,.45),0 0 0 1px rgba(20,40,74,.06);display:grid;grid-template-columns:1fr 1fr;gap:4px;z-index:70} /* taste-skill-ignore: overlay menu needs lift */
.nav-panel a{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:14px;text-decoration:none;font-weight:700;transition:background-color .2s ease}
.nav-panel a:hover,.nav-panel a:focus-visible{background:var(--mint)}
.nav-panel a[aria-current="page"]{background:var(--mint-deep)}
.nav-panel .np-ico{flex:none;width:30px;height:30px;border-radius:9px;background:var(--mint);color:var(--green);display:grid;place-items:center}
.nav-panel .np-ico svg{width:18px;height:18px}
.nav-panel .np-main{grid-column:1/-1;background:var(--green);color:#fff}
.nav-panel .np-main:hover,.nav-panel .np-main:focus-visible{background:var(--green-deep)}
.nav-panel .np-main .np-ico{background:var(--paper)}
.nav-panel .np-main small{font-weight:600;opacity:.9;margin-left:auto;font-size:.875rem}
.nav-panel .np-foot{grid-column:1/-1;border-top:2px solid var(--mint);margin-top:6px;padding-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.nav-panel .np-foot a{flex:1 1 auto;justify-content:center;color:var(--green-deep)}
.nav-menu:not([open]) .nav-panel{display:none}
@media (max-width:1100px){ .bar .nav-menu ~ .bar-call{margin-left:0} }
@media (max-width:640px){
  .nav-sum{padding:0 14px;min-height:46px}
  .nav-panel{position:fixed;top:calc(var(--bar-h) + 6px);left:12px;right:12px;width:auto;grid-template-columns:1fr;max-height:calc(100svh - var(--bar-h) - 24px);overflow:auto;overscroll-behavior:contain}
}

/* ---------- breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.86);margin-bottom:18px}
.crumbs a{color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.35)}
.crumbs a:hover{border-color:#fff}
.crumbs span[aria-hidden]{opacity:.6}

/* ---------- page hero ---------- */
.p-hero{position:relative;isolation:isolate;overflow:clip;background:#0E2F1F;color:#fff;padding:clamp(28px,4vw,64px) 0 clamp(56px,6vw,96px)}
.p-hero-bg{position:absolute;inset:-6% 0;z-index:-1}
.p-hero-bg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 60%;opacity:.42}
.p-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,34,22,.96) 0%,rgba(9,34,22,.9) 42%,rgba(9,34,22,.55) 70%,rgba(9,34,22,.35) 100%)} /* taste-skill-ignore: scrim over painting for AA text */
.p-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,72px);align-items:center}
.p-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9375rem;background:var(--paper);color:var(--green-deep);padding:6px 14px 6px 10px;border-radius:999px;margin-bottom:16px}
.p-eyebrow svg{width:18px;height:18px}
.p-h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;font-size:clamp(2.35rem,1.2rem + 3.6vw,4.6rem);max-width:15ch;text-wrap:balance}
.p-lede{margin-top:clamp(16px,2vw,24px);font-size:clamp(1.125rem,1.02rem + .45vw,1.4rem);line-height:1.42;max-width:38ch}
.p-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
.p-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.p-chips li{display:inline-flex;align-items:center;gap:8px;background:rgba(21,94,53,.92);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.9375rem}
.p-chips li.chip-offer{background:var(--paper);color:var(--navy)}
.p-chips .star{width:16px;height:16px;fill:#fff}
/* photo stack: whole photos, layered for depth */
.p-stack{position:relative;perspective:1400px;padding:4% 4% 10% 0}
.p-card{margin:0;background:var(--paper);padding:10px 10px 12px;border-radius:22px;will-change:transform}
.p-card img{width:100%;height:auto;border-radius:14px}
.p-card figcaption{color:var(--navy);font-weight:700;font-size:.9375rem;padding:10px 4px 0}
.p-card-front{position:relative;z-index:2;transform:rotate(-2deg)}
.p-card-back{position:absolute;z-index:1;right:-2%;bottom:0;width:58%;transform:rotate(4deg);background:var(--mint)}
.p-card-back figcaption{display:none}

/* ---------- sections ---------- */
.p-sec{padding:clamp(48px,6vw,96px) 0}
.p-sec-mint{background:var(--mint)}
.p-sec-white{background:var(--white)}
.p-h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.92;color:var(--green);font-size:clamp(2rem,1.2rem + 2.8vw,3.8rem);max-width:18ch;text-wrap:balance}
.p-sub{margin-top:12px;max-width:52ch;font-size:clamp(1.0625rem,1rem + .25vw,1.25rem)}

/* signs: speech bubbles in the customer's words */
.signs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,40px)}
.sign{position:relative;background:var(--paper);border-radius:22px;padding:18px 20px;font-weight:700;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);line-height:1.35}
.sign::after{content:"";position:absolute;left:28px;bottom:-10px;width:20px;height:20px;background:inherit;transform:rotate(45deg);border-radius:0 0 5px 0}
.sign:nth-child(even){background:var(--mint-deep)}
.p-sec-white .sign{background:var(--mint)}
.p-sec-white .sign:nth-child(even){background:var(--mint-deep)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,40px);counter-reset:st}
.st{position:relative;background:var(--paper);border-radius:22px;padding:20px 20px 22px;display:grid;gap:8px;align-content:start;counter-increment:st}
.p-sec-white .st{background:var(--mint)}
.st::before{content:counter(st);font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:.8;color:var(--green)}
.st h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.65rem);color:var(--navy)}
.st p{font-size:1rem;line-height:1.45}

/* included + materials */
.inc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px);align-items:start}
.inc-list{display:grid;gap:10px}
.inc-list li{position:relative;padding:12px 16px 12px 44px;background:var(--mint);border-radius:16px;font-weight:600;line-height:1.4}
.p-sec-mint .inc-list li{background:var(--paper)}
.inc-list li::before{content:"";position:absolute;left:16px;top:15px;width:16px;height:16px;background:var(--green);clip-path:polygon(14% 44%,0 62%,40% 100%,100% 22%,84% 6%,38% 66%)}
.mat{background:var(--navy);color:#fff;border-radius:24px;padding:clamp(20px,2.2vw,30px);display:grid;gap:12px}
.mat h3{color:#fff;font-size:clamp(1.4rem,1.2rem + .6vw,1.8rem)}
.mat ul{display:grid;gap:8px}
.mat li{position:relative;padding-left:22px;line-height:1.4}
.mat li::before{content:"";position:absolute;left:0;top:.38em;width:12px;height:12px;background:var(--sky);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.mat .mat-note{font-size:.9375rem;opacity:.92;border-top:2px solid rgba(255,255,255,.18);padding-top:12px}

/* photos: whole, swipe on phones */
.ph-row{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,40px);align-items:start}
.ph{margin:0;background:var(--mint);padding:8px 8px 12px;border-radius:20px}
.p-sec-mint .ph{background:var(--paper)}
.ph img{width:100%;height:auto;border-radius:13px}
.ph figcaption{font-weight:700;font-size:.9375rem;padding:10px 4px 0;line-height:1.3}
.ph:nth-child(odd){transform:rotate(-1deg)}
.ph:nth-child(even){transform:rotate(1deg) translateY(10px)}

/* FAQ (details styles come from style.css) */
.p-faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,72px);align-items:start}
.p-faq .faq-list{display:grid;gap:12px}
.p-sec-mint details{background:var(--paper)}
.p-sec-mint details[open]{background:var(--mint-deep)}

/* related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,40px)}
.rel a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--navy);color:#fff;text-decoration:none;border-radius:20px;padding:10px;transition:translate .35s var(--out),background-color .2s ease}
.rel a:hover,.rel a:focus-visible{translate:0 -4px;background:var(--navy-deep)}
.rel img{width:96px;height:auto;border-radius:12px}
.rel b{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;line-height:1;display:block}
.rel span{font-size:.9375rem;opacity:.92;display:block;margin-top:4px}

/* close */
.p-close{background:var(--green);color:#fff;padding:clamp(48px,6vw,90px) 0}
.p-close-grid{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:clamp(20px,4vw,60px);align-items:center}
.p-close .p-h2{color:#fff;max-width:20ch}
.p-close p{margin-top:12px;max-width:52ch}
.p-close .p-ctas{margin-top:0;flex-direction:column;align-items:stretch}
.p-close .fine{margin:14px 0 0;font-size:.9375rem;font-weight:600}

/* city: numbers + mix */
.c-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,40px)}
.c-stat{background:var(--paper);border-radius:22px;padding:18px 20px;display:grid;gap:4px}
.c-stat b{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,1.8rem + 2.4vw,4.2rem);line-height:.85;color:var(--green)}
.c-stat span{font-weight:700;line-height:1.3}
.mix{display:grid;gap:8px;margin-top:clamp(20px,2.4vw,32px);counter-reset:mx}
.mix li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--paper);border-radius:16px;padding:12px 16px;counter-increment:mx}
.mix li::before{content:counter(mx);font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--green);width:1.2em}
.mix a{font-weight:800;color:var(--navy)}
.mix small{font-weight:700;color:var(--ink-soft);font-size:.9375rem;white-space:nowrap}
.c-note{margin-top:14px;font-size:.9375rem;color:var(--ink-soft);max-width:70ch}
.stand{margin-top:clamp(20px,2.4vw,32px);background:var(--navy);color:#fff;border-radius:22px;padding:clamp(18px,2vw,26px);display:grid;gap:8px}
.stand h3{color:#fff;font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem)}
.near{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,2.4vw,32px)}
.near li a,.near li span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;background:var(--mint);font-weight:700;text-decoration:none;color:var(--navy)}
.near li a{background:var(--navy);color:#fff}
.near li a:hover{background:var(--navy-deep)}
.near small{font-weight:600;opacity:.85}
.svc-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:clamp(20px,2.4vw,32px)}
.svc-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:0 18px;background:var(--paper);border-radius:16px;font-weight:800;text-decoration:none;color:var(--navy);transition:background-color .2s ease}
.p-sec-white .svc-links a{background:var(--mint)}
.svc-links a:hover{background:var(--mint-deep)}
.svc-links svg{width:18px;height:18px;flex:none;color:var(--green)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
.hub-grid a{display:grid;gap:4px;background:var(--paper);border-radius:20px;padding:18px 20px;text-decoration:none;color:var(--navy);transition:translate .35s var(--out)}
.hub-grid a:hover{translate:0 -4px}
.hub-grid b{font-family:var(--display);text-transform:uppercase;font-size:1.7rem;line-height:1;color:var(--green)}
.hub-grid span{font-weight:700}
.hub-more{margin-top:24px;max-width:80ch;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .signs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.svc-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .p-hero-grid{grid-template-columns:1fr}
  .p-hero-bg::after{background:linear-gradient(180deg,rgba(9,34,22,.94) 0%,rgba(9,34,22,.88) 60%,rgba(9,34,22,.7) 100%)} /* taste-skill-ignore: scrim over painting for AA text */
  .p-stack{max-width:440px;padding:0 6% 8% 0}
  .p-ctas .btn{flex:1 1 100%}
  .inc-grid,.p-faq,.p-close-grid{grid-template-columns:1fr}
  .ph-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;overscroll-behavior-x:contain}
  .ph{flex:0 0 72vw;scroll-snap-align:start}
  .ph.ph-tall{flex-basis:46vw}
  .c-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .signs{grid-template-columns:1fr 1fr;gap:10px}
  .sign{padding:14px 14px;font-size:1rem}
  .sign::after{left:20px}
  .steps{grid-template-columns:1fr;gap:10px}
  .st{grid-template-columns:auto 1fr;column-gap:14px;padding:16px}
  .st::before{grid-row:span 2;font-size:2.2rem}
  .rel,.svc-links{grid-template-columns:1fr}
  .rel a{grid-template-columns:80px 1fr}
  .rel img{width:80px}
  .c-stat b{font-size:2.4rem}
  .p-chips li{font-size:.875rem;padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){
  .rel a,.hub-grid a,.nav-sum svg{transition:none}
}

/* ---------- homepage links to the service pages ---------- */
.fd-link{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--out)}
.fd-link:hover,.fd-link:focus-visible{background-size:100% 2px}
.fd-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.fd-more{display:inline-flex;align-items:center;gap:6px;min-height:48px;color:#fff;font-weight:800;text-decoration:none}
.fd-more svg{width:18px;height:18px;transition:translate .3s var(--spring)}
.fd-more:hover svg{translate:4px 0}
.city-all{font-weight:800;color:var(--green-deep)}
@media (max-width:900px){ .fd-hero-ctas{flex-direction:column;align-items:stretch} .fd-more{justify-content:center} }

/* H1: always two lines, sized to the longest line (container query units) */
.p-copy{container-type:inline-size;min-width:0}
.p-h1{max-width:none;font-size:min(var(--fs,6cqw),4.4rem);line-height:.92}
.p-h1 .l{display:block;white-space:nowrap}
.p-hero .wrap.p-copy .p-h1{font-size:min(var(--fs,6cqw),5rem)}
/* phones: tighter sections so a page stays short */
@media (max-width:640px){
  .p-sec{padding:36px 0}
  .p-close{padding:40px 0}
  .p-hero{padding:20px 0 40px}
  .crumbs{margin-bottom:12px}
  .p-stack{max-width:330px;padding:0 0 4% 0}
  .p-card-back{display:none}
  .p-card-front{transform:rotate(-1.5deg)}
  .p-card figcaption{font-size:.875rem;padding-top:8px}
  .inc-list{gap:8px}
  .inc-list li{padding:10px 14px 10px 40px;font-size:1rem}
  .inc-list li::before{top:13px;left:14px}
  .mat{padding:18px;gap:10px}
  .st p{font-size:.9375rem}
  .rel{gap:8px}
  .rel a{padding:8px;grid-template-columns:64px 1fr;border-radius:16px}
  .rel img{width:64px}
  .rel b{font-size:1.1rem}
  .p-sub{margin-top:8px}
  .signs,.steps,.inc-grid,.ph-row,.rel,.c-stats,.near,.svc-links,.mix{margin-top:18px}
}
/* depth behind the hero photo: a plain offset slab, so the photo itself is always shown whole */
.p-stack::before{content:"";position:absolute;z-index:0;right:0;bottom:2%;width:62%;height:70%;border-radius:24px;background:var(--mint);opacity:.9;transform:rotate(4deg)}
.p-stack::after{content:"";position:absolute;z-index:0;left:-3%;top:-1%;width:30%;height:34%;border-radius:20px;background:var(--sky);opacity:.85;transform:rotate(-6deg)}
@media (max-width:640px){ .p-stack::before{bottom:0;right:-2%} .p-stack::after{display:none} }

@media (min-width:641px) and (max-width:1100px){ .nav-panel{left:auto;right:0} }
.c-years{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.c-years li{display:inline-flex;align-items:baseline;gap:8px;background:var(--mint-deep);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.9375rem}
.c-years b{font-family:var(--display);font-size:1.15rem;color:var(--green-deep)}
@media (max-width:640px){
  .svc-links{grid-template-columns:1fr 1fr;gap:6px}
  .svc-links a{min-height:52px;padding:6px 12px;font-size:.9375rem;line-height:1.2}
  .svc-links svg{width:14px;height:14px}
}

/* 404 page */
.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:clamp(20px,3vw,32px);padding:0;list-style:none}
.nf-links a{display:flex;align-items:center;min-height:56px;padding:12px 18px;border-radius:18px;background:var(--mint);color:var(--navy);font-weight:800;text-decoration:none;transition:translate .35s var(--out),background-color .2s ease}
.nf-links a:hover{translate:0 -3px;background:var(--mint-deep)}
.nf-links a:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ===== approved additions 2026-10-16: job day, compare quotes, topic bands, stories, mesh, refer, blog, before/after ===== */
/* job day timeline (service pages, under "How we do it") */
.jd{margin-top:clamp(28px,3.4vw,48px)}
.jd-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.35rem,1.1rem + .8vw,1.9rem);color:var(--navy);line-height:1}
.jd-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px;padding:0;list-style:none;counter-reset:jd}
.jd-list li{counter-increment:jd;position:relative;display:grid;gap:6px;align-content:start;padding:16px 16px 18px;border-top:4px solid var(--green);background:var(--paper);border-radius:0 0 18px 18px}
.jd-list li::before{content:counter(jd);font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1;color:var(--green)}
.jd-list b{color:var(--navy);font-size:1.0625rem;line-height:1.2}
.jd-list span{font-size:.9375rem;line-height:1.45}
@media (max-width:900px){
  .jd-list{grid-template-columns:1fr;gap:0;border-left:4px solid var(--green);margin-left:6px}
  .jd-list li{border-top:0;border-radius:0;background:none;padding:10px 0 14px 18px;grid-template-columns:auto 1fr;column-gap:12px}
  .jd-list li::before{grid-row:span 2;font-size:1.3rem}
}
/* compare quotes checklist */
.cmp{margin-top:clamp(24px,3vw,40px);background:var(--paper);border:3px solid var(--navy);border-radius:24px;padding:clamp(18px,2.4vw,30px)}
.cmp-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,1.05rem + .8vw,1.85rem);line-height:1;color:var(--navy);max-width:28ch}
.cmp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px 22px;margin-top:16px;padding:0;list-style:none}
.cmp-list li{display:flex;gap:10px;align-items:flex-start;font-weight:600;line-height:1.4}
.cmp-list svg{flex:none;width:22px;height:22px;color:var(--green);margin-top:1px}
.cmp-note{margin-top:14px;font-weight:800;color:var(--green-deep)}
/* topic band (navy): safe cleanup, mesh not foam, insulation depth */
.p-sec-navy{background:var(--navy);color:#fff}
.p-sec-navy .p-h2{color:#fff}
.p-sec-navy .p-sub{color:#E8EFF7}
.p-sec-navy a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,48px);margin-top:clamp(14px,2vw,22px);align-items:start}
.topic-grid .p-sub{margin-top:0;max-width:46ch}
.src{margin-top:16px;font-size:.9375rem;opacity:.92}
.topic-ph{margin-top:clamp(20px,2.6vw,32px)}
.p-sec-navy .ph{background:var(--paper)}
.topic-sep{height:3px;background:rgba(255,255,255,.18);margin:clamp(32px,4vw,56px) 0}
.topic-h3{font-size:clamp(1.7rem,1.1rem + 2vw,3rem)}
.rv{display:grid;gap:10px;margin-top:16px;padding:0;list-style:none}
.rv li{display:flex;align-items:baseline;gap:14px;background:rgba(255,255,255,.08);border-radius:16px;padding:12px 16px}
.rv b{font-family:var(--display);font-size:1.9rem;line-height:1;color:#fff;min-width:3.4ch}
.rv span{color:#E8EFF7}
@media (max-width:900px){ .topic-grid{grid-template-columns:1fr} }
/* finished-job stories */
.story{display:grid;gap:8px;align-content:start;background:var(--paper);border-radius:22px;padding:20px 22px;border-left:6px solid var(--green)}
.story-meta{font-weight:800;color:var(--green-deep);font-size:.9375rem}
.story-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.35rem;line-height:1;color:var(--navy)}
.story-one{margin-top:18px;max-width:640px}
.stories{background:var(--mint);padding:var(--section) 0}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
@media (max-width:900px){ .story-grid{grid-template-columns:1fr} }
/* homepage: why mesh, not foam */
.mesh{background:var(--white);padding:var(--section) 0}
.mesh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.mesh-copy{display:grid;gap:14px;justify-items:start}
.mesh-copy p{max-width:46ch}
.mesh-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mesh-ph{margin:0;background:var(--paper);padding:10px 10px 12px;border-radius:22px;border:3px solid var(--navy)}
.mesh-ph img{width:100%;height:auto;border-radius:14px}
.mesh-ph figcaption{font-weight:700;font-size:.9375rem;color:var(--navy);padding:8px 4px 0}
.mesh-ph-1{rotate:-2deg;margin-top:30px}
.mesh-ph-2{rotate:2deg}
@media (max-width:900px){ .mesh-grid{grid-template-columns:1fr} .mesh-ph-1{margin-top:16px} }
/* homepage: compare quotes + refer a neighbor */
.choose{background:var(--white);padding:0 0 var(--section)}
.choose-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
.choose .cmp{margin-top:0}
.refer{display:grid;gap:12px;align-content:start;justify-items:start;background:var(--green);color:#fff;border-radius:24px;padding:clamp(18px,2.4vw,30px)}
.refer-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,1.05rem + .8vw,1.85rem);line-height:1}
@media (max-width:900px){ .choose-grid{grid-template-columns:1fr} .refer .btn{width:100%} }
/* blog */
.post-body{max-width:68ch}
.post-body h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,1.1rem + 1vw,2.1rem);line-height:1;color:var(--green);margin-top:clamp(26px,3vw,40px)}
.post-body h2:first-child{margin-top:0}
.post-body p{margin-top:12px;font-size:1.125rem;line-height:1.6}
.post-body a,.post-more a{color:var(--green-deep);font-weight:700;text-underline-offset:3px}
.post-more{margin-top:clamp(32px,4vw,56px);border-top:3px solid var(--navy);padding-top:18px;max-width:68ch}
.post-more-h{font-weight:800;font-size:1.125rem;color:var(--navy)}
.post-more ul{margin-top:8px;padding-left:1.2em}
.post-more li{margin-top:6px}
.post-more li a{display:inline-block;padding:6px 0}
/* before/after slider (hidden until real pairs are confirmed) */
.ba{margin-top:clamp(18px,2.4vw,28px);max-width:900px}
.ba-frame{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--mint)}
.ba-after,.ba-before{position:absolute;inset:0;background-size:cover;background-position:center}
.ba-before{clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0)}
.ba-tag{position:absolute;top:12px;background:var(--paper);color:var(--navy);font-weight:800;font-size:.875rem;padding:6px 12px;border-radius:999px}
.ba-tag-b{left:12px}.ba-tag-a{right:12px}
.ba-range input{width:100%;margin-top:12px;accent-color:var(--green);min-height:44px}
.stories .lede{margin-top:14px;max-width:46ch}
.mesh-photos{padding-inline:6px}
.p-sec-navy .ph figcaption{color:var(--navy)}
.crumbs a{display:inline-block;padding-block:10px;margin-block:-10px}
.nw{white-space:nowrap}

/* compare-quotes page (2026-10-17) */
.cq-steps{list-style:none;padding:0;margin:clamp(24px,3vw,40px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.cq-step{background:var(--mint);border-radius:18px;padding:clamp(18px,2vw,26px);display:grid;gap:6px;color:var(--navy);font-size:1.05rem;line-height:1.4}
.cq-step b{font-size:1.2rem;color:var(--green)}
.cq-n{display:inline-grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--green);color:#fff;font-weight:800;margin-bottom:6px}
.cq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
.cq-side{min-width:0}
.cq-lead{margin:18px 0 6px;font-weight:700;color:var(--navy);font-size:1.1rem}
.cq-private{margin-top:16px;color:var(--navy);font-size:.98rem}
.cq-form{padding-top:clamp(22px,2.6vw,38px)}
.cq-drop{display:grid;gap:4px;place-items:center;text-align:center;border:2px dashed var(--green);border-radius:16px;padding:22px 14px;background:var(--mint);cursor:pointer;color:var(--navy)}
.cq-drop:hover,.cq-drop:focus-within{background:#dcefe1}
.cq-drop input{position:absolute;width:1px;height:1px;opacity:0}
.cq-drop-t{font-weight:800;color:var(--green);font-size:1.1rem}
.cq-drop-s{font-size:.92rem}
.cq-files{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px;font-size:.95rem;color:var(--navy);overflow-wrap:anywhere}
@media (max-width:900px){.cq-steps,.cq-grid{grid-template-columns:1fr}}

/* service pages, added 2026-10-18: signs checklist, R-values copy, featured job story */
.need{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);margin-top:clamp(20px,2.6vw,32px);padding:0;list-style:none;counter-reset:nd}
.need li{counter-increment:nd;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;border-top:2px solid rgba(255,255,255,.18);padding:16px 0;font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.4;color:#fff}
.need li::before{content:counter(nd,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--sky)}
.need svg{display:none}
@media (max-width:700px){ .need{grid-template-columns:1fr} .need li{padding:12px 0;gap:12px} }
.rval-copy{display:grid;gap:12px}
.story-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.4vw,32px);align-items:center;margin-top:clamp(20px,2.6vw,32px)}
.story-feat .story p{line-height:1.5}
.p-sec-white .story{background:var(--mint)}
@media (max-width:900px){ .story-feat{grid-template-columns:1fr} }
.story-feat .story{border-left:0;padding:22px 24px}
/* blog posts: lists, whole job photos (never cropped), related links */
.post-body ul,.post-body ol{margin-top:12px;padding-left:1.3em;font-size:1.125rem;line-height:1.6}
.post-body ul{list-style:disc}.post-body ol{list-style:decimal}
.post-body li{margin-top:6px}
.post-body li::marker{color:var(--green)}
.post-fig{margin:clamp(20px,2.6vw,32px) 0 0;background:var(--mint);padding:8px 8px 12px;border-radius:20px;max-width:680px}
.post-fig img{display:block;width:100%;height:auto;border-radius:13px}
.post-fig figcaption{font-weight:700;font-size:.9375rem;padding:10px 4px 0;line-height:1.3;color:var(--navy)}
.post-rel{margin-top:clamp(32px,4vw,56px);border-top:3px solid var(--navy);padding-top:18px;max-width:68ch}
.post-rel-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 24px;margin-top:8px}
.post-rel ul{padding-left:1.2em;list-style:disc}
.post-rel li{margin-top:6px}
.post-rel li a{display:inline-block;padding:6px 0;color:var(--green-deep);font-weight:700;text-underline-offset:3px}
/* blog posts: contents list (sticky on wide screens), reading progress */
.post-grid{display:grid;gap:clamp(24px,3vw,40px)}
.post-toc{background:var(--mint);border-radius:20px;padding:18px 20px 20px}
.post-toc ol{margin-top:8px;padding-left:1.3em;list-style:decimal;font-size:.9375rem;line-height:1.35}
.post-toc li{margin-top:2px}
.post-toc li::marker{color:var(--green);font-weight:700}
.post-toc li a{display:inline-block;padding:6px 0;color:var(--navy);font-weight:600;text-decoration:none;transition:color .2s ease}
.post-toc li a:hover,.post-toc li a:focus-visible{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.post-toc li a[aria-current="true"]{color:var(--green-deep);font-weight:800}
.post-toc-cta{display:none}
.post-body h2{scroll-margin-top:calc(var(--bar-h) + 20px)}
.post-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;pointer-events:none}
.post-progress i{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:0 50%}
@media (min-width:1080px){
  .post-grid{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(40px,5vw,88px);align-items:start}
  .post-toc{grid-column:2;grid-row:1;position:sticky;top:calc(var(--bar-h) + 24px);max-height:calc(100vh - var(--bar-h) - 48px);overflow:auto}
  .post-main{grid-column:1;grid-row:1}
  .post-toc-cta{display:grid;gap:10px;margin-top:16px}
  .post-toc-cta .btn{justify-content:center;width:100%}
}
@media (prefers-reduced-motion:reduce){.post-progress{display:none}}
.mbar.show.away{transform:translateY(110%)}
.post-toc li a{display:block}
.post-toc-d summary{min-height:44px;font-weight:800;font-size:1.125rem;color:var(--navy);justify-content:space-between}
.post-toc-d summary::after{width:30px;height:30px;font-size:1.25rem}
.post-toc-d summary::-webkit-details-marker{display:none}
.post-rel-k{font-size:.875rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-top:10px}
/* blog: question headings read as sentences (long questions stay legible), photos get room before the next question */
.post-body h2{text-transform:none;line-height:1.12;font-size:clamp(1.35rem,1.1rem + .9vw,2rem);letter-spacing:-.01em;text-wrap:balance}
.post-fig + h2{margin-top:clamp(44px,5vw,72px)}
/* legal pages (Privacy, Terms, Accessibility, Credits): reuse the blog post grid + contents list */
.legal-date,.post-date{margin-top:14px;font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.86)}
.legal-toc-h{font-weight:800;font-size:1.125rem;color:var(--navy)}
.legal-body section + section{margin-top:clamp(26px,3vw,40px)}
.legal-body h2{margin-top:0}
.legal-body h3{font-weight:800;font-size:1.1875rem;color:var(--navy);margin-top:18px}
.legal-body b{color:var(--navy)}
.legal-body{max-width:62ch}

/* pre-launch fixes (2026-10-18): phone touch targets >= 44px, crumbs spacing, readable "How it works" card, very wide screens */
@media (max-width:640px){
  .f-consent{min-height:44px;align-items:center;padding-block:4px;cursor:pointer}
  .f-consent input{margin-top:0}
  .chips label,.chips span{min-height:44px}
  .crumbs{margin-bottom:24px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-block:0;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;text-decoration-thickness:2px}
  .crumbs > span{display:inline-flex;align-items:center;min-height:44px}
  .post-toc li a,.post-rel a,.legal-toc a,.svc-links a,.near li a,.nf-links a,.post-more a,.mix a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:1100px){
  .hero-how{background:rgba(14,40,28,.82)}
}
@media (min-width:2200px){
  .hero{padding-inline:calc((100% - 1800px) / 2)}
}