.surface-light {
  position: relative;
  color: var(--ivory);
  background:
    radial-gradient(ellipse at 95% 0, rgba(128, 27, 50, .07), transparent 38%),
    linear-gradient(145deg, #0d0c0d, #050505 72%);
  border-block: 1px solid rgba(255, 216, 117, .09);
}

.surface-light h2,
.surface-light h3,
.surface-light strong {
  color: var(--ivory);
}

.surface-light p,
.surface-light .check-list li {
  color: var(--muted);
}

.surface-light .eyebrow {
  color: var(--teal);
}

.surface-light .card {
  color: var(--ivory);
  background: linear-gradient(145deg, rgba(255, 232, 163, .045), rgba(255, 232, 163, .012));
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 232, 163, .035);
}

.surface-light .card h3 {
  color: var(--ivory);
}

.surface-light .card p {
  color: var(--muted);
}

.surface-light .card:before {
  border-color: rgba(128, 27, 50, .2);
}

.surface-light .card:hover {
  background: linear-gradient(145deg, rgba(128, 27, 50, .09), rgba(255, 216, 117, .035));
  border-color: rgba(128, 27, 50, .42);
}

.card:not(.project-card) {
  box-shadow: inset 0 1px 0 rgba(255, 232, 163, .035);
}

.section-head {
  row-gap: 16px;
}

.quote-band {
  box-shadow: 0 22px 64px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 232, 163, .045);
}

@media (max-width: 760px) {
  .surface-light {
    background:
      radial-gradient(ellipse at 95% 0, rgba(128, 27, 50, .055), transparent 38%),
      #080808;
  }

  .section-head {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .button {
    transition: none;
  }
}