:root {
  --dark:#070b09;
  --green:#9ad800;
  --forest:#253c15;
  --ink:#152018;
  --muted:#536158;
  --cream:#f5f7f0;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
a {
  color:inherit;
}
.wrap {
  width:min(1190px,91%);
  margin:auto;
}
.top {
  background:#ffffff;
  color:#111111;
  border-bottom:3px solid #86b900;
}
.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:73px;
  gap:22px;
}
.brand {
  font-size:22px;
  font-weight:950;
  letter-spacing:-1px;
  text-decoration:none;
  line-height:.93;
}
.brand span {
  color:#fff;
}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:1.8px;
  margin-top:7px;
}
.navlinks {
  display:flex;
  align-items:center;
  gap:clamp(12px,2.3vw,38px);
}
.navlinks a {
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
.btn {
  display:inline-block;
  background:var(--green);
  color:#0c1208;
  border:0;
  border-radius:3px;
  padding:14px 22px;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}
.btn:hover {
  filter:brightness(.92);
}
.navlinks .btn {
  background:#9ad800;
  color:#101710;
}
.btn.outline {
  background:transparent;
  border:1px solid #a1c55c;
  color:white;
}
.hero {
  background:#030705;
  color:white;
  overflow:hidden;
}
.hero-grid {
  display:grid;
  grid-template-columns:44% 56%;
  min-height:690px;
  align-items:stretch;
}
.hero-copy {
  padding:65px 26px 42px 0;
  position:relative;
  z-index:1;
}
.hero-logo {
  font-weight:950;
  line-height:.87;
  font-size:clamp(26px,3vw,41px);
  letter-spacing:-1px;
  margin-bottom:42px;
}
.hero-logo .green {
  color:#9bd300;
}
.hero h1 {
  font-size:clamp(42px,5.3vw,79px);
  font-weight:950;
  letter-spacing:-3.2px;
  line-height:.96;
  margin:0 0 27px;
  text-transform:uppercase;
}
.hero h1 em {
  font-style:normal;
  color:#8dbb08;
}
.hero p {
  font-size:16px;
  color:#e0e7db;
  max-width:475px;
}
.eyebrow {
  color:var(--green);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
}
.hero-art {
  position:relative;
  min-height:620px;
  background:#08100e url('images/hero-mascot.webp') center center / cover no-repeat;
}
.hero-art:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#030705 0%,transparent 20%,transparent 80%,#02060525);
}
.hero-art .art-tag {
  position:absolute;
  bottom:27px;
  right:20px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#c9ed8b;
  background:#020704b8;
  padding:10px 13px;
}
.actions {
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  margin-top:29px;
}
.hero-proof {
  border-top:2px solid #719e05;
  margin:35px 0 0;
  padding:22px 0 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 18px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  color:#d9e4d2;
  list-style:none;
}
.hero-proof li::before,
.trust li::before {
  content:"✓ ";
}
.trust {
  background:#121c11;
  color:#d7e5d0;
  padding:19px 0;
  font-size:13px;
  font-weight:700;
}
.trust .wrap {
  display:flex;
  gap:18px 32px;
  justify-content:center;
  flex-wrap:wrap;
  list-style:none;
  margin:0 auto;
  padding:0;
  text-align:center;
}
.section {
  padding:75px 0;
}
.kicker {
  font-size:12px;
  color:#588400;
  letter-spacing:2px;
  font-weight:900;
  text-transform:uppercase;
}
.section h2 {
  font-size:clamp(30px,3.5vw,45px);
  line-height:1.1;
  letter-spacing:-1.5px;
  margin:11px 0 17px;
}
.lead {
  color:var(--muted);
  max-width:730px;
  font-size:17px;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:34px;
}
.card {
  background:#f4f6ef;
  border-top:5px solid #88b900;
  padding:27px;
  min-height:190px;
}
.icon {
  font-size:28px;
}
.card h3 {
  margin:12px 0 8px;
  font-size:19px;
}
.card p {
  margin:0;
  color:#526257;
  font-size:14px;
}
.split {
  background:#eaf0e2;
}
.splitgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
}
.panel {
  background:#0b150e;
  color:white;
  padding:36px;
  border-left:7px solid var(--green);
}
.panel h3 {
  font-size:27px;
  margin-top:0;
}
.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:6px;
}
.panel-head h3 {
  margin:0;
  flex:1;
}
.steps {
  padding-left:22px;
}
.steps li {
  padding:9px 0;
}
.note {
  font-size:13px;
  color:#bfd2b6;
  margin-top:22px;
}
.quote {
  background:#0a100b;
  color:white;
}
.quotegrid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:55px;
}
.quote p {
  color:#d0e0cc;
}
.quote a:not(.btn) {
  color:#b9e784;
}
.form {
  background:white;
  color:var(--ink);
  padding:30px;
  border-top:7px solid var(--green);
}
.form h3 {
  margin-top:0;
  font-size:24px;
}
.form label {
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:13px;
}
.form input,.form select,.form textarea {
  width:100%;
  font:inherit;
  border:1px solid #cbd5cc;
  border-radius:3px;
  padding:11px;
  margin-top:6px;
  background:#fff;
}
.form textarea {
  min-height:96px;
  resize:vertical;
}
.form .btn {
  width:100%;
}
.form small {
  display:block;
  color:#617065;
  margin-top:12px;
}
.foot {
  background:#030705;
  color:#b8cdbb;
  padding:27px 0;
  font-size:13px;
}
.foot .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.foot a {
  color:#d6e5d7;
}
.mascot-small {
  display:block;
  width:128px;
  max-width:38%;
  height:auto;
  flex:none;
  margin:0;
}
@media(max-width:850px) {
  .navlinks a:not(.btn) {
    display:none;
  }
  .hero-grid {
    grid-template-columns:1fr;
  }
  .hero-copy {
    padding:46px 0;
  }
  .hero-art {
    min-height:460px;
    background-position:center 39%;
  }
  .hero-art:before {
    background:linear-gradient(0deg,#03070565,transparent 35%);
  }
  .hero h1 {
    font-size:clamp(42px,10vw,78px);
  }
  .cards {
    grid-template-columns:repeat(2,1fr);
  }
  .splitgrid,.quotegrid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .section {
    padding:55px 0;
  }
}
@media(max-width:530px) {
  .cards {
    grid-template-columns:1fr;
  }
  .hero-art {
    min-height:360px;
  }
  .hero h1 {
    letter-spacing:-2px;
  }
  .hero-logo {
    margin-bottom:26px;
  }
  .hero-proof {
    font-size:10px;
  }
  .navlinks .btn {
    padding:11px;
  }
  .form {
    padding:20px;
  }
}
.official-brand {
  display:flex;
  align-items:center;
  background:transparent;
  padding:0;
  border-radius:0;
  flex-shrink:0;
}
.official-brand img {
  display:block;
  width:clamp(145px,17vw,235px);
  height:auto;
}
.hero-copy {
  padding-top:78px;
}
.hero-copy .eyebrow {
  margin-bottom:26px;
}
@media(max-width:650px) {
  .official-brand img {
    width:155px;
  }
  .official-brand {
    padding:0;
  }
}
.official-brand img {
  display:block;
  max-width:230px;
  height:auto;
  max-height:72px;
  object-fit:contain;
}
.top .navlinks a:not(.btn) {
  color:#111111;
}
@media(max-width:720px) {
  .official-brand img {
    max-width:160px;
    max-height:56px;
  }
}
