:root{
  --paper:#f6faf3;--mint:#e3f1e2;--green:#12361f;--moss:#2a6a3d;--lime:#8fd14f;--red:#d63b2f;--red2:#b82d23;--ink:#0f2a18;
  --ease:cubic-bezier(.2,.7,.2,1);--focus:#1a73e8;
}
html{background:var(--green)}
body.ess{font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;color:var(--ink);background:var(--paper)}
.s{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.35em;border-radius:999px;font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s;white-space:nowrap}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.btn--red{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(214,59,47,.35)}
.btn--red:hover{background:var(--red2);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--green);transform:translateY(-2px)}
.btn--lg{font-size:1.08rem;padding:1.05em 1.6em}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.kick{font:700 .8rem/1.4 "Archivo",sans-serif;font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:1.1rem}
.kick span{display:inline-block;padding-bottom:.5em;border-bottom:3px solid currentColor}
.hero .kick{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero .kick span{border-bottom-color:var(--lime)}
.kick--dark{color:var(--moss)}

/* nav */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(14px,3vw,36px);pointer-events:none;transition:background .3s,box-shadow .3s}
.nav>*{pointer-events:auto}
.nav__logo{display:block;width:78px;padding:4px 8px;border-radius:14px;background:rgba(246,250,243,.94);box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .3s var(--ease)}
.nav__logo:hover{transform:rotate(-2deg) scale(1.03)}
.nav__logo img{width:100%;height:auto}
@media (max-width:520px){.nav__logo{width:62px}}

/* nav pill + menu theme */
.ess{--nav-active-bg:#8fd14f;--nav-active-ink:#12361f;--burger-bg:rgba(18,54,31,.88);--burger-open-bg:#8fd14f;--burger-open-ink:#12361f;--m1:#12361f;--m2:#1c6a39;--menu-ink:#fff;--menu-accent:#8fd14f}
.nav__links{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(18,54,31,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.nav__links a{color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;padding:.6em 1.15em;border-radius:999px}
.nav__links a:hover{background:rgba(255,255,255,.16)}
.nav__links a.active:hover{background:#8fd14f}
.ess .menu__list a{font-stretch:80%;font-weight:900;text-transform:uppercase;font-family:"Archivo",sans-serif}
@media (max-width:700px){.nav__links{display:none}.burger{display:block}}

/* progress rail: a thin mow line down the right edge */
.rail{position:fixed;z-index:45;right:10px;top:22vh;bottom:22vh;width:6px;border-radius:6px;background:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(18,54,31,.12);pointer-events:none;mix-blend-mode:normal}
.rail__fill{position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(180deg,var(--lime) 0 10px,var(--moss) 10px 20px);transform-origin:50% 0;transform:scaleY(var(--sp,0));will-change:transform}
.rail__mower{position:absolute;left:50%;top:calc(var(--sp,0) * 100%);width:20px;height:30px;margin:-15px 0 0 -10px;background:url("../shared/img/mower.svg") center/contain no-repeat;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
@media (max-width:640px){.rail{right:4px;width:4px;top:26vh;bottom:26vh}.rail__mower{width:16px;height:24px;margin:-12px 0 0 -8px}}

/* ============ HERO ============ */
.hero{display:flex;align-items:flex-end;color:#fff;background:var(--green)}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;object-position:50% 60%;transform:translate3d(0,var(--py,0px),0) scale(var(--zoom,1.04));transform-origin:50% 60%;will-change:transform;animation:heroIn 2.4s var(--ease) both}
@keyframes heroIn{from{filter:brightness(1.25) saturate(.7);transform:translate3d(0,0,0) scale(1.16)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,34,18,.9) 0%,rgba(9,34,18,.55) 34%,rgba(9,34,18,.08) 62%,rgba(255,255,255,.06) 100%)}
.hero__dew{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle at 18% 78%,rgba(255,255,255,.55) 0 1.5px,transparent 2.5px) 0 0/90px 70px,
 radial-gradient(circle at 62% 38%,rgba(255,255,255,.45) 0 1.2px,transparent 2.2px) 0 0/130px 90px,
 radial-gradient(circle at 80% 88%,rgba(255,255,255,.5) 0 1.4px,transparent 2.4px) 0 0/110px 80px;
 opacity:.55;mask-image:linear-gradient(0deg,#000 0,#000 45%,transparent 75%);-webkit-mask-image:linear-gradient(0deg,#000 0,#000 45%,transparent 75%);animation:dew 6s ease-in-out infinite alternate}
@keyframes dew{from{opacity:.25}to{opacity:.7}}
.hero__copy{position:relative;z-index:2;width:100%;max-width:1280px;padding:0 clamp(18px,5vw,64px) clamp(70px,13vh,130px);transform:translate3d(0,calc(var(--hs,0) * -70px),0);opacity:calc(1 - var(--hs,0) * 1.5)}
.hero h1{font-weight:900;font-stretch:78%;text-transform:uppercase;line-height:.86;letter-spacing:-.012em;font-size:clamp(3.4rem,11.5vw,10.5rem);margin:0 0 .22em}
.hero h1 .ln{display:block;overflow:hidden;padding:.04em 0}
.hero h1 .ln i{display:inline-block;font-style:normal;transform:translateY(108%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .ln:nth-child(1) i{animation-delay:.35s}
.hero h1 .ln:nth-child(2) i{animation-delay:.55s}
.hero h1 .g{color:var(--lime)}
@keyframes rise{to{transform:none}}
.hero .kick{opacity:0;animation:fadeUp .9s .15s var(--ease) forwards}
.hero .lede{max-width:44ch;font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.5;font-stretch:100%;font-weight:500;margin-bottom:1.6rem;opacity:0;animation:fadeUp .9s .95s var(--ease) forwards}
.hero .cta{opacity:0;animation:fadeUp .9s 1.15s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__down{position:absolute;z-index:3;left:50%;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:8px;font:700 .66rem/1 "Archivo",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#fff;text-decoration:none;transform:translateX(-50%);opacity:calc(1 - var(--hs,0) * 4)}
.hero__down i{width:2px;height:34px;background:linear-gradient(180deg,#fff,transparent);transform-origin:50% 0;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:760px){.hero__down{display:none}.hero__copy{padding-bottom:84px}.hero .cta .btn{width:100%;justify-content:center}}

/* ============ WORK ============ */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(76px,10vh,110px) clamp(18px,5vw,64px) clamp(36px,6vh,64px);background:
 repeating-linear-gradient(180deg,rgba(143,209,79,.10) 0 64px,rgba(143,209,79,0) 64px 128px),var(--mint)}
.work h2{font-weight:900;font-stretch:80%;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-size:clamp(2.6rem,6.4vw,6rem);color:var(--green);margin-bottom:clamp(18px,3.4vh,34px)}
.work h2 em{font-style:normal;color:var(--red)}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vh,18px) clamp(14px,2vw,28px)}
.svc li{display:flex;gap:12px;align-items:flex-start}
.svc svg{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;background:var(--green);stroke:var(--lime);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}
.svc b{display:block;font-weight:800;font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.15;color:var(--green)}
.svc span{display:block;font-weight:500;font-size:clamp(.82rem,.95vw,.92rem);line-height:1.3;color:#3b5a46;margin-top:2px}
.work__fig{position:relative;margin:0;aspect-ratio:2048/1144;border-radius:6px;overflow:hidden;background:var(--green);box-shadow:0 30px 60px -20px rgba(18,54,31,.5)}
.work__plain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.js .work__plain{opacity:0}
.strip{position:absolute;left:0;right:0;overflow:hidden;--dir:-1;--t:clamp(0,calc((var(--q,0) - .08 - var(--i) * .05) / .34),1);transform:translate3d(calc((1 - var(--t)) * var(--dir) * 104%),0,0);will-change:transform}
.strip:nth-child(even){--dir:1}
.strip>i{position:absolute;inset:0;background-image:url("../shared/img/essential-work.webp");background-repeat:no-repeat}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 30%);opacity:calc(1 - var(--t))}
.work__tag{position:absolute;z-index:4;left:12px;top:12px;font:700 .68rem/1 "Archivo",sans-serif;font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);padding:.55em .8em;border-radius:3px}
@media (max-width:860px){
  .work{grid-template-columns:1fr;align-content:center;gap:16px;padding-top:70px;padding-bottom:30px}
  .work__fig{order:-1;aspect-ratio:2048/1144}
  .work h2{font-size:clamp(2.1rem,10.5vw,3.2rem);margin-bottom:12px}
  .svc{gap:9px 12px}
  .svc svg{width:30px;height:30px;padding:6px}
  .svc span{display:none}
}

/* ============ CONTACT ============ */
.contact{display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:
 repeating-linear-gradient(90deg,#14522c 0 9vw,#1c6a39 9vw 18vw);background-position-x:calc(var(--q,0) * -18vw)}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(9,34,18,.55),rgba(9,34,18,.82) 70%);pointer-events:none}
.contact__card{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px clamp(18px,5vw,64px) 24px}
.contact h2{font-weight:900;font-stretch:78%;text-transform:uppercase;line-height:.88;font-size:clamp(2.8rem,8.4vw,7.6rem);margin-bottom:clamp(18px,3vh,32px)}
.phone{display:inline-block;font-weight:800;font-stretch:100%;font-size:clamp(2.1rem,5.4vw,4.6rem);letter-spacing:.01em;color:var(--lime);text-decoration:none;margin-bottom:clamp(18px,3vh,30px);position:relative}
.phone::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:4px;background:repeating-linear-gradient(90deg,var(--lime) 0 14px,transparent 14px 22px);transform-origin:0 50%;transition:transform .5s var(--ease)}
.phone:hover::after{transform:scaleX(.5)}
.contact .cta{justify-content:center}
.foot{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;padding:20px clamp(18px,5vw,64px);background:rgba(6,24,12,.85);font-size:.88rem;color:rgba(255,255,255,.82);text-align:left}
.foot img{width:64px;height:auto;flex:none}
.foot small{opacity:.75}
@media (max-width:760px){.foot{padding-bottom:84px;justify-content:flex-start}.contact .cta .btn{width:100%;justify-content:center}.contact h2{font-size:clamp(2.4rem,12.5vw,3.6rem)}}

/* ============ FAB: "Fresh Cut" ============ */
.fab{position:fixed;z-index:60;right:18px;bottom:18px;display:flex;align-items:center;height:56px;border-radius:28px;background:var(--red);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(214,59,47,.45);overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s}
.fab:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(214,59,47,.5)}
.fab__label{display:block;max-width:0;overflow:hidden;white-space:nowrap;padding-left:0;clip-path:inset(0 100% 0 0);transition:max-width .9s var(--ease),padding .9s var(--ease),clip-path .9s var(--ease)}
.fab__label span{display:block;padding-left:22px}
.fab.run .fab__label,.fab:hover .fab__label,.fab:focus-visible .fab__label{max-width:150px;clip-path:inset(0 0 0 0)}
.fab__ic{display:grid;place-items:center;width:56px;height:56px;flex:none}
.fab__ic svg{width:24px;height:24px;fill:currentColor}
.fab__sweep{position:absolute;z-index:3;top:0;bottom:0;left:0;width:60%;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 8px,rgba(255,255,255,0) 8px 16px);transform:translateX(-110%);opacity:0}
.fab.run .fab__sweep,.fab:hover .fab__sweep{animation:sweepFab .9s var(--ease) 1}
@keyframes sweepFab{0%{transform:translateX(-110%);opacity:.9}100%{transform:translateX(260%);opacity:0}}
@media (max-width:520px){.fab{right:12px;bottom:12px;height:52px}.fab__ic{width:52px;height:52px}}

@media (prefers-reduced-motion:reduce){
  .hero__bg img{animation:none;transform:scale(1.04)}.hero h1 .ln i,.hero .kick,.hero .lede,.hero .cta{animation:none;opacity:1;transform:none}.hero__dew{animation:none}.hero__down i{animation:none}
  .js .work__plain{opacity:1}.strip{display:none}.fab__label{max-width:150px;clip-path:none}
}