*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-size: 16px;
}
img,svg,video{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
a:focus-visible,button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button{ font: inherit; cursor: pointer; }
ul,ol{ padding: 0; margin: 0; list-style: none; }
h1,h2,h3,h4,h5{ font-family: var(--ff-display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--text); }
p{ margin: 0 0 1rem; }
p:last-child{ margin-bottom: 0; }

/* Texture TEX-4 — grille fine */
body{
  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-position: 0 0;
}

.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px){ .container{ padding: 0 18px; } }

.section{ padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.section--alt{ background: var(--bg-alt); }
.section--dark{ background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark :where(h1,h2,h3,h4,p,li,span,a,small){ color: var(--text-on-dark); }
.section--dark .section__title{ color: var(--text-on-dark); }
.section--dark .section__lead{ color: var(--text-2-on-dark); }

.section__eyebrow{
  font-family: var(--ff-ui);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.section__title{
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 14px;
  max-width: 28ch;
}
.section__lead{
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

.section__head{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (max-width: 768px){
  .section__head{ grid-template-columns: 1fr; gap: 8px; }
  .section__lead{ margin-bottom: 32px; }
}