:root{
  --paper:#F3F1EC; --white:#FBFAF7; --band:#E7E4DD;
  --plate:#17181A; --plate2:#202224;
  --ink:#1A1B1C; --mut:#5E6062; --line:#DAD6CE;
  --red:#D8302A; --red-t:#A8231A; --red-d:#FF5A45; --bone:#F3EFE7;
  --e:cubic-bezier(.22,1,.36,1);
  --wrap:1400px; --gut:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:Chivo,"Helvetica Neue",Arial,sans-serif; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
/* Belt and braces against the iOS auto detected phone link: if a platform still linkifies a number
   in text, it inherits the surrounding colour rather than rendering as default blue. */
a[href^="tel:"]{color:inherit;text-decoration:none}
.util a[href^="tel:"],.ftr a[href^="tel:"],.mapfacts a[href^="tel:"]{color:inherit}
/* Defensive: any image inside a fixed height frame fills it and crops, never stretches.
   Round two of the section gate caught two blocks where the img kept its own 1500x1125 aspect
   inside a 210px frame, stretched to 2.4x and overflowed 900px into the next band. */
.figfill{position:relative;overflow:hidden}
.figfill>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
h1,h2,h3,h4{font-weight:900;text-transform:uppercase;line-height:.99;letter-spacing:-.012em}
h1{font-size:clamp(38px,5.4vw,84px)}
h2{font-size:clamp(30px,3.4vw,52px)}
h3{font-size:clamp(22px,2.1vw,34px)}
h4{font-size:clamp(19px,1.5vw,24px)}
p{max-width:66ch}
a{color:var(--red-t)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.lab{font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 20px;z-index:200;font-weight:700}
.skip:focus{left:0}

/* ---------------- header ---------------- */
/* UTILITY BAR. The phone number is the product on a contractor site, so it is above everything,
   beside the real opening hours read off his Google profile. */
.util{background:#0F1011;color:#B6B4AF;font-size:13px;border-bottom:1px solid rgba(255,255,255,.09)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:42px;flex-wrap:wrap}
.util .ul{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.util b{color:#E4E1DB;font-weight:700}
.util .dot{width:7px;height:7px;background:#3FBF6A;display:inline-block;margin-right:8px;flex:0 0 auto}
.util .stars{color:#FFC24A;letter-spacing:.05em}
.util a{color:#B6B4AF;text-decoration:none;display:inline-flex;align-items:center}
.util a:hover{color:var(--red-d)}
.utilcall{color:#FBFAF7!important;font-weight:900;font-size:15px;letter-spacing:.01em}
.utilcall span{color:var(--red-d);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-right:10px}
@media (max-width:1000px){
  .util .wrap{justify-content:center;gap:4px;padding-top:6px;padding-bottom:6px}
  .util .ul{gap:14px;justify-content:center}
  .util .hideS{display:none}
  .utilcall{min-height:44px}
  .util .ul>span{min-height:34px}
}
.hdr{background:var(--plate);position:sticky;top:0;z-index:60}
.nav{max-width:var(--wrap);margin:0 auto;display:flex;align-items:stretch;padding-left:var(--gut)}
/* The supplied lockup is a wide cartoon mark: at nav height the wordmark is unreadable.
   So the nav takes the square mark plus a type set wordmark, and the full lockup lives in the
   footer where there is room for it. */
.brand{display:flex;align-items:center;gap:12px;padding:10px 0;margin-right:26px;flex:0 0 auto;text-decoration:none}
.brand img{height:50px;width:50px;object-fit:contain}
.brand .wm{display:block;line-height:1}
.brand .wm b{display:block;color:#FBFAF7;font-size:19px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase}
.brand .wm span{display:block;color:var(--red-d);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-top:3px}
.nav>ul{display:flex;list-style:none;align-items:stretch;flex:1;gap:0;margin:0}
.nav>ul>li{display:flex;position:relative}
.nav>ul>li>a,.nav>ul>li>button{
  display:flex;align-items:center;gap:7px;padding:0 15px;border:0;background:none;cursor:pointer;
  color:#E9E7E2;text-decoration:none;font-family:inherit;font-size:14.5px;font-weight:500;
  transition:color .25s var(--e);
}
.nav>ul>li>a:hover,.nav>ul>li>button:hover,.nav>ul>li>a[aria-current]{color:var(--red-d)}
.nav>ul>li>button svg{width:9px;height:6px;transition:transform .25s var(--e)}
.nav>ul>li[data-open="1"]>button svg{transform:rotate(180deg)}
.dd{
  position:absolute;top:100%;left:0;min-width:290px;background:var(--plate2);
  border-top:2px solid var(--red);padding:6px 0;list-style:none;
  visibility:hidden;pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .22s var(--e),transform .22s var(--e),visibility 0s linear .22s;z-index:70;
}
.nav>ul>li[data-open="1"] .dd{visibility:visible;pointer-events:auto;opacity:1;transform:none;transition-delay:0s}
.dd::before{content:"";position:absolute;left:0;right:0;top:-20px;height:22px}
.dd a{display:block;padding:11px 20px;color:#DCDAD4;text-decoration:none;font-size:14.5px;font-weight:500;transition:background .2s var(--e),color .2s var(--e)}
.dd a:hover,.dd a:focus{background:var(--plate);color:var(--red-d)}
.dd a b{display:block;font-weight:700}
.dd a span{display:block;font-size:12.5px;color:#8E9092;font-weight:400;margin-top:1px}
/* Click to call sits in the header itself, left of the quote block, because half the buyers on a
   contractor site will phone rather than fill anything in. */
.navcall{display:flex;flex-direction:column;justify-content:center;padding:0 24px;color:#FBFAF7;
  text-decoration:none;flex:0 0 auto;border-left:1px solid rgba(255,255,255,.12);
  transition:color .25s var(--e)}
.navcall b{font-size:20px;font-weight:900;letter-spacing:-.01em;white-space:nowrap}
.navcall span{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red-d)}
.navcall:hover b{color:var(--red-d)}
.navcta{display:flex;flex-direction:column;justify-content:center;padding:0 26px;background:var(--red);color:#fff;text-decoration:none;flex:0 0 auto;transition:background .25s var(--e)}
.navcta:hover{background:#C22720}
.navcta b{font-size:15.5px;font-weight:900;letter-spacing:.005em;text-transform:uppercase}
.navcta span{font-size:11.5px;font-weight:500;opacity:.92}
.burger{display:none;margin-left:auto;align-items:center;justify-content:center;width:60px;background:none;border:0;cursor:pointer}
.burger i{display:block;width:26px;height:2px;background:#EFEDE8;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:26px;height:2px;background:#EFEDE8}
.burger i::before{top:-8px}.burger i::after{top:8px}

/* mobile panel */
.mob{position:fixed;inset:0;background:var(--plate);z-index:120;display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;transition:transform .42s var(--e),visibility 0s linear .42s}
.mob[data-open="1"]{transform:none;visibility:visible;transition:transform .42s var(--e),visibility 0s}
.mobbar{display:flex;align-items:center;justify-content:space-between;padding:12px var(--gut);border-bottom:1px solid rgba(255,255,255,.12);flex:0 0 auto}
.mobbar img{height:46px}
.mobclose{width:48px;height:48px;background:none;border:1px solid rgba(255,255,255,.3);color:#EFEDE8;font-size:22px;cursor:pointer}
.mscroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 40px}
.mscroll a{display:flex;align-items:center;min-height:52px;padding:0 var(--gut);color:#E9E7E2;text-decoration:none;font-size:17px;font-weight:700;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08)}
.mscroll a.sub{font-size:15px;font-weight:500;text-transform:none;color:#B8B6B1;padding-left:calc(var(--gut) + 18px)}
.mobmeta{padding:14px var(--gut) 6px;display:flex;flex-direction:column;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.mobmeta span{color:#C6C4BF;font-size:13.5px;display:flex;align-items:center}
.mobmeta .dot{width:8px;height:8px;background:#3FBF6A;display:inline-block;margin-right:9px;flex:0 0 auto}
.mobmeta a{display:inline-flex;align-items:center;min-height:44px;color:#C6C4BF;text-decoration:none;font-size:13.5px}
.mobmeta a b{color:#FBFAF7;margin-right:5px}
.mscroll .mlab{padding:20px var(--gut) 8px;color:#A2A4A6;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mobcall{display:flex;align-items:center;justify-content:center;min-height:60px;background:var(--red);color:#fff!important;font-weight:900;font-size:18px;text-transform:uppercase;text-decoration:none;border:0!important}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;
  text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.11em;text-transform:uppercase;
  border:0;cursor:pointer;font-family:inherit;transition:background .3s var(--e),color .3s var(--e),transform .3s var(--e)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#C22720;transform:translateY(-2px)}
.btn-out{border:1.5px solid var(--ink);color:var(--ink);background:none}
.btn-out:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{border:1.5px solid rgba(251,250,247,.85);color:#FBFAF7;background:none}
.btn-ghost:hover{background:#FBFAF7;color:var(--plate)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}

/* Question grids. Six questions in a single column ran the section past a screen and a half, and
   pairing them beside a second heading made one column three times the height of the other. */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:38px 56px}
.qa h3{font-size:clamp(17px,1.35vw,21px);line-height:1.2;margin-bottom:11px}
.qa p{color:var(--mut);font-size:16px;max-width:52ch}
.relgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.relgrid h4{margin-top:2px}
@media (max-width:1000px){.qgrid{grid-template-columns:1fr;gap:30px}.relgrid{grid-template-columns:1fr;gap:32px}}

/* Credit list on /about/. These were anchors to "#" with pointer-events disabled, which is a dead
   link wearing a link's clothes. They are not links now, because there is nowhere honest to send
   somebody: the site names the sites its fence has stood on, it does not claim the venues. */
.creditcell{display:block;padding:13px 16px;background:var(--white);border:1px solid var(--line)}
.creditcell b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.creditcell span{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}

/* In content link band. Deliberately quiet: this is crawl and orientation, not a second nav. */
.linkband{background:var(--band);border-top:1px solid var(--line);padding:52px 0 56px}
.lbgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.lbgrid.lb3{grid-template-columns:repeat(3,1fr)}
.lbgrid h3{font-size:12px;letter-spacing:.15em;color:var(--mut);margin-bottom:14px}
.lbgrid ul{list-style:none}
.lbgrid li{margin-bottom:2px}
.lbgrid a{display:inline-flex;align-items:center;min-height:34px;color:var(--ink);text-decoration:none;font-size:15px}
.lbgrid a:hover{color:var(--red-t)}
.lbmore{margin-top:10px;font-weight:700;color:var(--red-t)!important;font-size:14px!important}
@media (max-width:1000px){
  .lbgrid{grid-template-columns:1fr 1fr;gap:26px}
  .lbgrid a{min-height:44px}
}
@media (max-width:520px){.lbgrid{grid-template-columns:1fr}}

/* ---------------- drone footage ----------------
   video.vid drops into the same absolute fill frames the photographs use (.hero, .phero, .aimg,
   .rimg, .pimg, .sphoto, .figfill) so placing a clip changes no layout. The poster attribute
   carries a real frame out of the clip, which is what a reduced motion or metered visitor sees,
   and it paints before a single byte of video is requested. */
video.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:#2B2D2F;z-index:0}
.hero>video.vid,.phero>video.vid{filter:saturate(.92) contrast(1.05) brightness(.9)}
/* The CTA band paints its scrim on ::after at z-index -1, so its frame has to sit below that. */
.cta>video.vid{z-index:-2;object-position:50% 46%;filter:saturate(.85) contrast(1.04) brightness(.86)}
.phero>video.vid{object-position:50% 46%}
/* Motion inside a frame with a caption: the caption plate must stay above it. */
.aimg .cap,.rimg .cap,.pimg .pcap,.faqimg .cap{z-index:2}

/* ---------------- hero ---------------- */
.hero{position:relative;background:#2B2D2F;overflow:hidden}  /* mid dark ground: the pre decode state must never be a flat black band */
.hero>picture>img,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);
  filter:saturate(.92) contrast(1.05) brightness(.9);transform:scale(1.06);animation:settle 1.5s var(--e) forwards}
@keyframes settle{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero>picture>img,.hero>img{animation:none;transform:none}}
/* Directional scrim, measured against the real frame rather than guessed. Heavy enough on the left
   for the headline, light enough through the middle that the client's own photograph is the hero. */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(96deg,rgba(12,13,14,.86) 0%,rgba(12,13,14,.72) 30%,rgba(12,13,14,.24) 56%,rgba(12,13,14,.42) 100%)}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:88px;padding-bottom:100px}
.hero h1{color:#FBFAF7;margin-bottom:22px;max-width:20ch;font-size:clamp(33px,4.3vw,64px);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero h1 em{font-style:normal;color:var(--red-d)}
/* The H1 has to carry the keyword and the promise, and a single flat run of 64 characters set at
   display size ran to four lines and swamped the hero. The promise is a block inside the H1 at
   about half the size, so the heading still contains it for a crawler while the city line keeps
   the visual weight. */
.hero h1 span{display:block;font-size:.46em;color:var(--red-d);margin-top:16px;letter-spacing:-.005em}
.hero .lede{color:#E7E4DE;font-size:19px;line-height:1.6;max-width:52ch;margin-bottom:30px;text-shadow:0 1px 14px rgba(0,0,0,.75)}
.herofacts b,.herofacts span{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.herofacts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.2);margin-top:34px}
.herofacts div{padding:14px 26px 0 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.16)}
.herofacts div:last-child{border-right:0;margin-right:0}
.herofacts b{display:block;color:#FBFAF7;font-size:15px;font-weight:700}
.herofacts span{display:block;color:#E4E1DB;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px}
.stamp{position:absolute;left:0;bottom:0;z-index:4;background:var(--plate);color:#D5D3CE;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 16px}

/* page hero (interior) */
/* Same measured scrim discipline as the homepage hero. The first version stacked a .55 brightness
   filter under an .85 vertical overlay and every interior hero rendered as a black band. */
.phero{position:relative;background:#2B2D2F;overflow:hidden;min-height:460px;display:flex;align-items:flex-end}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 42%);
  filter:saturate(.92) contrast(1.05) brightness(.92)}
.phero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,13,14,.66) 0%,rgba(12,13,14,.40) 38%,rgba(12,13,14,.72) 78%,rgba(12,13,14,.88) 100%)}
.phero .wrap{position:relative;z-index:3;padding-top:96px;padding-bottom:52px}
.phero h1{color:#FBFAF7;font-size:clamp(29px,3.7vw,55px);max-width:25ch;margin-bottom:16px;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.phero p{color:#E7E4DE;font-size:18px;max-width:58ch;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.crumb{margin-bottom:20px;font-size:12.5px;color:var(--mut)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--red-t)}
.phero .crumb{color:#E8E6E1;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.phero .crumb::before{content:"";position:absolute;inset:-5px -11px;background:rgba(12,13,14,.40);z-index:-1}
.phero .crumb{position:relative;display:inline-block;isolation:isolate;padding:2px 0}
.phero .crumb a{color:#FBFAF7;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.phero .crumb a:hover{color:var(--red-d)}
.crumb a{color:#CFCDC8;text-decoration:none}
.crumb a:hover{color:var(--red-d)}

/* ---------------- quote card ---------------- */
.qcard{background:var(--plate);border:1px solid rgba(255,255,255,.14);position:relative;z-index:5}
.qcard .qt{padding:20px 26px 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.qcard .qt b{display:block;color:#FBFAF7;font-size:24px;font-weight:900;text-transform:uppercase;line-height:1}
.qcard .qt span{display:block;color:var(--red-d);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:7px}
.qform{padding:20px 26px 26px;display:grid;gap:13px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field label{display:block;color:#9EA0A2;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;background:#0F1011;border:1px solid rgba(255,255,255,.2);border-radius:0;
  color:#FBFAF7;font-family:inherit;font-size:15.5px;padding:12px 13px;min-height:48px;transition:border-color .25s var(--e)}
.field textarea{min-height:110px;resize:vertical}
.field input[type=file]{padding:11px 12px;font-size:14px;cursor:pointer}
.field input[type=file]::file-selector-button{font-family:inherit;font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;border:0;border-radius:0;background:var(--ink);
  color:var(--paper);padding:10px 16px;margin-right:14px;cursor:pointer}
.lform .field input[type=file]::file-selector-button{background:var(--ink);color:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red-d)}
.field input::placeholder,.field textarea::placeholder{color:#8E9194}
.qnote{color:#8E9092;font-size:12.5px;line-height:1.5;margin-top:2px;max-width:none}
.qnote a{color:var(--red-d)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formmsg{font-size:14px;font-weight:700;padding:12px 14px;display:none}
.formmsg.ok{display:block;background:#123B27;color:#9FE8C0;border:1px solid #1E6B45}
.formmsg.err{display:block;background:#3B1614;color:#FFB4AC;border:1px solid #7A2A25}

/* light form (contact page and light CTAs) */
.lform .field label{color:var(--mut)}
.lform .field input,.lform .field select,.lform .field textarea{background:var(--white);border-color:var(--line);color:var(--ink)}
.lform .field input:focus,.lform .field select:focus,.lform .field textarea:focus{border-color:var(--red-t)}
.lform .qnote{color:var(--mut)}
.lform .qnote a{color:var(--red-t)}

/* ---------------- bands ---------------- */
/* STRIP: each panel now carries a real job photograph behind it, so the second fold is three
   pictures of his own work rather than three text columns. */
.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--plate)}
.strip a{position:relative;display:block;padding:230px 40px 44px;color:#EDEBE6;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.12);overflow:hidden;isolation:isolate}
.strip a:last-child{border-right:0}
.strip a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);z-index:-2;
  filter:saturate(.9) contrast(1.04) brightness(.95);transition:transform .7s var(--e)}
.strip a::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(12,13,14,.15) 0%,rgba(12,13,14,.62) 46%,rgba(12,13,14,.93) 100%)}
.strip a:hover img{transform:scale(1.05)}
.strip h3{color:#FBFAF7;margin-bottom:12px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.strip p{font-size:15px;color:#C6C4BF;line-height:1.6;max-width:34ch}
.strip u{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--red-d);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

.split{display:grid;grid-template-columns:1fr 1fr;min-height:540px}
.split.rev .spanel{order:2}
.spanel{background:var(--red);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:76px 4.5vw 76px var(--gut)}
.spanel h2{margin-bottom:20px}
.spanel p{font-size:17.5px;line-height:1.62;max-width:52ch;color:#fff;margin-bottom:14px}
.spanel dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin-top:24px;font-size:15.5px}
.spanel dt{font-weight:900;font-size:30px;line-height:1}
.spanel dd{align-self:center;color:#fff}
.sphoto{position:relative;min-height:340px}
.sphoto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;object-position:var(--op,50% 50%)}

.sec{padding:76px 0 84px}
.sec.alt{background:var(--band)}
.sec.tight{padding:56px 0 62px}
/* Heading left, supporting line right, baselines aligned. A lone heading with a paragraph under it
   leaves the right half of the band empty, which is the template read DOCTRINE rule 14 warns about. */
.sechead{margin-bottom:44px;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:26px}
.sechead h2{max-width:16ch}
.sechead p{color:var(--mut);font-size:17px;margin:0;max-width:54ch}
.sec.alt .sechead{border-color:#D3CFC6}
@media (max-width:1000px){.sechead{grid-template-columns:1fr;gap:16px;align-items:start}.sechead h2{max-width:none}}
.lede-lg{font-size:22px;line-height:1.55;font-weight:500;max-width:60ch;color:var(--ink)}

/* ANSWER BAND: the opening answer set against a photograph that bleeds off the left viewport edge,
   with an oversized drop initial. Replaces a lone paragraph floating in an empty band. */
.answer{display:grid;grid-template-columns:.82fr 1.18fr;align-items:stretch;background:var(--paper)}
.answer .aimg{position:relative;min-height:420px;margin-left:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut))}
.answer .aimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.answer .aimg .cap{position:absolute;left:0;bottom:0;background:var(--plate);color:#D5D3CE;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px}
.answer .acopy{padding:72px 0 76px 6vw;display:flex;flex-direction:column;justify-content:center}
.answer .acopy p{font-size:23px;line-height:1.5;font-weight:500;max-width:46ch}
.answer .acopy p::first-letter{float:left;font-size:88px;line-height:.78;font-weight:900;color:var(--red-t);padding:6px 14px 0 0}
.answer .ameta{display:flex;gap:0;margin-top:34px;border-top:1px solid var(--line);flex-wrap:wrap}
.answer .ameta div{padding:16px 26px 0 0;margin-right:26px;border-right:1px solid var(--line)}
.answer .ameta div:last-child{border-right:0;margin-right:0}
.answer .ameta b{display:block;font-size:26px;font-weight:900;line-height:1}
.answer .ameta span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red-t);margin-bottom:6px}
@media (max-width:1000px){
  .answer{grid-template-columns:1fr}
  .answer .aimg{margin-left:0;min-height:250px}
  .answer .acopy{padding:38px var(--gut) 44px}
  .answer .acopy p{font-size:20px}
  .answer .acopy p::first-letter{font-size:64px}
}

/* PRODUCT ROWS.
   The first version centered a 330px image inside a row whose height was set by the copy, so the
   photograph floated with dead space above and below it and no two rows were the same height.
   caught it on the homepage. Now: every row is the same height, the photograph fills its half
   edge to edge, and it bleeds to the viewport edge on its own side, which is the containment break. */
.prow{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border-top:1px solid var(--line);min-height:420px}
.prow:last-of-type{border-bottom:1px solid var(--line)}
/* The photograph is first in the DOM, so by default it is the LEFT cell and bleeds LEFT.
   .rev moves it to the right cell, where it bleeds RIGHT. Getting these two the wrong way round
   pushes the image across the copy column, which is what the first attempt did. */
.prow .pimg{position:relative;overflow:hidden;
  margin-left:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut))}
.prow .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.prow .pimg .pcap{position:absolute;left:0;bottom:0;background:var(--plate);color:#D5D3CE;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px}
.prow .pcopy{display:flex;flex-direction:column;justify-content:center;padding:52px 0 56px 4vw}
.prow.rev .pimg{order:2;margin-left:0;
  margin-right:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut))}
.prow.rev .pcopy{padding:52px 4vw 56px 0}
.prow h3{margin-bottom:12px}
.prow p{color:var(--mut);font-size:16px;margin-bottom:16px}
.prow dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px;margin-bottom:18px}
.prow dt{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;color:var(--mut);align-self:center}
.prow dd{font-weight:600}
.prow a.more{color:var(--red-t);text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.11em;text-transform:uppercase;border-bottom:2px solid var(--red-t);padding-bottom:3px}

/* LEDGER: ghost numerals at display size, so the rows carry real scale contrast rather than a
   text table. Paired with .runband, which gives the block a photograph and a bleed. */
.runband{display:grid;grid-template-columns:1.35fr .65fr;gap:0;align-items:stretch}
.runband .rimg{position:relative;aspect-ratio:4/3;min-height:0;align-self:center;margin-right:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut))}
.runband .rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.runband .rimg .cap{position:absolute;left:0;bottom:0;background:var(--plate);color:#D5D3CE;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px}
.runband .rcopy{padding-right:5vw}
@media (max-width:1000px){
  .runband{grid-template-columns:1fr}
  .runband .rimg{margin-right:calc(var(--gut) * -1);min-height:230px;order:2;margin-top:30px}
  .runband .rcopy{padding-right:0}
}
.ledger{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:112px 1fr 1.3fr;gap:26px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.lrow b{font-size:66px;font-weight:900;line-height:.82;color:var(--red);opacity:.28;letter-spacing:-.03em}
.sec.alt .lrow b{color:var(--red-t);opacity:.3}
.lrow h4{margin-top:2px}
.lrow p{color:var(--mut);font-size:15.5px;margin:0}

/* FACTS: dark plate bleeding the full viewport width, with the fact set at display size.
   The first version topped out at 19px, which is no scale contrast at all. */
.factband{position:relative;background:var(--plate);color:#DDDAD4;padding:66px 0 72px;overflow:hidden;isolation:isolate}
.factband .fbbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 48%);z-index:-2;filter:saturate(.7) contrast(1.05) brightness(.8)}
.factband::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(88deg,rgba(18,19,21,.94) 0%,rgba(18,19,21,.86) 52%,rgba(18,19,21,.7) 100%)}
.factband .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:36px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:22px}
.factband h2{color:#FBFAF7}
.factband .fhead p{color:#A9A7A2;font-size:16.5px;max-width:50ch;margin:0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts>div{padding:22px 24px 22px 0;border-right:1px solid var(--line)}
.facts>div:last-child{border-right:0}
.facts span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red-t);margin-bottom:9px}
.facts b{display:block;font-size:clamp(22px,2.1vw,30px);font-weight:900;text-transform:uppercase;line-height:1.02;margin-bottom:9px;letter-spacing:-.012em}
.facts p{font-size:14.5px;color:var(--mut);margin:0}
.factband .facts{border-color:rgba(255,255,255,.18)}
.factband .facts>div{border-color:rgba(255,255,255,.14)}
.factband .facts span{color:var(--red-d)}
.factband .facts b{color:#FBFAF7}
.factband .facts p{color:#A9A7A2}
.factband .facts a{color:var(--red-d)}

/* town / link columns */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.cols.c4{grid-template-columns:repeat(4,1fr)}  /* 8 items, two full rows, no orphan */
@media (max-width:1100px){.cols.c4{grid-template-columns:repeat(2,1fr)}}
.cols a{display:block;padding:17px 18px 17px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:16px;transition:color .25s var(--e)}
.cols a:hover{color:var(--red-t)}
.cols a span{display:block;font-size:13px;font-weight:400;color:var(--mut);margin-top:2px}

/* spec table */
.spec{width:100%;border-collapse:collapse;border-top:1px solid var(--line);margin-top:8px}
.spec th,.spec td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
.spec th{width:210px;font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);padding-top:18px}

/* faq */
.faqband{display:grid;grid-template-columns:.62fr 1.38fr;gap:0;align-items:stretch}
.faqband .faqimg{position:relative;aspect-ratio:3/4;min-height:0;align-self:center;
  margin-left:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut));margin-right:5vw}
.faqband .faqimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.faqband .faqimg .cap{position:absolute;left:0;bottom:0;background:var(--plate);color:#D5D3CE;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px}
@media (max-width:1000px){
  .faqband{grid-template-columns:1fr}
  .faqband .faqimg{margin:0 calc(var(--gut) * -1) 30px;min-height:240px}
}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;font-weight:900;font-size:clamp(20px,1.9vw,28px);text-transform:uppercase;line-height:1.12;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:36px;width:13px;height:2px;background:var(--red-t)}
.faq summary::before{content:"";position:absolute;right:13.5px;top:30.5px;width:2px;height:13px;background:var(--red-t);transition:opacity .25s var(--e)}
.faq details[open] summary::before{opacity:0}
.faq .ans{padding:0 0 24px}
.faq .ans p{color:var(--mut);font-size:16.5px}
.faq .ans p+p{margin-top:12px}

/* ---------------- Google Business Profile: map band and review band ---------------- */
.mapband{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;background:var(--plate);color:#DDDAD4}
.mapband .mapwrap{position:relative;min-height:460px;background:#222426}
.mapband iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) contrast(1.04)}
.mapband .mapcopy{padding:66px 6vw 70px var(--gut);display:flex;flex-direction:column;justify-content:center}
.mapband h2{color:#FBFAF7;margin-bottom:16px}
.mapband p{color:#A9A7A2;font-size:17px;max-width:46ch}
.mapfacts{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin-top:34px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.mapfacts dt{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red-d);margin-bottom:7px}
.mapfacts dd{font-size:16.5px;font-weight:700;color:#FBFAF7;line-height:1.4}
.mapfacts dd a{color:#FBFAF7;text-decoration:none}
.mapfacts dd a:hover{color:var(--red-d)}
.mapfacts .dot{width:8px;height:8px;background:#3FBF6A;display:inline-block;margin-right:9px}
@media (max-width:1000px){
  .mapband{grid-template-columns:1fr}
  .mapband .mapwrap{min-height:300px;order:2}
  .mapband .mapcopy{padding:48px var(--gut) 54px}
  .mapfacts{grid-template-columns:1fr;gap:20px}
}

/* The score sits on a dark plate that bleeds off the left viewport edge, so the band carries a
   containment break as well as its scale contrast and is not a centered text block. */
.revband{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.revband .wrap{padding-top:0;padding-bottom:0}
.revgrid{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:stretch;min-height:280px}
.revscore{background:var(--plate);color:#FBFAF7;display:flex;flex-direction:column;justify-content:center;
  padding:44px 56px 44px 0;min-width:340px;
  margin-left:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut));
  padding-left:calc((100vw - min(var(--wrap),100vw)) / 2 + var(--gut))}
.revscore b{display:block;font-size:104px;font-weight:900;line-height:.86;letter-spacing:-.035em}
.revscore .stars{display:block;color:#FFC24A;font-size:24px;letter-spacing:.12em;margin-top:10px}
.revscore .revcount{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#A9A7A2;margin-top:12px}
.revcopy{display:flex;flex-direction:column;justify-content:center;padding:44px 0}
.revcopy h2{margin-bottom:14px;max-width:20ch}
.revcopy p{color:var(--mut);font-size:17px;margin-bottom:24px}
@media (max-width:1000px){
  .revgrid{grid-template-columns:1fr;gap:0;min-height:0}
  .revscore{min-width:0;margin:0 calc(var(--gut) * -1);padding:32px var(--gut) 34px;
    flex-direction:row;align-items:baseline;gap:18px;flex-wrap:wrap}
  .revscore b{font-size:64px}
  .revscore .stars{margin-top:0}
  .revscore .revcount{margin-top:0;width:100%}
  .revcopy{padding:34px 0 40px}
}

/* dark CTA, carrying its own photograph */
.cta{position:relative;background:#232527;color:#EDEBE6;padding:80px 0 88px;overflow:hidden;isolation:isolate}
.cta .ctabg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 46%);z-index:-2;filter:saturate(.85) contrast(1.04) brightness(.86)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(92deg,rgba(12,13,14,.9) 0%,rgba(12,13,14,.78) 40%,rgba(12,13,14,.62) 100%)}
.cta h2{color:#FBFAF7;margin-bottom:18px;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.cta p{color:#D3D1CC;font-size:17.5px;margin-bottom:0;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.ctagrid{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:center}
.ctacall{display:inline-flex;align-items:center;gap:12px;margin-top:26px;color:#FBFAF7;text-decoration:none;font-size:30px;font-weight:900;letter-spacing:-.01em}
.ctacall:hover{color:var(--red-d)}

/* footer */
.ftr{background:#0F1011;color:#B6B4AF;padding:58px 0 26px;font-size:14.5px}
.ftrgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.ftr img{height:56px;margin-bottom:18px}
.ftr h5{color:#FBFAF7;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ftr ul{list-style:none}
.ftr li{margin-bottom:9px}
.ftr a{color:#B6B4AF;text-decoration:none}
.ftr a:hover{color:var(--red-d)}
.ftr .big{display:inline-flex;align-items:center;min-height:44px;color:#FBFAF7;font-size:21px;font-weight:900}
.ftrbot{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:13px;color:#7E8082}

/* mobile call bar */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--plate);border-top:1px solid rgba(255,255,255,.15)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;color:#FBFAF7;text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.callbar a.p{background:var(--red)}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .qcard{max-width:560px}
  .ctagrid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:1240px){ .navcta{display:none} }
@media (max-width:1000px){
  :root{--gut:20px}
  .nav>ul,.navcta,.navcall{display:none}
  .burger{display:flex}
  .strip{grid-template-columns:1fr}
  .strip a{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:32px 20px 36px}
  .split{grid-template-columns:1fr}
  .split.rev .spanel{order:0}
  .spanel{padding:52px 20px 58px}
  .sphoto{min-height:280px}
  .prow{grid-template-columns:1fr;min-height:0}
  .prow .pimg,.prow.rev .pimg{min-height:230px;order:0!important;
    margin:0 calc(var(--gut) * -1)}
  .prow .pcopy,.prow.rev .pcopy{padding:28px 0 38px}
  .lrow{grid-template-columns:52px 1fr;gap:16px 18px}
  .lrow p{grid-column:2}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div{padding:18px 16px 18px 0}
  .facts>div:nth-child(2n){border-right:0}
  .cols{grid-template-columns:1fr}
  .ftrgrid{grid-template-columns:1fr 1fr;gap:30px}
  .callbar{display:flex}
  /* Measured, not assumed: the bar renders 57px, so 56px of padding left the last pixel of the
     footer under it. Padded past the bar and past the home indicator on a notched phone. */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .callbar{padding-bottom:env(safe-area-inset-bottom,0px)}
  .spec th{width:auto;display:block;padding-bottom:2px;border-bottom:0}
  .spec td{display:block;padding-top:0}
  .hero .wrap{padding-top:56px;padding-bottom:64px}
  .sec{padding:56px 0 62px}
}
/* Tap targets: inline links must clear 44px on touch, per the mobile QA gate.
   padding-block grows an inline link's hit box without disturbing the line it sits in. */
@media (max-width:1000px){
  p a,.qnote a,.crumb a,.facts p a,.ftr li a{padding-block:16px}
  .mapfacts dd a,.revcopy a,.util a{display:inline-flex;align-items:center;min-height:44px}
  .contactfacts b a{display:inline-flex;align-items:center;min-height:44px}
  .prow a.more,.qnote a,.ftr li a,.cols a,.faq summary{min-height:44px}
  .prow a.more{display:inline-flex;align-items:center}
  .ftr li{margin-bottom:2px}
  .ftr li a{display:inline-flex;align-items:center;padding:2px 0}
  .qnote{line-height:1.9}
}
/* Mobile hero: the media is a band, not the whole section.
   At 390 the hero runs about 1610px tall, because the lead form stacks under the copy. Stretching
   a 16:9 frame over all of it crops to a strip roughly 0.23 wide by tall, which reads as texture
   rather than as a photograph, and on the footage pages it spent most of a megabyte doing it.
   So the frame covers the copy, and the form sits below it on the plate the gradient resolves to.
   Measured at 390 against the real page rather than guessed. */
@media (max-width:760px){
  .hero{background:var(--plate)}
  .hero>video.vid,.hero>picture>img,.hero>img{height:clamp(520px,74vh,820px);bottom:auto;
    object-position:58% 50%}
  /* Alpha solved against the real hero frame rather than eyeballed: at .34 through the copy the
     lede measured 2.27:1 on the sunlit grass, under the 4.5:1 floor. .58 across the copy band
     brings it to 4.40:1 at the worst pixel and 4.62:1 at the 99th percentile. */
  .hero::after{height:clamp(520px,74vh,820px);background:
    linear-gradient(180deg,rgba(12,13,14,.34) 0%,rgba(12,13,14,.58) 22%,rgba(12,13,14,.58) 68%,
      rgba(12,13,14,.74) 80%,var(--plate) 100%)}
  /* The stamp sat on the bottom edge of the media band and landed on top of the facts row,
     measured at 390: stamp 710-746, facts 712-895. It is a caption, not information the page
     needs, so mobile drops it rather than fighting it for the space. */
  .hero .stamp{display:none}
}
@media (max-width:620px){
  .f2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .facts>div{border-right:0}
  .ftrgrid{grid-template-columns:1fr}
  .herofacts div{border-right:0;margin-right:0;padding-right:0;width:100%}
}

/* blog: index cards and post body rhythm */
.bloglist{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.blogcard{display:block;padding:26px;border:1px solid var(--line,rgba(0,0,0,.14));text-decoration:none;color:inherit}
.blogcard h3{margin:0 0 10px}
.blogcard:hover h3{color:var(--red-d)}
.blogdate{font-size:14px;opacity:.65;margin:10px 0 0}
.postwrap{max-width:74ch}
.post-body h2{margin:34px 0 12px}
.post-body p{margin:0 0 16px;line-height:1.65}
/* dark panel link columns (home coverage band, town lists inside a plate) */
.spanel .cols a{color:#EDEBE6;border-color:rgba(255,255,255,.16)}
.spanel .cols a span{color:#8E9092}
.spanel .cols a:hover{color:var(--red-d)}
.spanel .cols{border-color:rgba(255,255,255,.16)}
/* two column question layouts collapse */
@media (max-width:1000px){
  .sec .wrap[style*="1fr 1fr"]{grid-template-columns:1fr!important;gap:38px!important}
  .sec div[style*="1fr 1fr"]{grid-template-columns:1fr!important}
}