.site-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 0%, rgba(112, 224, 163, .28), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(244, 201, 93, .22), transparent 30%),
    radial-gradient(circle at 50% 84%, rgba(49, 95, 146, .12), transparent 36%),
    linear-gradient(180deg, #fbf7ed 0%, #f4ecdf 58%, #fbf7ed 100%);
}
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(17,35,29,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,35,29,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black 0%, black 56%, transparent 100%);
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 2000;
  background: var(--forest);
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
}
.skip-link:focus { left: 12px; }
.page-shell { min-height: 100vh; overflow: hidden; }
.container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
.section { padding: 108px 0; position: relative; }
.section.compact { padding: 76px 0; }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(15,45,36,.12);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255,255,255,.56);
  color: var(--forest-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 0 7px rgba(112,224,163,.16); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 22px 0 18px;
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: .91;
  letter-spacing: -.075em;
  max-width: 1040px;
}
h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: .98; letter-spacing: -.05em; margin-bottom: 14px; }
h3 { font-size: 22px; line-height: 1.1; letter-spacing: -.035em; margin-bottom: 10px; }
.lede { font-size: clamp(18px, 2vw, 23px); color: var(--ink-2); max-width: 760px; line-height: 1.55; }
.muted { color: var(--muted); }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .section { padding: 76px 0; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
}