/* Lawn Hustlers — concept 3, "The Hustle".
   The third identity they are already running, and the loudest: the bright
   green on black look from their own Instagram flyer, the one that says
   "MAKING LAWNS LOOK LEGENDARY" and "LOCAL. TRUSTED. HUSTLIN' FOR YOUR LAWN."
   Social first, high contrast, built around a qualifier rather than a brochure.
     #6CAB36  their declared brand green, lifted to #8FE03C for the neon accent
              that the flyer actually uses on black
     #BC6240  the terracotta from the crew logo, kept as the secondary
   Green on black is easy; green as TEXT on white is not, so the light sections
   use a darkened variant of the same hue. */

:root{
  --black:#08090A;
  --black-2:#101315;
  --black-3:#1A1F21;
  --white:#FFFFFF;
  --off:#F4F5F2;

  --neon:#8FE03C;         /* the flyer green, on black only */
  --neon-2:#B6F06E;
  --green:#6CAB36;        /* their declared brand green */
  --green-btn:#4E7F26;    /* white text clears 4.5:1 */
  --green-txt:#3B611C;    /* text on white */
  --clay:#BC6240;
  --clay-txt:#8E4526;

  --muted:#9AA39B;
  --muted-l:#5C6459;
  --line:rgba(255,255,255,.13);
  --line-l:rgba(8,9,10,.12);

  --f-dis:'Archivo Black',system-ui,sans-serif;   /* the loud one */
  --f-body:'Space Grotesk',system-ui,sans-serif;  /* the quiet one */
  --hdh:108px;
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:#E8ECE7;
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-dis);font-weight:400;line-height:1.03;letter-spacing:-.02em;text-transform:uppercase}
p{margin:0 0 1em}
section[id]{scroll-margin-top:112px}

.wrap{width:min(100% - 40px,1180px);margin-inline:auto}
.eyebrow{
  font-family:var(--f-body);font-weight:700;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--neon);margin:0 0 14px
}
.sec{padding:96px 0}
.sec-light{background:var(--off);color:#14181A}
.sec-light h2,.sec-light h3,.sec-light h4{color:#0C0F10}
.sec-light .eyebrow{color:var(--green-txt)}
.sec-2{background:var(--black-2)}
.lede{font-size:19px;color:var(--muted);max-width:60ch}
.sec-light .lede{color:var(--muted-l)}

.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;background:var(--neon);transition:width .12s linear}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:0 28px;border-radius:10px;border:2px solid transparent;
  font-family:var(--f-body);font-weight:700;font-size:16px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;text-transform:uppercase;
  transition:transform .16s,background .16s,color .16s,border-color .16s,box-shadow .16s
}
.btn:hover{transform:translateY(-2px)}
.btn-pri{background:var(--neon);color:#0A0D08;box-shadow:0 0 0 rgba(143,224,60,0)}
.btn-pri:hover{background:var(--neon-2);box-shadow:0 10px 30px rgba(143,224,60,.28)}
.sec-light .btn-pri{background:var(--green-btn);color:#fff}
.sec-light .btn-pri:hover{background:var(--green-txt);box-shadow:0 10px 28px rgba(78,127,38,.28)}
.btn-gho{border-color:var(--line);color:#fff;background:transparent}
.btn-gho:hover{border-color:var(--neon);color:var(--neon)}
.sec-light .btn-gho{border-color:var(--line-l);color:#14181A}
.sec-light .btn-gho:hover{border-color:var(--green-btn);color:var(--green-txt)}
.btn-sm{min-height:46px;padding:0 18px;font-size:14px;border-radius:8px}
.btn:disabled,.btn[disabled]{background:#4A5049;border-color:#4A5049;color:#fff;box-shadow:none;cursor:not-allowed;transform:none}

/* ---------------- header ---------------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(8,9,10,.92);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:18px;height:var(--hdh)}
.brand{display:flex;align-items:center;margin-right:auto;min-height:44px;padding-block:4px}
.brand img{height:84px;width:auto}
.nav{display:flex;gap:26px}
.nav a{
  text-decoration:none;font-weight:700;font-size:13.5px;color:#D3D9D1;
  letter-spacing:.09em;text-transform:uppercase;padding:13px 0;position:relative
}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--neon);transition:right .24s}
.nav a:hover::after{right:0}
.nav a:hover{color:#fff}
.burger{display:none;width:48px;height:48px;border:0;background:transparent;padding:0;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{
  content:'';position:absolute;left:11px;right:11px;height:2.5px;background:#fff;border-radius:2px;
  transition:transform .28s,opacity .2s
}
.burger::before{top:16px}.burger span{top:23px}.burger::after{top:30px}
.burger[aria-expanded="true"]::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::after{transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;position:fixed;left:0;right:0;background:var(--black);border-bottom:1px solid var(--line);padding:8px 20px 20px;z-index:59}
.mnav a{display:block;text-decoration:none;font-weight:700;font-size:16px;padding:15px 4px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.07em;color:#E8ECE7}
.mnav a:last-child{border-bottom:0}
.mnav.open{display:block}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:70px 0 84px;background:var(--black)}
.hero-beam{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 8% 0%,rgba(143,224,60,.2),transparent 60%),
    radial-gradient(60% 50% at 96% 100%,rgba(188,98,64,.2),transparent 62%)
}
.hero-stripes{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(115deg,transparent 0 38px,rgba(143,224,60,.5) 38px 40px)
}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:50px;align-items:center}
.hh{font-size:clamp(42px,6.2vw,78px);color:#fff}
.hh .em{
  color:var(--neon);
  text-shadow:0 0 34px rgba(143,224,60,.34)
}
.hsub{font-size:19px;color:#B9C1B6;max-width:50ch;margin-top:20px}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.htick{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.htick li{display:flex;gap:11px;align-items:center;font-size:15px;color:#CFD6CD}
.htick li::before{
  content:'';flex:0 0 22px;height:22px;border-radius:6px;
  border:1px solid rgba(143,224,60,.5);
  background:rgba(143,224,60,.16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE03C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/13px no-repeat
}
.hero-fig{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--black-3);min-height:430px}
.hero-fig img{width:100%;height:100%;object-fit:cover}

/* ---------------- ticker ---------------- */
.tick{background:var(--neon);color:#0A0D08;overflow:hidden;padding:13px 0;border-block:2px solid #0A0D08}
.tick-in{display:flex;gap:0;width:max-content;animation:tk 34s linear infinite}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick span{
  font-family:var(--f-dis);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px
}
.tick span::after{content:'';width:7px;height:7px;border-radius:50%;background:#0A0D08}
@media (prefers-reduced-motion:reduce){.tick-in{animation:none}}

/* ---------------- section head ---------------- */
.shead{max-width:70ch;margin-bottom:44px}
.shead h2{font-size:clamp(30px,4.4vw,52px)}
.shead p{margin-top:16px}

/* ---------------- qualifier ----------------
   This direction puts the qualifier IN the hero rather than in a section
   further down, because the funnel is the whole point of concept 3. */
.qz{
  background:rgba(16,19,21,.72);border:1px solid rgba(255,255,255,.18);border-radius:22px;
  overflow:hidden;position:relative;scroll-margin-top:114px;
  backdrop-filter:blur(30px) saturate(165%);
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)
}
/* specular sheen from the top left, the thing that makes it read as glass */
.qz::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 80% at 6% 0%,rgba(255,255,255,.16),transparent 58%)
}
/* a lit rim along the bottom edge */
.qz::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  padding:1px;background:linear-gradient(180deg,transparent 55%,rgba(143,224,60,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .qz{background:#121618}
}
.qz>*{position:relative;z-index:1}
.qz-hd{
  display:grid;place-items:center;padding:22px 20px 14px;
  background:linear-gradient(180deg,rgba(143,224,60,.16),transparent)
}
.qz-hd img{height:94px;width:auto}
.qz-b{padding:8px 30px 30px}
.qz-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:22px}
.qz-bar i{display:block;height:100%;width:25%;background:var(--neon);border-radius:3px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.qz-step{display:none}
.qz-step.on{display:block}
.qz-q{font-size:clamp(22px,3vw,30px);color:#fff;margin-bottom:6px}
.qz-h{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.qz-opts{display:grid;gap:10px}
.qz-opt{
  width:100%;min-height:62px;text-align:left;padding:14px 18px;border-radius:12px;
  border:1.6px solid var(--line);background:rgba(255,255,255,.04);color:#E8ECE7;
  font-family:var(--f-body);font-size:16px;font-weight:600;cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s
}
.qz-opt:hover{border-color:var(--neon);background:rgba(143,224,60,.1);transform:translateX(3px)}
.qz-back{
  background:none;border:0;color:var(--muted);font-family:var(--f-body);font-size:14px;
  cursor:pointer;padding:12px 4px;margin-top:14px;min-height:44px
}
.qz-back:hover{color:var(--neon)}
.qz-fld{position:relative;margin-bottom:14px}
.qz-fld input{
  width:100%;min-height:56px;padding:22px 16px 8px;border-radius:12px;
  border:1.6px solid var(--line);background:rgba(8,9,10,.6);color:#fff;
  font-family:var(--f-body);font-size:16px
}
.qz-fld input:focus{outline:none;border-color:var(--neon);background:rgba(8,9,10,.8)}
.qz-fld label{
  position:absolute;left:16px;top:18px;font-size:16px;color:var(--muted);pointer-events:none;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),color .18s;transform-origin:0 0
}
.qz-fld input:focus+label,.qz-fld input:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.72);color:var(--neon)}
.qz-res h3{font-size:26px;color:var(--neon);margin-bottom:10px;text-transform:none;
  letter-spacing:-.01em}   /* this line greets someone by name, so it is not shouted */
.qz-res p{font-size:16px;color:#CFD6CD}
.qz-res ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.qz-res ul li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:#E8ECE7}
.qz-res ul li::before{content:'';flex:0 0 8px;height:8px;border-radius:50%;background:var(--neon);margin-top:8px}
.qz-note{font-size:12.5px;color:#7E877C;margin:20px 0 0;line-height:1.55}
.qz .btn{width:100%;margin-top:6px}

/* ---------------- services strip ---------------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cell{
  background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);padding:26px 24px;
  transition:transform .22s,box-shadow .22s,border-color .22s
}
.cell:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(8,9,10,.1);border-color:var(--green)}
.cell h3{font-size:19px;margin-bottom:9px}
.cell p{font-size:15px;color:var(--muted-l);margin:0}
.cell-n{
  font-family:var(--f-dis);font-size:13px;color:var(--green-txt);letter-spacing:.08em;
  display:block;margin-bottom:12px
}

/* ---------------- work collage ----------------
   Every tile holds two stacked layers and swaps between them, so the wall of
   work keeps turning over instead of sitting still. The rotation is driven in
   lh3.js off a single pool, and a photo is never on screen twice at once. */
.coll{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
.cl{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--black-3)}
.cl img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s ease,transform .7s cubic-bezier(.2,.7,.2,1)
}
.cl img.on{opacity:1}
.cl:hover img.on{transform:scale(1.06)}
.cl.tall{grid-row:span 2}
.cl figcaption{
  position:absolute;inset:auto 0 0 0;padding:34px 13px 12px;color:#fff;font-size:13px;line-height:1.4;
  background:linear-gradient(180deg,transparent,rgba(6,7,6,.9));z-index:2
}
.cl figcaption span{display:block;transition:opacity .4s ease}
.cl.swap figcaption span{opacity:0}
.coll-note{font-size:14px;color:var(--muted);margin-top:20px}

/* ---------------- before and after ----------------
   Pairs from the one job, shot a couple of hours apart. Both halves share one
   crop ratio so the eye can match the yard across the split. */
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ba-card{background:var(--black-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 22px}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:18px}
.ba-pair figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:var(--black-3)}
.ba-pair img{width:100%;height:100%;object-fit:cover;display:block}
.ba-tag{
  position:absolute;left:8px;top:8px;padding:5px 9px;border-radius:999px;
  font-family:var(--f-dis);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(8,9,10,.78);color:#fff;backdrop-filter:blur(8px)
}
.ba-tag-on{background:var(--neon);color:#0A0D08}
.ba-card h3{font-size:19px;margin:0 8px 8px}
.ba-card p{margin:0 8px;color:var(--muted);font-size:15px;line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .cl img{transition:none}
  .cl figcaption span{transition:none}
}

/* ---------------- the lawn behind the work ----------------
   A real mown lawn sits under this section, dragged down hard so the white
   headline and the tile captions keep their contrast. */
.sec-lawn{position:relative;background:var(--black-2);isolation:isolate}
.sec-lawn::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:url('/lawn-hustlers-media/bg/lawn-bg.webp') center/cover no-repeat
}
.sec-lawn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,9,10,.9),rgba(8,9,10,.58) 34%,rgba(8,9,10,.72)),
    radial-gradient(80% 60% at 50% 0%,rgba(143,224,60,.14),transparent 70%)
}

/* ---------------- quotes ---------------- */
.qs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.q{
  background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);padding:26px 24px;
  border-left:4px solid var(--green)
}
.q p{font-size:16.5px;color:#14181A;margin:0 0 14px}
.q cite{font-style:normal;font-size:13.5px;color:var(--muted-l)}
.q cite b{display:block;font-size:15px;color:#0C0F10;font-weight:700;margin-bottom:2px;font-family:var(--f-body)}
.qhead{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px
}
.qhead .n{font-family:var(--f-dis);font-size:56px;line-height:1;color:var(--green-txt)}
.qhead p{margin:0;font-size:16px;color:var(--muted-l);max-width:44ch}

/* ---------------- services head plus film ----------------
   The services heading used to run out at seventy characters and leave half
   the row empty, so the crew film now fills that side. */
.svc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:44px;align-items:center;margin-bottom:44px}
.svc-top .shead{margin-bottom:0}
.film{
  position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-l);
  background:#0C0F10;box-shadow:0 22px 60px rgba(8,9,10,.18);aspect-ratio:16/9
}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.film figcaption{
  position:absolute;inset:auto 0 0 0;padding:30px 14px 11px;color:#fff;font-size:12.5px;
  background:linear-gradient(180deg,transparent,rgba(6,7,6,.88))
}

/* ---------------- the drawn strip ----------------
   Illustration, and labelled as illustration. The photographs above are the
   claim; this is the character that goes on the socials. */
.toon{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.toon figure{
  margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--black);position:relative;transition:transform .24s,border-color .24s,box-shadow .24s
}
.toon figure:hover{transform:translateY(-5px);border-color:rgba(143,224,60,.55);box-shadow:0 18px 44px rgba(143,224,60,.14)}
.toon img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.toon figcaption{
  padding:15px 18px 17px;font-family:var(--f-dis);font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--neon)
}
.toon-note{font-size:14px;color:var(--muted);margin-top:20px}

/* ---------------- spring ----------------
   A warm section in an otherwise cold palette, because the message is
   seasonal. The sun turns, the grass grows back, both on a loop. */
.spring{position:relative;overflow:hidden;background:var(--black);padding:104px 0 0}
.spring::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 84% 26%,rgba(255,196,74,.24),transparent 62%),
    radial-gradient(70% 60% at 8% 90%,rgba(143,224,60,.16),transparent 66%)
}
.spring-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-bottom:120px}
.spring h2{font-size:clamp(30px,4.8vw,56px);color:#fff}
.spring h2 em{font-style:normal;color:#FFC44A;text-shadow:0 0 40px rgba(255,196,74,.4)}
.spring .lede{margin-top:18px;color:#C6CDC3}
.spring .hcta{margin-top:28px}
.spring .eyebrow{color:#FFC44A}

.sunwrap{position:relative;display:grid;place-items:center;min-height:300px}
.sun{position:relative;width:min(340px,70vw);aspect-ratio:1}
.sun i{position:absolute;inset:0;border-radius:50%}
/* Drawn as real SVG spokes rather than a masked conic gradient: the masked
   version rendered as nothing at all, and the disc glow has to stay soft
   enough for the spokes to read through it. */
.sun-rays{animation:sunspin 52s linear infinite}
.sun-rays svg{width:100%;height:100%;display:block;overflow:visible}
.sun-rays rect{fill:#FFCE60;opacity:.9}
/* .sun i sets inset:0 and outranks a lone class, so the disc has to match it
   or it fills the whole box and swallows the rays */
.sun i.sun-disc{
  inset:31%;background:radial-gradient(circle at 34% 30%,#FFE9A8,#FFC44A 52%,#F0932B);
  box-shadow:0 0 30px rgba(255,196,74,.45),0 0 66px rgba(255,196,74,.16);
  animation:sunbeat 5.5s ease-in-out infinite
}
@keyframes sunspin{to{transform:rotate(360deg)}}
@keyframes sunbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}

.spring-grass{
  position:absolute;inset:auto 0 0 0;height:150px;pointer-events:none;
  display:block;z-index:1
}
.spring-grass[data-rev]{opacity:1;transform:none;filter:none}
.spring-grass i{
  position:absolute;bottom:0;width:11px;height:var(--h);transform-origin:50% 100%;
  left:var(--x);animation:grassgrow 4.6s cubic-bezier(.2,.75,.25,1) infinite;
  animation-delay:var(--d);animation-play-state:paused
}
.spring-grass.in i{animation-play-state:running}
.spring-grass b{
  display:block;width:100%;height:100%;transform-origin:50% 100%;
  border-radius:60% 60% 2px 2px / 88% 88% 2px 2px;
  background:linear-gradient(180deg,var(--neon),rgba(78,127,38,.85));
  animation:grasssway 3.4s ease-in-out infinite;animation-delay:var(--d)
}
@keyframes grassgrow{0%{transform:scaleY(.08)}52%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes grasssway{0%,100%{transform:skewX(-7deg)}50%{transform:skewX(7deg)}}
@media (prefers-reduced-motion:reduce){
  .sun-rays,.sun-disc,.spring-grass i,.spring-grass b{animation:none}
  .spring-grass i{transform:scaleY(1)}
}

/* ---------------- contact ---------------- */
.ctgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:44px;align-items:start}
.ct{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.ctgrid .ct{grid-template-columns:1fr;gap:12px;margin-top:26px}
.ctgrid .ct a{min-height:88px;padding:18px 22px}
.ct a{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:24px 22px;
  border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.04);
  transition:border-color .2s,background .2s,transform .2s;min-height:110px
}
.ct a:hover{border-color:var(--neon);background:rgba(143,224,60,.08);transform:translateY(-3px)}
.ct .k{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ct .v{font-family:var(--f-dis);font-size:20px;color:#fff;text-transform:none}

/* ---------------- the chat ----------------
   A concept demo. It answers from a fixed script, it posts nowhere, and it
   hands over to the phone the moment the question gets specific. */
.mowbtn{
  position:fixed;right:20px;bottom:20px;z-index:70;width:64px;height:64px;border-radius:50%;
  border:0;cursor:pointer;background:var(--neon);color:#0A0D08;display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(143,224,60,.4);transition:transform .22s,box-shadow .22s
}
.mowbtn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 42px rgba(143,224,60,.55)}
.mowbtn svg{width:34px;height:34px}
.mowbtn .x{display:none}
.mowbtn.open .m{display:none}
.mowbtn.open .x{display:block}
.mowbtn::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(143,224,60,.5);
  animation:mowping 2.8s ease-out infinite
}
.mowbtn.open::after{display:none}
@keyframes mowping{0%{transform:scale(.86);opacity:.9}70%,100%{transform:scale(1.3);opacity:0}}

.mowpanel{
  position:fixed;right:20px;bottom:96px;z-index:70;width:min(374px,calc(100vw - 40px));
  max-height:min(560px,calc(100vh - 140px));display:none;flex-direction:column;
  background:rgba(16,19,21,.94);border:1px solid rgba(255,255,255,.16);border-radius:20px;
  overflow:hidden;backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .26s
}
.mowpanel.open{display:flex;transform:none;opacity:1}
.mowhd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(143,224,60,.16),transparent)}
.mowhd .av{width:42px;height:42px;border-radius:12px;background:var(--neon);display:grid;place-items:center;flex:0 0 auto;color:#0A0D08}
.mowhd .av svg{width:26px;height:26px}
.mowhd b{display:block;font-family:var(--f-dis);font-size:15px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.mowhd span{font-size:12px;color:var(--neon);display:flex;align-items:center;gap:6px}
.mowhd span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--neon)}
.mowlog{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px;min-height:0}
.mowmsg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5}
.mowmsg.bot{background:rgba(255,255,255,.07);border:1px solid var(--line);border-bottom-left-radius:5px;color:#E8ECE7;align-self:flex-start}
.mowmsg.me{background:var(--neon);color:#0A0D08;border-bottom-right-radius:5px;align-self:flex-end;font-weight:600}
.mowmsg a{color:var(--neon);font-weight:700}
.mowmsg.me a{color:#0A0D08}
.mowdots{display:flex;gap:4px;align-self:flex-start;padding:13px 15px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px}
.mowdots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:mowdot 1.3s ease-in-out infinite}
.mowdots i:nth-child(2){animation-delay:.16s}
.mowdots i:nth-child(3){animation-delay:.32s}
@keyframes mowdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.mowchips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.mowchip{
  border:1px solid rgba(143,224,60,.45);background:rgba(143,224,60,.1);color:var(--neon);
  border-radius:999px;padding:8px 13px;font-family:var(--f-body);font-size:13px;font-weight:600;
  cursor:pointer;transition:background .18s,transform .18s
}
.mowchip:hover{background:rgba(143,224,60,.22);transform:translateY(-1px)}
.mowfoot{border-top:1px solid var(--line);padding:11px 12px 12px}
.mowform{display:flex;gap:8px}
.mowform input{
  flex:1;min-width:0;min-height:46px;padding:0 14px;border-radius:11px;
  border:1.6px solid var(--line);background:rgba(8,9,10,.6);color:#fff;
  font-family:var(--f-body);font-size:15px
}
.mowform input:focus{outline:none;border-color:var(--neon)}
.mowform button{
  flex:0 0 46px;height:46px;border-radius:11px;border:0;background:var(--neon);color:#0A0D08;
  cursor:pointer;display:grid;place-items:center
}
.mowform button svg{width:20px;height:20px}
.mownote{font-size:11px;color:#7E877C;margin:9px 2px 0;line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .mowbtn::after,.mowdots i{animation:none}
  .mowpanel{transition:none}
}

/* ---------------- footer ---------------- */
.ft{background:var(--black-2);color:var(--muted);padding:64px 0 26px;border-top:1px solid var(--line)}
.ft-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.ft h4{font-size:15px;color:#fff;margin-bottom:15px;letter-spacing:.06em}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft a{color:var(--muted);text-decoration:none;display:inline-block;padding:11px 0;min-height:44px;line-height:22px;font-size:15px}
.ft a:hover{color:var(--neon)}
.flogo{height:86px;width:auto;margin-bottom:16px}
.ft p{font-size:14.5px;line-height:1.65}
.ft-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
.ft-bar p{margin:0}
.by{text-decoration:none;color:var(--muted);padding:8px 0;display:inline-block}
.by b{color:var(--neon);font-weight:700}
.disc{margin-top:22px;font-size:12.5px;line-height:1.66;color:#7E877C;border-top:1px solid var(--line);padding-top:18px}

.pinbar{display:none}

/* ---------------- motion ---------------- */
[data-rev]{opacity:0;transform:translateY(18px);filter:blur(6px)}
[data-rev].in{opacity:1;transform:none;filter:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
[data-cascade] span{display:inline-block;opacity:0;transform:translateY(24px)}
[data-cascade].in span{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  [data-rev],[data-cascade] span{opacity:1!important;transform:none!important;filter:none!important}
  .prog{display:none}
}

/* ---------------- tablet ---------------- */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:36px}
  .grid3,.qs{grid-template-columns:1fr}
  .coll{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .ba{grid-template-columns:1fr;max-width:640px}
  .ct{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
  .svc-top{grid-template-columns:1fr;gap:32px}
  .ctgrid{grid-template-columns:1fr;gap:36px}
  .spring-in{grid-template-columns:1fr;gap:30px;padding-bottom:150px}
  .sunwrap{min-height:220px;order:-1}
  .toon{grid-template-columns:repeat(2,1fr)}
}

/* ---------------- phone ---------------- */
@media (max-width:860px){
  .nav{display:none}
  .burger{display:block}
  .hd-cta{display:none}
}
@media (max-width:640px){
  :root{--hdh:84px}
  body{font-size:16px}
  .wrap{width:min(100% - 32px,1180px)}
  .sec{padding:62px 0}
  section[id]{scroll-margin-top:94px}
  .brand img{height:64px}
  .hero{padding:40px 0 58px}
  .hh{font-size:clamp(34px,9.6vw,48px)}
  .hsub{font-size:16.5px;margin-top:16px}
  .hcta{display:none}
  .hero-fig{display:none}
  .htick{margin-top:22px}
  .qz-b{padding:8px 18px 24px}
  .qz-hd img{height:76px}
  .qz-q{font-size:22px}
  .coll{grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:10px}
  .ba{grid-template-columns:1fr;gap:14px}
  .cl figcaption{font-size:11.5px;padding:26px 9px 9px}
  .shead{margin-bottom:32px}
  .shead h2{font-size:clamp(26px,8vw,38px)}
  .qhead .n{font-size:44px}
  .ft-in{grid-template-columns:1fr;gap:30px}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .tick span{font-size:12.5px;padding:0 18px}
  body{padding-bottom:76px}
  .pinbar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:58;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,9,10,.9);backdrop-filter:blur(18px) saturate(150%);
    border-top:1px solid var(--line);transform:translateY(120%);
    transition:transform .3s cubic-bezier(.2,.7,.2,1)
  }
  .pinbar.on{transform:none}
  .pinbar .btn{flex:1;min-height:50px;padding:0 12px;font-size:14px}

  .toon{grid-template-columns:1fr;gap:12px}
  .toon figcaption{font-size:13px;padding:13px 15px 15px}
  .spring{padding-top:64px}
  .spring-in{padding-bottom:130px}
  .spring h2{font-size:clamp(27px,8.4vw,40px)}
  .sun{width:min(210px,58vw)}
  .sunwrap{min-height:180px}
  .spring-grass{height:112px}
  .qz .btn,.ctgrid .qz{margin-top:0}

  /* the pinned call bar owns the bottom of the screen, so the chat sits above it */
  .mowbtn{width:56px;height:56px;right:14px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .mowbtn svg{width:29px;height:29px}
  .mowpanel{
    right:12px;left:12px;width:auto;
    bottom:calc(146px + env(safe-area-inset-bottom));
    max-height:min(460px,calc(100vh - 210px))
  }
}