:root { --ink:#163c38; --pine:#0e302e; --mint:#d9eee7; --lime:#c6e65d; --cream:#f8f7f2; --coral:#f07a5d; --muted:#55706b; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Manrope,sans-serif; letter-spacing:-.055em; } .site-header { height:86px; max-width:1280px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; } .brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font:bold 20px Manrope,sans-serif; letter-spacing:-.07em; }.brand > span:last-child span { color:#66a992; }.brand-mark { width:29px; height:29px; display:grid; place-items:center; color:var(--cream); background:var(--ink); border-radius:9px 9px 9px 2px; font:800 16px Manrope,sans-serif; letter-spacing:-.1em; }nav { display:flex; gap:32px; margin-left:90px; }nav a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; }.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; border:0; border-radius:7px; padding:15px 18px 15px 21px; background:var(--ink); color:#fff; font:600 14px "DM Sans",sans-serif; text-decoration:none; cursor:pointer; }.button span { font-size:19px; line-height:11px; }.button-small { padding:11px 16px; font-size:13px; }
.hero { max-width:1280px; min-height:610px; padding:75px 32px 55px; margin:auto; display:grid; grid-template-columns:1.02fr .98fr; gap:45px; overflow:hidden; }.hero-copy { padding-top:18px; }.eyebrow { display:flex; align-items:center; gap:9px; text-transform:uppercase; color:#568379; font-size:10px; font-weight:700; letter-spacing:.13em; }.eyebrow span { width:23px; height:1px; background:currentColor; }.hero h1 { max-width:640px; margin:14px 0 22px; font-size:clamp(49px,5.3vw,73px); line-height:1.03; font-weight:800; }.hero h1 em { display:block; color:#70ac98; font-style:normal; }.intro { max-width:510px; color:var(--muted); font-size:17px; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:27px; margin-top:29px; }.text-link { color:var(--ink); font-weight:700; font-size:14px; text-decoration:none; }.text-link span { margin-left:8px; }.trust-row { display:flex; gap:29px; margin-top:64px; }.trust-row div { padding-right:28px; border-right:1px solid #d6dfda; }.trust-row div:last-child { border:0; }.trust-row strong,.trust-row small { display:block; }.trust-row strong { font-size:13px; }.trust-row small { margin-top:2px; color:#738984; font-size:11px; }
.hero-visual { position:relative; align-self:center; min-height:452px; border-radius:35px; overflow:hidden; background:#b8ddcf; }.sun { position:absolute; width:230px; height:230px; border-radius:50%; top:-60px; right:-37px; background:#e5ef8a; }.house { position:absolute; width:326px; height:324px; left:50%; bottom:0; transform:translateX(-50%); }.roof { position:absolute; inset:0 5px auto; height:135px; background:#347265; clip-path:polygon(50% 0,100% 90%,100% 100%,0 100%,0 90%); }.home-body { position:absolute; bottom:0; left:43px; width:240px; height:230px; background:#f6f1db; border-radius:3px 3px 0 0; }.window { position:absolute; top:52px; display:grid; grid-template-columns:1fr 1fr; gap:6px; width:50px; height:58px; padding:6px; background:#2d665e; border:5px solid #fff5d7; }.window i { background:#a8d7d1; }.window-left { left:29px; }.window-right { right:29px; }.door { position:absolute; width:55px; height:102px; bottom:0; left:91px; border-radius:28px 28px 0 0; background:#40766b; }.door span { position:absolute; right:10px; top:54px; height:6px; width:6px; border-radius:50%; background:#e7e57a; }.floating-card { position:absolute; z-index:2; display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid rgba(255,255,255,.8); border-radius:11px; background:rgba(255,255,255,.77); box-shadow:0 12px 25px rgba(31,78,70,.12); backdrop-filter:blur(4px); }.floating-card small,.floating-card strong { display:block; }.floating-card small { font-size:9px; color:#627d76; }.floating-card strong { margin-top:2px; font-size:12px; }.card-icon { width:25px; height:25px; display:grid; place-items:center; background:#ddf08d; border-radius:7px; color:#3a705e; }.card-temp { top:111px; left:23px; }.card-light { right:18px; bottom:86px; }.pulse { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 7px rgba(240,122,93,.16); }.pulse-one { left:23%; top:39%; }.pulse-two { right:25%; top:27%; }.orb { position:absolute; border-radius:50%; background:#f5a689; opacity:.95; }.orb-one { width:18px; height:18px; top:42%; right:15%; }.orb-two { width:10px; height:10px; bottom:24%; left:12%; }
.section { max-width:1280px; margin:auto; padding:105px 32px; }.section-heading { display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:30px; margin-bottom:42px; }.section-heading .eyebrow { align-self:start; }.section-heading h2 { margin:0; font-size:42px; line-height:1.1; }.section-heading > p:last-child { margin:0; max-width:280px; color:var(--muted); font-size:14px; line-height:1.6; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.service-card { min-height:252px; padding:23px; position:relative; background:#edf0e9; border-radius:12px; }.service-card.featured { background:#d7ebcc; }.service-number { color:#6c8880; font-size:11px; font-weight:700; }.service-card h3 { margin:48px 0 8px; font-size:21px; }.service-card p { margin:0; color:#617a74; font-size:12px; line-height:1.55; }.line-icon { position:absolute; right:23px; top:23px; width:31px; height:31px; border:2px solid var(--ink); border-radius:50%; opacity:.82; }.lighting:after { content:""; position:absolute; width:11px; height:14px; top:6px; left:8px; border:2px solid var(--ink); border-radius:9px 9px 5px 5px; }.climate { border-radius:8px; }.climate:after { content:"≋"; position:absolute; font-size:23px; left:5px; top:-3px; }.secure { border-radius:12px 12px 16px 16px; }.secure:after { content:""; position:absolute; top:7px; left:9px; width:9px; height:11px; border:2px solid var(--ink); border-radius:5px 5px 2px 2px; }.energy { border-radius:4px; transform:rotate(45deg); }.energy:after { content:""; position:absolute; height:17px; width:2px; background:var(--ink); left:13px; top:5px; transform:rotate(-45deg); }.statement { padding:85px 28px; color:#f9f8f2; text-align:center; background:#79a894; }.statement p { margin:0; font:500 clamp(28px,3.1vw,43px)/1.25 Manrope,sans-serif; letter-spacing:-.05em; }.statement strong { color:#e8f2a1; }.process { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }.section-heading.compact { display:block; }.section-heading.compact h2 { margin-top:15px; }.steps { margin:0; padding:0; list-style:none; }.steps li { display:grid; grid-template-columns:72px 1fr; padding:0 0 27px; margin-bottom:27px; border-bottom:1px solid #d6dfda; }.steps li:last-child { border:0; }.steps span { color:#6ca08e; font:700 13px Manrope,sans-serif; }.steps h3 { margin-bottom:7px; font-size:21px; }.steps p { max-width:410px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.contact { max-width:1216px; margin:5px auto 70px; padding:55px; display:grid; grid-template-columns:1fr 1fr; gap:100px; border-radius:17px; background:var(--pine); color:white; }.contact .eyebrow { color:#a9d9c8; }.contact h2 { margin:16px 0; font-size:43px; line-height:1.1; }.contact > div > p:last-child { max-width:360px; color:#b5cbc4; line-height:1.6; font-size:14px; }.contact-form { display:grid; gap:14px; }.contact-form label { color:#cce1d9; font-size:11px; font-weight:600; }.contact-form input,.contact-form textarea { display:block; width:100%; margin-top:5px; padding:10px 0; color:#fff; background:transparent; border:0; border-bottom:1px solid #60837b; outline:0; font:14px "DM Sans",sans-serif; resize:vertical; }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#9db6ae; }.button-light { width:max-content; margin-top:6px; background:var(--lime); color:var(--pine); }footer { max-width:1216px; margin:auto; padding:0 0 35px; display:flex; align-items:center; justify-content:space-between; color:#708580; font-size:11px; }footer p { margin:0; }
.pricing { background:#f0f3ed; max-width:none; padding-left:max(32px,calc((100% - 1216px) / 2)); padding-right:max(32px,calc((100% - 1216px) / 2)); }.price-grid { max-width:1216px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.price-card { min-height:396px; padding:29px; position:relative; display:flex; flex-direction:column; border:1px solid #dfe6df; border-radius:13px; background:var(--cream); }.price-card.recommended { border:0; background:var(--ink); color:#fff; box-shadow:0 16px 30px rgba(14,48,46,.18); }.price-label { margin:0; font:700 15px Manrope,sans-serif; letter-spacing:-.04em; }.price { margin:13px 0 9px; font:800 38px Manrope,sans-serif; letter-spacing:-.07em; }.price small { margin-right:5px; color:#759188; font:700 10px "DM Sans",sans-serif; letter-spacing:0; }.recommended .price small,.recommended .price-copy { color:#b9d3cb; }.price-copy { min-height:40px; margin:0; color:var(--muted); font-size:13px; line-height:1.5; }.price-card ul { margin:25px 0 auto; padding:0; list-style:none; }.price-card li { margin:0 0 10px; font-size:13px; }.price-card li:before { content:"✓"; margin-right:9px; color:#6ba690; font-weight:700; }.recommended .price-card li:before,.recommended li:before { color:var(--lime); }.price-card .text-link { margin-top:23px; }.price-card .button { margin-top:23px; align-self:flex-start; color:var(--pine); background:var(--lime); }.badge { position:absolute; top:18px; right:18px; margin:0; padding:5px 9px; color:var(--pine); border-radius:20px; background:var(--lime); text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.08em; }.pricing-note { max-width:1216px; margin:25px auto 0; color:#6b817b; text-align:center; font-size:11px; line-height:1.55; }
@media (max-width:760px) { .site-header { height:72px; padding:0 20px; } nav,.site-header .button { display:none; }.hero { grid-template-columns:1fr; padding:47px 20px 50px; gap:40px; }.hero-copy { padding-top:0; }.hero h1 { font-size:50px; }.intro { font-size:16px; }.trust-row { margin-top:42px; gap:14px; }.trust-row div { padding-right:14px; }.hero-visual { min-height:360px; }.house { transform:translateX(-50%) scale(.82); transform-origin:bottom center; }.card-temp { top:74px; left:15px; }.card-light { right:12px; bottom:46px; }.section { padding:74px 20px; }.section-heading { display:block; }.section-heading h2 { margin:15px 0; font-size:37px; }.service-grid { grid-template-columns:1fr 1fr; }.service-card { min-height:216px; padding:18px; }.service-card h3 { margin-top:43px; }.statement { padding:70px 20px; }.pricing { padding-left:20px; padding-right:20px; }.price-grid { grid-template-columns:1fr; }.price-card { min-height:0; }.statement { padding:70px 20px; }.process { grid-template-columns:1fr; gap:34px; }.contact { margin:0; border-radius:0; padding:47px 20px; grid-template-columns:1fr; gap:25px; }.contact h2 { font-size:38px; } footer { padding:27px 20px; flex-wrap:wrap; gap:14px; } footer p:nth-child(2) { width:100%; order:3; } }