/* Advanced Refinish design system ("finish studio"). Bone + brand slate, cyan hairline accent.
   Bodoni Moda (opsz 11, weight 500) + Manrope. Built from the approved October 2026 prototypes. */
:root{
  --bone:#f3efe7; --paper:#faf8f4; --ink:#1b2630; --slate:#2e4051; --cyan:#16a3cc; --cyan-d:#0b7fa3;
  --text:#2a333b; --mute:#646d75; --hair:#d9d3c7; --hair-d:#3a4a59;
  --disp:"Bodoni Moda",Didot,Georgia,serif; --sans:"Manrope",system-ui,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.disp{font-family:var(--disp);font-weight:500;font-variation-settings:"opsz" 11;letter-spacing:-.012em;line-height:1.1;color:var(--ink);margin:0;font-variant-numeric:lining-nums}
.disp em{font-style:italic;font-weight:400}
.lab{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.lab b{color:var(--cyan-d);font-weight:600;margin-right:10px}
.btn{display:inline-flex;align-items:center;gap:12px;font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--ink);cursor:pointer;background:none;border-top:0;border-left:0;border-right:0}
.btn::after{content:"";width:28px;height:1px;background:currentColor;transition:width .2s}
.btn:hover::after{width:44px}
.btn.solid{background:var(--ink);color:#fff;padding:18px 28px;border:0}
.btn.solid:hover{background:var(--slate)}
.btn.light{color:#fff;border-color:#fff}


/* header */
.st-head{position:sticky;top:0;z-index:30;background:rgba(250,248,244,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.st-head .wrap{display:flex;align-items:center;gap:40px;height:80px}
.st-logo img{height:40px;width:auto}
.st-nav{display:flex;gap:34px;margin-left:auto}
.st-nav a{font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.st-nav a.on{color:var(--cyan-d)}
.st-cta{font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--ink);padding:14px 20px}
.st-menu{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* hero: single plate, headline overlaid bottom-left */
.plate{position:relative;height:min(82vh,780px);min-height:520px;background:center 60%/cover no-repeat;color:#fff}
.plate::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,24,31,.05) 30%,rgba(17,24,31,.72))}
.plate .wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px}
.plate h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4.6rem);max-width:13em;line-height:1.04}
.plate .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:34px;flex-wrap:wrap}
.plate p{max-width:34em;color:var(--dk-light,#e4e9ed);margin:0}
.plate .cap{font:600 .66rem/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dk-mute2,#cfd8de);text-align:right}

/* intro with index */
.intro{padding:120px 0 110px}
.intro .wrap{display:grid;grid-template-columns:260px 1fr;gap:80px}
.intro .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;color:var(--mute)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.facts div{padding:22px 20px 0 0}
.facts b{display:block;font:500 2.6rem/1 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.facts span{display:block;font-size:.84rem;color:var(--mute);margin-top:10px}

/* properties list */
.props{background:var(--bone);padding:110px 0}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px;flex-wrap:wrap}
.head-row h2{font-size:clamp(2rem,3.6vw,3rem)}

/* finish library */
.finish{padding:120px 0}
.lib{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:50px}
.chip figure{margin:0}
.chip .sw{aspect-ratio:1;background:center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.chip figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:10px;font:500 .9rem var(--sans);color:var(--ink)}
.chip figcaption span{font:600 .66rem/1.9 var(--sans);letter-spacing:.16em;color:var(--mute)}
.finish .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}

/* specification sheet */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-d);margin-top:44px;border:1px solid var(--hair-d)}
.tiers div{background:var(--ink);padding:30px}
.tiers b{display:block;font:500 3rem/1 var(--disp);font-variation-settings:"opsz" 11;color:#fff}
.tiers b em{font-style:italic;font-weight:400;font-size:.5em;margin-left:6px}
.tiers span{display:block;margin-top:10px;font-size:.9rem}

/* selected work */
.work{padding:120px 0}
.work .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center;margin-top:50px}
.work .hero-img{aspect-ratio:5/4;background:center/cover}
.work .big{font:500 7.5rem/.9 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);letter-spacing:-.02em}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:80px}
.pair figure{margin:0}
.pair .img{aspect-ratio:4/3;background:center/cover}
.pair figcaption{margin-top:12px;display:flex;justify-content:space-between;font:600 .66rem/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}


/* inquiry */
.inq{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.inq .l{background:var(--slate);color:var(--dk-light,#d5dde3);padding:110px max(40px,calc((100vw - var(--wrap))/2 + 40px)) 110px max(40px,calc((100vw - var(--wrap))/2 + 40px))}
.inq .l h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem)}
.inq .l .lab{color:var(--dk-mute2,#9fb1bf)}
.inq .people{margin-top:44px;display:grid;gap:18px}
.inq .people div{border-top:1px solid var(--hair-d2,#4a5d6e);padding-top:16px}
.inq .people b{display:block;color:#fff;font-weight:600}
.inq .r{background:#fff;padding:110px 60px}
form.qf{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.qf .full{grid-column:1/-1}
.qf label{display:block;font:600 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.qf input,.qf select,.qf textarea{width:100%;border:0;border-bottom:1px solid var(--form-hair,#bfc6cc);padding:10px 0;font:400 1rem var(--sans);color:var(--ink);background:transparent;border-radius:0;appearance:none}
.qf select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231b2630'/%3E%3C/svg%3E") right 2px center no-repeat}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;border-bottom-color:var(--cyan-d)}
.qf .opts{display:flex;flex-wrap:wrap;gap:8px}
.qf .opts label{display:inline-flex;align-items:center;gap:8px;margin:0;border:1px solid var(--form-hair,#cdd3d8);padding:9px 14px;font:500 .84rem var(--sans);letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer}
.qf .opts input{width:auto;appearance:auto}

/* footer */
.st-foot{background:var(--ink);color:var(--dk-mute2,#9fadb8);padding:80px 0 30px;font-size:.9rem}
.st-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.st-foot .mark{display:flex;gap:16px;align-items:center;color:#fff;font:500 1.5rem var(--disp);font-variation-settings:"opsz" 11}
.st-foot .mark img{width:38px}
.st-foot h4{font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.st-foot a{display:block;text-decoration:none;color:var(--dk-mute2,#9fadb8);margin-bottom:8px}
.st-foot a:hover{color:#fff}
.st-foot .legal{border-top:1px solid var(--hair-d);margin-top:60px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem}

@media (max-width:1000px){
  .st-nav{display:none}.st-cta{display:none}.st-menu{display:block}
  .st-nav.open{display:flex;flex-direction:column;gap:18px;position:absolute;top:80px;left:0;right:0;background:var(--paper);padding:24px 40px;border-bottom:1px solid var(--hair)}
  .intro .wrap,.quote .wrap,.spec .wrap,.finish .split,.work .grid,.inq{grid-template-columns:1fr}
  .index{position:static}
  .prow{grid-template-columns:50px 1fr;gap:10px 20px}
  .prow p,.prow .who{grid-column:2}
  .prow .thumb{display:none}
  .lib{grid-template-columns:repeat(3,1fr)}
  .solids{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:1fr 1fr;row-gap:30px}
  .inq .l,.inq .r{padding:80px 40px}
  .st-foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .plate .cap{text-align:left}
  .intro,.props,.finish,.spec,.work,.quote{padding:76px 0}
  .intro .cols{grid-template-columns:1fr}
  .lib{grid-template-columns:1fr 1fr}
  .solids{grid-template-columns:1fr 1fr}
  .pair{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .work .big{font-size:5.4rem}
  .facts b{font-size:2rem;white-space:nowrap}
  form.qf{grid-template-columns:1fr}
  .inq .l,.inq .r{padding:64px 20px}
  .st-nav.open{padding:20px}
  .st-foot .cols{grid-template-columns:1fr}
}

/* ---------- residential homepage in the studio style ---------- */
.plate .ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:30px}
.plate .btn.solid{background:#fff;color:var(--ink)}
.plate .btn.solid:hover{background:var(--bone)}
.rating-line{display:inline-flex;gap:10px;align-items:center;font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dk-light,#e4e9ed)}
.rating-line i{font-style:normal;color:#ffc94a;letter-spacing:2px;font-size:.9rem}
/* before/after */
.ba-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start;margin-top:50px}
.ba{position:relative;overflow:hidden;aspect-ratio:4/3;background:#ddd;user-select:none;touch-action:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;pointer-events:none}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);background:rgba(27,38,48,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cpath d='M1 5h24M5 1L1 5l4 4M21 1l4 4-4 4' stroke='white' fill='none'/%3E%3C/svg%3E") center no-repeat}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .lbl{position:absolute;bottom:16px;font:600 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ba .lbl.l{left:18px}.ba .lbl.r{right:18px}
.ba-list{border-top:1px solid var(--ink)}
.ba-list button{display:grid;grid-template-columns:40px 1fr;gap:4px 10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);padding:20px 0;cursor:pointer;font:inherit;color:var(--text)}
.ba-list button span{font:italic 500 1rem var(--disp);font-variation-settings:"opsz" 11;color:var(--cyan-d);grid-row:span 2}
.ba-list button b{font:500 1.3rem var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.ba-list button small{color:var(--mute);font-size:.88rem}
.ba-list button.on b{color:var(--cyan-d)}
/* services list */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;border-top:1px solid var(--ink)}
.svc a{display:grid;grid-template-columns:44px 1fr auto;gap:2px 16px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--text)}
.svc a .n{font:italic 500 1rem var(--disp);font-variation-settings:"opsz" 11;color:var(--cyan-d);grid-row:span 2}
.svc a h3{font:500 1.45rem/1.15 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:0}
.svc a p{grid-column:2;margin:0;color:var(--mute);font-size:.92rem}
.svc a .arr{grid-row:1;grid-column:3;font-size:1.1rem;color:var(--ink);transition:transform .2s}
.svc a:hover h3{color:var(--cyan-d)}.svc a:hover .arr{transform:translateX(4px)}
/* pricing (light spec sheet) */
.price{background:var(--bone);padding:120px 0}
.price .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}
/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:56px}
.revs blockquote{margin:0;font:400 1.3rem/1.4 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);border-left:2px solid var(--cyan);padding-left:24px}
.revs cite{display:block;margin:18px 0 0 26px;font:600 .66rem/1.8 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-style:normal}
.stars-big{font:500 4.4rem/1 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.stars-big i{font-style:normal;font-size:.4em;color:#d9a300;letter-spacing:4px;vertical-align:middle;margin-left:14px}
/* towns */
.towns{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--ink)}
.towns a{flex:1 0 25%;padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;font:500 1.35rem var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.towns a:hover{color:var(--cyan-d)}
/* faq */
.faq details{border-top:1px solid var(--hair);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:30px;font:500 1.3rem/1.3 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.faq summary::after{content:"+";font:300 1.6rem/1 var(--sans);color:var(--cyan-d)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:14px 0 0;color:var(--mute);max-width:46em}
/* commercial band */
.cband{background:var(--ink);color:var(--dk-text,#c9d2d9);padding:90px 0}
.cband .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end}
.cband h2{color:#fff;font-size:clamp(2rem,3.4vw,2.8rem)}
.cband .who{font:600 .68rem/2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dk-mute,#8fa0ad)}
/* quote form extras */
.drop{border:1px dashed #b8c2ca;padding:22px;text-align:center;color:var(--mute);font-size:.9rem}
.drop b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.sms-line{display:flex;gap:16px;align-items:center;border:1px solid var(--hair-d2,#4a5d6e);padding:18px 20px;margin-top:34px;text-decoration:none;color:#fff}
.sms-line small{display:block;color:var(--dk-mute2,#9fb1bf);font-size:.8rem}
@media (max-width:1000px){
  .ba-wrap,.price .wrap,.cband .wrap{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr;gap:36px}
  .towns a{flex-basis:33.3%}
  .strip-sw{grid-template-columns:repeat(3,1fr)}.strip-sw div:nth-child(n+4){display:none}
}
@media (max-width:600px){
  .towns a{flex-basis:50%;font-size:1.15rem}
  .price{padding:76px 0}.cband{padding:70px 0}
  .stars-big{font-size:3.4rem}
}
@media (max-width:600px){
  .plate::before{background:linear-gradient(180deg,rgba(17,24,31,.35),rgba(17,24,31,.86) 55%)}
  .price .from{font-size:3rem}
}

/* ---------- commercial v4: service-style page on the studio system ---------- */
.hero-s{background:var(--bone);padding:80px 0 70px}
.hero-s .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.hero-s h1{font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.06}
.hero-s .lead{font-size:1.1rem;color:var(--mute);margin:26px 0 0;max-width:34em}
.hero-s .ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:34px}
.hero-s .pic{position:relative}
.hero-s .pic .img{aspect-ratio:4/3.3;background:center/cover}
.hero-s .pic .tag{position:absolute;left:-28px;bottom:28px;background:var(--ink);color:#fff;padding:18px 22px;max-width:260px}
.hero-s .pic .tag b{display:block;font:500 2.2rem/1 var(--disp);font-variation-settings:"opsz" 11}
.hero-s .pic .tag span{display:block;font-size:.84rem;color:var(--dk-text,#c9d2d9);margin-top:6px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px;border-top:1px solid var(--ink);margin-top:44px}
.trust div{padding:18px 0 0;font-size:.86rem;color:var(--mute)}
.trust b{display:block;font:500 1.5rem/1.1 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin-bottom:4px}
.trust i{font-style:normal;color:#d9a300;letter-spacing:1px;font-size:.9rem}
/* logo band */
.logos{padding:44px 0;border-bottom:1px solid var(--hair)}
/* service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:50px}
.cards > div{background:var(--paper);padding:34px 30px 32px}
.cards .n{font:italic 500 1rem var(--disp);font-variation-settings:"opsz" 11;color:var(--cyan-d)}
.cards h3{font:500 1.45rem/1.15 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:12px 0 10px}
.cards p{margin:0;color:var(--mute);font-size:.93rem}
.cards ul{list-style:none;margin:16px 0 0;padding:0;font-size:.88rem;color:var(--text)}
.cards li{padding:6px 0 6px 20px;border-top:1px solid var(--hair);position:relative}
.cards li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:1px;background:var(--cyan-d)}
/* who we serve */
.serve{border-top:1px solid var(--ink);margin-top:50px}
.serve div{display:grid;grid-template-columns:60px 1fr 1.6fr;gap:20px 30px;padding:24px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.serve .n{font:italic 500 1.1rem var(--disp);font-variation-settings:"opsz" 11;color:var(--cyan-d)}
.serve h3{font:500 1.5rem/1.15 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:0}
.serve p{margin:0;color:var(--mute);font-size:.95rem}
/* process steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin-top:50px;border-top:1px solid var(--ink)}
.steps div{padding-top:22px}
.steps b{display:block;font:500 2.4rem/1 var(--disp);font-variation-settings:"opsz" 11;color:var(--cyan-d)}
.steps h3{font:500 1.25rem/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:14px 0 10px}
.steps p{margin:0;color:var(--mute);font-size:.9rem}
/* pricing and warranty (dark) */
.pw{background:var(--ink);color:var(--dk-text,#c9d2d9);padding:120px 0}
.pw .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:80px}
.pw h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem)}
.pw .lab{color:var(--dk-mute,#8fa0ad)}
.pw .clause{margin-top:22px;font-size:1rem}
.pw .lists{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.pw h4{font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dk-mute,#8fa0ad);margin:0 0 6px}
.pw ul{list-style:none;margin:0;padding:0}
.pw li{padding:14px 0 14px 26px;border-top:1px solid var(--hair-d);position:relative;font-size:.95rem}
.pw li:last-child{border-bottom:1px solid var(--hair-d)}
.pw li::before{content:"";position:absolute;left:0;top:24px;width:12px;height:1px;background:var(--cyan)}
.pw li strong{color:#fff;font-weight:500}
.pw .tiers{margin-top:34px}
.pw .btn{color:#fff;border-color:#fff;margin-top:34px}
/* property reviews */
.revs.two{grid-template-columns:1fr 1fr}
/* contact strip under hero cta */
.direct{display:grid;gap:14px;margin-top:34px}
.direct a{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--hair-d2,#4a5d6e);padding-top:14px;text-decoration:none;color:#fff}
.direct a small{color:var(--dk-mute2,#9fb1bf);font-size:.82rem}
@media (max-width:1000px){
  .hero-s .wrap,.pw .wrap{grid-template-columns:1fr}
  .hero-s .pic .tag{left:0}
  .trust{grid-template-columns:1fr 1fr;row-gap:20px}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .serve div{grid-template-columns:44px 1fr}.serve p{grid-column:2}
  .revs.two{grid-template-columns:1fr}
  .logos .row{justify-content:flex-start;gap:28px}
}
@media (max-width:600px){
  .hero-s{padding:56px 0 60px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}.steps div{border-bottom:1px solid var(--hair);padding-bottom:22px}
  .pw{padding:76px 0}.pw .lists{grid-template-columns:1fr}
  .logos img{height:26px}.logos img.tall{height:36px}
  .hero-s .pic .tag{position:static;margin-top:14px;max-width:none}
}

/* ---------- residential v2 revisions (10/12): photos in the intro, mosaic, compact pricing, FAQ photo ---------- */
.intro.pics .wrap{grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}
.intro.pics .facts b{font-size:2.1rem;white-space:nowrap}
.intro.pics .facts{margin-top:44px}
.pstack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pstack div{background:center/cover}
.pstack .a{grid-column:1/-1;aspect-ratio:4/3}
.pstack .b,.pstack .c{aspect-ratio:1}
.mosaic{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:50px}
.mosaic figure{margin:0}
.mosaic .img{aspect-ratio:4/3;background:center/cover}
.mosaic figcaption{margin-top:12px;display:flex;justify-content:space-between;gap:12px;font:600 .66rem/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.faqrow{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;align-items:start}
.faqrow .img{aspect-ratio:4/3;background:center/cover;position:sticky;top:110px}
@media (max-width:1000px){
  .intro.pics .wrap,.price.compact .wrap,.price.compact .tbls,.faqrow{grid-template-columns:1fr}
  .faqrow .img{position:static;aspect-ratio:16/10}
  .mosaic{grid-template-columns:1fr 1fr}.mosaic figure:nth-child(3){grid-column:1/-1}
}
@media (max-width:600px){
  .mosaic{grid-template-columns:1fr}.mosaic figure:nth-child(3){grid-column:auto}
  .price.compact{padding:64px 0}
}

/* ---------- round 2 (10/16): client ticker, jetted feature, photo sequences, stocked colors, soft-photo flag ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);margin-top:26px;padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker .track{display:flex;gap:0;width:max-content;animation:tick 70s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{font:500 1.35rem var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);white-space:nowrap;padding:0 28px;border-right:1px solid var(--hair)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;flex-wrap:wrap;width:auto}}
/* jetted feature band */
.jet{background:var(--ink);color:var(--dk-text,#c9d2d9);padding:100px 0}
.jet .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.jet h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem)}
.jet .lab{color:var(--dk-mute,#8fa0ad)}
.jet p{color:var(--dk-text,#c9d2d9)}
.jet .pair{margin-top:0;gap:14px}
.jet .pair figcaption{color:var(--dk-mute,#8fa0ad)}
.jet .btn{color:#fff;border-color:#fff;margin-top:30px}
/* photo sequence (process in pictures) */
.seq{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:50px}
.seq figure{margin:0}
.seq .img{aspect-ratio:4/3;background:center/cover}
.seq figcaption{margin-top:12px;font-size:.88rem;color:var(--mute)}
.seq figcaption b{display:block;font:500 1.05rem var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin-bottom:4px}
.seq figcaption b i{font-style:italic;color:var(--cyan-d);margin-right:8px}
/* stocked colors */
.stock{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.stock .sw{aspect-ratio:3/1.6}
.custom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:50px;border-top:1px solid var(--ink)}
.custom div{padding-top:22px}
.custom h3{font:500 1.3rem/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:0 0 10px}
.custom p{margin:0;color:var(--mute);font-size:.92rem}
.custom a{color:var(--cyan-d)}
/* plain hero for inner pages */
.hero-s.inner{padding:70px 0 60px}
.hero-s .pic .img.tall{aspect-ratio:4/3.6}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:50px;color:var(--mute)}
.two-col h3{font:500 1.5rem/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:0 0 12px}
.two-col p{margin:0 0 14px}
.social{display:flex;gap:16px}
.social a{display:inline!important;margin:0!important}
@media (max-width:1000px){
  .jet .wrap,.two-col{grid-template-columns:1fr}
  .seq{grid-template-columns:repeat(3,1fr)}
  .stock{grid-template-columns:repeat(3,1fr)}
  .custom{grid-template-columns:1fr}
  .clients span{flex-basis:50%}
}
@media (max-width:600px){
  .jet{padding:70px 0}
  .seq{grid-template-columns:1fr 1fr}
  .stock{grid-template-columns:1fr 1fr}
  .clients span{flex-basis:100%}
  .ticker span{font-size:1.1rem;padding:0 18px}
}

/* round 3 */
.wty{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--ink)}
.wty li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:.95rem;color:var(--mute);line-height:1.55}
.wty li b{color:var(--ink);font-weight:600}
.pw .wty{border-top-color:#7fd3ec;margin-top:30px}
.pw .wty li{border-bottom-color:var(--hair-d2,#4a5d6e);color:var(--dk-text,#c9d2d9)}
.pw .wty li b{color:#fff}
.drop{display:block;position:relative;cursor:pointer}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop.has{border-style:solid;border-color:var(--cyan-d);color:var(--ink)}
.dropalt{display:block;margin-top:8px;font-size:.84rem;color:var(--mute)}
.dropalt a{color:var(--cyan-d);text-decoration:underline}
.direct a.doc small{display:block}
.qf label.drop{font:400 .9rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--mute);margin:0;padding:22px}
.qf label.drop b{display:block;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:0}
.pbar{display:none}
@media (max-width:1000px){
  body.has-pbar{padding-bottom:64px}
  .pbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);box-shadow:0 -6px 24px rgba(0,0,0,.25);transition:transform .25s}
  .pbar.off{transform:translateY(100%)}
  .pbar a{display:flex;align-items:center;justify-content:center;height:64px;padding:0 12px;text-decoration:none;color:#fff;font:600 .72rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:center}
  .pbar a.sms{background:var(--cyan-d)}
}
.st-cta{white-space:nowrap}
.st-logo{flex-shrink:0}
@media (max-width:1180px){.st-nav{gap:22px}.st-head .wrap{gap:24px}}

/* pricing: photo + quote card + warranty strip */
.price.pq-sec .wrap{display:block}
.pq{display:grid;grid-template-columns:repeat(12,1fr);align-items:stretch;margin-top:54px}
.pq-photo{grid-column:1/9;grid-row:1;background:center/cover no-repeat;min-height:520px}
.pq-card{align-self:center;margin:40px 0}
.pq-card{grid-column:8/13;grid-row:1;position:relative;z-index:1;background:var(--bone);border:1px solid var(--hair);padding:40px 42px;box-shadow:0 30px 60px -40px rgba(27,38,48,.35)}
.pq-big{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;margin:16px 0 0}
.pq-lede{margin:16px 0 0;color:var(--text);font-size:.97rem}
.pq-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--ink)}
.pq-list li{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:.92rem;color:var(--mute);line-height:1.5}
.pq-list li b{font:600 .66rem/1.9 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.pq-list li span{color:var(--text)}
.pq-card .btn{margin-top:28px}
.wstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:64px;border-top:1px solid var(--ink);padding-top:28px}
.wstrip b{display:block;font:500 1.25rem/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.wstrip span{display:block;margin-top:10px;font-size:.92rem;color:var(--mute);line-height:1.55}
@media (max-width:1000px){
  .pq{display:block}
  .pq-photo{min-height:0;aspect-ratio:4/3}
  .pq-card{margin:-40px 16px 0;padding:30px 26px}
  .wstrip{grid-template-columns:1fr 1fr;gap:28px;margin-top:50px}
}
@media (max-width:560px){
  .pq-card{margin:-28px 12px 0}
  .pq-list li{grid-template-columns:1fr;gap:4px}
  .wstrip{grid-template-columns:1fr}
}

/* ---------- polish pass (10/19): type, captions, hero legibility, rhythm. No new colors or components. ---------- */
/* headlines break into even lines instead of leaving one word alone; body copy avoids orphans */
.disp,h2,h3,.faq summary{text-wrap:balance}
.revs blockquote{text-wrap:pretty}
p,li{text-wrap:pretty}
::selection{background:rgba(22,163,204,.22);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn:focus-visible,.st-cta:focus-visible{outline-offset:5px}

/* hero: a soft left scrim so the rating line and copy hold over bright photos */
.plate::before{background:linear-gradient(90deg,rgba(17,24,31,.5),rgba(17,24,31,0) 62%),linear-gradient(180deg,rgba(17,24,31,0) 25%,rgba(17,24,31,.78))}
.plate h1{max-width:14.2em}
.plate h1 em{display:inline-block}
.rating-line{text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* captions: label and description never collide, label never wraps */
.pair figcaption,.mosaic figcaption{gap:16px;align-items:baseline}
.pair figcaption span:first-child,.mosaic figcaption span:first-child{flex-shrink:0;white-space:nowrap;color:var(--ink)}
.pair figcaption span+span,.mosaic figcaption span+span{text-align:right}
.jet .pair figcaption span:first-child{color:#fff}

/* intro: photos sit at the top and stay in view while the story scrolls */
.intro.pics .wrap{align-items:start}
.intro.pics .pstack{position:sticky;top:110px}
.intro.pics .facts{grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:24px}
.intro.pics .facts div{padding-right:0}

/* light swatches read against bone */
.chip .sw{box-shadow:inset 0 0 0 1px rgba(27,38,48,.1)}

/* reviews: curly quote hangs into the margin, like a printed pull quote */
.revs blockquote{text-indent:-.42em}

@media (max-width:1000px){
  .intro.pics .pstack{position:static;order:2}
  .intro.pics .facts{grid-template-columns:1fr 1fr;justify-content:stretch}
}
@media (max-width:600px){
  .plate h1 em{display:inline}
  .statement{font-size:1.55rem;line-height:1.26}
  /* jetted band: before and after side by side on a phone, captions stacked */
  .jet .pair{grid-template-columns:1fr 1fr;gap:10px}
  .jet .pair figcaption{flex-direction:column;gap:2px}
  .jet .pair figcaption span+span{text-align:left;letter-spacing:.1em}
  .mosaic figcaption{flex-direction:column;gap:2px}
  .mosaic figcaption span+span{text-align:left}
}

/* ---------- round 3 (10/19): home-v3 only. Same system, more room, quiet motion. Scoped to body.v3. ---------- */
/* hero: full screen, image on its own layer so it can drift */
.v3 .plate{height:100svh;min-height:600px;max-height:none;overflow:hidden;background:var(--ink)}
.v3 .plate-bg{position:absolute;inset:0;background:center 60%/cover no-repeat;animation:drift 18s ease-out both}
.v3 .plate::before{z-index:1}
.v3 .plate .wrap{z-index:2;padding-bottom:72px}
.v3 .plate h1{font-size:clamp(2.6rem,5.8vw,5.4rem)}
@keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}
/* opening statement: one line, a whole screen */
.v3 .state{padding:150px 0 130px;text-align:center}
.v3 .state .lab{margin-bottom:34px}
.v3 .state .disp{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.08;max-width:14em;margin:0 auto}
.v3 .state .sub{max-width:34em;margin:30px auto 0;color:var(--mute);font-size:1.08rem}
.v3 .intro.pics{padding:110px 0}
.v3 .intro.pics .facts{grid-template-columns:repeat(3,auto)}
/* the number */
.v3 .bign{background:var(--ink);color:var(--dk-text,#c9d2d9);padding:120px 0 110px;text-align:center}
.v3 .bign .lab{color:var(--dk-mute,#8fa0ad)}
.v3 .bign b{display:block;font-size:clamp(5.5rem,17vw,15rem);line-height:.95;color:#fff;letter-spacing:-.03em;margin-top:22px;font-weight:400}
.v3 .bign b em{font-size:.42em;vertical-align:top;margin-left:.06em;color:var(--cyan);font-style:normal}
.v3 .bign p{color:var(--dk-text,#c9d2d9);font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.3;max-width:24em;margin:26px auto 0;font-weight:400}
.v3 .bign p em{color:#fff}
/* reveal on scroll (added by motion.js, so nothing is hidden without it) */
.v3 .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.v3 .rv.in{opacity:1;transform:none}
.v3 .intro.pics .pstack.rv{transition-delay:.12s}
@media (prefers-reduced-motion:reduce){.v3 .plate-bg{animation:none}.v3 .rv{opacity:1;transform:none;transition:none}}
@media (max-width:1000px){
  .v3 .intro.pics .facts{grid-template-columns:1fr 1fr 1fr;justify-content:stretch}
}
@media (max-width:600px){
  .v3 .plate{height:92svh;min-height:560px}
  .v3 .state{padding:96px 0 84px}
  .v3 .state .disp{font-size:2.1rem}
  .v3 .bign{padding:84px 0 76px}
  .v3 .bleed{height:60vh;min-height:360px}
  .v3 .bleed .cap{text-align:left}
  .v3 .bleed .wrap{justify-content:flex-start}
  .v3 .intro.pics .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){ .v3 .plate .wrap{padding-bottom:140px} }

.st-logo{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.st-nav a{white-space:nowrap}

.st-foot .mark span em{font-style:italic;font-weight:400}

/* hero headline: always two lines on desktop, "finished in an afternoon." on its own line */
.v3 .plate h1{max-width:none;font-size:clamp(2.6rem,4.7vw,4.9rem)}
.v3 .plate h1 em{display:block}
@media (max-width:600px){.v3 .plate h1 em{display:inline}}

/* round 3 fixes (10/19 pm) */
@media (max-width:1000px){
  .v3 .intro.pics .facts{grid-template-columns:repeat(3,1fr);justify-content:stretch;column-gap:14px}
  .v3 .intro.pics .facts b{font-size:1.7rem}
  .v3 .intro.pics .facts span{font-size:.78rem}
}
@media (max-width:420px){
  .v3 .intro.pics .facts{grid-template-columns:1fr}
  .v3 .intro.pics .facts div{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)}
  .v3 .intro.pics .facts div:last-child{border-bottom:0}
}
@media (max-width:700px){
  .plate::before{background:linear-gradient(180deg,rgba(17,24,31,.12) 0%,rgba(17,24,31,.55) 45%,rgba(17,24,31,.88) 100%)}
}

a.rating-line{text-decoration:none;color:inherit}a.rating-line:hover{text-decoration:underline}

/* hero trust facts (replaces the plate caption) */
.plate .hfacts{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.plate .hfacts b{display:block;font:500 2.1rem/1 var(--disp);font-variation-settings:"opsz" 11;color:#fff;letter-spacing:-.01em}
.plate .hfacts span{display:block;font:500 .72rem/1.4 var(--sans);letter-spacing:.06em;color:var(--dk-mute2,#cfd8de);margin-top:8px;max-width:9.5em}
@media (max-width:700px){.plate .hfacts{gap:22px;margin-top:6px}.plate .hfacts b{font-size:1.7rem}.plate .hfacts span{font-size:.68rem}}

/* ---------- production (10/21): live site additions. ---------- */
/* services list: items without a page yet are plain rows, not links */
.svc>div{display:grid;grid-template-columns:44px 1fr auto;gap:2px 16px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--hair);color:var(--text)}
.svc>div .n{font:italic 500 1rem var(--disp);font-variation-settings:"opsz" 11;color:var(--cyan-d);grid-row:span 2}
.svc>div h3{font:500 1.45rem/1.15 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:0}
.svc>div p{grid-column:2;margin:0;color:var(--mute);font-size:.92rem}
/* towns: plain text until the town pages exist */
.towns span{flex:1 0 25%;padding:20px 0;border-bottom:1px solid var(--hair);font:500 1.35rem var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
@media (max-width:1000px){.towns span{flex-basis:33.3%}}
@media (max-width:600px){.towns span{flex-basis:50%;font-size:1.15rem}}
/* real <img> inside the photo frames (alt text, lazy loading, indexable) */
.pair .img,.mosaic .img,.seq .img,.pstack div,.faqrow .img,.hero-s .pic .img,.pq-photo,.work .hero-img{overflow:hidden;position:relative}
.pair .img img,.mosaic .img img,.seq .img img,.pstack div img,.faqrow .img img,.hero-s .pic .img img,.pq-photo img,.work .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* forms: honeypot, status line, spam check */
.qf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.qf .status{margin:0;padding:16px 18px;border-left:2px solid var(--cyan-d);background:var(--bone);color:var(--ink);font-size:.95rem}
.qf .status.err{border-left-color:#b4452b}
.qf .cf-turnstile{min-height:65px}
.qf button[disabled]{opacity:.6;cursor:wait}
/* inner-page heading rhythm */
.hero-s.inner.plain .wrap{grid-template-columns:1fr;max-width:900px}
.prose{max-width:46em;color:var(--text)}
.prose h2{font:500 clamp(1.5rem,2.4vw,2rem)/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:46px 0 14px}
.prose h3{font:500 1.3rem/1.25 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:30px 0 10px}
.prose p,.prose li{color:var(--text)}
.prose ul{padding-left:1.2em}
.prose a{color:var(--cyan-d)}
/* phone hero: grow with the copy instead of running up under the header; trust facts in one row */
@media (max-width:700px){
  .v3 .plate{height:auto;min-height:92svh}
  .v3 .plate .wrap{padding-top:110px;padding-bottom:120px}
  .plate .hfacts{flex-wrap:nowrap;gap:14px;width:100%}
  .plate .hfacts div{flex:1 1 0;min-width:0}
  .plate .hfacts span{max-width:none;font-size:.64rem}
}
/* before/after gallery (our work) */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:44px 30px;margin-top:50px;align-items:start}
.gallery figure{margin:0}
.gallery figcaption{margin-top:12px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font:600 .66rem/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.gallery figcaption b{font:500 1.15rem/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);letter-spacing:0;text-transform:none}
.gallery figcaption span{text-align:right}
.ba.tall{aspect-ratio:3/4}
@media (max-width:700px){.gallery{grid-template-columns:1fr;gap:36px}}
/* review list (reviews page) */
.rlist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.rcard{background:var(--paper);border:1px solid var(--hair);padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px}
.rcard i{font-style:normal;color:#d9a300;letter-spacing:3px;font-size:.8rem}
.rcard blockquote{margin:0;font:400 1.05rem/1.5 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);text-indent:-.42em;flex:1;text-wrap:pretty}
.rcard cite{font:600 .64rem/1.8 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-style:normal}
@media (max-width:1000px){.rlist{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.rlist{grid-template-columns:1fr}}
/* office map */
.map{aspect-ratio:16/9;max-height:460px;border:1px solid var(--hair);overflow:hidden;background:var(--bone)}
.map iframe{width:100%;height:100%;border:0;display:block}
/* question groups */
.qgroup{margin-top:70px}
.qgroup:first-of-type{margin-top:0}
.qgroup h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:16px 0 24px}
/* homepage hero: lighter file on phones (the page sets the desktop image inline) */
@media (max-width:700px){.v3 .plate-bg{background-image:url(/assets/img/bathtub-refinishing-austin-slipper-tub-phone.webp)!important}}
/* column counts for photo sequences, steps and cards that still stack on phones (inline styles would not) */
.seq.c3,.steps.c3{grid-template-columns:repeat(3,1fr)}
.seq.c4,.steps.c4{grid-template-columns:repeat(4,1fr)}
.seq.c6{grid-template-columns:repeat(6,1fr)}
.cards.c2{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.seq.c4,.seq.c6{grid-template-columns:repeat(3,1fr)}.steps.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.seq.c3,.seq.c4,.seq.c6{grid-template-columns:1fr 1fr}.steps.c3,.steps.c4{grid-template-columns:1fr;gap:0}.cards.c2{grid-template-columns:1fr}}
/* two portrait photos in the pricing block; two stacked photos beside the FAQ */
.pq-photo.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.pq-photo.two img{position:static;height:100%;min-height:520px}
@media (max-width:1000px){.pq-photo.two{aspect-ratio:auto}.pq-photo.two img{min-height:0;aspect-ratio:3/4}}
.faqpics{display:grid;gap:16px;position:sticky;top:110px}
.faqpics figure{margin:0}
.faqpics .img{aspect-ratio:4/3;position:relative;overflow:hidden}
.faqpics .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faqpics figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font:600 .66rem/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.faqpics figcaption span:first-child{color:var(--ink);white-space:nowrap}
@media (max-width:1000px){.faqpics{position:static;grid-template-columns:1fr 1fr}}
@media (max-width:600px){.faqpics{grid-template-columns:1fr}}
/* commercial warranty block: tiers and care notes sit under both columns so neither side runs long */
.pw .pw-foot{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start;margin-top:20px}
.pw .pw-foot .tiers{max-width:560px}
@media (max-width:1000px){.pw .pw-foot{grid-template-columns:1fr;gap:30px}}
/* commercial hero collage: skyline across the top, three job photos below */
.hero-s .pic .collage{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.1fr 1fr;gap:10px;aspect-ratio:4/3.3}
.hero-s .pic .collage .img{position:relative;overflow:hidden;aspect-ratio:auto;min-height:0}
.hero-s .pic .collage .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-s .pic .collage .a{grid-column:1/-1}
/* review sources strip + source label on cards */
.rsources{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.rsrc{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;padding:22px 24px;border:1px solid var(--hair);background:var(--paper);text-decoration:none;color:var(--text)}
.rsrc b{grid-row:span 2;font:500 2.2rem/1 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.rsrc b i{font-style:normal;font-size:.5em;color:#d9a300;margin-left:6px;vertical-align:middle}
.rsrc span{font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.rsrc small{font-size:.84rem;color:var(--mute)}
.rsrc:hover{border-color:var(--ink)}
.rcard cite .src{color:var(--cyan-d)}
@media (max-width:700px){.rsources{grid-template-columns:1fr}}

/* 10/23 edits: bigger logo, full logo in the footer, white color sections, color modal, pricing grid */
.st-logo img{height:50px}
.st-head .wrap{height:88px}
@media (max-width:1000px){.st-nav.open{top:88px}}
.st-foot .mark{display:block;text-decoration:none}
.st-foot .mark img{width:auto;height:58px}
.stock .chip[data-color]{cursor:pointer}
.stock .chip[data-color]:hover .sw{box-shadow:inset 0 0 0 2px var(--cyan-d)}
.cmodal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(17,24,31,.55);backdrop-filter:blur(10px)}
.cmodal.open{display:flex}
.cmodal .pane{width:min(86vw,1100px);height:min(80vh,760px);position:relative;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);display:flex;flex-direction:column}
.cmodal .swatch{flex:1}
.cmodal .bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 24px;background:var(--paper)}
.cmodal .bar b{font:500 1.6rem/1 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink)}
.cmodal .bar span{font:600 .68rem/1.8 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.cmodal .bar small{font-size:.84rem;color:var(--mute)}
.cmodal button{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(17,24,31,.7);color:#fff;font:300 1.6rem/1 var(--sans);cursor:pointer}
.cmodal .prev{left:-26px}.cmodal .next{right:-26px}
.cmodal .close{top:-22px;right:-22px;transform:none;width:44px;height:44px;font-size:1.3rem}
@media (max-width:700px){.cmodal .pane{width:92vw;height:72vh}.cmodal .prev{left:8px}.cmodal .next{right:8px}.cmodal .close{top:8px;right:8px}}
.pq2{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:stretch;margin-top:54px}
.pq2 .pq-card{grid-column:auto;grid-row:auto;margin:0;align-self:stretch}
.pq-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px}
.pq-grid .img{position:relative;overflow:hidden;min-height:180px}
.pq-grid .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.pq2{grid-template-columns:1fr;gap:20px}.pq-grid{grid-auto-rows:auto}.pq-grid .img{aspect-ratio:4/3;min-height:0}}
/* 10/23 round 2: bigger repair sequences, case-study blocks, photo lightbox, long display words */
.seq.c2{grid-template-columns:1fr 1fr}
@media (max-width:600px){.seq.c2{grid-template-columns:1fr}}
.work .big.sm{font-size:clamp(3.4rem,6.5vw,5.6rem)}
.case{display:grid;grid-template-columns:1fr 1.5fr;gap:40px 50px;align-items:start;margin-top:60px;padding-top:40px;border-top:1px solid var(--hair)}
.case:first-of-type{border-top:0;padding-top:0}
.case-head h3{font:500 1.75rem/1.15 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);margin:18px 0 14px}
.case-head p{margin:0;color:var(--mute)}
.case-head p a{color:var(--cyan-d)}
.case .pair{margin-top:0}
.case-ba{margin:0}
.case-ba figcaption{margin-top:12px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font:600 .66rem/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.case-ba figcaption b{font:500 1.15rem/1.2 var(--disp);font-variation-settings:"opsz" 11;color:var(--ink);letter-spacing:0;text-transform:none}
@media (max-width:900px){.case{grid-template-columns:1fr;gap:24px}}
.zoom .img{cursor:zoom-in}
.zoom .img:focus-visible{outline:2px solid var(--cyan-d);outline-offset:2px}
.pmodal .pane{background:#0f151a}
.pmodal .photo{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#0f151a}
.pmodal .photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pmodal .bar small{display:block}
/* 10/23 once-over: review cards flow as columns (no tall-card gaps); phone FAQ shows the questions before the photos */
.rlist{display:block;columns:3;column-gap:24px}
.rlist .rcard{break-inside:avoid;margin:0 0 24px}
@media (max-width:1000px){.rlist{columns:2}.faqrow{gap:36px}.faqrow .faqpics{order:2;margin-top:0}}
@media (max-width:600px){.rlist{columns:1}}
/* 10/26 Nick's round: commercial dropdown (reworked 10/26 pm), social icons, follow line, wider quote column on big screens */
.st-nav{align-items:center}
.st-nav .has-sub{position:relative;display:flex;align-items:center}
.st-nav .has-sub>a{display:inline-flex;align-items:center;gap:7px}
.st-nav .has-sub>a .caret{transition:transform .2s}
.st-nav .has-sub:hover>a .caret,.st-nav .has-sub:focus-within>a .caret{transform:rotate(180deg)}
.st-nav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px}
.st-nav .sub{position:absolute;top:calc(100% + 20px);left:-22px;width:340px;background:var(--paper);border:1px solid var(--hair);border-top:2px solid var(--ink);box-shadow:0 30px 60px -28px rgba(17,24,31,.4);padding:8px;display:none;flex-direction:column;z-index:70}
.st-nav .has-sub:hover .sub,.st-nav .has-sub:focus-within .sub{display:flex}
.st-nav .sub small{display:block;font:600 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:10px 14px 8px}
.st-nav .sub a{display:block;padding:11px 14px;text-transform:none;letter-spacing:0;white-space:normal;color:var(--ink);border-radius:2px}
.st-nav .sub a b{display:flex;align-items:center;gap:8px;font:600 .92rem/1.3 var(--sans)}
.st-nav .sub a b i{font:700 .56rem/1 var(--sans);letter-spacing:.12em;color:var(--cyan-d);border:1px solid currentColor;padding:3px 5px 2px;font-style:normal}
.st-nav .sub a span{display:block;font:400 .8rem/1.4 var(--sans);color:var(--mute);margin-top:3px}
.st-nav .sub a:hover,.st-nav .sub a:focus-visible{background:var(--bone)}
.st-nav .sub a:hover b{color:var(--cyan-d)}
@media (max-width:1000px){
  .st-nav .has-sub{display:block;text-align:center}
  .st-nav .has-sub>a{display:inline-flex}
  .st-nav .has-sub>a .caret{display:none}
  .st-nav .has-sub::after{display:none}
  .st-nav .sub{position:static;display:flex;align-items:center;width:auto;border:0;box-shadow:none;background:transparent;padding:0;margin:12px 0 2px}
  .st-nav .sub small{display:none}
  .st-nav .sub a{padding:7px 0}
  .st-nav .sub a b{justify-content:center;font-size:.95rem;font-weight:500;color:var(--mute)}
  .st-nav .sub a span{display:none}
}
/* home hero fits the first screen: full height minus the 89px header, so the headline and buttons sit above the fold */
.v3 .plate{height:calc(100svh - 89px)}
.social a{display:inline-flex;align-items:center;gap:8px}
.social svg{flex:none}
.follow{margin:26px 0 0;font-size:.92rem;color:var(--mute)}
.follow a{display:inline-flex;align-items:center;gap:6px;color:var(--cyan-d);text-decoration:none;font-weight:600}
.follow a:hover{text-decoration:underline}
.follow svg{width:16px;height:16px}
@media (min-width:1001px){.inq .l{padding-right:max(40px,4vw)}}