/* ─────────────────────────────────────────────────────────
   HWG · COMPONENTS (v3 — implementação fiel do Figma)
   Header branco · Hero c/ shield · Timeline ink · Cases pitch ·
   Method cards (bordered) · Parceiros · Blog · CTA + Footer ink
   ───────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ───── HEADER (branco, fixo no topo, 3 colunas) ───── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: var(--z-header);
  background: var(--hwg-paper);
  color: var(--hwg-black);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  border-bottom: 1px solid rgba(16, 22, 30, 0.08);
  transition: height 360ms var(--ease-out-soft), box-shadow 360ms var(--ease-out-soft), border-color 360ms var(--ease-out-soft);
}
/* Header encolhe (mais fino) ao rolar — facilita a leitura do conteúdo */
.site-header.is-scrolled {
  height: 64px;
  box-shadow: 0 1px 24px rgba(16, 22, 30, 0.07);
  border-bottom-color: rgba(16, 22, 30, 0.06);
}
.site-header__brand img,
.menu-btn,
.header-cta { transition: all 360ms var(--ease-out-soft); }
.site-header.is-scrolled .site-header__brand img { height: 22px; }
.site-header__left {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  justify-self: start;
}
.site-header__brand img {
  height: 28px;
  width: auto;
  display: block;
}

.site-header__center {
  justify-self: center;
}
.site-header__tagline {
  font-size: var(--t-cta);
  letter-spacing: 0;
  color: var(--hwg-black);
  white-space: nowrap;
}
.site-header__tagline strong { font-weight: var(--fw-bold); }

.site-header__right {
  display: inline-flex;
  align-items: center;
  justify-self: end;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-size: var(--t-cta);
  letter-spacing: 0;
  color: var(--hwg-black);
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.header-cta strong { font-weight: var(--fw-bold); }
.header-cta:hover { color: var(--hwg-forest); }
.header-cta .cta-mark {
  display: inline-block;
  width: 16px;
  height: 14px;
  background: var(--hwg-forest);
  margin-right: 0.35ch;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--hwg-black);
  transition: color var(--dur-fast) var(--ease-out-soft);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  text-decoration: none;
  font-size: 0;
  line-height: 0;
}
.menu-btn:focus { outline: none; }
.menu-btn:focus-visible {
  outline: 2px solid var(--hwg-amber);
  outline-offset: 4px;
}
.menu-btn .icon {
  display: block;
  width: 30px;
  height: 16px;
  position: relative;
  flex: 0 0 auto;
}
.menu-btn .icon::before,
.menu-btn .icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  background: currentColor;
}
.menu-btn .icon::before { top: 0; }
.menu-btn .icon::after  { bottom: 0; }
.menu-btn:hover { color: var(--hwg-amber); }

/* ───── MENU OVERLAY (glass + identidade HWG) ───── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(16, 22, 30, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  color: var(--hwg-on-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  padding: clamp(var(--sp-4), 2vw, var(--sp-6)) var(--gutter) clamp(var(--sp-5), 3vw, var(--sp-7));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
  overflow: hidden;
}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; transform: none; }

/* Camada decorativa: símbolo gigante + shapes flutuantes */
.menu-overlay__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.menu-overlay__symbol {
  position: absolute;
  top: 50%;
  right: clamp(var(--sp-6), 6vw, var(--sp-9));
  transform: translateY(-50%);
  width: clamp(320px, 38vw, 560px);
  height: auto;
  opacity: 0.08;
  filter: brightness(0) invert(1);
}

/* Top: brand real + close-btn icone X */
.menu-overlay__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-bottom: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  border-bottom: 1px solid rgba(237, 234, 226, 0.08);
}
.menu-overlay__brand img {
  height: clamp(28px, 2vw, 36px);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85ch;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: inherit;
  background: none;
  border: 0;
  padding: var(--sp-2) 0;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.close-btn:hover { color: var(--hwg-amber); }
.close-btn__icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
}
.close-btn__icon::before,
.close-btn__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}
.close-btn__icon::before { transform: translateY(-50%) rotate(45deg); }
.close-btn__icon::after { transform: translateY(-50%) rotate(-45deg); }

/* Nav */
.menu-overlay__nav {
  align-self: center;
  display: grid;
  position: relative;
  z-index: 2;
  max-width: 72rem;
}

.menu-link {
  display: inline-flex;
  align-items: center;
  padding: clamp(var(--sp-2), 0.8vw, var(--sp-3)) 0;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  color: inherit;
  position: relative;
  transition: padding-left var(--dur-base) var(--ease-out-strong),
              color var(--dur-base) var(--ease-out-soft);
  width: max-content;
}

.menu-link__name {
  font-size: clamp(2rem, 5.4vw, 4.8rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
}

/* Marcador âmbar que aparece no hover (corner mark do brand) */
.menu-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 26px;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transform: translateY(-50%) translateX(-12px) scale(0.6);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out-strong),
              opacity var(--dur-base) var(--ease-out-soft);
}
.menu-link:hover,
.menu-link.is-current {
  color: var(--hwg-amber);
  padding-left: clamp(var(--sp-7), 5vw, var(--sp-9));
}
.menu-link:hover::before,
.menu-link.is-current::before {
  transform: translateY(-50%) translateX(0) scale(1);
  opacity: 1;
}

/* Cascade animation quando o menu abre */
.menu-overlay .menu-link {
  opacity: 0;
  transform: translateY(24px);
}
.menu-overlay.is-open .menu-link {
  animation: menuLinkIn 700ms var(--ease-out-strong) forwards;
}
.menu-overlay.is-open .menu-link:nth-child(1) { animation-delay: 120ms; }
.menu-overlay.is-open .menu-link:nth-child(2) { animation-delay: 180ms; }
.menu-overlay.is-open .menu-link:nth-child(3) { animation-delay: 240ms; }
.menu-overlay.is-open .menu-link:nth-child(4) { animation-delay: 300ms; }
.menu-overlay.is-open .menu-link:nth-child(5) { animation-delay: 360ms; }

@keyframes menuLinkIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer do menu: tagline + social (ícones) */
.menu-overlay__foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(var(--sp-4), 3vw, var(--sp-7));
  padding-top: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  border-top: 1px solid rgba(237, 234, 226, 0.08);
}
.menu-overlay__tagline {
  font-size: var(--t-body);
  letter-spacing: var(--tr-snug);
  opacity: 0.85;
  margin: 0;
}
.menu-overlay__tagline strong { font-weight: var(--fw-bold); }

/* Social: ícones SVG em círculos (igual footer) */
.menu-overlay__social {
  display: inline-flex;
  gap: clamp(var(--sp-3), 1.2vw, var(--sp-4));
  align-items: center;
}
.menu-overlay__social a {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(237, 234, 226, 0.1);
  color: var(--hwg-on-ink);
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.menu-overlay__social a:hover {
  background: var(--hwg-amber);
  color: var(--hwg-paper);
  transform: translateY(-2px);
}
.menu-overlay__social svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 760px) {
  .menu-overlay__foot {
    grid-template-columns: 1fr;
    text-align: left;
    align-items: flex-start;
  }
  .menu-overlay__contact { flex-wrap: wrap; }
  .menu-overlay__symbol { width: clamp(280px, 80vw, 460px); right: -20%; }
  .menu-overlay__shape--forest { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay.is-open .menu-link {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ───── CORNER MARK (assinatura âmbar — Asset 5) ───── */
.corner-mark {
  display: block;
  width: clamp(34px, 2.8vw, 41px);
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
}

/* ───── HERO (supersize: símbolo HWG ao fundo + Rodrigo cutout + texto) ───── */
.hero {
  position: relative;
  margin-top: var(--header-h);
  height: calc(100vh - var(--header-h));
  min-height: 560px;
  background: var(--hwg-paper);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* Container do banner (símbolo + retrato) ocupando metade direita */
.hero__stage {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Símbolo HWG grande no centro do stage — entrada com fade + scale + leve rotação */
.hero__symbol {
  --py: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(360px, 72%, 720px);
  height: auto;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--py))) scale(0.7) rotate(-8deg);
  transition: opacity 1.6s var(--ease-out-strong),
              transform 1.6s var(--ease-out-strong);
  filter: drop-shadow(0 24px 60px rgba(12, 28, 44, 0.15));
}
.hero.is-ready .hero__symbol {
  opacity: 1;
  transform: translate(-50%, calc(-50% + var(--py))) scale(1) rotate(0deg);
  transition-delay: 300ms, 300ms;
}
.hero.is-scrolling .hero__symbol {
  transition: opacity 0ms linear, transform 0ms linear;
}

.hero__overlay {
  position: relative;
  width: 55%;
  padding: clamp(var(--sp-7), 7vw, var(--sp-10)) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

/* Corner mark — fade-in suave */
.hero__overlay .corner-mark {
  margin-bottom: var(--sp-6);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 700ms var(--ease-out-soft) 600ms,
              transform 700ms var(--ease-out-soft) 600ms;
}
.hero.is-ready .hero__overlay .corner-mark {
  opacity: 1;
  transform: none;
}

/* Título — typewriter handled via JS; cursor via ::after enquanto digita */
.hero__title {
  font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: var(--tr-tight);
  color: var(--hwg-black);
  font-weight: var(--fw-bold);
  min-height: 4em;
}
.hero__title .light { font-weight: var(--fw-regular); }
.hero__title .amber { color: var(--hwg-amber); }
.hero__title.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  background: var(--hwg-amber);
  margin-left: 0.08em;
  vertical-align: -0.08em;
  animation: heroCursorBlink 0.7s steps(2, end) infinite;
}
@keyframes heroCursorBlink {
  to { opacity: 0; }
}

/* Seta de scroll sutil no canto inferior esquerdo */
.hero__scroll-cue {
  position: absolute;
  bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
  left: clamp(var(--sp-5), 3vw, var(--sp-7));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--hwg-black);
  text-decoration: none;
  opacity: 0;
  transition: opacity 800ms var(--ease-out-soft) 1.6s,
              color var(--dur-fast) var(--ease-out-soft);
}
.hero.is-ready .hero__scroll-cue { opacity: 0.55; }
.hero__scroll-cue:hover { opacity: 1; color: var(--hwg-amber); }

.hero__scroll-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  animation: heroArrowBounce 1.8s ease-in-out infinite;
}
@keyframes heroArrowBounce {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__symbol,
  .hero__portrait,
  .hero__overlay .corner-mark,
  .hero__scroll-cue {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__title.is-typing::after { animation: none; }
  .hero__scroll-line::after { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    display: block;
  }
  .hero__stage {
    position: relative;
    width: 100%;
    height: clamp(360px, 70vw, 560px);
  }
  .hero__symbol {
    width: clamp(280px, 70%, 460px);
  }
  .hero__portrait {
    height: 100%;
  }
  .hero__overlay {
    position: relative;
    width: 100%;
    padding: clamp(var(--sp-7), 8vw, var(--sp-9)) var(--gutter) var(--sp-7);
  }
}

/* ───── TIMELINE (fundo branco + 2 fileiras com parallax horizontal) ───── */
.timeline {
  --book-w: clamp(220px, 24vw, 360px);
  --book-h: calc(var(--book-w) * 1.125); /* aspect 4/4.5 */

  background: var(--hwg-paper);
  color: var(--hwg-ink);
  padding: clamp(var(--sp-8), 8vw, var(--sp-11)) 0 clamp(var(--sp-8), 8vw, var(--sp-10));
  position: relative;
  overflow: hidden;
}

.timeline__title {
  padding-inline: var(--gutter);
  font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-regular);
  color: var(--hwg-ink);
  max-width: 22ch;
  margin: 0 auto clamp(var(--sp-7), 6vw, var(--sp-10));
  text-align: center;
}
.timeline__title strong { font-weight: var(--fw-bold); }
.timeline__title .timeline__amber-text {
  color: var(--hwg-amber);
  font-weight: var(--fw-bold);
}
.corner-mark--inline {
  display: inline-block;
  width: 0.55em;
  height: 0.5em;
  vertical-align: -0.05em;
  margin-left: 0.25em;
  transform: rotate(180deg);
  aspect-ratio: auto;
}

/* Cascade: cada linha entra em sequência quando o título entra na viewport */
.timeline__title.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.timeline__line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out-strong),
              transform 700ms var(--ease-out-strong);
}
.timeline__title.is-visible .timeline__line { opacity: 1; transform: none; }
.timeline__title.is-visible .timeline__line:nth-child(1) { transition-delay: 0ms; }
.timeline__title.is-visible .timeline__line:nth-child(2) { transition-delay: 140ms; }
.timeline__title.is-visible .timeline__line:nth-child(3) { transition-delay: 280ms; }
.timeline__title.is-visible .timeline__line:nth-child(4) { transition-delay: 440ms; }

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

.timeline__books {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.2vw, var(--sp-5));
}

.timeline__row {
  display: flex;
  gap: clamp(var(--sp-3), 1.2vw, var(--sp-5));
  width: max-content;
  will-change: transform;
  transform: translate3d(var(--scroll-x, 0px), 0, 0);
  transition: transform 80ms linear;
}

/* 1ª fileira inicia deslocada à direita */
.timeline__row--right {
  padding-left: clamp(8vw, 14vw, 22vw);
}

/* 2ª fileira inicia deslocada à esquerda (parte sai pela borda) */
.timeline__row--left {
  margin-left: clamp(-18vw, -10vw, -6vw);
}

.timeline__book {
  position: relative;
  flex: 0 0 var(--book-w);
  aspect-ratio: 4/4.5;
  overflow: hidden;
  background: var(--hwg-on-ink-2);
}
.timeline__book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04);
  transition: transform 900ms var(--ease-out-soft);
}
.timeline__book:hover img { transform: scale(1.04); }
.timeline__book-link { display: block; width: 100%; height: 100%; cursor: pointer; }

@media (max-width: 800px) {
  .timeline {
    --book-w: clamp(180px, 52vw, 280px);
  }
  .timeline__row--right { padding-left: 8vw; }
  .timeline__row--left { margin-left: -10vw; }
}

/* ───── FILOSOFIA HWG (head + 2 cards) ───── */
.filosofia {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-7), 6vw, var(--sp-10)) var(--gutter) clamp(var(--sp-8), 8vw, var(--sp-11));
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.filosofia__head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.6fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-9));
  align-items: start;
  margin-bottom: clamp(var(--sp-8), 7vw, var(--sp-10));
  padding-top: clamp(var(--sp-5), 4vw, var(--sp-7));
}

.filosofia__eyebrow {
  font-size: var(--t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  padding-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-soft),
              gap var(--dur-fast) var(--ease-out-soft);
}
.filosofia__eyebrow-arrow {
  display: inline-block;
  font-size: 1.1em;
  opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out-soft),
              opacity var(--dur-fast) var(--ease-out-soft);
}
.filosofia__eyebrow:hover {
  color: var(--hwg-amber);
  gap: 1em;
}
.filosofia__eyebrow:hover .filosofia__eyebrow-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.filosofia__title {
  font-size: clamp(2.2rem, 1.4rem + 4vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
  color: var(--hwg-ink);
  max-width: 18ch;
}
.filosofia__title .amber { color: var(--hwg-amber); }

.filosofia__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
/* Divisor vertical fino entre os 2 cards */
.filosofia__cards::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.method-card {
  --card-color: var(--hwg-amber);
  --card-tint: rgba(224, 114, 40, 0.05);
  position: relative;
  background: transparent;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) clamp(var(--sp-6), 4vw, var(--sp-9)) clamp(var(--sp-9), 7vw, var(--sp-11));
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--sp-4);
  min-height: clamp(380px, 32vw, 500px);
  cursor: pointer;
  transition: background-color 500ms var(--ease-out-soft),
              transform 500ms var(--ease-out-strong);
}
.filosofia__cards .method-card:first-child {
  --card-color: var(--hwg-forest);
  --card-tint: rgba(43, 102, 69, 0.05);
  padding-left: 0;
}
.filosofia__cards .method-card:last-child {
  padding-right: 0;
}

/* HOVER — eleva, tinta sutil, título colorido, rule full-width, sign escala */
.method-card:hover {
  background-color: var(--card-tint);
  transform: translateY(-6px);
}

.method-card__title {
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.0;
  color: var(--hwg-ink);
  margin: 0;
  transition: color 400ms var(--ease-out-soft);
}
/* Stretched link: o link envolve o título, mas seu ::before cobre o card inteiro */
.method-card__link {
  color: inherit;
  text-decoration: none;
  display: inline;
}
.method-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.method-card:hover .method-card__title {
  color: var(--card-color);
}

.method-card__verbs {
  font-size: var(--t-method-sub);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.45);
  margin-top: var(--sp-2);
  transition: color 400ms var(--ease-out-soft);
}
.method-card:hover .method-card__verbs {
  color: rgba(0, 0, 0, 0.7);
}

.method-card__rule {
  width: 56%;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  transition: width 600ms var(--ease-out-strong),
              background-color 400ms var(--ease-out-soft);
}
.method-card:hover .method-card__rule {
  width: 100%;
  background-color: var(--card-color);
}

.method-card__body {
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: 44ch;
  color: rgba(0, 0, 0, 0.7);
  transition: color 400ms var(--ease-out-soft);
}
.method-card:hover .method-card__body {
  color: var(--hwg-ink);
}

.method-card__sign {
  position: absolute;
  bottom: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  right: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  width: clamp(60px, 7vw, 96px);
  aspect-ratio: 110/100;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transform: rotate(180deg);
  transition: transform 500ms var(--ease-out-strong);
}
.filosofia__cards .method-card:last-child .method-card__sign {
  right: 0;
}
.filosofia__cards .method-card:first-child .method-card__sign {
  right: clamp(var(--sp-3), 1.5vw, var(--sp-5));
}
.method-card:hover .method-card__sign {
  transform: rotate(180deg) scale(1.15);
}
.method-card__sign--forest { background: var(--hwg-forest); }
.method-card__sign--amber  { background: var(--hwg-amber); }

@media (prefers-reduced-motion: reduce) {
  .method-card,
  .method-card__title,
  .method-card__verbs,
  .method-card__rule,
  .method-card__body,
  .method-card__sign {
    transition: none !important;
  }
  .method-card:hover { transform: none; }
  .method-card:hover .method-card__sign { transform: rotate(180deg); }
}

@media (max-width: 800px) {
  .filosofia__head {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .filosofia__eyebrow { padding-top: 0; }
  .filosofia__cards {
    grid-template-columns: 1fr;
  }
  .filosofia__cards::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
  }
  .filosofia__cards .method-card {
    padding: clamp(var(--sp-6), 6vw, var(--sp-8)) 0;
  }
}

/* ───── PARCEIROS (marquee 2 linhas em direções opostas) ───── */
.parceiros {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-7), 5vw, var(--sp-9)) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-block: clamp(var(--sp-5), 3.5vw, var(--sp-7));
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__track--left  { animation: marqueeLeft  60s linear infinite; }
.marquee__track--right { animation: marqueeRight 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-8), 8vw, var(--sp-11));
  padding-inline: clamp(var(--sp-6), 4vw, var(--sp-8));
  flex-shrink: 0;
}
.marquee__row li {
  display: grid;
  place-items: center;
  height: clamp(44px, 5vw, 64px);
  flex-shrink: 0;
}
.marquee__row img {
  height: 100%;
  width: auto;
  max-width: clamp(120px, 14vw, 220px);
  object-fit: contain;
  filter: brightness(0) saturate(0);
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
}
.marquee__row li:hover img {
  opacity: 1;
  transform: scale(1.06);
}

@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track--left,
  .marquee__track--right { animation: none; }
}
@media (max-width: 500px) {
  .marquee__row { gap: var(--sp-6); }
  .marquee__row li { height: 36px; }
}

/* ───── BLOG SECTION (branco c/ amber shapes baixa opacidade) ───── */
.blog {
  --blog-gutter: clamp(var(--sp-7), 7vw, var(--sp-10));
  background: var(--hwg-paper);
  padding: clamp(var(--sp-8), 8vw, var(--sp-11)) 0 0;
  position: relative;
  overflow: hidden;
}

/* Símbolo HWG grande — cortado pelo lado direito, alinhado pelo topo */
.blog__symbol {
  position: absolute;
  top: clamp(var(--sp-3), 2vw, var(--sp-5));
  right: clamp(-36vw, -28vw, -20vw);
  width: clamp(560px, 65vw, 1100px);
  height: auto;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  filter: brightness(0);
}

.blog__title {
  padding-inline: var(--blog-gutter);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.02;
  max-width: 20ch;
  margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
  position: relative;
  z-index: 2;
  color: var(--hwg-ink);
}
.blog__title .amber { color: var(--hwg-amber); }

/* Scroller horizontal estilo Netflix */
.blog__scroller {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.blog__cards {
  display: flex;
  gap: clamp(var(--sp-3), 1vw, var(--sp-4));
  padding-inline: var(--blog-gutter);
  padding-bottom: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.blog__cards::-webkit-scrollbar { display: none; }

.blog-card {
  --card-tone-light: #1A2330;
  --card-tone: #0C1218;
  --card-text: var(--hwg-paper);
  flex: 0 0 clamp(240px, 22vw, 320px);
  scroll-snap-align: start;
}
.blog-card__link {
  display: block;
  position: relative;
  aspect-ratio: 4/5.6;
  padding: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  color: var(--card-text);
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card-tone-light) 0%, var(--card-tone) 100%);
  transition: transform 500ms var(--ease-out-strong),
              box-shadow 500ms var(--ease-out-soft);
}
.blog-card__link:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

/* Tonalidades dos cards */
.blog-card--ink {
  --card-tone-light: #1A2330;
  --card-tone: #0C1218;
}
.blog-card--soft {
  --card-tone-light: #C8C2B8;
  --card-tone: #837C73;
  --card-text: var(--hwg-ink);
}
.blog-card--forest {
  --card-tone-light: #2F6E4A;
  --card-tone: #1B3F2A;
}
.blog-card--amber {
  --card-tone-light: #D86E27;
  --card-tone: #9C4E18;
}

.blog-card__badge {
  display: inline-block;
  background: var(--hwg-paper);
  color: var(--hwg-ink);
  padding: 0.55em 0.85em;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  line-height: 1;
}

.blog-card__bottom {
  position: absolute;
  bottom: clamp(var(--sp-4), 2vw, var(--sp-5));
  left: clamp(var(--sp-4), 2vw, var(--sp-5));
  right: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.blog-card__title {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  line-height: 1.32;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  margin-bottom: var(--sp-4);
  color: inherit;
}
.blog-card__meta {
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.72;
  margin: 0;
}

/* Navegação inferior */
.blog__nav {
  position: relative;
  z-index: 2;
  margin-top: clamp(var(--sp-7), 5vw, var(--sp-9));
  padding-inline: var(--blog-gutter);
}
.blog__nav-line {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
}
.blog__nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding-block: clamp(var(--sp-4), 2vw, var(--sp-6));
}
.blog__nav-all {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hwg-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.blog__nav-all:hover { color: var(--hwg-amber); }
.blog__nav-all-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.blog__nav-all:hover .blog__nav-all-arrow { transform: translateX(5px); }
.blog__nav-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}
.blog__nav-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--hwg-ink);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
.blog__nav-btn:hover { opacity: 1; color: var(--hwg-amber); }
.blog__nav-btn:disabled { opacity: 0.15; cursor: not-allowed; }

.chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.chevron--right { transform: rotate(-45deg); }
.chevron--left { transform: rotate(135deg); }

@media (max-width: 760px) {
  .blog-card { flex: 0 0 clamp(220px, 70vw, 280px); }
  .blog__symbol { opacity: 0.1; }
}

/* ───── CTA + FOOTER (ink + corner mark grande + headline sublinhado azul) ───── */
.cta-footer {
  --footer-gutter: clamp(var(--sp-7), 7vw, var(--sp-10));
  --footer-blue: #2F6BFF;
  --mark-size: clamp(120px, 11vw, 180px);
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  position: relative;
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--footer-gutter) clamp(var(--sp-4), 2vw, var(--sp-5));
  overflow: hidden;
}

/* Corner mark âmbar: estado inicial cobre todo o footer, encolhe para o canto */
.cta-footer__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hwg-amber);
  z-index: 10;
  pointer-events: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%);
  transition: clip-path 1.5s cubic-bezier(0.7, 0, 0.25, 1);
}
.cta-footer.is-revealed .cta-footer__mark {
  clip-path: polygon(
    0 0,
    var(--mark-size) 0,
    var(--mark-size) calc(var(--mark-size) * 0.38),
    calc(var(--mark-size) * 0.38) calc(var(--mark-size) * 0.38),
    calc(var(--mark-size) * 0.38) var(--mark-size),
    0 var(--mark-size)
  );
}

/* Conteúdo do footer escondido até o reveal */
.cta-footer__head,
.cta-footer__divider,
.cta-footer__main,
.cta-footer__legal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out-strong),
              transform 800ms var(--ease-out-strong);
}
.cta-footer.is-revealed .cta-footer__head,
.cta-footer.is-revealed .cta-footer__divider,
.cta-footer.is-revealed .cta-footer__main,
.cta-footer.is-revealed .cta-footer__legal {
  opacity: 1;
  transform: none;
}
.cta-footer.is-revealed .cta-footer__head        { transition-delay: 1000ms; }
.cta-footer.is-revealed .cta-footer__divider:nth-of-type(1) { transition-delay: 1150ms; }
.cta-footer.is-revealed .cta-footer__main        { transition-delay: 1300ms; }
.cta-footer.is-revealed .cta-footer__divider:nth-of-type(2) { transition-delay: 1450ms; }
.cta-footer.is-revealed .cta-footer__legal       { transition-delay: 1600ms; }

@media (prefers-reduced-motion: reduce) {
  .cta-footer__mark {
    transition: none;
    clip-path: polygon(
      0 0,
      var(--mark-size) 0,
      var(--mark-size) calc(var(--mark-size) * 0.38),
      calc(var(--mark-size) * 0.38) calc(var(--mark-size) * 0.38),
      calc(var(--mark-size) * 0.38) var(--mark-size),
      0 var(--mark-size)
    );
  }
  .cta-footer__head,
  .cta-footer__divider,
  .cta-footer__main,
  .cta-footer__legal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Head: title + CTA */
.cta-footer__head {
  position: relative;
  z-index: 1;
  padding-top: clamp(var(--sp-7), 6vw, var(--sp-9));
  margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
}

.cta-footer__title {
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 5.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-paper);
  margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8));
  max-width: 18ch;
}
.cta-footer__line {
  display: block;
  width: max-content;
  max-width: 100%;
}
.cta-footer__line + .cta-footer__line { margin-top: 0.05em; }

/* Botão CTA âmbar */
.cta-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85ch;
  padding: clamp(0.95rem, 1vw, 1.15rem) clamp(1.3rem, 1.5vw, 1.8rem);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--hwg-amber);
  color: var(--hwg-paper);
  border: 0;
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.cta-footer__btn:hover {
  background: #C45F1F;
  transform: translateY(-2px);
}
.cta-footer__btn-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.cta-footer__btn:hover .cta-footer__btn-arrow {
  transform: translateX(4px);
}

/* Divisores horizontais */
.cta-footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(237, 234, 226, 0.18);
}

/* Main: brand (left) + columns (right) */
.cta-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--sp-6), 6vw, var(--sp-10));
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-9));
  align-items: start;
}

.cta-footer__brand {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
}
.cta-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-3), 1.5vw, var(--sp-4));
}
.cta-footer__symbol {
  width: clamp(48px, 5vw, 72px);
  height: auto;
  filter: brightness(0) invert(1);
}
.cta-footer__wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--hwg-paper);
}
.cta-footer__wordmark-name {
  font-size: clamp(2.6rem, 3.4vw, 4.2rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  line-height: 0.9;
}
.cta-footer__wordmark-sub {
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.4em;
}

/* Social: círculos cinza */
.cta-footer__social {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-3), 1vw, var(--sp-4));
}
.cta-footer__social a {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(237, 234, 226, 0.18);
  color: rgba(16, 22, 30, 0.85);
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.cta-footer__social a:hover {
  background: var(--hwg-amber);
  color: var(--hwg-paper);
  transform: translateY(-2px);
}
.cta-footer__social svg { width: 16px; height: 16px; fill: currentColor; }

/* Colunas: Navegação + Contato */
.cta-footer__columns {
  display: grid;
  grid-template-columns: auto auto;
  gap: clamp(var(--sp-7), 6vw, var(--sp-10));
}
.cta-footer__col h4 {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.55;
  margin-bottom: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.cta-footer__col ul li {
  padding-block: 0.4rem;
  font-size: var(--t-body);
  opacity: 0.92;
}
.cta-footer__col ul li a {
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.cta-footer__col ul li a:hover { color: var(--hwg-amber); }

/* Legal: linha de baixo */
.cta-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.55;
  padding-top: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.cta-footer__legal .sep {
  display: inline-block;
  padding: 0 0.4em;
  opacity: 0.5;
}

@media (max-width: 900px) {
  .cta-footer__main {
    grid-template-columns: 1fr;
    row-gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  }
  .cta-footer__columns {
    grid-template-columns: 1fr 1fr;
  }
  .cta-footer__legal {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }
}
@media (max-width: 540px) {
  .cta-footer__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .cta-footer__mark { width: 84px; }
  .cta-footer__logo { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA QUEM SOMOS (.qs-*)
   ═══════════════════════════════════════════════════════════ */

/* ───── HERO (filosófico — 2 cols com símbolo) ───── */
.qs-hero {
  position: relative;
  margin-top: var(--header-h);
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--gutter) clamp(var(--sp-7), 6vw, var(--sp-9));
  background: var(--hwg-paper);
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  align-items: center;
  min-height: clamp(420px, 64vh, 720px);
}
.qs-hero__text {
  position: relative;
}
.qs-hero__mark {
  margin-bottom: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 600ms var(--ease-out-soft) 300ms,
              transform 600ms var(--ease-out-soft) 300ms;
}
.qs-hero.is-ready .qs-hero__mark {
  opacity: 1;
  transform: none;
}
.qs-hero__title {
  font-size: clamp(2.4rem, 1.4rem + 4.8vw, 5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.02;
  color: var(--hwg-ink);
  max-width: 14ch;
  min-height: 3.3em;
}
.qs-hero__title .amber { color: var(--hwg-amber); }
.qs-hero__title.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  background: var(--hwg-amber);
  margin-left: 0.08em;
  vertical-align: -0.08em;
  animation: heroCursorBlink 0.7s steps(2, end) infinite;
}

.qs-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
}
.qs-hero__symbol {
  width: clamp(220px, 80%, 460px);
  height: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition: opacity 1.4s var(--ease-out-strong),
              transform 1.4s var(--ease-out-strong);
}
.qs-hero.is-ready .qs-hero__symbol {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 400ms;
}

@media (max-width: 800px) {
  .qs-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .qs-hero__visual { display: none; }
}

/* ───── MANIFESTO ───── */
.qs-manifesto {
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter);
  background: var(--hwg-paper);
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3.4fr);
  gap: clamp(var(--sp-5), 5vw, var(--sp-9));
  align-items: start;
}
.qs-manifesto__eyebrow {
  font-size: var(--t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  padding-top: 0.6rem;
}
.qs-manifesto__text {
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-regular);
  color: var(--hwg-ink);
  max-width: 38ch;
}
.qs-manifesto__text strong { font-weight: var(--fw-bold); }

/* ───── DIAGRAMA — Marca no centro (estrela da página) ───── */
.qs-diagram {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8)) var(--gutter) clamp(var(--sp-6), 5vw, var(--sp-8));
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.qs-diagram__head {
  text-align: center;
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
  max-width: 36ch;
  margin-inline: auto;
}
.qs-diagram__eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-forest);
  margin-bottom: var(--sp-4);
}
.qs-diagram__title {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
}
.qs-diagram__title .amber { color: var(--hwg-amber); }
.qs-diagram__sub {
  margin-top: var(--sp-4);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0.65;
}

.qs-diagram__wheel {
  position: relative;
  width: min(92vw, 780px);
  aspect-ratio: 1;
  margin: 0 auto;
  color: var(--hwg-forest);
}
/* Override do .reveal default — wheel não anima opacity/transform direto, controla filhos */
.qs-diagram__wheel.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Linhas tracejadas conectando o centro a cada nó — estado inicial estático */
.qs-diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.qs-diagram__lines line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.45;
}
/* Animação dispara só quando o wheel entra na viewport */
.qs-diagram__wheel.is-visible .qs-diagram__lines line {
  animation: qsLineDraw 1.2s var(--ease-out-strong) forwards;
}
.qs-diagram__wheel.is-visible .qs-line--1 { animation-delay: 200ms; }
.qs-diagram__wheel.is-visible .qs-line--2 { animation-delay: 320ms; }
.qs-diagram__wheel.is-visible .qs-line--3 { animation-delay: 440ms; }
.qs-diagram__wheel.is-visible .qs-line--4 { animation-delay: 560ms; }
.qs-diagram__wheel.is-visible .qs-line--5 { animation-delay: 680ms; }
.qs-diagram__wheel.is-visible .qs-line--6 { animation-delay: 800ms; }
.qs-diagram__wheel.is-visible .qs-line--7 { animation-delay: 920ms; }
.qs-diagram__wheel.is-visible .qs-line--8 { animation-delay: 1040ms; }
@keyframes qsLineDraw {
  to { stroke-dashoffset: 0; }
}

/* Centro: símbolo HWG real (sem círculo) + anéis pulsantes + label eyebrow */
.qs-diagram__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 5;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}
.qs-diagram__wheel.is-visible .qs-diagram__core {
  animation: qsCoreIn 1.1s var(--ease-out-strong) 100ms forwards;
}
.qs-diagram__core-symbol {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 16px 36px rgba(12, 28, 44, 0.18));
}
.qs-diagram__core-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.7rem, 0.95vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hwg-ink);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  z-index: 3;
  background: var(--hwg-paper);
  padding: 0.45em 0.85em;
  border: 1px solid rgba(12, 28, 44, 0.12);
  box-shadow: 0 6px 18px rgba(12, 28, 44, 0.1);
  opacity: 0;
}
.qs-diagram__wheel.is-visible .qs-diagram__core-label {
  animation: qsCoreLabelIn 700ms var(--ease-out-soft) 1100ms forwards;
}
.qs-diagram__core-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(43, 102, 69, 0.22);
  pointer-events: none;
  opacity: 0;
}
.qs-diagram__wheel.is-visible .qs-diagram__core-ring {
  animation: qsRingIn 800ms var(--ease-out-soft) 1300ms forwards,
             qsRingPulse 4.5s ease-in-out 2.1s infinite;
}
.qs-diagram__core-ring--1 { inset: -28%; }
.qs-diagram__core-ring--2 {
  inset: -52%;
  border-color: rgba(43, 102, 69, 0.12);
}
.qs-diagram__wheel.is-visible .qs-diagram__core-ring--2 {
  animation-delay: 1500ms, 3.5s;
}
@keyframes qsCoreIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes qsCoreLabelIn {
  to { opacity: 1; }
}
@keyframes qsRingIn {
  to { opacity: 1; }
}
@keyframes qsRingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.55; }
}

/* 8 nodes — posições explícitas baseadas em trigonometria (radius ~38%) */
.qs-diagram__nodes {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.qs-diagram__node {
  position: absolute;
  transform: translate(-50%, -50%);
}
.qs-diagram__node--n  { top: 12%;   left: 50%;   }
.qs-diagram__node--ne { top: 23.1%; left: 76.9%; }
.qs-diagram__node--e  { top: 50%;   left: 88%;   }
.qs-diagram__node--se { top: 76.9%; left: 76.9%; }
.qs-diagram__node--s  { top: 88%;   left: 50%;   }
.qs-diagram__node--sw { top: 76.9%; left: 23.1%; }
.qs-diagram__node--w  { top: 50%;   left: 12%;   }
.qs-diagram__node--nw { top: 23.1%; left: 23.1%; }

/* Cards: visual arquitetural — sem border-radius + corner mark HWG como assinatura */
.qs-diagram__card {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--hwg-paper);
  border: 1.5px solid var(--hwg-forest);
  padding: clamp(0.8em, 1.1vw, 1em) clamp(1.15em, 1.5vw, 1.55em) clamp(0.8em, 1.1vw, 1em) clamp(1.75em, 2.2vw, 2.2em);
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--hwg-forest);
  opacity: 0;
  transform: scale(0.7);
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              transform 300ms var(--ease-out-strong),
              box-shadow var(--dur-base) var(--ease-out-soft);
}
.qs-diagram__wheel.is-visible .qs-diagram__card {
  animation: qsCardIn 700ms var(--ease-out-strong) forwards;
}

/* Corner mark HWG no canto superior esquerdo de cada card — assinatura replicada */
.qs-diagram__card-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.7em;
  height: 0.58em;
  background: var(--hwg-forest);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transition: background-color var(--dur-fast) var(--ease-out-soft);
}
.qs-diagram__card-text { position: relative; z-index: 1; }

@keyframes qsCardIn {
  to { opacity: 1; transform: scale(1); }
}
.qs-diagram__wheel.is-visible .qs-diagram__node--n  .qs-diagram__card { animation-delay: 1100ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--ne .qs-diagram__card { animation-delay: 1200ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--e  .qs-diagram__card { animation-delay: 1300ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--se .qs-diagram__card { animation-delay: 1400ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--s  .qs-diagram__card { animation-delay: 1500ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--sw .qs-diagram__card { animation-delay: 1600ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--w  .qs-diagram__card { animation-delay: 1700ms; }
.qs-diagram__wheel.is-visible .qs-diagram__node--nw .qs-diagram__card { animation-delay: 1800ms; }

/* Hover: card vira ink, corner mark vira âmbar (assinatura da marca completa) */
.qs-diagram__node:hover .qs-diagram__card {
  background: var(--hwg-ink);
  border-color: var(--hwg-ink);
  color: var(--hwg-paper);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 32px rgba(12, 28, 44, 0.22);
  cursor: default;
}
.qs-diagram__node:hover .qs-diagram__card-mark {
  background: var(--hwg-amber);
}

@media (max-width: 720px) {
  .qs-diagram__wheel {
    width: 100%;
  }
  .qs-diagram__card {
    font-size: 0.85rem;
    padding: 0.65em 0.95em 0.65em 1.55em;
  }
  .qs-diagram__core { width: 32%; }
  .qs-diagram__core-label { bottom: -38%; font-size: 0.62rem; letter-spacing: 0.28em; }
  .qs-diagram__node--n  { top: 8%; }
  .qs-diagram__node--ne { top: 20%;   left: 78%; }
  .qs-diagram__node--e  { top: 50%;   left: 92%; }
  .qs-diagram__node--se { top: 80%;   left: 78%; }
  .qs-diagram__node--s  { top: 92%; }
  .qs-diagram__node--sw { top: 80%;   left: 22%; }
  .qs-diagram__node--w  { top: 50%;   left: 8%; }
  .qs-diagram__node--nw { top: 20%;   left: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-diagram__core,
  .qs-diagram__core-ring,
  .qs-diagram__core-label,
  .qs-diagram__card,
  .qs-diagram__lines line {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .qs-diagram__core { transform: translate(-50%, -50%) !important; }
  .qs-diagram__core-label { transform: translateX(-50%) !important; }
  .qs-diagram__card { transform: none !important; }
}

/* ───── QUOTE DARK ───── */
.qs-quote {
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--gutter);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

/* Retrato Rodrigo como fundo sutil — à direita, integrado ao ink */
.qs-quote__bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(380px, 50%, 720px);
  object-fit: cover;
  object-position: center top;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  filter: grayscale(0.4) contrast(1.05);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.7) 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.7) 100%);
}
.qs-quote > *:not(.qs-quote__bg) { position: relative; z-index: 1; }

.qs-quote__title {
  font-size: clamp(2rem, 1.2rem + 3.8vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-regular);
  color: var(--hwg-on-ink);
  max-width: 18ch;
}
.qs-quote__title strong { font-weight: var(--fw-bold); color: var(--hwg-paper); }
.qs-quote__line {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease-out-strong),
              transform 800ms var(--ease-out-strong);
}
.qs-quote__title.is-visible .qs-quote__line { opacity: 1; transform: none; }
.qs-quote__title.is-visible .qs-quote__line:nth-child(1) { transition-delay: 0ms; }
.qs-quote__title.is-visible .qs-quote__line:nth-child(2) { transition-delay: 160ms; }
.qs-quote__title.is-visible .qs-quote__line:nth-child(3) { transition-delay: 320ms; }
.qs-quote__line--accent { color: var(--hwg-amber); font-weight: var(--fw-bold); }
/* sobrescreve animação default do .reveal no parent */
.qs-quote__title.reveal { opacity: 1; transform: none; transition: none; }

.qs-quote__body {
  align-self: end;
  padding-bottom: clamp(var(--sp-3), 2vw, var(--sp-5));
}
.qs-quote__body-lede {
  font-size: var(--t-lede);
  line-height: 1.4;
  margin-bottom: var(--sp-5);
  opacity: 0.85;
}
.qs-quote__body-strong {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  line-height: 1.45;
  font-weight: var(--fw-bold);
}
.qs-quote__body .amber { color: var(--hwg-amber); }

@media (max-width: 800px) {
  .qs-quote {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .qs-quote__title { max-width: 100%; }
}

/* ───── METÁFORA DO PRÉDIO (texto editorial + foto cliente) ───── */
.qs-building {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-9), 9vw, var(--sp-11)) clamp(var(--sp-6), 6vw, var(--sp-9));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  align-items: center;
  position: relative;
  overflow: hidden;
}

.qs-building__text {
  position: relative;
  z-index: 1;
  max-width: 48ch;
}

.qs-building__eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-forest);
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
  padding-left: clamp(var(--sp-4), 2vw, var(--sp-5));
  position: relative;
}
.qs-building__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(14px, 2vw, 22px);
  height: 1px;
  background: var(--hwg-forest);
}

.qs-building__lead {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.95rem);
  line-height: 1.32;
  letter-spacing: var(--tr-snug);
  font-weight: var(--fw-regular);
  color: var(--hwg-ink);
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
}

.qs-building__quote {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
  color: var(--hwg-ink);
  margin: 0 0 clamp(var(--sp-5), 3vw, var(--sp-7));
  padding-left: clamp(var(--sp-4), 2vw, var(--sp-5));
  border-left: 3px solid var(--hwg-amber);
}
.qs-building__quote .amber { color: var(--hwg-amber); }

.qs-building__body {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--hwg-ink);
  opacity: 0.75;
  font-weight: var(--fw-regular);
}
.qs-building__body .amber { color: var(--hwg-amber); font-weight: var(--fw-bold); }

/* Foto do cliente */
.qs-building__photo {
  position: relative;
  margin: 0;
  z-index: 1;
  max-width: 540px;
  justify-self: end;
  width: 100%;
}

/* Override do .reveal default: vamos animar via clip-path em vez de fade+slide */
.qs-building__photo.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.qs-building__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(440px, 72vh, 760px);
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.04);
  clip-path: inset(50% 50% 50% 50%);
  transition: clip-path 1.4s cubic-bezier(0.72, 0, 0.25, 1),
              filter 600ms var(--ease-out-soft),
              transform 600ms var(--ease-out-soft);
}
.qs-building__photo.is-visible img {
  clip-path: inset(0 0 0 0);
}
.qs-building__photo:hover img {
  filter: grayscale(0) contrast(1.06);
  transform: scale(1.02);
}

/* Corner marks na foto — animação: começam juntos no centro, se afastam para os cantos */
.qs-building__corner {
  position: absolute;
  display: block;
  width: clamp(38px, 3.5vw, 56px);
  aspect-ratio: 41/38;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.qs-building__corner--tl {
  top: clamp(-6px, -0.5vw, -3px);
  left: clamp(-6px, -0.5vw, -3px);
  background: var(--hwg-forest);
  transform: translate(80px, 80px) scale(0.5);
  transition: transform 1.3s cubic-bezier(0.72, 0, 0.25, 1) 200ms,
              opacity 700ms var(--ease-out-soft) 300ms;
}
.qs-building__corner--br {
  bottom: clamp(-6px, -0.5vw, -3px);
  right: clamp(-6px, -0.5vw, -3px);
  background: var(--hwg-amber);
  transform: translate(-80px, -80px) rotate(180deg) scale(0.5);
  transition: transform 1.3s cubic-bezier(0.72, 0, 0.25, 1) 300ms,
              opacity 700ms var(--ease-out-soft) 400ms;
}
.qs-building__photo.is-visible .qs-building__corner {
  opacity: 1;
}
.qs-building__photo.is-visible .qs-building__corner--tl {
  transform: translate(0, 0) scale(1);
}
.qs-building__photo.is-visible .qs-building__corner--br {
  transform: translate(0, 0) rotate(180deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .qs-building__photo img {
    clip-path: inset(0) !important;
    transition: none !important;
  }
  .qs-building__corner {
    opacity: 1 !important;
    transition: none !important;
  }
  .qs-building__corner--tl { transform: translate(0, 0) scale(1) !important; }
  .qs-building__corner--br { transform: translate(0, 0) rotate(180deg) scale(1) !important; }
}

/* Caption (label discreto da foto) */
.qs-building__caption {
  position: absolute;
  bottom: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  left: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  background: rgba(12, 28, 44, 0.82);
  color: var(--hwg-paper);
  padding: 0.7em 0.95em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  z-index: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.qs-building__caption-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.6;
}
.qs-building__caption-text {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

@media (max-width: 800px) {
  .qs-building {
    grid-template-columns: 1fr;
  }
  .qs-building__photo {
    justify-self: start;
    max-width: 100%;
  }
}

/* ───── O QUE ISSO GERA ───── */
.qs-result {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter);
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}
.qs-result__head {
  margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
  max-width: 40ch;
}
.qs-result__eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-forest);
  margin-bottom: clamp(var(--sp-3), 1.5vw, var(--sp-5));
  padding-left: clamp(var(--sp-4), 2vw, var(--sp-5));
  position: relative;
}
.qs-result__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(14px, 2vw, 22px);
  height: 1px;
  background: var(--hwg-forest);
}
.qs-result__title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-ink);
  margin: 0;
}
.qs-result__title .amber { color: var(--hwg-amber); }

.qs-result__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.qs-result__item {
  position: relative;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) clamp(var(--sp-4), 2vw, var(--sp-6));
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  min-height: clamp(180px, 18vw, 240px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color var(--dur-base) var(--ease-out-soft);
}
.qs-result__item:last-child { border-right: 0; }
.qs-result__item:hover { background-color: rgba(224, 114, 40, 0.04); }

.qs-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 2.8vw, 44px);
  height: clamp(34px, 2.8vw, 44px);
  color: var(--hwg-amber);
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
  transition: transform var(--dur-base) var(--ease-out-strong),
              color var(--dur-fast) var(--ease-out-soft);
}
.qs-result__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.qs-result__item:hover .qs-result__icon {
  transform: scale(1.12);
  color: var(--hwg-forest);
}
.qs-result__label {
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.1;
  color: var(--hwg-ink);
}

@media (max-width: 800px) {
  .qs-result__list { grid-template-columns: 1fr 1fr; }
  .qs-result__item:nth-child(2) { border-right: 0; }
  .qs-result__item:nth-child(3),
  .qs-result__item:nth-child(4) {
    border-top: 1px solid rgba(0, 0, 0, 0.18);
  }
}
@media (max-width: 480px) {
  .qs-result__list { grid-template-columns: 1fr; }
  .qs-result__item { border-right: 0; min-height: auto; }
  .qs-result__item:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, 0.18);
  }
}

/* ───── VÍDEO YOUTUBE ───── */
.qs-video {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-8), 8vw, var(--sp-11)) var(--gutter);
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}
.qs-video__head {
  text-align: center;
  margin: 0 auto clamp(var(--sp-6), 4vw, var(--sp-8));
  max-width: 40ch;
}
.qs-video__eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-forest);
  margin-bottom: clamp(var(--sp-3), 1.5vw, var(--sp-4));
}
.qs-video__title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-ink);
  margin: 0;
}
.qs-video__title .amber { color: var(--hwg-amber); }

.qs-video__player {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}
.qs-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--hwg-ink);
  overflow: hidden;
}
.qs-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.qs-video__mark {
  position: absolute;
  width: clamp(36px, 3vw, 56px);
  aspect-ratio: 41/38;
  pointer-events: none;
  z-index: 2;
}
.qs-video__mark--tl {
  top: clamp(-12px, -1vw, -8px);
  left: clamp(-12px, -1vw, -8px);
}
.qs-video__mark--br {
  bottom: clamp(-12px, -1vw, -8px);
  right: clamp(-12px, -1vw, -8px);
  transform: rotate(180deg);
}


/* ───── RODRIGO ───── */
.qs-rodrigo {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-8), 8vw, var(--sp-11)) var(--gutter) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(var(--sp-6), 6vw, var(--sp-10));
  align-items: end;
  position: relative;
}

.qs-rodrigo__photo {
  position: relative;
  max-width: 480px;
  width: 100%;
  filter: grayscale(1) contrast(1.05);
}
.qs-rodrigo__photo img {
  width: 100%;
  height: auto;
  display: block;
}
.qs-rodrigo__corner {
  position: absolute;
  display: block;
  width: clamp(32px, 3vw, 48px);
  aspect-ratio: 41/38;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  z-index: 2;
}
.qs-rodrigo__corner--tl {
  top: clamp(-6px, -0.5vw, -2px);
  left: clamp(-6px, -0.5vw, -2px);
  background: var(--hwg-forest);
}
.qs-rodrigo__corner--tr {
  top: clamp(-6px, -0.5vw, -2px);
  right: clamp(-6px, -0.5vw, -2px);
  background: var(--hwg-amber);
  transform: rotate(90deg);
}

.qs-rodrigo__bio {
  padding-bottom: clamp(var(--sp-8), 7vw, var(--sp-11));
}
.qs-rodrigo__role {
  font-size: var(--t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.55;
  margin-bottom: var(--sp-3);
}
.qs-rodrigo__name {
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 0.98;
  color: var(--hwg-ink);
  margin-bottom: var(--sp-3);
}
.qs-rodrigo__ceo {
  font-size: var(--t-lede);
  font-weight: var(--fw-regular);
  color: var(--hwg-ink);
  opacity: 0.8;
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
  padding-bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.qs-rodrigo__stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.qs-rodrigo__stats li {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--hwg-ink);
  padding-left: 1.4em;
  position: relative;
}
.qs-rodrigo__stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85em;
  height: 0.85em;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transform: rotate(180deg);
}
.qs-rodrigo__stats li strong { font-weight: var(--fw-bold); }

.qs-rodrigo__signature {
  display: block;
  width: clamp(32px, 3vw, 48px);
  height: auto;
  margin-top: clamp(var(--sp-6), 4vw, var(--sp-8));
  opacity: 0.4;
}

@media (max-width: 800px) {
  .qs-rodrigo {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .qs-rodrigo__photo { max-width: 360px; }
}

/* ───── REVEAL ───── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out-strong),
              transform 900ms var(--ease-out-strong);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════
   PÁGINA LIVRO MARCA (.lm-*)
   Conceito editorial: cada seção é um "capítulo" do Livro Marca.
   Cor temática: FOREST (verde institucional). Acentos âmbar.
   ═══════════════════════════════════════════════════════════ */

/* ───── HERO — Banner editorial 2 colunas (texto + vídeo) ───── */
.lm-hero {
  position: relative;
  margin-top: var(--header-h);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6)) var(--gutter);
  background: var(--hwg-paper);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
  height: clamp(560px, 70vh, 680px);
  max-height: 680px;
  overflow: hidden;
}

.lm-hero__text {
  position: relative;
  max-width: 100%;
  align-self: start;
  padding-top: clamp(var(--sp-5), 3.5vw, var(--sp-7));
}
.lm-hero__mark {
  display: block;
  margin-bottom: clamp(var(--sp-3), 1.4vw, var(--sp-4));
  opacity: 0;
  transform: translateY(-8px);
  animation: lmFadeDown 700ms var(--ease-out-soft) 300ms forwards;
}

.lm-hero__title {
  /* mesma hierarquia/escala da página Quem Somos — maior e mais grossa */
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.8rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 0.96;
  color: var(--hwg-ink);
  margin: 0;
  text-wrap: balance;
}
.lm-hero__line {
  display: block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(28px);
  animation: lmHeroLineIn 900ms var(--ease-out-strong) forwards;
}
.lm-hero__line:nth-child(1) { animation-delay: 200ms; }
.lm-hero__line:nth-child(2) { animation-delay: 360ms; }
.lm-hero__line:nth-child(3) { animation-delay: 520ms; }
.lm-hero__line:nth-child(4) { animation-delay: 680ms; }
.lm-hero__line--accent {
  color: var(--hwg-ink);
  font-weight: var(--fw-bold);
}
.lm-hero__line--accent em {
  font-style: italic;
  color: var(--hwg-amber);
  font-weight: var(--fw-bold);
}
@keyframes lmHeroLineIn {
  to { opacity: 1; transform: none; }
}
@keyframes lmFadeDown {
  to { opacity: 1; transform: none; }
}

.lm-hero__sub {
  font-size: clamp(0.96rem, 0.88rem + 0.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--hwg-ink);
  opacity: 0.75;
  margin-top: clamp(var(--sp-4), 2vw, var(--sp-5));
  max-width: 54ch;
  letter-spacing: var(--tr-snug);
  font-weight: var(--fw-regular);
}
.lm-hero__sub strong {
  color: var(--hwg-forest);
  font-weight: var(--fw-bold);
}

/* Foto/Vídeo do Hero */
.lm-hero__photo {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 640px;
  justify-self: end;
  align-self: end;
  filter: contrast(1.02);
  aspect-ratio: 4/5;
  height: 680px;
  max-height: 680px;
  overflow: hidden;
  background: var(--hwg-paper);
}
.lm-hero__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  clip-path: inset(50%);
  transition: clip-path 1.4s cubic-bezier(0.72, 0, 0.25, 1) 600ms;
}
.lm-hero__photo.is-loaded img,
.lm-hero img { clip-path: inset(0); }

/* Vídeo do hero — autoplay loop muted */
.lm-hero__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--hwg-paper);
  opacity: 0;
  animation: lmVideoFadeIn 1.4s cubic-bezier(0.72, 0, 0.25, 1) 600ms forwards;
}
@keyframes lmVideoFadeIn {
  to { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   METODOLOGIA HWG — flat editorial · 3 dimensões interativas
   ═══════════════════════════════════════════════════════════ */
.lm-method {
  position: relative;
  background: var(--hwg-paper);
  padding: clamp(var(--sp-9), 9vw, var(--sp-11)) var(--gutter);
}

/* ───── HEAD (centralizado · padrão dos demais títulos) ───── */
.lm-method__head {
  max-width: 60ch;
  margin: 0 auto clamp(var(--sp-8), 6vw, var(--sp-9));
  text-align: center;
}

.lm-method__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--t-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-forest);
  margin-bottom: clamp(var(--sp-4), 2.2vw, var(--sp-5));
}
.lm-method__eyebrow-mark {
  display: inline-block;
  width: 24px;
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  flex: 0 0 auto;
}
.lm-method__eyebrow--dark { color: var(--hwg-on-ink); opacity: 0.85; }

.lm-method__title {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-ink);
  margin: 0;
}
.lm-method__title .forest { color: var(--hwg-forest); }

.lm-method__intro {
  margin: clamp(var(--sp-4), 2vw, var(--sp-5)) auto 0;
  max-width: 54ch;
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--hwg-ink);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   COMPASS — 2 colunas: âncora à esquerda + 3 tópicos à direita
   SVG sobre os dois desenha conexões marca → dimensões
   ═══════════════════════════════════════════════════════════ */
.lm-method__compass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.7fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}

/* ───── ANCHOR (esquerda · símbolo + "marca" + frase) ───── */
.lm-method__anchor {
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) 0;
}

.lm-method__anchor-symbol {
  position: relative;
  width: clamp(86px, 7.5vw, 116px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.lm-method__anchor-symbol img {
  position: relative;
  z-index: 1;
  width: 64%;
  height: 64%;
  object-fit: contain;
}
.lm-method__anchor-ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  pointer-events: none;
}
.lm-method__anchor-ring--1 {
  border: 1px solid rgba(43, 102, 69, 0.22);
  animation: lmMethodRingPulse 5s ease-in-out infinite;
}
.lm-method__anchor-ring--2 {
  inset: -18px;
  border: 1px dashed rgba(16, 22, 30, 0.10);
  animation: lmMethodRingRotate 60s linear infinite;
}
@keyframes lmMethodRingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.55; }
}
@keyframes lmMethodRingRotate {
  to { transform: rotate(360deg); }
}

.lm-method__anchor-word {
  margin: clamp(var(--sp-5), 3vw, var(--sp-6)) 0 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.55rem, 1rem + 1.3vw, 2.3rem);
  line-height: 1;
  color: var(--hwg-ink);
  letter-spacing: 0.04em;
  display: inline-flex;
  gap: 0.05em;
}
.lm-method__anchor-word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out-soft),
              transform 600ms var(--ease-out-soft);
}
.lm-method__compass.is-visible .lm-method__anchor-word span { opacity: 1; transform: none; }
.lm-method__compass.is-visible .lm-method__anchor-word span:nth-child(1) { transition-delay: 500ms; }
.lm-method__compass.is-visible .lm-method__anchor-word span:nth-child(2) { transition-delay: 600ms; }
.lm-method__compass.is-visible .lm-method__anchor-word span:nth-child(3) { transition-delay: 700ms; }
.lm-method__compass.is-visible .lm-method__anchor-word span:nth-child(4) { transition-delay: 800ms; }
.lm-method__compass.is-visible .lm-method__anchor-word span:nth-child(5) { transition-delay: 900ms; }

.lm-method__anchor-quote {
  margin: clamp(var(--sp-4), 2.4vw, var(--sp-5)) 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms 1100ms, transform 700ms 1100ms;
  max-width: 22ch;
  line-height: 1.6;
}
.lm-method__compass.is-visible .lm-method__anchor-quote {
  opacity: 0.45;
  transform: none;
}

/* ───── CONNECTORS (linhas SVG desenhadas no scroll) ───── */
.lm-method__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.lm-method__connector {
  fill: none;
  stroke: rgba(16, 22, 30, 0.18);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out-strong),
              stroke 360ms ease,
              stroke-width 360ms ease,
              opacity 360ms ease;
}
.lm-method__compass.is-visible .lm-method__connector { stroke-dashoffset: 0; }
.lm-method__compass.is-visible .lm-method__connector--1 { transition-delay: 700ms; }
.lm-method__compass.is-visible .lm-method__connector--2 { transition-delay: 900ms; }
.lm-method__compass.is-visible .lm-method__connector--3 { transition-delay: 1100ms; }

/* Hover em um tópico acende sua linha (e atenua as outras) — :has() moderno */
.lm-method__compass:has(.lm-method__dim--1:hover) .lm-method__connector--1,
.lm-method__compass:has(.lm-method__dim--1:focus-visible) .lm-method__connector--1 {
  stroke: var(--hwg-ink); stroke-width: 2.2;
}
.lm-method__compass:has(.lm-method__dim--2:hover) .lm-method__connector--2,
.lm-method__compass:has(.lm-method__dim--2:focus-visible) .lm-method__connector--2 {
  stroke: var(--hwg-forest); stroke-width: 2.2;
}
.lm-method__compass:has(.lm-method__dim--3:hover) .lm-method__connector--3,
.lm-method__compass:has(.lm-method__dim--3:focus-visible) .lm-method__connector--3 {
  stroke: var(--hwg-amber); stroke-width: 2.2;
}
.lm-method__compass:has(.lm-method__dim--1:hover) .lm-method__connector--2,
.lm-method__compass:has(.lm-method__dim--1:hover) .lm-method__connector--3,
.lm-method__compass:has(.lm-method__dim--2:hover) .lm-method__connector--1,
.lm-method__compass:has(.lm-method__dim--2:hover) .lm-method__connector--3,
.lm-method__compass:has(.lm-method__dim--3:hover) .lm-method__connector--1,
.lm-method__compass:has(.lm-method__dim--3:hover) .lm-method__connector--2 { opacity: 0.25; }

/* ───── DIMENSIONS (direita · 3 linhas) ───── */
.lm-method__dimensions {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0;
}

/* Editorial: cada dimensão separada por uma linha em cima e embaixo (sem caixa) */
.lm-method__dim {
  position: relative;
  display: grid;
  grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto;
  gap: clamp(var(--sp-4), 2.2vw, var(--sp-5));
  align-items: center;
  padding: clamp(var(--sp-5), 2.6vw, var(--sp-6)) clamp(var(--sp-2), 1vw, var(--sp-3));
  padding-left: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(16, 22, 30, 0.16);
  cursor: default;
  outline: none;
  isolation: isolate;
  transition: transform 500ms var(--ease-out-soft),
              border-color 400ms ease;
}
.lm-method__dim:last-child { border-bottom: 1px solid rgba(16, 22, 30, 0.16); }

.lm-method__dim--1 { color: var(--hwg-ink); }
.lm-method__dim--2 { color: var(--hwg-forest); }
.lm-method__dim--3 { color: var(--hwg-amber); }

/* Connection dot — onde a linha SVG encontra o card */
.lm-method__dim-dot {
  position: absolute;
  left: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hwg-paper);
  border: 2px solid currentColor;
  transform: translateY(-50%);
  z-index: 3;
  transition: transform 300ms var(--ease-out-strong),
              background 300ms ease,
              box-shadow 300ms ease;
}

.lm-method__dim:hover,
.lm-method__dim:focus-visible {
  transform: translateX(6px);
  border-top-color: currentColor;
}
.lm-method__dim:hover .lm-method__dim-dot,
.lm-method__dim:focus-visible .lm-method__dim-dot {
  background: currentColor;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 12%, transparent);
}
.lm-method__dim:hover .lm-method__dim-arrow,
.lm-method__dim:focus-visible .lm-method__dim-arrow {
  transform: translateX(8px);
  color: currentColor;
}
.lm-method__dim:hover .lm-method__dim-num,
.lm-method__dim:focus-visible .lm-method__dim-num {
  opacity: 1;
}

.lm-method__dim-num {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: currentColor;
  opacity: 0.88;
  transition: opacity 400ms;
}

.lm-method__dim-body {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
}

.lm-method__dim-name {
  font-family: var(--ff-sans);
  font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.8rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  color: var(--hwg-ink);
  margin: 0;
  line-height: 1.05;
}
.lm-method__dim-desc {
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.05rem);
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0.72;
  margin: 0;
  max-width: 42ch;
}
.lm-method__dim-desc strong {
  font-weight: var(--fw-bold);
  color: var(--hwg-ink);
  opacity: 1;
}

.lm-method__dim-arrow {
  font-family: var(--ff-sans);
  font-size: clamp(1.3rem, 0.9rem + 0.7vw, 1.7rem);
  color: rgba(16, 22, 30, 0.25);
  transition: transform 400ms var(--ease-out-strong), color 300ms ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lm-method__dim,
  .lm-method__dim-dot,
  .lm-method__dim-arrow,
  .lm-method__dim-num,
  .lm-method__anchor-word span,
  .lm-method__anchor-quote,
  .lm-method__connector {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .lm-method__anchor-ring--1,
  .lm-method__anchor-ring--2 {
    animation: none !important;
  }
}

/* ───── O INSTRUMENTO (seção dark) ───── */
.lm-instrument {
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  padding: clamp(var(--sp-9), 9vw, var(--sp-11)) var(--gutter);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lm-instrument__bg {
  position: absolute;
  top: 50%;
  right: clamp(-22vw, -16vw, -10vw);
  transform: translateY(-50%);
  width: clamp(360px, 44vw, 720px);
  pointer-events: none;
  opacity: 0.05;
  filter: brightness(0) invert(1);
}
.lm-instrument__bg img { width: 100%; height: auto; display: block; }

.lm-instrument__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
}

.lm-instrument__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: stretch;
  margin-bottom: clamp(var(--sp-8), 6vw, var(--sp-10));
}
.lm-instrument__head-text {
  align-self: center;
  min-width: 0;
}
.lm-instrument__title {
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3.2rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.08;
  color: var(--hwg-on-ink);
}
.lm-instrument__title-line {
  display: block;
  white-space: nowrap;
}
.lm-instrument__title .amber { color: var(--hwg-amber); }

/* Typewriter — chars começam ocultos até o JS revelar */
.lm-instrument__title[data-typewriter] .lm-tw-char,
.lm-instrument__title[data-typewriter] br {
  /* setup feito via JS (display:none até a vez) */
}
.lm-tw-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.78em;
  background: var(--hwg-amber);
  margin-left: 0.08em;
  vertical-align: -0.02em;
  animation: lm-tw-blink 760ms steps(2) infinite;
}
.lm-tw-caret.is-done {
  animation: none;
  opacity: 0;
  transition: opacity 700ms ease 1100ms;
}
@keyframes lm-tw-blink {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-tw-caret { animation: none; opacity: 0; }
}
.lm-instrument__visual {
  margin-top: calc(-1 * clamp(var(--sp-9), 9vw, var(--sp-11)));
  margin-bottom: calc(-1 * clamp(var(--sp-8), 6vw, var(--sp-10)));
  align-self: stretch;
  width: 100%;
  overflow: hidden;
}
.lm-instrument__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
}

.lm-instrument__index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(237, 234, 226, 0.18);
}
.lm-instrument__index li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  align-items: center;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) 0;
  border-bottom: 1px solid rgba(237, 234, 226, 0.18);
  font-size: clamp(1.25rem, 0.95rem + 1.6vw, 2.4rem);
  font-weight: var(--fw-regular);
  line-height: 1.18;
  letter-spacing: var(--tr-snug);
  color: var(--hwg-on-ink);
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.lm-instrument__index li:hover {
  color: var(--hwg-amber);
}
.lm-instrument__index-mark {
  display: block;
  width: clamp(28px, 2.2vw, 38px);
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   COMO FUNCIONA — Theater dos 3 Movimentos
   Acordeão horizontal CSS-only (radio + :has())
   ═══════════════════════════════════════════════════════════ */
.lm-process {
  position: relative;
  background: var(--hwg-paper);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--gutter);
}

/* Radio inputs invisíveis controlam o estado */
.lm-process__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* ───── HEAD ───── */
.lm-process__head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(var(--sp-7), 6vw, var(--sp-9));
}
.lm-process__title {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-ink);
  margin: clamp(var(--sp-4), 2.2vw, var(--sp-5)) 0 0;
}
.lm-process__title .forest { color: var(--hwg-forest); }
.lm-process__title-line {
  display: block;
  white-space: nowrap;
}

/* Verbos como labels-atalho clicáveis */
.lm-process__verbs {
  margin-top: clamp(var(--sp-5), 3vw, var(--sp-6));
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 0.6em;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  letter-spacing: 0.04em;
  color: var(--hwg-ink);
}
.lm-process__verb {
  position: relative;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 350ms ease, color 350ms ease;
  padding: 0.1em 0;
}
.lm-process__verb strong {
  font-weight: var(--fw-bold);
}
.lm-process__verb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--ease-out-strong);
}
.lm-process__verb:hover { opacity: 0.9; }
.lm-process:has(#act-1:checked) .lm-process__verb--1,
.lm-process:has(#act-2:checked) .lm-process__verb--2,
.lm-process:has(#act-3:checked) .lm-process__verb--3 {
  opacity: 1;
}
.lm-process:has(#act-1:checked) .lm-process__verb--1 { color: var(--hwg-ink); }
.lm-process:has(#act-2:checked) .lm-process__verb--2 { color: var(--hwg-forest); }
.lm-process:has(#act-3:checked) .lm-process__verb--3 { color: var(--hwg-amber); }
.lm-process:has(#act-1:checked) .lm-process__verb--1::after,
.lm-process:has(#act-2:checked) .lm-process__verb--2::after,
.lm-process:has(#act-3:checked) .lm-process__verb--3::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════════════
   THEATER GRID — 3 painéis acordeão
   ═══════════════════════════════════════════════════════════ */
.lm-acts {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background: var(--hwg-ink);
  height: clamp(540px, 65vh, 720px);
  transition: grid-template-columns 800ms cubic-bezier(0.65, 0, 0.35, 1);
  border: 1px solid rgba(16, 22, 30, 0.08);
}
.lm-process:has(#act-1:checked) .lm-acts { grid-template-columns: 3.6fr 1fr 1fr; }
.lm-process:has(#act-2:checked) .lm-acts { grid-template-columns: 1fr 3.6fr 1fr; }
.lm-process:has(#act-3:checked) .lm-acts { grid-template-columns: 1fr 1fr 3.6fr; }

/* ───── PAINEL DO ATO ───── */
.lm-act {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hwg-ink);
  min-width: 0;
}

/* Cor-tema por ato */
.lm-act--1 { --act-color: var(--hwg-ink);   --act-color-soft: #1c2a3b; }
.lm-act--2 { --act-color: var(--hwg-forest); --act-color-soft: #2C6644; }
.lm-act--3 { --act-color: var(--hwg-amber);  --act-color-soft: #E07228; }

/* Label invisível cobre painel todo (clique ativa o ato) */
.lm-act__hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Foto de fundo — duotone via filter + mix */
.lm-act__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
  filter: grayscale(1) contrast(1.08) brightness(0.85);
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out-soft),
              filter 700ms ease;
}

/* Gradiente colorido — varia por ato */
.lm-act__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 500ms ease, background 500ms ease;
}
.lm-act--1 .lm-act__shade {
  background:
    linear-gradient(180deg, rgba(16,22,30,0.35) 0%, rgba(16,22,30,0.92) 78%),
    linear-gradient(0deg, rgba(16,22,30,0.5), rgba(16,22,30,0.5));
}
.lm-act--2 .lm-act__shade {
  background:
    linear-gradient(180deg, rgba(43,102,69,0.55) 0%, rgba(16,22,30,0.94) 78%),
    linear-gradient(0deg, rgba(16,22,30,0.4), rgba(16,22,30,0.4));
}
.lm-act--3 .lm-act__shade {
  background:
    linear-gradient(180deg, rgba(224,114,40,0.5) 0%, rgba(16,22,30,0.93) 78%),
    linear-gradient(0deg, rgba(16,22,30,0.4), rgba(16,22,30,0.4));
}

/* Quando ATIVO: foto fica mais nítida e ampla */
.lm-process:has(#act-1:checked) .lm-act--1 .lm-act__bg,
.lm-process:has(#act-2:checked) .lm-act--2 .lm-act__bg,
.lm-process:has(#act-3:checked) .lm-act--3 .lm-act__bg {
  filter: grayscale(0.15) contrast(1.05) brightness(0.95);
  transform: scale(1);
}
/* Quando INATIVO (outro ativo): foto fica mais escura */
.lm-process:has(#act-1:checked) .lm-act--2 .lm-act__shade,
.lm-process:has(#act-1:checked) .lm-act--3 .lm-act__shade,
.lm-process:has(#act-2:checked) .lm-act--1 .lm-act__shade,
.lm-process:has(#act-2:checked) .lm-act--3 .lm-act__shade,
.lm-process:has(#act-3:checked) .lm-act--1 .lm-act__shade,
.lm-process:has(#act-3:checked) .lm-act--2 .lm-act__shade {
  background:
    linear-gradient(180deg, rgba(16,22,30,0.65) 0%, rgba(16,22,30,0.95) 70%),
    linear-gradient(0deg, rgba(16,22,30,0.5), rgba(16,22,30,0.5));
}

/* Hover painel inativo: pequena pista visual */
.lm-act:hover .lm-act__bg {
  transform: scale(1.04);
  filter: grayscale(0.6) contrast(1.05) brightness(0.95);
}

/* ───── INNER (conteúdo sobre a foto) ───── */
.lm-act__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-7)) clamp(var(--sp-4), 2.4vw, var(--sp-6))
           clamp(var(--sp-5), 2.5vw, var(--sp-7)) clamp(var(--sp-7), 5vw, var(--sp-9));
  color: var(--hwg-on-ink);
}

/* HEAD: wrapper apenas estrutural — verb-name é spine absoluto */
.lm-act__head {
  display: contents;
}

/* SPINE — verbo como lombada vertical lowercase, começando do canto inferior */
.lm-act__verb-name {
  position: absolute;
  left: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  bottom: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-sans);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 0.9;
  text-transform: lowercase;
  color: var(--hwg-on-ink);
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  transition: color 400ms;
}

/* Quando ATIVO: verbo ganha cor da dimensão */
.lm-process:has(#act-1:checked) .lm-act--1 .lm-act__verb-name { color: var(--hwg-on-ink); }
.lm-process:has(#act-2:checked) .lm-act--2 .lm-act__verb-name { color: #6fc28d; }
.lm-process:has(#act-3:checked) .lm-act--3 .lm-act__verb-name { color: var(--hwg-amber); }

/* BODY: conteúdo expandido (aparece ao ativar) */
.lm-act__body {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms 200ms ease, transform 600ms 200ms var(--ease-out-strong);
  pointer-events: none;
  max-width: 300px;
  margin-top: 0;
}
.lm-process:has(#act-1:checked) .lm-act--1 .lm-act__body,
.lm-process:has(#act-2:checked) .lm-act--2 .lm-act__body,
.lm-process:has(#act-3:checked) .lm-act--3 .lm-act__body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Tamanho unificado dos parágrafos brancos */
.lm-act__sub,
.lm-act__list li,
.lm-act__prose {
  font-size: clamp(0.82rem, 0.74rem + 0.3vw, 0.96rem);
  line-height: 1.55;
  color: var(--hwg-on-ink);
  opacity: 0.85;
}

/* SUB — colado no topo + régua âmbar acima + largura estreita */
.lm-act__sub {
  margin: 0 0 clamp(var(--sp-4), 2.2vw, var(--sp-5));
  padding-top: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  border-top: 1px solid var(--hwg-amber);
  max-width: 22ch;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-snug);
}

.lm-act__group {
  margin-bottom: clamp(var(--sp-4), 2.2vw, var(--sp-5));
}
.lm-act__group:last-child {
  margin-bottom: 0;
}

/* LEAD — régua âmbar curta + label tracked discreto */
.lm-act__lead {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: var(--hwg-on-ink);
  opacity: 0.65;
  margin: 0 0 clamp(var(--sp-2), 1.2vw, var(--sp-3));
}
.lm-act__lead::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--hwg-amber);
  flex-shrink: 0;
}

/* LIST — bullet vira ponto fino na cor da dimensão */
.lm-act__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-1), 0.8vw, var(--sp-2));
}
.lm-act__list li {
  padding-left: 0.95em;
  position: relative;
}
.lm-act__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hwg-on-ink);
  opacity: 0.85;
}
.lm-act__list li strong {
  font-weight: var(--fw-bold);
  color: var(--hwg-on-ink);
  opacity: 1;
}

/* PROSE — Personalidade como prosa fluida (substitui chips) */
.lm-act__prose {
  margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lm-acts,
  .lm-act__bg,
  .lm-act__body,
  .lm-act__shade,
  .lm-process__verb::after {
    transition: none !important;
    transform: none !important;
  }
}

/* ───── O QUE MUDA — Manifesto tipográfico ───── */
.lm-change {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter);
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}
.lm-change__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
  margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
}
.lm-change__head-text {
  max-width: 28ch;
}
.lm-change__title {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-ink);
}
.lm-change__title-line {
  display: block;
  white-space: nowrap;
}
.lm-change__title .forest { color: var(--hwg-forest); }
.lm-change__visual {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 520px;
}
.lm-change__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(280px, 32vw, 440px);
  object-fit: contain;
  object-position: right center;
}

.lm-change__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lm-change__item {
  display: grid;
  grid-template-columns: clamp(60px, 7vw, 100px) 1fr;
  align-items: center;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: clamp(var(--sp-5), 4vw, var(--sp-7)) 0;
  position: relative;
}
.lm-change__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.lm-change__num {
  font-size: clamp(0.85rem, 0.8rem + 0.4vw, 1.1rem);
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  color: var(--hwg-amber);
  font-feature-settings: "tnum";
  border-top: 1px solid var(--hwg-amber);
  padding-top: 0.5em;
  align-self: start;
}
.lm-change__text {
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-ink);
  transition: color var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-strong);
}
.lm-change__text em {
  font-style: italic;
  color: var(--hwg-amber);
  font-weight: var(--fw-bold);
}
.lm-change__item:hover .lm-change__text {
  transform: translateX(8px);
}
.lm-change__item:hover .lm-change__num {
  color: var(--hwg-forest);
  border-top-color: var(--hwg-forest);
}

/* ───── CONSULTORIA HWG — CLAREZA ESTRATÉGICA (upsell card) ───── */
.lm-consult {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--gutter) clamp(var(--sp-9), 8vw, var(--sp-11));
}

.lm-consult__card {
  position: relative;
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  padding: clamp(var(--sp-7), 6vw, var(--sp-10)) clamp(var(--sp-6), 5vw, var(--sp-9));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  row-gap: clamp(var(--sp-2), 1.5vw, var(--sp-3));
  grid-template-areas:
    "head list"
    "cta  photo";
  align-items: start;
  overflow: hidden;
  isolation: isolate;
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: clamp(380px, 40vw, 480px);
}
.lm-consult__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(60px, 5vw, 80px);
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  z-index: 1;
}
.lm-consult__mark--br {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  background: var(--hwg-forest);
  transform: rotate(180deg);
}

.lm-consult__head { position: relative; z-index: 1; grid-area: head; align-self: start; }
.lm-consult__eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-amber);
  margin-bottom: clamp(var(--sp-4), 2.5vw, var(--sp-5));
}
.lm-consult__title {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  color: var(--hwg-on-ink);
  margin-bottom: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.lm-consult__title .amber { color: var(--hwg-amber); }
.lm-consult__sub {
  font-size: var(--t-lede);
  font-weight: var(--fw-regular);
  color: var(--hwg-on-ink);
  opacity: 0.85;
  line-height: 1.4;
  max-width: 28ch;
}

.lm-consult__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.5vw, var(--sp-4));
  position: relative;
  z-index: 1;
  grid-area: list;
  align-self: start;
}
.lm-consult__photo {
  grid-area: photo;
  margin: 0;
  align-self: end;
  justify-self: end;
  width: 100%;
  position: relative;
  z-index: 0;
  /* Sangra pra borda direita e inferior do card; sobe pra perto dos tópicos */
  margin-right: calc(-1 * clamp(var(--sp-6), 5vw, var(--sp-9)));
  margin-bottom: calc(-1 * clamp(var(--sp-7), 6vw, var(--sp-10)));
  margin-top: calc(-1 * clamp(var(--sp-7), 5vw, var(--sp-9)));
}
.lm-consult__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(380px, 45vw, 560px);
  object-fit: contain;
  object-position: right bottom;
}
.lm-consult__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85em;
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
  color: var(--hwg-on-ink);
  letter-spacing: var(--tr-snug);
  padding-bottom: clamp(var(--sp-3), 1.5vw, var(--sp-4));
  border-bottom: 1px solid rgba(237, 234, 226, 0.15);
}
.lm-consult__list li:last-child { border-bottom: 0; }
.lm-consult__dot {
  display: block;
  width: 0.7em;
  height: 0.6em;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transform: rotate(180deg);
}

.lm-consult__cta {
  position: relative;
  z-index: 2;
  grid-area: cta;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.85ch;
  padding: clamp(0.95rem, 1vw, 1.15rem) clamp(1.3rem, 1.5vw, 1.8rem);
  margin-top: clamp(var(--sp-5), 3.5vw, var(--sp-7));
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--hwg-amber);
  color: var(--hwg-paper);
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.lm-consult__cta:hover {
  background: #C45F1F;
  transform: translateY(-2px);
}
.lm-consult__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.lm-consult__cta:hover .lm-consult__cta-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .lm-hero__mark,
  .lm-hero__line,
  .lm-hero__photo img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    clip-path: inset(0) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — UI/UX refinements para touch + small screens
   ═══════════════════════════════════════════════════════════ */

/* ───── TABLET (≤ 1024px) ───── */
@media (max-width: 1024px) {
  /* Header mobile: tagline desaparece (u-hide-mobile já faz isso ≤720px), mas em tablet também ajustamos */
  .site-header__center { display: none; }
  .site-header {
    grid-template-columns: 1fr auto;
  }
}

/* ───── MOBILE LARGE (≤ 768px) ───── */
@media (max-width: 768px) {
  /* Header: reduzir altura + touch target maior */
  :root {
    --header-h: 72px;
  }
  .site-header {
    padding-inline: var(--gutter);
  }

  /* Hambúrguer: 44×44 mínimo (HIG) com área de toque clara */
  .menu-btn {
    width: 44px;
    height: 44px;
  }
  .menu-btn .icon {
    width: 24px;
    height: 14px;
  }
  .menu-btn .icon::before,
  .menu-btn .icon::after {
    height: 1.8px;
  }

  /* CTA do header mobile: compacto, fixo no canto direito */
  .site-header__right {
    padding-right: 0;
    justify-self: end;
  }
  .header-cta {
    font-size: 0.88rem;
    gap: 0.55ch;
    padding: 0.5rem 0;
    min-height: 44px;
  }
  .header-cta .cta-mark {
    width: 14px;
    height: 12px;
  }

  /* HERO mobile: TEXTO PRIMEIRO, imagem depois (ordem invertida) */
  .hero {
    height: auto;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
  }
  .hero__overlay {
    position: relative;
    width: 100%;
    order: 1;
    padding: clamp(var(--sp-6), 7vw, var(--sp-9)) var(--gutter) clamp(var(--sp-5), 4vw, var(--sp-6));
  }
  .hero__stage {
    position: relative;
    width: 100%;
    order: 2;
    height: 34vh;
    min-height: 220px;
    max-height: 340px;
    flex: 1;
  }
  .hero__symbol {
    width: clamp(160px, 46%, 260px);
  }
  .hero__title {
    font-size: clamp(1.85rem, 1.2rem + 3.5vw, 2.8rem);
    min-height: 0;
    max-width: 100%;
  }
  /* Corner mark âmbar acima do título */
  .hero__overlay .corner-mark {
    margin-bottom: clamp(var(--sp-4), 3vw, var(--sp-5));
  }
  .hero__scroll-cue {
    width: 40px;
    height: 40px;
    bottom: clamp(var(--sp-4), 3vw, var(--sp-5));
    left: clamp(var(--sp-4), 3vw, var(--sp-5));
  }
  .hero__scroll-arrow {
    width: 14px;
    height: 14px;
    border-right-width: 1.8px;
    border-bottom-width: 1.8px;
  }

  /* TIMELINE mobile: title menor, parallax mais leve */
  .timeline__title {
    font-size: clamp(1.45rem, 1.1rem + 2vw, 2rem);
    max-width: 28ch;
  }
  .timeline__row--right { padding-left: 8vw; }
  .timeline__row--left { margin-left: -8vw; }

  /* FILOSOFIA mobile: head em coluna, padding lateral menor */
  .filosofia {
    padding: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--gutter) clamp(var(--sp-8), 7vw, var(--sp-10));
  }
  .filosofia__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-top: 0;
    margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
  }
  .filosofia__eyebrow { padding-top: 0; }
  .filosofia__title { max-width: 100%; font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem); }

  /* Cards stack vertical + divisor horizontal */
  .filosofia__cards {
    grid-template-columns: 1fr;
  }
  .filosofia__cards::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
  }
  .filosofia__cards .method-card {
    padding: clamp(var(--sp-5), 5vw, var(--sp-7)) 0;
    min-height: auto;
  }
  /* Espaço extra para o corner mark não sobrepor o body em mobile */
  .filosofia__cards .method-card:first-child {
    padding-top: 0;
    padding-bottom: clamp(var(--sp-9), 9vw, var(--sp-11));
  }
  .filosofia__cards .method-card:last-child {
    padding-bottom: clamp(var(--sp-9), 9vw, var(--sp-11));
    padding-top: clamp(var(--sp-6), 6vw, var(--sp-8));
  }
  .method-card:hover { transform: none; }

  /* Sign menor + reserva de espaço no body para não cobrir o texto */
  .method-card__sign {
    width: clamp(48px, 11vw, 68px);
    bottom: clamp(var(--sp-2), 1vw, var(--sp-3));
    right: 0;
  }
  .method-card__body {
    padding-right: clamp(56px, 14vw, 80px);
  }
  .filosofia__cards .method-card:first-child .method-card__sign,
  .filosofia__cards .method-card:last-child .method-card__sign {
    right: 0;
  }

  /* PARCEIROS mobile: marquee mais lento + logos menores */
  .marquee__row {
    gap: clamp(var(--sp-5), 8vw, var(--sp-7));
    padding-inline: clamp(var(--sp-4), 4vw, var(--sp-5));
  }
  .marquee__row li {
    height: 38px;
  }

  /* BLOG mobile: cards adequados + scroll touch suave */
  .blog__cards {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4);
  }
  .blog-card {
    flex: 0 0 78vw;
    max-width: 320px;
  }
  .blog-card__link {
    aspect-ratio: 4/5.4;
  }
  .blog__nav-btn {
    width: 44px;
    height: 44px;
  }

  /* FOOTER mobile: headline menor, CTA full-width touch-friendly */
  .cta-footer {
    --footer-gutter: clamp(var(--sp-5), 6vw, var(--sp-7));
  }
  .cta-footer__title {
    font-size: clamp(2rem, 1.4rem + 4vw, 3.4rem);
    max-width: 16ch;
  }
  .cta-footer__btn {
    width: 100%;
    justify-content: center;
    padding: 1.1rem 1.4rem;
  }
  .cta-footer__mark {
    width: 84px;
  }
  .cta-footer__main {
    grid-template-columns: 1fr;
    row-gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  }
  .cta-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  .cta-footer__social a {
    width: 40px;
    height: 40px;
  }
  .cta-footer__legal {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: left;
    align-items: flex-start;
    font-size: 0.62rem;
  }
  .cta-footer__wordmark-name {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  /* MENU DRAWER mobile: links em altura touch-friendly */
  .menu-link {
    padding: clamp(var(--sp-3), 1.5vw, var(--sp-4)) 0;
  }
  .menu-link__name {
    font-size: clamp(1.65rem, 7vw, 2.6rem);
  }
  .menu-overlay__top {
    padding-bottom: var(--sp-4);
  }
  .menu-overlay__brand img {
    height: 26px;
  }
  .close-btn {
    padding: var(--sp-3) var(--sp-2);
    margin-right: calc(-1 * var(--sp-2));
  }
  .close-btn__icon { width: 20px; height: 20px; }
  .menu-overlay__foot {
    gap: var(--sp-5);
    padding-top: var(--sp-5);
  }
  .menu-overlay__contact {
    flex-wrap: wrap;
    font-size: 0.6rem;
  }

  /* ===== QUEM SOMOS mobile ===== */
  .qs-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(var(--sp-5), 5vw, var(--sp-7));
    padding-bottom: clamp(var(--sp-7), 7vw, var(--sp-9));
  }
  .qs-hero__visual { display: none; }
  .qs-hero__title { font-size: clamp(2rem, 1.4rem + 4vw, 3.4rem); min-height: 4em; }

  .qs-manifesto {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .qs-manifesto__eyebrow { padding-top: 0; }
  .qs-manifesto__text { font-size: clamp(1.2rem, 0.95rem + 1.8vw, 1.8rem); }

  .qs-quote {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-6);
  }
  .qs-quote__title { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.8rem); max-width: 100%; }
  .qs-quote__bg {
    width: 100%;
    opacity: 0.1;
  }

  .qs-building {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    padding: clamp(var(--sp-7), 7vw, var(--sp-9)) clamp(var(--sp-5), 6vw, var(--sp-7));
  }
  .qs-building__text { max-width: 100%; }
  .qs-building__quote { font-size: clamp(1.85rem, 1.3rem + 2.5vw, 2.8rem); }
  .qs-building__photo { justify-self: start; max-width: 100%; }

  .qs-result__list {
    grid-template-columns: 1fr 1fr;
  }
  .qs-result__item {
    min-height: clamp(160px, 30vw, 200px);
  }

  .qs-video__title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.4rem); }

  .qs-rodrigo {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-6);
    padding-top: clamp(var(--sp-7), 7vw, var(--sp-9));
  }
  .qs-rodrigo__photo { max-width: 360px; justify-self: start; }
  .qs-rodrigo__bio { padding-bottom: clamp(var(--sp-7), 6vw, var(--sp-9)); }
  .qs-rodrigo__name { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); }

  /* ===== LIVRO MARCA mobile ===== */

  /* Hero: stack vertical (texto em cima, foto embaixo colada na linha) */
  .lm-hero {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    min-height: auto;
    gap: clamp(var(--sp-6), 6vw, var(--sp-8));
    padding-top: clamp(var(--sp-5), 5vw, var(--sp-7));
    padding-bottom: 0;
  }
  .lm-hero__text {
    max-width: 100%;
    padding-top: 0;
  }
  .lm-hero__title { font-size: clamp(2rem, 1.4rem + 4vw, 3.4rem); }
  .lm-hero__line { white-space: normal; }
  .lm-hero__sub { max-width: 100%; }
  .lm-hero__photo {
    max-width: 100%;
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(-1 * var(--gutter));
    justify-self: stretch;
    align-self: end;
    height: clamp(480px, 78vh, 640px);
    max-height: clamp(480px, 78vh, 640px);
    margin-bottom: 0;
    aspect-ratio: auto;
  }

  /* Metodologia: compass colapsa em stack vertical */
  .lm-method__head { max-width: 100%; }
  .lm-method__title { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem); }
  .lm-method__compass {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  }
  .lm-method__anchor {
    align-self: stretch;
    padding-top: 0;
    padding-bottom: clamp(var(--sp-5), 4vw, var(--sp-6));
    border-bottom: 1px dashed rgba(16, 22, 30, 0.12);
  }
  .lm-method__connectors { display: none; }
  .lm-method__dim {
    grid-template-columns: minmax(48px, auto) 1fr auto;
    padding-left: clamp(var(--sp-5), 3vw, var(--sp-6));
    gap: var(--sp-4);
  }
  .lm-method__dim-dot {
    left: -7px;
    width: 14px;
    height: 14px;
  }
  .lm-method__dim-desc { max-width: 100%; }

  /* Instrumento (dark): título e bg menor */
  .lm-instrument__head {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-6), 5vw, var(--sp-7));
  }
  .lm-instrument__title {
    font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem);
    min-height: 0;
  }
  .lm-instrument__title-line { white-space: normal; }
  .lm-instrument__bg { opacity: 0.04; width: 80%; right: -30%; }
  .lm-instrument__index li {
    font-size: clamp(1.1rem, 0.95rem + 1vw, 1.6rem);
    gap: var(--sp-4);
  }
  .lm-instrument__index-mark { width: 24px; }

  /* Process: theater horizontal vira acordeão vertical */
  .lm-process__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.8rem); }
  .lm-process__title-line { white-space: normal; }
  .lm-acts {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto;
    height: auto;
    gap: 2px;
    transition: grid-template-rows 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }
  /* Painéis em altura no mobile */
  .lm-process:has(#act-1:checked) .lm-acts { grid-template-rows: minmax(540px, 70vh) 88px 88px; }
  .lm-process:has(#act-2:checked) .lm-acts { grid-template-rows: 88px minmax(620px, 75vh) 88px; }
  .lm-process:has(#act-3:checked) .lm-acts { grid-template-rows: 88px 88px minmax(620px, 75vh); }
  .lm-act { min-height: 88px; }
  .lm-act__inner { padding: var(--sp-5) var(--sp-5); }
  .lm-act__head { display: flex; flex-direction: column; }
  .lm-act__verb-name {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(0.95rem, 4vw, 1.15rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: clamp(var(--sp-3), 2vw, var(--sp-4));
  }

  /* O que muda: hover desativado */
  .lm-change__item:hover .lm-change__text { transform: none; }
  .lm-change__text { font-size: clamp(1.4rem, 1rem + 2.2vw, 2.4rem); }
  .lm-change__title { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem); }
  .lm-change__head {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  }
  .lm-change__title-line { white-space: normal; }
  .lm-change__visual {
    justify-self: start;
    max-width: 100%;
  }
  .lm-change__visual img {
    max-height: clamp(220px, 50vw, 360px);
    object-position: center;
  }

  /* Consultoria: stack vertical */
  .lm-consult__card {
    grid-template-columns: 1fr;
    padding: clamp(var(--sp-7), 7vw, var(--sp-9)) clamp(var(--sp-5), 6vw, var(--sp-7));
    align-items: start;
    gap: clamp(var(--sp-6), 5vw, var(--sp-7));
  }
  .lm-consult__title { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); }
  .lm-consult__cta { width: 100%; justify-content: center; }
  .lm-consult__sub { max-width: 100%; }
  .lm-consult__card {
    grid-template-areas:
      "head"
      "list"
      "photo"
      "cta";
    min-height: 0;
  }
  .lm-consult__photo {
    margin-right: 0;
    margin-bottom: 0;
    justify-self: center;
  }
  .lm-consult__photo img {
    max-height: clamp(220px, 50vw, 360px);
    object-position: center;
  }
}

/* ───── MOBILE (≤ 540px) ───── */
@media (max-width: 540px) {
  .hero__title {
    font-size: clamp(1.7rem, 1.1rem + 3vw, 2.4rem);
  }
  .hero__stage {
    height: 32vh;
    min-height: 200px;
  }

  /* Filosofia: padding mais apertado */
  .filosofia { padding-inline: var(--gutter); }

  /* Blog cards full-width sweep */
  .blog-card { flex: 0 0 84vw; }
  .blog__title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.4rem); }

  /* Footer columns lado a lado mantém legibilidade */
  .cta-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .cta-footer__social { flex-wrap: wrap; gap: var(--sp-3); }

  /* Quem Somos */
  .qs-result__list { grid-template-columns: 1fr; }
  .qs-result__item {
    border-right: 0;
    min-height: auto;
  }
  .qs-result__item:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, 0.18);
  }

  /* Livro Marca — refinos mobile pequeno */
  .lm-hero__title { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .lm-change__item {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .lm-change__num { justify-self: start; padding-top: 0; border-top: 0; }
}

/* ───── MOBILE SMALL (≤ 380px) ───── */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.55rem, 6vw, 1.95rem); }
  .timeline__title { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .filosofia__title { font-size: clamp(1.65rem, 6.5vw, 2.2rem); }
}

/* ───── TOUCH HOVER FIX: substituir hover por focus em devices sem hover ───── */
@media (hover: none) and (pointer: coarse) {
  /* Hovers que dependem de mouse — fallback para active */
  .method-card:hover {
    transform: none;
    background: transparent;
  }
  .method-card:active {
    background-color: var(--card-tint);
    transform: translateY(-2px);
  }
  .filosofia__eyebrow:hover { color: var(--hwg-ink); gap: 0.7em; }
  .filosofia__eyebrow:active { color: var(--hwg-amber); gap: 1em; }

  /* Marquee não pausa em hover de touch */
  .marquee:hover .marquee__track { animation-play-state: running; }
}

/* ───── ACESSIBILIDADE: touch-action manipulation para reduzir delay ───── */
.menu-btn,
.menu-link,
.method-card__link,
.blog-card__link,
.blog__nav-btn,
.cta-footer__btn,
.header-cta,
.filosofia__eyebrow,
.hero__scroll-cue,
.lm-consult__cta,
.lm-instrument__index li {
  touch-action: manipulation;
}

/* ───── UTILS ───── */
.u-hide-mobile {}
@media (max-width: 720px) {
  .u-hide-mobile { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   BRANDING PERFORMANCE — Página completa (10 seções)
   ═══════════════════════════════════════════════════════════ */

/* ───── 1. HERO — padrão editorial (espelha .lm-hero) ───── */
.bp-hero {
  position: relative;
  margin-top: var(--header-h);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6)) var(--gutter);
  background: var(--hwg-paper);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
  min-height: clamp(520px, 64vh, 640px);
}
.bp-hero__text {
  position: relative;
  max-width: 100%;
  align-self: center;
  padding-top: clamp(var(--sp-4), 2.5vw, var(--sp-5));
}
.bp-hero__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
  margin: clamp(var(--sp-4), 2.4vw, var(--sp-5)) 0 0;
  text-wrap: balance;
}
.bp-hero__line {
  display: block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(28px);
  animation: lmHeroLineIn 900ms var(--ease-out-strong) forwards;
}
.bp-hero__line:nth-child(1) { animation-delay: 200ms; }
.bp-hero__line:nth-child(2) { animation-delay: 320ms; }
.bp-hero__line:nth-child(3) { animation-delay: 460ms; }
.bp-hero__line:nth-child(4) { animation-delay: 600ms; }
.bp-hero__title .forest { color: var(--hwg-forest); }
.bp-hero__title .amber { color: var(--hwg-amber); }
.bp-hero__sub {
  font-size: clamp(0.96rem, 0.88rem + 0.4vw, 1.18rem);
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0;
  margin-top: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  max-width: 38ch;
  letter-spacing: var(--tr-snug);
  animation: lmHeroLineIn 900ms var(--ease-out-strong) 760ms forwards;
}
.bp-hero__sub strong { color: var(--hwg-forest); font-weight: var(--fw-bold); }

/* Mosaico 2x2 — cada box abre em cortina (escalonado) + drift sutil em loop */
.bp-hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  height: 100%;
  max-height: clamp(420px, 56vh, 640px);
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}
.bp-hero__tile {
  margin: 0;
  overflow: hidden;
  position: relative;
  background: var(--hwg-ink);
  clip-path: inset(50%);
  animation: bpHeroReveal 1s cubic-bezier(0.72, 0, 0.25, 1) forwards;
}
.bp-hero__tile--1 { animation-delay: 200ms; }
.bp-hero__tile--2 { animation-delay: 340ms; }
.bp-hero__tile--3 { animation-delay: 480ms; }
.bp-hero__tile--4 { animation-delay: 620ms; }
.bp-hero__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.04);
  animation: bp-tile-drift 9s cubic-bezier(0.4, 0, 0.4, 1) infinite alternate;
  will-change: transform;
}
.bp-hero__tile--1 img { animation-delay: 0s; }
.bp-hero__tile--2 img { animation-delay: -2.2s; animation-duration: 10s; }
.bp-hero__tile--3 img { animation-delay: -4.6s; animation-duration: 11s; }
.bp-hero__tile--4 img { animation-delay: -6.4s; animation-duration: 9.5s; }

@keyframes bpHeroReveal {
  to { clip-path: inset(0); }
}
@keyframes bp-tile-drift {
  from { transform: scale(1.08) translateY(-2%); }
  to   { transform: scale(1.12) translateY(2%); }
}

/* ───── 2. MÉTODO HWG — Manifesto duplo (dois movimentos) ───── */
.bp-method {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--gutter);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  position: relative;
}
.bp-method__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.bp-method__head {
  margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}
.bp-method__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.bp-method__manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(var(--sp-4), 3vw, var(--sp-7));
}
.bp-method__act {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-5));
  padding: clamp(var(--sp-6), 4vw, var(--sp-8)) clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--hwg-paper);
  border-top: 3px solid var(--card-color, var(--hwg-amber));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: transform 500ms var(--ease-out-strong),
              box-shadow 500ms var(--ease-out-soft);
}
.bp-method__act--first  { --card-color: var(--hwg-forest); }
.bp-method__act--second { --card-color: var(--hwg-amber); }
.bp-method__act:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(12, 28, 44, 0.1);
}
/* Corner-mark âmbar/forest no topo do card (assinatura visual HWG) */
.bp-method__act-mark {
  display: block;
  width: 26px;
  aspect-ratio: 41/38;
  background: var(--card-color);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  flex: 0 0 auto;
}
.bp-method__phrase {
  font-family: var(--ff-sans);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.9rem);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: 1.14;
  color: var(--hwg-ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.bp-method__phrase strong {
  display: block;
  font-weight: var(--fw-bold);
  font-size: 1.12em;
  letter-spacing: -0.034em;
  line-height: 1;
}
.bp-method__phrase strong.forest { color: var(--hwg-forest); }
.bp-method__phrase strong.amber  { color: var(--hwg-amber); }
.bp-method__phrase em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--hwg-amber);
}

/* Seta editorial conectando os dois movimentos (sem régua/wireframe) */
.bp-method__arrow {
  align-self: center;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  font-weight: var(--fw-regular);
  color: var(--hwg-amber);
  line-height: 1;
  padding: 0 clamp(var(--sp-1), 1vw, var(--sp-3));
  transition: transform 400ms var(--ease-out-strong);
}
.bp-method__manifesto:hover .bp-method__arrow {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════
   EYEBROW EDITORIAL — variantes BP
   ═══════════════════════════════════════════════════════════ */
.bp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6em, 1vw, 1em);
  font-family: var(--ff-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.bp-eyebrow__rule {
  display: inline-block;
  width: clamp(40px, 4vw, 64px);
  height: 1.5px;
  background: var(--hwg-amber);
  flex-shrink: 0;
}
.bp-eyebrow__num {
  font-family: var(--ff-sans);
  font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--hwg-amber);
  font-feature-settings: "tnum";
}
.bp-eyebrow__label { display: inline-block; }

/* Variante prose — eyebrow em itálico minúsculo editorial */
.bp-eyebrow--prose {
  font-family: var(--ff-serif);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--hwg-ink);
  opacity: 0.7;
}
.bp-eyebrow--prose em { font-style: italic; }

/* ───── 3. O PROBLEMA — Câmara editorial dark ───── */
.bp-problem {
  background: var(--hwg-paper);
  color: var(--hwg-ink);
  padding: clamp(var(--sp-9), 9vw, var(--sp-11)) var(--gutter);
  position: relative;
  border-top: 1px solid rgba(16, 22, 30, 0.1);
}
.bp-problem__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.bp-problem__head {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
  max-width: 940px;
}
.bp-problem__title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.7rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.07;
  color: var(--hwg-ink);
  margin: 0;
  text-wrap: balance;
}
.bp-problem__title-line { display: block; }
.bp-problem__title em {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.bp-problem__title .amber { color: var(--hwg-amber); }
.bp-problem__lede {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  color: rgba(16, 22, 30, 0.45);
  max-width: 56ch;
  margin: 0;
  letter-spacing: var(--tr-snug);
}

/* ── Sintomas: registro editorial em linhas (sem caixas) ──
   Cada sintoma é "Categoria / sem [lacuna]" + descrição.
   A lacuna (estratégia/coerência/valor) tem um sublinhado tracejado
   âmbar que se preenche no hover — a marca "completa o que falta". */
/* 3 colunas lado a lado (boxes verticais), separadas por linha */
.bp-problem__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.bp-problem__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) clamp(var(--sp-5), 3vw, var(--sp-6));
  transition: background-color 450ms var(--ease-out-soft);
}
/* linha vertical separando as colunas (exceto a primeira) */
.bp-problem__item + .bp-problem__item { border-left: 1px solid rgba(16, 22, 30, 0.12); }
.bp-problem__item:first-child { padding-left: 0; }
.bp-problem__item:last-child { padding-right: 0; }

/* faixa âmbar superior que se traça quando o item entra na viewport */
.bp-problem__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(var(--sp-5), 3vw, var(--sp-6));
  width: clamp(36px, 4vw, 56px);
  height: 2px;
  background: var(--hwg-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out-strong);
}
.bp-problem__item:first-child::before { left: 0; }
.bp-problem__item.is-visible::before { transform: scaleX(1); }

/* Categoria (Tráfego / Conteúdo / Presença) */
.bp-problem__index {
  font-family: var(--ff-sans);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  color: var(--hwg-ink);
}

/* "sem [lacuna]" */
.bp-problem__item-title {
  font-family: var(--ff-sans);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  color: rgba(16, 22, 30, 0.45);
  margin: 0;
}
.bp-problem__gap {
  position: relative;
  color: var(--hwg-amber);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  border-bottom: 2px dashed rgba(224, 114, 40, 0.45);
  padding-bottom: 0.04em;
}
.bp-problem__gap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--hwg-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out-strong);
}
.bp-problem__item.is-visible .bp-problem__gap::after { transform: scaleX(1); transition-delay: 380ms; }

/* Parágrafo abaixo do título, fonte menor */
.bp-problem__text {
  font-family: var(--ff-sans);
  font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: rgba(16, 22, 30, 0.65);
  letter-spacing: var(--tr-snug);
  margin: clamp(var(--sp-1), 0.6vw, var(--sp-2)) 0 0;
  max-width: 40ch;
}
.bp-problem__text em {
  font-style: normal;
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  letter-spacing: var(--tr-snug);
}

@media (prefers-reduced-motion: reduce) {
  .bp-problem__index,
  .bp-problem__item-title,
  .bp-problem__gap::after,
  .bp-problem__item::after,
  .bp-problem__item::before { transition: none !important; }
  .bp-problem__item::after,
  .bp-problem__item.is-visible .bp-problem__gap::after { transform: scaleX(1) !important; }
}

/* ───── 4. A SOLUÇÃO — Composição editorial em duotone ───── */
.bp-solution {
  position: relative;
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.bp-solution__grid {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: stretch;
}

/* Eyebrow on-ink variant */
.bp-eyebrow--on-ink { color: var(--hwg-on-ink); }
.bp-eyebrow--on-ink .bp-eyebrow__label { opacity: 0.7; }
.bp-eyebrow--on-ink .bp-eyebrow__num { color: var(--hwg-amber); }

/* Coluna esquerda — foto duotone forest */
.bp-solution__visual {
  position: relative;
  margin: 0;
  align-self: stretch;
}

.bp-solution__visual-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(380px, 50vh, 560px);
  overflow: hidden;
  background: var(--hwg-ink);
  isolation: isolate;
}
.bp-solution__visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
  transform: scale(1.06);
  /* Cortina diagonal: abre do canto topo-esq → base-dir, na direção das setas.
     Fechada = revelada só a quina do canto superior-esquerdo; abre até preencher. */
  clip-path: inset(0 100% 100% 0);
  transition:
    transform 1.8s var(--ease-out-soft),
    filter 1s var(--ease-out-soft),
    clip-path 1.4s cubic-bezier(0.66, 0, 0.2, 1) 260ms;
  will-change: clip-path;
}
.bp-solution__visual.is-visible .bp-solution__visual-frame img {
  clip-path: inset(0 0 0 0);
}
.bp-solution__visual:hover .bp-solution__visual-frame img {
  transform: scale(1.1);
  filter: grayscale(0.6) contrast(1.1) brightness(0.95);
}
.bp-solution__visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(43, 102, 69, 0.45) 0%, rgba(16, 22, 30, 0.85) 100%),
    linear-gradient(45deg, rgba(43, 102, 69, 0.55), rgba(43, 102, 69, 0.25));
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out-soft);
}
.bp-solution__visual:hover .bp-solution__visual-frame::after { opacity: 0.85; }

/* Cantos âmbar: topo-esq + base-dir (padrão de colchetes HWG).
   Eles "abrem" a imagem: partem do centro juntos e deslizam para as pontas
   opostas, na diagonal, enquanto a cortina revela a foto entre eles. */
.bp-solution__corner {
  position: absolute;
  width: clamp(44px, 4.8vw, 68px);
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  z-index: 3;
  opacity: 0;
  transition:
    transform 1.4s cubic-bezier(0.66, 0, 0.2, 1),
    opacity 600ms var(--ease-out-soft);
}
/* Topo-esquerdo: L normal — começa empurrado para dentro (rumo ao centro) */
.bp-solution__corner--tl {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transform: translate(120%, 120%);
}
/* Base-direito: L rotacionado 180° — começa empurrado para dentro */
.bp-solution__corner--br {
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 100%, 0 100%, 0 62%, 62% 62%, 62% 0, 100% 0);
  transform: translate(-120%, -120%);
}
/* Ao entrar na viewport: setas deslizam para as pontas + aparecem */
.bp-solution__visual.is-visible .bp-solution__corner {
  opacity: 1;
  transform: translate(0, 0);
}

/* Coluna direita — conteúdo manifesto */
.bp-solution__content {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  padding-block: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  align-self: center;
}
.bp-solution__head { margin: 0; }

.bp-solution__lede {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-on-ink);
  margin: 0;
  max-width: 16ch;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-1), 0.4vw, var(--sp-2));
}
.bp-solution__lede-line { display: block; }
.bp-solution__lede em {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: var(--fw-bold);
  color: #6fc28d;
  letter-spacing: var(--tr-tight);
}
.bp-solution__lede .amber {
  color: var(--hwg-amber);
  font-weight: var(--fw-bold);
}

/* Divider editorial */
.bp-solution__divider {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-4));
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-on-ink);
  opacity: 0.55;
}
.bp-solution__divider-rule {
  flex: 1;
  height: 1px;
  background: rgba(237, 234, 226, 0.3);
}
.bp-solution__divider-text { white-space: nowrap; }

/* Verbos como linhas editoriais empilhadas */
.bp-solution__verbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bp-solution__verb-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 3.4vw, 46px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-5));
  padding: clamp(var(--sp-4), 2.5vw, var(--sp-5)) 0;
  transition: padding-left var(--dur-fast) var(--ease-out-soft);
}
.bp-solution__verb-row:hover { padding-left: clamp(var(--sp-2), 1vw, var(--sp-3)); }

/* ─── Animação de entrada dos tópicos (Executar / Escalar / Otimizar) ───
   Cada linha entra da direita com fade + a hairline se traça da esq → dir.
   O custom property --verb-i (0, 1, 2) controla o delay escalonado.       */
.bp-solution__verb-enter {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 700ms var(--ease-out-strong) calc(var(--verb-i, 0) * 140ms),
    transform 700ms var(--ease-out-strong) calc(var(--verb-i, 0) * 140ms);
}
.bp-solution__verb-enter.is-visible {
  opacity: 1;
  transform: none;
}

/* hairline superior que se traça depois da linha entrar */
.bp-solution__verb-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(237, 234, 226, 0.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out-strong)
              calc(var(--verb-i, 0) * 140ms + 200ms);
}
.bp-solution__verb-enter.is-visible::before { transform: scaleX(1); }
/* hairline da base do último verbo */
.bp-solution__verb-row:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(237, 234, 226, 0.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out-strong) 680ms;
}
.bp-solution__verb-row:last-child.is-visible::after { transform: scaleX(1); }

/* Corner-mark âmbar por verbo (assinatura HWG) — substitui o número 01/02/03 */
.bp-solution__verb-mark {
  align-self: center;
  justify-self: start;
  width: clamp(20px, 1.8vw, 26px);
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transition: transform 450ms var(--ease-out-strong);
}
.bp-solution__verb-row:hover .bp-solution__verb-mark { transform: translateX(4px) scale(1.1); }
/* color-coding por dimensão — espelha a cor do verbo */
.bp-solution__verb-row--1 .bp-solution__verb-mark { background: var(--hwg-on-ink); }
.bp-solution__verb-row--2 .bp-solution__verb-mark { background: #6fc28d; }
.bp-solution__verb-row--3 .bp-solution__verb-mark { background: var(--hwg-amber); }
.bp-solution__verb-name {
  font-family: var(--ff-sans);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.034em;
  line-height: 0.95;
  color: var(--hwg-on-ink);
}
.bp-solution__verb-row--2 .bp-solution__verb-name { color: #6fc28d; }
.bp-solution__verb-row--3 .bp-solution__verb-name { color: var(--hwg-amber); }
.bp-solution__verb-tag {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hwg-on-ink);
  opacity: 0.45;
  white-space: nowrap;
}

/* Pulse do dot na tag "Em operação contínua" (sinal vivo) */
@keyframes bp-hero-signal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 114, 40, 0.55); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(224, 114, 40, 0); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-solution__verb-row::before,
  .bp-solution__verb-row:last-child::after,
  .bp-solution__verb-mark,
  .bp-solution__visual-frame img,
  .bp-solution__corner,
  .bp-solution__verb-enter { transition: none !important; }
  .bp-solution__verb-row::before,
  .bp-solution__verb-row:last-child::after { transform: scaleX(1) !important; }
  /* sem animação: tudo já visível no estado final */
  .bp-solution__visual-frame img { clip-path: inset(0) !important; }
  .bp-solution__corner { opacity: 1 !important; transform: translate(0, 0) !important; }
  .bp-solution__verb-enter { opacity: 1 !important; transform: none !important; }
  .bp-solution__visual-tag::before { animation: none !important; }
}

/* ───── 5. COMO FUNCIONA — 3 capítulos editoriais full-width ───── */
.bp-frentes {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--gutter);
  position: relative;
}
.bp-frentes__head {
  max-width: 1180px;
  margin: 0 auto clamp(var(--sp-7), 5vw, var(--sp-9));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}
.bp-frentes__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
  margin: 0;
}
.bp-frentes__title-line { display: block; }
.bp-frentes__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  letter-spacing: inherit;
}
.bp-frentes__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
}

/* ── Capítulo / frente — cor por dimensão (ink → forest → amber) ── */
.bp-frente {
  --frente-color: var(--hwg-ink);
  display: grid;
  grid-template-columns: clamp(132px, 13vw, 196px) minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  padding: clamp(var(--sp-7), 5vw, var(--sp-9)) 0;
  border-top: 1px solid rgba(16, 22, 30, 0.12);
  align-items: start;
}
.bp-frente:last-child { border-bottom: 1px solid rgba(16, 22, 30, 0.12); }
.bp-frente--1 { --frente-color: var(--hwg-ink); }
.bp-frente--2 { --frente-color: var(--hwg-forest); }
.bp-frente--3 { --frente-color: var(--hwg-amber); }

/* ── Aside: corner-mark (assinatura HWG) + fio contínuo + índice ── */
.bp-frente__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  align-self: stretch;
}
.bp-frente__mark {
  width: clamp(30px, 3vw, 42px);
  aspect-ratio: 41 / 38;
  background: var(--frente-color);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.bp-frente:hover .bp-frente__mark { transform: translate(3px, 3px); }
/* Fio contínuo vertical — "operação contínua" liga as três frentes */
.bp-frente__aside::after {
  content: "";
  position: absolute;
  left: calc(clamp(30px, 3vw, 42px) / 2 - 0.5px);
  top: clamp(58px, 6vw, 78px);
  bottom: calc(-1 * clamp(var(--sp-7), 5vw, var(--sp-9)));
  width: 1px;
  background: linear-gradient(to bottom, var(--frente-color), rgba(16, 22, 30, 0.10));
  opacity: 0.45;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 720ms var(--ease-out-soft) 220ms;
}
.bp-frente:last-child .bp-frente__aside::after { display: none; }

/* ── Main: verbo + sub + lede ── */
.bp-frente__main {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.2vw, var(--sp-5));
  max-width: 54ch;
}
.bp-frente__head {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.bp-frente__verb {
  font-family: var(--ff-sans);
  font-size: clamp(2.6rem, 1.5rem + 3vw, 4rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--frente-color);
  margin: 0;
}
.bp-frente__sub {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.5;
  margin: 0;
}
.bp-frente__lede {
  font-family: var(--ff-sans);
  font-size: clamp(0.98rem, 0.88rem + 0.45vw, 1.18rem);
  line-height: 1.6;
  color: var(--hwg-ink);
  opacity: 0.82;
  margin: 0;
  letter-spacing: var(--tr-snug);
}
/* Frase de acento: MESMA fonte (DM Sans), só mais clara — nunca serif */
.bp-frente__lede-accent {
  display: block;
  margin-top: clamp(var(--sp-2), 1vw, var(--sp-3));
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  color: var(--frente-color);
  opacity: 0.95;
  letter-spacing: var(--tr-snug);
}

/* ── Entregáveis: título pequeno + lista (uma única fonte) ── */
.bp-frente__deliverables {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
}
.bp-frente__deliverables-title {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--frente-color);
}
.bp-frente__deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bp-frente__deliverable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  align-items: baseline;
  padding: clamp(var(--sp-2), 1.2vw, var(--sp-3)) 0;
  border-top: 1px solid rgba(16, 22, 30, 0.08);
}
.bp-frente__deliverable:first-child { border-top: 0; padding-top: 0; }
/* Seta CSS — gesto de "entrega", colorida por frente */
.bp-frente__arrow {
  position: relative;
  display: inline-block;
  width: clamp(14px, 1.4vw, 20px);
  height: 1px;
  background: var(--frente-color);
  color: var(--frente-color);
  flex: none;
  align-self: center;
  transform-origin: left center;
}
.bp-frente__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.bp-frente__deliverable-text {
  font-family: var(--ff-sans);
  font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0.85;
  letter-spacing: var(--tr-snug);
}

/* ── Animação de entrada por capítulo (scroll) ── */
.bp-frente-enter .bp-frente__aside,
.bp-frente-enter .bp-frente__main,
.bp-frente-enter .bp-frente__deliverables {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms var(--ease-out-soft), transform 640ms var(--ease-out-soft);
}
.bp-frente-enter .bp-frente__main { transition-delay: 90ms; }
.bp-frente-enter .bp-frente__deliverables { transition-delay: 170ms; }
.bp-frente-enter .bp-frente__mark {
  opacity: 0;
  transform: scale(0.5) translateY(8px);
  transition: opacity 520ms var(--ease-out-soft), transform 560ms var(--ease-out-strong);
}
.bp-frente-enter .bp-frente__arrow {
  transform: scaleX(0);
  transition: transform 480ms var(--ease-out-soft);
}
.bp-frente-enter.is-visible .bp-frente__aside,
.bp-frente-enter.is-visible .bp-frente__main,
.bp-frente-enter.is-visible .bp-frente__deliverables {
  opacity: 1;
  transform: translateY(0);
}
.bp-frente-enter.is-visible .bp-frente__mark {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.bp-frente-enter.is-visible .bp-frente__aside::after { transform: scaleY(1); }
.bp-frente-enter.is-visible .bp-frente__arrow { transform: scaleX(1); }
.bp-frente-enter.is-visible .bp-frente__deliverable:nth-child(1) .bp-frente__arrow { transition-delay: 220ms; }
.bp-frente-enter.is-visible .bp-frente__deliverable:nth-child(2) .bp-frente__arrow { transition-delay: 280ms; }
.bp-frente-enter.is-visible .bp-frente__deliverable:nth-child(3) .bp-frente__arrow { transition-delay: 340ms; }
.bp-frente-enter.is-visible .bp-frente__deliverable:nth-child(4) .bp-frente__arrow { transition-delay: 400ms; }
.bp-frente-enter.is-visible .bp-frente__deliverable:nth-child(5) .bp-frente__arrow { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .bp-frente-enter .bp-frente__aside,
  .bp-frente-enter .bp-frente__main,
  .bp-frente-enter .bp-frente__deliverables,
  .bp-frente-enter .bp-frente__mark,
  .bp-frente-enter .bp-frente__arrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bp-frente__aside::after { transform: scaleY(1) !important; transition: none !important; }
}

/* ───── 6. TIMELINE — Horizontal scroll com sticky-pin ───── */
.bp-timeline {
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  position: relative;
  --bp-tl-progress: 0;
}
.bp-timeline__head {
  padding: clamp(var(--sp-8), 6vw, var(--sp-10)) var(--gutter) clamp(var(--sp-3), 1.5vw, var(--sp-4));
  max-width: 1180px;
  margin: 0 auto;
}
.bp-timeline__head .bp-eyebrow { color: var(--hwg-on-ink); }
.bp-timeline__head .bp-eyebrow__label { opacity: 0.7; }
.bp-timeline__head .bp-eyebrow__num { color: var(--hwg-amber); }
.bp-timeline__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-on-ink);
  margin: 0;
  max-width: 18ch;
}
.bp-timeline__title-line { display: block; }
.bp-timeline__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-amber);
  letter-spacing: inherit;
}
.bp-timeline__sub {
  font-family: var(--ff-sans);
  font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--hwg-on-ink);
  opacity: 0.7;
  margin-top: clamp(var(--sp-4), 2.5vw, var(--sp-5));
  max-width: 56ch;
  letter-spacing: var(--tr-snug);
}
.bp-timeline__sub strong { color: var(--hwg-amber); font-weight: var(--fw-bold); opacity: 1; }

/* Pin — container alto que materializa o scroll horizontal via sticky */
.bp-timeline__pin {
  height: 300vh;
  position: relative;
  /* puxa o trilho p/ perto do texto, reduzindo o vazio de entrada (sem afetar a fase de scroll) */
  margin-top: calc(-1 * clamp(var(--sp-6), 8vw, var(--sp-10)));
}
.bp-timeline__viewport {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* Rail dimensionado pelo conteúdo; translateX adapta-se ao overflow real */
.bp-timeline__rail {
  width: max-content;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: clamp(var(--sp-6), 6vw, var(--sp-10));
  transform: translateX(min(0px, calc(var(--bp-tl-progress) * (100vw - 100%))));
  will-change: transform;
}

/* Trilha de etapas — colunas editoriais alinhadas, sem eixo/régua */
.bp-timeline__milestones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Cada etapa: coluna tipográfica, conteúdo centrado verticalmente.
   Separada da anterior por um fio sutil (mesma linguagem da seção O Problema). */
.bp-timeline__milestone {
  position: relative;
  flex: 0 0 clamp(320px, 30vw, 460px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--sp-3), 1.4vw, var(--sp-4));
  padding: 0 clamp(var(--sp-6), 4vw, var(--sp-8));
  opacity: 0.32;
  transition: opacity 600ms var(--ease-out-soft);
}
.bp-timeline__milestone + .bp-timeline__milestone {
  border-left: 1px solid rgba(237, 234, 226, 0.12);
}
.bp-timeline__milestone.is-active { opacity: 1; }

/* Corner-mark âmbar (assinatura HWG) — foco da etapa ativa, sem ponto/eixo */
.bp-timeline__mile-mark {
  width: clamp(22px, 2vw, 30px);
  aspect-ratio: 41 / 38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  opacity: 0.22;
  transform: translateY(6px);
  transition: opacity 560ms var(--ease-out-soft), transform 560ms var(--ease-out-strong);
}
.bp-timeline__milestone.is-active .bp-timeline__mile-mark { opacity: 1; transform: none; }
.bp-timeline__milestone--continuous .bp-timeline__mile-mark {
  clip-path: polygon(0 0, 62% 0, 62% 38%, 38% 38%, 38% 62%, 100% 62%, 100% 100%, 0 100%);
}

/* Period (timing) — pequeno, âmbar */
.bp-timeline__mile-period {
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-amber);
}

/* Título da etapa */
.bp-timeline__mile-title {
  font-family: var(--ff-sans);
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-on-ink);
  margin: 0;
}

/* Descrição */
.bp-timeline__mile-desc {
  font-family: var(--ff-sans);
  font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
  line-height: 1.55;
  color: var(--hwg-on-ink);
  opacity: 0.6;
  margin: 0;
  letter-spacing: var(--tr-snug);
  max-width: 32ch;
}

/* Linha de progresso contínua na base — sutil, preenche em âmbar ao rolar */
.bp-timeline__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(var(--sp-7), 7vw, var(--sp-9));
  height: 1px;
  background: rgba(237, 234, 226, 0.12);
  z-index: 0;
  pointer-events: none;
}
.bp-timeline__axis-progress {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--hwg-amber);
  transform-origin: left;
  transition: width 160ms linear;
}

/* Hint flutuante: "Role para avançar →" (horizontal) */
.bp-timeline__hint {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
  display: flex;
  align-items: center;
  gap: 0.75ch;
  font-family: var(--ff-sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-on-ink);
  opacity: 0.55;
  z-index: 10;
  pointer-events: none;
}
.bp-timeline__hint-icon {
  font-size: 1.1rem;
  letter-spacing: 0;
  display: inline-block;
  animation: bp-hint-slide 1800ms cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes bp-hint-slide {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-timeline__hint-icon { animation: none; }
  .bp-timeline__milestone,
  .bp-timeline__mile-mark,
  .bp-timeline__axis-progress { transition: none !important; }
}

/* ───── 7. PARA QUEM FAZ SENTIDO — Manifesto tipográfico ───── */
.bp-para-quem {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter);
  position: relative;
}
.bp-para-quem__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}
.bp-para-quem__content {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}
.bp-para-quem__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
  margin: 0;
  max-width: 18ch;
}
.bp-para-quem__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
}
.bp-para-quem__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bp-para-quem__item {
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.4;
  color: var(--hwg-ink);
  opacity: 0.82;
  letter-spacing: var(--tr-snug);
  padding: clamp(var(--sp-3), 1.6vw, var(--sp-4)) 0;
  padding-left: clamp(var(--sp-4), 2vw, var(--sp-5));
  border-top: 1px solid rgba(16, 22, 30, 0.1);
  position: relative;
}
.bp-para-quem__item:last-child { border-bottom: 1px solid rgba(16, 22, 30, 0.1); }
/* marcador âmbar à esquerda de cada item */
.bp-para-quem__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(8px, 1vw, 12px);
  height: 2px;
  background: var(--hwg-amber);
}

/* Imagem com cantos HWG (topo-esq + base-dir) */
.bp-para-quem__visual {
  position: relative;
  margin: 0;
}
.bp-para-quem__visual-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--hwg-soft);
}
.bp-para-quem__visual-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.02) saturate(1.02);
}
.bp-para-quem__corner {
  position: absolute;
  width: clamp(28px, 3vw, 44px);
  aspect-ratio: 41 / 38;
  background: var(--hwg-amber);
  z-index: 2;
}
.bp-para-quem__corner--tl {
  top: clamp(-6px, -0.6vw, -4px);
  left: clamp(-6px, -0.6vw, -4px);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
}
.bp-para-quem__corner--br {
  bottom: clamp(-6px, -0.6vw, -4px);
  right: clamp(-6px, -0.6vw, -4px);
  clip-path: polygon(100% 100%, 0 100%, 0 62%, 62% 62%, 62% 0, 100% 0);
}

/* ───── 8. RESULTADOS REAIS — Cases editoriais full-width ───── */
/* ═══ RESULTADOS — vitrine cinematográfica (carrossel horizontal) ═══ */
.bp-cases {
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) 0;
  position: relative;
  overflow: hidden;
}
.bp-cases__head {
  max-width: var(--container-max);
  margin: 0 auto clamp(var(--sp-6), 4vw, var(--sp-8));
  padding-inline: var(--gutter);
}
.bp-cases__head .lm-method__eyebrow { color: var(--hwg-on-ink); }
.bp-cases__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-on-ink);
  margin: 0;
}
.bp-cases__title-line { display: block; }
.bp-cases__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-amber);
  letter-spacing: inherit;
}

/* Carrossel — trilho com rolagem horizontal + snap */
.bp-cases__carousel {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
}
.bp-cases__track {
  list-style: none;
  display: flex;
  gap: clamp(var(--sp-3), 1.4vw, var(--sp-4));
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: var(--gutter);
  padding: clamp(var(--sp-2), 1vw, var(--sp-3)) var(--gutter) clamp(var(--sp-4), 2vw, var(--sp-5));
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bp-cases__track::-webkit-scrollbar { display: none; }

/* Cada case = pôster vertical */
.bp-case {
  position: relative;
  flex: 0 0 clamp(258px, 27vw, 344px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  background: var(--hwg-ink);
  cursor: pointer;
  transition: transform 540ms var(--ease-out-soft), box-shadow 540ms var(--ease-out-soft);
}
/* Corner-mark âmbar (assinatura HWG) — visível com o box "fechado", recua no hover */
.bp-case::before {
  content: "";
  position: absolute;
  top: clamp(var(--sp-4), 2.2vw, var(--sp-5));
  left: clamp(var(--sp-4), 2.2vw, var(--sp-5));
  z-index: 2;
  width: clamp(20px, 2vw, 28px);
  aspect-ratio: 41 / 38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  opacity: 0.9;
  transition: opacity 460ms var(--ease-out-soft), transform 460ms var(--ease-out-strong);
}
.bp-case:hover::before,
.bp-case:focus-within::before { opacity: 0; transform: translate(-4px, -4px); }

.bp-case__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Imagem do projeto escondida por padrão; surge sutil e com leve movimento no hover */
.bp-case__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  filter: brightness(0.7) saturate(1.04);
  transition: opacity 780ms var(--ease-out-soft), transform 1900ms var(--ease-out-soft), filter 780ms var(--ease-out-soft);
}
/* Tinta que dá a "cor do box": forest-ink fechado → âmbar quente e mais clara no hover */
.bp-case__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(155deg, rgba(43, 102, 69, 0.4) 0%, rgba(16, 22, 30, 0.95) 70%);
  transition: background 640ms var(--ease-out-soft);
}
.bp-case:hover .bp-case__poster::after,
.bp-case:focus-within .bp-case__poster::after {
  background: linear-gradient(155deg, rgba(224, 114, 40, 0.34) 0%, rgba(16, 22, 30, 0.58) 72%);
}
/* gradiente p/ leitura do texto */
.bp-case__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  background: linear-gradient(to top, rgba(7, 10, 14, 0.92) 0%, rgba(7, 10, 14, 0.6) 28%, rgba(7, 10, 14, 0.08) 56%, rgba(7, 10, 14, 0) 80%);
}
.bp-case__name {
  font-family: var(--ff-sans);
  font-size: clamp(1.45rem, 1.05rem + 1vw, 1.9rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
  color: var(--hwg-paper);
  margin: 0;
}
.bp-case__name::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: clamp(var(--sp-2), 1vw, var(--sp-3));
  background: var(--hwg-amber);
  transition: width 540ms var(--ease-out-soft);
}
/* resultados — revelam em altura no hover/foco */
.bp-case__results {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 540ms var(--ease-out-soft), opacity 420ms var(--ease-out-soft);
}
.bp-case__results-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: clamp(var(--sp-3), 1.4vw, var(--sp-4));
}
.bp-case__text {
  font-family: var(--ff-sans);
  font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: rgba(237, 234, 226, 0.82);
  margin: 0;
  letter-spacing: var(--tr-snug);
}
.bp-case__text + .bp-case__text { margin-top: clamp(var(--sp-2), 0.8vw, var(--sp-3)); }

.bp-case:hover,
.bp-case:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.75);
}
.bp-case:hover .bp-case__poster img,
.bp-case:focus-within .bp-case__poster img { opacity: 0.5; transform: scale(1); filter: brightness(0.92) saturate(1.1); }
.bp-case:hover .bp-case__results,
.bp-case:focus-within .bp-case__results { grid-template-rows: 1fr; opacity: 1; }
.bp-case:hover .bp-case__name::after,
.bp-case:focus-within .bp-case__name::after { width: 46px; }

/* Setas */
.bp-cases__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: clamp(42px, 3vw, 52px);
  height: clamp(42px, 3vw, 52px);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(237, 234, 226, 0.45);
  background: rgba(7, 10, 14, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--hwg-on-ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background 320ms var(--ease-out-soft), border-color 320ms var(--ease-out-soft), color 320ms var(--ease-out-soft), opacity 320ms var(--ease-out-soft);
}
.bp-cases__nav:hover { background: var(--hwg-amber); border-color: var(--hwg-amber); color: var(--hwg-ink); }
.bp-cases__nav--prev { left: clamp(2px, 0.6vw, 10px); }
.bp-cases__nav--next { right: clamp(2px, 0.6vw, 10px); }
.bp-cases__nav.is-disabled { opacity: 0; pointer-events: none; }

@media (hover: none) {
  .bp-cases__nav { display: none; }
  .bp-case__results { grid-template-rows: 1fr; opacity: 1; }
  /* Touch: sem hover, mostra a imagem e a tinta quente por padrão */
  .bp-case__poster img { opacity: 0.5; transform: scale(1); filter: brightness(0.92) saturate(1.1); }
  .bp-case__poster::after { background: linear-gradient(155deg, rgba(224, 114, 40, 0.3) 0%, rgba(16, 22, 30, 0.62) 72%); }
  .bp-case::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-case, .bp-case__poster img, .bp-case__results, .bp-case__name::after { transition: none !important; }
  .bp-cases__track { scroll-behavior: auto; }
}

/* ───── 9. COMPROMISSOS — Contrato editorial ───── */
.bp-garantias {
  background: var(--hwg-paper);
  padding: clamp(var(--sp-6), 4vw, var(--sp-7)) var(--gutter) clamp(var(--sp-9), 9vw, var(--sp-11));
  position: relative;
}
.bp-garantias__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.bp-garantias__head {
  margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-7));
}
.bp-garantias__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--sp-6), 5vw, var(--sp-9));
}
.bp-garantias__clause {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  padding: clamp(var(--sp-3), 1.6vw, var(--sp-4)) 0;
  border-top: 1px solid rgba(16, 22, 30, 0.12);
}
/* check âmbar (✓ via CSS) */
.bp-garantias__check {
  position: relative;
  width: clamp(18px, 1.8vw, 22px);
  height: clamp(18px, 1.8vw, 22px);
  flex: none;
}
.bp-garantias__check::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 52%;
  width: 28%;
  height: 56%;
  border-right: 2px solid var(--hwg-amber);
  border-bottom: 2px solid var(--hwg-amber);
  transform: translate(-10%, -60%) rotate(45deg);
}
.bp-garantias__text {
  font-family: var(--ff-sans);
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--hwg-ink);
  letter-spacing: var(--tr-snug);
  margin: 0;
}

/* ───── 10. O QUE MUDA — Galeria editorial + finale ───── */
.bp-muda {
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  padding: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--gutter);
  position: relative;
  overflow: hidden;
}
.bp-muda__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bp-muda__head {
  margin-bottom: clamp(var(--sp-8), 6vw, var(--sp-10));
}
.bp-muda__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-on-ink);
  margin: 0;
}
.bp-muda__title-line { display: block; white-space: nowrap; }
.bp-muda__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-amber);
}

/* 4 boxes com ícone, lado a lado na mesma linha */
.bp-muda__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
}
.bp-muda__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  padding: clamp(var(--sp-4), 2vw, var(--sp-5)) 0 0;
  border-top: 1px solid rgba(237, 234, 226, 0.2);
  transition: border-color var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.bp-muda__item:hover {
  border-color: rgba(224, 114, 40, 0.65);
  transform: translateY(-4px);
}
/* Ícone âmbar — sem caixa, só o traço */
.bp-muda__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  color: var(--hwg-amber);
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.bp-muda__icon svg { width: 100%; height: 100%; }
.bp-muda__item:hover .bp-muda__icon { transform: translateY(-2px); }
.bp-muda__heading {
  font-family: var(--ff-sans);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
  color: var(--hwg-on-ink);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bp-muda__item, .bp-muda__icon { transition: none !important; }
}

/* ───── MOBILE — Branding Performance (≤ 720px) ───── */
@media (max-width: 720px) {
  .bp-hero {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-5), 5vw, var(--sp-7));
    min-height: auto;
    padding-top: clamp(var(--sp-5), 5vw, var(--sp-7));
    padding-bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
  }
  .bp-hero__title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.8rem); }
  .bp-hero__line { white-space: normal; }
  .bp-hero__mosaic {
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    width: 100%;
    justify-self: center;
  }
  .bp-hero__tile { min-height: 0; }

  .bp-method__manifesto {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  }
  .bp-method__arrow {
    transform: rotate(90deg);
    padding: clamp(var(--sp-1), 2vw, var(--sp-3)) 0;
  }
  .bp-method__manifesto:hover .bp-method__arrow { transform: rotate(90deg) translateX(4px); }
  .bp-method__phrase { font-size: clamp(1.6rem, 1rem + 3vw, 2.4rem); }
  .bp-problem { padding-block: clamp(var(--sp-8), 12vw, var(--sp-10)); }
  .bp-problem__title {
    font-size: clamp(2rem, 1.4rem + 3.4vw, 2.8rem);
    max-width: 100%;
  }
  .bp-problem__title-line { display: inline; }
  .bp-problem__lede { font-size: clamp(1rem, 0.92rem + 0.6vw, 1.18rem); }
  /* 3 colunas empilham em 1, separadas por linha horizontal */
  .bp-problem__items { grid-template-columns: 1fr; }
  .bp-problem__item {
    padding: clamp(var(--sp-5), 6vw, var(--sp-7)) 0 !important;
  }
  .bp-problem__item + .bp-problem__item {
    border-left: 0;
    border-top: 1px solid rgba(16, 22, 30, 0.12);
  }
  .bp-problem__item::before { left: 0; }
  .bp-problem__index,
  .bp-problem__item-title { font-size: clamp(1.5rem, 1.1rem + 3vw, 2.1rem); }
  .bp-problem__text { font-size: clamp(1rem, 0.92rem + 0.8vw, 1.1rem); max-width: 100%; }

  .bp-para-quem { padding-block: clamp(var(--sp-8), 12vw, var(--sp-10)); }
  .bp-para-quem__grid {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-6), 6vw, var(--sp-8));
  }
  .bp-para-quem__visual { order: -1; max-width: 480px; }
  .bp-para-quem__visual-frame { aspect-ratio: 3 / 2; }

  .bp-garantias { padding-top: clamp(var(--sp-6), 7vw, var(--sp-7)); padding-bottom: clamp(var(--sp-8), 12vw, var(--sp-10)); }
  .bp-garantias__list { grid-template-columns: 1fr; }
  .bp-solution__grid {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-6), 6vw, var(--sp-8));
  }
  .bp-solution__visual-frame { min-height: clamp(280px, 50vw, 380px); }
  .bp-solution__lede { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.8rem); max-width: 100%; }
  .bp-solution__verb-row {
    grid-template-columns: clamp(48px, 12vw, 72px) 1fr;
    gap: clamp(var(--sp-2), 2vw, var(--sp-3));
  }
  .bp-solution__verb-name { font-size: clamp(2rem, 1.4rem + 4vw, 3rem); }
  .bp-frentes__title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.8rem); }
  .bp-frentes__title-line { display: inline; }
  .bp-frente {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-4), 4vw, var(--sp-5));
    padding: clamp(var(--sp-6), 6vw, var(--sp-8)) 0;
  }
  .bp-frente__aside {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--sp-3), 3vw, var(--sp-4));
  }
  .bp-frente__aside::after { display: none; }
  .bp-frente__verb { font-size: clamp(2.2rem, 1.5rem + 3vw, 2.8rem); }
  .bp-timeline { padding: 0; }
  .bp-timeline__head { padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter) clamp(var(--sp-5), 4vw, var(--sp-7)); }
  .bp-timeline__title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.8rem); }
  .bp-timeline__title-line { display: inline; }

  /* Mobile fallback: desativa sticky horizontal, vira lista vertical limpa */
  .bp-timeline__pin { height: auto; }
  .bp-timeline__viewport {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    padding: 0 var(--gutter) clamp(var(--sp-8), 7vw, var(--sp-10));
  }
  .bp-timeline__rail {
    width: 100%;
    transform: none;
    padding-inline: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .bp-timeline__milestones {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .bp-timeline__milestone {
    flex: 0 0 auto;
    height: auto;
    justify-content: flex-start;
    opacity: 1;
    padding: clamp(var(--sp-5), 5vw, var(--sp-6)) 0;
  }
  /* Na vertical, o fio separador volta a ser horizontal entre etapas */
  .bp-timeline__milestone + .bp-timeline__milestone {
    border-left: 0;
    border-top: 1px solid rgba(237, 234, 226, 0.12);
  }
  .bp-timeline__mile-mark { opacity: 1; transform: none; }
  .bp-timeline__mile-desc { max-width: none; }
  /* Linha de progresso vira vertical à esquerda */
  .bp-timeline__progress {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }
  .bp-timeline__axis-progress {
    width: 100%;
    height: var(--bp-tl-progress, 0%);
    transition: height 240ms var(--ease-out-soft);
  }
  .bp-timeline__hint { display: none; }
  .bp-cases__title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.8rem); }
  .bp-cases__title-line { display: inline; }
  /* mobile: pôsteres um pouco mais largos no trilho */
  .bp-case { flex-basis: clamp(228px, 72vw, 300px); }
  .bp-muda__title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.8rem); }
  .bp-muda__title-line { display: inline; white-space: normal; }
  .bp-muda__list { grid-template-columns: repeat(2, 1fr); }
  .bp-muda__heading { font-size: clamp(1.05rem, 0.95rem + 1vw, 1.4rem); }
}

/* ═══════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════
   RESULTADOS — Galeria de portfólio (image-first, minimalista)
   Foco total na imagem · grid editorial com offset · hover fluido
   ═══════════════════════════════════════════════════════════ */

/* ── Intro enxuta ── */
.rs-intro {
  margin-top: var(--header-h);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  /* título mais próximo do topo/logo — galeria aparece mais cedo */
  padding: clamp(var(--sp-4), 3vw, var(--sp-6)) var(--gutter) clamp(var(--sp-4), 3vw, var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.8vw, var(--sp-4));
}
.rs-intro__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
  margin: 0;
  max-width: 16ch;
}
.rs-intro__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  letter-spacing: inherit;
}
.rs-intro__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  flex-wrap: wrap;
  border-top: 1px solid rgba(16, 22, 30, 0.12);
  padding-top: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.rs-intro__lede {
  font-family: var(--ff-sans);
  font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--hwg-ink);
  opacity: 0.78;
  margin: 0;
  max-width: 54ch;
  letter-spacing: var(--tr-snug);
}
.rs-intro__lede em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--hwg-ink);
  opacity: 1;
  letter-spacing: 0;
}
.rs-intro__count {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.45;
  white-space: nowrap;
}
.rs-intro__count b { color: var(--hwg-amber); font-weight: var(--fw-medium); }

/* ── Galeria: 2 colunas flex independentes (sem row-locking, sem buracos) ──
   Cada .rs-gallery__col é uma pilha vertical: a altura de um card só empurra
   o card ABAIXO dele na mesma coluna, nunca o vizinho lateral — fim dos vãos.
   Distribuição no HTML: col1 = itens 1,3,5,7 / col2 = itens 2,4,6,8,
   o que mantém o desktop VISUALMENTE idêntico ao grid aprovado. */
.rs-gallery {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(var(--sp-9), 9vw, var(--sp-11));
  list-style: none;
  display: flex;
  align-items: flex-start;                  /* CRÍTICO: colunas não esticam à mesma altura */
  gap: clamp(var(--sp-5), 3vw, var(--sp-7)); /* gutter ENTRE colunas */
}
.rs-gallery__col {
  flex: 1 1 0;                               /* duas trilhas de largura igual */
  min-width: 0;                              /* evita overflow da imagem no flex item */
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-7), 4.5vw, var(--sp-9)); /* gap vertical entre cards */
}

.rs-project { --pc: var(--hwg-ink); }
.rs-project--forest { --pc: var(--hwg-forest); }
.rs-project--amber  { --pc: var(--hwg-amber); }

.rs-project__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.rs-project__frame {
  display: block;             /* span vira bloco — sem isso o aspect-ratio é ignorado */
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;        /* todas as capas no MESMO tamanho, independente da imagem */
  background: var(--hwg-soft);
  isolation: isolate;
}
.rs-project__img {
  position: absolute;         /* preenche o frame 3/2; não influencia a altura da caixa */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1100ms var(--ease-out-soft);
}
.rs-project__link:hover .rs-project__img { transform: scale(1.1); }

/* Véu bege bem claro sobre cada imagem — unifica fundos brancos */
.rs-project__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hwg-soft);
  opacity: 0.16;
  pointer-events: none;
}

/* véu sutil que escurece no hover (dá coesão entre fotos diferentes) */
.rs-project__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(16, 22, 30, 0.28), rgba(16, 22, 30, 0) 45%);
  opacity: 0;
  transition: opacity 500ms var(--ease-out-soft);
  pointer-events: none;
}
.rs-project__link:hover .rs-project__frame::after { opacity: 1; }

/* etiqueta "Ver projeto" — sobe da base no hover */
.rs-project__view {
  position: absolute;
  left: clamp(var(--sp-4), 2vw, var(--sp-5));
  bottom: clamp(var(--sp-4), 2vw, var(--sp-5));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-paper);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease-out-soft), transform 460ms var(--ease-out-soft);
}
.rs-project__view-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  background: var(--pc);
  border-radius: 50%;
}
.rs-project__link:hover .rs-project__view { opacity: 1; transform: translateY(0); }

/* legenda sob a imagem — linha fina divisória + nome + categoria */
.rs-project__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: clamp(var(--sp-3), 1.4vw, var(--sp-4));
  border-top: 1px solid rgba(16, 22, 30, 0.14);
  margin-top: clamp(var(--sp-3), 1.4vw, var(--sp-4));
}
.rs-project__name {
  font-family: var(--ff-sans);
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.15;
  color: var(--hwg-ink);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.rs-project__link:hover .rs-project__name { color: var(--pc); }
.rs-project__cat {
  font-family: var(--ff-sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.45;
  white-space: nowrap;
  flex: none;
}

@media (max-width: 820px) {
  .rs-gallery {
    flex-direction: column;                       /* as duas colunas empilham: vira 1 coluna */
    gap: clamp(var(--sp-7), 11vw, var(--sp-9));
  }
  .rs-gallery__col {
    gap: clamp(var(--sp-7), 11vw, var(--sp-9));
  }
  .rs-project__view { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-project__img,
  .rs-project__mark,
  .rs-project__view,
  .rs-project__name::after { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   CASE — Página de projeto por dentro (editorial full-bleed)
   A área mais visual do site: imagens grandes, narrativa fluida
   ═══════════════════════════════════════════════════════════ */
.cs { background: var(--hwg-paper); }

/* ── Hero full-bleed escuro ── */
.cs-hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: clamp(58vh, 78vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--gutter);
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  overflow: hidden;
  isolation: isolate;
}
.cs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cs-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transform: scale(1.06);
}
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(16, 22, 30, 0.92) 8%, rgba(16, 22, 30, 0.35) 60%, rgba(16, 22, 30, 0.5) 100%);
}
.cs-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}
.cs-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--ff-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-on-ink);
  opacity: 0.75;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out-soft);
  width: max-content;
}
.cs-hero__back:hover { opacity: 1; }
.cs-hero__back-mark {
  display: inline-block;
  width: 20px;
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
}
.cs-hero__title {
  font-family: var(--ff-sans);
  font-size: clamp(2.6rem, 1.6rem + 5.2vw, 5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.0;
  color: var(--hwg-paper);
  margin: 0;
}
.cs-hero__tagline {
  font-family: var(--ff-sans);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--hwg-on-ink);
  opacity: 0.85;
  margin: 0;
  max-width: 40ch;
  letter-spacing: var(--tr-snug);
}
.cs-hero__tagline em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-amber-soft, #F4A35E);
  letter-spacing: inherit;
}
.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
  margin-top: clamp(var(--sp-2), 1.4vw, var(--sp-3));
  list-style: none;
  padding: 0;
}
.cs-tag {
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-on-ink);
  border: 1px solid rgba(237, 234, 226, 0.28);
  border-radius: 100px;
  padding: 0.5em 1em;
}
.cs-hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
  z-index: 2;
  font-family: var(--ff-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hwg-on-ink);
  opacity: 0.6;
  writing-mode: vertical-rl;
}

/* ── Intro / Desafio ── */
.cs-intro {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--gutter) clamp(var(--sp-5), 4vw, var(--sp-7));
}
.cs-intro__lede {
  font-family: var(--ff-sans);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
  font-weight: var(--fw-regular);
  line-height: 1.28;
  letter-spacing: var(--tr-tight);
  color: var(--hwg-ink);
  margin: 0;
}
.cs-intro__lede em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  letter-spacing: inherit;
}

/* ── Bloco narrativo: label sticky + texto ── */
.cs-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(var(--sp-6), 4.5vw, var(--sp-8)) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 5vw, var(--sp-8));
  align-items: start;
}
.cs-block__label {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--ff-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-forest);
  width: max-content;
}
.cs-eyebrow-mark {
  display: inline-block;
  width: 22px;
  aspect-ratio: 41/38;
  background: var(--hwg-amber);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%);
  flex: 0 0 auto;
}
.cs-block__num {
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.35;
  font-feature-settings: "tnum";
}
.cs-block__body {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
  max-width: 62ch;
}
.cs-block__heading {
  font-family: var(--ff-sans);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.12;
  color: var(--hwg-ink);
  margin: 0;
}
.cs-block__heading em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
}
.cs-block__text {
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--hwg-ink);
  opacity: 0.8;
  margin: 0;
  letter-spacing: var(--tr-snug);
}
.cs-block__text em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  opacity: 1;
  letter-spacing: inherit;
}

/* ── Imagem full-bleed (com leve parallax) ── */
.cs-full {
  margin: clamp(var(--sp-7), 6vw, var(--sp-9)) 0;
}
.cs-full__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hwg-soft);
}
.cs-full__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(var(--py, 0)) scale(1.12);
  will-change: transform;
}
/* Véu bege bem claro sobre a imagem — unifica fundos brancos */
.cs-full__frame::after,
.cs-duo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hwg-soft);
  opacity: 0.16;
  pointer-events: none;
}
.cs-full__caption {
  max-width: var(--container-max);
  margin: clamp(var(--sp-3), 1.6vw, var(--sp-4)) auto 0;
  padding: 0 var(--gutter);
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--hwg-ink);
  opacity: 0.5;
}

/* ── Duo de imagens ── */
.cs-duo {
  max-width: var(--container-max);
  margin: clamp(var(--sp-6), 5vw, var(--sp-8)) auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
}
.cs-duo__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--hwg-soft);
}
.cs-duo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease-out-soft);
}
.cs-duo__frame:hover img { transform: scale(1.05); }

/* ── Resultado / frase de fechamento ── */
.cs-quote {
  background: var(--hwg-soft);
  padding: clamp(var(--sp-9), 10vw, var(--sp-11)) var(--gutter);
  text-align: center;
}
.cs-quote__inner {
  max-width: 44ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}
.cs-quote__eyebrow {
  align-self: center;
}
.cs-quote__text {
  font-family: var(--ff-sans);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.18;
  color: var(--hwg-ink);
  margin: 0;
}
.cs-quote__text em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-amber);
}
/* CTA do resultado — pílula âmbar com seta */
.cs-quote__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  padding: 0.85em 1.6em;
  background: var(--hwg-amber);
  color: var(--hwg-ink);
  font-family: var(--ff-sans);
  font-size: var(--t-cta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  border-radius: 100px;
  transition: transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft);
}
.cs-quote__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(224, 114, 40, 0.7);
}
.cs-quote__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.cs-quote__cta:hover .cs-quote__cta-arrow { transform: translateX(5px); }

/* ── Ficha técnica ── */
.cs-credits {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter);
}
.cs-credits__head {
  margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-7));
}
.cs-credits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-top: 1px solid rgba(16, 22, 30, 0.14);
  padding-top: clamp(var(--sp-5), 4vw, var(--sp-6));
  list-style: none;
}
.cs-credit__role {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-amber);
  margin-bottom: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.cs-credit__name {
  font-family: var(--ff-sans);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0.85;
}

/* ── Próximo case ── */
.cs-next {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(42vh, 52vh, 520px);
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter);
  background: var(--hwg-ink);
  color: var(--hwg-on-ink);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.cs-next__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cs-next__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  transform: scale(1.04);
  transition: transform 1200ms var(--ease-out-soft), opacity 600ms var(--ease-out-soft);
}
.cs-next:hover .cs-next__bg img { transform: scale(1.12); opacity: 0.42; }
.cs-next__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  text-align: center;
}
.cs-next__label {
  font-family: var(--ff-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-on-ink);
  opacity: 0.7;
}
.cs-next__name {
  font-family: var(--ff-sans);
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  color: var(--hwg-paper);
  margin: 0;
}
.cs-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-amber-soft, #F4A35E);
  margin-top: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.cs-next__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.cs-next:hover .cs-next__cta-arrow { transform: translateX(6px); }

/* ── Responsivo ── */
@media (max-width: 820px) {
  .cs-block {
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-4), 4vw, var(--sp-5));
  }
  .cs-block__label { position: static; flex-direction: row; align-items: center; gap: var(--sp-3); }
  .cs-duo { grid-template-columns: 1fr; }
  .cs-full__frame { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero__bg img,
  .cs-full__frame img { transform: none !important; }
  .cs-duo__frame img,
  .cs-next__bg img,
  .cs-next__cta-arrow { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG — Destaque + grade de artigos (image-first)
   Hover: imagem fica preto e branco (briefing do cliente)
   ═══════════════════════════════════════════════════════════ */

/* ── Intro ── */
.bl-intro {
  margin-top: var(--header-h);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(var(--sp-8), 8vw, var(--sp-10)) var(--gutter) clamp(var(--sp-6), 5vw, var(--sp-8));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}
.bl-intro__title {
  font-family: var(--ff-sans);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.06;
  color: var(--hwg-ink);
  margin: 0;
  max-width: 20ch;
}
.bl-intro__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  letter-spacing: inherit;
}
.bl-intro__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  flex-wrap: wrap;
  border-top: 1px solid rgba(16, 22, 30, 0.12);
  padding-top: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.bl-intro__lede {
  font-family: var(--ff-sans);
  font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--hwg-ink);
  opacity: 0.78;
  margin: 0;
  max-width: 50ch;
  letter-spacing: var(--tr-snug);
}
.bl-intro__lede em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--hwg-ink);
  opacity: 1;
  letter-spacing: 0;
}

/* Filtros (visuais — categorias) */
.bl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
  list-style: none;
  padding: 0;
  margin: 0;
}
.bl-filter {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
  border: 1px solid rgba(16, 22, 30, 0.16);
  border-radius: 100px;
  padding: 0.5em 1.05em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
}
.bl-filter:hover { border-color: var(--hwg-ink); }
.bl-filter.is-active {
  background: var(--hwg-ink);
  border-color: var(--hwg-ink);
  color: var(--hwg-paper);
}

/* ── Destaque ── */
.bl-feature {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(var(--sp-7), 5vw, var(--sp-9));
}
.bl-feature__link {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.bl-feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--hwg-soft);
}
.bl-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1100ms var(--ease-out-soft), filter 600ms var(--ease-out-soft);
}
/* hover → preto e branco */
.bl-feature__link:hover .bl-feature__media img {
  filter: grayscale(1);
  transform: scale(1.06);
}
.bl-feature__badge {
  position: absolute;
  top: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  left: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  z-index: 2;
  font-family: var(--ff-sans);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-paper);
  background: var(--hwg-amber);
  padding: 0.5em 0.95em;
}
.bl-feature__body {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
}
.bl-feature__meta {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.bl-feature__cat { color: var(--hwg-forest); }
.bl-feature__dot { color: var(--hwg-ink); opacity: 0.3; }
.bl-feature__time { color: var(--hwg-ink); opacity: 0.45; }
.bl-feature__title {
  font-family: var(--ff-sans);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.1;
  color: var(--hwg-ink);
  margin: 0;
}
.bl-feature__excerpt {
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--hwg-ink);
  opacity: 0.75;
  margin: 0;
  max-width: 52ch;
  letter-spacing: var(--tr-snug);
}
.bl-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
  margin-top: clamp(var(--sp-1), 0.6vw, var(--sp-2));
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hwg-ink);
}
.bl-feature__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.bl-feature__link:hover .bl-feature__cta-arrow { transform: translateX(6px); }

/* ── Grade de artigos ── */
.bl-list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(var(--sp-9), 9vw, var(--sp-11));
}
.bl-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-8)) clamp(var(--sp-5), 3vw, var(--sp-7));
}
.bl-post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.bl-post__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--hwg-soft);
  margin-bottom: clamp(var(--sp-3), 1.6vw, var(--sp-4));
}
.bl-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1000ms var(--ease-out-soft), filter 600ms var(--ease-out-soft);
}
/* hover → preto e branco */
.bl-post__link:hover .bl-post__media img {
  filter: grayscale(1);
  transform: scale(1.07);
}
.bl-post__body {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.bl-post__meta {
  font-family: var(--ff-sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.45;
}
.bl-post__cat { color: var(--hwg-forest); opacity: 1; }
.bl-post__title {
  font-family: var(--ff-sans);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
  color: var(--hwg-ink);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.bl-post__link:hover .bl-post__title { color: var(--hwg-forest); }
.bl-post__excerpt {
  font-family: var(--ff-sans);
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1rem);
  line-height: 1.55;
  color: var(--hwg-ink);
  opacity: 0.7;
  margin: 0;
  letter-spacing: var(--tr-snug);
}

/* ── Carregar mais ── */
.bl-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--sp-7), 5vw, var(--sp-9));
}
.bl-more__btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hwg-ink);
  background: transparent;
  border: 1px solid var(--hwg-ink);
  border-radius: 100px;
  padding: 0.9em 2em;
  transition: color var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-out-soft);
}
.bl-more__btn:hover { background: var(--hwg-ink); color: var(--hwg-paper); }

/* ── Responsivo ── */
@media (max-width: 900px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-feature__link { grid-template-columns: 1fr; }
  .bl-feature__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .bl-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-feature__media img,
  .bl-post__media img,
  .bl-feature__cta-arrow { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ARTIGO — Página interna de blog (simples, estilo WordPress)
   Coluna única centralizada · imagem destacada · texto limpo
   ═══════════════════════════════════════════════════════════ */
.ar {
  background: var(--hwg-paper);
  margin-top: var(--header-h);
}

/* Container único — mesma largura da imagem destacada */
.ar-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ── Cabeçalho ── */
.ar-head {
  padding-top: clamp(var(--sp-7), 6vw, var(--sp-9));
  padding-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.ar-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
  opacity: 0.55;
  text-decoration: none;
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
  transition: opacity var(--dur-fast) var(--ease-out-soft);
}
.ar-back:hover { opacity: 1; }
.ar-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  font-family: var(--ff-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  margin-bottom: clamp(var(--sp-3), 1.6vw, var(--sp-4));
}
.ar-meta__cat { color: var(--hwg-forest); }
.ar-meta__sep { color: var(--hwg-ink); opacity: 0.3; }
.ar-meta__item { color: var(--hwg-ink); opacity: 0.5; }
.ar-title {
  font-family: var(--ff-sans);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.14;
  color: var(--hwg-ink);
  margin: 0 0 clamp(var(--sp-4), 2vw, var(--sp-5));
  text-wrap: balance;
}
.ar-standfirst {
  font-family: var(--ff-sans);
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--hwg-ink);
  opacity: 0.72;
  margin: 0 0 clamp(var(--sp-5), 3vw, var(--sp-6));
  letter-spacing: var(--tr-snug);
}
.ar-byline {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  padding-top: clamp(var(--sp-4), 2vw, var(--sp-5));
  border-top: 1px solid rgba(16, 22, 30, 0.12);
}
.ar-byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--hwg-soft);
}
.ar-byline__name {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.92rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
}
.ar-byline__role {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hwg-ink);
  opacity: 0.45;
}

/* ── Imagem destacada ── */
.ar-featured {
  max-width: 980px;
  margin: 0 auto clamp(var(--sp-6), 4vw, var(--sp-8));
  padding-inline: var(--gutter);
}
.ar-featured img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--hwg-soft);
}
.ar-featured figcaption {
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  color: var(--hwg-ink);
  opacity: 0.5;
  margin-top: clamp(var(--sp-2), 1.2vw, var(--sp-3));
}

/* ── Corpo (tipografia de leitura) ── */
.ar-content {
  padding-bottom: clamp(var(--sp-8), 6vw, var(--sp-9));
}
.ar-content > p {
  font-family: var(--ff-sans);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.75;
  color: var(--hwg-ink);
  opacity: 0.86;
  margin: 0 0 clamp(var(--sp-4), 2vw, var(--sp-5));
  letter-spacing: var(--tr-snug);
}
.ar-content > p:first-child::first-letter {
  initial-letter: 2;
  -webkit-initial-letter: 2;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  margin-right: 0.08em;
}
.ar-content p em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}
.ar-content p strong { font-weight: var(--fw-bold); }
.ar-content p a {
  color: var(--hwg-forest);
  text-underline-offset: 3px;
}
.ar-content h2 {
  font-family: var(--ff-sans);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
  color: var(--hwg-ink);
  margin: clamp(var(--sp-6), 4vw, var(--sp-8)) 0 clamp(var(--sp-3), 1.6vw, var(--sp-4));
}
.ar-content img {
  width: 100%;
  height: auto;
  display: block;
  margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0 clamp(var(--sp-2), 1.2vw, var(--sp-3));
}
.ar-content figure { margin: 0; }
.ar-content figcaption {
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  color: var(--hwg-ink);
  opacity: 0.5;
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.ar-content blockquote {
  margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0;
  padding: clamp(var(--sp-4), 2vw, var(--sp-5)) 0 clamp(var(--sp-4), 2vw, var(--sp-5)) clamp(var(--sp-4), 2.5vw, var(--sp-5));
  border-left: 3px solid var(--hwg-amber);
}
.ar-content blockquote p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  line-height: 1.35;
  color: var(--hwg-ink);
  margin: 0;
  letter-spacing: 0;
}

/* Tags + compartilhar (rodapé do post) */
.ar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(var(--sp-4), 3vw, var(--sp-5));
  padding-top: clamp(var(--sp-5), 3vw, var(--sp-6));
  margin-top: clamp(var(--sp-6), 4vw, var(--sp-7));
  border-top: 1px solid rgba(16, 22, 30, 0.12);
}
.ar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
  list-style: none;
  padding: 0;
  margin: 0;
}
.ar-tag {
  font-family: var(--ff-sans);
  font-size: 0.74rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
  opacity: 0.7;
  border: 1px solid rgba(16, 22, 30, 0.16);
  border-radius: 100px;
  padding: 0.4em 0.9em;
}
.ar-share {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
}
.ar-share__label {
  font-family: var(--ff-sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hwg-ink);
  opacity: 0.45;
}
.ar-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border: 1px solid rgba(16, 22, 30, 0.2);
  border-radius: 50%;
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  color: var(--hwg-ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft);
}
.ar-share__link:hover { background: var(--hwg-ink); color: var(--hwg-paper); border-color: var(--hwg-ink); }

/* ── Relacionados ── */
.ar-related {
  background: var(--hwg-soft);
  padding: clamp(var(--sp-8), 6vw, var(--sp-9)) var(--gutter);
}
.ar-related__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.ar-related__head { margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-7)); }
.ar-related__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-8)) clamp(var(--sp-5), 3vw, var(--sp-7));
}

@media (max-width: 900px) {
  .ar-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ar-related__grid { grid-template-columns: 1fr; }
  .ar-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-back, .ar-share__link { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   AGENDAR DIAGNÓSTICO — split valor + formulário criativo
   Esquerda: contexto/passos/contato · Direita: form com chips
   ═══════════════════════════════════════════════════════════ */
.ag {
  background: var(--hwg-paper);
  margin-top: var(--header-h);
  padding: clamp(var(--sp-8), 7vw, var(--sp-10)) var(--gutter) clamp(var(--sp-9), 8vw, var(--sp-11));
}
.ag__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-10));
  align-items: start;
}

/* ── Coluna esquerda ── */
.ag-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}
.ag-aside__title {
  font-family: var(--ff-sans);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.08;
  color: var(--hwg-ink);
  margin: 0;
  max-width: 16ch;
}
.ag-aside__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--hwg-forest);
  letter-spacing: inherit;
}
.ag-aside__lede {
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--hwg-ink);
  opacity: 0.74;
  margin: 0;
  max-width: 46ch;
  letter-spacing: var(--tr-snug);
}

/* Passos */
.ag-steps {
  list-style: none;
  padding: 0;
  margin: clamp(var(--sp-3), 2vw, var(--sp-4)) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.ag-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  align-items: start;
}
.ag-step__num {
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--hwg-amber);
  font-feature-settings: "tnum";
  padding-top: 0.15em;
}
.ag-step__body { display: flex; flex-direction: column; gap: 0.2em; }
.ag-step__title {
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
}
.ag-step__text {
  font-family: var(--ff-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0.65;
  letter-spacing: var(--tr-snug);
}

/* Contato direto */
.ag-contact {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  margin-top: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  padding-top: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-top: 1px solid rgba(16, 22, 30, 0.12);
}
.ag-contact__item {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  text-decoration: none;
  color: inherit;
}
.ag-contact__label {
  font-family: var(--ff-sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.45;
}
.ag-contact__value {
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
  transition: color var(--dur-fast) var(--ease-out-soft);
}
a.ag-contact__item:hover .ag-contact__value { color: var(--hwg-forest); }

/* ── Coluna direita: formulário ── */
.ag-form-wrap {
  background: var(--hwg-soft);
  padding: clamp(var(--sp-5), 4vw, var(--sp-8));
}
.ag-form {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.ag-field {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1vw, var(--sp-3));
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.ag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-5));
}
.ag-label {
  font-family: var(--ff-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--hwg-ink);
  opacity: 0.7;
  padding: 0;
}
.ag-req { color: var(--hwg-amber); opacity: 1; }

/* Inputs */
.ag-input {
  font-family: var(--ff-sans);
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.08rem);
  color: var(--hwg-ink);
  background: var(--hwg-paper);
  border: 1px solid rgba(16, 22, 30, 0.14);
  border-radius: 0;
  padding: clamp(var(--sp-3), 1.5vw, var(--sp-4)) clamp(var(--sp-3), 1.6vw, var(--sp-4));
  width: 100%;
  letter-spacing: var(--tr-snug);
  transition: border-color var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
  -webkit-appearance: none;
  appearance: none;
}
.ag-input::placeholder { color: var(--hwg-ink); opacity: 0.35; }
.ag-input:focus {
  outline: none;
  border-color: var(--hwg-forest);
  box-shadow: 0 0 0 3px rgba(43, 102, 69, 0.12);
}
.ag-textarea { resize: vertical; min-height: 7em; line-height: 1.55; }

/* Chips de seleção */
.ag-field--chips { gap: clamp(var(--sp-3), 1.6vw, var(--sp-4)); }
.ag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--sp-2), 1.2vw, var(--sp-3));
}
.ag-chip { position: relative; display: inline-flex; cursor: pointer; }
.ag-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ag-chip__face {
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  color: var(--hwg-ink);
  background: var(--hwg-paper);
  border: 1px solid rgba(16, 22, 30, 0.16);
  border-radius: 100px;
  padding: 0.7em 1.2em;
  transition: color var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
}
.ag-chip:hover .ag-chip__face { border-color: var(--hwg-ink); }
.ag-chip input:checked + .ag-chip__face {
  background: var(--hwg-forest);
  border-color: var(--hwg-forest);
  color: var(--hwg-paper);
}
.ag-chip input:focus-visible + .ag-chip__face {
  box-shadow: 0 0 0 3px rgba(43, 102, 69, 0.18);
}

.ag-divider {
  height: 1px;
  background: rgba(16, 22, 30, 0.12);
}

/* Botão enviar */
.ag-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--hwg-paper);
  background: var(--hwg-ink);
  border: 0;
  border-radius: 0;
  padding: clamp(var(--sp-4), 2vw, var(--sp-5));
  cursor: pointer;
  width: 100%;
  transition: background-color var(--dur-fast) var(--ease-out-soft);
}
.ag-submit:hover { background: var(--hwg-forest); }
.ag-submit__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.ag-submit:hover .ag-submit__arrow { transform: translateX(5px); }

.ag-note {
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--hwg-ink);
  opacity: 0.55;
  margin: 0;
  text-align: center;
  letter-spacing: var(--tr-snug);
}
.ag-note em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  opacity: 1;
}

/* Footer "bare" (sem bloco CTA grande, já que a página É o CTA) */
.cta-footer--bare { padding-top: clamp(var(--sp-8), 6vw, var(--sp-9)); }

/* Header CTA ativo */
.header-cta.is-current { background: var(--hwg-forest); color: var(--hwg-paper); }

/* ── Responsivo ── */
@media (max-width: 900px) {
  .ag__grid { grid-template-columns: 1fr; gap: clamp(var(--sp-6), 6vw, var(--sp-8)); }
  .ag-aside { position: static; }
}
@media (max-width: 560px) {
  .ag-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-input, .ag-chip__face, .ag-submit, .ag-submit__arrow, .ag-contact__value { transition: none !important; }
}

/* ── Blog cards da HOME com imagem (mesmo conteúdo visual do blog) ── */
.blog-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1100ms var(--ease-out-soft), filter 600ms var(--ease-out-soft);
}
.blog-card--photo .blog-card__link { background: var(--hwg-ink); color: var(--hwg-paper); }
/* Overlay de leitura: degradê escuro permanente (forte na base) sobre a foto */
.blog-card--photo .blog-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(16, 22, 30, 0.20) 0%,
    rgba(16, 22, 30, 0) 30%,
    rgba(16, 22, 30, 0.58) 66%,
    rgba(16, 22, 30, 0.92) 100%
  );
  transition: background var(--dur-base) var(--ease-out-soft);
}
.blog-card--photo .blog-card__link:hover::after {
  background: linear-gradient(
    180deg,
    rgba(16, 22, 30, 0.30) 0%,
    rgba(16, 22, 30, 0.12) 30%,
    rgba(16, 22, 30, 0.62) 66%,
    rgba(16, 22, 30, 0.94) 100%
  );
}
/* Selo no topo; texto ancorado na base, sobre o degradê forte (boa leitura) */
.blog-card--photo .blog-card__badge { position: relative; z-index: 2; }
.blog-card--photo .blog-card__bottom {
  position: absolute;
  z-index: 2;
  bottom: clamp(var(--sp-4), 2vw, var(--sp-5));
  left: clamp(var(--sp-4), 2vw, var(--sp-5));
  right: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.blog-card--photo .blog-card__title { text-shadow: 0 1px 14px rgba(16, 22, 30, 0.5); }
.blog-card--photo .blog-card__link:hover .blog-card__img { transform: scale(1.08); filter: grayscale(1); }