* { box-sizing: border-box; }
:root { --forest:#123b32; --forest-2:#1b5144; --green:#80d6a6; --mint:#dff3e8; --cream:#f7f8f3; --ink:#1c2d29; --muted:#64736d; --line:#e2e8e2; --white:#fff; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--ink); background:#fff; font-family:"DM Sans",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.container { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-bottom:1px solid rgba(226,232,226,.8); }
.nav-wrap { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; }
.brand-logo { display:block; width:108px; height:108px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:32px; font-size:13px; font-weight:600; color:#465750; }
.nav-links a:not(.nav-cta):hover,.text-link:hover,.inline-link:hover { color:#23845f; }
.nav-cta { padding:13px 18px; background:var(--forest); color:#fff; border-radius:7px; transition:transform .2s,background .2s; }
.nav-cta:hover,.button-dark:hover { background:#245a4b; transform:translateY(-1px); }
.nav-cta span { margin-left:10px; }
.menu-toggle { display:none; border:0; background:none; font-size:25px; color:var(--forest); }
.hero { background:var(--forest); color:#fff; overflow:hidden; position:relative; }
.hero-grid { min-height:565px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:34px; padding-top:45px; padding-bottom:50px; position:relative; z-index:1; }
.hero-copy { padding:28px 0; max-width:570px; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.17em; font-weight:700; color:#b4e8c9; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#85d7a8; box-shadow:0 0 0 4px rgba(133,215,168,.12); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Manrope",sans-serif; }
h1 { font-size:clamp(42px,5.2vw,66px); line-height:1.08; letter-spacing:-.055em; margin:26px 0 22px; max-width:620px; font-weight:700; }
h1 span { color:var(--green); }
.hero-intro { color:#d1e0d8; font-size:16px; line-height:1.8; max-width:490px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:18px; border:0; border-radius:7px; padding:15px 19px; font-weight:700; font-size:13px; cursor:pointer; transition:transform .2s,background .2s; }
.button-light { color:var(--forest); background:#fff; }
.button-light:hover { background:#e9f7ee; transform:translateY(-2px); }
.text-link { color:#e3f1e8; font-size:13px; font-weight:600; }
.text-link span,.inline-link span { padding-left:7px; }
.hero-note { margin-top:42px; font-size:11px; color:#b9d0c4; display:flex; align-items:center; gap:9px; }
.check-icon { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:rgba(128,214,166,.18); color:#a4e9bd; font-size:11px; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }
.glow-one { width:440px; height:440px; background:rgba(67,139,105,.12); right:-100px; top:-140px; }
.glow-two { width:320px; height:320px; background:rgba(128,214,166,.06); left:35%; bottom:-230px; }
.hero-art { min-height:420px; position:relative; display:flex; align-items:center; justify-content:center; }
.art-orbit { position:absolute; border:1px solid rgba(195,236,210,.13); border-radius:50%; }
.orbit-a { width:390px; height:390px; }
.orbit-b { width:300px; height:300px; border-style:dashed; border-color:rgba(195,236,210,.18); }
.device { position:absolute; box-shadow:0 28px 60px rgba(0,0,0,.22); }
.device-laptop { width:285px; left:50%; top:115px; transform:translateX(-52%) rotate(-7deg); z-index:2; }
.laptop-screen { height:188px; background:linear-gradient(145deg,#edf4ee,#b8d5c5); border:9px solid #d8e3dc; border-bottom-width:13px; border-radius:12px 12px 4px 4px; color:var(--forest); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.screen-logo { font:800 55px "Manrope"; letter-spacing:-.08em; }
.screen-logo span { color:#38936b; font-size:25px; vertical-align:top; }
.screen-lines { display:flex; flex-direction:column; gap:5px; width:70px; margin-top:8px; }
.screen-lines i { display:block; height:4px; border-radius:4px; background:#aac7b5; }
.screen-lines i:nth-child(2) { width:75%; align-self:center; }.screen-lines i:nth-child(3) { width:45%; align-self:center; }
.laptop-base { height:13px; background:linear-gradient(#aabdb1,#d6e0d8); border-radius:2px 2px 12px 12px; width:112%; margin-left:-6%; }
.device-tablet { z-index:3; width:135px; height:178px; right:5%; bottom:67px; padding:8px; border-radius:13px; background:#cbd8d0; transform:rotate(9deg); }
.tablet-screen { width:100%; height:100%; border-radius:7px; background:#eaf3ec; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#438667; }
.tablet-leaf { font-size:46px; line-height:1; }
.tablet-screen i { height:4px; width:54%; background:#c3d9ca; border-radius:4px; }
.tablet-screen i:last-child { width:35%; }
.device-phone { z-index:4; width:68px; height:123px; left:8%; bottom:65px; border:5px solid #c8d9ce; border-radius:14px; background:#eaf4ed; transform:rotate(-12deg); display:flex; align-items:center; justify-content:center; color:#37815e; }
.phone-speaker { position:absolute; top:5px; width:18px; height:3px; border-radius:3px; background:#8da99a; }
.phone-circle { font-size:34px; }
.art-label { position:absolute; z-index:5; padding:11px 14px; border-radius:7px; background:rgba(255,255,255,.96); color:var(--forest); font-size:9px; letter-spacing:.09em; font-weight:800; box-shadow:0 12px 32px rgba(0,0,0,.12); }
.label-top { top:34px; right:2%; }
.label-bottom { bottom:25px; left:22%; letter-spacing:.02em; font-size:10px; }
.label-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#51b780; margin-right:7px; }
.sparkle { color:#41956a; font-size:14px; margin-right:6px; }
.floating-chip { position:absolute; z-index:4; padding:9px 12px; border:1px solid rgba(205,241,219,.25); border-radius:5px; color:#c8f2d7; font-size:9px; letter-spacing:.13em; font-weight:700; background:rgba(255,255,255,.06); }
.chip-one { top:120px; left:4%; }.chip-two { top:190px; right:0; }
.hero-bottom-line { height:4px; background:linear-gradient(90deg,#80d6a6,#b2edc8,#4f9b75); opacity:.8; }
.trust-strip { border-bottom:1px solid var(--line); background:#fff; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:25px 0; gap:25px; }
.trust-grid > div { display:flex; align-items:center; gap:14px; padding:3px 20px; border-right:1px solid var(--line); }
.trust-grid > div:first-child { padding-left:0; }.trust-grid > div:last-child { border:0; }
.trust-number { font:700 12px "Manrope"; color:#4b9c71; }
.trust-grid strong,.trust-grid small { display:block; }.trust-grid strong { font-size:12px; margin-bottom:5px; }.trust-grid small { font-size:10px; color:var(--muted); }
.section { padding:100px 0; }
.two-column { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; }
.dark-eyebrow { color:#39845d; }
.dark-eyebrow .eyebrow-dot { background:#48a675; }
.section-heading h2,.serve-copy h2,.contact-copy h2 { font-size:clamp(32px,3.6vw,45px); letter-spacing:-.045em; line-height:1.16; margin:20px 0 0; }
.section-body { padding-top:6px; }
.section-body p { color:#5c6d65; font-size:14px; line-height:1.9; }
.section-body .lead { font-size:18px; color:#2a4037; line-height:1.65; }
.inline-link { display:inline-block; color:#24744f; font-size:13px; font-weight:700; margin-top:14px; }
.services-section { background:var(--cream); }
.centered-heading { text-align:center; max-width:650px; margin:0 auto 48px; }
.centered-heading .eyebrow { justify-content:center; }
.centered-heading h2 { margin-top:18px; }
.centered-heading > p { color:var(--muted); font-size:14px; margin:16px 0 0; }
.service-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { padding:30px 27px 32px; background:#fff; border:1px solid #e6ebe4; border-radius:10px; min-height:280px; transition:transform .2s,box-shadow .2s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(25,61,43,.07); }
.featured-card { border-color:#b9ddc6; box-shadow:0 10px 30px rgba(25,61,43,.04); }
.service-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:12px; margin-bottom:26px; }
.service-icon svg { width:35px; height:35px; }
.icon-pickup { background:#e7f3ed; color:#287951; }.icon-reuse { background:#d9f0e2; color:#277a51; }.icon-recycle { background:#f0f2df; color:#6b7e38; }
.card-number { font-size:9px; letter-spacing:.14em; color:#5c9976; font-weight:700; }
.service-card h3 { font-size:19px; letter-spacing:-.03em; margin:12px 0 10px; }
.service-card p { font-size:12px; line-height:1.8; color:#66756e; margin:0; }
.service-footnote { text-align:center; color:#78847e; font-size:10px; line-height:1.7; margin:24px auto 0; max-width:800px; }
.serve-section { background:var(--forest); color:#fff; }
.serve-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.serve-copy h2 { margin-bottom:20px; }
.serve-copy > p { color:#c6d8ce; font-size:14px; line-height:1.9; max-width:410px; margin-bottom:28px; }
.serve-list { display:flex; flex-direction:column; }
.serve-item { display:grid; grid-template-columns:44px 1fr 20px; gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid rgba(226,243,232,.15); }
.serve-item-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:9px; background:rgba(151,222,177,.12); color:#a6e6bc; font-size:21px; }
.serve-item strong,.serve-item small { display:block; }.serve-item strong { font-size:13px; margin-bottom:6px; }.serve-item small { color:#bdd2c6; font-size:11px; }
.serve-arrow { color:#95dcb1; font-size:16px; }
.serve-callout { display:flex; gap:14px; align-items:flex-start; padding:19px; margin-top:22px; border:1px solid rgba(185,228,201,.2); background:rgba(255,255,255,.04); border-radius:8px; }
.callout-star { color:#a6e6bc; font-size:20px; }.serve-callout p { color:#c3d7cb; font-size:11px; line-height:1.8; margin:0; }.serve-callout strong { color:#fff; }
.contact-section { background:#fff; }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.contact-copy h2 { margin-bottom:18px; }
.contact-copy > p { color:#63736c; font-size:14px; line-height:1.85; max-width:420px; margin-bottom:34px; }
.contact-detail { display:flex; align-items:center; gap:14px; margin-top:22px; }
.detail-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:#e9f5ed; color:#2d8357; font-size:20px; }
.contact-detail small,.contact-detail strong,.contact-detail em { display:block; }.contact-detail small { font-size:9px; letter-spacing:.14em; color:#6c9a7e; font-weight:700; margin-bottom:5px; }.contact-detail strong { font-size:12px; }.contact-detail em { font-size:10px; color:#87938d; font-style:normal; margin-top:4px; }
.contact-form { padding:31px; border:1px solid #e2e9e2; border-radius:12px; box-shadow:0 18px 55px rgba(21,58,40,.06); }
.form-title { font:700 21px "Manrope"; letter-spacing:-.03em; margin-bottom:25px; }.form-title span { display:block; font:400 12px "DM Sans"; color:#718078; margin-top:8px; letter-spacing:0; }
.contact-form label { display:block; font-size:11px; color:#364c41; font-weight:700; margin-bottom:17px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form input,.contact-form select,.contact-form textarea { display:block; width:100%; margin-top:8px; padding:12px 13px; border:1px solid #dce5dd; border-radius:6px; outline:none; background:#fff; color:#20362b; font-size:12px; font-weight:400; transition:border .2s,box-shadow .2s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:#5aa77a; box-shadow:0 0 0 3px rgba(90,167,122,.12); }
.contact-form textarea { resize:vertical; min-height:94px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#a2ada6; }
.button-dark { color:#fff; background:var(--forest); width:100%; justify-content:space-between; padding:16px 18px; }
.form-note { font-size:10px; color:#7b8880; line-height:1.7; margin:13px 0 0; }.form-status { color:#23744e; font-size:11px; line-height:1.6; margin:8px 0 0; }
.site-footer { background:#f5f7f2; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 0; }
.footer-logo { display:block; width:96px; height:96px; object-fit:contain; }
.footer-main > p { font-size:12px; color:#697970; margin:0; }
.footer-top { font-size:11px; font-weight:700; color:#2b7650; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #e0e7df; padding:17px 0 21px; color:#87938b; font-size:10px; }
@media (max-width:900px) {
  .nav-links { gap:19px; }.hero-grid { gap:10px; }.hero-art { transform:scale(.9); margin-inline:-25px; }
  .two-column,.serve-grid,.contact-grid { gap:50px; }
  .trust-grid { gap:10px; }.trust-grid > div { padding-inline:12px; }.trust-grid small { line-height:1.5; }
}
@media (max-width:700px) {
  .container { width:min(100% - 36px, 540px); }
  .nav-wrap { min-height:78px; }.brand-logo { width:88px; height:88px; }.menu-toggle { display:block; cursor:pointer; }.nav-links { display:none; position:absolute; top:71px; left:0; right:0; background:#fff; padding:18px 24px 24px; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; box-shadow:0 15px 25px rgba(0,0,0,.05); }.nav-links.open { display:flex; }.nav-links a { padding:14px 4px; }.nav-links .nav-cta { text-align:center; margin-top:8px; padding:14px; }
  .hero-grid { grid-template-columns:1fr; padding-top:48px; padding-bottom:30px; gap:0; }.hero-copy { padding:0; }.hero h1 { font-size:clamp(42px,11vw,60px); }.hero-intro { font-size:14px; }.hero-note { margin-top:27px; }
  .hero-art { min-height:330px; transform:scale(.85); transform-origin:top center; margin:15px -35px -40px; }.orbit-a { width:340px; height:340px; }.orbit-b { width:260px; height:260px; }.device-laptop { top:83px; }.label-top { top:14px; right:0; }.label-bottom { bottom:12px; left:20%; }.chip-one { top:82px; }.chip-two { top:155px; }
  .trust-grid { grid-template-columns:1fr; padding:12px 0; gap:0; }.trust-grid > div { border-right:0; border-bottom:1px solid var(--line); padding:15px 0; }.trust-grid > div:last-child { border-bottom:0; }
  .section { padding:70px 0; }.two-column,.serve-grid,.contact-grid { grid-template-columns:1fr; gap:28px; }.section-heading h2,.serve-copy h2,.contact-copy h2 { font-size:35px; }.section-body .lead { font-size:16px; }
  .service-cards { grid-template-columns:1fr; gap:13px; }.service-card { min-height:0; padding:25px; }.service-icon { margin-bottom:20px; }.centered-heading { margin-bottom:30px; }
  .serve-grid { gap:30px; }.serve-copy > p { font-size:13px; }.contact-grid { gap:38px; }.contact-form { padding:22px; }.form-row { grid-template-columns:1fr; gap:0; }
  .footer-main { flex-wrap:wrap; }.footer-logo { width:82px; height:82px; }.footer-main > p { order:3; width:100%; }.footer-bottom { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }