/* ─────────────────────────────
   RESET
───────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding: a nav é fixa, e sem ele o título de uma âncora (#contato)
   para escondido atrás dela. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--font-sans);
  color: var(--midnight);
  background: var(--white);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─────────────────────────────
   TIPOGRAFIA
───────────────────────────── */
.label {
  display: block;
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.55em; text-transform: uppercase;
  color: var(--accentlt); margin-bottom: var(--space-24);
}
.display {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 300; line-height: 1.1;
  letter-spacing: 0.01em;
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300; line-height: 1.2;
}
.body-text {
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 300; line-height: 1.9;
  color: var(--deepnavy);
}
.body-text + .body-text { margin-top: var(--space-20); }

/* PullQuote: filete, sem moldura. */
.quote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 300; font-style: italic;
  color: var(--deepnavy); line-height: 1.55;
  border-left: var(--rule-strong) solid var(--accentlt);
  padding-left: var(--space-28);
}

/* ─────────────────────────────
   SEÇÕES E FUNDOS
───────────────────────────── */
section { padding: var(--pad-section) var(--pad-x); }

.bg-off   { background: var(--offwhite); }
.bg-white { background: var(--white); }
.bg-dark  { background: var(--midnight); }
.bg-navy  { background: var(--deepnavy); }
.bg-dark .display, .bg-navy .display,
.bg-dark .display-sm, .bg-navy .display-sm { color: var(--white); }
.bg-dark .body-text, .bg-navy .body-text { color: var(--silver); }
.bg-dark .quote, .bg-navy .quote { color: var(--frost); }

/* Duas colunas: texto e citação, ou texto e visual. */
.sec-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, var(--space-96)); align-items: center;
}
/* Intro de seção: título à esquerda, parágrafo à direita, grade abaixo. */
.sec-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, var(--space-96)); align-items: end;
  margin-bottom: var(--space-64);
}
.sec-lead { max-width: 560px; margin-top: 16px; }