:root{--ink:#14130F;--paper:#F5F1E8;--stone:#6B665B;--line:#D9D3C5;--hv:#FF6A13;--hf:'Public Sans',Arial,sans-serif;--bf:'Source Serif 4',Georgia,serif;--hz:.92;--hw:800;--hst:100%;--hl:-.03em;--hv-deep:#A63C08}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#0B0D0F;color:var(--ink);font-family:var(--bf);font-size:19px;line-height:1.5}
h1,h2{font-family:var(--hf);font-weight:var(--hw);letter-spacing:var(--hl);line-height:1;margin:0;text-wrap:balance}
h3,h4{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.display{font-family:var(--hf);font-weight:var(--hw);letter-spacing:var(--hl);line-height:1;margin:0}
.wrap{width:100%;max-width:1880px;margin:0 auto;padding-left:clamp(20px,4.4vw,88px);padding-right:clamp(20px,4.4vw,88px)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font-family:var(--hf);font-weight:700;font-size:18px;text-decoration:none;border:0;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}
.pill:hover{transform:translateY(-2px)}
.pill-hv{background:var(--hv);color:#0B0D0F}
.pill-hv:hover{background:#FF8A47}
.pill-ink{background:#0B0D0F;color:#F5F3EE}
.pill-ink:hover{background:#23272B}
.pill-line{border:2px solid #F5F3EE;color:#F5F3EE}
.pill-line:hover{background:#F5F3EE;color:#0B0D0F}
.eyebrow{font-family:var(--hf);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}

/* Opening photo */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;color:#fff;overflow:hidden;background:#17120C}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:44% 50%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.6) 0%,rgba(12,10,8,.42) 34%,rgba(12,10,8,.5) 58%,rgba(12,10,8,.86) 82%,rgba(12,10,8,.92) 100%)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px}
.logo{font-family:var(--hf);font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff;text-decoration:none}
.navlinks{display:flex;align-items:center;gap:30px;font-family:var(--hf);font-weight:500;font-size:16px}
.navlinks a:not(.pill){color:#fff;text-decoration:none}
.topbar .logo{justify-self:start}.nav-call{justify-self:end;min-height:44px;padding:0 20px;font-size:15px}
.hero-mid{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding-top:clamp(20px,3vh,36px);padding-bottom:clamp(24px,4vh,44px)}
.hero h1{margin-top:14px;font-size:clamp(40px,5vw,104px)}
.hero-low{display:flex;flex-direction:column;align-items:center}
.tagline{font-family:var(--hf);font-weight:700;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.01em;line-height:1.3}
.hero-cta{margin-top:16px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;font-family:var(--hf);font-weight:500;font-size:17px}

/* Slider */
.show{background:#0B0D0F;color:#F5F3EE;padding:clamp(60px,7vw,112px) 0}
.show-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
.show h2{font-size:clamp(36px,4.2vw,80px)}
.show-text{margin-top:20px;font-size:clamp(19px,1.4vw,24px);line-height:1.4;color:#D6D2C7;max-width:24em}
.show-note{margin-top:8px;font-size:16px;color:#A5A094}
.show .tabs{justify-content:flex-start;margin-top:26px}
.show .phone{margin:0 0 0 auto}
.tab{background:#1B1F23;color:#F5F3EE}
.tab[aria-pressed="true"]{background:var(--hv);color:#0B0D0F;border-color:var(--hv)}
.ba-chip,.tab,.docket{font-family:var(--hf)}

img{max-width:100%}

/* Before and after phone */
.phone-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{width:min(332px,100%);padding:10px;background:#050607;border:1px solid #454B51;border-radius:46px;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6)}
.ba{--pos:80%;position:relative;height:640px;border-radius:36px;overflow:hidden;background:#0F2F38;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba:focus-within .ba-knob{outline:3px solid #F5F3EE;outline-offset:3px}
.ba-after,.ba-before{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ba-after{z-index:0}
.ba-before{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0);background:#D8D8D8}
.ba-line{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#FF6A13;pointer-events:none}
.ba-knob{position:absolute;z-index:2;top:var(--knob,50%);left:var(--pos);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#FF6A13;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.ba-chip{position:absolute;top:14px;padding:5px 10px;font-size:12px;font-weight:700;letter-spacing:.1em;background:#0B0D0F;color:#F5F3EE;z-index:3}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.old{position:absolute;top:0;left:0;width:640px;height:1300px;transform:scale(.4875);transform-origin:0 0;font-family:'Times New Roman',Times,serif;color:#222;background:#fff}
.oldbtn{background:#d4d0c8;border:2px outset #eee;padding:6px 14px;font:bold 17px Arial,sans-serif;color:#000}
.pen{position:absolute;z-index:2;font-family:'Reenie Beanie','Comic Sans MS',cursive;color:#C8102E;-webkit-text-stroke:.35px #C8102E;line-height:.92;text-shadow:0 0 3px #fff,0 0 3px #fff;white-space:nowrap}
.pen-mark{position:absolute;z-index:2;overflow:visible}
.pipe-stage{position:relative;height:266px;overflow:hidden;background:#14171A}
.pipe-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.pipe-scrim{position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.62) 58%,rgba(0,0,0,0))}
.pipe-name{position:absolute;left:18px;right:18px;top:46px;color:#F6F4EE;font-weight:800;font-stretch:88%;font-size:21px;letter-spacing:-.02em}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:440px}
.tab{font:inherit;font-size:13px;font-weight:700;min-height:44px;padding:0 14px;border:1px solid #454B51;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.tab:hover{border-color:#FF6A13}
.tab:focus-visible{outline:3px solid #F5F3EE;outline-offset:2px}

/* The nephew's quote: a handwritten docket on hi-vis orange */
.joke{position:relative;z-index:3;overflow-x:clip;color:#0B0D0F;background:linear-gradient(112deg,#FF6A13 0 63%,#F15A05 63% 100%)}
.joke-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5vw,76px);align-items:center;padding-top:clamp(72px,8vw,116px);padding-bottom:clamp(72px,8vw,116px)}
.btn-ink{background:#0B0D0F;color:#F5F3EE}
.btn-ink:hover{background:#23272B;color:#FFFFFF}
.docket-wrap{--tilt:3deg;margin-bottom:calc(-1 * clamp(110px,10vw,170px))}
.docket{position:relative;max-width:450px;margin-left:auto;background:#FFFDF5;color:#18213A;padding:30px 28px 24px;transform:rotate(var(--tilt));box-shadow:0 34px 70px rgba(50,16,0,.42),0 3px 6px rgba(50,16,0,.2)}
.docket-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.docket-perf{position:absolute;left:0;right:0;top:10px;border-top:2px dotted #9AA5B5}
.stain{position:absolute;width:128px;height:128px;border-radius:50%;border:7px solid rgba(122,74,22,.17);box-shadow:inset 0 0 0 2px rgba(122,74,22,.07)}
.tape{position:absolute;top:-16px;left:50%;width:128px;height:34px;margin-left:-64px;background:rgba(236,222,178,.82);box-shadow:0 1px 3px rgba(0,0,0,.2);transform:rotate(-2.5deg)}
.d-print{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#4B566B}
.hand{font-family:'Reenie Beanie','Comic Sans MS',cursive;font-weight:400;font-size:31px;line-height:.95;color:#1C3FAA;-webkit-text-stroke:.25px #1C3FAA}
.d-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px solid #BCCADC}
.d-row .hand:last-child{text-align:right}
.stamp{position:absolute;right:14px;top:78px;padding:6px 12px 4px;border:4px solid #C8102E;color:#C8102E;text-align:center;font-weight:800;font-stretch:80%;font-size:34px;line-height:.95;letter-spacing:.03em;transform:rotate(-13deg);opacity:.86;mix-blend-mode:multiply;pointer-events:none}
.stamp small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em}
@keyframes docketIn{from{opacity:0;transform:translateY(70px) rotate(11deg)}to{opacity:1;transform:rotate(var(--tilt))}}
@keyframes stampIn{from{opacity:0;transform:rotate(-13deg) scale(1.9)}to{opacity:.86;transform:rotate(-13deg) scale(1)}}


.joke-text{margin-top:26px;font-size:clamp(20px,1.8vw,25px);line-height:1.3;font-weight:500;max-width:28em}
.docket-wrap{margin-bottom:0}

/* Services and prices, as in the first mockup */
.svcs{background:#0B0D0F;color:#F5F3EE;padding:clamp(60px,7vw,112px) 0}
.svcs h2{font-size:clamp(36px,4.2vw,80px);max-width:12em;margin-top:16px;margin-bottom:clamp(32px,4vw,56px)}
.svcs .eyebrow{color:var(--hv)}
.svc-list{border-bottom:1px solid #33393F}
.svc{display:grid;grid-template-columns:72px minmax(0,1.05fr) minmax(0,1fr) 170px 44px;gap:24px;align-items:center;padding:30px 22px;border-top:1px solid #33393F;color:#F5F3EE;text-decoration:none;transition:background .2s ease,color .2s ease,padding .2s ease}
.svc:hover{background:#FF6A13;color:#0B0D0F;padding-left:32px}
.svc-num,.svc-price{font-family:var(--hf)}
.svc-num{font-weight:600;font-size:15px;letter-spacing:.08em;color:#FF6A13}
.svc:hover .svc-num{color:#0B0D0F}
.svc-name{display:block;font-family:var(--hf);font-weight:var(--hw);font-stretch:var(--hst);font-size:calc(var(--hz) * clamp(26px,2.4vw,44px));line-height:1.04;letter-spacing:var(--hl)}
.svc-text{font-family:var(--bf);font-size:clamp(18px,1.25vw,22px);line-height:1.42;color:#C9CDD1}
.svc:hover .svc-text{color:#0B0D0F}
.svc-price{font-weight:800;font-size:23px;line-height:1.1;letter-spacing:-.01em;color:#FF6A13;text-align:right}
.svc:hover .svc-price{color:#0B0D0F}
.svc-arrow{justify-self:end}


.how{background:var(--paper);color:var(--ink);padding:clamp(60px,7vw,112px) 0 clamp(40px,5vw,70px)}
.how h2{font-size:clamp(36px,4.2vw,80px)}
.how h2 span{color:var(--hv-deep)}
.steps{list-style:none;margin:clamp(40px,5vw,76px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.steps li{position:relative;border-top:3px solid var(--line);padding-top:26px}
.steps li::before{content:"";position:absolute;top:-3px;left:0;width:64px;height:3px;background:var(--hv)}
.steps b{display:block;font-family:var(--hf);font-weight:800;font-size:62px;line-height:1;letter-spacing:-.03em;color:var(--hv-deep)}
.steps h3{margin-top:18px;font-weight:700;font-size:clamp(26px,2.2vw,36px);letter-spacing:-.015em;line-height:1.15}
.steps p{margin-top:8px;color:#3F3B32;font-size:clamp(18px,1.25vw,22px);line-height:1.42}

/* Straight answers */
.catch{background:var(--paper);padding:clamp(40px,5vw,70px) 0 clamp(76px,9vw,140px)}
.catch h2{font-size:clamp(36px,4.2vw,80px)}
.catch .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px)}
.catch dl{margin:0}
.catch dl div{padding:22px 0;border-top:1px solid var(--line)}
.catch dl div:last-child{border-bottom:1px solid var(--line)}
.catch dt{font-weight:700;font-size:23px;line-height:1.2;letter-spacing:-.01em}
.catch dd{margin:8px 0 0;font-size:17px;line-height:1.4;font-weight:600;color:var(--hv-deep)}

/* Contact */
.contact{background:#0B0D0F;color:#F5F3EE}
.contact .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center;padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
.contact h2{font-size:clamp(36px,4.2vw,80px)}
.contact h2 span{color:var(--hv)}
.contact-side{margin-top:22px;font-size:21px;line-height:1.35;color:#D6D2C7}
.contact-phone{margin-top:22px;font-family:var(--hf);font-weight:800;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em}
.form{background:var(--paper);color:var(--ink);padding:clamp(22px,2.6vw,36px);border-radius:14px;display:grid;gap:14px}
.form label{display:grid;gap:6px;font-family:var(--hf);font-weight:600;font-size:15px}
.form input{font:inherit;font-family:var(--bf);min-height:50px;padding:0 15px;border:1px solid #BDB6A6;border-radius:10px;background:#fff}
.form .pill{width:100%;min-height:54px;margin-top:4px}
.form p{font-size:16px;line-height:1.4;color:#3F3B32}

.expect{grid-column:1 / -1;padding-top:clamp(30px,4vw,56px);border-top:1px solid rgba(255,255,255,.2)}
.expect h3{font-family:var(--hf);font-weight:800;font-size:clamp(30px,3vw,52px);letter-spacing:-.03em;line-height:1}
.expect ol{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.expect b{display:block;font-family:var(--hf);font-weight:800;font-size:62px;line-height:1;letter-spacing:-.03em;color:var(--hv)}
.expect h4{margin:18px 0 0;font-weight:700;font-size:clamp(24px,1.9vw,30px);letter-spacing:-.015em;line-height:1.15}
.expect p{margin-top:8px;color:#C9CDD1;font-size:clamp(18px,1.25vw,22px);line-height:1.42}

footer{background:#0B0D0F;color:#C8C3B6;font-size:15px;border-top:1px solid #26282B}
footer .wrap{padding-top:26px;padding-bottom:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px}
footer a{color:#C8C3B6}
footer .gag{flex-basis:100%;color:#A5A094}

.callbar{display:none;position:sticky;bottom:0;z-index:20;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 12px;background:rgba(20,19,15,.94)}
.callbar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-family:var(--hf);font-weight:800;font-size:18px;text-decoration:none}
.cb-call{background:var(--hv);color:#14130F}
.cb-text{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}

@media (max-width:980px){
  .show-grid{grid-template-columns:minmax(0,1fr)}
  .show .tabs{justify-content:center}
  .show .phone{margin:0 auto}
  .show-copy{text-align:center}
  .show-text{margin-left:auto;margin-right:auto}
  .ba{--knob:150px}
  .joke-grid{grid-template-columns:minmax(0,1fr);gap:46px}
  .docket-wrap{--tilt:1.5deg}
  .docket{margin:0 auto;padding:30px 20px 22px}
  .hand{font-size:27px}
  .d-row{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:8px}
  .svc{grid-template-columns:40px minmax(0,1fr);gap:8px 12px;padding:24px 4px;align-items:start}
  .svc-price{grid-column:2;text-align:left;padding-top:4px}
  .svc:hover{padding-left:12px}
  .svc-num{padding-top:9px}
  .svc-text{grid-column:2}
  .svc-arrow{display:none}
  .steps,.expect ol{grid-template-columns:1fr}
  .catch .wrap,.contact .wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:18px}
  .navlinks a:not(.pill){display:none}
  .hero{min-height:calc(100svh - 64px)}
  .hero-mid{padding-top:clamp(24px,5vh,56px)}
  .hero .eyebrow{font-size:12px}
  .eb-more{display:none}
  .hero h1{font-size:clamp(44px,13.4vw,64px)}
  .callbar{display:grid}
}
@media (prefers-reduced-motion:reduce){.docket,.stamp{animation:none !important}}

/* Hi-vis strap: orange cloth, reflective silver, a headlight passing over it */
.hv{position:relative;height:18px;background:#FF6A13;overflow:hidden}
.hv::before{content:"";position:absolute;left:0;right:0;top:4px;height:10px;background-color:#BFC4C8;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 3px,rgba(70,76,82,.26) 3px 6px),repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 3px,rgba(70,76,82,.16) 3px 6px)}
.hv::after{content:"";position:absolute;top:4px;height:10px;width:34%;left:-40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0));animation:headlight 5.5s ease-in-out infinite}
@keyframes headlight{0%{left:-40%}55%,100%{left:110%}}
/* Slanted trades band, sitting across the join between dark and light */
.slant{position:relative;z-index:4;overflow:hidden;background:#0B0D0F;padding:clamp(44px,5.4vw,104px) 0}
.slant-band{width:112%;margin-left:-6%;background:#FF6A13;transform:rotate(-3deg);padding:clamp(14px,1.5vw,26px) 0}
.slant-row{display:flex;width:max-content;animation:run 42s linear infinite}
.slant-row.back{animation-direction:reverse;animation-duration:38s}
.slant-row ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.slant-row li{display:flex;align-items:center;font-family:var(--hf);font-weight:var(--hw);font-stretch:var(--hst);font-size:calc(var(--hz) * clamp(36px,4.6vw,76px));line-height:1.16;letter-spacing:var(--hl);color:#0B0D0F;white-space:nowrap}
.slant-row.back li{color:transparent;-webkit-text-stroke:2px #0B0D0F;letter-spacing:-.005em}
.slant-row li::after{content:"";flex:none;width:.2em;height:.2em;margin:0 .5em;background:#0B0D0F;transform:rotate(45deg)}
@keyframes run{to{transform:translateX(-50%)}}

/* 30-second phone test */
.test-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,3vw,44px);align-items:start}
.q{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px 0;border-top:2px solid #16191C}
.q-num{font-family:var(--hf);font-weight:var(--hw);font-size:30px;line-height:1;color:#A63C08}
.q-text{font-size:clamp(21px,2vw,27px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.q-btns{display:flex;gap:8px}
.yn{font:inherit;font-weight:700;font-size:17px;min-height:48px;min-width:72px;border:2px solid #16191C;cursor:pointer;transition:background .18s ease,color .18s ease}
.yn:focus-visible,.skip:focus-visible{outline:3px solid #FF6A13;outline-offset:2px}
.skip{display:block;background:none;border:0;padding:12px 0;min-height:44px;font:inherit;font-size:17px;font-weight:600;color:#16191C;text-decoration:underline;cursor:pointer}
.score{background:#14171A;color:#F5F3EE;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.score-big{font-size:calc(var(--hz) * clamp(84px,9vw,140px))}
.score-line{margin:0;font-size:22px;font-weight:600;line-height:1.25}
.score .btn{width:100%;padding-left:12px;padding-right:12px;font-size:17px;text-align:center}


/* Claude version additions */
section[id]{scroll-margin-top:64px}
.concept{background:#14130F;color:#C8C3B6;font-family:var(--hf);font-size:12px;text-align:center;padding:6px 16px;line-height:1.3}
.topbar{position:absolute;z-index:30;left:0;right:0;top:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:14px clamp(20px,4.4vw,88px);transition:background .25s ease,padding .25s ease,box-shadow .25s ease}
.topbar.stuck{position:fixed;top:env(safe-area-inset-top,0px);padding-top:9px;padding-bottom:9px;background:rgba(11,13,15,.93);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hero{padding-top:84px}
@keyframes dawn{from{filter:brightness(.42);transform:scale(1.07)}to{filter:brightness(1);transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-photo{animation:dawn 3.4s cubic-bezier(.2,.7,.2,1) both}
.in1,.in2{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.in2{animation-delay:.25s}
.hero-proof{margin-top:16px;font-family:var(--hf);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#E9E4D8}
.stars{color:#FFB000;letter-spacing:.08em}
.ins-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head phone" "ctl phone";column-gap:clamp(36px,6vw,110px);row-gap:26px;align-items:start}
.ins-head{grid-area:head;align-self:end}.ins .phone{grid-area:phone;width:332px;margin:0;justify-self:center}.ins-ctl{grid-area:ctl;max-width:640px}
.ins .tabs{justify-content:flex-start;margin:0;max-width:none}
.ins-card{margin-top:22px;background:#FFFDF5;color:#18213A;padding:22px clamp(18px,2vw,28px);transform:rotate(-.6deg);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ins-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ins-kicker{font-family:var(--hf);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4B566B}
.ins-biz{font-family:var(--hf);font-weight:800;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;line-height:1.1;margin-top:3px}
.ins-stamp{flex:none;font-family:var(--hf);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px 4px;border:3px solid #C8102E;color:#C8102E;transform:rotate(-5deg);transition:color .2s ease,border-color .2s ease}
.ins-card.pass .ins-stamp{color:#1E7A3C;border-color:#1E7A3C}
.ins-list{list-style:none;margin:14px 0 0;padding:0;font-family:var(--hf);font-weight:600;font-size:16px;line-height:1.25}
.ins-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #D5DCE6}
.ins-mark{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FBE3E5;color:#C8102E;transition:background .2s ease,color .2s ease}
.ins-mark .m-t{display:none;line-height:0}.ins-mark .m-x{line-height:0}
.ins-row.ok .ins-mark{background:#DCF3E3;color:#1E7A3C}.ins-row.ok .m-t{display:block}.ins-row.ok .m-x{display:none}
.ins-foot{margin-top:10px;padding-top:10px;border-top:1px solid #D5DCE6;font-size:15px;color:#4B566B}
.stats{background:#0B0D0F;color:#F5F3EE;padding:0 0 clamp(60px,7vw,110px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid #33393F;padding-top:30px}
.stats b{display:block;font-family:var(--hf);font-weight:800;font-size:clamp(32px,3.2vw,60px);line-height:1;letter-spacing:-.03em;color:var(--hv)}
.stats span{display:block;margin-top:8px;color:#C9CDD1;font-size:clamp(16px,1.2vw,20px);line-height:1.3}
.workz{background:var(--paper);padding:clamp(60px,7vw,112px) 0}
.workz .eyebrow,.reviews .eyebrow{color:var(--hv-deep)}
.workz h2,.reviews h2{margin-top:14px;font-size:clamp(36px,4.2vw,80px)}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin-top:clamp(32px,4vw,60px)}
.case img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:10px;display:block}
.case-name{margin-top:16px;font-family:var(--hf);font-weight:700;font-size:17px;line-height:1.25}.case-name span{display:block;font-weight:500;font-size:15px;color:var(--stone)}
.case-stat{margin-top:12px;font-family:var(--hf);font-weight:800;font-size:clamp(36px,3.2vw,60px);line-height:1;letter-spacing:-.03em;color:var(--hv-deep)}
.case-lab{margin-top:4px;font-weight:600;font-size:18px;line-height:1.25}.case-txt{margin-top:10px;color:#3F3B32;font-size:17px;line-height:1.4}
.svc-note{margin-top:20px;color:#C9CDD1;font-size:17px}
.sayit{background:#0B0D0F;color:#F5F3EE;padding:clamp(60px,7vw,112px) 0}
.sl-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,4vw,70px);align-items:center;padding:clamp(24px,3vw,44px) 0;border-top:1px solid #33393F;transition:opacity .35s ease}
.sl-row:last-child{border-bottom:1px solid #33393F}
.sl-row h2{font-size:clamp(44px,6vw,120px);transition:color .35s ease}
.sl-row p{color:#F5F3EE;font-size:clamp(18px,1.25vw,22px);line-height:1.4}
.sayit.live .sl-row h2{color:#5C6268}.sayit.live .sl-row.on h2{color:var(--hv)}
.calc{background:var(--hv);color:#0B0D0F;padding:clamp(60px,7vw,112px) 0}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,90px);align-items:center}
.calc h2{margin-top:14px;font-size:clamp(36px,4.2vw,80px)}
.calc-l{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:26px;font-family:var(--hf);font-weight:700;font-size:18px}
.calc-l output{font-weight:800}.calc-l input{grid-column:1 / -1;width:100%;min-height:32px;accent-color:#0B0D0F}
.calc-out{background:#0B0D0F;color:#F5F3EE;padding:clamp(24px,3vw,44px);border-radius:14px}
.calc-lab{font-family:var(--hf);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#C9CDD1}
.calc-big{font-family:var(--hf);font-weight:800;font-size:clamp(44px,4.4vw,80px);line-height:1;letter-spacing:-.03em;margin:6px 0 18px;font-variant-numeric:tabular-nums}.calc-us{color:var(--hv)}
.calc-save{font-size:clamp(19px,1.5vw,24px);padding-top:14px;border-top:1px solid #33393F}
.testsec{background:var(--paper);color:#16191C;padding:clamp(60px,7vw,112px) 0}
.testsec h2{font-size:clamp(36px,4.2vw,80px)}.test-sub{margin:16px 0 clamp(26px,3vw,44px);font-size:clamp(19px,1.6vw,26px);color:#3F4449}
.yn{background:#fff;color:#0B0D0F;border-radius:999px;font-family:var(--hf)}.yn.y{background:var(--hv)}.yn.n{background:#16191C;color:#F5F3EE}
.skip{font-family:var(--hf)}.score{border-radius:14px}.score-big{font-size:clamp(64px,6vw,104px);margin:0}.score .pill{width:100%;padding:0 12px;font-size:17px;text-align:center}.score .pill[hidden]{display:none}
.reviews{background:#fff;color:var(--ink);padding:clamp(60px,7vw,112px) 0}
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,32px);margin-top:clamp(32px,4vw,56px)}
.rev{margin:0;background:var(--paper);padding:clamp(22px,2.2vw,34px);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.rev blockquote{margin:0;flex:1;font-size:clamp(19px,1.45vw,24px);line-height:1.35;font-weight:500}
.rev figcaption{font-family:var(--hf);font-size:15px;color:var(--stone)}.rev figcaption b{display:block;color:var(--ink);font-weight:700}
.rev-note{margin-top:18px;font-size:14px;color:var(--stone)}
.how2{background:#0B0D0F;color:#F5F3EE;padding:clamp(60px,7vw,112px) 0}
.how2 h2{font-size:clamp(36px,4.2vw,80px)}.how2 h2 span{color:var(--hv)}
.steps2{list-style:none;margin:clamp(40px,5vw,76px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.steps2 li{position:relative;border-top:3px solid #33393F;padding-top:26px}.steps2 li::before{content:"";position:absolute;top:-3px;left:0;width:64px;height:3px;background:var(--hv)}
.steps2 b{display:block;font-family:var(--hf);font-weight:800;font-size:48px;line-height:1;color:var(--hv)}
.steps2 h3{margin-top:18px;font-weight:700;font-size:clamp(25px,2vw,34px);line-height:1.15;letter-spacing:-.015em}.steps2 p{margin-top:8px;color:#C9CDD1;font-size:clamp(18px,1.25vw,22px);line-height:1.42}
.catch2{background:var(--paper);padding:clamp(60px,7vw,112px) 0}
.catch2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px)}
.catch2 h2{font-size:clamp(36px,4.2vw,80px)}
.catch2 details{border-top:1px solid var(--line);padding:18px 0}.catch2 details:last-child{border-bottom:1px solid var(--line)}
.catch2 summary{cursor:pointer;font-weight:700;font-size:clamp(21px,1.7vw,27px);line-height:1.25;letter-spacing:-.01em}
.catch2 summary::marker{color:var(--hv-deep)}.catch2 details p{margin:10px 0 0 22px;color:#3F3B32}
.contact a{color:inherit}.mail{text-underline-offset:3px}
.form input.bad{border:2px solid #C8102E}
.form p.good{font-weight:600;color:#1E7A3C}
.foot{background:#0B0D0F;color:#C8C3B6;font-size:15px;border-top:1px solid #26282B;overflow:hidden}
.foot .wrap{padding-top:clamp(30px,4vw,60px);padding-bottom:26px}
.foot-mark{font-family:var(--hf);font-weight:800;letter-spacing:-.045em;line-height:.9;font-size:clamp(56px,11vw,220px);color:#1A1D21;white-space:nowrap}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;margin-top:22px}.foot-links{display:flex;gap:18px}.foot a{color:#C8C3B6}
.gag{margin-top:8px;color:#A5A094}
@media (max-width:980px){
  .ins-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "phone" "ctl";justify-items:center}
  .ins-head{text-align:center}.ins .phone{width:min(332px,100%);margin:0 auto}.ins-ctl{width:100%;max-width:520px}.ins .tabs{justify-content:center}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cases,.rev-grid,.steps2,.sl-row,.calc-grid,.catch2-grid{grid-template-columns:minmax(0,1fr)}
  .test-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .topbar{grid-template-columns:minmax(0,1fr) auto}.navlinks{display:none}.nav-call{font-size:14px;min-height:42px;padding:0 14px;white-space:nowrap}
  .hero{min-height:calc(100svh - 64px)}
  .hero-proof{font-size:13px}
  .concept{font-size:11px;padding:5px 10px}
  .q{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:18px 0}.q-btns{grid-column:1 / -1}.yn{flex:1}
}
@media (prefers-reduced-motion:reduce){.hero-photo,.in1,.in2,.rv,.case,.rev,.stats-grid>div,.slant-row,.hv::after{animation:none !important}}

/* Small section numbers */
.sn{display:block;margin:0 0 12px;font-family:var(--hf);font-weight:700;font-size:14px;letter-spacing:.14em;color:var(--hv);font-variant-numeric:tabular-nums}
.eyebrow .sn{display:inline;margin:0 14px 0 0}
.workz .sn,.testsec .sn,.reviews .sn,.catch2 .sn{color:var(--hv-deep)}
.joke .sn,.calc .sn{color:#0B0D0F}
.sayit .sn{margin-bottom:22px}
/* Section labels bigger site-wide (14 Nov 2026: they were too small next to the rest of the text) */
.sn,.eyebrow{font-size:clamp(16px,1.25vw,20px);letter-spacing:.12em}

/* Movement: things rise into place as they scroll into view (every browser; off for Reduce motion) */
.js-rv .rv{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-rv .rv.in{opacity:1;transform:none}
.js-rv .docket{opacity:0;transform:translateY(90px) rotate(12deg);transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.8,.2,1)}
.js-rv .docket-wrap.in .docket{opacity:1;transform:rotate(var(--tilt))}
.js-rv .stamp{opacity:0;transform:rotate(-13deg) scale(2.1);transition:opacity .2s ease 1s,transform .4s cubic-bezier(.3,1.5,.5,1) 1s}
.js-rv .docket-wrap.in .stamp{opacity:.86;transform:rotate(-13deg) scale(1)}
.js-rv .ins-card{transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-rv .ins-card.rv.in{transform:rotate(-.6deg)}
.topbar{animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s both}
@media (prefers-reduced-motion:reduce){.topbar{animation:none}}
.js-rv .svc.rv{transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),background .2s ease,color .2s ease,padding .2s ease}


/* Logo (option B, 8 Nov): orange X like a cross brace; an orange glint sweeps through "Digital" every few seconds */
.logo .lx{color:var(--hv)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .logo .ld{background:linear-gradient(100deg,#fff 0%,#fff 40%,#FFC08F 46%,#FF6A13 50%,#FFC08F 54%,#fff 60%,#fff 100%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:glint 4.8s ease-in-out 1.8s infinite}
}
@keyframes glint{0%{background-position:100% 0}58.33%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.logo .ld{animation:none}}

/* Opening video: sketch turns into the real house (approved 9 Nov 2026) */
.hero-video{object-position:50% 50%;animation:none}
/* The sketch shows from the very first paint (paper colour first, then the sketch), before the video is ready */
.hero{background:#F4F0DF url(images/hero-start-desktop.webp) 50% 50%/cover no-repeat}
@media (max-width:760px){.hero{background-image:url(images/hero-start-phone.webp)}}
@media (prefers-reduced-motion:reduce){.hero{background:#17120C url(images/hero-end-desktop.jpg) 50% 50%/cover no-repeat}}
@media (prefers-reduced-motion:reduce) and (max-width:760px){.hero{background-image:url(images/hero-end-phone.jpg)}}
.hero-shade{background:linear-gradient(180deg,rgba(12,10,8,.55) 0%,rgba(12,10,8,.18) 32%,rgba(12,10,8,0) 48%,rgba(12,10,8,.15) 66%,rgba(12,10,8,.7) 88%,rgba(12,10,8,.82) 100%)}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
@media (max-width:760px){
  .hero-mid{padding-top:0}
  .hero h1{margin-top:8px}
}

/* Menu button and full-screen menu (approved 9 Nov 2026): tablets and phones get a Menu button instead of the row of links */
.top-right{justify-self:end;display:flex;align-items:center;gap:10px}
.nav-call{white-space:nowrap}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);color:#fff;font-family:var(--hf);font-weight:800;font-size:15px;cursor:pointer}
.menu-btn i,.cb-menu i{display:block;width:18px;height:2px;margin:0 2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.menu-btn:hover{background:rgba(255,255,255,.2)}
.menu{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow-y:auto;padding:calc(16px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));background:#0B0D0F;color:#fff}
.menu[hidden]{display:none}
.menu.in{animation:menuIn .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.menu-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.menu-x{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-family:var(--hf);font-weight:800;font-size:15px;cursor:pointer}
.menu nav{display:flex;flex-direction:column;margin:34px 0 28px}
.menu nav a{color:#fff;text-decoration:none;font-family:var(--hf);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-size:clamp(32px,9vw,56px);padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu nav a span{color:var(--hv);font-size:.45em;vertical-align:.6em;margin-right:12px;letter-spacing:0}
.menu nav a:hover,.menu nav a:focus-visible{color:var(--hv)}
.menu-cta{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;width:100%}
.menu-cta a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;font-family:var(--hf);font-weight:800;font-size:18px;text-decoration:none}
.menu-cta .m-call{background:var(--hv);color:#14130F}
.menu-cta .m-text{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.menu-cta small{grid-column:1/-1;text-align:center;font-family:var(--hf);font-size:14px;opacity:.7;margin-top:4px}
html.menu-open{overflow:hidden}
.cb-menu{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-family:var(--hf);font-weight:800;font-size:18px;cursor:pointer}
.cb-menu i{width:16px;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
@media (max-width:980px){
  .topbar{grid-template-columns:minmax(0,1fr) auto}
  .navlinks{display:none}
  .menu-btn{display:flex}
}
/* About link added 14 Nov 2026: tighter link spacing on small laptops/tablets landscape so the row clears the Call button */
@media (min-width:981px) and (max-width:1180px){.navlinks{gap:20px}}
@media (min-width:981px) and (max-width:1060px){.navlinks{gap:14px}.topbar .nav-call{padding:0 16px;font-size:14px}}
@media (max-width:760px){
  .topbar .nav-call{display:none}
  .callbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
}
@media (prefers-reduced-motion:reduce){.menu.in{animation:none}}

/* Hero layout, idea 4 (approved 9 Nov 2026): location above the headline, italic slogan right under it, button and price at the bottom. Nothing sits over the house. */
.hero-where{margin:6px 0 0;font-family:var(--hf);font-weight:800;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#FF8A3D;text-shadow:0 0 2px rgba(12,10,8,.85),0 1px 3px rgba(12,10,8,.7),0 1px 14px rgba(12,10,8,.6)}
.hero h1{margin-top:8px}
.hero .tagline{margin:14px 0 0;font-weight:700;font-style:italic;font-size:clamp(20px,1.9vw,30px);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero-cta{margin-top:0}
/* Shorter laptop screens: headline and slogan shrink with the screen height so they stay above the roof */
@media (min-width:761px){.hero{padding-top:72px}.hero-mid{padding-top:clamp(6px,1.4vh,24px)}.hero h1{font-size:clamp(40px,min(5vw,7.5vh),104px)}.hero .tagline{margin-top:min(14px,1.3vh);font-size:clamp(18px,min(1.9vw,3vh),30px)}}
@media (max-width:760px){
  .hero-mid{padding-top:0}
  .hero-where{margin-top:2px;font-size:11px;letter-spacing:.06em}

  .hero h1{margin-top:6px;font-size:clamp(34px,10vw,44px)}
  .hero .tagline{margin-top:10px;font-size:18px}
}
/* Headline always on two lines on bigger screens (9 Nov 2026) */
@media (min-width:761px){.hero h1{max-width:13em;margin-left:auto;margin-right:auto}}
@media (min-width:761px) and (min-aspect-ratio:19/10){.hero h1{font-size:clamp(40px,6.5vh,104px)}}
/* Slogan and price: white, in the site's serif font, italic (picked B and 1, 9 Nov 2026) */
.hero .tagline{font-family:var(--bf);font-style:italic;font-weight:600;letter-spacing:0;font-size:clamp(21px,min(2.1vw,3.3vh),32px)}
.hero-price{font-family:var(--bf);font-style:italic;font-weight:600;font-size:20px}
@media (max-width:760px){.hero .tagline{font-size:20px}}
/* Location line: one line on computers; on phones it stacks as two lines (Websites for Australian tradies / Based in Melbourne) */
.hero-where .ph-br{display:none}
@media (max-width:760px){.hero-where .ph-br{display:inline}.hero-where .dot{display:none}.hero-where{line-height:1.45}}
.hero h1 .nb{white-space:nowrap}
@media (max-width:760px){.hero-cta{flex-direction:column}}
/* Hero button in capitals (10 Nov 2026: "C for now"). Written normally in the page, shown in capitals by style. */
.hero-btn{text-transform:uppercase;letter-spacing:.02em}
/* Hero: 'too good' in serif italic (10 Nov); slogan one line on small phones */
.hero h1 .tg{font-family:var(--bf);font-style:italic;font-weight:800;letter-spacing:-.01em}
@media (max-width:383px){.hero .tagline{font-size:18px}}
/* Section 01 fixes (10 Nov): trade buttons in the button font; Before/After labels above the phone */
.tab{font-family:var(--hf)}
.ins .phone{position:relative}
.ba-labels{position:absolute;left:18px;right:18px;top:-34px;display:flex;justify-content:space-between;font-family:var(--hf);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.ba-labels span{color:#5C6268;transition:color .25s ease}.ba-labels span.on{color:#F5F3EE}.ba-labels .l-a.on{color:#FF6A13}
@media (max-width:980px){.ins .phone{margin-top:44px}}
/* Section 01 AFTER side: example tradie website that scrolls itself (10 Nov 2026). Screen is about 312 x 640. */
.ba-after{background:#F6F4EE}
.as-screen{position:absolute;inset:0;overflow:hidden;font-family:var(--hf);color:#10282F;background:#F6F4EE}
.as-page{position:absolute;left:0;right:0;top:0;padding-top:50px;will-change:transform}
.as-top{position:absolute;z-index:3;left:0;right:0;top:0;height:50px;padding:0 12px 0 16px;display:flex;align-items:center;gap:8px;background:var(--t-head);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.as-logo{font-weight:800;font-size:15px;letter-spacing:-.02em;white-space:nowrap}.as-logo b{color:var(--t-accent);font-weight:800}
.as-open{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#CFE3D3;letter-spacing:.02em}
.as-open i{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:as-pulse 1.8s ease-out infinite}
@keyframes as-pulse{to{box-shadow:0 0 0 7px rgba(61,220,132,0)}}
.as-callic{width:32px;height:32px;border-radius:50%;background:var(--t-btn);color:var(--t-btnText);display:flex;align-items:center;justify-content:center}

.as-hero{position:relative;height:430px;overflow:hidden;background:var(--t-head)}
.as-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:as-zoom 14s ease-in-out infinite alternate}
@keyframes as-zoom{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.as-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,24,.15) 0%,rgba(8,20,24,.35) 35%,rgba(8,20,24,.92) 72%)}
.as-hero-txt{position:absolute;z-index:1;left:16px;right:16px;bottom:18px;color:#fff}
.as-eyebrow{margin:0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-accent)}
.as-hero .as-h3{text-wrap:balance;margin:6px 0 0;font-size:30px;line-height:1.02;font-weight:800;letter-spacing:-.03em}
.as-sub{margin:8px 0 12px;font-size:13px;line-height:1.35;color:#DCE6E8}
.as-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:999px;font-weight:700;font-size:15px}
.as-btn-main{background:var(--t-btn);color:var(--t-btnText)}
.as-btn-ghost{margin-top:8px;border:2px solid rgba(255,255,255,.75);color:#fff;min-height:40px;font-size:14px}

.as-trust{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.08)}
.as-trust div{background:var(--t-head);color:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.as-trust b{font-size:15px;font-weight:800;letter-spacing:-.01em}.as-trust span{font-size:11px;color:#B9CBD0}
.as-stars{color:#FFB400;letter-spacing:1px;font-size:.85em}

.as-sec{padding:26px 16px 28px}
.as-alt{background:#ECE8DD}
.as-dark{background:var(--t-head);color:#fff}
.as-kick{margin:0;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t-btn)}
.as-dark .as-kick{color:var(--t-accent)}
.as-sec .as-h4{text-wrap:balance;margin:5px 0 14px;font-size:22px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.as-svcs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.as-svcs div{background:#fff;border-radius:12px;padding:12px;font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 0 rgba(16,40,47,.08)}
.as-svcs svg{width:24px;height:24px;fill:none;stroke:var(--t-btn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.as-jobs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.as-jobs figure{margin:0;position:relative;border-radius:12px;overflow:hidden;height:120px;background:#ccc}
.as-jobs img{width:100%;height:100%;object-fit:cover;display:block}
.as-jobs figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.as-jobs figcaption span{display:block;font-weight:500;color:#DDE5E7;font-size:10px}
.as-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.as-steps li{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:12px;padding:12px}
.as-steps b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--t-btn);color:var(--t-btnText);display:flex;align-items:center;justify-content:center;font-weight:800}
.as-steps span{font-size:12.5px;line-height:1.35;color:#3F5158}.as-steps strong{display:block;font-size:14px;color:#10282F}
.as-score{display:flex;align-items:center;gap:12px;margin:6px 0 14px}
.as-score b{font-size:46px;line-height:1;font-weight:800;letter-spacing:-.04em}
.as-score>span{display:flex;flex-direction:column;font-size:11px;color:#B9CBD0}.as-score .as-stars{font-size:18px}
.as-revs{display:flex;flex-direction:column;gap:10px}
.as-revs blockquote{margin:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;font-size:13px;line-height:1.4}
.as-revs cite{display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:700;color:var(--t-accent)}
.as-map{background:#EEF2F1;border-radius:14px;overflow:hidden}.as-map svg{display:block;width:100%;height:auto}
.as-form{display:flex;flex-direction:column;gap:8px}
.as-form>span{background:#fff;border:1px solid #D6D0C2;border-radius:10px;padding:11px 12px;font-size:12px;color:#7A8486}
.as-form .as-tall{height:64px}
.as-form p{margin:2px 0 0;font-size:11px;color:#5D6A6C;text-align:center}
.as-foot{background:#0B1417;color:#B9CBD0;padding:22px 16px 80px}
.as-foot .as-logo{color:#fff}.as-foot p{margin:8px 0 0;font-size:12px;line-height:1.6}
.as-callbar{position:absolute;z-index:3;left:10px;right:10px;bottom:12px;display:flex;gap:8px;transform:translateY(90px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.as-callbar span{flex:1;min-height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:var(--t-btn);color:var(--t-btnText);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.as-callbar .as-callbar-q{background:#fff;color:#10282F}
.as-screen.as-past-hero .as-callbar{transform:none}
.as-rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.as-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.as-hero-img,.as-open i{animation:none}.as-rv{opacity:1;transform:none}}
.as-hero .as-btn-main,.as-top .as-callic{background:var(--t-hbtn,var(--t-btn));color:var(--t-hbtnText,var(--t-btnText))}

/* Numbers strip: hand-marked sentence (picked A over a giant ticker, 11 Nov). */
.sx{background:#0B0D0F;color:#F5F3EE}
.sx[hidden]{display:none}
.sx-a{padding:clamp(70px,8vw,130px) 0 clamp(80px,9vw,140px)}
.sx-a-in{position:relative}
.sx-a-line{margin:0;max-width:21ch;font-family:var(--hf);font-weight:800;font-size:clamp(36px,5.2vw,92px);line-height:1.1;letter-spacing:-.035em;color:#F5F3EE}
.sx-a .nw{white-space:nowrap}
.mk{position:relative;display:inline-block;color:#FF6A13}
.mk svg{position:absolute;overflow:visible;fill:none;stroke:#FF6A13;stroke-width:3.5;stroke-linecap:round;pointer-events:none}
.mk path,.sx-a-note path{stroke-dasharray:1;stroke-dashoffset:0}
.mk-c svg{left:-14%;top:-18%;width:128%;height:136%}
.mk-u svg{left:0;bottom:-.24em;width:100%;height:.3em}
.mk-s svg{left:-4%;bottom:-.08em;width:108%;height:.35em}
.mk-b{color:#F5F3EE;background:linear-gradient(transparent 58%,rgba(255,106,19,.55) 58%,rgba(255,106,19,.55) 92%,transparent 92%) no-repeat 0 0/100% 100%}
.sx-a-note{position:absolute;right:clamp(16px,6vw,140px);bottom:-18px;margin:0;font-family:'Reenie Beanie',cursive;font-size:clamp(30px,2.6vw,44px);line-height:1;color:#FF6A13;transform:rotate(-4deg)}
.sx-a-note svg{position:absolute;left:-70px;top:-46px;width:62px;height:42px;fill:none;stroke:#FF6A13;stroke-width:2.5;stroke-linecap:round}
/* pen marks draw themselves when the line comes into view */
.js-sx .sx-a .mk path,.js-sx .sx-a-note path{stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.6,0,.3,1)}
.js-sx .sx-a .mk-b{background-size:0 100%;transition:background-size .7s cubic-bezier(.6,0,.3,1)}
.js-sx .sx-a-note{opacity:0;transition:opacity .5s ease}
.js-sx .sx-a.in .mk-c path{stroke-dashoffset:0;transition-delay:.2s}
.js-sx .sx-a.in .mk-u path{stroke-dashoffset:0;transition-delay:.7s}.js-sx .sx-a.in .mk-u path+path{transition-delay:.95s}
.js-sx .sx-a.in .mk-b{background-size:100% 100%;transition-delay:1.25s}
.js-sx .sx-a.in .mk-s path{stroke-dashoffset:0;transition-delay:1.75s}
.js-sx .sx-a.in .sx-a-note{opacity:1;transition-delay:2.3s}.js-sx .sx-a.in .sx-a-note path{stroke-dashoffset:0;transition-delay:2.4s}
@media (max-width:760px){.sx-a{padding:56px 0 64px}.sx-a-line{font-size:clamp(30px,9vw,40px)}.sx-a-note{position:static;margin:22px 0 0 auto;width:max-content;font-size:30px}.sx-a-note svg{display:none}.mk svg{stroke-width:3}}
@media (prefers-reduced-motion:reduce){.js-sx .sx-a .mk path,.js-sx .sx-a-note path{stroke-dashoffset:0}.js-sx .sx-a .mk-b{background-size:100% 100%}.js-sx .sx-a-note{opacity:1}}
@media (max-width:1100px){.sx-a-note svg{display:none}}


/* Section 04 option B (11 Nov): the services list, each row opens to show what's in it. Without JS every row shows open. */
.svc-sm{display:block;margin-top:6px;font-family:var(--bf);font-weight:400;font-style:italic;font-size:16px;line-height:1.3;color:#C9CDD1;letter-spacing:0}
.svc:hover .svc-sm{color:#0B0D0F}
button.svc{width:100%;margin:0;background:none;border:0;border-top:1px solid #33393F;text-align:left;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
button.svc:focus-visible{outline:3px solid #FF6A13;outline-offset:-3px}
.svc-plus{justify-self:end;position:relative;width:30px;height:30px;flex:none}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:2px;margin:-1px 0 0 -13px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc-plus::after{transform:rotate(90deg)}
.svcb.open .svc-plus::after{transform:rotate(0)}
.svcb.open .svc{background:#FF6A13;color:#0B0D0F}
.svcb.open .svc-num,.svcb.open .svc-text,.svcb.open .svc-price,.svcb.open .svc-sm{color:#0B0D0F}
.svc-drop{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.js-acc .svcb:not(.open) .svc-drop{grid-template-rows:0fr}
.svc-din{overflow:hidden;min-height:0}
.svc-dpad{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 40px;align-items:end;padding:28px 22px 34px calc(72px + 24px + 22px);background:#15181B;border-top:3px solid #FF6A13}
.svc-dh{grid-column:1/-1;font-family:var(--hf);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#FF6A13}
.svc-dpad ul{margin:0;padding:0;list-style:none;columns:2;column-gap:40px;color:#F5F3EE;font-size:19px;line-height:1.4}
.svc-dpad li{break-inside:avoid;padding:6px 0 6px 26px;position:relative}
.svc-dpad li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:7px;border-left:2.5px solid #FF6A13;border-bottom:2.5px solid #FF6A13;transform:rotate(-45deg)}
@media (max-width:980px){
  .svc{position:relative}
  .svc-name{padding-right:40px}
  .svc-plus{position:absolute;top:24px;right:4px;width:26px;height:26px}
  .svc-plus::before,.svc-plus::after{width:20px;margin-left:-10px}
  .svcb.open .svc{padding-left:12px}
  .svc-dpad{display:block;padding:20px 12px 26px 56px}
  .svc-dpad ul{columns:1}
  .svc-dpad .pill{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.svc-drop,.svc-plus::before,.svc-plus::after{transition:none}}

/* Numbers strip (11 Nov): "No lock-in contracts" is longer, so the note now hangs off the end of "100% yours." (inside that span) and its arrow always points at it. */
.sx-a-yours{position:relative}
.sx-a-line .sx-a-note{position:absolute;left:calc(100% + 72px);top:calc(50% + 12px);right:auto;bottom:auto;white-space:nowrap;font-weight:400;letter-spacing:normal}
@media (max-width:760px){.sx-a-line .sx-a-note{position:static;display:block;margin:22px 0 0 auto;width:max-content}}

/* Section 04 on phones and tablets (11 Nov, iPhone check): even space inside every row so open (orange) rows don't run to the edge; ticks, label and button line up with the row's words. */
@media (max-width:980px){
  .svc,.svc:hover,.svcb.open .svc{padding:24px 16px}
  .svc-plus{right:16px}
  .svc-dpad{padding:22px 16px 28px 42px}
  .svc-dh{padding-left:26px}
  .svc-dpad .pill{margin-left:26px}
}


/* Section 06 calculator, option C (11 Nov): care plan switch, on to start */
.calc-small{font-size:15px;line-height:1.4;color:#9DA3A8;margin:-8px 0 16px}
.calc-tog{display:flex;align-items:center;gap:12px;margin:2px 0 18px;padding:0;background:none;border:0;font-family:var(--hf);font-weight:700;font-size:16px;line-height:1.3;color:#F5F3EE;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.calc-tog i{position:relative;width:46px;height:26px;border-radius:99px;background:#3A4046;flex:none;transition:background .2s ease}
.calc-tog i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#F5F3EE;transition:left .2s ease,background .2s ease}
.calc-tog[aria-checked="true"] i{background:#FF6A13}
.calc-tog[aria-checked="true"] i::after{left:23px;background:#0B0D0F}
.calc-tog:focus-visible{outline:3px solid #FF6A13;outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.calc-tog i,.calc-tog i::after{transition:none}}


/* Section 07 Reviews, option B (12 Nov): sells the feature "your Google reviews on your site", shown with the made-up Wattlebird Plumbing.
   Google's rules (partnermarketinghub.withgoogle.com, checked 12 Nov): reviewer's consent first; no homemade Google logos; no stars next to the Google name. */
.rev-lede{margin-top:18px;max-width:34em;font-size:clamp(19px,1.5vw,24px);line-height:1.4;color:#3F4449}
.rev-tag{display:inline-block;margin-top:18px;padding:4px 12px;border-radius:99px;background:var(--paper);font-family:var(--hf);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.rev-stars{color:#A65A00;letter-spacing:2px;font-size:18px;line-height:1}

/* Trades band (12 Nov): sit it halfway between "No GST added..." and the white Reviews section. Same total space as before, split evenly; +/-7.5px makes up for the note's own line spacing. */
.svcs{padding-bottom:0}
.slant{padding-top:calc((clamp(60px,7vw,112px) + 2*clamp(44px,5.4vw,104px))/2 + 7.5px);padding-bottom:calc((clamp(60px,7vw,112px) + 2*clamp(44px,5.4vw,104px))/2 - 7.5px)}

/* Section 08 How it works, option B (12 Nov): 4 steps; each step's orange line fills on a timer, 1 > 2 > 3 > 4, then starts again. */
.steps2.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.steps2.four{grid-template-columns:minmax(0,1fr)}}
.steps2 li::before{transition:width .7s cubic-bezier(.2,.7,.2,1)}
.how2.live .steps2 li.on::before{width:100%}
@media (prefers-reduced-motion:reduce){.steps2 li::before{transition:none}}

/* Section 10 Contact (12 Nov): the house from the opening video comes back behind it, darkened so the words stay readable. The form keeps its cream box. */
.contact{background:linear-gradient(90deg,rgba(11,13,15,.76) 0 42%,rgba(11,13,15,.28)),#0B0D0F url(images/hero-end-desktop.jpg) 50% 60%/cover no-repeat}
@media (max-width:760px){.contact{background:linear-gradient(180deg,rgba(11,13,15,.4),rgba(11,13,15,.72) 55%),#0B0D0F url(images/hero-end-phone.jpg) 50% 30%/cover no-repeat}}

/* Section 08 Hills hoist band (12 Nov): looping Flow clip of hi-vis washing behind "Have a squiz. Then make the call." Steps sit below. */
.how2{padding-top:0}
.how-band{position:relative;height:min(72vh,640px);overflow:hidden;background:#0B0D0F;margin-bottom:clamp(40px,5vw,76px)}
.how-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.how-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,15,0) 38%,rgba(11,13,15,.72) 80%,#0B0D0F),linear-gradient(90deg,rgba(11,13,15,.45),rgba(11,13,15,0) 55%)}
.how-band-text{position:absolute;left:0;right:0;bottom:clamp(18px,3vw,40px);z-index:1}
.how2 .steps2{margin-top:0}
@media (max-width:760px){.how-band{height:auto;aspect-ratio:5/6}.how-vid{object-position:50% 50%}}

/* Section 08 on phones (12 Nov): brighter. Lighter shade that only starts low down behind the headline, no side shade, clip brightened a touch. */
@media (max-width:760px){
  .how-band::after{background:linear-gradient(180deg,rgba(11,13,15,0) 60%,rgba(11,13,15,.55) 84%,#0B0D0F)}
  .how-vid{filter:brightness(1.14) saturate(1.06)}
}

/* Section 09 What's the catch? option B (12 Nov): all answers on show, orange ticks draw in on a loop */
.cb-note{display:inline-block;margin:14px 0 0;font-family:'Reenie Beanie',cursive;font-size:clamp(30px,2.6vw,44px);line-height:1;color:var(--hv);transform:rotate(-4deg)}
.cb-i{position:relative;padding:22px 0 22px 58px;border-top:1px solid var(--line)}
.cb-i:last-child{border-bottom:1px solid var(--line)}
.cb-i h3{margin:0;font-family:var(--hf);font-weight:800;font-size:clamp(21px,1.7vw,27px);line-height:1.25;letter-spacing:-.01em}
.cb-i p{margin:8px 0 0;font-size:19px;color:#3F3B32}
.ct{position:absolute;left:0;top:20px;width:38px;height:38px;fill:none;stroke:var(--hv);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ct path{stroke-dasharray:1;stroke-dashoffset:0}
.catch2.live .ct path{stroke-dashoffset:1;transition:stroke-dashoffset .25s ease}
.catch2.live .cb-i.on .ct path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.3,.6,.2,1)}

/* Section 10 Contact, option B (12 Nov): big Call and Email buttons, no personal name on the site. Full-width buttons on phones. */
.ct-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ct-btns .pill{min-height:54px;padding:0 24px;display:inline-flex;align-items:center;font-size:17px;text-decoration:none}
.ct-ghost{border:1.5px solid #F5F3EE;color:#F5F3EE!important;background:transparent}
.ct-ghost:hover{border-color:var(--hv);color:var(--hv)!important}
@media (max-width:760px){.ct-btns .pill{width:100%;justify-content:center}}

/* Contact background made lighter (picked 2, 12 Nov): the two .contact background rules above were lightened from .92/.55 (computer) and .6/.9 (phone). */
/* Section 09 monogram (picked B, 12 Nov): solid "RXG", very faint, running off the bottom-left of the section, behind everything. Computer only: on phones and tablets the heading stacks above the answers, so there's no empty space. */
.catch2{position:relative;overflow:hidden}
.catch2 .wrap{position:relative;z-index:1}
.cb-mono{position:absolute;left:-.06em;bottom:-.2em;font-family:var(--hf);font-weight:800;font-size:clamp(220px,23vw,400px);line-height:.8;letter-spacing:-.05em;color:rgba(20,19,15,.045);pointer-events:none;user-select:none;white-space:nowrap}
.cb-mono span{color:rgba(255,106,19,.13)}
@media (max-width:980px){.cb-mono{display:none}}

/* Footer, option B (12 Nov): three columns (logo, pages, get in touch), then ABN and legal links, then the big wordmark running off the bottom. Stacks on phones. */
.foot .wrap{display:block}
.fb-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px 40px;padding-bottom:26px;border-bottom:1px solid #26282B}
.fb-grid>div,.fb-grid>nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fb-logo{font-family:var(--hf);font-weight:800;font-size:28px;letter-spacing:-.02em;color:#fff;margin:0}.fb-logo .lx{color:var(--hv)}
.fb-tag{margin:6px 0 0;font-size:17px;line-height:1.4;color:#C8C3B6}
.fb-h{margin:0 0 4px;font-family:var(--hf);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--hv)}
.foot .fb-grid a{color:#F5F3EE;text-decoration:none;font-family:var(--hf);font-weight:600;font-size:16px}.foot .fb-grid a:hover{color:var(--hv)}
.foot .fb-grid a.fb-call{font-size:22px;font-weight:800}
.foot .foot-row{margin-top:18px}.foot .foot-links{gap:18px}
.foot .foot-mark{margin:30px 0 0;color:#1E2226}.foot .foot-mark .lx{color:rgba(255,106,19,.55)}
.foot .wrap{padding-bottom:clamp(28px,3vw,48px)} /* whole wordmark shows, incl. the tail of the g (12 Nov: it looked cut off) */
@media (max-width:980px){.fb-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:760px){.fb-grid{grid-template-columns:minmax(0,1fr)}}

/* Privacy and Terms pages, layout B (12 Nov): dark title band, then an "On this page" list that stays in view on computers, and one readable column. Built from legal/*.md by drafts/tools/legal-pages/build_legal.py. */
body.lg{background:var(--paper)}
.lg .topbar{position:sticky;top:0;background:#0B0D0F;animation:none}
.lg-head{background:#0B0D0F;color:#F5F3EE;padding:clamp(40px,6vw,96px) 0 clamp(36px,5vw,72px)}
.lg-head h1{margin:0;font-family:var(--hf);font-weight:800;font-size:clamp(44px,6vw,104px);line-height:.95;letter-spacing:-.035em}
.lg-head p{margin:16px 0 0;color:#B9B4A8;font-size:17px}
.lg-body{padding:clamp(40px,5vw,80px) 0 clamp(60px,7vw,110px)}
.lg-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.lg-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:9px;padding-top:30px}
.lg-toc p{margin:0 0 6px;font-family:var(--hf);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--hv-deep)}
.lg-toc a{font-family:var(--hf);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;border-left:2px solid var(--line);padding-left:12px}
.lg-toc a:hover{border-left-color:var(--hv);color:var(--hv-deep)}
.lg-text{max-width:68ch;font-size:19px;line-height:1.6;color:#2A2720}
.lg-text h2{margin:44px 0 10px;font-family:var(--hf);font-weight:800;font-size:clamp(24px,2vw,30px);letter-spacing:-.015em;color:var(--ink);scroll-margin-top:90px}
.lg-text h2:first-of-type{margin-top:28px}
.lg-text p{margin:0 0 14px}.lg-text ul{margin:0 0 14px;padding-left:1.2em}.lg-text li{margin:0 0 6px}.lg-text li::marker{color:var(--hv)}
.lg-text a{color:var(--hv-deep)}
.lg mark{background:#FFE08A;padding:0 3px}
@media (max-width:860px){.lg-grid{grid-template-columns:minmax(0,1fr)}.lg-toc{position:static;padding:0 0 18px;border-bottom:1px solid var(--line)}}
/* SEO/tap size (13 Nov): footer and legal-page side links at least 24px tall */
.foot-links a,.lg-toc a{display:inline-block;min-height:24px;line-height:24px}

/* Section 03 Sample sites (13 Nov): from drafts/sample-sites/section/section.css */
/* Section 03, sample sites (built in drafts/sample-sites, Nov 2026). Uses the site's own :root tokens. */
.smp{background:var(--paper);padding:clamp(60px,7vw,112px) 0 clamp(70px,8vw,130px);overflow:hidden}
.smp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap}
.smp .eyebrow,.smp .sn{color:var(--hv-deep)}
.smp h2{margin-top:14px;font-size:clamp(36px,4.2vw,80px)}.smp h2 span{color:#8A8478}
.smp-honest{max-width:21em;font-family:var(--bf);font-size:clamp(18px,1.4vw,22px);line-height:1.35;color:#3F3B32;border-left:3px solid var(--hv);padding-left:16px}
.smp-honest b{font-family:var(--hf);font-weight:700}
.smp-row{list-style:none;margin:clamp(36px,4.4vw,70px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,36px)}
.smp-ph{all:unset;display:block;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smp-frame{position:relative;display:block;aspect-ratio:390/844;border-radius:13%/6%;background:#0B0D0F;padding:3.2%;box-shadow:0 30px 60px -28px #0B0D0F80,0 0 0 1.5px #3a3d42 inset}
.smp-scr{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:10.5%/4.9%;background:#fff;isolation:isolate}
.smp-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
#smp-if{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:transparent;display:block;pointer-events:none}
.smp-cover{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:1;transition:opacity .45s ease}.smp-cover.off{opacity:0}
.smp-isl{position:absolute;left:50%;top:3.1%;width:30%;height:3.4%;transform:translateX(-50%);background:#0B0D0F;border-radius:99px;z-index:2}
.smp-ph .smp-frame{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.smp-ph:hover .smp-frame,.smp-ph:focus-visible .smp-frame{transform:translateY(-10px);box-shadow:0 44px 70px -30px #0B0D0F99,0 0 0 1.5px #3a3d42 inset}
.smp-ph:focus-visible{outline:3px solid var(--hv);outline-offset:8px;border-radius:12px}
.smp-cap{display:block;margin-top:18px;font-family:var(--hf);font-size:14px;color:var(--stone);text-align:center}.smp-cap b{display:block;font-size:17px;color:var(--ink);margin-bottom:2px}
/* pop-up */
.smp-pop{position:fixed;inset:0;z-index:200;background:#0B0D0F;color:#F5F3EE;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:18px clamp(16px,3vw,48px)}
.smp-pop[hidden]{display:none}
.smp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:16px}
.smp-k{font-family:var(--hf);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--hv)}
.smp-id h3{margin:6px 0 0;font-family:var(--hf);font-weight:800;letter-spacing:-.03em;font-size:clamp(26px,2.2vw,38px);line-height:1}
.smp-fine{margin-top:6px;font-family:var(--bf);font-style:italic;font-size:16px;color:#A7ACB1}
.smp-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.smp-nav,.smp-x,.smp-view button{all:unset;white-space:nowrap;cursor:pointer;height:46px;min-width:46px;padding:0 16px;box-sizing:border-box;border-radius:99px;border:1.5px solid #ffffff40;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--hf);font-weight:700;font-size:15px}
.smp-nav:hover,.smp-x:hover{border-color:var(--hv);color:var(--hv)}
.smp-nav svg{display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.smp-nav.smp-nav{padding:0}
.smp-nav:focus-visible,.smp-x:focus-visible,.smp-view button:focus-visible{outline:2px solid var(--hv);outline-offset:2px}
.smp-view{display:inline-flex;border:1.5px solid #ffffff40;border-radius:99px;padding:3px;margin-right:8px}.smp-view button{border:0;height:38px}
.smp-view button[aria-pressed=true]{background:#F5F3EE;color:#0B0D0F}
.smp-stage{position:relative;min-height:0;display:grid;place-items:center;touch-action:none}
.smp-win{position:relative;height:100%;max-width:100%;aspect-ratio:1440/940;max-height:100%;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 100px -30px #000,0 0 0 1px #ffffff26}
.smp-chrome{flex:none;height:38px;background:#1E2227;display:flex;align-items:center;gap:8px;padding:0 14px}.smp-chrome i{width:12px;height:12px;border-radius:50%;background:#3A3F46}
.smp-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;margin:0 auto;transform:translateX(-30px);background:#2B3037;color:#A7ACB1;border-radius:8px;padding:5px 16px;font:500 13px var(--hf)}
.smp-vp{flex:1;position:relative;overflow:hidden;transition:background-color .3s}
.smp-cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:3;pointer-events:none;opacity:0;transform:translate(60%,40%);transition:transform 1.1s cubic-bezier(.45,.05,.25,1),opacity .4s;filter:drop-shadow(0 2px 3px #0006)}
.smp-cur.on{opacity:1}
.smp-bar{position:absolute;right:4px;top:46px;bottom:8px;width:4px;background:#00000014;border-radius:3px;z-index:3}.smp-bar i{display:block;width:100%;height:0;background:var(--hv);border-radius:3px}
.smp-big{display:none;position:relative;height:100%;aspect-ratio:390/844}.smp-big .smp-frame{height:100%;box-shadow:0 0 0 2px #4A4F55 inset,0 30px 80px -20px #000}
.smp-pop.is-phone .smp-win{display:none}.smp-pop.is-phone .smp-big{display:block}
.smp-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:16px}
.smp-cta{flex:none;white-space:nowrap}
.smp-why{font-family:var(--bf);font-size:18px;line-height:1.35;color:#D7D9DB;max-width:52em}
/* swipe hint: only where the phones are a sideways swipe row (phones and tablets). "1 of 5 trades" follows the swipe;
   the arrow nudges twice when the row first comes into view, and turns round on the last one */
.smp-hint{display:none}
@media (max-width:1100px){
  .smp-hint{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:clamp(28px,4vw,44px) 0 0;font:700 15px/1.2 var(--hf);color:var(--ink)}
  .smp-hint b{font-weight:800}
  .smp-sw{display:inline-flex;align-items:center;gap:6px;color:var(--hv-deep)}
  .smp-sw svg{flex:none;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
  .smp-hint.is-end .smp-sw svg{transform:scaleX(-1)}
  .smp-hint.nudge .smp-sw svg{animation:smp-nudge 1.1s ease-in-out 2}
  .smp-hint + .smp-row{margin-top:2px}
}
@keyframes smp-nudge{0%,100%{translate:0 0}45%{translate:7px 0}}
@media (prefers-reduced-motion:reduce){.smp-hint.nudge .smp-sw svg{animation:none}}
@media (max-width:1100px){.smp-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(42vw,260px);overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1*clamp(20px,4.4vw,88px));margin-right:calc(-1*clamp(20px,4.4vw,88px));padding:16px clamp(20px,4.4vw,88px) 10px;scrollbar-width:none}.smp-row::-webkit-scrollbar{display:none}.smp-row li{scroll-snap-align:center}}
@media (max-width:760px){
  .smp-row{grid-auto-columns:62vw;gap:18px}
  .smp-pop{padding:calc(14px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom))}
  .smp-top{display:block;position:relative;padding-bottom:10px}
  .smp-id{padding-right:56px}.smp-k{font-size:12px}.smp-id h3{font-size:24px}.smp-fine{font-size:14px}
  .smp-x{position:absolute;top:0;right:0;padding:0}.smp-xt{display:none}
  .smp-ctl{margin-top:10px;justify-content:space-between;flex-wrap:nowrap}.smp-view{margin:0}
  .smp-nav{height:42px;min-width:42px;padding:0 12px}.smp-view button{height:34px;padding:0 12px;font-size:14px}
  .smp-win{height:100%;width:100%;aspect-ratio:auto}.smp-chrome{height:30px}.smp-chrome i{width:9px;height:9px}.smp-url{font-size:11px;transform:none;padding:4px 10px}
  .smp-bar{top:36px}
  .smp-foot{padding-top:10px;flex-direction:column;align-items:stretch;gap:10px}.smp-why{font-size:14px;line-height:1.4}
  .smp-cta{display:flex;justify-content:center;width:100%;box-sizing:border-box}
  /* on a phone, the phone view fills the stage: no phone-inside-a-phone bezel */
  .smp-big{width:100%;max-width:430px;justify-self:center;aspect-ratio:auto}.smp-big .smp-frame{padding:0;background:none;box-shadow:none;border-radius:14px;aspect-ratio:auto}
  .smp-big .smp-scr{border-radius:14px;box-shadow:0 0 0 1.5px #ffffff38}.smp-big .smp-isl{display:none}/* a thin edge so the sample reads as a screen, not part of the page */
}
/* small phones: the why line gives its room back to the sample */
@media (max-width:760px) and (max-height:700px){.smp-why{display:none}}
/* short screens (a phone held sideways): a slimmer header and footer so the sample gets the room */
@media (max-height:500px){
  .smp-pop{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .smp-top{display:flex;align-items:center;padding-bottom:6px}.smp-k,.smp-why{display:none}.smp-id h3{font-size:20px}.smp-fine{margin-top:2px;font-size:13px}
  .smp-ctl{margin-top:0}.smp-nav,.smp-x{height:38px;min-width:38px}.smp-view button{height:30px}
  .smp-foot{padding-top:6px;flex-direction:row}.smp-cta{width:auto;height:40px}
}
/* Trades drop-down in the top menu (computers) and in the phone/tablet Menu (13 Nov 2026) */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 0;border:0;background:none;color:#fff;font:inherit;cursor:pointer}
.nav-drop-btn svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--hv)}
.nav-drop-list{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;margin-top:8px;padding:8px;display:flex;flex-direction:column;background:#0B0D0F;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.nav-drop-list::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-drop-list[hidden]{display:none}
.navlinks .nav-drop-list a{display:block;padding:11px 14px;border-radius:10px;color:#fff;white-space:nowrap}
.navlinks .nav-drop-list a:hover,.navlinks .nav-drop-list a:focus-visible{background:rgba(255,255,255,.08);color:var(--hv)}
.m-trades{border-bottom:1px solid rgba(255,255,255,.12)}
.m-trades summary{list-style:none;cursor:pointer;color:#fff;font-family:var(--hf);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-size:clamp(32px,9vw,56px);padding:14px 0;display:flex;align-items:baseline}
.m-trades summary::-webkit-details-marker{display:none}
.m-trades summary span{color:var(--hv);font-size:.45em;vertical-align:.6em;margin-right:12px;letter-spacing:0;align-self:flex-start;margin-top:.35em}
.m-trades summary::after{content:"+";margin-left:auto;color:var(--hv);font-weight:600}
.m-trades[open] summary::after{content:"\2212"}
.m-trades summary:hover,.m-trades summary:focus-visible{color:var(--hv)}
.m-trades-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;padding:0 0 16px 34px}
.menu nav .m-trades-list a{font-size:clamp(18px,4.6vw,24px);font-weight:700;letter-spacing:-.01em;padding:9px 0;border-bottom:0}
@media (max-width:420px){.m-trades-list{grid-template-columns:minmax(0,1fr);padding-left:28px}}
/* review fixes 13 Nov: contact Call button text matches other orange buttons; bigger footer tap targets on phones */
.contact a.pill-hv{color:#0B0D0F}
@media (max-width:760px){.foot .fb-grid a,.foot-links a{min-height:44px;line-height:44px}}
/* contact form spam trap (Formspree _gotcha): never shown */
.form .hp{display:none!important}
/* Trade pages (websites-for-*.html), built 13 Nov 2026 from the approved plumbers mockup (option D).
   Source: drafts/tools/trade-pages/trade.css, copied into styles.css by build_trades.py. */
body.np{background:var(--paper)}
.np .topbar{position:sticky;top:0;background:#0B0D0F;animation:none}
.np-head{background:#0B0D0F;color:#F5F3EE;padding:clamp(44px,6vw,100px) 0 clamp(40px,5vw,76px)}
.np-head .sn{color:var(--hv);font-size:clamp(16px,1.25vw,20px);letter-spacing:.12em;margin-bottom:18px}
.np-head h1{margin:0;font-family:var(--hf);font-weight:800;font-size:clamp(46px,6.4vw,112px);line-height:.95;letter-spacing:-.035em}
/* Page titles on one line on computers and tablets (13 Nov); they wrap on phones */
@media (min-width:761px){.np-head h1{white-space:nowrap}}
.np-head h1.long{font-size:clamp(40px,5.2vw,96px)}
.np-head h1 em{font-family:var(--bf);font-style:italic;font-weight:600;letter-spacing:-.01em;color:var(--hv)}
.np-head p.lede{margin:22px 0 0;max-width:40ch;font-size:clamp(20px,1.7vw,25px);line-height:1.4;color:#D9D4C8}
.np-sec{padding:clamp(48px,6vw,96px) 0}
.np-sec h2{font-size:clamp(32px,3.4vw,58px);margin:0 0 clamp(22px,2.4vw,34px)}
.np-sec .sn{color:var(--hv-deep)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* sample site */
.tp-sample{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.tp-phone{justify-self:center;width:min(300px,70vw);border-radius:38px;border:10px solid #1C1E21;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.tp-phone img{display:block;width:100%;height:auto}
.tp-sample p{font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:#3A372F;max-width:34ch}
/* price strip */
.tp-strip{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.tp-strip p{margin:0;font-family:var(--hf);font-weight:800;font-size:clamp(26px,2.6vw,42px);letter-spacing:-.02em}
.tp-strip p span{color:var(--hv-deep)}
/* trades with no sample site of their own: the 5 sample posters in a row */
.tp-many{justify-self:center;width:100%;max-width:560px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.4vw,16px);align-items:center}
.tp-many span{display:block;border-radius:14px;border:4px solid #1C1E21;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.tp-many span:nth-child(odd){transform:translateY(14px)}
.tp-many img{display:block;width:100%;height:auto}
@media (max-width:760px){.tp-sample{grid-template-columns:minmax(0,1fr)}}
/* The trade's story: a sketched phone lights up one part at a time while timed steps play beside it */
.ic{width:46px;height:46px;border-radius:50%;background:#FF6A13;display:flex;align-items:center;justify-content:center;flex:none}
.ic svg{width:24px;height:24px;fill:none;stroke:#0B0D0F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dd{background:#0B0D0F;color:#F5F3EE;background-image:linear-gradient(rgba(245,243,238,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(245,243,238,.045) 1px,transparent 1px);background-size:28px 28px}
.dd h2{color:#F5F3EE}
.d-lede{max-width:46ch;font-size:clamp(19px,1.5vw,22px);color:#D9D4C8;margin:-8px 0 clamp(30px,3.5vw,56px)}
.d-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:start}
.d-phone-wrap{position:sticky;top:110px}
.d-phone{position:relative;width:300px;height:600px;border:3px solid #F5F3EE;border-radius:44px;padding:56px 18px 18px;box-sizing:border-box;background:#121418}
.d-phone::before{content:"";position:absolute;top:14px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#F5F3EE}
.d-screen{display:grid;gap:10px;font-family:var(--hf);color:#F5F3EE;transition:opacity .5s}
.d-screen>*{border-radius:10px;transition:box-shadow .35s,border-color .35s,color .35s}
.wf-bar{display:flex;justify-content:space-between;align-items:center;border:2px solid #F5F3EE;padding:8px 10px;font-weight:800;font-size:13px}
.wf-bar i{width:26px;height:26px;border-radius:50%;background:#FF6A13;display:block}
.wf-hrs{border:2px dashed #6B665B;padding:6px 10px;font-weight:700;font-size:12px;color:#B9B4A8}
.wf-img{height:110px;border:2px solid #F5F3EE;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(245,243,238,.12) 9px 10px)}
.wf-h{height:12px;border-radius:4px!important;background:#F5F3EE;width:85%}.wf-h.s{width:60%;opacity:.35;height:9px}
.wf-chips{display:flex;flex-wrap:wrap;gap:5px;padding:4px;border:2px solid transparent}
.wf-chips span{border:1.5px solid #F5F3EE;border-radius:99px;padding:2px 8px;font-size:10.5px;font-weight:700}
.wf-lic{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:11px;font-weight:700;padding:4px;border:2px solid transparent}
.wf-lic b{border:2px solid #F5F3EE;border-radius:6px;padding:3px 6px}
.wf-lic em{flex-basis:100%;font-family:var(--bf);font-style:italic;font-weight:500;font-size:12px;color:#D9D4C8}
.wf-pr{font-size:12px;font-weight:800;border-top:2px solid #F5F3EE;border-radius:0!important;padding-top:8px}
.wf-img.sm{height:72px}
.wf-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border:2px solid transparent}
.wf-gal span{height:58px;border:1.5px solid #F5F3EE;border-radius:6px;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(245,243,238,.12) 7px 8px);display:flex;align-items:flex-end;padding:3px 5px;font-size:9.5px;font-weight:700;line-height:1.1}
.wf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border:2px solid transparent;font-size:10.5px;font-weight:700}
.wf-steps span{display:flex;align-items:center;gap:5px;min-width:0}
.wf-steps b{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #F5F3EE;display:flex;align-items:center;justify-content:center;font-size:10px}
.wf-call{position:absolute;left:18px;right:18px;bottom:18px;height:44px;border-radius:99px;background:#33393F;display:flex;align-items:center;justify-content:center;font-family:var(--hf);font-weight:800;font-size:15px;color:#F5F3EE;transition:background .35s,color .35s,transform .35s}
.d-ring{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);font:700 13px var(--hf);letter-spacing:.08em;text-transform:uppercase;color:#FF6A13;opacity:0;transition:opacity .35s}
.dd .lit{border-color:#FF6A13!important;box-shadow:0 0 0 3px rgba(255,106,19,.35);color:#FF6A13}
.dd .lit span,.dd .lit b{border-color:#FF6A13}
.dd .wf-call.lit{background:#FF6A13;color:#0B0D0F;box-shadow:none;transform:scale(1.04)}
.dd .wf-call.lit~.d-ring{opacity:1}
.dd .d-screen.dim{opacity:.25}
.d-steps{list-style:none;padding:0;margin:0;display:grid;gap:clamp(18px,2vw,26px)}
.d-steps li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;position:relative;border-top:3px solid #33393F;padding-top:18px;opacity:.7;transition:opacity .4s}
.d-steps li::before{content:"";position:absolute;top:-3px;left:0;width:0;height:3px;background:#FF6A13}
.d-steps li.on{opacity:1}.d-steps li.on::before{width:100%;transition:width 4.8s linear}
.d-steps li.done{opacity:.8}.d-steps li.done::before{width:100%}
.d-steps .d-t{margin:0;font-family:var(--hf);font-weight:800;font-size:clamp(34px,3vw,50px);letter-spacing:-.03em;line-height:1;color:#F5F3EE}
.d-steps .d-t small{font-size:.42em;letter-spacing:0;color:#FF6A13;margin-left:4px}
.d-steps h3{margin:0 0 6px;font-family:var(--hf);font-size:clamp(20px,1.5vw,24px);color:#F5F3EE}
.d-steps p{margin:0;font-size:17px;line-height:1.45;color:#C9C4B8}
.d-why{display:inline-block;margin-top:10px;font-family:var(--hf);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#FF6A13}
.d-extra{margin-top:clamp(40px,4.5vw,70px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(24px,3vw,48px);border-top:1px solid #2A2C30;padding-top:28px}
.d-extra>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.d-extra h3{margin:0 0 4px;font-family:var(--hf);font-size:19px;color:#F5F3EE}.d-extra p{margin:0;font-size:16px;color:#C9C4B8}
.d-dots{display:none;gap:8px;margin:0 0 14px}.d-dots i{width:26px;height:4px;border-radius:2px;background:#33393F}.d-dots i.on{background:#FF6A13}
@media (max-width:900px){
 .d-grid{grid-template-columns:minmax(0,1fr)}
 .d-phone-wrap{position:static;justify-self:center}
 .d-phone{transform:scale(.72);transform-origin:top center;margin-bottom:-168px}
 /* phones: one step at a time under the phone, on the same timer */
 .d-steps{min-height:250px;align-content:start}
 .d-steps li{display:none;grid-template-columns:1fr;gap:8px}
 .d-steps li.on{display:grid}
 .d-dots{display:flex}
 .d-extra{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.d-steps li{opacity:1}.d-steps li::before{width:100%!important;transition:none!important}}
@media (prefers-reduced-motion:reduce) and (max-width:900px){.d-steps li{display:grid}.d-dots{display:none}}
/* end trade pages */
/* Pricing and About pages, built 13 Nov 2026 from the approved mockups (drafts/new-pages/build_mock.py).
   Source: drafts/tools/new-pages/pages.css, copied into styles.css by build_pages.py. */
.tick{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tick li{position:relative;padding-left:32px;font-size:18px;line-height:1.4}
.tick li::before{content:"";position:absolute;left:2px;top:.28em;width:16px;height:9px;border-left:3px solid var(--hv);border-bottom:3px solid var(--hv);transform:rotate(-45deg)}
.ph-flag{background:#FFE58A;color:#14130F;padding:0 6px;font-family:var(--hf);font-weight:700;font-size:.8em}
/* dark band */
.np-sec.dark{background:#0B0D0F;color:#F5F3EE}
.np-sec.dark h2,.np-sec.dark h3{color:#F5F3EE}
/* pricing */
.pp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.pp-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:20px}
.pp-card.hot{background:#0B0D0F;color:#F5F3EE;border-color:#0B0D0F}
.pp-kick{font-family:var(--hf);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--hv-deep)}
.pp-card.hot .pp-kick{color:var(--hv)}
.pp-price{font-family:var(--hf);font-weight:800;font-size:clamp(56px,6vw,96px);line-height:.9;letter-spacing:-.04em}
.pp-price small{display:block;margin-top:10px;line-height:1.3;font-family:var(--bf);font-weight:500;font-size:19px;letter-spacing:0;color:var(--stone)}
.pp-card.hot .pp-price small{color:#B9B4A8}
.pp-pay{border-top:1px solid var(--line);padding-top:18px;font-size:17px;line-height:1.45}
.pp-card.hot .pp-pay{border-top-color:#2A2C30}
.pp-pay b{font-family:var(--hf)}
.pp-card .pill{align-self:flex-start;margin-top:auto}
.pp-note{margin:24px 0 0;font-family:var(--hf);font-weight:600;font-size:16px;color:var(--stone)}
.pp-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.pp-big{font-family:var(--hf);font-weight:800;font-size:clamp(44px,4.6vw,76px);line-height:.95;letter-spacing:-.03em;margin:0 0 12px}
.pp-big span{color:var(--hv)}
.pp-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pp-mini div{border-top:3px solid var(--hv);padding-top:14px}
.pp-mini h3{margin:0 0 6px;font-family:var(--hf);font-size:22px}
.pp-mini p{margin:0;font-size:17px;line-height:1.45}
/* pricing: the search question, answered (13 Nov) */
.pp-q{max-width:780px;margin:0 0 clamp(26px,3vw,40px)}
.pp-q h2{margin:0 0 12px}
.pp-q p{margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#3A372F}
/* about */
.ab-row{display:grid;grid-template-columns:minmax(0,420px) minmax(0,660px);justify-content:center;gap:clamp(28px,5vw,72px);align-items:start}
.ab-pic{display:block;width:100%;max-width:420px}.ab-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;background:#E5DFD0}
.ab-text p{font-size:clamp(19px,1.5vw,22px);line-height:1.55;margin:0 0 18px;max-width:58ch}
.ab-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.ab-vals h3{margin:0 0 8px;font-family:var(--hf);font-size:clamp(22px,1.8vw,28px)}
.ab-vals p{margin:0;font-size:18px;line-height:1.5;color:#D9D4C8}
.ab-vals>div{border-top:3px solid var(--hv);padding-top:16px}
.ab-facts{display:flex;flex-wrap:wrap;gap:10px 34px;font-family:var(--hf);font-weight:600;font-size:17px}
@media (max-width:760px){.pp-cards,.pp-row,.pp-mini,.ab-row,.ab-vals{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.ab-pic{max-width:300px}}
/* end pricing and about */
/* QA fixes 14 Nov 2026 (Fable 5.2 pass): bigger tap areas on phones, clearer hero line */
@media (max-width:760px){
  .topbar .logo{display:inline-flex;align-items:center;min-height:44px}
  .smp-view button{height:44px}
  .smp-nav{height:44px;min-width:44px}
  .hero-where{font-size:12px}
  .lg-toc a{min-height:44px;line-height:44px}
}
.calc-tog{min-height:44px}
.skip{position:fixed;left:12px;top:-60px;z-index:400;padding:12px 18px;border-radius:99px;background:var(--hv);color:#0B0D0F;font-family:var(--hf);font-weight:700;text-decoration:none;transition:top .15s ease}
.skip:focus{top:12px}
main:focus{outline:none}