:root { --ink:#111411; --green:#356f25; --dark:#081a11; --max:1210px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:#111; background:#fff; font-size:15px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.site-header { background:#fff; position:relative; z-index:5; }
.header-inner { max-width:1320px; margin:auto; min-height:90px; padding:16px 20px; display:flex; align-items:center; gap:20px; justify-content:space-between; }
.wordmark-link { display:inline-flex; flex:0 0 205px; align-items:center; overflow:hidden; }
.wordmark { width:205px; display:block; height:auto; }
.primary-nav { display:flex; align-items:center; gap:24px; justify-content:center; margin-left:auto; }
.primary-nav a { font-size:13px; white-space:nowrap; }
.primary-nav .active { font-weight:700; border-bottom:2px solid #337d25; padding-bottom:8px; margin-bottom:-10px; }
.header-actions { display:flex; align-items:center; gap:16px; }
.header-phone { font-size:16px; font-weight:800; white-space:nowrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:15px; border:0; border-radius:4px; white-space:nowrap; font:inherit; font-weight:700; cursor:pointer; }
.btn-header { background:#101311; color:white; padding:15px 17px; font-size:12px; min-height:39px; }
.hero { position:relative; height:360px; isolation:isolate; overflow:hidden; }
.hero-photo { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)),url('assets/hero_midland_harbour_panorama.jpg') center 50%/cover no-repeat; transform:scale(1.03); }
.hero-credit { position:absolute; z-index:2; right:9px; bottom:5px; margin:0; padding:4px 6px; border-radius:3px; background:rgba(0,0,0,.68); color:#fff; font-size:10px; line-height:1.25; }
.hero-credit a { text-decoration:underline; }
.hero-panel { position:absolute; left:50%; transform:translateX(-50%); top:12px; width:min(480px,92vw); height:344px; display:flex; align-items:center; flex-direction:column; justify-content:center; text-align:center; color:white; }
.hero-emblem-backdrop { width:236px; height:236px; border-radius:50%; background:rgba(0,0,0,.43); box-shadow:0 7px 18px rgba(0,0,0,.26); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-emblem { display:block; width:226px; height:226px; object-fit:contain; }
.hero-caption-box { width:min(430px,96%); margin-top:-8px; padding:12px 20px 11px; border-radius:16px; background:rgba(0,0,0,.53); box-shadow:0 7px 22px rgba(0,0,0,.16); }
.hero-panel h1 { margin:0 0 7px; font-size:15px; line-height:1.15; letter-spacing:5px; white-space:nowrap; font-weight:700; }
.caption-rule { display:block; height:1px; background:rgba(255,255,255,.68); width:95%; margin:0 auto; }
.hero-area { margin:8px 0 0; font-size:11px; line-height:1.45; font-weight:500; letter-spacing:1.35px; }
.section-inner { max-width:var(--max); margin:0 auto; }
.services { padding:14px 28px 18px; }
.section-heading { text-align:center; }
.eyebrow { display:block; font-size:12px; font-weight:600; letter-spacing:3.5px; margin:0; }
.short-rule { display:block; width:39px; height:2px; margin:9px auto 10px; background:#306d2e; }
.section-heading h2:not(.eyebrow) { font-size:29px; letter-spacing:-.6px; margin:0 0 2px; font-weight:800; }
.section-heading p { font-size:16px; margin:0; }
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-top:20px; }
.service-card { border:1px solid #e5e8e6; border-radius:6px; text-align:center; padding:0 13px 14px; min-height:270px; overflow:hidden; display:flex; flex-direction:column; align-items:center; }
.service-visual { position:relative; width:calc(100% + 26px); height:134px; margin:0 -13px 10px; overflow:hidden; background:#e8ece8; }
.service-photo { display:block; width:100%; max-width:none; height:100%; object-fit:cover; margin:0; }
.service-icon { position:absolute; left:50%; top:50%; width:40%; aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; pointer-events:none; }
.service-icon img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.service-icon-support { transform:scale(1.06); filter:brightness(0) blur(.18px); opacity:.82; mix-blend-mode:multiply; }
.service-icon-mark { z-index:1; filter:drop-shadow(0 0 2.2px rgba(0,0,0,.82)) drop-shadow(0 1px 2px rgba(0,0,0,.38)); }
/* Per-icon refinement layers: CSS-only depth/tint support; approved icon bytes remain unchanged. */
#snow-removal .service-icon-support { transform:scale(1.065); opacity:.86; }
#lawn-care .service-icon-support { transform:scale(1.055); opacity:.86; }
#landscaping .service-icon-support { transform:scale(1.06); opacity:.84; }
#property-cleanups .service-icon-support { transform:scale(1.055); opacity:.88; }
#property-cleanups .service-icon-mark { filter:drop-shadow(0 0 2.8px rgba(0,0,0,.92)) drop-shadow(0 1px 2px rgba(0,0,0,.42)); }
#snow-removal .service-icon-mark { filter:drop-shadow(0 0 2.7px rgba(0,0,0,.90)) drop-shadow(0 1px 2px rgba(0,0,0,.40)); }
.service-card h3 { font-size:16px; letter-spacing:-.2px; font-weight:800; margin:2px 0 4px; }
.service-card p { margin:2px 0 8px; font-size:13.4px; line-height:1.35; min-height:73px; }
.service-card a { margin-top:auto; font-size:13px; font-weight:800; }
.service-card a span { margin-left:9px; }
.why { background:#f8fcf9; padding:18px 20px 22px; }
.why-heading .short-rule { margin-bottom:18px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.why-item { text-align:center; padding:4px 23px 0; min-height:122px; border-right:1px solid #dde4df; }
.why-item:last-child { border-right:0; }
.why-item svg { height:43px; width:48px; display:block; margin:0 auto 6px; }
.why-item h3 { font-size:15px; margin:6px 0; }
.why-item p { font-size:14px; line-height:1.4; margin:0; }
.why-seasonal-icons { width:181px; max-width:100%; height:43px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; gap:4px; overflow:visible; }
.why-seasonal-icons img { width:40px; height:40px; object-fit:contain; display:block; flex:0 0 40px; }
.contact-band { background:linear-gradient(115deg,#102c20,#081c13); color:#fff; }
.contact-inner { max-width:1210px; margin:auto; min-height:130px; padding:14px 32px; display:grid; grid-template-columns:1.2fr 1fr 1.1fr; align-items:center; gap:34px; }
.contact-pitch h2 { font-size:24px; line-height:1.1; margin:0 0 7px; }
.contact-pitch p { font-size:13px; margin:0; }
.btn-green { background:#377528; padding:16px 15px; font-size:14px; text-align:center; }
.contact-details { line-height:1.34; font-size:12px; }
.contact-details a { display:block; margin:4px 0; }
.contact-details p { margin:5px 0; }
.contact-details p span { display:block; padding-left:18px; }
.site-footer { background:#000; color:#f8f8f8; }
.footer-inner { max-width:1210px; margin:auto; min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 32px; }
.footer-wordmark { flex-basis:205px; }
.footer-nav { display:flex; gap:24px; align-items:center; font-size:12px; }
.footer-area { font-size:12px; color:#cbd1ce; line-height:1.4; margin:0; text-align:right; }
.estimate-dialog { width:min(820px,calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:10px; box-shadow:0 24px 80px rgba(0,0,0,.38); }
.estimate-dialog::backdrop { background:rgba(3,15,9,.76); }
.estimate-form { padding:25px; }
.dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.dialog-heading h2 { margin:5px 0 0; font-size:28px; }
.dialog-close { border:0; background:transparent; color:#283129; font-size:33px; line-height:1; cursor:pointer; }
.form-intro { margin:10px 0 18px; color:#39423a; line-height:1.45; }
.form-status { display:none; margin:0 0 16px; padding:12px 14px; border-radius:5px; line-height:1.4; }
.form-status.visible { display:block; }
.form-status.success { background:#e8f4e5; color:#1e4d19; }
.form-status.error { background:#fae9e6; color:#7b251d; }
.estimate-form fieldset { margin:0 0 17px; padding:15px; border:1px solid #d8ded9; border-radius:6px; }
.estimate-form legend { padding:0 7px; font-weight:800; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 16px; }
.estimate-form label { display:flex; flex-direction:column; gap:6px; color:#263229; font-size:13px; font-weight:700; }
.estimate-form input,.estimate-form select,.estimate-form textarea { width:100%; padding:10px 11px; border:1px solid #aeb8b0; border-radius:4px; background:#fff; color:#111; font:inherit; }
.estimate-form textarea { resize:vertical; }
.estimate-form input:focus,.estimate-form select:focus,.estimate-form textarea:focus { outline:3px solid rgba(53,111,37,.2); border-color:var(--green); }
.estimate-form .check-row,.estimate-form .consent-row { flex-direction:row; align-items:flex-start; gap:9px; margin-top:12px; font-weight:500; line-height:1.4; }
.estimate-form .check-row input,.estimate-form .consent-row input { width:auto; margin-top:2px; }
.field-help { margin:8px 0 0; color:#566158; font-size:12px; line-height:1.4; }
.form-actions { display:flex; align-items:center; gap:18px; }
.form-actions p { margin:0; font-size:13px; }
.form-actions a { text-decoration:underline; font-weight:700; }
.submit-button { color:#fff; min-width:180px; }
.submit-button[disabled] { opacity:.65; cursor:wait; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media(max-width:1000px) {
 .header-inner { gap:10px; padding-left:16px; padding-right:16px; }
 .wordmark-link, .footer-wordmark { flex-basis:148px; }
 .wordmark { width:148px; }
 .primary-nav { gap:15px; }
 .header-actions { gap:12px; }
 .header-phone { font-size:14px; }
 .btn-header { font-size:11px; padding:12px; }
 .contact-inner { gap:14px; }
}
@media(max-width:750px) {
 .header-inner { flex-wrap:wrap; min-height:auto; justify-content:space-between; padding:12px 15px; row-gap:13px; }
 .wordmark-link { flex-basis:172px; }
 .wordmark { width:172px; }
 .primary-nav { order:3; flex:1 0 100%; justify-content:space-evenly; padding:0 0 4px; margin:0; gap:8px; }
 .primary-nav a { font-size:12px; }
 .header-actions { margin-left:auto; }
 .header-phone { display:none; }
 .btn-header { padding:12px; white-space:normal; font-size:11px; }
 .hero { height:360px; }
 .hero-photo { background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)),url("assets/hero_midland_harbour_panorama.jpg"); background-size:cover; background-repeat:no-repeat; background-position:center 48%; transform:scale(1.06); }
 .hero-panel { width:88%; max-width:440px; top:12px; height:348px; }
 .hero-credit { right:5px; bottom:4px; max-width:90%; font-size:9px; }
 .hero-emblem-backdrop { width:216px; height:216px; background:rgba(0,0,0,.43); box-shadow:0 6px 15px rgba(0,0,0,.25); }
 .hero-emblem { width:208px; height:208px; }
 .hero-caption-box { width:min(390px,98%); margin-top:-4px; padding:11px 15px 10px; }
 .hero-panel h1 { font-size:12px; letter-spacing:2.5px; }
 .hero-area { letter-spacing:1px; font-size:10px; }
 .services { padding:25px 16px; }
 .section-heading h2:not(.eyebrow) { font-size:27px; }
 .section-heading p { font-size:14px; max-width:520px; margin:auto; }
 .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .service-card { min-height:290px; }
 .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 0; }
 .why-item:nth-child(2){border-right:0}
 .contact-inner { grid-template-columns:1fr; text-align:center; padding:25px 20px; gap:16px; }
 .contact-pitch h2 br {display:none;}
 .btn-green { justify-self:center; }
 .contact-details p span { padding:0; }
 .footer-inner { min-height:100px; padding:18px 22px; flex-wrap:wrap; }
 .footer-nav { gap:15px; }
 .footer-area { display:none; }
 .form-grid { grid-template-columns:1fr; }
 .estimate-form { padding:20px 16px; }
}
@media(max-width:405px) {
 .wordmark-link { flex-basis:138px; }
 .wordmark { width:138px; }
 .btn-header { font-size:10px; padding:10px 9px; }
 .service-card { padding:0 8px 12px; min-height:300px; }
 .service-visual { width:calc(100% + 16px); margin:0 -8px 9px; height:118px; }
 .service-card h3 { font-size:15px; }
 .service-card p { font-size:12px; }
 .why-item { padding:4px 12px; }
 .why-item p { font-size:12px; }
 .footer-wordmark { flex-basis:145px; }
 .footer-nav { gap:12px; font-size:11px; }
}