:root {
  --fe-light: #d9d9d9;
  --fe-gray: #6a6e70;
  --fe-green: #017c3d;
  --fe-bright: #88e835;
  --fe-charcoal: #262626;
  --fe-cream: #f7f7f2;
  --fe-white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--fe-cream);
  color: var(--fe-charcoal);
  font-family: "Avenir Next", Avenir, Montserrat, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 8rem) 1.5rem clamp(3.5rem, 8vw, 7rem);
  background:
    radial-gradient(circle at 14% 12%, rgb(136 232 53 / 14%), transparent 30rem),
    radial-gradient(circle at 88% 90%, rgb(1 124 61 / 10%), transparent 32rem),
    linear-gradient(145deg, #fbfbf7 0%, #f1f2ec 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.45rem;
  background: linear-gradient(90deg, var(--fe-bright), var(--fe-green));
}

.hero-inner {
  position: relative;
  width: min(100%, 64rem);
  text-align: center;
}

.wordmark {
  width: min(100%, 42rem);
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, var(--fe-bright) 0%, var(--fe-green) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wordmark-top,
.wordmark-bottom,
.wordmark-rule {
  display: block;
}

.wordmark-top {
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: clamp(2.25rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.wordmark-rule {
  height: 0.28rem;
  margin: 0.62rem 0 0.72rem;
  background: linear-gradient(90deg, var(--fe-bright), var(--fe-green));
}

.wordmark-bottom {
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: clamp(3rem, 13vw, 9.5rem);
  font-weight: 900;
  letter-spacing: 0.015em;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--fe-green);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  padding: 0 0.45em;
  color: var(--fe-gray);
}

h1 {
  max-width: 50rem;
  margin: 0 auto 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.intro {
  max-width: 48rem;
  margin: 0 auto;
  color: #424748;
  font-size: clamp(1.04rem, 2vw, 1.22rem);
  line-height: 1.75;
}

.principle {
  margin: clamp(2rem, 5vw, 3.25rem) auto 0;
  color: var(--fe-gray);
  font-size: clamp(0.92rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-footer {
  padding: 2rem 1.5rem 2.5rem;
  background: var(--fe-charcoal);
  color: var(--fe-light);
}

.footer-inner {
  width: min(100%, 56rem);
  margin: 0 auto;
  text-align: center;
}

.footer-inner p {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-inner a {
  display: inline-block;
}

.footer-inner img {
  display: block;
  width: min(18rem, 70vw);
  height: auto;
}

@media (max-width: 560px) {
  .hero {
    padding-inline: 1.1rem;
  }

  .wordmark {
    margin-bottom: 2rem;
  }

  .wordmark-rule {
    height: 0.2rem;
  }

  .intro {
    line-height: 1.65;
  }
}