/* Shared scale normalization for the four public pages. */
:root {
  --scale-page-max: 1240px;
  --scale-gutter: clamp(18px, 3.2vw, 48px);
  --scale-section-y: clamp(56px, 6vw, 104px);
}

html { font-size: 16px; }
body { overflow-x: hidden; }

.page-width {
  width: min(calc(100% - (2 * var(--scale-gutter))), var(--scale-page-max));
  margin-inline: auto;
}

.site-header {
  min-height: 76px;
  padding-block: 14px;
}

h1,
.hero-copy h1,
.build-hero h1,
.about-hero h1 {
  font-size: clamp(3.1rem, 5.7vw, 6.25rem);
  line-height: .94;
  letter-spacing: -.055em;
}

h2,
.section-heading h2,
.section-heading.narrow h2,
.about-cta h2,
.about-role h2 {
  font-size: clamp(2.1rem, 3.55vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.045em;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 2.25rem);
  line-height: 1.05;
}

p,
li {
  font-size: clamp(1rem, 1.22vw, 1.28rem);
  line-height: 1.38;
}

.eyebrow { font-size: clamp(.78rem, .9vw, .95rem); }

#top,
.build-hero,
.about-hero,
.before-after-hero {
  padding-block: clamp(48px, 6vw, 88px);
}

.hero-grid,
.build-hero-grid,
.about-hero-grid { align-items: start; }

.build-proof img,
.hero-visual img,
.about-hero img,
.platform-panel img,
.before-after-section img {
  max-height: min(52vh, 520px);
  object-fit: contain;
}

.offer-board { align-items: stretch; }
.offer-card { min-height: auto; }
.offer-card .inline-action,
.offer-card .button { margin-top: auto; }

.trust-logo-bar { margin-top: clamp(24px, 3vw, 42px); }
.trust-quote { margin-top: clamp(18px, 2vw, 32px); }

.section-heading,
.section-heading.narrow {
  margin-bottom: clamp(28px, 4vw, 56px);
}

.deliverable-row,
.example-row {
  padding-block: clamp(28px, 4vw, 56px);
}

.about-role,
.about-position,
.about-infra-logos,
.about-cta,
.before-after-section,
.build-next,
.sprint-method,
.sprint-fit {
  padding-block: var(--scale-section-y);
}

@media (max-width: 900px) {
  .hero-grid,
  .build-hero-grid,
  .about-hero-grid { grid-template-columns: 1fr; }

  h1,
  .hero-copy h1,
  .build-hero h1,
  .about-hero h1 {
    font-size: clamp(2.7rem, 10vw, 4.8rem);
  }

  h2,
  .section-heading h2,
  .section-heading.narrow h2,
  .about-cta h2,
  .about-role h2 {
    font-size: clamp(2rem, 8vw, 3.4rem);
  }

  .build-proof img,
  .hero-visual img,
  .about-hero img,
  .platform-panel img,
  .before-after-section img { max-height: 420px; }
}

@media (max-width: 620px) {
  :root { --scale-gutter: 20px; }

  .site-header {
    min-height: 64px;
    padding-block: 10px;
  }

  .site-header nav { gap: 12px; }
  p, li { font-size: 1rem; }
}