/* Shared, static light fields carry the palette across section boundaries. */
main {
  background:
    radial-gradient(ellipse min(1100px, 95vw) 600px at 0% 19%, #65e4f30c, transparent 72%),
    radial-gradient(ellipse min(1000px, 90vw) 560px at 100% 51%, #f37ed10a, transparent 72%),
    radial-gradient(ellipse min(1000px, 90vw) 500px at 0% 85%, #65e4f30b, transparent 72%);
}

.hero { padding-bottom: 76px; }

.context {
  color: var(--text);
  padding: 72px 0;
  background: linear-gradient(180deg, transparent, #162637b3 25%, #12203399 72%, transparent);
}
.context .context-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 0 clamp(36px, 6vw, 88px);
}
.context .eyebrow {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0 0 24px;
  color: var(--cyan);
}
.context h2 { float: none; margin: 0; }
.context-copy { min-width: 0; max-width: 62ch; }
.context p:not(.eyebrow) { margin: 0; color: var(--muted); }
.context .context-copy p + p { margin-top: 20px; }

#expertise { padding-top: 76px; padding-bottom: 78px; }

.framework {
  border-block: 0;
  background: linear-gradient(180deg, transparent, #18233899 120px, #18233899 calc(100% - 120px), transparent);
}
.framework > .section { padding-block: 80px; }

.principles { padding-top: 76px; padding-bottom: 44px; }
#testimonials {
  background: transparent;
  padding-top: 48px;
  padding-bottom: 72px;
}

.contact {
  border-top: 0;
  padding-top: 76px;
  padding-bottom: 72px;
  background: linear-gradient(180deg, transparent, #151c2ecc 120px, #151c2ecc calc(100% - 100px), transparent);
}

@media (max-width: 900px) {
  .context .context-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .context .eyebrow { margin-bottom: 20px; }
  .context h2 { margin-bottom: 28px; }
}

@media (max-width: 650px) {
  .hero { padding-bottom: 48px; }
  .context { padding-block: 56px; }
  #expertise { padding-block: 60px; }
  .framework > .section { padding-block: 60px; }
  .principles { padding-top: 60px; padding-bottom: 32px; }
  #testimonials { padding-top: 36px; padding-bottom: 56px; }
  .contact { padding-block: 60px; }
}