), ele preenche a linha */
.grid--projects>li,.contact-cards>li{display:flex}
.grid--projects>li>.proj,.contact-cards>li>.contact-card{flex:1}
/* elementos que deixaram de ser e ganharam margem padrão do navegador */
.eyebrow,.hero__scrollcue,.split__img-badge,.map__label,.carousel-hint,.form-success__icon{margin-top:0}
.hero__scrollcue,.split__img-badge,.map__label{margin-bottom:0}
.carousel-hint{margin-bottom:0}
.form-success__icon{margin-left:auto;margin-right:auto}
.pillar__t,.pillar__d,.proj__tag,.proj__title,.contact-card__label,.contact-card__value{display:block}
.footer__title{font-weight:600}
.btn__arrow{font-size:18px}
/* variantes que substituíram estilos inline do arquivo original */
.section__head--values{max-width:620px;margin-bottom:50px}
.section__head--values .h2{font-size:clamp(28px,3.4vw,42px)}
.split--top{align-items:start}
.contact-lead{margin-bottom:36px;max-width:440px}
/* sem JS os elementos com .reveal precisam nascer visíveis */
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
.reveal{opacity:1;transform:none}
.marquee__track{animation:none}
.proj:hover img,.svc:hover,.btn--gold:hover,.wa-float:hover{transform:none}
}
/* responsive */
@media(max-width:880px){.nav{display:none}.menu-btn{display:inline-flex}}
/* Acima do ponto de quebra o menu mobile NUNCA pode aparecer.
Sem isto, quem abria o menu no mobile e voltava para desktop (ou saía do
modo responsivo do DevTools) ficava com um overlay position:fixed inset:0
cobrindo a tela inteira: a roda do mouse rolava o overlay, não a página,
e o site parecia travado. O botão que fecha some junto com o breakpoint. */
@media(min-width:881px){
.mobile-menu,.mobile-menu.is-open{display:none}
}
@media(max-width:920px){.split{grid-template-columns:1fr}.split__img{min-height:380px;order:-1}.footer__grid{grid-template-columns:1fr}}
@media(max-width:620px){
.header__cta{display:none}
.form__row,.pillars{grid-template-columns:1fr}
.logo__mark{height:34px}
.logo__word{height:28px}
}
/* backdrop-filter é recomposto a cada quadro de rolagem; com um carrossel
arrastando sob o cabeçalho fixo desfocado, o navegador refaz o blur da faixa
toda a cada frame e a página congela por segundos em aparelho mediano.
No mobile o blur sai e o fundo fica mais opaco — visual equivalente. */
@media(max-width:880px){
/* opacos: sem blur, transparência deixa o conteúdo atravessar a barra/painel */
.header.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:#09121e}
.mobile-menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:#08111c}
.split__img-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,20,32,.9)}
}
@media(max-width:700px){
/* overscroll-behavior: sem isto a rolagem do carrossel encadeia para a
página ao chegar na ponta, e o gesto dá um tranco no meio do arrasto. */
.carousel{overscroll-behavior-x:contain}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1*clamp(20px,5vw,48px));padding:4px clamp(20px,5vw,48px) 10px}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{flex:0 0 82%;min-width:82%;scroll-snap-align:center}
.carousel-hint{display:block}
section{scroll-margin-top:80px}
}