/* global.css — Nunn&Sander · Utilitários e reveal */

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bone-100); overflow-x: hidden; min-height: 100vh; }
img, video { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bone-100); }
::-webkit-scrollbar-thumb { background: var(--ink-300); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
::selection { background: var(--oxblood-500); color: var(--bone-50); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* Section base */
.sect { position: relative; background: var(--bone-100); border-bottom: 1px solid var(--ink-100); }
.sect-hd { display: grid; grid-template-columns: 360px minmax(0, 1fr) auto; gap: 56px; align-items: end; padding: 96px 80px 48px; border-bottom: 1px solid var(--ink-100); }
.sect-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-500); display: flex; align-items: center; gap: 14px; }
.sect-eyebrow::before { content: '\00A7'; font-family: var(--font-serif); font-style: italic; color: var(--oxblood-500); font-size: 20px; line-height: 0.6; }
.sect-eyebrow.glyph-diamond::before { content: '\25C6'; font-family: var(--font-sans); font-size: 11px; }
.sect-title { font-family: var(--font-sans); font-weight: 600; font-size: clamp(36px, 4.8vw, 64px); letter-spacing: -0.025em; text-transform: uppercase; color: var(--ink-900); line-height: 1.02; margin: 0; max-width: 18ch; text-wrap: balance; }
.sect-title em { font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: none; color: var(--oxblood-500); font-size: 1.16em; line-height: 0.82; letter-spacing: -0.01em; margin: 0 0.04em; vertical-align: baseline; }
.sect-counter { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); text-align: right; line-height: 1.6; }
.sect-counter strong { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink-900); letter-spacing: 0.06em; }

/* Buttons */
.btn { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; background-image: none; padding: 18px 28px; cursor: pointer; border: 1px solid var(--ink-900); transition: background 0.24s var(--ease-standard), color 0.24s var(--ease-standard), letter-spacing 0.24s var(--ease-standard); display: inline-flex; align-items: center; }
.btn--primary { color: var(--bone-50); background: var(--ink-900); }
.btn--primary:hover { background: var(--oxblood-500); border-color: var(--oxblood-500); letter-spacing: 0.22em; }
.btn--ghost { color: var(--ink-900); background: transparent; border-color: var(--ink-300); margin-left: -1px; }
.btn--ghost:hover { background: var(--ink-900); color: var(--bone-50); border-color: var(--ink-900); }
.btn .arrow { display: inline-block; margin-left: 10px; transition: transform 0.24s var(--ease-out); }
.btn--primary:hover .arrow { transform: translateX(3px); }

/* Responsive: collapse sect-hd to 1 col on tablet */
@media (max-width: 1024px) {
  .sect-hd { grid-template-columns: 1fr; gap: 24px; padding: 64px 40px 32px; }
  .sect-counter { text-align: left; }
}
@media (max-width: 767px) {
  .sect-hd { padding: 48px 24px 24px; }
}