@font-face{font-family:"Geist";src:url("../fonts/geist/Geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist/GeistMono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Serif";src:url("../fonts/geist/GeistSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#fff;
  --ink:#000;
  --soft:#333; /* textos de apoio */
  --panel:#f2f2f2;
  --ph:#eee; /* fundo das fotos enquanto carregam */
  --line:#d9d9d9;
  --btn:#2b2b2b;
  --ease:cubic-bezier(.44,0,.56,1);
  --h2:74px;
}
/* Home: a página inteira fica branca ou preta conforme a seção que está no meio da tela (theme.js),
   trocando as cores em 0,35 s. A transição fica só nos elementos que têm cor própria (os outros herdam a cor deles);
   com ela em todos os elementos da página, cada troca pesava e a rolagem dava pequenos trancos */
html.dt{--bg:#000;--ink:#fff;--soft:#c4c4c4;--panel:#141414;--ph:#111;--line:rgba(255,255,255,.22)}
html.theme :where(body,main > section,.svc__row,.svc__open,.svc__desc,.metric,.globe,.contact__side .form,.form button,.tags li){transition:background-color .35s ease,color .35s ease,border-color .35s ease}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Com a rolagem suave do Lenis (smooth.js), a do navegador fica desligada: as duas juntas brigam e a rolagem trava */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
body{background:var(--bg);color:var(--ink);font-family:"Geist",system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-weight:400}
/* Textos em destaque: Geist Serif, sem caixa alta */
.h2{font-family:"Geist Serif",Georgia,serif;text-transform:none!important}

/* Texto que rola no hover (links do menu, footer) */
.roll{display:inline-flex;flex-direction:column;height:1.25em;overflow:hidden;line-height:1.25em}
.roll span{display:block;transition:transform .45s var(--ease)}
a:hover .roll span,a:focus-visible .roll span{transform:translateY(-100%)}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:56px;padding:0 64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;mix-blend-mode:difference;pointer-events:none}
.nav>*{pointer-events:auto}
.nav__logo{display:flex;align-items:center;height:56px;justify-self:start}
.nav__logo-svg{display:block;height:22px;width:auto}
/* Logo completo (símbolo e nome, parado). Na home, enquanto a hero está na tela, só o símbolo: o nome aparece ao sair dela (hero.js) */
.nav__name{transition:opacity .4s var(--ease)}
html.has-hero:not(.past-hero) .nav__name{opacity:0}
.nav__links{display:flex}
.nav a.link{font-size:16px;letter-spacing:-.03em;text-transform:uppercase;padding:18px 16px}
.nav__cta{justify-self:end}
.lang-toggle{position:fixed;top:16px;right:190px;z-index:51;display:flex;height:24px;border:1px solid #fff;color:#fff;mix-blend-mode:difference;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.lang-toggle>*{position:relative;display:flex;align-items:center;padding:0 8px;color:#fff;background:transparent;text-decoration:none}
.lang-toggle>*::before{content:"";position:absolute;inset:-10px 0}
.lang-toggle [aria-current]{background:#fff;color:#000}
.lang-toggle a{transition:background-color .3s}
.lang-toggle a:hover,.lang-toggle a:focus-visible{background:rgba(255,255,255,.25)}

/* ---------- HERO ---------- */
/* Hero: fica presa no topo e as seções seguintes sobem por cima dela. Nome e texto no centro; ao fundo, as capas
   dos projetos atravessam a tela num arco e reagem ao mouse (hero.js) */
.hero{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:center;height:100vh;min-height:500px;overflow:hidden;background:#fff}
:where(main > :not(.hero)){position:relative;z-index:2;background:var(--bg)}
.hero__cards{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}
.hero__card{position:absolute;left:0;top:0;width:var(--cw,180px);aspect-ratio:4/3;will-change:transform,opacity;backface-visibility:hidden}
.hero__frame{width:100%;height:100%;overflow:hidden}
.hero__frame img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
/* o nome e o texto ficam por cima e continuam legíveis quando uma capa passa por baixo */
.hero__intro{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;width:60vw;color:#fff;mix-blend-mode:difference;text-align:center;pointer-events:none}
.hero__title{width:100%}
.hero__name{display:block;width:100%;height:auto;overflow:hidden}
.hero__name path{will-change:transform}
.hero__lede{max-width:500px;font-size:16px;line-height:1.4;letter-spacing:-.02em}
/* saída ao rolar (--out vai de 0 a 1 enquanto a seção seguinte cobre a hero) */
.hero.is-leaving :is(.hero__cards,.hero__intro){scale:calc(1 - var(--out) * .4);filter:blur(calc(var(--out) * 15px))}

/* ---------- Cabeçalhos de seção ---------- */
.head{width:740px;max-width:calc(100% - 48px);margin:0 auto;text-align:center}
.label{font-size:20px;line-height:28px;letter-spacing:.02em;text-transform:uppercase}
.h2{font-size:var(--h2);line-height:1.1;letter-spacing:-.04em;text-transform:uppercase;font-weight:400;margin-top:16px}
.lede{font-size:20px;line-height:24px;letter-spacing:-.01em;width:380px;max-width:100%;text-align:left;margin:32px auto 0}

/* ---------- SOBRE ---------- */
.about{padding-top:108px;padding-bottom:120px}
.about__row{display:flex;align-items:flex-end;justify-content:center;gap:24px;margin-top:40px;text-align:left}
.about__photo{flex:none;width:168px;aspect-ratio:4/5;overflow:hidden;background:var(--ph)}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__text .lede{margin:0}
.about__sign{font-size:14px;line-height:18px;text-transform:uppercase;letter-spacing:.02em;color:#8a8a8a;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:16px;letter-spacing:-.03em;text-transform:uppercase}
/* Seta (Material Symbols arrow_forward) antes do texto dos botões; avança um pouco no hover */
.btn__icon{flex:none;display:inline-block;line-height:1;transition:transform .45s var(--ease)} /* seta da própria fonte (→) */
a:hover .btn__icon,a:focus-visible .btn__icon,button:hover .btn__icon,button:focus-visible .btn__icon{transform:translateX(3px)}

/* ---------- Marquee de imagens ---------- */
.strip{height:416px;overflow:hidden} /* as imagens encostam no fim da seção */
.strip__track{display:flex;align-items:flex-end;gap:10px;height:100%;width:max-content;animation:marquee 60s linear infinite}
.strip__track img{width:277px;object-fit:cover;flex:none;user-select:none;-webkit-user-drag:none}
/* com strip.js a faixa anda por JS: para com o mouse em cima e pode ser puxada */
.strip:has(.is-js){cursor:grab;touch-action:pan-y}
.strip.is-dragging{cursor:grabbing}
.strip__track.is-js{animation:none;will-change:transform}
.strip__track img[data-s="0"]{height:345px}
.strip__track img[data-s="1"]{height:161px}
.strip__track img[data-s="2"]{height:416px}
.strip__track img[data-s="3"]{height:316px}
.strip__track img[data-s="4"]{height:182px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SERVIÇOS ---------- */
/* Serviços: cada linha gruda no topo e a seguinte sobe por cima, deixando só a faixa do título — as linhas se empilham */
.svc{--nav:56px;margin-bottom:-170px;--t:clamp(30px,3.6vw,60px);--strip:calc(var(--t) + 37px);--rule:var(--line);--h:470px;margin-top:80px;padding:20px 64px 0 60px;background:var(--bg);color:var(--ink)}
.svc__list{list-style:none;margin-top:96px}
/* O espaço extra mantém a pilha completa por um instante antes de ela sair (ver services.js) */
.svc__list::after{content:"";display:block;height:0}
/* A seção sobe a seguinte por cima do branco que sobra no último serviço (margem negativa em .svc).
   O último serviço não é coberto por nenhum outro: fica mais curto, terminando na mesma altura do penúltimo (assim a pilha sai inteira junta) */
.svc__row:last-child{min-height:calc(var(--h) - var(--strip))}
.svc__row{position:sticky;top:calc(var(--nav) + var(--i) * var(--strip) - var(--lift, 0px));display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,3fr);column-gap:24px;align-items:start;align-content:start;min-height:var(--h);padding:18px 0 56px;background:var(--bg);border-top:1px solid var(--rule)}
.svc__n{font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;line-height:var(--t);letter-spacing:.02em;color:#8a8a8a}
.svc__name{font-family:"Geist Serif",Georgia,serif;font-size:var(--t);line-height:1;letter-spacing:-.04em;font-weight:400}
.svc__open{position:absolute;right:0;top:18px;height:var(--t);width:32px;display:flex;align-items:center;justify-content:flex-end;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.svc__open svg{width:24px;height:24px;transition:transform .4s var(--ease)}
.svc__open:hover svg{transform:translateY(3px)}
.svc__row.is-open .svc__open svg{transform:rotate(180deg)}
.svc__desc{max-width:440px;margin-top:20px;font-size:16px;line-height:22px;color:var(--soft)}
.svc__items{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:20px;color:#8a8a8a;padding-top:calc((var(--t) - 20px) / 2);padding-right:48px}

/* ---------- CLIENTES ---------- */
.clients{--bg:#000;margin-top:79px;padding:40px 0 32px;color:#fff}
/* Entre Projetos e Experiência a faixa é só os logos rodando, sem título e sem fundo próprio: usa o mesmo fundo da
   página (preto aqui), sem emenda com as seções vizinhas. Se a página já estiver branca, os logos ficam pretos */
.cases + .clients{--bg:transparent;margin-top:-40px;padding:0;color:var(--ink)}
.clients + .metrics{margin-top:140px} /* espaço entre a faixa de logos e Experiência (+50%) */
.clients > .logos:first-child{margin-top:0}
html:not(.dt) .cases + .clients .logos__track img{filter:brightness(0)}
.clients .label{font-size:24px;line-height:33.6px;letter-spacing:-.02em;text-align:center}
.logos{position:relative;overflow:hidden;margin-top:20px;--logo:54px;--logo-gap:184px;--blur:1;--blurs:5}
/* Desfoque progressivo nas pontas (como em riseatseven.com): 5 camadas com desfoque crescente (0–8px),
   cada uma visível só numa faixa da largura, do centro para a borda */
.logos__blur{position:absolute;top:0;z-index:20;width:112px;height:100%;pointer-events:none}
.logos__blur--right{right:-40px}
.logos__blur--left{left:-40px;rotate:180deg}
.logos__blur div{position:absolute;inset:0;z-index:var(--index);-webkit-mask:linear-gradient(90deg,transparent calc(var(--index) * 100% / var(--blurs)),#000 calc((var(--index) + 1) * 100% / var(--blurs)),#000 calc((var(--index) + 2) * 100% / var(--blurs)),transparent calc((var(--index) + 3) * 100% / var(--blurs)));mask:linear-gradient(90deg,transparent calc(var(--index) * 100% / var(--blurs)),#000 calc((var(--index) + 1) * 100% / var(--blurs)),#000 calc((var(--index) + 2) * 100% / var(--blurs)),transparent calc((var(--index) + 3) * 100% / var(--blurs)));-webkit-backdrop-filter:blur(calc(var(--index) * var(--blur) * 2px));backdrop-filter:blur(calc(var(--index) * var(--blur) * 2px))}
@media (min-width:1024px){.logos__blur{width:240px}}
.logos__track{display:flex;align-items:center;min-height:calc(var(--logo) * 1.6);width:max-content;animation:marquee 80s linear infinite}
.logos__track img{width:auto;flex:none;margin-right:var(--logo-gap);filter:brightness(0) invert(1)}

/* ---------- PROJETOS (case studies) ---------- */
.cases{margin-top:80px;padding:104px 0 80px}
.cases__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 64px 24px 60px;margin-top:70px;row-gap:24px}
.card__img{position:relative;aspect-ratio:677/605;overflow:hidden;overflow:clip;background:var(--ph)}
.card__img :is(img,video){display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* o desfoque só é ligado com o mouse em cima: parado (mesmo invisível) ele era recalculado a cada quadro da rolagem */
.card__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:0;transition:opacity .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),backdrop-filter .5s var(--ease)}
.card__img:hover :is(img,video){transform:scale(1.15)}
.card__img:hover::after{opacity:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Cartão que segue o cursor sobre as capas */
.peek{position:fixed;left:0;top:0;z-index:60;width:280px;pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.peek.is-on{opacity:1}
.peek__inner{transform:scale(.85);transition:transform .45s var(--ease)}
.peek.is-on .peek__inner{transform:none}
.peek__media{position:relative;height:353px;overflow:hidden;background:#111}
.peek__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.peek__media img.is-on{visibility:visible}
.peek__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Nome e serviços sobre a capa (como na referência), em branco com mix-blend-mode:difference, como o menu:
   a cor se inverte de acordo com a imagem por trás. o bloco ocupa 55% da altura e fica preso no topo da tela
   enquanto a capa passa (overflow:clip na capa, para não virar área de rolagem e o sticky funcionar) */
.card__over{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:20px;color:#fff;mix-blend-mode:difference;pointer-events:none}
.card__info{position:sticky;top:0;flex:none;display:flex;align-items:flex-end;gap:20px;height:55%}
.card__title,.next-card__title{flex:1;min-width:0;font-family:"Geist Serif",Georgia,serif;font-size:32px;line-height:1.1;letter-spacing:-.03em}
.tags{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;list-style:none}
.tags li{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;line-height:18px;letter-spacing:-.01em;border:1px solid;padding:2px 8px;white-space:nowrap}
.card__desc{font-size:18px;line-height:23.4px;max-width:420px;margin-top:16px;padding-bottom:40px}

/* ---------- EXPERIÊNCIA (métricas) ---------- */
/* Mesmas margens do rodapé, como a seção de contato */
.metrics{margin-top:80px;padding:20px 64px 0 60px}
.metrics__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:70px}
.metric{position:relative;border-bottom:1px solid var(--line);padding:20px 0 6px;display:flex;flex-direction:column}
.metric__label{font-size:16px;line-height:20px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.metric__text{font-size:16px;line-height:20px;color:#8a8a8a;max-width:340px;margin-top:6px;min-height:80px} /* 4 linhas: os números ficam na mesma altura */
.metric > .metric__num{margin-top:0;padding-top:28px}
.metric__num{font-family:"Geist Mono",ui-monospace,monospace;font-weight:300;font-size:clamp(68px,7vw,120px);line-height:1;letter-spacing:-.06em;margin-top:28px}

/* Reconhecimentos: a setinha no canto de cima do número abre a lista, que aparece ao lado dele */
.awards{display:flex;align-items:flex-start;gap:24px;padding-top:28px}
.awards__toggle{flex:none;display:flex;align-items:flex-start;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.awards__toggle .metric__num{display:block;margin-top:0}
.awards__arrow{width:24px;height:24px;flex:none;margin-top:4px;transition:transform .4s var(--ease)}
.awards__toggle:hover .awards__arrow{transform:translateY(3px)}
.awards__toggle[aria-expanded="true"] .awards__arrow{transform:rotate(180deg)}
.awards__list{list-style:none;margin:0;padding:4px 0 10px;display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:20px;color:#8a8a8a;animation:awardsIn .45s var(--ease)}
.awards__list[hidden]{display:none}
@keyframes awardsIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
/* Países atendidos: título como o das outras seções e, abaixo, o globo */
.world{margin-top:160px}
/* globo (globe.js): só a metade de cima, sumindo aos poucos em direção à base; arrastável */
/* o globo sobe e começa por trás do texto de Países atendidos (o texto fica por cima) */
.world .head{position:relative;z-index:1}
.globe{position:relative;z-index:0;width:100%;margin-top:-80px;color:var(--ink);cursor:grab;touch-action:pan-y;user-select:none}
.globe.is-dragging{cursor:grabbing}
.globe canvas{display:block;width:100%}



/* ---------- CONTATO ---------- */
/* Mesmas margens do rodapé: começa no "Work" e termina nas redes sociais */
.contact{margin-top:80px;padding:100px 64px 120px 60px}
.metrics + .contact{margin-top:0;padding-top:46px} /* depois do globo (que já termina sumindo), metade do espaço */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:70px;align-items:start}
.contact__info{display:flex;flex-direction:column;gap:28px;padding-left:.06em}
.contact__intro{font-size:24px;line-height:1.35;letter-spacing:-.01em;max-width:640px}
.contact__side .form{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:20px;margin-top:32px;padding-top:40px;border-top:1px solid var(--line)}
.contact__side .form .field--full,.contact__side .form button{grid-column:1/-1}
.contact__side .form button{justify-self:start}
.info__k{font-size:13px;line-height:16px;text-transform:uppercase;letter-spacing:.02em;font-weight:500;margin-bottom:8px}
.info__v{display:block;font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;line-height:21px;letter-spacing:-.01em;color:var(--soft);transition:color .35s}
a.info__v:hover{color:var(--ink)}
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;line-height:16px;text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:4px 0 8px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .35s,color .35s}
.field input::placeholder,.field textarea::placeholder{color:#a6a6a6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{height:72px;resize:vertical}
.form{position:relative}
.form button[disabled]{opacity:.5;pointer-events:none}
.form__status{grid-column:1/-1;min-height:20px;font-size:14px;line-height:20px;letter-spacing:-.01em}
.form__status[data-state="ok"]{color:var(--ink)}
.form__status[data-state="error"],.form__status[data-state="busy"]{color:#8a8a8a}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-380 276-584l20-20 184 184 184-184 20 20-204 204Z' fill='%23000'/%3E%3C/svg%3E") right -4px center/24px 24px no-repeat;color:#a6a6a6;padding-right:24px}
html.dt .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-380 276-584l20-20 184 184 184-184 20 20-204 204Z' fill='%23fff'/%3E%3C/svg%3E")}
.field select.has-value{color:var(--ink)}
.form button{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:inherit;font-size:16px;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);background:none;border:0;padding:0;margin-top:8px;cursor:pointer}
.form button:hover .roll span,.form button:focus-visible .roll span{transform:translateY(-100%)}

/* ---------- FOOTER ---------- */
.footer{position:relative;background:#000;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:728px}
.footer__top{position:relative;display:flex;justify-content:space-between;padding:32px 64px 0 48px}
.footer__nav{display:flex;gap:4px}
.footer__main{display:flex;flex-direction:column;align-items:flex-start}
/* Na mesma linha de "Instagram": menu e redes têm a mesma altura de linha, e esta margem compensa o espaço entre as redes */
.footer__cta{margin-top:7px;padding:4px 12px;font-size:16px;color:#fff}
.footer__nav a{font-size:16px;text-transform:uppercase;letter-spacing:-.03em;padding:4px 12px}
.footer__social{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.footer__social a{font-size:16px;letter-spacing:-.03em;text-transform:uppercase;padding:4px 0}
.footer__big{margin-top:auto;padding:0 20px 16px}
.footer__line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:0 20px 24px;font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap}
.footer__logo{display:block;width:100%;height:auto;overflow:hidden}
/* Na versão em quadradinhos, as casas encostadas têm folgas de 0,01 (arredondamento do arquivo) que apareciam como
   linhas finas dentro das letras; um contorno finíssimo da mesma cor fecha as folgas sem mudar o desenho */
.footer__logo path{stroke:currentColor;stroke-width:.2}
.footer__top,.footer__line,.footer__logo path{will-change:transform}

/* ---------- Tablet ---------- */
@media (max-width:1199px){
  :root{--h2:60px}
  .nav{padding:0 32px}
  .nav__logo-svg{height:16px} /* o logo completo não encosta nos links do meio */
  .nav a.link{font-size:14px;padding:18px 9px} /* com 4 links, o menu não encosta no logo nem no PT/EN */
  .about{height:auto;padding:80px 0 160px}
  .contact__grid{grid-template-columns:1fr;gap:48px}
  /* colunas estreitas no tablet: a lista de reconhecimentos fica embaixo do número */
  .metric__text{min-height:100px}
  .awards{flex-direction:column;gap:12px}
}
/* ---------- Mobile ---------- */
@media (max-width:809px){
  :root{--h2:40px}
  .nav{padding:0 16px;grid-template-columns:1fr auto}
  .nav__links{display:none}
  .nav__logo-svg{height:14px}
  .nav a.link{padding:18px 0}
  .about{padding:56px 0 100px}
  .lede{margin-left:auto;margin-right:auto;font-size:18px}
  .about__row{flex-direction:column;align-items:flex-start;gap:20px;margin-top:32px}
  .about__photo{width:136px}
  .about__text{width:100%}
  .label{font-size:16px}
  .strip{height:260px}
  .strip__track img{width:170px}
  .strip__track img[data-s="0"]{height:216px}
  .strip__track img[data-s="1"]{height:110px}
  .strip__track img[data-s="2"]{height:260px}
  .strip__track img[data-s="3"]{height:200px}
  .strip__track img[data-s="4"]{height:124px}
  .svc{margin-bottom:-110px;--t:30px;--strip:calc(var(--t) + 33px);--h:540px;margin-top:50px;padding:0 16px}
  .svc__list{margin-top:64px}
  .svc__list::after{height:5vh}
  .svc__row{grid-template-columns:44px minmax(0,1fr);row-gap:20px;column-gap:8px;padding:16px 0 40px}
  .svc__items{grid-column:2;padding-top:0;padding-right:0}
  .svc__open{top:16px}
  .svc__main{padding-right:36px}
  .svc__desc{margin-top:16px;font-size:15px;line-height:21px}
  .clients{margin-top:50px;padding:28px 0 20px}
  .logos{--logo:36px;--logo-gap:101px}
  .cases,.metrics{margin-top:100px}
  .cases__grid{grid-template-columns:1fr;padding:16px;margin-top:40px}
  .metrics{padding:0 16px}
  .metrics__grid{grid-template-columns:1fr;margin-top:40px}
  .metric > .metric__num{padding-top:40px}
  .metric__text{min-height:0}
  .awards{padding-top:40px;flex-direction:row;gap:24px}
  .world{margin-top:100px}
  .globe{margin-top:-40px}
  .card__desc{font-size:16px}
  .card__over{justify-content:flex-end;padding:20px 15px}
  .card__info{position:relative;flex-direction:column;align-items:flex-start;justify-content:space-between}
  .card__title,.next-card__title{flex:none}
  .tags{flex:none;justify-content:flex-start}
  .contact{padding:50px 16px 80px;margin-top:50px}
  .metrics + .contact{margin-top:0;padding-top:30px}
  .cases + .clients{margin-top:-20px}
  .clients + .metrics{margin-top:150px}
  .contact__grid{margin-top:32px}
  .contact__intro{font-size:20px}
  .contact__side .form{grid-template-columns:1fr}
  .footer{min-height:546px}
  .footer__top{padding:24px 16px 0;flex-direction:column;gap:24px}
  .footer__nav{flex-wrap:wrap}
  .footer__nav a{padding:4px 12px 4px 0}
  .footer__cta{margin-top:32px;padding-left:0}
  .footer__social{align-items:flex-start}
    .footer__big{padding:0 16px 12px}
  .footer__line{flex-direction:column;gap:4px;white-space:normal;padding:0 16px 16px;font-size:11px}
}
@media (min-width:810px) and (max-width:920px){.nav__logo-svg{height:14px}} /* tablet estreito: logo menor para caber os 4 links */
@media (max-width:380px){.nav__logo-svg{height:12px}} /* celulares estreitos: o logo não encosta no seletor PT/EN */
@media (prefers-reduced-motion:reduce){
  .svc__row{position:relative;top:auto;min-height:0}
  .svc__list::after{display:none}
  .strip__track,.logos__track{animation:none}
}

/* ---------- PÁGINA DE PROJETO ---------- */
.case-hero{height:100vh;overflow:hidden;background:#ddd}
.case-hero img,.case-hero video{width:100%;height:100%;object-fit:cover;display:block}
.case-info{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:124px 64px 100px 60px}
.k{font-size:16px;line-height:20px;text-transform:uppercase;letter-spacing:.02em;color:#8a8a8a}
.case-info__name{font-family:"Geist Serif",Georgia,serif;font-size:var(--h2);line-height:1.1;letter-spacing:-.04em;margin:4px 0 28px}
.case-info__v{font-size:20px;line-height:24px;letter-spacing:-.01em;max-width:380px;margin:6px 0 24px}
.case-h{font-family:"Geist Serif",Georgia,serif;font-size:42px;line-height:1.2;letter-spacing:-.03em}
.case-p{font-size:20px;line-height:24px;letter-spacing:-.01em;max-width:420px;margin-top:20px}
.case-img{aspect-ratio:677/852;overflow:hidden;background:#eee}
.case-img img,.case-img video{width:100%;height:100%;object-fit:cover;display:block}
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 64px 0 60px}
.case-center{padding:64px 64px 64px 34%}
.case-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 64px 24px 60px;align-items:center}
.case-split__text{padding-left:118px}
.case-wide{padding:0 64px 0 60px}
.case-wide .case-img{aspect-ratio:1377/852}
.case-next{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 64px 24px 60px;align-items:center;margin-top:24px}
.case-next__title{font-family:"Geist Serif",Georgia,serif;font-size:64px;line-height:1;letter-spacing:-.04em;padding-left:120px}
.next-card__img{position:relative;aspect-ratio:688/615;overflow:hidden;overflow:clip;background:#eee}
.next-card__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:0;transition:opacity .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),backdrop-filter .5s var(--ease)}
.next-card__img:hover::after{opacity:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.next-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.next-card__img:hover img{transform:scale(1.15)}
.next-card__desc{font-size:18px;line-height:23.4px;max-width:420px;margin-top:16px}
@media (max-width:1199px){
  .case-split__text,.case-next__title{padding-left:48px}
  .case-center{padding-left:24%}
}
@media (max-width:809px){
  .case-hero{height:70vh}
  .case-info,.case-pair,.case-split,.case-next{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  .case-info{padding-top:72px;padding-bottom:48px;gap:40px}
  .case-pair,.case-wide{padding:0 16px}
  .case-pair{gap:16px}
  .case-center{padding:56px 16px}
  .case-split{gap:32px;padding-top:56px;padding-bottom:16px}
  .case-split__text,.case-next__title{padding-left:0}
  .case-h{font-size:32px}
  .case-p,.case-info__v{font-size:18px}
  .case-next__title{font-size:44px}
}

/* Resultado + galeria 16:9 com todas as imagens e vídeos do projeto */
.case-result{padding:96px 64px 24px 60px}
.case-result__text{padding-left:118px;margin-bottom:56px}
.gallery__frame{position:relative;aspect-ratio:16/9;overflow:hidden;overflow:clip;background:#f2f2f2}
.gallery__track{display:flex;height:100%;transition:transform .7s var(--ease);will-change:transform}
.gallery__slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center}
.gallery__slide img,.gallery__slide video{width:100%;height:100%;object-fit:contain;display:block}
.gallery__btn{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s var(--ease);box-shadow:0 2px 12px rgba(0,0,0,.08);opacity:1}
.gallery__btn svg{width:24px;height:24px}
.gallery__btn--prev{left:20px}
.gallery__btn--next{right:20px}
.gallery__btn--prev:hover{transform:translateX(-3px)}
.gallery__btn--next:hover{transform:translateX(3px)}
.gallery__count{font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;letter-spacing:-.01em;color:#6f6f6f;text-align:right;margin-top:12px}
@media (hover:none){.gallery__btn{opacity:1;width:40px;height:40px;margin-top:-20px}}
@media (max-width:1199px){.case-result__text{padding-left:48px}}
@media (max-width:809px){
  .case-result{padding:56px 16px 16px}
  .case-result__text{padding-left:0;margin-bottom:32px}
  .gallery__btn--prev{left:10px}
  .gallery__btn--next{right:10px}
}

/* Entrada ao rolar (reveal.js): estado de partida até o elemento aparecer na tela */
.rv .rv-up{opacity:0;transform:translate3d(0,20px,0)}
.rv .rv-frame{transform:scale(.7)}
.rv .rv-frame :is(img,video){transform:scale(1.4)}

/* Abertura da home (intro.js). O <head> já pinta a tela de branco (html.is-intro body::before) até a abertura assumir */
.intro{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:0 16px;background:#fff;color:#000;opacity:1;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.intro.is-out{opacity:0;pointer-events:none}
.intro__text{position:relative;font-family:"Geist",system-ui,sans-serif;font-weight:400;font-size:clamp(11px,1.72vw,26px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.intro__c{visibility:hidden}
.intro__c.is-on{visibility:visible}
.intro__caret{position:absolute;left:0;top:.06em;width:.06em;height:.9em;background:#000;opacity:0}
.intro__caret.is-on{opacity:1;animation:introCaret 1s steps(1) infinite}
@keyframes introCaret{50%{opacity:0}}