/* Greezyboy design tokens.
   Built on the "Night Shift" direction from the Claude Design system, which
   passed every contrast check it was given. Every pairing below was measured
   before it was written down:
     text-strong 17.1:1 · text 13.2:1 · text-muted 8.4:1 · green text 8.3:1
     boundary 3.95:1 · ink on green 8.3:1 — and all of them hold on the forest
     band too (green text 6.5:1, boundary 3.1:1).
   Kawasaki lime #78BE20 is the client's chosen green. It is a signal, not a
   surface: the Call button and small accents only. A big lime slab reads as a
   discount flyer. */

@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:400 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ground */
  --ink-950:#0A0B0A;
  --ink-900:#0F110F;      /* page */
  --ink-800:#191C19;      /* alternate band, surfaces */
  --ink-700:#242824;      /* raised, pressed */
  --forest:#1C2B17;       /* the one deep-green surface: electrical feature */
  --forest-line:#33472A;

  /* lines */
  --line:#3A3F39;         /* decorative hairline */
  --line-strong:#6E746C;  /* interactive boundary, 3:1+ on every ground */

  /* text */
  --text-strong:#F4F3EE;
  --text:#D6D8D1;
  --text-muted:#A9AEA6;

  /* signal */
  --green:#78BE20;
  --green-press:#A4D65E;

  /* type — one variable family, width axis does the work */
  --font:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --wdth-display:104;
  --wdth-heading:102;
  --wdth-body:100;
  --wdth-tight:92;

  --fs-small:14px;
  --fs-body:17px;         /* 17 not 16: read outdoors, one-handed */
  --fs-lead:clamp(18px,1.6vw,20px);
  --fs-h3:clamp(20px,1.9vw,23px);
  --fs-h2:clamp(30px,4.4vw,50px);
  --fs-h1:clamp(38px,4.4vw,56px);
  --fs-phone:clamp(34px,6.4vw,64px);

  --ls-display:-0.035em;
  --ls-heading:-0.022em;
  --ls-label:0.14em;

  /* space */
  --gutter:clamp(20px,5vw,48px);
  --page-max:1280px;
  --section:clamp(64px,10vw,128px);
  --measure:62ch;

  /* shape — softened, like a dash panel */
  --r-sm:6px;
  --r-md:10px;
  --r-pill:999px;

  /* touch */
  --tap:48px;
  --tap-call:56px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:140ms;
}


/* Greezyboy — site styles. Mobile first; one breakpoint for the nav (900px). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink-900);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
  font-variation-settings:'wdth' var(--wdth-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

/* browser surfaces — these ship with defaults that belong to no design system */
::selection{background:var(--green);color:var(--ink-900)}
html{scrollbar-color:var(--line-strong) var(--ink-950);caret-color:var(--green)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--ink-950)}
::-webkit-scrollbar-thumb{background:var(--ink-700);border:3px solid var(--ink-950);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

.nobr{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;background:var(--green);color:var(--ink-900);font-weight:650;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:12px}

.ic{width:20px;height:20px;flex:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.band{background:var(--ink-800);border-block:1px solid var(--line)}
.forest{background:var(--forest);border-block:1px solid var(--forest-line)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split.lean{grid-template-columns:1.05fr .95fr}}

/* ---------- type ---------- */
.h1,.h2,.h3{color:var(--text-strong);text-wrap:balance}
.h1{font-size:var(--fs-h1);font-weight:600;font-variation-settings:'wdth' var(--wdth-display);
  line-height:1.0;letter-spacing:var(--ls-display)}
.h2{font-size:var(--fs-h2);font-weight:600;font-variation-settings:'wdth' var(--wdth-heading);
  line-height:1.04;letter-spacing:var(--ls-heading)}
.h3{font-size:var(--fs-h3);font-weight:650;line-height:1.2;letter-spacing:-.01em}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text);max-width:52ch}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1em}
.muted{color:var(--text-muted)}
.small{font-size:var(--fs-small);line-height:1.55;color:var(--text-muted)}
.stack>*+*{margin-top:18px}
.mt-s{margin-top:14px}.mt{margin-top:22px}.mt-l{margin-top:clamp(28px,4vw,44px)}

.link{color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--green);
  text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color var(--fast) ease}
.link:hover{color:var(--green)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text-strong);
  font-weight:600;text-decoration:none}
.more .ic{color:var(--green);transition:transform var(--fast) var(--ease)}
.more:hover .ic{transform:translateX(3px)}

.label{font-size:12px;font-weight:650;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}

.stars{display:inline-flex;gap:2px;color:var(--green);vertical-align:-3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--tap-call);padding:8px 22px 8px 10px;border-radius:var(--r-sm);line-height:1.25;text-align:left;
  font-size:17px;font-weight:650;letter-spacing:-.005em;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:background var(--fast) ease,border-color var(--fast) ease,color var(--fast) ease,transform var(--fast) ease;
}
.btn:active{transform:translateY(1px)}
.chip{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none}
.chip .ic{width:18px;height:18px}
/* Call: a green slab with an ink chip. Green carries the meaning, ink carries contrast. */
.btn-call{background:var(--green);color:var(--ink-900)}
.btn-call .chip{background:var(--ink-900);color:var(--green)}
.btn-call:hover{background:var(--green-press)}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--line-strong)}
.btn-ghost .chip{background:var(--ink-700);color:var(--text-strong)}
.btn-ghost:hover{background:var(--ink-800);border-color:var(--text-muted)}
.btn-plain{padding:0 22px}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,17,15,.96);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;flex:none;min-height:44px;text-decoration:none}
.brand img{height:32px;width:auto}
.nav{display:none}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  color:var(--text);font-size:15.5px;font-weight:550;text-decoration:none;transition:color var(--fast) ease}
.nav a:hover,.nav a[aria-current]{color:var(--text-strong)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--green);border-radius:2px}
.header-call{display:none}

/* hamburger: three bars that fold into an X */
.menu-btn{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--r-sm);
  background:var(--ink-800);color:var(--text-strong);cursor:pointer;transition:background var(--fast) var(--ease)}
.menu-btn:hover{background:var(--ink-700)}
.bars{position:relative;display:block;width:22px;height:16px}
.bars i{position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;
  transition:top .28s var(--ease),transform .28s var(--ease),opacity .18s ease,width .28s var(--ease)}
.bars i:nth-child(1){top:0}
.bars i:nth-child(2){top:7px;left:auto;right:0;width:14px;background:var(--green)}
.bars i:nth-child(3){top:14px}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0;width:0}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){top:7px;transform:rotate(-45deg)}

/* phone menu: fills the screen under the header */
.sheet{position:fixed;top:71px;left:0;right:0;bottom:0;z-index:49;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:8px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink-900);overflow-y:auto;overscroll-behavior:contain;isolation:isolate}
.sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#1f231f;
  -webkit-mask:url(/assets/tex/topo.svg) 0 0/640px repeat,linear-gradient(0deg,#000,transparent 65%);-webkit-mask-composite:source-in;
  mask:url(/assets/tex/topo.svg) 0 0/640px repeat,linear-gradient(0deg,#000,transparent 65%);mask-composite:intersect}
.sheet[hidden]{display:none}
.sheet-nav{display:grid}
.sheet a.sheet-link{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;border-bottom:1px solid var(--line);
  font-size:clamp(24px,7vw,30px);font-weight:600;font-variation-settings:'wdth' var(--wdth-heading);letter-spacing:-.015em;line-height:1.15;
  color:var(--text-strong);text-decoration:none}
.sheet a.sheet-link .ic{flex:none;width:20px;height:20px;color:var(--text-muted);transition:transform var(--fast) var(--ease),color var(--fast)}
.sheet a.sheet-link:hover .ic,.sheet a.sheet-link[aria-current] .ic{color:var(--green)}
.sheet a.sheet-link:hover .ic{transform:translateX(3px)}
.sheet a.sheet-link[aria-current]{color:var(--green)}
.sheet-foot{display:grid;gap:10px}
.sheet-status{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14.5px;line-height:1.4;color:var(--text-muted)}
.sheet-foot .btn{width:100%;justify-content:flex-start}
@media (prefers-reduced-motion:no-preference){
  .sheet:not([hidden]){animation:sheetIn .28s var(--ease) both}
  .sheet:not([hidden]) .sheet-link,.sheet:not([hidden]) .sheet-foot{animation:sheetItem .42s var(--ease) both}
  .sheet:not([hidden]) .sheet-link:nth-child(2){animation-delay:.04s}
  .sheet:not([hidden]) .sheet-link:nth-child(3){animation-delay:.08s}
  .sheet:not([hidden]) .sheet-link:nth-child(4){animation-delay:.12s}
  .sheet:not([hidden]) .sheet-link:nth-child(5){animation-delay:.16s}
  .sheet:not([hidden]) .sheet-foot{animation-delay:.2s}
}
@keyframes sheetIn{from{opacity:0}}
@keyframes sheetItem{from{opacity:0;transform:translateY(12px)}}
@media (min-width:900px){
  .header-in{min-height:86px}
  .brand img{height:clamp(32px,2.9vw,37px)}
  .nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
  .nav a{white-space:nowrap}
  .header-call{display:inline-flex;min-height:48px;font-size:16px}
  .header-call .chip{width:30px;height:30px}
  .menu-btn,.sheet{display:none !important}
}
/* 900-1079px: five nav links, the logo and the phone button share a narrow row */
@media (min-width:900px) and (max-width:1079px){.header-in{gap:16px}.nav{gap:14px}.nav a{font-size:15px}.header-call{padding-right:16px}}

/* ---------- photographs ---------- */
.photo{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--ink-800)}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.photo figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);
  padding:7px 11px;border-radius:6px;background:rgba(10,11,10,.82);
  font-size:13px;line-height:1.35;font-weight:500;color:var(--text-strong)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(20px,4vw,64px) clamp(48px,7vw,96px)}
.hero-media{order:-1}
.hero-media .photo{aspect-ratio:3/2}
.hero-media img{object-position:56% 50%;animation:settle 1500ms var(--ease) both}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none}}
.hero .lead{margin-top:20px}
.hero .actions{margin-top:clamp(24px,3vw,34px)}
@media (max-width:559px){main .actions .btn{flex:1 1 100%;justify-content:flex-start}}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:22px;font-size:15.5px;color:var(--text)}
.proof a{color:var(--text-strong);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.proof a:hover{text-decoration-color:var(--green)}
.fine{margin-top:14px;font-size:var(--fs-small);color:var(--text-muted)}
@media (min-width:900px){
  .hero .split{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .hero-media{order:0}
  .hero-media .photo{aspect-ratio:5/4}
}

/* ---------- fact strip ---------- */
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.fact{display:flex;align-items:flex-start;gap:12px;padding:20px 12px 20px 0;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){padding-right:16px}
.fact:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.fact .ic{color:var(--green);margin-top:2px}
.fact strong{display:block;color:var(--text-strong);font-weight:650;font-size:16px;line-height:1.3}
.fact span{display:block;font-size:14px;color:var(--text-muted);line-height:1.4;margin-top:2px}
@media (min-width:900px){
  .facts{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
  .fact{border-bottom:0;padding:24px 20px}
  .fact:nth-child(odd),.fact:nth-child(even){padding-left:20px;padding-right:20px}
  .fact+.fact{border-left:1px solid var(--line)}
  .fact:first-child{padding-left:0}
}

/* ---------- checklist ---------- */
.checks{display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--text);line-height:1.45}
.checks .ic{color:var(--green);margin-top:1px}
@media (min-width:640px){.checks.two{grid-template-columns:1fr 1fr;column-gap:28px}}

/* ---------- service rows (the index, not cards) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 20px;
  padding:22px 4px;border-bottom:1px solid var(--line);text-decoration:none;
  transition:background var(--fast) ease}
.row .h3{grid-column:1}
.row p{grid-column:1;color:var(--text-muted);font-size:15.5px;line-height:1.5}
.row .go{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--text-strong);
  transition:border-color var(--fast) ease,color var(--fast) ease,transform var(--fast) var(--ease)}
.row:hover{background:var(--ink-800)}
.row:hover .go{border-color:var(--green);color:var(--green);transform:translateX(3px)}
@media (min-width:900px){
  .row{grid-template-columns:minmax(220px,.85fr) 1.6fr auto;padding:26px 8px}
  .row .h3,.row p{grid-column:auto}
  .row .go{grid-column:auto;grid-row:auto}
}

/* ---------- vehicle pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills li{padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--ink-800);
  color:var(--text-strong);font-size:15.5px;font-weight:550;line-height:1.3}

/* ---------- steps (the sequence is the information) ---------- */
.steps{display:grid;gap:0;counter-reset:step}
.step{padding:26px 0;border-top:1px solid var(--line)}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);
  font-weight:650;font-size:16px;font-variant-numeric:tabular-nums;margin-bottom:16px}
.step p{margin-top:8px;color:var(--text-muted);max-width:40ch}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
}

/* ---------- job mosaic ---------- */
.mosaic{display:grid;gap:12px}
@media (min-width:700px){.mosaic{grid-template-columns:1fr 1fr;gap:14px}}
.mosaic .photo{aspect-ratio:4/3}

/* ---------- service areas ---------- */
.areas{border-top:1px solid var(--line)}
.area{display:grid;gap:3px;padding:17px 0;border-bottom:1px solid var(--line)}
.area strong{color:var(--text-strong);font-weight:650;font-size:16.5px}
.area span{color:var(--text-muted);font-size:15.5px;line-height:1.45}
@media (min-width:640px){.area{grid-template-columns:15.5rem 1fr;gap:4px 24px;align-items:baseline}}

/* ---------- the honest limit ---------- */
.dont{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--ink-800)}
.dont .ic{color:var(--text-muted);margin-top:2px}
.dont p{color:var(--text-strong);line-height:1.5}
.dont p span{color:var(--text-muted)}

/* ---------- the big number ---------- */
.phone-xl{display:inline-block;font-size:var(--fs-phone);font-weight:600;
  font-variation-settings:'wdth' var(--wdth-display);letter-spacing:-.03em;line-height:1;
  color:var(--green);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
  padding-block:.16em;transition:color var(--fast) ease} /* keeps the tap target 44px+ at phone size */
.phone-xl:hover{color:var(--green-press)}

.cta{padding-block:var(--section)}
.cta .h2{max-width:18ch}
.cta .phone-xl{margin-top:clamp(20px,3vw,30px)}
@media (min-width:900px){
  .cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:center}
  .cta-grid .h2{margin:0}
  .cta-reach{padding-left:clamp(28px,4vw,56px);border-left:1px solid var(--line)}
  .cta-reach .phone-xl{margin-top:0}
}

/* ---------- page heads (inner pages) ---------- */
.page-head{padding-block:clamp(40px,6vw,84px) clamp(32px,4.5vw,56px);border-bottom:1px solid var(--line)}
.page-head .lead{margin-top:18px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,32px)}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);color:var(--text-strong);font-size:15px;font-weight:550;text-decoration:none;
  transition:border-color var(--fast) ease,background var(--fast) ease}
.jump a:hover{border-color:var(--green);background:var(--ink-800)}

.svc{padding-block:var(--section);border-bottom:1px solid var(--line);scroll-margin-top:84px}
.svc:nth-of-type(even){background:var(--ink-800)}
.svc .photo{aspect-ratio:4/3}
.svc-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--text-muted)}

/* ---------- commitments (about) ---------- */
.commit{border-top:1px solid var(--line)}
.commit div{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--line)}
.commit dt{color:var(--text-strong);font-weight:650;font-size:18px}
.commit dd{color:var(--text-muted);max-width:56ch}
@media (min-width:900px){.commit div{grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:6px 32px;align-items:baseline}}

/* ---------- reviews ---------- */
.reviews{display:grid;gap:14px}
@media (min-width:760px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.review blockquote{margin:14px 0 0;color:var(--text-strong);line-height:1.55}
.review cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--text-muted)}
.jobs{display:grid;gap:clamp(18px,2.4vw,28px)}
@media (min-width:640px){.jobs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.jobs{grid-template-columns:repeat(6,1fr)}.job{grid-column:span 2}.job:nth-child(-n+2){grid-column:span 3}}
.job .photo{aspect-ratio:4/3}
.job figcaption{margin-top:12px}
.job figcaption strong{display:block;color:var(--text-strong);font-weight:650}
.job figcaption span{display:block;margin-top:2px;font-size:15px;color:var(--text-muted)}

/* ---------- contact ---------- */
.reach{display:grid;gap:0;border-top:1px solid var(--line)}
.reach a,.reach div{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--text-strong)}
.reach .ic{color:var(--green)}
.reach small{display:block;font-size:14px;color:var(--text-muted)}
.reach b{font-weight:650;font-size:17px}

.form{display:grid;gap:18px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.field{display:grid;gap:8px}
.field label{font-size:15px;font-weight:600;color:var(--text-strong)}
.field label span{font-weight:450;color:var(--text-muted)}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--ink-900);color:var(--text-strong);font:inherit;font-size:17px;line-height:1.4;
  transition:border-color var(--fast) ease}
.field textarea{min-height:128px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted);opacity:1}
.field input:focus,.field textarea:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:1px}
.two-up{display:grid;gap:18px}
@media (min-width:640px){.two-up{grid-template-columns:1fr 1fr}}
.form .btn{width:100%}
.form-note{padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--ink-900);color:var(--text-strong);font-size:15.5px}
.form-note[hidden]{display:none}

.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:18px;font-weight:650;color:var(--text-strong);line-height:1.35}
.faq-item summary .pm{position:relative;flex:none;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%}
.faq-item summary .pm::before,.faq-item summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--text-strong);transform:translate(-50%,-50%);transition:transform var(--fast) var(--ease)}
.faq-item summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-item summary:hover .pm{border-color:var(--green)}
.faq-panel{padding:0 0 22px;max-width:62ch;color:var(--text)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-950);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px) 28px}
.foot-grid{display:grid;gap:36px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1080px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-area{display:grid;gap:20px;margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
@media (min-width:900px){.foot-area{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}}
.foot-area .foot-col p{max-width:40ch}
.foot-area .foot-col a .ic{width:16px;height:16px;color:var(--green)}
.foot-map{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.foot-map iframe{display:block;width:100%;height:clamp(240px,28vw,320px);border:0}
.foot-brand img{height:40px;width:auto}
.foot-brand p{margin-top:16px;max-width:34ch;color:var(--text-muted);font-size:15px}
.foot-col h2{font-size:12px;font-weight:650;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.foot-col a{display:flex;align-items:center;gap:.32em;min-height:44px;color:var(--text);text-decoration:none;font-size:15.5px}
.foot-col a:hover{color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:4px}
.foot-col p{color:var(--text);font-size:15.5px;line-height:1.7}
.foot-col .foot-plain{display:flex;align-items:center;min-height:44px}
.facts-after{margin-top:clamp(56px,7vw,96px)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--line);font-size:14px;color:var(--text-muted)}


/* ---------- home: hero ---------- */
.slogan{margin-bottom:16px;font-size:15px;font-weight:600;color:var(--text-muted);letter-spacing:.01em}
.slogan b{color:var(--green);font-weight:750}
.hero-h1{font-size:clamp(34px,3.7vw,48px)}
@media (min-width:900px){.hero-home .split{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr)}}
.h1-tail{display:block;color:var(--text-muted)}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--text)}
.trust li{display:flex;align-items:center;gap:8px;min-height:36px}
.trust .trust-rating{grid-column:1/-1;gap:10px}
.trust .ic{width:18px;height:18px;flex:none;color:var(--green)}
.trust a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-strong);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.trust a:hover{text-decoration-color:var(--green)}
@media (min-width:560px){.trust{display:flex;flex-wrap:wrap;column-gap:22px}.trust .trust-rating{flex-basis:100%}}

/* ---------- home: how it works ---------- */
.how{display:grid;margin-top:clamp(28px,4vw,48px)}
.how li{position:relative;padding:0 0 30px 70px;min-height:52px}
.how li:last-child{padding-bottom:0}
.how-ic{position:absolute;left:0;top:0;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--forest-line);background:var(--forest);color:var(--green)}
.how-ic .ic{width:22px;height:22px}
.how li:not(:last-child)::before{content:"";position:absolute;left:25px;top:58px;bottom:8px;width:1px;background:var(--line-strong)}
.how .h3{padding-top:12px}
.how p{margin-top:8px;color:var(--text-muted);max-width:36ch}
@media (min-width:860px){
  .how{grid-template-columns:repeat(3,1fr);gap:28px}
  .how li{padding:0}
  .how-ic{position:static}
  .how li:not(:last-child)::before{left:66px;right:-12px;top:25px;bottom:auto;width:auto;height:1px}
  .how .h3{padding-top:22px}
}

/* ---------- home: reviews ---------- */
.reviews-3{gap:16px}
@media (min-width:760px){.reviews-3{grid-template-columns:1fr}}
@media (min-width:900px){.reviews-3{grid-template-columns:repeat(3,1fr)}}
.review{display:flex;flex-direction:column}
.review blockquote{margin:0;font-size:17px}
.review figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:20px;font-size:14px;color:var(--text-muted)}
.review figcaption b{color:var(--text-strong);font-weight:650;font-size:15px}
/* option D: a green edge, the moment that matters marked like a highlighter, an initial by the name */
.review{--mark:rgba(120,190,32,.38);border-left:3px solid var(--green);border-radius:12px}
.review mark{padding:0 .08em;border-radius:2px;background:none;color:inherit;box-shadow:inset 0 -.55em 0 var(--mark);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors:active){.review mark{background:Mark;color:MarkText}}
.review figcaption{flex-direction:row;align-items:center;gap:12px}
.rv-by{display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font-size:16px;font-weight:750;line-height:1;
  background:rgba(120,190,32,.14);color:#78BE20;border:1px solid rgba(120,190,32,.34)}
.review-links{display:flex;flex-wrap:wrap;gap:0 28px}

/* ---------- home: services ---------- */
.svc-grid{display:grid;gap:14px;margin-top:clamp(28px,4vw,48px)}
@media (min-width:700px){.svc-grid{grid-template-columns:1fr 1fr}.svc-card--lead{grid-column:1/-1}
  /* an odd card out takes the whole last row, so the grid never ends on a gap */
  .svc-card:last-child:nth-child(even){grid-column:1/-1}}
@media (min-width:1000px){.svc-grid{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr}.svc-card--lead{grid-column:1;grid-row:1 / span 2}}
.svc-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-900);overflow:hidden;transition:border-color var(--fast) var(--ease)}
.svc-card:hover{border-color:var(--line-strong)}
.svc-card:has(a:focus-visible){outline:2px solid var(--green);outline-offset:3px}
.svc-card .photo{border:0;border-radius:0;aspect-ratio:16/10}
.svc-card-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:24px}
.svc-card .h3 a{color:var(--text-strong);text-decoration:none}
.svc-card .h3 a:focus-visible{outline:none}
.svc-card .h3 a::after{content:"";position:absolute;inset:0}
.svc-card .symptom{color:var(--text);line-height:1.5}
.svc-card p:not(.symptom){color:var(--text-muted);font-size:15.5px;line-height:1.55}
.svc-card--lead .symptom{font-size:var(--fs-lead);color:var(--text-strong)}
.svc-card .go{display:grid;place-items:center;align-self:flex-start;width:44px;height:44px;margin-top:auto;border:1px solid var(--line-strong);border-radius:50%;
  color:var(--text-strong);transition:transform var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.svc-card-body > p:last-of-type{margin-bottom:12px}
.svc-card:hover .go{border-color:var(--green);color:var(--green);transform:translateX(3px)}
/* the full-width last card reads across: text on the left, arrow on the right */
@media (min-width:1000px){
  .svc-card:last-child:nth-child(even) .svc-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
  .svc-card:last-child:nth-child(even) .svc-card-body > *{grid-column:1}
  .svc-card:last-child:nth-child(even) .go{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0}
  .svc-card:last-child:nth-child(even) .svc-card-body > p:last-of-type{margin-bottom:0}
}
.svc-foot{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:var(--text-muted)}
.svc-foot .ic{width:18px;height:18px}

/* ---------- home: vehicles ---------- */
.veh{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.veh li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 10px;text-align:center;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text-strong);font-weight:600;font-size:15.5px;line-height:1.3}
.veh .ic{width:40px;height:40px;stroke-width:1.5;color:var(--green)}
@media (min-width:640px){.veh{grid-template-columns:repeat(5,1fr)}.veh li{padding:30px 12px}}

/* ---------- home: why mobile ---------- */
.compare{width:100%;margin-top:clamp(28px,4vw,48px);border-collapse:collapse;font-size:16.5px;line-height:1.45}
.compare th,.compare td{padding:20px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{padding-top:0;font-size:14px;font-weight:650;letter-spacing:.02em;color:var(--text-muted)}
.compare thead th:last-child{color:var(--green)}
.compare tbody th{width:22%;padding-left:0;color:var(--text-strong);font-weight:650}
.compare td{color:var(--text-muted)}
.compare td:last-child{color:var(--text-strong);background:var(--forest)}
@media (max-width:639px){
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px 0;border-bottom:1px solid var(--line)}
  .compare tbody th{grid-column:1/-1;width:auto;padding:0;border:0}
  .compare td{padding:12px 14px;border:0;border-radius:var(--r-sm);font-size:15.5px}
  .compare td:first-of-type{background:var(--ink-900)}
  .compare td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:12.5px;font-weight:650;letter-spacing:.02em;color:var(--text-muted)}
  .compare td:last-child::before{color:var(--green)}
}

/* ---------- home: meet Kyle ---------- */
.kyle-ph{display:grid;place-items:center;aspect-ratio:4/3;margin:0;border:1px solid var(--forest-line);border-radius:var(--r-md);background:var(--ink-950)}
.kyle-ph img{width:min(46%,220px);height:auto}
.kyle-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:24px;color:var(--text-strong);font-weight:600}
.kyle-facts .ic{color:var(--green)}
.kyle-facts .dot{color:var(--text-muted)}

/* ---------- home: fleet + area ---------- */
.fleet-photo{aspect-ratio:4/3}
.town-list{border-top:1px solid var(--line)}
.town-list li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--text-strong);font-weight:600}
.town-list .ic{width:18px;height:18px;flex:none;color:var(--green)}
.map-frame{margin:0;padding:clamp(10px,2vw,22px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-900)}
.area-map{display:block;width:100%;height:auto;font-family:var(--font)}
.area-map .m-area{fill:var(--forest);stroke:var(--green);stroke-width:1.5;stroke-dasharray:6 6}
.area-map .m-ring{fill:none;stroke:var(--forest-line);stroke-width:1.2}
.area-map .m-road{fill:none;stroke:var(--line-strong);stroke-width:2.5;stroke-dasharray:1 6;stroke-linecap:round}
.area-map .m-road-label{fill:var(--text-muted);font-size:13px;font-weight:650}
.area-map .m-peak{fill:var(--text-muted)}
.area-map .m-town{fill:var(--text-strong)}
.area-map .m-home{fill:var(--green)}
.area-map .m-home-halo{fill:none;stroke:var(--green);stroke-width:1.5}
.area-map .m-label{fill:var(--text);font-size:15px;font-weight:550}
.area-map .m-strong{fill:var(--text-strong);font-size:16.5px;font-weight:700}
.area-map .m-dim{fill:var(--text-muted);font-size:13px}
.area-map .m-scale{fill:var(--text-muted);font-size:12.5px;font-weight:600;letter-spacing:.04em}
.area-map .m-north path{fill:var(--text-muted)}
.area-map .m-north text{fill:var(--text-muted);font-size:12px;font-weight:700}

/* ---------- home: final call ---------- */
.open-note{display:flex;align-items:center;gap:8px}
.open-note .ic{width:16px;height:16px;color:var(--green)}

/* ---------- services: intro ---------- */
.svc-intro .h1{max-width:20ch}
.svc-intro .jump{margin-top:clamp(24px,3vw,32px)}
.svc-intro .trust{max-width:640px}
/* services intro: Kyle's night job behind the copy. Dark on the text side, the photo shows on the right */
.svc-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-900)}
.svc-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
@media (max-width:899px){.svc-hero-bg{height:min(115vw,470px)}}
@media (min-width:900px){.svc-hero-bg{object-position:60% 55%}}
.svc-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,10,.3) 0,rgba(10,11,10,.68) 150px,rgba(10,11,10,.88) 300px,var(--ink-900) min(115vw,470px))}
@media (min-width:900px){
  .svc-hero::before{background:linear-gradient(90deg,rgba(10,11,10,.97) 0%,rgba(10,11,10,.9) 40%,rgba(10,11,10,.4) 64%,rgba(10,11,10,.06) 100%),
    linear-gradient(0deg,rgba(10,11,10,.6),transparent 30%)}
}
/* the section links run into the photo, so each gets a dark backing */
.svc-hero .jump a{background:rgba(15,17,15,.78)}
.svc-hero .jump a:hover{background:var(--ink-800)}

/* ---------- services: one section per service ---------- */
.svc2{padding-block:var(--section);border-bottom:1px solid var(--line)}
.svc2.alt{background:var(--ink-800)}
.svc2 .h2{scroll-margin-top:100px}
.svc2-grid{display:grid;gap:clamp(32px,4.5vw,48px)}
@media (min-width:900px){
  .svc2-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(48px,6vw,88px);align-items:start}
  .svc2-grid.flip .svc2-aside{order:-1}
}
.svc2-aside .photo{aspect-ratio:4/3}
.svc2-groups{display:grid;gap:30px}
.svc2-more{margin-top:clamp(36px,5vw,60px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
@media (min-width:640px){.svc2-groups.cols,.svc2-groups.cols3{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1000px){.svc2-groups.cols3{grid-template-columns:repeat(3,1fr)}}
.checks.three{display:grid;gap:12px 32px}
@media (min-width:640px){.checks.three{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.checks.three{grid-template-columns:repeat(3,1fr)}}
.svc2-groups .h3{font-size:clamp(19px,1.7vw,21px)}
.svc2-groups .checks{margin-top:14px}
.group-text{margin-top:10px;color:var(--text);line-height:1.6;max-width:52ch}
.veh-groups .h3{display:flex;align-items:center;gap:12px}
.veh-groups .h3 .ic{width:28px;height:28px;flex:none;stroke-width:1.6;color:var(--green)}
.promise{display:flex;align-items:flex-start;gap:12px;margin-top:32px;padding:18px 20px;border:1px solid var(--forest-line);
  border-radius:var(--r-md);background:var(--forest);color:var(--text-strong);font-weight:600;line-height:1.45}
.promise .ic{flex:none;margin-top:1px;color:var(--green)}
.who{padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-900)}
.svc2-proof{display:grid;gap:14px;margin-top:clamp(36px,5vw,56px)}
@media (min-width:760px){.svc2-proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.svc2-proof.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc2.alt .review{background:var(--ink-900)}
.svc2-proof > .review:only-child{grid-column:1/-1;padding:clamp(24px,3vw,36px)}
.svc2-proof > .review:only-child blockquote{max-width:58ch;font-size:clamp(18px,1.7vw,21px);line-height:1.5}
.svc2-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(28px,3.5vw,40px);
  padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.svc2-cta .more{margin-left:10px}
@media (max-width:559px){.svc2-cta .btn{flex:1 1 100%;justify-content:flex-start}.svc2-cta .more{margin-left:0}}

/* ---------- services: pricing ---------- */
.price-list b{color:var(--text-strong);font-weight:700}

/* ---------- shared: final-call links, inline slogan ---------- */
.cta-links{display:flex;flex-wrap:wrap;gap:0 28px}
.slogan-inline{color:var(--text-strong)}

/* ---------- contact ---------- */
.contact-head .h1{font-size:clamp(34px,3.7vw,48px)}
.contact-head .trust{max-width:520px}
.contact-head .trust li{flex-basis:100%}
.contact-head .trust{grid-template-columns:1fr}
.reach-panel{display:grid;gap:12px}
.reach-big{display:flex;align-items:center;gap:16px;min-height:84px;padding:14px 22px 14px 14px;border-radius:var(--r-md);
  border:1px solid var(--line-strong);text-decoration:none;color:var(--text-strong);transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.reach-big .chip{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%}
.reach-big .chip .ic{width:22px;height:22px}
.reach-big small{display:block;font-size:14.5px;font-weight:550}
.reach-big b{display:block;font-size:clamp(24px,2.6vw,30px);font-weight:650;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.reach-call{background:var(--green);border-color:var(--green);color:var(--ink-900)}
.reach-call .chip{background:var(--ink-900);color:var(--green)}
.reach-call small{color:var(--ink-900)}
.reach-call:hover{background:var(--green-press);border-color:var(--green-press)}
.reach-text .chip{background:var(--ink-700);color:var(--text-strong)}
.reach-text small{color:var(--text-muted)}
.reach-text:hover{background:var(--ink-800);border-color:var(--text-muted)}
.reach-mail{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding-left:4px;color:var(--text);text-decoration:none;font-weight:550}
.reach-mail .ic{color:var(--green)}
.reach-mail:hover span{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:4px}
.form-split{align-items:start}
.tip{display:flex;align-items:flex-start;gap:12px;max-width:46ch;padding:18px 20px;border:1px solid var(--forest-line);border-radius:var(--r-md);
  background:var(--forest);color:var(--text-strong);line-height:1.5}
.tip .ic{flex:none;margin-top:2px;color:var(--green)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field select:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:1px}
.area-split{margin-top:clamp(28px,4vw,48px);align-items:start}
.area-list{border-top:1px solid var(--line)}
.area-list > div{padding:18px 0;border-bottom:1px solid var(--line)}
.area-list .h3{font-size:clamp(18px,1.6vw,20px)}
.area-list p{margin-top:6px;color:var(--text-muted)}
#area{scroll-margin-top:84px}

/* ---------- reviews ---------- */
.rv-head .split{align-items:center}
.rating-panel{padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.rating-big{display:flex;align-items:center;gap:18px}
.rating-big b{font-size:clamp(64px,8vw,96px);font-weight:650;line-height:1;letter-spacing:-.04em;color:var(--text-strong);
  font-variation-settings:'wdth' var(--wdth-display)}
.rating-big .stars svg{width:24px;height:24px}
.rating-sub{margin-top:8px;font-size:var(--fs-lead);color:var(--text)}
.rating-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:559px){.rating-actions .btn{flex:1 1 100%}}
.rv-group{padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--line)}
.rv-group.alt{background:var(--ink-800)}
.rv-group.alt .review{background:var(--ink-900)}
.rv-wall{margin-top:clamp(28px,4vw,44px);columns:1}
@media (min-width:700px){.rv-wall{columns:2;column-gap:16px}}
@media (min-width:1040px){.rv-wall{columns:3}}
.rv-wall .review{break-inside:avoid;margin-bottom:16px}
.rv-wall .review figcaption{margin-top:0}
a.job{display:block;color:inherit;text-decoration:none}
a.job .photo{transition:border-color var(--fast) var(--ease)}
a.job:hover .photo{border-color:var(--line-strong)}
.job-cap{display:block;margin-top:12px}
.job-cap strong{display:block;color:var(--text-strong);font-weight:650}
.job-cap > span{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:15px;color:var(--text-muted)}
.job-cap .ic{width:16px;height:16px;color:var(--green);transition:transform var(--fast) var(--ease)}
a.job:hover .job-cap .ic{transform:translateX(3px)}
a.job:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--r-md)}
.leave-actions{display:flex;justify-content:flex-start}
@media (min-width:900px){.leave-actions{justify-content:flex-end}}

/* ---------- about ---------- */
.about-hero .split{align-items:center}
.about-hero .h1{font-size:clamp(34px,3.9vw,50px)}
.about-hero .lead{margin-top:20px}
.about-hero .actions{margin-top:clamp(24px,3vw,34px)}
.promises{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.promise-row{display:grid;gap:10px 40px;padding:26px 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.promise-row{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);align-items:start}}
.promise-head{display:flex;align-items:center;gap:12px}
.promise-head .ic{flex:none;width:22px;height:22px;color:var(--green)}
.promise-row > p{color:var(--text);line-height:1.6}
.said{margin:0}
.said p{color:var(--text-strong);font-style:italic;line-height:1.55}
.said cite{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--text-muted)}
@media (max-width:639px){.facts.facts-3{grid-template-columns:1fr}.facts-3 .fact:nth-child(even),.facts-3 .fact:nth-child(odd){padding-left:0;padding-right:0;border-left:0}}
@media (min-width:640px){.facts.facts-3{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .facts-3 .fact{border-bottom:0;padding:24px 20px}
  .facts-3 .fact:nth-child(odd),.facts-3 .fact:nth-child(even){padding-left:20px;padding-right:20px;border-left:0}
  .facts-3 .fact+.fact{border-left:1px solid var(--line)}
  .facts-3 .fact:first-child{padding-left:0}}

/* ================= home v3: textures, motion, richer sections ================= */

/* Backgrounds, three kinds, alternated so neighbouring sections never match:
   brushed metal and garage concrete are CSS masks (colour comes from the palette,
   faded toward the middle so text sits on the quiet part); depth is a plain gradient. */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.tex-brushed::before{background:rgba(214,216,209,.11);
  -webkit-mask:url(/assets/tex/brushed.svg) 0 0/400px repeat,radial-gradient(ellipse 85% 95% at 50% 50%,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 55%,#000 100%);-webkit-mask-composite:source-in;
  mask:url(/assets/tex/brushed.svg) 0 0/400px repeat,radial-gradient(ellipse 85% 95% at 50% 50%,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 55%,#000 100%);mask-composite:intersect}
.tex-concrete::before{background:rgba(214,216,209,.24);
  -webkit-mask:url(/assets/tex/concrete.svg) 0 0/300px repeat,radial-gradient(ellipse 85% 95% at 50% 50%,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 55%,#000 100%);-webkit-mask-composite:source-in;
  mask:url(/assets/tex/concrete.svg) 0 0/300px repeat,radial-gradient(ellipse 85% 95% at 50% 50%,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 55%,#000 100%);mask-composite:intersect}
.tex-topo::before{background:#222622;
  -webkit-mask:url(/assets/tex/topo.svg) 0 0/640px repeat,linear-gradient(100deg,#000 20%,transparent 68%);-webkit-mask-composite:source-in;
  mask:url(/assets/tex/topo.svg) 0 0/640px repeat,linear-gradient(100deg,#000 20%,transparent 68%);mask-composite:intersect}
.tex-depth{background:linear-gradient(160deg,#1f231f 0%,var(--ink-900) 45%,#0c0e0c 100%)}
.tex-depth--band{background:linear-gradient(160deg,#232823 0%,var(--ink-800) 50%,#131613 100%)}
.tex-depth--forest{background:linear-gradient(160deg,#25391f 0%,var(--forest) 50%,#142010 100%)}

/* live status dot: "open now" is always true for a 24/7 business */
.live-dot{position:relative;flex:none;width:10px;height:10px;margin-inline:4px;border-radius:50%;background:var(--green)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);opacity:0}
@media (prefers-reduced-motion:no-preference){.live-dot::after{animation:live 2.4s var(--ease) infinite}}
@keyframes live{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.7);opacity:0}}

/* ---------- running list of services and towns ---------- */
.ticker{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--ink-950);border-block:1px solid var(--line)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:64px;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-950),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-950),transparent)}
.ticker-track{display:flex;flex:none;width:max-content}
.ticker-list{display:flex;flex:none;align-items:center;padding:17px 0}
.ticker-list li{display:flex;align-items:center;white-space:nowrap;font-size:15px;font-weight:600;color:var(--text)}
.ticker-list li::after{content:"";width:6px;height:6px;margin-inline:22px;border-radius:50%;background:var(--green)}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:slide 70s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto}.ticker-list[aria-hidden]{display:none}.ticker::after{display:none}
}

/* ---------- intro: the big searches ---------- */
.intro-h{max-width:19ch;font-size:clamp(32px,4.6vw,58px)}
.intro-cols{display:grid;gap:22px;margin-top:clamp(28px,4vw,44px)}
@media (min-width:900px){.intro-cols{grid-template-columns:1fr 1fr;gap:56px}}
.intro-cols p{max-width:60ch}
.intro-cols p:not(.lead){font-size:17px;line-height:1.7;color:var(--text)}
.nos{display:grid;margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.nos li{padding:20px 0;border-bottom:1px solid var(--line);color:var(--text-strong);font-size:clamp(26px,3.2vw,40px);font-weight:600;
  font-variation-settings:'wdth' var(--wdth-heading);letter-spacing:var(--ls-heading);line-height:1.1}
.nos b{color:var(--green);font-weight:650}
@media (min-width:900px){.nos{grid-template-columns:repeat(3,1fr)}.nos li{padding:30px 24px}.nos li+li{border-left:1px solid var(--line)}.nos li:first-child{padding-left:0}}

/* ---------- how it works: the truck drives the route once ---------- */
.how{position:relative}
.how-truck{display:none}
@media (min-width:860px){
  .how li{position:static}
  .how li:not(:last-child)::before{display:none}
  .how::before,.how::after{content:"";position:absolute;top:24px;left:25px;right:calc((100% - 56px) / 3 - 25px);height:2px;border-radius:2px}
  .how::before{background:var(--line-strong);opacity:.55}
  .how::after{background:var(--green);transform-origin:left center}
  .how-ic{position:relative;z-index:1}
  .how-truck{position:absolute;z-index:2;top:-8px;left:calc(100% - (100% - 56px) / 3 - 46px);display:block;color:var(--green)}
  .how-truck .ic{width:34px;height:34px;stroke-width:1.6}
}
@media (prefers-reduced-motion:no-preference){
  .js .how[data-anim]::after{transform:scaleX(0);transition:transform 2.6s cubic-bezier(.45,0,.25,1) .25s}
  .js .how[data-anim].in::after{transform:scaleX(1)}
  .js .how[data-anim] .how-truck{left:62px;opacity:0;transition:left 2.6s cubic-bezier(.45,0,.25,1) .25s,opacity .4s ease .25s}
  .js .how[data-anim].in .how-truck{left:calc(100% - (100% - 56px) / 3 - 46px);opacity:1}
  .js .how[data-anim] .how-ic{opacity:0;transform:scale(.55);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
  .js .how[data-anim].in .how-ic{opacity:1;transform:none}
  .js .how[data-anim].in li:nth-child(2) .how-ic{transition-delay:1.35s}
  .js .how[data-anim].in li:nth-child(3) .how-ic{transition-delay:2.7s}
}
/* phones: the same drive, down the page. The line runs from the first icon to the last (js
   measures that into --route); the truck rides it nose first. Without js, or with motion off,
   the plain step lines stay. */
@media (max-width:859px) and (prefers-reduced-motion:no-preference){
  .js .how[data-anim] li:not(:last-child)::before{display:none}
  .js .how[data-anim]::before,.js .how[data-anim]::after{content:"";position:absolute;top:25px;left:24px;width:2px;height:var(--route,0px);border-radius:2px}
  .js .how[data-anim]::before{background:var(--line-strong);opacity:.55}
  .js .how[data-anim]::after{background:var(--green);transform-origin:center top;transform:scaleY(0)}
  .js .how[data-anim].in::after{transform:scaleY(1)}
  .js .how[data-anim] .how-ic{z-index:1}
  .js .how[data-anim] .how-truck{position:absolute;z-index:2;left:8px;top:56px;display:block;color:var(--green);
    transition:top 2.6s cubic-bezier(.45,0,.25,1) .25s,opacity .4s ease .25s}
  .js .how[data-anim].in .how-truck{left:8px;top:calc(var(--route,0px) - 40px)}
  .js .how[data-anim] .how-truck .ic{display:block;width:34px;height:34px;stroke-width:1.6;transform:rotate(90deg)}
}

/* ---------- reviews: two rows drifting in opposite directions ---------- */
.reviews-sec{overflow:hidden;background:var(--ink-950);border-block:1px solid var(--line)}
.rev-top{display:grid;gap:20px}
@media (min-width:900px){.rev-top{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}}
.rev-stars .stars svg{width:22px;height:22px}
.rev-top .review-links{flex-direction:column;align-items:flex-start}
.rev-scroller{margin-top:clamp(32px,4vw,52px)}
.rev-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  --edge:max(var(--gutter),calc((100vw - var(--page-max)) / 2 + var(--gutter)));padding-inline:var(--edge);scroll-padding-inline:var(--edge)}
.rev-viewport::-webkit-scrollbar{display:none}
.rev-viewport:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.rev-strip{display:flex;gap:16px;width:max-content;padding-block:4px}
.rev-strip .review{flex:none;width:min(370px,82vw);scroll-snap-align:start;background:var(--ink-800)}
.rev-nav{display:flex;align-items:center;gap:10px;margin-top:18px}
/* home: the strip drifts, and its edges fade so cards slide in and out instead of being cut off */
.rev-scroller[data-auto] .rev-viewport{--fade:max(24px,calc(var(--edge) * .9));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.rev-scroller.is-auto .rev-viewport{scroll-snap-type:none}
.scroll-btn{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line-strong);border-radius:50%;background:transparent;
  color:var(--text-strong);cursor:pointer;transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease),opacity var(--fast)}
.scroll-btn:hover{border-color:var(--green);color:var(--green)}
.scroll-btn[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--line-strong);color:var(--text-strong)}
.scroll-prev .ic{transform:rotate(180deg)}

/* ---------- services: lead line under the heading ---------- */
.svc-card{transition:border-color var(--fast) var(--ease),transform .35s var(--ease)}
.svc-card:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.svc-card:hover{transform:none}}

/* ---------- symptom guide (blueprint) ---------- */
.symp-head{max-width:780px}
.symp-ui{display:grid;gap:18px;margin-top:clamp(28px,4vw,44px)}
.symp-panels{display:grid;gap:14px}
@media (min-width:760px){.symp-ui:not(.is-tabs) .symp-panels{grid-template-columns:1fr 1fr}}
.symp-list{display:flex;flex-wrap:wrap;gap:8px}
.symp-list[hidden]{display:none}
.symp-list [role="tab"]{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--ink-900);color:var(--text);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.symp-list [role="tab"]:hover{border-color:var(--text-muted);color:var(--text-strong)}
.symp-list [role="tab"][aria-selected="true"]{background:var(--forest);border-color:var(--green);color:var(--text-strong)}
.symp-panel{padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-900)}
.symp-panel .h3{font-size:clamp(21px,2.1vw,26px)}
.symp-panel dl{margin-top:16px}
.symp-panel dt{color:var(--text-strong);font-size:15px;font-weight:650}
.symp-panel dd{margin:4px 0 16px;color:var(--text);line-height:1.65;max-width:62ch}
.symp-panel.enter{animation:panelIn .4s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}}
@media (min-width:900px){
  .symp-ui.is-tabs{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:36px;align-items:stretch}
  .symp-ui.is-tabs .symp-list{flex-direction:column;flex-wrap:nowrap;gap:0;border-top:1px solid var(--line)}
  .symp-ui.is-tabs .symp-list [role="tab"]{justify-content:space-between;width:100%;min-height:52px;padding:0 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
  .symp-ui.is-tabs .symp-list [role="tab"]::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.35;transition:opacity var(--fast),transform var(--fast) var(--ease)}
  .symp-ui.is-tabs .symp-list [role="tab"][aria-selected="true"]{background:var(--forest);color:var(--text-strong)}
  .symp-ui.is-tabs .symp-list [role="tab"][aria-selected="true"]::after{opacity:1;color:var(--green);transform:translateX(3px) rotate(45deg)}
  .symp-ui.is-tabs .symp-panel{height:100%}
}
.symp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}

/* ---------- why mobile ---------- */
.why-head{max-width:760px}
.compare td .ic{width:16px;height:16px;flex:none;margin-right:10px;vertical-align:-3px}
.compare td .ic{color:var(--text-muted)}
.compare td:last-child .ic{color:var(--green)}

/* ---------- vehicles: wide photo strip, icons nudge on hover ---------- */
.veh-head{display:grid;gap:16px}
@media (min-width:900px){.veh-head{grid-template-columns:1fr 1fr;align-items:end;gap:56px}}
.veh-photo{margin-top:clamp(28px,4vw,44px);aspect-ratio:21/9}
.veh-photo img{object-position:50% 62%}
@media (max-width:639px){.veh-photo{aspect-ratio:4/3}}
.vehicles .veh{margin-top:16px}
.veh li{transition:background var(--fast) var(--ease)}
.veh li .ic{transition:transform .4s var(--ease)}
.veh li:hover{background:var(--ink-900)}
.veh li:hover .ic{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){.veh li:hover .ic{transform:none}}

/* ---------- service area: neighborhoods, map draws in ---------- */
.area-note{margin-top:20px;max-width:52ch;color:var(--text-muted);line-height:1.6}
.area-map .m-pulse{fill:none;stroke:var(--green);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .area-map .m-pulse{animation:mapPulse 3s var(--ease) infinite}
  .js .map-frame[data-anim] .m-area,.js .map-frame[data-anim] .m-ring{transform-box:view-box;transform-origin:250px 250px;transform:scale(.12);opacity:0;
    transition:transform 1.5s cubic-bezier(.16,1,.3,1),opacity .6s ease}
  .js .map-frame[data-anim].in .m-area,.js .map-frame[data-anim].in .m-ring{transform:none;opacity:1}
  .js .map-frame[data-anim] .m-towns circle{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}
  .js .map-frame[data-anim].in .m-towns circle{opacity:1;transform:none}
  .js .map-frame.in .m-towns circle:nth-child(1){transition-delay:.7s}
  .js .map-frame.in .m-towns circle:nth-child(2){transition-delay:.8s}
  .js .map-frame.in .m-towns circle:nth-child(3){transition-delay:.9s}
  .js .map-frame.in .m-towns circle:nth-child(4){transition-delay:1s}
  .js .map-frame.in .m-towns circle:nth-child(5){transition-delay:1.1s}
  .js .map-frame.in .m-towns circle:nth-child(6){transition-delay:1.2s}
  .js .map-frame.in .m-towns circle:nth-child(7){transition-delay:1.3s}
  .js .map-frame.in .m-towns circle:nth-child(8){transition-delay:1.4s}
}
@keyframes mapPulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.3)}}

/* ---------- final call over the night photo ---------- */
.cta-photo{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-950);border-top:1px solid var(--line)}
.cta-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.cta-photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,10,.96) 0%,rgba(10,11,10,.88) 48%,rgba(10,11,10,.7) 100%)}
@media (max-width:899px){.cta-photo::before{background:rgba(10,11,10,.88)}}
.cta-photo .cta-reach{border-left-color:rgba(214,216,209,.2)}
.cta-photo .lead{color:var(--text)}

/* ================= bone sections + red rock accent ================= */
/* Red rock (Garden of the Gods sandstone) marks the "no" and "watch out" details:
   job tags, the shop column's crosses, "not offered", Pikes Peak on the map.
   Green keeps meaning "call". --rr deepens automatically inside bone sections. */
:root{--rr:#E0714A}

/* Bone: a few warm off-white sections break up the dark page. Components read
   the same custom properties, so remapping them here restyles everything inside.
   Measured on #E6DCC6: ink 13.9, text 10.2, muted 5.3, deep green 4.8, deep red rock 4.9,
   interactive boundary 3.5. */
.bone{
  --text-strong:#0F110F;--text:#2A2D29;--text-muted:#55594F;
  --line:rgba(15,17,15,.14);--line-strong:#6E746C;
  --ink-950:#E6DCC6;--ink-900:#EDE5D4;--ink-800:#F4EEE2;--ink-700:#DDD2BB;
  --green:#356A0E;--rr:#9C3F27;
  background:#E6DCC6;color:var(--text);border-block:0}
.bone ::selection{background:#0F110F;color:#E6DCC6}
.bone .review{--mark:rgba(120,190,32,.45);box-shadow:0 1px 2px rgba(15,17,15,.06),0 10px 28px -14px rgba(15,17,15,.28)}
.bone .rv-av{background:var(--forest);color:#E6DCC6;border-color:transparent}
.bone .btn-call{background:#0F110F;color:#E6DCC6}
.bone .btn-call .chip{background:#78BE20;color:#0F110F}
.bone .btn-call:hover{background:#242824}

/* red rock details */
.nos b{color:var(--rr)}
.compare td .ic{color:var(--rr)}
.compare td:last-child .ic{color:var(--green)}
.svc-foot .ic,.dont .ic{color:var(--rr)}
.area-map .m-peak{fill:var(--rr)}
.price-list .nope dt{color:var(--rr)}
.price-list .nope dd::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:2px;background:var(--rr);transform:rotate(45deg)}

/* ---------- bone sections: green woven in ---------- */
/* Faint green contour lines (the hero's texture) drift in from the top-right corner. */
.bone{position:relative;isolation:isolate}
.bone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(53,106,14,.17);
  -webkit-mask:url(/assets/tex/topo.svg) 0 0/640px repeat,radial-gradient(ellipse 70% 85% at 100% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);-webkit-mask-composite:source-in;
  mask:url(/assets/tex/topo.svg) 0 0/640px repeat,radial-gradient(ellipse 70% 85% at 100% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);mask-composite:intersect}

/* Small green details: filled forest controls and icon chips. Cards stay cream. */
.bone .faq-item summary .pm{background:var(--forest);border-color:var(--forest)}
.bone .faq-item summary .pm::before,.bone .faq-item summary .pm::after{background:#E6DCC6}
.bone .faq-item summary:hover .pm{background:#2A3E22;border-color:#2A3E22}
.bone .faq-item[open] summary .pm{background:#78BE20;border-color:#78BE20}
.bone .faq-item[open] summary .pm::before,.bone .faq-item[open] summary .pm::after{background:#0F110F}
.bone .promise-head .ic{box-sizing:border-box;width:38px;height:38px;padding:9px;border-radius:50%;background:var(--forest);color:#78BE20}

/* Filled forest arrows for the review strip */
.bone .scroll-btn{background:var(--forest);border-color:var(--forest);color:#E6DCC6}
.bone .scroll-btn:hover{background:#2A3E22;border-color:#2A3E22;color:#78BE20}
.bone .scroll-btn[aria-disabled="true"]{background:transparent;border-color:#6E746C;color:#0F110F;opacity:.4}

/* ---------- real job photos (client batch, Oct 2026) ---------- */
/* home: recent jobs mosaic — one tall photo, four around it */
.jobs-home-head{display:grid;gap:18px}
@media (min-width:900px){.jobs-home-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}}
.jobs-home-head .h2{max-width:16ch}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(28px,4vw,44px)}
.bento .photo{aspect-ratio:1/1}
.bento .photo:first-child{grid-column:1/-1;aspect-ratio:16/10}
@media (min-width:760px){
  .bento{grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,clamp(200px,21vw,270px));gap:14px}
  .bento .photo,.bento .photo:first-child{aspect-ratio:auto}
  .bento .photo:first-child{grid-column:auto;grid-row:span 2}
}
.bento .photo img,.veh-photos .photo img,a.job .photo img{transition:transform .7s var(--ease)}
.bento .photo:hover img,.veh-photos .photo:hover img,a.job:hover .photo img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.bento .photo:hover img,.veh-photos .photo:hover img,a.job:hover .photo img{transform:none}}

/* home: three vehicles above the vehicle icons */
.veh-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(28px,4vw,44px)}
.veh-photos .photo{aspect-ratio:4/3}
.veh-photos .photo:first-child{grid-column:1/-1}
@media (min-width:760px){.veh-photos{grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:clamp(220px,22vw,290px);gap:14px}.veh-photos .photo{aspect-ratio:auto}.veh-photos .photo:first-child{grid-column:auto}}
@media (max-width:759px){.bento .photo:not(:first-child) figcaption,.veh-photos .photo:not(:first-child) figcaption{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 8px;font-size:12px}}

/* ---------- home hero: full photo + phone ---------- */
.hero-full{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(48px,7vw,96px)}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-full::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,10,.96) 0%,rgba(10,11,10,.92) 44%,rgba(10,11,10,.55) 66%,rgba(10,11,10,.25) 100%),
             linear-gradient(0deg,rgba(10,11,10,.7),transparent 35%)}
.hero-full .wrap{display:grid;align-items:center;gap:40px}
.hero-full .hero-copy{max-width:600px}
.hero-cap{position:absolute;right:var(--gutter);bottom:18px;padding:7px 11px;border-radius:6px;background:rgba(10,11,10,.82);font-size:13px;color:var(--text-strong)}
@media (min-width:900px){
  .hero-full{min-height:min(86vh,760px);display:flex;align-items:center}
  .hero-full .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero-full .phone{transform:rotate(3deg)}
}

/* the phone: sizes in em so it scales as one piece */
.phone{position:relative;justify-self:center;width:290px;font-size:14px;border-radius:2.4em;border:.55em solid #2A2E2A;background:rgba(10,11,10,.96);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.phone-top{display:flex;align-items:center;gap:.7em;padding:1em 1.15em;border-bottom:1px solid var(--line);background:#141714}
.phone-av{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--green);color:#0F110F;font-weight:800}
.phone-top b{display:block;font-size:1em;color:var(--text-strong)}
.phone-top small{font-size:.86em;color:var(--text-muted)}
.phone-body{display:flex;flex-direction:column;align-items:flex-end;gap:.55em;padding:1.3em 1em .9em}
.bubble-photo{width:72%;border-radius:1.15em 1.15em .3em 1.15em;overflow:hidden}
.bubble-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:52% 50%}
.bubble{max-width:88%;padding:max(.75em,6px) max(1em,8px);border-radius:1.15em 1.15em .3em 1.15em;background:var(--green);color:#0F110F;font-size:1em;line-height:1.4;font-weight:550}
.delivered{font-size:.8em;color:var(--text-muted)}
.phone-bar{display:flex;align-items:center;justify-content:space-between;margin:.4em .85em 1em;padding:.65em .85em;border:1px solid var(--line-strong);border-radius:999px;color:var(--text-muted);font-size:.93em}
.phone-bar i{width:1.6em;height:1.6em;border-radius:50%;background:var(--green)}

/* the message sends itself once: phone rises, photo, then text, then "Delivered" */
@media (prefers-reduced-motion:no-preference){
  .phone{animation:phoneRise 1s var(--ease) both}
  .phone .bubble-photo,.phone .bubble{animation:bubbleSend .6s var(--ease) both}
  .phone .bubble-photo{animation-delay:.5s}
  .phone .bubble{animation-delay:1.1s}
  .phone .delivered{animation:bubbleFade .4s ease 1.8s both}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){.hero-full .phone{animation-name:phoneRiseTilt}}
@keyframes phoneRise{from{opacity:0;transform:translateY(30px)}}
@keyframes phoneRiseTilt{from{opacity:0;transform:translateY(30px) rotate(3deg)}to{transform:rotate(3deg)}}
@keyframes bubbleSend{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes bubbleFade{from{opacity:0}}

/* desktop: Kyle answers. He types, replies, and his call drops in over the thread.
   Phones skip it: the extra lines would push the Call button out of the first screen.
   With motion off, the finished thread simply shows. */
.ph-ts,.ph-reply,.ph-meta,.ph-call{display:none}
@media (min-width:900px){
  .ph-ts{display:block;align-self:center;font-size:.8em;font-weight:600;color:var(--text-muted)}
  .ph-reply{display:grid;align-self:flex-start;max-width:86%}
  .ph-reply>*{grid-area:1/1}
  .ph-typing{display:inline-flex;align-items:center;gap:.3em;justify-self:start;align-self:start;padding:.85em 1em;
    border-radius:1.15em 1.15em 1.15em .3em;background:var(--ink-700);opacity:0}
  .ph-typing i{width:.5em;height:.5em;border-radius:50%;background:var(--text-muted)}
  .ph-msg{padding:max(.75em,6px) max(1em,8px);border-radius:1.15em 1.15em 1.15em .3em;background:var(--ink-700);color:var(--text-strong);line-height:1.4}
  .ph-meta{display:block;align-self:flex-start;font-size:.8em;color:var(--text-muted)}
  .ph-call{position:absolute;z-index:2;top:.6em;left:.6em;right:.6em;display:flex;align-items:center;gap:.7em;padding:.8em .9em;border-radius:1.3em;
    background:rgba(36,40,36,.97);border:1px solid var(--line-strong);box-shadow:0 14px 30px rgba(0,0,0,.55)}
  .ph-call div{flex:1;line-height:1.3}
  .ph-call b{display:block;color:var(--text-strong)}
  .ph-call small{font-size:.86em;color:var(--text-muted)}
  .ph-ans{position:relative;display:grid;place-items:center;flex:none;width:2.6em;height:2.6em;border-radius:50%;background:var(--green);color:var(--ink-900)}
  .ph-ans .ic{width:1.2em;height:1.2em}
  /* the longer thread needs the room: a wider, shorter photo (closer to the shot's own shape) */
  .hero-full .bubble-photo{width:76%}
  .hero-full .bubble-photo img{aspect-ratio:16/9}
}
/* short laptop screens: a touch less padding and a slightly smaller phone, so it clears the fold */
@media (min-width:900px) and (max-height:820px){
  .hero-full{padding-block:clamp(36px,4.5vw,64px)}
  .hero-full .phone{width:270px;font-size:13px}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .ph-typing{animation:typingIn 1.5s linear 2.4s both}
  .ph-typing i{animation:typeDot .75s ease-in-out 2.4s 2}
  .ph-typing i:nth-child(2){animation-delay:2.55s}
  .ph-typing i:nth-child(3){animation-delay:2.7s}
  .ph-msg{animation:replyIn .55s var(--ease) 3.9s both}
  .ph-meta{animation:bubbleFade .4s ease 4.3s both}
  .ph-call{animation:callDrop .6s var(--ease) 5s both}
  .ph-ans .ic{animation:callRing 1.2s ease-in-out 5.6s 3}
  .ph-ans::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:callHalo 1.2s var(--ease) 5.6s 3}
}
@keyframes typingIn{0%{opacity:0;transform:scale(.9)}8%{opacity:1;transform:none}92%{opacity:1}100%{opacity:0}}
@keyframes typeDot{0%,60%,100%{transform:none;opacity:.55}30%{transform:translateY(-.3em);opacity:1}}
@keyframes replyIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes callDrop{from{transform:translateY(-140%)}}
@keyframes callRing{0%,50%,100%{transform:none}10%{transform:rotate(-14deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-9deg)}40%{transform:rotate(6deg)}}
@keyframes callHalo{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.7)}}

/* phones: the photo becomes a band on top with the phone on it; text below */
@media (max-width:899px){
  .hero-full{padding-top:0}
  .hero-bg{height:min(96vw,420px)}
  .hero-full::before{background:linear-gradient(180deg,rgba(10,11,10,.15) 0,rgba(10,11,10,.35) 60vw,var(--ink-900) min(96vw,420px))}
  .hero-full .wrap{gap:22px}
  .hero-full .phone{order:-1;font-size:10.5px;width:220px;margin-top:22px;justify-self:end}
  .hero-cap{display:none}
}

/* ================= phone pass ================= */
@media (max-width:899px){
  /* service cards: the whole card is the link, so a small chevron replaces the round button */
  .svc-card .go{display:none}
  .svc-card-body{padding:20px 44px 20px 20px}
  .svc-card-body::after{content:"";position:absolute;right:22px;top:26px;width:9px;height:9px;
    border-top:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg)}
  .svc-card--lead .svc-card-body::after{top:auto;bottom:26px}
  .svc-card-body > p:last-of-type{margin-bottom:0}

  /* Kyle placeholder: a slim band until his photo arrives */
  .kyle-ph{aspect-ratio:auto;height:128px}
  .kyle-ph img{width:auto;height:84px}
  .kyle-facts .dot{display:none}
  .kyle-facts{column-gap:16px}
  .h1{overflow-wrap:break-word}
}

@media (max-width:639px){
  /* vehicles: icon and label on one line, two per row */
  .veh li{flex-direction:row;justify-content:flex-start;gap:12px;padding:14px 12px;text-align:left;font-size:15px}
  .veh .ic{width:28px;height:28px;flex:none}
}

@media (max-width:559px){
  /* paired Call/Text buttons sit side by side instead of two full-width bars */
  .cta-reach .actions,.svc2-cta:not(.stack){display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cta-reach .actions .btn,.svc2-cta:not(.stack) .btn{min-width:0;padding:8px 12px 8px 8px;gap:9px;font-size:15.5px;justify-content:flex-start}
  .cta-reach .actions .btn .chip,.svc2-cta:not(.stack) .btn .chip{flex:none}
  .svc2-cta:not(.stack) .more{grid-column:1/-1;margin-left:0}
}

/* home hero on phones: the photo is a band, the phone mockup sits inside it, and the
   copy starts right under it, so the hero Call button clears the fixed call bar.
   --band follows the visible screen height (svh, so phone browser toolbars count),
   and the mockup scales with it, so it stays in the first screen on every phone. */
@media (max-width:899px){
  .hero-full{--band:min(70vw,300px,max(170px,34svh));padding-top:0}
  .hero-bg{height:var(--band)}
  .hero-full::before{background:linear-gradient(180deg,rgba(10,11,10,.05) 0,rgba(10,11,10,.25) calc(var(--band) * .6),var(--ink-900) var(--band))}
  .hero-full .wrap{padding-top:calc(var(--band) + 6px);gap:24px}
  .hero-full .phone{position:absolute;top:14px;right:var(--gutter);margin:0;width:20.7em;font-size:calc((var(--band) - 30px) / 30)}
  .hero-h1{font-size:clamp(29px,8.4vw,34px)}
  .hero-full .slogan{margin-bottom:10px}
  .hero-full .lead{margin-top:14px}
  .hero-full .actions{margin-top:20px}
}
/* short visible screens: tighten the copy so the Call button still makes the first screen */
@media (max-width:899px) and (max-height:700px){
  .hero-full .slogan{display:none}
  .hero-full .lead{font-size:16px;line-height:1.5;margin-top:10px}
  .hero-full .actions{margin-top:16px}
  .hero-full .wrap{padding-top:calc(var(--band) + 2px)}
}
@media (max-width:899px) and (max-height:600px){.hero-full{--band:min(70vw,max(150px,30svh))}}

/* ---------- phones: floating call button, hiding header, menu lock ---------- */
.fab{display:none}
@media (max-width:899px){
  .fab{position:fixed;z-index:45;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
    display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
    background:var(--green);color:var(--ink-900);border:1px solid rgba(255,255,255,.2);
    box-shadow:0 12px 28px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
    transition:transform .35s var(--ease),opacity .25s ease,visibility 0s,background var(--fast) var(--ease)}
  .fab .ic{width:26px;height:26px;stroke-width:2.2}
  .fab:active{background:var(--green-press)}
  .js .fab:not(.show),.menu-open .fab{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.7);
    transition:transform .3s var(--ease),opacity .2s ease,visibility 0s linear .3s}
  /* the footer's last line ends above the button */
  .site-footer{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))}

  .site-header{transition:transform .32s var(--ease)}
  .hdr-hidden .site-header{transform:translateY(-101%)}
  /* lock on the root, not body: html clips overflow-x, so a body lock would make body the scroller and drop the sticky header */
  html.menu-open{overflow:hidden}
  .menu-open .site-header{background:var(--ink-900)}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  /* a ring pulses out now and then, rather than the button throbbing */
  .fab.show::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--green);pointer-events:none;
    opacity:0;animation:fabRing 3.6s var(--ease) 1s infinite}
}
@keyframes fabRing{0%{opacity:.65;transform:scale(1)}22%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}