/* ===========================================================
   MAC'S CLEANING — light brand system
   Same type family as the detailing site, inverted to a bright
   base. Red stays the accent so it reads as one company.
   =========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0f1419;
  --ink-2:#39434f;
  --ink-3:#6b7684;
  --line:#e3e8ed;
  --line-2:#f0f3f6;
  --bg:#ffffff;
  --bg-2:#f6f8fa;
  --bg-3:#eef3f6;
  --red:#d42b2b;
  --red-dk:#b22121;
  --red-soft:#fdf0f0;
  --mint:#0e7c7b;
  --mint-soft:#e8f4f4;
  --shadow:0 1px 2px rgba(15,20,25,.04),0 8px 24px rgba(15,20,25,.06);
  --shadow-lg:0 2px 4px rgba(15,20,25,.04),0 18px 48px rgba(15,20,25,.10);
  --r:14px;
  --wrap:1180px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:clip;font-size:16px}
h1,h2,h3,h4,.cond{font-family:'Barlow Condensed','Arial Narrow',sans-serif;line-height:1.03;letter-spacing:-.01em;font-weight:800}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.eyebrow.mint{color:var(--mint)}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;height:70px}
.nav-logo-text{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.nav-logo-text span{color:var(--red)}
.nav-links{display:flex;list-style:none;gap:28px;margin-left:auto}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .15s}
.nav-links a:hover{color:var(--red)}
.nav-phone{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.nav-cta{background:var(--red);color:#fff;font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;white-space:nowrap;transition:background .15s,transform .15s}
.nav-cta:hover{background:var(--red-dk);transform:translateY(-1px)}
.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px 24px;flex-direction:column;gap:2px;box-shadow:var(--shadow-lg)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:13px 0;border-bottom:1px solid var(--line-2);font-weight:500;color:var(--ink-2)}
.mobile-menu .mm-cta{margin-top:14px;background:var(--red);color:#fff;text-align:center;border-radius:999px;border:0;font-weight:600;padding:14px}

/* ---------- HERO ---------- */
.hero{position:relative;padding:92px 0 76px;background:
  radial-gradient(1100px 520px at 88% -8%, var(--mint-soft) 0%, rgba(232,244,244,0) 62%),
  radial-gradient(900px 440px at 4% 4%, var(--red-soft) 0%, rgba(253,240,240,0) 58%),
  linear-gradient(180deg,#fff 0%,var(--bg-2) 100%);
  border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(44px,6.2vw,80px);text-transform:uppercase;margin:16px 0 0}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .sub{font-size:19px;color:var(--ink-2);margin-top:22px;max-width:30em;line-height:1.52}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px;padding:16px 30px;border-radius:999px;transition:.16s;border:1.5px solid transparent;cursor:pointer}
.btn-pri{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(212,43,43,.26)}
.btn-pri:hover{background:var(--red-dk);transform:translateY(-2px);box-shadow:0 12px 28px rgba(212,43,43,.32)}
.btn-sec{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-sec:hover{border-color:var(--ink);transform:translateY(-2px)}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:14px;color:var(--ink-3);font-weight:500}
.hero-trust b{color:var(--ink);font-weight:600}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-lg)}
.hero-card h3{font-size:25px;text-transform:uppercase;margin-bottom:5px}
.hero-card .hc-note{font-size:13.5px;color:var(--ink-3);margin-bottom:20px}
.pricerow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.pricerow:last-of-type{border-bottom:0}
.pricerow .pr-n{font-size:15px;font-weight:500}
.pricerow .pr-n small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.pricerow .pr-p{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;white-space:nowrap}
.hero-card .btn{width:100%;margin-top:20px}

/* ---------- SECTION ---------- */
section.band{padding:88px 0}
section.band.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band.ink{background:var(--ink);color:#fff}
section.band.ink h2,section.band.ink h3{color:#fff}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-head h2{font-size:clamp(32px,4.4vw,52px);text-transform:uppercase;margin:12px 0 0}
.sec-head p{font-size:17.5px;color:var(--ink-2);margin-top:16px;line-height:1.55}
section.band.ink .sec-head p{color:#aeb8c4}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- SERVICE CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px 28px;transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d3dbe3}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--red-soft);display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:23px;height:23px;stroke:var(--red);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card.mint .ic{background:var(--mint-soft)}
.card.mint .ic svg{stroke:var(--mint)}
.card h3{font-size:25px;text-transform:uppercase;margin-bottom:9px}
.card p{font-size:15px;color:var(--ink-2);line-height:1.55}
.card ul{list-style:none;margin:16px 0 0}
.card ul li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-2);margin-bottom:7px}
.card ul li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.card.mint ul li::before{border-color:var(--mint)}
.card .from{margin-top:auto;padding-top:22px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card .from b{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:800}
.card .from span{font-size:13px;color:var(--ink-3)}
.card .cl{margin-top:16px;font-weight:600;font-size:14.5px;color:var(--red);display:inline-flex;align-items:center;gap:6px}
.card:hover .cl{gap:10px}
.card .cl::after{content:"→";transition:.2s}

/* ---------- PRICE TABLE ---------- */
.ptable{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ptable table{width:100%;border-collapse:collapse}
.ptable th{background:var(--ink);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:15px 20px;white-space:nowrap}
.ptable td{padding:15px 20px;border-bottom:1px solid var(--line-2);font-size:15px;vertical-align:top}
.ptable tr:last-child td{border-bottom:0}
.ptable tbody tr:nth-child(even){background:var(--bg-2)}
.ptable .n{text-align:right;font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;white-space:nowrap}
.ptable td small{display:block;color:var(--ink-3);font-size:13px;margin-top:3px}
.pnote{font-size:14px;color:var(--ink-3);margin-top:16px;line-height:1.55}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{counter-increment:s;position:relative;padding-top:48px}
.step::before{content:counter(s,decimal-leading-zero);font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:900;color:var(--line);line-height:.8;position:absolute;top:0;left:0}
.step h4{font-size:20px;text-transform:uppercase;margin-bottom:8px;position:relative}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
section.band.ink .step::before{color:#2a3440}
section.band.ink .step p{color:#aeb8c4}

/* ---------- WHY / FEATURES ---------- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 34px}
.feat .f h4{font-size:19px;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.feat .f h4 svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
.feat .f p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
section.band.ink .feat .f p{color:#aeb8c4}
section.band.ink .feat .f h4 svg{stroke:#ff6b6b}

/* ---------- STATS ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.statrow .s{background:#fff;padding:28px 24px}
.statrow .s b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:900;line-height:1}
.statrow .s span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}

/* ---------- AREAS ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.areas a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:.15s}
.areas a:hover{border-color:var(--red);color:var(--red)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:17.5px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:17px;font-size:26px;font-weight:300;color:var(--red);transition:.2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 22px 0;color:var(--ink-2);font-size:15.5px;line-height:1.62}

/* ---------- CTA BAND ---------- */
.ctaband{background:var(--ink);color:#fff;border-radius:22px;padding:60px 56px;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.ctaband h2{font-size:clamp(30px,3.8vw,44px);text-transform:uppercase;color:#fff}
.ctaband p{color:#aeb8c4;margin-top:14px;font-size:16.5px;line-height:1.55}
.ctaband .btn-pri{box-shadow:none}
.ctaband .btn-sec{background:transparent;color:#fff;border-color:#3a4552}
.ctaband .btn-sec:hover{border-color:#fff}

/* ---------- FOOTER ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:56px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-grid h5{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);margin-bottom:14px}
.foot-grid a,.foot-grid p{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:9px;line-height:1.5}
.foot-grid a:hover{color:var(--red)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:13.5px;color:var(--ink-3)}

/* ---------- MOBILE STICKY ---------- */
.stickybar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:#fff;border-top:1px solid var(--line);padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));gap:10px;box-shadow:0 -4px 20px rgba(15,20,25,.08)}
.stickybar a{flex:1;text-align:center;padding:14px;border-radius:999px;font-weight:600;font-size:15px}
.stickybar .sb-call{border:1.5px solid var(--line);color:var(--ink)}
.stickybar .sb-book{background:var(--red);color:#fff}

/* ---------- PLACEHOLDER MEDIA ---------- */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:
  repeating-linear-gradient(135deg,#eef3f6 0 14px,#e7eef2 14px 28px);
  border:1px solid var(--line);display:grid;place-items:center;min-height:340px}
.ph .ph-l{text-align:center;padding:24px}
.ph .ph-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.ph .ph-l span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:7px;max-width:24em}
.ph.sm{min-height:200px}
.phgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------- PREVIEW RIBBON ---------- */
.prevbar{background:#0f1419;color:#fff;font-size:13px;padding:9px 24px;text-align:center;letter-spacing:.03em}
.prevbar b{color:#ff8080}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .cards,.feat,.phgrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px 22px}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .ctaband{grid-template-columns:1fr;padding:44px 32px}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:flex}
  .nav-cta{padding:10px 16px;font-size:14px}
  .hero{padding:52px 0 54px}
  section.band{padding:58px 0}
  .cards,.feat,.phgrid{grid-template-columns:1fr}
  .sec-head{margin-bottom:32px}
  body{padding-bottom:78px}
  .stickybar{display:flex}
  .ptable{overflow-x:auto}
  .ptable table{min-width:520px}
  .ctaband{padding:36px 24px;border-radius:16px}
  .hero-card{padding:24px}
}

/* ===========================================================
   INSTANT ESTIMATE CALCULATOR
   =========================================================== */
.est{display:grid;grid-template-columns:1.25fr .85fr;gap:28px;align-items:start}
.est-main{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0;box-shadow:var(--shadow);overflow:hidden}
.est-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:var(--bg-2)}
.est-tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;padding:17px 10px;font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);cursor:pointer;transition:.15s;line-height:1.1}
.est-tab:hover{color:var(--ink)}
.est-tab.on{background:#fff;color:var(--ink);border-bottom-color:var(--red)}
.est-fields{padding:26px 26px 4px}
.est-main>.est-f{padding:0 26px 26px}

.est-f{margin-bottom:20px}
.est-f label{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.est-f label small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:3px;line-height:1.45}
.est-f select,.est-f input[type=text],.est-f input[type=tel],.est-f input[type=email],.est-f textarea{
 width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);background:#fff;
 border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;transition:border-color .15s}
.est-f select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7684' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px}
.est-f select:focus,.est-f input:focus,.est-f textarea:focus{outline:none;border-color:var(--red)}
.est-f textarea{resize:vertical;min-height:62px}
.est-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 16px}

/* slider + number */
.est-range{display:flex;align-items:center;gap:14px}
.est-range input[type=range]{flex:1;appearance:none;height:5px;border-radius:5px;background:var(--line);outline:none}
.est-range input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--red);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 5px rgba(15,20,25,.3)}
.est-rv{display:flex;align-items:center;gap:5px;border:1.5px solid var(--line);border-radius:10px;padding:8px 11px;background:#fff;flex:none}
.est-rv input{width:62px;border:0;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--ink);text-align:right;background:none}
.est-rv input:focus{outline:none}
.est-rv span{font-size:12.5px;color:var(--ink-3);white-space:nowrap}

/* stepper */
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;max-width:168px}
.stepper button{appearance:none;border:0;background:var(--bg-2);width:38px;height:44px;font-size:19px;color:var(--ink-2);cursor:pointer;flex:none;transition:.12s;line-height:1}
.stepper button:hover{background:var(--red);color:#fff}
.stepper input{flex:1;min-width:0;border:0;text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--ink);background:none;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none}

/* checkboxes */
.est-chks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.est-chk{display:flex!important;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;cursor:pointer;transition:.14s;margin-bottom:0!important;font-weight:400!important}
.est-chk:hover{border-color:#c3ccd6}
.est-chk input{appearance:none;width:19px;height:19px;border:1.5px solid var(--line);border-radius:5px;flex:none;position:relative;cursor:pointer;transition:.14s}
.est-chk input:checked{background:var(--red);border-color:var(--red)}
.est-chk input:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.est-chk span{flex:1;font-size:14.5px;color:var(--ink-2)}
.est-chk b{font-size:13.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.est-chk:has(input:checked){border-color:var(--red);background:var(--red-soft)}

/* right panel */
.est-panel{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.est-price{background:var(--ink);color:#fff;padding:26px 24px 22px}
.est-cap{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.17em;color:#8e9aa8;font-weight:600}
.est-big{font-family:'Barlow Condensed',sans-serif;font-size:clamp(40px,5.4vw,56px);font-weight:900;line-height:1;margin:7px 0 9px;letter-spacing:-.015em}
.est-tax{font-size:13px;color:#aeb8c4}
.est-tax b{color:#fff;font-weight:600}
.est-lines{list-style:none;margin:0;padding:16px 24px 6px}
.est-lines li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);line-height:1.4}
.est-lines li:last-child{border-bottom:0}
.est-lines li b{font-weight:600;color:var(--ink);white-space:nowrap}
.est-note{margin:10px 24px 0;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.5;background:var(--bg-2);border-left:3px solid var(--ink-3);color:var(--ink-2)}
.est-note.ok{background:var(--mint-soft);border-left-color:var(--mint)}
.est-note.warn{background:var(--amber-soft,#fff6e3);border-left-color:#9a6100}
.est-note b{color:var(--ink)}
.est-flags{list-style:none;margin:10px 24px 0;padding:0}
.est-flags li{font-size:12.5px;color:var(--ink-3);padding:5px 0 5px 18px;position:relative;line-height:1.45}
.est-flags li::before{content:"!";position:absolute;left:0;top:5px;color:var(--red);font-weight:700}
.est-form{padding:18px 24px 24px;border-top:1px solid var(--line);margin-top:16px}
.est-form .est-f{margin-bottom:14px}
.est-submit{width:100%;margin-top:4px}
.est-fine{font-size:12px;color:var(--ink-3);text-align:center;margin-top:11px;line-height:1.45}
.est-hp{position:absolute;left:-9999px}
.est-done{padding:40px 26px;text-align:center}
.est-done-ic{width:52px;height:52px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;font-size:26px;margin:0 auto 16px}
.est-done h3{font-size:27px;text-transform:uppercase;margin-bottom:9px}
.est-done p{font-size:14.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.55}

@media(max-width:1000px){
 .est{grid-template-columns:1fr}
 .est-panel{position:static}
}
@media(max-width:760px){
 .est-tab{font-size:14.5px;padding:14px 6px}
 .est-fields{padding:20px 18px 2px}
 .est-main>.est-f{padding:0 18px 20px}
 .est-form{padding:16px 18px 20px}
 .est-lines,.est-note,.est-flags{margin-left:18px;margin-right:18px}
 .est-lines{padding-left:0;padding-right:0}
 .est-price{padding:22px 18px 18px}
 .est-chks{grid-template-columns:1fr}
 .est-range{flex-wrap:wrap}
 .est-range input[type=range]{flex:1 1 100%;order:2}
 .est-rv{order:1;margin-left:auto}
}
.est-lines li b i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--ink-3);display:block;text-align:right;margin-top:1px}

/* mobile-only sticky price readout inside the calculator */
.est-mob{display:none}
@media(max-width:1000px){
 .est-mob{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
   position:sticky;top:70px;z-index:6;background:var(--ink);color:#fff;
   padding:13px 18px;border-bottom:1px solid #000}
 .est-mob span{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#8e9aa8;font-weight:600}
 .est-mob b{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:900;line-height:1;white-space:nowrap}
 .est-panel .est-price{display:none}
}

/* With photography off the hero has one column; let the copy breathe instead of
   leaving a dead gutter where the picture would be. */
.hero-grid:has(> :only-child){grid-template-columns:1fr;max-width:860px}
.hero-grid:has(> :only-child) .sub{max-width:34em}

/* ---------- Pricing tables on a phone ------------------------------------
   See the note in estimator.js. Below 760px the tables stop being tables and
   become stacked cards, so nothing clips and nothing scrolls sideways. */
@media(max-width:760px){
  .ptable{overflow:visible;border:0;box-shadow:none;background:transparent}
  .ptable table{min-width:0;display:block;border-collapse:separate}
  .ptable thead{display:none}
  .ptable tbody{display:block}

  .ptable tbody tr{
    display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
    margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
  .ptable tbody tr:nth-child(even){background:#fff}
  .ptable td{display:block;border-bottom:1px solid var(--line-2);padding:11px 14px}
  .ptable td:last-child{border-bottom:0}

  /* one row = one thing: first cell is the card heading */
  .ptable table[data-layout="rows"] tbody td:first-child{
    background:var(--bg-2);font-family:'Barlow Condensed',sans-serif;font-size:19px;
    font-weight:800;line-height:1.15;color:var(--ink)}
  .ptable table[data-layout="rows"] tbody td:first-child small{
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400}
  .ptable table[data-layout="rows"] tbody td:not(:first-child){
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;text-align:left}
  .ptable table[data-layout="rows"] tbody td:not(:first-child)::before{
    content:attr(data-label);font-size:13px;font-weight:500;color:var(--ink-3);
    flex:1;min-width:0}
  .ptable table[data-layout="rows"] tbody td.n{
    font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;white-space:nowrap}

  /* one row = two things: item / price, twice */
  .ptable table[data-layout="paired"] tbody tr{
    display:grid;grid-template-columns:1fr auto;align-items:baseline}
  .ptable table[data-layout="paired"] tbody td{border-bottom:1px solid var(--line-2)}
  .ptable table[data-layout="paired"] tbody td:nth-child(3),
  .ptable table[data-layout="paired"] tbody td:nth-child(4){border-bottom:0}
  .ptable table[data-layout="paired"] tbody td:nth-child(odd){font-size:14.5px;color:var(--ink-2)}
  .ptable table[data-layout="paired"] tbody td.n{
    font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;
    white-space:nowrap;text-align:right}

  /* a colspan cell is a note across the whole card */
  .ptable td[colspan]{background:var(--bg-2);font-size:14px;color:var(--ink-2)}
  .pnote{font-size:13.5px}
}