/* D.P. Jetwash & Garden Services - design system
   Scales 320px through to ultrawide. Container max and type both step up so
   large monitors get a bigger page, not a small page in a big empty frame. */

:root{
  /* sampled from the client's own logo and favicon:
     green #007F43, blue #027BBB, dark teal #053844 */
  --grn:#007F43; --grn-d:#065C33; --grn-dk:#053844; --grn-l:#E3F1E9; --grn-xl:#F0F8F3;
  --brand-blue:#027BBB;
  --mint:#7FE3A6;
  --ground:#F4F7F4; --white:#fff; --ink:#0D1712; --ink-2:#48594F; --ink-3:#76867B;
  --line:#DDE6DF; --line-2:#C7D4CB;
  --r:16px; --r-s:11px; --r-x:999px;

  --max:1180px;
  --pad:clamp(1.15rem, 4vw, 2.5rem);

  --step-h1:clamp(2.1rem, 5.2vw, 3.9rem);
  --step-h2:clamp(1.75rem, 3.6vw, 2.9rem);
  --step-h3:clamp(1.12rem, 1.5vw, 1.32rem);
  --step-body:clamp(1rem, 1.05vw, 1.09rem);
  --step-lead:clamp(1.02rem, 1.4vw, 1.2rem);

  --sec:clamp(3.6rem, 6.5vw, 6.5rem);
}
@media (min-width:1600px){ :root{ --max:1340px; } }
@media (min-width:2100px){ :root{ --max:1560px;
  --step-h1:clamp(3.9rem,3.4vw,4.6rem); --step-h2:clamp(2.9rem,2.4vw,3.3rem);
  --step-body:1.14rem; --step-lead:1.26rem; } }
@media (min-width:2600px){ :root{ --max:1780px; } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-body); line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-weight:800; letter-spacing:-.04em; line-height:1.08; margin:0 }
h1{ font-size:var(--step-h1) } h2{ font-size:var(--step-h2) } h3{ font-size:var(--step-h3) }
p{ margin:0 } a{ color:inherit }
img{ max-width:100%; display:block; height:auto }
:focus-visible{ outline:3px solid var(--grn); outline-offset:2px; border-radius:4px }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--white); padding:.8rem 1.2rem; border-radius:var(--r-s); box-shadow:0 8px 30px rgba(0,0,0,.2) }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.sec{ padding-block:var(--sec) }
.sec-h{ max-width:34ch; margin-bottom:clamp(2rem,3.5vw,3.2rem) }
.sec-h.wide{ max-width:52ch }
.sec-h p{ color:var(--ink-2); font-size:var(--step-lead); margin-top:.85rem; max-width:56ch }
.center{ margin-inline:auto; text-align:center }
.center p{ margin-inline:auto }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  text-decoration:none; font-weight:700; font-size:.97rem; padding:.95rem 1.7rem;
  border-radius:var(--r-s); border:1px solid transparent; cursor:pointer;
  font-family:inherit; line-height:1.2;
  transition:background .18s, transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, color .18s;
}
.btn:active{ transform:scale(.98) }
.btn-p{ background:var(--grn); color:#fff }
.btn-p:hover{ background:var(--grn-d); transform:translateY(-2px) }
.btn-s{ background:transparent; border-color:var(--line-2); color:var(--ink) }
.btn-s:hover{ border-color:var(--ink); transform:translateY(-2px) }
.btn-ghost{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34); color:#fff; backdrop-filter:blur(6px) }
.btn-ghost:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px) }
.btn-full{ width:100% }

/* -------------------------------------------------------------------- nav */
.nav{ position:sticky; top:0; z-index:60; background:var(--grn-dk); border-bottom:1px solid rgba(255,255,255,.10) }
.nav.over{ position:fixed; inset-inline:0; background:transparent; border-bottom-color:transparent;
  transition:background .3s, border-color .3s }
.nav.over.stuck{ background:rgba(5,56,68,.95); backdrop-filter:blur(12px); border-bottom-color:rgba(255,255,255,.12) }
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; height:72px }
@media (min-width:2100px){ .nav-in{ height:84px } }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex-shrink:0; color:#fff }
.brand-mark{ width:auto; height:clamp(36px,3.4vw,46px); display:block; flex-shrink:0 }
@media (min-width:2100px){ .brand-mark{ height:54px } }
.brand-name{ display:flex; flex-direction:column; line-height:1.06 }
.brand-name b{ font-size:clamp(1rem,1.25vw,1.22rem); font-weight:800; letter-spacing:-.03em; white-space:nowrap }
.brand-name i{ font-style:normal; font-weight:500; font-size:clamp(.6rem,.72vw,.72rem);
  letter-spacing:.09em; text-transform:uppercase; color:var(--mint); white-space:nowrap }
.site-foot .brand-name i{ color:#8FB3A0 }
@media (max-width:420px){ .brand-name i{ display:none } }
.nav-links{ display:none; gap:clamp(1.1rem,2vw,1.9rem); font-size:.9rem; font-weight:600; list-style:none; margin:0; padding:0 }
.nav-links a{ text-decoration:none; color:rgba(255,255,255,.86); transition:color .18s }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--mint) }
.nav-tel{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:700;
  font-size:.92rem; background:var(--grn); color:#fff; padding:.7rem 1.15rem; border-radius:var(--r-x); white-space:nowrap;
  transition:background .18s, transform .18s cubic-bezier(.16,1,.3,1) }
.nav-tel:hover{ background:var(--grn-d); transform:translateY(-1px) }
.nav-tel .lbl{ display:none }
@media (min-width:1000px){ .nav-links{ display:flex } .nav-tel .lbl{ display:inline } }
@media (max-width:999px){ .nav-tel{ padding:.7rem .95rem } }

/* --------------------------------------------------------------- hero */
.hero{ position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:min(94dvh, 880px); padding-block:clamp(6.5rem,11vh,8rem) clamp(2.5rem,6vh,4rem) }
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%;
  filter:saturate(1.15) contrast(1.06) brightness(1.10) }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,22,13,.93) 0%, rgba(6,22,13,.80) 22%, rgba(6,22,13,.46) 44%, rgba(6,22,13,.10) 66%, rgba(6,22,13,.26) 100%),
    linear-gradient(180deg, rgba(6,22,13,.50) 0%, rgba(6,22,13,0) 20%, rgba(6,22,13,0) 64%, rgba(6,22,13,.74) 100%);
}
.hero-in{ position:relative; z-index:2; width:100%; display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr; align-items:center }
.hero-in>*{ min-width:0 }
@media (min-width:960px){ .hero-in{ grid-template-columns:1.05fr .95fr } }
@media (min-width:2100px){ .hero-in{ grid-template-columns:1.15fr .85fr } }
.hero h1{ color:#fff; max-width:15ch; text-wrap:balance }
.hero h1 em{ font-style:normal; color:var(--mint) }
.hero-sub{ color:#D3E4D9; font-size:var(--step-lead); max-width:46ch; margin-top:1.1rem }
.hero-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; list-style:none; padding:0 }
.hero-chips li{ display:inline-flex; align-items:center; gap:.45rem; font-size:.84rem; font-weight:600;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);
  padding:.5rem .85rem; border-radius:var(--r-x); color:#EAF3ED }
.hero-chips svg{ color:var(--mint); flex-shrink:0 }
@media (max-width:959px){
  .hero{ min-height:0 }
  .hero-bg::after{ background:linear-gradient(180deg, rgba(6,22,13,.84) 0%, rgba(6,22,13,.58) 30%, rgba(6,22,13,.70) 62%, rgba(6,22,13,.90) 100%) }
}

/* inner page hero */
.phero{ background:var(--grn-dk); color:#fff; padding-block:clamp(3.2rem,7vw,5.2rem) }
.phero h1{ color:#fff; max-width:20ch; text-wrap:balance }
.phero p{ color:#BFD5C7; font-size:var(--step-lead); max-width:56ch; margin-top:1rem }
.crumbs{ font-size:.83rem; color:#8FAE9B; margin-bottom:1rem }
.crumbs a{ text-decoration:none } .crumbs a:hover{ color:#fff; text-decoration:underline }
.crumbs span{ opacity:.55; padding-inline:.4rem }

/* ------------------------------------------------------------------ card */
.qcard{ background:var(--white); border-radius:var(--r); padding:clamp(1.4rem,2.2vw,1.9rem);
  box-shadow:0 34px 80px -30px rgba(6,32,18,.62); min-width:0 }
.qcard h2{ font-size:1.3rem } .qcard>p{ font-size:.88rem; color:var(--ink-2); margin-top:.25rem; margin-bottom:1.15rem }

/* ----------------------------------------------------------------- forms */
.dpg-form .f2{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
@media (max-width:560px){ .dpg-form .f2{ grid-template-columns:1fr } }
.fld{ display:grid; gap:.35rem; margin:0 0 .85rem }
.fld label{ font-size:.8rem; font-weight:700 }
.fld .opt{ font-weight:500; color:var(--ink-3) }
.fld input,.fld select,.fld textarea{
  font-family:inherit; font-size:.95rem; padding:.8rem .9rem; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--grn-xl); color:var(--ink);
  min-width:0; width:100%; max-width:100%;
  transition:border-color .18s, background .18s, box-shadow .18s }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--ink-3) }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--grn);
  background:var(--white); box-shadow:0 0 0 3px rgba(23,105,63,.16) }
.dpg-hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden }
.form-small{ font-size:.76rem; color:var(--ink-3); text-align:center; margin-top:.7rem }
.form-note{ font-size:.9rem; font-weight:600; padding:.8rem 1rem; border-radius:var(--r-s); margin:0 0 1rem }
.form-note.is-ok{ background:var(--grn-l); color:var(--grn-d); border:1px solid #B9DCC8 }
.form-note.is-err{ background:#FDECEA; color:#8C2C1F; border:1px solid #F3C4BD }
.on-dark .fld label{ color:#D6E4DA }
.on-dark .fld input,.on-dark .fld select,.on-dark .fld textarea{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#F2F7F3 }
.on-dark .fld input::placeholder,.on-dark .fld textarea::placeholder{ color:#9DB0A3 }
.on-dark .fld input:focus,.on-dark .fld select:focus,.on-dark .fld textarea:focus{
  background:rgba(255,255,255,.14); border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16) }
.on-dark .form-small{ color:#9DB0A3 }

/* ----------------------------------------------------------------- strip */
.strip{ background:var(--white); border-bottom:1px solid var(--line) }
.strip-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.5vw,2rem); padding-block:1.6rem }
@media (min-width:900px){ .strip-in{ grid-template-columns:repeat(4,1fr) } }
.strip-i{ display:flex; gap:.8rem; align-items:flex-start }
.strip-i svg{ flex-shrink:0; color:var(--grn); margin-top:.15rem }
.strip-i b{ display:block; font-size:.93rem; font-weight:700 }
.strip-i span{ font-size:.82rem; color:var(--ink-2); line-height:1.45; display:block }

/* ----------------------------------------------------------------- cards */
.cards{ display:grid; gap:1.1rem; grid-template-columns:1fr }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .cards{ grid-template-columns:repeat(3,1fr) } }
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .2s }
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 54px -32px rgba(13,23,18,.46); border-color:var(--grn) }
.card>img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.card-b{ padding:clamp(1.2rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.65rem; flex:1 }
.card p{ font-size:.92rem; color:var(--ink-2); flex:1 }
.card ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem }
.card ul li{ font-size:.76rem; background:var(--grn-l); color:var(--grn-d); padding:.3rem .6rem;
  border-radius:var(--r-x); font-weight:600 }
.card .go{ font-size:.89rem; font-weight:700; color:var(--grn); display:flex; align-items:center; gap:.4rem }

/* ----------------------------------------------------------------- steps */
.steps{ background:var(--white); border-block:1px solid var(--line) }
.stepgrid{ display:grid; gap:2rem; grid-template-columns:1fr; position:relative }
@media (min-width:820px){ .stepgrid{ grid-template-columns:repeat(3,1fr); gap:2.2rem }
  .stepgrid::before{ content:""; position:absolute; top:27px; left:16%; right:16%; height:2px;
    background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px) } }
.step{ text-align:center; position:relative }
.step .n{ width:56px; height:56px; border-radius:var(--r-x); background:var(--grn); color:#fff;
  display:grid; place-items:center; margin:0 auto 1.1rem; position:relative; z-index:2; border:5px solid var(--white) }
.step p{ font-size:.92rem; color:var(--ink-2); max-width:32ch; margin:.5rem auto 0 }

/* --------------------------------------------------------------- gallery */
.rail{ display:flex; gap:.85rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.5rem var(--pad) 1.4rem; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent }
.rail::-webkit-scrollbar{ height:6px }
.rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:9px }
.rail figure{ margin:0; flex:0 0 clamp(240px,30vw,400px); scroll-snap-align:start }
.rail img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-s) }
.rail figcaption{ margin-top:.6rem; font-size:.82rem; color:var(--ink-3) }

/* --------------------------------------------------------------- reviews */
.reviews{ display:grid; gap:1rem; grid-template-columns:1fr }
@media (min-width:760px){ .reviews{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1180px){ .reviews{ grid-template-columns:repeat(3,1fr) } }
.rev{ background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.3rem,2vw,1.7rem); display:flex; flex-direction:column; gap:1rem; justify-content:space-between }
.rev blockquote{ margin:0; font-size:1rem; font-weight:500; line-height:1.5 }
.rev .who{ display:flex; align-items:center; gap:.7rem }
.rev .av{ width:40px; height:40px; border-radius:var(--r-x); background:var(--grn-l); color:var(--grn-d);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; flex-shrink:0 }
.rev cite{ font-style:normal } .rev cite b{ display:block; font-size:.89rem; font-weight:700 }
.rev cite span{ font-size:.79rem; color:var(--ink-3) }

/* ----------------------------------------------------------------- areas */
.abox{ background:var(--grn); color:#fff; border-radius:var(--r);
  padding:clamp(2rem,4vw,3.4rem); display:grid; gap:clamp(1.6rem,3vw,3rem); grid-template-columns:1fr; align-items:center }
@media (min-width:880px){ .abox{ grid-template-columns:.95fr 1.05fr } }
.abox h2{ max-width:15ch } .abox p{ color:#BFDDCB; max-width:40ch; margin-top:.8rem }
.achips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0 }
.achips a{ display:inline-block; text-decoration:none; font-size:.88rem; font-weight:600;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26); color:#fff;
  padding:.5rem .9rem; border-radius:var(--r-x); transition:background .18s }
.achips a:hover{ background:rgba(255,255,255,.28) }

/* ------------------------------------------------------------------- cta */
.cta{ background:var(--grn-dk); color:#fff }
.cta-in{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start }
@media (min-width:900px){ .cta-in{ grid-template-columns:1fr 1fr } }
.cta-in>*{ min-width:0 }
.cta h2{ max-width:15ch }
/* scoped to the intro column: this used to hit every <p> in the section, and
   every form field wrapper is a <p>, so the fields rendered 7px short and the
   note under the button sat off centre */
.cta-in > div > p{ color:#BFD5C7; max-width:44ch; margin-top:.9rem }
.dpg-form p{ max-width:none }
.tel-big{ display:inline-block; margin-top:1.6rem; font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800;
  letter-spacing:-.04em; text-decoration:none; color:#fff; border-bottom:2px solid rgba(255,255,255,.34);
  padding-bottom:.15rem; transition:border-color .2s }
.tel-big:hover{ border-color:#fff }

/* ------------------------------------------------------------------ prose */
.prose{ max-width:68ch }
.prose h2{ margin-top:2.4rem; margin-bottom:.9rem }
.prose h3{ margin-top:1.9rem; margin-bottom:.6rem }
.prose p{ margin-bottom:1.05rem; color:var(--ink-2) }
.prose ul{ margin:0 0 1.3rem; padding-left:0; list-style:none }
.prose ul li{ position:relative; padding-left:1.7rem; margin-bottom:.6rem; color:var(--ink-2) }
.prose ul li::before{ content:""; position:absolute; left:.15rem; top:.62em; width:.5rem; height:.5rem;
  border-radius:2px; background:var(--grn) }
.prose strong{ color:var(--ink) }
.split{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:1fr; align-items:start }
@media (min-width:900px){ .split{ grid-template-columns:1.15fr .85fr } }
.split>*{ min-width:0 }
.sticky-side{ position:static }
@media (min-width:900px){ .sticky-side{ position:sticky; top:96px } }

/* ------------------------------------------------------------------- faq */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line); padding:1.15rem 0 }
.faq summary{ font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  gap:1rem; align-items:center; font-size:1.02rem }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-size:1.4rem; font-weight:600; color:var(--grn); line-height:1 }
.faq details[open] summary::after{ content:"\2212" }
.faq details p{ color:var(--ink-2); margin-top:.8rem; max-width:70ch }

/* ---------------------------------------------------------------- footer */
.site-foot .brand{ margin-bottom:1rem }
.site-foot{ background:var(--grn-dk); color:#93AC9E; padding-block:clamp(2.6rem,5vw,3.6rem) 2rem; font-size:.88rem }
.foot-grid{ display:grid; gap:2rem; grid-template-columns:1fr; margin-bottom:2rem }
@media (min-width:760px){ .foot-grid{ grid-template-columns:1.6fr 1fr 1fr } }
@media (min-width:1400px){ .foot-grid{ grid-template-columns:1.8fr 1fr 1fr 1fr } }
.foot-grid h4{ font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:#fff; margin:0 0 .9rem; font-weight:700 }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem }
.foot-grid a{ text-decoration:none; transition:color .18s } .foot-grid a:hover{ color:#fff }
.foot-bot{ border-top:1px solid rgba(255,255,255,.14); padding-top:1.3rem; display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem }
.foot-bot a{ color:#B6C8BC; text-decoration:none } .foot-bot a:hover{ color:#fff }

/* --------------------------------------------------------- mobile callbar */
.callbar{ position:fixed; inset-inline:0; bottom:0; z-index:70; display:none; gap:.6rem; padding:.7rem 1rem;
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line) }
.callbar a{ flex:1; text-align:center; text-decoration:none; font-weight:700; font-size:.94rem;
  padding:.85rem; border-radius:var(--r-s) }
.callbar .c1{ background:var(--grn); color:#fff }
.callbar .c2{ background:var(--ground); border:1px solid var(--line); color:var(--ink) }
@media (max-width:820px){ .callbar{ display:flex } body{ padding-bottom:76px } }

/* -------------------------------------------------------------- reveal */
.rv{ opacity:0; transform:translateY(20px) }
.rv.in{ opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1) }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important }
  .rv{ opacity:1; transform:none }
}

/* ---------------------------------------------------------------- video */
.videos{ background:var(--white); border-block:1px solid var(--line) }
.vgrid{ display:grid; gap:1.1rem; grid-template-columns:1fr }
@media (min-width:720px){ .vgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .vgrid{ grid-template-columns:repeat(3,1fr) } }
.vid{ margin:0 }
.vid-play,.vid iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r-s);
  background:#0A1A12; overflow:hidden }
.vid-play{ position:relative; padding:0; cursor:pointer }
.vid-play img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-s);
  transition:transform .4s cubic-bezier(.16,1,.3,1), filter .3s; filter:brightness(.86) }
.vid-play:hover img{ transform:scale(1.03); filter:brightness(1) }
.vid-btn{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:var(--r-x);
  background:var(--grn); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(5,32,20,.45); transition:transform .22s cubic-bezier(.16,1,.3,1), background .2s }
.vid-btn svg{ margin-left:3px }
.vid-play:hover .vid-btn{ transform:scale(1.09); background:var(--grn-d) }
.vid-play:active .vid-btn{ transform:scale(.97) }
.vid figcaption{ margin-top:.75rem }
.vid figcaption b{ display:block; font-size:.97rem; font-weight:700 }
.vid figcaption span{ font-size:.85rem; color:var(--ink-2) }

/* -------------------------------------------------------------- ratings */
.ratings{ padding-block:0 var(--sec) }
.rate-band{ background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.6rem); display:block }
.rate-score{ flex-shrink:0; text-align:center; background:var(--grn-l); border-radius:var(--r-s);
  padding:.9rem 1.2rem; min-width:118px }
.rate-score strong{ display:block; font-size:clamp(2.1rem,4vw,2.9rem); font-weight:800;
  letter-spacing:-.05em; line-height:1; color:var(--grn-d) }
.rate-score span{ font-size:.78rem; color:var(--ink-2); font-weight:600 }
.rate-meta{ flex:1; min-width:min(100%,260px) }
.rate-bar{ height:9px; border-radius:var(--r-x); background:var(--grn-l); overflow:hidden; margin-bottom:.75rem }
.rate-bar i{ display:block; height:100%; background:var(--grn); border-radius:var(--r-x) }
.rate-meta p{ font-size:.93rem; color:var(--ink-2) }
.rate-meta a{ color:var(--grn-d); font-weight:700 }

/* AI illustration, always shown with its caption so it is never passed off as a photo */
.illustration-figure{ margin:0 0 1.6rem }
.illustration-figure img{ width:100%; border-radius:var(--r-s) }
.illustration-figure figcaption{ margin-top:.7rem; font-size:.85rem; color:var(--ink-2);
  border-left:3px solid var(--grn); padding-left:.8rem }

/* a real customer story that earns its own block */
.story-figure{ margin:0 0 1.8rem }
.story-figure img{ width:100%; border-radius:var(--r-s) }
.story-figure figcaption{ margin-top:.8rem; font-size:.92rem; color:var(--ink-2);
  border-left:3px solid var(--grn); padding-left:.9rem; max-width:60ch }
.story-figure figcaption strong{ color:var(--ink) }

/* ------------------------------------------------- checkatrade proof band */
.rate-head{ display:flex; gap:clamp(1.1rem,2.4vw,2rem); align-items:center; flex-wrap:wrap;
  padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line) }
.rate-plat{ display:inline-block; font-weight:800; font-size:1.02rem; letter-spacing:-.02em;
  color:var(--grn-d); margin-bottom:.6rem }
.rate-badge{ width:auto; height:34px; display:block; margin-bottom:.7rem }
.rate-quotes{ list-style:none; padding:0; margin:0; display:grid; gap:1.2rem; grid-template-columns:1fr }
@media (min-width:820px){ .rate-quotes{ grid-template-columns:repeat(3,1fr); gap:1.6rem } }
.rate-quotes li{ display:flex; flex-direction:column; gap:.7rem }
.rate-quotes blockquote{ margin:0; font-size:.95rem; line-height:1.5; color:var(--ink) }
.rate-quotes cite{ font-style:normal; display:flex; flex-direction:column; gap:.1rem }
.rate-quotes cite b{ font-size:.86rem; font-weight:700 }
.rate-quotes cite span{ font-size:.79rem; color:var(--ink-3) }
.rate-quotes cite em{ font-style:normal; font-size:.79rem; font-weight:700; color:var(--grn-d) }
.rate-foot{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-2) }
.rate-foot a{ color:var(--grn-d); font-weight:700 }

/* portrait on the about page */
/* not floated: the prose column already shares its row with the quote card,
   so floating a portrait into it crushed the text to a few words per line */
.person-intro{ margin:0 0 1.8rem; max-width:330px }
.person-intro img{ width:100%; border-radius:var(--r-s) }
.person-intro figcaption{ margin-top:.6rem; font-size:.84rem; color:var(--ink-3) }

/* photo upload on the enquiry form */
.fld-file input[type=file]{ font-size:.86rem; padding:.7rem .8rem; background:var(--grn-xl);
  border:1px dashed var(--line-2); border-radius:var(--r-s); width:100%; cursor:pointer }
.fld-file input[type=file]::file-selector-button{ font-family:inherit; font-size:.82rem; font-weight:700;
  border:0; background:var(--grn); color:#fff; padding:.45rem .8rem; border-radius:6px;
  margin-right:.7rem; cursor:pointer }
.fld-file input[type=file]:hover{ border-color:var(--grn) }
.fld .hint{ font-size:.76rem; color:var(--ink-3) }
.on-dark .fld-file input[type=file]{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#F2F7F3 }
.on-dark .fld .hint{ color:#9DB0A3 }
.cf-turnstile{ margin:0 0 .9rem }