/* Victory Spray Foam — v2 "job site" design.
   Ben's brand: red, black and white. Black carries the structure (header, bands, footer), red is the action
   (quote buttons, highlights), white and poured-concrete gray are the grounds. Foam cream is a small accent on dark.
   Type: Barlow Condensed (condensed display after US highway and industrial signage) for headlines and labels,
   Libre Franklin (American gothic) for reading. Barlow replaced Big Shoulders on 2026-09-24: Big Shoulders'
   pointed W and M read oddly in words like WHY, WORK and PAPERWORK. Barlow is static, one file per weight
   (latin subset from Google Fonts, SIL Open Font License), so every weight the CSS asks for is declared below.
   Every text color passes WCAG AA on the ground it sits on. */

@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin-400-800.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#FFFFFF;
  --concrete:#EFEEEB;   /* light alternate ground */
  --ink:#0D0D0D;        /* header, bands, footer, text */
  --char:#161616;       /* dark cards on ink */
  --ink-2:#3B3B3B;
  --ink-3:#5E5E5E;
  --rule:#DEDCD7;
  --red:#B31217;
  --red-2:#8F0E12;
  --red-light:#FF6B6F;  /* red text on black only */
  --foam:#EFE3C2;       /* cured-foam cream, accents on black */
  --on-dark:#ECECEC;
  --on-dark-2:#A6A6A6;
  --dark-rule:#2B2B2B;
  --d:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --s:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f:"Libre Franklin",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --max:1320px; --gut:clamp(20px,4vw,56px); --head:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
/* <picture> only carries the AVIF <source>; display:contents leaves the layout to the <img> exactly as before it was
   wrapped. The <source> must be display:none, or it becomes a box of its own in a grid parent (it did on /team/). */
picture{display:contents}
picture>source{display:none}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:.92;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--paper);padding:10px 14px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.label{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.25 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.label::before{content:"";width:22px;height:3px;background:currentColor}
.lede{margin-top:22px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:48ch}
.sec{padding-block:clamp(72px,9vw,128px)}
.nowrap{white-space:nowrap}
.flush{margin-top:0}
.more{margin-top:24px}
.dark{background:var(--ink);color:var(--on-dark)}
.dark .label{color:var(--foam)}
.dark h2,.dark h3{color:#fff}
.dark .lede,.dark p{color:var(--on-dark)}
.alt{background:var(--concrete)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--dark-rule)}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:var(--head)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;color:#fff}
.brand img{width:54px;height:54px;flex:none}
.brand b{font:700 28px/1 var(--d);letter-spacing:.02em;color:#fff}
.brand-txt{display:grid;gap:3px}
.brand-sub{font:700 13px/1 var(--s);letter-spacing:.16em;text-transform:uppercase;color:var(--foam)}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--on-dark);letter-spacing:.01em}
.nav a:hover,.nav a[aria-current="page"]{color:var(--red-light)}
.head-cta{display:flex;align-items:center;gap:18px}
.head-phone{text-decoration:none;font:700 19px/1 var(--d);letter-spacing:.03em;color:#fff;white-space:nowrap}
.menu-btn{display:none;margin-left:auto;font:700 17px/1 var(--d);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:none;border:2px solid #fff;border-radius:0;min-height:42px;padding:0 16px;cursor:pointer}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:2px solid var(--ink);border-radius:0;font:700 18px/1 var(--d);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:transparent;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--ink);color:#fff}
.btn-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn-solid:hover{background:var(--red-2);border-color:var(--red-2);color:#fff}
.btn-light{border-color:#fff;color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.head-cta .btn{min-height:46px;padding:0 20px;font-size:17px}
.link{font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.link:hover{color:var(--red-2)}
.link::after{content:"\00a0\2192"}
.link.plain::after{content:none}
.dark .link,.on-img .link,.band .link,.strip-band .link,.hero .link,.page-hero .link,.estimate .link{color:#fff}
.dark .link:hover,.on-img .link:hover,.band .link:hover,.strip-band .link:hover,.hero .link:hover,.page-hero .link:hover,.estimate .link:hover{color:var(--foam)}

/* home hero: video */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
/* Every hero video, home (.hero-media) or inner page (.band-img), fills its hero the same way: cover, centred.
   The poster is painted by the same element with the same object-fit, so poster and video cover identically.
   Until 2026-10-08 .band-img videos had no rule: on phones they covered only the top ~45% of the hero, and
   above 1600px wide they stopped at 1600px, leaving a dark strip on the right. */
.hero-media img,.hero-media video,.band-img video{width:100%;height:100%;object-fit:cover}
/* The still a visitor without JavaScript sees in place of the video (build.py media()). */
.vnojs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.72) 42%,rgba(13,13,13,.18) 100%),linear-gradient(0deg,rgba(13,13,13,.85) 0%,rgba(13,13,13,0) 38%)}
.hero .wrap{min-height:clamp(560px,82vh,860px);display:grid;align-content:end;padding-block:clamp(96px,12vw,150px) 40px}
.hero .label{color:var(--foam)}
.hero h1{margin-top:18px;font-size:clamp(44px,6.4vw,96px);line-height:.88;letter-spacing:-.005em;max-width:15ch;color:#fff}
.hero h1 .hl{display:inline-block;background:var(--red);color:#fff;padding:0 .12em;margin:0 -.04em;line-height:.98}
.hero .lede{color:var(--on-dark);max-width:44ch}
.actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.vid-toggle{position:absolute;right:var(--gut);top:24px;min-width:44px;height:44px;padding:0 10px;border:2px solid rgba(255,255,255,.7);background:rgba(13,13,13,.4);color:#fff;font:700 13px/1 var(--d);letter-spacing:.08em;cursor:pointer}
.vid-toggle:hover{border-color:#fff}
/* Six columns, not five: there are six proof items, and a five-column grid
   left the last one stranded alone on a second row. */
.proof{list-style:none;margin:56px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.25);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 22px}
.proof li{display:grid;gap:4px;font-size:14px;line-height:1.35;color:var(--on-dark)}
.proof b{font:700 26px/1 var(--d);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.proof .stars{color:var(--foam);letter-spacing:.08em}
.proof a{display:grid;gap:4px;text-decoration:none;color:inherit}
.proof a:hover b{color:var(--foam)}
@media (prefers-reduced-motion:no-preference){
  .hero .label,.hero h1,.hero .lede,.hero .actions,.proof{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero h1{animation-delay:.08s}.hero .lede{animation-delay:.18s}.hero .actions{animation-delay:.26s}.proof{animation-delay:.36s}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ticker */
.ticker{background:var(--red);color:#fff;overflow:hidden;border-block:1px solid var(--red-2)}
.ticker-track{display:flex;width:max-content}
.ticker ul{display:flex;list-style:none;margin:0;padding:0}
.ticker li{display:flex;align-items:center;gap:26px;padding:16px 0 16px 26px;font:700 18px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ticker li::after{content:"";width:9px;height:9px;background:#fff;transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:tick 48s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}}
@keyframes tick{to{transform:translateX(-50%)}}

/* section heads */
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px 40px}
.head-row h2,.sec-title{margin-top:14px;font-size:clamp(36px,4.6vw,68px)}
.head-row p{max-width:44ch;color:var(--ink-2)}
.dark .head-row p{color:var(--on-dark)}

/* service tiles */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.tab{font:700 18px/1 var(--d);letter-spacing:.08em;text-transform:uppercase;padding:14px 20px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:#fff}
.tiles{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink);color:#fff;text-decoration:none;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,13,13,.9) 0%,rgba(13,13,13,.35) 45%,rgba(13,13,13,.05) 100%)}
.tile .tile-body{position:absolute;left:0;right:0;bottom:0;padding:20px 20px 22px;display:grid;gap:6px;background:transparent}
.tile b{font:700 clamp(28px,2.4vw,36px)/.95 var(--d);text-transform:uppercase;letter-spacing:.01em;color:#fff}
.tile small{font-size:14px;line-height:1.4;color:var(--on-dark)}
.tile .go{position:absolute;right:16px;top:16px;width:40px;height:40px;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:700;transform:translateY(-6px);opacity:0;transition:opacity .25s,transform .25s}
.tile a:hover img,.tile a:focus-visible img{transform:scale(1.06)}
.tile a:hover .go,.tile a:focus-visible .go{opacity:1;transform:none}
.tiles .tile-wide{grid-column:span 2}
.tile-wide a{aspect-ratio:8/5}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles-rel{margin-top:0}
.tiles-rel .tile a{aspect-ratio:1/1}
.tiles-rel b{font-size:26px}

/* foam finder */
.finder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);margin-top:44px;align-items:start}
.finder-list{display:grid;gap:8px}
.finder-btn{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;width:100%;padding:16px 18px;border:1px solid var(--dark-rule);background:var(--char);color:var(--on-dark);font:700 22px/1 var(--d);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.finder-btn::after{content:"\2192";font-family:var(--f);font-weight:600;font-size:17px;color:var(--on-dark-2)}
.finder-btn:hover{border-color:var(--on-dark-2)}
.finder-btn[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#fff}
.finder-btn[aria-selected="true"]::after{color:#fff}
.finder-panel{border:1px solid var(--dark-rule);background:var(--char);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100%}
.finder-panel figure{margin:0;position:relative;min-height:320px;background:var(--ink)}
.finder-panel figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finder-data{padding:clamp(24px,3vw,40px);display:grid;gap:22px;align-content:start}
.finder-data h3{font-size:clamp(30px,2.6vw,38px);color:#fff}
.finder-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0}
.finder-stats div{border-top:2px solid var(--red);padding-top:12px}
.finder-stats dt{font:700 11.5px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.finder-stats dd{margin:6px 0 0;font:700 clamp(28px,2.6vw,38px)/1 var(--d);color:#fff}
.finder-stats dd.r{margin-top:8px;font:600 14px/1.35 var(--f);color:var(--on-dark-2)}
.finder-data p{color:var(--on-dark);font-size:16px}
.finder-data .note{color:var(--on-dark-2)}

/* standards */
.standards{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink)}
.standards li{padding:26px 22px 8px 0;display:grid;gap:12px;align-content:start}
.standards li+li{padding-left:22px;border-left:1px solid var(--rule)}
.standards .n{font:700 64px/.8 var(--s);color:var(--red)}
.standards b{font:700 26px/1 var(--d);text-transform:uppercase;letter-spacing:.01em}
.standards span:not(.n){color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* image band with copy (warranty, builders) */
.band{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.band-img{position:absolute;inset:0;z-index:-2}
.band-img img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.8) 50%,rgba(13,13,13,.45) 100%)}
.band .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.band .label{color:var(--foam)}
.band h2{margin-top:16px;font-size:clamp(42px,6vw,92px);line-height:.88;color:#fff}
.band h2 em{font-style:normal;display:inline-block;background:var(--red);color:#fff;padding:0 .1em;line-height:.98}
.band p{color:var(--on-dark);font-size:18px;max-width:44ch}
.band .link{display:inline-block;margin-top:22px}
.band-seal{width:clamp(130px,15vw,200px);height:auto;margin-bottom:26px}
.band-hero{padding-block:clamp(64px,9vw,128px)}
.band-hero h1{margin-top:16px;font-size:clamp(42px,6vw,92px);line-height:.88;color:#fff}
.band-hero p{margin-top:22px}
.band-seal-lg{width:clamp(160px,22vw,280px);margin:0 auto}

/* process */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;counter-reset:s}
.steps li{padding:24px 20px 0 0;border-top:2px solid var(--dark-rule);position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-2px;width:36px;height:2px;background:var(--red)}
.steps .n{display:block;font:700 44px/.9 var(--s);color:var(--foam)}
.steps b{display:block;margin-top:14px;font:700 24px/1 var(--d);text-transform:uppercase;color:#fff}
.steps span:not(.n){display:block;margin-top:8px;color:var(--on-dark-2);font-size:15px;line-height:1.5}

/* credentials */
.creds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:2px solid var(--ink)}
.creds li{padding:26px 20px 26px 0;font:700 24px/1 var(--d);text-transform:uppercase;letter-spacing:.01em}
.creds li+li{padding-left:20px;border-left:1px solid var(--rule)}
.creds small{display:block;margin-top:8px;font:400 14px/1.4 var(--f);text-transform:none;color:var(--ink-3)}

/* service area map */
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
/* p{margin:0} is global, so these paragraphs sat flush against the headline
   and against each other. */
.area p{margin-top:22px}
.area-map{background:var(--char);border:1px solid var(--dark-rule);padding:clamp(10px,2vw,24px)}
.area-map svg{width:100%;height:auto}
.area .city-list{columns:2 150px;column-gap:24px;margin:26px 0 0;padding:0;list-style:none;color:var(--on-dark);font-size:15.5px;line-height:1.95}
.area .city-list li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;background:var(--red-light);vertical-align:2px}

/* builder strip */
.strip-band{position:relative;background:var(--ink);isolation:isolate;overflow:hidden}
.strip-band .band-img{position:absolute;inset:0;z-index:-2}
.strip-band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,13,13,.8)}
.strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;padding-block:clamp(48px,6vw,80px)}
.strip p{font:700 clamp(30px,3.4vw,52px)/.98 var(--d);text-transform:uppercase;color:#fff;max-width:26ch}

/* quote + forms */
.quote{background:var(--concrete);border-top:1px solid var(--rule)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.two h2{margin-top:14px;font-size:clamp(40px,4.4vw,64px)}
.two .intro p{margin-top:18px;color:var(--ink-2);max-width:40ch}
.quote-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.quote-points li{display:flex;gap:12px;align-items:baseline;font-weight:600;color:var(--ink)}
.quote-points li::before{content:"";flex:none;width:10px;height:10px;background:var(--red);transform:translateY(1px)}
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 22px;background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,3vw,36px)}
.field{display:grid;gap:8px;align-content:start}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:14px;font-weight:700;padding:0;color:var(--ink)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field input,.field select,.field textarea{width:100%;font:400 16px/1.4 var(--f);color:var(--ink);background:var(--paper);border:1px solid #BDBBB6;border-radius:0;padding:13px 14px}
.field input::placeholder,.field textarea::placeholder{color:#767676}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:0}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B31217' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.hint{font-size:13px;color:var(--ink-3)}
.label-plain{font-size:14px;font-weight:700;color:var(--ink)}
/* The dashed upload box. The selector is label.drop, not .drop, on purpose:
   ".field label" above is (0,1,1) and beats a bare .drop at (0,1,0), so its
   padding:0 was silently winning and the padding written here never rendered.
   Matching its specificity and sitting later in the file puts this back in
   charge. Vertical padding is deliberately small -- the box is sized by its two
   text rows, and this is the breathing room on top of them. */
label.drop{position:relative;display:grid;place-items:center;gap:6px;text-align:center;padding:7.5px 18px;border:2px dashed #BDBBB6;background:var(--concrete);cursor:pointer;transition:border-color .2s,background-color .2s}
.drop:hover,.drop.over{border-color:var(--red);background:#FFFFFF}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.drop b{font:700 22px/1 var(--d);text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.drop span{font-size:14px;color:var(--ink-3)}
/* Once files are chosen the box stops being the main event and becomes a plain
   "add another" control, so the heading steps down and the thumbnails below carry
   the weight. */
.drop.has-files b{font-size:16px}

/* Chosen files. A filename like "IMG_1432.png" does not tell anyone whether they
   picked the right photo, so each file gets a thumbnail and its own remove button.
   Both lists collapse to nothing while empty, which keeps the field's 8px grid gap
   from opening a hole under the box before anything is picked. */
.pv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px}
.pv-grid:empty{display:none}
.pv{position:relative;min-width:0}
.pv-thumb{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--concrete);border:1px solid #BDBBB6}
.pv-thumb img,.pv-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.pv-generic{display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--d);letter-spacing:.06em;color:var(--ink-3)}
.pv-play{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:rgba(17,17,17,.62)}
.pv-play::before{content:"";position:absolute;left:11px;top:8px;border:6px solid transparent;border-left:9px solid #FFFFFF}
/* 28px and pulled onto the corner: a thumb target that does not sit on the image. */
.pv-rm{position:absolute;top:-9px;right:-9px;width:28px;height:28px;padding:0;border:2px solid var(--paper);border-radius:50%;background:var(--ink);color:#FFFFFF;font:400 17px/1 var(--f);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pv-rm:hover{background:var(--red)}
.pv-rm:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.pv-meta{display:block;margin-top:5px;font-size:12px;color:var(--ink-3);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-note{margin:0;font-size:13px;font-weight:600;color:var(--red)}
.pv-note:empty{display:none}
/* The thumbnail is a button (tap to open the file full size), so strip the
   browser's button chrome and keep the square. */
button.pv-thumb{padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;width:100%}
button.pv-thumb:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.pv-label{font:700 13px/1 var(--d);letter-spacing:.06em;color:var(--ink-3)}

/* ---------- quick view ---------- */
/* Opens the visitor's own file at full size. Nothing is uploaded to view it. */
.lb{position:fixed;inset:0;z-index:100;background:rgba(13,13,13,.92);display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:56px 16px 24px}
.lb[hidden]{display:none}
.lb-body{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.lb-body img,.lb-body video{max-width:min(1100px,100%);max-height:78vh;width:auto;height:auto;display:block;background:#000000}
.lb-cap{margin:0;font-size:13px;color:var(--on-dark-2);text-align:center;word-break:break-all;max-width:90vw}
.lb-msg{margin:0;font-size:15px;font-weight:600;color:#FFFFFF;text-align:center;max-width:36ch}
/* 48px: a thumb target that clears the iOS browser chrome at the top of the screen. */
.lb-x{position:absolute;top:10px;right:12px;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#FFFFFF;font:400 30px/1 var(--f);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-x:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:11px 15px;border:1px solid #BDBBB6;background:var(--paper);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.chip input[type=checkbox]+span::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border:1.5px solid currentColor;background:transparent}
.chip input[type=checkbox]:checked+span::before{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.hp{position:absolute;left:-9999px}
.consent-set legend{margin-bottom:4px}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;line-height:1.5;cursor:pointer}
.field .check{font-weight:400;font-size:12.5px;color:var(--ink-3)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--red)}
.check+.check{margin-top:10px}
.consent{grid-column:1/-1;font-size:13px;line-height:1.5;color:var(--ink-3)}
.consent a{color:var(--red);font-weight:700}
.form-status{grid-column:1/-1;min-height:1.6em;font-weight:700;color:var(--ink)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.form-foot .btn{min-width:200px}

/* inner page hero */
.page-hero{position:relative;background:var(--ink);color:#fff;isolation:isolate;overflow:hidden;padding-block:clamp(72px,10vw,150px) clamp(48px,6vw,84px)}
.page-hero .band-img{position:absolute;inset:0;z-index:-2}
.page-hero .band-img img{width:100%;height:100%;object-fit:cover}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,13,13,.93) 0%,rgba(13,13,13,.76) 50%,rgba(13,13,13,.4) 100%)}
.page-hero .label{color:var(--foam)}
.page-hero h1{margin-top:16px;font-size:clamp(40px,5.6vw,84px);line-height:.9;max-width:20ch;color:#fff;hyphens:auto}
.page-hero .lede{color:var(--on-dark)}
.page-hero .link{color:#fff}
.page-hero.nf{min-height:60vh}
/* Google rating under every page hero's buttons (build.py rating_line). Stars filled to the real rating. */
.rate{display:flex;width:fit-content;align-items:center;gap:10px;margin-top:20px;font:400 15px/1.3 var(--f);color:var(--on-dark);text-decoration:none}
.rate b{color:#fff;font-weight:700}
.rate:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.rate-stars{--st:17px;flex:none;width:calc(var(--st)*5);height:var(--st);background:linear-gradient(90deg,var(--foam) var(--fill),rgba(255,255,255,.3) var(--fill));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") left center/var(--st) var(--st) repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") left center/var(--st) var(--st) repeat-x}
.crumbs{margin-top:28px;font-size:13px;color:var(--on-dark-2)}
.crumbs a{color:var(--on-dark);text-decoration:none}

.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,6vw,96px)}
.split h2{font-size:clamp(34px,3.2vw,48px)}
.split .copy p+p{margin-top:16px}
.split .copy p{color:var(--ink-2);max-width:62ch}
.stack{display:grid;gap:clamp(64px,8vw,112px)}
.prose p{color:var(--ink-2);max-width:66ch}
.prose p+p{margin-top:14px}
.prose .link{font-weight:700}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px 28px;padding:22px 0;border-bottom:1px solid var(--rule)}
.rows b{font:700 25px/1.02 var(--d);text-transform:uppercase;letter-spacing:.01em}
.rows span{color:var(--ink-2)}
.dark .rows{border-top-color:#fff}
.dark .rows li{border-bottom-color:var(--dark-rule)}
.dark .rows b{color:#fff}
.dark .rows span{color:var(--on-dark)}
.figure-wide{margin:0;background:var(--paper);border:1px solid var(--rule);padding:clamp(14px,1.8vw,24px);max-width:640px}
.figure-wide figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)}

/* spec table */
.table-wrap{overflow-x:auto}
.spec{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.spec th{font:700 11.5px/1.35 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 18px 12px 0;border-bottom:2px solid var(--ink)}
.spec td{padding:16px 18px 16px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink)}
.spec td.num{font:700 22px/1.1 var(--d);color:var(--ink);white-space:nowrap}
.spec td:first-child{white-space:nowrap;font-weight:700}
.spec a{font-weight:700}
.note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--ink-3);max-width:72ch}

/* questions */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-weight:700;font-size:19px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;width:34px;height:34px;display:grid;place-items:center;font:700 26px/1 var(--d);color:#fff;background:var(--ink)}
.faq details[open] summary::after{content:"\2013";background:var(--red)}
.faq .a{padding:0 0 24px;color:var(--ink-2);max-width:66ch}

/* service area page */
.county-list{columns:3 170px;column-gap:28px;margin:0;padding:0;list-style:none;color:var(--ink-2);font-size:16px;line-height:1.9}

/* energy estimate */
.estimate{margin-top:28px;padding:24px 26px;background:var(--ink);color:#fff;border-left:6px solid var(--red);display:grid;gap:10px}
.estimate .label{color:var(--foam)}
.estimate-num{font:700 clamp(44px,5vw,68px)/.95 var(--d);text-transform:uppercase;color:#fff}
.estimate p:not(.estimate-num){color:var(--on-dark)}
.estimate .link{color:#fff}
.method{margin-top:10px}
.method summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--red)}

/* our work */
.work-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.work-grid.feature{margin-top:0}
.work-grid-2{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
.work-card a{display:grid;gap:4px;text-decoration:none;color:var(--ink)}
.work-card .ph{position:relative;overflow:hidden;background:var(--ink)}
.work-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.work-card .ph::after{content:"Real job";position:absolute;left:0;top:0;background:var(--red);color:#fff;font:700 10.5px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px}
.work-card b{margin-top:14px;font:700 28px/1 var(--d);text-transform:uppercase;letter-spacing:.01em}
.work-card span{font:700 12px/1.35 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.work-card a:hover b{color:var(--red)}
.work-card a:hover img{transform:scale(1.04)}
.dark .work-card a{color:#fff}
.dark .work-card span{color:var(--on-dark-2)}
.dark .work-card a:hover b{color:var(--foam)}
.feature .work-card:first-child{grid-column:span 2}
.feature .work-card:first-child img{aspect-ratio:8/3}
.pfacts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-block:2px solid var(--ink)}
.pfacts li{padding:22px 20px 22px 0;font:700 30px/1 var(--d);text-transform:uppercase}
.pfacts li+li{padding-left:20px;border-left:1px solid var(--rule)}
.pfacts .label{display:flex;margin-bottom:10px;font-size:13px}
.pfacts .label::before{width:14px}
.gallery{columns:2 300px;column-gap:20px}
.gallery figure{margin:0 0 24px;break-inside:avoid}
.gallery img{width:100%;height:auto;background:var(--concrete)}
.gallery figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-3)}

/* team */
.portrait{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--concrete)}
.portrait-empty{display:grid;place-items:center}
.portrait-empty span{font:700 clamp(40px,4vw,64px)/1 var(--d);color:var(--ink-3)}
.crew{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.crew a{display:grid;gap:4px;text-decoration:none;color:var(--ink)}
.crew .ph{overflow:hidden;background:var(--ink)}
.crew img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.crew a:hover img{transform:scale(1.04)}
.crew b{margin-top:14px;font:700 28px/1 var(--d);text-transform:uppercase}
.crew a > span{font:700 12px/1.35 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.crew a:hover b{color:var(--red)}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(28px,4vw,56px)}
.member{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,2.4vw,32px);align-items:start;scroll-margin-top:calc(var(--head) + 24px)}
.member h2{font-size:clamp(30px,2.6vw,38px)}
.member .label{margin-top:12px}
.member p{margin-top:14px;color:var(--ink-2);font-size:16px}

/* documents */
.doc-links a{font-weight:700;color:var(--red)}

/* footer */
.site-foot{background:var(--ink);color:var(--on-dark);padding-block:72px 64px;border-top:6px solid var(--red)}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.site-foot .brand img{width:84px;height:84px}
.site-foot .brand b{font-size:40px}
.site-foot p{margin-top:16px;max-width:38ch;font-size:15px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--red-light)}
.site-foot .label{color:var(--foam)}
.site-foot .label::before{display:none}
.foot-big{display:block;margin-top:22px;font:700 40px/1 var(--d);letter-spacing:.02em;color:#fff}
.foot-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.foot-base{grid-column:1/-1;border-top:1px solid var(--dark-rule);padding-top:22px;font-size:13px;color:var(--on-dark-2)}
.foot-base a{color:var(--on-dark)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 32px}
/* "Website by DoLess/GetMore": the same credit the other DLGM-built sites carry,
   cobalt slash included. Wraps under the copyright on narrow screens. */
.foot-by a,.foot-by a:hover{color:inherit;text-decoration:none;transition:color .18s ease}
.foot-by .by{opacity:.72}
.foot-by .dlgm{font-weight:600;color:var(--on-dark);border-bottom:1px solid currentColor;padding-bottom:1px}
.foot-by .sl{color:#5A7FFF;font-weight:700}
.foot-by a:hover .dlgm,.foot-by a:focus-visible .dlgm{color:#fff}
.foot-group summary{list-style:none;margin-bottom:0}
.foot-group summary::-webkit-details-marker{display:none}
@media (min-width:601px){.foot-group summary{pointer-events:none}}

/* mobile call bar */
.mbar{display:none}

/* the website chat's button (desktop; on phones and tablets it is "Ask" in the call bar) */
.ask-fab{position:fixed;right:24px;bottom:24px;z-index:70;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;
  background:var(--ink);color:#fff;border:0;border-radius:999px;font:700 17px/1 var(--d);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 10px 30px rgba(13,13,13,.28)}
.ask-fab:hover{background:var(--red)}
.ask-fab:focus-visible{outline:3px solid var(--red-light);outline-offset:3px}
.ask-fab[aria-expanded="true"]{display:none}

@media (max-width:1320px){.head-phone{display:none}.nav{gap:18px}}
@media (max-width:1180px){.standards{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}.standards li:nth-child(4){padding-left:0;border-left:0}}
@media (max-width:1120px){
  .nav,.head-cta{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .nav-open .nav{display:flex;flex-direction:column;gap:0;position:absolute;top:var(--head);left:0;right:0;background:var(--ink);border-bottom:1px solid var(--dark-rule);padding:8px var(--gut) 20px}
  .nav-open .caret{width:16px;height:10px}
  .nav-open .caret path{stroke-width:2.4}
  .nav-open .nav-item.open>.nav-top{color:var(--red-light)}
  .mbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a,.mbar button{display:flex;align-items:center;justify-content:center;min-height:58px;color:#fff;text-decoration:none;font:700 20px/1 var(--d);letter-spacing:.08em;text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer}
  .mbar>*+*{border-left:1px solid var(--dark-rule)}
  .ask-fab{display:none!important}
  .mbar .q{background:var(--red);color:#fff}
  .site-foot{padding-bottom:calc(64px + 58px + env(safe-area-inset-bottom))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .creds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .creds li:nth-child(4){padding-left:0;border-left:0}
  .site-foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .finder{grid-template-columns:minmax(0,1fr)}
  .finder-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .finder-btn{font-size:19px;padding:14px}
}
@media (max-width:860px){
  .hero-grid,.two,.band .wrap,.split,.area{grid-template-columns:minmax(0,1fr)}
  .work-grid{grid-template-columns:minmax(0,1fr)}
  .work-grid-2,.work-grid.feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles,.tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles-3 .tile:last-child:nth-child(odd){grid-column:span 2}
  .tiles-3 .tile:last-child:nth-child(odd) a{aspect-ratio:8/5}
  .finder-panel{grid-template-columns:minmax(0,1fr)}
  .finder-panel figure{min-height:240px}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team{grid-template-columns:minmax(0,1fr)}
  .standards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standards li:nth-child(n){padding-left:0;border-left:0}
  .standards li:nth-child(even){padding-left:22px;border-left:1px solid var(--rule)}
}
@media (max-width:600px){
  :root{--head:68px}
  .brand img{width:44px;height:44px}
  .brand b{font-size:24px}
  .brand-sub{font-size:11px}
  .hero .wrap{min-height:0;padding-block:80px 32px}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
  .proof b{font-size:22px}
  .ticker li{font-size:18px;padding-block:13px}
  .tiles,.tiles-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile a,.tiles-rel .tile a{aspect-ratio:1/1}
  .tile-wide a,.tiles-3 .tile:last-child:nth-child(odd) a{aspect-ratio:2/1}
  .tile .tile-body{padding:12px 12px 14px}
  .tile b,.tiles-rel b{font-size:21px}
  .finder-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder-btn{font-size:17px;padding:13px 12px}
  .finder-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .steps,.creds,.standards{grid-template-columns:minmax(0,1fr)}
  .steps li{padding:20px 0}
  .standards li,.standards li:nth-child(even){padding:22px 0 12px;border-left:0}
  .creds li,.creds li+li{padding:18px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .creds li:last-child{border-bottom:0}
  .rows li,.form{grid-template-columns:minmax(0,1fr)}
  .work-grid-2,.work-grid.feature{grid-template-columns:minmax(0,1fr)}
  .feature .work-card:first-child{grid-column:auto}
  .feature .work-card:first-child img{aspect-ratio:4/3}
  .pfacts{grid-template-columns:minmax(0,1fr)}
  .pfacts li,.pfacts li+li{padding:16px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .pfacts li:last-child{border-bottom:0}
  .site-foot .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .foot-brand{padding-bottom:24px}
  .foot-group{border-top:1px solid var(--dark-rule)}
  .foot-group summary{display:flex;justify-content:space-between;padding:16px 0;cursor:pointer}
  .foot-group summary::after{content:"+";font-size:18px;line-height:1;color:var(--on-dark)}
  .foot-group[open] summary::after{content:"\2013"}
  .foot-group .foot-list{margin:0 0 16px}
  .member{grid-template-columns:minmax(0,1fr)}
  .member .portrait{max-width:320px}
  .spec{min-width:0}
  .spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .spec tr{display:block;padding:14px 0;border-bottom:2px solid var(--ink)}
  .spec td{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:6px 0;border:0}
  .spec td::before{content:attr(data-label);font:700 11px/1.5 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .spec td.num{white-space:normal}
  .vid-toggle{top:14px}
  .form-foot .btn{width:100%}
}
@media (max-width:420px){
  /* long single words (BARNDOMINIUM) must never push the page sideways on a small phone */
  h1,h2,h3,.tile b,.work-card b,.crew b{overflow-wrap:break-word}
  .page-hero h1{font-size:34px}
  .hero h1{font-size:40px}
  .two h2,.head-row h2,.sec-title,.band h2,.band-hero h1{font-size:32px}
  .split h2,.member h2,.finder-data h3{font-size:30px}
  .tile b,.tiles-rel b{font-size:19px}
  .work-card b,.crew b{font-size:22px}
  /* phones: full-width stacked buttons, so a long phone number can never push the page sideways */
  .actions{flex-direction:column;align-items:stretch;gap:10px}
  .actions .btn{width:100%;font-size:17px;padding:0 14px;min-height:50px}
  .actions .link{text-align:center}
}
@media (max-width:380px){
  .site-head .wrap{gap:10px}
  .brand{gap:8px}
  .brand img{width:36px;height:36px}
  .brand-sub{display:none}
  .menu-btn{padding:0 12px}
  .finder-list{grid-template-columns:minmax(0,1fr)}
}
.nav a,.btn,.head-phone{white-space:nowrap}
/* related tiles: column count follows the number of tiles, so none sit alone */
.tiles.rel-1{grid-template-columns:minmax(0,1fr)}
.tiles.rel-1 .tile a{aspect-ratio:2/1}
.tiles.rel-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.rel-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.rel-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.tiles.rel-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .tiles.rel-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles.rel-3 .tile:last-child{grid-column:span 2}
  .tiles.rel-3 .tile:last-child a{aspect-ratio:2/1}
}

/* ---------------------------------------------------------------- locations
   County and town pages. The stat grid and the locator map carry the facts that
   make one town page different from the next, so they read as content, not chrome. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:32px 0 0;background:var(--ink);border:1px solid var(--dark-rule)}
.stat{background:var(--ink);box-shadow:0 0 0 1px var(--dark-rule);padding:18px 16px}
.stat b{display:block;font:700 clamp(26px,3.4vw,36px)/1 var(--d);color:var(--foam);letter-spacing:.01em}
.stat span{display:block;margin-top:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);line-height:1.4}
.src{margin-top:22px;font-size:13px;line-height:1.65;color:var(--on-dark-2);max-width:62ch}
.sec:not(.dark) .src{color:var(--ink-3)}
.lede-sm{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:62ch;margin:0 0 20px}

/* Locator map: real gazetteer coordinates, drawn to scale against distance rings. */
.locmap{width:100%;height:auto;display:block}
.locbg{fill:var(--char)}
.ring{fill:none;stroke:var(--dark-rule);stroke-width:1}
.locline{stroke:var(--red-light);stroke-width:1.5;stroke-dasharray:4 4}
.locbase{fill:var(--on-dark-2)}
.loctown{fill:var(--red-light)}
.loclabel{fill:var(--on-dark-2);font:600 11px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;text-anchor:middle}
.loctownlabel{fill:var(--foam)}
.loccap{margin:14px 0 0;font-size:13px;color:var(--on-dark-2);text-align:center}

/* Town index inside a county page. */
/* The 1px gaps are drawn by a ring on each cell, NOT by a rule-coloured
   background behind the grid. With the colour on the container, any cell left
   empty by an uneven town count painted a solid beige block -- 25 of the 35
   county pages had one, and every odd count showed one again at two columns.
   An empty cell now shows paper, like the rest of the page. */
.town-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--paper);border:1px solid var(--rule)}
.town-list a{display:block;background:var(--paper);box-shadow:0 0 0 1px var(--rule);padding:16px 18px;text-decoration:none;color:var(--ink)}
.town-list a:hover{background:var(--concrete)}
.town-list b{display:block;font:700 19px/1.2 var(--d);letter-spacing:.01em}
.tl-meta{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.5}

@media (max-width:860px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .stat b{font-size:24px}
  .stat span{font-size:11px}
  .town-list{grid-template-columns:1fr}
}
.city-list-light{columns:3 140px;column-gap:24px;margin:0;padding:0;list-style:none;font-size:15.5px;line-height:1.95}
.city-list-light li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;background:var(--red);vertical-align:2px}
@media (max-width:600px){.city-list-light{columns:2 120px}}


/* ---------------------------------------------------------------- nav dropdowns
   A white spec panel dropping out of the black header. The first version was
   #161616 on a #0D0D0D header -- almost the same black, so it had no edge and
   no elevation, and its rows were body-font names with nothing under them. It
   read as a generic dropdown bolted onto an industrial site.

   Opening is driven from site.js on both hover and click so aria-expanded
   always matches what is on screen; a CSS :hover menu reports itself closed to
   a screen reader the whole time it is open. */
/* The nav row must fill the header, not just its own text: .nav-menu is
   positioned at top:100% of .nav-item, and while the item was only as tall
   as the word, the panel opened 19px ABOVE the header edge -- tight under
   the letters. Stretching the row anchors the panel to the header instead. */
.nav{align-self:stretch;align-items:stretch}
/* Every header item is the full height of the bar, so the plain links and
   the dropdown buttons present the same target. The buttons used to be
   14.5px tall next to 76px links. */
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-item>.nav-top{align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font:600 14.5px/1 var(--f);letter-spacing:.01em;color:var(--on-dark);background:none;border:0;padding:0;cursor:pointer}
.nav-top:hover,.nav-top[aria-current="page"],.nav-top.on,.nav-item.open>.nav-top{color:var(--red-light)}
.caret{width:10px;height:6px;flex:none;transition:transform .18s}
.nav-item.open .caret{transform:rotate(180deg)}

.nav-menu{display:none;position:absolute;top:100%;left:-22px;width:330px;
  background:none;z-index:60}
.nav-menu.wide{width:620px}
/* The panel's top edge lines up with the bottom of the Get a Free Quote
   button, so it rises into the header by exactly the button's own centring
   margin -- (header height - button height) / 2 -- rather than by a number
   picked by eye. It overflows the shell upwards, which costs nothing: the
   panel is still a descendant of .nav-item, so crossing onto it never fires
   mouseleave. */
.nav-panel{margin-top:calc((46px - var(--head)) / 2);
  background:var(--paper);border-top:3px solid var(--red);
  box-shadow:0 26px 54px rgba(0,0,0,.38),0 2px 0 rgba(0,0,0,.06)}
.nav-item.open>.nav-menu{display:block}
.nav-list{list-style:none;margin:0;padding:6px}
.nav-menu.wide .nav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2px}
/* Flex, not grid, on the row itself: a two-track grid here put the label in the
   wrong track and pushed the second column clean outside the panel. */
.nav-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-width:0;padding:12px 15px;text-decoration:none;color:var(--ink)}
.nav-txt{display:block;min-width:0}
.nav-list b{display:block;font:700 18px/1.05 var(--d);text-transform:uppercase;letter-spacing:.015em}
.nav-desc{display:block;margin-top:4px;font:400 12.5px/1.35 var(--f);color:var(--ink-3)}
.nav-go{flex:none;color:var(--red);font-size:17px;line-height:1;opacity:0;transform:translateX(-6px);transition:opacity .16s,transform .16s}
.nav-list a:hover,.nav-list a:focus-visible,.nav-list a[aria-current="page"]{background:var(--concrete)}
.nav-list a:hover b,.nav-list a:focus-visible b,.nav-list a[aria-current="page"] b{color:var(--red)}
.nav-list a:hover .nav-go,.nav-list a:focus-visible .nav-go{opacity:1;transform:translateX(0)}
.nav-base{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 22px;background:var(--ink);color:#fff;text-decoration:none;
  font:700 17px/1 var(--d);letter-spacing:.09em;text-transform:uppercase}
.nav-base span{color:var(--foam);transition:transform .16s}
.nav-base:hover{background:var(--red)}
.nav-base:hover span{color:#fff;transform:translateX(5px)}

/* ---------------------------------------------------------------- county accordion
   Native <details>, so it opens with JavaScript switched off and is announced
   correctly without any ARIA of our own. */
.accord{border-top:2px solid var(--ink);margin-top:44px}
.acc{border-bottom:2px solid var(--ink)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;padding:26px 0}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover .acc-name{color:var(--red)}
.acc-name{font:700 clamp(25px,3vw,38px)/1 var(--d);text-transform:uppercase;letter-spacing:.005em}
.acc-meta{font:600 12.5px/1.35 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.acc-sign{margin-left:auto;width:22px;height:22px;flex:none;position:relative}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;left:0;top:9px;width:22px;height:4px;background:var(--red)}
.acc-sign::after{transform:rotate(90deg);transition:transform .2s}
.acc[open]>summary .acc-sign::after{transform:rotate(0)}
.acc-body{padding-bottom:44px}
.acc-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(26px,4vw,60px)}
.acc-copy h3{font-size:clamp(20px,2.1vw,27px);margin-bottom:14px}
.acc-copy p{color:var(--ink-2)}
.acc-jobs{margin-top:16px}
.acc-jobs a{color:var(--red);font-weight:600}
.acc-copy .link{margin-top:20px;display:inline-block}
.acc-lede{color:var(--ink-2);max-width:72ch}
.acc-townlabel{margin-top:38px}
.svc{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.svc a{text-decoration:none;font-weight:600;font-size:16px;border-bottom:1px solid var(--rule);padding-bottom:9px;display:block}
.svc a:hover{color:var(--red);border-color:var(--red)}
.town-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}
.town-grid a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid var(--rule);background:var(--paper);text-decoration:none;font-weight:600;font-size:16px}
.town-grid a:hover{border-color:var(--ink);background:var(--concrete)}
.town-grid .go{color:var(--red)}
.county-list{margin-top:20px}
@media (max-width:860px){.acc-grid{grid-template-columns:1fr}}
@media (max-width:420px){
  .acc>summary{padding:20px 0}
  .town-grid{grid-template-columns:1fr}
}

/* Phone menu. These live AFTER the dropdown rules on purpose: .nav-menu.wide
   .nav-list is a three-class selector and beats .nav-open .nav-list, so source
   order is what keeps the two-column grid off a 390px screen. */
@media (max-width:1120px){
  .nav-open .nav>.nav-top,.nav-open .nav-item>.nav-top{width:100%;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--dark-rule);font:700 24px/1 var(--d);text-transform:uppercase;letter-spacing:.04em;color:#fff}
  .nav-open .nav-item{display:block;position:static}
  .nav-open .nav-menu{position:static;min-width:0;background:none;border:0;padding:2px 0 14px}
  .nav-open .nav-menu{width:auto;border-top:0;box-shadow:none;background:none}
  .nav-open .nav-list{display:block;padding:0}
  .nav-open .nav-list a{display:block;padding:12px 0 12px 20px;font:600 17px/1.3 var(--f);border-bottom:1px solid var(--dark-rule);color:var(--on-dark);background:none}
  .nav-open .nav-list b{font:600 17px/1.3 var(--f);text-transform:none;letter-spacing:0;color:inherit}
  .nav-open .nav-desc,.nav-open .nav-go{display:none}
  .nav-open .nav-list a:hover b,.nav-open .nav-list a[aria-current="page"] b{color:var(--red-light)}
  .nav-open .nav-base{margin:10px 0 4px;padding:14px 18px;font-size:16px}
  .nav-open .nav-menu,.nav-open .nav-menu.wide{width:auto;position:static;min-width:0;background:none;border-top:0;box-shadow:none;padding:2px 0 14px}
  .nav-open .nav-panel{margin-top:0;background:none;border-top:0;box-shadow:none}
  .nav-open .nav-list,.nav-open .nav-menu.wide .nav-list{display:block;padding:0}
}

/* ---------- customer reviews ---------- */
/* Verbatim Google reviews. Cards size to their own text -- these run from two
   lines to ten, and forcing them to a common height would either clip the long
   one or strand the short one in white space. */
.reviews{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;align-items:start}
.reviews li{background:#fff;border:1px solid var(--rule);padding:22px 20px 18px;
  display:grid;gap:12px;align-content:start}
.reviews .stars{color:#E8A33D;font-size:15px;letter-spacing:.14em;line-height:1}
.reviews blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.reviews cite{font-style:normal;display:grid;gap:2px;font-size:13px;font-weight:700;
  color:var(--ink);border-top:1px solid var(--rule);padding-top:12px}
.reviews cite span{font-weight:400;color:var(--ink-3);font-size:12px}
@media (max-width:600px){.reviews{grid-template-columns:1fr;gap:16px}}

/* ---------- receipt (replaces the form after a successful send) ---------- */
/* .form sets display:grid, which would otherwise beat the hidden attribute. */
.form[hidden]{display:none}
.receipt{background:var(--paper);border:1px solid var(--rule);padding:clamp(22px,3vw,36px);
  display:grid;gap:0;align-content:start;scroll-margin-top:calc(var(--head) + 20px)}
.receipt-tick{width:48px;height:48px;border-radius:50%;background:#1F7A3A;display:grid;place-items:center}
.receipt-tick svg{width:24px;height:24px}
.receipt-h{font:700 clamp(38px,5vw,52px)/.9 var(--d);text-transform:uppercase;margin:16px 0 8px;outline:0}
.receipt-p{margin:0 0 18px;font-size:16px;color:var(--ink)}
.receipt-recap{margin:0 0 18px;padding-top:14px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;font-size:14.5px}
.receipt-recap dt{color:var(--ink-3)}
.receipt-recap dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.receipt-files-cap{margin:0 0 8px;font-size:13px;color:var(--ink-3)}
.receipt-thumbs{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.receipt-thumbs .pv-thumb{width:60px;height:60px;aspect-ratio:auto}
.receipt-thumbs .pv-play{width:22px;height:22px;margin:-11px 0 0 -11px}
.receipt-thumbs .pv-play::before{left:8px;top:6px;border-width:5px;border-left-width:8px}
.receipt-more{width:60px;height:60px;display:grid;place-items:center;background:var(--concrete);
  border:1px solid #BDBBB6;font:700 16px/1 var(--d);color:var(--ink-3)}
.receipt-call{text-align:center}
.receipt-again{margin:14px auto 0;padding:6px 4px;border:0;background:none;cursor:pointer;
  font:600 14px/1.3 var(--f);color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.receipt-again:hover{color:var(--ink)}
.receipt-again:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- builders page: on-this-page index + multifamily section drawings ---------- */
/* One link Ben can text a builder, so the page has to be scannable top to bottom. */
.jump{background:var(--concrete);border-bottom:1px solid var(--rule)}
.jump ul{list-style:none;margin:0;padding:14px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px}
.jump a{display:inline-block;padding:6px 0;font:700 17px/1.1 var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.jump a:hover{border-bottom-color:var(--red);color:var(--red)}
#multifamily-work,#why,#spec,#documents,#multifamily,#schedule,#paperwork{scroll-margin-top:calc(var(--head) + 24px)}
.mf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,64px)}
.mf-card{background:var(--paper);color:var(--ink);border-top:4px solid var(--red);display:grid;grid-template-rows:auto 1fr}
.mf-fig{margin:0;padding:clamp(16px,2.4vw,32px);border-bottom:1px solid var(--rule)}
.mf-fig svg{display:block;width:100%;height:auto}
.mf-body{padding:clamp(22px,2.8vw,36px)}
/* the cards are white inside a .dark band, so undo its cream label and white headings */
.dark .mf-card .label{color:var(--red)}
.dark .mf-card h3{color:var(--ink)}
.mf-body h3{margin-top:14px;font-size:clamp(28px,2.6vw,38px);line-height:.95}
.mf-body p{margin:12px 0 0;color:var(--ink-2);max-width:52ch}
.mf-scope{margin:22px 0 0;border-top:2px solid var(--ink)}
.mf-scope div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.mf-scope dt{font:700 21px/1.1 var(--d);text-transform:uppercase}
.mf-scope dd{margin:0;color:var(--ink-2)}
.mf-scope .r{font:700 21px/1 var(--d);color:var(--red)}
.mf .note{color:var(--on-dark-2);margin-top:24px}
@media (max-width:860px){.mf-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:460px){.mf-scope div{grid-template-columns:minmax(0,1fr) auto}.mf-scope dt{grid-column:1/-1}.jump ul{gap:2px 20px}.jump a{font-size:16px}}

/* ---------- builders page sections (layout approved 2026-09-24) ---------- */
/* Each section has its own ground (white / concrete / black) and a form that fits its content. */
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(34px,4vw,54px)}
.glance{background:var(--red);color:#fff}
.glance ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.glance li{display:grid;gap:4px;align-content:start;padding:22px 20px;border-left:1px solid rgba(255,255,255,.3)}
.glance li:first-child{border-left:0;padding-left:0}
.glance b{font:700 clamp(22px,2.2vw,28px)/1 var(--d);text-transform:uppercase;letter-spacing:.01em}
.glance span{font-size:14px;line-height:1.4}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fact{border:1px solid var(--rule);border-top:4px solid var(--ink);padding:24px;display:grid;gap:10px;align-content:start}
.fact-big{font:700 clamp(34px,3.2vw,44px)/1 var(--d);color:var(--red);text-transform:uppercase;font-variant-numeric:tabular-nums}
.fact h3{font-size:22px}
.fact p{margin:0;color:var(--ink-2);font-size:15.5px}
.b-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.b-steps li{display:grid;gap:8px;align-content:start;padding:22px 24px 22px 0;border-top:3px solid var(--ink)}
.b-step-n{font:700 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.b-steps b{font:700 26px/1 var(--d);text-transform:uppercase}
.b-steps li>span:last-child{color:var(--ink-2);font-size:15.5px}
.b-steps-foot{margin:28px 0 0;color:var(--ink-2);max-width:72ch}
.dark .spec th{color:var(--on-dark-2);border-bottom-color:#fff}
.dark .spec td{color:var(--on-dark);border-bottom-color:var(--dark-rule)}
.dark .spec td.num{color:#fff}
.dark .spec td.num:last-child{color:var(--red-light)}
.dark .spec td:first-child{color:#fff}
.dark .note{color:var(--on-dark-2)}
.dark .spec tr{border-bottom-color:#fff}
.dark .spec td::before{color:var(--on-dark-2)}
.docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.b-doc{height:100%;background:var(--paper);border:1px solid var(--rule);padding:22px;display:grid;gap:10px;align-content:start;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.b-doc:hover{border-color:var(--ink);transform:translateY(-2px)}
.doc-pdf{position:relative;width:40px;height:48px;border:2px solid var(--ink);display:grid;place-items:end center;padding-bottom:6px;font:700 12px/1 var(--d);letter-spacing:.06em}
.doc-pdf::after{content:"";position:absolute;top:-2px;right:-2px;width:12px;height:12px;background:var(--concrete);border-left:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.b-doc b{font:700 21px/1.05 var(--d);text-transform:uppercase}
.b-doc>span:not(.doc-pdf):not(.doc-go){color:var(--ink-2);font-size:14.5px}
.doc-go{font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:2px solid var(--ink)}
.checklist li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;padding:20px 0;border-bottom:1px solid var(--rule)}
.tick{width:30px;height:30px;background:var(--ink);display:grid;place-items:center}
.tick svg{width:16px;height:16px}
.checklist b{display:block;font:700 23px/1.05 var(--d);text-transform:uppercase}
.checklist span{color:var(--ink-2)}
.es{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.es-num{margin:0;font:700 clamp(80px,11vw,140px)/.85 var(--d);color:#fff;font-variant-numeric:tabular-nums}
.dark .es-unit{margin:14px 0 0;font:700 13px/1.45 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--foam);max-width:30ch}
.es-list{list-style:none;margin:0;padding:0;border-top:2px solid #fff}
.es-list li{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--dark-rule)}
.es-list b{font:700 24px/1.05 var(--d);text-transform:uppercase;color:#fff}
.es-list span{color:var(--on-dark)}
@media (max-width:980px){.facts,.docs{grid-template-columns:repeat(2,minmax(0,1fr))}.b-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.glance ul{grid-template-columns:repeat(2,minmax(0,1fr))}.glance li,.glance li:first-child{border-left:0;padding-left:0;padding-right:12px;border-top:1px solid rgba(255,255,255,.3)}.glance li:nth-child(-n+2){border-top:0}
  .es,.checklist{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.facts,.docs,.b-steps{grid-template-columns:minmax(0,1fr)}.b-steps li{padding-right:0}}

/* homepage: two doors under the headline, homes and farm & commercial */
.doors-sec{background:var(--concrete);padding-block:clamp(48px,6vw,88px)}
.doors{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px)}
.door{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule)}
.door-img{display:block;overflow:hidden}
.door-img img{display:block;width:100%;aspect-ratio:21/9;height:auto;object-fit:cover;transition:transform .4s}
.door:hover .door-img img{transform:scale(1.03)}
.door-body{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,36px);flex:1}
.door-body .label{color:var(--red)}
.door h3{margin:0;font:700 clamp(28px,3vw,40px)/1.02 var(--d);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.door ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.door ul li{position:relative;padding-left:22px;color:var(--ink-2);font-size:16px;line-height:1.5}
.door ul li:before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--red)}
.door-acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;padding-top:10px}
.door-more{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.door-more:hover{color:var(--red)}
.door-extra{flex-basis:100%;font-weight:500;color:var(--ink-3)}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door-img img{aspect-ratio:16/9}}