/* Hero v3 (2026-10-12): Mike's hand-composed art, built from layers.
   One idea: the hero is a STAGE drawn in "design px" (the comp artboard: 1920x1080 wide, 1440x900 medium, 768x1024 tablet, 393x852 phone, header included).
   --u is how many real px one design px gets. Art, text and the band all scale by --u together, so in-between sizes keep the comp's spacing.
   Art is anchored to the right edge and bottom, text to the left, so a wider or shorter window crops paper and lawn, never Mike, the truck or the house.
   Z order: scene (1) < slate band (2) < Mike (3) < text (4), so the band's cream top rule is behind him.
   Where each layer sits is in hero-art.css (generated from the build script). */
:root{--hdr-h:72px}
.hdr{padding:0 6vw}
.hero{container-type:inline-size;position:relative;overflow:hidden;background:var(--cream)}
.hi{position:relative;isolation:isolate;
 --uw:calc(100cqw / var(--DW));
 --uh:calc((100svh - 72px) / (var(--DH) - 72));
 --u:max(min(var(--uw),var(--uh)),min(calc(var(--uw) * .92),1px));
 --h0:calc((var(--DH) - 72) * var(--u));
 --hh:calc(var(--h0) + min(max(0px,calc(100svh - 72px - var(--h0))),max(calc((0.83px - var(--u)) * 900),calc(var(--h0) * .2))));
 height:var(--hh);
 /* type, in design px at --u = 1 (wide values; medium overrides below). m1-m5 are the gaps between blocks. Six sizes per board (v4, 2026-10-12). */
 --f-eb:22;--f-h1:100;--f-p:28;--f-btn:22;--h-btn:58;--f-lk:20;--f-by:15;--f-k:17;--f-v:68;--f-s:20;--col-t:140;--cell-w:300;--cell-b:32;--cg:44;--zone:226;
 --m1:8;--m2:28;--m3:26;--m4:18;--m5:12}
@media (min-width:1024px) and (max-width:1599px){
 .hi{--f-eb:16;--f-h1:68;--f-p:19;--f-btn:16;--h-btn:48;--f-lk:14;--f-by:12;--f-k:12;--f-v:44;--f-s:15;--col-t:110;--cell-w:200;--cell-b:24;--cg:28;--zone:165;
  --m1:6;--m2:22;--m3:20;--m4:16;--m5:10}
}
.scene{position:absolute;z-index:1;right:calc(var(--sc-r) * var(--u));bottom:calc((var(--DH) - var(--sc-t) - var(--sc-h)) * var(--u));width:calc(var(--sc-w) * var(--u));height:calc(var(--sc-h) * var(--u));pointer-events:none;user-select:none}
.scene img,.mk img{display:block;width:100%;height:100%}
.band-bg{position:absolute;z-index:2;left:0;right:0;bottom:0;height:calc((var(--DH) - var(--bt)) * var(--u));background:rgba(57,76,86,.82);
 background-image:repeating-linear-gradient(0deg,rgba(244,239,230,.045) 0 1px,transparent 1px 4px)}
.band-bg:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-top:3px solid var(--cream);border-bottom:1px solid var(--cream)}
.mike{position:absolute;z-index:3;right:calc(var(--mk-r) * var(--u));bottom:calc((var(--DH) - var(--mk-t) - var(--mk-h)) * var(--u));width:calc(var(--mk-w) * var(--u));height:calc(var(--mk-h) * var(--u));pointer-events:none;user-select:none}
.mk{position:absolute;inset:0;z-index:2;display:block}
/* the live sample screen sits behind the hand: the art has a transparent window where the phone's glass is */
.scr{--q:1.1;position:absolute;z-index:1;left:var(--sr-l);top:var(--sr-t);width:var(--sr-w);height:var(--sr-h);container-type:size;border-radius:var(--sr-rx) / var(--sr-ry);overflow:hidden;background:var(--paper)}
.scr-in{width:100%;height:100%;color:var(--ink);font-family:var(--serif);display:flex;flex-direction:column;text-align:left;text-transform:none;letter-spacing:0;padding:calc(11.7cqw * var(--q)) calc(5.2cqw * var(--q)) 0}
.scr-url{flex:none;display:flex;align-items:center;justify-content:center;gap:calc(1.6cqw * var(--q));padding:calc(2.6cqw * var(--q)) calc(3.4cqw * var(--q));border-radius:calc(1.5cqw * var(--q));background:var(--cream);font-family:var(--sans-ui);font-size:calc(5.8cqw * var(--q));line-height:1.1;color:var(--blue);text-align:center}
.scr-lock{width:calc(5.6cqw * var(--q));height:calc(5.6cqw * var(--q));flex:none;color:var(--blue)}
.scr-hd{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:calc(1.6cqw * var(--q));margin:calc(2.4cqw * var(--q)) calc(-5.2cqw * var(--q)) 0;padding:calc(3cqw * var(--q)) calc(5.2cqw * var(--q));background:var(--paper);border-bottom:1px solid var(--line);font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:1}
.scr-nm{font-size:calc(7.4cqw * var(--q));letter-spacing:.02em;white-space:nowrap}
.scr-tl{display:flex;align-items:baseline;gap:calc(2.4cqw * var(--q));font-size:calc(5.2cqw * var(--q));letter-spacing:.02em;white-space:nowrap}
.scr-tl small{font-size:calc(4cqw * var(--q));letter-spacing:.08em;color:var(--blue)}
.scr-hero{flex:none;display:flex;flex-direction:column;gap:calc(3.2cqw * var(--q));margin:0 calc(-5.2cqw * var(--q));padding:calc(6cqw * var(--q)) calc(5.2cqw * var(--q)) calc(6.4cqw * var(--q));background:var(--blue);color:var(--cream)}
.scr-h{font-family:var(--display);font-weight:900;font-size:calc(10.6cqw * var(--q));line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.scr-sub{font-size:calc(5.8cqw * var(--q));line-height:1.3;text-wrap:balance}
.scr-call,.scr-req{display:block;padding:calc(3.2cqw * var(--q)) 0;border-radius:calc(1.5cqw * var(--q));text-align:center;font-family:var(--display);font-weight:900;font-size:calc(6.8cqw * var(--q));letter-spacing:.06em;text-transform:uppercase;line-height:1}
.scr-call{background:#b94300;color:var(--paper)}
.scr-req{border:calc(.7cqw * var(--q)) solid var(--cream);color:var(--cream)}
.scr-photo{flex:1 1 0;min-height:0;margin:0 calc(-5.2cqw * var(--q));overflow:hidden;background:var(--cream)}
.scr-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* text. Sizes are --u times design px, with floors so nothing gets small on a short window. */
.col{position:absolute;z-index:4;left:6cqw;top:calc((var(--col-t) - 72) * var(--u));display:flex;flex-direction:column;align-items:flex-start}
.col .badges{display:flex;list-style:none;margin:0}
.bdg .sp,.bdg .ct{display:none}
.eyebrow{order:1;font:900 max(12px,calc(var(--f-eb) * var(--u)))/.95 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 calc(var(--m1) * var(--u));white-space:nowrap}
h1{order:2;font-family:var(--head);font-weight:900;font-size:max(30px,calc(var(--f-h1) * var(--u)));line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
h1 .l1{display:block;white-space:nowrap}
h1 .pay{display:block;white-space:nowrap;color:var(--orange);font-size:.84em;line-height:.95;margin-top:.02em}
.p{order:3;font-size:max(15px,calc(var(--f-p) * var(--u)));line-height:1.5;margin-top:calc(var(--m2) * var(--u));max-width:19.4em;text-wrap:pretty}
.btns{order:4;display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--u)) calc(8 * var(--u));margin-top:calc(var(--m3) * var(--u))}
.btns .btn{font-size:max(13px,calc(var(--f-btn) * var(--u)));height:max(38px,calc(var(--h-btn) * var(--u)));padding:0 max(27px,calc(var(--f-btn) * var(--u) * 1.8));display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.btns .diy{order:5;flex-basis:100%;position:relative;display:block;margin:calc(var(--m4) * var(--u)) 0 0;font:900 max(12px,calc(var(--f-lk) * var(--u)))/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.btns .diy:after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.btns .diy:hover{color:var(--orange)}
.btns .num{order:6;flex-basis:100%;font:900 max(12px,calc(var(--f-num) * var(--u)))/1.2 var(--display);letter-spacing:.04em;white-space:nowrap;color:var(--ink);text-decoration:none;margin-top:calc(var(--m5) * var(--u))}
.btns .num:after{content:"";position:absolute}
.cells{position:absolute;z-index:4;left:6cqw;display:grid;color:var(--cream)}
.cell .k{white-space:nowrap;font:900 max(10.5px,calc(var(--f-k) * var(--u)))/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.8)}
.cell .v{font:900 max(30px,calc(var(--f-v) * var(--u)))/.9 var(--display);letter-spacing:-.02em;text-transform:uppercase;margin-top:calc(7 * var(--u))}
.cell .s{font-size:max(12.5px,calc(var(--f-s) * var(--u)));line-height:1.25;margin-top:calc(8 * var(--u));color:rgba(244,239,230,.88);text-wrap:balance}

/* ---- tablet and phone (concept A): screen 1 = eyebrow + headline + the scene, screen 2 = the slate band (One person, three cells), then See the sample, the checklist link, the number, the chips.
   The band is one slate shape that starts at Mike's chin on screen 1 and runs down behind screen 2. Mike (z 3) stands in front of it. ---- */
@media (min-width:600px) and (max-width:1023px), (min-width:1024px) and (max-width:1599px) and (orientation:portrait), (max-width:599px){
 .hi{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto auto auto;height:auto;padding-bottom:calc(28 * var(--u));
  --u:var(--uw)}
 .hi:before{content:"";grid-row:1 / 4;grid-column:1;height:calc((var(--DH) - 72) * var(--u));pointer-events:none}
 .col{display:contents}
 .band-bg{position:relative;grid-row:1 / 6;grid-column:1;left:auto;right:auto;bottom:auto;height:auto;margin-top:calc((var(--bt) - 72) * var(--u))}
 .scene{bottom:auto;top:calc((var(--sc-t) - 72) * var(--u))}
 .mike{bottom:auto;top:calc((var(--mk-t) - 72) * var(--u))}
 .eyebrow{grid-row:1;grid-column:1;z-index:4;margin:calc(var(--eb-t) * var(--u)) 6cqw calc(var(--m1) * var(--u));font-size:min(max(11px,calc(var(--f-eb) * var(--u))),3.4cqw);align-self:start}
 h1{grid-row:2;grid-column:1;z-index:4;margin:0 6cqw;align-self:start;font-size:max(28px,calc(var(--f-h1) * var(--u)))}
 .p{grid-row:4;grid-column:1;z-index:4;position:relative;margin:calc(24 * var(--u)) 6cqw 0;max-width:none;color:var(--cream);font-size:max(16px,calc(var(--f-p) * var(--u)));line-height:1.35;text-wrap:balance}
 .cells{grid-row:5;grid-column:1;z-index:4;position:relative;left:auto;top:auto;margin:calc(24 * var(--u)) 6cqw 0;padding-bottom:calc(24 * var(--u));grid-template-columns:1fr 1fr;gap:calc(20 * var(--u)) calc(8 * var(--u))}
 .cell{padding-right:0}
 .cell:nth-child(3){grid-column:1 / -1}
 .btns{grid-row:6;grid-column:1;z-index:4;position:relative;margin:calc(24 * var(--u)) 6cqw 0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
 .btns .btn.text{display:none}
 .btns .btn.call{--plate:#b94300;background:var(--plate);color:var(--cream);border:0;height:max(48px,calc(52 * var(--u)));font-size:max(15px,calc(var(--f-btn) * var(--u)));padding:0}
 .btns .diy{flex-basis:auto;margin:calc(20 * var(--u)) 0 0;font-size:max(12px,calc(var(--f-lk) * var(--u)));white-space:normal}
 .btns .num{flex-basis:auto;margin-top:calc(6 * var(--u));font-size:max(15px,calc(var(--f-num) * var(--u)))}
 .col .badges{grid-row:7;grid-column:1;z-index:4;position:relative;flex-wrap:wrap;margin:calc(24 * var(--u)) 6cqw 0;gap:calc(8 * var(--u))}
 .bdg{height:44px;font-size:12px;letter-spacing:.04em;padding:0 14px}
 .bdg-ch{padding:0 12px}
 .bdg-ch img{height:28px}
}
@media (max-width:599px){
 .hi{--u:min(var(--uw),calc((100svh - 144px) / 668));--eb-t:24;--f-eb:13;--f-h1:38;--m1:7;--f-p:17.5;--f-k:12;--f-v:44;--f-s:13.5;--f-btn:17;--f-lk:14;--f-num:16}
 .hi:before{height:calc((var(--DH) - 72) * var(--u))}
}
@media (min-width:600px) and (max-width:1023px), (min-width:1024px) and (max-width:1599px) and (orientation:portrait){
 .hi{--u:var(--uw);--eb-t:26;--f-eb:17;--f-h1:52;--m1:8;--f-p:22;--f-k:14;--f-v:56;--f-s:17;--f-btn:19;--f-lk:16;--f-num:18}
 .cells{grid-template-columns:repeat(3,1fr)}
 .cell:nth-child(3){grid-column:auto}
 .btns{max-width:480px}
}

/* ---- desktop finish (v4 A-prime, 2026-10-12): no slate band. A 1px ink ground line, the truck's wheels stand on it, the three prices run as one spec row in the cream under it (left edge = headline).
   Credentials are one quiet line under the lead; the phone number is the nav's. Only landscape 1024+ ; phone and tablet keep the band above. ---- */
@media (min-width:1024px) and (max-width:1599px) and (orientation:landscape), (min-width:1600px){
 .hi{--u:max(min(var(--uw),var(--uh)),min(calc(var(--uw) * .86),1px));
  /* the price row's real height (type floors included) sets where the ground line is; the scene rides up by whatever the floors add */
  --B:max(24px,calc(var(--cell-b) * var(--u)));
  --crh:calc(max(10px,calc(var(--f-by) * var(--u))) * 1.25);
  --cb:calc(var(--B) + var(--crh) + 12 * var(--u));
  --hc:calc(max(10.5px,calc(var(--f-k) * var(--u))) + max(26px,calc(var(--f-v) * var(--u))) * .9 + max(11px,calc(var(--f-s) * var(--u))) * 2.5 + 8 * var(--u));
  --zpx:max(calc(var(--zone) * var(--u)),calc(var(--cb) + var(--hc) + 18 * var(--u)));
  --ex:calc(var(--zpx) - var(--zone) * var(--u))}
 .scene{bottom:calc((var(--DH) - var(--sc-t) - var(--sc-h)) * var(--u) + var(--ex))}
 .band-bg{display:none}
 .hi:after{content:"";position:absolute;left:0;right:0;bottom:var(--zpx);height:1px;background:var(--ink);z-index:2}
 h1 .pay{font-size:1em;margin-top:0}
 .p{line-height:1.45;max-width:none;white-space:nowrap}
 .btns{order:5;row-gap:0}
 .btns .num{display:none}
 .btns .diy{margin-top:calc(var(--m4) * var(--u))}
 .col{top:0;bottom:0;padding-top:calc((var(--col-t) - 72) * var(--u))}
 .col .badges{position:absolute;left:0;bottom:var(--B);margin:0;gap:calc(10 * var(--u));align-items:center;white-space:nowrap;width:max-content}
 .col .badges li:nth-child(3):before{content:"\00b7";margin-right:calc(10 * var(--u));color:var(--blue)}
 .hi .bdg{height:auto;padding:0;background:none;color:var(--blue);font-size:max(10px,calc(var(--f-by) * var(--u)));line-height:1.2;letter-spacing:.05em}
 .hi .bdg:before,.hi .bdg:after,.hi .bdg .bi{display:none}
 .hi .bdg br{display:none}
 .hi .bdg .sp{display:inline}
 .col .badges li:first-child{order:3}
 .col .badges li:first-child:before{content:"\00b7";margin-right:calc(10 * var(--u));color:var(--blue)}
 .hi .bdg-ch{padding:0;background:none;border-radius:0}
 .hi .bdg-ch img{display:none}
 .hi .bdg .ct{display:inline}
 .cells{top:auto;bottom:var(--cb);grid-template-columns:repeat(3,max(calc(var(--cell-w) * var(--u)),168px));column-gap:calc(var(--cg) * var(--u));color:var(--ink)}
 .cell{padding-right:0}
 .cell .k{color:var(--blue);font-size:max(10.5px,calc(var(--f-k) * var(--u)))}
 .cell .v{font-size:max(26px,calc(var(--f-v) * var(--u)));margin-top:calc(4 * var(--u))}
 .cell .s{color:var(--ink);font-size:max(11px,calc(var(--f-s) * var(--u)));margin-top:calc(4 * var(--u))}
}
@media (min-width:1600px){.p{max-width:19.4em;white-space:normal}}