:root{
  --canopy:#0F3D2E; --canopy-2:#0B2D22; --paddy:#EAF1E4; --grain:#D9A441; --grain-2:#C48F2E;
  --ink:#14211B; --muted:#5B6B62; --line:#CFDACB; --white:#fff; --danger:#B3261E;
  --head:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font:400 17px/1.6 var(--body);color:var(--ink);background:var(--white)}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--head);line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700}
h3{font-size:1.2rem;font-weight:500}
a{color:inherit}
.wrap{width:min(1180px,92%);margin-inline:auto}
.muted{color:var(--muted)} .small{font-size:.85rem}
:focus-visible{outline:3px solid var(--grain);outline-offset:2px}

.btn{display:inline-block;padding:.85em 1.5em;border-radius:6px;font:600 1rem var(--body);text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn-gold{background:var(--grain);color:var(--canopy-2)} .btn-gold:hover{background:var(--grain-2)}
.btn-green{background:var(--canopy);color:#fff;width:100%;margin-top:.5rem} .btn-green:hover{background:var(--canopy-2)}
.btn:disabled{opacity:.6;cursor:wait}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--canopy-2);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;font:700 1.25rem var(--head);text-decoration:none}
.mark{width:22px;height:22px;border-radius:50% 0 50% 0;background:var(--grain);display:inline-block}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a:not(.btn){text-decoration:none;opacity:.85} .nav a:not(.btn):hover{opacity:1}
.nav .btn{padding:.6em 1.1em}
.nav-toggle{display:none;background:none;border:1px solid #ffffff55;color:#fff;border-radius:6px;padding:.45em .9em;font:inherit}

/* hero: crop-row field pattern */
.hero{color:#fff;background:
  repeating-linear-gradient(100deg,transparent 0 46px,rgba(217,164,65,.07) 46px 48px),
  linear-gradient(180deg,var(--canopy) 0%,var(--canopy-2) 100%);
  padding:clamp(3rem,7vw,6rem) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.lead{font-size:1.2rem;max-width:34em;color:#DCE8DF}
.hero-points{list-style:none;padding:0;margin:1.5rem 0 2rem}
.hero-points li{padding:.45rem 0 .45rem 1.6rem;position:relative}
.hero-points li::before{content:"";position:absolute;left:0;top:.95rem;width:.7rem;height:.7rem;border-radius:50% 0 50% 0;background:var(--grain)}

/* form card */
.apply-card{background:var(--white);color:var(--ink);border-radius:10px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 20px 50px rgba(0,0,0,.25);border-top:6px solid var(--grain)}
.apply-card h2{font-size:1.6rem;margin-bottom:.2rem}
.field{margin-bottom:.9rem;position:relative}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.25rem}
input,select,textarea{width:100%;font:inherit;padding:.65em .8em;border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--canopy);outline:none;box-shadow:0 0 0 3px rgba(15,61,46,.15)}
.invalid{border-color:var(--danger)}
.err{display:block;color:var(--danger);font-size:.82rem;min-height:0}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.9rem;margin:.4rem 0 0}
.check input{width:auto;margin-top:.3rem}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-msg{color:var(--danger);font-size:.9rem;margin:.6rem 0 0}
#thanks{text-align:left;padding:1rem 0}
#thanks h2{color:var(--canopy)}
#thanks h2::before{content:"";display:block;width:48px;height:48px;border-radius:50%;background:var(--canopy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A441' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/26px no-repeat;margin-bottom:1rem}

/* sections */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-tint{background:var(--paddy)}
.split{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(2rem,5vw,5rem)}
.prose p{max-width:62ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 .5rem;padding-top:1.5rem;border-top:2px solid var(--canopy)}
.facts dt{font-size:.9rem;color:var(--muted)}
.facts dd{margin:0;font:700 2.2rem var(--head);color:var(--canopy)}

.why{list-style:none;margin:0;padding:0}
.why li{padding:1.3rem 0;border-top:1.5px solid var(--canopy)}
.why li:last-child{border-bottom:1.5px solid var(--canopy)}
.why h3{margin-bottom:.2rem} .why p{margin:0;color:var(--muted);max-width:56ch}

.head-row{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.5rem}
.arrows{display:flex;gap:.5rem}
.arrows button{background:#fff;border:1.5px solid var(--canopy);color:var(--canopy);border-radius:6px;padding:.45em 1em;font:600 .95rem var(--body);cursor:pointer}
.arrows button:hover{background:var(--canopy);color:#fff}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.8rem;scrollbar-width:thin}
.track figure{margin:0;flex:0 0 min(420px,86%);scroll-snap-align:start;background:var(--paddy);border-left:5px solid var(--grain);padding:1.6rem 1.6rem 1.4rem;border-radius:0 8px 8px 0}
.track blockquote{margin:0 0 1rem;font:500 1.25rem/1.4 var(--head)}
.track figcaption{color:var(--muted);font-size:.92rem}

.faq details{border-top:1.5px solid var(--canopy);padding:1rem 0}
.faq details:last-child{border-bottom:1.5px solid var(--canopy)}
.faq summary{cursor:pointer;font:500 1.15rem var(--head);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--canopy)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:.7rem 0 0;color:var(--muted);max-width:60ch}

/* footer */
.site-footer{background:var(--canopy-2);color:#CFDCD3;padding:3.5rem 0 1.5rem}
.site-footer .brand{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:2.5rem}
.foot-grid h4{color:#fff;font-size:1rem;margin-bottom:.8rem}
.foot-grid a{display:block;text-decoration:none;padding:.15rem 0} .foot-grid a:hover{color:var(--grain)}
.foot-grid p{margin:.2rem 0}
.legal{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid #ffffff22;font-size:.85rem}

@media (max-width:900px){
  .hero-grid,.split,.foot-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--canopy-2);flex-direction:column;align-items:flex-start;padding:1.2rem 4%;gap:1rem}
  .nav.open{display:flex}
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* =========================================
   PREMIUM HERO SECTION
========================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: 85px 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(217,164,65,.15), transparent 35%),
    linear-gradient(135deg, #0F3D2E 0%, #0B2D22 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 65px;
}

.hero-tag,
.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--grain);
  margin-bottom: 20px;
}

.hero-copy h1 {
  color: #fff;
  max-width: 620px;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1.08;
  margin-bottom: 24px;
}

.hero-copy .lead {
  color: #dce8df;
  font-size: 17px;
  line-height: 1.8;
}

.hero-points {
  margin: 28px 0 32px;
}

.hero-points li {
  color: #fff;
  padding: 9px 0 9px 30px;
}

.hero-copy .btn {
  padding: 15px 27px;
}


/* =========================================
   HERO IMAGE SLIDER
========================================= */

.hero-slider {
  width: 100%;
  min-width: 0;
  position: relative;
}

.slider-track {
  position: relative;
  height: 490px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 25px 65px rgba(0,0,0,.3);
  background: #244a35;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 5s ease;
}

.slide.active img {
  transform: scale(1.06);
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(0,0,0,.75) 100%
  );
}

.slide-caption {
  position: absolute;
  z-index: 2;
  bottom: 35px;
  left: 35px;
  right: 35px;
  color: #fff;
}

.slide-caption span {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--grain);
  margin-bottom: 12px;
}

.slide-caption h3 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  max-width: 420px;
  margin: 0;
  font-weight: 700;
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.slider-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  font-size: 20px;
  transition: .3s;
}

.slider-arrow:hover {
  background: var(--grain);
  color: var(--canopy-2);
  border-color: var(--grain);
}

.slider-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: .3s;
}

.slider-dot.active {
  width: 28px;
  background: var(--grain);
}


/* =========================================
   APPLICATION SECTION
========================================= */

.apply-section {
  padding: 90px 0;
  background: #F5F7F1;
}

.apply-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 75px;
  align-items: center;
}

.apply-info h2 {
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.15;
  color: var(--canopy);
  margin-bottom: 22px;
}

.apply-info > p {
  color: var(--muted);
  line-height: 1.8;
  max-width: 470px;
}

.apply-benefits {
  margin-top: 35px;
}

.apply-benefit {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid #dce5d8;
}

.benefit-icon {
  min-width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e4eddf;
  color: var(--canopy);
  font-weight: 700;
  font-family: var(--head);
}

.apply-benefit h3 {
  color: var(--canopy);
  font-weight: 700;
  margin-bottom: 5px;
}

.apply-benefit p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}


/* FORM CARD */

.apply-card {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  border: 1px solid #e6ebe3;
  border-top: 5px solid var(--grain);
  box-shadow: 0 18px 55px rgba(15,61,46,.09);
  width: 100%;
}

.form-heading {
  margin-bottom: 27px;
}

.form-heading > span {
  color: var(--grain-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.form-heading h2 {
  font-size: 29px;
  color: var(--canopy);
  margin: 8px 0;
}

.form-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.apply-card .field {
  margin-bottom: 17px;
}

.apply-card label {
  color: #263c30;
  font-size: 13px;
  margin-bottom: 7px;
}

.apply-card input:not([type="checkbox"]),
.apply-card select,
.apply-card textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #dce5d8;
  border-radius: 7px;
  background: #fbfcfa;
  font: 15px var(--body);
  transition: .25s;
}

.apply-card input:focus,
.apply-card select:focus,
.apply-card textarea:focus {
  border-color: var(--canopy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,61,46,.09);
  background: #fff;
}

.apply-card textarea {
  resize: vertical;
}

.apply-card .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.apply-card .check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0;
}

.apply-card .check input {
  width: auto;
  margin-top: 4px;
}

.apply-card .btn-green {
  padding: 15px;
  border-radius: 7px;
  font-size: 16px;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.apply-card .btn-green span {
  font-size: 20px;
}

.form-security {
  text-align: center;
  color: #829087;
  font-size: 12px;
  margin: 15px 0 0;
}

.apply-card #thanks {
  padding: 30px 0;
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1024px) {

  .hero-grid {
    gap: 35px;
  }

  .slider-track {
    height: 420px;
  }

  .apply-layout {
    gap: 40px;
  }

  .apply-card {
    padding: 30px;
  }

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {

  html {
    scroll-padding-top: 65px;
  }

  body {
    font-size: 15px;
  }

  .wrap {
    width: 90%;
  }

  .hero {
    padding: 55px 0 45px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .hero-copy h1 {
    font-size: clamp(36px, 10vw, 46px);
    line-height: 1.12;
    margin-bottom: 18px;
  }

  .hero-copy .lead {
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-points {
    margin: 20px 0 25px;
  }

  .hero-points li {
    font-size: 14px;
  }

  .hero-copy .btn {
    width: 100%;
    text-align: center;
  }

  .slider-track {
    height: 330px;
    border-radius: 12px;
  }

  .slide-caption {
    bottom: 25px;
    left: 22px;
    right: 22px;
  }

  .slide-caption h3 {
    font-size: 25px;
  }

  .slide-caption span {
    font-size: 10px;
  }

  .slider-controls {
    margin-top: 15px;
  }

  .slider-arrow {
    width: 36px;
    height: 36px;
  }

  .apply-section {
    padding: 55px 0;
  }

  .apply-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .apply-info h2 {
    font-size: 34px;
  }

  .apply-benefits {
    margin-top: 20px;
  }

  .apply-benefit {
    padding: 14px 0;
  }

  .apply-card {
    padding: 23px 18px;
    border-radius: 12px;
  }

  .form-heading h2 {
    font-size: 25px;
  }

  .apply-card .row2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .apply-card input:not([type="checkbox"]),
  .apply-card select,
  .apply-card textarea {
    font-size: 16px;
    padding: 13px;
  }

  .apply-card .btn-green {
    width: 100%;
  }

  /* Existing navigation */
  .bar {
    min-height: 65px;
  }

  .nav {
    top: 65px;
  }

  .brand {
    font-size: 19px;
  }

  .sec {
    padding: 50px 0;
  }

  .facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .head-row {
    align-items: center;
  }

  .track figure {
    flex-basis: 88%;
  }

}


/* SMALL MOBILE */

@media (max-width: 380px) {

  .hero-copy h1 {
    font-size: 34px;
  }

  .slider-track {
    height: 280px;
  }

  .apply-card {
    padding: 20px 14px;
  }

}