html, body.contact-page-body {
  height: 100%;
  overflow: hidden;
}

.contact-page {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  --logo-w: clamp(140px, 10.6vw, 205px);
  --logo-left: calc(50% - (var(--logo-w) / 2));
  --side-col: clamp(260px, 53.25vw, 1040px);
  --title-size: clamp(28px, 3.05vw, 58px);
  --row-top: calc(50% - (var(--title-size) / 2));
}

/* --- logo centralizado no topo --- */
.contact-header {
  position: absolute;
  left: 50%;
  top: clamp(36px, 6.5vh, 90px);
  transform: translate(-50%, 0);
  width: var(--logo-w);
}
.contact-logo { width: 100%; height: auto; display: block; }

/* --- "reach out for": o rótulo alinha com a logo, a lista alinha com o telefone/endereço --- */
.reach-label {
  position: absolute;
  left: var(--logo-left);
  top: clamp(210px, 25vh, 340px);
  display: block;
  font-family: var(--font-menu);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reach-list {
  position: absolute;
  left: var(--side-col);
  top: clamp(242px, 28.8vh, 372px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.reach-list li { margin: 6px 0; }
.reach-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(var(--fg-rgb), .7);
  transition: color .2s ease;
}
.reach-list a .arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(.19,1,.22,1);
}
.reach-list a:hover { color: var(--fg); }
.reach-list a:hover .arrow { transform: translate(3px, -3px); }
/* e-mail de cada departamento, como TEXTO simples ao lado do link (pedido
   do usuário — o link em si continua sendo só o nome do departamento +
   seta; o endereço aparece pra quem quiser ver/copiar, sem virar outro
   alvo de clique). Mais discreto que o nome do departamento (fonte menor,
   mais translúcido) — é informação de apoio, não a ação principal da
   linha. Sem "white-space:nowrap" de propósito: é só texto inline depois
   do <a> (não faz parte do flex dele), quebra pra uma linha própria
   sozinho se não couber (acontece principalmente no mobile, ver @media
   max-width:720px abaixo — mesmo comportamento que "Financeiro &
   Administrativo" já tinha de quebrar em 2 linhas). */
.reach-list .reach-email {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(var(--fg-rgb), .45);
}

/* --- título, colchete e telefone/endereço: mesma linha, alinhados ao ícone do menu --- */
.contact-title {
  position: absolute;
  left: clamp(60px, 7.4vw, 150px);
  top: var(--row-top);
  margin: 0;
  font-family: var(--font-menu);
  font-weight: 400;
  font-size: var(--title-size);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.contact-bracket {
  position: absolute;
  left: 30.02vw;
  top: var(--row-top);
  width: clamp(100px, 11.5vw, 220px);
  height: clamp(190px, 31vh, 430px);
}
.contact-bracket::before {
  content: '';
  position: absolute;
  inset: 0;
  border: clamp(6px, .85vw, 16px) solid var(--fg);
  border-right: none;
}
.contact-info {
  position: absolute;
  left: var(--side-col);
  top: var(--row-top);
}
.contact-phone {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 18px);
  margin-bottom: 28px;
}
.contact-phone:hover { opacity: .8; }
.contact-address p {
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1vw, 16px);
  color: rgba(var(--fg-rgb), .65);
}
.contact-address p.bold { color: var(--fg); font-weight: 700; }

/* --- qualquer desktop (acima do breakpoint mobile de 720px), independente
   da LARGURA: ".reach-list" (lista de departamentos, topo fixo em px/vh) e
   a linha título/colchete/telefone (".contact-title"/".contact-bracket"/
   ".contact-info", centralizada verticalmente via "--row-top: 50% do
   container - metade do título") foram desenhadas pensando numa janela
   alta o bastante pra sobrar espaço entre as duas — só que "--row-top"
   depende só da ALTURA do container (não da largura), e em janelas mais
   baixas os 50% encolhem mais rápido que a lista consegue subir (o topo
   dela já tem um piso de 242px, não sobe mais que isso), e a linha de
   baixo passa a colidir literalmente em cima da lista (bug reportado pelo
   usuário com print, a princípio só em telas <1280px de largura — mas a
   causa raiz é a ALTURA da janela, não a largura, então o mesmo problema
   reaparece em qualquer largura, inclusive >1280px, se a janela for baixa
   o bastante; por isso a regra abaixo não tem limite superior de largura).
   A lista sempre termina em ~352px de altura (posição/conteúdo fixos em
   px, não em vw/vh proporcional à largura) — por isso o piso abaixo trava
   "--row-top" num mínimo seguro (352 + ~38px de respiro) sempre que o
   cálculo original ficaria menor que isso; quando a janela já é alta o
   bastante (cálculo original >= 390px) o "max()" não muda nada, então
   telas grandes/altas continuam com a centralização vertical original,
   sem nenhuma diferença visual. Não entra no mobile (que já é uma
   reescrita própria, position:static, ver @media max-width:720px abaixo —
   "--row-top" existe mas não tem efeito nenhum lá). */
@media (min-width: 721px) {
  .contact-page {
    --row-top: max(390px, calc(50% - (var(--title-size) / 2)));
  }
}

/* --- animações de entrada --- */
.anim { opacity: 0; }
.anim[data-anim="fade-down"] {
  transform: translateY(-24px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
.anim[data-anim="left"] {
  transform: translateX(-9vw);
  transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
.anim[data-anim="right"] {
  transform: translateX(9vw);
  transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
.anim[data-anim="scale"] {
  transform: scale(.82);
  transition: opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1);
}
.anim.in { opacity: 1; transform: translate(0,0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  /* --- página de contato no mobile (Figma node 14087:2) — reescrita do
     zero (era um chute de uma tarefa anterior, sem essa referência do
     Figma ainda). O node deu erro ao tentar puxar metadata/design context
     exata (falha de parsing no servidor do MCP, tentado várias vezes) —
     os valores abaixo vêm de medir a print do Figma manualmente, não são
     % exatas extraídas dos dados brutos como nas páginas anteriores
     (work/services) — testado visualmente contra a print pra compensar. */
  html, body.contact-page-body { overflow-y: auto; }
  .contact-page { position: relative; height: auto; min-height: 100vh; padding: 0 0 60px; }

  /* logo colado no canto, sempre visível — mesmo tratamento do resto do
     site no mobile (flush 0,0, fixo, não rola com a página) */
  .contact-header {
    position: fixed;
    z-index: 150;
    left: 0;
    top: 0;
    transform: none;
    width: clamp(110px, 33.27vw, 148px);
  }
  .contact-header .anim { transition-delay: 0s !important; } /* a animação de entrada "fade-down" do logo ainda roda, só não empilha atraso com o resto (que ficou dentro do painel abaixo) */

  /* wrapper ".contact-mobile-panel" (ver comentário no HTML) — usado só
     como container de layout aqui, SEM painel/fundo nenhum (usuário
     corrigiu: a página é 1 cor só, sem bloco cinza atrás do conteúdo —
     a 1ª versão desta tarefa tinha chutado um painel `var(--menu-bg)`
     errado) */
  .contact-mobile-panel {
    display: block;
    margin: 12.9vh 0 0;
  }

  .reach-label, .reach-list, .contact-title, .contact-bracket, .contact-info {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; height: auto;
    transform: none !important;
  }
  /* "Contato"/"Contact" não aparece separado no Figma mobile (só "REACH
     OUT FOR", ver .reach-label abaixo, reestilizado bem maior pro
     mobile) */
  .contact-title { display: none; }

  /* título grande "REACH OUT FOR" — no desktop é um rótulo pequeno (ver
     regra base, fora desta media query); no mobile do Figma é o título
     principal da página, bem maior. Fica perto da margem esquerda (só
     este elemento — o resto do conteúdo abaixo é deslocado bem mais pra
     direita, ver comentário em ".reach-list"/".contact-info").
     Margem esquerda 12% — medida via pixel-scan em cima do print de
     referência que o usuário mandou (3ª rodada de ajuste): baixando o
     print em alta e varrendo os pixels da coluna, o "R" de REACH/"O" de
     OUT começa a ~11.9% da largura real da tela (descontando as barras
     pretas do mockup do celular nas bordas do print) */
  .reach-label {
    display: block;
    margin: 0 15% 0 12%;
    font-family: var(--font-menu);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--fg);
  }

  /* lista de departamentos + telefone/endereço: deslocados bem mais pra
     DIREITA (usuário corrigiu — não é flush na mesma margem do título,
     como a 1ª versão desta tarefa tinha feito). Cada item continua
     alinhado à ESQUERDA dentro desse bloco deslocado (não é
     "text-align:right" — no Figma os itens mais curtos, tipo "Business",
     não terminam na mesma borda direita dos mais compridos, tipo
     "International Administration"; o que muda de verdade é só o ponto de
     partida do bloco inteiro, bem mais pra direita que o título) — seta
     ANTES do texto (Figma), ao contrário do desktop (seta depois):
     "row-reverse" inverte só a ORDEM visual, sem mexer no HTML (que
     continua igual em toda página).
     Margem esquerda 34%→47% (3ª rodada): a mesma técnica de pixel-scan no
     print de referência mostrou a seta/telefone começando em ~47% da
     largura real da tela, bem mais à direita do que a 1ª estimativa (34%,
     um "chute" educado sem medição pixel-a-pixel ainda) */
  .reach-list { margin: 6vh 8% 0 47%; }
  /* espaçamento entre itens da lista: 26px→54px (3ª rodada) — medido a
     distância entre o fim de um item e o começo do próximo no print de
     referência (~55px numa tela de referência de ~786px de altura útil,
     ou seja ~7% da altura da tela); ficou bem mais folgado que antes,
     igual ao Figma. Último item não empurra o telefone com margem dupla
     (ver ":last-child" + margin-top do ".contact-info" logo abaixo, que
     já cobre esse espaço) */
  .reach-list li { margin: 0 0 54px; }
  .reach-list li:last-child { margin-bottom: 0; }
  .reach-list a {
    flex-direction: row-reverse;
    font-size: 15px;
    color: var(--fg);
  }
  .reach-list a .arrow { flex-shrink: 0; }
  /* no mobile o e-mail vira uma linha própria embaixo do nome/seta (em vez
     de tentar caber do lado, na mesma linha) — coluna já é estreita
     (~45% da tela, ver comentário em ".reach-list" acima), grudar do lado
     ficaria apertado ou quebraria de qualquer jeito no meio do endereço */
  .reach-list .reach-email {
    display: block;
    margin: 4px 0 0;
    font-size: 13px;
  }

  /* telefone segue no mesmo recuo de 47% da lista acima (igual ao print de
     referência — o telefone começa na mesma coluna da seta, não da coluna
     do texto). Margem superior 6vh→10vh: o vão entre o fim da lista e o
     telefone também ficou bem maior no print de referência (~11% da
     altura da tela) */
  .contact-info { margin: 10vh 8% 0 47%; }
  .contact-phone { font-size: 15px; margin-bottom: 24px; }
  .contact-address p { font-size: 14px; }
  /* colchete (Figma) — 3ª rodada: reescrito do zero. Antes o border ficava
     coladinho só em volta do bloco de texto do endereço (ficou pequeno
     demais, usuário pediu pra ocupar "quase toda a tela"). No print de
     referência o colchete é um retângulo BEM maior que o texto — começa
     bem mais à esquerda que o recuo de 47% do telefone/endereço (~10% da
     largura da tela) e vai quase até a borda direita (~90%), e desce bem
     além do fim do texto do endereço, quase até o rodapé da página
     (medido via pixel-scan no print: caixa de ~10% a ~90% na horizontal,
     bem mais larga que o próprio ".contact-info" que a contém — por isso
     o "escape" do recuo do pai com margin-left negativo em vw (não em %,
     já que % seria relativo à largura JÁ recuada do ".contact-info" — vw
     sempre é relativo à tela real, não ao pai) somado a "width" também em
     vw. box-sizing:border-box pra a largura de 80vw já incluir a borda +
     padding, não estourar a tela.
     O texto continua alinhado na mesma coluna de 47% de antes — o
     "padding-left" empurra ele de volta pra lá de dentro da caixa bem
     mais larga (37vw = 47vw - 10vw, menos a grossura da borda esquerda) */
  .contact-address {
    box-sizing: border-box;
    margin-left: -37vw;
    width: 80vw;
    border: 18px solid var(--fg);
    border-top: none;
    padding: 20px 16px calc(12vh + 4px) calc(37vw - 18px);
  }
  .contact-bracket { display: none; }
}