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

:root {
  --ink: #172d29;
  --forest: #153e35;
  --lime: #d7ed9b;
  --cream: #f6f7f0;
  --muted: #62746e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.7 "DM Sans", sans-serif;
}

h1,
h2,
h3 {
  font-family: Manrope, sans-serif;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(2.6rem,5.8vw,5rem);
  margin: 0.35em 0;
}

h2 {
  font-size: clamp(1.8rem,3vw,2.7rem);
}

h3 {
  font-size: 1.2rem;
}

a {
  color: inherit;
}

header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e6eae1;
}

.nav {
  max-width: 1200px;
  margin: auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  text-decoration: none;
  font: 800 1.35rem Manrope;
  letter-spacing: -0.05em;
}

.logo span {
  color: #719447;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navlinks a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.87rem;
}

.navlinks a.active {
  color: #578044;
}

.btn,
.navlinks .navcta {
  display: inline-block;
  border: 0;
  border-radius: 100px;
  background: var(--lime);
  padding: 13px 23px;
  color: var(--forest);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.navlinks .navcta {
  background: var(--forest);
  color: #fff;
}

.container {
  max-width: 1160px;
  margin: auto;
  padding: 0 28px;
}

.hero {
  background: var(--forest);
  color: white;
  overflow: hidden;
}

.hero-inner {
  max-width: 1160px;
  margin: auto;
  padding: 100px 28px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 60px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.78rem;
  font-weight: 800;
  color: #a5d9a8;
}

.hero p {
  font-size: 1.16rem;
  color: #d6e5dd;
  max-width: 610px;
}

.hero-art {
  min-height: 360px;
  background: radial-gradient(circle at 65% 40%,#93b97a 0 12%,transparent 13%),radial-gradient(circle at 45% 52%,transparent 0 22%,#b9d99a 22.5% 24%,transparent 24.5%),radial-gradient(circle at 75% 52%,transparent 0 22%,#b9d99a 22.5% 24%,transparent 24.5%),linear-gradient(135deg,#305f4c,#193c34);
  border-radius: 26px;
  position: relative;
}

.hero-art:after {
  content: "RIDE BETTER.";
  position: absolute;
  bottom: 25px;
  left: 25px;
  font: 800 2rem Manrope;
  color: #d7ed9b;
}

.section {
  padding: 85px 0;
}

.section.alt {
  background: #eaf0e5;
}

.lead {
  font-size: 1.18rem;
  color: #405b51;
  max-width: 850px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.tile {
  background: white;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 6px 25px #10291d0a;
}

.tile .num {
  color: #6a9258;
  font-weight: 800;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.portrait {
  width: 100%;
  max-height: 610px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 22px;
}

.pagehead {
  background: #e5eddf;
  padding: 75px 0;
}

.pagehead h1 {
  font-size: clamp(2.5rem,5vw,4rem);
}

.narrow {
  max-width: 820px;
}

.faq details {
  background: white;
  margin: 13px 0;
  padding: 22px 26px;
  border-radius: 12px;
}

.faq summary {
  font-weight: 800;
  cursor: pointer;
}

.faq details p {
  margin-bottom: 0;
}

.form {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 5px;
  font-weight: 700;
  font-size: 0.91rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #cbd6cd;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}

.field textarea {
  min-height: 110px;
}

.note {
  padding: 18px 22px;
  border-left: 4px solid #789d6a;
  background: #e8f0e4;
  border-radius: 8px;
}

.download {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background: white;
  padding: 22px;
  border-radius: 14px;
  margin: 14px 0;
}

.small {
  font-size: 0.87rem;
  color: var(--muted);
}

footer {
  background: #102e28;
  color: #dcebe1;
  padding: 45px 0;
}

footer .foot {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
}

footer a {
  color: #dcebe1;
}

#menu-toggle-control {
  display: none;
}

.menu-label {
  display: none;
}

@media (max-width:800px) {
  .hero-inner,
  .split {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    padding: 65px 25px;
  }

  .hero-art {
    min-height: 220px;
  }

  .grid3 {
    grid-template-columns: 1fr;
  }

  .menu-label {
    display: block;
    cursor: pointer;
    font-weight: 800;
  }

  #menu-toggle-control:checked~.navlinks {
    display: flex;
  }

  .navlinks {
    display: none;
    position: absolute;
    top: 69px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: 20px;
    align-items: stretch;
    box-shadow: 0 12px 15px #0001;
  }

  .section {
    padding: 55px 0;
  }

  .download {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hero-photo,
.services-photo {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #305f4c;
}

.hero-photo {
  height: 390px;
}

.services-photo {
  height: 450px;
  margin-bottom: 50px;
}

.hero-photo img,
.services-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-credit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: #102e28d9;
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 8px;
}

.photo-credit a {
  color: inherit;
}

@media (max-width:800px) {
  .hero-photo {
    height: 260px;
  }

  .services-photo {
    height: 240px;
    margin-bottom: 32px;
  }
}

.page-eyebrow {
  color: #668a57;
}

.contact-eyebrow {
  color: #597c52;
}

.page-eyebrow {
  color: #668a57;
}

.contact-eyebrow {
  color: #597c52;
}

.faq-comparison {
  margin-top: 35px;
}