/* ===========================================================
   Clean Cut Canterbury — shared stylesheet (multi-page)
   =========================================================== */
:root{
  --green:#5cba47; --green-d:#15803d; --green-l:#86d36e;
  --blue:#18a5dd; --blue-d:#0e87bd; --blue-l:#5cc8ef;
  --ink:#10242a; --ink-soft:#334a51; --muted:#566d74;
  --bg:#ffffff; --bg-soft:#f3f9f5; --bg-mint:#eaf7f0; --line:#e2ece6;
  --grad:linear-gradient(120deg,var(--blue) 0%,var(--green) 100%);
  --grad-r:linear-gradient(120deg,var(--green) 0%,var(--blue) 100%);
  --shadow:0 18px 50px -22px rgba(13,80,60,.45);
  --shadow-sm:0 8px 24px -12px rgba(13,80,60,.35);
  --radius:22px; --radius-sm:14px; --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#f5fcf8;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* visible keyboard focus for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,.svc:focus-visible,.chip:focus-visible,.contact-card:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
:focus:not(:focus-visible){outline:none}
h1,h2,h3,h4,.brandfont{font-family:'Poppins',sans-serif;line-height:1.12;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-d)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.eyebrow.center{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins';font-weight:600;font-size:.98rem;
  padding:15px 28px;border-radius:60px;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;will-change:transform}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -10px rgba(24,165,221,.6)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 40px -12px rgba(24,165,221,.7)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--green)}
.btn-light{background:#fff;color:var(--green-d)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(0,0,0,.3)}
.btn svg{width:18px;height:18px}

/* ============ NAV ============ */
.navbar-bg{position:fixed;inset:0 0 auto 0;height:78px;z-index:80;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:.35s}
header{position:fixed;inset:0 0 auto 0;z-index:90}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;max-width:var(--max);margin:0 auto}
.logo{display:flex;align-items:center;height:52px;z-index:2}
.logo img{height:100%;width:auto}
.navlinks{display:flex;align-items:center;gap:4px;z-index:2}
.navlinks>a,.navlinks .dd>button{font-family:'Poppins';font-weight:500;font-size:.95rem;color:var(--ink);
  padding:9px 14px;border-radius:40px;transition:.2s;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.navlinks>a:hover,.navlinks .dd:hover>button{background:var(--bg-mint);color:var(--green-d)}
.navlinks>a.active{color:var(--green-d);font-weight:600}
.navlinks .dd>button svg{width:14px;height:14px;transition:.3s}
.navlinks .dd:hover>button svg{transform:rotate(180deg)}
.nav-cta{margin-left:8px}
/* dropdown */
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px;
  opacity:0;visibility:hidden;transition:.25s;display:grid;gap:2px}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px)}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.92rem;
  font-family:'Poppins';font-weight:500;color:var(--ink-soft);transition:.2s}
.dd-menu a:hover{background:var(--bg-mint);color:var(--green-d)}
.dd-menu a .di{width:30px;height:30px;border-radius:8px;background:var(--bg-mint);display:grid;place-items:center;flex:0 0 auto}
.dd-menu a:hover .di{background:#fff}
.dd-menu a .di svg{width:18px;height:18px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:3}
.burger span{width:26px;height:3px;background:var(--ink);border-radius:3px;transition:.3s}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ ECO BADGE ============ */
.eco-pill{display:inline-flex;align-items:center;gap:8px;background:var(--bg-mint);border:1px solid #cdeBD8;
  color:var(--green-d);font-family:'Poppins';font-weight:600;font-size:.82rem;padding:7px 15px 7px 11px;border-radius:40px}
.eco-pill svg{width:18px;height:18px}
.leaf-spin{transform-origin:center;animation:leafspin 6s ease-in-out infinite}
@keyframes leafspin{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* ============ HERO (home) ============ */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 40px;overflow:hidden;
  background:linear-gradient(180deg,#dff3ff 0%,#e8f8ee 60%,#ffffff 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.hero-copy{max-width:560px;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);font-weight:800;margin:16px 0 14px;max-width:12ch}
.hero p.lead{font-size:1.12rem;color:var(--ink-soft);max-width:480px;margin-bottom:24px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-points{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px}
.hero-points span{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--ink-soft)}
.hero-points svg{width:20px;height:20px;color:var(--green)}
.rating-row{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:.9rem;color:var(--ink-soft)}
.stars{color:#ffb22d;letter-spacing:2px;font-size:1.05rem}

/* hero scene */
.scene{position:relative;width:100%;aspect-ratio:1/.9;max-width:560px;margin-inline:auto;
  filter:drop-shadow(0 30px 40px rgba(14,100,70,.25));animation:rise 1.05s .1s cubic-bezier(.2,.7,.2,1) both}
.scene svg{width:100%;height:100%;overflow:visible}
.sun{transform-origin:center;animation:spin 60s linear infinite}
.cloud{animation:drift 24s linear infinite}.cloud.c2{animation-duration:34s;animation-delay:-8s}
@keyframes drift{from{transform:translateX(-40px)}50%{transform:translateX(40px)}to{transform:translateX(-40px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.mower{animation:mow 7s ease-in-out infinite}
@keyframes mow{0%,100%{transform:translateX(0)}50%{transform:translateX(168px)}}
.mow-wheel{transform-origin:0 0;animation:spin 1.1s linear infinite}
.tallgrass{transform-origin:50% 100%;animation:grow 7s ease-in-out infinite}
@keyframes grow{0%,42%{transform:scaleY(1);opacity:1}50%,92%{transform:scaleY(.12);opacity:.55}100%{transform:scaleY(1);opacity:1}}
.sparkle{transform-origin:center;animation:sparkle 2.6s ease-in-out infinite}
.sparkle.s2{animation-delay:.8s}.sparkle.s3{animation-delay:1.5s}.sparkle.s4{animation-delay:.4s}
@keyframes sparkle{0%,100%{transform:scale(0) rotate(0);opacity:0}40%{transform:scale(1) rotate(40deg);opacity:1}60%{transform:scale(1) rotate(70deg);opacity:1}}
.bird{animation:fly 9s ease-in-out infinite}.bird.b2{animation-delay:-4.5s}
@keyframes fly{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-8px)}}
.bird-wing{transform-box:fill-box;transform-origin:center;animation:flap .85s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.62)}}
.squeegee{animation:sqeg 4.4s ease-in-out infinite}
@keyframes sqeg{0%,14%{transform:translateY(0)}50%{transform:translateY(44px)}86%,100%{transform:translateY(0)}}
.invac{animation:invac 3.6s ease-in-out infinite}
@keyframes invac{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
.spray{transform-box:fill-box;transform-origin:top right;animation:spray 1.5s ease-in-out infinite}
@keyframes spray{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.82;transform:scale(1.06)}}
.wdrop2{animation:wdrop2 1s linear infinite}
@keyframes wdrop2{0%{opacity:0;transform:translate(6px,-6px)}30%{opacity:1}100%{opacity:0;transform:translate(-14px,16px)}}
.sprink{transform-box:fill-box;transform-origin:right bottom;animation:sprink 3.4s ease-in-out infinite}
@keyframes sprink{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(22deg)}}
.shear-top{transform-box:fill-box;transform-origin:right center;animation:shear .9s ease-in-out infinite}
@keyframes shear{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-20deg)}}
.clip{animation:clip 2.4s linear infinite}
@keyframes clip{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(22px)}}
.leaf{position:absolute;top:-30px;opacity:.7;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(380deg)}}
/* detail-panel scene extras */
.dmist{animation:dmist 1.5s ease-out infinite}
@keyframes dmist{0%{opacity:0;transform:translate(0,0) scale(.5)}30%{opacity:.85}100%{opacity:0;transform:translate(16px,-16px) scale(1.1)}}
.broom{transform-box:fill-box;transform-origin:top center;animation:broom 1.5s ease-in-out infinite}
@keyframes broom{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
.drise{animation:drise 2s ease-out infinite}
@keyframes drise{0%{opacity:0;transform:translateY(8px) scale(.7)}30%{opacity:.9}100%{opacity:0;transform:translateY(-16px) scale(1.1)}}
.swish{transform-box:fill-box;transform-origin:top center;animation:swish 1.8s ease-in-out infinite}
@keyframes swish{0%,100%{transform:translateX(-9px) rotate(-4deg)}50%{transform:translateX(9px) rotate(4deg)}}

/* ============ PAGE HERO (sub pages) ============ */
.page-hero{padding:140px 0 60px;background:linear-gradient(180deg,#dff3ff 0%,#eaf7f0 100%);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(92,186,71,.18),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:14px;font-weight:500}
.crumbs a:hover{color:var(--green-d)}
.page-hero h1{font-size:clamp(2rem,4vw,3.1rem);font-weight:800;margin-bottom:14px;max-width:16ch}
.page-hero p{font-size:1.1rem;color:var(--ink-soft);max-width:600px}
.page-hero .floats span{position:absolute;opacity:.5;animation:bobf 5s ease-in-out infinite}
@keyframes bobf{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ============ SECTIONS ============ */
.sec{padding:90px 0}
.sec.soft{background:var(--bg-soft)}.sec.mint{background:var(--bg-mint)}
.sec.ink{background:var(--ink);color:#fff}
.sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin:14px 0 14px}
.sec-head p{color:var(--ink-soft);font-size:1.06rem}
.sec.ink .sec-head p{color:#a9c4bd}

/* ============ ECO SECTION ============ */
.eco{background:linear-gradient(120deg,#0e7a4e,#1aa15f);color:#fff;overflow:hidden}
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.eco h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;margin:14px 0 16px}
.eco p{opacity:.94;font-size:1.05rem;margin-bottom:14px}
.eco .eco-points{display:grid;gap:14px;margin-top:22px}
.eco .eco-points li{display:flex;gap:12px;align-items:flex-start;list-style:none;font-weight:500}
.eco .eco-points svg{width:24px;height:24px;flex:0 0 auto;margin-top:2px}
.eco .eyebrow{color:#bdf0d2}.eco .eyebrow::before{background:#bdf0d2}
.eco-badge{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:380px;margin-inline:auto}
.eco-badge .ring{position:absolute;inset:0;border:2px dashed rgba(255,255,255,.35);border-radius:50%;animation:spin 26s linear infinite}
.eco-badge .ring.r2{inset:34px;border-color:rgba(255,255,255,.22);animation-duration:18s;animation-direction:reverse}
.eco-badge .core{width:58%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);
  display:grid;place-items:center;text-align:center;padding:20px;border:1px solid rgba(255,255,255,.25)}
.eco-badge .core svg{width:64px;height:64px;margin-bottom:8px}
.eco-badge .core b{font-family:'Poppins';font-size:1.05rem;display:block}
.eco-badge .core span{font-size:.82rem;opacity:.85}
.eco-badge .float-leaf{position:absolute;width:34px;height:34px}
.float-leaf.fl1{top:4%;left:42%;animation:bobf 4s ease-in-out infinite}
.float-leaf.fl2{bottom:8%;right:6%;animation:bobf 5s ease-in-out infinite .5s}
.float-leaf.fl3{top:40%;left:0;animation:bobf 6s ease-in-out infinite 1s}

/* ============ SERVICE CARDS ============ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-grid.two{grid-template-columns:repeat(2,1fr)}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;position:relative;
  overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s;display:block}
.svc::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:.35s;z-index:0}
.svc::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--bg-mint);transition:.45s;z-index:0}
.svc:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent}
.svc:hover::before{opacity:1}.svc:hover::after{transform:scale(6);opacity:.12;background:#fff}
.svc>*{position:relative;z-index:1;transition:color .35s}
.svc:hover h3,.svc:hover p,.svc:hover .svc-link{color:#fff}
.svc-ico{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;background:var(--bg-mint);margin-bottom:20px;transition:.35s}
.svc:hover .svc-ico{background:rgba(255,255,255,.2)}
.svc-ico svg{width:42px;height:42px}
.svc h3{font-size:1.28rem;font-weight:700;margin-bottom:9px}
.svc p{color:var(--ink-soft);font-size:.97rem}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.svc-tags span{font-size:.76rem;font-weight:600;color:var(--green-d);background:var(--bg-mint);padding:4px 10px;border-radius:20px;transition:.35s}
.svc:hover .svc-tags span{background:rgba(255,255,255,.2);color:#fff}
.svc-link{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-family:'Poppins';font-weight:600;font-size:.92rem;color:var(--green-d)}
.svc-link svg{width:16px;height:16px;transition:transform .3s}
.svc:hover .svc-link svg{transform:translateX(5px)}
.ico-spin{transform-origin:center;animation:spin 6s linear infinite}.svc:hover .ico-spin{animation-duration:1.4s}
.ico-wipe{animation:wipe 2.6s ease-in-out infinite}@keyframes wipe{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.ico-bob{animation:bob 2.4s ease-in-out infinite}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ============ FEATURE / WHY ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.feat{display:flex;gap:16px;margin-bottom:24px}
.feat-ico{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.feat-ico svg{width:26px;height:26px;color:#fff}
.feat h4{font-size:1.12rem;font-weight:700;margin-bottom:4px}
.feat p{color:var(--ink-soft);font-size:.96rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .num{font-family:'Poppins';font-weight:800;font-size:2.5rem;line-height:1}
.stat .lbl{color:var(--ink-soft);font-size:.9rem;margin-top:6px;font-weight:500}
.media-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--grad);aspect-ratio:4/3}
.media-card svg{width:100%;height:100%}

/* tick card */
.tick-card{background:var(--grad);border-radius:var(--radius);padding:38px 32px;color:#fff;box-shadow:var(--shadow);overflow:hidden;position:relative}
.tick-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border:30px solid rgba(255,255,255,.12);border-radius:50%}
.tick-card h3{font-size:1.5rem;margin-bottom:10px}.tick-card p{opacity:.92;margin-bottom:22px}
.tick-list{list-style:none;display:grid;gap:12px}
.tick-list li{display:flex;align-items:center;gap:11px;font-weight:600}
.tick-list svg{width:22px;height:22px;flex:0 0 auto}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{background:#fff;border-radius:var(--radius);padding:32px 24px;position:relative;border:1px solid var(--line);transition:.35s}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.step .n{counter-increment:s;font-family:'Poppins';font-weight:800;font-size:1rem;width:46px;height:46px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;margin-bottom:18px}
.step .n::before{content:"0" counter(s)}
.step h4{font-size:1.14rem;margin-bottom:8px}.step p{color:var(--ink-soft);font-size:.95rem}
.step:not(:last-child)::after{content:"";position:absolute;top:54px;right:-15px;width:30px;height:2px;
  background:repeating-linear-gradient(90deg,var(--green) 0 6px,transparent 6px 12px)}

/* ============ AREA / CHIPS ============ */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{background:#fff;border:1px solid var(--line);border-radius:40px;padding:9px 18px;font-weight:600;font-size:.9rem;color:var(--ink-soft);transition:.25s}
.chip:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px)}
.map-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#cfeede;aspect-ratio:4/3}
.map-card svg{width:100%;height:100%}
.map-pin{transform-origin:center bottom;animation:pin 2s ease-in-out infinite}
.map-pin.p2{animation-delay:.5s}.map-pin.p3{animation-delay:1s}.map-pin.p4{animation-delay:1.4s}
@keyframes pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.pulse{transform-origin:center;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* ============ TESTIMONIALS ============ */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 26px;transition:.35s}
.tcard:hover{transform:translateY(-8px);background:rgba(255,255,255,.09)}
.tcard .stars{margin-bottom:14px}.tcard p{color:#d7e7e2;margin-bottom:20px}
.tperson{display:flex;align-items:center;gap:12px}
.tav{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:'Poppins';font-weight:700;color:#fff}
.tperson b{display:block;font-family:'Poppins';font-size:.98rem}.tperson span{color:#9fbcb4;font-size:.85rem}

/* ============ SERVICE DETAIL ============ */
.detail-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:48px;align-items:start}
.prose h2{font-size:1.7rem;margin:6px 0 14px}
.prose h3{font-size:1.25rem;margin:28px 0 10px}
.prose p{color:var(--ink-soft);margin-bottom:14px}
.incl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.incl li{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--ink-soft)}
.incl svg{width:22px;height:22px;color:var(--green);flex:0 0 auto;margin-top:1px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);position:sticky;top:96px}
.side-card h4{font-size:1.15rem;margin-bottom:8px}
.side-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:18px}
.side-card .btn{width:100%;justify-content:center;margin-bottom:10px}
.side-card .call{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--bg-soft);margin-bottom:8px;transition:.2s}
.side-card .call:hover{background:var(--bg-mint)}
.side-card .call svg{width:20px;height:20px;color:var(--green-d)}
.side-card .call b{font-family:'Poppins';font-size:.98rem}
.detail-hero-ico{width:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--grad);aspect-ratio:16/10}
.detail-hero-ico svg{width:100%;height:100%}

/* ============ FORMS ============ */
.quote-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:start}
.contact-card{display:flex;gap:14px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;margin-bottom:14px;transition:.25s}
.contact-card:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);background:#fff}
.contact-card .ci{width:48px;height:48px;border-radius:13px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto}
.contact-card .ci svg{width:24px;height:24px;color:#fff}
.contact-card .cl{font-size:.8rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.contact-card .cv{font-family:'Poppins';font-weight:600;font-size:1.08rem;color:var(--ink)}
form.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:var(--ink-soft)}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:.97rem;color:var(--ink);background:#fbfdfc;transition:.2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(92,186,71,.15);background:#fff}
.fld textarea{resize:vertical;min-height:110px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.quote .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.82rem;color:var(--muted);text-align:center;margin-top:12px}
.req{color:#c8371f;font-weight:700;margin-left:2px}
.field-err{color:#c8371f;font-size:.8rem;margin-top:6px;font-weight:600}
.fld.error input,.fld.error select,.fld.error textarea{border-color:#e0755f;background:#fff6f4}
.fld.error input:focus,.fld.error select:focus,.fld.error textarea:focus{border-color:#c8371f;box-shadow:0 0 0 4px rgba(200,55,31,.14)}
.form-success{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--bg-mint);
  border:1px solid #bfe6cd;color:var(--green-d);font-weight:600;font-size:.92rem}
.socials-row{display:flex;gap:10px;margin-top:8px}
.socials-row a{width:46px;height:46px;border-radius:13px;background:var(--bg-soft);border:1px solid var(--line);display:grid;place-items:center;transition:.25s}
.socials-row a:hover{background:var(--grad);transform:translateY(-3px);border-color:transparent}
.socials-row a:hover svg{color:#fff}
.socials-row svg{width:20px;height:20px;color:var(--ink-soft)}

/* ============ CTA BAND ============ */
.cta-band{background:var(--grad);color:#fff;text-align:center;padding:74px 0;overflow:hidden;position:relative}
.cta-band::before,.cta-band::after{content:"";position:absolute;border:34px solid rgba(255,255,255,.1);border-radius:50%}
.cta-band::before{width:240px;height:240px;left:-80px;top:-90px}
.cta-band::after{width:200px;height:200px;right:-70px;bottom:-80px}
.cta-band h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin-bottom:12px;position:relative}
.cta-band p{font-size:1.1rem;opacity:.95;margin-bottom:26px;position:relative}
.cta-band .btn{position:relative}

/* ============ FOOTER ============ */
footer{background:#0a1c20;color:#c4d6d1;padding:64px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:44px}
.foot-brand img{height:54px;margin-bottom:16px}
.foot-brand p{font-size:.94rem;max-width:300px;color:#9fbcb4}
.foot h5{font-family:'Poppins';color:#fff;font-size:1rem;margin-bottom:16px;font-weight:600}
.foot ul{list-style:none;display:grid;gap:10px}
.foot ul a{font-size:.93rem;color:#a9c4bd;transition:.2s}
.foot ul a:hover{color:var(--green-l);padding-left:4px}
.foot .ct{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;margin-bottom:12px;color:#bcd2cc}
.foot .ct svg{width:18px;height:18px;color:var(--green-l);flex:0 0 auto;margin-top:3px}
.socials{display:flex;gap:10px;margin-top:6px}
.socials a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--grad);transform:translateY(-3px)}
.socials svg{width:19px;height:19px;color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.86rem;color:#88a39c}

/* ============ FAB ============ */
.fab{position:fixed;right:18px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:11px;align-items:flex-end}
.fab a{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 18px 0 13px;border-radius:30px;color:#fff;
  font-family:'Poppins';font-weight:600;font-size:.9rem;white-space:nowrap;box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
  transition:transform .25s,box-shadow .25s;position:relative}
.fab a:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 32px -10px rgba(0,0,0,.55)}
.fab .ico{width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto}
.fab svg{width:24px;height:24px;color:#fff}
.fab .wa{background:#25d366}.fab .ph{background:var(--grad)}.fab .ph2{background:#10242a}
.fab a .ring{position:absolute;left:13px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  border:2px solid currentColor;color:#25d366;animation:pulse 2s ease-out infinite;pointer-events:none}
.fab .ph .ring{color:var(--green)}.fab .ph2 .ring{color:#5cc8ef}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}.reveal.d5{transition-delay:.5s}.reveal.d6{transition-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero-grid,.split,.eco-grid,.quote-grid,.detail-grid{grid-template-columns:1fr;gap:34px}
  .scene{order:-1;max-width:440px}
  .svc-grid,.svc-grid.two,.steps,.t-grid{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .side-card{position:static}
}
@media(max-width:680px){
  .navlinks{position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;background:#fff;padding:10px 22px 24px;
    border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.35s;box-shadow:var(--shadow);align-items:stretch}
  body.menu-open .navlinks{transform:none}
  .navlinks>a,.navlinks .dd>button{padding:14px 10px;border-bottom:1px solid var(--bg-soft);border-radius:0;width:100%;justify-content:space-between}
  .dd-menu,.dd:hover .dd-menu{position:static;left:auto;transform:none!important;opacity:1;visibility:visible;box-shadow:none;border:none;padding:4px 0 8px 14px;display:none;min-width:0}
  .dd.open .dd-menu{display:grid}
  .dd-menu a{padding-left:0}
  .dd.open>button svg{transform:rotate(180deg)}
  .nav-cta{margin:10px 0 0}
  .burger{display:flex}
  .svc-grid,.svc-grid.two,.steps,.t-grid,.stats,.frow,.foot-grid,.incl{grid-template-columns:1fr}
  .sec{padding:64px 0}.hero{padding:104px 0 30px}
  .fab a{height:46px;font-size:.84rem;padding:0 15px 0 11px}
  .fab svg{width:22px;height:22px}.fab .ico{width:22px;height:22px}
  .fab a .ring{left:11px;width:22px;height:22px;margin-top:-11px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important}.reveal{opacity:1;transform:none}}