:root{
  --turf-deep:#053815;
  --primary:#135d27;
  --turf:#227d32;
  --gold:#e7b140;
  --gold-fg:#2e1e01;
  --cream:#f8f4ea;
  --card:#fdfcf6;
  --cream-fg:#faf7ec;
  --ink:#162316;
  --muted:#555e4d;
  --secondary:#ece9d2;
  --border:#d7d5c6;
  --radius:12px;
}
*{box-sizing:border-box}
html{font-variant-emoji:text;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--turf-deep);font-family:'Archivo',system-ui,sans-serif;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--primary)}
img,svg,video{display:block;max-width:100%}

.card{max-width:480px;margin:0 auto;background:var(--cream);min-height:100vh;overflow:hidden;display:flex;flex-direction:column}
.card > .foot{margin-top:auto}
.card > .block:last-of-type{margin-bottom:30px}

/* Hero */
.hero{position:relative;height:340px;background:var(--turf-deep);overflow:hidden}
.hero-stripes{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0b4a1d 0 40px,#0e5422 40px 80px)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hero-video.ready{opacity:1}
.hero-shade{position:absolute;inset:0;background:rgba(5,56,21,.28)}
.logo-badge{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:172px;height:172px;border-radius:50%;background:#ffffff;border:4px solid var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:2}
.logo-badge img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);background:#ffffff}
.logo-fallback{display:none;font-family:'Bebas Neue',sans-serif;font-size:64px;color:var(--turf-deep);line-height:1}
.logo-badge.no-logo img{display:none}
.logo-badge.no-logo .logo-fallback{display:block}
.hills{position:absolute;left:0;bottom:-1px;width:100%;height:120px;z-index:1}

/* Intro */
.intro{padding:0 20px;text-align:center;margin-top:-6px;position:relative;z-index:2}
.intro h1{margin:0;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(48px,15vw,60px);line-height:.92;color:var(--turf-deep)}
.intro h1 span{color:var(--turf)}
.tagline{display:inline-block;margin:10px 0 0;background:var(--gold);color:var(--gold-fg);font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.04em;padding:6px 16px 3px;border-radius:999px}
.sub{margin:10px 0 0;font-size:14px;color:var(--muted)}

/* Actions */
.actions{padding:20px 20px 0;display:flex;flex-direction:column;gap:12px}
/* Candy Gloss buttons */
.btn-call,.pill{position:relative;overflow:hidden;isolation:isolate;text-decoration:none;color:#ffffff;background:linear-gradient(180deg,#2f9a44 0%,var(--primary) 55%,#0b4a1d 100%);transition:transform .12s ease,box-shadow .12s ease}
.btn-call::before,.pill::before{content:"";position:absolute;left:6%;right:6%;top:3px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.08));z-index:-1;pointer-events:none}
.btn-call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;border-radius:999px;font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.03em;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(5,56,21,.35)}
.btn-call:active{transform:translateY(2px);box-shadow:inset 0 -2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(5,56,21,.35)}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:72px;border-radius:18px;font-weight:800;font-size:12px;text-shadow:0 1px 1px rgba(0,0,0,.25);background:linear-gradient(180deg,#2f9a44,var(--primary));box-shadow:inset 0 -3px 5px rgba(0,0,0,.25),0 4px 10px rgba(5,56,21,.3)}
.pill::before{left:4px;right:4px;height:44%;border-radius:15px 15px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.05))}
.pill:active{transform:translateY(2px);box-shadow:inset 0 -2px 4px rgba(0,0,0,.3),0 2px 6px rgba(5,56,21,.3)}

/* Blocks */
.block{padding:26px 20px 0}
.block h2{margin:0 0 10px;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:30px;color:var(--turf-deep);line-height:1}
.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.block-head h2{margin:0}
.badge{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--cream-fg);background:var(--turf);padding:6px 11px;border-radius:999px}

/* Video */
.video-frame{position:relative;border-radius:var(--radius);overflow:hidden;background:#0b4a1d;aspect-ratio:16/9}
.video-frame video{width:100%;height:100%;object-fit:cover;background:#0b4a1d}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:none;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.play.hide{display:none}

/* Prices */
.prices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.prices li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);font-weight:700}
.prices li span{min-width:0}
.prices b{flex:none;min-width:68px;text-align:center;padding:6px 10px 4px;border-radius:999px;background:var(--gold);color:var(--gold-fg);font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:26px;line-height:1}
.prices li.top{background:var(--turf-deep);border-color:var(--turf-deep);color:var(--cream-fg)}
.note{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}

/* Area */
.area{padding:18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)}
.area h2{font-size:24px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{padding:7px 13px;border-radius:999px;background:var(--secondary);color:var(--turf-deep);font-weight:600;font-size:13px}
.area p{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

/* Quote button under quick tiles */
.btn-quote{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;border-radius:999px;text-decoration:none;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em;color:var(--gold-fg);background:linear-gradient(180deg,#f6d27a 0%,var(--gold) 55%,#c99530 100%);box-shadow:inset 0 -2px 4px rgba(90,60,0,.28),inset 0 1px 0 rgba(255,255,255,.65),0 5px 12px rgba(184,134,42,.35)}
.btn-quote::before{content:"";position:absolute;left:6%;right:6%;top:3px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05));z-index:-1;pointer-events:none}
.btn-quote:active{transform:translateY(2px)}
.prices li[data-svc]{cursor:pointer;transition:transform .12s ease}
.prices li[data-svc]:active{transform:scale(.985)}
.prices li[data-svc]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Instant quote */
.quote{padding:20px 16px;border-radius:16px;background:var(--card);border:1px solid var(--border);display:flex;flex-direction:column;gap:18px;scroll-margin-top:12px}
#quote{scroll-margin-top:12px}
#quote[hidden]{display:none}
#quote.opening .quote{animation:quoteIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes quoteIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#quote.opening .quote{animation:none}}
.quote-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.q-close{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:#ffffff;color:var(--turf-deep);display:flex;align-items:center;justify-content:center;cursor:pointer}
.q-close:active{transform:scale(.94)}
.quote-head h2{margin:0}
.quote-head p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.q-group{border:none;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.q-group legend{padding:0;margin-bottom:10px;font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--turf-deep);letter-spacing:.02em}
.svc-list{display:flex;flex-direction:column;gap:8px}
.svc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#ffffff;border:1.5px solid var(--border);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.svc input{position:absolute;opacity:0;width:1px;height:1px}
.svc::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:#fff;box-sizing:border-box}
.svc-name{flex:1;min-width:0;font-weight:700;font-size:14px;line-height:1.3}
.svc-price{flex:none;font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--primary)}
.svc.on{border-color:var(--primary);background:#eef6ea}
.svc.on::before{border:6px solid var(--primary)}
.svc:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:#ffffff;font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.field textarea{min-height:72px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(34,125,50,.18)}
.q-help{margin:-4px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.btn-photo{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:12px;border:2px dashed var(--turf);background:#f2f8ee;color:var(--primary);font-weight:800;font-size:15px;cursor:pointer}
.btn-photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.btn-photo:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--secondary)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:none;background:rgba(5,56,21,.85);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.q-total{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px;border-radius:14px;background:var(--turf-deep);color:var(--cream-fg);text-align:center}
.q-total-label{font-size:11px;font-weight:800;letter-spacing:.14em;color:#b9c8b4}
.q-total-price{font-family:'Bebas Neue',sans-serif;font-size:44px;line-height:1;color:var(--gold)}
.q-total-sub{font-size:12px;color:#d6e2d1;line-height:1.4}
.disclaimer{padding:14px;border-radius:12px;background:#fff8e6;border:1px solid #efd9a3}
.disclaimer b{display:block;font-size:13px;color:var(--gold-fg)}
.disclaimer p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:#5a4a20}
.q-error{margin:0;min-height:0;font-size:13px;font-weight:700;color:#a3361b;text-align:center}
.q-error:empty{display:none}
.btn-send{white-space:nowrap;padding:0 18px;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border:none;border-radius:999px;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em;color:#ffffff;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.25);background:linear-gradient(180deg,#2f9a44 0%,var(--primary) 55%,#0b4a1d 100%);box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(5,56,21,.35)}
.btn-send::before{content:"";position:absolute;left:6%;right:6%;top:3px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.08));z-index:-1;pointer-events:none}
.btn-send:active{transform:translateY(2px)}
.q-alt{align-self:center;margin-top:-6px;font-size:13px;font-weight:700;color:var(--primary);padding:8px}
.q-alt[hidden]{display:none}
.q-steps{margin:-6px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
.q-steps:empty{display:none}

/* Review */
.review{padding:24px 18px;border-radius:16px;background:var(--turf-deep);color:var(--cream-fg);text-align:center;display:flex;flex-direction:column;align-items:center}
.stars{display:flex;gap:6px}
.stars svg{width:32px;height:32px;fill:var(--gold);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.review h2{margin:12px 0 0;color:var(--cream-fg)}
.review p{margin:8px 0 0;font-size:13px;line-height:1.5;color:#d6e2d1;max-width:290px}
.btn-review{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:#ffffff;color:#1f1f1f;text-decoration:none;font-weight:800;font-size:15px;box-shadow:inset 0 -2px 4px rgba(0,0,0,.08),0 5px 12px rgba(0,0,0,.25)}
.btn-review:active{transform:translateY(2px)}

/* Share + QR */
.share{padding:22px 18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);text-align:center;display:flex;flex-direction:column;align-items:center}
.share h2{margin:0}
.share p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:280px}
.qr-wrap{margin-top:16px;padding:12px;border-radius:16px;background:#ffffff;border:3px solid var(--gold);box-shadow:0 6px 16px rgba(5,56,21,.15)}
.qr{width:188px;height:188px}
.qr svg,.qr img{width:100%;height:100%;display:block}
.btn-share{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:none;border-radius:999px;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--gold-fg);cursor:pointer;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#f6d27a 0%,var(--gold) 55%,#c99530 100%);box-shadow:inset 0 -3px 6px rgba(90,60,0,.25),inset 0 1px 0 rgba(255,255,255,.6),0 5px 12px rgba(184,134,42,.35)}
.btn-share::before{content:"";position:absolute;left:6%;right:6%;top:3px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.05));z-index:-1;pointer-events:none}
.btn-share:active{transform:translateY(2px)}

/* Glossy gold: tagline, price tags, footer button */
.tagline,.prices b,.own{position:relative;overflow:hidden;isolation:isolate;color:var(--gold-fg);background:linear-gradient(180deg,#f6d27a 0%,var(--gold) 55%,#c99530 100%);box-shadow:inset 0 -2px 4px rgba(90,60,0,.28),inset 0 1px 0 rgba(255,255,255,.65),0 4px 10px rgba(184,134,42,.35);text-shadow:0 1px 0 rgba(255,240,200,.5)}
.tagline::before,.prices b::before,.own::before{content:"";position:absolute;left:7%;right:7%;top:2px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05));z-index:-1;pointer-events:none}
.tagline::after,.prices b::after,.own::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:22%;transform:skewX(-24deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));z-index:-1;pointer-events:none;animation:glint 5s ease-in-out infinite}
.prices li:nth-child(2) b::after{animation-delay:.25s}
.prices li:nth-child(3) b::after{animation-delay:.5s}
.prices li:nth-child(4) b::after{animation-delay:.75s}
.prices li:nth-child(5) b::after{animation-delay:1s}
.own::after{animation-delay:1.5s}
@keyframes glint{0%,70%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.tagline::after,.prices b::after,.own::after{animation:none;display:none}}
.prices li.top b{box-shadow:inset 0 -2px 4px rgba(90,60,0,.28),inset 0 1px 0 rgba(255,255,255,.65),0 4px 12px rgba(0,0,0,.35)}

/* Footer */
.foot{position:relative;margin-top:84px;background:linear-gradient(180deg,#053815 0%,#042c10 100%);padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}
.foot::before{content:"";position:absolute;left:-2%;right:-2%;bottom:calc(100% - 2px);height:74px;background:url("../images/grass.svg") bottom center/100% 100% no-repeat;pointer-events:none}
.card > .foot{margin-top:auto}
.card > .block:last-of-type{margin-bottom:84px}
.credit{display:flex;flex-direction:column;gap:2px;min-width:0}
.credit span{font-size:10px;letter-spacing:.14em;color:#b9c8b4}
.credit a{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.04em;color:var(--gold);text-decoration:none;line-height:1.1}
.foot .own{flex:none;display:flex;align-items:center;justify-content:center;padding:0 18px;min-height:46px;border-radius:999px;text-decoration:none;font-weight:800;font-size:13px}
.own:active{transform:translateY(1px)}
