:root { --ink:#111211; --muted:#62665f; --line:#d9ddd6; --paper:#f4f5f1; --white:#fff; --green:#405b45; --lime:#c9df62; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; }

.site-header { position:sticky; top:0; z-index:50; min-height:76px; padding:0 4vw; display:grid; grid-template-columns:190px 1fr auto; align-items:center; gap:30px; background:rgba(244,245,241,.94); border-bottom:1px solid rgba(17,18,17,.12); backdrop-filter:blur(14px); }
.brand-link { display:inline-flex; width:max-content; }
.brand-mark { display:flex; align-items:center; width:174px; height:52px; flex:0 0 auto; }
.brand-mark img { width:100%; height:auto; }
.desktop-nav { display:flex; justify-content:center; gap:clamp(20px,3vw,48px); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.desktop-nav a { padding:28px 0 25px; border-bottom:2px solid transparent; }
.desktop-nav a:hover { border-color:var(--ink); }
.header-cta,.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:1px solid var(--ink); font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; transition:transform .2s ease,background .2s ease,color .2s ease; }
.header-cta { background:var(--ink); color:white; }
.header-cta:hover,.button:hover { transform:translateY(-2px); }
.mobile-menu { display:none; position:relative; }

.hero { position:relative; min-height:min(780px,calc(100vh - 76px)); display:flex; align-items:flex-end; overflow:hidden; background:#20241f; }
.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:center 48%; }
.hero-shade { background:linear-gradient(90deg,rgba(5,8,5,.82) 0%,rgba(5,8,5,.37) 48%,rgba(5,8,5,.08) 100%); }
.hero-content { position:relative; z-index:2; width:min(880px,92vw); padding:90px 4vw 78px; color:white; }
.kicker { display:inline-block; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.kicker-light { color:var(--lime); }
.hero h1 { max-width:820px; margin:20px 0 18px; font-size:clamp(52px,7.2vw,112px); line-height:.9; letter-spacing:-.065em; text-wrap:balance; }
.hero p { max-width:590px; margin:0; color:rgba(255,255,255,.84); font-size:clamp(17px,1.7vw,23px); line-height:1.45; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:36px; }
.button-light { border-color:white; background:white; color:var(--ink); }
.button-dark { background:var(--ink); color:white; }
.button-green { border-color:var(--lime); background:var(--lime); color:var(--ink); }
.text-link { font-size:13px; font-weight:700; }
.text-link-light { color:white; }
.hero-index { position:absolute; z-index:2; right:4vw; bottom:32px; display:flex; gap:24px; color:rgba(255,255,255,.72); font-size:10px; font-weight:700; letter-spacing:.14em; }

.trust-strip { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.trust-strip div { display:flex; align-items:center; gap:16px; padding:22px 4vw; border-right:1px solid var(--line); }
.trust-strip div:last-child { border-right:0; }
.trust-strip strong { color:var(--green); font-size:11px; }
.trust-strip span { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.projects-section,.services-section,.about-section,.contact-section { padding:110px 4vw; }
.section-heading { display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,520px); align-items:end; gap:40px; }
.section-heading h2,.about-section h2,.contact-section h2,.detail-data h2,.detail-cta h2 { margin:12px 0 0; font-size:clamp(42px,5vw,76px); line-height:.96; letter-spacing:-.055em; }
.section-heading p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:52px 0 28px; }
.filters button { min-height:42px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:700; }
.filters button:hover,.filters .filter-active { border-color:var(--ink); background:var(--ink); color:white; }
.project-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.project-card { position:relative; grid-column:span 4; display:flex; flex-direction:column; min-width:0; background:white; border:1px solid var(--line); transition:transform .25s ease,box-shadow .25s ease; }
.project-card:nth-child(1),.project-card:nth-child(5) { grid-column:span 8; }
.project-card:hover { transform:translateY(-4px); box-shadow:0 18px 48px rgba(17,18,17,.10); }
.project-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#dfe1da; }
.project-card:nth-child(1) .project-media,.project-card:nth-child(5) .project-media { aspect-ratio:16/9; }
.project-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover img { transform:scale(1.025); }
.project-number { position:absolute; top:14px; left:14px; padding:7px 8px; background:rgba(17,18,17,.86); color:white; font-size:10px; font-weight:800; }
.project-card-copy { padding:20px 48px 24px 20px; }
.project-card-copy>span { color:var(--green); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.project-card h3 { margin:9px 0 8px; font-size:clamp(20px,2vw,28px); letter-spacing:-.03em; }
.project-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.project-arrow { position:absolute; right:20px; bottom:25px; font-size:22px; }

.services-section { background:var(--ink); color:white; }
.section-heading-dark p { color:rgba(255,255,255,.66); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:64px; border-top:1px solid rgba(255,255,255,.18); }
.service-grid article { min-height:260px; padding:28px 34px 28px 0; border-right:1px solid rgba(255,255,255,.18); }
.service-grid article+article { padding-left:34px; }
.service-grid article:last-child { border-right:0; }
.service-grid span { color:var(--lime); font-size:11px; font-weight:800; }
.service-grid h3 { margin:70px 0 14px; font-size:25px; letter-spacing:-.03em; }
.service-grid p { max-width:330px; margin:0; color:rgba(255,255,255,.66); line-height:1.6; }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:9vw; background:#e4e8df; }
.about-copy { padding-top:26px; }
.about-copy p { margin:0 0 24px; color:#41453e; font-size:clamp(18px,2vw,26px); line-height:1.48; letter-spacing:-.02em; }
.contact-section { display:grid; grid-template-columns:1fr minmax(320px,480px); align-items:end; gap:60px; background:var(--green); color:white; }
.contact-section p { max-width:620px; color:rgba(255,255,255,.74); font-size:17px; line-height:1.6; }
.contact-actions { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.contact-actions>a:not(.button) { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.28); font-size:14px; font-weight:700; }
.contact-actions .button { margin-bottom:16px; }
.site-footer { min-height:100px; padding:20px 4vw; display:grid; grid-template-columns:220px repeat(3,1fr); align-items:center; gap:30px; border-top:1px solid var(--line); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:60; width:52px; height:52px; display:grid; place-items:center; border:3px solid white; border-radius:50%; background:#22c55e; color:white; box-shadow:0 8px 24px rgba(0,0,0,.22); font-size:12px; font-weight:900; }

.detail-page { min-height:100vh; background:var(--paper); }
.detail-header { min-height:76px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.detail-back { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.detail-brand { font-size:23px; font-weight:900; letter-spacing:-.05em; }
.detail-brand span { display:block; font-size:8px; font-weight:800; letter-spacing:.35em; text-transform:uppercase; }
.detail-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.7fr); min-height:650px; }
.detail-image { min-height:650px; overflow:hidden; background:#dfe1da; }
.detail-image img { width:100%; height:100%; object-fit:cover; }
.detail-intro { padding:clamp(50px,7vw,110px) 5vw; display:flex; flex-direction:column; justify-content:center; }
.detail-intro h1 { margin:18px 0 24px; max-width:100%; font-size:clamp(42px,4vw,54px); line-height:.94; letter-spacing:-.06em; overflow-wrap:normal; }
.detail-intro p { margin:0 0 36px; color:var(--muted); font-size:17px; line-height:1.65; }
.detail-intro .button { align-self:flex-start; }
.detail-data { padding:96px 4vw; display:grid; grid-template-columns:.7fr 1fr .7fr; gap:6vw; }
.detail-data dl { margin:0; }
.detail-data dl div { padding:18px 0; display:grid; grid-template-columns:130px 1fr; gap:22px; border-bottom:1px solid var(--line); }
.detail-data dt { color:var(--green); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.detail-data dd { margin:0; font-size:14px; line-height:1.5; }
.feature-list { display:flex; flex-direction:column; }
.feature-list span { padding:20px 0; display:flex; gap:16px; border-bottom:1px solid var(--line); font-weight:700; }
.feature-list b { color:var(--green); font-size:10px; }
.detail-cta { padding:80px 4vw; display:flex; align-items:end; justify-content:space-between; gap:40px; background:var(--green); color:white; }

@media (max-width:980px) {
  .site-header { grid-template-columns:1fr auto; min-height:68px; }
  .desktop-nav,.header-cta { display:none; }
  .brand-mark { width:142px; height:44px; }
  .mobile-menu { display:block; }
  .mobile-menu summary { list-style:none; padding:12px 0; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu nav { position:absolute; top:52px; right:0; width:min(320px,88vw); padding:12px 20px 20px; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); box-shadow:0 16px 38px rgba(17,18,17,.14); }
  .mobile-menu nav a { padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; }
  .mobile-menu nav a:last-child { border-bottom:0; color:var(--green); }
  .section-heading { grid-template-columns:1fr; }
  .project-card,.project-card:nth-child(1),.project-card:nth-child(5) { grid-column:span 6; }
  .project-card:nth-child(1) .project-media,.project-card:nth-child(5) .project-media { aspect-ratio:4/3; }
  .detail-hero { grid-template-columns:1fr; }
  .detail-image { min-height:54vw; }
  .detail-data { grid-template-columns:1fr 1fr; }
  .detail-data>div:first-child { grid-column:1/-1; }
  .site-footer { grid-template-columns:1fr 1fr; }
}

@media (max-width:680px) {
  .hero { min-height:700px; }
  .hero-shade { background:linear-gradient(0deg,rgba(5,8,5,.92) 0%,rgba(5,8,5,.56) 64%,rgba(5,8,5,.18) 100%); }
  .hero-content { padding:80px 5vw 78px; }
  .hero h1 { font-size:clamp(48px,17vw,72px); }
  .hero p { font-size:17px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-index { display:none; }
  .trust-strip { grid-template-columns:1fr; }
  .trust-strip div { border-right:0; border-bottom:1px solid var(--line); }
  .projects-section,.services-section,.about-section,.contact-section { padding:78px 5vw; }
  .filters { flex-wrap:nowrap; margin-right:-5vw; padding-right:5vw; overflow-x:auto; scrollbar-width:none; }
  .filters button { flex:0 0 auto; }
  .project-grid { display:flex; flex-direction:column; gap:12px; }
  .project-media,.project-card:nth-child(1) .project-media,.project-card:nth-child(5) .project-media { aspect-ratio:1.22/1; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid article,.service-grid article+article { min-height:0; padding:30px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.18); }
  .service-grid h3 { margin-top:38px; }
  .about-section,.contact-section { grid-template-columns:1fr; }
  .contact-actions { margin-top:8px; }
  .site-footer { grid-template-columns:1fr; gap:12px; padding-top:30px; padding-bottom:30px; }
  .detail-header { min-height:68px; }
  .detail-image { min-height:370px; }
  .detail-intro { padding:58px 5vw 70px; }
  .detail-data { padding:68px 5vw; grid-template-columns:1fr; }
  .detail-data>div:first-child { grid-column:auto; }
  .detail-data dl div { grid-template-columns:110px 1fr; }
  .detail-cta { padding:64px 5vw; align-items:flex-start; flex-direction:column; }
  .whatsapp-float { right:14px; bottom:14px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }


.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:12px 16px; background:#fff; color:#111; font-weight:700; }
.skip-link:focus { top:16px; }
.filter-status { min-height:20px; margin:-16px 0 16px; color:var(--muted); font-size:13px; }
.project-card[hidden] { display:none; }
.error-page { min-height:100vh; display:grid; place-items:center; padding:32px; }
.error-panel { width:min(680px,100%); padding:clamp(32px,7vw,72px); background:white; border:1px solid var(--line); }
.error-panel .brand-mark { margin-bottom:56px; }
.error-panel h1 { margin:18px 0 16px; font-size:clamp(46px,7vw,82px); line-height:.94; letter-spacing:-.055em; }
.error-panel p { margin:0 0 32px; color:var(--muted); font-size:17px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }