/* ============================================================================
   Jub's Gardening & Lawn Services
   Register: brand (the page IS the product). Color: committed green identity.
   Theme: warm daylight, photographic. Motion: parallax + rolling reveals.
   ========================================================================== */
:root{
  --paper:    oklch(0.972 0.012 110);   /* warm cream */
  --paper-2:  oklch(0.945 0.016 108);   /* deeper cream */
  --ink:      oklch(0.265 0.030 150);   /* deep green-black */
  --ink-soft: oklch(0.470 0.028 150);
  --green:    oklch(0.530 0.130 150);   /* brand */
  --green-deep: oklch(0.405 0.100 152);
  --forest:   oklch(0.300 0.052 152);   /* drenched panels */
  --forest-ink: oklch(0.205 0.038 152); /* footer */
  --gold:     oklch(0.800 0.125 84);    /* warm accent / stars */
  --gold-deep: oklch(0.700 0.130 70);
  --on-dark:  oklch(0.945 0.022 110);
  --on-dark-soft: oklch(0.840 0.030 120);
  --line: color-mix(in oklch, var(--ink) 13%, transparent);
  --line-light: color-mix(in oklch, var(--on-dark) 22%, transparent);
  --shadow: 0 30px 70px -34px oklch(0.30 0.05 152 / 0.55);
  --ease: cubic-bezier(.16,1,.3,1);     /* ease-out-expo-ish */
  --wrap: 1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.02; margin:0; letter-spacing:-.015em}
em{font-style:italic; font-weight:500}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:28px; width:100%}
/* responsive copy swap — shorter wording on phones, full wording on larger screens */
.m-only{display:none}

/* Rolling reveal — two-way (animates in on enter, back out on exit, re-animates on scroll up) */
.reveal{opacity:1}
.js .reveal{opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
html.reduced .reveal{opacity:1!important; transform:none!important; transition:none!important}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.55em; font:700 16px "Hanken Grotesk"; cursor:pointer;
  padding:15px 26px; border-radius:999px; text-decoration:none; border:0;
  transition:transform .4s var(--ease), background .25s, box-shadow .25s, color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:oklch(0.30 0.05 80)}
.btn-gold:hover{background:var(--gold-deep)}
.btn-green{background:var(--green); color:var(--on-dark); box-shadow:0 14px 30px -14px oklch(0.5 0.13 150 /.8)}
.btn-green:hover{background:var(--green-deep)}
.btn-glass{background:color-mix(in oklch, var(--on-dark) 14%, transparent); color:var(--on-dark);
  border:1.5px solid var(--line-light); backdrop-filter:blur(6px)}
.btn-glass:hover{background:color-mix(in oklch, var(--on-dark) 24%, transparent)}
.btn.big{font-size:18px; padding:17px 30px}

/* ============================== NAV ============================== */
#nav{position:fixed; inset:0 0 auto 0; z-index:90; display:flex; align-items:center; gap:20px;
  padding:18px 28px; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s}
#nav.solid{background:color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter:saturate(1.3) blur(12px);
  padding:11px 28px; box-shadow:0 1px 0 var(--line)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--on-dark); font-family:"Fraunces"; font-weight:600}
#nav.solid .brand{color:var(--ink)}
.brand img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
#nav.solid .brand img{filter:none}
.brand span{display:flex; flex-direction:column; line-height:1; font-size:22px}
.brand small{font:600 10px "Hanken Grotesk"; letter-spacing:.16em; text-transform:uppercase; margin-top:4px; opacity:.85}
.navlinks{display:flex; gap:28px; margin-left:auto; font-weight:600; font-size:15px}
.navlinks a{text-decoration:none; color:var(--on-dark); opacity:.92; transition:opacity .2s}
#nav.solid .navlinks a{color:var(--ink-soft)}
.navlinks a:hover{opacity:1; color:var(--gold)}
#nav.solid .navlinks a:hover{color:var(--green)}
.nav-actions{display:flex; align-items:center; gap:12px}
.navcta{text-decoration:none; font-weight:700; font-size:15px; padding:10px 18px; border-radius:999px;
  background:var(--gold); color:oklch(0.3 0.05 80); white-space:nowrap; transition:transform .3s var(--ease)}
.navcta:hover{transform:translateY(-2px)}
/* ============================== MOW BLOCK (relocated mow interaction — mid-page) ============================== */
/* The "Scroll to mow" reveal no longer lives on the hero. It's a sticky-pinned band mid-page whose
   progress = how far you've scrolled THROUGH the band (scroll-driven, not a gesture lock — a lock only
   suits the very top). The mower drives down, clipping the long grass away to reveal the standard
   statement on a real freshly-mown lawn. */
.mowband{position:relative; height:230vh; padding:0; background:var(--forest)}
.mb-pin{position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; background:var(--forest)}

/* revealed underneath: the standard statement over a real freshly-mown striped lawn */
.mb-reveal{position:absolute; inset:0; z-index:1; display:flex; align-items:center}
.mb-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.mb-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, oklch(0.14 0.045 150 /.82) 0%, oklch(0.16 0.05 152 /.55) 45%, oklch(0.12 0.04 150 /.9) 100%)}
.mb-statement{position:relative; z-index:2; opacity:0; transform:translateY(22px); transition:.7s var(--ease) .05s}
.mb-pin.revealed .mb-statement{opacity:1; transform:none}
.mb-statement .eyebrow{color:var(--gold); margin-bottom:16px}
.mb-statement h2{font-family:"Fraunces"; font-weight:600; letter-spacing:-.015em; color:var(--on-dark);
  font-size:clamp(30px,4.4vw,56px); max-width:18ch; line-height:1.02}

/* mown striped band that leads behind the cutting front, with the Jub's logo mown into it */
.mb-cut{position:absolute; inset:0; z-index:2; will-change:clip-path; clip-path:inset(0 0 100% 0); display:grid; place-items:center;
  background:repeating-linear-gradient(180deg, oklch(0.70 0.135 138) 0 28px, oklch(0.635 0.140 141) 28px 56px)}
/* Jub's logo + subheader, mown into the lawn. Logo is the PNG used as a mask so its colour is a single
   CSS variable — brand-green leaves, white wordmark + subheader. */
.mb-lockup{display:flex; flex-direction:column; align-items:center; gap:clamp(9px,1.5vw,18px);
  padding:0 24px; --leaf:oklch(0.530 0.130 150); --word:#fff}
.mb-logo{width:min(420px,50vw); aspect-ratio:1000/764; display:block;
  /* the green→white transition sits inside the empty gap (y456–459 ≈ 59.7–60.1%) between the outer leaf
     tips (down to 59.6%) and the wordmark (from 60.2%) — so leaves stay fully green, wordmark fully white */
  background:linear-gradient(to bottom, var(--leaf) 0 59.7%, var(--word) 60.2% 100%);
  -webkit-mask:url(assets/jubs-logo.png) center/contain no-repeat;
          mask:url(assets/jubs-logo.png) center/contain no-repeat;
  filter:drop-shadow(0 4px 12px oklch(0.16 0.05 150 /.5))}
.mb-sub{font:800 clamp(11px,2.5vw,19px) "Hanken Grotesk"; letter-spacing:.30em; text-transform:uppercase;
  color:var(--word); text-align:center; line-height:1.1; text-shadow:0 2px 10px oklch(0.16 0.05 150 /.45)}
.mb-amp{color:var(--leaf)}   /* just the ampersand in brand green */
/* long unmown, shadowy grass covering it all at the start (original gradient texture) */
.mb-field{position:absolute; inset:0; z-index:3; will-change:clip-path;
  background:
    radial-gradient(62% 52% at 26% 28%, oklch(0.32 0.062 150 /.85), transparent 62%),
    radial-gradient(54% 60% at 80% 70%, oklch(0.295 0.056 152 /.85), transparent 62%),
    repeating-linear-gradient(96deg, oklch(0.275 0.055 150) 0 3px, oklch(0.255 0.05 152) 3px 7px)}

/* contextual prompt on the long grass, mid-stage; the mower descends toward it and it fades as you mow */
.mb-lead{position:absolute; left:0; right:0; top:46%; z-index:4; text-align:center; padding:0 24px;
  text-shadow:0 2px 20px oklch(0.14 0.04 150 /.7); transition:opacity .3s}
.mb-lead .eyebrow{color:var(--gold); margin-bottom:8px}
.mb-lead h2{font-family:"Fraunces"; font-weight:600; color:#fff; font-size:clamp(26px,3.4vw,44px); margin:0;
  text-shadow:0 2px 22px oklch(0.14 0.04 150 /.6)}

/* keep the fixed nav legible over the grass + a soft cutting edge that tracks the mower */
.mb-edge{position:absolute; left:0; right:0; top:0; height:30px; z-index:5; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, oklch(0.10 0.03 150 /.19) 55%, oklch(0.10 0.03 150 /.44)); will-change:transform}

/* rig holds the mower + prompt and is moved as one, so the prompt tracks the mower */
.mb-rig{position:absolute; left:50%; top:0; z-index:6; transform:translate(-50%,-160%); will-change:transform; pointer-events:none}
.mb-mower{width:clamp(96px,10.5vw,158px); height:auto; display:block;
  filter:drop-shadow(0 14px 18px oklch(0.14 0.04 150 /.55)); transform-origin:center;
  animation:mowerIdle 1.1s ease-in-out infinite}
@keyframes mowerIdle{0%,100%{transform:translateY(0) rotate(-.6deg)} 50%{transform:translateY(-4px) rotate(.6deg)}}
/* clipping spray — cut grass blown out the back (top) of the deck */
.mb-spray{position:absolute; left:50%; top:10px; width:0; height:0; opacity:0; transition:opacity .25s}
.mb-fleck{position:absolute; width:11px; height:3px; border-radius:2px; background:oklch(0.30 0.06 150);
  transform-origin:center; animation:mowFly 760ms linear infinite}
.mb-fleck:nth-child(3n){background:oklch(0.255 0.05 152)} .mb-fleck:nth-child(3n+1){background:oklch(0.345 0.065 148); width:8px} .mb-fleck:nth-child(4n){height:4px}
@keyframes mowFly{0%{opacity:0; transform:translate(var(--x0),0) rotate(0)} 14%{opacity:1}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}}
.mb-hint{position:absolute; left:50%; top:100%; margin-top:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font:800 clamp(15px,2.1vw,26px) "Hanken Grotesk"; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark); text-shadow:0 2px 18px oklch(0.14 0.04 150 /.7); white-space:nowrap}
.mb-chev{font-size:1.5em; line-height:.7; animation:chevBounce 1.5s var(--ease) infinite}
@keyframes chevBounce{0%,100%{transform:translateY(0); opacity:.65} 50%{transform:translateY(9px); opacity:1}}
/* reduced motion: no mow animation — land straight on the revealed statement, normal page flow */
html.reduced .mowband{height:auto}
html.reduced .mb-pin{position:relative; height:auto; min-height:60svh; padding-block:clamp(72px,10vw,128px)}
html.reduced .mb-field,html.reduced .mb-cut,html.reduced .mb-rig,html.reduced .mb-lead,html.reduced .mb-edge{display:none}
html.reduced .mb-statement{opacity:1; transform:none}
html.reduced .mb-mower,html.reduced .mb-chev,html.reduced .mb-fleck{animation:none}

/* ============================== HERO ============================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:-12% 0 0 0; z-index:-2; will-change:transform}
.hero-media img{width:100%; height:112%; object-fit:cover}
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, oklch(0.25 0.05 152 /.45) 0%, transparent 26%, transparent 40%, oklch(0.20 0.05 152 /.78) 100%),
    linear-gradient(75deg, oklch(0.20 0.05 152 /.62) 0%, transparent 56%)}
.hero-content{padding-block:0 9vh; max-width:920px}
.rating{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--on-dark);
  background:color-mix(in oklch, var(--forest-ink) 55%, transparent); backdrop-filter:blur(8px);
  border:1px solid var(--line-light); padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600}
.rating .rstars{color:var(--gold); letter-spacing:1px}
.rating b{font-size:15px}
.hero h1{color:var(--on-dark); font-size:clamp(46px,8.2vw,112px); font-weight:600; margin:22px 0 0;
  text-shadow:0 2px 30px oklch(0.2 0.04 150 /.4)}
.hero h1 em{color:var(--gold)}
.lede{color:var(--on-dark); font-size:clamp(17px,1.7vw,22px); max-width:50ch; margin:22px 0 30px; font-weight:500;
  text-shadow:0 1px 16px oklch(0.2 0.04 150 /.5)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap}
.micro{color:var(--on-dark-soft); font-size:14px; font-weight:600; margin:22px 0 0}

/* hero entrance — staggered fade-up on load (scroll-independent, motion-only) */
.js .hero-content>*{opacity:0; transform:translateY(26px); animation:heroIn 1s var(--ease) forwards}
.js .hero-content .rating{animation-delay:.10s}
.js .hero-content h1{animation-delay:.20s}
.js .hero-content .lede{animation-delay:.34s}
.js .hero-content .cta-row{animation-delay:.46s}
.js .hero-content .micro{animation-delay:.56s}
@keyframes heroIn{to{opacity:1; transform:none}}
html.reduced .hero-content>*{opacity:1!important; transform:none!important; animation:none!important}

/* ============================== TRUST RIBBON (thin infinite marquee) ============================== */
.ribbon{background:var(--forest); color:var(--on-dark); padding-block:0}
.marquee{overflow:hidden; padding-block:clamp(10px,1.2vw,15px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)}
.marquee-track{display:flex; flex-wrap:nowrap; width:max-content; will-change:transform;
  animation:ribbonMarquee var(--marquee-dur,40s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.m-item{display:inline-flex; align-items:center; white-space:nowrap; font-size:15px; font-weight:500; color:var(--on-dark-soft)}
.m-item b{font-family:"Fraunces"; font-weight:600; font-size:18px; color:var(--on-dark); margin-right:6px}
.m-item::after{content:"·"; margin-inline:clamp(26px,3.4vw,52px); color:var(--gold); font-weight:700}
@keyframes ribbonMarquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* reduced motion: no scroll — a centered static row, full edges */
html.reduced .marquee{-webkit-mask:none; mask:none}
html.reduced .marquee-track{animation:none; width:100%; justify-content:center; flex-wrap:wrap; gap:10px 0}

/* ============================== shared heading ============================== */
section{padding-block:clamp(72px,10vw,128px); position:relative}
section[id],header[id]{scroll-margin-top:84px}
.eyebrow{display:inline-block; font:800 12.5px "Hanken Grotesk"; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:18px}
.eyebrow.light{color:var(--gold)}
.sec-head{max-width:740px; margin-bottom:54px}
.sec-head h2{font-size:clamp(32px,5vw,62px)}
.sec-head p{color:var(--ink-soft); font-size:19px; margin:18px 0 0; max-width:54ch}
.sec-head.light h2,.sec-head.light .eyebrow{color:var(--on-dark)}
.sec-head.light .eyebrow{color:var(--gold)}

/* ============================== SERVICES ============================== */
.services{background:linear-gradient(var(--paper), var(--paper-2))}
.services-grid{display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(40px,6vw,96px); align-items:start}
.services-intro{position:sticky; top:96px}
.services-intro .eyebrow{margin-bottom:18px}
.services-intro h2{font-size:clamp(32px,4.2vw,56px)}
.services-intro p{color:var(--ink-soft); font-size:19px; margin:18px 0 0; max-width:42ch}
.svc-feature{margin:34px 0 0; max-width:360px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); position:relative}
.svc-feature img,.svc-feature video{width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; display:block; transition:transform 1.2s var(--ease)}
.svc-feature:hover img,.svc-feature:hover video{transform:scale(1.04)}
.svc-feature figcaption{position:absolute; left:0; right:0; bottom:0; padding:40px 22px 18px; color:var(--on-dark);
  font-family:"Fraunces"; font-style:italic; font-size:18px;
  background:linear-gradient(transparent, oklch(0.2 0.04 150 /.72))}
.svc-group{padding:30px 0; border-top:1px solid var(--line)}
.svc-group:first-child{padding-top:6px; border-top:0}
.svc-group h3{font-size:26px; display:flex; align-items:baseline; gap:14px; margin-bottom:18px}
.svc-group h3 .n{font:700 14px "Hanken Grotesk"; color:var(--gold-deep); letter-spacing:.05em}
.svc-group ul{list-style:none; margin:0; padding:0; columns:2; column-gap:30px}
.svc-group li{break-inside:avoid; padding:9px 0 9px 26px; position:relative; font-weight:600; font-size:17.5px;
  transition:color .25s var(--ease)}
.svc-group li::before{content:""; position:absolute; left:0; top:15px; width:13px; height:13px;
  border-radius:50% 50% 50% 1px; background:var(--green); transform:rotate(45deg);
  transition:transform .35s var(--ease), background .25s}
.svc-group li:hover{color:var(--green-deep)}
.svc-group li:hover::before{transform:rotate(45deg) scale(1.25); background:var(--gold-deep)}
.svc-inset{margin:8px 0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.svc-inset img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}

/* ============================== STANDARD statement (the copy revealed by the mow block above) ============================== */
.standard-points{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:16px}
.standard-points li{position:relative; padding-left:30px; max-width:50ch; font-size:17.5px; color:var(--on-dark-soft); font-weight:500}
.standard-points li b{color:var(--on-dark); font-weight:700}
.standard-points li::before{content:""; position:absolute; left:0; top:9px; width:13px; height:13px;
  border-radius:50% 50% 50% 1px; background:var(--gold); transform:rotate(45deg)}
.standard-foot{margin:28px 0 0; font-family:"Fraunces"; font-style:italic; font-size:18px; color:var(--on-dark-soft)}

/* ============================== BEFORE/AFTER ============================== */
.work{background:var(--paper-2)}
.ba{position:relative; aspect-ratio:4/3; max-width:880px; margin-inline:auto; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); user-select:none; touch-action:pan-y; cursor:ew-resize; --x:44%}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba-before{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-tag{position:absolute; bottom:18px; z-index:4; padding:7px 15px; border-radius:10px; font:700 13px "Hanken Grotesk";
  letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark); backdrop-filter:blur(4px)}
.ba-tag.left{left:18px; background:oklch(0.25 0.04 80 /.7)}
.ba-tag.right{right:18px; background:oklch(0.45 0.12 150 /.85)}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--x); width:3px; z-index:5; background:var(--on-dark); transform:translateX(-1.5px)}
.ba-handle span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%;
  background:var(--on-dark); color:var(--green-deep); display:grid; place-items:center; font-size:20px; font-weight:800;
  box-shadow:0 8px 22px -6px oklch(0.2 0.04 150 /.6)}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible span{box-shadow:0 0 0 4px var(--gold)}

/* ============================== REVIEWS ============================== */
.reviews{background:linear-gradient(var(--paper-2), var(--paper))}
.rev-layout{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(36px,5vw,80px); align-items:center}
.rev-score{border-right:1px solid var(--line); padding-right:clamp(20px,4vw,60px)}
.rev-big{font-family:"Fraunces"; font-weight:600; font-size:clamp(90px,13vw,168px); line-height:.8; color:var(--green-deep); letter-spacing:-.03em}
.rev-stars{color:var(--gold); font-size:26px; letter-spacing:4px; margin:14px 0 16px}
.rev-score p{font-size:19px; color:var(--ink-soft); margin:0 0 18px}
.rev-score b{color:var(--ink); font-weight:700}
.rev-score a{color:var(--green); font-weight:700; text-decoration:none}
.rev-score a:hover{text-decoration:underline}
.rev-feature{margin:0 0 30px}
.rev-feature p{font-family:"Fraunces"; font-weight:500; font-size:clamp(22px,2.7vw,34px); line-height:1.25; color:var(--ink); margin:0}
.rev-feature cite{display:block; margin-top:18px; font-style:normal; font-weight:700; font-size:14px; color:var(--ink-soft)}
.flag{color:var(--gold-deep); font-style:italic; font-weight:500; font-size:12.5px}
.rev-small{display:grid; grid-template-columns:1fr 1fr; gap:26px; border-top:1px solid var(--line); padding-top:26px}
.rev-small blockquote{margin:0}
.rev-small p{font-size:17px; line-height:1.5; color:var(--ink); margin:0 0 8px; font-weight:500}
.rev-small cite{font-style:normal; font-size:12px; color:var(--ink-soft)}

/* ============================== WHY ============================== */
.why{background:var(--forest); color:var(--on-dark)}
.why-list{list-style:none; margin:0; padding:0; max-width:980px}
.why-list li{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px); align-items:start;
  padding:34px 0; border-top:1px solid var(--line-light)}
.why-list li:last-child{border-bottom:1px solid var(--line-light)}
.why-list .n{font-family:"Fraunces"; font-weight:500; font-size:clamp(34px,4vw,56px); color:var(--gold); line-height:1}
.why-list h3{font-size:clamp(21px,2.4vw,30px); color:var(--on-dark); margin-bottom:8px; font-weight:600}
.why-list p{color:var(--on-dark-soft); font-size:17.5px; margin:0; max-width:60ch}

/* ============================== QUOTE / CTA ============================== */
.quote{overflow:hidden; isolation:isolate; color:var(--on-dark)}
.quote-media{position:absolute; inset:-12% 0; z-index:-2; will-change:transform}
.quote-media img{width:100%; height:124%; object-fit:cover}
.quote-scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, oklch(0.19 0.04 152 /.92) 0%, oklch(0.19 0.04 152 /.7) 48%, oklch(0.19 0.04 152 /.45))}
.quote-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center}
.quote-copy h2{font-size:clamp(34px,4.6vw,60px); color:var(--on-dark)}
.quote-copy>p{color:var(--on-dark-soft); font-size:19px; margin:18px 0 28px; max-width:40ch}
.quote-facts{margin:32px 0 0; display:flex; flex-direction:column}
.quote-facts div{display:grid; grid-template-columns:88px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line-light)}
.quote-facts dt{font:700 12px "Hanken Grotesk"; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.quote-facts dd{margin:0; color:var(--on-dark); font-size:15.5px}
.quote-form{background:var(--paper); color:var(--ink); border-radius:22px; padding:30px; box-shadow:var(--shadow)}
.qf-title{font-family:"Fraunces"; font-size:24px; font-weight:600; margin:0 0 18px}
.qf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.quote-form label{display:block; font:700 13px "Hanken Grotesk"; color:var(--ink-soft); margin-bottom:14px}
.quote-form input,.quote-form select,.quote-form textarea{display:block; width:100%; margin-top:7px; font:500 16px "Hanken Grotesk";
  padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper-2); color:var(--ink)}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none; border-color:var(--green); background:var(--paper)}
.quote-form .btn{width:100%; justify-content:center; margin-top:4px}
.qf-note{font-size:12.5px; color:var(--ink-soft); font-style:italic; margin:12px 0 0; text-align:center}
.qf-note.sent{color:var(--green); font-weight:700; font-style:normal}

/* ============================== FOOTER ============================== */
.foot{background:var(--forest-ink); color:var(--on-dark-soft); padding:46px 0 26px}
.foot-in{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between}
.foot-brand{display:flex; align-items:center; gap:15px}
.foot-brand b{color:var(--on-dark); font-family:"Fraunces"; font-weight:600; display:block; font-size:18px}
.foot-brand span{font-size:13px; color:var(--on-dark-soft)}
.foot-contact{display:flex; flex-direction:column; align-items:flex-end}
.foot-contact a{color:var(--on-dark); font-weight:700; text-decoration:none; font-size:22px; font-family:"Fraunces"}
.foot-contact span{font-size:13px}
.foot-demo{max-width:var(--wrap); margin:30px auto 0; padding:18px 28px 0; border-top:1px solid var(--line-light);
  font-size:12px; color:color-mix(in oklch, var(--on-dark) 55%, transparent); font-style:italic}

/* ============================== sticky mobile call bar ============================== */
.callbar{display:none; position:fixed; left:14px; right:14px; bottom:12px; z-index:95; text-align:center;
  background:var(--green); color:var(--on-dark); text-decoration:none; font-weight:700; font-size:14.5px; padding:11px 16px; border-radius:11px;
  box-shadow:0 12px 26px -12px oklch(0.2 0.04 150 /.5);
  transform:translateY(150%); opacity:0; pointer-events:none;
  transition:transform .42s var(--ease), opacity .3s ease}
.callbar.show{transform:none; opacity:1; pointer-events:auto}

/* ============================== RESPONSIVE ============================== */
@media(max-width:980px){
  .services-grid{grid-template-columns:1fr; gap:42px}
  .services-intro{position:static}
  .rev-layout{grid-template-columns:1fr; gap:36px}
  .rev-score{border-right:0; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:30px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px}
  .rev-score .rev-big{font-size:90px}
  .rev-score p{flex:1 1 200px}
  .quote-in{grid-template-columns:1fr}
}
@media(max-width:760px){
  .navlinks{display:none}
  .nav-actions{margin-left:auto}   /* keep the call action top-right once the links are hidden */
  .hero{min-height:92svh}
  /* hero: less copy, smaller buttons, more breathing room between each element (Option B — airy) */
  .d-only{display:none}
  .m-only{display:inline}
  .hero-content{padding-block:0 7vh}
  .hero .rating{padding:6px 11px; font-size:11.5px; gap:7px}
  .hero .rating b{font-size:12px}
  .hero h1{font-size:clamp(33px,8.6vw,48px); margin-top:26px}
  .hero .lede{font-size:14.5px; line-height:1.5; margin:22px 0 28px; max-width:26ch}
  .hero .cta-row{gap:11px}
  .hero .btn{padding:10px 16px; font-size:13px}
  .hero .micro{font-size:12px; margin-top:26px}
  .svc-group ul{columns:1}
  .rev-small{grid-template-columns:1fr; gap:18px}
  .mowband{height:200vh}              /* shorter mow travel on phones */
  .mb-statement h2{font-size:clamp(26px,7vw,40px)}
  .callbar{display:block}
  body{padding-bottom:70px}
  .foot-contact{align-items:flex-start}
  .foot-in{gap:14px}
}
@media(max-width:520px){
  .wrap{padding-inline:20px}
  .nav-actions .navcta{display:none}
  .ribbon-in{gap:10px 24px; font-size:14px}
  .qf-row{grid-template-columns:1fr}
  .quote-facts div{grid-template-columns:1fr}
}