﻿*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;font-family:Arial,Helvetica,sans-serif;background:#eef2f6;color:#17202c;line-height:1.55}
a{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p{margin-top:0}
.site-header{position:fixed;inset:0 auto 0 0;width:248px;background:#17202c;color:#f7fafc;padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;z-index:20}
.brand{font-size:1.32rem;font-weight:900;text-decoration:none;color:#d4f06c;letter-spacing:.02em}
nav{display:grid;gap:8px}
nav a{text-decoration:none;color:#dbe3ee;padding:11px 12px;border-left:3px solid transparent;background:rgba(255,255,255,.05)}
nav a.active,nav a:hover{border-left-color:#d4f06c;background:#263244;color:#fff}
main{margin-left:248px;padding:0 clamp(16px,3.8vw,54px)}
.hero{min-height:100vh;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(320px,1.1fr);gap:18px;align-items:stretch;padding:22px 0}
.hero-copy{background:#f9fbfd;border:1px solid #d6dee8;padding:clamp(24px,4vw,54px);display:flex;flex-direction:column;justify-content:center}
.hero-copy span,.page-intro span,.contact-copy span,.utility span{display:inline-block;margin-bottom:16px;color:#587000;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.hero h1,.page-intro h1,.contact-copy h1{font-size:clamp(2.15rem,4.4vw,4.15rem);line-height:1.02;margin-bottom:18px;letter-spacing:0}
.hero p,.page-intro p,.contact-copy p{font-size:1.06rem;color:#4d5a69;max-width:720px}
.text-link{display:inline-flex;width:max-content;margin-top:12px;padding:10px 0 4px;text-decoration:none;font-weight:900;color:#17202c;border-bottom:3px solid #d4f06c}
.hero-media{min-height:520px;position:relative;background:#dbe3ee}
.hero-media:before{content:"";position:absolute;left:18px;top:18px;right:18px;bottom:18px;border:1px solid rgba(255,255,255,.72);z-index:1;pointer-events:none}
.hero-media img{filter:saturate(.92) contrast(1.03)}
.feature-row{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;padding:8px 0 18px}
.feature-row>div:first-child{background:#263244;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:center}
.feature-row h2{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.06;margin-bottom:12px}
.feature-row p{color:#dbe3ee}
.image-note{background:#f9fbfd;border:1px solid #d6dee8;padding:12px}
.image-note img{height:250px}
.image-note p,.about-mini p{margin:12px 0 0;color:#536170}
.signals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:12px 0 54px}
.signals article{background:#f9fbfd;border:1px solid #d6dee8;padding:22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.signals article:nth-child(2){background:#d4f06c;border-color:#d4f06c;color:#17202c}
.signals b{display:block;color:#587000;margin-bottom:24px}
.signals article:nth-child(2) b{color:#17202c}
.signals h3,.service-grid h2{margin-bottom:8px}
.page-intro{padding:46px clamp(16px,3.8vw,54px) 22px;background:#eef2f6}
.page-intro h1{max-width:980px}
.about-layout{padding:0 clamp(16px,3.8vw,54px) 54px;display:grid;grid-template-columns:.8fr 1.2fr;grid-template-areas:"text wide" "mini wide";gap:18px}
.about-layout>div:first-child{grid-area:wide}
.about-text{grid-area:text;background:#f9fbfd;border:1px solid #d6dee8;padding:26px}
.about-mini{grid-area:mini;background:#17202c;color:#f7fafc;padding:14px}
.about-mini p{color:#dbe3ee}
.wide-img{min-height:560px}
.portrait-img{height:210px}
.services-head{border-bottom:1px solid #d6dee8}
.service-grid{padding:24px clamp(16px,3.8vw,54px) 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.service-grid article{background:#f9fbfd;border:1px solid #d6dee8;padding:20px;min-height:210px}
.service-grid article:nth-child(1),.service-grid article:nth-child(4){background:#263244;color:#fff}
.service-grid article:nth-child(1) p,.service-grid article:nth-child(4) p{color:#dbe3ee}
.service-media{padding:0 clamp(16px,3.8vw,54px) 54px;display:grid;grid-template-columns:1.4fr .6fr;gap:14px}
.service-img{height:330px}
.contact-wrap{padding:46px clamp(16px,3.8vw,54px) 18px;display:grid;grid-template-columns:.88fr 1.12fr;gap:18px}
.contact-copy{background:#f9fbfd;border:1px solid #d6dee8;padding:28px}
.contact-form{display:grid;gap:13px;background:#17202c;color:#fff;padding:26px}
label{font-weight:900}
input,textarea{display:block;width:100%;margin-top:7px;border:1px solid #4b5a6c;background:#263244;color:#fff;padding:12px;font:inherit}
input:focus,textarea:focus{outline:2px solid #d4f06c;outline-offset:1px}
button{border:0;background:#d4f06c;color:#17202c;font-weight:900;padding:13px 16px;cursor:pointer}
.contact-media{padding:0 clamp(16px,3.8vw,54px) 54px;display:grid;grid-template-columns:.7fr 1.3fr;gap:14px}
.contact-img{height:300px}
.utility{max-width:920px;padding:46px clamp(16px,3.8vw,54px) 80px}
.site-footer{margin-left:248px;display:flex;justify-content:space-between;gap:22px;padding:24px clamp(16px,3.8vw,54px);background:#dbe3ee;border-top:1px solid #c8d2df}
.site-footer p{margin:.25rem 0 0;color:#536170}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{color:#17202c}
@media (max-width:980px){.site-header{position:sticky;inset:auto;width:auto;padding:16px;display:block}.brand{display:block;margin-bottom:12px}nav{display:flex;flex-wrap:wrap}.site-header,main,.page-intro,.about-layout,.service-grid,.service-media,.contact-wrap,.contact-media,.utility,.site-footer{margin-left:0}.hero{min-height:auto;grid-template-columns:1fr}.hero-media{min-height:300px}.about-layout,.service-grid,.service-media,.contact-wrap,.contact-media,.feature-row,.signals{grid-template-columns:1fr;grid-template-areas:none}.about-layout>*{grid-area:auto!important}.wide-img{min-height:260px}.service-img,.contact-img,.image-note img{height:230px}.site-footer{flex-direction:column}.footer-links{justify-content:flex-start}}
@media (max-width:520px){main,.page-intro,.about-layout,.service-grid,.service-media,.contact-wrap,.contact-media,.utility{padding-left:12px;padding-right:12px}.hero h1,.page-intro h1,.contact-copy h1{font-size:2rem}nav a{padding:9px 10px}.hero-copy,.feature-row>div:first-child,.about-text,.contact-copy,.contact-form{padding:20px}.hero-media{min-height:240px}}
