@font-face {
  font-family: 'Nordique Pro';
  src: url('fonts/NordiquePro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GTWalsheim-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GTWalsheim-RegularOblique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GTWalsheim-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akkurat';
  src: url('fonts/AkkuratStd-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ecru: #F7F5F0;
  --dark-forest: #122D22;
  --forest: #246654;
  --poppy: #F26841;
  --aqua: #96D5D2;
  --spring: #00A888;
  --font-display: 'Nordique Pro', sans-serif;
  --font-heading: 'GT Walsheim', sans-serif;
  --font-body: 'Akkurat', sans-serif;
  --font-serif: 'Source Serif 4', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ecru);
  color: var(--dark-forest);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  color: var(--dark-forest);
  margin: 0 0 16px;
  line-height: 1.15;
}

h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
h2 { font-family: var(--font-heading); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 500; }
h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; }

p { margin: 0 0 16px; }

a { color: var(--forest); }

/* Header */
.site-header {
  padding: 32px 0 20px;
}
.header-inner {
  display: flex;
  align-items: center;
}
.logo-img {
  height: 60px;
  width: auto;
  display: block;
}
.logo-img.small {
  height: 32px;
}

/* Wordmark + tagline lockup, matching the brand lockup spec */
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
}
.lockup-rule {
  height: 1px;
  width: 100%;
  background: #62736A;
  margin-top: 10px;
}
.lockup-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: #62736A;
  margin: 6px 0 0;
}

/* Hero
   NOTE ON PLACEHOLDER vs. REAL VIDEO LAYOUT:
   While .hero-placeholder (quote text) is in use, .hero's height is driven
   by normal document flow (quote block + hero-inner block stacked), NOT by
   a fixed vh value. This is intentional: an element sized with `vh` can end
   up shorter than its real content on some phones (mobile browser chrome,
   smaller devices), which caused the quote text to overflow and overlap the
   "Outdoor wellness infrastructure" content below it. Stacking in normal
   flow means the section always grows to fit whatever text it contains, on
   any screen, with no overlap possible.
   WHEN SWAPPING IN THE REAL VIDEO/PHOTO: delete .hero-placeholder (per the
   README), and re-add a min-height (e.g. 70-90vh) to .hero, since a full-
   bleed video has no in-flow content of its own to set the section's height. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--ecru);
  background: var(--dark-forest);
}
.hero-media {
  position: relative;
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-placeholder {
  position: relative;
  background: var(--dark-forest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 32px;
  min-height: 220px;
}
.hero-placeholder-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.45;
  color: var(--ecru);
  max-width: 680px;
  margin: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18,45,34,0.88) 0%, rgba(18,45,34,0.45) 55%, rgba(18,45,34,0.18) 100%);
}
/* The scrim is meant to darken the bottom edge of the real hero VIDEO so the
   page content below reads well against footage. While .hero-placeholder
   (quote text) is in use, .hero-media is only as tall as the placeholder box
   itself, so the scrim ends up painting straight across the quote text and
   fading out its last couple of lines. Suppress it until the placeholder is
   swapped out for the real video (see README) — at that point .hero-media
   will be the full video height again and this rule simply won't match. */
.hero-placeholder ~ .hero-scrim {
  display: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: 24px 24px 56px;
}
.hero .eyebrow {
  color: var(--aqua);
}
h1.hero-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.2rem;
  max-width: 620px;
  color: var(--ecru);
  line-height: 1.6;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .hero-inner { padding: 16px 24px 40px; }
  .hero-placeholder { padding: 40px 20px 28px; min-height: 260px; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 500;
  text-decoration: none;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}
/* GT Walsheim's font metrics are unusually top-heavy (ascent is ~2x the
   font-size), which throws off normal flex/line-height vertical centering.
   This nudges the visible glyphs back to true center, measured empirically. */
.btn-label {
  display: block;
  transform: translateY(-0.44em);
}
.btn-primary {
  background: var(--poppy);
  color: var(--ecru);
}
.btn-primary:hover { opacity: 0.88; }
.btn-ghost {
  background: transparent;
  border-color: var(--dark-forest);
  color: var(--dark-forest);
}
.btn-ghost:hover { background: rgba(18,45,34,0.06); }
.btn-ghost-light {
  background: transparent;
  border-color: var(--ecru);
  color: var(--ecru);
}
.btn-ghost-light:hover { background: rgba(247,245,240,0.12); }

/* Sections */
.section {
  padding: 48px 0;
}

/* Stats */
.stats { padding: 56px 0 48px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(18,45,34,0.12);
  border-bottom: 1px solid rgba(18,45,34,0.12);
  padding: 28px 0;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--poppy);
}
.stat-label {
  font-size: 0.8rem;
  color: #4a5f55;
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}
.body-text {
  font-size: 1.05rem;
  max-width: 680px;
  color: #2f4a3f;
}

.pull-quote {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.4rem;
  color: var(--forest);
  border-left: 3px solid var(--poppy);
  padding-left: 20px;
  max-width: 640px;
  margin-bottom: 24px;
}

/* Who grid */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
}
.who-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 28px;
  border: 1px solid rgba(18,45,34,0.08);
}
.who-card p {
  color: #2f4a3f;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .who-grid { grid-template-columns: 1fr; }
}

/* Lease section */
.lease {
  background: var(--dark-forest);
  color: var(--ecru);
}
.lease h2, .lease .body-text { color: var(--ecru); }
.lease .body-text { color: #cfe0d8; }

.site-form {
  margin-top: 24px;
  max-width: 520px;
}
.form-row {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row label {
  font-size: 0.9rem;
  font-weight: 500;
}
.lease .form-row label { color: var(--ecru); }
.who .form-row label,
.updates .form-row label { color: var(--dark-forest); }

input[type="text"],
input[type="email"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid rgba(18,45,34,0.2);
  background: var(--ecru);
  color: var(--dark-forest);
}
.lease input, .lease select, .lease textarea {
  background: #ffffff;
}
textarea { resize: vertical; }

.hidden-field { display: none; }

/* Updates */
.updates {
  text-align: center;
}
.updates-inner {
  max-width: 560px;
}
.inline-form {
  display: flex;
  gap: 12px;
  margin: 24px auto 0;
  max-width: 460px;
  flex-wrap: wrap;
  justify-content: center;
}
.inline-form input[type="email"] {
  flex: 1;
  min-width: 220px;
}

/* Footer */
.site-footer {
  padding: 40px 0;
  border-top: 1px solid rgba(18,45,34,0.1);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-inner p {
  margin: 0;
  font-size: 0.85rem;
  color: #4a5f55;
}