/* contact.css - styles scoped to #page-contact */

#page-contact { --green:#235c45; --green-dark:#173f30; --green-soft:#edf5f0; --yellow:#f4c928; --cream:#fbfcfa; --text:#1d2923; --muted:#68746e; --border:#e4ebe6; --shadow:0 14px 40px rgba(27,65,48,.08); font-family:"DM Sans",sans-serif; color:var(--text); line-height:1.6; background:#fff }
#page-contact img { display:block; width:100% }
#page-contact .hero { background:var(--green-soft); padding:82px 0 78px; position:relative; overflow:hidden }
#page-contact .eyebrow { display:inline-flex; gap:9px; align-items:center; color:var(--green); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase }
#page-contact .btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; border-radius:999px; font-weight:700; transition:.2s }
#page-contact .btn-primary:hover { background:var(--green-dark); transform:translateY(-2px) }
#page-contact .feature { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center }
#page-contact .cta { padding:0 0 80px }
#page-contact .hero-inner { max-width:820px; position:relative; z-index:1 }
#page-contact .check { display:flex; gap:11px; align-items:flex-start }
#page-contact .eyebrow:before { content:""; width:26px; height:2px; background:var(--yellow) }
#page-contact h1 { font-size:clamp(42px,6vw,70px); letter-spacing:-.04em }
#page-contact h2 { font-size:clamp(31px,4vw,47px); letter-spacing:-.035em }
#page-contact h3 { font-size:21px }
#page-contact .hero:after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(244,201,40,.13); right:-100px; top:-130px }
#page-contact .section-head { max-width:760px; margin-bottom:38px }
#page-contact .section-head p { color:var(--muted); margin-top:12px }
#page-contact .cta-box { background:var(--green); border-radius:28px; padding:58px 60px; display:flex; justify-content:space-between; align-items:center; gap:30px; color:#fff }
#page-contact .cta-box p { color:#dce8e1; margin-top:9px }
#page-contact .cta-box .btn { background:var(--yellow); color:#213127 }
#page-contact h1, #page-contact h2, #page-contact h3, #page-contact h4 { font-family:"Manrope",sans-serif; line-height:1.12 }
#page-contact .section { padding:82px 0 }
#page-contact .section.alt { background:var(--cream) }
#page-contact .check-list { display:grid; gap:13px; margin-top:22px }
#page-contact .check span { color:#4f5b55; font-size:15px }
#page-contact .hero p { max-width:680px; margin:20px 0 28px; color:var(--muted); font-size:18px }
#page-contact .section-head.center { text-align:center; margin-left:auto; margin-right:auto }
#page-contact .contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:45px; align-items:start }
#page-contact .contact-card { background:var(--cream); border-radius:24px; padding:30px }
#page-contact .contact-row { display:flex; gap:14px; padding:17px 0; border-bottom:1px solid var(--border) }
#page-contact .contact-row:last-child { border-bottom:0 }
#page-contact .contact-icon { width:42px; height:42px; flex:0 0 42px; border-radius:13px; background:var(--green-soft); color:var(--green); display:grid; place-items:center; font-weight:800 }
#page-contact .contact-row strong { display:block; font-family:Manrope }
#page-contact .contact-row span, #page-contact .contact-row a { font-size:14px; color:var(--muted) }
#page-contact form { border:1px solid var(--border); border-radius:24px; padding:30px; box-shadow:var(--shadow) }
#page-contact .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
#page-contact .field { display:grid; gap:7px }
#page-contact .field.full { grid-column:1/-1 }
#page-contact .field label { font-size:13px; font-weight:700 }
#page-contact .field input, #page-contact .field select, #page-contact .field textarea { width:100%; border:1px solid var(--border); border-radius:12px; padding:13px 14px; font:inherit; color:var(--text); outline:none; background:#fff }
#page-contact .field input:focus, #page-contact .field select:focus, #page-contact .field textarea:focus { border-color:var(--green) }
#page-contact .field textarea { min-height:125px; resize:vertical }
#page-contact .form-note { font-size:12px; color:var(--muted); margin-top:12px }
#page-contact .contact-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px }

@media (max-width:900px) {
  #page-contact .feature { grid-template-columns:1fr; gap:35px }
  #page-contact .contact-grid { grid-template-columns:1fr }
}

@media (max-width:620px) {
  #page-contact .container { width:calc(100% - 28px) }
  #page-contact .hero { padding:58px 0 55px }
  #page-contact .cta { padding-bottom:55px }
  #page-contact .cta-box .btn { margin-top:23px }
  #page-contact .section { padding:60px 0 }
  #page-contact .form-grid { grid-template-columns:1fr }
  #page-contact .field.full { grid-column:auto }
  #page-contact .contact-card, #page-contact form { padding:23px }
}

/* Replace the inline styles used in the HTML version. */
#page-contact .card-title { margin-top:12px }
#page-contact .form-title { margin:12px 0 23px }
#page-contact .form-submit { margin-top:20px }
#page-contact .section-head-btn { margin-top:20px }