:root { --yellow:#f3e610; --ink:#111; --graphite:#252525; --ash:#f5f5f5; --muted:#6b6b6b; --white:#fff; --line:rgba(17,17,17,.14); --radius:12px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; top:-60px; left:16px; z-index:50; padding:10px 14px; background:var(--yellow); color:var(--ink); font-weight:800; }.skip-link:focus { top:16px; }
.wrap { width:min(1184px,calc(100% - 48px)); margin-inline:auto; }
.header { height:82px; position:absolute; z-index:10; top:0; left:0; right:0; display:flex; align-items:center; width:min(1280px,calc(100% - 64px)); margin:auto; border-bottom:1px solid rgba(255,255,255,.2); color:white; }
.brand { display:block; width:95px; margin-right:auto; }.brand img { display:block; width:100%; height:54px; object-fit:contain; }
.nav { display:flex; gap:32px; margin-right:34px; }.nav a { font-weight:700; font-size:13px; opacity:.88; }.nav a:hover { color:var(--yellow); }
.button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; gap:24px; padding:14px 20px; border:0; border-radius:2px; background:var(--yellow); color:var(--ink); font:800 13px/1 Manrope,sans-serif; cursor:pointer; transition:background .2s,transform .2s; }.button:hover { background:#fff357; transform:translateY(-2px); }.button span { font-size:18px; line-height:0; }.button--small { min-height:42px; padding:11px 16px; }.menu-button { display:none; }
.hero { position:relative; min-height:750px; overflow:hidden; color:white; background:linear-gradient(90deg,rgba(9,9,9,.96) 0%,rgba(9,9,9,.77) 50%,rgba(9,9,9,.42)),url('assets/fotos/quadra-4.jpg') 67% 52%/cover; }.hero__grid { position:absolute; inset:0; opacity:.23; background-image:linear-gradient(rgba(255,255,255,.19) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.19) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,black,transparent 75%); }
.hero__content { position:relative; padding-top:192px; }.eyebrow { display:flex; gap:10px; align-items:center; margin:0 0 19px; color:var(--muted); font:500 11px/1.2 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }.eyebrow span { width:24px; height:2px; background:var(--yellow); }.eyebrow--light { color:rgba(255,255,255,.66); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; line-height:1.02; } h1 { width:min(805px,100%); margin-bottom:27px; font-size:clamp(52px,6.1vw,88px); font-weight:800; } h1 em,h2 em { color:var(--yellow); font-style:normal; }.hero__lead { max-width:565px; margin-bottom:34px; color:rgba(255,255,255,.76); font-size:18px; }.hero__actions { display:flex; align-items:center; gap:27px; }.text-link { display:inline-flex; align-items:center; gap:11px; padding-bottom:5px; border-bottom:1px solid var(--ink); font-size:13px; font-weight:800; }.text-link span { font-size:18px; }.text-link--light { border-color:rgba(255,255,255,.7); color:white; }
.hero__bottom { position:absolute; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,150px) 1fr; gap:24px; align-items:end; padding-bottom:34px; }.hero__bottom div { display:flex; flex-direction:column; border-left:1px solid var(--yellow); padding-left:11px; }.hero__bottom b { color:rgba(255,255,255,.62); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.hero__bottom strong { font-size:14px; }.hero__bottom p { justify-self:end; margin:0; color:var(--yellow); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }
.section { padding:128px 0; }.intro__grid { display:grid; grid-template-columns:1fr 2.05fr 1fr; gap:42px; }.intro h2 { font-size:clamp(36px,4vw,59px); }.intro h2 em { color:var(--graphite); text-decoration:underline var(--yellow) 8px; text-underline-offset:2px; }.intro__copy { padding-top:8px; }.intro__copy p { color:var(--muted); font-size:15px; }
.field-work { padding:0 0 128px; }.field-work__heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:37px; }.field-work h2 { max-width:660px; margin:0; font-size:clamp(37px,4.1vw,61px); }.field-work h2 em { color:var(--graphite); font-style:normal; text-decoration:underline var(--yellow) 8px; text-underline-offset:2px; }.field-work__heading>p { width:300px; margin:0; color:var(--muted); font-size:14px; }.field-work__grid { display:grid; grid-template-columns:1.3fr .8fr .8fr; grid-template-rows:230px 230px; gap:15px; }.field-work__photo { position:relative; overflow:hidden; margin:0; background:#222; }.field-work__photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s; }.field-work__photo:hover img { transform:scale(1.04); }.field-work__photo::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(0,0,0,.76),transparent 55%); }.field-work__photo figcaption { position:absolute; z-index:1; bottom:19px; left:20px; color:white; }.field-work__photo figcaption b { display:block; font-size:13px; }.field-work__photo figcaption span { color:rgba(255,255,255,.7); font:400 10px 'DM Mono',monospace; }.field-work__photo--hero { grid-row:span 2; }.field-work__photo--hero img { object-position:54% 48%; }.field-work__photo--detail img { object-position:45% 45%; }.field-work__photo--inside img { object-position:50% 38%; }.field-work__manifesto { display:flex; flex-direction:column; justify-content:space-between; padding:25px; background:var(--yellow); }.field-work__manifesto>span { font-size:28px; }.field-work__manifesto p { margin:0; font-size:20px; font-weight:800; letter-spacing:-.045em; line-height:1.12; }.field-work__manifesto small { font:500 9px 'DM Mono',monospace; letter-spacing:.07em; }.field-work__reels { display:grid; grid-template-columns:1fr 1fr; gap:3px; overflow:hidden; background:var(--ink); }.reel-card { position:relative; display:block; min-width:0; overflow:hidden; background:#111; }.reel-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .4s; }.reel-card:hover img { transform:scale(1.05); }.reel-card::after { position:absolute; content:""; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%); }.reel-card span { position:absolute; z-index:1; bottom:10px; left:10px; color:#fff; font:600 8px 'DM Mono',monospace; letter-spacing:.02em; text-transform:uppercase; }.reel-card i { margin-right:4px; color:var(--yellow); font-style:normal; }.section--ash { background:var(--ash); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:50px; }.section-heading h2 { max-width:650px; margin-bottom:0; font-size:clamp(37px,4.1vw,61px); }.section-heading>p { width:300px; margin:0; color:var(--muted); font-size:14px; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); }.service { position:relative; display:flex; min-height:350px; flex-direction:column; padding:29px; border:1px solid var(--line); background:white; transition:transform .2s,box-shadow .2s; }.service:hover { z-index:1; box-shadow:0 18px 35px rgba(0,0,0,.12); transform:translateY(-5px); }.service--featured { background:var(--graphite); color:white; }.service__number { position:absolute; right:23px; top:21px; color:#aaa; font:500 11px 'DM Mono',monospace; }.service__icon { display:grid; width:47px; height:47px; place-items:center; margin-bottom:auto; border-radius:50%; background:var(--yellow); color:var(--ink); font-size:23px; }.service h3 { margin:0 0 11px; font-size:27px; }.service p { margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.6; }.service--featured p { color:rgba(255,255,255,.67); }.service a { font-size:12px; font-weight:800; }.service a span { margin-left:8px; color:var(--yellow); font-size:17px; }
.projects { background:var(--graphite); color:white; }.section-heading--dark h2 { max-width:710px; }.project-grid { display:grid; grid-template-columns:1.5fr .85fr .85fr; grid-template-rows:240px 240px; gap:16px; }.project { position:relative; overflow:hidden; padding:26px; background:#434343 center/cover; }.project--wide { grid-row:span 2; background-image:url('assets/fotos/equipe-montagem.png'); }.project--tall { grid-row:span 2; background-image:url('assets/fotos/reel-no-pelo.jpg'); }.project--small { background-image:linear-gradient(160deg,#847a1f,#1a1a1a); }.project--cable { background-image:url('assets/fotos/passa-cabos.png'); }.project--reel { background-position:center; }.project__overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 72%); }.project__content { position:relative; z-index:1; display:flex; height:100%; flex-direction:column; align-items:flex-start; justify-content:flex-end; }.project__content p { margin-bottom:8px; font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }.project h3 { margin:0 0 17px; font-size:32px; }.project span { display:flex; gap:25px; align-items:center; font-size:12px; font-weight:700; }.project span b { color:var(--yellow); font-size:18px; }.partners { padding-top:116px; }.partners__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }.partners h2 { margin:0 0 25px; font-size:clamp(40px,4vw,59px); }.partners h2 em { color:var(--graphite); font-style:normal; text-decoration:underline var(--yellow) 8px; text-underline-offset:2px; }.partners__copy>p:not(.eyebrow) { max-width:440px; color:var(--muted); font-size:15px; }.partners__board { position:relative; margin:0; padding:18px; background:var(--graphite); }.partners__board img { display:block; width:100%; height:auto; }.partners__board figcaption { position:absolute; top:18px; left:18px; padding:7px 9px; background:var(--yellow); color:var(--ink); font:500 9px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.process__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:110px; }.process h2 { margin:0; font-size:clamp(39px,4vw,57px); }.process h2 em { color:var(--graphite); }.process__list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.process__list li { display:grid; grid-template-columns:70px 1fr; gap:17px; padding:26px 0; border-bottom:1px solid var(--line); }.process__list>li>span { color:#9c9c9c; font:500 11px 'DM Mono',monospace; }.process__list h3 { margin:0 0 8px; font-size:25px; }.process__list p { max-width:430px; margin:0; color:var(--muted); font-size:14px; }
.about__grid { display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:center; }.about h2 { margin-bottom:25px; font-size:clamp(42px,4vw,59px); }.about__grid>div:last-child>p { max-width:475px; color:var(--muted); font-size:15px; }.about__media { position:relative; width:min(100%,490px); aspect-ratio:1.05; overflow:hidden; background:var(--graphite); }.about__media>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.08); }.about__media::after { position:absolute; inset:0; content:""; background:linear-gradient(135deg,rgba(17,17,17,.14),rgba(17,17,17,.56)); }.about__media>div { position:absolute; z-index:1; right:0; bottom:0; display:flex; width:195px; min-height:148px; flex-direction:column; justify-content:flex-end; padding:20px; background:var(--yellow); color:var(--ink); }.about__media span,.about__media small { font:500 9px 'DM Mono',monospace; letter-spacing:.08em; }.about__media strong { margin:4px 0 5px; font-size:41px; letter-spacing:-.1em; line-height:1; }.about__facts { display:flex; gap:45px; margin-top:33px; }.about__facts div { display:flex; flex-direction:column; }.about__facts strong { font-size:33px; letter-spacing:-.07em; }.about__facts span { color:var(--muted); font-size:11px; }
.contact { padding:115px 0; background:var(--ink); color:white; }.contact__grid { display:grid; grid-template-columns:1fr .9fr; gap:95px; }.contact h2 { max-width:580px; margin-bottom:23px; font-size:clamp(42px,4.2vw,62px); }.contact h2 em { color:var(--yellow); }.contact__grid>div>p:not(.eyebrow) { max-width:530px; color:rgba(255,255,255,.63); font-size:15px; }.contact__channels { display:flex; gap:25px; margin-top:42px; }.contact__channels a { display:flex; gap:10px; align-items:flex-start; font-size:13px; font-weight:700; }.contact__channels a>span { color:var(--yellow); font-size:19px; }.contact__channels small { display:block; color:rgba(255,255,255,.5); font:500 10px 'DM Mono',monospace; text-transform:uppercase; }.lead-form { padding:32px; background:white; color:var(--ink); }.lead-form label { display:block; margin-bottom:19px; color:#555; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.lead-form input,.lead-form textarea { width:100%; margin-top:7px; padding:11px 0; border:0; border-bottom:1px solid #ccc; outline:0; background:transparent; color:var(--ink); font:500 14px Manrope,sans-serif; }.lead-form input:focus,.lead-form textarea:focus { border-color:var(--ink); }.lead-form textarea { min-height:85px; resize:vertical; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.lead-form .button { width:100%; margin-top:4px; }.form-note { margin:13px 0 0; color:var(--muted); font-size:10px; text-align:center; }
.footer { padding:42px 0 25px; background:var(--ash); }.footer__inner { display:grid; grid-template-columns:100px 1fr auto; gap:28px; align-items:center; }.footer img { width:100px; height:54px; object-fit:contain; }.footer p,.footer a { margin:0; font-size:12px; font-weight:700; }.footer small { grid-column:1/-1; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font:400 10px 'DM Mono',monospace; }
@media (max-width:850px) { .header{height:70px;width:calc(100% - 36px)}.nav,.header-cta{display:none}.menu-button{display:flex;flex-direction:column;gap:6px;width:30px;padding:5px;border:0;background:none}.menu-button i{width:24px;height:2px;background:#fff}.header.menu-open .nav{position:absolute;top:70px;right:0;display:flex;flex-direction:column;gap:0;margin:0;padding:12px 20px;background:var(--graphite);box-shadow:0 10px 20px rgba(0,0,0,.3)}.header.menu-open .nav a{padding:12px 0}.hero{min-height:710px}.hero__content{padding-top:153px}.hero__bottom{grid-template-columns:1fr 1fr;gap:15px}.hero__bottom p{display:none}.intro__grid,.about__grid,.process__grid,.contact__grid,.partners__grid{grid-template-columns:1fr;gap:42px}.intro__grid>.eyebrow{margin-bottom:-15px}.field-work{padding-bottom:82px}.field-work__heading{align-items:flex-start;flex-direction:column;gap:20px}.field-work__heading>p{width:auto;max-width:460px}.section-heading{align-items:flex-start;flex-direction:column;gap:20px}.section-heading>p{width:auto;max-width:460px}.service-grid{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr 1fr;grid-template-rows:260px 260px 230px}.project--wide{grid-column:span 2;grid-row:auto}.project--tall{grid-row:auto}.project--small{grid-row:auto}.about__media{width:min(85vw,490px)}.contact__channels{flex-direction:column}.footer__inner{grid-template-columns:90px 1fr}.footer a{justify-self:end}.process__grid{gap:55px} }
@media (max-width:520px) { .wrap{width:calc(100% - 36px)}.hero{min-height:680px;background-position:62% center}.hero__content{padding-top:137px}h1{font-size:48px}.hero__lead{font-size:15px}.hero__actions{align-items:flex-start;flex-direction:column;gap:18px}.hero__actions .text-link{display:none}.section{padding:82px 0}.field-work{padding-bottom:82px}.field-work__grid{grid-template-columns:1fr 1fr;grid-template-rows:255px 190px}.field-work__photo--hero{grid-column:span 2;grid-row:auto}.field-work__manifesto,.field-work__reels{grid-column:span 2}.field-work__photo figcaption{bottom:14px;left:14px}.field-work__manifesto,.field-work__reels{min-height:190px}.hero__bottom{padding-bottom:24px}.hero__bottom strong{font-size:12px}.service-grid,.form-row{grid-template-columns:1fr}.service{min-height:290px}.project-grid{display:block}.project{min-height:250px;margin-bottom:14px}.project--wide{min-height:340px}.project h3{font-size:29px}.partners{padding-top:82px}.partners__board{padding:10px}.partners__board figcaption{top:10px;left:10px}.about__facts{gap:30px}.lead-form{padding:24px 20px}.footer__inner{grid-template-columns:1fr;gap:15px}.footer a{justify-self:start}.footer small{grid-column:auto}.about__media{width:100%}.about__media>div{width:170px;min-height:125px}.about__media strong{font-size:36px} }