/* HS Brand Marketing — Mobile fixes
   Aplica-se apenas em viewports ≤ 720px.
   Usa !important seletivo pra sobrescrever inline styles dos títulos.
   NÃO altera comportamento desktop. */

@media (max-width: 720px) {

  /* ----- Tipografia hero / titles ----- */
  /* Inline styles têm font-size 85-95px; trazemos pra escala mobile sem mudar desktop. */
  .hero-title.display,
  .sub-hero .display,
  .sec-title.display,
  .cta-title.display,
  .manifesto-title.display,
  .cenario-title.display,
  .balance-title.display,
  .founder-title.display {
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: 1.05 !important;
  }

  /* Manifesto quote (atualmente 50px inline) */
  .manifesto-quote p {
    font-size: clamp(28px, 7.6vw, 38px) !important;
    line-height: 1.2 !important;
  }
  .manifesto-quote .quote-mark {
    font-size: 64px !important;
  }
  /* Autor da quote menor (era 15px inline) — restaurar hierarquia */
  .manifesto-quote .quote-author,
  .manifesto-quote .quote-author[style*="font-size"] {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    margin-top: 12px;
  }
  .manifesto-quote .quote-author span {
    font-size: 11px !important;
    opacity: 0.7;
  }

  /* Lede / sub-hero parágrafos longos */
  .sub-hero-lede,
  .hero-lede {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Eyebrow .idx — mantém escala consistente ao reduzir títulos */
  .sec-head .idx,
  .manifesto-side .idx,
  .cenario-sticky .idx,
  .balance-side .idx,
  .founder-text .idx {
    font-size: 12px !important;
  }

  /* ----- Métricas: força coluna única + números menores ----- */
  .metrics {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .metric .num,
  .metric .num span[data-count] {
    font-size: clamp(56px, 16vw, 80px) !important;
    line-height: 1 !important;
  }
  .metric .lbl {
    font-size: 14px !important;
    line-height: 1.5;
    max-width: none;
  }

  /* ----- Resultados: força coluna única (já tem em 900px, reforçando) ----- */
  .results-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .result-num,
  .result-num span[data-count] {
    font-size: clamp(56px, 14vw, 72px) !important;
  }

  /* ----- CTA Final ----- */
  .cta-title.display {
    font-size: clamp(36px, 9vw, 52px) !important;
    line-height: 1.1 !important;
  }
  .cta-final.cta-final--center {
    padding: 100px 0 140px !important;
  }
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .cta-contacts {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* ----- Header: garante MENU visível ----- */
  .site-header {
    padding: 16px var(--gutter) !important;
  }
  .nav-toggle {
    color: var(--hs-cream);
    font-size: 11px !important;
  }
  .site-header.is-light .nav-toggle {
    color: var(--hs-ink);
  }

  /* ----- Hero scroll indicator: ajuste leve ----- */
  .hero-scroll {
    bottom: 24px !important;
  }

  /* ----- Two-col / manifesto: já empilha em 900px, reforço de gap ----- */
  .two-col,
  .manifesto,
  .cenario-wrap,
  .founder-wrap,
  .balance-wrap {
    gap: 32px !important;
  }

  /* ----- Botões: full width pra mobile, mantém estilo ----- */
  .hero-cta,
  .sub-hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .hero-cta .btn,
  .sub-hero-cta .btn,
  .cta-actions .btn {
    justify-content: center;
    width: 100%;
  }

  /* ----- Phases (método) ----- */
  .phase-title { font-size: 22px !important; }
  .phase-num { font-size: 11px !important; }

  /* ----- Footer: já empilha em 900px (1fr 1fr), refina pra coluna única ----- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-bottom: 40px;
  }
  .footer-mark {
    font-size: 28px !important;
  }
  .site-footer {
    padding: 80px var(--gutter) 32px !important;
  }

  /* ----- Solution cards (home) ----- */
  .sol-card-body h3.display {
    font-size: 32px !important;
  }

  /* ----- Diferenciais grid ----- */
  .diff-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* ----- Marquee: reduz fonte ----- */
  .marquee {
    font-size: clamp(48px, 14vw, 80px) !important;
    padding: 24px 0 !important;
  }

  /* ----- Phases cards (método): padding e tipografia ----- */
  .phase-header {
    padding: 20px 0 !important;
  }

  /* ----- Founder: imagem e texto ----- */
  .founder-tag strong {
    font-size: 18px;
  }
  .timeline {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }

  /* ----- Tipografia inline 85px / 90px / 80px no body — fallback global ----- */
  /* Captura qualquer .display dentro de section que tenha title role */
  section .display[style*="font-size"] {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.08 !important;
  }
}

/* Esconde X de fechar drawer em qualquer viewport por padrão.
   Só vai aparecer dentro do media query mobile quando .nav.is-open. */
.nav-close { display: none !important; }

/* ============================================================
   Drawer mobile (≤ 1000px) — quando MENU é clicado, mostra
   navegação fullscreen overlay. Sem afetar desktop (já que
   .nav só está oculto nesse breakpoint).
   ============================================================ */
@media (max-width: 1000px) {
  .site-header .nav.is-open {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    font-family: var(--ff-display);
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.005em;
    padding: 80px 24px;
    overflow-y: auto;
    /* Sem animação de fade — abre instantâneo pra evitar
       efeito de "duas etapas" quando header está scrolled */
    animation: none;
  }
  .site-header .nav.is-open a {
    color: var(--hs-cream);
    opacity: 0.9;
    padding: 8px 0;
    font-weight: 300;
  }
  .site-header .nav.is-open a::after {
    display: none;
  }
  .site-header .nav.is-open a:hover,
  .site-header .nav.is-open a.is-active {
    color: var(--hs-gold);
    opacity: 1;
  }
  /* Toggle fica acima do drawer pra poder fechar */
  .site-header .nav-toggle {
    position: relative;
    z-index: 96;
  }
  /* Body lock enquanto drawer aberto (classe injetada via JS) */
  body.nav-open {
    overflow: hidden;
  }

  /* Botão X de fechar dentro do drawer (canto superior direito) */
  .site-header .nav .nav-close {
    display: none;
    position: absolute;
    top: 18px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(228, 228, 228, 0.18);
    border-radius: 50%;
    color: var(--hs-cream);
    font-family: var(--ff-body);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: background 220ms var(--ease), border-color 220ms var(--ease);
    z-index: 1000;
  }
  .site-header .nav.is-open .nav-close {
    display: flex !important;
  }
  .site-header .nav .nav-close:hover {
    background: rgba(228, 228, 228, 0.06);
    border-color: var(--hs-gold);
    color: var(--hs-gold);
  }

  @keyframes hsmNavIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header .nav.is-open { animation: none; }
  }
}

/* ============================================================
   Mentoria · hero image: espelhamento horizontal SÓ no mobile.
   Desktop fica na orientação original (sujeito à direita).
   Mobile vira pra redistribuir o peso visual.
   ============================================================ */
@media (max-width: 720px) {
  .hero-mentoria-img {
    transform: scaleX(-1) !important;
  }
}

/* ============================================================
   Hero mobile (≤720px): regras pro layout do hero, especificamente:
   - Texto sempre na METADE INFERIOR (nunca cobre o rosto da foto)
   - Foto mostra o TOPO (rosto visível, sem zoom-in agressivo)
   - Degradê preto forte na parte de baixo dá legibilidade ao texto
     sem precisar aumentar a escala da imagem
   - Hierarquia tipográfica: título mantém, lede menor, botões menores
   Desktop não afetado (regras dentro do @media).
   ============================================================ */
@media (max-width: 720px) {
  /* ----- Imagens: mostrar topo da foto (rosto visível em cima) ----- */
  .hero-media picture img,
  .sub-hero-media picture img {
    object-position: 50% 18% !important;
  }
  /* Empresas — mostra Herbert + lâmpada na parte de cima */
  .sub-hero-media picture > img[src*="hero-empresas"] {
    object-position: 50% 22% !important;
  }

  /* ----- Degradê preto forte na parte de baixo do hero ----- */
  /* Sobrescreve o overlay original — adiciona uma camada quase opaca em baixo */
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.15) 38%,
        rgba(0,0,0,0.55) 58%,
        rgba(0,0,0,0.92) 80%,
        rgba(0,0,0,0.99) 100%
      ) !important;
  }
  .sub-hero-veil {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.20) 38%,
        rgba(0,0,0,0.60) 60%,
        rgba(0,0,0,0.94) 82%,
        rgba(0,0,0,0.99) 100%
      ) !important;
  }

  /* ----- Hero (home): conteúdo TODO empurrado pra base ----- */
  .hero {
    min-height: 92vh !important;
    align-items: stretch !important;
  }
  .hero-grid {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-rows: none !important;
    gap: 12px !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    padding-bottom: 32px !important;
    padding-top: 0 !important;
    flex: 0 !important;
    max-width: 100% !important;
  }
  /* Esconde .hero-top no mobile (eyebrow/meta sobe e cria espaço no topo) */
  .hero-top { display: none !important; }
  .hero-title.display { margin: 0 !important; }
  .hero-bottom { margin: 8px 0 0 !important; padding: 0 !important; }

  /* ----- Sub-hero (subpáginas): conteúdo na base ----- */
  .sub-hero {
    min-height: 92vh !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .sub-hero-content {
    margin-top: 0 !important;
    padding-bottom: 32px !important;
  }
  .sub-hero-top {
    display: none !important;
  }
  .sub-hero h1.display {
    margin: 0 !important;
  }
  .sub-hero-bottom {
    margin-top: 18px !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
  }

  /* ----- Hierarquia tipográfica ----- */
  /* Título: mantém o que mobile-fixes já define (sec-title clamp 38-56px) */
  /* Lede: menor */
  .hero-lede,
  .sub-hero-lede {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 10px 0 0 !important;
    opacity: 0.85;
  }

  /* Botões: bem menores, padding compacto */
  .hero-cta .btn,
  .sub-hero-cta .btn,
  .cta-actions .btn {
    padding: 12px 20px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    gap: 10px !important;
  }
  .hero-cta,
  .sub-hero-cta {
    margin-top: 16px !important;
  }

  /* Scroll indicator escondido no mobile (poluía o layout) */
  .hero-scroll { display: none !important; }
}

/* ============================================================
   Padronização de tipografia mobile (escala consistente).
   ============================================================ */
@media (max-width: 720px) {
  /* Pull quote profissionais ("O profissional que domina...") */
  .pull,
  section .pull[style*="font-size"] {
    font-size: clamp(24px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
  }

  /* Mentoria: módulos (ladder) — força 1 coluna, h4 full width */
  .ladder-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 24px 0 !important;
  }
  .ladder-row .ladder-letter,
  .ladder-row .ladder-phase,
  .ladder-row h4 {
    grid-column: 1 / -1 !important;
  }
  .ladder-row .ladder-letter {
    font-size: 42px !important;
    line-height: 1 !important;
    margin-bottom: 4px;
  }
  .ladder-row .ladder-phase {
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 4px;
  }
  .ladder-row h4 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Scope (em algumas subpáginas) */
  .scope article h4,
  .scope-num + h4 {
    font-size: 20px !important;
  }

  /* H3 genérico (cards, fases, etc) — padronização */
  .sol-card-body h3.display { font-size: 28px !important; line-height: 1.1 !important; }
  .balance-card h3.display { font-size: 28px !important; line-height: 1.1 !important; }
  .phase-title { font-size: 20px !important; }

  /* Hero-link (home) — caso ainda exista — vira ghost button */
  .hero-link {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Header garante visibilidade do MENU em qualquer tema (dark/light) */
  .site-header .nav-toggle {
    background: transparent !important;
    color: var(--hs-cream);
  }
  .site-header .nav-toggle .bars::before,
  .site-header .nav-toggle .bars::after {
    background: currentColor;
  }
  .site-header.is-light .nav-toggle {
    color: var(--hs-ink);
  }

  /* FIX: drawer cortado quando rolando.
     O backdrop-filter no .site-header.is-scrolled cria stacking context
     que prende o .nav.is-open (position:fixed) dentro do header.
     Ao abrir o drawer, removemos backdrop-filter pra ele cobrir viewport.
     transition: none pra mudança ser instantânea — evita efeito
     de "duas etapas" (drawer aparecendo enquanto header ainda fade). */
  body.nav-open .site-header,
  body.nav-open .site-header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border-bottom: 0 !important;
    transition: none !important;
  }
  /* Garante que o drawer cubra TUDO */
  body.nav-open .site-header .nav.is-open {
    z-index: 999 !important;
  }
}

/* ============================================================
   Mentoria · "Três fases" — carrossel horizontal com scroll-snap
   no mobile pra evitar overflow horizontal da página inteira.
   Cada card snap ao centro; usuário desliza pra ver as fases.
   Desktop não afetado.
   ============================================================ */
@media (max-width: 720px) {
  /* Defesa: nada na página inteira pode causar scroll horizontal */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .fases-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px !important;
    /* Bleed edge-to-edge: anula gutter do .wrap pra cards começarem
       da borda; padding interno restaura espaçamento visual */
    margin-left: calc(-1 * var(--gutter, 24px));
    margin-right: calc(-1 * var(--gutter, 24px));
    padding: 4px var(--gutter, 24px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fases-grid::-webkit-scrollbar { display: none; }
  .fases-grid > div {
    flex: 0 0 82%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* ============================================================
   Helpers: quebra de linha / bloco visível só no mobile
   ============================================================ */
.m-only { display: none; }
.m-block { display: inline; }
@media (max-width: 720px) {
  br.m-only { display: inline; }
  .m-block { display: block; }
}

/* ============================================================
   Revisão de margens — padronização vertical entre seções.
   Mobile usa rhythm consistente: pad horizontal var(--gutter),
   spacing vertical reduzido pra hierarquia mais compacta.
   ============================================================ */
@media (max-width: 720px) {
  /* Section padding vertical — uniforme */
  .section {
    padding: 64px 0 !important;
  }
  /* Section heads — espaço pra título + lede sem excesso */
  .sec-head {
    margin-bottom: 36px !important;
    max-width: 100%;
  }
  .sec-head .display { margin-top: 12px !important; }
  .sec-head .sec-lede { margin-top: 16px !important; max-width: 100%; }

  /* Wrap (container) — gutter consistente */
  .wrap {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* Grids: uma coluna, gap reduzido */
  .two-col,
  .manifesto,
  .cenario-wrap,
  .founder-wrap,
  .balance-wrap,
  .balance-grid,
  .results-grid,
  .tst-grid,
  .sol-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Manifesto: paragraph text mais compacto */
  .manifesto-body p { margin: 12px 0 !important; }

  /* Cenário: spacing entre steps */
  .cenario-steps article { margin-bottom: 20px; }
  .cenario-steps article + article { padding-top: 24px; }

  /* Phases (método) */
  .phase { margin-bottom: 14px; }
  .phase-header { padding: 16px 0 !important; }

  /* Solution cards (home) */
  .sol-card { margin-bottom: 8px; }
  .sol-card-body { padding: 24px !important; }

  /* Founder timeline */
  .timeline { gap: 12px !important; }
  .tl-item span { font-size: 13px; }
  .tl-item p { font-size: 13px; line-height: 1.4; }

  /* Footer */
  .site-footer { padding: 60px var(--gutter) 28px !important; }
  .footer-grid { padding-bottom: 32px !important; gap: 32px !important; }

  /* CTA final centro */
  .cta-final.cta-final--center {
    padding: 80px 0 100px !important;
  }
  .cta-mark {
    font-size: clamp(120px, 30vw, 200px) !important;
  }

  /* Subpage sections espaçamento */
  .outcomes,
  .scope,
  .inclusion {
    margin-top: 28px;
  }

  /* Diferenciais grid — cards compactos */
  .diff-grid article { padding: 18px 0 !important; }
}

/* ============================================================
   Ajustes de proporção tipográfica — mobile
   (varredura visual de todas as 4 páginas)
   ============================================================ */
@media (max-width: 720px) {
  /* HOME — 4 Fases (método): aumentar título das fases */
  .phase-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .phase-title span {
    font-size: 16px !important;
    margin-left: 8px !important;
  }

  /* HOME — Trajetória (timeline): anos > descrições */
  .timeline {
    margin-top: 28px !important;
  }
  .tl-item span {
    font-size: 22px !important;
    margin-bottom: 6px;
  }
  .tl-item p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* HOME — Tráfego sem marca / Marca sem distribuição: títulos dos cards */
  .balance-card h3,
  .balance-card h3.display {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .balance-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* HOME — CTA Final: padding vertical balanceado, conteúdo centralizado */
  .cta-final,
  .cta-final.cta-final--center {
    padding: 100px 0 100px !important;
    text-align: center !important;
  }
  .cta-final .cta-inner,
  .cta-final .cta-wrap {
    text-align: center !important;
  }
  .cta-final .cta-title.display,
  .cta-final .cta-sub,
  .cta-final .idx {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cta-final .cta-title.display,
  .cta-final h2.display[style*="font-size"] {
    font-size: clamp(36px, 9.6vw, 48px) !important;
    line-height: 1.1 !important;
    padding-bottom: 6px !important;
    text-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* Contatos no CTA: hierarquia mais discreta que o título */
  .cta-final .cta-contacts {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    justify-self: center !important;
    text-align: center;
    margin-top: 18px;
  }
  .cta-final .cta-contacts a {
    font-family: var(--ff-body) !important;
    font-size: 14px !important;
    letter-spacing: 0.005em !important;
    gap: 4px !important;
    align-items: center;
  }
  .cta-final .cta-contacts .idx {
    font-size: 10px !important;
    letter-spacing: 0.3em !important;
  }
  /* No index a estrutura usa cta-actions com cta-contacts dentro */
  .cta-final .cta-actions {
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .cta-sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
    opacity: 0.85;
    margin: 0 auto 36px !important;
  }
  .cta-final .idx {
    font-size: 11px !important;
  }

  /* SUBPÁGINAS — primeiro bloco de contexto após hero
     (texto da right-column do .two-col tá maior que outros lugares).
     Padronizar pra 16px. */
  .sub-hero ~ .section .two-col p,
  section[data-nav-theme="light"] .two-col p,
  .section--paper .two-col p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  /* Margem inferior do bloco de contexto */
  .section .two-col {
    margin-bottom: 0 !important;
  }

  /* MENTORIA — Seção "Dez módulos" (ladder): aumentar h4 */
  .ladder-row h4 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .ladder-row .ladder-letter {
    font-size: 44px !important;
  }

  /* MENTORIA — Pull "Não é um curso" */
  .section .pull,
  section .pull[style*="font-size"] {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.2 !important;
  }

  /* MENTORIA — CTA final (alinha com escala da home) */
  .cta-final h2.cta-title.display[style*="font-size"] {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.1 !important;
  }
  .cta-final .cta-sub[style*="font-size"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* PROFISSIONAIS — Escopo (.scope): h4 maior + ul/li padronizado */
  .scope h4 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }
  .scope ul,
  .scope li[style*="font-size"] {
    font-size: 14px !important;
  }

  /* PROFISSIONAIS — Outcomes (.outcomes "Cliente chega aquecido", etc) */
  .outcomes h4 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }
  .outcomes article p,
  .outcomes article p[style*="font-size"] {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .outcomes .o-num {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
}

/* ----- Mobile pequeno (≤ 420px): ajustes finais ----- */
@media (max-width: 420px) {
  .hero-title.display,
  .sub-hero .display,
  .sec-title.display,
  .cta-title.display,
  .manifesto-title.display,
  .cenario-title.display,
  .balance-title.display,
  .founder-title.display,
  section .display[style*="font-size"] {
    font-size: clamp(34px, 11vw, 46px) !important;
  }
  .timeline {
    grid-template-columns: 1fr !important;
  }
}