/* =========================================================================
   LHALALA U.S — extra.css
   Estilos que o theme.json não cobre nativamente. Consome os mesmos tokens
   (custom properties geradas pelo theme.json: --wp--preset--color--*, etc.).
   Carregado no front e no editor (add_editor_style).

   Tipografia: Open Sans (sans-serif) em TODO texto corrido — headings, corpo,
   nav, botões — a fonte EN REAL do site oficial (lhala.com: font_family_en =
   "Open Sans"). Pesos 300–800 via fonte variável self-host, subset latin
   (assets/fonts/OpenSans-Variable.woff2). A serifa permanece APENAS no
   logo (logo-lhala.svg) e no favicon (favicon.svg, "LHA" em serifa), que são
   SVG e não dependem de webfont.
   ========================================================================= */

:root {
  --lh-shadow-card: 0 1px 2px rgba(26,23,20,.04), 0 12px 32px -16px rgba(26,23,20,.12);
  --lh-shadow-product: 0 24px 48px -24px rgba(26,23,20,.22);
  --lh-radius-card: 14px;
}

/* ---------- Guarda de overflow horizontal ----------
   ATENÇÃO: o clip NÃO pode ficar em html/body — na prática isso quebra o
   position:sticky do header (vira contexto de scroll na viewport). A guarda foi
   movida pra #lh-main (lá embaixo, na seção de full-bleed): a main é IRMÃ do
   header, então clipar nela contém o transbordo do full-bleed sem afetar o
   sticky. O hero/marquee já usam overflow:clip localmente. */

/* ---------- Navegação suave entre páginas (sem "piscada"/flash branco) ----------
   View Transitions API para navegação multi-página same-origin: o navegador
   "segura" o frame da página atual e faz um cross-fade suave até a próxima,
   no lugar do flash branco do reload. Degrada de forma graciosa onde não há
   suporte. O background no <html> elimina qualquer flash branco residual. */
@view-transition { navigation: auto; }
html { background-color: var(--wp--preset--color--base, #FBFAF8); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}

/* ---------- A11y: skip link + foco visível global ---------- */
.lh-skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--ink); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 8px 0; text-decoration: none;
}
.lh-skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ---------- Eyebrow / overline ---------- */
.lh-eyebrow {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--brand); margin: 0 0 .9rem;
}
.lh-eyebrow.is-light { color: var(--wp--preset--color--brand); }
/* Hero eyebrow: use link orange (#B5341D, ~6:1) for AA contrast over light bg */
.lh-hero .lh-eyebrow { color: var(--wp--preset--color--link); }

/* ---------- Header sticky (réplica 1:1 do lhala.com oficial) ----------
   Valores extraídos do CSS do site oficial (imweb):
   - header branco, sticky, borda inferior fina
   - logo à esquerda (imagem ~96px, proporção 289×81 ≈ 3.57:1)
   - nav centralizada: 15px, normal, UPPERCASE, letter-spacing 0,
     padding 0 16px por item, cor #686d71 (hover #38383a, ativo #323133)
   - direita: botão "Request information" (pílula discreta) */
.lh-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;            /* oficial: header branco sólido */
  border-bottom: 1px solid #ededed;
  /* barra full-width; o recuo lateral vive só no .lh-header-inner (1280px) */
  padding-inline: 0;
}
/* Container do header = igual ao oficial (lhala.com / imweb .inline-inside):
   max-width 1280px, centrado, com recuo lateral generoso. O oficial usa
   padding-inline 150px porque o canto direito é só "KOR | ENG" (estreito).
   Nosso canto direito é o botão "Request information" (pílula), bem mais largo —
   se mantivéssemos 150px o conjunto estouraria/encavalaria, então reduzimos o
   teto do recuo pra ~72px (ainda generoso, logo/botão nunca colam na borda).
   Três zonas no desktop: logo (esq) · nav DEAD-CENTER · CTA (dir). */
.lh-header-inner {
  min-height: 65px;              /* altura do header oficial (~65px) */
  position: relative;
  max-width: 1280px;             /* oficial: .inline-inside max-width 1280px */
  margin-inline: auto;           /* oficial: margin 0 auto (centrado) */
  padding-inline: clamp(1.25rem, 5vw, 72px); /* recuo lateral menor que o oficial (150px) p/ caber o botão largo sem encavalar */
  /* Logo (esq) e CTA (dir) ocupam o fluxo flex nas pontas, com espaço entre eles.
     A nav fica fora do fluxo (absolute, translateX) p/ cair no CENTRO REAL do
     header, independente das larguras assimétricas de logo e botão — é como
     sites assim resolvem a centralização perfeita. */
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.lh-logo { justify-self: start; flex: 0 0 auto; }
/* logo oficial é exibido a ~96px de largura; height auto preserva a proporção */
.lh-logo img { width: 96px; height: auto; display: block; }

/* Nav primária centralizada no CENTRO REAL do header (não no centro do espaço
   sobrando do flex). position:absolute + translateX(-50%) = dead-center, sem
   sofrer com a assimetria logo(esq) ↔ botão(dir). */
.lh-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; pointer-events: auto;
}
.lh-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  /* espaçamento UNIFORME entre os itens; teto menor (1.75rem) p/ a nav ficar mais
     compacta e nunca encostar no botão (dir) nem no logo (esq) em >=1100px. */
  gap: clamp(1rem, 2vw, 1.75rem);
}
.lh-nav a {
  text-decoration: none;
  display: block; padding: 0;               /* espaçamento entre itens vem do gap do ul */
  font-size: 15px; font-weight: 400;        /* oficial: 15px, weight normal */
  text-transform: uppercase;                /* oficial: text-transform: uppercase */
  letter-spacing: 0;                        /* oficial: letter-spacing: 0px */
  color: #686d71;                           /* oficial: cor resting #686d71 (~4.7:1 AA) */
  line-height: 65px;                        /* centra verticalmente no header */
  white-space: nowrap;                      /* nenhum label quebra (ex.: "Global presence") */
  transition: color .15s ease;
}
.lh-nav a:hover { color: #38383a; }         /* oficial: hover #38383a */
.lh-nav a[aria-current="page"] { color: #323133; font-weight: 700; } /* oficial: ativo bold #323133 */

/* ---------- CTA do header "Request information" (pílula discreta) ---------- */
.lh-header-cta { justify-self: end; flex: 0 0 auto; white-space: nowrap; }
.lh-header-cta .wp-block-button__link {
  display: inline-block;
  background: var(--wp--preset--color--brand, #EF4735);
  color: #fff;
  border-radius: 999px;
  padding: .42rem 1.1rem;
  /* DECISÃO ESTÉTICA DO CLIENTE: sem negrito (medium/500), ~16px — o bold 19px
     foi achado "agressivo". Isso derruba o texto branco no #EF4735 ABAIXO do
     AA-large (não qualifica mais 3.73:1). Cor mantida por pedido do cliente;
     NÃO reverter pra bold nem trocar o laranja. */
  font-size: 16px; font-weight: 500; line-height: 1.2;
  text-decoration: none;
  transition: background .15s ease;
}
.lh-header-cta .wp-block-button__link:hover { background: var(--wp--preset--color--link, #B5341D); }
.lh-header-cta .wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent, #D8472E); outline-offset: 3px;
}

/* Botão de menu mobile (escondido no desktop) */
.lh-nav-toggle {
  display: none; background: transparent; border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; padding: .45rem .9rem; font: inherit; font-weight: 600;
  color: var(--wp--preset--color--ink); cursor: pointer;
}

/* Abaixo de 1100px a nav DEAD-CENTER (absolute) não cabe sem encostar no logo/
   botão, então colapsa no toggle "Menu". Isso preserva o comportamento mobile
   (<=860px) idêntico e estende o mesmo padrão à faixa 861–1099px, eliminando a
   zona de sobreposição. Acima de 1100px a nav fica centralizada com folga. */
@media (max-width: 1099px) {
  /* logo (esq) · CTA "Request information" + toggle "Menu" (dir).
     A nav colapsa num menu; o CTA continua visível como pílula. */
  .lh-header-inner { display: flex; justify-content: space-between; gap: .6rem; }
  .lh-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    order: 3; /* fica depois do CTA no fluxo flex */
    min-height: 44px; /* alvo de toque WCAG 2.5.5 (a pílula é visualmente compacta, mas o tap-target tem 44px) */
  }
  .lh-header-cta { order: 2; }
  .lh-nav {
    order: 4;
    position: absolute; left: 0; right: 0; top: 100%;
    transform: none; /* reset do translateX(-50%) do desktop */
    background: #ffffff;
    border-bottom: 1px solid #ededed;
    box-shadow: var(--lh-shadow-card);
    display: none; padding: 1rem var(--wp--preset--spacing--40);
    padding-inline: var(--wp--preset--spacing--40); /* reset do reserva do CTA do desktop */
  }
  .lh-nav.is-open { display: block; }
  .lh-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .lh-nav li { width: 100%; }
  .lh-nav a {
    display: block; padding: .9rem 0; width: 100%; line-height: 1.2;
    border-bottom: 1px solid #ededed;
  }
  /* sem bold (decisão do cliente), só enxuga o padding pra caber.
     min-height 44px = alvo de toque WCAG 2.5.5 sem inchar a pílula visualmente. */
  .lh-header-cta .wp-block-button__link {
    padding: .34rem .8rem; font-size: 16px;
    display: inline-flex; align-items: center; min-height: 44px;
  }
}
@media (max-width: 420px) {
  /* telas estreitas: CTA enxuto */
  .lh-header-cta .wp-block-button__link { padding: .3rem .65rem; font-size: 15px; }
}

/* ---------- Botão ghost (estilo de bloco registrado) ---------- */
.wp-block-button.is-style-lhala-ghost .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--ink);
  border: 1.5px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-lhala-ghost .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink);
}

/* ---------- Filete de marca (separador) ---------- */
.lh-rule { height: 2px; background: var(--wp--preset--color--accent); border: 0; width: 64px; margin: 0 0 1.2rem; }

/* ---------- Hero (fundo animado de produtos, espalhado full-bleed) ---------- */
.lh-hero {
  position: relative; isolation: isolate; overflow: clip;
  /* base clara premium por baixo de tudo */
  background:
    radial-gradient(140% 120% at 50% -10%, #FFFFFF 0%, var(--wp--preset--color--base) 60%);
  padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 9vw, 7rem);
  min-height: clamp(560px, 78vh, 760px);
  display: flex; align-items: center;
}
.lh-hero h1 {
  letter-spacing: -0.03em;
  /* Override do preset x-large (piso 2.6rem) SÓ no H1 do hero: a 360px o título
     empilhava em 3 linhas altas e desequilibrava o painel. Piso ~2.35rem deixa
     mais compacto no mobile pequeno; o teto (4.6rem) e o desktop ficam intactos. */
  font-size: clamp(2.35rem, 7vw, 4.6rem);
}
.lh-hero-lede { color: var(--wp--preset--color--ink-soft); max-width: 46ch; margin-inline: auto; }
.lh-hero-note { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* Conteúdo centralizado, por cima do motion, com painel localizado de legibilidade.
   O painel (base clara semitransparente + blur + glow radial) garante contraste AA
   da headline/eyebrow/lede mesmo com o motion espalhado passando atrás. */
.lh-hero-content {
  position: relative; z-index: 3;
  text-align: center; margin-inline: auto; max-width: 680px;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3.4rem);
  border-radius: 28px;
  background:
    radial-gradient(120% 130% at 50% 42%, rgba(251,250,248,.96) 0%, rgba(251,250,248,.86) 52%, rgba(251,250,248,.40) 82%, rgba(251,250,248,0) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lh-hero-content .wp-block-buttons { justify-content: center; }

/* --- Camada de fundo animada --- */
.lh-hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.lh-hero-cols {
  position: absolute; inset: -8% -2%;
  /* 6 colunas espalhadas por TODA a largura — sem push pra direita, sem rotação */
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.9rem, 2vw, 1.8rem);
  transform: scale(1.06);
  transform-origin: 50% 50%;
}
.lh-mq-col { position: relative; overflow: hidden; }
.lh-mq-track {
  display: flex; flex-direction: column; gap: clamp(1rem, 2.2vw, 2rem);
  will-change: transform;
}
.lh-mq-item {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--wp--preset--color--surface-cool) 100%);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 18px;
  padding: clamp(.8rem, 1.6vw, 1.4rem);
  box-shadow: 0 24px 48px -32px rgba(26, 23, 20, .35);
}
.lh-mq-item img {
  display: block; max-width: 86%; max-height: 80%; width: auto; height: auto;
  filter: drop-shadow(0 14px 24px -16px rgba(26, 23, 20, .4));
}

/* Profundidade: trás = blur + menor opacidade + maior; frente = nítida */
.lh-mq-col.is-back  { opacity: .42; filter: blur(3px);  transform: scale(1.06); }
.lh-mq-col.is-mid   { opacity: .62; filter: blur(1.2px); }
.lh-mq-col.is-front { opacity: .9; }

/* Loop: como o track é duplicado (2x), -50% volta ao começo sem emenda */
@keyframes lh-mq-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes lh-mq-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.lh-mq-up   .lh-mq-track { animation: lh-mq-up   linear infinite; }
.lh-mq-down .lh-mq-track { animation: lh-mq-down linear infinite; }
.lh-mq-45 .lh-mq-track { animation-duration: 45s; }
.lh-mq-50 .lh-mq-track { animation-duration: 50s; }
.lh-mq-55 .lh-mq-track { animation-duration: 55s; }
.lh-mq-60 .lh-mq-track { animation-duration: 60s; }
.lh-mq-65 .lh-mq-track { animation-duration: 65s; }
.lh-mq-75 .lh-mq-track { animation-duration: 75s; }

/* Glow radial central: clareia o centro pro painel do texto assentar sem
   bordas duras, e suaviza as bordas (topo/base) do motion espalhado. */
.lh-hero-glow {
  position: absolute; z-index: 1; inset: 0;
  background:
    radial-gradient(46% 60% at 50% 50%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, var(--wp--preset--color--base) 0%, transparent 16%, transparent 84%, var(--wp--preset--color--base) 100%);
}

@media (max-width: 1100px) {
  .lh-hero-cols { grid-template-columns: repeat(5, 1fr); }
  .lh-col-hide-md { display: none; }
}
@media (max-width: 860px) {
  .lh-hero-cols { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .lh-hero { min-height: 0; padding-block: clamp(3rem, 9vw, 4.5rem) clamp(2.5rem, 8vw, 4rem); }
  .lh-hero-cols { grid-template-columns: repeat(3, 1fr); transform: scale(1.04); inset: -6% -4%; gap: 1rem; }
  .lh-col-hide-sm { display: none; }
  .lh-mq-col.is-mid { opacity: .5; }
  .lh-mq-col.is-front { opacity: .72; }
  /* painel mais forte no mobile pra headline nunca competir com o motion */
  .lh-hero-content {
    padding: 1.8rem 1.4rem;
    background:
      radial-gradient(150% 130% at 50% 46%, rgba(251,250,248,.98) 0%, rgba(251,250,248,.94) 56%, rgba(251,250,248,.70) 82%, rgba(251,250,248,.40) 100%);
  }
  .lh-hero-glow { background: radial-gradient(80% 60% at 50% 46%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 78%); }
}
@media (max-width: 520px) {
  .lh-hero-cols { grid-template-columns: repeat(2, 1fr); }
}

/* Acessibilidade: sem movimento -> composição estática (também espalhada) */
@media (prefers-reduced-motion: reduce) {
  .lh-mq-up .lh-mq-track, .lh-mq-down .lh-mq-track { animation: none; }
  .lh-mq-down .lh-mq-track { transform: translateY(-22%); }
  .lh-mq-up   .lh-mq-track { transform: translateY(-8%); }
  .lh-mq-track { will-change: auto; }
}

/* ---------- US presence strip ---------- */
.lh-strip {
  background: var(--wp--preset--color--ink-section); color: #fff;
}
.lh-strip p { margin: 0; font-size: var(--wp--preset--font-size--small); text-align: center; }
.lh-strip strong { color: var(--wp--preset--color--brand); }

/* ---------- Pillars ---------- */
.lh-pillar { border-top: 2px solid var(--wp--preset--color--ink); padding-top: 1.1rem; }
.lh-pillar .lh-pillar-num { font-size: .85rem; font-weight: 600; letter-spacing: .1em; color: var(--wp--preset--color--accent-deep); }
.lh-pillar h3 { margin: .5rem 0 .4rem; font-size: 1.4rem; }
.lh-pillar p { color: var(--wp--preset--color--ink-soft); font-size: 1rem; margin: 0; }

/* ---------- Science / datasheet card ---------- */
.lh-science { background: var(--wp--preset--color--surface-cool); }
.lh-datasheet {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--accent);
  border-radius: var(--lh-radius-card);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.lh-datasheet dl { margin: 0; display: grid; gap: 0; }
.lh-datasheet .lh-row {
  display: grid; grid-template-columns: minmax(140px, 30%) 1fr; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.lh-datasheet .lh-row:last-child { border-bottom: 0; }
/* On phones the two-column datasheet (label | value) cramps the value into ~120px.
   Stack it like the other lists (.lh-regions/.lh-timeline/.lh-stats do). */
@media (max-width: 600px) {
  .lh-datasheet .lh-row { grid-template-columns: 1fr; gap: .2rem; }
}
.lh-datasheet dt { font-weight: 600; color: var(--wp--preset--color--ink); margin: 0; }
.lh-datasheet dd { margin: 0; color: var(--wp--preset--color--ink-soft); font-variant-numeric: tabular-nums; }
.lh-datasheet code, .lh-patent {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; color: var(--wp--preset--color--ink);
}

/* ---------- Ticks list ---------- */
.lh-ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.lh-ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .7rem; color: var(--wp--preset--color--ink-soft); }
.lh-ticks li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .7rem; height: .7rem; border: 2px solid var(--wp--preset--color--accent); border-radius: 50%;
}

/* ---------- Product cards ---------- */
.lh-product-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--lh-radius-card);
  padding: 1.4rem 1.4rem 1.6rem;
  transition: transform .15s ease, box-shadow .2s ease;
  /* sem height:100% — em grid isso fazia o card transbordar a track e sobrepor a
     linha de baixo / o botão. align-items:stretch (no grid) já iguala as alturas;
     min-height:0 evita estouro do conteúdo. */
  display: flex; flex-direction: column; min-height: 0;
}
.lh-product-card:hover { transform: translateY(-2px); box-shadow: var(--lh-shadow-card); }
.lh-product-media {
  /* match the normalized 4:5 product canvas exactly (was 3/4, which was taller
     than the image and left a vertical gap / over-stretched the card). */
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  /* §7: unified warm off-white (#FBFAF8) for EVERY card media — no blue/cool
     backgrounds in the grid, so the line reads as one premium catalogue. */
  background: var(--wp--preset--color--base); border-radius: 10px; margin-bottom: 1rem;
  padding: 1rem;
}
.lh-product-media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 26px -16px rgba(26,23,20,.28)); }
/* Hero do produto/device: container com aspect-ratio FIXO (evita CLS). A imagem
   é centralizada e escalada por max-height, então mantém a própria proporção sem
   distorcer, qualquer que seja o formato do arquivo. */
.lh-product-media.is-hero { aspect-ratio: 4 / 5; }
/* No contact-shadow on the large SKU hero image — on a boxy product the drop-shadow
   hugs the silhouette and reads as an outline (client: "o contorno me incomoda"). */
.lh-product-media.is-hero img { filter: none; }
.lh-product-card h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.lh-product-tag { color: var(--wp--preset--color--muted); font-size: .9rem; margin: 0 0 1rem; }
.lh-product-link { margin-top: auto; font-weight: 600; color: var(--wp--preset--color--link); text-decoration: none; }
.lh-product-link:hover { text-decoration: underline; }

/* Brush cards (cleansing/peeling) — branded "image coming" placeholder + honest
   availability state. No invented datasheet/claim (awaiting asset+spec from Leo). */
.lh-brush-ph {
  width: 100%; height: 100%; display: grid; place-items: center; gap: .6rem;
  border: 1px dashed var(--wp--preset--color--line); border-radius: 10px;
  background: var(--wp--preset--color--surface);
}
.lh-brush-ph img { width: 60%; max-width: 160px; height: auto; opacity: .5; filter: none; }
.lh-brush-ph-note { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.lh-product-avail { margin-top: auto; font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--muted); }

.lh-product-card.is-soon { opacity: .96; }
/* §7: even the "soon"/Triple C card keeps the unified base background in the grid;
   blue lives only in the badge/filete, never as the media fill. */
.lh-product-card.is-soon .lh-product-media { background: var(--wp--preset--color--base); }
.lh-badge-soon {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--science-blue); background: color-mix(in srgb, var(--wp--preset--color--science-blue) 12%, #fff);
  border-radius: 999px; padding: .25rem .7rem; margin: 0 0 .6rem;
}

/* ---------- Stat band (global presence) ---------- */
.lh-statband { background: var(--wp--preset--color--ink-section); color: #fff; }
.lh-statband h2 { color: #fff; }
.lh-statband p { color: #D6D0C4; }
.lh-stats { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.lh-stats > li { border-top: 1px solid rgba(255,255,255,.18); padding-top: .9rem; }
.lh-stat-num { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--wp--preset--color--brand); display: block; }
.lh-stat-label { color: #C9C3B6; font-size: .95rem; margin-top: .5rem; display: block; }
.lh-awards { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 1.8rem 0 0; }
.lh-awards li { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .45rem 1rem; font-size: .9rem; color: #EDE8DD; }
@media (max-width: 720px) { .lh-stats { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.lh-faq details {
  border-bottom: 1px solid var(--wp--preset--color--line); padding: .4rem 0;
}
.lh-faq summary {
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative;
  font-family: var(--wp--preset--font-family--display); font-size: 1.2rem; font-weight: 700; color: var(--wp--preset--color--ink);
}
.lh-faq summary::-webkit-details-marker { display: none; }
.lh-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--wp--preset--color--accent-deep); line-height: 1;
}
.lh-faq details[open] summary::after { content: "–"; }
.lh-faq .lh-faq-a { color: var(--wp--preset--color--ink-soft); padding: 0 0 1.1rem; margin: 0; max-width: 70ch; }

/* ---------- Authority band + CTA ---------- */
.lh-authority { background: var(--wp--preset--color--ink-section); color: #fff; }
.lh-authority h2 { color: #fff; max-width: 22ch; }
.lh-authority p { color: #D6D0C4; max-width: 52ch; }

/* ---------- Contact form ---------- */
.lh-form {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--lh-radius-card);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.lh-field { margin-bottom: 1.1rem; }
.lh-field label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .4rem; }
.lh-field label .req { color: var(--wp--preset--color--accent-deep); }
.lh-field input, .lh-field select {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1rem;
  border: 1.5px solid var(--wp--preset--color--line); border-radius: var(--lh-radius-card);
  background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink);
}
.lh-field input:focus, .lh-field select:focus {
  outline: none; border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px var(--wp--preset--color--accent-tint);
}
.lh-form button[type="submit"] { width: 100%; margin-top: .4rem; }
.lh-form-note { font-size: .85rem; color: var(--wp--preset--color--muted); margin: 1rem 0 0; }
.lh-form-status { margin: 1rem 0 0; font-size: .95rem; }
.lh-form-status.is-ok { color: #1f7a3d; }
.lh-form-status.is-err { color: var(--wp--preset--color--accent-deep); }

/* ---------- Footer ---------- */
.lh-footer {
  background: var(--wp--preset--color--ink-section); color: #C9C3B6;
  /* respiro ideal no topo do rodapé (e base proporcional) — fonte única p/ tema e preview */
  padding-block: clamp(4rem, 6vw, 6rem) clamp(2.5rem, 4vw, 3.5rem);
}
.lh-footer a { color: #EDE8DD; }
.lh-footer a:hover { color: #fff; }
.lh-footer .lh-footer-logo img { height: 24px; width: auto; }
.lh-footer .lh-footer-small { font-size: .85rem; color: #9D978B; }

/* ---------- Consent banner ---------- */
.lh-consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--lh-radius-card);
  box-shadow: var(--lh-shadow-card);
  max-width: 720px; margin-inline: auto;
}
.lh-consent-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.lh-consent-text { margin: 0; flex: 1 1 320px; font-size: .92rem; color: var(--wp--preset--color--ink-soft); }
.lh-consent-actions { display: flex; gap: .6rem; }
/* sem bold (consistente com os demais botões laranja); ~16px medium */
.lh-consent-btn { font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; border-radius: 999px; padding: .55rem 1.2rem; cursor: pointer; border: 1.5px solid var(--wp--preset--color--line); }
.lh-consent-decline { background: transparent; color: var(--wp--preset--color--ink); }
/* Accept = laranja #EF4735 + branco. Sem bold => NÃO qualifica mais AA-large (decisão estética do cliente, ver header CTA). */
.lh-consent-accept { background: var(--wp--preset--color--brand); color: #fff; border-color: var(--wp--preset--color--brand); }

/* ---------- Section rhythm helpers ---------- */
.lh-section { padding-block: var(--wp--preset--spacing--70); }
.lh-prose { max-width: 70ch; }
.lh-prose p { color: var(--wp--preset--color--ink-soft); }

/* ---------- Product grid (auto-fit, wraps for the full line) ----------
   minmax(220px,1fr) + auto-fill reflowa sozinho: 4 col no desktop largo,
   3/2 no tablet e 1 col no celular estreito — sem media query manual. Usado
   também no teaser de produtos da home (home-products), que antes era um grid
   inline FIXO de 4 colunas e não empilhava no mobile. */
.lh-product-grid {
  display: grid; gap: 1.5rem;
  /* cap the column width (was 1fr → cards ballooned on wide/zoomed screens, which
     made the 4:5 media very tall). Centered so partial rows stay balanced. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 260px));
  justify-content: center;
  align-items: stretch;            /* alturas iguais por linha */
  grid-auto-rows: max-content;     /* cada linha = altura do conteúdo, sem sobrepor a próxima */
}

/* ---------- Devices grid (2 cards: JET + 10 LDM) ----------
   Sub-hub /devices e o teaser de devices em /products. Antes era grid inline
   FIXO repeat(2,1fr) sem breakpoint — os dois cards ficavam espremidos lado a
   lado no celular. Agora: 1 coluna no mobile (<=600px), 2 colunas acima disso. */
.lh-devices-grid {
  display: grid; gap: 1.5rem;
  /* Only the LHALA JET remains in the US line: center a single card at normal
     card width instead of stretching it across a 2-col track. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
}
@media (max-width: 600px) {
  .lh-devices-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Featured single device on /devices — a balanced side-by-side (image + info)
   so the device reads in proportion, not stretched in a lone tall card. */
.lh-device-feature {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--lh-radius-card);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 960px; margin-inline: auto;
}
.lh-device-feature-media {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--wp--preset--color--base); border-radius: 12px;
  padding: clamp(1rem, 3vw, 2rem);
}
.lh-device-feature-media img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; filter: drop-shadow(0 18px 36px -22px rgba(26,23,20,.28));
}
.lh-device-feature-body h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .4rem; }
.lh-device-feature-body .lh-product-tag { margin: 0 0 1rem; }
@media (max-width: 760px) {
  .lh-device-feature { grid-template-columns: 1fr; }
  .lh-device-feature-media { aspect-ratio: 4 / 3; max-height: 360px; }
}

/* ---------- Triple C / science-blue accent (holographic line) ---------- */
.lh-eyebrow-blue { color: var(--wp--preset--color--science-blue); }
.lh-badge-blue {
  color: var(--wp--preset--color--science-blue);
  background: color-mix(in srgb, var(--wp--preset--color--science-blue) 12%, #fff);
}
/* Triple C dedicated page: a faint blue respiration is tolerable here (its
   packaging is holographic), but stays subtle. The GRID stays unified base. */
.lh-triplec .lh-product-media { background: color-mix(in srgb, var(--wp--preset--color--science-blue) 6%, var(--wp--preset--color--base)); }

/* ---------- Timeline (global presence) ---------- */
.lh-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.lh-timeline > li {
  display: grid; grid-template-columns: 120px 1fr; gap: 1.4rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
  align-items: baseline;
}
.lh-timeline > li:last-child { border-bottom: 0; }
.lh-tl-year {
  font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; font-weight: 800;
  color: var(--wp--preset--color--accent-deep); letter-spacing: -.02em;
}
.lh-tl-text { color: var(--wp--preset--color--ink-soft); }
@media (max-width: 600px) { .lh-timeline > li { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- Regions (reach by region) ---------- */
.lh-regions { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0; }
.lh-regions > li {
  display: grid; grid-template-columns: minmax(160px, 30%) 1fr; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.lh-regions > li:last-child { border-bottom: 0; }
.lh-region-name { font-weight: 600; color: var(--wp--preset--color--ink); }
.lh-region-note { color: var(--wp--preset--color--ink-soft); }
@media (max-width: 600px) { .lh-regions > li { grid-template-columns: 1fr; gap: .2rem; } }

/* Awards on light background (global presence page) */
.lh-awards-light li { border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--ink-soft); }

/* Aviso de rascunho (página /professionals em noindex até consentimento) */
.lh-draft-notice {
  max-width: var(--wp--style--global--content-size, 760px);
  margin: 1.2rem auto 0; padding: .7rem 1rem;
  border: 1px solid var(--wp--preset--color--line);
  border-left: 3px solid var(--wp--preset--color--science-blue, #10337F);
  border-radius: 8px; background: var(--wp--preset--color--surface-cool);
  color: var(--wp--preset--color--ink-soft); font-size: .9rem; line-height: 1.5;
}

/* ---------- Professionals (people grid) ---------- */
.lh-people { display: grid; gap: 1.6rem; grid-template-columns: repeat(3, 1fr); }
.lh-people-compact { grid-template-columns: repeat(3, 1fr); }
.lh-person {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--lh-radius-card);
  padding: 1.4rem;
}
.lh-person-photo { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; margin-bottom: 1.1rem; background: var(--wp--preset--color--surface-cool); }
.lh-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-person-name { font-size: 1.3rem; margin: 0 0 .25rem; }
.lh-person-role { color: var(--wp--preset--color--accent-deep); font-weight: 600; font-size: .92rem; margin: 0 0 .8rem; }
.lh-person-bio { color: var(--wp--preset--color--ink-soft); font-size: .98rem; margin: 0 0 .8rem; }
.lh-person-meta { font-size: .88rem; margin: 0; }
.lh-person.is-compact { text-align: center; }
.lh-person.is-compact .lh-person-photo { max-width: 200px; margin-inline: auto; margin-bottom: .9rem; }
.lh-person.is-compact .lh-person-name { font-size: 1.15rem; margin: 0; }
@media (max-width: 820px) { .lh-people, .lh-people-compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lh-people, .lh-people-compact { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .lh-product-card { transition: none; }
}

/* =========================================================================
   v2 ENCANTAMENTO — editorial banners, split hero with glass skin, motion,
   technology icon cards, Nobel callout, animated world map.
   (encantamento-spec.md §1–4). Tokens from theme.json; one accent dose.
   ========================================================================= */

:root {
  --lh-ease: cubic-bezier(.16, 1, .3, 1);
  --lh-scrim-ink: 22, 20, 15; /* #16140F as rgb for scrims */
}

/* ---------- Scroll-reveal (§3.2) ----------
   Default (no JS / before reveal under JS): hidden+offset. The .js-reveal class
   is added to <html> by interactions.js BEFORE paint so only JS-capable
   browsers hide content; without JS everything stays visible (no FOUC). */
.lh-reveal { opacity: 1; transform: none; }
html.js-reveal .lh-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--lh-ease), transform .6s var(--lh-ease);
  will-change: opacity, transform;
}
html.js-reveal .lh-reveal.is-visible { opacity: 1; transform: none; }
/* stagger between sibling revealed items */
html.js-reveal .lh-reveal[data-reveal-i="1"] { transition-delay: .08s; }
html.js-reveal .lh-reveal[data-reveal-i="2"] { transition-delay: .16s; }
html.js-reveal .lh-reveal[data-reveal-i="3"] { transition-delay: .24s; }
html.js-reveal .lh-reveal[data-reveal-i="4"] { transition-delay: .32s; }
html.js-reveal .lh-reveal[data-reveal-i="5"] { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .lh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Editorial banner (§2) ----------
   One component, three treatments. alignfull, fixed proportion = brand cohesion. */
.lh-banner {
  position: relative; isolation: isolate; overflow: clip;
  min-height: clamp(380px, 46vw, 560px);
  display: flex; align-items: center;
}
.lh-banner-media { position: absolute; inset: 0; z-index: 0; }
.lh-banner-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 70% 30%; display: block;
}
.lh-banner-scrim { position: absolute; inset: 0; z-index: 1; }
.lh-banner .pv-wrap { position: relative; z-index: 2; width: 100%; }
.lh-banner-eyebrow {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem;
}
.lh-banner-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0; max-width: 16ch;
}
.lh-banner-actions { margin-top: 1.6rem; }

/* Variant: scrim from the left (model on the right) — white text, left aligned */
.lh-banner.is-scrim-left .lh-banner-scrim {
  background: linear-gradient(90deg, rgba(var(--lh-scrim-ink),.72) 0%, rgba(var(--lh-scrim-ink),.35) 42%, transparent 70%);
}
.lh-banner.is-scrim-left .lh-banner-content { max-width: 30rem; color: #fff; }
.lh-banner.is-scrim-left .lh-banner-eyebrow { color: #fff; opacity: .92; }
.lh-banner.is-scrim-left .lh-banner-title { color: #fff; }

/* Variant: scrim from the bottom — white text, bottom aligned (CTA fechos) */
.lh-banner.is-scrim-bottom { align-items: flex-end; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.lh-banner.is-scrim-bottom .lh-banner-scrim {
  background: linear-gradient(0deg, rgba(var(--lh-scrim-ink),.78) 0%, transparent 55%);
}
.lh-banner.is-scrim-bottom .lh-banner-content { max-width: 34rem; color: #fff; }
.lh-banner.is-scrim-bottom .lh-banner-eyebrow { color: #fff; opacity: .9; }
.lh-banner.is-scrim-bottom .lh-banner-title { color: #fff; }

/* Variant: clean image + local glass panel (ink text on light panel) */
.lh-banner.is-panel .lh-banner-content {
  max-width: 26rem; padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: 28px;
  background: rgba(251,250,248,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--lh-shadow-card);
}
.lh-banner.is-panel .lh-banner-eyebrow { color: var(--wp--preset--color--brand); }
.lh-banner.is-panel .lh-banner-title { color: var(--wp--preset--color--ink); }
.lh-banner.is-panel .lh-banner-content p { color: var(--wp--preset--color--ink-soft); }

/* Banner button: solid white-ish over scrim, or primary on panel */
.lh-banner .wp-block-button__link {
  display: inline-block; border-radius: 999px; padding: .7rem 1.4rem;
  font-weight: 600; text-decoration: none; font-size: 1rem; line-height: 1.2;
  background: #fff; color: var(--wp--preset--color--ink);
  transition: background .15s ease, color .15s ease;
}
.lh-banner .wp-block-button__link:hover { background: var(--wp--preset--color--brand); color: #fff; }
.lh-banner.is-panel .wp-block-button__link { background: var(--wp--preset--color--accent-deep); color: #fff; }
.lh-banner.is-panel .wp-block-button__link:hover { background: var(--wp--preset--color--link); }
@media (max-width: 600px) { .lh-banner { min-height: 420px; } }

/* ---------- Home hero v2: split text / glass skin (§1) ----------
   Reuses the existing .lh-hero motion layer, but reduces it to a subtle side
   detail and brings the glass-skin photo into a right-hand panel. */
.lh-hero.is-split { display: block; }
.lh-hero.is-split .lh-hero-inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1180px; margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}
.lh-hero.is-split .lh-hero-content {
  text-align: left; margin: 0; max-width: 36rem;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0;
}
.lh-hero.is-split .lh-hero-content .wp-block-buttons { justify-content: flex-start; }
.lh-hero.is-split .lh-hero-lede { margin-inline: 0; }
.lh-hero-photo {
  position: relative; border-radius: 24px; overflow: hidden;
  box-shadow: var(--lh-shadow-product);
  aspect-ratio: 4 / 5; background: var(--wp--preset--color--surface-cool);
}
.lh-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%; display: block; }
/* On split, the product marquee fades back to a faint texture behind everything */
.lh-hero.is-split .lh-hero-bg { opacity: .32; }
.lh-hero.is-split .lh-hero-glow {
  background:
    radial-gradient(60% 70% at 28% 50%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, var(--wp--preset--color--base) 0%, transparent 16%, transparent 84%, var(--wp--preset--color--base) 100%);
}
@media (max-width: 860px) {
  .lh-hero.is-split .lh-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .lh-hero-photo { aspect-ratio: 16 / 11; max-height: 360px; }
  .lh-hero.is-split .lh-hero-content { max-width: none; }
}

/* Home hero — text only (client removed the photo): centered content over a
   faint product texture. Marquee kept subtle so it doesn't read as a shop wall. */
.lh-hero.is-textonly .lh-hero-inner { position: relative; z-index: 3; width: 100%; }
.lh-hero.is-textonly .lh-hero-bg { opacity: .32; }

/* Home hero v3 — full-bleed muted looping glass-skin video background. The poster
   (glass-skin-profile.jpg) shows until the video loads, on prefers-reduced-motion,
   and while the hero-loop.* files aren't supplied yet. Text sits left over a left
   scrim for AA contrast over the (light) footage. */
.lh-hero.is-video { isolation: isolate; }
.lh-hero.is-video .lh-hero-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-size: cover; background-position: 60% 28%;
}
.lh-hero.is-video .lh-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 28%;
  filter: saturate(.96) contrast(1.04) brightness(.97); /* subtle cinematic grade, like the global hero */
}
.lh-hero.is-video .lh-hero-scrim {
  position: absolute; inset: 0;
  /* Even cinematic dark veil across the whole video — replicates the lhala.com
     hero treatment (uniform darkening for a moody, premium look + AA legibility),
     a touch richer at the top and bottom. */
  background: linear-gradient(180deg, rgba(15,13,10,.56) 0%, rgba(15,13,10,.46) 48%, rgba(15,13,10,.60) 100%);
}
.lh-hero.is-video .lh-hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1180px; margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}
.lh-hero.is-video .lh-hero-content {
  text-align: left; margin: 0; max-width: 38rem;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0;
}
.lh-hero.is-video .lh-hero-content .wp-block-buttons { justify-content: flex-start; }
.lh-hero.is-video .lh-eyebrow { color: #fff; opacity: .92; }
.lh-hero.is-video h1 { color: #fff; }
.lh-hero.is-video .lh-hero-lede { color: rgba(255,255,255,.92); margin-inline: 0; }
.lh-hero.is-video .lh-hero-note { color: rgba(255,255,255,.90); }
.lh-hero.is-video .is-style-lhala-ghost .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
.lh-hero.is-video .is-style-lhala-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) {
  .lh-hero.is-video .lh-hero-video { display: none; } /* poster (bg) stays */
}
@media (max-width: 720px) {
  /* the legacy .lh-hero mobile rule zeroes min-height; give the video hero real
     presence on phones instead of collapsing to content height. */
  .lh-hero.is-video { min-height: 70vh; }
}
@media (max-width: 600px) {
  .lh-hero.is-video .lh-hero-scrim { background: linear-gradient(180deg, rgba(15,13,10,.54) 0%, rgba(15,13,10,.62) 100%); }
}

/* ---------- Page title marquee (above each sub-page hero) ----------
   The page name slides sideways, infinitely, alternating SOLID + OUTLINED with a
   coral dot separator. Decorative (aria-hidden) — the real H1 is in the hero
   below. Seamless via a duplicated half + translateX(-50%). Honors reduced-motion. */
.lh-titlebar {
  width: 100%; overflow: hidden;
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 60%, transparent);
  padding-block: clamp(.55rem, 1.1vw, .8rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.lh-titlebar-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  animation: lh-titlebar-slide 80s linear infinite; will-change: transform;
}
/* Delicate, airy ticker (Lhala's audience): small, light weight, wide tracking,
   soft muted tone — no heavy outline. Slow drift. */
.lh-titlebar-track > span {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; text-transform: uppercase; letter-spacing: .26em; line-height: 1;
  font-size: clamp(.74rem, 1.3vw, .95rem); padding-inline: 1.1em;
}
.lh-titlebar .lh-tb-solid   { color: color-mix(in srgb, var(--wp--preset--color--muted) 92%, transparent); }
.lh-titlebar .lh-tb-outline { color: color-mix(in srgb, var(--wp--preset--color--muted) 48%, transparent); }
.lh-titlebar .lh-tb-dot { color: color-mix(in srgb, var(--wp--preset--color--brand) 60%, transparent); font-size: .42em; padding-inline: .25em; vertical-align: middle; }
@keyframes lh-titlebar-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lh-titlebar-track { animation: none; transform: translateX(0); } }

/* ---------- Animated counters (§3.3) ---------- */
.lh-stat-num[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---------- Technology: actives as icon cards (§4.1) ---------- */
.lh-actives-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (max-width: 720px) { .lh-actives-grid { grid-template-columns: 1fr; } }
.lh-active-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--accent);
  border-radius: var(--lh-radius-card);
  padding: clamp(1.4rem, 3vw, 1.8rem);
  display: flex; flex-direction: column;
}
.lh-active-card .lh-ico { display: block; margin-bottom: 1rem; }
.lh-active-card h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.lh-active-card p { color: var(--wp--preset--color--ink-soft); margin: 0 0 .6rem; font-size: 1rem; }
.lh-active-card .lh-patent { display: inline-block; margin-top: auto; }
.lh-ico { width: 44px; height: 44px; }

/* ---------- Nobel callout (§4.2) ---------- */
.lh-nobel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--accent);
  border-radius: var(--lh-radius-card);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem; align-items: start;
  box-shadow: var(--lh-shadow-card);
}
.lh-nobel .lh-ico { width: 56px; height: 56px; }
.lh-nobel-eyebrow { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--brand); margin: 0 0 .5rem; }
.lh-nobel h2, .lh-nobel h3 { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.lh-nobel p { color: var(--wp--preset--color--ink-soft); margin: 0; max-width: 62ch; }
@media (max-width: 560px) { .lh-nobel { grid-template-columns: 1fr; } }
/* Compact echo on the Home pillar 2 */
.lh-nobel-chip {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--wp--preset--color--accent-deep);
  background: var(--wp--preset--color--accent-tint);
  border-radius: 999px; padding: .35rem .8rem;
}
.lh-nobel-chip .lh-ico { width: 18px; height: 18px; }

/* ---------- Geographic world map (§3.4) — d3 + topojson, "from Seoul outward"
   Premium dark band; real countries (world-atlas 110m, Equal Earth projection);
   named LHALALA partner markets light up in brand coral with a glow; pulsing
   markers cascade in; great-circle arcs draw from Seoul. Markets verified from
   lhala.com/PARTNERS. The 60+ total lives in the page text/stats. ---------- */
.lh-worldmap {
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(239,71,53,.10) 0%, transparent 55%),
    var(--wp--preset--color--ink-section);
  color: #fff;
}
.lh-worldmap h2 { color: #fff; }
.lh-worldmap p { color: #D6D0C4; }

/* stage: the d3 SVG is appended here by worldmap.js */
.lh-wm-stage { margin: 2rem 0 0; width: 100%; }
.lh-wm-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* graticule — barely-there meridians/parallels */
.lh-wm-grat-line {
  fill: none; stroke: rgba(255,255,255,.05); stroke-width: .5px; pointer-events: none;
}

/* land: discreet base; markets fade up to coral when lit */
.lh-wm-country {
  fill: rgba(255,255,255,.07);
  stroke: rgba(255,255,255,.14); stroke-width: .4px;
  stroke-linejoin: round;
  transition: fill .9s var(--lh-ease);
}
.lh-wm-country.is-market { fill: rgba(239,71,53,.16); }
.lh-wm-country.is-market.is-lit { fill: var(--wp--preset--color--brand, #EF4735); }

/* great-circle arcs from Seoul */
.lh-wm-arc {
  fill: none;
  stroke-width: 1.6px;
  stroke-linecap: round;
  opacity: 0;
}

/* markers: solid core + pulsing halo (CSS pulse when .is-on) */
.lh-wm-pin { pointer-events: none; }
.lh-wm-pin .lh-wm-dot {
  /* White core + coral ring: stays visible BOTH on the dark land and on top of a
     lit (coral) country — a coral dot on a coral country was invisible. */
  fill: #fff;
  stroke: var(--wp--preset--color--brand, #EF4735); stroke-width: 1.4px;
  opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--lh-ease), transform .5s var(--lh-ease);
}
.lh-wm-pin .lh-wm-halo {
  fill: var(--wp--preset--color--brand, #EF4735);
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.lh-wm-pin.is-on .lh-wm-dot { opacity: 1; transform: scale(1); }
.lh-wm-pin.is-on .lh-wm-halo { animation: lh-wm-pulse 2.4s var(--lh-ease) infinite; }
/* origin (Seoul): a distinct, larger ring + faster, brighter pulse */
.lh-wm-pin.is-origin .lh-wm-dot { fill: #fff; stroke: var(--wp--preset--color--brand, #EF4735); stroke-width: 2px; }
.lh-wm-pin.is-origin.is-on .lh-wm-halo { animation-duration: 2s; }
@keyframes lh-wm-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3);   opacity: 0; }
  100% { transform: scale(3);   opacity: 0; }
}

.lh-worldmap-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.lh-worldmap-legend li { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: #C9C3B6; }
.lh-worldmap-legend .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lh-worldmap-legend .dot.is-on { background: var(--wp--preset--color--brand); box-shadow: 0 0 0 3px rgba(239,71,53,.25); }
.lh-worldmap-legend .dot.is-off { background: rgba(255,255,255,.18); }

@media (prefers-reduced-motion: reduce) {
  /* final lit state, no motion: markets coral, dots shown, no pulse */
  .lh-wm-country.is-market { fill: var(--wp--preset--color--brand, #EF4735); }
  .lh-wm-pin .lh-wm-dot { opacity: 1; transform: none; }
  .lh-wm-pin .lh-wm-halo { display: none; }
  .lh-wm-arc { opacity: 1; }
}

/* ============================================================
   FULL-BLEED das seções de largura total (hero, banners, faixas, mapa)
   ------------------------------------------------------------
   O breakout do core (root-padding-aware alignments) aplica uma margem
   FIXA de -1.5rem ao .alignfull, partindo do princípio de que a <main>
   ocupa a viewport inteira. Neste tema a <main> vem limitada à wideSize
   (~1180px), então a margem fixa não estoura — as seções ficam presas no
   centro. A margem calculada abaixo (calc(50% - 50vw)) se adapta à largura
   real da main e leva cada .alignfull até as bordas da tela, sempre.
   overflow-x: clip (NÃO hidden) impede o scroll horizontal do 50vw sem
   quebrar o header sticky (o eixo vertical continua "visible").
   Só afeta o WordPress (escopo .wp-site-blocks); o preview estático não
   tem essa classe e segue com seu próprio full-bleed. ============ */
/* #lh-main ocupa a largura toda e CLIPA o transbordo horizontal do full-bleed
   (o calc 50vw inclui a barra de rolagem, ~15px). Fica no #lh-main — NÃO em
   html/body — porque a main é IRMÃ do header: clipar aqui não quebra o
   position:sticky do header, e as faixas full-bleed continuam até as bordas. */
#lh-main { max-width: none; width: 100%; overflow-x: clip; }
.wp-site-blocks .alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
}
/* CAUSA REAL do "preso no centro": as camadas de cobertura (mídia/vídeo/scrim/
   fundo/glow do hero e dos banners) são FILHAS DIRETAS da seção, e o layout
   "constrained" do core limita todo filho não-alignfull a wideSize (1180px) com
   margin:auto — então o bloco escuro ficava 1180 centralizado mesmo com a seção
   full-bleed. Estas camadas são position:absolute; inset:0 e devem preencher a
   seção inteira: removemos o teto e as margens automáticas que o core injeta. */
.wp-site-blocks .lh-hero-media,
.wp-site-blocks .lh-hero-bg,
.wp-site-blocks .lh-hero-scrim,
.wp-site-blocks .lh-hero-glow,
.wp-site-blocks .lh-banner-media,
.wp-site-blocks .lh-banner-scrim {
  max-width: none !important;
  /* margin:0 nos 4 lados — o scrim é o 2º filho e levava o blockGap (24px) como
     margin-top, ficando desalinhado da foto ("foto em cima, filtro embaixo"). */
  margin: 0 !important;
}

/* HEADER STICKY: a .lh-header (sticky) é um <header> ANINHADO dentro do
   <header class="wp-block-template-part"> (static, ~66px) — sticky não tem onde
   grudar e rola junto. A correção é deixar o PRÓPRIO template-part sticky, pois
   o pai dele (.wp-site-blocks) é alto (a página inteira). */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: 0; z-index: 60;
}

/* SEÇÕES RENTE (sem gap vertical): o blockGap (24px) do core entrava como
   margin-block entre header→hero e entre as faixas full-bleed, "descolando-as".
   Cada seção já tem padding interno próprio, então zeramos o gap entre elas e
   entre header/main/footer — as bandas editoriais encostam umas nas outras. */
.wp-site-blocks > * { margin-block: 0 !important; }
#lh-main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* CTA "A new standard, arriving" (.lh-authority): faixa centralizada, mas o
   layout constrained deixava o botão à esquerda enquanto o texto centralizava.
   Centralizar tudo (texto + botão). */
.lh-authority { text-align: center; }
.lh-authority .lh-eyebrow,
.lh-authority h2,
.lh-authority p { margin-inline: auto; }
.lh-authority .wp-block-buttons { justify-content: center; }

/* A <picture> (filha de .lh-banner-media, que é position:absolute; inset:0)
   precisa preencher a área inteira — senão a foto fica no topo, na altura
   natural, e o scrim cobre tudo: "foto em cima, filtro embaixo". */
.lh-banner-media picture { display: block; width: 100%; height: 100%; }

/* Banner content: alinhar TEXTO e BOTÃO pela mesma borda esquerda. O layout
   "constrained" do core centraliza cada filho (margin auto), então o título
   ficava centrado e o botão noutra margem → desalinhados. Forçar tudo à esquerda. */
.lh-banner-content { text-align: left; }
.lh-banner-content > :where(p, h2, h3, ul, .wp-block-buttons) {
  margin-left: 0 !important; margin-right: auto !important;
}
.lh-banner-content .wp-block-buttons,
.lh-banner-actions { justify-content: flex-start !important; }
