@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono.woff2") format("woff2");
}

:root {
  --page-bg: #FFFFFF;
  --cream: #F7F8F4;
  --ink: #142018;
  --ink-500: #5F6C64;
  --forest-900: #163A40;
  --forest-800: #1F4A52;
  --forest-700: #1F4A52;
  --forest-600: #1F4A52;
  --gold-500: #C9A96A;
  --gold-400: #E9D7B0;
  --border: #E4E9E3;
  --sage-50: #F7F8F4;
  --sage-100: #F7F8F4;
  --sage-300: #C9D3D2;
  --shadow-btn: none;
}

h1, h2, h3, .section__title, .hero__title, .step__title,
.card__title, .topic__title, .topics__title, .principle__title,
.contacts__title {
  color: var(--forest-900);
  font-weight: 650;
}

body { background: var(--page-bg); color: var(--ink); }
.brand { gap: 10px; }
.brand__logo, .brand--footer .brand__logo { width: 36px; height: 36px; }
.brand__name, .brand--footer .brand__name {
  color: var(--forest-900);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-transform: none;
}

.btn {
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}
.btn--primary, .btn--primary:hover {
  background: var(--forest-800);
  color: var(--cream);
  box-shadow: none;
}
.btn--outline {
  background: #fff;
  border-color: #C9D3D2;
  color: var(--forest-900);
}
.btn--outline:hover { background: var(--cream); }
.btn--gold, .btn--gold:hover {
  background: var(--cream);
  color: var(--forest-900);
  box-shadow: none;
}
.btn--ghost, .btn--ghost:hover {
  background: transparent;
  border-color: rgb(247 248 244 / 55%);
  color: var(--cream);
}
.header { background: rgb(255 255 255 / 92%); }
.wayfind, .geomap, .geomap--plain { background: var(--page-bg); }
.section--hero { overflow: hidden; }
.btn--xl { border-radius: 14px; }
.btn--primary.btn--compact, .btn--primary.btn--xl { box-shadow: none; }
.kicker { color: var(--forest-800); }
.kicker--dark { color: var(--gold-400); }
.kicker__dash { background: var(--gold-500); }
.card__num, .topic__num { color: var(--forest-800); }
.wayfind__label, .edu__num, .studio__label { color: var(--forest-800); }
.kicker, .nav__link, .card__num, .topic__num, .step__num, .plan__label,
.wayfind__label, .methods, .footer__link, .faq__trigger, .edu__num, .studio__label {
  font-weight: 500;
}
.hero__price, .plan__amount, .plan__per, .plan__meta, .card__num,
.topic__num, .edu__num, .stat__value, .step__num {
  font-family: "Geist Mono", monospace;
}

.hero { position: relative; }
.hero::before {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: -10%;
  width: clamp(250px, 34vw, 440px);
  aspect-ratio: 1;
  background: url("/assets/tree-petrol.svg") center / contain no-repeat;
  content: "";
  opacity: .05;
  pointer-events: none;
}
.hero__text, .hero__media { position: relative; z-index: 1; }

.step { min-width: 0; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: clamp(28px, 4vw, 64px);
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest-800);
  font-family: "Geist Mono", monospace;
  font-size: 16px;
  font-weight: 500;
}
.step:nth-child(3) { background: var(--forest-900); }
.step:nth-child(3) .step__num { background: rgb(247 248 244 / 10%); color: var(--gold-400); }
.step:nth-child(3) .step__title { color: var(--cream); }
.step:nth-child(3) .step__text { color: rgb(247 248 244 / 78%); }

.section--price { background: var(--forest-900); color: var(--cream); }
.price__title { color: var(--cream); }
.price__text { color: rgb(247 248 244 / 82%); }
.price__text--muted { color: rgb(247 248 244 / 72%); }
.plan { box-shadow: 0 14px 44px rgb(0 0 0 / 12%); }
.plan__label { color: var(--gold-400); }
.plan__per, .plan__meta, .plan__list li { color: rgb(247 248 244 / 82%); }
.plan__list li::before { color: var(--gold-400); }

@media (max-width: 760px) {
  .hero::before { display: none; }
  .hero, .steps, .price, .section__head, .how__head, .about, .faq, .contacts, .studio, .principles {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio__map { grid-column: auto; }
}