@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap");

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--forest-950);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ivory-100);
  background:
    radial-gradient(circle at 12% 0%, rgba(46,104,76,.20), transparent 31rem),
    radial-gradient(circle at 88% 20%, rgba(214,161,75,.05), transparent 25rem),
    var(--forest-950);
  font-family: var(--font-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }

section[id] { scroll-margin-top: 96px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-180%);
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--ivory-100);
  color: var(--forest-950);
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.container {
  width: min(calc(100% - 2rem), var(--container));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 {
  font-family: var(--font-display);
  line-height: 1.05;
}
h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .94;
}
h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 5.5vw, 5.7rem);
  letter-spacing: -.055em;
}
h3 {
  margin-bottom: .75rem;
  font-size: 1.35rem;
  letter-spacing: -.02em;
}
.lead {
  max-width: 720px;
  color: #d2dcd4;
  font-size: clamp(1.05rem, 1.65vw, 1.28rem);
}
.muted { color: var(--stone-300); }

.surface {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: var(--shadow);
}

::selection {
  background: var(--gold-500);
  color: var(--forest-950);
}

.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .75s ease var(--delay, 0ms),
    transform .75s cubic-bezier(.2,.7,.2,1) var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}