/*! Rubrica — engenharia do NRS — Estúdio de Software e Produto · oi@n-rs.dev */

:root {
  /* Rubrica — tinta, papel e violeta */
  --bg: #100F0C;
  --bg-1: #17150F;
  --bg-2: #201D18;
  --text: #EDEBE5;
  --accent: #A882C6;          /* violeta de carimbo, elevado para fundo escuro */
  --accent-deep: #5E3B78;
  --muted: rgba(237, 235, 229, 0.44);
  --border: rgba(237, 235, 229, 0.09);
  --paper: #F2F0EA;
  --paper-warm: #E8E3D9;
  --paper-deep: #D8D0C3;
  --ink: #1B1814;
  --ink-soft: #4D463E;
  --ink-muted: #756D63;
  --ink-border: rgba(27, 24, 20, 0.13);
  --violet-ink: #684780;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ── PRELOADER ─────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: all;
  display: flex;
  flex-direction: column;
}
.pre-bar {
  flex: 1;
  background: var(--bg);
}
.pre-center {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}
.pre-wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--text);
  letter-spacing: -0.02em;
  overflow: hidden;
  display: block;
}
.pre-wordmark .pre-char {
  display: inline-block;
  transform: translateY(110%);
}
.pre-counter {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  font-size: 0.72rem;
  font-weight: 200;
  color: var(--muted);
  letter-spacing: 0.1em;
  z-index: 1001;
  font-variant-numeric: tabular-nums;
}
/* ── NAV ───────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.88rem 2.2rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  background: rgba(16, 15, 12, 0.65);
  transition: padding 0.3s;
}
nav.compact {
  padding: 0.62rem 2.2rem;
}
.nav-logo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.nav-logo:hover {
  color: var(--accent);
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--text);
}
.nav-enquire {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(237, 235, 229, 0.18);
  background: rgba(255, 255, 255, 0.035);
  padding: 0.42rem 0.42rem 0.42rem 1.1rem;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.nav-enquire::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 62%);
  opacity: 0.85;
  z-index: 0;
}
.nav-enquire::after {
  content: '';
  position: absolute;
  width: 6rem;
  height: 6rem;
  right: -2.1rem;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(168, 130, 198, 0.22), transparent 68%);
  opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-enquire:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.nav-enquire:hover::after {
  transform: translateY(-50%) scale(1.08);
  opacity: 0.78;
}
.nav-enquire .btn-label,
.nav-enquire .btn-icon,
.btn-shimmer .btn-label,
.btn-outline-text .btn-label {
  position: relative;
  z-index: 1;
}
.nav-enquire .btn-label {
  white-space: nowrap;
}
.nav-enquire .btn-icon {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(237, 235, 229, 0.14);
  background: rgba(16, 15, 12, 0.42);
  color: var(--accent);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.nav-enquire:hover .btn-icon {
  transform: translateX(2px) rotate(12deg);
  background: rgba(168, 130, 198, 0.12);
  border-color: rgba(168, 130, 198, 0.35);
}
/* ── HERO ──────────────────────────────────── */
.hero {
  min-height: 100svh;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.hero-main {
  min-height: 0;
  display: grid;
  grid-template-columns: 55% 45%;
}
.hero-img-panel {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.hero-img-reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 100% 0);
}
.hero-img-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.82);
}
.hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 60%);
}
.hero-img-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(4rem, 10vw, 12rem);
  color: rgba(237, 235, 229, 0.055);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
}
.hero-img-label {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(237, 235, 229, 0.12);
  padding-top: 0.75rem;
  opacity: 0;
  transform: translateY(8px);
}
.hero-img-label span {
  font-size: 0.62rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-content-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.35rem;
  padding: 5.35rem 3.5rem 3rem;
}
.hero-copy-stack {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 29rem;
}
.hero-foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transform: translateY(12px);
}
.hero-foot-note {
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.62);
  line-height: 1.7;
  max-width: 28rem;
}
.hero-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hero-service-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.42rem 0.78rem;
  border-radius: 0;
  border: 1px solid rgba(237, 235, 229, 0.14);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.62rem;
  font-weight: 400;
  color: rgba(237, 235, 229, 0.72);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
}
.hero-h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.2vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--text);
  margin: 1.5rem 0;
}
.hero-h1 .hl {
  display: block;
  overflow: hidden;
}
.hero-h1 .hl span {
  display: block;
  transform: translateY(110%);
}
.hero-desc {
  /* Era 0.82rem embaixo de um título de display: a frase que explica o
     serviço inteiro saía menor que a legenda de uma foto. */
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 30rem;
  opacity: 0;
  transform: translateY(12px);
}
.hero-actions {
  display: flex;
  gap: 0.78rem;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  flex-wrap: wrap;
}
.btn-shimmer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.45rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: #18160F;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, #F3F0EA 0%, #DCD2E6 45%, #8B65AC 100%);
  background-size: 100% 100%, 180% 180%;
  background-position: 0 0, 0% 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  padding: 0.3rem 1.85rem 0.3rem 1.95rem;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(94, 59, 120, 0.08) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transform: translateY(0);
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
  animation: hero-primary-surface 7.5s ease-in-out infinite;
}

/* `hero-primary-surface` anima BOX-SHADOW em laço infinito. Sombra borrada
   não é composta pela GPU: cada quadro repinta a caixa inteira, para sempre,
   nos dois botões primários. No desktop passa; no celular é custo contínuo
   competindo com a entrada do herói. Aqui a sombra fica parada e só a luz
   que corre por cima continua — essa é transform, e não repinta nada. */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .btn-shimmer {
    animation: none;
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(94, 59, 120, 0.08) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.58);
  }
  .btn-shimmer::before {
    animation: none;
  }
}
.btn-shimmer::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 80% 72%, rgba(74, 46, 95, 0.18), transparent 32%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.24) 100%);
  background-size: 140% 140%, 120% 120%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  animation: hero-primary-inner 7.5s ease-in-out infinite;
  z-index: 0;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -46%;
  width: 38%;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.48) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  transform: skewX(-20deg);
  opacity: 0.7;
  animation: hero-primary-sheen 4.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  z-index: 0;
}
@keyframes hero-primary-surface {
  0%, 100% {
    background-position: 0 0, 0% 50%;
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(94, 59, 120, 0.08) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.58);
  }
  50% {
    background-position: 0 0, 100% 50%;
    box-shadow:
      0 18px 34px rgba(0, 0, 0, 0.24),
      0 0 28px rgba(168, 130, 198, 0.18),
      0 0 0 1px rgba(94, 59, 120, 0.12) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.62);
  }
}
@keyframes hero-primary-inner {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50% { background-position: 18% 12%, 84% 88%, 100% 0; }
}
/* A luz corre por TRANSFORM, não por `left`.

   `left` é propriedade de layout: cada quadro desta animação — que é
   infinita e roda em dois botões — obrigava o navegador a refazer o layout
   da página inteira. Medido: 284 layouts em 2,6s, ou seja mais de um por
   quadro, e continuavam depois da entrada terminar. Era isso que travava a
   primeira dobra no celular, e não o JavaScript: com o `app.js` removido a
   contagem não mudava. Em transform a mesma luz só recompõe camada. */
@keyframes hero-primary-sheen {
  0% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  18% { opacity: 0.7; }
  48% { transform: translateX(430%) skewX(-20deg); opacity: 0.72; }
  100% { transform: translateX(430%) skewX(-20deg); opacity: 0; }
}
}
.btn-shimmer:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 22px 36px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(168, 130, 198, 0.22),
    0 0 0 1px rgba(94, 59, 120, 0.12) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
  filter: saturate(1.06);
}
.btn-shimmer:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(168, 130, 198, 0.46),
    0 22px 36px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(168, 130, 198, 0.18);
}
.btn-shimmer .btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  white-space: nowrap;
  line-height: 1;
  transition: transform 0.24s ease, letter-spacing 0.24s ease;
}
.btn-shimmer .btn-label::after {
  content: '';
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: rgba(33, 23, 51, 0.74);
  box-shadow: 0 0 0 0 rgba(33, 23, 51, 0.14);
  animation: hero-primary-pulse 2.8s ease-in-out infinite;
}
@keyframes hero-primary-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(33, 23, 51, 0.12);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 0.32rem rgba(33, 23, 51, 0.08);
  }
}
.btn-shimmer:hover .btn-label {
  transform: translateX(0.06rem);
  letter-spacing: 0.11em;
}
.btn-outline-text {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.95rem;
  padding: 0.22rem 0.98rem;
  border-radius: 0;
  border: 1px solid rgba(237, 235, 229, 0.16);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.btn-outline-text:hover {
  color: var(--accent);
  transform: translateY(-2px);
  border-color: rgba(168, 130, 198, 0.28);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-outline-text:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(168, 130, 198, 0.52), 0 10px 22px rgba(0, 0, 0, 0.14);
}
.btn-outline-text .btn-label {
  white-space: nowrap;
  line-height: 1;
  transition: letter-spacing 0.22s ease;
}
.btn-outline-text:hover .btn-label {
  letter-spacing: 0.12em;
}
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.hero-kpi {
  padding: 1.1rem 1.4rem;
  border-right: 1px solid var(--border);
}
.hero-kpi:last-child {
  border-right: none;
}
.kpi-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.55rem;
  color: var(--text);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}
.kpi-label {
  font-size: 0.62rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ── WORKS — card grid ──────────────────────── */
.works {
  background: var(--bg);
  padding-top: 5rem;
}
.works-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 2.5rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.works-hdr-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section-label {
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.works-hdr h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--text);
}
.works-hdr-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.works-hdr-meta span {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 2.5rem 4rem;
  gap: 0;
}
.work-card {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.work-card:last-child {
  border-right: none;
}
.work-card:nth-child(4n) {
  border-right: none;
}
.work-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.work-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.75) contrast(1.1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.work-card:hover .work-card-img img {
  transform: scale(1.06);
  filter: saturate(0.9) contrast(1.05);
}
.work-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 15, 12, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s;
}
.work-card:hover .work-card-overlay {
  background: rgba(16, 15, 12, 0.38);
}
.work-card-view {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  border: 1px solid rgba(237, 235, 229, 0.55);
  padding: 0.5rem 1.1rem;
  border-radius: 0;
}
.work-card:hover .work-card-view {
  opacity: 1;
  transform: translateY(0);
}
.work-card-info {
  padding: 1rem 1rem 1.2rem;
}
.work-card-num {
  font-size: 0.59rem;
  font-weight: 200;
  color: rgba(237, 235, 229, 0.28);
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.work-card-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  color: var(--text);
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0.25rem;
  transition: color 0.2s;
}
.work-card:hover .work-card-name {
  color: var(--accent);
}
.work-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.work-card-class {
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-card-year {
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--muted);
}
/* ── STACKING CARDS ─────────────────────────── */
#stacking-section {
  position: relative;
  z-index: 1;
}
.stack-intro {
  padding: 5rem 2.5rem 3rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.stack-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: end;
}
.stack-intro h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--text);
}
.stack-intro-desc {
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
}
/* Stacking cards — exact original animation */
.card-slide {
  height: 100vh;
}
.card-wrapper {
  perspective: 250vw;
  width: 100%;
  height: 100%;
}
.card-content {
  transform-style: preserve-3d;
  transform-origin: 50% 10%;
  border-radius: 0;
  overflow: hidden;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}
/* Card color variants */
.card-cream {
  background: #F1EFE9;
  color: #221F19;
}
.card-dark {
  background: #121109;
  color: #EDEBE5;
  border: 1px solid rgba(237, 235, 229, 0.06);
}
.card-warm {
  background: #211733;
  color: #EDE6F3;
}
.card-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 2.5rem 3rem 0;
  gap: 1rem;
}
.card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(3.5rem, 6vw, 7rem);
  line-height: 0.85;
  font-weight: 400;
  letter-spacing: -0.02em;
  opacity: 0.18;
  align-self: start;
}
.card-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
}
.card-dark .card-title {
  color: #EDEBE5;
}
.card-warm .card-title {
  color: #EDE6F3;
}
.card-bottom {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  align-items: stretch;
  padding: 1.1rem 3rem 2.5rem;
  gap: 2rem;
}
.card-left-rail {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
}
.card-middle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.card-mini-panel {
  min-height: 7.9rem;
  border-radius: 0;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(237, 235, 229, 0.12);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.card-mini-panel--wide {
  grid-column: 1 / -1;
}
.card-mini-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 62%);
  pointer-events: none;
}
.card-cream .card-mini-panel {
  border-color: rgba(24, 22, 15, 0.08);
  background: rgba(255, 255, 255, 0.46);
}
.card-warm .card-mini-panel {
  border-color: rgba(237, 230, 243, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.card-mini-label,
.card-signal-list li,
.card-chip {
  position: relative;
  z-index: 1;
}
.card-mini-label {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.58;
}
.card-mini-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.85vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: inherit;
  margin-bottom: 0.55rem;
  position: relative;
  z-index: 1;
}
.card-mini-copy {
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.72;
  position: relative;
  z-index: 1;
}
.card-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  position: relative;
  z-index: 1;
}
.card-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.42rem 0.72rem;
  border-radius: 0;
  border: 1px solid rgba(237, 235, 229, 0.13);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.84;
}
.card-cream .card-chip {
  border-color: rgba(24, 22, 15, 0.1);
  background: rgba(255, 255, 255, 0.62);
}
.card-warm .card-chip {
  border-color: rgba(237, 230, 243, 0.15);
  background: rgba(255, 255, 255, 0.03);
}
.card-signal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.card-signal-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(237, 235, 229, 0.1);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.75;
}
.card-cream .card-signal-list li {
  border-color: rgba(24, 22, 15, 0.1);
}
.card-specimen-box {
  justify-content: space-between;
}
.card-specimen-word {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 4.8vw, 4.4rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: inherit;
}
.card-specimen-meta {
  position: relative;
  z-index: 1;
  font-size: 0.69rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.05em;
  opacity: 0.72;
}
.card-text-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card-text-block {
  display: flex;
  flex-direction: column;
}
.card-support-block {
  padding-top: 1rem;
  border-top: 1px solid rgba(237, 235, 229, 0.1);
}
.card-cream .card-support-block {
  border-color: rgba(24, 22, 15, 0.1);
}
.card-approach-label {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.5;
  margin-bottom: 0.75rem;
}
.card-body-text {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.75;
  color: inherit;
  opacity: 0.65;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  margin-top: 1.2rem;
  opacity: 0.8;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s;
}
.card-link:hover {
  opacity: 1;
}
.card-img-col {
  height: 100%;
  min-height: 12rem;
  border-radius: 0;
  overflow: hidden;
}
.card-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.85);
}
.card-cream .card-img-col img {
  filter: contrast(1.08) saturate(0.8) brightness(0.95);
}
/* ── CONVICTION ─────────────────────────────── */
.conviction {
  height: 100vh;
  display: grid;
  grid-template-columns: 66% 1fr;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  z-index: 3;
  isolation: isolate;
}
/* Ambient glow behind text */
.conviction::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 55%, rgba(168, 130, 198, 0.055), transparent 70%);
  pointer-events: none;
}
.cv-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4.5rem;
  position: relative;
  z-index: 1;
}
.cv-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 3.5rem;
  opacity: 1;
  transform: none;
}
.cv-eye-rule {
  display: none;
}
.cv-eye-label {
  font-size: 0.64rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cv-overflow {
  overflow: visible;
  line-height: 0.96;
  padding-bottom: 0.12em;
}
.cv-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.5rem, 11.5vw, 14rem);
  letter-spacing: -0.04em;
  color: var(--text);
  display: block;
  transform: none;
}
.cv-line.accent {
  color: var(--accent);
}
.cv-sub-row {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 2.8rem;
  opacity: 1;
  transform: none;
}
.cv-sub-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  align-self: stretch;
  min-height: 3rem;
}
.cv-sub {
  font-size: 0.83rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.82;
  max-width: 30rem;
}
/* Right image panel */
.cv-img-panel {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--border);
  clip-path: inset(0 0 0 0);
}
.cv-img-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.72) brightness(0.82);
  transform: scale(1);
}
.cv-img-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 15, 12, 0.55) 0%, rgba(16, 15, 12, 0.18) 60%);
}
/* Caption inside image */
.cv-img-caption {
  position: absolute;
  bottom: 2rem;
  left: 1.8rem;
  right: 1.8rem;
  border-top: 1px solid rgba(237, 235, 229, 0.14);
  padding-top: 0.7rem;
  display: flex;
  justify-content: space-between;
}
.cv-img-caption span {
  font-size: 0.6rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media(max-width:768px) {
  .conviction {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
  .cv-text {
    padding: 5rem 1.5rem 3rem;
  }
  .cv-img-panel {
    display: none;
  }
}
/* ── PHILOSOPHY ─────────────────────────────── */
.philosophy {
  background:
    radial-gradient(circle at 18% 18%, rgba(168, 130, 198, 0.11), transparent 26%),
    radial-gradient(circle at 82% 72%, rgba(168, 130, 198, 0.08), transparent 24%),
    linear-gradient(180deg, #15130F 0%, #100F0C 100%);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: visible;
}
.philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(237, 235, 229, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 235, 229, 0.028) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.28;
  pointer-events: none;
}
.phil-pin-height {
  min-height: 100vh;
  position: relative;
}
.phil-sticky {
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(20rem, 30rem) 1fr;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(16, 15, 12, 0.92) 0%, rgba(16, 15, 12, 0.84) 35%, rgba(16, 15, 12, 0.56) 100%);
}
.phil-left {
  border-right: 1px solid rgba(237, 235, 229, 0.09);
  padding: 3.25rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.phil-left-bg {
  position: absolute;
  right: -0.06em;
  bottom: -0.05em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(9rem, 22vw, 17rem);
  color: rgba(237, 235, 229, 0.06);
  user-select: none;
  pointer-events: none;
  line-height: 0.72;
  letter-spacing: -0.06em;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.phil-kicker {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
}
.phil-section-label {
  font-size: 0.65rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.52);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 0.2rem;
}
.phil-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 4.8vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--text);
  max-width: 12ch;
  position: relative;
}
.phil-desc {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.66);
  line-height: 1.85;
  max-width: 26rem;
  position: relative;
}
.phil-progress-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  margin-top: 0.5rem;
}
.phil-prog-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 7rem) 1fr;
  align-items: center;
  gap: 1rem;
}
.phil-prog-n {
  font-size: 0.62rem;
  color: rgba(237, 235, 229, 0.36);
  letter-spacing: 0.12em;
  width: 2rem;
  flex-shrink: 0;
  transition: color 0.3s;
}
.phil-prog-label {
  font-size: 0.76rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.46);
  letter-spacing: 0.03em;
  transition: color 0.3s;
}
.phil-prog-row.cur .phil-prog-n,
.phil-prog-row.cur .phil-prog-label {
  color: var(--text);
}
.phil-prog-track {
  flex: 1;
  height: 2px;
  background: rgba(237, 235, 229, 0.12);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.phil-prog-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  transition: width 0.08s linear;
}
.phil-side-note {
  position: relative;
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(237, 235, 229, 0.1);
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.56);
  line-height: 1.7;
  max-width: 22rem;
}
.phil-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.phil-stage {
  position: relative;
  width: min(100%, 54rem);
  height: min(78vh, 46rem);
  min-height: 38rem;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(237, 235, 229, 0.1);
  background: linear-gradient(160deg, rgba(36, 26, 56, 0.92) 0%, rgba(20, 18, 15, 0.96) 48%, rgba(14, 13, 10, 1) 100%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
}
.phil-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(168, 130, 198, 0.14), transparent 28%),
    radial-gradient(circle at 28% 78%, rgba(237, 235, 229, 0.05), transparent 24%);
  pointer-events: none;
}
.phil-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 15, 12, 0.04) 0%, rgba(16, 15, 12, 0.22) 100%);
  pointer-events: none;
}
.phil-stage-orbit {
  position: absolute;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  border: 1px solid rgba(237, 235, 229, 0.1);
  top: 52%;
  left: 62%;
  transform: translate(-50%, -50%);
  opacity: 0.45;
}
.phil-stage-orbit::before,
.phil-stage-orbit::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(237, 235, 229, 0.08);
  inset: 16%;
}
.phil-stage-orbit::after {
  inset: 32%;
  border-style: dashed;
  opacity: 0.72;
}
.phil-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(237, 235, 229, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 235, 229, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.95), transparent 88%);
  opacity: 0.42;
}
.phil-stage-meta {
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}
.phil-stage-kicker {
  font-size: 0.66rem;
  font-weight: 400;
  color: rgba(237, 235, 229, 0.64);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.phil-stage-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(5rem, 12vw, 9rem);
  letter-spacing: -0.06em;
  line-height: 0.82;
  color: rgba(237, 235, 229, 0.16);
}
.phil-card-stack {
  position: absolute;
  inset: 5.75rem 2.5rem 4.2rem;
  z-index: 2;
}
.phil-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1.4rem;
  padding: 2.4rem;
  border-radius: 0;
  border: 1px solid rgba(237, 235, 229, 0.08);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(12%, 10%, 0) scale(0.9) rotate(6deg);
  filter: saturate(0.75) blur(2px);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease,
    filter 0.55s ease,
    box-shadow 0.55s ease;
}
.phil-card-paper {
  background: linear-gradient(180deg, #EFECE4 0%, #E4DED2 100%);
  color: #18160F;
}
.phil-card-ink {
  background: linear-gradient(160deg, #17150F 0%, #201D18 100%);
  color: #EDEBE5;
}
.phil-card-brass {
  background: linear-gradient(160deg, #2E2040 0%, #1A1424 100%);
  color: #EDE6F3;
  border-color: rgba(168, 130, 198, 0.18);
}
.phil-card.vis {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  filter: none;
  z-index: 3;
}
.phil-card.next {
  opacity: 0.74;
  transform: translate3d(10%, 7%, 0) scale(0.96) rotate(5deg);
  filter: saturate(0.86) blur(2px);
  z-index: 2;
}
.phil-card.past {
  opacity: 0.56;
  transform: translate3d(-10%, -6%, 0) scale(0.93) rotate(-5deg);
  filter: saturate(0.8) blur(3px);
  z-index: 1;
}
.phil-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.phil-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.phil-q-num {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.phil-card-tags span {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(237, 235, 229, 0.14);
  border-radius: 0;
  padding: 0.45rem 0.8rem;
  color: inherit;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.03);
}
.phil-card-paper .phil-card-tags span {
  border-color: rgba(24, 22, 15, 0.12);
  background: rgba(255, 255, 255, 0.52);
  color: rgba(24, 22, 15, 0.74);
}
.phil-q-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4.3vw, 4.4rem);
  font-weight: 400;
  color: inherit;
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin-bottom: 0;
  max-width: 14ch;
}
.phil-card-body {
  font-size: 0.87rem;
  font-weight: 300;
  line-height: 1.85;
  color: inherit;
  opacity: 0.78;
  max-width: 31rem;
}
.phil-q-attr {
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.72);
  letter-spacing: 0.04em;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(237, 235, 229, 0.12);
  border-radius: 0;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
}
.phil-card-paper .phil-q-attr {
  color: rgba(24, 22, 15, 0.68);
  border-color: rgba(24, 22, 15, 0.12);
  background: rgba(255, 255, 255, 0.52);
}
.phil-stage-footer {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 2;
}
.phil-stage-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.64rem;
  font-weight: 400;
  color: rgba(237, 235, 229, 0.62);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.phil-stage-pulse::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(168, 130, 198, 0.45);
  animation: philPulse 1.8s infinite;
}
.phil-stage-caption {
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(237, 235, 229, 0.68);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
  max-width: 18rem;
}
@keyframes philPulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 130, 198, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(168, 130, 198, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 130, 198, 0); }
}
/* ── STORY ──────────────────────────────────── */
.story {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 6rem 2.5rem;
}
.story-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  margin-bottom: 4rem;
}
.story-timeline {
  list-style: none;
  margin-top: 2.5rem;
}
.tl-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.tl-year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  padding-top: 0.1rem;
  transition: color 0.3s;
}
.tl-item:hover .tl-year {
  color: var(--accent);
}
.tl-event {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
  transition: color 0.3s;
}
.tl-item:hover .tl-event {
  color: var(--text);
}
.story-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.story-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}
.story-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.story-body p {
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.82;
}
.story-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.stat-cell {
  padding: 2rem 1.75rem;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.stat-cell:last-child {
  border-right: none;
}
.stat-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-2);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-cell:hover::before {
  transform: scaleY(1);
}
.stat-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--text);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
  position: relative;
}
.stat-lbl {
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  position: relative;
}
/* ── CONTACT ────────────────────────────────── */
.contact {
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 85vh;
}
.contact-form-side {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border);
}
.contact-label {
  margin-bottom: 0.75rem;
}
.contact-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--text);
  margin-bottom: 2.5rem;
}
.form-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
.fg {
  position: relative;
  margin-bottom: 1.8rem;
}
.fl {
  position: absolute;
  top: 0.7rem;
  left: 0;
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
}
.fi:focus+.fl,
.fi:not(:placeholder-shown)+.fl {
  top: -1.1rem;
  font-size: 0.58rem;
  color: var(--accent);
}
.fi {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--text);
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.2s;
}
.fi::placeholder {
  color: transparent;
}
.fi:focus {
  border-color: var(--accent);
}
textarea.fi {
  resize: none;
  height: 5.5rem;
}
.contact-submit-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.submit-btn {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--bg);
  background: var(--text);
  border: none;
  padding: 0.8rem 2.2rem;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.18s;
}
.submit-btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.contact-note {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--muted);
}
.contact-visual {
  background: var(--bg-1);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(237, 235, 229, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 235, 229, 0.04) 1px, transparent 1px);
  background-size: 52px 52px;
}
.cv-letter {
  /* O traço oficial da rubrica, não uma letra R em itálico: a letra era um
     substituto de protótipo, e a marca é o gesto da assinatura. `currentColor`
     no SVG para o hover continuar funcionando pela mesma transição. */
  width: 34vw;
  color: rgba(237, 235, 229, 0.045);
  position: absolute;
  pointer-events: none;
  user-select: none;
  transition: color 0.6s;
}
.cv-letter svg { width: 100%; height: auto; display: block; }
.contact-visual:hover .cv-letter {
  color: rgba(168, 130, 198, 0.055);
}
.cv-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem;
}
.cv-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  color: var(--text);
  opacity: 0.5;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.cv-divider {
  width: 2rem;
  height: 1px;
  background: var(--accent);
  margin: 1.5rem auto;
  opacity: 0.6;
}
.cv-tagline {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ── FOOTER ─────────────────────────────────── */
footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 3.5rem 2.5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.footer-brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0.75rem;
}
.footer-desc {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
  max-width: 19rem;
}
.footer-col-h {
  font-size: 0.63rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-link-list a {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link-list a:hover {
  color: var(--text);
}
/* Rede social no rodapé: o ícone leva a cor do link e acompanha o hover. */
.footer-link-list a.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.footer-link-list a.footer-social svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-copy {
  font-size: 0.7rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.28);
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  font-size: 0.7rem;
  font-weight: 300;
  color: rgba(237, 235, 229, 0.28);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover {
  color: var(--muted);
}
/* ── SCROLL REVEAL ──────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(20px);
}
/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:1100px) {
  nav { padding-left: 1.6rem; padding-right: 1.6rem; }
  nav.compact { padding-left: 1.6rem; padding-right: 1.6rem; }
  .nav-links { gap: 1.45rem; }
  /* Com o botão maior, entre 769 e 1100px ele encostava nos links: a barra
     tem largura fixa e o rótulo cresceu. Aqui ele volta ao tamanho de antes
     — enquanto os links dividem a barra com ele, quem cede é o botão. */
  .nav-enquire { font-size: 0.64rem; gap: 0.45rem; padding: 0.24rem 0.3rem 0.24rem 0.74rem; }
  .nav-enquire .btn-icon { width: 1.3rem; height: 1.3rem; font-size: 0.78rem; }
  .hero-main { grid-template-columns: 1fr 1fr; }
  .hero-content-panel { padding: 5rem 2rem 2.4rem; gap: 1.8rem; }
  .hero-copy-stack, .hero-foot-note, .hero-desc { max-width: none; }
  .works-hdr { padding-left: 1.6rem; padding-right: 1.6rem; }
  .works-grid { grid-template-columns: repeat(3, 1fr); padding-left: 1.6rem; padding-right: 1.6rem; }
  .work-card:nth-child(4n) { border-right: 1px solid var(--border); }
  .work-card:nth-child(3n) { border-right: none; }
  .story { padding-left: 1.75rem; padding-right: 1.75rem; }
  .story-grid { gap: 3rem; }
  .story-stats { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-bottom: 1px solid var(--border); }
  .stat-cell:nth-child(2n) { border-right: none; }
  .stat-cell:nth-last-child(-n+2) { border-bottom: none; }
  .contact { grid-template-columns: 1fr; min-height: auto; }
  .contact-visual { display: none; }
  .contact-form-side { padding: 4rem 2rem; border-right: none; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
  .footer-bar, .footer-legal { flex-wrap: wrap; gap: 0.85rem; }
}
/* Entre 769 e 900px a barra fica sem folga: logo, quatro links e o botão
   dividem uma largura que não dá para os três. Aqui todo mundo cede um
   pouco — em vez de o botão encostar no último link. */
@media(max-width:900px) {
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.66rem; letter-spacing: 0.05em; }
  .nav-enquire { font-size: 0.58rem; gap: 0.38rem; padding: 0.22rem 0.26rem 0.22rem 0.62rem; }
  .nav-enquire .btn-icon { width: 1.14rem; height: 1.14rem; font-size: 0.7rem; }
}

/* ── MOBILE ─────────────────────────────────── */
@media(max-width:768px) {
  nav { padding: 0.78rem 1.05rem; }
  .nav-links { display: none; }
  .hero { height: auto; min-height: 100vh; }
  .hero-main { grid-template-columns: 1fr; }
  .hero-img-panel { display: none; }
  .hero-content-panel { padding: 6rem 1.5rem 2rem; gap: 1.4rem; }
  .hero-copy-stack { max-width: none; }
  .hero-service-tags { gap: 0.4rem; }
  .hero-actions { width: 100%; }
  .btn-shimmer, .btn-outline-text { justify-content: space-between; }
  .hero-kpis { grid-template-columns: 1fr; }
  .hero-kpi { border-right: none; border-bottom: 1px solid var(--border); }
  .hero-kpi:last-child { border-bottom: none; }
  .works-hdr { padding-left: 1.25rem; padding-right: 1.25rem; }
  .works-grid { grid-template-columns: repeat(2, 1fr); padding: 0 0.5rem 2.5rem; }
  .work-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .work-card:nth-child(2n) { border-right: none; }
  .stack-intro, .card-wrapper { padding-left: 1rem; padding-right: 1rem; }
  .card-bottom { grid-template-columns: 1fr; gap: 1rem; }
  .card-left-rail { min-height: auto; }
  .card-mini-panel { min-height: auto; }
  .card-middle { grid-template-columns: 1fr; }
  .card-mini-panel--wide { grid-column: auto; }
  .card-img-col { display: none; }
  .stack-intro-inner { grid-template-columns: 1fr; }
  .phil-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
  .phil-pin-height { min-height: 100vh; }
  .phil-left { display: flex; border-right: none; border-bottom: 1px solid rgba(237, 235, 229, 0.09); padding: 2rem 1.25rem; min-height: 38vh; }
  .phil-left-bg { font-size: 40vw; right: -0.02em; }
  .phil-title { font-size: clamp(2.2rem, 10vw, 3.2rem); max-width: none; }
  .phil-desc, .phil-side-note { max-width: none; }
  .phil-prog-row { grid-template-columns: 2rem minmax(0, 5.6rem) 1fr; gap: 0.75rem; }
  .phil-right { padding: 1.25rem; }
  .phil-stage { height: min(68vh, 36rem); min-height: 30rem; border-radius: 0; }
  .phil-stage-meta, .phil-stage-footer { left: 1rem; right: 1rem; }
  .phil-stage-meta { top: 1rem; }
  .phil-stage-no { font-size: 5.2rem; }
  .phil-card-stack { inset: 4.6rem 1rem 3.8rem; }
  .phil-card { padding: 1.5rem; }
  .phil-q-text { font-size: clamp(1.7rem, 8vw, 2.7rem); max-width: none; }
  .phil-card-body { max-width: none; }
  .phil-stage-caption { max-width: 12rem; }
  .story { padding: 3rem 1.25rem; }
  .story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .story-stats { grid-template-columns: 1fr 1fr; }
  .stat-cell { padding: 1.5rem 1.25rem; }
  .contact { grid-template-columns: 1fr; }
  .contact-visual { display: none; }
  .contact-form-side { padding: 3rem 1.25rem; border-right: none; }
  .form-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .footer-legal { flex-wrap: wrap; gap: 1rem; }
  .scroller-text { white-space: normal; }
}
@media(max-width:560px) {
  nav { padding: 0.72rem 0.9rem; }
  nav.compact { padding: 0.58rem 0.9rem; }
  .nav-logo { font-size: 0.98rem; }
  .hero-content-panel { padding: 5.25rem 1rem 1.35rem; gap: 1.15rem; }
  .hero-copy-stack { gap: 0.95rem; }
  .hero-h1 { font-size: clamp(2.55rem, 15vw, 3.75rem); line-height: 1.02; margin: 1rem 0 0.75rem; }
  .hero-desc { font-size: 0.95rem; line-height: 1.7; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .btn-shimmer, .btn-outline-text { width: 100%; justify-content: center; }
  .hero-foot-note { font-size: 0.68rem; }
  .hero-service-tags span { min-height: 1.78rem; padding: 0.35rem 0.6rem; font-size: 0.58rem; }
  .works-hdr { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .works-hdr-meta { align-items: flex-start; }
  .works-grid { grid-template-columns: 1fr; padding: 0 0 2.25rem; }
  .work-card, .work-card:nth-child(2n), .work-card:nth-child(3n), .work-card:nth-child(4n) { border-right: none; }
  .stack-intro, .card-wrapper { padding-left: 0.75rem; padding-right: 0.75rem; }
  .phil-left { min-height: auto; padding: 1.5rem 1rem; }
  .phil-right { padding: 0.9rem; }
  .phil-stage { min-height: 24rem; height: min(62vh, 32rem); }
  .phil-card-stack { inset: 4.15rem 0.9rem 3.2rem; }
  .phil-card { padding: 1.2rem; }
  .phil-stage-footer { gap: 0.65rem; }
  .story { padding: 2.4rem 1rem; }
  .story-stats { grid-template-columns: 1fr; }
  .stat-cell, .stat-cell:nth-child(2n) { border-right: none; }
  .stat-cell { padding: 1.35rem 1.1rem; border-bottom: 1px solid var(--border); }
  .stat-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .stat-cell:last-child { border-bottom: none; }
  .contact-form-side { padding: 2.5rem 1rem; }
  .contact-submit-row { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
  .submit-btn { width: 100%; }
  footer { padding: 3rem 1rem 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; }
  .footer-copy { max-width: 18rem; }
}
/* ══════════════════════════════════════════════════════════════
   ADIÇÕES RUBRICA — substituem as fotografias do template original
   por espécimes de documento desenhados em CSS.
   ══════════════════════════════════════════════════════════════ */

.spec {
  position: relative; width: 100%; height: 100%;
  background: var(--bg-1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.spec::before {                      /* pauta do papel */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 2.55rem, var(--border) 2.55rem 2.6rem);
  opacity: .9;
}
.spec::after {                       /* margem de registro */
  content: ""; position: absolute; top: 0; bottom: 0; left: 14%;
  width: 1px; background: var(--accent); opacity: .28;
}
.spec-sheet {
  position: relative; z-index: 2;
  width: min(72%, 24rem); padding: 1.6rem;
  background: var(--bg-2); border: 1px solid var(--border);
  box-shadow: 0 2rem 5rem -2rem rgba(0,0,0,.8);
  transform: rotate(-1.4deg);
}
.spec--tight .spec-sheet { width: min(84%, 15rem); padding: 1.1rem; }
.spec-head {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .7rem; margin-bottom: .9rem; border-bottom: 1px solid var(--border);
}
.spec-k {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.spec-p {
  margin-left: auto; font-family: var(--mono); font-size: .52rem;
  color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.spec-lines { display: grid; gap: .42rem; margin-bottom: 1.1rem; }
.spec-lines i { display: block; height: .34rem; background: rgba(237,235,229,.11); }
.spec-seal-row { display: flex; justify-content: flex-end; }
.spec-seal {
  border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 2px;
  color: var(--accent); padding: .38rem .6rem; text-align: center; transform: rotate(-3deg);
}
.spec-seal b {
  display: block; font-family: var(--mono); font-size: .5rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; padding-left: .2em;
}
.spec-seal s {
  display: block; height: 1px; background: currentColor; opacity: .45; margin: .28rem 0;
}
.spec-seal em {
  display: block; font-family: var(--mono); font-size: .42rem; font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* o espécime ocupa o lugar exato que a <img> ocupava */
.hero-img-reveal .spec,
.work-card-img .spec,
.card-img-col .spec,
.cv-img-panel .spec { position: absolute; inset: 0; }

.work-card-img .spec::before { background-size: 100% 1.4rem; }
.work-card:hover .spec-sheet { transform: rotate(-1.4deg) scale(1.04); }
.spec-sheet { transition: transform .7s cubic-bezier(.16,1,.3,1); }

/* contador de documentos no card de área */
.work-card-count { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   RITMO EDITORIAL CLARO–ESCURO
   O papel é a superfície principal; tinta e violeta criam pausas.
   ══════════════════════════════════════════════════════════════ */

/* Abertura clara, inclusive no espécime documental. */
.hero {
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.62);
  --border: var(--ink-border);
  --accent: var(--violet-ink);
  color: var(--ink);
  background: var(--paper);
}
.hero-content-panel {
  background:
    radial-gradient(circle at 92% 14%, rgba(104, 71, 128, 0.08), transparent 28%),
    var(--paper);
}
.hero-img-panel {
  --bg-1: #F0EDE6;
  --bg-2: #FFFDF8;
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.54);
  --border: rgba(27, 24, 20, 0.13);
  --accent: var(--violet-ink);
  background: var(--bg-1);
  border-right-color: rgba(27, 24, 20, 0.16);
}
.hero-img-overlay {
  background: linear-gradient(135deg, rgba(104, 71, 128, 0.045), transparent 62%);
}
.hero-img-label {
  border-top-color: rgba(27, 24, 20, 0.14);
}
.hero-img-label span {
  color: rgba(27, 24, 20, 0.54);
}
.hero-img-panel .spec-lines i {
  background: rgba(27, 24, 20, 0.12);
}
.hero-img-panel .spec-sheet {
  box-shadow: 0 2rem 5rem -2rem rgba(27, 24, 20, 0.20);
}
.btn-outline-text {
  color: var(--ink);
  border-color: rgba(27, 24, 20, 0.18);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}
.btn-outline-text:hover {
  color: var(--violet-ink);
  border-color: rgba(104, 71, 128, 0.34);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 22px rgba(27, 24, 20, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* Situações em papel quente; os documentos continuam em tinta. */
.works {
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.58);
  --border: var(--ink-border);
  --accent: var(--violet-ink);
  color: var(--ink);
  background:
    linear-gradient(rgba(27, 24, 20, 0.025) 1px, transparent 1px),
    var(--paper-warm);
  background-size: 100% 3.2rem, auto;
}
.work-card-num {
  color: rgba(27, 24, 20, 0.34);
}
.work-card-img {
  --bg-1: #201D18;
  --bg-2: #2A2620;
  --text: #EDEBE5;
  --muted: rgba(237, 235, 229, 0.48);
  --border: rgba(237, 235, 229, 0.10);
  --accent: #A882C6;
  background: var(--bg-1);
}

/* A primeira pausa escura prepara os cartões que se alternam. */
#stacking-section {
  --text: #EDEBE5;
  --muted: rgba(237, 235, 229, 0.48);
  --border: rgba(237, 235, 229, 0.10);
  --accent: #A882C6;
  color: var(--text);
  background: var(--bg);
}

/* Manifesto em papel: a frase respira, o documento cria contraste. */
.conviction {
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.62);
  --border: var(--ink-border);
  --accent: var(--violet-ink);
  color: var(--ink);
  height: auto;
  min-height: 100vh;
  grid-template-columns: minmax(0, 2.35fr) minmax(17rem, 1fr);
  background:
    radial-gradient(ellipse 70% 56% at 28% 54%, rgba(104, 71, 128, 0.10), transparent 72%),
    var(--paper);
}
.cv-text {
  min-width: 0;
  padding: clamp(3rem, 5vw, 5.5rem);
}
.cv-line {
  font-size: clamp(3.5rem, 7.4vw, 8.5rem);
  white-space: nowrap;
}
.cv-sub-row {
  margin-top: clamp(1.75rem, 3vw, 2.8rem);
}
.cv-img-panel {
  --bg-1: #17150F;
  --bg-2: #201D18;
  --text: #EDEBE5;
  --muted: rgba(237, 235, 229, 0.48);
  --border: rgba(237, 235, 229, 0.10);
  --accent: #A882C6;
}

/* Passo a passo claro por fora; palco escuro por dentro. */
.philosophy {
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.60);
  --border: var(--ink-border);
  --accent: var(--violet-ink);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(104, 71, 128, 0.09), transparent 26%),
    radial-gradient(circle at 82% 72%, rgba(104, 71, 128, 0.06), transparent 24%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
}
.philosophy::before {
  background-image:
    linear-gradient(rgba(27, 24, 20, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 24, 20, 0.035) 1px, transparent 1px);
  opacity: 0.42;
}
.phil-sticky {
  background: linear-gradient(90deg, rgba(232, 227, 217, 0.98) 0%, rgba(242, 240, 234, 0.96) 42%, rgba(242, 240, 234, 0.80) 100%);
}
.phil-left {
  border-right-color: rgba(27, 24, 20, 0.12);
}
.phil-left-bg {
  color: rgba(27, 24, 20, 0.055);
}
.phil-section-label {
  color: rgba(27, 24, 20, 0.50);
}
.phil-desc {
  color: rgba(27, 24, 20, 0.68);
}
.phil-prog-n {
  color: rgba(27, 24, 20, 0.36);
}
.phil-prog-label {
  color: rgba(27, 24, 20, 0.50);
}
.phil-prog-row.cur .phil-prog-n,
.phil-prog-row.cur .phil-prog-label {
  color: var(--ink);
}
.phil-prog-track {
  background: rgba(27, 24, 20, 0.12);
}
.phil-side-note {
  color: rgba(27, 24, 20, 0.60);
  border-top-color: rgba(27, 24, 20, 0.12);
}
.phil-stage {
  --accent: #A882C6;
}

/* Limites continuam escuros: uma pausa séria antes da conversão. */
.story {
  --text: #EDEBE5;
  --muted: rgba(237, 235, 229, 0.48);
  --border: rgba(237, 235, 229, 0.10);
  --accent: #A882C6;
  color: var(--text);
  background: var(--bg-1);
}

/* Conversão volta ao papel; o painel de marca permanece em tinta. */
.contact {
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.58);
  --border: var(--ink-border);
  --accent: var(--violet-ink);
  color: var(--ink);
  background: var(--paper);
}
.contact-form-side {
  background:
    radial-gradient(circle at 12% 16%, rgba(104, 71, 128, 0.07), transparent 25%),
    var(--paper);
}
.submit-btn {
  color: var(--paper);
  background: var(--ink);
}
.submit-btn:hover {
  color: #FFFFFF;
  background: var(--violet-ink);
}
.contact-visual {
  --text: #EDEBE5;
  --muted: rgba(237, 235, 229, 0.48);
  --border: rgba(237, 235, 229, 0.10);
  --accent: #A882C6;
  background: var(--bg-1);
}

/* O rodapé fecha a página em tinta. */
footer {
  --text: #EDEBE5;
  --muted: rgba(237, 235, 229, 0.44);
  --border: rgba(237, 235, 229, 0.09);
  --accent: #A882C6;
  color: var(--text);
  background: var(--bg-1);
}

@media (max-width: 768px) {
  .conviction {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }
  .cv-text {
    padding: 5rem 1.5rem 3rem;
  }
  .cv-line {
    font-size: clamp(2.4rem, 11.5vw, 4.75rem);
  }
  .phil-left {
    border-bottom-color: rgba(27, 24, 20, 0.12);
  }
}

/* ══════════════════════════════════════════════════════════════
   SITUAÇÕES — índice editorial compacto
   ══════════════════════════════════════════════════════════════ */
.works {
  padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 4vw, 3.5rem);
}
.works-shell {
  width: min(100%, 82rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(3rem, 7vw, 7.5rem);
  align-items: start;
}
.works-intro {
  grid-column: 1;
  grid-row: 1;
  max-width: 34rem;
}
.works-intro h2 {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.works-lede {
  max-width: 30rem;
  margin-top: 1.6rem;
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(27, 24, 20, 0.62);
}
.works-grid {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--ink-border);
  background: transparent;
}
.situation-item {
  border-bottom: 1px solid var(--ink-border);
  list-style: none;
}
.situation-button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0.9rem;
  border: 0;
  background: transparent;
  color: rgba(27, 24, 20, 0.46);
  text-align: left;
  cursor: pointer;
  transition: color 0.24s ease, background 0.24s ease, padding 0.24s ease;
}
.situation-button:hover,
.situation-button:focus-visible,
.situation-item.active .situation-button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.34);
  padding-left: 1.15rem;
}
.situation-button:focus-visible {
  outline: 1px solid rgba(104, 71, 128, 0.52);
  outline-offset: -1px;
}
.situation-number {
  align-self: start;
  padding-top: 0.28rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: rgba(27, 24, 20, 0.38);
  letter-spacing: 0.1em;
}
.situation-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 2.4vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.situation-marker {
  position: relative;
  width: 1.65rem;
  height: 1.65rem;
  justify-self: end;
}
.situation-marker::before,
.situation-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.24s ease, background 0.24s ease;
}
.situation-marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.situation-item.active .situation-marker {
  color: var(--violet-ink);
}
.situation-item.active .situation-marker::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.situation-detail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 6.5rem;
  align-self: start;
  min-height: 19rem;
  margin-top: 2.6rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--ink-border);
}
.situation-detail-index {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--violet-ink);
  letter-spacing: 0.12em;
}
.situation-detail h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.situation-detail p {
  max-width: 31rem;
  margin-top: 1.15rem;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.82;
  color: rgba(27, 24, 20, 0.68);
}
.situation-detail-examples {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.62rem;
  color: rgba(27, 24, 20, 0.48);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.situation-detail a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--violet-ink);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, gap 0.2s ease;
}
.situation-detail a:hover,
.situation-detail a:focus-visible {
  color: var(--violet-ink);
  gap: 1rem;
}

@media (max-width: 860px) {
  .works-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 2.5rem;
  }
  .works-intro,
  .works-grid,
  .situation-detail {
    grid-column: 1;
    grid-row: auto;
  }
  .works-intro {
    max-width: 42rem;
  }
  .works-grid {
    order: 2;
  }
  .situation-detail {
    order: 3;
    position: static;
    min-height: 0;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .works {
    padding: 4rem 1rem;
  }
  .works-intro h2 {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }
  .situation-button {
    grid-template-columns: 1.7rem minmax(0, 1fr) 1.5rem;
    gap: 0.7rem;
    padding: 1rem 0.35rem;
  }
  .situation-button:hover,
  .situation-button:focus-visible,
  .situation-item.active .situation-button {
    padding-left: 0.55rem;
  }
  .situation-name {
    font-size: 1.45rem;
  }
}

/* Reimaginação Rubrica: recortes de conversa + folha de resposta. */
.works-shell {
  display: block;
  width: min(100%, 82rem);
}
.works-intro {
  max-width: 54rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.works-intro h2 {
  max-width: 13ch;
}
.works-lede {
  max-width: 35rem;
}
.situations-board {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.situations-board .works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  border: 0;
}
.situation-item {
  border: 0;
}
.situation-button {
  min-height: 6.2rem;
  grid-template-columns: 1.8rem minmax(0, 1fr) 1rem;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(27, 24, 20, 0.14);
  background: rgba(255, 255, 255, 0.38);
  color: rgba(27, 24, 20, 0.66);
  align-items: start;
}
.situation-button:hover,
.situation-button:focus-visible {
  padding: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(104, 71, 128, 0.30);
}
.situation-item.active .situation-button,
.situation-item.active .situation-button:hover,
.situation-item.active .situation-button:focus-visible {
  padding: 1rem;
  color: #FFFDF8;
  background: var(--violet-ink);
  border-color: var(--violet-ink);
  box-shadow: 0 1rem 2.5rem -1.7rem rgba(58, 38, 72, 0.62);
}
.situation-number {
  padding-top: 0.16rem;
  color: rgba(27, 24, 20, 0.38);
}
.situation-item.active .situation-number {
  color: rgba(255, 253, 248, 0.58);
}
.situation-name {
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(0.88rem, 1.15vw, 1.02rem);
  font-weight: 450;
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.situation-marker {
  width: 0.72rem;
  height: 0.72rem;
  margin-top: 0.25rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.situation-marker::before {
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}
.situation-marker::after {
  display: none;
}
.situation-item.active .situation-marker {
  color: #FFFDF8;
}
.situation-item.active .situation-marker::before {
  background: currentColor;
}
.situations-board .situation-detail {
  position: sticky;
  top: 6.5rem;
  min-height: 27.25rem;
  margin: 0;
  padding: 2.15rem;
  border: 1px solid rgba(27, 24, 20, 0.14);
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.85rem, rgba(27, 24, 20, 0.055) 2.85rem 2.9rem),
    #FFFDF8;
  box-shadow: 0 2.4rem 6rem -3.6rem rgba(27, 24, 20, 0.44);
  overflow: hidden;
}
.situations-board .situation-detail::after {
  content: attr(data-number);
  position: absolute;
  right: -0.04em;
  bottom: -0.17em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12rem;
  line-height: 1;
  color: rgba(104, 71, 128, 0.055);
  pointer-events: none;
}
.situations-board .situation-detail > * {
  position: relative;
  z-index: 1;
}
.situation-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
}
.situation-detail-kicker,
.situation-detail-index {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--violet-ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.situations-board .situation-detail h3 {
  max-width: 12ch;
  margin-top: 3.5rem;
  font-size: clamp(2rem, 3.3vw, 3.65rem);
}
.situations-board .situation-detail p {
  margin-top: 1.4rem;
}
.situations-board .situation-detail-examples {
  margin-top: 1.3rem;
}

@media (max-width: 920px) {
  .situations-board {
    grid-template-columns: 1fr;
  }
  .situations-board .situation-detail {
    position: static;
    min-height: 24rem;
  }
}

@media (max-width: 620px) {
  .situations-board .works-grid {
    grid-template-columns: 1fr;
  }
  .situation-button {
    min-height: 5.25rem;
  }
  .situations-board .situation-detail {
    min-height: 0;
    padding: 1.5rem;
  }
  .situations-board .situation-detail h3 {
    margin-top: 2.5rem;
  }
}

/* Manchete com quebras editoriais controladas. */
.case-heading h2.case-headline {
  max-width: none;
  font-size: clamp(2.75rem, 4.1vw, 5.15rem);
  line-height: 0.98;
  text-wrap: balance;
}
.case-headline span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .case-heading h2.case-headline {
    font-size: clamp(2.5rem, 12.5vw, 3.8rem);
  }
  .case-headline span {
    white-space: normal;
  }
}

/* Movimento editorial: sobreposição, lâminas horizontais e trocas de tom. */
body {
  transition: background-color 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-tone="paper"] {
  background-color: var(--paper);
}
body[data-tone="violet"] {
  background-color: #251A31;
}
body[data-tone="ink"] {
  background-color: var(--bg-1);
}
nav {
  transition:
    padding 0.3s,
    color 0.55s ease,
    background-color 0.55s ease,
    border-color 0.55s ease;
}
body[data-tone="paper"] nav {
  background: rgba(242, 240, 234, 0.82);
  border-bottom-color: rgba(27, 24, 20, 0.12);
}
body[data-tone="paper"] .nav-logo,
body[data-tone="paper"] .nav-links a,
body[data-tone="paper"] .nav-enquire {
  color: var(--ink);
}
body[data-tone="paper"] .nav-enquire {
  border-color: rgba(27, 24, 20, 0.18);
  background: rgba(255, 255, 255, 0.42);
}
body[data-tone="paper"] .nav-enquire .btn-icon {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(27, 24, 20, 0.14);
}
body[data-tone="violet"] nav {
  background: rgba(37, 26, 49, 0.84);
  border-bottom-color: rgba(237, 235, 229, 0.12);
}
body[data-tone="ink"] nav {
  background: rgba(23, 21, 15, 0.84);
  border-bottom-color: rgba(237, 235, 229, 0.10);
}
body[data-tone="violet"] .nav-logo,
body[data-tone="violet"] .nav-links a,
body[data-tone="violet"] .nav-enquire,
body[data-tone="ink"] .nav-logo,
body[data-tone="ink"] .nav-links a,
body[data-tone="ink"] .nav-enquire {
  color: #EDEBE5;
}

.hero-content-panel {
  position: relative;
  z-index: 5;
  margin-left: calc(-1 * var(--avanco-painel));
  padding-left: 5.5rem;
  box-shadow: -2.5rem 0 5rem rgba(27, 24, 20, 0.12);
}
/* O painel de texto AVANÇA sobre a foto. O rodapé da foto ficava a 2rem da
   borda dela — ou seja, 4px DENTRO da faixa coberta —, e o fim de "pronto
   para as partes assinarem" sumia debaixo do painel e da sombra dele.

   O avanço virou uma medida com nome, usada nos dois lugares: quem encosta
   na foto e quem tem de se afastar dela não podem mais divergir. */
.hero-main {
  --avanco-painel: 2.25rem;
}
.hero-img-label {
  right: calc(var(--avanco-painel) + 2rem);
}
.hero-img-panel {
  border-right: 0;
}
.hero-signature {
  position: absolute;
  z-index: 4;
  left: 13%;
  top: 57%;
  width: 70%;
  height: 18%;
  pointer-events: none;
  transform: rotate(-3deg);
}
/* O multiply é da TINTA, não da caneta: aplicado no conjunto, ele achatava
   o metal da pena e o brilho do corpo contra o papel. */
.hero-signature canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
.signature-pen {
  position: absolute;
  /* Fica ancorada no canto e caminha por transform — ver o comentário no
     `porCaneta`. `left`/`top` animados custavam um layout por quadro. */
  left: 0;
  top: 0;
  will-change: transform;
  z-index: 2;
  display: block;
  width: auto;
  height: clamp(5.5rem, 10vw, 9rem);
  aspect-ratio: 64 / 240;
  opacity: 0;
  /* Gira em torno da ponta da pena, que é o ponto que toca o papel. */
  transform-origin: 50% 98.33%;
  filter: drop-shadow(0.5rem 0.75rem 0.8rem rgba(27, 24, 20, 0.22));
}
.signature-pen svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-img-overlay {
  z-index: 2;
  pointer-events: none;
}

#stacking-section.case-study {
  border: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(168, 130, 198, 0.18), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(237, 235, 229, 0.06), transparent 25%),
    #251A31;
  background-size: auto;
}
.case-flow {
  position: relative;
  display: block;
  height: min(74vh, 46rem);
  min-height: 40rem;
  border: 0;
  overflow: hidden;
  isolation: isolate;
}
.case-column {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(48rem, 76%);
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(237, 235, 229, 0.13);
  box-shadow: 0 2.5rem 5rem -2.8rem rgba(0, 0, 0, 0.72);
  will-change: transform, opacity;
}
.case-message {
  left: 0;
  z-index: 1;
}
.case-reading {
  left: 12%;
  z-index: 2;
}
.case-document {
  left: 24%;
  z-index: 3;
}
.case-message blockquote,
.case-message .case-note,
.case-reading .case-checklist,
.case-reading .case-note {
  max-width: 36rem;
}
.case-paper {
  width: min(100%, 36rem);
  margin-left: auto;
  margin-right: auto;
}
.case-guardrails {
  gap: 1rem;
  border: 0;
}
.case-guardrails article,
.case-guardrails article:last-child {
  border: 0;
  background: rgba(18, 13, 22, 0.38);
  box-shadow: inset 0 1px rgba(237, 235, 229, 0.08);
}

@media (max-width: 1100px) and (min-width: 769px) {
  .hero-content-panel {
    margin-left: -1.35rem;
    padding-left: 3.35rem;
  }
}

@media (max-width: 980px) {
  .case-flow {
    display: grid;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .case-column,
  .case-message,
  .case-reading,
  .case-document {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
    border-left: 1px solid rgba(237, 235, 229, 0.13);
    border-right: 1px solid rgba(237, 235, 229, 0.13);
  }
}

/* Correção da dobra: uma faixa contínua, sem cartões cortados ou sobreposição forçada. */
.case-header {
  align-items: start;
  margin-bottom: clamp(2.2rem, 4vw, 3.5rem);
}
.case-heading h2 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 4.45vw, 5.25rem);
  line-height: 0.98;
}
.case-flow {
  height: min(70vh, 44rem);
  min-height: 38rem;
  overflow: hidden;
}
.case-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
  height: 100%;
  padding-right: clamp(1rem, 4vw, 4rem);
  will-change: transform;
}
.case-column,
.case-message,
.case-reading,
.case-document {
  position: relative;
  inset: auto;
  flex: 0 0 min(72vw, 66rem);
  width: min(72vw, 66rem);
  height: 100%;
  min-height: 0;
  opacity: 1;
  transform: none;
  border: 0;
  box-shadow: 0 2.5rem 5rem -2.8rem rgba(0, 0, 0, 0.78);
}
.case-message {
  background: #151213;
}
.case-reading {
  background: #2C2037;
}
.case-document {
  background: #19151B;
}
.case-column > h3 {
  max-width: 18ch;
}
.case-message blockquote {
  max-width: 42rem;
}
.case-message .case-note,
.case-reading .case-checklist,
.case-reading .case-note {
  max-width: 42rem;
}
.case-paper {
  width: min(100%, 39rem);
}

@media (max-width: 980px) {
  .case-flow {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .case-track {
    display: grid;
    gap: 1rem;
    width: auto;
    height: auto;
    padding-right: 0;
    transform: none !important;
  }
  .case-column,
  .case-message,
  .case-reading,
  .case-document {
    flex-basis: auto;
    width: auto;
    height: auto;
  }
}

@media (max-width: 768px) {
  .hero-content-panel {
    margin-left: 0;
    padding-left: 1.5rem;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .hero-content-panel {
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  nav,
  .signature-pen {
    transition: none;
  }
}

/* Estudo de caso: uma história concreta substitui os três slides vazios. */
#stacking-section.case-study {
  position: relative;
  height: auto;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 4vw, 4rem);
  color: #EDEBE5;
  background:
    linear-gradient(rgba(237, 235, 229, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 130, 198, 0.06) 1px, transparent 1px),
    #15130F;
  background-size: 100% 3.5rem, 25% 100%, auto;
  border-top: 1px solid rgba(237, 235, 229, 0.10);
  border-bottom: 1px solid rgba(237, 235, 229, 0.10);
  overflow: hidden;
}
.case-shell {
  width: min(100%, 86rem);
  margin: 0 auto;
}
.case-header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.case-heading .section-label {
  color: #A882C6;
}
.case-heading h2 {
  max-width: 15ch;
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.6vw, 6.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
}
.case-intro {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(237, 235, 229, 0.18);
}
.case-intro p {
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(237, 235, 229, 0.74);
}
.case-intro span {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.5;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #A882C6;
}
.case-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(237, 235, 229, 0.13);
}
.case-column {
  min-width: 0;
  min-height: 37rem;
  padding: clamp(1.5rem, 2.6vw, 2.6rem);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(237, 235, 229, 0.13);
  background: rgba(18, 17, 13, 0.83);
}
.case-column:last-child {
  border-right: 0;
}
.case-reading {
  background: rgba(29, 24, 19, 0.90);
}
.case-document {
  background: rgba(45, 32, 56, 0.52);
}
.case-column-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(237, 235, 229, 0.12);
}
.case-step {
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  color: #A882C6;
}
.case-kicker {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 235, 229, 0.52);
}
.case-column > h3 {
  max-width: 12ch;
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}
.case-message blockquote {
  position: relative;
  margin-top: 3rem;
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid rgba(168, 130, 198, 0.28);
  background: rgba(168, 130, 198, 0.08);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(237, 235, 229, 0.88);
}
.case-message blockquote::after {
  content: '';
  position: absolute;
  left: 1.15rem;
  bottom: -0.58rem;
  width: 1rem;
  height: 1rem;
  border-right: 1px solid rgba(168, 130, 198, 0.28);
  border-bottom: 1px solid rgba(168, 130, 198, 0.28);
  background: #1C1815;
  transform: rotate(45deg);
}
.case-note {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(237, 235, 229, 0.58);
}
.case-note strong {
  color: rgba(237, 235, 229, 0.88);
  font-weight: 450;
}
.case-checklist {
  list-style: none;
  margin-top: 2.3rem;
}
.case-checklist li {
  display: grid;
  grid-template-columns: minmax(5rem, 0.55fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(237, 235, 229, 0.11);
}
.case-checklist li:last-child {
  border-bottom: 1px solid rgba(237, 235, 229, 0.11);
}
.case-checklist span {
  font-family: var(--mono);
  font-size: 0.59rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A882C6;
}
.case-checklist strong {
  font-size: 0.76rem;
  font-weight: 350;
  line-height: 1.5;
  color: rgba(237, 235, 229, 0.82);
}
.case-paper {
  position: relative;
  flex: 1;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 2.2vw, 2.15rem);
  color: #1B1814;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.45rem, rgba(27, 24, 20, 0.06) 2.45rem 2.49rem),
    #F5F2EA;
  box-shadow: 0 2rem 4rem -2.6rem rgba(0, 0, 0, 0.85);
}
.case-paper-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #684780;
}
.case-paper h3 {
  max-width: 8ch;
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.1vw, 3.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.case-paper ol {
  list-style: none;
  margin-top: 2rem;
}
.case-paper li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.66rem 0;
  border-top: 1px solid rgba(27, 24, 20, 0.11);
  font-size: 0.67rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.case-paper li span {
  color: #684780;
}
.case-paper > p {
  position: absolute;
  left: 2.15rem;
  bottom: 1.55rem;
  margin: 0;
  font-size: 0.66rem;
  color: rgba(27, 24, 20, 0.60);
}
.case-stamp {
  position: absolute;
  right: 1.3rem;
  bottom: 1.5rem;
  width: 7rem;
  padding: 0.55rem 0.6rem;
  border: 2px solid #684780;
  color: #684780;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.case-stamp span,
.case-stamp small {
  display: block;
  font-family: var(--mono);
  letter-spacing: 0.12em;
}
.case-stamp span {
  font-size: 0.68rem;
  font-weight: 600;
}
.case-stamp small {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid currentColor;
  font-size: 0.47rem;
}
.case-guardrails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
  border: 1px solid rgba(237, 235, 229, 0.13);
}
.case-guardrails article {
  min-height: 15rem;
  padding: clamp(1.4rem, 2.5vw, 2.3rem);
  border-right: 1px solid rgba(237, 235, 229, 0.13);
  background: rgba(18, 17, 13, 0.62);
}
.case-guardrails article:last-child {
  border-right: 0;
}
.case-guardrails span {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #A882C6;
}
.case-guardrails h3 {
  max-width: 17ch;
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.15vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
}
.case-guardrails p {
  max-width: 30rem;
  margin-top: 1.2rem;
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(237, 235, 229, 0.60);
}
.case-cta {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(237, 235, 229, 0.38);
  color: #EDEBE5;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.case-cta:hover {
  border-color: #A882C6;
  color: #C9A7E2;
}

/* Leitura fácil também precisa de corpo de texto confortável. */
.phil-card-body {
  max-width: 38rem;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.72;
}
.phil-q-attr {
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .case-header {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .case-intro {
    max-width: 38rem;
  }
  .case-flow {
    grid-template-columns: 1fr;
  }
  .case-column {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(237, 235, 229, 0.13);
  }
  .case-column:last-child {
    border-bottom: 0;
  }
  .case-note {
    margin-top: 2.5rem;
  }
  .case-paper {
    min-height: 32rem;
  }
  .case-guardrails {
    grid-template-columns: 1fr;
  }
  .case-guardrails article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(237, 235, 229, 0.13);
  }
  .case-guardrails article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .case-study {
    padding: 4.5rem 1rem;
    background-size: 100% 3.2rem, 50% 100%, auto;
  }
  .case-heading h2 {
    font-size: clamp(2.65rem, 13vw, 4.2rem);
  }
  .case-column {
    padding: 1.35rem;
  }
  .case-checklist li {
    grid-template-columns: 5.4rem minmax(0, 1fr);
  }
  .case-paper {
    min-height: 31rem;
    padding: 1.35rem;
  }
  .case-paper > p {
    left: 1.35rem;
    max-width: 8rem;
  }
  .case-stamp {
    right: 1rem;
  }
}

/* Camada final: faixa horizontal contínua, sem cartões cortados. */
#stacking-section.case-study {
  border: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(168, 130, 198, 0.18), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(237, 235, 229, 0.06), transparent 25%),
    #251A31;
  background-size: auto;
}
.case-header {
  align-items: start;
  margin-bottom: clamp(2.2rem, 4vw, 3.5rem);
}
.case-heading h2 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 4.45vw, 5.25rem);
  line-height: 0.98;
}
.case-flow {
  position: relative;
  display: block;
  height: min(70vh, 44rem);
  min-height: 38rem;
  border: 0;
  overflow: hidden;
  isolation: isolate;
}
.case-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
  height: 100%;
  padding-right: clamp(1rem, 4vw, 4rem);
  will-change: transform;
}
.case-column,
.case-message,
.case-reading,
.case-document {
  position: relative;
  inset: auto;
  flex: 0 0 min(72vw, 66rem);
  width: min(72vw, 66rem);
  height: 100%;
  min-height: 0;
  opacity: 1;
  transform: none;
  border: 0;
  box-shadow: 0 2.5rem 5rem -2.8rem rgba(0, 0, 0, 0.78);
}
.case-message {
  background: #151213;
}
.case-reading {
  background: #2C2037;
}
.case-document {
  background: #19151B;
}
.case-column > h3 {
  max-width: 18ch;
}
.case-message blockquote,
.case-message .case-note,
.case-reading .case-checklist,
.case-reading .case-note {
  max-width: 42rem;
}
.case-paper {
  width: min(100%, 39rem);
  margin-left: auto;
  margin-right: auto;
}
.case-guardrails {
  gap: 1rem;
  border: 0;
}
.case-guardrails article,
.case-guardrails article:last-child {
  border: 0;
  background: rgba(18, 13, 22, 0.38);
  box-shadow: inset 0 1px rgba(237, 235, 229, 0.08);
}

@media (max-width: 980px) {
  .case-flow {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .case-track {
    display: grid;
    gap: 1rem;
    width: auto;
    height: auto;
    padding-right: 0;
    transform: none !important;
  }
  .case-column,
  .case-message,
  .case-reading,
  .case-document {
    flex-basis: auto;
    width: auto;
    height: auto;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Estado final: situações mais humanas; estudo de caso novamente estático. */
.works {
  background:
    radial-gradient(circle at 12% 16%, rgba(104, 71, 128, 0.075), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(104, 71, 128, 0.05), transparent 24%),
    var(--paper-warm);
  background-size: auto;
}
.works-shell {
  width: min(100%, 86rem);
}
.works-intro {
  max-width: 65rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.works-intro h2 {
  max-width: 18ch;
}
.works-lede {
  max-width: 42rem;
}
.situations-board {
  grid-template-columns: minmax(0, 1.14fr) minmax(27rem, 0.86fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.situations-board .situation-detail {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 6rem;
  min-height: 42rem;
  padding: clamp(1.75rem, 3vw, 3rem);
  border: 0;
  overflow: visible;
  isolation: isolate;
  background: #FFFDF8;
  box-shadow: 0 2.5rem 5rem -3rem rgba(27, 24, 20, 0.32);
}
.situations-board .situation-detail::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1rem -1rem -1rem 1rem;
  background: rgba(255, 253, 248, 0.48);
  box-shadow: 0 1.5rem 3rem -2.4rem rgba(27, 24, 20, 0.30);
}
.situations-board .situation-detail::after {
  right: 0.02em;
  bottom: -0.19em;
  font-size: clamp(8rem, 15vw, 13rem);
  color: rgba(104, 71, 128, 0.04);
}
.situations-board .works-grid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.situation-button {
  min-height: 7rem;
  padding: 1.15rem;
  border: 0;
  background: rgba(255, 253, 248, 0.70);
  color: rgba(27, 24, 20, 0.68);
  box-shadow: 0 0.85rem 2rem -1.5rem rgba(27, 24, 20, 0.28);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.situation-button:hover,
.situation-button:focus-visible {
  padding: 1.15rem;
  border: 0;
  background: #FFFDF8;
  transform: translateY(-0.2rem);
  box-shadow: 0 1.25rem 2.5rem -1.6rem rgba(27, 24, 20, 0.30);
}
.situation-item.active .situation-button,
.situation-item.active .situation-button:hover,
.situation-item.active .situation-button:focus-visible {
  padding: 1.15rem;
  border: 0;
  background: var(--violet-ink);
  transform: translate(-0.45rem, -0.12rem);
  box-shadow: 0 1.5rem 3rem -1.7rem rgba(58, 38, 72, 0.58);
}
.situation-name {
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  line-height: 1.45;
}
.situations-board .situation-detail h3 {
  max-width: 15ch;
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
  font-size: clamp(2.25rem, 3.5vw, 4rem);
}
.situation-example {
  max-width: 40rem;
  margin-top: 2rem;
  padding: 1rem 1.15rem 1.1rem;
  background: rgba(104, 71, 128, 0.07);
  border-left: 2px solid rgba(104, 71, 128, 0.48);
}
.situation-example > span,
.situation-needs > span {
  display: block;
  font-family: var(--mono);
  font-size: 0.57rem;
  line-height: 1.5;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--violet-ink);
}
.situation-example blockquote {
  margin-top: 0.75rem;
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 350;
  line-height: 1.65;
  color: rgba(27, 24, 20, 0.78);
}
.situations-board .situation-detail > p {
  max-width: 40rem;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.72;
}
.situation-needs {
  margin-top: 1.6rem;
}
.situation-needs ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
  list-style: none;
}
.situation-needs li {
  min-height: 4.1rem;
  padding: 0.75rem;
  background: rgba(27, 24, 20, 0.035);
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(27, 24, 20, 0.68);
}
.situations-board .situation-detail-examples {
  margin-top: 1.2rem;
}
.situations-board .situation-detail a {
  margin-top: 1.4rem;
}

/* Sem rolagem horizontal: as três etapas voltam a ficar lado a lado. */
.case-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.case-column,
.case-message,
.case-reading,
.case-document {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 37rem;
  opacity: 1;
  transform: none;
  border: 0;
  box-shadow: none;
}
.case-column + .case-column {
  box-shadow: inset 1px 0 rgba(237, 235, 229, 0.10);
}

@media (max-width: 980px) {
  .situations-board {
    grid-template-columns: 1fr;
  }
  .situations-board .works-grid {
    grid-column: 1;
    grid-row: 1;
  }
  .situations-board .situation-detail {
    grid-column: 1;
    grid-row: 2;
    position: static;
    min-height: 0;
    margin-top: 1rem;
  }
  .case-flow {
    grid-template-columns: 1fr;
  }
  .case-column,
  .case-message,
  .case-reading,
  .case-document {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .situations-board .works-grid {
    grid-template-columns: 1fr;
  }
  .situation-button {
    min-height: 5.75rem;
  }
  .situation-needs ul {
    grid-template-columns: 1fr;
  }
  .situation-needs li {
    min-height: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   CONTINUIDADE DE COR + ÍNDICE DE SITUAÇÕES ESTÁVEL
   A troca de capítulo acontece numa faixa de cor em tela cheia,
   sem borda de seção. O conteúdo selecionado nunca muda a dobra.
   ══════════════════════════════════════════════════════════════ */

.works,
#stacking-section.case-study,
.conviction {
  position: relative;
  isolation: isolate;
  border-block: 0;
}

.works > *,
#stacking-section.case-study > *,
.conviction > * {
  position: relative;
  z-index: 2;
}

/* A página clara ganha violeta aos poucos, em toda a largura. */
.works {
  padding-bottom: clamp(12rem, 18vw, 21rem);
  overflow: clip;
}
.works::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(11rem, 17vw, 20rem);
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 110% at 18% 100%, rgba(168, 130, 198, 0.30), transparent 67%),
    radial-gradient(ellipse 66% 100% at 88% 94%, rgba(104, 71, 128, 0.22), transparent 70%),
    linear-gradient(180deg,
      rgba(37, 26, 49, 0) 0%,
      rgba(37, 26, 49, 0.10) 20%,
      rgba(37, 26, 49, 0.38) 48%,
      rgba(37, 26, 49, 0.78) 76%,
      #251A31 100%);
}

/* O capítulo roxo termina dentro do próprio fundo e devolve o papel. */
#stacking-section.case-study {
  padding-bottom: clamp(14rem, 20vw, 23rem);
  overflow: clip;
  border: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(168, 130, 198, 0.18), transparent 28%),
    radial-gradient(circle at 12% 72%, rgba(237, 235, 229, 0.055), transparent 25%),
    #251A31;
}
#stacking-section.case-study::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(8rem, 11vw, 13rem);
  pointer-events: none;
  background: linear-gradient(180deg, #251A31 0%, rgba(37, 26, 49, 0) 100%);
}
#stacking-section.case-study::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(13rem, 19vw, 22rem);
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 105% at 78% 0%, rgba(168, 130, 198, 0.22), transparent 68%),
    linear-gradient(180deg,
      rgba(37, 26, 49, 0) 0%,
      rgba(37, 26, 49, 0.88) 12%,
      rgba(73, 52, 88, 0.78) 40%,
      rgba(180, 163, 187, 0.60) 70%,
      #F2F0EA 100%);
}

/* O primeiro trecho claro neutraliza qualquer linha residual do gradiente. */
.conviction {
  border: 0;
  overflow: clip;
}
.conviction::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(7rem, 10vw, 12rem);
  pointer-events: none;
  background: linear-gradient(180deg, #F2F0EA 0%, rgba(242, 240, 234, 0) 100%);
}

/* Lâmina principal: altura e zonas internas invariáveis entre seleções. */
.situations-board {
  align-items: stretch;
}
.situations-board .situation-detail {
  height: clamp(48rem, 47vw, 55rem);
  min-height: 0;
  display: grid;
  grid-template-rows:
    auto
    clamp(12.5rem, 14vw, 14rem)
    clamp(8.5rem, 8.5vw, 9.75rem)
    clamp(4.5rem, 5vw, 5.75rem)
    auto
    auto
    auto;
  align-content: start;
  overflow: hidden;
}
.situations-board .situation-detail h3 {
  align-self: start;
  margin-top: clamp(2rem, 3vw, 3rem);
}
.situation-example {
  align-self: start;
  width: 100%;
  margin-top: 0;
}
.situations-board .situation-detail > p {
  align-self: start;
  margin-top: 0;
  padding-top: 1.25rem;
}
.situation-needs {
  align-self: start;
  margin-top: 0;
  padding-top: 1.15rem;
}
.situations-board .situation-detail-examples {
  align-self: end;
}

/* À direita, um índice editorial aberto substitui a grade de mini cards. */
.situations-board .works-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 2.5vw, 3rem);
  row-gap: 0;
  padding: 0.25rem 0;
  align-content: start;
}
.situation-item {
  position: relative;
  min-width: 0;
}
.situation-item:nth-child(even) {
  transform: translateY(clamp(1.6rem, 2vw, 2.4rem));
}
.situation-button,
.situation-button:hover,
.situation-button:focus-visible,
.situation-item.active .situation-button,
.situation-item.active .situation-button:hover,
.situation-item.active .situation-button:focus-visible {
  position: relative;
  min-height: clamp(7.4rem, 8vw, 9rem);
  padding: 1.3rem 2rem 1.35rem 0;
  border: 0;
  border-bottom: 1px solid rgba(27, 24, 20, 0.16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}
.situation-button::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--violet-ink);
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.situation-button:hover::before,
.situation-button:focus-visible::before,
.situation-item.active .situation-button::before {
  width: 100%;
}
.situation-number {
  align-self: start;
  padding-top: 0.22rem;
  font-size: 0.60rem;
  color: rgba(27, 24, 20, 0.38);
  transition: color 0.25s ease;
}
.situation-name {
  max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.55vw, 1.65rem);
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: rgba(27, 24, 20, 0.70);
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.situation-marker {
  top: 1.6rem;
  right: 0.2rem;
  width: 0.58rem;
  height: 0.58rem;
  border: 0;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  border-radius: 0;
  color: rgba(27, 24, 20, 0.42);
  transform: rotate(45deg);
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.situation-item.active .situation-number {
  color: var(--violet-ink);
}
.situation-item.active .situation-name,
.situation-button:hover .situation-name,
.situation-button:focus-visible .situation-name {
  color: var(--violet-ink);
  transform: translateX(0.35rem);
}
.situation-item.active .situation-marker {
  color: var(--violet-ink);
  transform: translateX(-0.2rem) rotate(45deg);
}

@media (max-width: 1100px) and (min-width: 981px) {
  .situations-board .situation-detail {
    height: 50rem;
  }
  .situation-name {
    font-size: clamp(1.08rem, 1.8vw, 1.38rem);
  }
}

@media (max-width: 980px) {
  .works {
    padding-bottom: clamp(9rem, 20vw, 13rem);
  }
  .situations-board .situation-detail {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }
  .situations-board .situation-detail h3,
  .situation-example,
  .situations-board .situation-detail > p,
  .situation-needs {
    margin-top: 1.5rem;
    padding-top: 0;
  }
  .situation-item:nth-child(even) {
    transform: none;
  }
}

@media (max-width: 620px) {
  .situations-board .works-grid {
    grid-template-columns: 1fr;
  }
  .situation-button,
  .situation-button:hover,
  .situation-button:focus-visible,
  .situation-item.active .situation-button,
  .situation-item.active .situation-button:hover,
  .situation-item.active .situation-button:focus-visible {
    min-height: 6.4rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   COSTURA INVISÍVEL — troca integral de estado da página
   A seção no centro da viewport define o fundo do body. Não há
   gradiente entre dobras: todo o palco muda de uma vez.
   ══════════════════════════════════════════════════════════════ */

body {
  --page-bg: var(--paper);
  --page-ink: var(--ink);
  --page-muted: rgba(27, 24, 20, 0.62);
  --page-line: rgba(27, 24, 20, 0.14);
  --page-accent: var(--violet-ink);
  --page-ghost: rgba(104, 71, 128, 0.075);
  background-color: var(--page-bg);
  transition: background-color 0.7s ease, color 0.7s ease;
}
body[data-tone="paper"] {
  --page-bg: var(--paper);
  --page-ink: var(--ink);
  --page-muted: rgba(27, 24, 20, 0.62);
  --page-line: rgba(27, 24, 20, 0.14);
  --page-accent: var(--violet-ink);
  --page-ghost: rgba(104, 71, 128, 0.075);
}
body[data-tone="violet"] {
  --page-bg: #251A31;
  --page-ink: #F2EFEA;
  --page-muted: rgba(242, 239, 234, 0.64);
  --page-line: rgba(242, 239, 234, 0.15);
  --page-accent: #C9A7E2;
  --page-ghost: rgba(242, 239, 234, 0.055);
}
body[data-tone="ink"] {
  --page-bg: var(--bg-1);
  --page-ink: #EDEBE5;
  --page-muted: rgba(237, 235, 229, 0.56);
  --page-line: rgba(237, 235, 229, 0.12);
  --page-accent: #A882C6;
  --page-ghost: rgba(237, 235, 229, 0.045);
}

/* Neutraliza a tentativa anterior de costurar as seções com degradês. */
.works {
  padding-bottom: clamp(5rem, 8vw, 8rem);
  color: var(--page-ink);
  background: transparent;
  overflow: visible;
}
.works::after,
#stacking-section.case-study::before,
#stacking-section.case-study::after,
.conviction::before {
  content: none;
}
#stacking-section.case-study {
  padding-bottom: clamp(5rem, 8vw, 8rem);
  color: var(--page-ink);
  background: transparent;
  overflow: hidden;
}
.conviction {
  color: var(--page-ink);
  background: transparent;
}

.works,
#stacking-section.case-study,
.conviction,
.works-intro h2,
.works-lede,
.case-header,
.case-intro,
.case-intro p,
.case-cta,
.cv-sub {
  transition: color 0.7s ease, border-color 0.7s ease;
}
.works-intro h2,
.works-lede,
.case-heading h2,
.conviction .cv-line,
.conviction .cv-sub {
  color: var(--page-ink);
}
.works-lede,
.case-intro p,
.conviction .cv-sub {
  color: var(--page-muted);
}
.case-intro {
  border-top-color: var(--page-line);
}
.case-cta {
  color: var(--page-ink);
  border-bottom-color: var(--page-line);
}
.case-column,
.case-guardrails article {
  color: #EDEBE5;
}
.conviction .cv-line.accent {
  color: var(--page-accent);
}

/* ══════════════════════════════════════════════════════════════
   SITUAÇÕES — índice orbital em torno da seleção ativa
   Uma única peça gráfica substitui a grade de oito cartões.
   ══════════════════════════════════════════════════════════════ */

.situations-board {
  grid-template-columns: minmax(0, 1.12fr) minmax(25rem, 0.88fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.situations-board .situation-detail {
  height: clamp(48rem, 47vw, 55rem);
}

.situations-board .works-grid {
  position: relative;
  display: block;
  min-height: clamp(46rem, 50vw, 54rem);
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
}
.situations-board .works-grid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(17rem, 24vw, 21rem);
  aspect-ratio: 1;
  border: 1px solid var(--page-line);
  border-radius: 50%;
  box-shadow:
    0 0 0 clamp(1rem, 1.5vw, 1.5rem) color-mix(in srgb, var(--page-line) 24%, transparent),
    inset 0 0 5rem var(--page-ghost);
  transform: translate(-50%, -50%);
  transition: border-color 0.7s ease, box-shadow 0.7s ease;
}
.situations-board .works-grid::after {
  content: attr(data-active);
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--page-ghost);
  font-family: var(--serif);
  font-size: clamp(8rem, 13vw, 12rem);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.09em;
  transform: translate(-52%, -52%);
  transition: color 0.7s ease;
  pointer-events: none;
}

.situations-board .situation-item,
.situations-board .situation-item:nth-child(even) {
  position: absolute;
  width: clamp(8.5rem, 11vw, 11rem);
  border: 0;
  transform: none;
  z-index: 2;
}
.situations-board .situation-item:nth-child(1) { left: 50%; top: 1%; transform: translateX(-50%); }
.situations-board .situation-item:nth-child(2) { right: 1%; top: 15%; }
.situations-board .situation-item:nth-child(3) { right: -2%; top: 40%; }
.situations-board .situation-item:nth-child(4) { right: 5%; bottom: 17%; }
.situations-board .situation-item:nth-child(5) { left: 50%; bottom: 1%; transform: translateX(-50%); }
.situations-board .situation-item:nth-child(6) { left: 5%; bottom: 17%; }
.situations-board .situation-item:nth-child(7) { left: -2%; top: 40%; }
.situations-board .situation-item:nth-child(8) { left: 1%; top: 15%; }

.situations-board .situation-button,
.situations-board .situation-item:nth-child(n) .situation-button,
.situations-board .situation-button:hover,
.situations-board .situation-button:focus-visible,
.situations-board .situation-item.active .situation-button,
.situations-board .situation-item.active .situation-button:hover,
.situations-board .situation-item.active .situation-button:focus-visible {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--page-muted);
  text-align: left;
  transform: none;
}
.situations-board .situation-button::before,
.situations-board .situation-marker::before,
.situations-board .situation-marker::after {
  content: none;
}
.situations-board .situation-number {
  display: block;
  margin-bottom: 0.42rem;
  padding: 0;
  color: var(--page-muted);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  transition: color 0.35s ease;
}
.situations-board .situation-name {
  display: block;
  max-width: 13ch;
  color: var(--page-muted);
  font-family: var(--sans);
  font-size: clamp(0.76rem, 0.94vw, 0.9rem);
  font-style: normal;
  font-weight: 430;
  line-height: 1.35;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transform: none;
  transition: color 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.situations-board .situation-marker {
  position: absolute;
  top: 50%;
  width: 0.58rem;
  height: 0.58rem;
  margin: 0;
  border: 1px solid var(--page-muted);
  border-radius: 50%;
  background: var(--page-bg);
  color: var(--page-muted);
  transform: translateY(-50%);
  transition: background-color 0.7s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.situations-board .situation-item:nth-child(2) .situation-marker,
.situations-board .situation-item:nth-child(3) .situation-marker,
.situations-board .situation-item:nth-child(4) .situation-marker {
  left: -1.45rem;
}
.situations-board .situation-item:nth-child(6) .situation-marker,
.situations-board .situation-item:nth-child(7) .situation-marker,
.situations-board .situation-item:nth-child(8) .situation-marker {
  right: -1.45rem;
}
.situations-board .situation-item:nth-child(1) .situation-marker {
  left: 50%;
  top: auto;
  bottom: -1.35rem;
  transform: translateX(-50%);
}
.situations-board .situation-item:nth-child(5) .situation-marker {
  left: 50%;
  top: -1.1rem;
  transform: translateX(-50%);
}
.situations-board .situation-item:nth-child(1) .situation-button,
.situations-board .situation-item:nth-child(5) .situation-button {
  text-align: center;
}
.situations-board .situation-item:nth-child(1) .situation-name,
.situations-board .situation-item:nth-child(5) .situation-name {
  margin-inline: auto;
}
.situations-board .situation-item:nth-child(6) .situation-button,
.situations-board .situation-item:nth-child(7) .situation-button,
.situations-board .situation-item:nth-child(8) .situation-button {
  text-align: right;
}
.situations-board .situation-item:nth-child(6) .situation-name,
.situations-board .situation-item:nth-child(7) .situation-name,
.situations-board .situation-item:nth-child(8) .situation-name {
  margin-left: auto;
}

.situations-board .situation-item.active .situation-number,
.situations-board .situation-item.active .situation-name,
.situations-board .situation-button:hover .situation-number,
.situations-board .situation-button:hover .situation-name,
.situations-board .situation-button:focus-visible .situation-number,
.situations-board .situation-button:focus-visible .situation-name {
  color: var(--page-accent);
}
.situations-board .situation-item.active .situation-name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.65vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
  transform: scale(1.04);
}
.situations-board .situation-item.active .situation-marker {
  border-color: var(--page-accent);
  background: var(--page-accent);
  box-shadow: 0 0 0 0.38rem color-mix(in srgb, var(--page-accent) 16%, transparent);
}
.situations-board .situation-button:focus-visible .situation-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35rem;
}

@media (max-width: 980px) {
  .works {
    padding-bottom: clamp(5rem, 8vw, 8rem);
  }
  .situations-board {
    grid-template-columns: 1fr;
  }
  .situations-board .works-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
    min-height: 0;
  }
  .situations-board .works-grid::before,
  .situations-board .works-grid::after {
    content: none;
  }
  .situations-board .situation-item,
  .situations-board .situation-item:nth-child(n) {
    position: static;
    width: auto;
    transform: none;
  }
  .situations-board .situation-button,
  .situations-board .situation-button:hover,
  .situations-board .situation-button:focus-visible,
  .situations-board .situation-item.active .situation-button,
  .situations-board .situation-item.active .situation-button:hover,
  .situations-board .situation-item.active .situation-button:focus-visible {
    min-height: 5.6rem;
    padding: 1rem 1.8rem 1rem 0;
    border-bottom: 1px solid var(--page-line);
    text-align: left;
  }
  .situations-board .situation-item:nth-child(n) .situation-name {
    margin: 0;
  }
  .situations-board .situation-item:nth-child(n) .situation-marker {
    left: auto;
    right: 0.2rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .situations-board .situation-detail {
    height: auto;
  }
}

@media (max-width: 620px) {
  .situations-board .works-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   SITUAÇÕES — lista vertical ampla e direta
   Referência: índice de áreas do Guaiume Gomes.
   ══════════════════════════════════════════════════════════════ */

.situations-board {
  grid-template-columns: minmax(0, 1.08fr) minmax(28rem, 0.92fr);
  gap: clamp(2rem, 4vw, 4rem);
}

.situations-board .works-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(48rem, 47vw, 55rem);
  min-height: 0;
  padding: 1rem clamp(1.5rem, 2.5vw, 2.5rem);
  border: 0;
  background: #17150F;
  list-style: none;
}
.situations-board .works-grid::before,
.situations-board .works-grid::after {
  content: none;
}

.situations-board .situation-item,
.situations-board .situation-item:nth-child(n) {
  position: static;
  flex: 1 1 0;
  width: auto;
  min-height: 0;
  border: 0;
  border-bottom: 1px dashed rgba(237, 235, 229, 0.13);
  transform: none;
}
.situations-board .situation-item:last-child {
  border-bottom: 0;
}

.situations-board .situation-button,
.situations-board .situation-button:hover,
.situations-board .situation-button:focus-visible,
.situations-board .situation-item.active .situation-button,
.situations-board .situation-item.active .situation-button:hover,
.situations-board .situation-item.active .situation-button:focus-visible {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: rgba(237, 235, 229, 0.57);
  text-align: left;
  transform: none;
}
.situations-board .situation-button::before,
.situations-board .situation-marker::before,
.situations-board .situation-marker::after {
  content: none;
}

.situations-board .situation-number,
.situations-board .situation-item:nth-child(n) .situation-number {
  display: block;
  align-self: center;
  margin: 0;
  padding: 0;
  color: rgba(237, 235, 229, 0.52);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.12em;
  transition: color 0.28s ease;
}
.situations-board .situation-name,
.situations-board .situation-item:nth-child(n) .situation-name {
  display: block;
  max-width: none;
  margin: 0;
  color: rgba(237, 235, 229, 0.60);
  font-family: var(--sans);
  font-size: clamp(1.18rem, 1.65vw, 1.72rem);
  font-style: normal;
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: none;
  transform: none;
  transition: color 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.situations-board .situation-marker,
.situations-board .situation-item:nth-child(n) .situation-marker {
  position: static;
  justify-self: end;
  width: 1.8rem;
  height: 1px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: currentColor;
  color: rgba(237, 235, 229, 0.55);
  transform: none;
  transition: width 0.3s ease, color 0.28s ease;
}

.situations-board .situation-item.active .situation-number,
.situations-board .situation-item.active .situation-name,
.situations-board .situation-item.active .situation-marker,
.situations-board .situation-button:hover .situation-number,
.situations-board .situation-button:hover .situation-name,
.situations-board .situation-button:hover .situation-marker,
.situations-board .situation-button:focus-visible .situation-number,
.situations-board .situation-button:focus-visible .situation-name,
.situations-board .situation-button:focus-visible .situation-marker {
  color: #F2F0EA;
}
.situations-board .situation-item.active .situation-number {
  color: #A882C6;
}
.situations-board .situation-item.active .situation-name,
.situations-board .situation-button:hover .situation-name,
.situations-board .situation-button:focus-visible .situation-name {
  transform: translateX(0.45rem);
}
.situations-board .situation-item.active .situation-marker,
.situations-board .situation-button:hover .situation-marker,
.situations-board .situation-button:focus-visible .situation-marker {
  width: 2.35rem;
}
.situations-board .situation-button:focus-visible .situation-name {
  text-decoration: none;
}

@media (max-width: 1120px) and (min-width: 981px) {
  .situations-board {
    grid-template-columns: minmax(0, 1.12fr) minmax(24rem, 0.88fr);
  }
  .situations-board .situation-name,
  .situations-board .situation-item:nth-child(n) .situation-name {
    font-size: clamp(1.05rem, 1.75vw, 1.35rem);
  }
}

@media (max-width: 980px) {
  .situations-board {
    grid-template-columns: 1fr;
  }
  .situations-board .works-grid {
    display: flex;
    height: auto;
    min-height: 38rem;
    padding: 0.75rem 1.25rem;
  }
  .situations-board .situation-item,
  .situations-board .situation-item:nth-child(n) {
    min-height: 4.6rem;
  }
  .situations-board .situation-button,
  .situations-board .situation-button:hover,
  .situations-board .situation-button:focus-visible,
  .situations-board .situation-item.active .situation-button,
  .situations-board .situation-item.active .situation-button:hover,
  .situations-board .situation-item.active .situation-button:focus-visible {
    min-height: 4.6rem;
    padding: 0;
    border: 0;
  }
  .situations-board .situation-item:nth-child(n) .situation-marker {
    position: static;
    transform: none;
  }
  .situations-board .situation-detail {
    height: auto;
  }
}

@media (max-width: 620px) {
  .situations-board .situation-button,
  .situations-board .situation-button:hover,
  .situations-board .situation-button:focus-visible,
  .situations-board .situation-item.active .situation-button,
  .situations-board .situation-item.active .situation-button:hover,
  .situations-board .situation-item.active .situation-button:focus-visible {
    grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
  }
  .situations-board .situation-name,
  .situations-board .situation-item:nth-child(n) .situation-name {
    font-size: 1.08rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOCKUP DO CONTRATO — papel real, segunda via e carimbo físico
   ══════════════════════════════════════════════════════════════ */

.situations-board .situation-marker,
.situations-board .situation-item.active .situation-marker {
  box-shadow: none;
}

.cv-img-panel {
  background:
    linear-gradient(rgba(237, 235, 229, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 130, 198, 0.055) 1px, transparent 1px),
    #15130F;
  background-size: 100% 4.3rem, 4.3rem 100%, auto;
  perspective: 1200px;
}
.cv-img-veil {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(168, 130, 198, 0.075), transparent 42%),
    linear-gradient(180deg, rgba(16, 15, 12, 0.04), rgba(16, 15, 12, 0.30));
}
.cv-img-caption {
  z-index: 6;
}

.contract-scene {
  position: absolute;
  z-index: 3;
  inset: clamp(4.5rem, 8vh, 6rem) clamp(1rem, 3vw, 2.5rem) clamp(4.75rem, 8vh, 6rem);
  transform-style: preserve-3d;
}
.contract-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82%, 27rem);
  aspect-ratio: 210 / 297;
  color: #25211D;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.78), transparent 28%),
    repeating-linear-gradient(0deg, rgba(70, 58, 46, 0.018) 0 1px, transparent 1px 4px),
    #F4F0E7;
  border: 1px solid rgba(255, 255, 255, 0.50);
  box-shadow:
    0 2.4rem 4.5rem -2rem rgba(0, 0, 0, 0.78),
    0 0.4rem 1.1rem rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(86, 70, 54, 0.035);
  transform-origin: 50% 90%;
}
.contract-sheet-back {
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1rem;
  transform: translate(-44%, -48%) rotate(4.2deg) translateZ(-24px);
  background: #DDD6C9;
}
.contract-sheet-back span {
  color: rgba(37, 33, 29, 0.34);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contract-sheet-main {
  z-index: 2;
  padding: clamp(0.9rem, 1.65vw, 1.55rem);
  overflow: hidden;
  transform: translate(-53%, -52%) rotate(-2.2deg) translateZ(16px);
}
.contract-sheet-main::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 46%, rgba(255, 255, 255, 0.22) 50%, transparent 54%);
  opacity: 0.45;
}

.contract-doc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: clamp(0.65rem, 1.1vw, 1rem);
  border-bottom: 1px solid rgba(37, 33, 29, 0.16);
}
.contract-brand,
.contract-reference {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.contract-symbol {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #F4F0E7;
  background: #251A31;
  border-radius: 50%;
}
.contract-symbol svg { width: 0.78rem; height: auto; display: block; }
.contract-brand > span:last-child {
  font-family: var(--serif);
  font-size: clamp(0.58rem, 0.82vw, 0.76rem);
  font-style: italic;
}
.contract-reference {
  align-items: flex-end;
  flex-direction: column;
  gap: 0.16rem;
  font-family: var(--mono);
  text-align: right;
  text-transform: uppercase;
}
.contract-reference span {
  color: rgba(37, 33, 29, 0.46);
  font-size: clamp(0.30rem, 0.42vw, 0.40rem);
  letter-spacing: 0.12em;
}
.contract-reference strong {
  color: #684780;
  font-size: clamp(0.36rem, 0.5vw, 0.48rem);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.contract-doc-title {
  margin-top: clamp(0.75rem, 1.4vw, 1.25rem);
}
.contract-doc-title > span {
  display: block;
  color: #684780;
  font-family: var(--mono);
  font-size: clamp(0.31rem, 0.42vw, 0.40rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.contract-doc-title h3 {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.85vw, 1.8rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: none;
}
.contract-doc-title p {
  max-width: 94%;
  margin-top: clamp(0.42rem, 0.65vw, 0.62rem);
  color: rgba(37, 33, 29, 0.62);
  font-size: clamp(0.34rem, 0.47vw, 0.46rem);
  line-height: 1.55;
}

.contract-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: clamp(0.65rem, 1vw, 0.9rem);
}
.contract-parties div {
  padding: clamp(0.42rem, 0.62vw, 0.6rem);
  background: rgba(37, 33, 29, 0.045);
  border: 1px solid rgba(37, 33, 29, 0.07);
}
.contract-parties span,
.contract-parties strong {
  display: block;
}
.contract-parties span {
  color: #684780;
  font-family: var(--mono);
  font-size: clamp(0.28rem, 0.37vw, 0.36rem);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.contract-parties strong {
  margin-top: 0.25rem;
  font-size: clamp(0.34rem, 0.46vw, 0.45rem);
  font-weight: 500;
}

.contract-clauses {
  margin-top: clamp(0.6rem, 0.9vw, 0.85rem);
  list-style: none;
}
.contract-clauses li {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: clamp(0.35rem, 0.55vw, 0.55rem);
  padding: clamp(0.36rem, 0.52vw, 0.5rem) 0;
  border-top: 1px solid rgba(37, 33, 29, 0.10);
}
.contract-clauses li > span {
  color: #684780;
  font-family: var(--mono);
  font-size: clamp(0.28rem, 0.37vw, 0.36rem);
  letter-spacing: 0.08em;
}
.contract-clauses strong {
  display: block;
  font-size: clamp(0.34rem, 0.48vw, 0.47rem);
  font-weight: 620;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.contract-clauses p {
  margin-top: 0.18rem;
  color: rgba(37, 33, 29, 0.56);
  font-size: clamp(0.30rem, 0.41vw, 0.40rem);
  line-height: 1.45;
}

.contract-signatures {
  position: absolute;
  left: clamp(0.9rem, 1.65vw, 1.55rem);
  right: clamp(0.9rem, 1.65vw, 1.55rem);
  bottom: clamp(0.85rem, 1.35vw, 1.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.contract-signatures i {
  display: block;
  height: 1px;
  background: rgba(37, 33, 29, 0.34);
}
.contract-signatures span {
  display: block;
  margin-top: 0.25rem;
  color: rgba(37, 33, 29, 0.44);
  font-family: var(--mono);
  font-size: clamp(0.27rem, 0.36vw, 0.35rem);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.contract-stamp-imprint {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 12%;
  width: clamp(5rem, 8.5vw, 7.5rem);
  padding: clamp(0.32rem, 0.5vw, 0.48rem);
  border: 2px solid #684780;
  color: #684780;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
}
.contract-stamp-imprint::before {
  content: '';
  position: absolute;
  inset: 0.18rem;
  border: 1px solid currentColor;
}
.contract-stamp-imprint strong,
.contract-stamp-imprint span {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--mono);
  letter-spacing: 0.13em;
}
.contract-stamp-imprint strong {
  font-size: clamp(0.40rem, 0.64vw, 0.60rem);
}
.contract-stamp-imprint span {
  margin-top: 0.28rem;
  padding-top: 0.25rem;
  border-top: 1px solid currentColor;
  font-size: clamp(0.27rem, 0.38vw, 0.36rem);
}
.contract-stamp-impact {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 8%;
  width: clamp(6rem, 11vw, 9rem);
  aspect-ratio: 1;
  border: 1px solid rgba(104, 71, 128, 0.30);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
}

.contract-stamp-tool {
  position: absolute;
  /* Estado sem script: mesmo motivo do `z` no JS — dentro da cena 3D o
     `z-index` sozinho não tira o carimbo de trás da folha. */
  translate: 0 0 48px;
  z-index: 5;
  /* Enquanto o carimbo caía POR TRÁS da folha, ninguém via que ele também
     não pousava sobre a marca: batia 17% à direita e 21% abaixo do
     "CONFERIDO". Corrigido o 3D, o desalinho apareceu. Medido a partir do
     centro da marca dentro da cena. */
  right: 20%;
  top: auto;
  bottom: 34%;
  width: clamp(5.2rem, 8vw, 7rem);
  height: clamp(7rem, 11vw, 9.5rem);
  opacity: 0;
  filter: drop-shadow(0 1.4rem 1.1rem rgba(0, 0, 0, 0.44));
  transform: rotate(-9deg);
  transform-origin: 50% 90%;
}
.contract-stamp-handle,
.contract-stamp-neck,
.contract-stamp-base {
  position: absolute;
  left: 50%;
  display: block;
  transform: translateX(-50%);
}
.contract-stamp-handle {
  top: 0;
  width: 58%;
  height: 58%;
  border-radius: 48% 48% 32% 32%;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(90deg, #2D2823, #51463B 48%, #211D19);
  box-shadow: inset -0.4rem 0 0.7rem rgba(0, 0, 0, 0.22);
}
.contract-stamp-neck {
  top: 52%;
  width: 28%;
  height: 25%;
  background: linear-gradient(90deg, #463B31, #746350 50%, #332B24);
}
.contract-stamp-base {
  bottom: 0;
  width: 100%;
  height: 24%;
  border-radius: 0.35rem 0.35rem 0.12rem 0.12rem;
  background: linear-gradient(180deg, #756451, #342C24 75%);
  box-shadow: inset 0 -0.25rem 0 rgba(16, 12, 10, 0.48);
}

@media (max-width: 768px) {
  .cv-img-panel {
    min-height: 43rem;
  }
  .contract-scene {
    inset: 4.25rem 1rem 4.75rem;
  }
  .contract-sheet {
    width: min(72%, 24rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   FAQ — índice editorial, sem cartões
   A lista responde às objeções antes da chamada final e mantém
   a página em papel depois da pausa escura dos limites.
   ══════════════════════════════════════════════════════════════ */
.faq {
  --text: var(--ink);
  --muted: rgba(27, 24, 20, 0.60);
  --border: rgba(27, 24, 20, 0.14);
  --accent: var(--violet-ink);
  position: relative;
  z-index: 1;
  color: var(--text);
  background: transparent;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4rem);
}
.faq-shell {
  width: min(100%, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(18rem, 0.76fr) minmax(32rem, 1.24fr);
  gap: clamp(4rem, 8vw, 8.5rem);
  align-items: start;
}
.faq-intro {
  position: sticky;
  top: 8rem;
  padding-top: 0.35rem;
}
.faq-intro h2 {
  max-width: 9.5em;
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.7rem, 4.7vw, 5rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}
.faq-lede {
  max-width: 27rem;
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
}
.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 450;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease, gap 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-cta:hover {
  gap: 1.35rem;
  color: var(--accent);
}
.faq-list {
  border-bottom: 1px solid var(--border);
}
.faq-item {
  position: relative;
  border-top: 1px solid var(--border);
}
.faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 3.75rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item[open]::before {
  transform: scaleX(1);
}
.faq-item summary {
  min-height: clamp(6.4rem, 8vw, 8rem);
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 2.25rem;
  gap: 1.25rem;
  align-items: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.faq-no {
  align-self: center;
  color: rgba(27, 24, 20, 0.38);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.faq-question {
  color: rgba(27, 24, 20, 0.68);
  font-size: clamp(1.18rem, 1.75vw, 1.65rem);
  font-weight: 470;
  letter-spacing: -0.025em;
  line-height: 1.16;
  transition: color 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item summary:hover .faq-question,
.faq-item[open] .faq-question {
  color: var(--text);
  transform: translateX(0.35rem);
}
.faq-item[open] .faq-no {
  color: var(--accent);
}
.faq-toggle {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  justify-self: end;
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-toggle {
  color: var(--accent);
}
.faq-item[open] .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-answer {
  padding: 0 3.5rem 2.35rem 4.45rem;
  animation: faqReveal 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.faq-answer p {
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.78;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .faq-shell {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .faq-intro {
    position: static;
  }
  .faq-intro h2 {
    max-width: 12em;
  }
}
@media (max-width: 620px) {
  .faq {
    padding: 4rem 1rem;
  }
  .faq-shell {
    gap: 3rem;
  }
  .faq-intro h2 {
    font-size: clamp(2.55rem, 12vw, 3.65rem);
  }
  .faq-item summary {
    min-height: 6rem;
    grid-template-columns: 2.15rem minmax(0, 1fr) 1.65rem;
    gap: 0.65rem;
  }
  .faq-question {
    font-size: 1.15rem;
  }
  .faq-answer {
    padding: 0 1.75rem 1.9rem 2.8rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   SITUAÇÕES — composição final integrada
   Manchete, explicação e índice passam a ocupar a mesma página.
   Não há cartão branco nem painel preto independentes.
   ══════════════════════════════════════════════════════════════ */
.works {
  padding: clamp(5rem, 7vw, 7rem) clamp(1.5rem, 4vw, 4rem) clamp(6rem, 9vw, 9rem);
  background: transparent;
}
.works-shell {
  width: min(100%, 88rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(22rem, 0.82fr) minmax(32rem, 1.18fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(4rem, 7vw, 8rem);
  align-items: start;
}
.works-intro {
  grid-column: 1;
  grid-row: 1;
  max-width: 35rem;
  margin: 0;
  padding: 0 0 clamp(2.5rem, 4vw, 4rem);
}
.works-intro h2 {
  max-width: 10.5ch;
  margin-top: 1.15rem;
  font-size: clamp(2.8rem, 4.25vw, 4.85rem);
  line-height: 0.98;
  text-wrap: balance;
}
.works-lede {
  max-width: 30rem;
  margin-top: 1.55rem;
}
.situations-board {
  display: contents;
}

.situations-board .works-grid {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: clamp(43rem, 52vw, 49rem);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--page-line);
  border-bottom: 1px solid var(--page-line);
  background: transparent;
  list-style: none;
}
.situations-board .works-grid::before,
.situations-board .works-grid::after {
  content: none;
}
.situations-board .situation-item,
.situations-board .situation-item:nth-child(n) {
  position: static;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--page-line);
  transform: none;
}
.situations-board .situation-item:last-child {
  border-bottom: 0;
}
.situations-board .situation-button,
.situations-board .situation-button:hover,
.situations-board .situation-button:focus-visible,
.situations-board .situation-item.active .situation-button,
.situations-board .situation-item.active .situation-button:hover,
.situations-board .situation-item.active .situation-button:focus-visible {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: clamp(0.8rem, 1.4vw, 1.35rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 clamp(0.25rem, 0.8vw, 0.8rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  color: var(--page-muted);
  text-align: left;
  transform: none;
  transition: background-color 0.35s ease, color 0.28s ease;
}
.situations-board .situation-item:nth-child(n) .situation-button {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
  text-align: left;
}
.situations-board .situation-item.active .situation-button {
  background: color-mix(in srgb, var(--page-accent) 5%, transparent);
  box-shadow: inset 2px 0 var(--page-accent);
}
.situations-board .situation-button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--page-accent);
}
.situations-board .situation-button::before,
.situations-board .situation-marker::before,
.situations-board .situation-marker::after {
  content: none;
}
.situations-board .situation-number,
.situations-board .situation-item:nth-child(n) .situation-number {
  display: block;
  align-self: center;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--page-muted) 72%, transparent);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.12em;
  transition: color 0.28s ease;
}
.situations-board .situation-name,
.situations-board .situation-item:nth-child(n) .situation-name,
.situations-board .situation-item.active .situation-name {
  display: block;
  max-width: none;
  margin: 0;
  color: var(--page-muted);
  font-family: var(--sans);
  font-size: clamp(1.22rem, 1.72vw, 1.7rem);
  font-style: normal;
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: none;
  transform: none;
  transition: color 0.28s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.situations-board .situation-marker,
.situations-board .situation-item:nth-child(n) .situation-marker,
.situations-board .situation-item.active .situation-marker {
  position: static;
  justify-self: end;
  width: 1.7rem;
  height: 1px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  color: color-mix(in srgb, var(--page-muted) 78%, transparent);
  transform: none;
  transition: width 0.35s ease, color 0.28s ease;
}
.situations-board .situation-item.active .situation-number,
.situations-board .situation-button:hover .situation-number,
.situations-board .situation-button:focus-visible .situation-number {
  color: var(--page-accent);
}
.situations-board .situation-item.active .situation-name,
.situations-board .situation-item.active .situation-marker,
.situations-board .situation-button:hover .situation-name,
.situations-board .situation-button:hover .situation-marker,
.situations-board .situation-button:focus-visible .situation-name,
.situations-board .situation-button:focus-visible .situation-marker {
  color: var(--page-ink);
}
.situations-board .situation-item.active .situation-name,
.situations-board .situation-button:hover .situation-name,
.situations-board .situation-button:focus-visible .situation-name {
  transform: translateX(0.45rem);
}
.situations-board .situation-item.active .situation-marker,
.situations-board .situation-button:hover .situation-marker,
.situations-board .situation-button:focus-visible .situation-marker {
  width: 2rem;
}

.situations-board .situation-detail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 6.5rem;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 2.1rem 0 0;
  border: 0;
  border-top: 1px solid var(--page-line);
  color: var(--page-ink);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}
.situations-board .situation-detail::before,
.situations-board .situation-detail::after {
  content: none;
}
.situations-board .situation-detail > * {
  position: relative;
  z-index: auto;
}
.situation-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.situation-detail-kicker,
.situation-detail-index {
  margin: 0;
  color: var(--page-accent);
}
.situations-board .situation-detail h3 {
  max-width: 15ch;
  margin-top: clamp(1.65rem, 2.6vw, 2.5rem);
  color: var(--page-ink);
  font-size: clamp(2rem, 3vw, 3.35rem);
  line-height: 1.02;
}
.situation-example {
  max-width: none;
  margin-top: 1.65rem;
  padding: 1rem 1.15rem 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--page-accent) 62%, transparent);
  background: color-mix(in srgb, var(--page-accent) 6%, transparent);
}
.situation-example blockquote {
  color: color-mix(in srgb, var(--page-ink) 78%, transparent);
}
.situations-board .situation-detail > p {
  max-width: 34rem;
  margin-top: 1.35rem;
  color: var(--page-muted);
}
.situation-needs {
  margin-top: 1.45rem;
}
.situation-needs ul {
  gap: 0;
  margin-top: 0.75rem;
  border-top: 1px solid var(--page-line);
  border-bottom: 1px solid var(--page-line);
}
.situation-needs li {
  min-height: 3.8rem;
  padding: 0.7rem 0.75rem;
  border-right: 1px solid var(--page-line);
  color: var(--page-muted);
  background: transparent;
}
.situation-needs li:last-child {
  border-right: 0;
}
.situations-board .situation-detail-examples {
  color: var(--page-muted);
}
.situations-board .situation-detail a {
  color: var(--page-ink);
  border-bottom-color: var(--page-accent);
}

@media (max-width: 980px) {
  .works-shell {
    display: block;
  }
  .works-intro {
    max-width: 48rem;
  }
  .situations-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .situations-board .works-grid {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 0;
  }
  .situations-board .situation-item,
  .situations-board .situation-item:nth-child(n),
  .situations-board .situation-button,
  .situations-board .situation-button:hover,
  .situations-board .situation-button:focus-visible,
  .situations-board .situation-item.active .situation-button,
  .situations-board .situation-item.active .situation-button:hover,
  .situations-board .situation-item.active .situation-button:focus-visible {
    min-height: 5.4rem;
  }
  .situations-board .situation-detail {
    grid-column: 1;
    grid-row: 2;
    position: static;
    padding-top: 2rem;
  }
}

@media (max-width: 620px) {
  .works {
    padding: 4rem 1rem 5rem;
  }
  .works-intro h2 {
    font-size: clamp(2.55rem, 12vw, 3.75rem);
  }
  .situations-board .situation-button,
  .situations-board .situation-button:hover,
  .situations-board .situation-button:focus-visible,
  .situations-board .situation-item.active .situation-button,
  .situations-board .situation-item.active .situation-button:hover,
  .situations-board .situation-item.active .situation-button:focus-visible {
    grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
    min-height: 5rem;
    padding-inline: 0.3rem;
  }
  .situations-board .situation-name,
  .situations-board .situation-item:nth-child(n) .situation-name,
  .situations-board .situation-item.active .situation-name {
    font-size: 1.15rem;
  }
  .situation-needs ul {
    grid-template-columns: 1fr;
  }
  .situation-needs li,
  .situation-needs li:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--page-line);
  }
  .situation-needs li:last-child {
    border-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   SITUAÇÕES — implementação no mesmo sistema do Guaiume
   O palco inteiro fica visível; a lista ativa painéis sobrepostos
   na coluna esquerda, sem alterar a altura da dobra.
   ══════════════════════════════════════════════════════════════ */
.works {
  padding: clamp(7.5rem, 13vh, 10rem) 0 clamp(7rem, 12vh, 9rem);
  background: transparent;
}
.works-stage {
  width: 100%;
}
.works-shell {
  width: min(100%, 1400px);
  margin: 0 auto;
  padding-inline: clamp(2rem, 6vw, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(27rem, 0.9fr);
  gap: clamp(5rem, 9vw, 9rem);
  align-items: start;
}
.works-column {
  min-width: 0;
}
.works-intro {
  display: block;
  max-width: 37rem;
  margin: 0;
  padding: 0;
}
.works-intro h2 {
  max-width: 11ch;
  margin-top: 1rem;
  color: var(--page-ink);
  font-size: clamp(2.65rem, 4.1vw, 4.55rem);
  line-height: 0.99;
  text-wrap: balance;
}
.works-lede {
  max-width: 31rem;
  margin-top: 1.35rem;
  color: var(--page-muted);
  font-size: 0.9rem;
  line-height: 1.72;
}

.situation-panels {
  display: grid;
  min-height: 20.5rem;
  margin-top: clamp(2rem, 4vh, 2.75rem);
  padding-top: clamp(1.6rem, 3vh, 2rem);
  border-top: 1px solid var(--page-line);
}
.situation-panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0.8rem, 0);
  transition:
    opacity 0.28s ease,
    visibility 0s linear 0.28s,
    transform 0.44s cubic-bezier(0.22, 0.72, 0.24, 1);
}
.situation-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.08s, 0s, 0.08s;
}
.situation-panel-index {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--page-accent);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.situation-panel h3 {
  max-width: 18ch;
  color: var(--page-ink);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.55vw, 2.75rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.situation-panel-body {
  max-width: 34rem;
  margin-top: 0.8rem;
  color: var(--page-muted);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.65;
}
.situation-panel-example {
  max-width: 34rem;
  margin-top: 1rem;
  padding: 0.75rem 0.9rem 0.8rem;
  border-left: 2px solid color-mix(in srgb, var(--page-accent) 62%, transparent);
  background: color-mix(in srgb, var(--page-accent) 6%, transparent);
}
.situation-panel-example > span,
.situation-panel-needs > span {
  display: block;
  margin-bottom: 0.38rem;
  color: var(--page-accent);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.situation-panel-example blockquote {
  color: color-mix(in srgb, var(--page-ink) 78%, transparent);
  font-size: 0.78rem;
  font-weight: 320;
  line-height: 1.55;
}
.situation-panel-needs {
  max-width: 34rem;
  margin-top: 0.9rem;
  color: var(--page-muted);
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.55;
}
.situation-panel a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--page-accent);
  color: var(--page-ink);
  font-size: 0.68rem;
  font-weight: 450;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.24s ease, gap 0.3s ease;
}
.situation-panel a:hover,
.situation-panel a:focus-visible {
  gap: 0.95rem;
  color: var(--page-accent);
}

.works .works-grid {
  width: min(100%, 37rem);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: 1px dashed var(--page-line);
  border-bottom: 0;
  background: transparent;
  list-style: none;
}
.works .situation-item,
.works .situation-item:nth-child(n) {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  border-bottom: 1px dashed var(--page-line);
  background: transparent;
  transform: none;
}
.works .situation-button,
.works .situation-item:nth-child(n) .situation-button,
.works .situation-button:hover,
.works .situation-button:focus-visible,
.works .situation-item.active .situation-button,
.works .situation-item.active .situation-button:hover,
.works .situation-item.active .situation-button:focus-visible {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: clamp(0.78rem, 1.45vh, 1rem) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  color: var(--page-muted);
  text-align: left;
  transform: none;
  transition: color 0.28s ease;
}
.works .situation-button::before,
.works .situation-marker::before,
.works .situation-marker::after {
  content: none;
}
.works .situation-number,
.works .situation-item:nth-child(n) .situation-number {
  display: block;
  align-self: start;
  margin: 0;
  padding-top: 0.26rem;
  color: color-mix(in srgb, var(--page-muted) 72%, transparent);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: color 0.28s ease;
}
.works .situation-name,
.works .situation-item:nth-child(n) .situation-name,
.works .situation-item.active .situation-name {
  display: block;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--page-muted);
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  font-style: normal;
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-transform: none;
  transform: none;
  transition: color 0.28s ease, transform 0.36s cubic-bezier(0.22, 0.72, 0.24, 1);
}
.works .situation-marker,
.works .situation-item:nth-child(n) .situation-marker,
.works .situation-item.active .situation-marker {
  position: static;
  justify-self: end;
  width: 1.25rem;
  height: 1px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--page-muted);
  box-shadow: none;
  transform: none;
  transform-origin: right;
  transition: width 0.36s cubic-bezier(0.22, 0.72, 0.24, 1), background-color 0.28s ease;
}
.works .situation-item.active .situation-button,
.works .situation-button:hover,
.works .situation-button:focus-visible {
  color: var(--page-ink);
}
.works .situation-item.active .situation-number {
  color: var(--page-accent);
}
.works .situation-item.active .situation-name,
.works .situation-button:hover .situation-name,
.works .situation-button:focus-visible .situation-name {
  color: var(--page-ink);
  transform: translate3d(0.35rem, 0, 0);
}
.works .situation-item.active .situation-marker,
.works .situation-button:hover .situation-marker,
.works .situation-button:focus-visible .situation-marker {
  width: 2.2rem;
  background: var(--page-accent);
}
.works .situation-button:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 4px;
}

@media (min-width: 1024px) {
  .works-column {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
}

@media (min-width: 1024px) and (min-height: 820px) {
  .works.works-stage-ready {
    min-height: calc(100svh + var(--works-course, 46rem));
    padding-block: 0;
  }
  .works-stage-ready .works-stage {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100svh;
    padding-block: clamp(6.25rem, 10vh, 7.5rem) clamp(4rem, 6vh, 5rem);
    box-sizing: border-box;
  }
  .works-stage-ready .works-shell {
    width: min(100%, 1400px);
  }
  .works-stage-ready .works-column {
    position: static;
    align-self: center;
  }
}

@media (max-width: 1023px) {
  .works {
    padding: 6rem 0 7rem;
  }
  .works-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-inline: clamp(1rem, 5vw, 2.5rem);
  }
  .works-column {
    max-width: 46rem;
  }
  .works .works-grid {
    width: 100%;
    justify-self: stretch;
  }
  .situation-panels-mount:empty {
    display: none;
  }
  .works .situation-panels {
    margin: 0 0 1.25rem 2.5rem;
    min-height: 0;
    padding: 0 2rem 0 0;
    border-top: 0;
  }
  .works .situation-panel-index,
  .works .situation-panel h3 {
    display: none;
  }
  .works .situation-panel-body {
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .works {
    padding: 4.5rem 0 5.5rem;
  }
  .works-intro h2 {
    font-size: clamp(2.45rem, 12vw, 3.6rem);
  }
  .works .situation-button,
  .works .situation-item:nth-child(n) .situation-button {
    grid-template-columns: 2rem minmax(0, 1fr) 1.6rem;
    padding: 1rem 0;
  }
  .works .situation-name,
  .works .situation-item:nth-child(n) .situation-name,
  .works .situation-item.active .situation-name {
    font-size: 1.25rem;
  }
  .works .situation-panel-example,
  .works .situation-panel-needs {
    margin-top: 0.8rem;
  }
}

/* Dobra lilás clara — teste de contraste solicitado. */
body[data-tone="lilac"] {
  --page-bg: #A882C6;
  --page-ink: #1B1817;
  --page-muted: rgba(27, 24, 23, 0.64);
  --page-line: rgba(27, 24, 23, 0.18);
  /* Quase-branco sobre um lilás de meio-tom dá 2.83 de contraste — abaixo do
     mínimo para texto pequeno. Violeta profundo dá 4.92 e continua na
     família da marca. O único consumidor deste token nesta dobra é o texto
     de destaque; as peças das situações vivem na dobra de papel. */
  --page-accent: #2E1C40;
  --page-ghost: rgba(27, 24, 23, 0.055);
  background-color: var(--page-bg);
}
body[data-tone="lilac"] nav {
  background: rgba(168, 130, 198, 0.88);
  border-bottom-color: rgba(27, 24, 23, 0.16);
}
body[data-tone="lilac"] .nav-logo,
body[data-tone="lilac"] .nav-links a,
body[data-tone="lilac"] .nav-enquire {
  color: #1B1817;
}
body[data-tone="lilac"] .nav-enquire {
  border-color: rgba(27, 24, 23, 0.22);
  background: rgba(255, 255, 255, 0.16);
}
#stacking-section.case-study {
  color: var(--page-ink);
  background: transparent;
}

/* A tag do estúdio, na barra final. Discreta como crédito de obra: presente
   para quem procura, invisível para quem contrata. */
.footer-estudio {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(237, 235, 229, 0.34);
  text-decoration: none;
  white-space: nowrap;
}
.footer-estudio b { font-weight: 650; color: rgba(237, 235, 229, 0.5) }
.footer-estudio:hover, .footer-estudio:hover b { color: rgba(168, 130, 198, 0.9) }
@media (max-width: 620px) { .footer-estudio { white-space: normal } }

/* ═══════════════════════════════════════════════════════════════════════
   A RÉGUA DAS DOBRAS
   ═══════════════════════════════════════════════════════════════════════

   Cada seção nasceu com o próprio respiro — sete camadas de `.works` no
   cascade, `.story` com 6rem fixos, `.faq` com clamp próprio — e o resultado
   é ritmo irregular: umas soltas, outras coladas. Uma medida só, no fim da
   folha, onde vence por ordem.

   O que NÃO entra aqui, de propósito: as seções com coreografia de rolagem
   (o empilhamento do case-study e o pin da filosofia). Nelas o padding é
   parte do cálculo de quando cada painel prende e solta — mexer ali não dá
   mais ar, desalinha a animação.

   Medido com `node scripts/medir-dobras.mjs`, que conta ar de TEXTO a TEXTO:
   painel de imagem sangrado toca a borda de propósito. */

:root {
  --dobra: clamp(8.5rem, 16vw, 17rem);
  --dobra-lado: clamp(1.5rem, 4vw, 4rem);
}

.works  { padding-top: var(--dobra); padding-bottom: var(--dobra) }
.faq    { padding-top: var(--dobra); padding-bottom: var(--dobra) }
.story  { padding-top: var(--dobra); padding-bottom: var(--dobra) }

/* Dentro das seções de duas colunas o ar vive no lado do texto: a coluna da
   imagem sangra até a borda, e é para sangrar. */
.cv-text           { padding-block: var(--dobra) }
.contact-form-side { padding-block: var(--dobra) }

/* O herói ganha ar por MARGEM, nunca por padding.
   Ele é desenhado para caber em uma tela (`min-height: 100svh`), e padding
   entraria na altura dele — empurrando a dobra seguinte para fora do primeiro
   olhar. Margem fica fora da caixa: o herói continua com exatamente uma tela,
   e o ar aparece depois dele. Foi a primeira costura que o Nicholas apontou,
   e a que menos tinha mudado. */
.hero { margin-bottom: clamp(3rem, 6vw, 6.5rem) }

@media (max-width: 620px) {
  /* No celular a régua encolhe, mas não some: rolar dobra atrás de dobra sem
     pausa cansa mais na tela pequena, não menos. */
  :root { --dobra: clamp(6.5rem, 19vw, 9.5rem) }
}

/* ═══════════════════════════════════════════════════════════════════════
   "CHEGA ASSIM" — A CONVERSA
   ═══════════════════════════════════════════════════════════════════════

   O primeiro card mostra a mensagem do cliente como ela chega de verdade:
   em rajada, minúscula, sem nome de documento. Antes era uma citação entre
   aspas — dizia a mesma coisa e não provava nada. Conversa é prova.

   Não imita a interface do WhatsApp. Usa a tipografia e as cores da casa:
   copiar a marca de outro produto numa página que vende serviço jurídico é
   problema, não referência. O que se toma emprestado é a GRAMÁTICA — balão,
   alinhamento à direita de quem escreve, hora e visto. */

.conversa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .34rem;
  /* O respiro de cima não é enfeite: o título é serifado itálico com
     entrelinha 1, e o "j" de "jeito" desce para fora da caixa de linha.
     Com .35rem o chip do dia encostava no descendente. */
  margin: 1.7rem 0 1.4rem;
  flex: 1;
  justify-content: flex-end;
}
.conversa-dia {
  align-self: center;
  margin-bottom: .55rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(237, 235, 229, .06);
  color: rgba(237, 235, 229, .4);
  font: 500 .58rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.balao {
  position: relative;
  max-width: 88%;
  margin: 0;
  padding: .6rem .85rem;
  border-radius: 12px 12px 3px 12px;
  background: rgba(104, 71, 128, .30);
  border: 1px solid rgba(168, 130, 198, .22);
  color: rgba(240, 238, 232, .93);
  font-size: .88rem;
  line-height: 1.5;
  /* Estado inicial da entrada. O JS anima; sem ele o balão fica visível,
     porque conteúdo que depende de script para existir some com o script. */
  opacity: 1;
}
/* O último leva a hora e o visto, como a última mensagem de uma rajada. */
.balao--fim { padding-bottom: 1.55rem }
.balao-hora {
  position: absolute;
  right: .7rem;
  bottom: .45rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: rgba(240, 238, 232, .42);
  font: 500 .6rem/1 var(--mono, ui-monospace, monospace);
}
/* Dois riscos que se cruzam: o visto de entregue, sem copiar o ícone alheio. */
.balao-visto {
  width: 12px; height: 7px;
  border-left: 1.5px solid rgba(168, 130, 198, .85);
  border-bottom: 1.5px solid rgba(168, 130, 198, .85);
  transform: rotate(-45deg) translateY(-1px);
}

.is-entrando .balao {
  opacity: 0;
  transform: translateY(9px) scale(.97);
}

@media (max-width: 980px) {
  .balao { max-width: 92%; font-size: .92rem }
}

/* ═══════════════════════════════════════════════════════════════════════
   "DA CONVERSA AO DOCUMENTO" — A MONTAGEM POR ROLAGEM
   ═══════════════════════════════════════════════════════════════════════

   As três colunas ficam lado a lado o tempo todo — é assim que se lê uma
   transformação, comparando — e cada uma se MONTA na sua fatia da rolagem:
   o número estoura, o corpo desce, o texto sobe. Uma barra costura as três.

   Estado inicial mora aqui e só vale com a classe `is-montando`, que o
   script põe. Sem script, o conteúdo aparece inteiro: página que depende de
   JavaScript para ter texto é página que some quando o JavaScript falha. */

/* A costura das três colunas. Grossa e acesa o bastante para ser lida como
   progresso, e não como filete decorativo: com 2px e meio transparente ela
   desaparecia contra o fundo escuro da dobra. */
.case-trilho {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: rgba(237, 235, 229, .10);
  z-index: 6;
  overflow: hidden;
}
.case-trilho i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #7A56A0, #A882C6 65%, #C7AEE0);
  box-shadow: 0 0 14px rgba(168, 130, 198, .55);
}

/* O card entra inteiro — fundo, linha divisória e cabeçalho —, mas sem sair
   do lugar: as três colunas são um bloco dividido por linhas, e deslocar uma
   abre vão contra as vizinhas.

   O fundo NÃO é a opacidade do elemento: ela multiplicaria a do conteúdo e
   sujaria o ritmo dos balões. Ele mora na camada `.case-column::before`,
   comandada por `--monta` mais abaixo. */
.case-flow.is-montando [data-monta="numero"] { opacity: 0; transform: scale(.2) }
.case-flow.is-montando [data-monta="etiqueta"] { opacity: 0; transform: translateX(14px) }
.case-flow.is-montando .conversa-dia { opacity: 0 }
.case-flow.is-montando [data-monta="titulo"] { opacity: 0; transform: translateY(26px) }
.case-flow.is-montando [data-monta="corpo"]  { opacity: 0; transform: translateY(-34px) }
.case-flow.is-montando [data-monta="rodape"] { opacity: 0; transform: translateY(26px) }



@media (prefers-reduced-motion: reduce) {
  .case-flow.is-montando [data-monta] { opacity: 1 !important; transform: none !important }
  .case-trilho i { transform: scaleX(1) }
}

/* ═══════════════════════════════════════════════════════════════════════
   O CARD INTEIRO ENTRA NA MONTAGEM — FUNDO, ETIQUETA, LINHA E DIA
   ═══════════════════════════════════════════════════════════════════════

   Quatro peças ficavam de fora da montagem e apareciam antes da vez: o
   fundo do card, a etiqueta ("chega assim"), a linha do cabeçalho e o dia
   da conversa. Peça que chega sozinha, antes do resto, não se lê como
   parte de uma montagem — se lê como coisa esquecida ali.

   O fundo mora numa CAMADA PRÓPRIA (`::before`) em vez de ir na opacidade
   do card: opacidade no elemento inteiro multiplica a do conteúdo e suja o
   ritmo dos balões, que têm tempo próprio. Assim o fundo pinta enquanto o
   texto faz a entrada dele. Quem comanda é `--monta`, o progresso da fatia
   daquela coluna, que o script escreve a cada quadro.

   O fundo não parte do zero: um piso de 12% deixa o lugar do card marcado
   antes da vez dele. Vazio total abriria um buraco lilás no meio do bloco. */

.case-column {
  background: transparent;
}
.case-column::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #151213;
  opacity: 1;
}

/* Nada de piso: antes da vez dele o card não deixa marca nenhuma. Retângulo
   esmaecido esperando a hora entrega a grade e mata a chegada — o que devia
   surgir já estava desenhado ali, só que apagado.

   O card 01 tem uma HORA DIFERENTE, não um passe livre: ele pinta na subida
   da dobra (`--entrada`), enquanto a seção sobe para o lugar, e está pronto
   quando o pino prende. É a porta da seção — nascer só depois de prender
   deixaria a dobra entrando em tela vazia. 02 e 03 são a transformação, e
   chegam cada um na sua fatia. Dentro da fatia o fundo lidera e fecha no
   primeiro quarto: o texto do card é claro, e se chegasse antes do fundo
   passaria a dobra boiando sobre o lilás, ilegível. */
.case-flow.is-montando .case-column::before {
  opacity: min(1, var(--monta, 0) / 0.28);
}
/* Só no desktop o card 01 tem hora própria: lá ele é a porta de uma dobra
   PRESA, e precisa estar pronto quando o pino prende. No retrato não há
   pino — cada coluna sobe pela tela por conta própria, e a primeira se monta
   como as outras, na vez dela. */
@media (min-width: 981px) {
  .case-flow.is-montando .case-message::before {
    opacity: min(1, var(--entrada, 0) / 0.75);
  }
}
.case-reading::before {
  background: #2C2037;
}
.case-document::before {
  background: #19151B;
}

/* A linha que separa as colunas viaja com o fundo. Sozinha, ela ficaria
   flutuando sobre o lilás enquanto o card ainda nem chegou. */
.case-column + .case-column {
  box-shadow: none;
}
.case-column + .case-column::before {
  box-shadow: inset 1px 0 rgba(237, 235, 229, 0.10);
}

/* O conteúdo sobe uma camada, senão o fundo o cobriria. */
.case-column > * {
  position: relative;
  z-index: 1;
}

/* A linha do cabeçalho é DESENHADA da esquerda para a direita, no mesmo
   gesto do trilho que costura as três colunas — em vez de já estar lá. */
.case-column-head {
  border-bottom-color: transparent;
}
.case-column-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(237, 235, 229, 0.12);
  transform: scaleX(1);
  transform-origin: left;
}
/* Sem a montagem — celular, script fora do ar — a linha simplesmente existe.
   Com ela, o padrão é ZERO e não um: enquanto `--monta` não é escrito, o
   fallback 1 deixava as três linhas desenhadas sobre o lilás vazio, antes de
   qualquer card chegar. Era o mesmo defeito do fundo, num traço de 1px. */
.case-flow.is-montando .case-column-head::after {
  transform: scaleX(var(--monta, 0));
}

@media (prefers-reduced-motion: reduce) {
  .case-flow.is-montando .conversa-dia {
    opacity: 1;
  }
  .case-column::before {
    opacity: 1;
  }
  .case-column-head::after {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   AS TRÊS GARANTIAS VOLTAM A SER UM BLOCO SÓ
   ═══════════════════════════════════════════════════════════════════════

   O `gap: 1rem` sobrou da tentativa de carrossel, quando cada card era uma
   peça solta que passava. Fora daquele desenho ele abre três frestas de
   fundo lilás bem embaixo do bloco das etapas, que é justamente fechado —
   duas grades diferentes coladas uma na outra, e a de baixo parecendo
   quebrada. Aqui as garantias são uma faixa contínua dividida por linhas,
   como as etapas acima. */

.case-guardrails {
  gap: 0;
}
.case-guardrails article,
.case-guardrails article:last-child {
  background: #1A1520;
  box-shadow: none;
}
.case-guardrails article + article {
  box-shadow: inset 1px 0 rgba(237, 235, 229, 0.10);
}

@media (max-width: 980px) {
  /* Empilhado, quem divide é a linha de cima. */
  .case-guardrails article + article {
    box-shadow: inset 0 1px rgba(237, 235, 229, 0.10);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   "POR QUE COLOCAR NO PAPEL": ETIQUETA E SUBTÍTULO SAEM DO SUSSURRO
   ═══════════════════════════════════════════════════════════════════════

   Esta dobra tem um título de até 14rem. Ao lado dele, uma etiqueta de
   0.64rem e um subtítulo de 0.83rem não leem como hierarquia — leem como
   letra miúda, coisa escondida no rodapé de contrato. O tamanho aqui não
   segue a etiqueta padrão da página de propósito: quem manda na proporção
   é o título que ela apresenta. */

.cv-eye-label {
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.16em;
}
.conviction .cv-sub,
.cv-sub {
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.7;
  max-width: 38rem;
}
.conviction .cv-sub {
  color: var(--page-ink);
  opacity: 0.78;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMEÇAR: A CONVERSA NO LUGAR DO FORMULÁRIO
   ═══════════════════════════════════════════════════════════════════════

   A página inteira promete que não é preciso saber juridiquês nem qual
   documento pedir. Quatro campos separados — nome, telefone, assunto e um
   resumo — desmentem isso na última dobra, logo depois da promessa. E a
   triagem acontece na conversa de qualquer jeito.

   O botão não usa o glifo do WhatsApp: a mesma regra dos balões lá em cima,
   de tomar emprestada a gramática e não a marca. */

.contact-lead {
  max-width: 34rem;
  margin-bottom: 2.8rem;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--page-ink, var(--text));
  opacity: 0.82;
}
/* O último botão da página usa o MESMO primário do hero, e um tamanho acima
   dele: é o ponto de conversão da dobra que fecha a leitura. O bloco preto
   discreto que estava aqui pesava menos que a nota ao lado. */
.contact-wa {
  min-height: 3.9rem;
  padding: 0.35rem 2.3rem;
  font-size: 0.88rem;
  white-space: nowrap;
}
/* A nota sai de ao lado e vai para baixo: dividindo a linha com o botão ela
   competia com ele, e é apoio. */
.contact-submit-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.45rem;
}
.contact-note {
  max-width: 30rem;
  font-size: 0.8rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .contact-wa {
    width: 100%;
  }
}

/* No celular a coluna do rótulo encolhe abaixo do próprio texto:
   "RESPONSABILIDADE", em mono com entreletra aberta, encostava no valor.
   Em tela estreita o rótulo passa a ficar em cima do que ele nomeia. */
@media (max-width: 620px) {
  .case-checklist li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   O BOTÃO DA BARRA VIRA BLOCO SÓLIDO
   ═══════════════════════════════════════════════════════════════════════

   Era vidro: borda de 1px sobre um fundo quase transparente. Numa barra que
   já é translúcida, isso o deixava no mesmo peso dos links de navegação — e
   ele é a única ação da barra, não mais um item do menu.

   Sólido, ele TEM de inverter com o tom da página. A barra troca de cor a
   cada dobra (papel, violeta, tinta, lilás); um botão preto fixo sumiria
   dentro da dobra escura. Aqui a regra é uma só: bloco na cor oposta à do
   fundo daquela dobra. */

.nav-enquire,
body[data-tone="paper"] .nav-enquire,
body[data-tone="lilac"] .nav-enquire {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(27, 24, 20, 0.45);
}
body[data-tone="violet"] .nav-enquire,
body[data-tone="ink"] .nav-enquire {
  background: var(--paper);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.55);
}

/* O ar pedido: o bloco precisa de margem interna para não virar etiqueta. */
.nav-enquire {
  padding: 0.58rem 0.58rem 0.58rem 1.4rem;
  letter-spacing: 0.1em;
}

/* O disco da seta acompanha a inversão, senão fica um buraco no bloco. */
.nav-enquire .btn-icon,
body[data-tone="paper"] .nav-enquire .btn-icon,
body[data-tone="lilac"] .nav-enquire .btn-icon {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.26);
  color: #C9A7E2;
}
body[data-tone="violet"] .nav-enquire .btn-icon,
body[data-tone="ink"] .nav-enquire .btn-icon {
  background: rgba(27, 24, 20, 0.08);
  border-color: rgba(27, 24, 20, 0.20);
  color: var(--violet-ink);
}

/* O brilho de vidro não tem o que fazer sobre um bloco chapado. */
.nav-enquire::before {
  opacity: 0;
}
.nav-enquire::after {
  opacity: 0.3;
}

.nav-enquire:hover {
  background: var(--violet-ink);
  color: #FFFFFF;
  border-color: transparent;
}
.nav-enquire:hover .btn-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSADA DE CELULAR
   ═══════════════════════════════════════════════════════════════════════

   Medido com `medir-dobras.mjs` e com as bordas do texto lidas uma a uma.
   Três defeitos, todos de espaço:

   1. A COLUNA DE TEXTO NÃO ERA UMA SÓ. O texto começava a 16px no herói, na
      filosofia, no story, no faq, no contato e no rodapé; a 20px nas
      situações e no case-study; a 24px na convicção. Três colunas descendo
      a mesma tela lêem-se como desalinho, e 16px é pouco: a frase encosta
      na borda do aparelho. Agora existe uma régua lateral só — a
      `--dobra-lado`, que estava declarada e não era usada em lugar nenhum.

   2. AS DOBRAS ESTAVAM COLADAS. 104px entre uma e outra, contra 230 no
      desktop. Numa tela em que cada dobra ocupa várias rolagens, a virada
      passava sem pausa.

   3. A FILOSOFIA COMEÇAVA A 25px DA CONVICÇÃO — quase encostada. O ar dela
      entra por MARGEM e não por padding: a seção é o gatilho do pino, e
      padding no gatilho empurraria a área vazia para dentro da parte presa.
      Mesmo motivo pelo qual o herói já ganhava ar por margem. */

@media (max-width: 620px) {
  :root {
    --dobra: 8rem;
    --dobra-lado: 1.4rem;
  }

  .hero-content-panel,
  .works-shell,
  #stacking-section.case-study,
  .cv-text,
  .phil-left,
  .story,
  .faq,
  .contact-form-side,
  footer {
    padding-inline: var(--dobra-lado);
  }

  /* O case-study fica fora da régua no desktop porque o padding entra na
     conta do pino. No celular não há pino — as colunas viram pilha —, então
     ele entra no ritmo como as outras. */
  #stacking-section.case-study {
    padding-block: var(--dobra);
  }

  .philosophy {
    margin-top: var(--dobra);
  }
}

/* O botão do contato é `nowrap` dentro de uma caixa com `overflow: hidden`:
   quando o rótulo não cabe ele não quebra — some cortado, e ainda empurra a
   coluna. Em tela estreita o corpo cede para o rótulo caber inteiro. */
@media (max-width: 480px) {
  /* Vale para os dois primários: no celular eles ocupam a largura toda, e
     "preciso de um contrato agora" a 0.82rem não cabia — em 320px sobrava
     -63px, ou seja, o fim do rótulo era cortado fora. */
  .btn-shimmer {
    font-size: 0.74rem;
    padding-inline: 1rem;
    letter-spacing: 0.055em;
  }
  .contact-wa {
    font-size: 0.76rem;
    padding-inline: 1.1rem;
    letter-spacing: 0.055em;
    min-height: 3.5rem;
  }
  .contact-form-side {
    min-width: 0;
  }
}

/* Em 320px "combinaram." não cabia na coluna, e como item de grade tem
   `min-width: auto` a coluna crescia junto com a palavra: a página inteira
   passava a rolar de lado. O título encolhe só nesta faixa — no 390, que é
   o aparelho mais comum, ele fica como está. */
@media (max-width: 359px) {
  .hero-h1 {
    font-size: clamp(1.95rem, 11.5vw, 2.4rem);
  }
  .hero-main > * {
    min-width: 0;
  }
  /* Em 320 o rótulo passa raspando, e "quero formalizar minha situação" é
     mais longo que o texto anterior. Fio de navalha não serve para uma fonte
     que pode renderizar diferente em outro aparelho. */
  .btn-shimmer {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
}

/* ── O BOTÃO DA BARRA NO CELULAR ─────────────────────────────────────────
   Sólido e com o rótulo inteiro ele ocupava 58% da barra: a marca ficava
   espremida no canto e a navegação virava um bloco preto. Rótulo curto e
   corpo menor — continua sendo o mesmo pedido, dito em menos palavras. */
.rotulo-curto { display: none }

@media (max-width: 768px) {
  .rotulo-longo { display: none }
  .rotulo-curto { display: inline }
  .nav-enquire {
    font-size: 0.6rem;
    gap: 0.42rem;
    padding: 0.44rem 0.44rem 0.44rem 0.85rem;
    letter-spacing: 0.07em;
  }
  .nav-enquire .btn-icon {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.76rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   A ETIQUETA DA DOBRA SEGUE O TOM DA PÁGINA
   ═══════════════════════════════════════════════════════════════════════

   `--accent` é #A882C6. O fundo da dobra lilás é #A882C6. A mesma cor, no
   mesmo pixel: "Da conversa ao documento" e "Sem formulário complicado"
   sumiam por completo — contraste medido de 1.00, que é o piso absoluto.

   A troca de tom da página já publica `--page-accent` justamente para isto,
   e ele existe em todos os quatro tons (violeta escuro no papel, quase
   branco no lilás). O texto de destaque passa a segui-lo, em vez de carregar
   uma cor fixa que só funcionava em fundo escuro. */

.section-label,
.case-intro span {
  color: var(--page-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   A FILOSOFIA SEM PINO: OS TRÊS PASSOS VIRAM PILHA
   ═══════════════════════════════════════════════════════════════════════

   Medido em 390x844: o bloco preso tem 954px de altura numa tela de 844.
   110px ficam SEMPRE abaixo da dobra — e é ali que moram o rodapé, a legenda
   e o pulso do palco. A coreografia acontecia pela metade, com peças que
   nunca entravam na tela.

   Sem pino, as cartas saem do empilhamento absoluto e viram três blocos que
   se lêem rolando. Some junto o vocabulário que só fazia sentido preso: o
   número gigante do palco, a barra de progresso e a legenda de rodapé
   contam uma etapa "atual" que, numa pilha, não existe — todas estão à
   vista. */

.philosophy.sem-pino .phil-sticky {
  height: auto;
  overflow: visible;
}
.philosophy.sem-pino .phil-pin-height {
  min-height: 0;
}
.philosophy.sem-pino .phil-right {
  padding: 0 var(--dobra-lado, 1.4rem) var(--dobra-lado, 1.4rem);
}
.philosophy.sem-pino .phil-stage {
  height: auto;
  min-height: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
.philosophy.sem-pino .phil-stage::before,
.philosophy.sem-pino .phil-stage-orbit,
.philosophy.sem-pino .phil-stage-grid,
.philosophy.sem-pino .phil-stage-meta,
.philosophy.sem-pino .phil-stage-footer,
.philosophy.sem-pino .phil-left-bg,
.philosophy.sem-pino .phil-progress-list {
  display: none;
}
/* "Passo 1" quebrava entre a palavra e o número: numa pilha estreita o
   rótulo dividia a linha com as etiquetas e cedia primeiro. */
.phil-q-num {
  white-space: nowrap;
  flex: none;
}

.philosophy.sem-pino .phil-card-stack {
  position: static;
  inset: auto;
  display: grid;
  gap: 1rem;
}
.philosophy.sem-pino .phil-card,
.philosophy.sem-pino .phil-card.vis,
.philosophy.sem-pino .phil-card.next,
.philosophy.sem-pino .phil-card.past {
  position: static;
  inset: auto;
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR: O QUE CUSTA PINTURA, E O VÃO DA CONVICÇÃO
   ═══════════════════════════════════════════════════════════════════════

   A entrada do herói travava e o JS não era o gargalo — perfilado com a CPU
   estrangulada em 6x, o processador ficava quase todo ocioso. Sobra pintura.

   O suspeito principal é a barra: `backdrop-filter: blur(14px)` numa faixa
   fixa de largura inteira. Enquanto as linhas do título sobem POR BAIXO
   dela, o desfoque precisa reamostrar o conteúdo a cada quadro, na tela
   toda. No Safari de iPhone isso é caríssimo. Na barra opaca não há o que
   reamostrar. O mesmo vale para o desfoque do botão — que hoje é um bloco
   sólido, e portanto desfoca coisa nenhuma.

   A convicção, por sua vez, é `height: 100vh` mesmo no celular, mas o texto
   dela ocupa dois terços disso: sobravam 268px de vazio embaixo, mais o
   respiro da régua. No retrato ela passa a ter a altura do que carrega. */

@media (max-width: 768px) {
  nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body[data-tone="paper"] nav {
    background: #F2F0EA;
  }
  body[data-tone="violet"] nav {
    background: #251A31;
  }
  body[data-tone="ink"] nav {
    background: #17150F;
  }
  body[data-tone="lilac"] nav {
    background: #A882C6;
  }
  .nav-enquire,
  .phil-left {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-content-panel {
    box-shadow: none;
  }
  .conviction {
    height: auto;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   AS ARTES VOLTAM NO CELULAR
   ═══════════════════════════════════════════════════════════════════════

   Três peças estavam `display: none` abaixo de 769px: o documento assinado
   do herói, o termo de acordo da convicção e a citação do contato. Não era
   falha de carregamento — a página não tem uma única tag de imagem, tudo é
   CSS e SVG. Era decisão de layout: as três nasceram como PAINEL LATERAL,
   e coluna lateral não existe no retrato.

   Aqui elas voltam como FAIXA. Não basta remover o `display: none`: cada uma
   é uma composição desenhada para uma caixa alta e estreita ao lado do
   texto, e no retrato precisa virar uma caixa baixa e larga abaixo dele.
   Daí a altura própria, a ordem invertida e o corte de sangria.

   No herói a ordem importa: o texto vem primeiro. A arte é bonita, mas quem
   chega precisa ler o que o serviço é antes de ver um documento assinado. */

@media (max-width: 768px) {
  .hero-main {
    display: flex;
    flex-direction: column;
  }
  .hero-content-panel {
    order: 1;
  }
  .hero-img-panel {
    display: block;
    order: 2;
    height: 46vh;
    min-height: 17rem;
    max-height: 24rem;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  /* Na faixa deitada a folha ocupa quase toda a altura, e a rubrica — que no
     painel alto assinava ABAIXO do documento — passava por cima do carimbo.
     Aqui ela desce para o rodapé da faixa, que é onde sobra papel. */
  .hero-signature {
    top: 69%;
    left: 6%;
    width: 62%;
    height: 17%;
  }
  .hero-img-label {
    bottom: 0.75rem;
    left: var(--dobra-lado, 1.4rem);
    right: var(--dobra-lado, 1.4rem);
    padding-top: 0.5rem;
    gap: 1rem;
  }
  .hero-img-label span {
    font-size: 0.53rem;
    letter-spacing: 0.06em;
  }

  .conviction {
    display: flex;
    flex-direction: column;
  }
  .cv-img-panel {
    display: block;
    min-height: 0;
    height: 58vh;
    max-height: 30rem;
    border-left: 0;
    border-top: 1px solid var(--page-line, var(--border));
  }

}

/* A citação do contato sumia numa faixa mais larga que as outras duas: o
   `display: none` dela começa em 1100px, não em 768. Entre 769 e 1100 a
   dobra já é de uma coluna só, então a faixa serve igual. */
@media (max-width: 1100px) {
  .contact {
    display: flex;
    flex-direction: column;
  }
  .contact-visual {
    display: flex;
    min-height: 20rem;
    height: 42vh;
    max-height: 26rem;
  }
}

/* Na faixa deitada a cena muda de proporção — 398x335 contra 349x798 — e a
   marca cai noutro ponto relativo. */
@media (max-width: 1100px) {
  .contract-stamp-tool {
    right: 22%;
    bottom: 10%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   QUAL É A SUA NECESSIDADE — A GRADE
   ═══════════════════════════════════════════════════════════════════════

   Substitui o índice orbital com painel ao lado. Aquele desenho era bonito e
   obrigava a abrir uma situação por vez para descobrir do que se tratava —
   quem chega ao site quer saber em segundos se o caso dele cabe aqui, e isso
   se responde comparando, não navegando.

   O número faz o papel do ícone. É a linguagem que a página já fala nas
   etapas e nos passos; importar um jogo de ícones de linha só para esta dobra
   criaria um segundo idioma visual dentro do mesmo site. */

.works-shell {
  /* `display: block` explícito: o desenho anterior fazia desta casca uma
     grade de duas colunas — índice de um lado, painel do outro — e sem
     desfazer isso a grade nova nascia espremida numa coluna só. */
  display: block;
  width: min(100%, 76rem);
  margin: 0 auto;
  padding-inline: clamp(1.4rem, 4vw, 4rem);
  grid-template-columns: none;
  gap: 0;
}
.works-intro {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.works-intro h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1rem;
  color: var(--page-ink);
}
.works-lede {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--page-muted);
  max-width: 38rem;
}

.necessidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--page-line);
  border: 1px solid var(--page-line);
}
.necessidade a {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.34rem;
  height: 100%;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--page-bg);
  text-decoration: none;
  position: relative;
  transition: background 0.22s ease;
}
.necessidade a:hover {
  background: var(--page-ghost);
}
.nec-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--page-accent);
}
.nec-titulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--page-ink);
  margin-top: 0.5rem;
}
/* O nome jurídico fica, e fica pequeno: serve a quem já sabe o que quer e à
   busca, sem competir com a situação que a pessoa reconhece. */
.nec-instrumento {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-muted);
  margin-bottom: 0.5rem;
}
.nec-corpo {
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--page-muted);
}
.nec-seta {
  position: absolute;
  right: 1.2rem;
  bottom: 1.15rem;
  font-size: 0.8rem;
  color: var(--page-accent);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.necessidade a:hover .nec-seta,
.necessidade a:focus-visible .nec-seta {
  opacity: 1;
  transform: none;
}
/* A saída para quem não se reconheceu em nenhuma. Marcada, não escondida. */
.necessidade--outros a {
  background: var(--page-ghost);
}
.necessidade--outros .nec-titulo {
  color: var(--page-accent);
}

@media (max-width: 620px) {
  .necessidades {
    grid-template-columns: 1fr;
  }
  .necessidade a {
    padding: 1.3rem var(--dobra-lado, 1.4rem);
  }
}

/* A barra é fixa, então âncora que leva o topo da seção para o topo da tela
   esconde o começo dela atrás da barra. Quem clica em "Situações" no menu
   caía com o rótulo da dobra coberto. */
[id] {
  scroll-margin-top: 5.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PARA EMPRESAS
   ═══════════════════════════════════════════════════════════════════════

   Dobra curta de propósito. Ela não vende plano — o plano não existe ainda.
   Serve para a empresa se reconhecer e falar com o escritório, que é o passo
   que precede qualquer decisão sobre recorrência. */

.empresas {
  padding-block: var(--dobra);
  padding-inline: clamp(1.4rem, 4vw, 4rem);
  background: var(--page-bg);
  border-top: 1px solid var(--page-line);
}
.empresas-shell {
  width: min(100%, 76rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.empresas h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1.1rem;
  color: var(--page-ink);
}
.empresas-lede {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--page-muted);
  max-width: 34rem;
}
.empresas-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--page-line);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--page-ink);
  transition: border-color 0.22s ease;
}
.empresas-cta:hover {
  border-bottom-color: var(--page-accent);
}
.empresas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--page-line);
}
.empresas-lista li {
  display: grid;
  grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--page-line);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--page-muted);
}
.empresas-lista span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--page-accent);
}

@media (max-width: 900px) {
  .empresas-shell {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .empresas {
    padding-inline: var(--dobra-lado, 1.4rem);
  }
  /* Empilhado, o rótulo vira linha de cima em vez de coluna estreita. */
  .empresas-lista li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* O sinal e o número dividem a primeira linha do card: o número é a
   linguagem que a página já fala nas etapas, e o sinal é o que se reconhece
   antes de ler. Nenhum dos dois manda sozinho. */
.nec-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.nec-sinal {
  width: 1.55rem;
  height: 1.55rem;
  color: var(--page-accent);
  flex: none;
}
.necessidade a:hover .nec-sinal {
  color: var(--page-ink);
}
.nec-sinal,
.necessidade a:hover .nec-sinal {
  transition: color 0.22s ease;
}


/* ═══════════════════════════════════════════════════════════════════════
   SEM PINO EM LARGURA NENHUMA
   ═══════════════════════════════════════════════════════════════════════

   O que era condicionado ao retrato passa a valer sempre: as três colunas do
   case-study se montam quando sobem pela tela, e a filosofia é uma pilha de
   passos. Some a rolagem travada que o documento pede para evitar, e some
   também a manutenção de dois desenhos paralelos para a mesma dobra. */

.case-flow.is-montando .case-message::before {
  opacity: min(1, var(--monta, 0) / 0.28);
}

/* ═══════════════════════════════════════════════════════════════════════
   DIFERENCIAIS E SOBRE
   ═══════════════════════════════════════════════════════════════════════

   Duas dobras de leitura, não de coreografia. Depois de tirar os pinos, a
   página passou a se ler rolando do começo ao fim — e estas duas nascem
   assim de propósito: grade calma, nada que entre em cena. */

.virtudes {
  padding-block: var(--dobra);
  padding-inline: clamp(1.4rem, 4vw, 4rem);
  border-top: 1px solid var(--page-line);
}
.virtudes-shell {
  width: min(100%, 76rem);
  margin: 0 auto;
}
.virtudes-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 3.5vw, 3.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.virtudes-lista h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--page-ink);
  margin: 0 0 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--page-line);
}
.virtudes-lista p {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--page-muted);
  margin: 0;
}

.sobre {
  padding-block: var(--dobra);
  padding-inline: clamp(1.4rem, 4vw, 4rem);
  border-top: 1px solid var(--page-line);
}
.sobre-shell {
  width: min(100%, 76rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.sobre h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1.1rem;
  color: var(--page-ink);
}
.sobre-lede {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--page-muted);
  max-width: 34rem;
}
.sobre-fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--page-line);
}
.sobre-fatos li {
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--page-line);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--page-muted);
}
.sobre-fatos span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--page-accent);
}

@media (max-width: 900px) {
  .sobre-shell {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .virtudes,
  .sobre {
    padding-inline: var(--dobra-lado, 1.4rem);
  }
  .sobre-fatos li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* Sem pino, a coluna da esquerda é curta e a pilha de passos é alta — o
   título ficava sozinho no alto de um vazio de duas telas. Grudada, ele
   acompanha a leitura, que é o que o pino fazia sem travar a rolagem. */
@media (min-width: 901px) {
  .philosophy.sem-pino .phil-sticky {
    align-items: start;
  }
  .philosophy.sem-pino .phil-left {
    position: sticky;
    top: 6.5rem;
    align-self: start;
    padding-block: 0;
  }
}