/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
figure { margin: 0; }
img, svg, video, iframe { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-mobile);
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 768px) { html { scroll-padding-top: var(--header-h); } }

body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 500; line-height: 1.15; color: var(--text); }
h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -0.005em; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { color: var(--text-2); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

section { padding: 56px 0; position: relative; }
@media (min-width: 768px) { section { padding: 88px 0; } }
section + section { padding-top: 32px; }
@media (min-width: 768px) { section + section { padding-top: 64px; } }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-ui); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px; font-weight: 500;
}
.section-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }

.section-head { margin-bottom: clamp(28px, 4vw, 56px); max-width: 720px; }
.section-head p { margin-top: 14px; max-width: 56ch; font-size: 1.02rem; }