:root{
  --paper:#f4f3ef; --paper-2:#e9e7e1; --ink:#141414; --ink-2:#5a5852; --line:#d9d6ce;
  --graphite:#1f1f1e; --on-graphite:#f1efe9; --white:#fbfaf7;
  --f-sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gl:max(24px, env(safe-area-inset-left,0px)); --gr:max(24px, env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.inner{max-width:1440px;margin:0 auto}
@media (max-width:600px){:root{--gl:max(16px, env(safe-area-inset-left,0px));--gr:max(16px, env(safe-area-inset-right,0px))}}

/* menu */
.navwrap{position:sticky;top:0;z-index:20;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.nav{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 22px;background:rgb(247 246 242 / .78);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgb(20 20 20 / .06)}
.logo img{height:19px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
.nav ul a{text-decoration:none}
.nav ul a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:820px){.nav nav{display:none}}

.btn{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid var(--line);border-radius:4px;background:var(--white);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s,transform .2s}
.btn:hover{border-color:var(--ink)}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.dark:hover .ar{transform:translate(2px,2px)}
.btn.light{background:var(--on-graphite);color:var(--graphite);border-color:var(--on-graphite)}

/* abertura */
.hero{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:48px;align-items:end;padding-block:72px 80px}
.hero h1{font-size:clamp(46px,7.5vw,118px);line-height:.98;letter-spacing:-.035em;font-weight:600;margin:0;text-wrap:balance}
.hero-side p{color:var(--ink-2);font-size:17px;line-height:1.7;max-width:34ch;margin:0 0 28px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:28px;padding-block:48px 56px}}
.hero h1,.hero-side{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-side{animation-delay:.12s}
@keyframes rise{from{transform:translateY(18px);opacity:.001}}

/* letreiro de clientes */
.marquee{overflow:hidden;padding-block:34px;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;animation:mq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.set{display:flex;align-items:center;gap:88px;padding-right:88px}
.set img{height:46px;width:auto;max-width:170px;object-fit:contain;opacity:.42;transition:opacity .3s}
.set img:hover{opacity:.9}
.set span{font-weight:600;font-size:20px;color:#8b8880;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* seções */
.sec{padding-block:110px 20px}
.sec.first{padding-top:56px}
.sec-head{display:flex;align-items:flex-end;gap:18px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.sec-head .mono{padding-bottom:12px}
.sec-head h2{font-size:clamp(52px,8.4vw,128px);line-height:.88;letter-spacing:-.045em;margin:0;font-weight:500}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:block;aspect-ratio:1200/912;overflow:hidden;background:var(--paper-2);text-decoration:none}
.cv{position:absolute;inset:0}
.cv img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .cv img{transform:scale(1.045)}
.cap{position:absolute;inset:auto 0 0;padding:22px 20px 18px;color:#f6f4ee;background:linear-gradient(transparent,rgb(0 0 0 / .6));display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(8px);transition:.35s}
.card:hover .cap,.card:focus-visible .cap{opacity:1;transform:none}
@media (hover:none){.cap{opacity:1;transform:none}}
.cap h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.more{display:flex;justify-content:flex-end;padding-top:22px}
.more a{font-size:14px;font-weight:600;text-decoration:none}
.more a:hover{text-decoration:underline;text-underline-offset:5px}

img[loading=lazy]{opacity:0;transition:opacity .6s}
img[loading=lazy].in{opacity:1}
@media (scripting:none){img[loading=lazy]{opacity:1}}

/* sobre */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.portrait{position:relative;margin:0;aspect-ratio:4/5;max-height:760px;background:#2a2a28;border-radius:4px;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.portrait figcaption{position:absolute;left:16px;bottom:16px;background:var(--white);padding:8px 10px;font-size:10px}
.about-text h2{font-size:clamp(34px,4.3vw,64px);line-height:1.03;letter-spacing:-.03em;margin:14px 0 30px;font-weight:600;text-wrap:balance}
.about-text p{color:var(--ink-2);font-size:18px;line-height:1.65;max-width:52ch;margin:0 0 16px}
.about-text p.strong{color:var(--ink);font-weight:500}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:40px}}

/* serviços */
.svc{list-style:none;margin:0;padding:0}
.svc li{display:grid;grid-template-columns:48px minmax(0,1.25fr) minmax(0,1fr) 32px;gap:24px;align-items:center;padding-block:30px;border-bottom:1px solid var(--line)}
.svc h3{margin:0;font-size:clamp(26px,3.2vw,46px);font-weight:500;letter-spacing:-.028em;line-height:1.05;transition:transform .35s}
.svc li:hover h3{transform:translateX(8px)}
.svc p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;max-width:46ch}
.svc .ar{text-decoration:none;font-size:20px}
@media (max-width:760px){.svc li{grid-template-columns:32px minmax(0,1fr);gap:8px 14px}.svc p{grid-column:2}.svc .ar{display:none}}

/* rodapé */
.foot{background:var(--graphite);color:var(--on-graphite);margin-top:140px}
.foot .inner{padding-block:120px calc(40px + env(safe-area-inset-bottom,0px))}
.foot h2{font-size:clamp(54px,9.4vw,148px);line-height:.94;letter-spacing:-.045em;margin:0 0 56px;font-weight:500;max-width:11ch}
.foot .mail{display:inline-block;font-size:clamp(22px,3vw,38px);margin:0 0 48px;text-decoration:none;border-bottom:1px solid #4b4a46}
.foot .mail:hover{border-color:var(--on-graphite)}
.foot .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.soc{display:flex;gap:24px;font-size:14px;font-weight:600}
.soc a{text-decoration:none}
.soc a:hover{text-decoration:underline;text-underline-offset:5px}
.foot small{display:block;margin-top:90px;color:#8f8c85;font-size:12px}

/* página de projeto */
.draft-flag{margin:24px 0 0;background:#f3e3c7;color:#6b4513;padding:10px 14px;border-radius:4px;display:inline-block}
.pj-hero{padding-block:64px 36px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;align-items:end}
.back{text-decoration:none}
.pj-hero h1{font-size:clamp(50px,9vw,150px);line-height:.9;letter-spacing:-.045em;margin:18px 0 0;font-weight:600;text-wrap:balance}
.meta{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:14px;margin:0;padding-bottom:10px}
.meta dt{color:var(--ink-2)}
.meta dd{margin:0;font-weight:500}
.pj-cover{background:var(--paper-2)}
.pj-cover img{width:100%;height:auto}
.pj-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px;padding-block:90px}
.pj-text p{font-size:clamp(20px,2vw,28px);line-height:1.38;letter-spacing:-.012em;margin:0 0 .8em;max-width:42ch}
.pj-gal{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.pj-gal figure{margin:0;background:var(--paper-2)}
.pj-gal figure.wide{grid-column:1/-1}
.pj-gal img{width:100%;height:auto}
.pj-gal figcaption{font-size:13px;color:var(--ink-2);padding:10px 2px 14px;background:var(--paper)}
.pj-next{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding-block:44px;margin-top:80px;text-decoration:none;flex-wrap:wrap}
.pj-next b{font-size:clamp(32px,5vw,68px);letter-spacing:-.035em;font-weight:500;transition:transform .35s}
.pj-next:hover b{transform:translateX(-8px)}
@media (max-width:760px){.pj-hero,.pj-text{grid-template-columns:1fr}.pj-text{padding-block:56px;gap:16px}.pj-gal{grid-template-columns:1fr}}

.nf{min-height:50vh;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.nf h1{font-size:clamp(40px,6vw,88px);letter-spacing:-.04em;line-height:1;margin:0;font-weight:600}

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