:root{
  /* From his logo: deep forest + bright green. Used in two dark bands and small
     accents only — the rest is warm neutral, so the green reads as a choice. */
  --forest:#0C3319;
  --forest-2:#144227;
  --green:#4FC254;
  --green-hi:#68D46C;
  --kraft:#836033;

  --bg:#F3F5ED;
  --surface:#FCFDF8;
  --surface-2:#E9EDE0;
  --line:#D8DDCB;
  --text:#1A1F19;
  --text-2:#585D52;
  --accent:#17632A;
  --accent-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(20,24,20,.06),0 6px 14px rgba(20,24,20,.06);

  --f-display:'Big Shoulders Display','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1120px;
  /* exponential ease-out: fast departure, long settle - the iOS curve */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12140F;--surface:#1B1E18;--surface-2:#23261E;--line:#343A2E;
    --text:#EAEBE4;--text-2:#A3A899;--accent:#62C766;--accent-ink:#0C3319;
    --kraft:#C9A16A;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#12140F;--surface:#1B1E18;--surface-2:#23261E;--line:#343A2E;
  --text:#EAEBE4;--text-2:#A3A899;--accent:#62C766;--accent-ink:#0C3319;
  --kraft:#C9A16A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
/* browser surfaces: the parts we did not draw still carry the design */
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--text)}
:root{accent-color:var(--accent);caret-color:var(--accent);scrollbar-color:var(--line) transparent}
a{text-underline-offset:.16em;text-decoration-thickness:.07em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.hero ::selection,.final ::selection,.pagehead ::selection,.bigcall ::selection{
  background:color-mix(in srgb,var(--green) 34%,transparent);color:#fff;
}
/* figures that line up should line up */
.est-range .money,.rate-n,.radius .rnum,.bigcall-num,.tr-big{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;letter-spacing:-.01em;margin:0;line-height:.95}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.eyebrow{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}

/* header */
.hdr{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid transparent;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent);
  transition:background-color .35s var(--ease-out-soft),border-color .35s var(--ease-out-soft);
}
/* scroll edge effect: the rule appears only once content is actually under it */
.hdr.is-scrolled{
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  border-bottom-color:var(--line);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:block;text-decoration:none;flex:none}
.logo{height:38px;width:auto;display:block}
.logo-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-l{display:none}:root:not([data-theme="light"]) .logo-d{display:block}}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
@media (max-width:430px){.logo{height:30px}}
.hdr-call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.05;padding:10px 16px;border-radius:8px;white-space:nowrap}
.hdr-call small{display:block;font-family:var(--f-ui);font-size:11px;font-weight:600;opacity:.88;letter-spacing:.09em;text-transform:uppercase}
@media (max-width:640px){.hdr-call .num{display:none}}

/* hero */
.hero{background:var(--forest);color:#E8F1E9;position:relative;overflow:hidden}
.hero-in{position:relative;z-index:1;display:grid;gap:26px;padding-block:40px 48px}

/* Desktop: the footage is pinned to the right edge of the full-bleed band
   and the glass card is laid over it, so the two genuinely overlap. */
@media (min-width:1000px){
  .hero{overflow:hidden}
  .hero-in{
    grid-template-columns:minmax(0,1fr);
    row-gap:22px;
    padding-block:56px 44px;
    min-height:600px;
  }
  .hero-lead{max-width:none;position:relative;z-index:2}
  .hero-lead h1{max-width:13em}
  .hero-lede{max-width:34ch}
  .hero-card{
    position:relative;z-index:3;
    width:min(620px,58%);
  }
  .hero .hero-media{
    position:absolute;z-index:1;
    right:calc(50% - 50vw);top:132px;
    width:min(46vw,620px);
    margin:0;
  }
}
@media (min-width:1400px){
  .hero .hero-media{top:148px;width:min(42vw,660px)}
}

/* the headline is the hero: display scale, tight, breaking its own line */
.hero-lead h1{margin:0}
.hero-card{
  background:color-mix(in srgb,#0B2A15 62%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border-radius:16px;padding:22px 22px 24px;
  box-shadow:0 12px 34px rgba(0,0,0,.34),
             inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent);
}
@media (prefers-reduced-transparency:reduce){
  .hero-card{background:#0B2A15;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:999px){.hero-card{background:none;padding:0;box-shadow:none;backdrop-filter:none}}

.hero h1{font-size:clamp(48px,9.6vw,104px);font-weight:800;line-height:.9;color:#fff;letter-spacing:-.022em}
.hero h1 em{font-style:normal;color:var(--green);display:block}
.tagline{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.hero-lede{margin-top:16px;font-size:clamp(16.5px,1.9vw,19px);font-weight:500;
  line-height:1.5;color:#D2E3D4;max-width:38ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:.01em;
  padding:15px 22px;border-radius:9px;text-decoration:none;border:0;cursor:pointer;
  position:relative;isolation:isolate;
  transition:background-color .2s var(--ease-out-soft),
             box-shadow .28s var(--ease-out-soft),
             filter .28s var(--ease-out-soft),
             transform .12s var(--ease-out-expo);
}
/* feedback lands on the press, not the release */
.btn:active{transform:scale(.975);transition-duration:.09s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{
  background:color-mix(in srgb,var(--accent) 88%,#000);
}
.hero .btn-primary,.final .btn-primary{background:var(--green);color:#062A0C}
.hero .btn-primary:hover,.final .btn-primary:hover{
  background:var(--green-hi);
  box-shadow:0 8px 26px color-mix(in srgb,var(--green) 52%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent);
}
.btn-ghost:hover{
  background:color-mix(in srgb,#fff 10%,transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 46%,transparent);
}
.btn-dark:hover{
  background:var(--forest-2);
  box-shadow:0 6px 18px color-mix(in srgb,var(--forest) 45%,transparent);
}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.btn-dark{background:var(--forest);color:#fff}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;font-size:14.5px;
  font-weight:500;line-height:1.35;letter-spacing:.004em;color:#BACCBC}
.hero-facts b{color:#fff;font-weight:600}

/* estimator */
.est{background:var(--surface);color:var(--text);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.est-hd{padding:18px 20px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.est-hd h2{font-size:27px;font-weight:800}
.est-hd p{font-size:14px;color:var(--text-2);margin-top:3px}
.est-body{padding:18px 20px 20px;display:grid;gap:16px}
.fld{display:grid;gap:7px}
.fld > span{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2)}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{font-family:var(--f-ui);font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:7px;cursor:pointer;background:var(--bg);color:var(--text);border:1.5px solid var(--line);transition:background-color .15s,border-color .15s}
.opt[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.est-out{border-top:1px dashed var(--line);margin-top:2px;padding-top:16px;display:grid;gap:10px}
.est-range{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.est-range .money{font-family:var(--f-display);font-weight:900;font-size:clamp(44px,9.5vw,58px);letter-spacing:-.02em;line-height:.95;font-variant-numeric:tabular-nums}
.est-range .unit{font-size:14px;color:var(--text-2)}
.est-math{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.est-math b{color:var(--text);font-weight:600}
.est-note{font-size:13px;line-height:1.5;color:var(--text-2);background:var(--surface-2);padding:12px 14px;border-radius:7px}
.est-cta{display:flex;flex-wrap:wrap;gap:10px}
.est-cta .btn{font-size:16px;padding:13px 18px;flex:1 1 auto}

/* trust band — a band with hairlines, not four floating cards */
.trust{background:var(--surface);border-block:1px solid var(--line)}
.trust-in{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:600px){.trust-in{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.trust-in{grid-template-columns:repeat(4,1fr)}}
.tr{display:flex;flex-direction:column;gap:7px;padding:22px 0}
@media (min-width:600px){
  .tr{padding:24px 22px}
  .tr:nth-child(odd){padding-left:0}
  .tr:nth-child(even){border-left:1px solid var(--line)}
}
@media (min-width:1000px){
  .tr{border-left:1px solid var(--line);padding:26px 24px}
  .tr:first-child{border-left:0;padding-left:0}
  .tr:last-child{padding-right:0}
}
@media (max-width:599px){.tr + .tr{border-top:1px solid var(--line)}}
.tr-ico{width:26px;height:26px;color:var(--accent);flex:none}
.tr-big{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.01em}
.tr-lbl{font-size:14px;color:var(--text-2);line-height:1.45}

section{padding-block:clamp(44px,7vw,72px)}
.sec-hd{max-width:60ch;margin-bottom:28px}
.sec-hd h2{font-size:clamp(34px,5.8vw,52px);font-weight:800;margin-top:10px}
.sec-hd p{color:var(--text-2);margin-top:10px;font-size:17px}

/* proof */
.proof-sec{padding-bottom:clamp(36px,6vw,56px)}
.proof{display:grid;gap:14px;padding-inline:20px;max-width:var(--maxw);margin:0 auto;grid-template-columns:1fr}
@media (min-width:640px){.proof{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.proof{grid-template-columns:repeat(4,1fr)}}
.pf{margin:0;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.pf img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.pf figcaption{
  padding:13px 15px 16px;font-size:14px;line-height:1.45;
  color:var(--text-2);background:var(--surface);flex:1;
  display:flex;flex-direction:column;gap:5px;
}
.pf figcaption b{
  color:var(--text);font-weight:700;display:block;
  font-family:var(--f-display);font-size:21px;line-height:1.05;letter-spacing:-.01em;
}
.plate-no{
  font-family:var(--f-ui);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kraft);
  display:flex;align-items:center;gap:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:2px;
}
.plate-no .plate-loc{color:var(--text-2);letter-spacing:.11em;margin-left:auto;opacity:.85}
.plate-body{font-size:14px;line-height:1.5}

/* services */
.svcs{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:620px){.svcs{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.svcs{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1000px){.svc h3{font-size:19px}.svc p{font-size:14px}}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.svc h3{font-size:22px;font-weight:700}
.svc p{font-size:14.5px;color:var(--text-2);line-height:1.5}
.svc .tick{width:26px;height:3px;border-radius:2px;background:var(--green);margin-bottom:8px}

/* crew */
.crew{display:grid;gap:26px;align-items:center}
@media (min-width:900px){.crew{grid-template-columns:1.05fr .95fr;gap:44px}}
.crew-photo{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.crew-photo img{width:100%;height:auto;display:block}
.crew-copy h2{font-size:clamp(32px,5.4vw,48px);font-weight:800;margin-top:10px}
.crew-copy p{color:var(--text-2);margin-top:12px}
.crew-list{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:9px}
.crew-list li{position:relative;padding-left:26px;font-size:16px}
.crew-list li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:7px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}

/* steps */
.steps{display:grid;gap:18px;counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:26px}}
.step{display:grid;gap:8px;padding-top:18px;border-top:2px solid var(--green)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-display);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.08em}
.step h3{font-size:25px;font-weight:700}
.step p{font-size:15px;color:var(--text-2)}

/* reviews */
.revs{display:grid;gap:14px}
@media (min-width:800px){.revs{grid-template-columns:.8fr 1fr 1fr;gap:18px;align-items:start}}
.rev{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:20px;display:flex;flex-direction:column;gap:12px}
.rev blockquote{margin:0;font-size:17.5px;line-height:1.55}
.rev-by{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text-2)}
.rev-by .nm{font-weight:700;color:var(--text)}
.chip{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-2);color:var(--text-2);padding:3px 8px;border-radius:99px}
.rev-photo{margin:0;border-radius:11px;overflow:hidden;box-shadow:var(--shadow)}
.rev-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
/* a portrait photo does not want a landscape box: 16/10 here cropped 48% away */
@media (max-width:799px){.rev-photo img{aspect-ratio:auto;height:auto}}


/* local knowledge reads as a list of facts, not a wall of place names */
.local{display:grid;gap:0;margin-top:22px}
.local-row{display:grid;gap:4px;padding-block:15px;border-top:1px solid var(--line)}
@media (min-width:640px){.local-row{grid-template-columns:.8fr 1.2fr;gap:20px;align-items:baseline}}
.local-row b{font-family:var(--f-display);font-size:21px;font-weight:700;line-height:1.1}
.local-row span{font-size:15px;color:var(--text-2);line-height:1.55}

/* area */
.area-grid{display:grid;gap:22px}
@media (min-width:860px){.area-grid{grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}}
.cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.city{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:14.5px;font-weight:600}
.radius{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px;color:var(--text);display:grid;gap:14px;box-shadow:var(--shadow)}
.radius .rnum{font-family:var(--f-display);font-weight:900;font-size:66px;line-height:.88;color:var(--accent);letter-spacing:-.02em}
.radius p{color:var(--text-2);font-size:15px}
.radius hr{border:0;border-top:1px solid var(--line);margin:2px 0}

/* final */
.final{background:var(--forest);color:#fff;border-radius:16px;padding:clamp(28px,5vw,44px);display:grid;gap:18px;text-align:center;justify-items:center}
.final h2{font-size:clamp(34px,5.8vw,52px);font-weight:800;color:#fff}
.final p{color:#C3D6C6;max-width:46ch}
.final .btn-primary{font-size:19px;padding:17px 28px}
.final-hours{font-size:14px;color:#9DB2A0}

footer{background:var(--surface);border-top:1px solid var(--line);padding-block:32px 24px}
.ft{display:grid;gap:22px}
@media (min-width:760px){.ft{grid-template-columns:1.2fr 1fr 1fr}}
.ft h3{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin:0 0 10px}
.ft a{color:var(--text);text-decoration:none;font-size:15px;display:block;padding-block:3px}
.ft a:hover{color:var(--accent)}
.ft .nap{font-size:15px;color:var(--text-2);line-height:1.65}
.ft .nap b{color:var(--text)}
.demo-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between}
.demo-note a{display:inline;font-size:13px;color:var(--accent);text-decoration:underline}


/* hero quote form */
.quote{margin-top:0;display:grid;gap:11px;max-width:none}
.q-row{display:grid;gap:11px;grid-template-columns:1fr}
@media (min-width:520px){.q-row{grid-template-columns:1fr 1fr}}
.q-fld{display:grid;gap:5px}
.q-fld > span{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9DB2A0}
.q-fld input{font-family:var(--f-body);font-size:16px;padding:13px 14px;border-radius:9px;border:1.5px solid rgba(232,241,233,.22);background:rgba(232,241,233,.07);color:#fff;width:100%;min-width:0}
.q-fld input::placeholder{color:#9DB0A0}
.q-fld input:focus{border-color:var(--green);outline:none;background:rgba(232,241,233,.11)}
.q-go{width:100%;margin-top:3px;font-size:18px}
.q-small{font-size:13.5px;color:#9DB2A0;margin-top:2px}
.q-ok{background:rgba(79,194,84,.12);border:1px solid rgba(79,194,84,.5);color:#D8EDD9;padding:12px 14px;border-radius:9px;font-size:15px;line-height:1.5}

/* hero media on angled brand shapes */
.hero-media{position:relative;margin:0;align-self:start}
.hero-media::before,.hero-media::after{content:"";position:absolute;border-radius:18px;z-index:0}
.hero-media::before{inset:-16px -24px 24px 14px;background:var(--green);opacity:.13;transform:rotate(-3deg)}
.hero-media::after{inset:16px 18px -14px -12px;background:#FFFFFF;opacity:.07;transform:rotate(2.5deg)}
.hero-media video{position:relative;z-index:1;width:100%;border-radius:14px;display:block;box-shadow:0 10px 24px rgba(0,0,0,.32);background:var(--forest-2);aspect-ratio:9/13;object-fit:cover}
@media (min-width:1000px){.hero .hero-media video{aspect-ratio:auto;height:440px;border-radius:16px 0 0 16px}}
.vid-toggle{position:absolute;z-index:2;left:14px;bottom:14px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:rgba(6,38,15,.72);color:#fff;font-size:15px;line-height:1;backdrop-filter:blur(4px)}
.vid-toggle:hover{background:var(--forest)}

/* review platform strip — light, so the award badge is the only lift */
.platforms{background:var(--surface);border-bottom:1px solid var(--line)}
.platforms-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-block:16px}
.pf-div{width:1px;align-self:stretch;background:var(--line);flex:none}
@media (max-width:719px){.pf-div{display:none}}

.rate{display:flex;flex-direction:column;gap:2px;text-decoration:none;flex:none}
.rate-src{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.rate-row{display:flex;align-items:center;gap:8px}
.rate-n{font-family:var(--f-display);font-weight:900;font-size:36px;line-height:1;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rate-stars{display:inline-flex;gap:1px;color:#8F6A0A}
.rate-sub{font-size:12.5px;color:var(--text-2)}
.rate:hover .rate-n{color:var(--accent)}

/* the award is the one lifted object in this band */
.award{
  display:flex;align-items:center;gap:12px;flex:none;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:11px 15px;
}
.award-ico{color:var(--accent);flex:none}
.award-txt{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.award-txt b{font-family:var(--f-display);font-size:20px;font-weight:800;color:var(--text);line-height:1.1}
.award-txt span{font-size:12.5px;color:var(--text-2)}

.pf-mini{display:flex;flex-direction:column;text-decoration:none;line-height:1.25;flex:none}
.pf-mini b{font-family:var(--f-display);font-size:20px;font-weight:800;color:var(--text);line-height:1.1}
.pf-mini span{font-size:12.5px;color:var(--text-2)}
.pf-mini:not(.pf-static):hover b{color:var(--accent)}

/* service splitter — light cards with a green rule, not three green slabs */
.splitter{display:grid;grid-template-columns:1fr;background:var(--surface-2);border-bottom:1px solid var(--line)}
@media (min-width:760px){.splitter{grid-template-columns:repeat(3,1fr)}}
.sp{
  padding:24px 20px;text-decoration:none;display:flex;flex-direction:column;gap:6px;
  transition:background-color .15s;
}
@media (min-width:760px){.sp + .sp{border-left:1px solid var(--line)}}
@media (max-width:759px){.sp + .sp{border-top:1px solid var(--line)}}
.sp:hover{background:var(--surface)}
.sp-k{font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--text);line-height:1.05}
.sp-d{font-size:14px;color:var(--text-2);line-height:1.45}

/* estimator band */
.est-band{background:var(--surface-2);padding-block:clamp(40px,6vw,64px)}
.est-band-in{display:grid;gap:26px}
@media (min-width:920px){.est-band-in{grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center}}
.est-band-copy h2{font-size:clamp(32px,5.4vw,48px);font-weight:800;margin-top:10px}
.est-band-copy p{color:var(--text-2);margin-top:12px}

/* video strip */
.vids{display:grid;gap:11px;grid-template-columns:1fr 1fr}
@media (min-width:760px){.vids{grid-template-columns:repeat(4,1fr)}}
.vd{margin:0;border-radius:12px;overflow:hidden;position:relative;background:var(--surface-2)}
.vd img,.vd-v{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--forest)}
.vd-play{
  position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(12,51,25,.66);color:#fff;font-size:12px;
  display:grid;place-items:center;backdrop-filter:blur(3px);padding:0;
  transition:background-color .15s,transform .1s;
}
.vd-play:hover{background:rgba(12,51,25,.88)}
.vd-play:active{transform:scale(.94)}
.vd.is-playing .vd-play{background:var(--accent);color:var(--accent-ink)}
.vd.is-playing figcaption{opacity:0;transition:opacity .2s}

.vd figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 11px;font-size:13.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(12,51,25,.88))}


/* nav */
.nav{display:none;gap:22px;margin-left:auto;margin-right:18px}
@media (min-width:860px){.nav{display:flex}}
.nav a{
  font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--text-2);
  text-decoration:none;padding-block:6px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.navm{display:flex;gap:4px;overflow-x:auto;padding:0 20px 10px;-webkit-overflow-scrolling:touch}
@media (min-width:860px){.navm{display:none}}
.navm a{
  font-family:var(--f-ui);font-size:14px;font-weight:600;white-space:nowrap;
  color:var(--text-2);text-decoration:none;padding:7px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);
}
.navm a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* page headers on the inner pages */
.pagehead{background:var(--forest);color:#E8F1E9;padding-block:clamp(38px,6vw,60px)}
.pagehead h1{font-size:clamp(40px,7.4vw,66px);font-weight:800;color:#fff;margin-top:10px;line-height:.94}
.pagehead-lede{margin-top:16px;font-size:clamp(16px,2vw,19px);color:#C3D6C6;max-width:54ch}
.pagehead-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:#9DB2A0}
.pagehead-facts b{color:#fff;font-weight:600}

/* jump bar */
.jump{background:var(--surface);border-bottom:1px solid var(--line)}
.jump-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-block:13px}
.jump-lead{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.jump a{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.jump a:hover{border-bottom-color:var(--accent)}

.svc-rows-h{font-size:clamp(26px,3.6vw,34px);font-weight:800;margin-bottom:26px;max-width:22ch}
/* service rows */
.svc-rows{display:grid;gap:0}
.svc-row{display:grid;gap:14px;padding-block:30px;border-top:1px solid var(--line)}
.svc-row:first-child{border-top:0;padding-top:6px}
@media (min-width:860px){.svc-row{grid-template-columns:.85fr 1.15fr;gap:40px}}
.svc-head h3{font-size:clamp(30px,4.2vw,40px);font-weight:800}
.svc-price{
  font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--accent);
  margin-top:10px;line-height:1.4;
}
.svc-sit{font-size:18px;color:var(--text);margin-bottom:14px}
.svc-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.svc-list li{position:relative;padding-left:24px;font-size:15.5px;color:var(--text-2);line-height:1.5}
.svc-list li::before{
  content:"";position:absolute;left:0;top:8px;width:12px;height:6px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg);
}
.svc-cta{font-size:17px;padding:11px 18px}

/* always included */
.incl{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.incl{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.incl{grid-template-columns:repeat(4,1fr)}}
.incl-item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:6px;
}
.incl-item b{font-family:var(--f-display);font-size:21px;font-weight:800;line-height:1.1}
.incl-item span{font-size:14.5px;color:var(--text-2);line-height:1.5}

/* contact */
.contact-grid{display:grid;gap:30px}
@media (min-width:940px){.contact-grid{grid-template-columns:.92fr 1.08fr;gap:44px;align-items:start}}
.bigcall{
  display:flex;flex-direction:column;gap:3px;text-decoration:none;
  background:var(--forest);border-radius:14px;padding:24px 22px;color:#fff;
}
.bigcall-lbl{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.bigcall-num{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,7vw,56px);line-height:.95;letter-spacing:-.02em}
.bigcall-sub{font-size:14.5px;color:#C3D6C6;margin-top:4px}
.bigcall:hover{background:var(--forest-2)}

.contact-rows{margin-top:20px;display:grid;gap:0}
.crow{display:grid;gap:3px;padding-block:14px;border-top:1px solid var(--line)}
@media (min-width:560px){.crow{grid-template-columns:150px 1fr;gap:16px;align-items:baseline}}
.crow-k{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.crow-v{font-size:15.5px;line-height:1.5}
.crow-v a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.crow-v a:hover{border-bottom-color:var(--accent)}

.cform{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:var(--shadow);display:grid;gap:13px}
.cform h2{font-size:30px;font-weight:800}
.cform-sub{font-size:14.5px;color:var(--text-2);margin-top:-6px;margin-bottom:4px}
.c-row{display:grid;gap:13px;grid-template-columns:1fr}
@media (min-width:520px){.c-row{grid-template-columns:1fr 1fr}}
.c-fld{display:grid;gap:5px}
.c-fld > span{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.c-fld input,.c-fld select,.c-fld textarea{
  font-family:var(--f-body);font-size:16px;padding:12px 13px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--bg);color:var(--text);width:100%;min-width:0;
}
.c-fld textarea{resize:vertical;line-height:1.5}
.c-fld input:focus,.c-fld select:focus,.c-fld textarea:focus{border-color:var(--accent);outline:none}
.c-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2);line-height:1.5;margin-top:2px}
.c-consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--accent);cursor:pointer}
.cform-go{width:100%;margin-top:4px}
.cform-ok{background:rgba(29,107,43,.09);border:1px solid var(--accent);color:var(--text);padding:12px 14px;border-radius:9px;font-size:15px;line-height:1.5}
.cform-alt{font-size:14px;color:var(--text-2);text-align:center}
.cform-alt a{color:var(--accent);font-weight:600}


/* about: recurring themes */
.themes{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:820px){.themes{grid-template-columns:repeat(3,1fr);gap:18px}}
.theme{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}
.theme h3{font-size:25px;font-weight:700}
.theme-p{font-size:15px;color:var(--text-2);line-height:1.5}
.theme-q{
  margin:auto 0 0;font-size:15.5px;line-height:1.55;color:var(--text);
  padding-top:13px;border-top:1px solid var(--line);
}
.theme-q cite{display:block;margin-top:8px;font-style:normal;font-size:12.5px;color:var(--text-2)}
.themes-foot{margin-top:18px;font-size:15px}
.themes-foot a{color:var(--accent);font-weight:600}

/* reviews wall */
.rv-filters{gap:8px 10px}
.rv-f{
  font-family:var(--f-ui);font-size:14px;font-weight:600;cursor:pointer;
  background:var(--surface);color:var(--text-2);border:1.5px solid var(--line);
  border-radius:99px;padding:7px 14px;transition:background-color .15s,color .15s,border-color .15s;
}
.rv-f[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rv-wall{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:680px){.rv-wall{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.rv-wall{grid-template-columns:repeat(3,1fr)}}
.rv{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.rv-stars{color:#8F6A0A;font-size:14px;letter-spacing:2px;line-height:1}
.rv blockquote{margin:0;font-size:17px;line-height:1.55;flex:1}
.rv blockquote.is-summary{font-size:16px;color:var(--text-2);font-style:italic}
.sum-tag{display:block;margin-top:9px;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);opacity:.75}
.rv-by{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.rv-name{font-family:var(--f-display);font-size:20px;font-weight:800}
.rv-src{font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent}
.rv-src:hover{color:var(--accent);border-bottom-color:var(--accent)}
.rv-note{margin-top:20px;font-size:13.5px;color:var(--text-2);max-width:70ch}

/* leave a review */
.leave{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.leave{grid-template-columns:repeat(3,1fr)}}
.leave-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:5px;
  transition:background-color .15s;
}
.leave-card:hover{background:var(--bg)}
.leave-card b{font-family:var(--f-display);font-size:22px;font-weight:800;line-height:1.1}
.leave-card span{font-size:14px;color:var(--text-2)}


/* phone: the estimator leads, the form follows it */
.m-only{display:none}
@media (max-width:760px){
  .m-only{display:flex}
  .hero-ctas.m-only{flex-wrap:wrap;gap:10px;margin-top:22px}
  .hero-ctas.m-only .btn{flex:1 1 100%}
  /* once moved under the estimator the form sits on a light ground */
  .est-band .quote{max-width:none;margin-top:20px;padding-top:20px;border-top:1px dashed var(--line)}
  .est-band .quote .q-fld > span{color:var(--text-2)}
  .est-band .quote .q-fld input{
    background:var(--bg);color:var(--text);border-color:var(--line);
  }
  .est-band .quote .q-fld input::placeholder{color:var(--text-2)}
  .est-band .quote .q-fld input:focus{border-color:var(--accent);background:var(--surface)}
  .est-band .quote .q-small{color:var(--text-2)}
  .est-band .quote .q-ok{background:rgba(29,107,43,.09);border-color:var(--accent);color:var(--text)}
}


/* the same light on the other controls */
.hdr-call,.callbar a,.chat-fab,.chat-send,.vd-play,.vid-toggle{
  transition:background-color .2s var(--ease-out-soft),box-shadow .28s var(--ease-out-soft),
             filter .28s var(--ease-out-soft),transform .12s var(--ease-out-expo);
}
.hdr-call:active,.chat-fab:active,.vd-play:active,.vid-toggle:active,.chat-send:active{transform:scale(.97)}
.chat-fab:hover{box-shadow:0 8px 24px color-mix(in srgb,var(--green) 34%,transparent)}
.opt,.rv-f,.chip-q,.city{transition:background-color .18s var(--ease-out-soft),
  border-color .18s var(--ease-out-soft),box-shadow .22s var(--ease-out-soft)}
.opt:hover:not([aria-pressed="true"]),.rv-f:hover[aria-pressed="false"],.chip-q:hover{
  border-color:var(--accent);
  box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* ---------- scroll flow ---------- */
html,body{overscroll-behavior-y:none}
/* Lenis drives the scroll; native smooth behaviour would fight it */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
/* no Lenis under reduced motion, so restore the native jump */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:92px}

.reveal{
  opacity:0;transform:translate3d(0,20px,0);will-change:opacity,transform;
  transition:opacity .72s var(--ease-out-expo),transform .72s var(--ease-out-expo);
}
.reveal.is-in{opacity:1;transform:none}
.reveal.is-in{will-change:auto}

/* ---------- glass ---------- */
.chat-panel,.vd-play,.vid-toggle{
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
}
.chat-panel{
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  box-shadow:0 8px 20px rgba(0,0,0,.26),inset 0 1px 0 color-mix(in srgb,#fff 24%,transparent);
}
.chat-hd{background:color-mix(in srgb,var(--forest) 88%,transparent)}
.vd-play,.vid-toggle{
  background:color-mix(in srgb,var(--forest) 52%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent);
}
.vd-play:hover,.vid-toggle:hover{background:color-mix(in srgb,var(--forest) 76%,transparent)}
.chat-fab{
  background:color-mix(in srgb,var(--forest) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 color-mix(in srgb,#fff 20%,transparent);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.hdr{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .hdr{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .chat-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .chat-fab,.vd-play,.vid-toggle{background:var(--forest);backdrop-filter:none;-webkit-backdrop-filter:none}
}


/* the bot mark is his own truck: box, cab, speed lines, eyes where the
   window grid sits. Eyes pick up the bright green so it reads as awake. */
.bot-mark{--bot-eye:var(--green);flex:none;color:#fff}
.chat-fab .bot-mark{margin-right:-1px}
.chat-hd .av{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,#fff 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent);
}
.chat-hd .av .bot-mark{--bot-eye:var(--green);color:#fff}
/* a slow idle blink so the mark reads as a bot rather than a logo */
@media (prefers-reduced-motion:no-preference){
  .chat-fab:hover .bot-mark circle:nth-of-type(2),
  .chat-fab:hover .bot-mark circle:nth-of-type(3){animation:botblink 2.6s steps(1) infinite}
}
@keyframes botblink{0%,92%{opacity:1}94%,98%{opacity:.25}100%{opacity:1}}


/* radial glow: light coming off the control, centred on the pointer.
   --gx/--gy are written by app.js on pointermove; they default to centre
   so keyboard focus and touch still get a glow. */
.btn,.hdr-call,.award,.rate,.chat-fab,.callbar a{
  position:relative;overflow:hidden;--gx:50%;--gy:50%;
}
.btn::after,.hdr-call::after,.award::after,.rate::after,
.chat-fab::after,.callbar a::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(190px circle at var(--gx) var(--gy),
    color-mix(in srgb,#fff 34%,transparent) 0%,
    color-mix(in srgb,#fff 12%,transparent) 38%,
    transparent 68%);
  opacity:0;transition:opacity .28s var(--ease-out-soft);
}
.btn:hover::after,.btn:focus-visible::after,
.hdr-call:hover::after,.hdr-call:focus-visible::after,
.award:hover::after,.rate:hover::after,.rate:focus-visible::after,
.chat-fab:hover::after,.chat-fab:focus-visible::after,
.callbar a:hover::after,.callbar a:focus-visible::after{opacity:1}

/* content rides above the glow */
.btn > *,.hdr-call > *,.award > *,.rate > *,.chat-fab > *,.callbar a > *{
  position:relative;z-index:2;
}

/* the halo outside: same hue as the control, so it reads as radiance */
.btn-primary:hover,.btn-primary:focus-visible{
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 42%,transparent),
             0 0 30px color-mix(in srgb,var(--accent) 26%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 24%,transparent);
}
.hero .btn-primary:hover,.final .btn-primary:hover,
.hero .btn-primary:focus-visible,.final .btn-primary:focus-visible{
  box-shadow:0 8px 26px color-mix(in srgb,var(--green) 54%,transparent),
             0 0 38px color-mix(in srgb,var(--green) 34%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 36%,transparent);
}
.hdr-call:hover,.chat-send:hover{
  box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 40%,transparent),
             0 0 26px color-mix(in srgb,var(--accent) 24%,transparent);
}
.chat-fab:hover{
  box-shadow:0 8px 24px color-mix(in srgb,var(--green) 36%,transparent),
             0 0 30px color-mix(in srgb,var(--green) 22%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 20%,transparent);
}
.callbar a:hover{filter:brightness(1.06)}

/* the award sits on paper: its glow is the accent, not white */
.award::after{
  background:radial-gradient(160px circle at var(--gx) var(--gy),
    color-mix(in srgb,var(--accent) 20%,transparent) 0%,
    transparent 66%);
}
.award{cursor:default}
.award:hover{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 18%,transparent)}

@media (prefers-reduced-motion:reduce){
  .btn::after,.hdr-call::after,.award::after,.rate::after,
  .chat-fab::after,.callbar a::after{transition:none}
}


/* Light type on a dark ground optically thins. Everything secondary that
   sits on the green bands gets a weight step and a brighter tint. */
.pagehead-lede,.final p,.bigcall-sub,.pf figcaption,.radius p,.sp-d{
  font-weight:500;letter-spacing:.004em;
}
.pagehead-lede{color:#D2E3D4}
.final p{color:#D2E3D4}
.pagehead-facts{font-weight:500;color:#BACCBC;letter-spacing:.004em}
.final-hours{font-weight:500;color:#BACCBC}
.bigcall-sub{color:#D2E3D4}
.q-small{font-weight:500;color:#BACCBC}
.q-fld > span{color:#BACCBC}
.chat-hd .sub{font-weight:500;color:#BFD2C2}


/* link pills: used for "what we do" / "nearby areas" on generated pages */
a.city{color:var(--text);text-decoration:none;transition:border-color .15s,color .15s}
a.city:hover,a.city:focus-visible{border-color:var(--accent);color:var(--accent)}

/* ---------- pricing table + FAQ: used by /pricing, /services/* ---------- */
.ptab{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.ptab-row{display:grid;gap:4px;padding:16px 18px;border-top:1px solid var(--line)}
.ptab-row:first-child{border-top:0}
@media (min-width:640px){
  .ptab-row{grid-template-columns:1fr auto;gap:18px;align-items:baseline}
}
.ptab-k{font-size:16px;font-weight:600;color:var(--text)}
.ptab-note{font-size:14px;color:var(--text-2);line-height:1.45;grid-column:1/-1}
.ptab-v{font-family:var(--f-display);font-size:26px;font-weight:800;color:var(--accent);
  letter-spacing:-.01em;line-height:1;white-space:nowrap}
.ptab-v.soft{font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--text-2);
  letter-spacing:0;white-space:normal}
.ptab-min{background:var(--forest);color:#E8F1E9;padding:16px 18px;display:grid;gap:4px}
.ptab-min b{font-family:var(--f-display);font-size:22px;font-weight:800;color:var(--green-hi)}
.ptab-min span{font-size:14.5px;color:#BACCBC;line-height:1.45}

.worked{display:grid;gap:12px;grid-template-columns:1fr;margin-top:20px}
@media (min-width:720px){.worked{grid-template-columns:repeat(3,1fr)}}
.worked .w{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.worked .w h4{font-family:var(--f-display);font-size:19px;font-weight:800;margin:0 0 4px;color:var(--text)}
.worked .w .hrs{font-size:13.5px;color:var(--text-2);margin-bottom:8px}
.worked .w .amt{font-family:var(--f-display);font-size:25px;font-weight:800;color:var(--accent);line-height:1}
.worked .w .amt small{font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--text-2);
  display:block;margin-top:5px;line-height:1.4}

.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line);padding-block:16px}
.faq-q{font-family:var(--f-display);font-size:20px;font-weight:800;margin:0 0 6px;line-height:1.2}
.faq-a{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-2);max-width:66ch}
.faq-a b{color:var(--text)}

.whofor{display:grid;gap:12px;grid-template-columns:1fr;margin-top:8px}
@media (min-width:720px){.whofor{grid-template-columns:repeat(3,1fr)}}
.whofor .wf{background:var(--surface-2);border-radius:10px;padding:16px 18px}
.whofor .wf b{display:block;font-family:var(--f-display);font-size:19px;font-weight:800;margin-bottom:4px}
.whofor .wf span{font-size:14.5px;line-height:1.5;color:var(--text-2)}

/* phone tap targets: 44px minimum. The header call button was 32px, which
   is the primary CTA on the smallest screen we ship to. */
@media (max-width:760px){
  .hdr-call{min-height:44px;padding:7px 16px}
  .brand{min-height:44px;display:flex;align-items:center}
  .navm a{min-height:44px;display:flex;align-items:center;padding:0 14px}
  .opt{min-height:44px;display:inline-flex;align-items:center}
  .rv-f,.chip-q,.city{min-height:44px;display:inline-flex;align-items:center}
  .pf-mini,.rate{min-height:44px;justify-content:center}
  .vd-play,.vid-toggle{width:44px;height:44px}
  /* footer nav is real navigation, not inline prose - give it a real target */
  .ft a{min-height:44px;display:flex;align-items:center;padding-block:0}
  .crow-v a{display:inline-flex;align-items:center;min-height:36px}
}

/* sticky call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--accent);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:none}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--accent-ink);text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:24px}
@media (max-width:760px){.callbar{display:block}body{padding-bottom:78px}}

/* ---------- chat ---------- */
.chat-fab{
  position:fixed;right:18px;z-index:70;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:9px;
  background:var(--forest);color:#fff;border:2px solid rgba(255,255,255,.18);
  font-family:var(--f-display);font-weight:800;font-size:20px;
  padding:12px 18px;border-radius:99px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.chat-fab:hover{background:var(--forest-2)}
@media (max-width:760px){.chat-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:14px;padding:12px 16px;font-size:14px}}

.chat-panel{
  position:fixed;right:18px;z-index:71;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:min(384px,calc(100vw - 28px));
  max-height:min(620px,calc(100vh - 40px));
  background:var(--surface);border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.26);
  display:flex;flex-direction:column;overflow:hidden;
}
@media (max-width:760px){.chat-panel{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px;max-height:min(560px,calc(100vh - 90px))}}
.chat-hd{background:var(--forest);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px;flex:none}
.chat-hd .av{width:36px;height:36px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;color:#052A0C;font-size:14px;flex:none}
.chat-hd .who{font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1.1}
.chat-hd .sub{font-size:12px;color:#A9BFAC}
.chat-x{margin-left:auto;background:transparent;border:0;color:#A9BFAC;font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px}
.chat-x:hover{color:#fff}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--bg)}
.msg{max-width:86%;padding:10px 13px;border-radius:13px;font-size:15px;line-height:1.5;white-space:pre-wrap}
.msg.bot{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px;align-self:flex-end}
.msg.bot a{color:var(--accent);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--bg);flex:none}
.chip-q{font-family:var(--f-ui);font-size:13.5px;font-weight:600;background:var(--surface);color:var(--accent);border:1.5px solid var(--line);border-radius:99px;padding:7px 12px;cursor:pointer}
.chip-q:hover{border-color:var(--accent)}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface);flex:none}
.chat-in input{flex:1;font-family:var(--f-body);font-size:15px;padding:11px 13px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);color:var(--text);min-width:0}
.chat-in input:focus{border-color:var(--accent);outline:none}
.chat-send{background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;padding:0 16px;font-family:var(--f-display);font-weight:800;font-size:20px;cursor:pointer}
.chat-send:disabled{opacity:.5;cursor:default}
.chat-foot{font-size:12px;color:var(--text-2);text-align:center;padding:0 12px 11px;background:var(--surface);flex:none}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-2);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* ================= level 4: micro-interactions =================
   Small things that answer the pointer. Nothing here moves on its own. */

/* the header steps out of the way on the way down, back on the way up.
   Same path both directions. app.js toggles .is-hidden. */
.hdr{
  transition:background-color .35s var(--ease-out-soft),border-color .35s var(--ease-out-soft),
             transform .42s var(--ease-out-expo);
}
.hdr.is-hidden{transform:translate3d(0,calc(-100% - env(safe-area-inset-top,0px)),0)}

/* photos lean in a touch; the frame holds still */
.pf img,.crew-photo img,.rev-photo img{transition:transform .7s var(--ease-out-expo)}

@media (hover:hover) and (pointer:fine){
  .pf:hover img,.crew-photo:hover img,.rev-photo:hover img{transform:scale(1.04)}
  /* buttons rise a pixel under the pointer; the press still sinks them */
  .btn:hover{transform:translate3d(0,-1px,0);transition-duration:.2s}
  .btn:active{transform:scale(.975);transition-duration:.09s}
  a.city:hover{transform:translate3d(0,-1px,0)}
  a.city{transition:border-color .15s,color .15s,transform .2s var(--ease-out-expo)}
}

/* ================= level 5: depth =================
   Dark ground, so lift reads as light, not shadow: cards rise and pick up
   a faint accent glow. Green bands get a light source. */

/* cards are a material: a sheen along the top edge, where light would land */
.svc,.incl-item,.whofor .wf,.worked .w,.theme,.rev,.radius,.leave-card,.ptab,.cform,.est{
  background-image:linear-gradient(180deg,color-mix(in srgb,#fff 4%,transparent),transparent 42%);
}

@media (hover:hover) and (pointer:fine){
  .svc,.incl-item,.whofor .wf,.worked .w,.theme,.rev,.radius,.leave-card,.pf{
    /* opacity kept so the scroll reveal still fades these in */
    transition:transform .45s var(--ease-out-expo),opacity .72s var(--ease-out-expo),
               box-shadow .4s var(--ease-out-soft),border-color .25s var(--ease-out-soft),
               background-color .15s;
  }
  .svc:hover,.incl-item:hover,.whofor .wf:hover,.worked .w:hover,.theme:hover,
  .rev:hover,.radius:hover,.leave-card:hover,.pf:hover{
    transform:translate3d(0,-3px,0);
    border-color:color-mix(in srgb,var(--accent) 36%,var(--line));
    box-shadow:0 14px 30px rgba(0,0,0,.32),
               0 0 26px color-mix(in srgb,var(--accent) 14%,transparent);
  }
}

/* a light source on the green bands: a soft wash from the top right,
   one faint ray across, and the far corner falling into shade */
.pagehead,.final{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.pagehead::before,.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(62% 90% at 84% -18%,color-mix(in srgb,var(--green) 24%,transparent),transparent 68%),
    linear-gradient(112deg,transparent 40%,color-mix(in srgb,#fff 5%,transparent) 48%,transparent 57%),
    radial-gradient(55% 70% at -4% 112%,rgba(0,0,0,.30),transparent 70%);
}
.pagehead > .wrap,.final > *{position:relative;z-index:1}
/* the closing band floats: a glow in its own green beneath it */
.final{box-shadow:0 20px 48px color-mix(in srgb,var(--forest) 55%,transparent),
                  inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent)}

@media (prefers-reduced-motion:reduce){
  .hdr.is-hidden{transform:none}
  .pf:hover img,.crew-photo:hover img,.rev-photo:hover img{transform:none}
}
@media (prefers-contrast:more){
  .hero::before,.pagehead::before,.final::before{display:none}
}

/* ================= arrival: the scroll-scrubbed hero =================
   One camera move, sky to street, driven by scroll. The page comes to rest
   on the truck with the headline and price form over the calm left side.
   Engineering per the 10k-websites standard: Blob-loaded video, lerped time,
   gated seeks, delta-gated writes, five static-hero gates in CSS and JS. */
.arrival{position:relative;height:500vh;padding:0;background:#0E1A12;color:#EAF1EA}
.arr-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.arr-poster,.arr-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:62% 50%}
.arr-vid{opacity:0;transition:opacity .6s var(--ease-out-soft);transform:translateZ(0);will-change:transform}
.arr-stage.video-ready .arr-vid{opacity:1}
.arr-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease-out-soft)}
.arr-stage.video-ready .arr-canvas{opacity:1}
.arr-stage.video-ready.ring-hold .arr-ring{opacity:.85}
/* global base scrim: no frame is ever raw behind the page */
.arr-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,12,8,.62) 0%,rgba(5,12,8,.46) 34%,rgba(5,12,8,.12) 56%,rgba(5,12,8,0) 68%),
             radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,14,9,0) 35%,rgba(6,14,9,.6) 100%),
             linear-gradient(180deg,rgba(6,14,9,.42) 0%,rgba(6,14,9,0) 22%)}
:root{--tshadow:0 1px 2px rgba(5,10,7,.95),0 3px 12px rgba(5,10,7,.78),0 10px 44px rgba(5,10,7,.8)}

/* caption bands: left column, the truck's lane on the right stays clear */
.arr-band{position:absolute;z-index:2;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;
  pointer-events:none;opacity:0}
.arr-band .wrap{width:100%}
.arr-band .arr-col{position:relative;max-width:min(560px,46vw)}
.arr-band .arr-col::before{content:"";position:absolute;inset:-28% -34% -28% -40%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 62% 60% at 42% 50%,rgba(5,12,8,.78) 0%,rgba(5,12,8,.56) 46%,rgba(5,12,8,0) 78%)}
.arr-band.is-live{pointer-events:auto}
.arr-h{font-family:var(--f-display);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(46px,6.4vw,92px);text-shadow:var(--tshadow);margin:0}
.arr-s{margin-top:18px;font-size:clamp(17px,1.6vw,20px);font-weight:500;color:#DCE8DD;line-height:1.45;
  max-width:36ch;text-shadow:var(--tshadow)}
.arr-h .w{display:inline-block;white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* band 1: blur to sharp, haze clearing */
.b1 .arr-h{display:grid}
.b1 .arr-h > span{grid-area:1/1}
.b1 .soft{filter:blur(10px);opacity:calc(1 - var(--k,0))}
.b1 .sharp{opacity:var(--k,0)}
.b1 .arr-s{opacity:clamp(0,(var(--k,0) - .5)*2.4,1)}
/* band 2: drift down with the camera */
.b2 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
.b2 .arr-s{opacity:clamp(0,(var(--k,0) - .55)*3,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .55)*3,1))*-12px))}
/* band 3 sits over the brightest gaps in the canopy: its scrim runs deeper */
.b3 .arr-col::before{inset:-34% -44% -34% -40%;
  background:radial-gradient(ellipse 46% 62% at 50% 50%,rgba(5,12,8,.88) 0%,rgba(5,12,8,.7) 52%,rgba(5,12,8,0) 96%)}
/* band 3: one word lands per beat */
.b3 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - .1)*3.2,1);
  opacity:var(--kc);transform:scale(calc(.6 + .52*var(--kc) - .12*var(--ks)))}
.b3 .arr-s{opacity:clamp(0,(var(--k,0) - .7)*4,1)}

/* the settle: real headline and price form, rising in three arrivals */
.arr-settle .hero-lead h1{font-size:clamp(44px,5.4vw,80px);font-weight:800;line-height:.92;color:#fff;
  letter-spacing:-.022em;text-shadow:var(--tshadow)}
.arr-settle .hero-lead h1 em{font-style:normal;color:var(--green);display:block}
.arr-settle .hero-lede{margin-top:14px;max-width:40ch;text-shadow:var(--tshadow);color:#DCE8DD}
.arr-settle .hero-card{margin-top:20px;max-width:520px}
.arr-settle .hero-lead h1{opacity:var(--ka,1);transform:translateY(calc((1 - var(--ka,1))*28px))}
.arr-settle .hero-lede{opacity:var(--kb,1);transform:translateY(calc((1 - var(--kb,1))*18px))}
.arr-settle .hero-card,.arr-settle .hero-ctas{opacity:var(--kc2,1);transform:translateY(calc((1 - var(--kc2,1))*18px))}
.arr-settle .arr-col{max-width:min(600px,50vw)}
.arr-settle .arr-col::before{inset:-12% -30% -12% -40%}
@media (max-height:780px) and (min-width:721px){
  .arr-settle .hero-lead h1{font-size:clamp(40px,4.4vw,62px)}
  .arr-settle .hero-lede{display:none}
}

/* signature: the arrival readout and the hairline that draws down the edge */
.arr-hud{position:absolute;left:24px;bottom:24px;margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.14em;color:#DCE8DD;padding:8px 12px;
  background:rgba(8,16,11,.55);border:1px solid rgba(98,199,102,.28);border-radius:10px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,10,7,.85)}
.arr-hud b{color:var(--green);font-weight:500}
.arr-line{position:absolute;left:12px;top:0;height:100%;width:2px;overflow:visible}
.arr-line line{stroke:var(--green);stroke-width:2;opacity:.55;stroke-dasharray:100;
  stroke-dashoffset:calc(100 - 100*var(--p,0));vector-effect:non-scaling-stroke}
.arr-ring{position:absolute;right:24px;bottom:24px;width:40px;height:40px;color:var(--green);opacity:.85;transform:rotate(-90deg)}
.arr-stage.video-ready .arr-ring,.arr-stage.video-failed .arr-ring{opacity:0;transition:opacity .4s}
.arr-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.2em;color:#C9D8CB;opacity:calc(1 - var(--p,0)*12);text-shadow:var(--tshadow)}
@media (max-height:560px){.arr-hud,.arr-cue,.arr-ring{display:none}}

/* ---- phones and portrait screens get the scroll too, on a 0.9 MB vertical cut ---- */
@media (orientation: portrait), (max-width: 720px){
  .arrival{height:420vh}
  .arr-band{align-items:flex-start;padding-top:max(92px,13svh)}
  .arr-band .arr-col{max-width:none}
  .arr-h{font-size:clamp(40px,11.5vw,62px)}
  .arr-s{max-width:30ch}
  .arr-band .arr-col::before{inset:-45% -20% -60% -30%;
    background:radial-gradient(ellipse 72% 60% at 40% 42%,rgba(5,12,8,.74) 0%,rgba(5,12,8,.5) 50%,rgba(5,12,8,0) 80%)}
  .arr-settle .hero-lead h1{font-size:clamp(38px,10.5vw,56px)}
  .arr-settle .hero-lede{display:none}
  /* the buttons pin to the bottom of the screen, so the column must not be their anchor */
  .arr-settle .arr-col,.arr-settle .hero-card{position:static}
  /* a transform would make the card their anchor again; the buttons carry the fade instead */
  .arr-settle .hero-card{transform:none;opacity:1}
  .arr-settle .hero-ctas{position:absolute;left:20px;right:20px;bottom:calc(152px + env(safe-area-inset-bottom,0px));margin:0}
  /* the call bar under it already carries the number; one button here, clear of the chat button */
  .arr-settle .hero-ctas .btn-ghost{display:none}
  .arr-hud{display:none}
  .arr-ring{top:auto;right:auto;left:20px;bottom:calc(98px + env(safe-area-inset-bottom,0px));width:34px;height:34px}
  .arr-line{display:none}
}

/* ---- the still hero: phones and portrait screens, phones held sideways, reduced motion, and
   Data Saver (set by the script). The media list must match GATES in the script exactly.
   To bring the phone flipbook back, drop the first two queries here and set PHONE_SCRUB. ---- */
@media (orientation: portrait), (max-width: 720px), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .arrival{height:auto}
  .arr-stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end}
  .arr-poster{background-image:var(--arr-end);background-position:74% 50%}
  .arr-vid,.arr-canvas,.arr-ring,.arr-line,.arr-cue,.b1,.b2,.b3{display:none}
  .arr-hud{position:absolute;top:auto;bottom:auto;top:92px;left:20px}
  .arr-scrim{background:linear-gradient(180deg,rgba(6,14,9,.2) 0%,rgba(6,14,9,.35) 38%,rgba(6,14,9,.9) 72%,rgba(6,14,9,.96) 100%)}
  .arr-band.arr-settle{position:relative;opacity:1;pointer-events:auto;padding:40vh 0 36px;align-items:flex-end}
  .arr-settle .arr-col{max-width:none}
  .arr-settle .arr-col::before{display:none}
  .arr-settle .hero-lead h1,.arr-settle .hero-lede,.arr-settle .hero-card,.arr-settle .hero-ctas{opacity:1;transform:none;position:static}
}
.arrival.arr-static{height:auto}
.arr-static .arr-stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end}
.arr-static .arr-poster{background-image:var(--arr-end);background-position:74% 50%}
.arr-static .arr-vid,.arr-static .arr-canvas,.arr-static .arr-ring,.arr-static .arr-line,.arr-static .arr-cue,.arr-static .b1,.arr-static .b2,.arr-static .b3{display:none}
.arr-static .arr-hud{position:absolute;top:auto;bottom:auto;top:92px;left:20px}
.arr-static .arr-scrim{background:linear-gradient(180deg,rgba(6,14,9,.2) 0%,rgba(6,14,9,.35) 38%,rgba(6,14,9,.9) 72%,rgba(6,14,9,.96) 100%)}
.arr-static .arr-band.arr-settle{position:relative;opacity:1;pointer-events:auto;padding:40vh 0 36px;align-items:flex-end}
.arr-static .arr-settle .arr-col{max-width:none}
.arr-static .arr-settle .arr-col::before{display:none}
.arr-static .arr-settle .hero-lead h1,.arr-static .arr-settle .hero-lede,.arr-static .arr-settle .hero-card,.arr-static .arr-settle .hero-ctas{opacity:1;transform:none;position:static}
/* phones: the still fills exactly one screen. Headline in the sky, the truck in the middle,
   one button above the chat button and call bar, and a slow push-in so the scene breathes. */
@media (orientation: portrait), (max-width: 720px){
  /* one screen below the site header, which the script measures into --hdr-h */
  .arrival .arr-stage{height:calc(100vh - var(--hdr-h,124px));height:calc(100svh - var(--hdr-h,124px));min-height:420px;display:block}
  .arrival .arr-poster{background-image:var(--arr-end-m,var(--arr-end));background-position:50% 55%;
    transform-origin:60% 58%;animation:arrpush 22s cubic-bezier(.2,.6,.2,1) .3s both}
  .arrival .arr-scrim{background:linear-gradient(180deg,rgba(6,14,9,.62) 0%,rgba(6,14,9,.32) 30%,rgba(6,14,9,0) 46%,rgba(6,14,9,0) 64%,rgba(6,14,9,.45) 86%,rgba(6,14,9,.7) 100%)}
  .arrival .arr-band.arr-settle{position:absolute;inset:0;padding:max(28px,5svh) 0 0;align-items:flex-start}
  .arrival .arr-settle .hero-lead h1{font-size:clamp(38px,10.5vw,56px)}
  .arrival .arr-settle .hero-lede{display:none}
  .arrival .arr-settle .hero-card{position:static;transform:none}
  .arrival .arr-settle .hero-ctas{position:absolute;left:20px;right:20px;bottom:calc(150px + env(safe-area-inset-bottom,0px));margin:0}
  .arrival .arr-settle .hero-ctas .btn-ghost{display:none}
  .arrival .arr-hud{display:none}
}
@keyframes arrpush{from{transform:scale(1)}to{transform:scale(1.08)}}

/* inside the arrival the settle is not the old forest band */
.arrival .hero{background:none;overflow:visible}
.arrival .hero::before{display:none}
/* ================= every page: the whole-site-animated standard =================
   One place, not stacked boxes: a fixed dusk environment, a route line that carries on
   from the hero's hairline and lights a stop at each section, the hero's truck behind
   every page header, and one entrance per block type. Transform and opacity only.
   Start states live behind html.fx-on so every page is complete without JS. */

/* entrances start off to the side; the page itself must never scroll sideways.
   clip, not hidden, so sticky elements keep working (hidden first as the fallback) */
html,body{overflow-x:hidden;overflow-x:clip}

/* the environment: a slow dusk glow behind every page */
body{isolation:isolate}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%,color-mix(in srgb,var(--green) 9%,transparent),transparent 70%),
    radial-gradient(34% 38% at 84% 78%,color-mix(in srgb,#E9B96A 7%,transparent),transparent 70%);
  animation:envdrift 90s ease-in-out -30s infinite alternate}
@keyframes envdrift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,1.5%,0)}}

/* the page header: the same dusk street the hero lands on, under the green */
.pagehead{background:
  linear-gradient(180deg,color-mix(in srgb,var(--forest) 80%,transparent),color-mix(in srgb,var(--forest) 90%,transparent)),
  url('/assets/arrivalendsm.webp') 72% 62%/cover no-repeat,var(--forest)}
.fx-on .pagehead h1 .phw{display:inline-block;animation:phrise .9s var(--ease-out-expo) both;animation-delay:calc(var(--i,0)*55ms + 80ms)}
.fx-on .pagehead .pagehead-lede{animation:phfade .9s var(--ease-out-expo) .35s both}
.fx-on .pagehead .pagehead-facts{animation:phfade .9s var(--ease-out-expo) .5s both}
@keyframes phrise{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes phfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- the route ---------- */
main{position:relative}
.route{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;overflow:visible;display:none}
@media (min-width:1240px){.fx-on .route{display:block}}
.route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route .route-bg{stroke:color-mix(in srgb,var(--green) 16%,transparent);stroke-width:1.5}
.route .route-fg{stroke:var(--green);stroke-width:2;opacity:.75}
.route circle{fill:var(--bg);stroke:color-mix(in srgb,var(--green) 35%,transparent);stroke-width:1.5;
  transition:fill .5s var(--ease-out-soft),stroke .5s var(--ease-out-soft)}
.route circle.lit{fill:var(--green);stroke:var(--green)}
.route circle.here{animation:stoppulse 4s ease-in-out -1.2s infinite}
@keyframes stoppulse{0%,100%{stroke-width:1.5;stroke-opacity:1}50%{stroke-width:7;stroke-opacity:.18}}

/* ---------- entrances by block type; --i is the stagger index set by the script ---------- */
/* stack: cards drop in like a load going on */
.fx-on [data-fx="stack"] :is(.svc,.incl-item,.wf,.w,.theme,.leave-card,.rv){opacity:0;transform:translateY(-20px) scale(.98);
  transition:opacity .6s var(--ease-out-expo),transform .7s cubic-bezier(.34,1.3,.64,1),border-color .25s,box-shadow .4s,background-color .15s;
  transition-delay:calc(var(--i,0)*50ms)}
.fx-on [data-fx="stack"].in :is(.svc,.incl-item,.wf,.w,.theme,.leave-card,.rv){opacity:1;transform:none}

/* rows: one line at a time, like streets on a route */
.fx-on [data-fx="rows"] :is(.local-row,.faq-i,.svc-row){opacity:0;transform:translateX(-20px);
  transition:opacity .6s var(--ease-out-expo),transform .7s var(--ease-out-expo);transition-delay:calc(var(--i,0)*70ms)}
.fx-on [data-fx="rows"].in :is(.local-row,.faq-i,.svc-row){opacity:1;transform:none}
.fx-on [data-fx="rows"] .radius{opacity:0;transform:scale(.95);transition:opacity .8s var(--ease-out-expo) .2s,transform .9s var(--ease-out-expo) .2s}
.fx-on [data-fx="rows"].in .radius{opacity:1;transform:none}

/* pop: small things spring into place */
.fx-on [data-fx="pop"] :is(.tr,.city,.jump-in a){opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .6s var(--ease-out-expo),transform .7s cubic-bezier(.34,1.56,.64,1),border-color .15s,color .15s;transition-delay:calc(var(--i,0)*45ms)}
.fx-on [data-fx="pop"].in :is(.tr,.city,.jump-in a){opacity:1;transform:none}
.fx-on [data-fx="pop"] .tr-ico{transform:scale(.4) rotate(-20deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*45ms + 120ms)}
.fx-on [data-fx="pop"].in .tr-ico{transform:none}

/* route: the three kinds of move arrive in order */
.fx-on [data-fx="route"] .sp{opacity:0;transform:translateX(-24px);
  transition:opacity .7s var(--ease-out-expo),transform .8s var(--ease-out-expo),background-color .15s;transition-delay:calc(var(--i,0)*100ms)}
.fx-on [data-fx="route"].in .sp{opacity:1;transform:none}

/* approach: the working tools come up from depth */
.fx-on [data-fx="approach"] :is(.est,.ptab){opacity:0;transform:scale(.94) translateY(18px);
  transition:opacity .8s var(--ease-out-expo),transform 1s var(--ease-out-expo)}
.fx-on [data-fx="approach"] .est-band-copy{opacity:0;transform:translateX(-18px);
  transition:opacity .8s var(--ease-out-expo) .12s,transform .9s var(--ease-out-expo) .12s}
.fx-on [data-fx="approach"].in :is(.est,.ptab,.est-band-copy){opacity:1;transform:none}

/* door: each photo revealed by a roll-up truck door */
.fx-on [data-fx="door"] .pf{position:relative}
.fx-on [data-fx="door"] .pf::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/3;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,#DCDDD6 0 13px,#C9CBC2 13px 15px);
  box-shadow:inset 0 -6px 0 #B7BAB0;transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.7,0,.2,1)}
.fx-on [data-fx="door"].in .pf::after{transform:translateY(-101%)}
.fx-on [data-fx="door"] .pf:nth-child(2)::after{transition-delay:.12s}
.fx-on [data-fx="door"] .pf:nth-child(3)::after{transition-delay:.24s}
.fx-on [data-fx="door"] .pf:nth-child(4)::after{transition-delay:.36s}

/* rise: quiet, between louder neighbors */
.fx-on [data-fx="rise"] :is(.vd,.rev,.rev-photo){opacity:0;transform:translateY(22px) scale(.98);
  transition:opacity .7s var(--ease-out-expo),transform .8s var(--ease-out-expo);transition-delay:calc(var(--i,0)*80ms)}
.fx-on [data-fx="rise"].in :is(.vd,.rev,.rev-photo){opacity:1;transform:none}

/* part: two halves slide apart from the middle */
.fx-on [data-fx="part"] :is(.crew-photo,.contact-form-wrap){opacity:0;transform:translateX(32px);transition:opacity .8s var(--ease-out-expo),transform 1s var(--ease-out-expo)}
.fx-on [data-fx="part"] :is(.crew-copy,.contact-main){opacity:0;transform:translateX(-32px);transition:opacity .8s var(--ease-out-expo) .08s,transform 1s var(--ease-out-expo) .08s}
.fx-on [data-fx="part"].in :is(.crew-photo,.crew-copy,.contact-main,.contact-form-wrap){opacity:1;transform:none}

/* steps: the route draws across, each step lands as the line reaches it */
.fx-on [data-fx="steps"] .step{border-top-color:transparent;position:relative}
.fx-on [data-fx="steps"] .step::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.fx-on [data-fx="steps"] .step > *{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out-expo),transform .7s var(--ease-out-expo)}
.fx-on [data-fx="steps"].in .step::after{transform:scaleX(1)}
.fx-on [data-fx="steps"].in .step > *{opacity:1;transform:none}
.fx-on [data-fx="steps"] .step:nth-child(1) > *{transition-delay:.35s}
.fx-on [data-fx="steps"] .step:nth-child(2)::after{transition-delay:.6s}
.fx-on [data-fx="steps"] .step:nth-child(2) > *{transition-delay:.95s}
.fx-on [data-fx="steps"] .step:nth-child(3)::after{transition-delay:1.2s}
.fx-on [data-fx="steps"] .step:nth-child(3) > *{transition-delay:1.55s}
.fx-on [data-fx="steps"] .step:nth-child(4)::after{transition-delay:1.8s}
.fx-on [data-fx="steps"] .step:nth-child(4) > *{transition-delay:2.1s}

/* the close: the truck from the hero is still waiting, door open */
.final{background:
  linear-gradient(180deg,color-mix(in srgb,var(--forest) 74%,transparent),color-mix(in srgb,var(--forest) 90%,transparent)),
  url('/assets/arrivalendsm.webp') 70% 60%/cover no-repeat,var(--forest)}
.final .btn-primary{position:relative}
.final .btn-primary::before{content:"";position:absolute;inset:-6px;border-radius:14px;z-index:-1;pointer-events:none;
  box-shadow:0 0 34px color-mix(in srgb,var(--green) 55%,transparent);opacity:0}
.fx-on [data-fx="final"].in.alive .final .btn-primary::before,.fx-on .final[data-fx="final"].in.alive .btn-primary::before{animation:ctaglow 4.5s ease-in-out -1.5s infinite}
@keyframes ctaglow{0%,100%{opacity:0}50%{opacity:.8}}
.fx-on section[data-fx="final"] .final,.fx-on .final[data-fx="final"]{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .9s var(--ease-out-expo),transform 1s var(--ease-out-expo)}
.fx-on section[data-fx="final"].in .final,.fx-on .final[data-fx="final"].in{opacity:1;transform:none}

/* services: heading pinned left, cards on the right (homepage) */
@media (min-width:1000px){
  .svc-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.2fr);gap:44px;align-items:start}
  .svc-split .sec-hd{position:sticky;top:120px;margin-bottom:0}
  .svc-split .svcs{grid-template-columns:repeat(3,1fr)}
}
/* area: rows and the radius card side by side (homepage) */
@media (min-width:900px){
  .area-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
  .area-grid .radius{position:sticky;top:120px}
}

/* entrance done: retire every stagger so hovers answer at once */
.fx-on [data-fx].fx-done *,.fx-on [data-fx].fx-done *::after,.fx-on [data-fx].fx-done *::before{transition-delay:0s!important}

/* hidden tab: stop every loop at once (animation-play-state does not inherit) */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .fx-on [data-fx] :is(.tr,.tr-ico,.sp,.est,.est-band-copy,.ptab,.svc,.incl-item,.wf,.w,.theme,.leave-card,.rv,.faq-i,.local-row,.svc-row,.city,.jump-in a,.vd,.rev,.rev-photo,.crew-photo,.crew-copy,.contact-main,.contact-form-wrap,.radius,.final),
  .fx-on .final[data-fx],
  .fx-on [data-fx="steps"] .step > *{opacity:1!important;transform:none!important;transition:none!important}
  .fx-on [data-fx="door"] .pf::after{display:none}
  .fx-on [data-fx="steps"] .step{border-top-color:var(--green)}
  .fx-on [data-fx="steps"] .step::after{display:none}
  body::before{animation:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}