:root { --ink:#090a08; --paper:#f2f0e9; --green:#91ad18; --line:rgba(9,10,8,.17); --muted:#66675f; --font-inter:'Inter',Arial,sans-serif; --font-display:'Oswald',Impact,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-inter),Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[hidden] { display:none !important; }
.site-header { height:84px; padding:0 4.5vw; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:rgba(9,10,8,.96); backdrop-filter:blur(12px); width:100%; z-index:20; color:white; border-bottom:1px solid rgba(255,255,255,.12); }
.brand img { width:235px; height:auto; display:block; }
.nav { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:600; }
.nav a:not(.nav-cta) { opacity:.78; transition:.2s; }
.nav a:hover { opacity:1; color:var(--green); }
.nav-cta { border:1px solid rgba(255,255,255,.35); padding:12px 16px; display:flex; gap:14px; }
.nav-cta span,.button span { color:var(--green); }
.menu-button { display:none; background:none; border:0; padding:12px; }
.menu-button span { width:24px; height:1px; background:white; display:block; margin:6px; }
.hero { min-height:760px; background:var(--ink); color:white; display:grid; grid-template-columns:1.1fr .9fr; padding:40px 4.5vw 45px; overflow:hidden; position:relative; }
.hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 35%,rgba(145,173,24,.15),transparent 27%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,72px 72px,72px 72px; }
.hero-copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; padding:12px 5vw 0 0; }
.eyebrow,.kicker { font-size:11px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; }
.eyebrow { color:#c7c9c0; display:flex; align-items:center; gap:9px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(145,173,24,.12); }
.hero h1,.section h2,.contact h2,.reel-section h2 { font-family:var(--font-display),Impact,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:-.035em; line-height:.94; margin:24px 0; }
.hero h1 { font-size:clamp(58px,7.2vw,118px); }
h1 em,h2 em { color:var(--green); font-style:normal; }
.hero-lead { max-width:690px; color:#bfc0ba; font-size:17px; line-height:1.75; }
.hero-location { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.hero-actions { display:flex; gap:12px; margin:28px 0 42px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:16px 20px; border:1px solid; font-size:13px; font-weight:800; transition:.25s; }
.button.primary { background:var(--green); border-color:var(--green); color:var(--ink); }
.button.primary span { color:var(--ink); }
.button.primary:hover { background:#acd02a; transform:translateY(-2px); }
.button.secondary { border-color:#44463e; color:white; }
.button.secondary:hover { border-color:var(--green); }
.hero-proof { display:flex; gap:50px; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; max-width:620px; }
.hero-proof div { display:flex; flex-direction:column; gap:4px; }
.hero-proof strong { font-family:var(--font-display); font-size:28px; color:var(--green); }
.hero-proof span { color:#8f9189; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.hero-portrait-wrap { position:relative; display:flex; align-items:flex-end; justify-content:center; z-index:1; min-width:0; }
.portrait-glow { width:70%; height:70%; border-radius:50%; background:var(--green); position:absolute; top:12%; filter:blur(115px); opacity:.18; }
.hero-portrait { position:relative; width:min(92%,650px); height:690px; object-fit:cover; object-position:center top; filter:saturate(.8) contrast(1.05); clip-path:polygon(9% 0,100% 0,100% 91%,91% 100%,0 100%,0 9%); }
.hero-label { position:absolute; z-index:3; background:var(--green); color:var(--ink); font-size:9px; font-weight:900; letter-spacing:.16em; padding:9px 12px; }
.label-top { top:11%; right:0; }.label-bottom { bottom:2%; left:0; background:white; }
.marquee { background:var(--green); overflow:hidden; height:50px; display:flex; align-items:center; white-space:nowrap; font-family:var(--font-display); font-size:18px; letter-spacing:.08em; }
.marquee div { word-spacing:18px; animation:marquee 24s linear infinite; }
.marquee span { color:white; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-35%)} }
.section { padding:110px 4.5vw; }
.section-heading { display:grid; grid-template-columns:1.4fr .6fr; gap:8vw; align-items:end; padding-bottom:50px; }
.kicker { color:#687b12; margin:0 0 19px; }
.section h2,.contact h2,.reel-section h2 { font-size:clamp(48px,6vw,88px); }
.section-heading h2 { margin:0; }
.section-heading>p { color:var(--muted); font-size:15px; line-height:1.8; max-width:480px; }
.filters { display:flex; gap:8px; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:35px; flex-wrap:wrap; }
.filters button { border:1px solid var(--line); background:transparent; padding:10px 17px; cursor:pointer; font-size:14px; font-weight:700; }
.filters button.active,.filters button:hover { background:var(--ink); border-color:var(--ink); color:white; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:50px 24px; }
.project-card.featured { grid-column:span 2; display:grid; grid-template-columns:1.55fr .45fr; background:#deddd6; }
.project-art { height:470px; background:#1b1c19; position:relative; overflow:hidden; display:grid; place-items:center; transition:.35s; }
.project-card:hover .project-art { transform:translateY(-5px); }
.featured .project-art { height:570px; }
.project-info { padding:22px 0; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.featured .project-info { padding:35px; display:flex; flex-direction:column; justify-content:flex-end; }
.project-info>div>p { font-size:10px; color:#6f715f; text-transform:uppercase; font-weight:800; letter-spacing:.12em; margin:0 0 8px; }
.sunwave-project-logo { display:block; width:min(190px,80%); max-height:105px; height:auto; object-fit:contain; object-position:left center; margin:0 0 22px; }
.project-info h3 { font-family:var(--font-display); font-size:29px; text-transform:uppercase; margin:0; }
.project-description { color:var(--muted); font-size:13px; line-height:1.7; margin:0; }
.project-metric { grid-column:2; font-size:11px; color:#6f7e24; font-weight:700; }
.featured .project-metric { grid-column:auto; margin-top:10px; }
.art-number { position:absolute; left:18px; top:18px; color:rgba(255,255,255,.5); font-size:11px; z-index:5; }
.actual-work { padding:0; background:#07111a; }
.sunwave-gallery,.visual-gallery { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#07111a,#122d3d); }
.sunwave-slide,.visual-slide { position:relative; z-index:1; width:auto; height:100%; max-width:100%; object-fit:contain; box-shadow:0 15px 35px rgba(0,0,0,.35); transition:opacity .2s; }
.gallery-tabs { position:absolute; z-index:4; top:16px; right:16px; display:flex; gap:6px; }
.gallery-tabs button { border:1px solid rgba(255,255,255,.55); background:rgba(7,17,26,.78); color:white; padding:8px 10px; cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.05em; }
.gallery-tabs button.active,.gallery-tabs button:hover { border-color:var(--green); background:var(--green); color:var(--ink); }
.gallery-count { position:absolute; z-index:4; top:18px; left:18px; color:white; font-size:11px; font-weight:800; letter-spacing:.1em; text-shadow:0 1px 4px #000; }
.gallery-prev,.gallery-next { position:absolute; z-index:4; top:50%; width:38px; height:38px; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(7,17,26,.7); color:white; cursor:pointer; font-size:20px; line-height:1; transform:translateY(-50%); }
.gallery-prev { left:16px; }.gallery-next { right:16px; }.gallery-prev:hover,.gallery-next:hover { background:var(--green); color:var(--ink); border-color:var(--green); }
.gallery-dots { position:absolute; z-index:4; bottom:17px; left:50%; display:flex; gap:5px; transform:translateX(-50%); }
.gallery-dot { width:7px; height:7px; padding:0; border:1px solid white; border-radius:50%; background:transparent; cursor:pointer; }.gallery-dot.active { background:var(--green); border-color:var(--green); }
.gallery-caption { position:absolute; z-index:4; bottom:17px; left:18px; color:white; font-size:9px; font-weight:800; letter-spacing:.12em; text-shadow:0 1px 4px #000; }
.sunwave { background:linear-gradient(150deg,#1b2d38 0 45%,#e79d27 46% 58%,#8fae24 59%); }
.sun { width:200px;height:200px;border-radius:50%;background:#ffc554;box-shadow:0 0 80px #f29930;position:absolute;top:8%;right:15%; }
.solar-grid { width:70%; height:43%; background:repeating-linear-gradient(0deg,transparent 0 34px,rgba(255,255,255,.3) 35px),repeating-linear-gradient(90deg,#102733 0 60px,#6c98a5 61px,#102733 63px); transform:perspective(400px) rotateX(55deg) rotateZ(-8deg); position:absolute;bottom:-3%;left:7%;box-shadow:0 18px 30px #10110e; }
.transport { background:linear-gradient(140deg,#cfd2ce,#f8f8f5); }.road { position:absolute;width:160%;height:70%;background:#20211e;transform:rotate(-14deg);bottom:-38%; }.road:after { content:"";position:absolute;top:48%;left:0;width:100%;height:4px;background:repeating-linear-gradient(90deg,#d3bd63 0 70px,transparent 70px 115px); }.van { width:230px;height:110px;background:white;border-radius:45px 22px 14px 15px;box-shadow:0 22px 35px #0005;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:35px;color:#8ba51c;z-index:2;transform:rotate(-5deg); }
.lavid { background:#0b0c0a; }.lavid:before { content:"";width:270px;height:270px;border:1px solid #91ad18;position:absolute;transform:rotate(35deg); }.lavid-mark { color:white;font-family:var(--font-display);font-size:70px;line-height:.85;z-index:1; }.lavid-mark b { color:var(--green);font-weight:inherit; }
.campaign { background:linear-gradient(135deg,#e74728,#fe9b48); }.campaign:before { content:"";position:absolute;width:340px;height:340px;border:55px solid #10110f;border-radius:50%;right:-80px;top:-80px; }.campaign-type { font-family:var(--font-display);font-size:78px;line-height:.8;color:white;z-index:2; }.campaign-type i { font-style:normal;color:#10110f; }
.video { background:radial-gradient(circle at 55% 40%,#8ca61f,#191a17 62%); }.video:before,.video:after { content:"";position:absolute;border:1px solid #fff4;border-radius:50%;width:340px;height:340px; }.video:after { width:230px;height:230px; }.play { width:90px;height:90px;border-radius:50%;background:white;display:grid;place-items:center;padding-left:6px;z-index:2;box-shadow:0 0 0 18px #ffffff1c;font-size:24px; }
.leonela { background:linear-gradient(145deg,#edabc1,#78254d); }.leonela:before { content:"✦";color:#fff5;position:absolute;font-size:280px; }.leonela-type { color:white;font-family:serif;font-size:50px;text-align:center;font-style:italic;z-index:2; }.leonela-type small { display:block;font-family:var(--font-inter);font-size:9px;letter-spacing:.35em;font-style:normal;margin-top:13px; }
.portfolio-note { margin-top:75px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;display:grid;grid-template-columns:180px 1fr;align-items:center; }.portfolio-note span { color:#6d7d1e;font-size:10px;font-weight:900;letter-spacing:.15em; }.portfolio-note p { margin:0;max-width:770px;color:var(--muted);font-size:13px;line-height:1.7; }
.logo-showcase { margin-top:95px; padding-top:65px; border-top:1px solid var(--line); }.logo-showcase-heading { display:grid; grid-template-columns:1fr .65fr; gap:8vw; align-items:end; margin-bottom:35px; }.logo-showcase-heading .kicker { grid-column:1 / -1; margin-bottom:-15px; }.logo-showcase-heading h3 { margin:0; font-family:var(--font-display); font-size:clamp(42px,5vw,72px); line-height:.95; text-transform:uppercase; letter-spacing:-.035em; }.logo-showcase-heading h3 em { color:var(--green); font-style:normal; }.logo-showcase-heading>p:last-child { margin:0; color:var(--muted); font-size:14px; line-height:1.8; max-width:480px; }.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.logo-grid figure { margin:0; min-width:0; }.logo-frame { aspect-ratio:1 / 1; display:grid; place-items:center; padding:20px; overflow:hidden; background:var(--ink); border:1px solid rgba(255,255,255,.12); transition:.25s; }.logo-frame:hover { transform:translateY(-4px); box-shadow:0 12px 25px rgba(0,0,0,.25); }.logo-frame img { width:100%; height:100%; object-fit:contain; }.logo-grid figcaption { padding-top:10px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.services { background:#10110f;color:white; }.light-heading>p { color:#9b9d95; }.services .kicker { color:var(--green); }
.service-list { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #33352f;border-bottom:1px solid #33352f; }
.service-list article { min-height:390px;padding:30px;border-right:1px solid #33352f;display:flex;flex-direction:column; }.service-list article:last-child { border-right:0; }.service-list article>span { color:var(--green);font-size:10px; }.service-list h3 { font-family:var(--font-display);font-size:34px;line-height:1.05;text-transform:uppercase;margin:58px 0 25px; }.service-list p { color:#989b91;font-size:13px;line-height:1.7; }.service-list b { margin-top:auto;color:#c9cac5;font-size:10px;font-weight:600; }
.service-areas { background:#e6e4dc; }
.area-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.area-grid article { min-height:220px; padding:28px; border-right:1px solid var(--line); }.area-grid article:last-child { border-right:0; }
.area-grid article>span { color:#6d7d1e; font-size:11px; font-weight:900; letter-spacing:.12em; }
.area-grid h3 { font-family:var(--font-display); font-size:27px; line-height:1; text-transform:uppercase; margin:35px 0 15px; }
.area-grid p { color:var(--muted); font-size:13px; line-height:1.7; margin:0; }
.about { display:grid;grid-template-columns:.3fr .7fr;gap:8vw; }.about-aside { border-right:1px solid var(--line);padding-right:4vw; }.mini-portrait { width:220px;height:285px;overflow:hidden;filter:grayscale(1);margin:45px 0 20px; }.mini-portrait img { width:100%;height:100%;object-fit:cover; }.about-aside>p:last-child { font-size:11px;line-height:1.7;color:var(--muted);text-transform:uppercase;letter-spacing:.1em; }.about-copy h2 { font-family:var(--font-inter);font-weight:500;text-transform:none;letter-spacing:-.04em;line-height:1.15;font-size:clamp(34px,4vw,60px);margin-top:0; }.about-columns { display:grid;grid-template-columns:1fr 1fr;gap:4vw;color:var(--muted);font-size:14px;line-height:1.9; }.tool-cloud { display:flex;flex-wrap:wrap;gap:10px;margin-top:35px; }.tool-cloud span { display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);padding:10px 13px;color:#090a08;font-size:11px;font-weight:800; }.tool-cloud img { width:21px;height:21px;object-fit:contain;display:block; }
.experience { background:#e6e4dc; }.text-link { font-size:12px;font-weight:800;border-bottom:1px solid;padding-bottom:6px; }.timeline { border-top:1px solid var(--line); }.timeline-row { display:grid;grid-template-columns:.25fr .45fr .3fr;align-items:center;padding:25px 0;border-bottom:1px solid var(--line); }.timeline-row span { font-size:11px;color:#6b7c1e;font-weight:800; }.timeline-row h3 { margin:0;font-size:15px; }.timeline-row p { margin:0;color:var(--muted);font-size:12px; }
.reel-section { min-height:640px;background:#8da71c;color:#0a0b09;padding:90px 4.5vw;display:grid;grid-template-columns:.45fr .55fr;gap:8vw;align-items:center; }.reel-section .kicker { color:#2f3907; }.reel-section h2 { margin:20px 0;font-size:clamp(48px,5vw,76px); }.reel-section h2 em { color:white; }.reel-copy>p:last-child { max-width:520px;font-size:14px;line-height:1.8; }.reel-video { height:auto;aspect-ratio:16 / 9;background:#10110f;overflow:hidden;box-shadow:0 18px 35px rgba(0,0,0,.2);position:relative; }.reel-video iframe { display:block;width:100%;height:100%;border:0; }.reel-fallback { position:absolute;right:14px;bottom:12px;padding:7px 10px;border-radius:3px;background:#090a08cc;color:white;font-size:10px;font-weight:800;letter-spacing:.04em; }
.contact { min-height:720px;background:#090a08;color:white;padding:100px 4.5vw 30px;text-align:center;display:flex;flex-direction:column;align-items:center; }.contact h2 { font-size:clamp(65px,8vw,120px);margin:25px 0; }.contact-lead { color:#a0a299;max-width:700px;font-size:15px;line-height:1.8; }.contact-actions { display:flex;gap:10px;margin-top:30px; }.button.whatsapp { border-color:#42443d; }.button.whatsapp:hover { border-color:var(--green); }.social-links { display:flex; gap:24px; margin-top:24px; }.social-links a { display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid #42443d;padding-bottom:7px;font-size:12px;font-weight:800; }.social-links a:hover { color:var(--green); border-color:var(--green); }.social-icon { width:19px;height:19px;flex:none; }.social-name { color:inherit!important;margin:0!important; }.social-arrow { color:var(--green);font-size:14px;line-height:1; }.contact-footer { border-top:1px solid #292a27;margin-top:auto;padding-top:24px;width:100%;display:flex;justify-content:space-between;color:#777970;font-size:9px;letter-spacing:.14em; }
.section,.reel-section,.contact { content-visibility:auto; contain-intrinsic-size:700px; }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:50; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#25d366; color:white; border:2px solid white; box-shadow:0 8px 25px rgba(0,0,0,.28); transition:.25s; }.whatsapp-float:hover { background:#1ebe5d; transform:translateY(-3px) scale(1.04); }.whatsapp-float svg { width:30px; height:30px; }
@media(max-width:980px){
  .brand img{width:190px}.menu-button{display:block}.nav{position:absolute;top:84px;left:0;right:0;background:#0b0c0a;padding:25px 5vw;flex-direction:column;align-items:flex-start;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s}.nav.open{opacity:1;visibility:visible;transform:none}.nav-cta{width:100%;justify-content:space-between}
  .hero{grid-template-columns:1fr;padding-top:40px}.hero-copy{padding:0}.hero-portrait-wrap{height:530px;margin-top:24px}.hero-portrait{height:520px;width:min(100%,590px)}.hero-proof{gap:25px;justify-content:space-between}
  .section-heading{grid-template-columns:1fr;gap:20px}.project-card.featured{grid-template-columns:1fr}.featured .project-info{padding:22px 0;display:grid;grid-template-columns:1fr 1fr}.featured .project-art{height:470px}
  .service-list{grid-template-columns:1fr 1fr}.service-list article:nth-child(2){border-right:0}.service-list article:nth-child(-n+2){border-bottom:1px solid #33352f}
  .about{grid-template-columns:1fr}.about-aside{border-right:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;padding-bottom:30px}.mini-portrait{margin:0;width:140px;height:175px}.area-grid{grid-template-columns:1fr 1fr}.area-grid article:nth-child(2){border-right:0}.area-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.reel-section{grid-template-columns:1fr}.reel-video{height:auto;aspect-ratio:16 / 9}
}
@media(max-width:640px){
  .site-header{height:72px;padding:0 20px}.brand img{width:165px}.nav{top:72px}.hero{padding:40px 20px 35px;min-height:auto}.hero h1{font-size:53px}.hero-lead{font-size:15px}.hero-location{font-size:9px;line-height:1.6}.hero-actions{flex-direction:column;align-items:stretch}.hero-proof{gap:10px}.hero-proof strong{font-size:23px}.hero-proof span{font-size:8px}.hero-portrait-wrap{height:400px}.hero-portrait{height:395px}.hero-label{font-size:7px}.section{padding:75px 20px}.section h2,.reel-section h2{font-size:46px}.project-grid{grid-template-columns:1fr}.project-card.featured{grid-column:auto}.project-art,.featured .project-art{height:390px}.project-info,.featured .project-info{grid-template-columns:1fr}.project-description{margin-top:4px}.project-metric{grid-column:auto}.portfolio-note{grid-template-columns:1fr;gap:12px}.logo-showcase{margin-top:70px;padding-top:45px}.logo-showcase-heading{grid-template-columns:1fr;gap:20px}.logo-showcase-heading .kicker{margin-bottom:0}.logo-grid{grid-template-columns:1fr 1fr;gap:14px}.logo-frame{height:auto;aspect-ratio:1 / 1;padding:14px}.service-list{grid-template-columns:1fr}.service-list article{min-height:310px;border-right:0!important;border-bottom:1px solid #33352f!important}.service-list h3{margin-top:35px}.area-grid{grid-template-columns:1fr}.area-grid article{border-right:0;border-bottom:1px solid var(--line)!important}.area-grid article:last-child{border-bottom:0!important}.area-grid h3{margin-top:25px}.about-aside{display:grid;grid-template-columns:1fr 1fr}.about-aside .kicker{grid-column:span 2}.about-columns{grid-template-columns:1fr}.timeline-row{grid-template-columns:1fr;gap:8px}.timeline-row h3{font-size:16px}.reel-section{padding:75px 20px}.reel-video{height:auto;aspect-ratio:16 / 9}.contact{padding:80px 20px 25px;min-height:650px}.contact h2{font-size:58px}.contact-actions{flex-direction:column;width:100%}.social-links{gap:18px}.contact-footer{gap:12px;align-items:center;flex-direction:column}.whatsapp-float{right:14px;bottom:14px;width:52px;height:52px}.whatsapp-float svg{width:27px;height:27px}.marquee{height:44px}.marquee div{font-size:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee div{animation:none}.project-card:hover .project-art,.button.primary:hover{transform:none}}