*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--on-surface-strong);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover { color: var(--secondary); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-pad) 0;
  scroll-margin-top: var(--nav-h);
}

/* Per-section surfaces (no body-level color shifting) */
.section--hero { /* background on .hero */ }
.section--white { background: var(--surface-container); color: var(--on-surface-strong); }
.section--cloud { background: var(--surface); color: var(--on-surface-strong); }
.section--mist { background: var(--surface-soft); color: var(--on-surface-strong); }
.section--strong {
  background: var(--surface-strong);
  color: var(--on-surface-inverse);
}

.section--dark-gray {
  background: var(--surface-dark-gray);
  color: var(--on-surface-inverse);
}

.display-headline {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: inherit;
}

.section-headline {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.subheadline {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: inherit;
}

.body-text {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--on-surface);
}

.section--white .body-text,
.section--cloud .body-text,
.section--mist .body-text {
  color: var(--on-surface);
}

.section--strong .body-text {
  color: var(--on-surface-inverse);
  opacity: 0.92;
}

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 16px;
}

.section--strong .eyebrow {
  color: var(--tertiary);
}

.section-narration {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface-strong);
  max-width: 900px;
}

a:focus-visible,
button:focus-visible,
.compare-handle:focus-visible,
.work-row:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
}