/* ============================================================
   BEHRENDT LAWN & DRAINAGE
   Direction: field documentation. A job binder, not a brochure.
   Depth strategy: borders + surface shifts. No decorative shadows,
   no radius anywhere. Every mark on this page is a label.
   Palette is drawn from a trench: ink, clay, washed stone,
   standing water, hedge, and utility locate paint.
   ============================================================ */

:root{
  /* --- grounds, dark to light --- */
  --ink:        #0E1A1F;   /* wet asphalt at dusk — the dark ground */
  --ink-2:      #16272E;   /* +1 elevation on the dark ground */
  --ink-3:      #1D333B;   /* +2, for inset panels and pressed states */
  --subsoil:    #0A1215;   /* below grade — image wells, deepest */
  --pine:       #1C3B31;   /* the hedge band */
  --pine-2:     #24493C;
  --paper:      #F8F7F4;   /* the notebook page — the light ground */
  --bone:       #EDEBE4;   /* +1 on the light ground */
  --bone-2:     #E4E1D8;   /* +2, pressed / inset */

  /* --- pigments --- */
  --water:      #3B7EA1;   /* standing water */
  --water-deep: #235971;
  --clay:       #4A3E33;   /* wet clay subsoil */
  --stone:      #8E9A96;   /* washed drainage stone */
  --locate:     #F2C230;   /* utility locate paint — the ONE accent */
  --locate-hi:  #FFD24A;
  --locate-ink: #1A1403;   /* text that sits on locate paint */

  /* --- text, four levels on the light ground --- */
  --tx-1:#0E1A1F; --tx-2:#39494E; --tx-3:#55626A; --tx-4:#5C6B6F;
  /* --- text, four levels on the dark ground --- */
  --td-1:#EDEBE4; --td-2:#C3CECC; --td-3:#96A5A7; --td-4:#818F91;

  /* --- grade lines (hairlines) --- */
  --grade:      rgba(14,26,31,.15);
  --grade-soft: rgba(14,26,31,.09);
  --grade-hard: rgba(14,26,31,.32);
  --grade-dk:   rgba(237,235,228,.16);
  --grade-dk-soft: rgba(237,235,228,.09);
  --grade-dk-hard: rgba(237,235,228,.34);

  /* --- type: 17px body, 1.25 ratio, rounded to whole px --- */
  --t-micro: 11.5px;
  --t-cap:   13px;
  --t-sm:    14.5px;
  --t-body:  17px;
  --t-lead:  19.5px;
  --t-h3:    22px;
  --t-h2:    clamp(30px, 4.8vw, 46px);
  --t-h1:    clamp(35px, 6.6vw, 68px);
  --t-num:   clamp(30px, 3.6vw, 38px);

  /* --- spacing: 4px base --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s14:56px; --s18:72px; --s24:96px;
  --section: clamp(56px, 8vw, 96px);

  --wrap: 1120px;
  --gut:  clamp(20px, 5vw, 56px);

  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.23,1,.32,1);
  --ease-move: cubic-bezier(.77,0,.175,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{
  margin:0;background:var(--paper);color:var(--tx-1);
  font-family:var(--serif);font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:oldstyle-nums;
}
img,svg{max-width:100%}
p{margin:0 0 1em;text-wrap:pretty}
figure{margin:0}
h1,h2,h3,h4{
  font-family:var(--sans);font-weight:900;line-height:1.05;
  letter-spacing:-.022em;margin:0;text-wrap:balance;
}
a{color:var(--water-deep);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--water);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible,footer :focus-visible,
.price :focus-visible,.area :focus-visible,
.strip :focus-visible,header.top :focus-visible{outline-color:var(--locate)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:12px;top:12px;z-index:120;background:var(--locate);color:var(--locate-ink);
  padding:var(--s3) var(--s4);font-family:var(--sans);font-weight:800;font-size:var(--t-sm);
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the field stamp: section number + label + grade rule ---------- */
.stamp{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);
  margin-bottom:var(--s5);
}
.stamp b{font-weight:600;color:var(--water-deep);font-variant-numeric:tabular-nums}
.stamp{flex-wrap:wrap}
.stamp::after{content:"";flex:1 0 28px;height:1px;background:var(--grade)}
.on-dark .stamp{color:var(--td-4)}
.price .stamp,.strip .stamp{color:var(--td-3)}  /* pine is too light for td-4 */
.on-dark .stamp b{color:var(--locate)}
.on-dark .stamp::after{background:var(--grade-dk)}

/* ---------- type utilities ---------- */
.lede{max-width:62ch}
h2.big{font-size:var(--t-h2);max-width:22ch;letter-spacing:-.028em}
.sub{font-size:var(--t-lead);margin-top:var(--s4);color:var(--tx-2);max-width:62ch}
.on-dark h2.big,.on-dark h3{color:var(--td-1)}
.on-dark .sub{color:var(--td-2)}
.meta{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-4);
}
.on-dark .meta{color:var(--td-4)}
.price .meta,.strip .meta{color:var(--td-3)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:800;font-size:var(--t-sm);
  letter-spacing:-.005em;line-height:1;
  min-height:48px;padding:0 var(--s6);
  text-decoration:none;border:1.5px solid transparent;background:none;
  cursor:pointer;
  transition:background-color .15s var(--ease), color .15s var(--ease),
             border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn .ico{flex:none}

.btn-locate{background:var(--locate);color:var(--locate-ink)}
.btn-locate:hover{background:var(--locate-hi)}
.btn-line{border-color:var(--grade-dk-hard);color:var(--td-1)}
.btn-line:hover{border-color:var(--td-1);background:rgba(237,235,228,.08)}
.btn-ink{background:var(--ink);color:var(--td-1)}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{border-color:var(--grade-hard);color:var(--tx-1)}
.btn-ghost:hover{background:var(--bone-2);border-color:var(--tx-1)}
.btn-sm{min-height:40px;padding:0 var(--s4);font-size:var(--t-cap)}

/* ---------- header ---------- */
header.top{
  position:sticky;top:0;z-index:60;
  background:var(--ink);color:var(--td-1);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
header.top.scrolled{border-bottom-color:var(--grade-dk);background:var(--ink-2)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:var(--s3)}
.mark{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--td-1);min-height:44px;align-content:center;flex-wrap:wrap}
.mark b{font-family:var(--sans);font-weight:900;font-size:19px;letter-spacing:-.035em;line-height:1.4}
.mark span{font-family:var(--mono);font-weight:500;font-size:10.5px;color:var(--td-3);letter-spacing:.15em;text-transform:uppercase}
nav.main{display:none;gap:var(--s6)}
nav.main a{
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
  color:var(--td-2);text-decoration:none;padding-block:var(--s3);
  border-bottom:2px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease);
}
nav.main a:hover{color:var(--td-1);border-bottom-color:var(--locate)}
nav.main a[aria-current="true"]{color:var(--td-1);border-bottom-color:var(--locate)}
.top-actions{display:flex;align-items:center;gap:var(--s2)}
.menu-btn{display:inline-flex}
@media(min-width:1040px){nav.main{display:flex}.menu-btn{display:none}}
/* below 600px there isn't room for the wordmark, the number and Menu —
   the number collapses to its icon; the sticky call bar still spells it out */
@media(max-width:600px){
  .top-actions .btn-locate{min-width:48px;padding:0 var(--s3)}
  .top-num{display:none}
}

/* ---------- mobile menu sheet (native <dialog>: focus trap + Esc for free) ---------- */
dialog.sheet{
  border:0;padding:0;margin:0 0 0 auto;width:min(360px,88vw);max-width:none;
  height:100dvh;max-height:100dvh;
  background:var(--ink);color:var(--td-1);
  border-left:1px solid var(--grade-dk);
}
dialog.sheet::backdrop{background:rgba(6,12,15,.66)}
dialog.sheet[open]{animation:sheet-in .22s var(--ease)}
dialog.sheet[open]::backdrop{animation:fade-in .22s var(--ease)}
@keyframes sheet-in{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.sheet-in{display:flex;flex-direction:column;height:100%;padding:var(--s5) var(--s6) var(--s6)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--grade-dk)}
.sheet-close{
  appearance:none;background:none;border:1.5px solid var(--grade-dk-hard);color:var(--td-1);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease);
}
.sheet-close:hover{background:var(--ink-3);border-color:var(--td-1)}
.sheet-close:active{transform:scale(.94)}
.sheet nav{display:flex;flex-direction:column;margin-top:var(--s2)}
.sheet nav a{
  font-family:var(--sans);font-weight:700;font-size:20px;color:var(--td-1);
  text-decoration:none;padding-block:var(--s4);border-bottom:1px solid var(--grade-dk-soft);
  display:flex;align-items:center;justify-content:space-between;
  transition:color .15s var(--ease),padding-left .15s var(--ease);
}
.sheet nav a:hover{color:var(--locate);padding-left:var(--s2)}
.sheet nav a .n{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;color:var(--td-4);letter-spacing:.1em}
.sheet-foot{margin-top:auto;padding-top:var(--s6);display:grid;gap:var(--s3)}
.sheet-foot .btn{width:100%}

/* ---------- hero ---------- */
.hero{
  background:var(--ink);color:var(--td-1);
  padding-block:clamp(40px,7vw,78px) clamp(40px,6vw,68px);
}
.hero h1{font-size:var(--t-h1);max-width:16ch;letter-spacing:-.032em}
.hero .deck{font-size:clamp(17px,2vw,20.5px);color:var(--td-2);max-width:56ch;margin-top:var(--s6)}
.hero .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.hero .fineprint{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.hero .fineprint span{display:flex;align-items:center;gap:7px}
.hero .fineprint span::before{content:"";width:5px;height:5px;background:var(--locate);flex:none}
.hero .ba{margin-top:clamp(32px,4.5vw,52px)}

/* ---------- before / after evidence ---------- */
.pair{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media(min-width:640px){.pair{grid-template-columns:1fr 1fr}}
.shot{
  position:relative;line-height:0;background:var(--subsoil);
  aspect-ratio:4/3;overflow:hidden;
  display:block;width:100%;padding:0;border:0;margin:0;
  cursor:zoom-in;appearance:none;
  outline-offset:2px;
}
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease), opacity .2s var(--ease);
}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;
}
.shot:hover img{transform:scale(1.025)}
.shot:active img{transform:scale(1.01)}
.zoom{
  position:absolute;right:var(--s2);top:var(--s2);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  background:rgba(10,18,21,.74);color:var(--td-1);
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.shot:hover .zoom,.shot:focus-visible .zoom{opacity:1;transform:none}
.lbl{
  position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--mono);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  padding:8px 13px;background:rgba(10,18,21,.88);color:var(--td-2);line-height:1.2;
}
.lbl.af{background:var(--locate);color:var(--locate-ink)}
figcaption{
  font-family:var(--serif);font-size:var(--t-sm);color:var(--td-3);
  margin-top:var(--s3);max-width:72ch;line-height:1.55;
}
.gal figcaption{color:var(--tx-3)}
.joblog{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-bottom:var(--s3);
}
.joblog span{display:flex;align-items:center;gap:7px}
.joblog span::before{content:"";width:4px;height:4px;background:currentColor;opacity:.55;flex:none}

/* ---------- lightbox ---------- */
dialog.box{
  border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100vw;height:100dvh;overflow:hidden;
}
dialog.box::backdrop{background:rgba(6,12,15,.94)}
dialog.box[open]{animation:fade-in .18s var(--ease)}
.box-in{
  height:100%;display:grid;grid-template-rows:auto 1fr auto;
  padding:var(--s4) var(--s4) var(--s5);gap:var(--s3);
  background:#080F12;   /* the dialog owns its own ground; ::backdrop alone is not dependable */
}
.box-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.box-fig{min-height:0;min-width:0;display:grid;place-items:center}
.box-fig img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;
}
.box-cap{
  font-family:var(--serif);font-size:var(--t-sm);color:var(--td-2);
  text-align:center;max-width:70ch;margin-inline:auto;
}
.box-nav{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s2)}

/* ---------- trust strip ---------- */
.strip{background:var(--pine);color:var(--td-1)}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr}
.strip li{
  padding:var(--s4) 0;border-bottom:1px solid rgba(237,235,228,.14);
  font-family:var(--sans);font-size:var(--t-sm);font-weight:600;
  display:flex;gap:var(--s3);align-items:flex-start;line-height:1.4;
}
.strip li:last-child{border-bottom:0}
.strip svg{flex:none;margin-top:2px}
@media(min-width:820px){
  .strip ul{grid-template-columns:repeat(4,1fr);gap:0 var(--s8)}
  .strip li{border-bottom:0;padding:var(--s5) 0}
}

/* ---------- sections ---------- */
section{padding-block:var(--section)}
.on-dark{background:var(--ink);color:var(--td-1)}

/* ---------- services ---------- */
.svc{display:grid;margin-top:var(--s10);border-top:1px solid var(--grade)}
.svc article{padding:var(--s6) 0;border-bottom:1px solid var(--grade)}
.svc h3{font-size:var(--t-h3);letter-spacing:-.026em}
.svc p{margin:var(--s2) 0 0;color:var(--tx-2);max-width:56ch;font-size:16.5px}
.svc .tag{
  display:block;margin-bottom:var(--s2);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--water-deep);
}
@media(min-width:840px){.svc{grid-template-columns:1fr 1fr;column-gap:var(--s18)}}

/* ---------- gallery ---------- */
.gal{background:var(--bone);border-block:1px solid var(--grade)}
.gal .job{margin-top:var(--s14);padding-top:var(--s8);border-top:1px solid var(--grade)}
.gal .job:first-of-type{border-top:0;padding-top:0;margin-top:var(--s10)}
.gal h3{font-size:var(--t-h3);margin-bottom:var(--s3);letter-spacing:-.026em}

/* ---------- process ---------- */
.steps{margin-top:var(--s10);display:grid}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  padding:var(--s6) 0;border-top:1px solid var(--grade);
}
.step:last-child{border-bottom:1px solid var(--grade)}
.step .n{
  font-family:var(--sans);font-weight:900;font-size:var(--t-num);
  color:var(--water);letter-spacing:-.05em;line-height:.9;
  font-variant-numeric:tabular-nums lining-nums;min-width:2.2ch;
}
.step h3{font-size:var(--t-lead);letter-spacing:-.024em}
.step p{margin:var(--s2) 0 0;color:var(--tx-2);max-width:60ch;font-size:16.5px}

/* ---------- pricing ---------- */
.price{background:var(--pine);color:var(--td-1)}
.price .sub{color:var(--td-2)}
.rows{margin-top:var(--s10);border-top:1px solid var(--grade-dk)}
.row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:var(--s2) var(--s6);padding:var(--s5) 0;border-bottom:1px solid var(--grade-dk);
}
.row .what{max-width:46ch}
.row .what b{font-family:var(--sans);font-size:var(--t-body);font-weight:800;display:block;letter-spacing:-.018em}
.row .what span{font-size:var(--t-sm);color:var(--td-3);display:block;margin-top:2px}
.row .amt{
  font-family:var(--mono);font-weight:600;font-size:var(--t-lead);
  color:var(--locate);white-space:nowrap;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
}
.price .note{margin-top:var(--s6);font-size:var(--t-sm);color:var(--td-3);max-width:62ch}

/* ---------- service area ---------- */
.towns{list-style:none;margin:var(--s10) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s8);border-top:1px solid var(--grade-dk-hard)}
.towns li{
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
  padding:var(--s3) 0;border-bottom:1px solid var(--grade-dk);color:var(--td-2);
  display:flex;align-items:center;gap:var(--s3);
}
.towns li::before{content:"";width:6px;height:6px;background:var(--water);flex:none}
.area-note{
  margin:var(--s8) 0 0;font-size:var(--t-sm);color:var(--td-3);max-width:62ch;
  border-left:2px solid var(--water);padding-left:var(--s4);
}
.area-note a{color:var(--td-1);text-decoration-color:var(--water);white-space:nowrap}
@media(min-width:760px){.towns{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.towns{grid-template-columns:repeat(4,1fr)}}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--grade)}
.faq details:first-of-type{border-top:1px solid var(--grade);margin-top:var(--s10)}
.faq summary{
  font-family:var(--sans);font-weight:800;font-size:var(--t-lead);letter-spacing:-.022em;
  padding:var(--s5) var(--s10) var(--s5) 0;cursor:pointer;list-style:none;position:relative;
  transition:color .15s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--water-deep)}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:6px;background:var(--water);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.faq summary::after{top:calc(50% - 1px);width:16px;height:2px}
.faq summary::before{top:calc(50% - 8px);right:13px;width:2px;height:16px}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq .ans{padding:0 0 var(--s5);max-width:64ch;color:var(--tx-2)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- quote form ---------- */
.quote{background:var(--bone);border-top:1px solid var(--grade)}
.quote .sub{color:var(--tx-2)}
.formwrap{
  margin-top:var(--s10);max-width:660px;
  background:var(--paper);border:1px solid var(--grade);
  padding:clamp(20px,4vw,36px);
}
.form{display:grid;gap:var(--s5)}
.field{display:grid;gap:7px}
.field label{
  font-family:var(--mono);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);
  display:flex;justify-content:space-between;gap:var(--s3);
}
.field label .req{color:var(--water-deep)}
.field input,.field select,.field textarea{
  font-family:var(--serif);font-size:16.5px;line-height:1.4;
  padding:13px 14px;min-height:48px;width:100%;
  border:1px solid var(--grade-hard);border-radius:0;
  background:var(--bone-2);color:var(--tx-1);
  transition:border-color .15s var(--ease),background-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field select{
  font-family:var(--serif);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-2) 50%),linear-gradient(135deg,var(--tx-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;
}
.field textarea{min-height:132px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}  /* bone-2 ground */
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--tx-3);background:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--paper);
  border-color:var(--water);box-shadow:0 0 0 3px rgba(59,126,161,.22);
}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#A3352B;background:#FBF1EF}
.field.bad input:focus,.field.bad textarea:focus{box-shadow:0 0 0 3px rgba(163,53,43,.2);border-color:#A3352B}
.err{
  font-family:var(--sans);font-weight:700;font-size:var(--t-cap);color:#8E2B22;
  display:none;align-items:center;gap:6px;
}
.field.bad .err{display:flex}
.two{display:grid;gap:var(--s5)}
@media(min-width:620px){.two{grid-template-columns:1fr 1fr}}
.form .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.formnote{font-size:var(--t-sm);color:var(--tx-3);margin:0}
.consent{gap:var(--s2)}
/* .field label is (0,1,1); this must outrank it or the row renders as a mono caps label */
.field label.check{
  display:flex;gap:var(--s3);align-items:flex-start;justify-content:flex-start;cursor:pointer;
  font-family:var(--serif);font-size:15.5px;font-weight:400;line-height:1.45;
  color:var(--tx-2);text-transform:none;letter-spacing:0;
}
.field label.check input{
  width:22px;height:22px;min-height:0;flex:none;margin:1px 0 0;padding:0;
  accent-color:var(--water-deep);cursor:pointer;border-radius:0;
}
.field label.check input:focus-visible{outline:3px solid var(--water);outline-offset:2px}
.consent.bad label.check{color:#8E2B22}
.consent.bad label.check input{outline:2px solid #A3352B;outline-offset:2px}
.status{
  font-family:var(--sans);font-weight:700;font-size:var(--t-sm);
  color:var(--water-deep);margin:0;
}
.sent{
  display:none;border:1px solid var(--grade);border-left:3px solid var(--pine);
  background:var(--bone);padding:var(--s5);
}
.sent.on{display:block;animation:fade-in .2s var(--ease)}
.sent h3{font-family:var(--sans);font-size:var(--t-body);margin-bottom:var(--s2)}
.sent p{font-size:var(--t-sm);color:var(--tx-2);margin-bottom:var(--s3)}
.sent pre{
  font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--tx-2);
  background:var(--paper);border:1px solid var(--grade);padding:var(--s4);
  max-height:180px;overflow:auto;white-space:pre-wrap;margin:0 0 var(--s3);
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--td-2);padding-block:var(--s14) 116px;font-size:var(--t-sm)}
footer .cols{display:grid;gap:var(--s8)}
footer h2{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--td-4);margin-bottom:var(--s3);
}
footer p{color:var(--td-3);max-width:44ch}
footer a{color:var(--td-2);text-decoration:none;transition:color .15s var(--ease)}
footer a:hover{color:var(--locate);text-decoration:underline}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:5px 0}
.f-phone{
  font-family:var(--sans);font-weight:900;font-size:23px;color:var(--locate)!important;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;
  display:inline-block;margin-top:var(--s2);
}
.foot-legal{margin-top:var(--s14);padding-top:var(--s5);border-top:1px solid var(--grade-dk)}
.legal-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s3);padding:0;list-style:none}
.legal-links a{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--td-3);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.legal-links a:hover{color:var(--locate);border-bottom-color:var(--locate);text-decoration:none}
.legal{margin:0;font-size:var(--t-cap);color:var(--td-4);max-width:none}
@media(min-width:860px){footer .cols{grid-template-columns:1.5fr 1fr 1fr}footer{padding-bottom:var(--s14)}}

/* ---------- sticky call bar (mobile) ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:grid;grid-template-columns:1.25fr 1fr;
  background:var(--ink);border-top:1px solid var(--grade-dk);
}
.callbar a{
  min-height:56px;display:flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--sans);font-weight:800;font-size:var(--t-sm);
  text-decoration:none;color:var(--td-1);
  transition:background-color .15s var(--ease),transform .1s var(--ease);
}
.callbar a:active{transform:scale(.985)}
.callbar a.pri{background:var(--locate);color:var(--locate-ink)}
.callbar a.pri:hover{background:var(--locate-hi)}
.callbar a.sec:hover{background:var(--ink-2)}
@media(min-width:1040px){.callbar{display:none}footer{padding-bottom:var(--s14)}}

/* ---------- reviews (live from Google through /api/reviews, see _worker.js) ---------- */
[hidden]{display:none!important}
.rev-head{display:grid;gap:var(--s8);align-items:end}
@media(min-width:900px){.rev-head{grid-template-columns:1fr auto}}
.rev-score{
  display:grid;grid-template-columns:auto auto;align-items:center;gap:var(--s2) var(--s5);
  border-left:2px solid var(--locate);padding:var(--s1) 0 var(--s1) var(--s5);
  text-decoration:none;color:var(--td-1);justify-self:start;
}
.rev-score .big-n{
  grid-row:span 2;font-family:var(--sans);font-weight:900;line-height:.85;
  font-size:clamp(46px,6vw,64px);letter-spacing:-.045em;color:var(--locate);
}
.rev-score .stars{--sz:21px;align-self:end}
.rev-score .meta{align-self:start;color:var(--td-3);transition:color .15s var(--ease)}
.rev-score:hover .meta{color:var(--td-1);text-decoration:underline;text-decoration-color:var(--locate);text-underline-offset:3px}

/* stars: one mask, filled to the rating (4.8 fills 4 and most of the 5th) */
.stars{
  --sz:15px;--r:5;display:inline-block;flex:none;
  width:calc(var(--sz) * 6.25 - var(--sz) * .25);height:var(--sz);
  background:linear-gradient(90deg,var(--locate) calc(var(--r) / 5 * 100%),var(--grade-dk-hard) 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M8 .5l2.35 4.78 5.27.77-3.81 3.72.9 5.25L8 12.54 3.29 15.02l.9-5.25L.38 6.05l5.27-.77z'/%3E%3C/svg%3E") 0 0 / calc(var(--sz) * 1.25) var(--sz) repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M8 .5l2.35 4.78 5.27.77-3.81 3.72.9 5.25L8 12.54 3.29 15.02l.9-5.25L.38 6.05l5.27-.77z'/%3E%3C/svg%3E") 0 0 / calc(var(--sz) * 1.25) var(--sz) repeat-x;
}

.rev-list{list-style:none;margin:var(--s10) 0 0;padding:0;display:grid;gap:var(--s2);grid-template-columns:1fr}
@media(min-width:720px){
  .rev-list{grid-template-columns:repeat(2,1fr)}
  .rev-list[data-n="1"]{grid-template-columns:minmax(0,760px)}
  .rev-list[data-odd] > .rev:first-child{grid-column:span 2}
  .rev-list[data-odd] > .rev:first-child .rev-txt{font-size:var(--t-lead);line-height:1.55}
}
@media(min-width:1040px){
  .rev-list[data-n="3"],.rev-list[data-n="5"]{grid-template-columns:repeat(3,1fr)}
  .rev-list[data-n="3"] > .rev:first-child{grid-column:auto}
  .rev-list[data-n="3"] > .rev:first-child .rev-txt{font-size:16.5px;line-height:1.6}
}
.rev{
  background:var(--ink-2);border:1px solid var(--grade-dk);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:var(--s4);min-width:0;
}
.rev-by{display:flex;align-items:center;gap:var(--s3);min-width:0}
.rev-av{
  width:42px;height:42px;flex:none;overflow:hidden;display:grid;place-items:center;
  background:var(--pine-2);color:var(--td-1);
  font-family:var(--sans);font-weight:800;font-size:17px;line-height:1;
}
.rev-av img{width:100%;height:100%;object-fit:cover;display:block}
.rev-who{min-width:0;display:grid;gap:5px}
.rev-name{
  font-family:var(--sans);font-weight:800;font-size:var(--t-body);letter-spacing:-.015em;line-height:1.15;
  color:var(--td-1);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
a.rev-name:hover{text-decoration:underline;text-decoration-color:var(--locate)}
.rev-rate{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.rev-txt{
  margin:0;color:var(--td-2);font-size:16.5px;line-height:1.6;
  white-space:pre-line;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden;
}
.rev.open .rev-txt{display:block;-webkit-line-clamp:unset;line-clamp:none}
.rev-more{
  appearance:none;background:none;border:0;padding:var(--s1) 0;margin-top:calc(var(--s2) * -1);
  align-self:flex-start;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:var(--t-cap);color:var(--locate);
  text-decoration:underline;text-underline-offset:3px;
}
.rev-more:hover{color:var(--locate-hi)}
.rev-foot{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--grade-dk-soft)}
.rev-foot a{color:var(--td-3);text-decoration:none;transition:color .15s var(--ease)}
.rev-foot a:hover{color:var(--td-1);text-decoration:underline;text-decoration-color:var(--locate)}

.rev.sk{min-height:230px;gap:var(--s3)}
.rev.sk i{display:block;height:11px;background:var(--ink-3);animation:rev-sk 1.3s ease-in-out infinite alternate}
.rev.sk i:first-child{width:46%;height:14px;margin-bottom:var(--s3)}
.rev.sk i:nth-child(3){width:88%}
.rev.sk i:last-child{width:62%}
@keyframes rev-sk{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.rev.sk i{animation:none}}

.rev-fall{
  margin-top:var(--s10);max-width:720px;
  background:var(--ink-2);border:1px solid var(--grade-dk);border-left:3px solid var(--locate);
  padding:var(--s5) var(--s6);
}
.rev-fall p{margin:0;color:var(--td-2)}
.rev-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s8)}
.rev-attr{margin:0;flex-basis:100%}
@media(min-width:720px){.rev-attr{flex-basis:auto;margin-left:auto}}
@media(max-width:520px){.rev-acts .btn{flex:1 1 100%}}
/* the Reviews link makes six nav items; buy a little room right at the breakpoint */
@media(min-width:1040px) and (max-width:1159px){nav.main{gap:var(--s5)}}
.rev-attr .gm{
  font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:13px;
  letter-spacing:0;text-transform:none;color:var(--td-2);
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  dialog.sheet[open],dialog.box[open],dialog.sheet[open]::backdrop,.sent.on{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .shot:hover img{transform:none}
}

/* ============================================================
   SERVICE PAGES + links from the home page service cards
   ============================================================ */

/* home: each service card is one link to its own page */
.svc article{position:relative}
.svc h3 a{color:inherit;text-decoration:none;transition:color .15s var(--ease)}
.svc h3 a::after{content:"";position:absolute;inset:0}
.svc h3 a:focus-visible{outline:none}
.svc h3 a:focus-visible::after{outline:3px solid var(--water);outline-offset:4px}
.svc .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--s3);
  font-family:var(--sans);font-weight:700;font-size:var(--t-cap);color:var(--water-deep);
}
.svc .go svg{transition:transform .15s var(--ease)}
.svc article:hover h3 a{color:var(--water-deep)}
.svc article:hover .go{text-decoration:underline;text-underline-offset:3px}
.svc article:hover .go svg{transform:translateX(3px)}
.job-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--s4);
  font-family:var(--sans);font-weight:700;font-size:var(--t-sm);color:var(--water-deep);
}

/* breadcrumb in the service hero */
.crumbs ol{
  list-style:none;margin:0 0 var(--s5);padding:0;display:flex;flex-wrap:wrap;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--td-3);
}
.crumbs li{display:flex;align-items:center;gap:var(--s2)}
.crumbs li+li::before{content:"/";color:var(--td-4)}
.crumbs a{color:var(--td-2);text-decoration:none}
.crumbs a:hover{color:var(--locate);text-decoration:underline;text-underline-offset:3px}

.svc-hero h1{font-size:clamp(34px,5.6vw,60px);max-width:19ch}

/* "what's included" cards reuse .svc; these are plain, not links */
.svc.plain article:hover h3{color:inherit}

/* signs / checklist */
.checks{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;border-top:1px solid var(--grade)}
.checks li{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4) 0;border-bottom:1px solid var(--grade);
  font-size:16.5px;color:var(--tx-2);line-height:1.5;
}
.checks li::before{content:"";width:8px;height:8px;background:var(--water);flex:none;margin-top:8px}
@media(min-width:840px){.checks{grid-template-columns:1fr 1fr;column-gap:var(--s18)}}

/* cross-section drawings */
.xsec{margin-top:var(--s10);border:1px solid var(--grade);background:var(--bone)}
.xsec-art{padding:clamp(12px,3vw,28px) clamp(12px,3vw,28px) 0}
.xsec svg{display:block;width:100%;height:auto}
.xsec ol{
  list-style:none;margin:0;padding:var(--s5) clamp(16px,3vw,28px) var(--s6);
  display:grid;gap:var(--s3) var(--s8);counter-reset:x;
}
@media(min-width:760px){.xsec ol{grid-template-columns:1fr 1fr}}
.xsec li{display:flex;gap:var(--s3);align-items:baseline;font-size:var(--t-sm);color:var(--tx-2);line-height:1.5}
.xsec li b{
  flex:none;display:inline-grid;place-items:center;width:24px;height:24px;
  background:var(--ink);color:var(--locate);
  font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;
}
.xsec li strong{font-family:var(--sans);font-weight:800;color:var(--tx-1)}
.xsec figcaption{padding:0 clamp(16px,3vw,28px) var(--s5);margin:0;color:var(--tx-3)}

/* pricing on a service page: a link back to the full quote form */
.price .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}

/* other services */
.others{list-style:none;margin:var(--s10) 0 0;padding:0;display:grid;border-top:1px solid var(--grade)}
.others a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:var(--s5) 0;border-bottom:1px solid var(--grade);
  font-family:var(--sans);font-weight:800;font-size:var(--t-lead);letter-spacing:-.022em;line-height:1.2;
  color:var(--tx-1);text-decoration:none;transition:color .15s var(--ease),padding-left .15s var(--ease);
}
.others a small{
  display:block;margin-top:4px;font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-4);
}
.others a svg{flex:none;color:var(--water);transition:transform .15s var(--ease)}
.others a:hover{color:var(--water-deep);padding-left:var(--s2)}
.others a:hover svg{transform:translateX(3px)}
@media(min-width:840px){.others{grid-template-columns:1fr 1fr;column-gap:var(--s18)}}

/* closing call to action */
.cta .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
@media(max-width:520px){.cta .acts .btn{flex:1 1 100%}}
.checks-h{margin-top:var(--s14);font-size:var(--t-h3);letter-spacing:-.026em}