/*
Theme Name: PROEMI Builder
Theme URI:
Author: proemistudio.com
Description: O PROEMI Builder foi projetado para entregar mais performance e segurança em projetos desenvolvidos com WordPress. O Pb é um tema exclusivo da PROEMI studio, desenvolvido para uso exclusivamente interno.
Version: 1.0.0
Text Domain: proemi-builder
*/

/* ==========================================================================
   FONTE — Instrument Sans hospedada localmente (assets/fonts/).
   Arquivo variável: um único woff2 por estilo cobre os pesos 400–600, por
   isso `font-weight: 400 600` (faixa) em vez de um @font-face por peso.
   Sem Google Fonts via <link>/@import. font-display: swap.
   Caminhos relativos ao style.css (resolvem a partir da raiz do tema).
   ========================================================================== */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   OCEANARC — style.css
   Home: hero + gallery + philosophy
   ============================================================ */

:root {
  /* Cores (spec §2) */
  --primary:      #0066DE;
  --primary-dark: #004AB6;
  --accent:       #006EE4;  /* azul de destaque p/ hover de links (Figma) */
  --dark:         #111111;
  --ink:          #393939;
  --ink-soft:     #454545;
  --muted-2:      #6D6D6D;
  --inactive:     #B0B0B0;
  --bg:           #FAFAFA;
  --white:        #FFFFFF;
  --surface:      #FFFFFF;  /* fundo de cards/boxes — separado de --white p/ dark mode */
  --text:         #333333;
  --muted:        #888888;
  --line:         #E5E5E5;
  --nav:          #ECECEA;

  /* Fontes (spec §2) */
  --font-primary:   'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-secondary: var(--font-primary);

  /* Scroll customizado */
  --sbw: 8px;
  --sbc: var(--primary);
}

/* ── Scroll customizado (template scroll-selecao.md) ── */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
#sb {
  position: fixed;
  top: 0;
  right: 2px;
  width: var(--sbw);
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}
#sb i {
  position: absolute;
  right: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--sbc);
  opacity: 0;
  transition: opacity .35s ease;
}
html.scrolling #sb i { opacity: 1; }
@media (max-width: 1024px) { #sb { display: none; } }

/* ── Seleção de texto ── */
::selection      { color: #fff; background-color: var(--primary); }
::-moz-selection { color: #fff; background-color: var(--primary); }

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Entrada fade-up (com stagger) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--2 { transition-delay: .15s; }
.reveal--3 { transition-delay: .30s; }

/* Página Services: entrada mais suave (duração maior + easing mais macio) */
.page-services .reveal {
  transform: translateY(32px);
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1),
              transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
/* estado assentado precisa vencer (mesma especificidade da regra acima) */
.page-services .reveal.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Lenis (smooth scroll com inércia — roda do mouse + trackpad) ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  background: #0a2740;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/hero.webp") center / cover no-repeat;
  pointer-events: none;
}

/* Header */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 27px 42px;
}
.header__logo { display: block; }
.header__logo-img { display: block; width: 255px; height: auto; }
.header__logo-img--stuck { display: none; }

.header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header__nav a {
  padding: 10px;
  color: var(--nav);
  font-size: 13px;
  line-height: 26px;
  letter-spacing: 2px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}
.header__nav a:hover { color: var(--accent); }
.header__home { display: none; } /* item HOME: só no dropdown mobile */

/* Botão hamburger (mobile — não há mockup mobile no Figma) */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.header__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* Títulos do hero */
.hero__titles {
  position: absolute;
  left: clamp(20px, 10.3vw, 198px);
  right: 20px;
  /* 49% como no design; em telas baixas sobe o suficiente para o título de
     3 linhas + intro não encostarem na seta de scroll */
  top: min(49%, calc(100% - 430px));
  max-width: 854px;
  color: var(--white);
}
.hero__title {
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 400;
  font-size: 50px;
  line-height: 1.12;
  font-variation-settings: "wdth" 100;
}
.hero__intro {
  margin-top: 39px;
  max-width: 854px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

/* Seta de scroll — centro inferior do hero, com float */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  z-index: 15;
  animation: hero-float 1.8s ease-in-out infinite;
  transition: opacity .2s ease;
}
.hero__scroll:hover { opacity: .65; }
.hero__scroll svg { display: block; }
@keyframes hero-float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* ============================================================
   GALLERY  (grid justificado — 3 linhas, alturas fixas por linha)
   ============================================================ */
.gallery {
  background: var(--bg);
  padding: 10px 12px;
}
.gallery-container { width: 100%; }

/* Sem espaço vertical entre imagens lado a lado; apenas entre as linhas */
.gallery-row {
  display: flex;
  gap: 10px 0;
}
.gallery-row + .gallery-row { margin-top: 10px; }

.gallery-row figure {
  position: relative;
  overflow: hidden;
  min-width: 0;
  flex-basis: 0;
}
.gallery-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay de hover (todos exceto img1). Sem cursor de link:
   as imagens ainda não têm URL — evita sugerir clique ao usuário. */
.gallery-row .is-link { cursor: default; }
.gallery-row .is-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.gallery-row .is-link:hover::after { opacity: 1; }

/* flex-grow proporcional à largura + aspect-ratio = largura/altura da linha
   (mesma altura para todos os itens da linha, escala com a largura) */
/* Linha 1 — altura 380.606 */
.img1  { flex-grow: 609.169; aspect-ratio: 609.169 / 380.606; }
.img2  { flex-grow: 253.406; aspect-ratio: 253.406 / 380.606; }
.img3  { flex-grow: 392.531; aspect-ratio: 392.531 / 380.606; }
.img4  { flex-grow: 294.150; aspect-ratio: 294.150 / 380.606; }
.img5  { flex-grow: 295.144; aspect-ratio: 295.144 / 380.606; }
/* Linha 2 — altura 415.388 */
.img6  { flex-grow: 622.088; aspect-ratio: 622.088 / 415.388; }
.img7  { flex-grow: 320.981; aspect-ratio: 320.981 / 415.388; }
.img8  { flex-grow: 651.900; aspect-ratio: 651.900 / 415.388; }
.img9  { flex-grow: 259.369; aspect-ratio: 259.369 / 415.388; }
/* Linha 3 — altura 452.156 */
.img10 { flex-grow: 803.944; aspect-ratio: 803.944 / 452.156; }
.img11 { flex-grow: 380.606; aspect-ratio: 380.606 / 452.156; }
.img12 { flex-grow: 679.725; aspect-ratio: 679.725 / 452.156; }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy {
  background: var(--bg);
  padding: clamp(56px, 8vw, 88px) 24px;
}
.philosophy-container {
  max-width: 550px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 53px);
  text-align: center;
  color: var(--ink);
}
.philosophy__title {
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  font-variation-settings: "wdth" 100;
}
.philosophy__text {
  max-width: 413px;
  font-size: 16px;
  line-height: 26px;
}
.philosophy__text p { margin-bottom: 26px; }
.philosophy__text p:last-child { margin-bottom: 0; }

/* ============================================================
   WHAT WE DO
   ============================================================ */
.what-we-do {
  background: var(--bg);
  padding: 150px 60px 0px 60px;
}
.what-we-do__inner {
  max-width: 1502px;
  margin: 0 auto;
}
.container-what-we-do {
  position: relative;
}

.wwd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: clamp(28px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
}
.wwd-row + .wwd-row { margin-top: clamp(28px, 4vw, 65px); }

.wwd-row__head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2vw, 39px);
}
/* Sem estado inativo/hover: os três serviços ficam sempre na cor plena */
.wwd-num {
  flex-shrink: 0;
  width: 19px;
  font-size: 15px;
  line-height: 25px;
  color: var(--primary);
}
.wwd-title {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.16;
  color: var(--ink);
}
.wwd-desc {
  flex: 0 1 415px;
  max-width: 415px;
  font-size: 15px;
  line-height: 25px;
  color: var(--ink);
}

/* ============================================================
   MEMBER
   ============================================================ */
.member {
  background: var(--bg);
  padding: 90px 60px 80px 60px;
}
.member-container {
  max-width: 1502px;
  margin: 0 auto;
  background: var(--surface);
  padding: 37px 40px 37px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.member__logo { flex-shrink: 0; }
/* Altura ≈ 3 linhas do texto ao lado (3 × 25px) */
.member__logo img { width: 167px; height: auto; }
.member__text {
  max-width: 612px;
  font-size: 15px;
  line-height: 25px;
  color: var(--ink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg);
  padding: 10px;
}

/* Rodapé só com o copyright (Contact). Sem o .footer-top, os 71px de respiro
   do topo do card ficavam sobrando acima de uma única linha — iguala com o
   respiro de baixo. */
.site-footer--copy-only .footer-card { padding-top: 37px; }
.footer-card {
  max-width: 1884px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 15px;
  padding: 71px 100px 37px 100px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Telas grandes (1920px): recuo lateral maior; até 1600px mantém 100px */
@media (min-width: 1601px) {
  .footer-card { padding: 71px 190px 37px 190px; }
}
.logo-footer-link { align-self: flex-start; }
.logo-footer { width: 177px; height: auto; }

.footer-body {
  display: flex;
  flex-direction: column;
  gap: 73px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

/* Coluna esquerda — Discuss a Project (título + descrição + CTA + acknowledgement) */
.footer-intro {
  flex: 0 1 436px;
  max-width: 436px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.footer-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.16;
  color: var(--dark);
}
.footer-desc {
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-soft);
  max-width: 400px;
  margin-top: -6px;
}
.footer-intro .footer-ack { margin-top: 8px; }
.footer-ack {
  display: flex;
  flex-direction: column;
  gap: 25px;
  font-size: 12px;
  line-height: 18px;
}
.footer-ack__text { color: #555555; }
.footer-reg { color: var(--muted-2); }
.footer-ack--test { gap: 8px; }
.footer-copy--test {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.site-footer--test .footer-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Colunas de navegação */
.footer-cols {
  display: flex;
  gap: 93px;
}
.footer-col h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--dark);
}
.footer-col--access { width: 154px; }
.footer-links {
  list-style: none;
  margin-top: 41px;
}
.footer-links a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--muted-2);
  font-weight: 500;
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--accent); }

.footer-col--contact { width: 234px; }
.footer-col--contact h3 { margin-bottom: 54px; }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 29px;
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 26px;
  color: var(--muted-2);
  font-weight: 500;
}
.footer-contact__lines {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer-contact a {
  color: inherit;
  transition: color .2s ease;
}
.footer-contact a:hover { color: var(--accent); }

.footer-col--supporting { width: 130px; }
.footer-col--supporting h3 { margin-bottom: 65px; }
.footer-supporting {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.footer-supporting .support-link { display: inline-block; transition: opacity .2s ease; }
.footer-supporting .support-link:hover { opacity: .65; }
.footer-supporting .support-1 { width: 97px; height: auto; }
.footer-supporting .support-2 { width: 100%; max-width: 130px; height: auto; opacity: .8; }

.footer-copy {
  font-size: 15px;
  line-height: 22px;
  color: var(--muted-2);
}

/* ============================================================
   ABOUT — header interno (modificador do .header)
   ============================================================ */
.header--solid {
  position: relative;
  inset: auto;
  background: var(--bg);
}
.header--solid .header__nav a { color: var(--ink); }
.header--solid .header__nav a:hover,
.header--solid .header__nav a.is-active { color: var(--accent); }
.header--solid .header__toggle span { background: var(--ink); }

/* ============================================================
   STICKY HEADER — referência: comportamento do site atual.
   Ao rolar além da altura do próprio header, ele passa a fixed
   com fundo sólido e a logo troca para a versão em gradiente.
   A classe .is-stuck é aplicada por assets/js/oceanarc.js.
   ============================================================ */
.header.is-stuck {
  position: fixed;
  inset: 0 0 auto 0;
  /* Abaixo só do #sb (99999), acima de qualquer seção. */
  z-index: 100;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .07);
  /* Mais compacto que o header do topo: 14px em vez de 27px. */
  padding-top: 14px;
  padding-bottom: 14px;
  /* Sem fill-mode: se a animação não rodar (aba em segundo plano, motion
     reduzido), o header simplesmente aparece já no lugar em vez de ficar
     preso em translateY(-100%). */
  animation: header-drop .35s ease;
}

/* Logo menor junto com o padding — 200px mantém a proporção 255x49 do SVG.
   Altura do header fixed: 14 + 38.4 + 14 ≈ 66px (contra 103px no topo). */
.header.is-stuck .header__logo-img { width: 200px; }

/* O .hero tem isolation: isolate, então o z-index do header vale só DENTRO
   do hero e as seções seguintes passavam por cima. Enquanto o header está
   fixed, o hero inteiro sobe de camada para carregar o header junto. */
.hero:has(> .header.is-stuck) { z-index: 30; }
@keyframes header-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .header.is-stuck { animation: none; }
}

/* Troca de logo: some a base, entra a de gradiente */
.header.is-stuck .header__logo-img--base  { display: none; }
.header.is-stuck .header__logo-img--stuck { display: block; }

/* Sobre fundo claro o menu precisa das cores das páginas internas */
.header.is-stuck .header__nav a { color: var(--ink); }
.header.is-stuck .header__nav a:hover,
.header.is-stuck .header__nav a.is-active { color: var(--accent); }
.header.is-stuck .header__toggle span { background: var(--ink); }
.header.is-stuck .dm-toggle { color: var(--ink); }
.header.is-stuck .dm-toggle:hover { color: var(--accent); background: rgba(0, 0, 0, .05); }

/* Container padrão das seções da About (1144 centralizado) */
.about-wrap {
  max-width: 1144px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-h2 {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.14;
  color: var(--ink);
}

/* ============================================================
   ABOUT — banner
   ============================================================ */
.about-banner {
  background: var(--bg);
  padding: 0 12.5px;
}
.about-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 1882 / 758;
  object-fit: cover;
  object-position: bottom;
  border-radius: 15px;
}

/* about2 — banner do topo com o mesmo tamanho/posição da consultant-profile */
.page-about2 .about-banner {
  padding: clamp(48px, 5vw, 71px) 18px 0;
}
.page-about2 .about-banner__wrap {
  max-width: 985px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-about2 .about-banner img {
  width: 100%;
  aspect-ratio: 937 / 519;
  height: auto;
  object-fit: cover;
}
/* about2 — conteúdo com a mesma largura da imagem do topo (wrap 985 = 937 útil) */
.page-about2 .about-wrap {
  max-width: 985px;
}
/* about2 — mantém card e texto lado a lado no wrap mais estreito (gap menor);
   flex-wrap: wrap continua empilhando no mobile */
.page-about2 .about-intro__top { gap: clamp(24px, 3vw, 48px); }
.page-about2 .paul__inner { gap: clamp(24px, 3vw, 56px); }

/* ============================================================
   ABOUT — intro (About Oceanarc)
   ============================================================ */
.about-intro { background: var(--bg); padding: clamp(48px, 5vw, 56px) 0; }
.about-intro__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 6vw, 105px);
}
.about-intro__main {
  flex: 1 1 500px;
  max-width: 662px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  color: var(--ink);
}
.about-intro__body { font-size: 16px; line-height: 26px; }
.about-intro__body p + p { margin-top: 26px; }
.about-card {
  flex: 0 1 377px;
  align-self: center;
  background: var(--surface);
  padding: 47px 50px 46px 51px;
}
.about-card p {
  max-width: 288px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}
.about-intro__divider {
  height: 1px;
  background: var(--line);
  margin-top: clamp(48px, 7vw, 98px);
}

/* ============================================================
   ABOUT — Paul Anthony Jones
   ============================================================ */
.paul { background: var(--bg); padding: clamp(48px, 5vw, 62px) 0; }
.paul__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 110px);
}
.paul__photo { flex: 0 1 409px; max-width: 100%; }
.paul__photo img {
  width: 100%;
  aspect-ratio: 409 / 448;
  object-fit: cover;
  display: block;
}
.paul__content {
  flex: 1 1 460px;
  max-width: 625px;
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.paul__text { display: flex; flex-direction: column; gap: 46px; }
.paul__name {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.16;
  color: var(--dark);
}
.paul__role {
  font-size: 18px;
  line-height: 28px;
  color: var(--accent);
}
.paul__bio { font-size: 16px; line-height: 26px; color: var(--ink); }
.paul__bio p + p { margin-top: 26px; }
.paul__cta-group {
  display: flex;
  flex-direction: column;
  gap: 33px;
  width: 254px;
  max-width: 100%;
}
.paul__cta-label {
  font-size: 15px;
  line-height: 25px;
  font-weight: 600;
  color: var(--dark);
}
.paul__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .25s ease, color .25s ease, transform .28s ease, box-shadow .28s ease;
}
.paul__cta:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

/* ============================================================
   ABOUT — Professional Recognition
   ============================================================ */
.recognition { background: var(--bg); padding: clamp(64px, 8vw, 90px) 0; }
.recognition__inner {
  max-width: 805px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.recognition__list {
  list-style: disc;
  padding-left: 24px;
}
.recognition__list li {
  font-size: 16px;
  line-height: 26px;
  color: var(--dark);
  padding: 12px 0;
}

/* ============================================================
   SERVICES — banner
   ============================================================ */
.services-banner {
  position: relative;
  isolation: isolate;
  margin: 0px 12.5px;
  height: clamp(320px, 27vw, 528px);
  border-radius: 15px;
  overflow: hidden;
  background: #0d2b57;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 71px 70px 80px 70px;
}
.services-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/bg-services.webp") center / cover no-repeat;
  pointer-events: none;
}
.services-banner__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 50px;
  line-height: .92;
  color: var(--white);
}
.services-banner__subtitle {
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--white);
}

/* ============================================================
   SERVICES — conteúdo (cards + philosophy)
   ============================================================ */
.services-content {
  background: var(--bg);
  padding: clamp(48px, 5vw, 100px) 0;
}
.services-wrap { max-width: 1430px; margin: 0 auto; padding: 0 24px; }

/* Cards */
.container-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* services-2 — cards empilhados (1 coluna) e container na largura do about (985) */
.page-services-2 .services-wrap { max-width: 985px; }
.page-services-2 .container-cards { grid-template-columns: repeat(2, 1fr); }
.page-services-2 .card--building { grid-column: auto; }
/* services-2 — cards sem fundo/sombra/hover, padding vertical apenas */
.page-services-2 .card {
  gap: 30px;
  background: none;
  padding: 30px 0;
  box-shadow: none;
  transition: none;
  max-width: 400px;
}
.page-services-2 .card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.page-services-2 .services-content {
  padding: clamp(48px, 2vw, 90px) 0 clamp(64px, 8vw, 140px);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background: var(--surface);
  padding: 30px 40px 40px 31px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .03);
  color: var(--ink);
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .03);
}
/* Services: precisa vencer o reset .page-services .reveal.is-visible (0,3,0) */
.page-services .card.reveal:hover { transform: translateY(-10px); }
.card--building { grid-column: span 2; }
/* Stagger da entrada (reveal): cards entram agrupados por linha do grid (3 col) */
/* Linha 1 — cards 1, 2, 3 (entram juntos) */
.container-cards .card.reveal:nth-child(1),
.container-cards .card.reveal:nth-child(2),
.container-cards .card.reveal:nth-child(3) { transition-delay: .12s; }
/* Linha 2 — cards 4, 5 (entram juntos, depois da linha 1) */
.container-cards .card.reveal:nth-child(4),
.container-cards .card.reveal:nth-child(5) { transition-delay: .30s; }
.card__head { display: flex; align-items: center; gap: 16px; }
.card__icon { height: 46px; width: auto; flex-shrink: 0; }
.card__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  color: var(--ink);
}
.card__body { display: flex; flex-direction: column; gap: 21px; }
.card__desc { font-size: 16px; line-height: 26px; color: var(--ink); }
.card__list {
  list-style: disc;
  padding-left: 22px;
  font-size: 15px;
  line-height: 26px;
  color: var(--muted-2);
}

/* Philosophy */
.services-philosophy {
  /* Sem max-width próprio: acompanha a largura do .services-wrap, igual ao
     .container-cards logo acima. */
  margin: clamp(56px, 7vw, 83px) 0 0;
  /* Duas colunas, como o .about-intro__top da página About: texto à esquerda,
     caixa branca à direita. Em fr a proporção 70/30 incide sobre o que sobra
     DEPOIS do gap — é o 70/30 real do container. minmax(0, …) impede que uma
     palavra longa estoure a coluna. */
  display: grid;
  grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
  gap: 47px;
  align-items: center;
}
.services-philosophy__main {
  display: flex;
  flex-direction: column;
  gap: 47px;
}
.services-philosophy__body {
  display: flex;
  flex-direction: column;
  gap: 39px;
  color: var(--ink);
  font-size: 16px;
  line-height: 26px;
}
.services-philosophy__lead strong { font-weight: 600; }
.services-philosophy__more {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: var(--ink);
}
.services-philosophy__more a { color: var(--accent); }
.services-philosophy__more a:hover { text-decoration: underline; }

/* Caixa branca sob o texto da Philosophy. Mesma pele da .about-card
   (fundo --surface e a mesma respiração interna), porém mais estreita que os
   924px do bloco e centralizada. */
.services-philosophy__card {
  background: var(--surface);
  /* Acompanha o respiro da .about-card (50px) quando há espaço e encolhe até
     30px — a coluna de 30% estreita junto com a viewport. */
  padding: 47px clamp(30px, 3.5vw, 50px) 46px;
  color: var(--ink);
}
.services-philosophy__card-title {
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}
.services-philosophy__card-list {
  margin: 0 0 26px;
  /* disc + 24px: mesma convenção de lista do .recognition__list. */
  list-style: disc;
  padding-left: 24px;
  font-size: 15px;
  line-height: 22px;
}
.services-philosophy__card-list li + li { margin-top: 6px; }
.services-philosophy__card p { font-size: 15px; line-height: 22px; }

@media (max-width: 900px) {
  .services-philosophy { grid-template-columns: minmax(0, 1fr); }
  /* Empilhada, a caixa não deve esticar pelos 924px do bloco. */
  .services-philosophy__card { max-width: 520px; margin-inline: auto; }
}

/* ============================================================
   PROJECTS LIST
   ============================================================ */
.projects {
  background: var(--bg);
  padding: clamp(56px, 6vw, 89px) 0 clamp(80px, 8vw, 120px);
}
.projects-wrap { max-width: 1096px; margin: 0 auto; padding: 0 24px; }

.projects-head {
  max-width: 627px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 38px;
  text-align: center;
  color: var(--ink);
}
.projects-head__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 50px;
  line-height: .92;
}
.projects-head__sub {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 16px;
  line-height: 26px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 23px;
  margin-top: clamp(48px, 6vw, 86px);
}
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
}
.project-card__media {
  aspect-ratio: 350 / 331;
  overflow: hidden;
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.project-card:hover .project-card__media img { transform: scale(1.05); }
/* Stagger da entrada (reveal) por coluna do grid */
.projects-grid .project-card.reveal:nth-child(3n + 2) { transition-delay: .10s; }
.projects-grid .project-card.reveal:nth-child(3n + 3) { transition-delay: .20s; }
.project-card__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 20px 16px;
}
.project-card__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}
.project-card__cat {
  font-size: 15px;
  line-height: 28px;
  color: var(--muted-2);
}

/* ============================================================
   PROJECT SINGLE (detalhe do projeto)
   ============================================================ */
.project-single {
  background: var(--bg);
  padding: clamp(48px, 5vw, 93px) 0 clamp(64px, 8vw, 120px);
}
.project-single__wrap { max-width: 1215px; margin: 0 auto; padding: 0 24px; }

.project-single__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: clamp(48px, 6vw, 96px);
}
.project-single__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.14;
  color: var(--ink);
}
.project-single__meta {
  font-size: 16px;
  line-height: 28px;
  color: var(--ink);
}

.project-single__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 58px;
  align-items: start;
}
.project-single__gallery {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.project-single__gallery img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
.project-single__aside {
  position: sticky;
  /* Os 48px são o respiro do design. A parcela do header vem do JS quando ele
     está fixed (--header-stuck-h), senão a coluna gruda atrás da barra ao
     rolar. Fora do estado fixed a variável é 0 e o topo volta aos 48px. */
  top: calc(var(--header-stuck-h, 0px) + 48px);
  display: flex;
  flex-direction: column;
  gap: 54px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
}
.project-single__credits {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.project-single__credits .credit__label {
  font-weight: 600;
  color: var(--dark);
}

/* Link discreto de volta à listagem, no fim do projeto individual. */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(48px, 6vw, 88px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .2s ease;
}
.project-back:hover { color: var(--accent); }
.project-back__arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .2s ease;
}
/* Translate na seta em vez de animar o gap: não recalcula layout. */
.project-back:hover .project-back__arrow { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) {
  .project-back:hover .project-back__arrow { transform: none; }
}

/* ============================================================
   CONSULTANT PROFILE
   ============================================================ */
.profile {
  background: var(--bg);
  padding: 30px 0px 100px 0px;
}
.profile__wrap { max-width: 985px; margin: 0 auto; padding: 0 24px; }

.profile__banner img {
  width: 100%;
  aspect-ratio: 985 / 519;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
.profile__body {
  margin-top: clamp(40px, 5vw, 66px);
  padding: 0 clamp(0px, 5.6vw, 55px);
}
.profile__head {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: clamp(48px, 6vw, 79px);
}
.profile__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.14;
  color: var(--ink);
}
.profile__subtitle { font-size: 18px; line-height: 28px; color: var(--accent); }

.profile__sections { display: flex; flex-direction: column; gap: 64px; }
.profile-section { display: flex; flex-direction: column; gap: 16px; }
.profile-section__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
}
.profile-section__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
}
.profile-section__body ul { list-style: disc; padding-left: 24px; }
.profile-section__body li { margin-bottom: 9px; }
.profile-section__body li:last-child { margin-bottom: 0; }

/* Botão de download — abaixo do texto principal da página */
.profile__download { margin-top: clamp(48px, 6vw, 72px); }

/* Botões (pílula) — reutilizáveis, com hover float */
.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 40px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 100px;
  transition: background .2s ease, color .2s ease, transform .28s ease, box-shadow .28s ease;
}
.profile-btn--primary { background: var(--primary); color: var(--white); }
.profile-btn--primary:hover {
  background: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 110, 228, .35);
}
/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--bg);
  padding: 30px 0px 100px 0px;
}
/* Mesma linha de conteúdo do .footer-card (max 1884 + padding 191/214) */
.contact__wrap { max-width: 1884px; margin: 0 auto; padding: 0px 190px 37px 190px; }
/* 1600px para baixo: recuo lateral reduz para 100px */
@media (max-width: 1600px) { .contact__wrap { padding: 0px 100px 37px 100px; } }
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 409px) minmax(0, 800px);
  justify-content: space-between;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.contact__info { display: flex; flex-direction: column; gap: 41px; }
.contact__intro { display: flex; flex-direction: column; gap: 20px; }
.contact__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.14;
  color: var(--ink);
  margin-top: 60px;
}
.contact__details { font-size: 16px; line-height: 26px; color: var(--ink); }
.contact__details p { margin-bottom: 26px; }
.contact__details p:last-child { margin-bottom: 0; }
.contact__details strong { font-weight: 600; }
.contact__details a { color: inherit; transition: color .2s ease; }
.contact__details a:hover { color: var(--accent); }
.contact__media img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
}

/* ============================================================
   TERMOS / PRIVACY POLICY
   ============================================================ */
.terms {
  background: var(--bg);
  padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 8vw, 120px);
}
.terms__wrap { max-width: 1185px; margin: 0 auto; padding: 0 24px; }

.terms__back {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--accent);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  transition: gap .2s ease, color .2s ease;
}
.terms__back svg { width: 11px; height: 11px; flex-shrink: 0; }
.terms__back:hover { gap: 7px; color: var(--primary-dark); }

.terms__title {
  margin-top: clamp(48px, 7vw, 84px);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.2;
  color: var(--dark);
}
.terms__body {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: 16px;
  line-height: 26px;
  color: var(--dark);
}
.terms__body h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  color: var(--dark);
}

/* ============================================================
   404
   ============================================================ */
.e404 {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.e404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.5vw, 43px);
  text-align: center;
}
.e404__num-wrap { position: relative; display: inline-block; line-height: 1; }
.e404__num {
  display: block;
  position: relative;
  z-index: 2;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(120px, 20vw, 322px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--dark);
}
.e404__gif {
  position: absolute;
  left: 50%;
  top: -8%;
  transform: translateX(-50%);
  width: 36%;
  aspect-ratio: 231 / 130;
  object-fit: cover;
  pointer-events: none;
}
.e404__text {
  font-size: 18px;
  line-height: 28px;
  color: var(--dark);
  max-width: 678px;
}
.e404__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 29px;
  background: var(--accent);
  color: var(--white);
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08px;
  transition: background .2s ease, transform .28s ease, box-shadow .28s ease;
}
.e404__btn:hover {
  background: var(--primary-dark);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 110, 228, .35);
}
.e404__btn svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ============================================================
   VOLTAR AO TOPO — referência: #back_to_top do site atual.
   Fixo no canto inferior direito, oculto no topo da página e
   revelado ao rolar (a classe .is-on vem do oceanarc.js).
   ============================================================ */
.to-top {
  position: fixed;
  right: 25px;
  bottom: 65px;
  /* Acima do conteúdo (máx. 30, no .hero) e abaixo do header sticky (100). */
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  /* visibility junto do opacity tira o botão do foco enquanto some. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover { background: var(--accent); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.to-top svg { display: block; width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top.is-on { transform: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet / abaixo do desktop (spec: ≤ 900px) */
@media (max-width: 900px) {
  .header { padding: 18px 24px; }
  .header__logo img { width: 200px; }
  /* Sticky proporcional ao breakpoint (a regra de desktop tem
     especificidade maior e sobrescreveria estes valores). */
  .header.is-stuck { padding-top: 10px; padding-bottom: 10px; }
  .header.is-stuck .header__logo-img { width: 160px; }

  .header__toggle { display: flex; }
  .header__home { display: block; } /* HOME aparece no dropdown mobile */

  /* Dropdown "Menu Open" — painel branco arredondado, nav centralizada */
  .header__nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 8px;
    right: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    background: var(--surface);
    border-radius: 15px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }
  .header__nav a {
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.15px;
    padding: 10px;
    text-align: center;
  }
  .header__nav a:hover,
  .header__nav a.is-active { color: var(--accent); }

  .header.is-open .header__nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .header.is-open .header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.is-open .header__toggle span:nth-child(2) { opacity: 0; }
  .header.is-open .header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Services — cards: 3 → 2 → 1 colunas */
@media (max-width: 980px) {
  .container-cards { grid-template-columns: repeat(2, 1fr); }
  .card--building { grid-column: span 2; }
}
@media (max-width: 640px) {
  .container-cards { grid-template-columns: 1fr; }
  .card--building { grid-column: span 1; }
}

/* Projects — grid: 3 → 2 → 1 colunas */
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Project Single — empilha (descrição/créditos antes das imagens) */
@media (max-width: 860px) {
  .project-single__body { display: flex; flex-direction: column; gap: 40px; }
  .project-single__aside {
    position: static;
    order: -1;
    gap: 32px;
  }
}

/* Contact — recuo lateral acompanha o .footer-card em cada breakpoint */
@media (max-width: 1200px) { .contact__wrap { padding: 0 56px; } }
@media (max-width: 860px) {
  .contact__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { .contact__wrap { padding: 0 24px; } }

/* Reduz o padding lateral do footer em telas médias */
@media (max-width: 1200px) {
  .footer-card { padding: 64px 56px 40px; }
  .footer-cols { gap: 56px; }
}

/* Tablet — footer empilha intro e colunas */
@media (max-width: 900px) {
  .footer-top { flex-direction: column; gap: 48px; }
  .footer-intro { flex-basis: auto; max-width: 560px; }
  .footer-cols { flex-wrap: wrap; gap: 48px 64px; }
  .footer-body { gap: 56px; }
}

/* Mobile (spec: ≤ 768px) — galeria em 2 colunas */
@media (max-width: 768px) {
  .gallery-row { flex-wrap: wrap; }
  .gallery-row figure {
    flex: 1 1 50%;
    aspect-ratio: 3 / 2;
  }
  .hero__intro { font-size: 15px; }

  /* What We Do — empilha nº+título e descrição; todos os itens legíveis */
  .wwd-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wwd-desc { flex-basis: auto; max-width: none; }

  /* Member — empilha logo e texto */
  .member-container { flex-direction: column; align-items: flex-start; gap: 24px; }
  .member__text { max-width: none; }

  /* Footer — colunas empilham em coluna única */
  .footer-cols { flex-direction: column; gap: 40px; }
  .footer-card { padding: 48px 24px 32px; border-radius: 12px; }
  .footer-col--access,
  .footer-col--contact,
  .footer-col--supporting { width: 100%; }
  .footer-col--contact h3 { margin-bottom: 24px; }
  .footer-col--access .footer-links { margin-top: 16px; }
  .footer-col--supporting h3 { margin-bottom: 24px; }
}

/* Mobile pequeno (spec: ≤ 480px) — galeria em 1 coluna */
@media (max-width: 480px) {
  .header { padding: 14px 18px; }
  .header__logo img { width: 168px; }
  .header.is-stuck { padding-top: 10px; padding-bottom: 10px; }
  .header.is-stuck .header__logo-img { width: 140px; }
  .to-top { right: 16px; bottom: 24px; width: 42px; height: 42px; }
  .gallery-row figure { flex: 1 1 100%; aspect-ratio: 16 / 10; }
  .hero__titles { top: auto; bottom: 12%; }
}

/* ============================================================
   DARK MODE — toggle no header (ao lado de CONTACT)
   ============================================================ */

/* Botão sol/lua */
.dm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--nav);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .3s ease;
}
.dm-toggle:hover { color: var(--accent); background: rgba(255, 255, 255, .1); }
.dm-toggle svg { width: 20px; height: 20px; }

/* Tooltip do botão sol/lua. O texto vem de data-tip, reescrito por
   darkmode.js a cada troca ("Toggle dark mode" / "Toggle light mode").
   Ancorado pela direita: o botão é o último item do header e o tooltip
   cresce para dentro, sem esbarrar na borda da janela. */
.dm-toggle { position: relative; }
.dm-toggle::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .2px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
}
.dm-toggle:hover::after,
.dm-toggle:focus-visible::after { opacity: 1; visibility: visible; }

/* Sem tooltip no mobile: lá o botão vive dentro do dropdown e não há hover.
   Precisa vir DEPOIS da regra base — mesma especificidade, quem vence é a
   última declarada. */
@media (max-width: 900px) {
  .dm-toggle::after { content: none; }
}
/* Apenas 1 ícone por vez: sol no modo claro, lua no dark */
.dm-toggle__sun  { display: block; }
.dm-toggle__moon { display: none; }
html.dm-active .dm-toggle__sun  { display: none; }
html.dm-active .dm-toggle__moon { display: block; }

/* Em header sólido (páginas internas) o ícone acompanha o texto escuro */
.header--solid .dm-toggle { color: var(--ink); }
.header--solid .dm-toggle:hover { color: var(--accent); background: rgba(0, 0, 0, .05); }

/* Efeito dark mode: inverte a página inteira.
   Como o filtro inverte tudo, as cores abaixo são os valores de ORIGEM que,
   após invert(100%) hue-rotate(180deg), resultam no azul-marinho desejado:
     #DBE5F4 → #121C2B (fundo do site)
     #CFDBED → #1B2739 (boxes/cards, incl. footer — 1 passo mais claro) */
html.dm-active {
  --bg:      #DBE5F4;
  --surface: #CFDBED;
  /* Textos: #000 na origem → #FFF depois da inversão da página.
     Os cinzas (#393939, #6D6D6D, #111…) invertiam para cinza-claro e perdiam
     contraste sobre o azul-marinho; aqui todos passam a branco. */
  --ink:      #000000;
  --ink-soft: #000000;
  --text:     #000000;
  --dark:     #000000;
  --muted-2:  #000000;
  --muted:    #000000;
  --inactive: #000000;
  /* Nav sobre a imagem do hero: mantém o cinza-claro original (#ECECEA) */
  --nav:      #131311;
  filter: invert(100%) hue-rotate(180deg);
  transition: filter .4s ease;
  background: #DBE5F4;
}
/* Texto do acknowledgment (cor fixa no CSS base) */
html.dm-active .footer-ack__text { color: #000000; }

/* Imagens e vídeos: permanecem IDÊNTICOS ao modo claro (sem alteração) */
html.dm-active img,
html.dm-active video {
  filter: invert(100%) hue-rotate(180deg);
}

/* Selo do member (AIA): branco puro no dark mode.
   brightness(0) zera a arte e a inversão da página a traz para #FFF —
   funciona com qualquer imagem que o cliente envie pelo painel.
   Chaveado na classe base: o selo virou campo do ACF, então a variante
   --white deixou de existir na marcação (e a --black nunca foi impressa). */
html.dm-active .member__selo { filter: brightness(0); }

/* Dark mode: remove sombra dos cards de serviços (página services) */
html.dm-active .card,
html.dm-active .card:hover { box-shadow: none; }

/* --- Elementos que NÃO devem mudar de cor no dark mode (re-invertidos) --- */
/* Imagem de fundo do hero (index) e banner de services */
html.dm-active .hero::before,
html.dm-active .services-banner::before {
  filter: invert(100%) hue-rotate(180deg);
}
/* Títulos e seta sobre a imagem devem permanecer BRANCOS no dark mode */
html.dm-active .hero__title,
html.dm-active .hero__intro,
html.dm-active .hero__scroll,
html.dm-active .services-banner__title,
html.dm-active .services-banner__subtitle {
  filter: invert(100%) hue-rotate(180deg);
}
/* Botão de download na página Consultant Profile */
html.dm-active .profile-btn--primary {
  filter: invert(100%) hue-rotate(180deg);
}

/* Logos do "Supporting" no rodapé: tom de cinza no dark mode */
html.dm-active .footer-supporting img {
  filter: grayscale(100%) opacity(.7);
}

/* Logo (header e rodapé): versão branca no dark mode */
html.dm-active .header__logo img,
html.dm-active .logo-footer {
  filter: brightness(0);
}

/* ============================================================
   MOBILE (≤ 768px) — ajustes de espaçamento e cor
   ============================================================ */
@media (max-width: 768px) {
  .dm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #646464;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .3s ease;
  }

  .what-we-do {
    background: var(--bg);
    padding: 80px 20px 0px 20px;
  }

  .member {
    background: var(--bg);
    padding: 90px 20px 80px 20px;
  }

  .member-container {
    max-width: 1502px;
    margin: 0 auto;
    background: var(--surface);
    padding: 37px 20px 37px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .about-card {
    flex: 0 1 377px;
    align-self: center;
    background: var(--surface);
    padding: 47px 30px 46px 30px;
  }

  .services-banner {
    position: relative;
    isolation: isolate;
    margin: 0px 12.5px;
    height: clamp(320px, 27vw, 528px);
    border-radius: 15px;
    overflow: hidden;
    background: #0d2b57;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 71px 20px 30px 20px;
  }

  .services-banner__subtitle {
    margin-top: 16px;
    font-size: 15px;
    line-height: 26px;
    color: var(--white);
  }

  /* Imagem do banner esmaecida sobre o azul do fundo — dá leitura ao texto */
  .services-banner::before { opacity: .45; }

  .services-wrap {
    max-width: 1430px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .projects-wrap {
    max-width: 1096px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .profile__wrap {
    max-width: 985px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .profile__body {
    margin-top: clamp(40px, 5vw, 66px);
    padding: 0 clamp(0px, 1.6vw, 55px);
  }

  .profile__subtitle {
    font-size: 16px;
    line-height: 28px;
    color: var(--accent);
  }

  .profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 100px;
    transition: background .2s ease, color .2s ease, transform .28s ease, box-shadow .28s ease;
  }

  .project-single__gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Banner do perfil mais baixo no mobile (recorte, não distorção) */
  .profile__banner img {
    aspect-ratio: 5 / 2;
    object-position: center 35%;
  }

  /* About — banner com a mesma caixa do banner da página Services
     (recuo lateral 12.5px + altura clamp(320px, 27vw, 528px)) */
  .about-banner { padding: 0 12.5px; }
  .about-banner img {
    aspect-ratio: auto;
    height: clamp(320px, 27vw, 528px);
    object-fit: cover;
  }
}

/* ============================================================
   INTEGRAÇÃO WORDPRESS
   Ajustes mínimos para conteúdo vindo do editor (WYSIWYG do ACF), que pode
   trazer mais de um parágrafo onde o design previa um só.
   ============================================================ */
.wwd-desc > p + p { margin-top: 16px; }
/* A lista de prêmios (About) vem do WYSIWYG com <ul> próprio: o wrapper cede
   o recuo para a lista interna, e o .recognition__list li do design continua
   valendo por ser seletor de descendente. */
div.recognition__list { padding-left: 0; list-style: none; }
div.recognition__list > ul { list-style: disc; padding-left: 24px; margin: 0; }

/* Banner do Consultant Profile no mobile.
   O design pede aspect-ratio: 5/2 abaixo de 768px ("recorte, não distorção"),
   mas os atributos width/height da <img> viram dica de apresentação e fixam a
   altura em 519px — a caixa vira retrato (350x519) e corta o rosto da foto,
   que é deitada. height: auto devolve o controle ao aspect-ratio do design.
   No desktop nada muda: lá a altura de 519px é a que o layout já entregava. */
@media (max-width: 768px) {
  .profile__banner img { height: auto; }
}