/* =========================================================
   CONTACT PAGE — SAME AS REFERENCE
   DM Sans + green theme
   Header/footer remain controlled by style.css
========================================================= */

:root{
  --contact-green:#0b5d31;
  --contact-green-2:#2f8737;
  --contact-green-light:#edf7e9;
  --contact-black:#111914;
  --contact-text:#202820;
  --contact-muted:#59645c;
  --contact-line:#dfe9dd;
  --contact-card:#ffffff;
}

.contact-page{
  width:100%;
  background:#fff;
  color:var(--contact-text);
  font-family:"DM Sans",sans-serif;
  font-size:16px;
  padding:0 22px 52px;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after{
  box-sizing:border-box;
}


/* HERO ==================================================== */

.contact-hero{
  width:min(1480px,100%);
  min-height:750px;
  margin:0 auto;
  display:grid;
  grid-template-columns:38% 31% 31%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 22%,rgba(206,238,197,.28),transparent 34%),
    linear-gradient(90deg,#fbfdf9 0%,#fff 46%,#f2f8ef 100%);
}

.contact-hero__copy{
  padding:100px 34px 38px 46px;
  position:relative;
  z-index:3;
}

.contact-kicker{
  color:var(--contact-green);
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

.contact-hero h1{
  margin:27px 0 0;
  color:#131815;
  font-size:53px;
  line-height:1.02;
  letter-spacing:-1.8px;
  font-weight:700;
}

.contact-hero h1 span{
  display:block;
  color:var(--contact-green);
}

.contact-hero__copy>p{
  max-width:510px;
  margin:25px 0 0;
  color:#333f37;
  font-size:16px;
  line-height:1.75;
}

.contact-hero__features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:35px;
  width:100%;
}

.hero-feature{
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-right:1px solid #d9e5d7;
  text-align:center;
}

.hero-feature:last-child{
  border-right:0;
}

.hero-feature span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid #cfe4cb;
  border-radius:50%;
  background:#fff;
  color:var(--contact-green);
  box-shadow:0 8px 20px rgba(28,78,37,.06);
  font-size:22px;
}

.hero-feature strong{
  color:#1c2b21;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}


/* HERO PHOTO */

.contact-hero__photo{
  position:relative;
  min-height:750px;
  overflow:hidden;
}

.contact-hero__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-help-badge{
  position:absolute;
  left:50%;
  top:56%;
  transform:translate(-50%,-50%);
  min-width:130px;
  padding:15px 18px;
  background:#075329;
  color:#fff;
  border-radius:6px;
  box-shadow:0 10px 26px rgba(4,58,26,.2);
  text-align:center;
}

.hero-help-badge span,
.hero-help-badge strong{
  display:block;
  font-size:15px;
  line-height:1.35;
}


/* FORM */

.contact-form-card{
  width:calc(100% - 46px);
  align-self:start;
  margin:100px 23px 0;
  padding:30px 30px 27px;
  border:1px solid rgba(24,93,45,.28);
  border-radius:19px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 45px rgba(23,68,33,.10);
  position:relative;
  z-index:5;
}

.contact-form-card h2{
  margin:0;
  color:#0b532d;
  font-size:31px;
  font-weight:700;
}

.form-intro{
  margin:8px 0 18px;
  color:#2f3933;
  font-size:14px;
  line-height:1.65;
}

#contactPageForm{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.contact-field{
  height:49px;
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1px solid #dce5da;
  border-radius:8px;
  background:#fff;
}

.contact-field:focus-within{
  border-color:#8ebc8e;
  box-shadow:0 0 0 3px rgba(47,135,55,.06);
}

.contact-field i{
  color:#3c8845;
  font-size:14px;
}

.contact-field input,
.contact-field textarea{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#334038;
  font-family:"DM Sans",sans-serif;
  font-size:13px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:#9fa9a2;
}

.contact-field--message{
  height:auto;
  min-height:112px;
  align-items:start;
  padding-top:14px;
}

.contact-field--message textarea{
  min-height:84px;
  resize:none;
}

.contact-submit{
  height:53px;
  margin-top:1px;
  border:0;
  border-radius:8px;
  background:#07572e;
  color:#fff;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}

.contact-submit i{
  margin-left:9px;
}

.contact-form-message{
  min-height:18px;
  font-size:12px;
  color:#2e7e38;
  text-align:center;
}


/* COMMON SECTIONS ======================================= */

.contact-section{
  width:min(1420px,calc(100% - 10px));
  margin:28px auto 0;
  border:1px solid #d9e5d7;
  border-radius:20px;
  background:#fff;
}

.contact-section-title{
  text-align:center;
  padding:23px 20px 20px;
}

.contact-section-title h2{
  margin:0;
  color:#114f2b;
  font-size:29px;
  font-weight:700;
}

.contact-section-title span{
  display:block;
  width:46px;
  height:2px;
  margin:10px auto 0;
  background:#2f8737;
}


/* HOW WE CAN HELP ======================================= */

.contact-help{
  padding:0 17px 18px;
}

.help-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
}

.help-card{
  min-height:474px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #dce7da;
  border-radius:17px;
  background:#fff;
  text-align:center;
}

.help-icon{
  width:66px;
  height:66px;
  margin:22px auto 0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0c6332;
  color:#fff;
  font-size:26px;
}

.help-card h3{
  min-height:46px;
  margin:18px 10px 0;
  color:#13582f;
  font-size:17px;
  line-height:1.3;
  font-weight:700;
}

.help-card p{
  min-height:140px;
  margin:14px 15px 0;
  color:#27332b;
  font-size:13px;
  line-height:1.7;
}

.help-card__image{
  margin-top:auto;
  height:165px;
}

.help-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* CONTACT INFO ========================================== */

.contact-info-section{
  padding:0 22px 18px;
  background:
    radial-gradient(circle at 10% 30%,rgba(215,239,208,.23),transparent 25%),
    linear-gradient(90deg,#fbfdf9,#fff);
}

.contact-section-title--green{
  padding-bottom:15px;
}

.contact-section-title--green h2{
  color:#1b6b38;
}

.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.contact-info-card{
  min-height:195px;
  padding:12px 20px 6px;
  border-right:1px solid #d9e4d6;
  text-align:center;
}

.contact-info-card:last-child{
  border-right:0;
}

.info-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto;
  border-radius:50%;
  background:#eef7ea;
  color:#0a6632;
  font-size:24px;
}

.contact-info-card h3{
  margin:12px 0 0;
  color:#14592e;
  font-size:17px;
  font-weight:700;
}

.contact-info-card p{
  margin:7px 0 0;
  color:#26332b;
  font-size:13px;
  line-height:1.55;
}


/* COMMITMENT ============================================ */

.contact-commitment{
  width:min(1420px,calc(100% - 10px));
  min-height:230px;
  margin:22px auto 0;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#07562d;
  color:#fff;
}

.commitment-bg{
  position:absolute;
  inset:0;
}

.commitment-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
}

.commitment-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#05582e 0%,rgba(5,88,46,.98) 48%,rgba(5,88,46,.72) 67%,rgba(5,88,46,.12) 100%);
}

.commitment-main{
  position:relative;
  z-index:3;
  min-height:165px;
  display:grid;
  grid-template-columns:100px 1fr;
  align-items:center;
  gap:18px;
  padding:22px 38px 10px;
}

.commitment-icon{
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.85);
  border-radius:50%;
  font-size:31px;
}

.commitment-copy h2{
  margin:0;
  font-size:27px;
  line-height:1.18;
  font-weight:700;
}

.commitment-copy h2 span{
  display:block;
  color:#c3e997;
}

.commitment-copy p{
  max-width:700px;
  margin:11px 0 0;
  color:#fff;
  font-size:14px;
  line-height:1.6;
}

.commitment-points{
  position:relative;
  z-index:4;
  width:68%;
  min-height:58px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);
}

.commitment-points>div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-right:1px solid rgba(255,255,255,.20);
  font-size:12px;
  font-weight:600;
}

.commitment-points>div:last-child{
  border-right:0;
}

.commitment-points i{
  font-size:19px;
}


/* CLOSING =============================================== */

.contact-closing{
  width:min(1100px,calc(100% - 40px));
  margin:16px auto 0;
  text-align:center;
}

.contact-closing p{
  margin:0;
  color:#37443b;
  font-size:14px;
  line-height:1.6;
}

.contact-closing strong{
  display:block;
  color:#1b7138;
}


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

@media(max-width:1200px){
  .contact-hero{
    grid-template-columns:42% 58%;
  }

  .contact-form-card{
    grid-column:1/-1;
    width:min(520px,calc(100% - 40px));
    margin:-125px 22px 30px auto;
  }

  .contact-hero__photo{
    min-height:680px;
  }

  .help-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:900px){
  .contact-page{
    padding:0 12px 45px;
  }

  .contact-hero{
    grid-template-columns:1fr;
  }

  .contact-hero__copy{
    padding:85px 25px 30px;
    text-align:center;
  }

  .contact-hero__copy>p{
    margin-left:auto;
    margin-right:auto;
  }

  .contact-hero__photo{
    min-height:520px;
  }

  .contact-form-card{
    grid-column:auto;
    width:calc(100% - 28px);
    margin:-55px auto 28px;
  }

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

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

  .contact-info-card:nth-child(2n){
    border-right:0;
  }

  .commitment-points{
    width:100%;
  }
}

@media(max-width:620px){
  .contact-page{
    padding:0 8px 38px;
  }

  .contact-hero h1{
    font-size:40px;
    letter-spacing:-1px;
  }

  .contact-hero__copy>p{
    font-size:15px;
  }

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

  .hero-feature:nth-child(2){
    border-right:0;
  }

  .hero-feature:nth-child(-n+2){
    border-bottom:1px solid #d9e5d7;
  }

  .contact-hero__photo{
    min-height:390px;
  }

  .contact-form-card{
    padding:22px 16px;
    margin-top:-25px;
  }

  .contact-form-card h2{
    font-size:26px;
  }

  .contact-section-title h2{
    font-size:23px;
  }

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

  .help-card p{
    min-height:auto;
  }

  .contact-info-grid{
    grid-template-columns:1fr;
  }

  .contact-info-card{
    border-right:0;
    border-bottom:1px solid #d9e4d6;
  }

  .contact-info-card:last-child{
    border-bottom:0;
  }

  .commitment-main{
    grid-template-columns:1fr;
    text-align:center;
  }

  .commitment-icon{
    margin:auto;
  }

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

  .commitment-points>div:nth-child(2){
    border-right:0;
  }

  .commitment-points>div:nth-child(-n+2){
    border-bottom:1px solid rgba(255,255,255,.18);
  }
}