/* LevelSweep — Line Marking palette. Black is primary, white is reversed.
   Rule that keeps it accessible: Line Yellow never carries text on white.
   On white grounds type is Deck Black; yellow appears as rule, fill and mark. */
:root{
  --ink:#0E0F13;        /* Deck Black   */
  --ink-2:#171A20;      /* raised black */
  --yellow:#FFD400;     /* Line Yellow  */
  --yellow-deep:#7A6200;/* the only yellow legible as TEXT; passes AA on white and both greys */
  --white:#FFFFFF;
  --concrete:#E6E7E3;   /* section relief */
  --concrete-2:#F3F3F0;
  --grey:#5B6068;
  --grey-2:#9AA0A8;
  --rule:#7F837B;       /* documented border. clears 3:1 on white and on concrete */
  --line:#D9DBD6;
  --maxw:1120px;
  --r:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Full-height slides that the browser snaps to. Disabled below 900px, where
   content genuinely exceeds the viewport and mandatory snap would trap it. */
@media(min-width:901px){
  /* scroll-padding keeps the sticky header from covering the top of a slide.
     Without it, centre-aligned snapping also pushed the page off zero on load,
     which fired the header rule before the reader had scrolled anything. */
  /* Proximity, not mandatory. Mandatory snapped every scroll to a slide edge,
     which meant the footer could never be rested on and the quote form could
     not be held still long enough to fill in. Proximity still lands you on the
     next slide on a normal scroll, and lets go when you need it to. */
  html{scroll-snap-type:y proximity;scroll-padding-top:73px}
  .slide{scroll-snap-align:start}
  .slide.end{scroll-snap-align:start}
}
body{margin:0;background:var(--concrete);color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:350;font-size:17px;line-height:1.62;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.022em;line-height:1.06;margin:0 0 .4em}
h1{font-size:clamp(1.95rem,5.2vw,3.35rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:1.18rem;letter-spacing:-.012em}
p{margin:0 0 1.05em;max-width:70ch}
.lede{font-size:clamp(1.05rem,2.1vw,1.28rem);font-weight:350;color:var(--grey);max-width:60ch}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow-deep);margin:0 0 .9em}
.on-dark .eyebrow{color:var(--yellow)}

/* ---------- header ---------- */
/* No fill at rest: the hero is pulled up underneath so the photograph itself
   runs behind the bar. Fills with concrete once the reader is past the hero. */
.hdr{background:transparent;position:sticky;top:0;z-index:60;
  border-bottom:3px solid transparent;transition:border-color .18s ease,background .18s ease}
.hdr.scrolled{background:var(--concrete);border-bottom-color:var(--ink)}
.hdr .logo .onphoto{display:block}
.hdr .logo .onsolid{display:none}
.hdr.scrolled .logo .onphoto{display:none}
.hdr.scrolled .logo .onsolid{display:block}
@media(max-width:900px){.hdr.scrolled{background:var(--concrete)}}
.hdr .wrap{display:flex;align-items:center;gap:22px;min-height:70px}
.hdr .logo{flex:0 0 auto}
.hdr .logo img{height:30px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.hdrcta{flex:0 0 auto;white-space:nowrap;margin-left:auto}
.nav a{color:#3A3F45;text-decoration:none;font-size:.94rem;font-weight:400;white-space:nowrap}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700}
.nav a.btn{color:var(--ink)}
.nav a.btn:hover{color:var(--ink)}
/* No hamburger. Below 900px the anchor list is dropped entirely and the CTA
   carries the header on its own: the page is one scroll, so a menu of anchors
   to sections you are about to reach anyway is noise. */
.navtoggle{display:none}
@media(max-width:900px){
  .hdr .wrap{gap:10px}
  .nav{display:none}
  .hdrcta{margin-left:auto;padding:10px 15px;font-size:.9rem}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hdr .wrap{gap:8px}
  .hdr .logo{flex:0 1 auto;min-width:0}
  .hdr .logo img{height:23px;width:auto}
  .hdrcta{padding:9px 12px;font-size:.85rem}
  .navtoggle{padding:8px 11px;font-size:.82rem}
}
@media(max-width:390px){
  .hdr .logo img{height:21px}
  .hdrcta{padding:8px 10px;font-size:.8rem}
  .navtoggle{padding:7px 9px;font-size:.78rem}
}

/* ---------- buttons ---------- */
/* Line Yellow separates from Concrete at only 1.15:1, so the button needs a
   black outline to have an edge at all. On black grounds it does not. */
.btn{display:inline-block;background:var(--yellow);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:.98rem;letter-spacing:-.005em;padding:13px 24px;border-radius:6px;
  border:2px solid var(--ink);cursor:pointer;font-family:inherit;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.on-dark .btn{border-color:var(--yellow)}
.btn-dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
/* deep concrete, kept for this one control: a third button weight between the
   yellow primary and the solid black */
.btn-concrete{background:#C9CBC5;color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;isolation:isolate;
  margin-top:-73px;padding-top:calc(72px + 73px);min-height:100vh}
@media(max-width:900px){.hero{margin-top:-73px;padding-top:calc(52px + 73px);min-height:0}}
.hero .bg{position:absolute;inset:0;z-index:-1}
.hero .bg img,.hero .bg svg{width:100%;height:100%;object-fit:cover;display:block;
  object-position:center}
@media(max-width:900px){.hero .bg img{object-position:22% center}}
/* A flat 30% wash leaves Deck Black type at about 2:1 over this photograph.
   The wash is graded instead: near solid where the headline sits, easing back
   to 30% across the right where the machine and the ramp are. */
/* the concrete scrim over the photograph has been removed; the hero now
   sits directly on the image with reversed type */
.hero h1{max-width:15ch}
.hero .lede{color:#E6E7E3;margin-bottom:1.7em}
.tagrule{display:inline-flex;align-items:center;gap:12px;margin-bottom:1.3em}
.tagrule i{display:block;width:34px;height:5px;background:var(--yellow);border-radius:2px}
.tagrule span{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}

/* ---------- sections ---------- */
section{padding:clamp(52px,7vw,90px) 0;background:var(--concrete)}
.slide{min-height:calc(100vh - 73px);display:flex;align-items:center;position:relative;padding:72px 0 56px}
/* the hero starts at y=0 under the header, so it takes the full viewport */
.slide.hero{min-height:100vh}
@media(max-width:900px){.slide.hero{min-height:0}}
.slide > .wrap{width:100%}
.slide.alt{background:var(--white)}
.slide.end{background:var(--white)}
.slide h2{margin-bottom:.35em}
.slide .lede{margin-bottom:1.6em}
.slide .grid{margin-top:8px}
.slide .qz{margin:0;max-width:none}
/* The wizard can exceed one screen. A snap area larger than the viewport is
   scrolled freely, so this slide must not be forced to viewport height. */
/* Compact scale for the two slides that carry the most content: the wizard and
   the FAQ. Both have to fit one screen, the FAQ even with an answer open. */
.slide.end{align-items:flex-start;min-height:calc(100vh - 73px);padding-bottom:36px}
.slide.end h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.3em}
.qintro{font-size:.97rem;line-height:1.5;max-width:none;margin-bottom:1.1em;color:var(--grey)}
.slide.end .qsteps{margin-bottom:18px}
.slide.end legend{font-size:1.12rem;margin-bottom:.4em}
.slide.end fieldset{margin-bottom:14px}
.slide.end .f{margin-bottom:12px}
.slide.end .f2{gap:13px}
.slide.end label{font-size:.88rem;margin-bottom:4px}
.slide.end .hint{font-size:.8rem}
.slide.end input[type=text],.slide.end input[type=email],.slide.end input[type=tel],
.slide.end input[type=number],.slide.end select,.slide.end textarea{padding:10px 12px;font-size:.95rem}
.slide.end .opts{gap:9px}
.slide.end .opt span{min-height:60px;padding:12px 16px;font-size:.95rem}
.opt.nodata{margin-bottom:14px}
.opt.nodata span{min-height:0;border-style:dashed}
.opt.nodata input:checked+span{border-style:solid;background:#FFFCEB}
.slide.end .opt span small{font-size:.82rem}
.slide.end .qnav{margin-top:18px;padding-top:16px}
.slide.end textarea{min-height:60px}
/* FAQ has to survive an answer being open without pushing off screen */
#faq h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.4em}
#faq .faq summary{padding:12px 0;font-size:.96rem}
#faq .faq summary::after{font-size:1.2rem}
#faq .faq .a{padding:0 0 13px;font-size:.9rem;line-height:1.5}
#faq .faq .a p{max-width:none}
/* Shorter laptop screens: 800px tall leaves 727px of slide, which the contact
   and frequency steps overrun at the default scale. */
@media(min-width:901px) and (max-height:880px){
  .slide{padding:60px 0 44px}
  .slide.end{padding:56px 0 24px;min-height:calc(100vh - 73px)}
  .slide.end h2{font-size:1.35rem}
  .slide.end .eyebrow{margin-bottom:.5em}
  .qintro{font-size:.9rem;margin-bottom:.8em}
  .slide.end .qsteps{margin-bottom:14px}
  .slide.end legend{font-size:1.05rem}
  .slide.end fieldset{margin-bottom:10px}
  .slide.end .f{margin-bottom:9px}
  .slide.end .opts{gap:8px}
  .slide.end .opt span{min-height:54px;padding:10px 14px}
  .slide.end .qnav{margin-top:14px;padding-top:12px}
  #faq h2{font-size:1.35rem}
  #faq .faq summary{padding:10px 0;font-size:.92rem}
  #faq .faq .a{padding:0 0 11px;font-size:.86rem}
}
/* 720p laptops */
@media(min-width:901px) and (max-height:760px){
  .slide.end{padding:48px 0 18px;min-height:calc(100vh - 73px)}
  .qintro{font-size:.86rem;margin-bottom:.6em}
  .slide.end .qsteps{margin-bottom:10px}
  .slide.end .f{margin-bottom:7px}
  .slide.end .opts{gap:7px}
  .slide.end .opt span{min-height:50px;padding:9px 13px}
  .slide.end .qnav{margin-top:11px;padding-top:10px}
  .slide.end .hint{font-size:.76rem}
  #faq .faq summary{padding:8px 0}
  .slide.end .qprice{padding:17px 19px;margin-bottom:11px}
  .slide.end .qprice.two{gap:20px}
  .slide.end .qprice.two .qlines{padding-left:19px}
  .slide.end .btnrow{margin-top:15px}
  .slide.end .err{margin-top:2px;font-size:.82rem}
  .slide.end #result h3{margin-top:1.1em;font-size:1rem}
  .slide.end #result th,.slide.end #result td{padding:7px 10px;font-size:.86rem}
  .slide.end .note{padding:11px 15px}
  .slide.end .laddernote{font-size:.8rem}
  .slide.end legend{font-size:1rem;margin-bottom:.3em}
  .slide.end textarea{min-height:48px}
  .slide.end label{margin-bottom:3px}
}
.slide .btnrow{margin-top:34px}
.narrow{max-width:820px}
.fine{font-size:.9rem;color:var(--grey);max-width:62ch}
.chips{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin:10px 0 26px}
.chip{background:var(--white);border:1px solid var(--rule);border-radius:6px;
  padding:10px 6px;font-weight:600;font-size:.8rem;text-align:center;line-height:1.25}
@media(max-width:1200px){.chips{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){.chips{grid-template-columns:repeat(3,1fr)}.chip{font-size:.76rem}}
@media(max-width:420px){.chips{grid-template-columns:repeat(2,1fr)}}
.alt .chip{background:var(--concrete)}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{padding-left:28px;position:relative;margin-bottom:.7em}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:4px;
  background:var(--yellow);border-radius:2px}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;
  border:2px solid rgba(255,255,255,.65);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scrollcue span{width:3px;height:9px;background:var(--white);border-radius:2px;animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(11px)}}
@media(max-width:900px){.slide{min-height:0;padding:clamp(52px,7vw,90px) 0}.scrollcue{display:none}}
.on-dark{background:var(--white);color:var(--ink)}
.on-dark p{color:var(--grey)}
.on-dark h2,.on-dark h3{color:var(--ink)}
.on-dark .eyebrow{color:var(--yellow-deep)}
.on-dark .card{background:var(--concrete);border-color:var(--rule)}
.on-dark .card .num{color:var(--yellow-deep)}
.on-grey{background:var(--white)}
.hatch{height:8px;background:repeating-linear-gradient(-58deg,var(--yellow) 0 7px,var(--ink) 7px 18px)}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:26px}
.on-dark .card{background:var(--concrete);border-color:var(--rule)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card .num{font-size:.76rem;font-weight:800;letter-spacing:.14em;color:var(--yellow-deep);
  text-transform:uppercase;display:block;margin-bottom:.7em}
.on-dark .card .num{color:var(--yellow-deep)}

.svc{display:block;text-decoration:none;border:1px solid var(--rule);border-radius:var(--r);
  padding:28px;background:var(--white);transition:border-color .14s ease}
.svc:hover{border-color:var(--ink)}
.svc .from{font-size:.82rem;color:var(--grey);margin-top:.9em;display:block}
.svc .from b{font-size:1.28rem;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.svc .go{display:inline-block;margin-top:1.1em;font-weight:700;font-size:.94rem;
  border-bottom:3px solid var(--yellow);padding-bottom:2px}

table{border-collapse:collapse;width:100%;font-size:.94rem;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
/* Concrete head on a white table body, held apart by a Rule border. No solid
   black: on a light page it was the heaviest thing on screen. */
th{background:var(--concrete);color:var(--ink);font-weight:700;font-size:.74rem;
  letter-spacing:.09em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
td.n,th.n{text-align:right}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:var(--concrete-2)}
.ladder tr.dim td{background:var(--concrete)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}

.save{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border-radius:3px;
  padding:2px 8px;margin-left:8px;vertical-align:1px;white-space:nowrap}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:19px 0;font-weight:600;font-size:1.04rem;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:700;color:var(--yellow-deep);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 19px;color:var(--grey)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{background:var(--concrete);color:var(--grey);font-size:.86rem;padding:34px 0 21px;
  border-top:3px solid var(--ink)}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(14,15,19,.25)}
footer a:hover{border-bottom-color:var(--ink)}
footer .legalbar a{border-bottom:0}
footer a:hover{color:var(--yellow-deep)}
footer h4{color:var(--ink);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.7em}
footer b{color:var(--ink)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:22px}
footer .ftblurb{font-size:.74rem;line-height:1.55;max-width:38ch;margin-bottom:1.1em}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.35em}
footer .logo img{height:24px;margin-bottom:.75em}
.legalbar{border-top:1px solid var(--rule);margin-top:24px;padding-top:15px;
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:.85rem}

/* ---------- legal / prose ---------- */
.prose{max-width:74ch}
.prose h2{font-size:1.5rem;margin-top:2.1em;padding-top:.9em;border-top:2px solid var(--ink)}
.prose h3{margin-top:1.7em}
.prose ol,.prose ul{padding-left:1.25em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--yellow-deep)}
.note{background:var(--concrete-2);border-left:4px solid var(--yellow);padding:16px 20px;
  border-radius:0 var(--r) var(--r) 0;margin:1.3em 0}
.note p:last-child{margin-bottom:0}

/* ---------- quote wizard ---------- */
.qz{max-width:760px;margin:0 auto}
.qsteps{display:flex;gap:6px;margin-bottom:30px}
.qsteps i{flex:1;height:5px;border-radius:3px;background:var(--line);display:block}
.qsteps i.on{background:var(--yellow)}
.qstep{display:none}
.qstep.on{display:block;animation:qin .22s ease}
@keyframes qin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qh{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow-deep);margin-bottom:.7em}
fieldset{border:0;margin:0 0 22px;padding:0}
legend{font-weight:700;font-size:1.34rem;letter-spacing:-.02em;margin-bottom:.5em;padding:0}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.hint{font-weight:350;color:var(--grey);font-size:.86rem;display:block;margin-top:2px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--rule);
  border-radius:6px;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(255,212,0,.5);outline-offset:1px;border-color:var(--ink)}
.f{margin-bottom:17px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:760px){.f3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f2,.f3{grid-template-columns:1fr}}
.opts{display:grid;grid-template-columns:1fr;gap:11px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:flex;justify-content:space-between;gap:14px;align-items:center;
  border:1.5px solid var(--rule);border-radius:6px;padding:15px 18px;cursor:pointer;font-weight:600;
  width:100%;min-height:74px}
.opt span small{font-weight:350;color:var(--grey);display:block;font-size:.86rem;margin-top:2px}
.opt input:checked+span{border-color:var(--ink);background:#FFFCEB;box-shadow:inset 0 0 0 1.5px var(--ink)}
.opt input:focus-visible+span{outline:3px solid rgba(255,212,0,.5);outline-offset:1px}
.qnav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;
  border-top:1px solid var(--line);padding-top:22px}
.err{color:#B3261E;font-size:.86rem;font-weight:600;margin-top:3px;line-height:1.35}
.qprice{background:var(--ink);color:var(--white);border-radius:var(--r);padding:24px 26px;margin-bottom:16px}
.qprice.two{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.qprice.two .qlines{border-left:1px solid #2A2F38;padding-left:26px}
@media(max-width:720px){.qprice.two{grid-template-columns:1fr;gap:16px}
  .qprice.two .qlines{border-left:0;border-top:1px solid #2A2F38;padding-left:0;padding-top:14px}}
.qprice .big{font-size:clamp(2rem,5.4vw,3rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--yellow);margin:.08em 0;white-space:nowrap}
.qprice .sub{color:#C9CDD4;font-size:.9rem;line-height:1.4}
.qprice hr{border:0;border-top:1px solid #2A2F38;margin:20px 0}
.qline{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:.92rem;color:#C9CDD4}
.qline b{color:var(--white);font-weight:600}
.ladder td:first-child{font-weight:600}
.laddernote{font-size:.86rem;color:var(--grey);margin:-.2em 0 0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.note.oneline p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:620px){.laddernote,.note.oneline p{white-space:normal}}
.ladder tr.dim td{color:var(--grey)}
@media print{.hdr,footer,.qnav,.navtoggle{display:none}}