@font-face{font-family:"Source Serif 4";font-weight:400;src:url(../assets/fonts/source-serif-4-400.woff2) format("woff2")}
/* the 600 weight is added by js/home.js after the page loads, so it never competes with the hero for bandwidth (Lighthouse LCP) */
:root{--ink:#1b2328;--paper:#fff;--cream:#f4efe6;--orange:#d34f00;--orange-light:#ff8c42;--blue:#394c56;
 --display:"maple-web",Impact,sans-serif;--head:"maple-web",Impact,sans-serif;--serif:"Source Serif 4",Georgia,serif;
 --sans-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --line:color-mix(in srgb,var(--blue) 45%,var(--paper));--rule:1px;--radius:3px;--gutter:clamp(20px,6vw,86px);
 --lh-list:1.25;--lh-caps:1;--track-head:-.02em;--track-ui:.04em;--track-poster:-.02em;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--serif);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hdr{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:#fff}
.hdr img{width:168px;height:auto;display:block}
.hdr .tel{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.03em;color:var(--ink)}

 

.btn{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.04em;text-transform:uppercase;padding:14px 30px;border-radius:var(--radius);border:1px solid transparent;line-height:1;text-decoration:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.btn.text{background:var(--orange);color:var(--cream);box-shadow:2px 2px 0 var(--ink)}
.btn.call{background:var(--cream);color:var(--ink);border-color:var(--ink)}

.btn{--plate:var(--orange);--edge:rgba(244,239,230,.62);--dot:var(--cream);position:relative;isolation:isolate;padding:14px 40px;border-radius:3px;border:0;box-shadow:none;background:var(--plate);color:var(--cream)}
.btn:before{content:"";position:absolute;inset:3px;border:1px solid var(--edge);border-radius:1px;pointer-events:none}
.btn:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--dot);
 --c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/svg%3E");
 -webkit-mask:var(--c) 11px 50%/6px 6px no-repeat,var(--c) calc(100% - 11px) 50%/6px 6px no-repeat;
 mask:var(--c) 11px 50%/6px 6px no-repeat,var(--c) calc(100% - 11px) 50%/6px 6px no-repeat}
.btn.text{box-shadow:none}
.btn.call{--plate:var(--cream);--edge:rgba(27,35,40,.5);--dot:var(--ink);color:var(--ink);background:var(--cream);border:2px solid var(--ink);padding:12px 38px}
.btn.call:before{inset:2px}
/* Phone in hand. The limb is ONE baked image (forearm from the sleeve hem, wrist, the approved hand, both soft shadows), so the arm and the hand cannot drift apart. It is placed in the art frame (the 3600x2240 hero art) in percentages, on every width. Only the live phone screen is HTML, in the same frame, under the hand's glass window.
   .phone-stage is the art box (phones: the same box as the art, extended left to the full 3600 frame). Hand box = art units x 1666, y 785, width 860.6; the limb image extends past it by the amounts in the percentages below. */

:root{
 --ink-deep:#12181b;--cream-2:#ebe4d5;
 --display:maple-web,"Arial Black",Impact,sans-serif;--head:maple-web,"Arial Black",Impact,sans-serif;
 --s1:clamp(44px,4.65vw,72px);                 
 --s2:clamp(38px,4.4vw,64px);                  
 --s3:46px;                                    
 --s4:clamp(20px,1.75vw,26px);                 
 --s5:17px;                                    
 --s6:clamp(16px,1.25vw,18px);                 
 --s7:14px;                                    
 --s8:13px;                                    
 --pad:clamp(48px,6.4vw,92px);
 --hdr-h:72px;
 --ease:cubic-bezier(.65,0,.35,1);
}
main h2, main h3{font-weight:900}
.ic{fill:currentColor}
.wrap{max-width:1600px;margin:0 auto;padding:0 var(--gutter);position:relative}
.sec{position:relative}
.sec-head{font-family:var(--head);font-weight:900;font-size:var(--s2);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.kick{font:900 var(--s8)/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.lead{font:400 var(--s4)/1.2 var(--serif)}
p, dd, li{text-wrap:pretty}
a{color:inherit}
a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.on-dark a:focus-visible{outline-color:var(--orange-light)}
.title{font:900 var(--s4)/.95 var(--display);letter-spacing:0;text-transform:uppercase;text-wrap:balance}
.hdr{height:var(--hdr-h);position:sticky;top:0;z-index:30}
.hdr img{width:140px}
.hdr .hr{display:flex;align-items:center;gap:14px}
.hdr .tel{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:900 var(--s5)/1 var(--display);letter-spacing:.02em;color:var(--ink);text-decoration:none}
.hdr .btn{padding:0 22px;min-height:44px;display:inline-flex;align-items:center}
.hdr .btn:before{inset:2px}
.hdr .btn:after{display:none}
.rivets{position:absolute;left:0;right:0;top:12px;height:6px;pointer-events:none;background:center 0/60px 6px repeat-x;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='60' height='6' fill='%23fff'/%3E%3Cpath d='M28.4 2.5A1.6 1.6 0 0 1 29.4 1.4' fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='30' cy='3' r='2.28' fill='%23f4efe6' mask='url(%23m)'/%3E%3C/svg%3E")}
.rivets--ink{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='60' height='6' fill='%23fff'/%3E%3Cpath d='M28.4 2.5A1.6 1.6 0 0 1 29.4 1.4' fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='30' cy='3' r='2.78' fill='%231b2328' fill-opacity='.55' mask='url(%23m)'/%3E%3C/svg%3E")}
.deal{background:var(--cream);padding:var(--pad) 0}
.deal .pull{margin-top:clamp(18px,2vw,28px);max-width:15em;font:400 var(--s4)/1.2 var(--serif);text-wrap:balance}
.spot{display:block;height:auto}
.spot--1{width:min(315px,100%)}
.spot--2{height:300px;width:auto;max-width:100%}
.q summary::-webkit-details-marker{display:none}
.how{background:var(--cream-2);padding:calc(var(--pad) - 24px) 0 calc(var(--pad) - 8px)}
.how-top{display:grid;grid-template-columns:1fr auto;column-gap:clamp(24px,4vw,64px);align-items:end}
.how-top .sec-head{max-width:10em}
.how-top .spot--2{justify-self:end}
.rail{list-style:none;position:relative;display:grid;grid-template-columns:1fr 1fr 1.3fr 1.6fr;column-gap:clamp(24px,2.6vw,40px);margin-top:clamp(20px,2vw,28px);align-items:start}
.rail:before{content:"";position:absolute;left:0;right:0;top:32px;height:2px;background:var(--ink)}
.st{position:relative;min-width:0}
.st .when{display:block;height:13px}
.st .dot{position:relative;display:block;width:12px;height:12px;margin-top:14px;border-radius:50%;background:#1b2328}
.st--live .dot{background:var(--orange)}
.st .title{margin-top:18px}
.st .title+p{margin-top:10px;max-width:30ch;font:400 var(--s6)/1.4 var(--serif)}
.checks{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:10px;font:400 var(--s6)/1.25 var(--serif)}
.checks svg{width:24px;height:24px;display:block;margin-top:-1px}
.plate14{margin-top:18px;background:var(--orange-light);color:var(--ink);border-radius:var(--radius);padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,32px)}
.plate14 .title{margin-top:0}
.plate14 .run{display:block;white-space:nowrap;font:900 var(--s2)/.92 var(--head);letter-spacing:-.02em;text-transform:uppercase;margin-top:6px}
.plate14 p{margin-top:12px;font:400 var(--s6)/1.4 var(--serif)}
.contact{background:var(--ink);color:var(--cream);position:relative;padding:var(--pad) 0}
.contact .grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(24px,4vw,64px);align-items:stretch}
.contact .copy{grid-column:1 / span 7}
.contact .sec-head{color:var(--cream)}
.contact .lead{margin-top:14px;max-width:24ch}
.phone-num{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,32px);font:900 var(--s2)/.92 var(--head);letter-spacing:-.02em;color:var(--orange)}
.phone-num a{text-decoration:none}
.ic{width:24px;height:24px;flex:none;display:block}
.contact .plates, .needs .plates, .st--live .plates{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,28px)}
.contact .info{margin-top:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;font:400 16px/1.25 var(--serif)}
.contact .info p{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;max-width:46ch}
.contact .info .ic{margin-top:-1px;color:var(--cream)}
.contact .info a{text-decoration-thickness:1px;text-underline-offset:3px}
.portrait{grid-column:9 / span 4;position:relative;margin-top:6px;background:var(--blue);border-radius:var(--radius);overflow:hidden}
.portrait img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);display:block}
.foot{background:var(--ink-deep);color:var(--cream);position:relative;padding-top:6px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:36px;padding-bottom:36px}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;font:400 var(--s7)/1.3 var(--serif)}
.foot li+li:before{content:"\00B7";margin:0 12px;color:var(--orange-light);font-weight:700}
.foot img{height:40px;width:auto;display:block}
.foot .legal a{text-decoration:none;opacity:.85}
.foot .fr{display:flex;align-items:center}
.foot .fr .legal:before{content:"\00B7";margin:0 10px;color:var(--orange-light)}
.foot .legal a+a:before{content:"\00B7";margin:0 10px;color:var(--orange-light)}
.foot .legal li:before{display:none}

.bar{display:none}
@media (max-width:1100px){
 .rail{grid-template-columns:1fr 1fr}
 .rail:before{display:none}
 .st{padding-bottom:28px}
}
@media (max-width:900px){
 .how-top{grid-template-columns:1fr}
 .how-top .spot--2{justify-self:start;margin-top:28px}
 .contact .copy{grid-column:1 / -1;padding-bottom:40px}
 .portrait{grid-column:1 / -1;max-width:440px;width:100%;margin:0;border-radius:var(--radius) var(--radius) 0 0}
 
 .contact{padding-bottom:0}
}
@media (max-width:900px){
 
 
 
 
 
 
 
 
 
 
 
 .portrait{height:340px}
}
@media (max-width:700px){
 :root{--gutter:16px;--hdr-h:64px;--pad:36px}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .hdr{position:static}.hdr img{width:120px}.hdr .btn{display:none}
 
 
 
 
 
 
 
 
 
 
 /* phones: the stage is the art's own box, widened left to the full 3600 frame (the art image is the crop x 900..3600), so the limb sits in the same units as the art at every viewport. --sx is the stage's left edge in the hero. */
 
 
 
 
 
 
 
 .how-top .sec-head{max-width:none}
 .how-top .spot--2{display:none}
 .rail{display:block;margin-top:32px;padding-left:40px}
 .rail:before{display:none}
 .st{padding-bottom:0;margin-bottom:18px}
 .st:last-child{margin-bottom:0}
 .st .dot{position:absolute;left:-33px;top:0;margin-top:0}
 .st:not(:last-child):before{content:"";position:absolute;left:-28px;top:6px;bottom:-18px;width:2px;background:var(--ink)}
 .st .title{margin-top:10px}
 .st .title+p{max-width:none}
 .checks{margin-top:8px}
 .plate14{margin-top:10px;margin-left:-40px;padding:16px 18px}
 .contact .copy{padding-bottom:28px}
 .contact .info{gap:10px;margin-top:20px}
 .contact .plates .btn, .needs .plates .btn, .st--live .plates .btn{flex:1 1 auto;justify-content:center}
 .st--live .plates{margin-left:-40px}
 .portrait{max-width:none;max-height:230px;height:230px}
 .foot .wrap{flex-direction:column;align-items:flex-start}
 .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;padding:12px max(var(--gutter),env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));background:var(--ink)}
 .bar .btn{flex:1 1 0;justify-content:center;padding:16px 8px;min-height:48px}
}
/* short phones: the art box takes the screen left under the text and above the fixed bar; the photo crops from the hairline down so face + tee top always clear the bar */

@media (max-width:700px) and (max-height:620px) and (orientation:portrait){
 :root{--hdr-h:52px}
 
 
}
/* 320 wide: the one-line headline (337px at 44px) is scaled to fit the 288px column */

@media (prefers-reduced-motion:no-preference){
 .btn{transition:transform .2s var(--ease)}
 .btn:hover{transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){.btn, .btn:hover{transition:none;transform:none}}
.btn{font-size:var(--s5)}
.btn.text{--plate:#b94300;background:var(--plate)}
h2, h3, .qt, .title, .sec-head, .kick{text-wrap:balance}
.ic{color:#b94300}
.q summary>.ic:last-child{color:#b94300}
.on-dark .ic, .contact .info .ic{color:var(--orange)}
.pp{position:relative;isolation:isolate;background:var(--ink);color:var(--cream);border-radius:3px;padding:24px 30px 24px 34px}
.pp:before{content:"";position:absolute;inset:3px;border:1px solid rgba(244,239,230,.45);border-radius:1px;pointer-events:none}
.pp:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--cream);
 --c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/svg%3E");
 -webkit-mask:var(--c) 11px 11px/6px 6px no-repeat,var(--c) calc(100% - 11px) 11px/6px 6px no-repeat;
 mask:var(--c) 11px 11px/6px 6px no-repeat,var(--c) calc(100% - 11px) 11px/6px 6px no-repeat}
.pp .kick{display:block;color:var(--orange-light);font-size:var(--s7);letter-spacing:.08em}
.pp .pr{display:block;margin:4px 0 0;font:400 var(--s6)/1.1 var(--serif)}
.pp .kick+.pr{margin-top:6px}
.pp .pr b{font:900 var(--s3)/.9 var(--display);letter-spacing:-.02em;margin-right:6px}
.prices .pn{font:400 var(--s6)/1.35 var(--serif);max-width:30em;text-wrap:pretty}
.pp .pf{margin-top:12px;font:400 var(--s7)/1.3 var(--serif);color:rgba(244,239,230,.88)}
html.tk-wait *{color:transparent!important}
/* Hero at 901 and up: the art shrinks until the truck clears the text column, the column ends at the truck, and the number drops under the buttons when the row can't hold all three. */


/* B3: the number sits on its own line under the buttons, left edge on TEXT MIKE (901 and up; the header number stays) */

/* B4 hero (mock): eyebrow above the headline, trust badges, first screen = viewport on desktop */

.bdg{--dot:var(--cream);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 17px;border-radius:3px;background:var(--blue);color:var(--cream);font:900 13px/.95 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.bdg:before{content:"";position:absolute;inset:3px;border:1px solid rgba(244,239,230,.45);border-radius:1px;pointer-events:none}
.bdg:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--dot);
 --c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/svg%3E");
 -webkit-mask:var(--c) 9px 50%/4px 4px no-repeat,var(--c) calc(100% - 9px) 50%/4px 4px no-repeat;
 mask:var(--c) 9px 50%/4px 4px no-repeat,var(--c) calc(100% - 9px) 50%/4px 4px no-repeat}
.bdg-ch{padding:0 15px}
.bdg-ch img{display:block;height:30px;width:auto}
.bdg .bi{width:20px;height:20px;flex:none;color:var(--orange-light)}




/* offer-home: three stat tiles (the last one spans the row until the strip is wide), "What a septic website needs", "Print, too". Existing sizes and colors only. */

.needs{background:var(--cream-2);padding:var(--pad) 0}
.needs .pull{margin-top:14px;max-width:30em;font:400 var(--s4)/1.2 var(--serif);text-wrap:balance}
.ngs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,40px);margin-top:clamp(24px,2.4vw,36px)}
.ng>.ic{width:28px;height:28px;margin-bottom:6px}
.ng .checks{margin-top:12px}
.needs .close{margin-top:clamp(20px,2vw,28px);max-width:34em;text-wrap:balance}

@media (max-width:700px){
 .ngs{grid-template-columns:1fr;gap:28px}
 .ng>.ic{width:24px;height:24px}
}

/* page pass (2026-10-10, committee): the six pairs are open hairline rows in two groups of three. No boxes, no strikethrough, no caps. The complaint is the quiet serif line, the answer is the semibold serif line with the orange check. Existing sizes, colors, 3px radius only. */
.frus{background:var(--cream);padding:var(--pad) 0;overflow:hidden}
.frus .wrap{text-align:center}
.frus-fig{margin:0 auto;width:min(clamp(280px,30vw,440px),80vw);line-height:0}
.frus-fig img{display:block;width:100%;height:auto}
.frus .sec-head{max-width:12em;margin:0 auto}
.sprite{position:absolute;width:0;height:0}
.frs{list-style:none;margin:clamp(32px,3.4vw,52px) auto 0;max-width:64rem;text-align:left}
.frs>.fr{display:grid;grid-template-columns:28px minmax(0,.8fr) minmax(0,1.4fr);column-gap:clamp(16px,2.4vw,32px);align-items:center;padding:clamp(14px,1.4vw,20px) 0;border-top:var(--rule) solid var(--line)}
.frs>.fr:nth-child(3), .frs>.fr:nth-child(6){border-bottom:var(--rule) solid var(--line)}
.frs>.fr:nth-child(4){margin-top:clamp(20px,2.4vw,32px)}
.frs>.fr>.ic{width:28px;height:28px;color:var(--orange)}
.gripe{font:400 var(--s6)/1.25 var(--serif);color:var(--blue);text-wrap:balance}
.fix{display:grid;grid-template-columns:24px 1fr;gap:10px;font:600 var(--s4)/1.2 var(--serif);text-wrap:balance}
.fix .ic{width:24px;height:24px;color:var(--orange);margin-top:.1em}
@media (max-width:620px){
 .frus .sec-head{font-size:min(var(--s2),calc((100vw - 2 * var(--gutter)) / 11.2))}
 .frs>.fr{grid-template-columns:1fr;row-gap:6px;padding:14px 0}
 .frs>.fr>.ic{display:none}
 .gripe{font-size:var(--s7);line-height:1.25}
 .fix{font-size:var(--s5);line-height:1.25;grid-template-columns:20px 1fr;gap:8px}
 .fix .ic{width:20px;height:20px}
}
/* scroll reveal: rows rise in one after another, once. Only armed by site.js when motion is allowed and the list is below the fold. */
@media (prefers-reduced-motion:no-preference){
 .frs.rise .fr{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
 .frs.rise.rise-in .fr{opacity:1;transform:none}
}

/* page pass: No catch is one offer. Left: headline and engraving. Right: the price plate beside what you get. Below: the questions as one wide list; on desktop every answer is open, so price and cancel terms are always on screen. */
.deal .grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(24px,4vw,64px);row-gap:clamp(32px,3.6vw,52px);align-items:start}
.deal-l{grid-column:1 / span 4;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3vw,40px)}
.offer{grid-column:5 / span 8;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-areas:"prices get" "print get";column-gap:clamp(24px,3vw,44px);align-items:start}
.prices{grid-area:prices;display:grid;gap:clamp(12px,1.4vw,18px)}
.get{grid-area:get}
.print{grid-area:print;margin-top:clamp(20px,2vw,28px);padding-top:16px;border-top:var(--rule) solid var(--line)}
.print p{margin-top:8px;font:400 var(--s7)/1.35 var(--serif)}
.get>.title{margin-bottom:14px}
.tiles{list-style:none;display:grid;gap:18px}
.tiles>li{display:grid;grid-template-columns:28px 1fr;column-gap:12px}
.tiles>li>.ic{width:28px;height:28px;grid-row:1 / span 2;margin-top:-2px}
.tiles .title{font-size:var(--s5);line-height:1}
.tiles p{margin-top:4px;font:400 var(--s6)/1.25 var(--serif)}
.qa{grid-column:1 / -1;border-top:var(--rule) solid var(--line)}
.deal{--g:clamp(24px,4vw,64px)}
.q{padding:clamp(16px,1.6vw,24px) 0;border-bottom:var(--rule) solid var(--line)}
.q:after{content:"";display:block;clear:both}
.q summary{float:left;width:calc((100% - 11 * var(--g)) / 3 + 3 * var(--g));list-style:none;pointer-events:none;cursor:default}
.q summary>.ic{display:none}
.qt{font:600 var(--s5)/1.25 var(--serif);text-wrap:balance}
.q p{margin-left:calc((100% - 11 * var(--g)) / 3 + 4 * var(--g));max-width:38em;font:400 var(--s6)/1.5 var(--serif)}
@media (max-width:900px){
 .deal-l, .offer, .qa{grid-column:1 / -1}
 .offer{grid-template-columns:1fr;grid-template-areas:"prices" "get" "print";row-gap:28px}
 .print{margin-top:0}
 .q summary{float:none;width:auto}
 .q p{margin-left:0;margin-top:8px}
}
@media (max-width:700px){
 .deal .grid{row-gap:28px}
 .deal-l{gap:20px}
 .spot--1{width:min(180px,100%)}
 .pp{padding:22px 20px 18px 24px}
 .pp:after{-webkit-mask-position:9px 9px,calc(100% - 9px) 9px;mask-position:9px 9px,calc(100% - 9px) 9px}
 .pp .pr b{font-size:var(--s2)}
 .tiles{gap:16px}
 .tiles>li>.ic{width:24px;height:24px;margin-top:0}
 .tiles>li{grid-template-columns:24px 1fr}
 .q{padding:0}
 .q summary{display:grid;grid-template-columns:1fr 24px;column-gap:10px;align-items:center;min-height:56px;padding:8px 0;pointer-events:auto;cursor:pointer}
 .q summary>.ic{display:block;width:24px;height:24px;transition:transform .25s var(--ease)}
 .q[open] summary>.ic{transform:rotate(180deg)}
 .q p{margin-top:0;padding-bottom:16px;max-width:none}
}
/* Tap targets (2026-10-09): invisible vertical hit boxes grow short links to 44px+ on phones. No horizontal overhang, no layout or visual change. */
@media (max-width:700px),(pointer:coarse){
 .foot .legal a, .contact .info a, .phone-num a{position:relative}
 .foot .legal a:after{content:"";position:absolute;inset:0 0 -25px}
 .contact .info a:after{content:"";position:absolute;inset:-12.5px 0}
 .phone-num a:after{content:"";position:absolute;inset:-7px 0}
}

/* hero v2 (Mike 2026-10-09, "2, go"): I HANDLE IT. / OR DO IT YOURSELF. Two doors: See the sample, Text Mike. Section kickers name the doors. */
.sec-kick{display:block;color:#ad3f00;margin-bottom:.3em} /* a shade darker than the .ic orange so 13px caps clear 4.5:1 on the darker cream band */

/* short phones (375x667): the three-line headline and the sample button take room, so the text block tightens and only the name chip stays, which keeps face and tee top above the fixed bar */

/* short desktop windows (1200 to 1300 wide, 740 or less tall): the name chip drops to a second row so the row never runs into the "Looks like money" label */

/* phones: the orange line may only break after "do it" (OR DO IT / YOURSELF.), and the label is a little smaller and sits higher so it clears the top of the phone with room to spare */

/* short desktops (780px tall or less): the hero grew a row of content, so spacing tightens and the block sits a little lower to keep main's air under the header */

/* tiny phones (620px tall or less, 320x568): the in-flow sample button and the chips go and the headline steps down to one orange line, so the face clears the fixed bar and the phone is at least as big as before */


/* hero v2 fixes (2026-10-09): do-it-yourself door, price on phones, bar dots on 320 */

/* short phones (780px tall or less): no room for the price line above the button without pushing the phone under the bar; the card and the strip carry it */

@media (max-width:359px){.bar .btn:after{display:none}}
/* phones 860px tall or less: the 20+ years chip goes (the Chamber and the name chip stay) so the price line, the sample button and the checklist link fit and the arm join still shows above the bar */

/* phones 700px tall or less (375x667): no room for the checklist link without cropping the phone under the bar, so only the button shows; the checklist is the second door further down and on the sample page */

/* desktop: the checklist link shares the phone number's row under the buttons, so the hero block does not grow */