:root { --green:#00702d; --ink:#161616; --paper:#f8f8f8; --sage:#dde9e2; --section-space:100px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(32px,2.6vw,50px); background:var(--paper); position:relative; z-index:10; }
.brand img { display:block; width:229px; height:28px; }
.main-nav { display:flex; gap:clamp(28px,3.4vw,65px); align-items:center; font-size:18px; }
.main-nav > a:not(.nav-contact) { transition:color .2s ease; }
.main-nav > a:not(.nav-contact):hover { color:var(--green); }
.nav-contact,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.nav-contact { padding:9px 12px 9px 14px; background:var(--green); color:white; }
.nav-contact img { width:24px; height:24px; }
.nav-contact:hover,.button-primary:hover { transform:translateY(-2px); box-shadow:0 7px 18px #00702d33; }
.menu-toggle { display:none; background:transparent; border:0; padding:8px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px; transition:.2s; }
.hero { min-height:850px; display:grid; grid-template-columns:1fr 1fr; padding-left:clamp(32px,2.6vw,50px); }
.hero-copy { align-self:center; max-width:774px; padding-right:36px; }
h1,h2,h3 { margin:0; font-family:"Bricolage Grotesque",Inter,sans-serif; font-weight:700; letter-spacing:-.04em; }
h1 { font-size:64px; line-height:1.2; }
.hero-copy > p { max-width:752px; font-size:18px; line-height:1.08; margin:20px 0 14px; }
.button-row { display:flex; gap:14px; }
.button { min-height:33px; padding:7px 14px; font-size:16px; line-height:1.2; }
.button-primary { color:var(--paper); background:var(--green); }
.button-outline { color:var(--green); border:2px solid var(--green); }
.button-outline:hover { background:#e5f1e9; }
.hero-image { overflow:hidden; }
.hero-image img { width:100%; height:850px; object-fit:cover; object-position:center; display:block; }
.services { min-height:658px; background:var(--sage); padding:var(--section-space) clamp(32px,2.6vw,50px); display:grid; grid-template-columns:minmax(350px,1fr) minmax(570px,1.14fr); gap:50px; }
h2 { font-size:36px; line-height:1.2; }
.services-copy { max-width:887px; }
.services-copy > p { color:#5e5e5c; font-size:18px; line-height:1.15; margin:31px 0 0; }
.services-copy > p + p { margin-top:23px; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-content:start; }
.service-card { height:219px; background:white; border-radius:12px; padding:13px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px #164d2b19; }
.service-icon { position:relative; overflow:hidden; width:69px; height:69px; margin-bottom:9px; }
.service-icon::before { content:""; position:absolute; inset:4px; background:#00a64370; clip-path:polygon(39% 2%,61% 2%,92% 25%,100% 56%,82% 94%,18% 94%,0 56%,8% 25%); }
.service-icon img { position:absolute; z-index:1; inset:18px; width:33px; height:33px; object-fit:contain; }
.service-card h3 { font-size:20px; line-height:1.15; letter-spacing:-.03em; white-space:nowrap; }
.service-card p { font-size:16px; line-height:1.1; margin:13px 0 0; }
.projects { padding:var(--section-space) clamp(32px,2.6vw,50px) 64px; }
.section-title { display:flex; justify-content:space-between; align-items:center; }
.more-link { border:2px solid var(--green); color:var(--green); border-radius:999px; padding:5px 13px; font-size:14px; transition:.2s; }
.more-link:hover { color:white; background:var(--green); }
.project-grid { margin-top:68px; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.project { border:0; padding:0; border-radius:8px; overflow:hidden; cursor:zoom-in; aspect-ratio:1/1.23; box-shadow:0 3px 4px #0004; background:#ddd; }
.project img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease,filter .4s ease; }
.project:hover img { transform:scale(1.06); filter:brightness(.84); }
.site-footer { min-height:627px; padding:75px clamp(32px,2.6vw,50px) 62px; color:#f8f8f8; background:var(--green); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; column-gap:40px; }
.footer-info { align-self:start; }
.footer-logo { width:204px; height:23px; display:block; margin-bottom:21px; }
.footer-info > p { margin:0 0 44px; font-size:18px; line-height:1.15; }
.contact-line { display:flex; align-items:center; gap:12px; font-size:18px; margin:20px 0; width:max-content; max-width:100%; }
.contact-line img { width:29px; height:29px; object-fit:contain; }
.contact-line:first-of-type img { object-position:0; filter:none; }
.map-wrap { grid-column:2; width:100%; max-width:574px; height:310px; justify-self:end; overflow:hidden; }
.map-wrap iframe { border:0; width:100%; height:100%; filter:grayscale(1) brightness(1.65) contrast(.65); }
.footer-legal { grid-column:1; grid-row:3; align-self:end; border-top:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; display:flex; justify-content:center; gap:21px; padding:11px; font-size:14px; white-space:nowrap; }
.footer-legal a:hover { text-decoration:underline; }
.lightbox { padding:0; max-width:min(950px,90vw); background:transparent; border:0; color:white; }
.lightbox::backdrop { background:#000c; }
.lightbox figure { margin:0; position:relative; }.lightbox figure img { display:block; max-height:82vh; max-width:90vw; }.lightbox figcaption { padding:10px 0; font-weight:600; }.lightbox-close { position:absolute; right:-42px; top:-8px; border:0; background:transparent; color:white; font-size:38px; cursor:pointer; }
@media (max-width:1250px) { :root { --section-space:80px; }.main-nav { gap:28px; font-size:16px; }.hero { min-height:680px; }.hero-image img { height:680px; }.services { grid-template-columns:1fr; }.services-copy { max-width:760px; }.service-grid { grid-template-columns:repeat(3,1fr); }.project-grid { gap:20px; }.site-footer { min-height:560px; }.map-wrap { height:280px; } }
@media (max-width:800px) { :root { --section-space:60px; }.site-header { height:72px; }.brand img { width:176px; height:auto; }.menu-toggle { display:block; z-index:3; cursor:pointer; }.main-nav { display:none; position:absolute; top:72px; left:0; right:0; padding:24px 32px 28px; background:var(--paper); flex-direction:column; align-items:flex-start; gap:22px; box-shadow:0 10px 18px #0001; }.main-nav.open { display:flex; }.nav-contact { align-self:stretch; }.hero { padding:0; grid-template-columns:1fr; min-height:0; }.hero-copy { padding:var(--section-space) 32px; max-width:none; order:2; }.hero-image { order:1; height:52vw; min-height:280px; }.hero-image img { height:100%; }.hero-copy h1 { font-size:clamp(38px,7vw,56px); }.hero-copy > p { font-size:16px; line-height:1.24; }.services { padding:var(--section-space) 32px; gap:40px; }.services-copy > p { font-size:16px; }.service-grid { grid-template-columns:repeat(2,1fr); gap:14px; }.service-card { height:210px; }.service-card h3 { font-size:18px; white-space:normal; }.service-card p { font-size:14px; }.projects { padding:var(--section-space) 32px; }.section-title { align-items:flex-start; gap:18px; }.section-title h2 { font-size:32px; }.project-grid { margin-top:42px; grid-template-columns:repeat(2,1fr); gap:18px; }.site-footer { padding:60px 32px 34px; display:flex; flex-direction:column; gap:44px; }.map-wrap { width:100%; max-width:none; height:280px; order:2; }.footer-legal { order:3; flex-wrap:wrap; white-space:normal; gap:9px 16px; font-size:12px; }.lightbox-close { right:0; top:-44px; } }
@media (max-width:470px) { .hero-copy,.services,.projects { padding-left:20px; padding-right:20px; }.site-header { padding:0 20px; }.service-grid { grid-template-columns:1fr; }.service-card { height:auto; min-height:190px; }.footer-info > p { font-size:16px; }.contact-line { font-size:15px; }.site-footer { padding-left:20px; padding-right:20px; }.button-row { flex-wrap:wrap; } }