/* Self-hosted. soul.md 14: fetched once at build time, wire cut, no runtime request.
   Both families SIL OFL 1.1 — see ../fonts/PROVENANCE.json */
@font-face{font-family:Archivo;src:url(../fonts/Archivo-var.woff2)format("woff2");font-weight:500 800;font-display:swap;font-style:normal}
@font-face{font-family:"Source Sans 3";src:url(../fonts/SourceSans3-var.woff2)format("woff2");font-weight:400 600;font-display:swap;font-style:normal}

:root{
  --ground:#F7F6F3;      /* paper, not white — this is a spec sheet, not an app */
  --panel:#FFFFFF;
  --ink:#141414;
  --ink-2:#3C4147;
  --steel:#6B7379;
  --rule:#D9D6CF;
  --asphalt:#0B0B0C;
  --accent:#8CB600;      /* safety-vest green, not eco-pastel: this is PPE colour */
  --accent-bright:#B8E62C;
  --amber:#D98324;
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:clamp(16px,.55vw + 15px,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.dsp{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.04;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.stack{display:flex;flex-direction:column}
.eyebrow{
  font-family:Archivo,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);
}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ── smooth scrolling for the top-bar shortcuts ──────
   scroll-margin keeps a heading from landing under the sticky bar.
   Guarded: anyone who asks for reduced motion gets an instant jump. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:84px}
.top{position:sticky;top:0;z-index:50}
.top nav a{position:relative;transition:color .18s ease}
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:var(--accent-bright);transition:right .24s ease}
.top nav a:hover::after,.top nav a:focus-visible::after,.top nav a.is-active::after{right:0}
@media (prefers-reduced-motion:reduce){.top nav a::after{transition:none}}

/* ── before / after proof gallery ────────────────────── */
.ba-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:30px}
.ba{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule)}
.ba-fig{position:relative;margin:0;background:var(--asphalt)}
.ba-fig img{display:block;width:100%;height:100%;aspect-ratio:760/448;object-fit:cover}
.ba-tag{position:absolute;left:0;top:0;font-family:Archivo,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:5px 9px;color:#0B0B0C;background:#E8E6E0}
.ba-fig.after .ba-tag{background:var(--accent-bright)}
.ba-body{padding:15px 17px 17px}
.ba-body h3{font-family:Archivo,sans-serif;font-size:1.02rem;margin:0 0 4px;letter-spacing:-.01em}
.ba-body p{margin:0;color:var(--steel);font-size:.88rem;line-height:1.5}
.ba-prod{display:inline-block;margin-top:9px;font-family:Archivo,sans-serif;font-size:.7rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#4E6600;border:1px solid #C3D97A;
  background:#F2F7E2;border-radius:2px;padding:3px 7px}

/* ── header ─────────────────────────────────────────── */
.top{background:var(--asphalt);color:#F2F2EF}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{display:block;height:42px;width:auto;max-width:56vw}
@media(max-width:560px){.logo img{height:34px}}
.top nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.top nav a{color:#B9BDC0;text-decoration:none;font-size:.93rem;font-weight:600}
.top nav a:hover,.top nav a:focus-visible{color:var(--accent-bright)}
.callnum{font-family:Archivo,sans-serif;font-weight:700;color:#fff;text-decoration:none;font-size:1rem;white-space:nowrap}
.callnum:hover{color:var(--accent-bright)}

/* ── hero ───────────────────────────────────────────── */
.hero{background:var(--asphalt);color:#F4F4F1;padding-block:clamp(52px,8vw,104px) clamp(48px,7vw,92px);position:relative;overflow:hidden}
.hero::after{ /* a bitumen sheen, drawn not downloaded */
  content:"";position:absolute;inset:auto -10% -55% 40%;height:70%;
  background:radial-gradient(60% 50% at 50% 50%,rgba(184,230,44,.10),transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.35rem,6.4vw,4.35rem);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent-bright)}
.hero .sub{margin-top:24px;max-width:56ch;font-size:clamp(1.05rem,.5vw + .95rem,1.28rem);color:#C7CBCD}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:2px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.97rem;text-decoration:none;
  border:2px solid transparent;transition:transform .12s ease,background .15s ease,color .15s ease;
}
.btn-primary{background:var(--accent-bright);color:#0B0B0C}
.btn-primary:hover{background:#CBF54A;transform:translateY(-1px)}
.btn-ghost{border-color:#3A3D40;color:#EDEDEA}
.btn-ghost:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.hero-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  margin-top:clamp(40px,6vw,64px);background:#232629;border:1px solid #232629;
}
.hero-facts div{background:var(--asphalt);padding:20px 22px}
.hero-facts b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1.45rem;color:var(--accent-bright);letter-spacing:-.02em}
.hero-facts span{display:block;margin-top:5px;font-size:.87rem;color:#9AA0A4;line-height:1.4}

/* ── sections ───────────────────────────────────────── */
section{padding-block:clamp(56px,8vw,96px)}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(1.85rem,3.4vw,2.7rem);margin-top:14px}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:1.06rem}

/* the problem band */
.problem{background:var(--panel);border-block:1px solid var(--rule)}
.cols{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:44px}
.card{border:1px solid var(--rule);background:var(--ground);padding:26px 24px;border-radius:2px}
.card h3{font-size:1.12rem;margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.97rem}
.card .num{font-family:Archivo,sans-serif;font-weight:800;font-size:.75rem;letter-spacing:.14em;color:var(--amber);display:block;margin-bottom:14px}

/* product table — industrial buyers read spec sheets */
.products{margin-top:44px;border:1px solid var(--rule);background:var(--panel)}
.prod{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) minmax(0,.9fr);gap:0;border-bottom:1px solid var(--rule)}
.prod:last-child{border-bottom:0}
.prod>div{padding:24px clamp(18px,2.2vw,28px)}
.prod .pname{border-right:1px solid var(--rule)}
.prod .pname h3{font-size:1.16rem}
.prod .pname .tag{display:inline-block;margin-top:10px;font-family:Archivo,sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#4E6600;background:#EAF7BF;padding:4px 9px;border-radius:2px}
.prod .pdesc{color:var(--ink-2);font-size:.98rem;border-right:1px solid var(--rule)}
.prod .puse{font-size:.92rem;color:var(--steel)}
.prod .puse b{display:block;font-family:Archivo,sans-serif;color:var(--ink);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
@media (max-width:820px){
  .prod{grid-template-columns:1fr}
  .prod .pname,.prod .pdesc{border-right:0;border-bottom:1px solid var(--rule)}
}

/* proof band */
.proof{background:var(--asphalt);color:#EFEFEC}
.proof .sec-head h2{color:#fff}
.proof .sec-head p{color:#AEB3B6}
.proof .eyebrow{color:var(--accent-bright)}
.checks{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:44px;background:#25282B;border:1px solid #25282B}
.checks div{background:var(--asphalt);padding:26px 24px}
.checks h3{font-size:1.05rem;color:#fff;display:flex;align-items:flex-start;gap:11px}
.checks h3::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:7px;background:var(--accent-bright);transform:rotate(45deg)}
.checks p{margin-top:11px;color:#A3A9AD;font-size:.95rem;padding-left:20px}

/* demo / CTA */
.demo{background:var(--accent-bright);color:#0B0B0C}
.demo .wrap{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.demo h2{font-size:clamp(1.9rem,3.6vw,2.85rem)}
.demo p{margin-top:16px;font-size:1.08rem;max-width:48ch}
.demo .btn-dark{background:var(--asphalt);color:#fff}
.demo .btn-dark:hover{background:#1E2124}
.demo .eyebrow{color:#405200}

/* contact */
.contact{background:var(--panel);border-top:1px solid var(--rule)}
.cgrid{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px}
.cblock b{display:block;font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);margin-bottom:10px}
.cblock a{font-family:Archivo,sans-serif;font-weight:700;font-size:1.32rem;text-decoration:none;letter-spacing:-.02em}
.cblock a:hover{color:#4E6600}
.cblock address{font-style:normal;color:var(--ink-2);line-height:1.65}

form{margin-top:12px;display:grid;gap:14px}
label{font-size:.82rem;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
input,textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:2px;
  font:inherit;font-size:.97rem;background:var(--ground);color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:110px;resize:vertical}
button[type=submit]{
  justify-self:start;background:var(--asphalt);color:#fff;border:0;padding:15px 30px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.97rem;border-radius:2px;cursor:pointer;
}
button[type=submit]:hover{background:#25282B}

footer{background:var(--asphalt);color:#8B9195;padding-block:44px;font-size:.89rem}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{color:#B9BDC0}
.sdsgrid{margin-top:40px;border:1px solid var(--rule);background:var(--panel)}
.sdsrow{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,2.2vw,26px);border-bottom:1px solid var(--rule)}
.sdsrow:last-child{border-bottom:0}
.sdsrow b{font-family:Archivo,sans-serif;font-size:1.02rem}
.sdsrow span{display:flex;gap:18px;flex-wrap:wrap}
.sdsrow a{color:#4E6600;font-weight:600;font-size:.92rem;text-decoration:none;border-bottom:1px solid #C9DE8A;padding-bottom:1px}
.sdsrow a:hover{border-bottom-color:#4E6600}
.creds{margin-top:26px;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.creds div{background:var(--panel);padding:18px clamp(14px,1.8vw,22px)}
.creds b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;color:var(--ink)}
.creds span{display:block;margin-top:5px;color:var(--steel);font-size:.86rem;line-height:1.45}
:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── multi-page shell (2026-09-17: split from the single long page) ── */
.phero{background:var(--asphalt);color:#F2F2EF;padding-block:clamp(44px,6vw,78px)}
.phero .eyebrow{color:var(--accent-bright)}
.phero h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.025em;margin:14px 0 0;text-wrap:balance}
.phero p{margin-top:16px;color:#C7CBCE;font-size:1.06rem;max-width:66ch}
.top nav a.is-active{color:#fff}
.top nav a.is-active::after{right:0}

.tiles{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:44px}
.tile{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);background:var(--panel);overflow:hidden}
.tile img{display:block;width:100%;height:210px;object-fit:cover}
.tile .tbody{padding:22px}
.tile h3{margin:0;font-size:1.14rem}
.tile p{margin:9px 0 0;color:var(--ink-2);font-size:.95rem}
.tile .more{display:inline-block;margin-top:14px;font-family:Archivo,sans-serif;font-weight:700;
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:#4E6600}
.tile:hover{border-color:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.09)}
.tile:hover .more{color:var(--ink)}

/* product pages */
.plead{display:grid;gap:34px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;margin-top:46px}
@media(max-width:820px){.plead{grid-template-columns:1fr}}
.plead .lede{font-size:1.14rem;line-height:1.62;color:var(--ink-2)}
.plead figure{margin:0}
.plead img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.spec{margin-top:42px;border:1px solid var(--rule);background:var(--panel)}
.spec div{display:flex;gap:14px;align-items:flex-start;padding:15px clamp(16px,2vw,24px);border-bottom:1px solid var(--rule);font-size:.97rem}
.spec div:last-child{border-bottom:0}
.spec b{font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);flex:0 0 190px;padding-top:3px}
@media(max-width:620px){.spec div{flex-direction:column;gap:5px}.spec b{flex:none}}
.yes::before{content:"✓";color:#4E6600;font-weight:800;margin-right:9px}

/* big gallery — the photos are the product */
.gal{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));margin-top:46px}
@media(max-width:560px){.gal{grid-template-columns:1fr;gap:22px}}
.gal figure{margin:0;border:1px solid var(--rule);background:var(--panel)}
.gal img{display:block;width:100%;height:auto}
.gal video{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover;background:#000}
.gal figcaption{padding:16px 20px;font-size:.93rem;color:var(--ink-2)}
.gal figcaption b{display:block;font-family:Archivo,sans-serif;color:var(--ink);font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:6px}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ba-pair figure{border:0}
.ba-pair img{height:100%;object-fit:cover}

/* ── interaction polish, 2026-09-17 ───────────────────────────────────
   Josh: "when you scroll over buttons they enlarge or give some sort of
   visual feedback to make the website look extra premium, same thing on
   any photos or widgets." Everything below is transform/opacity only, so
   it composites on the GPU and never reflows the page. All of it is
   switched off under prefers-reduced-motion at the bottom of the file. */
.btn{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,
  background-color .2s ease,color .2s ease,border-color .2s ease;will-change:transform}
.btn:hover{transform:translateY(-2px) scale(1.022)}
.btn:active{transform:translateY(0) scale(.99);transition-duration:.06s}
.btn-primary:hover{box-shadow:0 10px 26px rgba(140,182,0,.38)}
.btn-ghost:hover{box-shadow:0 10px 26px rgba(0,0,0,.20)}
.btn-dark:hover{box-shadow:0 10px 26px rgba(0,0,0,.28)}

/* cards lift, and the photo inside them pushes in slightly */
.tile{transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,border-color .2s ease}
.tile img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover{transform:translateY(-4px)}
.tile:hover img{transform:scale(1.05)}
.tile .tbody{position:relative;z-index:1;background:var(--panel)}
.tile .more{transition:color .2s ease,letter-spacing .2s ease}
.tile:hover .more{letter-spacing:.17em}

/* gallery figures: the photo is the product, so it gets the same treatment */
.gal>figure{overflow:hidden;transition:transform .26s cubic-bezier(.2,.7,.3,1),
  box-shadow .26s ease,border-color .2s ease}
.gal>figure:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 14px 36px rgba(0,0,0,.13)}
.gal>figure img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gal>figure:hover img{transform:scale(1.04)}
.ba-pair{overflow:hidden}

/* product hero image */
.plead figure{overflow:hidden}
.plead img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.plead figure:hover img{transform:scale(1.035)}

/* rows: document downloads, spec tables, credential cells */
.sdsrow{transition:background-color .18s ease}
.sdsrow:hover{background:#FAFCF2}
.sdsrow a{transition:color .18s ease,border-color .18s ease,transform .18s ease;display:inline-block}
.sdsrow a:hover{transform:translateY(-1px)}
.creds div{transition:transform .2s cubic-bezier(.2,.7,.3,1),background-color .2s ease}
.creds div:hover{transform:translateY(-3px);background:#FAFCF2}
.spec div{transition:background-color .18s ease}
.spec div:hover{background:#FAFCF2}
.checks>div{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.checks>div:hover{transform:translateY(-3px)}

/* header */
.callnum{transition:transform .2s ease,color .2s ease;display:inline-block}
.callnum:hover{transform:scale(1.04)}
.logo img{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.logo:hover img{transform:scale(1.035)}

/* nothing above should move for anyone who has asked it not to */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.tile,.tile:hover,.tile img,.tile:hover img,
  .gal>figure,.gal>figure:hover,.gal>figure img,.gal>figure:hover img,
  .plead img,.plead figure:hover img,.creds div,.creds div:hover,
  .checks>div,.checks>div:hover,.sdsrow a,.sdsrow a:hover,
  .callnum,.callnum:hover,.logo img,.logo:hover img{
    transform:none!important;transition:none!important}
}

/* ── breathing room, 2026-09-18 ────────────────────────────────────────
   Josh: "we need to add more space on the website with the images. it feels
   crowded." Overrides the tighter values above rather than editing them in
   place, so the original density is still visible in one diff. Nothing here
   changes a colour, a typeface or a border — only space. */

/* sections: roughly +45% vertical air */
.wrap > .sec-head{margin-bottom:8px}
.phero{padding-block:clamp(56px,7vw,96px)}
.phero p{margin-top:20px;line-height:1.66}
.sec-head p{margin-top:18px;line-height:1.7}

/* galleries: fewer per row, much more gutter, captions given room */
.gal{gap:clamp(36px,4.6vw,68px);grid-template-columns:repeat(auto-fit,minmax(480px,1fr));
  margin-top:clamp(34px,4vw,54px)}
@media(max-width:620px){.gal{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}}
.gal figcaption{padding:22px 26px 26px;line-height:1.6}
.gal figcaption b{margin-bottom:8px}
/* the two halves of a before/after read as two photographs, not one strip */
.ba-pair{gap:2px;background:var(--rule)}

/* results groups: a clear break between one story and the next */
.resgroup{margin-top:clamp(64px,9vw,120px)}
.resgroup:first-child{margin-top:clamp(18px,3vw,36px)}
.resgroup h2{margin-top:12px}
.resgroup > p{margin-top:16px;line-height:1.7}

/* cards */
.tiles{gap:clamp(26px,3.2vw,40px);margin-top:clamp(40px,5vw,58px)}
.tile .tbody{padding:26px 26px 30px}
.tile p{margin-top:11px;line-height:1.65}
.tile img{height:240px}

/* product pages */
.plead{gap:clamp(36px,4.4vw,64px);margin-top:clamp(40px,5vw,58px)}
.plead .lede{line-height:1.72}
.spec{margin-top:clamp(36px,4.4vw,54px)}
.spec div{padding:19px clamp(20px,2.4vw,30px);line-height:1.6}
.spec b{flex:0 0 200px}

/* rows and cells */
.sdsgrid{margin-top:clamp(34px,4vw,50px)}
.sdsrow{padding:22px clamp(20px,2.4vw,30px);gap:14px 24px}
.creds{margin-top:clamp(22px,2.6vw,32px)}
.creds div{padding:24px clamp(18px,2.2vw,26px)}
.creds span{margin-top:7px;line-height:1.55}
.checks{gap:clamp(28px,3.4vw,48px)}
.checks p{line-height:1.7}

/* softer, so the page reads calm rather than boxed-in */
.tile:hover{box-shadow:0 12px 32px rgba(0,0,0,.075)}
.gal>figure:hover{box-shadow:0 14px 38px rgba(0,0,0,.085)}

/* running text never gets wider than it is comfortable to read */
.sec-head p, .phero p, .resgroup > p{max-width:70ch}
/* the tick-list is the densest text on the site — 45 instances of it */
.yes{line-height:1.66}
/* a three-shot sequence reads across in one row, no orphan cell */
.gal-3{display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:repeat(3,1fr);
  margin-top:clamp(34px,4vw,54px)}
@media(max-width:900px){.gal-3{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}}
.gal-3 figcaption{padding:20px 22px 24px;line-height:1.6}
.gal-3 figcaption b{margin-bottom:8px}
/* a lone photo takes the column it deserves instead of half a row */
.gal-1{display:block;margin-top:clamp(34px,4vw,54px)}
.gal-1>figure{max-width:760px}
/* Outlined button for the bright-green demo band. Hover FILLS instead of
   recolouring the text — the old .btn-ghost hover set the text to the
   section's own background and the label disappeared. */
.demo .btn-line{background:transparent;border-color:#0B0B0C;color:#0B0B0C}
.demo .btn-line:hover{background:#0B0B0C;color:#FFFFFF;border-color:#0B0B0C;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
.demo .btn-dark:hover{background:#1E2124;color:#FFFFFF}
/* lede with no hero figure beside it: one column, comfortable measure */
.plead-solo{display:block}
.plead-solo .lede{max-width:74ch}
/* two deliberate halves, not four children in an auto-fit grid */
.demo .wrap{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-items:center}
.demo .cta-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px}
.demo p{margin-top:0}

/* ── Job questionnaires (2026-09-22) ────────────────────────────────────────
   Mimi's two intake sheets. Long forms on a phone in a yard, so: one column
   under 720px, no multi-step wizard (a back button must never eat answers),
   and every hint sits under its field rather than in a tooltip nobody taps. */
.qwrap{padding-block:clamp(52px,6vw,84px)}
.qlede{max-width:72ch;margin-bottom:38px}
.qlede p{color:var(--ink-2);font-size:1.04rem}
.qlede p+p{margin-top:14px}
.qlede a{font-weight:600;color:#4E6600}

.qform{max-width:880px;display:block;margin-top:0}
.qform fieldset{
  border:1px solid var(--rule);border-radius:2px;background:var(--panel);
  padding:clamp(20px,3vw,32px);margin:0 0 22px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;
}
.qform legend{
  font-family:Archivo,sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.15em;
  text-transform:uppercase;color:#4E6600;background:#EAF7BF;
  padding:6px 12px;border-radius:2px;
}
.qblurb{grid-column:1/-1;margin:0;color:var(--steel);font-size:.93rem}
.q{grid-column:1/-1;min-width:0}
.q-half{grid-column:span 1}
.q label em{color:var(--amber);font-style:normal}
.qhint{margin:7px 0 0;font-size:.85rem;color:var(--steel);line-height:1.5}

.qradio{display:flex;flex-wrap:wrap;gap:8px}
.qradio label{
  display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  border:1px solid var(--rule);border-radius:2px;padding:11px 15px;
  background:var(--ground);font-weight:500;color:var(--ink);
}
.qradio input{width:auto;padding:0;margin:0;accent-color:var(--accent)}
.qradio label:has(input:checked){border-color:var(--accent);background:#F4FBE0;font-weight:600}
.qradio label:focus-within{outline:2px solid var(--accent);outline-offset:1px}

.qnote{max-width:72ch;margin:4px 0 26px;color:var(--ink-2);font-size:.95rem}
.qform button[type=submit]{justify-self:start}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:720px){
  .qform fieldset{grid-template-columns:minmax(0,1fr)}
  .q-half{grid-column:1/-1}
}
.qwarn{max-width:72ch;margin:0 0 30px;padding:15px 18px;border-radius:3px;
  background:#FDF0D5;border:1px solid #E3C88A;color:#6B4A0B;line-height:1.6}
.qwarn a{color:#6B4A0B;font-weight:700}

/* ── Overnight review, 2026-09-23 ─────────────────────────────────────────
   Appended rather than edited in place, same as the 09-18 block, so every
   change is one readable diff and the earlier values are still visible. */

/* Mobile spec tables. The 09-18 block set `.spec b{flex:0 0 200px}` AFTER the
   <=620px rule that stacks label over value, so on a phone the 200px basis
   applied VERTICALLY: every label sat on 200px of empty white. Every product
   page and the contact page. Re-assert the stacked layout last. */
@media(max-width:620px){
  .spec div{flex-direction:column;gap:6px}
  .spec b{flex:none;padding-top:0}
}

/* Mobile header. It wrapped to three rows (logo, nav x2, phone) and was
   sticky: ~190px pinned over an 844px screen. Now: logo and a call button on
   one row, the nav as a single swipeable row under it, and not sticky. */
@media(max-width:820px){
  .top{position:relative}
  .top .wrap{display:grid;grid-template-columns:1fr auto;gap:6px 16px;min-height:0;
    padding-block:12px 0}
  .top nav{grid-column:1/-1;grid-row:2;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);
    flex-wrap:nowrap;gap:22px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
            mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{flex:0 0 auto;padding:12px 0 14px;white-space:nowrap}
  .top nav a::after{bottom:6px}
  .callnum{border:1px solid #3A3D40;border-radius:2px;padding:10px 14px;font-size:.95rem;
    min-height:44px;display:inline-flex;align-items:center}
}

/* Space between the dark page header and the first block. Section padding
   and the first child's own margin-top were stacking to 150-180px of empty
   paper on every inner page. */
.phero + section{padding-top:clamp(48px,6vw,80px)!important} /* beats the inline padding-block build.py writes */
.phero + section > :first-child,
.phero + section > .wrap > :first-child{margin-top:0}

/* Cards: one height per row, the "more" line pinned to the bottom, so a
   two-line tag no longer knocks its row out of alignment. */
.tile{display:flex;flex-direction:column}
.tile .tbody{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.tile .more{margin-top:auto;padding-top:16px}
/* Four products in a 3-across grid left B-SOLVED alone on a second row. */
.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles-2 .tile img{height:clamp(220px,24vw,320px)}
@media(max-width:700px){.tiles-2{grid-template-columns:1fr}}

/* Why plant-based. .checks was drawn for a dark band with 1px gaps as rules;
   on the paper page, with the 09-18 gap widened to 48px, the "rules" became
   slabs of charcoal between black boxes. Light cards, real gutters. */
.checks{background:transparent;border:0}
.checks div{background:var(--panel);border:1px solid var(--rule);padding:30px 28px 32px}
.checks h3{color:var(--ink);line-height:1.2}
.checks h3::before{background:var(--accent)}
.checks p{color:var(--ink-2)}

/* Contact: the details table no longer stretches to the form's height, and
   its label column fits the half-width it lives in. */
.cgrid{align-items:start}
.contact .spec b{flex-basis:118px}
.cgrid form{margin-top:0}

/* Product properties: a two-column checklist instead of eleven full-width
   table rows with an empty label cell each. */
.props{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);
  background:var(--rule);gap:1px}
.props li{background:var(--panel);padding:16px clamp(18px,2.2vw,26px);font-size:.97rem;
  display:flex;align-items:baseline}
.props li:nth-last-child(1):nth-child(odd){grid-column:1/-1}
@media(max-width:620px){.props{grid-template-columns:1fr}}

/* Product-page close: the quote/demo line was grey small print at the very
   bottom. Same green band as the home page's demo block, so the next step
   reads as a step. */
.pcta{margin-top:clamp(48px,6vw,72px);padding:clamp(28px,4vw,44px);display:grid;
  gap:22px 48px;grid-template-columns:minmax(0,1.2fr) auto;align-items:center}
.pcta p{font-size:1.08rem;max-width:52ch}
.pcta .cta-row{margin-top:0}
@media(max-width:860px){.pcta{grid-template-columns:1fr}}

/* Results, "Four more jobs". Each pair was two ~245px strips with nothing
   saying which half was which. One pair per row now, so each half shows at
   close to the photo's own 760px, and each half is labelled. */
.gal-ba{grid-template-columns:minmax(0,1fr)}
.ba-pair figure{position:relative;margin:0}
.ba-pair .ba-tag{z-index:1}
.ba-pair figure + figure .ba-tag{background:var(--accent-bright)}

/* Home hero: copy left, her before/after right. Stacked on desktop so it
   reads top-to-bottom like the headline; side by side on phones so it costs
   one short row instead of a screen. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(40px,5vw,72px);align-items:center}
.hero-grid .hero-facts{grid-column:1/-1;margin-top:clamp(8px,2vw,24px)}
.hero-ba{margin:0}
.hero-ba-pair{display:grid;grid-template-rows:1fr 1fr;gap:3px;background:#232629;
  border:1px solid #232629}
.hero-ba-pair>div{position:relative;overflow:hidden}
.hero-ba-pair img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.hero-ba-pair>div + div .ba-tag{background:var(--accent-bright)}
.hero-ba figcaption{margin-top:12px;font-size:.84rem;color:#8A9196;letter-spacing:.01em}
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-ba-pair{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .hero-ba-pair img{aspect-ratio:4/3}
}
@media(max-width:560px){.hero-ba-pair img{aspect-ratio:1/1}}
@media(max-width:560px){
  .hero .cta-row .btn{flex:1 1 100%;justify-content:center}
}

/* Heading levels corrected in build.py (card titles h3 -> h2 where they sat
   straight under the h1). Same look as before. */
.tile h2{margin:0;font-size:1.14rem;line-height:1.2}
.checks h2{font-size:1.05rem;color:var(--ink);display:flex;align-items:flex-start;gap:11px;line-height:1.2}
.checks h2::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:7px;background:var(--accent);transform:rotate(45deg)}

/* Header logo: a pre-scaled 3x file instead of the 1240px original shrunk
   ~11x by the browser, which is what made the wordmark look muddy. A little
   larger too — it was 42px tall, the letters about 13px. */
.logo img{height:50px}
@media(max-width:560px){.logo img{height:40px}}

/* Skip link: invisible until focused by keyboard. */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent-bright);color:#0B0B0C;
  padding:10px 16px;font-family:Archivo,sans-serif;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Footer links */
.fnav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:20px;margin-top:6px;
  border-top:1px solid #232629}
.fnav a{color:#9AA0A4;text-decoration:none;padding-block:6px}
.fnav a:hover,.fnav a:focus-visible{color:var(--accent-bright)}
img{height:auto}

/* Forms. iOS Safari zooms the page into any field under 16px on focus; the
   inputs were .97rem (15.5px). Labels were 13px grey on a form meant to be
   filled in on a phone in a yard: larger and full ink now. */
input,textarea,select{font-size:max(16px,.97rem)}
label,.qlabel{font-size:.9rem;font-weight:600;color:var(--ink);display:block;margin:0 0 7px}
.qradio label{font-size:.95rem}
.q label em,.qlabel em,label .req{color:var(--amber);font-style:normal}
.contact .qwarn{margin-bottom:22px}

/* Accessibility. The focus ring was safety green everywhere: 13:1 on the dark
   bands, 1.35:1 on the paper pages, i.e. invisible to a keyboard user on most
   of the site. Ink ring on light surfaces, green kept on the dark ones. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.top :focus-visible,.hero :focus-visible,.phero :focus-visible,footer :focus-visible,
.skip:focus-visible{outline-color:var(--accent-bright)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.qradio label:focus-within{outline-color:var(--ink)}
/* The UI grey measured 4.46:1 on the paper background, just under AA for the
   small text it is used on (eyebrows, hints, credential notes). One step darker. */
:root{--steel:#646C72}
/* Download links were ~24px tall; give them a finger-sized hit area. */
.sdsrow a{padding-block:8px;border-bottom:0;text-decoration:underline;text-decoration-color:#C9DE8A;
  text-underline-offset:4px;text-decoration-thickness:1px}
.sdsrow a:hover{text-decoration-color:#4E6600}

/* Product "on the job" galleries mix portrait and landscape photos (B-SOLVED:
   two of each). In a 2-across grid every landscape card stretched to its
   portrait neighbour's height and sat on ~300px of empty white. One frame
   for the two-across grid; the photo is cropped to it, centred. */
.gal:not(.gal-1):not(.gal-3):not(.gal-ba)>figure>img{aspect-ratio:4/3;object-fit:cover}
/* B-SLICK's only photo is 640px wide; the 760px frame was upscaling it. */
.gal-1>figure{max-width:640px}
/* Same for three-across rows (BFF mixes 4:3 and 16:9). 3:2 crops least from
   either shape. */
.gal-3>figure>img{aspect-ratio:3/2;object-fit:cover}

/* ── contact: pick your job (2026-09-23) ───────────────────────────────
   The generic enquiry form is gone — it asked for the same details the
   questionnaires ask, so a customer typed them twice. Two jobs, two cards,
   and a phone number for everything else. */
.jobs{background:var(--ground);padding-block:clamp(56px,7vw,96px)}
.jobgrid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.job{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--rule);overflow:hidden;transition:border-color .18s ease,box-shadow .25s ease,transform .25s ease}
.job-img{aspect-ratio:16/9;overflow:hidden;background:var(--asphalt)}
.job-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.job-body{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;flex:1}
.job h2{font-size:clamp(1.45rem,2.3vw,1.9rem);margin-top:10px}
.job-body > p:not(.eyebrow){margin-top:12px;color:var(--ink-2);max-width:48ch}
.job-go{margin-top:auto;padding-top:24px;font-family:Archivo,sans-serif;font-weight:700;font-size:.98rem;
  display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.job-go i{font-style:normal;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent-bright);color:#0B0B0C;transition:transform .2s ease}
.job:hover{border-color:var(--accent);box-shadow:0 18px 40px -18px rgba(0,0,0,.28);transform:translateY(-2px)}
.job:hover .job-img img{transform:scale(1.035)}
.job:hover .job-go i{transform:translateX(4px)}
.job:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.else{margin-top:clamp(18px,2.4vw,28px);background:var(--asphalt);color:#EDEDEA;
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);display:flex;gap:24px 40px;flex-wrap:wrap;
  align-items:center;justify-content:space-between}
.else h3{font-size:clamp(1.25rem,1.8vw,1.5rem);color:#fff}
.else p{margin-top:8px;color:#AEB3B6;max-width:56ch}
.else-cta{display:flex;gap:12px;flex-wrap:wrap}
.else .btn-line{border-color:#4A4E52;color:#EDEDEA}
.else .btn-line:hover{border-color:var(--accent-bright);color:var(--accent-bright)}

.cdetails{margin-top:clamp(40px,5vw,64px);display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cdetails{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cdetails{grid-template-columns:1fr}}
.cdetails div{background:var(--panel);padding:20px 22px}
.cdetails b{display:block;font-family:Archivo,sans-serif;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel);margin-bottom:8px}
.cdetails a{color:#4E6600;font-weight:600;text-decoration:none;word-break:break-word}
.cdetails a:hover{text-decoration:underline}
.cdetails span{color:var(--ink-2);line-height:1.55;font-size:.97rem}

@media (prefers-reduced-motion:reduce){.job,.job-img img,.job-go i{transition:none}.job:hover{transform:none}.job:hover .job-img img{transform:none}}

/* ── home: the four products (2026-09-23) ── */
.lineup{background:var(--panel);border-top:1px solid var(--rule)}
.lgrid{margin-top:44px;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.lgrid{grid-template-columns:1fr}}
.lcard{position:relative;display:flex;flex-direction:column;background:var(--panel);padding:28px 24px 26px;
  text-decoration:none;color:inherit;transition:background .2s ease}
.lcard::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent-bright);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.lnum{font-family:Archivo,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.08em;color:var(--steel)}
.ltag{margin-top:26px;font-family:Archivo,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4E6600}
.lcard h3{margin-top:8px;font-size:1.28rem;line-height:1.12}
.lone{margin-top:12px;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.lmore{margin-top:auto;padding-top:22px;font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem;display:inline-flex;gap:8px;align-items:center}
.lmore i{font-style:normal;transition:transform .2s ease}
.lcard:hover{background:var(--ground)}
.lcard:hover::before{width:100%}
.lcard:hover .lmore i{transform:translateX(4px)}
.lcard:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.lcard::before,.lmore i{transition:none}}

/* ── Field footage, 2026-10-05 ────────────────────────────────────────────
   Dad's RED footage, placed by build.py from src/media.json. Appended, same
   as the earlier blocks. Namespace: .hero-film, .fieldband, .fm-*            */

/* Home hero as film. The copy and facts are unchanged; the right-hand
   before/after moved to the build-up band below. */
.hero-film{display:flex;align-items:flex-end;min-height:clamp(600px,88svh,880px);
  padding-block:clamp(120px,16vw,200px) clamp(40px,5vw,64px)}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--asphalt)}
.hero-video{display:block;width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.66) 42%,rgba(11,11,12,.12) 78%),
    linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,0) 30%,rgba(11,11,12,.55) 66%,rgba(11,11,12,.96) 100%)}
.hero-film::after{z-index:0}
.hero-film .wrap{width:100%}
.hero-film .hero-copy{max-width:640px}
.hero-film .sub{color:#D4D7D9}
.hero-film .hero-facts{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08);
  margin-top:clamp(44px,6vw,72px)}
.hero-film .hero-facts div{background:rgba(11,11,12,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:760px){
  .hero-film{min-height:0;padding-top:clamp(200px,58vw,320px)}
  .hero-media{bottom:auto;height:clamp(300px,82vw,460px)}
  .hero-media::after{background:linear-gradient(180deg,rgba(11,11,12,.15) 0%,rgba(11,11,12,.25) 50%,rgba(11,11,12,1) 100%)}
}

/* Bands that carry field footage */
.fieldband .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.fieldband-dark{background:var(--asphalt);color:#F2F2EF}
.fieldband-dark .eyebrow{color:var(--accent-bright)}
.fieldband-dark .sec-head p{color:#C7CBCE}
.fm-more{margin-top:clamp(22px,3vw,32px)}
.fm-more a{font-family:Archivo,sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--accent-bright)}
.fm-more a:hover{color:#fff}
.fm-more i{font-style:normal}
.fm-ba{margin-top:clamp(36px,5vw,64px)}

/* A lead shot at 2:1 with two stacked beside it. Media fill their cells
   absolutely, so the lead alone sets the height and nothing shifts on load. */
.fm-feature{display:grid;gap:clamp(8px,1vw,14px);
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
.fm-feature.fm-solo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
.fm-item{position:relative;margin:0;overflow:hidden;background:#1A1C1E;min-height:0}
.fm-feature .fm-item .fm-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fm-feature .fm-lead{grid-row:1 / span 2;aspect-ratio:2/1}
.fm-feature.fm-solo .fm-lead{grid-row:auto}
.fm-feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;
  font-size:.86rem;line-height:1.35;color:#F2F2EF;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.78))}
@media(max-width:760px){
  .fm-feature{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .fm-feature .fm-lead{grid-row:auto}
  .fm-feature .fm-item{aspect-ratio:2/1}
}
.fm-row,.fm-grid{display:grid;gap:clamp(14px,2vw,26px);margin-top:clamp(14px,2vw,26px)}
.fm-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fm-grid{margin-top:26px}
.fm-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(30px,4vw,48px)}
@media(max-width:900px){.fm-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fm-grid-2,.fm-grid-3{grid-template-columns:minmax(0,1fr)}}
.fm-row .fm-item,.fm-grid .fm-item{background:var(--panel);border:1px solid var(--rule)}
.fm-row .fm-media,.fm-grid .fm-media{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:#1A1C1E}
.fm-grid-3 .fm-media{aspect-ratio:3/2}
.fm-row figcaption,.fm-grid figcaption{padding:12px 16px 14px;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.fm-link{display:block;overflow:hidden}
.fm-link img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.fm-link:hover img{transform:scale(1.03)}
.fm-link:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fieldband-dark .fm-row .fm-item{background:#141517;border-color:#26292C}
.fieldband-dark .fm-row figcaption{color:#C7CBCE}
@media (prefers-reduced-motion:reduce){.fm-link img{transition:none}.fm-link:hover img{transform:none}}

/* ── Round 2, 2026-10-05 ──────────────────────────────────────────────────
   Home simplified (hero, build-up before/after, line-up, CTA). About Us page.
   More air around the field media. */

/* Hero without the facts strip (moved to About Us): the copy sits lower and
   the film gets the room. */
.hero-film{min-height:clamp(560px,82svh,820px)}
.hero-film .hero-copy{padding-bottom:clamp(8px,2vw,24px)}

/* Build-up: one big before/after, nothing else competing with it. */
.buildup{padding-block:clamp(84px,11vw,150px)}
.buildup .sec-head{margin-bottom:clamp(36px,5vw,64px)}
.ba-big{margin:0}
.ba-big-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.ba-big-pair figure{position:relative;margin:0;overflow:hidden;background:#1A1C1E}
.ba-big-pair img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.ba-big-pair .ba-tag{z-index:1;font-size:.78rem;padding:9px 14px}
.ba-big-pair figure + figure .ba-tag{background:var(--accent-bright)}
.ba-big figcaption{margin-top:clamp(18px,2.4vw,26px);font-size:1rem;color:var(--ink-2);line-height:1.6}
.ba-big figcaption b{display:block;font-family:Archivo,sans-serif;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px}
@media(max-width:700px){.ba-big-pair{grid-template-columns:1fr;gap:12px}}
.fm-more-light a{color:#4E6600}
.fm-more-light a:hover{color:var(--ink)}

/* About Us: the credentials strip keeps its dark styling in its own band. */
.about-facts{background:var(--asphalt);color:#F2F2EF;padding-block:clamp(56px,7vw,92px)}
.about-facts .hero-facts{margin-top:0}

/* Field media: more gap everywhere it sits (Josh: "cramped"). */
.fm-feature{gap:clamp(12px,1.6vw,22px)}
.fm-grid,.fm-row{gap:clamp(22px,2.6vw,36px)}
.fm-grid-3{row-gap:clamp(28px,3.4vw,44px)}
@media(max-width:760px){.fm-feature{gap:16px}}
/* Clip facades (poster image until media.js mounts the one playing video). */
.fm-vlink{display:block;color:inherit}
.fm-vlink:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .fm-vlink::after{content:"\25B6";position:absolute;left:14px;top:14px;z-index:2;width:44px;height:44px;
    display:grid;place-items:center;border-radius:50%;background:rgba(11,11,12,.72);color:#fff;font-size:.95rem}
}

/* ── Round 3, 2026-10-05 ──────────────────────────────────────────────────
   One compact product moment on home; results gallery at true aspect ratios. */
.homeshot{background:var(--asphalt);color:#F2F2EF;padding-block:clamp(56px,7vw,96px)}
.homeshot-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.homeshot-media{margin:0}
.homeshot-media .fm-media{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:#1A1C1E}
.homeshot .eyebrow{color:var(--accent-bright)}
.homeshot h2{margin-top:12px;color:#fff}
.homeshot-copy>p:not(.eyebrow):not(.fm-more){margin-top:14px;color:#C7CBCE;font-size:1.06rem;max-width:44ch}
@media(max-width:760px){.homeshot-grid{grid-template-columns:minmax(0,1fr)}}

/* Justified gallery: rows of two packed in build.py; each figure flexes by its
   own ratio (--r) from a zero basis, so a row shares one height and no photo
   is cropped or stretched. Phones: one per row at full width, true ratio. */
.fm-just{--jg:clamp(14px,2vw,26px);display:grid;gap:var(--jg);margin-top:clamp(30px,4vw,48px)}
.fm-jrow{display:flex;gap:var(--jg);align-items:flex-start}
.fm-jrow>.fm-item{flex:var(--r) 1 0;min-width:0;margin:0;background:var(--panel);border:1px solid var(--rule)}
.fm-just .fm-media{display:block;width:100%;height:auto}
.fm-just figcaption{padding:12px 16px 14px;font-size:.9rem;color:var(--ink-2);line-height:1.45}
@media(max-width:620px){.fm-jrow{flex-direction:column}.fm-jrow>.fm-item{flex:none;width:100%}}

/* Questionnaire rows — 2026-10-06, Mimi: questions that go together sit on one
   line, follow-ups beside the question they depend on, no numbering. */
.qform fieldset{grid-template-columns:minmax(0,1fr);gap:0}
.qrow{display:grid;gap:14px 22px;align-items:start;padding:18px 0;border-top:1px solid var(--rule)}
.qform legend+.qrow,.qform .qblurb+.qrow{border-top:0;padding-top:6px}
.qlead{grid-column:1/-1;margin:0 0 -4px;font-family:Archivo,sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.qrow .q{grid-column:auto}
.q-date input{max-width:220px}
@media(max-width:720px){.qrow{grid-template-columns:minmax(0,1fr)!important}}

/* 2026-10-10, Mimi: "hard to tell where to click". Every clickable box gets a visible
   arrow cue, a hover lift/tint and a press response for phones (no hover there). */
.dlink{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--rule);padding:18px 14px 16px;margin:0 -14px;border-radius:4px;position:relative;transition:background .2s ease,transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease}
.dlink h3{margin:0;font-size:1.2rem}
.dlink p{margin-top:9px}
.dlink .more{display:inline-block;margin-top:12px;font-size:.78rem;text-transform:uppercase;font-weight:700;color:#4E6600}
.dlink::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--accent-bright);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.dlink:hover{background:var(--ground);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.07)}
.dlink:hover::before{width:100%}
.dlink:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.more i,.lmore i,.dlink .more i{display:inline-block;font-style:normal;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.tile:hover .more i,.dlink:hover .more i,.lcard:hover .lmore i{transform:translateX(6px)}
.tile .more,.dlink .more{color:#4E6600}
.tile:active,.dlink:active,.lcard:active{transform:scale(.985);transition-duration:.08s}
@media (hover:none){
  .more i,.lmore i{animation:nudge 1.8s ease-in-out infinite}
}
@keyframes nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
  .dlink,.dlink::before,.more i,.lmore i{transition:none;animation:none}
  .dlink:hover,.tile:active,.dlink:active,.lcard:active{transform:none}
}

.tile .dlink,.tile .dlink *{text-decoration:none}
div.tile:hover{transform:none;box-shadow:none;border-color:var(--rule)}
div.tile:hover img{transform:none}
div.tile:active{transform:none}
/* 2026-10-10, Mimi: lighter hover on the degreaser links (the tint+shadow hid the text),
   and the same green top bar on the product tiles below them. */
.dlink:hover{background:transparent;box-shadow:0 6px 18px rgba(0,0,0,.035)}
a.tile{position:relative}
a.tile::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent-bright);z-index:2;transition:width .3s cubic-bezier(.2,.7,.2,1)}
a.tile:hover::before{width:100%}
@media (prefers-reduced-motion:reduce){a.tile::before{transition:none}}
/* 2026-10-10, Mimi: degreasers page, shorter black header and tighter page */
.phero.phero-sm{padding-block:clamp(26px,3.4vw,42px)}
.phero.phero-sm h1{margin-top:8px}
.phero-sm + section{padding-top:clamp(32px,4vw,52px)!important}

/* Mimi 2026-10-14 r9 — Information: aligned, equal boxes (fixed columns, equal row heights; was auto-fit, which left a ragged last row) */
.creds-3{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.creds-5{grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr}
@media (max-width:820px){.creds-3{grid-template-columns:repeat(2,1fr)}.creds-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.creds-3{grid-template-columns:1fr;grid-auto-rows:auto}.creds-5{grid-template-columns:repeat(2,1fr)}}

/* Mimi 2026-10-14 r9 — Degreasers: NO-B and BFF read as two separate products */
.prodjump{display:flex;gap:10px;margin-bottom:clamp(28px,4vw,44px)}
.prodjump a{font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;padding:9px 22px;transition:background-color .2s ease,color .2s ease}
.prodjump a:hover,.prodjump a:focus-visible{background:var(--ink);color:#fff}
.prodblock{border:1px solid var(--rule);border-top:8px solid var(--accent);background:var(--panel);padding:clamp(24px,4vw,52px);border-radius:6px}
.prodblock-alt{border-top-color:var(--asphalt);background:#EDECE6}
.prodblock+.prodblock{margin-top:clamp(48px,6vw,80px)}

/* 2026-10-14: products page degreasers box: big section title, product names as mini titles */
.tile h2.deg-title{font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:-.02em;line-height:1.05;margin:0}
.dlink h3.deg-mini{font-size:1.15rem;color:var(--ink)}