/* ============================================================
   HL Solutions — ajustes visuais sobre o clone
   A troca de paleta principal é feita em hl-brand.js; aqui ficam
   só os casos em que uma mesma cor original tinha dois papéis.
   ============================================================ */

/* Fontes do site: as mesmas do HL Gestão, todas de licença livre (SIL Open
   Font License), hospedadas aqui (licenças em /fonts/licencas). Substituem a
   At Aero (fonte paga do site original) e a DM Mono; a troca nas regras do
   clone é feita em hl-brand.js (FONT_PATCHES).
     - Cormorant Garamond: títulos
     - Manrope: textos
     - Barlow Condensed: rótulos e botões em caixa alta */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/CormorantGaramond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/Manrope-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2');
}

/* A Cormorant Garamond usa números "antigos" (o 5 desce abaixo da linha);
   no site os números ficam alinhados, como em preços e prazos */
:root { font-variant-numeric: lining-nums; }

/* Textos pequenos que eram At Aero e ficariam na fonte de título: Manrope */
span.relative.block.overflow-hidden:has(> .contact-subtitle-line),
.font-AtAero:has(> .inline-block > .splitWord-Navbar-description-1) {
  font-family: Manrope, system-ui, sans-serif;
}

/* Textos em caixa alta que usavam a DM Mono (rótulos, menu, botões) */
.font-DM-mono.uppercase,
.uppercase .font-DM-mono,
.font-DM-mono .uppercase {
  font-family: 'Barlow Condensed', Manrope, sans-serif;
  font-weight: 500;
}

/* Fonte do nome "HL SOLUTIONS" (desenhado por cima do logo animado original,
   ver hl-override.js): Merriweather Bold, a mesma do logo da HL. Hospedada no
   próprio site (licença OFL), só o subconjunto latino: carregar do Google Fonts
   mandava o IP de todo visitante ao Google, sem consentimento (LGPD). */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Merriweather-Bold-latin.woff2') format('woff2');
}

/* Tokens da paleta cinza-neutra (a mesma do HL CRM e do HL Gestão).
   A paleta antiga (marrom escuro) está guardada na tag do git
   paleta-marrom-antiga: git show paleta-marrom-antiga:public/hl-override.css */
:root {
  --hl-bg: #FAF9F5;            /* creme, fundo da página */
  --hl-block: #EBE9E5;         /* bloco cinza claro */
  --hl-bg-alt: #F1EFEB;        /* superfícies sobre o cinza */
  --hl-surface-2: #F7F6F3;
  --hl-surface-3: #FCFBF9;
  --hl-line: #D9D6D0;
  --hl-line-strong: #C3BFB7;
  --hl-text: #1F2022;
  --hl-muted: #5B5D61;
  --hl-accent: #C86927;        /* cobre: só em fundo escuro ou texto grande */
  --hl-accent-text: #8A4416;   /* cobre para texto pequeno sobre claro */
  --hl-accent-text-2: #A4521B;
  --hl-accent-dark: #33353A;
  --hl-sand: #E3B98A;
  --hl-radius-block: clamp(22px, 3vw, 36px);
  --hl-beige-1: #F4EEE3;       /* tons de bege claro (cartões de "Quem somos") */
  --hl-beige-2: #ECE3D3;
  --hl-beige-3: #E8DCC8;
}

::selection {
  background: rgba(200, 105, 39, 0.35) !important;
  color: var(--hl-text);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hl-accent) !important;
}

/* Cores que eram usadas como fundo E como texto */
.text-apple-green,
.text-Darkslate-grey,
.text-Hoki,
.text-white-smoke,
.text-white {
  color: var(--hl-text) !important;
}

/* Exceção: o menu fixo (CONTATO/MENU no topo) e o indicador de scroll usam
   mix-blend-mode:difference com texto branco de propósito — é assim que o
   texto se auto-inverte conforme o fundo por trás (claro vira escuro e
   vice-versa). Forçar essas cores pra --hl-text quebra a conta do blend e
   deixa o texto "sumindo" contra fundos claros. Mantém branco puro só nesses
   dois elementos — outros blocos com mix-blend-difference (texto do hero,
   overlay do menu) dependem do fundo escuro original logo atrás deles e
   ficam invisíveis se forçarmos branco aqui também. */
nav.mix-blend-difference,
nav.mix-blend-difference *,
.scroll-down-indicator {
  color: #fff !important;
}

.testimonial-card,
.testimonial-card * {
  color: var(--hl-text);
}

/* Links e sublinhados em destaque */
a:hover .text-white-smoke,
.layout-link-underline {
  color: var(--hl-accent);
}

/* Logo animado: as letras originais somem, o overlay do hl-override.js desenha HL SOLUTIONS */
.NavbarSVGMorphCharacter path,
.FooterLogoChar path {
  visibility: hidden;
}

.hl-logo-overlay {
  z-index: 1001;
  pointer-events: none;
  color: var(--hl-text);
  transition: color 0.3s ease;
}

.hl-logo-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Logo do topo (imagem, ver hl-override.js): versão para fundo claro e a
   original, em tons claros, enquanto o vídeo escuro da home está visível (a
   classe é alternada no scroll). A troca é um fade entre as duas. O logo do
   rodapé (.hl-logo-overlay--footer) fica sempre escuro: ele só aparece sobre o
   fundo creme do rodapé, nunca sobre o vídeo. */
.hl-logo-overlay__inner,
.hl-logo-overlay__inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hl-logo-overlay__inner img {
  display: block;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.hl-logo-overlay__dark,
html.hl-hero-video-visible .hl-logo-overlay__light,
html.hl-about-under-header .hl-logo-overlay__light {
  opacity: 0;
}

/* Fundo escuro atrás do header: vídeo do topo da home ou o "Quem somos" */
html.hl-hero-video-visible .hl-logo-overlay__dark,
html.hl-about-under-header .hl-logo-overlay__dark {
  opacity: 1;
}

/* A área reservada pro logo grande do início (".NavbarMorphingLogo-spacer")
   tem um fundo creme opaco próprio (".bg-outer-space") — sem isso, ele
   tampava o vídeo bem no topo da página, mesmo o vídeo sendo fixo e cobrindo
   a tela inteira (o div fica na frente por ter fundo pintado, independente
   do z-index negativo do vídeo). */
.NavbarMorphingLogo-spacer {
  background: transparent !important;
}

/* Vídeo de fundo do topo da home (injetado pelo hl-override.js, filho direto
   do <body>). Fixo na tela inteira desde o primeiro quadro — inclusive atrás
   do logo grande do início, que não é filho da seção do herói. */
.hl-hero-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* Título e parágrafo dentro do ".hero-section": ficam brancos só enquanto o
   vídeo ainda domina o fundo por trás deles (a seção continua colada na tela
   — "sticky" — bem depois do vídeo já ter sumido, então não dá pra deixar
   branco fixo: sobraria texto quase invisível sobre o creme). O
   "mix-blend-mode: difference" original dependia de um fundo escuro que não
   existe mais atrás desse texto; em vez de tentar acertar a conta do blend,
   desligamos ele e forçamos a cor certa conforme a classe do vídeo. */
.hero-section > .text-white-smoke.mix-blend-difference {
  mix-blend-mode: normal;
}
html.hl-hero-video-visible .hero-section .heroSection-splitWord,
html.hl-hero-video-visible .hero-section .heroSection-splitLine {
  color: #fff !important;
}
/* O parágrafo tem uma cópia "fantasma" (aria-hidden, só pra reservar o
   espaço) por trás da linha que realmente anima — .heroSection-splitLine
   é a visível de verdade. Bug encontrado: eu tinha deixado as duas brancas
   por engano, e a cópia fantasma (que era "invisível" só por coincidência,
   por ter a mesma cor do fundo creme original) ficou visível também,
   duplicando o texto. */
.hero-section .text-outer-space {
  opacity: 0;
}

/* Reel do hero: vitrine dos produtos no lugar do vídeo original */
.heroSection-expanding-box video {
  opacity: 0 !important;
}

/* A imagem entra na camada do vídeo, que só aparece depois da animação dos blocos */
.heroSection-expanding-box > div:has(> video) {
  background: transparent url("/images/brand/hero-produtos.webp?v=20261027c") center / cover no-repeat;
}

/* DESATIVADO DE PROPÓSITO (temporário): o clique em "Ver vídeo" tenta tocar
   o showreel original em HLS, que a gente nunca carrega (ver hl-brand.js,
   comentário "Hero da home: o showreel..." — o vídeo pesava 8-11MB e ficava
   escondido atrás da vitrine mesmo assim). Sem o vídeo carregado, o clique
   expande a caixa e trava numa tela preta/vazia. Enquanto não existe um
   vídeo de verdade pra colocar aí, o clique fica desligado (mas a vitrine
   continua visível — só a interação de "abrir o vídeo" é que não funciona).
   Pra reativar no futuro: apagar este bloco e trocar o src do vídeo em
   hl-brand.js (a busca por "showreel.m3u8") pelo arquivo definitivo. */
.heroSection-expanding-box,
.heroSection-expanding-box * {
  pointer-events: none !important;
}
.showreel-cursor-follower {
  display: none !important;
}

/* Depoimentos e logos de clientes são do site original: ocultos até termos os nossos */
.testimonials-spacer,
.testimonials-section {
  display: none !important;
}

/* Tags sobre as imagens dos produtos */
.project-tag {
  background: rgba(250, 249, 245, 0.92) !important;
  border-color: rgba(31, 32, 34, 0.12) !important;
  color: var(--hl-text) !important;
}

/* Fotos dos produtos devem preencher o card inteiro, sem moldura/fundo aparecendo nas bordas */
img[src*="/images/products/"] {
  padding: 0 !important;
  object-fit: cover !important;
}

.logo-card {
  background-color: transparent !important;
  border-color: rgba(31, 32, 34, 0.1) !important;
}

.contribution-section, .contribution-section * {
  color: var(--hl-text) !important;
}

/* Esconder Novidades (Newsletter): o campo de email não fica dentro de um
   <form>, e sim de uma div (.input-feild-nav) — e ":contains()" não existe em
   CSS puro (só jQuery), o que fazia esta regra inteira ser ignorada. */
.input-feild-nav,
[placeholder="EMAIL"] {
  display: none !important;
}

/* O botão de enviar (ícone de avião de papel) é irmão do campo, não fica
   dentro dele — escondemos só a linha (neto direto) que contém os dois,
   sem afetar os contêineres maiores acima (:has() sem limite de profundidade
   esconderia a página inteira, já que tudo ali é ancestral do campo). */
div:has(> * > [placeholder="EMAIL"]) {
  display: none !important;
}

/* Redes sociais: o clone tem 3 ícones (Twitter/X, LinkedIn e um terceiro que,
   dependendo da página, aparece rotulado "Instagram" mas às vezes aponta pra
   um vídeo do YouTube em vez do Instagram de verdade). Como só queremos
   LinkedIn e Instagram, ocultamos tudo por padrão e reexibimos só pelo href
   (a classe Navbar-Social-Link fica num filho do <a>, não no próprio link). */
a:has(.Navbar-Social-Link) {
  display: none !important;
}
a[href*="linkedin.com"]:has(.Navbar-Social-Link),
a[href*="instagram.com"]:has(.Navbar-Social-Link) {
  display: flex !important;
}


/* Transição entre páginas: wordmark e símbolo da HL no lugar dos originais.
   O SVG do wordmark fica (mantém o tamanho e a animação), só o desenho troca.
   O vídeo do símbolo Ø girando ficou sem fonte (hl-brand.js); o logo da HL
   gira no lugar dele com a mesma duração do vídeo original (~2s por volta). */
.page-transition-overlay .w-\[10vw\] svg path {
  visibility: hidden;
}

.page-transition-overlay .w-\[10vw\] svg {
  background: url("/images/brand/footer-A.png") center / contain no-repeat;
}

.page-transition-overlay video {
  aspect-ratio: 1;
  background: url("/images/brand/hl-icon-320.webp?v=20261027c") center / 80% auto no-repeat;
  animation: hl-spin 2s linear infinite;
}

@keyframes hl-spin {
  from { transform: perspective(900px) rotateY(0deg); }
  to { transform: perspective(900px) rotateY(360deg); }
}

/* Campos do formulário (e seletores): as classes originais usam branco
   translúcido, feito para o fundo preto — no fundo creme ficavam invisíveis */
.bg-white-smoke\/5 {
  background-color: rgba(31, 32, 34, 0.035) !important;
}

.border-white-smoke\/15 {
  border-color: rgba(31, 32, 34, 0.22) !important;
}

form input:focus,
form textarea:focus {
  border-color: var(--hl-accent) !important;
}

/* Rodapé ocupando a tela inteira: com 770px numa tela de 900px sobrava uma
   faixa da seção anterior em cima. O espaço extra entra entre os links e o
   letreiro, que continua colado no fim da página. */
footer.footer {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

footer.footer > .footer-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

footer.footer > .footer-content > :first-child {
  margin-bottom: auto;
}

/* "FECHAR" do menu aberto: fica num bloco com mix-blend-mode:difference, que
   precisa de texto branco para aparecer escuro sobre o fundo creme */
.close-menu,
.close-menu * {
  color: #fff !important;
}

/* Cards de serviço (home e contato): as ilustrações são claras, então o
   texto é escuro e o degradê de baixo (que era preto, para texto branco)
   vira um degradê creme. A etiqueta "Serviço" tem fundo próprio. */
.ghost-card span,
.ghost-card p,
.ghost-card h3,
.ghost-card h4 {
  color: var(--hl-text) !important;
  text-shadow: none;
}

.ghost-card [class*="5C5247"] {
  color: #33353A !important;
}

.ghost-card .bg-white-smoke {
  background-color: var(--hl-text) !important;
}

.ghost-card [class*="linear-gradient(0deg,#000_0%"] {
  background-image: linear-gradient(0deg, rgba(250, 249, 245, 0.95) 0%, rgba(250, 249, 245, 0.74) 24%, rgba(250, 249, 245, 0) 62%) !important;
}

/* Filtro que apaga os cards inativos (multiplica uma cor sobre o vídeo).
   O original era um marrom escuro para vídeos escuros; nas ilustrações claras
   ele sujava as cores, então vira um bege claro. A animação (opacidade) é a mesma. */
.ghost-card > .mix-blend-multiply {
  background-color: #E9DCC8 !important;
}

/* Página Empresa: faixa com logos de clientes do site original (SVGs no código).
   O desenho original some e os logos da HL entram no lugar, os mesmos da home
   (imagens quadradas já padronizadas). Cada volta tem 7 posições para os 7 logos
   (Gestão, CRM, KanbanDoro, HL SEO Analytics, Monte Sião, GS Produtos, Clínica Futura). */
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0 {
  width: 6.4vw !important;
  height: 6.4vw;
  background: center / contain no-repeat;
}

[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0 > svg {
  visibility: hidden;
}

[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(1) { background-image: url("/images/logos/hl-gestao.webp?v=20261027c"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(2) { background-image: url("/images/logos/hl-crm.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(3) { background-image: url("/images/logos/kanbandoro.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(4) { background-image: url("/images/logos/hl-seo-analytics.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(5) { background-image: url("/images/logos/logo-ms.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(6) { background-image: url("/images/logos/logo-gs.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(7) { background-image: url("/images/logos/clinica-futura.webp?v=20261027c"); }

@media (max-width: 640px) {
  [class*="mt-[6.9vh]"] > .w-max > div > .shrink-0 {
    width: 20vw !important;
    height: 20vw;
  }
}

/* Botão "SIGA" da página Empresa: o ícone era o do X; o link agora é o Instagram */
div:has(> svg > path[d^="M17.6863"]) {
  display: none !important;
}

/* Página Empresa: a 1ª linha do texto do topo (compartilhada com a home) é
   mais longa em português e quebrava no meio na coluna de 30vw */
@media (min-width: 1025px) {
  p:has(.studioHero-splitLine) {
    max-width: 36vw !important;
  }
}

/* "Quem somos" na home, contado com a rolagem (hl-override.js, seção 2), no
   lugar da antiga pedra da seção de serviços. Fundo escuro com brilho cobre,
   para a seção marcar a passagem entre o que a HL faz e quem ela é. */
.hl-about-host > :not(.hl-about) {
  visibility: hidden !important;
}

.hl-about {
  --p: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background: var(--hl-bg);
  color: var(--hl-text);
  font-family: Manrope, system-ui, sans-serif;
}
/* órbita do hero atrás das cenas (seção 2 do hl-override.js) */
.hl-about__orbit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* o texto fica à esquerda; a órbita, à direita */
@media (min-width: 1024px) {
  .hl-about__statement, .hl-about__cta-title { max-width: 52vw; }
}
.hl-about__scene { z-index: 1; }

/* Brilho cobre que acompanha a rolagem */
.hl-about__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at calc(20% + var(--p) * 60%) calc(70% - var(--p) * 40%), rgba(200, 105, 39, 0.12), transparent 42%),
    radial-gradient(circle at 85% 15%, rgba(227, 185, 138, 0.14), transparent 35%);
  pointer-events: none;
}

.hl-about__scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 max(5.5vw, 24px);
  visibility: hidden;
  opacity: 0;
  will-change: opacity, transform;
}

.hl-about__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(18px, 2.4vw, 36px);
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hl-accent-text);
}

.hl-about__kicker::before { content: ''; width: 56px; height: 1px; background: #C86927; }

/* Cena 1: a frase acende palavra por palavra */
.hl-about__statement {
  max-width: 21ch;
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hl-about__word {
  --lit: 0;
  /* clareia de forma contínua, conforme a rolagem (--lit vai de 0 a 1) */
  color: color-mix(in srgb, #1F2022 calc(var(--lit) * 100%), #C3BFB7);
}
.hl-about__word.is-accent {
  color: color-mix(in srgb, #A4521B calc(var(--lit) * 100%), #C3BFB7);
}
.hl-about__word.is-accent.is-lit {
  background: linear-gradient(100deg, #8A4416 0%, #C86927 35%, #D9772F 50%, #C86927 65%, #A4521B 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hl-shine 5s ease-in-out infinite;
}

/* Cena 2: números */
.hl-about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl-about__stat {
  --t: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 0 clamp(16px, 1.6vw, 28px);
  border-left: 1px solid var(--hl-line-strong);
  opacity: 0;
}
.hl-about__meter { display: block; height: 2px; background: rgba(31, 32, 34, 0.1); overflow: hidden; }
.hl-about__meter::after { content: ''; display: block; height: 100%; background: linear-gradient(90deg, #8A4416, #C86927); transform-origin: left; transform: scaleX(var(--t)); }
.hl-about__stat small {
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 249, 245, 0.6);
}
.hl-about__stat strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 86px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #E3B98A;
  background: linear-gradient(to top, #E3B98A calc(var(--t) * 100%), transparent calc(var(--t) * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}
.hl-about__stat span {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.5;
  color: rgba(250, 249, 245, 0.72);
}

/* Cena 3: missão, visão e valores */
.hl-about__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.hl-about__pillar {
  --mx: 50%;
  --my: 0%;
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 40px);
  border: 1px solid rgba(227, 185, 138, 0.16);
  border-radius: 18px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(200, 105, 39, 0.28), transparent 70%), rgba(31, 32, 34, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
}
.hl-about__pillar::before {
  content: attr(data-n);
  position: absolute;
  right: clamp(14px, 1.6vw, 26px);
  top: clamp(4px, 0.6vw, 12px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(64px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(227, 185, 138, 0.28);
  pointer-events: none;
}
.hl-about__pillar h3 {
  position: relative;
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 40px);
  color: #E3B98A;
}
.hl-about__pillar p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.6;
  color: rgba(250, 249, 245, 0.82);
}
.hl-about__values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl-about__values li {
  padding: 8px 16px;
  border: 1px solid rgba(227, 185, 138, 0.3);
  border-radius: 999px;
  font-size: clamp(13px, 0.95vw, 16px);
  color: rgba(250, 249, 245, calc(0.45 + var(--on, 0) * 0.55));
  background: rgba(200, 105, 39, calc(var(--on, 0) * 0.35));
  border-color: rgba(227, 185, 138, calc(0.3 + var(--on, 0) * 0.5));
  --on: clamp(0, calc(var(--vals, 0) * 5.5 - var(--i) * 0.9), 1);
}

/* Cena 4: convite para a página /quem-somos */
.hl-about__scene--cta {
  align-items: flex-start;
}
.hl-about__cta-title {
  max-width: 16ch;
  margin: 0 0 clamp(28px, 3vw, 48px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hl-about__cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}
.hl-about__btn {
  display: inline-flex;
  align-items: center;
  padding: 18px 30px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', Manrope, sans-serif;
  background: #1F2022;
  color: #FAF9F5 !important;
  font-size: clamp(13px, 0.95vw, 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease;
}
.hl-about__btn:hover,
.hl-about__btn:focus-visible {
  background: #C86927;
  color: #FAF9F5 !important;
}
.hl-about__link {
  color: var(--hl-text) !important;
  font-size: clamp(13px, 0.95vw, 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Etapas e barra de progresso */
.hl-about__nav {
  z-index: 2;
  position: absolute;
  right: max(5.5vw, 24px);
  bottom: clamp(28px, 4vh, 48px);
  display: flex;
  gap: clamp(14px, 1.6vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hl-muted);
}
.hl-about__nav li {
  transition: color 0.3s ease;
}
.hl-about__nav li span {
  margin-right: 6px;
}
.hl-about__nav li.is-on {
  color: var(--hl-accent-text);
}
.hl-about__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(31, 32, 34, 0.08);
}
.hl-about__bar i {
  display: block;
  height: 100%;
  background: #C86927;
  transform: scaleX(0);
  transform-origin: left;
}

/* Tablet e celular */
@media (max-width: 1024px) {
  .hl-about__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }
  .hl-about__pillars {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .hl-about__nav {
    display: none;
  }
}
@media (max-width: 640px) {
  .hl-about__statement {
    font-size: clamp(28px, 8.4vw, 40px);
  }
  .hl-about__stat strong {
    font-size: clamp(36px, 11vw, 52px);
  }
  .hl-about__stat span {
    display: none;
  }
  .hl-about__pillar {
    padding: 16px 18px;
  }
  .hl-about__pillar h3 {
    margin-bottom: 8px;
    font-size: 22px;
  }
  .hl-about__pillar p {
    font-size: 13px;
    line-height: 1.5;
  }
  .hl-about__values {
    gap: 6px;
  }
  .hl-about__values li {
    padding: 5px 9px;
    font-size: 12px;
  }
}

/* Faixa de logos da home: todos os logos com a mesma largura (os arquivos já
   vêm padronizados), independente da largura que o HTML trouxer */
.logo-card > div {
  width: 80% !important;
}

/* Páginas /lab e /journal ("Serviços") removidas: o link some do menu (o
   próprio link, não só o texto, porque o href já existe pronto tanto no
   menu compacto quanto no aberto) */
a[href="/lab"],
a[href="/journal"] {
  display: none !important;
}

/* Card "Instagram" (3º) da seção de serviços: removido do array em JS quebraria
   a hidratação (o HTML pré-renderizado ainda teria os mesmos 5 blocos), então
   só ocultamos aqui. Numa flex row um item com display:none simplesmente some
   da fileira — os outros 4 cards preenchem o espaço normalmente. */
.ghost-card:nth-child(3) {
  display: none !important;
}

/* Botão "Alterar minha escolha de cookies" da política de privacidade
   (criado no hl-override.js), no mesmo corpo de texto da página */
.hl-cookie-settings {
  margin-top: 1.6vh;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.67vw;
  color: var(--hl-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.hl-cookie-settings:hover,
.hl-cookie-settings:focus-visible {
  color: var(--hl-accent-dark);
}
@media (max-width: 1024px) {
  .hl-cookie-settings { font-size: 2.34vw; }
}
@media (max-width: 640px) {
  .hl-cookie-settings { font-size: 3.48vw; }
}

/* Diagrama "Como pensamos" da página Empresa: no computador ocupava até 90% da
   altura da tela; agora até 72% (parte do ajuste de "zoom", ver TYPE_MAX_WIDTH
   no hl-brand.js). No celular e no tablet continua como era. */
@media (min-width: 1025px) {
  div:has(> img[src*="diagrama-empresa"]) {
    max-width: 72vh !important;
  }
}
/* A órbita animada (js/hl-orbita.js) fica por cima da imagem, que vira só
   a reserva para quem está sem JavaScript */
.hl-orbita--empresa { position: absolute; inset: 0; }
.hl-orbita--empresa ~ .hl-orbita-fallback, .hl-orbita-fallback { opacity: 0 !important; }

/* Imagens passando nos cards de produto da home (hl-override.js, seção 5):
   camada por cima do canvas do card, que aparece depois da revelação */
.hl-slides {
  position: absolute;
  inset: 0;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.hl-slides.is-active {
  opacity: 1;
}
.hl-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hl-slides img.is-on {
  opacity: 1;
}

/* ============================================================
   "Como Ajudamos" (página Empresa) — ver seção 7 do hl-override.js.
   No fundo do site: o palco fica fixo e a rolagem corre a faixa de
   serviços. Duas cópias da faixa: a apagada embaixo e a escura por
   cima, recortada na coluna da foto (só ali a palavra acende).
   As medidas usam cqw (largura do palco), e não vw, para nada
   passar por baixo da barra de rolagem.
   ============================================================ */
html.hl-aj-on .contribution-section { display: none; }
.hl-aj-hide { opacity: 0 !important; transition: opacity 0.4s ease; }

.hl-aj {
  --aj-fg: var(--hl-text);
  --aj-dim: rgba(31, 32, 34, 0.13);
  position: relative;
  width: 100%;
  margin-top: 10vh;
  color: var(--aj-fg);
}
.hl-aj__track {
  position: relative;
  height: calc(100vh * (1 + (var(--n) - 1) * 0.9) + 30vh);
}
.hl-aj__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  container-type: inline-size;
}
.hl-aj__title {
  position: absolute;
  left: 4cqw;
  top: 4.6vh;
  margin: 0;
  font-size: clamp(34px, 4.4cqw, 92px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hl-aj__words { position: absolute; left: 0; right: 0; top: 0; height: 50vh; }
.hl-aj__lit { position: absolute; inset: 0; }
.hl-aj__row {
  position: absolute;
  left: 0;
  bottom: 2.2vh;
  display: flex;
  align-items: baseline;
  gap: 28cqw;
  white-space: nowrap;
  will-change: transform;
}
.hl-aj__row--dim { color: var(--aj-dim); }
.hl-aj__row--lit { color: var(--aj-fg); }
.hl-aj__word {
  font-size: clamp(30px, 3.6cqw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hl-aj__texts { position: absolute; left: 4cqw; top: calc(50vh + 3vh); width: 28cqw; height: 22vh; margin: 0; padding: 0; list-style: none; }
.hl-aj__texts li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: clamp(13px, 1.05cqw, 18px);
  line-height: 1.5;
  color: var(--hl-muted);
  opacity: 0;
  will-change: opacity, transform;
}
.hl-aj__tags { display: flex; flex-wrap: wrap; gap: 0.5cqw; margin-top: 2vh; }
.hl-aj__tags em {
  padding: 0.35em 0.9em;
  border: 1px solid rgba(31, 32, 34, 0.18);
  border-radius: 999px;
  font-style: normal;
  font-size: 0.82em;
  color: var(--hl-text);
}
.hl-aj__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hl-aj .hl-aj__cta { position: absolute; left: 4cqw; bottom: 9vh; }
.hl-aj__panel { position: absolute; left: 50cqw; top: 50vh; width: 25cqw; height: 50vh; overflow: hidden; background: transparent; }
.hl-aj__layer { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.hl-aj__layer:not(:first-child) { clip-path: inset(0 0 0 100%); }
.hl-aj__layer img { width: 100%; height: 100%; object-fit: contain; display: block; will-change: transform; }
/* logos em formato largo: aparecem inteiros, sobre fundo branco */
.hl-aj__layer[data-fit="contain"] { background: transparent; }
.hl-aj__layer[data-fit="contain"] img { object-fit: contain; }
.hl-aj__caption {
  position: absolute;
  left: calc(75cqw + 2cqw);
  right: 4cqw;
  bottom: 3.4vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2cqw;
  font-size: clamp(11px, 0.85cqw, 15px);
}
.hl-aj__cname { min-width: 0; }
.hl-aj__cnum { flex: none; color: var(--hl-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1023px) {
  .hl-aj__title { top: 11vh; left: 6cqw; font-size: 9cqw; }
  .hl-aj__words { height: 38vh; }
  .hl-aj__row { gap: 94cqw; }
  .hl-aj__word { font-size: 11cqw; }
  .hl-aj__texts { left: 6cqw; top: calc(38vh + 2vh); width: 88cqw; height: 14vh; }
  .hl-aj__texts li { font-size: 3.4cqw; }
  .hl-aj__tags { margin-top: 1vh; gap: 1.5cqw; }
  .hl-aj__panel { left: 6cqw; top: 58vh; width: 88cqw; height: 30vh; }
  .hl-aj .hl-aj__cta { left: auto; right: 6cqw; bottom: 2.4vh; }
  .hl-aj__caption { left: 6cqw; right: 6cqw; bottom: auto; top: calc(58vh + 30vh + 0.8vh); font-size: 2.8cqw; }
}

/* ============================================================
   Botões (ref. originkit.dev), com as cores padrão da HL:
   - Liquid Carve ("Pedir orçamento"): areia com texto marrom; um
     buraco líquido segue o mouse e mostra o cobre por baixo.
   - Radial Reveal (os demais): contorno; o cobre se espalha em
     círculo a partir do mouse e o texto fica creme.
   ============================================================ */
:root {
  --hl-btn-fill: #E3B98A;
  --hl-btn-text: #1F2022;
  --hl-btn-blob: #C86927;
  --hl-btn-hover-text: #FAF9F5;
}
.hl-btn-liquid,
.hl-btn-radial {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', Manrope, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 0.95vw, 16px);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.hl-btn-liquid { padding: 1.15em 2em; color: var(--hl-btn-text); }
.hl-btn-liquid__svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hl-btn-liquid__svg g { transform-box: fill-box; transform-origin: center; }
.hl-btn-liquid__bite { transform: scale(0); }
.hl-btn-liquid__blob { fill: var(--hl-btn-blob); }
.hl-btn-liquid__fill { fill: var(--hl-btn-fill); }
.hl-btn-liquid__label { position: relative; z-index: 2; pointer-events: none; }
.hl-btn-liquid:focus-visible { outline: 2px solid var(--hl-btn-blob); outline-offset: 3px; border-radius: 999px; }

.hl-btn-radial {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  color: inherit;
  isolation: isolate;
}
.hl-btn-radial__face,
.hl-btn-radial__fill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 1.15em 2em;
}
.hl-btn-radial__fill {
  position: absolute;
  inset: 0;
  background: var(--hl-btn-blob);
  color: var(--hl-btn-hover-text);
  clip-path: circle(0% at 100% 100%);
  pointer-events: none;
}
.hl-btn-radial:focus-visible { outline: 2px solid var(--hl-btn-blob); outline-offset: 3px; }

/* ============================================================
   Header novo (seção 8 do hl-override.js): barra larga e
   transparente, links sempre à vista e menu de tela cheia no
   celular. As cores seguem o fundo por baixo: .on-dark (texto
   claro) ou o padrão (texto escuro sobre o creme).
   ============================================================ */
nav[class*="text-menu-link"],
.NavbarMorphingLogo,
.hl-logo-overlay--nav,
.hl-hero-video { display: none !important; }

.hl-nav {
  --nav-fg: #1F2022;
  --nav-muted: rgba(31, 32, 34, 0.55);
  --nav-glass: rgba(250, 249, 245, 0.78);
  --nav-line: rgba(31, 32, 34, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  color: var(--nav-fg);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease;
}
.hl-nav.on-dark {
  --nav-fg: #F2ECE0;
  --nav-muted: rgba(242, 236, 224, 0.6);
  --nav-glass: rgba(31, 32, 34, 0.62);
  --nav-line: rgba(242, 236, 224, 0.1);
}
.hl-nav.is-hidden { transform: translateY(-110%); }

.hl-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 4vw;
  transition: height 0.4s ease;
}
.hl-nav.is-solid .hl-nav__bar { height: 68px; }
.hl-nav__logo { justify-self: start; display: block; line-height: 0; }
.hl-nav__logo img { width: auto; height: 58px; transition: height 0.4s ease; }
.hl-nav.is-solid .hl-nav__logo img { height: 46px; }

.hl-nav__actions { justify-self: end; display: flex; align-items: center; gap: 26px; }
.hl-nav__burger {
  position: relative;
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.3s ease;
}
.hl-nav__burger:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.hl-nav__burger i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.4s ease, top 0.4s ease; }
.hl-nav__burger i:first-child { top: 17px; }
.hl-nav__burger i:last-child { top: 25px; }
.hl-nav.menu-on .hl-nav__burger i:first-child { top: 21px; transform: rotate(45deg); }
.hl-nav.menu-on .hl-nav__burger i:last-child { top: 21px; transform: rotate(-45deg); }
/* indicador "scroll down" do site original, que seguia o cursor por cima do hero */
.scroll-down-indicator { display: none !important; }

/* Menu em painéis (seção 8 do hl-override.js): três painéis empilhados no
   canto superior direito, animados em JS (entrada com estalo, saída caindo) */
.hl-nav__panels {
  position: fixed;
  top: 84px;
  right: max(16px, 2vw);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(400px, calc(100vw - 32px));
  visibility: hidden;
  pointer-events: none;
}
.hl-nav.is-open .hl-nav__panels { visibility: visible; pointer-events: auto; }
.hl-pn {
  display: block;
  padding: 22px 24px;
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 22px 54px rgba(31, 32, 34, 0.3);
  will-change: transform, opacity;
}
.hl-pn small { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.hl-pn--links { padding: 8px 24px; background: #FAF9F5; color: #1F2022; }
/* Wipe (ref. microkit.co): letras sólidas; no hover o cobre preenche da esquerda
   para a direita, com uma barra brilhante na frente */
.hl-ow { display: block; padding: 13px 0; border-bottom: 1px solid rgba(31, 32, 34, 0.1); font-size: 29px; line-height: 1.1; letter-spacing: -0.02em; text-decoration: none; }
.hl-pn--links .hl-ow:last-child { border-bottom: 0; }
.hl-ow__t { position: relative; display: inline-block; }
.hl-ow__base { display: block; color: #1F2022; transition: filter 0.4s ease; }
.hl-ow__fill { position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap; color: #C86927; transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.hl-ow__bar { position: absolute; left: 0; top: 6%; bottom: 6%; width: 5px; margin-left: -2px; border-radius: 4px; background: #C86927; box-shadow: 0 0 14px rgba(200, 105, 39, 0.8); opacity: 0; transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.hl-ow:hover .hl-ow__fill, .hl-ow:focus-visible .hl-ow__fill { width: 100%; }
.hl-ow:hover .hl-ow__bar, .hl-ow:focus-visible .hl-ow__bar { left: 100%; opacity: 1; }
.hl-ow:hover .hl-ow__base, .hl-ow:focus-visible .hl-ow__base { filter: drop-shadow(0 0 10px rgba(200, 105, 39, 0.45)); }
.hl-ow:focus-visible { outline: 2px solid #C86927; outline-offset: 3px; }
/* página atual: texto em cobre, com a barra fixa no final da palavra */
.hl-ow.is-current .hl-ow__base { color: #C86927; }
.hl-ow.is-current .hl-ow__t::after { content: ""; position: absolute; right: -10px; top: 6%; bottom: 6%; width: 5px; border-radius: 4px; background: #C86927; box-shadow: 0 0 14px rgba(200, 105, 39, 0.5); }
@media (prefers-reduced-motion: reduce) { .hl-ow__fill, .hl-ow__bar, .hl-ow__base { transition: none; } }
.hl-pn--promo { background: linear-gradient(135deg, #C86927, #7A3A12); color: #FAF9F5; }
.hl-pn--promo small { opacity: 0.8; }
.hl-pn--promo strong { display: block; margin: 8px 0 10px; font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
.hl-pn--promo span { display: block; font-size: 13px; line-height: 1.5; opacity: 0.92; }
.hl-pn--info { background: var(--hl-block); border: 1px solid var(--hl-line); color: var(--hl-text); }
.hl-pn--info small { color: var(--hl-accent-text); }
.hl-pn--info p { margin: 10px 0 18px; font-size: 14px; line-height: 1.6; }
.hl-pn__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hl-pn__row .hl-btn-liquid { padding: 0.95em 1.4em; font-size: 12px; }
.hl-pn__row .hl-btn-radial__face, .hl-pn__row .hl-btn-radial__fill { padding: 0.95em 1.4em; font-size: 12px; }

@media (max-width: 1023px) {
  .hl-nav__bar { height: 72px; padding: 0 5vw; }
  .hl-nav.is-solid .hl-nav__bar { height: 62px; }
  .hl-nav__logo img { height: 44px; }
  .hl-nav.is-solid .hl-nav__logo img { height: 38px; }
  .hl-nav__actions { gap: 14px; }
  .hl-nav__panels { top: 72px; right: 16px; left: 16px; width: auto; }
}

/* ============================================================
   Hero "Órbita" (home, seção 9 do hl-override.js)
   ============================================================ */
.hl-hero {
  --hero-out: 0;
  position: relative;
  z-index: 20;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  /* bloco cinza claro: cantos arredondados, margem lateral pequena e borda */
  margin: 10px max(10px, 1vw) 0;
  height: calc(100svh - 20px);
  min-height: 620px;
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius-block);
  background: var(--hl-block) radial-gradient(120% 90% at 68% 50%, var(--hl-bg-alt) 0%, var(--hl-block) 60%);
  color: var(--hl-text);
  --hl-btn-fill: #1F2022;
  --hl-btn-text: #FAF9F5;
  --hl-btn-blob: #C86927;
}
.hl-hero__orbit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
/* ao rolar, o fundo escuro se dissolve no creme do resto do site */
.hl-hero__fade { position: absolute; inset: 0; z-index: 0; background: var(--hl-bg); opacity: min(1, calc(var(--hero-out) * 1.6)); pointer-events: none; }
.hl-orbit-arcs { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hl-hero__planet {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FAF9F5 30%, #E9E6E0 66%, #C9C5BD 100%);
  box-shadow: inset 0 0 0 1.5px rgba(138, 68, 22, 0.3), inset -26px -32px 60px rgba(31, 32, 34, 0.16), 0 40px 90px rgba(31, 32, 34, 0.22), 0 0 150px rgba(200, 105, 39, 0.22);
  transform: scale(calc(1 + var(--hero-out) * 0.25));
  opacity: calc(1 - var(--hero-out));
}


.hl-hero__content {
  position: absolute;
  z-index: 2;
  left: 5.5vw;
  top: 50%;
  max-width: 46vw;
  transform: translateY(calc(-46% - var(--hero-out) * 80px));
  opacity: calc(1 - var(--hero-out) * 1.3);
}
.hl-hero__eyebrow, .hl-hero__rotate, .hl-hero__intro, .hl-hero__actions, .hl-hero__foot {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.hl-hero.is-in .hl-hero__eyebrow { opacity: 1; transform: none; transition-delay: 0.1s; }
.hl-hero.is-in .hl-hero__rotate { opacity: 1; transform: none; transition-delay: 0.55s; }
.hl-hero.is-in .hl-hero__intro { opacity: 1; transform: none; transition-delay: 0.7s; }
.hl-hero.is-in .hl-hero__actions { opacity: 1; transform: none; transition-delay: 0.85s; }
.hl-hero.is-in .hl-hero__foot { opacity: 1; transform: none; transition-delay: 1.2s; }

.hl-hero__eyebrow { margin: 0 0 3vh; font-size: clamp(11px, 0.8vw, 14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hl-accent-text); }
.hl-hero__title { margin: 0; font-size: clamp(44px, 5.6vw, 116px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.hl-hero__line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hl-hero__line > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.hl-hero.is-in .hl-hero__line > span { transform: none; }
.hl-hero.is-in .hl-hero__line:nth-child(2) > span { transition-delay: 0.12s; }
.hl-gold {
  font-style: normal;
  background: linear-gradient(100deg, #8A4416 0%, #C86927 32%, #D9772F 48%, #C86927 62%, #A4521B 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hl-shine 5s ease-in-out infinite;
}
@keyframes hl-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -20% 0; } }

.hl-hero__rotate { margin: 3.2vh 0 0; font-size: clamp(20px, 1.9vw, 34px); letter-spacing: -0.02em; color: var(--hl-muted); }
.hl-hero__words { display: inline-grid; overflow: hidden; vertical-align: top; color: var(--hl-accent-text); }
.hl-hero__words span {
  grid-area: 1 / 1;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}
.hl-hero__words span.is-on { transform: none; opacity: 1; }
.hl-hero__words span.is-out { transform: translateY(-105%); opacity: 0; }
.hl-hero__intro { max-width: 36em; margin: 3vh 0 0; font-size: clamp(12px, 0.85vw, 15px); font-weight: 400; line-height: 1.6; color: var(--hl-muted); }
.hl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 4.5vh; }

.hl-hero__foot {
  position: absolute;
  z-index: 2;
  left: 5.5vw;
  right: 5.5vw;
  bottom: 3.5vh;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hl-muted);
}
.hl-hero__scroll { display: inline-flex; align-items: center; gap: 12px; }
.hl-hero__scroll::before {
  content: "";
  width: 1px;
  height: 28px;
  background: linear-gradient(rgba(138, 68, 22, 0), #8A4416);
  transform-origin: top;
  animation: hl-scroll-cue 2s ease-in-out infinite;
}
@keyframes hl-scroll-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

@media (max-width: 1023px) {
  .hl-hero__content { left: 6vw; right: 6vw; top: auto; bottom: 7vh; max-width: none; transform: translateY(calc(var(--hero-out) * -60px)); }
  .hl-hero__title { font-size: 10.5vw; }
  .hl-hero__rotate { font-size: 5vw; margin-top: 2vh; }
  .hl-hero__intro { margin-top: 1.6vh; font-size: 3.1vw; }
  .hl-hero__actions { margin-top: 3vh; gap: 20px; }
  .hl-hero__brands { display: none; }
  .hl-hero__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-hero__line > span, .hl-hero__eyebrow, .hl-hero__rotate, .hl-hero__intro, .hl-hero__actions, .hl-hero__foot { transform: none !important; opacity: 1 !important; transition: none !important; }
  .hl-gold, .hl-hero__scroll::before { animation: none; }
}

/* ============================================================
   Caixa dos produtos logo depois do hero novo (home)
   O texto que ficava em cima dela saiu com o hero "Órbita"; sem ele,
   o recuo de 17,5vh que o original aplicava (bottom inline, via JS)
   deixava a caixa cortada no topo e vazia embaixo. Aqui ela fica
   centralizada na tela. E, quando o mosaico de 7x4 termina, a imagem
   inteira entra por cima no lugar do vídeo (que não existe no clone):
   os pedaços do mosaico são 1% maiores que a célula e não se alinham
   nas emendas.
   ============================================================ */
.hl-hero ~ main .hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}
.hl-hero ~ main .heroSection-image-container { bottom: 0 !important; }
.hl-hero ~ main .heroSection-expanding-box > .absolute {
  background: url("/images/brand/hero-produtos.webp?v=20261027c") center / cover no-repeat;
}

/* ============================================================
   Página Contato (seção 10 do hl-override.js): cartão escuro à
   esquerda, formulário original repaginado à direita.
   ============================================================ */
.hl-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 5vw;
  align-items: start;
  padding-top: 132px !important;
}
.hl-contact > :not(.hl-contact__aside) { grid-column: 2; }
.hl-contact__aside { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 104px; }

.hl-contact__card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 2.8vw, 52px);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius-block);
  background: var(--hl-block);
  color: var(--hl-text);
  --hl-btn-fill: #1F2022;
  --hl-btn-text: #FAF9F5;
  --hl-btn-blob: #C86927;
}
/* anel do logo, em traço fino, no canto do cartão */
.hl-contact__ring {
  position: absolute;
  top: -70px;
  right: -110px;
  width: 340px;
  height: 140px;
  border: 1px solid rgba(138, 68, 22, 0.35);
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}
.hl-contact__ring::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 120px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C86927;
  box-shadow: 0 0 14px rgba(200, 105, 39, 0.5);
}
.hl-contact__eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hl-accent-text); }
.hl-contact__title { margin: 2.4vh 0 0; font-size: clamp(30px, 2.7vw, 50px); line-height: 1.06; letter-spacing: -0.03em; }
.hl-contact__steps { margin: 4.5vh 0 0; padding: 0; list-style: none; }
.hl-contact__steps li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hl-line); }
.hl-contact__steps span { flex: none; font-size: 12px; color: var(--hl-accent-text); padding-top: 2px; }
.hl-contact__steps p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--hl-muted); }
.hl-contact__steps strong { font-weight: 400; color: var(--hl-text); }
.hl-contact__direct { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 4vh; padding-top: 4vh; border-top: 1px solid var(--hl-line); }
.hl-contact__direct p { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 14px; color: var(--hl-text); }
.hl-contact__direct p span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hl-muted); }
.hl-contact__direct a:not(.hl-btn-radial) { color: inherit; text-decoration: none; }
.hl-contact__note { margin: 3.5vh 0 0; font-size: 11.5px; color: var(--hl-muted); }

/* título e subtítulo originais: menores, à direita, sem o recuo da 1ª linha */
.hl-contact h1 > span.float-start { display: none; }
.hl-contact > .relative [class*="text-[3.3vw]"] { font-size: clamp(26px, 2.1vw, 40px) !important; line-height: 1.2 !important; }
.hl-contact > .relative + div [class*="text-[2.2vw]"] { margin-top: 2.4vh !important; font-size: clamp(15px, 1.05vw, 19px) !important; color: var(--hl-muted); }
.hl-contact form { margin-top: -2vh; }
.hl-contact [class*="h-[8.4vh]"] { height: 5vh !important; }

/* campos: linha fina embaixo, foco em cobre */
.hl-contact form label,
.hl-contact form .flex-1 > p {
  font-size: 11.5px !important;
  letter-spacing: 0.1em;
  color: var(--hl-muted);
}
.hl-contact form input:not([type="checkbox"]),
.hl-contact form textarea,
.hl-contact form [class*="justify-between"][class*="border-[1.5px]"] {
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(31, 32, 34, 0.22) !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--hl-text);
  font-size: clamp(15px, 1.05vw, 18px) !important;
  transition: border-color 0.3s ease;
}
.hl-contact form textarea { min-height: 150px; resize: vertical; }
.hl-contact form input:focus,
.hl-contact form textarea:focus,
.hl-contact form [class*="justify-between"][class*="border-[1.5px]"]:hover { border-bottom-color: #C86927 !important; }
.hl-contact form .relative > svg { display: none; }
.hl-contact form [class*="justify-between"][class*="border-[1.5px]"] p { font-size: clamp(13px, 0.95vw, 16px) !important; }

/* lista de opções aberta: cartão claro com sombra */
.hl-contact form [class*="bg-[#D9D6D0]"] {
  margin-top: 8px;
  padding: 20px !important;
  gap: 14px !important;
  border: 1px solid rgba(31, 32, 34, 0.1) !important;
  border-radius: 14px;
  background: #FAF9F5 !important;
  box-shadow: 0 24px 60px rgba(31, 32, 34, 0.14);
}
.hl-contact form [class*="bg-[#D9D6D0]"] p { font-size: 13px !important; }

/* enviar: botão principal nas cores padrão, alinhado à esquerda */
.hl-contact form > div:last-child { align-items: flex-start !important; }
.hl-contact form button[type="submit"] {
  padding: 20px 48px !important;
  border: 0 !important;
  border-radius: 12px;
  background: var(--hl-btn-fill) !important;
  color: var(--hl-btn-text);
}
.hl-contact form button[type="submit"] p {
  width: auto !important;
  font-family: "Barlow Condensed", Manrope, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hl-contact form button[type="submit"] .bg-valhalla { background: var(--hl-btn-blob) !important; }
.hl-contact form button[type="submit"] .bg-apple-green { background: #1F2022 !important; }

@media (max-width: 1023px) {
  .hl-contact { grid-template-columns: 1fr; padding-top: 110px !important; }
  .hl-contact > :not(.hl-contact__aside) { grid-column: 1; }
  .hl-contact__aside { grid-row: auto; position: relative; top: 0; margin-bottom: 6vh; }
  .hl-contact > .relative [class*="text-[3.3vw]"] { font-size: 6.5vw !important; }
  .hl-contact > .relative + div [class*="text-[2.2vw]"] { font-size: 4vw !important; }
  .hl-contact form button[type="submit"] { width: 100%; }
}

/* Home: sem o trecho "Presença digital é o primeiro contato…" e os cartões de
   serviço ilustrados (seção de artigos do original). O seletor depende do
   hero novo, que só existe na home. */
.hl-hero ~ main .journal-section { display: none !important; }

/* Contato: sem o trecho "Quer saber mais sobre como trabalhamos?" e os cartões
   de serviço ilustrados que vêm depois do formulário */
main > section.hl-contact ~ section { display: none !important; }

/* ============================================================
   "Quem somos" da home como pilha de cartões (seção 2 do hl-override.js):
   fundo claro, quatro cartões de cor e layout próprios que sobem e
   cobrem o anterior. Vem depois das regras antigas e as sobrescreve.
   ============================================================ */
.hl-about {
  background: var(--hl-bg);
  color: var(--hl-text);
}
.hl-about__bgword {
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(180px, 30vw, 520px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(31, 32, 34, 0.13);
  transform: translate3d(calc(var(--p) * -55%), -50%, 0);
  pointer-events: none;
  will-change: transform;
}

.hl-about__scene {
  inset: 12vh max(5vw, 20px) 8vh;
  padding: clamp(28px, 4vw, 76px);
  border-radius: 28px;
  overflow: hidden;
  transform-origin: 50% 0;
  box-shadow: 0 -24px 70px rgba(31, 32, 34, 0.22);
}
.hl-about__scene { border: 1px solid var(--hl-line); --hl-btn-fill: #1F2022; --hl-btn-text: #FAF9F5; --hl-btn-blob: #C86927; }
.hl-about__scene--intro { background: var(--hl-beige-2); color: var(--hl-text); }
.hl-about__scene--stats { background: var(--hl-beige-1); color: var(--hl-text); }
.hl-about__scene--pillars { background: var(--hl-bg); color: var(--hl-text); }
.hl-about__scene--cta { background: var(--hl-beige-3); color: var(--hl-text); }

/* cartão 1: a frase maior, com a lista de serviços ao lado */
.hl-about__statement { max-width: 22ch; }
.hl-about__scene--intro .hl-about__statement { max-width: 20ch; font-size: clamp(30px, 3.5vw, 60px); }
.hl-about__services {
  position: absolute;
  right: clamp(24px, 4vw, 76px);
  top: 50%;
  width: clamp(240px, 24vw, 400px);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2.1vw, 36px);
  letter-spacing: -0.02em;
}
.hl-about__services li {
  --on: clamp(0, calc(var(--svc, 0) * 7 - var(--i) * 0.9), 1);
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(31, 32, 34, calc(0.1 + var(--on) * 0.12));
  color: rgba(31, 32, 34, calc(0.32 + var(--on) * 0.68));
  transform: translateX(calc((1 - var(--on)) * 24px));
}
.hl-about__services li span { font: 500 12px 'Barlow Condensed', Manrope, sans-serif; letter-spacing: 0.1em; color: var(--hl-accent-text); }
.hl-about__services li:last-child { border-bottom: 1px solid var(--hl-line); }

/* cartão 2: números em tinta escura sobre areia */
.hl-about__scene--stats .hl-about__kicker { color: #1F2022; }
.hl-about__scene--stats .hl-about__kicker::before { background: #1F2022; }
.hl-about__scene--stats .hl-about__stat { border-left-color: rgba(31, 32, 34, 0.3); }
.hl-about__scene--stats .hl-about__stat small { color: rgba(31, 32, 34, 0.65); }
.hl-about__scene--stats .hl-about__stat span { color: rgba(31, 32, 34, 0.78); }
.hl-about__scene--stats .hl-about__stat strong {
  -webkit-text-stroke: 1px #1F2022;
  background: linear-gradient(to top, #1F2022 calc(var(--t) * 100%), transparent calc(var(--t) * 100%));
  -webkit-background-clip: text;
  background-clip: text;
}
.hl-about__scene--stats .hl-about__meter { background: rgba(31, 32, 34, 0.14); }
.hl-about__scene--stats .hl-about__meter::after { background: #1F2022; }

/* cartão 3: missão, visão e valores sobre claro */
.hl-about__scene--pillars .hl-about__pillar {
  border-color: rgba(31, 32, 34, 0.12);
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(227, 185, 138, 0.35), transparent 70%), var(--hl-beige-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hl-about__scene--pillars .hl-about__pillar::before { -webkit-text-stroke-color: rgba(200, 105, 39, 0.35); }
.hl-about__scene--pillars .hl-about__pillar h3 { color: var(--hl-accent-text); }
.hl-about__scene--pillars .hl-about__pillar p { color: #1F2022; }
.hl-about__scene--pillars .hl-about__values li {
  color: rgba(31, 32, 34, calc(0.5 + var(--on, 0) * 0.5));
  background: rgba(227, 185, 138, calc(var(--on, 0) * 0.5));
  border-color: rgba(31, 32, 34, calc(0.18 + var(--on, 0) * 0.4));
}

/* cartão 4: convite */
.hl-about__scene--cta { justify-content: center; }

/* etapas e barra sobre o fundo claro */
.hl-about__nav { color: rgba(31, 32, 34, 0.4); }
.hl-about__nav li.is-on { color: var(--hl-accent-text); }
.hl-about__bar { background: rgba(31, 32, 34, 0.1); }

@media (max-width: 1024px) {
  .hl-about__scene { inset: 11vh 14px 7vh; padding: 24px 22px; border-radius: 22px; }
  .hl-about__scene--intro::after { font-size: 120px; }
  .hl-about__bgword { font-size: 46vw; }
}

/* cartão 4: contatos no lado direito */
.hl-about__contact {
  position: absolute;
  right: clamp(24px, 4vw, 76px);
  top: 50%;
  width: clamp(220px, 22vw, 360px);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  font-size: clamp(14px, 1.1vw, 19px);
  color: var(--hl-text);
}
.hl-about__contact li { padding: 18px 0; border-top: 1px solid var(--hl-line); }
.hl-about__contact li:last-child { border-bottom: 1px solid var(--hl-line); }
.hl-about__contact small { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hl-accent-text); }
@media (max-width: 1100px) {
  .hl-about__services, .hl-about__contact { display: none; }
  .hl-about__statement { max-width: none; }
}

/* Crachá pendurado na página Empresa (seção 12 do hl-override.js) */
.hl-bdg {
  position: absolute;
  left: calc(50% - 300px);
  top: calc(50% - 400px);
  z-index: 100;
  width: 600px;
  height: 860px;
  pointer-events: none;
}
.hl-bdg__strap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
}
.hl-bdg__card {
  position: absolute;
  left: calc(300px - 150px);
  top: 40px;
  width: 300px;
  height: 470px;
  transform-origin: 50% 0;
  perspective: 1200px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
}
.hl-bdg__card.is-drag { cursor: grabbing; }
/* presilha grafite que abraça a fita, elo curto e anel redondo que passa pelo furo do cartão */
.hl-bdg__hw { position: absolute; left: 50%; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; }
.hl-bdg__clip { position: absolute; left: -19px; top: -8px; width: 38px; height: 34px; border-radius: 6px 6px 9px 9px; background: linear-gradient(90deg, #4a4d55 0%, #9a9da6 22%, #5b5e66 48%, #2f3138 78%, #4a4d55 100%); box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.45); }
.hl-bdg__clip::before { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22); }
.hl-bdg__clip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #565961, #a3a6af 40%, #3a3d44); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.hl-bdg__ring { position: absolute; left: -17px; top: 31px; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 210deg, #d4d6dc, #6f727a, #2d2f36, #9a9da6, #d4d6dc); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)); }
.hl-bdg__flip { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1); }
.hl-bdg__face { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; background: #08080a; color: #F2F2F4; box-shadow: 0 30px 70px rgba(10, 10, 12, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.13); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hl-bdg__front { display: block; }
.hl-bdg__back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: radial-gradient(100% 70% at 50% 0%, rgba(200, 105, 39, 0.4), transparent 70%), #08080a; }
.hl-bdg__slot { position: absolute; left: 50%; top: 12px; z-index: 2; width: 62px; height: 13px; margin-left: -31px; border-radius: 11px; background: #1c1c20; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.16); }
.hl-bdg__mark { position: absolute; left: 18px; top: 14px; width: 30px; height: auto; opacity: 0.22; pointer-events: none; }
.hl-bdg__handle { position: absolute; right: 18px; top: 13px; font-size: 11px; letter-spacing: 0.04em; color: rgba(242, 242, 244, 0.55); }
.hl-bdg__photo { position: absolute; left: 12px; right: 12px; top: 46px; bottom: 92px; overflow: hidden; border-radius: 16px; background: #1a1a1e; }
.hl-bdg__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; pointer-events: none; }
.hl-bdg__info { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.hl-bdg__info strong { font-size: 25px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.hl-bdg__info span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #E3B98A; }
.hl-bdg__back img { width: 92px; height: auto; pointer-events: none; }
.hl-bdg__back span { font-size: 28px; letter-spacing: -0.02em; }
.hl-bdg__back small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #E3B98A; }
.hl-bdg__hint { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; text-align: center; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hl-muted); }

/* Página Empresa (/studio): sem a foto gigante logo abaixo do título de abertura */
div:has(> img[src*="empresa-trabalho"]), div:has(> img[src*="StudioHeroImage"]) { display: none !important; }

/* Diretório de links internos de SEO no rodapé (serviços, segmentos e cidades) */
.hl-seo-directory {
  margin-top: 4.5vh;
  padding: 3.5vh 0 2.5vh;
  border-top: 1px solid var(--hl-line, rgba(31, 32, 34, 0.14));
  border-bottom: 1px solid var(--hl-line, rgba(31, 32, 34, 0.14));
  color: var(--hl-muted, #5B5D61);
}
body > .hl-seo-directory {
  padding-left: 5.5vw;
  padding-right: 5.5vw;
  background: var(--hl-bg, #FAF9F5);
}
.hl-seo-directory__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 2.4vw;
}
.hl-seo-directory__heading {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hl-text, #1F2022);
}
.hl-seo-directory__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hl-seo-directory__list--cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}
.hl-seo-directory__list a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--hl-muted, #5B5D61);
  text-decoration: none;
  transition: color 0.15s ease;
}
.hl-seo-directory__list a:hover {
  color: var(--hl-accent, #C86927);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1024px) {
  .hl-seo-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body > .hl-seo-directory {
    padding-left: 5.97vw;
    padding-right: 5.97vw;
  }
  .hl-seo-directory__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}