:root{
  --yellow:#feb713;
  --yellow-deep:#e2a002;
  --ink:#171310;
  --char:#221d16;
  --char-2:#2d2720;
  --paper:#ffffff;
  --cream:#faf5ea;
  --red:#1d1913;
  --red-deep:#000000;
  --muted:#6d6558;
  --line:#ece3d0;
  --green:#78be20;--green-text:#588f14;
  --amber:#f5a623;
  --display:'Alfa Slab One',serif;
  --body:'Hanken Grotesk',sans-serif;
  --gutter:clamp(20px,4vw,48px);
  --radius:16px;
  --shadow:0 10px 30px rgba(23,19,16,.12);
  --shadow-lg:0 18px 50px rgba(23,19,16,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:140px}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3,h4,.display{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.01em}
section{padding-block:clamp(56px,8vw,96px)}
.eyebrow{display:flex;align-items:center;gap:10px;width:fit-content;font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.75;margin-bottom:14px}
.eyebrow::before{content:"";display:block;width:26px;height:3px;background:var(--yellow);flex:0 0 auto}
/* centred sections used an inline justify-content, which does nothing on an
   inline-block. Real class now, and the flex box also stops the eyebrow
   picking up 26px of line-box leading, which was making the gap to the
   heading 41px in some sections and 14px in others. */
.eyebrow-center{margin-inline:auto}
.sec-title{font-size:clamp(32px,4.6vw,52px);margin-bottom:16px}
.sec-lead{color:var(--muted);max-width:640px;font-size:17.5px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:17px 32px;border-radius:800px;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:var(--yellow-deep)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f2ede4}
.btn-red{background:var(--yellow);color:var(--ink)}
.btn-red:hover{background:var(--yellow-deep)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2c2622}
.btn svg{flex:0 0 auto}

/* ---------- Signature stripe device (van livery) ---------- */
.stripe{height:10px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 22px,var(--ink) 22px 44px)}
/* ---------- Utility bar (top tier) ---------- */
.embar{background:var(--ink);color:#fff;font-weight:700;font-size:13px;position:relative;z-index:60;overflow:hidden}
.embar-in{display:flex;align-items:center;min-height:42px}
.embar-loc{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);white-space:nowrap;letter-spacing:.02em}
.embar-loc svg{flex:0 0 auto;opacity:.85}
.embar-em{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;background:var(--yellow);color:var(--ink);padding:0 var(--gutter) 0 44px;clip-path:polygon(30px 0,100% 0,100% 100%,0 100%)}
.embar-em .lbl{text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;font-weight:800}
.embar-em a{color:var(--ink);font-weight:900;margin-left:10px;text-decoration:none}
.embar-em a:hover{text-decoration:underline}
.embar .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:9px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Header (main tier, scroll-condense) ---------- */
header{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06);transition:box-shadow .28s ease}
header.scrolled{box-shadow:0 12px 34px rgba(0,0,0,.42)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:15px;transition:padding-block .28s ease}
header.scrolled .nav-wrap{padding-block:9px}
.brand{display:inline-flex;align-items:center}
.brand img{height:50px;width:auto;transition:height .28s ease}
header.scrolled .brand img{height:42px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>li{position:relative}
.nav-links>li>a{display:flex;align-items:center;gap:5px;padding:12px 15px;font-weight:700;font-size:15px;position:relative}
.nav-links>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2.5px;background:var(--yellow);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.4,0,.2,1)}
.nav-links>li:hover>a::after,.nav-links>li:focus-within>a::after{transform:scaleX(1)}
.nav-links>li>a{color:#fff}
.nav-links>li>a:hover{color:var(--yellow)}
.nav-links .caret{display:inline-block;transition:transform .22s}
.nav-links>li:hover .caret{transform:rotate(180deg)}

/* ---------- Mega-menu dropdown ---------- */
.dropdown{position:absolute;top:calc(100% + 10px);left:0;transform:translateY(10px);background:#fff;color:var(--ink);border-radius:16px;box-shadow:var(--shadow-lg),0 0 0 1px var(--line);padding:0;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;overflow:hidden;z-index:20;max-width:calc(100vw - 40px)}
.dropdown::before{content:"";position:absolute;top:-9px;left:38px;transform:rotate(45deg);width:18px;height:18px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:4px 0 0 0}
.nav-links>li:hover .dropdown,.nav-links>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.mega{display:grid;grid-template-columns:1fr;width:max-content}
.mega.mega-2{grid-template-columns:340px 250px}
.mega-links{padding:14px;display:flex;flex-direction:column;gap:2px}
.mega-links>a{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;transition:background .16s}
.mega-links>a:hover{background:var(--cream)}
.mega-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:linear-gradient(150deg,#fff5db,#ffe8a8);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(254,183,19,.35);transition:background .18s,transform .18s}
.mega-links>a:hover .mega-ic{background:var(--yellow);transform:translateY(-1px)}
.mega-tx b{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.2}
.mega-tx em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.3}
.mega-feature{background:linear-gradient(160deg,var(--char) 0%,var(--ink) 100%);color:#fff;padding:26px 24px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.mega-feature::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;background:repeating-linear-gradient(-45deg,rgba(254,183,19,.16) 0 10px,transparent 10px 20px);border-radius:50%}
.mega-feature .eyebrow{color:var(--yellow);opacity:1;margin-bottom:8px;position:relative}
.mega-feature h4{font-family:var(--display);font-size:21px;line-height:1.15;margin-bottom:8px;color:#fff;position:relative}
.mega-feature p{font-size:13.5px;color:rgba(255,255,255,.75);margin-bottom:16px;position:relative}
.mega-feature .btn{position:relative;width:100%}
.mega-call{display:block;text-align:center;margin-top:11px;font-weight:700;font-size:13.5px;color:rgba(255,255,255,.8);position:relative}
.mega-call b{color:var(--yellow)}

.nav-cta{display:flex;align-items:center;gap:18px}
.nav-phone{display:flex;align-items:center;gap:10px;line-height:1.2}
.nav-phone .np-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--yellow);flex:0 0 auto;box-shadow:inset 0 0 0 1.5px rgba(254,183,19,.45)}
.nav-phone .np-tx{text-align:left}
.nav-phone a{font-weight:800;font-size:19px;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.nav-phone a:hover{color:var(--yellow)}
.nav-phone span{display:block;font-size:11.5px;color:rgba(255,255,255,.6);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.nav-cta .btn{padding:15px 28px;font-size:13.5px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:80}
.hamburger span{display:block;width:26px;height:3px;background:#fff;margin:5px 0;border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Mobile flyout drawer ---------- */
.drawer{position:fixed;inset:0;background:var(--char);color:#fff;z-index:70;transform:translateX(103%);transition:transform .38s cubic-bezier(.32,.72,0,1);visibility:hidden;display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:15px var(--gutter);background:#fff;position:sticky;top:0;z-index:2}
.drawer-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--ink) 14px 28px)}
.drawer-head img{height:46px}
.drawer-close{width:42px;height:42px;border-radius:50%;background:var(--cream);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.drawer-close svg{width:18px;height:18px}
.drawer-cta{padding:18px var(--gutter) 6px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drawer-cta .btn{width:100%;padding:15px 10px;font-size:13px}
.drawer-cta .dc-call{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.drawer-cta .dc-call:hover{box-shadow:inset 0 0 0 2px var(--yellow);color:var(--yellow)}
.drawer-nav{flex:1;padding:10px var(--gutter) 4px}
.drawer-nav>*{opacity:0;transform:translateX(16px)}
.drawer.open .drawer-nav>*{animation:drawer-in .42s cubic-bezier(.32,.72,0,1) forwards}
.drawer.open .drawer-nav>*:nth-child(1){animation-delay:.10s}
.drawer.open .drawer-nav>*:nth-child(2){animation-delay:.15s}
.drawer.open .drawer-nav>*:nth-child(3){animation-delay:.20s}
.drawer.open .drawer-nav>*:nth-child(4){animation-delay:.25s}
.drawer.open .drawer-nav>*:nth-child(5){animation-delay:.30s}
@keyframes drawer-in{to{opacity:1;transform:none}}
.drawer-nav .acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:none;border:none;color:#fff;font-family:var(--body);font-weight:700;font-size:17px;padding:17px 0;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.12)}
.drawer-nav .acc>button .acc-lead{display:inline-flex;align-items:center;gap:12px}
.drawer-nav .acc>button .d-ic{width:34px;height:34px;border-radius:9px;background:rgba(254,183,19,.14);display:flex;align-items:center;justify-content:center;color:var(--yellow);flex:0 0 auto}
.drawer-nav .acc>button .caret{transition:transform .25s;color:var(--yellow)}
.drawer-nav .acc.open>button .caret{transform:rotate(180deg)}
.drawer-nav .acc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.drawer-nav .acc-panel a{display:block;padding:12px 0 12px 46px;color:rgba(255,255,255,.8);font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.06)}
.drawer-nav .acc-panel a:hover{color:var(--yellow)}
.drawer-nav>a{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:17px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.drawer-nav>a .d-ic{width:34px;height:34px;border-radius:9px;background:rgba(254,183,19,.14);display:flex;align-items:center;justify-content:center;color:var(--yellow);flex:0 0 auto}
.drawer-foot{padding:20px var(--gutter) 30px;background:var(--char-2);border-top:1px solid rgba(255,255,255,.08)}
.drawer-trust{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.drawer-trust li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82)}
.drawer-trust svg{flex:0 0 auto;color:var(--yellow)}
.drawer-stars{color:var(--amber);letter-spacing:2px}
.drawer-social{display:flex;gap:10px}
.drawer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .18s,color .18s}
.drawer-social a:hover{background:var(--yellow);color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(23,19,16,.6);backdrop-filter:blur(2px);z-index:65;opacity:0;visibility:hidden;transition:opacity .3s}
.scrim.show{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* ---------- Hero (full-bleed photo, layered) ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;padding-block:clamp(44px,5.5vw,82px);background:var(--char);overflow:clip}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--yellow);z-index:3}
.hero + .stripe{display:none}
.hero-bg{position:absolute;inset:0;background:url('../photos/hero-van-3184.jpg') center 58%/cover no-repeat;will-change:transform}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,7,.85) 0%,rgba(18,13,7,0) 22%),linear-gradient(93deg,rgba(18,13,7,.92) 0%,rgba(18,13,7,.78) 34%,rgba(18,13,7,.4) 58%,rgba(18,13,7,.1) 80%,rgba(18,13,7,0) 100%)}
.hero-steam{position:absolute;right:2%;bottom:0;width:34%;height:58%;pointer-events:none;overflow:hidden;z-index:1}
.hero-steam span{position:absolute;bottom:-20%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 70%);filter:blur(6px);animation:steam-rise 7s ease-in infinite}
.hero-steam span:nth-child(1){left:10%;animation-delay:0s}
.hero-steam span:nth-child(2){left:46%;width:60px;height:60px;animation-delay:2.3s}
.hero-steam span:nth-child(3){left:76%;width:70px;height:70px;animation-delay:4.6s}
@keyframes steam-rise{0%{transform:translateY(0) scale(.7);opacity:0}20%{opacity:.6}100%{transform:translateY(-220%) scale(1.3);opacity:0}}
.hero .container{position:relative;z-index:2}
.hero-inner{max-width:730px}
.hero h1{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:800;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px}
.hero h1::before{content:"";width:30px;height:2.5px;background:var(--yellow);border-radius:2px}
.hero .hero-head{font-family:var(--display);color:#fff;font-size:clamp(44px,5.7vw,76px);line-height:.98;letter-spacing:-.015em;margin-bottom:18px;text-shadow:0 3px 22px rgba(0,0,0,.45)}
.hero .hero-head em{display:block;font-style:normal;color:var(--yellow);margin-top:.08em}
.hero-sub{color:rgba(255,255,255,.9);font-size:18px;line-height:1.6;max-width:556px;margin-bottom:22px}
.hero-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;margin-bottom:26px;max-width:580px}
.hero-checks li{display:flex;gap:11px;align-items:center;color:#fff;font-weight:700;font-size:15px;line-height:1.25}
.hero-checks .hc-ic{width:32px;height:32px;border-radius:9px;background:var(--yellow);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.hero-checks svg{flex:0 0 auto}
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:22px}
.hero-rating{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:rgba(255,255,255,.9)}
.hero-rating .hr-stars{color:var(--amber);letter-spacing:2px;font-size:16px}
.hero-rating b{color:#fff;font-weight:800}

/* ---------- Floating real-quote card ---------- */
.hero-quote{position:absolute;right:0;bottom:clamp(46px,6vw,84px);z-index:3;background:#fff;color:var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);padding:20px 22px;max-width:270px}
.hero-quote .hq-mark{font-family:var(--display);font-size:34px;color:var(--yellow);line-height:.6;display:block;margin-bottom:8px}
.hero-quote p{font-size:14.5px;font-weight:600;line-height:1.4;margin-bottom:12px}
.hq-who{display:flex;align-items:center;gap:10px}
.hq-who .hq-avatar{width:34px;height:34px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--ink);flex:0 0 auto}
.hq-who b{display:block;font-size:13.5px}
.hq-who span{font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.hero-bg{transition:none !important}.hero-steam span{animation:none;opacity:0}}


/* ---------- Trust strip ---------- */
.trust-strip{background:var(--ink);padding:0}
.trust-strip .container{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:18px;flex-wrap:nowrap}
.trust-item{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:14.5px;letter-spacing:.04em;white-space:nowrap}
.trust-item svg{flex:0 0 auto}
.trust-item b{color:var(--yellow);font-weight:800}

/* ---------- Services ---------- */
.services{background:var(--cream)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.svc-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.svc-card .img{height:190px;overflow:hidden}
.svc-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.svc-card:hover .img img{transform:scale(1.05)}
.svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-body h3{font-size:21px;margin-bottom:10px}
.svc-body p{color:var(--muted);font-size:15.5px;flex:1}
.svc-link{margin-top:16px;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:3px solid var(--yellow);padding-bottom:2px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px}
.svc-link svg{transition:transform .2s}
.svc-card:hover .svc-link svg{transform:translateX(4px)}
.svc-card:hover .svc-link{border-bottom-color:var(--green)}
.svc-24{position:absolute;margin:14px;background:var(--ink);color:var(--yellow) !important;color:#fff;font-weight:800;font-size:12px;letter-spacing:.1em;padding:6px 13px;border-radius:800px}

/* ---------- Heritage ---------- */
.heritage .container{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.heritage-photo{position:relative}
.heritage-photo img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%}
.heritage-badge{position:absolute;bottom:-22px;right:-14px;background:var(--yellow);color:var(--ink);font-family:var(--display);font-size:24px;padding:16px 26px;border-radius:14px;box-shadow:var(--shadow-lg);line-height:1.1;text-align:center}
.heritage-badge span{display:block;font-family:var(--body);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.heritage-copy .checks{margin-top:22px;display:grid;gap:13px}
.heritage-copy .checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:16.5px}
.heritage-copy .checks svg{flex:0 0 auto;margin-top:3px}
.heritage-copy .btn{margin-top:30px}

/* ---------- Stats band ---------- */
.stats{background:var(--yellow);padding-block:44px}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat .num{font-family:var(--display);font-size:clamp(36px,4.6vw,58px);color:var(--ink);line-height:1}
.stat .lbl{font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;color:rgba(23,19,16,.78)}

/* ---------- IAQ band ---------- */
.iaq .container{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center}
.iaq-photo img{border-radius:var(--radius);width:100%}
.iaq .checks{margin-top:22px;display:grid;gap:13px}
.iaq .checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:16.5px}
.iaq .checks svg{flex:0 0 auto;margin-top:3px}
.iaq .btn{margin-top:30px}

/* ---------- Emergency section ---------- */
.emergency{background:var(--char);color:#fff;position:relative;overflow:hidden}
.emergency .container{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center;position:relative;z-index:2}
.emergency .eyebrow{color:var(--yellow);opacity:1}
.emergency .sec-title{color:#fff}
.emergency p.lead{color:rgba(255,255,255,.82);font-size:17.5px;max-width:560px}
.em-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.em-card{background:var(--char-2);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:20px 18px}
.em-card h4{font-family:var(--body);font-weight:800;font-size:16px;margin:12px 0 6px}
.em-card p{font-size:14px;color:rgba(255,255,255,.72)}
.emergency .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.em-photo img{border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.5);width:100%}
.em-photo .cap{font-size:13px;color:rgba(255,255,255,.55);margin-top:10px}

/* ---------- Process ---------- */
.process{background:var(--cream)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.step{background:#fff;border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow);position:relative}
.step .n{font-family:var(--display);font-size:44px;color:var(--yellow);line-height:1}
.step h3{font-size:19px;margin:14px 0 8px}
.step p{color:var(--muted);font-size:15px}

/* ---------- Compare ---------- */
.compare-table{margin-top:44px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.compare-table table{width:100%;border-collapse:collapse;background:#fff}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;font-size:15.5px;border-bottom:1px solid var(--line)}
.compare-table th{background:var(--ink);color:#fff;font-family:var(--body);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.compare-table th:nth-child(2){background:var(--yellow);color:var(--ink)}
.compare-table td:first-child{font-weight:700}
.compare-table td:nth-child(2){background:#fffaf0;font-weight:600}
.compare-table tr:last-child td{border-bottom:none}
.yes{color:var(--green-text);font-weight:800}
.no{color:#a39a8a;font-weight:700}
.table-scroll{overflow-x:auto}

/* ---------- Testimonials ---------- */
.reviews{background:var(--paper)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.rev-card{background:var(--cream);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;box-shadow:0 4px 16px rgba(23,19,16,.06)}
.rev-stars{color:var(--amber);letter-spacing:2px;font-size:17px;margin-bottom:12px}
.rev-card p{font-size:15.5px;flex:1}
.rev-meta{margin-top:18px;display:flex;align-items:center;gap:12px}
.rev-meta .avatar{width:44px;height:44px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:var(--ink)}
.rev-meta .who b{display:block;font-size:15.5px}
.rev-meta .who span{font-size:13.5px;color:var(--muted)}
.rev-note{text-align:center;margin-top:26px;font-size:14px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{background:var(--cream)}
.faq-list{max-width:820px;margin:44px auto 0}
.faq-item{background:#fff;border-radius:14px;margin-bottom:14px;box-shadow:0 4px 14px rgba(23,19,16,.06);overflow:hidden}
.faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;font-family:var(--body);font-weight:700;font-size:17px;text-align:left;padding:22px 26px;cursor:pointer;color:var(--ink)}
.faq-item .caret{transition:transform .25s;flex:0 0 auto}
.faq-item.open .caret{transform:rotate(180deg)}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-panel p{padding:0 26px 22px;color:var(--muted);font-size:15.5px}

/* ---------- Areas ---------- */
.areas-grid{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(30px,5vw,64px);margin-top:40px;align-items:start}
.homebase{background:var(--ink);color:#fff;border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-lg)}
.homebase h3{font-size:21px;color:var(--yellow);margin-bottom:10px}
.homebase p{font-size:15px;color:rgba(255,255,255,.82);line-height:1.7}
.homebase .tel{display:inline-block;margin-top:14px;font-weight:800;font-size:19px;color:var(--yellow)}
.homebase .hb-note{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.6)}
.county-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.county h3{font-family:var(--display);font-size:16px;letter-spacing:.02em;margin-bottom:12px;padding-bottom:8px;border-bottom:3px solid var(--yellow)}
.county li{font-size:14.5px;color:var(--muted);padding:4px 0;font-weight:500}
.county li.hb{color:var(--ink);font-weight:700}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.final-cta::before{content:"";position:absolute;inset:0;z-index:-2;background:url('../photos/techs-tablet.jpg') center 30% / cover no-repeat;filter:grayscale(.25)}
.final-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,19,16,.78) 0%,rgba(23,19,16,.62) 50%,rgba(23,19,16,.82) 100%)}
.final-cta .cta-slash{position:absolute;right:-70px;top:-34px;width:300px;height:132px;background:var(--yellow);transform:skewX(-18deg);opacity:.28;z-index:0;pointer-events:none}
.final-cta .container{position:relative;z-index:1}
.final-cta .sec-title{color:var(--yellow);max-width:760px;margin-inline:auto;font-size:clamp(34px,4.8vw,54px)}
.final-cta p{color:rgba(255,255,255,.88);max-width:560px;margin:0 auto 32px;font-size:17.5px}
.final-cta .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{background:var(--char);color:rgba(255,255,255,.8)}
.foot-trust{border-bottom:1px solid rgba(255,255,255,.1)}
.foot-trust .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:22px;flex-wrap:wrap}
.foot-trust .trust-item{font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,54px);padding-block:54px}
.foot-grid img{height:46px;margin-bottom:18px}
.foot-grid p{font-size:14.5px;line-height:1.7}
.foot-grid h4{font-family:var(--body);color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.foot-grid li{margin-bottom:11px}
.foot-grid a:hover{color:var(--yellow)}
.foot-grid .tel{font-size:20px;font-weight:800;color:var(--yellow)}
.foot-cov{border-top:1px solid rgba(255,255,255,.1)}
.foot-cov .container{padding-block:26px}
.foot-cov p{font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.55)}
.foot-cov b{color:rgba(255,255,255,.8);font-weight:700}
.foot-legal{border-top:1px solid rgba(255,255,255,.1)}
.foot-legal .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:22px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5)}
.back-top{position:fixed;right:20px;bottom:90px;width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--ink);border:none;cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s;z-index:40}
.back-top.show{opacity:1;visibility:visible}
.back-top:hover{transform:translateY(-3px)}

/* ---------- Mobile CTA dock ---------- */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:45;background:var(--ink);padding:9px 20px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -10px 34px rgba(0,0,0,.45);align-items:center;justify-content:space-between}
.mobile-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--yellow)}
.mb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:#fff;font-family:var(--body);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.mb-item svg{flex:0 0 auto}
.mb-fab{flex:0 0 auto;width:66px;height:66px;border-radius:50%;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-top:-30px;border:5px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.mb-fab:hover{background:var(--yellow-deep)}
/* hidden until the hero's own buttons scroll out (site.js toggles .show) */
.mobile-bar{transform:translateY(calc(100% + 40px));transition:transform .28s ease}
.mobile-bar.show{transform:none}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-phone{display:none}
  .nav-cta .btn{display:none}
  .hamburger{display:block}
  .nav-wrap{padding-block:12px}
  header.scrolled .nav-wrap{padding-block:10px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .heritage .container,.iaq .container,.emergency .container{grid-template-columns:1fr}
  .em-photo{order:-1}
  .trust-strip .container{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .trust-item{white-space:normal}
}
@media(max-width:768px){
  html{scroll-padding-top:118px}
  /* phone-tight padding moved to its own query below; at 768 the clamp
     gives 61px, which a tablet-width layout needs. */
  body{padding-bottom:74px}
  .mobile-bar{display:flex}
  .embar{font-size:12px;overflow:visible}
  .embar-in{min-height:0;padding-block:8px;justify-content:center}
  .embar-loc{display:none}
  .embar-em{position:static;background:transparent;color:#fff;clip-path:none;padding:0;white-space:normal;text-align:center;line-height:1.35}
  .embar-em .lbl{color:#fff}
  .embar-em a{color:var(--yellow)}
  .embar .pulse{background:var(--yellow)}
  /* Nav lives in the bottom dock at this width, so drop the top-right hamburger
     and let the logo center and grow. */
  .hamburger{display:none}
  /* nav + nav-cta remain in flow at zero width; their flex gaps would push the
     logo off-centre, so collapse the gap rather than hide the drawer's parent. */
  .nav-wrap{justify-content:center;gap:0}
  .brand img{height:60px}
  header.scrolled .brand img{height:50px}
  body{padding-bottom:82px}
  .hero{min-height:560px}
  .hero-bg{background-image:url('../photos/hero-van-3184-mobile.jpg');background-position:55% 60%}
  .hero-scrim{background:linear-gradient(180deg,rgba(20,15,8,.9) 0%,rgba(20,15,8,.8) 45%,rgba(20,15,8,.68) 68%,rgba(20,15,8,.5) 100%)}
  .hero-sub{font-size:16.5px}
  .hero-quote{position:static;max-width:none;margin-top:22px}
  .svc-grid{grid-template-columns:1fr 1fr;gap:16px}
  .svc-card .img{height:130px}
  .svc-body{padding:16px}
  .svc-body h3{font-size:17px}
  .svc-body p{font-size:14px}
  .rev-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:14px}
  .step{padding:22px 18px}
  .stats .container{grid-template-columns:repeat(2,1fr);gap:26px}
  .heritage-badge{right:8px;bottom:-18px;font-size:19px;padding:12px 20px}
  .em-cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;padding-block:40px}
  .areas-grid{grid-template-columns:1fr}
  .county-cols{grid-template-columns:1fr 1fr;gap:20px}
  .back-top{bottom:150px;right:14px}
}
@media(max-width:480px){
  .hero-checks{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
  .final-cta .btn-row .btn{width:100%}
  .svc-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .stat .num{font-size:30px}
  .trust-strip .container{grid-template-columns:1fr 1fr;gap:12px}
  .trust-item{font-size:12.5px}
}

/* ============================================================
   Booking flow + Offers  (added 2026-09-21)
   ============================================================ */
.bk-head{background:var(--ink);color:#fff;padding-block:clamp(38px,5vw,62px)}
.bk-head .eyebrow{color:#fff;opacity:.85}
.bk-head h1{font-size:clamp(30px,4.2vw,48px);color:#fff}
.bk-head p{color:#cdc4b6;max-width:620px;margin-top:12px}
.bk-steps{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.bk-step{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8d8477;padding:8px 14px;border-radius:800px;background:rgba(255,255,255,.06)}
.bk-step .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#cdc4b6;font-size:12px}
.bk-step.on{color:var(--ink);background:var(--yellow)}
.bk-step.on .n{background:rgba(0,0,0,.18);color:var(--ink)}
.bk-step.done{color:var(--yellow)}
.bk-step.done .n{background:var(--yellow);color:var(--ink)}

.bk-wrap{display:grid;grid-template-columns:1fr 372px;gap:40px;align-items:start}
.bk-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.bk-pane{display:none}
.bk-pane.on{display:block;animation:bkIn .3s ease}
@keyframes bkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bk-q{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.bk-sub{color:var(--muted);margin-bottom:22px;font-size:16px}

.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.bk-card{position:relative;border:2px solid var(--line);border-radius:14px;padding:18px 16px;cursor:pointer;background:#fff;text-align:left;transition:border-color .16s,background .16s,transform .16s;font-family:var(--body)}
.bk-card:hover{border-color:var(--yellow);transform:translateY(-2px)}
.bk-card.sel{border-color:var(--yellow);background:#fffdf5}
.bk-card .ic{width:38px;height:38px;color:var(--ink);margin-bottom:11px}
.bk-card b{display:block;font-size:16px;margin-bottom:3px}
.bk-card span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}
.bk-card .tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--yellow);display:none;place-items:center}
.bk-card.sel .tick{display:grid}

.bk-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.bk-row:last-child{border-bottom:none}
.bk-row .lbl b{display:block;font-size:16.5px}
.bk-row .lbl span{color:var(--muted);font-size:13.5px}
.stepper{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.stepper button{width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:#fff;font-size:19px;font-weight:800;cursor:pointer;color:var(--ink);line-height:1;font-family:var(--body)}
.stepper button:hover{border-color:var(--yellow)}
.stepper .v{min-width:46px;text-align:center;font-weight:800;font-size:17px}
/* booking flow: stairs and add-ons sit under their service row */
.bk-sub-row{padding-left:18px;border-left:3px solid var(--line)}
.bk-addons{display:flex;flex-direction:column;gap:9px;padding:6px 0 16px 18px;border-left:3px solid var(--line);border-bottom:1px solid var(--line)}
.bk-addons-h{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bk-addon{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer;line-height:1.4}
.bk-addon input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--yellow-deep,#e0a100)}
.bk-sum .line.sub{padding:5px 0 5px 12px;font-size:13.5px;color:var(--muted);border-bottom:none}

.bk-field{margin-bottom:18px}
.bk-field label{display:block;font-weight:800;font-size:14px;margin-bottom:7px}
.bk-field input,.bk-field select,.bk-field textarea{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:12px;font-family:var(--body);font-size:16px;background:#fff;color:var(--ink)}
.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus{outline:none;border-color:var(--yellow)}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-note{font-size:13.5px;color:var(--muted);margin-top:7px}
.bk-ok{display:flex;gap:10px;align-items:flex-start;background:#f3faea;border:1px solid #cfe7ab;color:#41631a;border-radius:12px;padding:13px 15px;font-size:14.5px;margin-top:12px}
.bk-bad{display:flex;gap:10px;align-items:flex-start;background:#fdf3f2;border:1px solid #f0cfc9;color:#9c3a29;border-radius:12px;padding:13px 15px;font-size:14.5px;margin-top:12px}

.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:6px}
.slot{border:2px solid var(--line);border-radius:12px;padding:13px 12px;background:#fff;cursor:pointer;text-align:center;font-family:var(--body)}
.slot b{display:block;font-size:15.5px}
.slot span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.slot:hover{border-color:var(--yellow)}
.slot.sel{border-color:var(--yellow);background:#fffdf5}
.slot.full{opacity:.4;cursor:not-allowed}
.slot.full:hover{border-color:var(--line)}

.bk-nav{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.bk-nav .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

/* summary rail */
.bk-sum{position:sticky;top:132px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.bk-sum h3{font-family:var(--display);font-size:21px;margin-bottom:4px}
.bk-sum .cap{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.bk-sum .line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px}
.bk-sum .line b{font-weight:800}
/* the confirmation recap reuses .line; without these the label and value ran together ("ServiceCarpet Cleaning") */
.bk-recap .line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px;text-align:left}
.bk-recap .line span{color:var(--muted);flex:0 0 auto}
.bk-recap .line b{font-weight:800;text-align:right}
.bk-sum .empty{color:var(--muted);font-size:14.5px;padding:10px 0}
.bk-offers{margin-top:18px}
.bk-offers .oh{font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);margin-bottom:9px}
.ochip{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid #cfe7ab;border-radius:11px;padding:11px 13px;margin-bottom:8px;font-size:14px;line-height:1.4}
.ochip svg{flex:0 0 auto;margin-top:2px}
.bk-sum .fine{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.5}
.bk-callout{background:var(--ink);color:#fff;border-radius:12px;padding:15px 16px;margin-top:16px;font-size:14px}
.bk-callout a{color:var(--yellow);font-weight:800}

/* confirmation */
.bk-done{text-align:center;padding:16px 0}
.bk-done .big{width:74px;height:74px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 20px}
.bk-done h2{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);margin-bottom:10px}
.bk-recap{text-align:left;background:var(--cream);border-radius:14px;padding:22px;margin-top:22px}

/* offers page */
.off-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:20px;margin-top:38px}
.off-card{position:relative;border:2px dashed var(--line);border-radius:var(--radius);background:#fff;padding:26px 24px 22px;display:flex;flex-direction:column}
.off-card.hot{border-color:var(--yellow);background:#fffdf5}
.off-tag{position:absolute;top:-12px;left:22px;background:var(--yellow);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:800px}
.off-card .amt{font-family:var(--display);font-size:clamp(26px,3vw,34px);line-height:1.08;margin-bottom:8px}
.off-card .svc{font-weight:800;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.off-card p{color:var(--muted);font-size:15px;flex:1}
.off-card .btn{margin-top:18px;width:100%}
.off-fine{margin-top:34px;padding:22px 24px;background:var(--cream);border-radius:14px;color:var(--muted);font-size:13.5px;line-height:1.6}

@media(max-width:1040px){
  .bk-wrap{grid-template-columns:1fr}
  .bk-sum{position:static}
}
@media(max-width:600px){
  .bk-two{grid-template-columns:1fr}
  .bk-steps{gap:6px}
  .bk-step{padding:7px 11px;font-size:11.5px}
}


/* wider residential mega: two link columns + feature */
.mega.mega-3{grid-template-columns:318px 318px 250px}
.mega-3 .mega-links{padding:14px 10px}
.mega-3 .mega-links>a{padding:9px 11px;gap:11px}
.mega-3 .mega-ic{width:36px;height:36px;border-radius:9px}
.mega-3 .mega-ic svg{width:18px;height:18px}
.mega-3 .mega-tx b{font-size:14.2px}
.mega-3 .mega-tx em{font-size:12.2px}
.mega-col-h{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 11px 8px}
@media(max-width:1180px){.mega.mega-3{grid-template-columns:300px 300px}.mega-3 .mega-feature{display:none}}

@media(max-width:1200px){
  .nav-phone .np-ic{display:none}
  .nav-phone a{font-size:17px}
  .nav-cta{gap:12px}
  .nav-cta .btn{padding:13px 20px;font-size:12.5px}
}

/* ============================================================
   Mobile drawer v2 — kill the void, surface the work
   ============================================================ */
.drawer-nav{flex:0 0 auto}
.drawer-nav>*{opacity:0;transform:translateX(16px)}
.drawer.open .drawer-nav>*:nth-child(6){animation-delay:.33s}
.drawer.open .drawer-nav>*:nth-child(7){animation-delay:.36s}
.drawer.open .drawer-nav>*:nth-child(8){animation-delay:.39s}
.drawer.open .drawer-nav>*:nth-child(9){animation-delay:.42s}

/* emergency strip */
.drawer-nav>a.d-emg{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#33291a,#241d13);border:1px solid rgba(254,183,19,.3);border-radius:14px;padding:13px 15px;margin:14px 0 6px}
.drawer-nav>a.d-emg .pulse{width:9px;height:9px;border-radius:50%;background:var(--yellow);flex:0 0 auto;box-shadow:0 0 0 0 rgba(254,183,19,.7);animation:dpulse 1.9s infinite}
@keyframes dpulse{70%{box-shadow:0 0 0 9px rgba(254,183,19,0)}100%{box-shadow:0 0 0 0 rgba(254,183,19,0)}}
.drawer-nav>a.d-emg b{display:block;font-size:14.5px;color:#fff}
.drawer-nav>a.d-emg span{display:block;font-size:12.5px;color:rgba(255,255,255,.62)}
.drawer-nav>a.d-emg>span:nth-child(2){flex:1 1 auto;min-width:0}
.drawer-nav>a.d-emg .go{margin-left:auto;flex:0 0 auto;color:var(--yellow);font-weight:800;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.drawer-nav>a.d-emg b,.drawer-nav>a.d-emg>span:nth-child(2)>span{overflow-wrap:anywhere}

/* section label */
.d-lab{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:18px 0 10px}

/* service tiles */
.d-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.d-tile{display:flex;flex-direction:column;gap:9px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:14px 13px;min-height:88px;justify-content:center;transition:background .16s,border-color .16s}
.d-tile:active,.d-tile:hover{background:rgba(254,183,19,.1);border-color:rgba(254,183,19,.42)}
.d-tile .ti{width:30px;height:30px;color:var(--yellow)}
.d-tile .ti svg{width:100%;height:100%}
.d-tile b{font-size:14px;font-weight:800;color:#fff;line-height:1.25}

/* offers card */
.drawer-nav>a.d-offer{display:flex;align-items:center;gap:14px;background:var(--yellow);border-radius:14px;padding:15px 16px;margin-top:16px;color:var(--ink)}
.drawer-nav>a.d-offer .amt{font-family:var(--display);font-size:27px;line-height:1;flex:0 0 auto}
.drawer-nav>a.d-offer b{display:block;font-size:14px;line-height:1.25}
.drawer-nav>a.d-offer span{display:block;font-size:12.5px;opacity:.72;margin-top:2px}
.drawer-nav>a.d-offer .go{margin-left:auto;flex:0 0 auto}

/* compact rows */
.d-rows{margin-top:6px}
.drawer-nav .d-rows>a{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer-nav .d-rows>a .d-ic{width:32px;height:32px;border-radius:9px;background:rgba(254,183,19,.14);display:flex;align-items:center;justify-content:center;color:var(--yellow);flex:0 0 auto}
.drawer-nav .d-rows>a .cnt{margin-left:auto;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.45)}
.drawer-nav .d-rows>a:last-child{border-bottom:none}

.drawer-nav>a.d-emg,.drawer-nav>a.d-offer{border-bottom:none;font-size:inherit;font-weight:400}

.drawer-nav .d-rows>a .lb{flex:1 1 auto;min-width:0}
.drawer-nav .d-rows>a .go{flex:0 0 auto;color:rgba(255,255,255,.4)}
.drawer-nav .d-rows>a .cnt{margin-left:0;margin-right:10px}

/* ---- mobile hero: get the primary CTA above the sticky dock ----
   The bottom .mobile-bar is fixed at 63px tall, so the real fold on a 844px
   phone is ~781px. Measured 2026-09-21: the CTA block started at y=766 and
   ran to 895, i.e. the primary action was effectively invisible on the
   highest-traffic screen we have. Two changes: promote the CTAs above the
   trust chips, and stop the chips eating 164px in a single column. */
@media(max-width:768px){
  .hero-inner{display:flex;flex-direction:column}
  .hero-inner>h1{order:1}
  .hero-inner>.hero-head{order:2}
  .hero-inner>.hero-sub{order:3}
  .hero-inner>.hero-ctas{order:4}
  .hero-inner>.hero-checks{order:5}
  .hero-inner>.hero-rating{order:6}
  .hero-inner>.hero-quote,.hero-inner>.hero-trust{order:7}

  .hero-head{font-size:clamp(34px,10vw,42px);line-height:1.06}
  .hero-sub{margin-bottom:20px}
  .hero-ctas{margin-bottom:22px}
  .hero-checks{grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:20px}
  .hero-checks li{font-size:13.5px;gap:9px}
  .hero-checks .hc-ic{width:27px;height:27px;border-radius:8px}
  .hero-checks .hc-ic svg{width:14px;height:14px}
}
@media(max-width:400px){
  .hero-checks li{font-size:12.8px}
}

/* ---- header: stop nav items wrapping ----
   `.nav-links>li>a` is a flex child that will shrink below its content width,
   so "Service Areas" broke onto two lines in the UNSCROLLED header (the taller
   logo takes more room) while every other item stayed on one. The row then sat
   visibly lumpy on the first screen anyone sees. Measured 2026-09-21: the item
   was squeezed to 107px against a header with 136px of free space, so this is
   a shrink problem, not a space problem. */
.nav-links>li{flex:0 0 auto}
.nav-links>li>a{white-space:nowrap;flex:0 0 auto}

/* ---- emergency: give the three cards the full width ----
   They were nested inside the 1.1fr copy column, so at 1440 each card had
   about 200px. "Mold Remediation" wrapped to two lines while the other two
   headings did not, and every card's body broke into five or six short ragged
   lines. Moved to a direct child of the container spanning both columns, which
   takes each card to roughly 390px. */
.emergency .container{align-items:start}
.emergency .em-cards{grid-column:1 / -1;margin-top:8px}
.em-cards{gap:18px}
.em-card{padding:24px 22px}
.em-card h4{font-size:17px;margin:14px 0 7px}
.em-card p{font-size:14.5px;line-height:1.55}
.emergency .em-photo{align-self:start}
@media(max-width:900px){
  .em-cards{grid-template-columns:1fr}
}

/* offers: trailing CTA tile fills the 12th cell of an 11-card grid */
.off-cta{display:flex;flex-direction:column;justify-content:center;gap:10px;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--char) 0%,var(--ink) 100%);color:#fff;padding:30px 26px;border:2px solid var(--ink)}
.off-cta h3{font-family:var(--display);font-size:24px;line-height:1.14;color:#fff}
.off-cta p{color:rgba(255,255,255,.72);font-size:15px}
.off-cta .btn{margin-top:14px;width:100%}

/* ---- .checks was only ever styled under .heritage-copy and .iaq ----
   Every city and service page puts a .checks list inside .services, where no
   rule matched it: zero gap between items, icons top-aligned to the text box,
   no flex. Measured 2026-09-21 on coral-gables: gaps between the three items
   were 0px and 1px. Promoted to a global rule; the two scoped copies above
   are now redundant but harmless. */
.checks{margin-top:22px;display:grid;gap:13px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:16.5px;line-height:1.45}
.checks svg{flex:0 0 auto;margin-top:3px}

/* hub pages: compact secondary service list under the featured cards */
.more-svc{margin-top:44px}
.more-svc h3{font-family:var(--display);font-size:22px;margin-bottom:6px}
.more-svc>p{color:var(--muted);font-size:15.5px;margin-bottom:20px}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.more-grid a{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;font-weight:700;font-size:15px;transition:border-color .16s,transform .16s,box-shadow .16s}
.more-grid a:hover{border-color:var(--yellow);transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,19,16,.07)}
.more-grid .mi{width:30px;height:30px;border-radius:8px;background:var(--cream);display:grid;place-items:center;color:var(--ink);flex:0 0 auto}
.more-grid .mi svg{width:17px;height:17px}
@media(max-width:1000px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.more-grid{grid-template-columns:1fr}}

/* city lists: link affordance without 39 permanent underlines */
.county ul li a{color:inherit;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s}
.county ul li a:hover{color:var(--ink);border-bottom-color:var(--yellow)}
.county ul li.hb a{font-weight:800}

/* ---- step / card headings: reserve two lines so bodies share a baseline ----
   Measured 2026-09-21: on dryer-vent-cleaning two of four step headings wrapped
   and two did not, so the body copy started 21px lower in half the row. Same on
   the homepage's four-step section. Reserving the second line costs nothing
   where headings are already two lines and fixes the row where they are not. */
.steps .step h3{min-height:2.24em;display:flex;align-items:flex-start}
.svc-card .svc-body h3{min-height:1.12em}
@media(max-width:768px){
  .steps .step h3{min-height:0;display:block}
}

/* booking: tile titles share a baseline, emergency tile spans the row */
.bk-card b{min-height:44px;display:flex;align-items:flex-start}
.bk-card-wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px}
.bk-card-wide .ic{margin-bottom:0}
.bk-card-wide b{min-height:0;display:block}
.bk-card-wide .tx{display:block}
@media(max-width:600px){
  .bk-card b{min-height:0;display:block}
  .bk-card-wide{flex-direction:column;align-items:flex-start}
}

/* ---- city links need a tap affordance on touch ----
   The hover underline is invisible on a phone, so 39 tappable city names read
   as plain text. Restore a persistent underline wherever hover does not exist.
   Caught by looking at the 390 render; no geometry probe would surface it. */
@media (hover:none){
  .county ul li a{border-bottom-color:rgba(254,183,19,.55)}
}
.county ul li.hb a{font-weight:800;border-bottom-color:var(--yellow)}

/* ---- final CTA slash is desktop-only decoration ----
   It is 343px wide at right:-70px, which clears the headline at 1440 but at
   390 spans most of the viewport and overlaps the yellow display headline by
   18px. Slash and headline are the same #feb713, so the type washed out
   against its own decoration. Measured 2026-09-21; hidden where it collides. */
@media(max-width:768px){
  .final-cta .cta-slash{display:none}
}

/* ============================================================
   Touch targets — measured on an iPhone-class context 2026-09-21
   City links were 20px tall (39 of them), "Learn More" 27px, tel/mailto
   24-30px. Apple's minimum is 44px and these are the primary ways into the
   39 city pages and 14 service pages from a phone. Density is worth less
   than being able to hit the thing.
   ============================================================ */
@media (hover:none), (max-width:768px){
  .county ul li{margin:0}
  .county ul li a{display:block;padding:11px 0;line-height:1.35}
  .svc-link{padding:9px 0}
  /* footer link columns */
  footer .foot-grid ul li a{display:block;padding:10px 0;line-height:1.35}
  footer a[href^="tel:"]:not(.btn):not(.fb-emg),footer a[href^="mailto:"]:not(.btn){display:inline-block;padding:9px 0}
  /* Inline tel/mailto in body copy and contact rows.
     MUST exclude .btn: a shorthand here wipes the button's 32px horizontal
     padding, and because .btn is white-space:nowrap the text then defines the
     pill width and the rounded ends clip the first and last glyphs. Buttons
     already clear 44px on their own. */
  main a[href^="tel:"]:not(.btn),main a[href^="mailto:"]:not(.btn){display:inline-block;padding:9px 0}
  main a.tel:not(.btn){padding:10px 0}
  .more-grid a{min-height:52px}
}

/* ---- images: intrinsic attributes must not fight CSS sizing ----
   img_dims.py writes intrinsic width/height so the browser can reserve space.
   Wherever CSS pins ONE dimension the other has to be auto, or the attribute
   wins and the image stretches. The logo was rendering 480x46 against a
   natural 2.682 ratio (it wants 123x46) in the header, drawer and footer. */
.brand,.drawer-head,.foot-grid>div{flex-shrink:0}
.brand{flex:0 0 auto}
.brand img,.drawer-head img,.foot-grid img,img[class*="logo"]{width:auto;max-width:none}

/* ---- phones: service cards as compact 2-up tiles ----
   At 480 and below the grid dropped to one column, so the homepage's nine
   service cards ran 3,396px on a 390 phone: nine full-bleed photo cards with
   three lines of body each, a wall to scroll past before reaching anything
   else. Two-up tiles with the body copy dropped keep the photo, the name and
   the link, which is what the card is actually for at this width. The detail
   lives one tap away on the service page. */
@media(max-width:480px){
  .services .svc-grid{grid-template-columns:1fr 1fr;gap:12px}
  .services .svc-card .img{height:104px}
  .services .svc-body{padding:13px 12px 15px}
  .services .svc-card .svc-body h3{font-size:15px;line-height:1.18;margin-bottom:0;min-height:2.36em}
  /* 9 cards in a 2-up orphans the last one; the emergency card is
     categorically different anyway, so let it span the row. */
  .services .svc-grid>.svc-card:nth-child(9){grid-column:1 / -1}
  .services .svc-grid>.svc-card:nth-child(9) h3{min-height:0}
  .services .svc-grid>.svc-card:nth-child(9) .img{height:130px}
  .svc-body p{display:none}
  /* keep the 44px touch floor; the earlier tap-target rule lives in a
     wider query and this one was undoing it. */
  .services .svc-link{font-size:12px;letter-spacing:.06em;padding:13px 0 11px}
  .steps{grid-template-columns:1fr 1fr;gap:12px}
  .step{padding:18px 15px}
  .step h3{font-size:16px}
  .step p{font-size:13.5px}
}

/* ---- review grid widths as classes, not inline styles ----
   Inline `grid-template-columns` beat the mobile `.rev-grid{1fr}` rule, so a
   city page with 2 or 4 real reviews forced two columns at 390 and overflowed
   its own box. Caught by a content-overflow check, not by eye. */
.rev-grid.rg-1{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
.rev-grid.rg-2{grid-template-columns:repeat(2,1fr);max-width:880px;margin-inline:auto}
.rev-grid.rg-4{grid-template-columns:repeat(2,1fr);max-width:920px;margin-inline:auto}
@media(max-width:768px){
  .rev-grid.rg-1,.rev-grid.rg-2,.rev-grid.rg-4{grid-template-columns:1fr;max-width:640px}
}

/* about page testimonial grid: was borrowing .svc-grid, which meant every
   service-card rule aimed at phones also reshaped it. Given its own class. */
.rev-grid.rg-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.rev-grid.rg-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.rev-grid.rg-3{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}

/* ============================================================
   Offers rail (home) — rebuilt 2026-09-21
   The old strip promised "pick an offer and it carries into your booking" and
   then rendered three dead <span> pills. Nothing was tappable. These are real
   links that deep-link into the booking flow with the service preselected.
   ============================================================ */
.ostrip{background:var(--cream);border-block:1px solid var(--line);padding-block:clamp(40px,5.5vw,68px);position:relative;overflow:hidden}
.ostrip::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(-45deg,rgba(254,183,19,.035) 0 18px,transparent 18px 36px);pointer-events:none}
.ostrip .container{position:relative;z-index:1}
.ostrip-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 26px;margin-bottom:30px}
.ostrip-head>div{flex:1 1 440px;min-width:0}
.ostrip-head h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
.ostrip-head p{color:var(--muted);font-size:16.5px;max-width:620px}
.ostrip-all{flex:0 0 auto;white-space:nowrap}

.ocards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ocard{position:relative;display:flex;flex-direction:column;background:#fff;border:2px dashed var(--line);
  border-radius:16px;padding:26px 22px 20px;transition:border-color .18s,transform .18s,box-shadow .18s;isolation:isolate}
.ocard::after{content:"";position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
.ocard:hover{border-color:var(--yellow);transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,19,16,.10)}
.ocard .oamt{font-family:var(--display);font-size:clamp(30px,3.4vw,40px);line-height:1;color:var(--ink);margin-bottom:9px}
.ocard .oname{font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ocard .odesc{color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.ocard .obook{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:800;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);padding:10px 0 2px}
.ocard .obook .go{transition:transform .18s}
.ocard:hover .obook .go{transform:translateX(4px)}
.ocard-hot{background:linear-gradient(170deg,#fffdf4,#fff8e2);border-color:var(--yellow);border-style:solid}
.ocard-hot .oamt{font-size:clamp(36px,4.2vw,50px)}
.ocard-panthers{background:linear-gradient(170deg,#fff,#f7f4ee)}
.otag{position:absolute;top:-11px;left:20px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:800px}
.ocard-hot .otag{background:var(--yellow);color:var(--ink)}
.otag-p{background:#041e42;color:#fff;box-shadow:inset 0 0 0 1.5px #c8102e}
.ostrip-fine{margin-top:22px;font-size:13px;color:var(--muted)}

@media(max-width:1080px){.ocards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .ostrip-head{grid-template-columns:1fr;align-items:start;gap:18px}
  .ostrip-all{justify-self:start}
}
@media(max-width:520px){
  /* a swipeable rail beats a 4-high stack for browsing offers on a phone */
  .ocards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:6px;
    scrollbar-width:none}
  .ocards::-webkit-scrollbar{display:none}
  .ocard{flex:0 0 78%;scroll-snap-align:start;padding:24px 20px 18px}
  .ocard .oamt{font-size:34px}
  .ocard-hot .oamt{font-size:40px}
}

/* ============================================================
   Footer — rebuilt 2026-09-21
   The old one ran Services 13 items deep next to columns of 4 and 6, leaving
   roughly 400px of dead space across two thirds of the width, and carried no
   call to action at all on a site whose entire job is getting a booking.
   ============================================================ */
.foot-cta{background:var(--yellow);color:var(--ink)}
.foot-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 34px;padding-block:clamp(26px,3.4vw,40px)}
.foot-cta h3{font-family:var(--display);font-size:clamp(21px,2.7vw,31px);line-height:1.14;font-weight:400}
.foot-cta p{font-size:15.5px;margin-top:7px;color:rgba(23,19,16,.72);max-width:520px}
.foot-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.foot-cta .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(23,19,16,.32)}
.foot-cta .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);background:rgba(23,19,16,.06)}

footer .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-block:clamp(44px,5vw,66px)}
.foot-brand img{height:46px;margin-bottom:18px}
footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-family:var(--body);font-weight:800}
footer .foot-grid ul{display:flex;flex-direction:column}
footer .foot-grid ul li a{color:rgba(255,255,255,.66);font-size:14.5px;transition:color .15s}
footer .foot-grid ul li a:hover{color:var(--yellow)}
.foot-more{color:var(--yellow)!important;font-weight:800}

@media(max-width:1080px){footer .foot-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:600px){
  /* brand full width, link lists 2-up. Stacking all four ran the footer to
     2,576px on a 390 phone. */
  footer .foot-grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  footer .foot-grid>.foot-brand{grid-column:1 / -1}
  footer .foot-grid ul li a{font-size:14px;padding:12px 0}
  .foot-cta-in{flex-direction:column;align-items:flex-start}
  .foot-cta-btns{width:100%}
  .foot-cta-btns .btn{flex:1 1 100%}
}



/* ---- footer brand block ----
   Rewritten 2026-09-21. The card version read as generic SaaS: two identical
   rounded boxes, a green "status: operational" pulse dot, and tick/shield
   icons on the trust list. This brand is slab-serif, blocky and loud, so the
   shop details sit against a heavy yellow rule instead of inside boxes, the
   phone is set in the display face at the size it deserves for a 24-hour
   service business, and the icon-tick list is gone in favour of one plain
   sentence. */
.foot-brand img{height:44px;margin-bottom:22px}
.fb-shop{border-left:4px solid var(--yellow);padding:2px 0 2px 16px;margin-bottom:22px}
.fb-shop.fb-ring{border-left-color:#fff}
.fb-kick{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:7px}
.fb-addr{font-size:16px;color:#fff;line-height:1.45;font-weight:600}
.fb-dir{display:inline-block;margin-top:8px;font-size:13px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--yellow);border-bottom:2px solid rgba(254,183,19,.35);padding-bottom:2px}
.fb-dir:hover{border-bottom-color:var(--yellow)}
.fb-num{display:inline-block;font-family:var(--display);font-size:clamp(28px,2.6vw,34px);line-height:1.05;
  color:#fff;letter-spacing:-.01em}
.fb-num:hover{color:var(--yellow)}
.fb-sub{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:7px;line-height:1.5}
.fb-since{font-size:13.5px;color:rgba(255,255,255,.42);line-height:1.6;max-width:360px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:16px;margin-top:4px}
@media(max-width:600px){.fb-since{max-width:none}}

/* restoration column: an emergency block belongs here, next to the four
   services it applies to, and it fills the space a 4-item list leaves. */
.fb-emg{display:block;margin-top:24px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(150deg,rgba(254,183,19,.13),rgba(254,183,19,.05));
  border:1px solid rgba(254,183,19,.28);transition:border-color .16s,background .16s}
.fb-emg:hover{border-color:var(--yellow);background:rgba(254,183,19,.16)}
.fb-emg-k{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.fb-emg-n{display:block;font-family:var(--display);font-size:19px;color:#fff;line-height:1.15;white-space:nowrap}
.fb-emg-s{display:block;font-size:12.5px;color:rgba(255,255,255,.5);margin-top:6px;line-height:1.45}

/* ---- service-area directory ----
   Was 22 identical pills in a flat cloud with no visible order, truncated at
   an arbitrary number, and an "All 39 cities" CTA sitting in the row disguised
   as a 23rd city. South Florida thinks in counties, so it is grouped by county
   and every one of the 39 is listed. Nothing hidden behind a "see all". */
.foot-cov{border-top:1px solid rgba(255,255,255,.09);padding-block:36px}
.fc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:22px}
.fc-head h4{margin-bottom:0}
.fc-head p{font-size:13.5px;color:rgba(255,255,255,.42)}
.fc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px}
.fc-col h5{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.fc-col ul{display:flex;flex-direction:column}
.fc-col li{margin-bottom:0}
.fc-col a{display:block;padding:6px 0;font-size:14px;color:rgba(255,255,255,.58);transition:color .15s}
.fc-col a:hover{color:var(--yellow)}
.fc-col a.fc-home{color:#fff;font-weight:700}
.fc-col a em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--yellow);padding:2px 6px;border-radius:4px;margin-left:7px;vertical-align:1px}
@media (hover:none),(max-width:768px){.fc-col a{padding:11px 0}}
@media(max-width:900px){.fc-grid{grid-template-columns:repeat(2,1fr);gap:22px 26px}}
/* two columns even on a small phone: one column ran the directory to
   2,271px, which is most of a screen of nothing but city names. */
@media(max-width:460px){.fc-grid{gap:20px 16px}.fc-col a{font-size:13.5px}}

/* the Treasure Coast column is genuinely only three cities; say why rather
   than padding the list or leaving a quarter of the row blank */
.fc-note{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.4)}

/* ---- section rhythm at phone widths ----
   The 768 breakpoint was flattening section padding to 52px, so a 768px
   tablet got exactly the same vertical rhythm as a 390px phone. The scale
   is now 96 desktop, 61 at 768, 56 just above phone, 52 on phones. */
@media(max-width:600px){
  section{padding-block:52px}
}

/* confirmation screen centres its buttons; this was an inline
   justify-content that was doing real work, unlike the eyebrow ones */
.bk-nav-center{justify-content:center}

/* ==== 2026-10-02 pitch pass: plain display lines, booking path, offices ==== */
/* Display lines are now full plain sentences, not two-word slogans, so they run
   smaller than the old 76px slogan size or they wrap to five lines. */
.hero .hero-head.hh-long{font-size:clamp(38px,4.1vw,58px);line-height:1.04;text-wrap:balance}
.hero .hero-head.hh-long em{display:inline;margin-top:0}
.btn-ghost-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(23,19,16,.3)}
.btn-ghost-dark:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff}

/* carpet-first section on city pages */
.city-carpet{background:var(--cream)}
.cc-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.cc-copy .sec-lead{color:var(--ink);opacity:.86}
.cc-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cc-offers{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cc-img img{width:100%;height:190px;object-fit:cover}
.cc-off-body{padding:22px 22px 18px}
.cc-off-body h3{font-size:22px;margin-bottom:12px}
.cc-off{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-weight:600;font-size:15.5px;line-height:1.35}
.cc-off b{font-family:var(--display);font-weight:400;font-size:22px;min-width:84px;color:var(--ink)}
.cc-off:hover span{text-decoration:underline}
.cc-fine{font-size:12.5px;color:var(--muted);margin-top:10px}
.cc-fine a{text-decoration:underline;font-weight:700;color:var(--ink)}

/* office rating cards (real Google listings) */
.office-cards{display:grid;grid-template-columns:minmax(0,560px);gap:14px;margin-top:22px}
.office-cards.oc-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.office-card{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;transition:border-color .15s}
.office-card:hover{border-color:var(--yellow)}
.oc-rate{grid-row:span 2;display:flex;flex-direction:column;align-items:center;line-height:1}
.oc-rate b{font-family:var(--display);font-weight:400;font-size:34px}
.oc-stars{color:var(--amber);font-size:12px;letter-spacing:1px;margin-top:4px}
.oc-tx b{display:block;font-size:16px}
.oc-tx span{font-size:13.5px;color:var(--muted)}
.oc-go{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.office-cards + .rev-grid{margin-top:28px}

/* water damage band on city pages */
.city-emg{background:var(--char);color:#fff;padding-block:clamp(44px,6vw,72px)}
.ce-in{display:grid;grid-template-columns:1.3fr auto;gap:28px 48px;align-items:center}
.city-emg .eyebrow{color:var(--yellow);opacity:1}
.city-emg .sec-title{color:#fff;font-size:clamp(28px,3.6vw,42px)}
.city-emg p{color:rgba(255,255,255,.82);max-width:620px}
.ce-btns{display:flex;flex-direction:column;gap:12px}

/* homepage: quick book row + offices */
.quick-book{padding-block:clamp(40px,5vw,60px);background:var(--cream)}
.qb-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.qb-head .sec-title{font-size:clamp(28px,3.4vw,40px);margin-bottom:6px}
.qb-head p{color:var(--muted);max-width:560px}
.qb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.qb-btn{display:flex;flex-direction:column;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px 16px;font-weight:800;font-size:16px;line-height:1.25;transition:border-color .15s,transform .15s}
.qb-btn:hover{border-color:var(--yellow);transform:translateY(-2px)}
.qb-btn svg{width:28px;height:28px}
.qb-btn small{font-weight:600;font-size:13px;color:var(--muted)}
.qb-btn.qb-emg{background:var(--ink);border-color:var(--ink);color:#fff}
.qb-btn.qb-emg small{color:var(--yellow)}
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.offices .office-card{grid-template-columns:auto 1fr}

@media(max-width:1024px){
  .qb-grid{grid-template-columns:repeat(3,1fr)}
  .office-cards.oc-3,.offices{grid-template-columns:1fr}
}
@media(max-width:768px){
  .cc-grid,.ce-in{grid-template-columns:1fr}
  .hero .hero-head.hh-long{font-size:clamp(28px,7.6vw,34px);line-height:1.1}
  .qb-grid{grid-template-columns:1fr 1fr}
  .qb-btn{padding:14px;font-size:15px}
  .qb-btn.qb-emg{grid-column:1 / -1}
}
@media(max-width:480px){
  .cc-btns .btn,.ce-btns .btn{width:100%}
}
/* Spanish booking links (they run TranslatePress on the live site) */
.embar-es{margin-left:22px;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.embar-es:hover{color:var(--yellow)}
.dc-es{grid-column:1 / -1;text-align:center;font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
@media(max-width:768px){.embar-es{display:none}}
.qb-es{font-weight:800;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hero .hero-head.hh-home{font-size:clamp(40px,4.15vw,60px);text-wrap:balance}
@media(max-width:768px){.hero .hero-head.hh-home{font-size:clamp(30px,8.4vw,36px)}}
/* /book: keyword H1 small, display line big, EN/ES toggle */
.bk-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.bk-head h1.bk-h1{font-family:var(--body);font-weight:800;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:10px;line-height:1.35}
.bk-head h1.bk-h1::before{content:"";width:26px;height:2.5px;background:var(--yellow);flex:0 0 auto}
.bk-head p.bk-display{font-family:var(--display);color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.08;max-width:820px;margin-top:14px}
.lang-toggle{display:inline-flex;background:rgba(255,255,255,.08);border-radius:800px;padding:4px}
.lang-toggle button{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.06em;color:#cdc4b6;background:none;border:0;border-radius:800px;padding:8px 14px;cursor:pointer}
.lang-toggle button[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}
.bk-emg{background:var(--ink);color:#fff;border-radius:12px;padding:15px 16px;margin-top:14px;font-size:15px;line-height:1.5}
.bk-emg a{color:var(--yellow);font-weight:800;white-space:nowrap}
.bk-rating{display:block;margin-top:14px;font-size:13.5px;color:var(--muted)}
.bk-rating b{color:var(--ink);font-size:16px}
.bk-rating .st{color:var(--amber);letter-spacing:1px}
@media(max-width:600px){.bk-top{flex-direction:column;align-items:flex-start}.bk-head h1.bk-h1{font-size:12px}}
/* 6 cards plus two full-width rows (dryer vent, emergency): an explicit column
   count, because auto-fit gave 2, 3 or 4 columns and left a gap at each */
.bk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 8 services: 2-up on phones so step 1 fits in about a screen and a half */
@media(max-width:600px){
  .bk-grid{grid-template-columns:1fr 1fr;gap:10px}
  .bk-card{padding:14px 12px}
  .bk-card .ic{width:30px;height:30px;margin-bottom:8px}
  .bk-card b{font-size:14.5px;min-height:0}
  .bk-card span{font-size:12.5px}
  .bk-card-wide{flex-direction:row;align-items:center}
}
.nw{white-space:nowrap}
/* city link directory on the carpet and air duct pages */
.city-links{background:var(--cream)}
.cl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px}
.cl-col h3{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--yellow)}
.cl-col a{display:block;padding:5px 0;font-weight:600;font-size:15px}
.cl-col a:hover{text-decoration:underline}
/* water damage: what to do first */
.first-hour{background:var(--cream)}
.fh-list{counter-reset:fh;display:grid;gap:12px;margin-top:22px;max-width:760px;list-style:none}
.fh-list li{counter-increment:fh;position:relative;padding:16px 18px 16px 62px;background:#fff;border:1.5px solid var(--line);border-radius:14px;font-size:16.5px;line-height:1.5}
.fh-list li::before{content:counter(fh);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--yellow);font-weight:800;display:flex;align-items:center;justify-content:center}
.office-band{background:var(--paper)}
@media(max-width:900px){.cl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.cl-col a{font-size:14px;padding:8px 0}}
/* the tap-target rule for bare tel: links (display:inline-block) must not flatten the quick-book card */
main a.qb-btn[href^="tel:"]{display:flex;padding:14px}

/* 2026-10-05: phone fixes from the full-page audit.
   The dock sits over the page bottom, so the footer (dark) carries the clearance
   instead of body padding, which showed a pale strip under the footer. */
@media(max-width:768px){
  body{padding-bottom:0}
  footer{padding-bottom:82px}
  /* the dock already gives Book / Call / Menu; a floating back-to-top on top of it
     covered the legal line and card text */
  .back-top{display:none}
}
@media(max-width:400px){
  .fb-emg-n{white-space:normal}
}

/* ==== 2026-10-05 city pages: two-line hero, real photos, booking cards ====
   Everything here is scoped to the 39 generated city pages (.hero-city, .city-more,
   .cc-facts, .rev-swipe, body[data-city]) and, for the hero only, the 16 service pages
   (.hero-svc, added the same evening), so the homepage and /book, which feed the pitch
   deck screenshots, do not move. */

/* hero photo: a <picture> of his own crew, not a stretched 684px stock background */
.hero-city .hero-bg,.hero-svc .hb-van,.hero-svc .hb-corridor{background:var(--char)}
:is(.hero-city,.hero-svc) .hero-bg picture{position:absolute;inset:0}
:is(.hero-city,.hero-svc) .hero-bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 58%}
:is(.hero-city,.hero-svc) .hb-corridor img{object-position:62% 42%}

/* display line: a real h2, pinned so the h2 theme rule cannot re-skin it, and sized to
   its column from --hl (characters in the longer line, written by render.py). Line one
   is white, line two (the <em>) yellow, and each fits on one line at any width. */
:is(.hero-city,.hero-svc) .hero-inner{container-type:inline-size}
.hero.hero-city .hero-head.hh-city,.hero.hero-svc .hero-head.hh-svc{font-family:var(--display);font-weight:400;font-style:normal;text-transform:none;color:#fff;
  letter-spacing:-.015em;line-height:1.04;margin:0 0 18px;text-wrap:balance;
  font-size:clamp(28px,4vw,52px);font-size:min(56px,calc(100cqi / (var(--hl) * .6)))}
.hero.hero-city .hero-head.hh-city em,.hero.hero-svc .hero-head.hh-svc em{display:block;margin-top:.06em;font-style:normal;color:var(--yellow)}
@media(max-width:768px){
  :is(.hero-city,.hero-svc) .hero-bg img{object-position:55% 60%}
  :is(.hero-city,.hero-svc) .hb-corridor img{object-position:68% 50%}
  .hero.hero-city .hero-head.hh-city,.hero.hero-svc .hero-head.hh-svc{font-size:min(38px,calc(100cqi / (var(--hl) * .6)))}
}

/* no headline on a city page ends with one word alone on its last line */
body[data-city] main :is(h1,h2,h3){text-wrap:balance}

/* carpet offers: bigger rows, a yellow amount chip, a chevron, and a 44px "All offers" target */
.city-carpet .cc-off{min-height:58px;padding:11px 2px 11px 0;gap:14px}
.city-carpet .cc-off b{background:var(--yellow);border-radius:10px;padding:7px 10px 6px;min-width:96px;text-align:center;font-size:20px;line-height:1.1}
.city-carpet .cc-off span{flex:1}
.cc-chev{flex:0 0 auto;color:var(--ink);opacity:.45;transition:transform .15s,opacity .15s}
.cc-off:hover .cc-chev{transform:translateX(3px);opacity:1}
.city-carpet .cc-fine a{display:inline-block;padding:14px 0;margin:-14px 0}
.city-carpet .cc-img img{object-position:center 62%}

/* what to expect: corporate's own figures (5 to 10 min a room, 8 to 24 hrs to dry, re-clean) */
.cc-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px;margin-top:clamp(30px,4vw,48px);padding-top:clamp(24px,3vw,34px);border-top:2px solid var(--line)}
.cc-facts li{display:flex;flex-direction:column;gap:8px}
.cc-facts b{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.5vw,34px);line-height:1;color:var(--ink)}
.cc-facts span{color:var(--muted);font-size:15px;line-height:1.5;max-width:330px}
@media(max-width:768px){
  .cc-facts{grid-template-columns:1fr;gap:16px}
  .cc-facts li{flex-direction:row;align-items:baseline;gap:14px}
  .cc-facts b{flex:0 0 138px;font-size:22px}
  .cc-facts span{font-size:14.5px}
}

/* "Cleaning Homes in {City}": white, so it stops running into the cream carpet section;
   copy left, the city's checks and a Book button in a card on the right */
.city-more{background:var(--paper)}
.cm-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.cm-copy p{color:var(--muted);margin-top:14px;max-width:640px}
.cm-copy .sec-lead{margin-top:14px}
.cm-card{background:var(--cream);border-radius:var(--radius);border-top:6px solid var(--yellow);padding:28px 28px 30px}
.cm-card h3{font-size:24px}
.cm-card .checks{margin-top:16px}
.cm-card .btn{margin-top:24px;width:100%}
.cm-sub{font-size:clamp(24px,2.6vw,30px);margin-top:clamp(44px,5vw,64px)}
.city-more .svc-grid{margin-top:22px}
.city-more .svc-card .img{height:160px}
.city-more .svc-body{padding:20px 22px 20px}
.svc-acts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.svc-book{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:800px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:background .15s}
.svc-book:hover{background:var(--yellow-deep)}
.svc-book.svc-call{background:var(--ink);color:#fff}
.svc-book.svc-call:hover{background:#000}
.city-more .svc-link{margin-top:0;min-height:44px;padding:0;border-bottom:0;align-self:auto;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:6px}
.city-more .svc-card:hover .svc-link{text-decoration-color:var(--green)}
@media(max-width:900px){
  .cm-intro{grid-template-columns:1fr}
}
/* phones: one service per row, photo left, so names fit one line and Book is a real button */
@media(max-width:600px){
  .city-more .svc-grid{grid-template-columns:1fr;gap:12px}
  .city-more .svc-card{flex-direction:row;align-items:stretch;position:relative}
  .city-more .svc-card .img{flex:0 0 104px;height:auto;min-height:128px}
  .city-more .svc-body{padding:14px 14px 12px;min-width:0}
  .city-more .svc-card .svc-body h3{font-size:17px;line-height:1.2;min-height:0;margin-bottom:4px}
  .city-more .svc-body p{display:block;font-size:13.5px;line-height:1.4;flex:0 0 auto}
  .city-more .svc-acts{margin-top:10px;gap:16px;justify-content:flex-start}
  .city-more .svc-book{padding:0 18px;font-size:13px}
  .city-more .svc-link{font-size:12px;letter-spacing:.06em}
  .city-more .svc-24{margin:8px;font-size:11px;padding:5px 10px}
  .cm-card{padding:24px 20px 24px}
}

/* reviews: a swipe row on phones instead of three stacked cards (about 800px shorter) */
@media(max-width:768px){
  .rev-grid.rev-swipe{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;max-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 16px;scroll-padding-inline:var(--gutter)}
  .rev-grid.rev-swipe.rg-1{grid-auto-columns:100%}
  .rev-swipe>.rev-card{scroll-snap-align:start}
}

/* dock: Menu was 42px tall */
body[data-city] .mb-item{min-height:44px;justify-content:center}
/* city names and "{Office} Office" stay on one line inside city-page headings */
body[data-city] .nw{white-space:nowrap}
/* corridor photo: the yellow extractor and hoses sit behind the yellow second line at 1440 */
@media(min-width:769px){
  :is(.hero-city,.hero-svc) .hb-corridor + .hero-scrim{background:linear-gradient(180deg,rgba(18,13,7,.85) 0%,rgba(18,13,7,0) 22%),linear-gradient(93deg,rgba(18,13,7,.93) 0%,rgba(18,13,7,.86) 40%,rgba(18,13,7,.6) 62%,rgba(18,13,7,.18) 84%,rgba(18,13,7,0) 100%)}
}

/* ==== 2026-10-05 service pages: the checks qa_visual.py runs on the city pages now run on
   the 16 service pages too. Scoped by :has(.hero-svc) so no other page moves. */
/* headings balance, as on the city pages */
main:has(> .hero-svc) :is(h1,h2,h3){text-wrap:balance}
/* dock Menu was 42px; the city link list and the LEARN MORE links were 27 to 38px */
body:has(.hero-svc) .mb-item{min-height:44px;justify-content:center}
main:has(> .hero-svc) .cl-col a{min-height:44px;display:flex;align-items:center;padding:0}
main:has(> .hero-svc) .svc-link{margin-top:0;padding-top:17px}
/* phones: corporate's long brand lines (up to 39 characters a line) would size to 15px to
   hold two lines, smaller than the 16.5px paragraph under them. Josh, 10-05: never below
   24px on a phone; a long line wraps to 3 or 4 lines instead. Desktop stays two lines. */
@media(max-width:768px){
  .hero.hero-svc .hero-head.hh-svc{font-size:max(24px,min(38px,calc(100cqi / (var(--hl) * .6))))}
}
/* desktop: Josh, 10-05, on the air duct hero at 31px: "Feels small?". Same rule as the phone floor:
   a service hero never goes under 44px at 769px and up, so corporate's longest lines take a third line
   instead of shrinking. Short lines still size up to 56px on two. */
@media(min-width:769px){
  .hero.hero-svc .hero-head.hh-svc{font-size:max(44px,min(56px,calc(100cqi / (var(--hl) * .6))))}
}

/* ==== 2026-10-05 service page depth (svc_seo.py via svc_inject.py) ====
   The cost section reuses the city pages' .city-carpet offer card and .cc-facts; the guide reuses .cm-card. */
.svc-cost .cc-p{color:var(--muted);margin-top:12px;max-width:640px}
.svc-cost .cc-copy,.svc-cost .cc-offers{min-width:0}
.svc-cost .cc-off-body .cc-p{margin:0 0 10px}
.svc-guide{background:var(--paper)}
.sg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(26px,3.4vw,40px)}
.sg-card h3{font-size:22px}
.sg-card .checks{display:grid;gap:11px;margin-top:16px}
.sg-card .checks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15.5px;line-height:1.45}
.sg-card .checks svg{flex:0 0 auto;margin-top:2px}
@media(max-width:900px){.sg-grid{grid-template-columns:1fr}}
/* South Florida section (svc_deep.py LOCAL): four conditions, two by two; "By the numbers" reuses .cc-facts */
.svc-local{background:var(--cream)}
.sl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(28px,4vw,56px);margin-top:clamp(26px,3.4vw,40px)}
.sl-item{border-top:3px solid var(--yellow);padding-top:18px}
.sl-item h3{font-size:clamp(21px,2vw,25px)}
.sl-item p{color:var(--muted);margin-top:10px;max-width:560px}
.sl-item a,.svc-cited a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.svc-cited{background:var(--paper)}
.svc-cited .sc-facts{border-top:0;padding-top:0}
.sc-facts p{color:var(--muted);font-size:15px;line-height:1.5;max-width:330px}
@media(max-width:768px){.sc-facts p{font-size:14.5px}}
@media(max-width:768px){.sl-grid{grid-template-columns:1fr}}
/* long-form guide (svc_deep.py DEEP): a readable column, not cards */
.svc-deep{background:var(--paper)}
.sd-body{max-width:780px;margin-top:clamp(18px,2.4vw,28px)}
.sd-part{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line)}
.sd-part:last-child{border-bottom:0}
.sd-part h3{font-size:clamp(21px,2vw,26px)}
.sd-part p{color:var(--muted);margin-top:10px;font-size:17px;line-height:1.7}
.sd-part a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}

/* ==== 2026-10-06 Spanish pages (i18n_es.py): Spanish runs longer than English. Headings hyphenate so a long
   word ("Pretratamiento") breaks inside a 165px step card instead of widening the page. */
html[lang="es"] main :is(h1,h2,h3,h4){-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
html[lang="es"] .steps>.step,html[lang="es"] .sg-grid>*,html[lang="es"] .sl-grid>*{min-width:0}
/* a long Spanish button label wraps inside the column instead of widening the page ("Restauración tras inundaciones", 373px) */
html[lang="es"] main .btn{max-width:100%;white-space:normal;text-align:center}

/* Launch QA 2026-10-21 (qa-kit, 6 viewports): footer lists and the Google rating link
   measured 40px and 25px tall on touch and tablet widths; 44px floor. Spanish header
   ran 4px past 1180 ("Reserve en línea"), so the Spanish nav button loses 8px a side. */
@media (hover:none),(max-width:1024px){footer .foot-grid ul li a{padding-block:13px}footer .fb-dir{display:inline-block;padding-block:11px}}
@media(max-width:1200px){html[lang="es"] header .nav-cta .btn{padding-inline:14px}}