/* =========================================================
   ECOTECH CONTACT — unified color philosophy + form focus
   Keeps the existing structure/functionality intact.
   ========================================================= */

.contact-page{
  --contact-ink:#17252B;
  --contact-copy:#43535A;
  --contact-muted:#66757A;
  --contact-paper:#F4F3EF;
  --contact-card:#FFFFFF;
  --contact-navy:#17252B;
  --contact-blue:#315E78;
  --contact-teal:#3E7D82;
  --contact-rust:#A6533F;
  --contact-olive:#65733B;
  --contact-amber:#A47721;
  --contact-plum:#625C70;
  background:var(--contact-paper);
  color:var(--contact-copy);
}

/* Hero: use the same restrained ECOTECH palette instead of the
   unrelated cyan/purple contact gradient. */
.contact-hero-v2{
  min-height:330px;
  padding:76px 24px 64px;
  background:
    radial-gradient(70% 90% at 82% 15%,rgba(62,125,130,.13),transparent 64%),
    radial-gradient(55% 80% at 12% 90%,rgba(166,83,63,.08),transparent 68%),
    #F4F3EF;
}
.contact-hero-v2__art:after{
  background:linear-gradient(180deg,rgba(244,243,239,.36),rgba(244,243,239,.88));
}
.contact-hero-v2 svg path{
  stroke:rgba(49,94,120,.16);
}
.contact-hero-v2 svg path:nth-child(2){stroke:rgba(166,83,63,.13)}
.contact-hero-v2 svg path:nth-child(3){stroke:rgba(101,115,59,.13)}
.contact-hero-v2 svg circle{fill:rgba(49,94,120,.28)}
.contact-hero-v2 svg .signal-pulse{
  fill:#F4F3EF;
  filter:drop-shadow(0 0 7px rgba(62,125,130,.65));
}
.contact-eyebrow-v2{
  border-color:rgba(62,125,130,.22);
  background:#E5EFEC;
  color:#315E78;
}
.contact-eyebrow-v2 span{
  background:#3E7D82;
  box-shadow:0 0 0 4px rgba(62,125,130,.12);
}
.contact-hero-v2 h1{
  color:#17252B;
  max-width:820px;
}
.contact-hero-v2__inner>p{
  color:#4F5F65;
  font-size:15.5px;
}
.contact-route-v2{color:#65733B}
.contact-route-v2 span:nth-of-type(2){color:#3E7D82}
.contact-route-v2 i{
  background:linear-gradient(90deg,rgba(49,94,120,.12),rgba(62,125,130,.52));
}
.contact-route-v2 i:last-child{
  background:linear-gradient(90deg,rgba(166,83,63,.48),rgba(166,83,63,.10));
}

/* The form is the visual anchor of the page. */
.contact-main-v2{
  width:min(1160px,calc(100% - 36px));
  margin:-18px auto 0;
  padding-bottom:70px;
}
.contact-panel-v2{
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  border:1px solid #D5DDD9;
  border-radius:24px;
  background:#fff;
  box-shadow:0 26px 70px rgba(23,37,43,.14);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Context side: a small dark area, consistent with ECOTECH's
   philosophy of using dark colors structurally rather than everywhere. */
.contact-context-v2{
  padding:36px 34px 32px;
  background:
    radial-gradient(90% 70% at 10% 0%,rgba(62,125,130,.22),transparent 68%),
    linear-gradient(145deg,#17252B,#243943);
  color:#fff;
}
.context-kicker{
  color:#9CC7C5;
}
.contact-context-v2 h2{
  color:#fff;
  font-size:clamp(25px,3vw,35px);
}
.contact-context-v2>p{
  color:rgba(255,255,255,.76);
  font-size:12.5px;
}
.context-flow-v2 div{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.13);
}
.context-flow-v2 b{
  background:#F4F3EF;
  color:#315E78;
  box-shadow:none;
}
.context-flow-v2 div:nth-child(2) b{color:#3E7D82}
.context-flow-v2 div:nth-child(3) b{color:#A6533F}
.context-flow-v2 span{color:rgba(255,255,255,.9)}
.contact-response-v2{
  border-top-color:rgba(255,255,255,.16);
}
.contact-response-v2>span{
  background:#E3EEEA;
  color:#315E78;
}
.contact-response-v2 strong{color:#fff}
.contact-response-v2 small{color:rgba(255,255,255,.67)}

/* Form side: unmistakably separate from the rest of the page. */
.contact-form-v2{
  padding:34px 38px 32px;
  background:#FFFFFF;
  border-left:1px solid #DDE4E1;
  position:relative;
}
.contact-form-v2:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,#3E7D82 0%,#315E78 48%,#A6533F 100%);
}
.form-heading-v2{
  padding-bottom:17px;
  margin-bottom:21px;
  border-bottom:1px solid #E0E5E2;
}
.form-kicker{
  color:#3E7D82;
}
.form-heading-v2 h2{
  color:#17252B!important;
  font-size:28px;
}
.form-count-v2{
  color:#65733B;
}

/* Labels and controls are deliberately darker than the previous version. */
.field-v2 label{
  color:#263B43;
  font-size:10.5px;
}
.field-v2 .input{
  border-color:#C9D4D1;
  background:#F7F8F6;
  color:#17252B;
}
.field-v2 .input:hover{
  border-color:#9DB2B0;
}
.field-v2 .input:focus{
  border-color:#3E7D82;
  background:#fff;
  box-shadow:0 0 0 3px rgba(62,125,130,.13);
}
.field-v2 .input::placeholder{
  color:#879399;
}
.field-hint-v2{
  color:#66757A;
}

/* Interest chips: more color variety, but the text remains high contrast. */
.interest-grid-v2 span{
  border-color:#CDD7D4;
  background:#F7F8F6;
  color:#34484F;
}
.interest-grid-v2 label:hover span{
  border-color:#7FA9A7;
  color:#315E78;
  background:#F0F6F4;
}
.interest-grid-v2 input:checked+span{
  background:#E3EFEC;
  border-color:#3E7D82;
  color:#174F55;
  box-shadow:0 4px 12px rgba(62,125,130,.10);
}
.interest-choice span i{
  color:#315E78!important;
  background:#E4EDF0!important;
}
.interest-choice:nth-child(2) span i{color:#3E7D82!important;background:#E3EFEC!important}
.interest-choice:nth-child(3) span i{color:#625C70!important;background:#EEEAF2!important}
.interest-choice:nth-child(4) span i{color:#315E78!important;background:#E4EDF0!important}
.interest-choice:nth-child(5) span i{color:#625C70!important;background:#EEEAF2!important}
.interest-choice:nth-child(6) span i{color:#A47721!important;background:#F4ECD9!important}
.interest-choice:nth-child(7) span i{color:#A6533F!important;background:#F3E5E0!important}
.interest-choice:nth-child(8) span i{color:#625C70!important;background:#EEEAF2!important}
.interest-choice--unsure span i{color:#65733B!important;background:#E9EEDC!important}
.interest-choice input:checked+span i{
  background:rgba(255,255,255,.72)!important;
}
.selection-summary{
  color:#315E78;
}
.selection-summary strong{color:#52636A}

/* Primary CTA: unmistakable and high contrast. */
.contact-submit-v2{
  min-width:184px;
  min-height:50px;
  background:#17252B;
  color:#fff;
  box-shadow:0 10px 24px rgba(23,37,43,.18);
}
.contact-submit-v2:hover{
  background:#315E78;
  box-shadow:0 14px 28px rgba(49,94,120,.22);
}
.contact-submit-v2:focus-visible{
  outline:3px solid #3E7D82;
  outline-offset:4px;
}
.form-assurance-v2{color:#66757A}
.form-assurance-v2 span{color:#65733B}

/* The small explanatory band above the form should support the form,
   not compete with it. */
.contact-page .eco-visual{
  padding:48px 0;
  background:#EAEDE7;
}
.contact-page .eco-visual__media{
  background:#E3EAE7;
  border-color:#CBD6D2;
  box-shadow:none;
}
.contact-page .eco-visual__copy h2{color:#17252B}
.contact-page .eco-visual__copy p,
.contact-page .eco-visual__copy li{color:#43535A}
.contact-page .eco-visual__copy .kicker{color:#3E7D82}

/* Lower content stays quiet so the form remains the focal point. */
.contact-next-v2,.contact-faq-v2{
  color:#43535A;
}
.timeline-v2 article,.faq-grid-v2 article{
  border-color:#D7DFDC;
  background:#F8F8F5;
}
.timeline-v2 article>b{
  background:#E4EDF0;
  color:#315E78;
}
.timeline-v2 article:nth-child(2)>b{
  background:#E9EEDC;color:#65733B;
}
.timeline-v2 article:nth-child(3)>b{
  background:#F3E5E0;color:#A6533F;
}
.timeline-v2 h3,.faq-grid-v2 h3{color:#17252B}
.timeline-v2 p,.faq-grid-v2 p{color:#66757A}
.faq-grid-v2 article{border-top:2px solid #3E7D82}
.faq-grid-v2 article:nth-child(2){border-top-color:#A47721}
.faq-grid-v2 article:nth-child(3){border-top-color:#625C70}

/* Errors remain strongly visible and accessible. */
.contact-form-v2 .field.invalid .input{
  border-color:#B8454D;
  box-shadow:0 0 0 2px rgba(184,69,77,.08);
}
.contact-form-v2 .error-msg{
  color:#A9343D;
  font-size:10px;
}

/* Mobile: preserve the strong two-part form hierarchy. */
@media(max-width:900px){
  .contact-panel-v2{
    grid-template-columns:minmax(0,1fr) !important;
    width:100%;
    max-width:100%;
  }
  .contact-form-v2{
    border-left:0;
    border-top:1px solid #DDE4E1;
    min-width:0;
  }
  .contact-form-v2:before{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:4px;
    background:linear-gradient(90deg,#3E7D82 0%,#315E78 48%,#A6533F 100%);
  }
  .form-row-v2{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .interest-grid-v2{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .interest-grid-v2 label{
    max-width:100%;
  }
  .interest-grid-v2 span{
    min-height:44px;
    padding:10px 14px;
    font-size:13px;
  }
  .form-submit-row-v2{
    flex-direction:column;
    align-items:stretch;
  }
  .contact-submit-v2{
    width:100%;
  }
}
@media(max-width:620px){
  .contact-hero-v2{
    min-height:300px;
    padding:70px 18px 56px;
  }
  .contact-hero-v2 h1{
    font-size:38px;
    letter-spacing:-.045em;
  }
  .contact-main-v2{
    width:calc(100% - 18px);
    max-width:100%;
    margin:-16px auto 0;
    padding-left:0;
    padding-right:0;
  }
  .contact-panel-v2{
    border-radius:20px;
    grid-template-columns:minmax(0,1fr) !important;
  }
  .contact-context-v2{
    padding:25px 20px 22px;
  }
  .contact-form-v2{
    padding:27px 20px 24px;
  }
  .form-heading-v2 h2{
    font-size:24px;
  }
  .field-v2 label{
    font-size:10.5px;
  }
  .field-v2 .input{
    min-height:46px;
    font-size:16px; /* prevent iOS zoom on focus */
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .field-v2 .textarea{
    min-height:120px;
    font-size:16px;
  }
  .contact-submit-v2{
    width:100%;
    min-height:52px;
  }
  .timeline-v2,
  .faq-grid-v2{
    grid-template-columns:1fr !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .contact-hero-v2 svg .signal-pulse{animation:none}
}


/* ===== CONTACT MATTE BOLD TREATMENT ===== */

/* Visual band */
body.contact-page .eco-visual__copy .kicker{ color: var(--m01, #1F8A8D) !important; }
body.contact-page .eco-visual__copy h2{ color: var(--bold-neutral, #2A3A36) !important; }
body.contact-page .eco-visual__copy ul li::marker{ color: var(--m01, #1F8A8D); }
body.contact-page .eco-visual__copy li{ color: var(--bold-neutral-soft, #4A5550); }

/* Dark context panel */
body.contact-page .context-kicker{ color: var(--m01d, #6EC4C6) !important; }
body.contact-page .contact-context-v2 h2{ color: #F6F5F1 !important; }
body.contact-page .context-flow-v2 div:nth-child(1) b{ color: var(--m01d, #6EC4C6) !important; }
body.contact-page .context-flow-v2 div:nth-child(2) b{ color: var(--m04d, #D4B050) !important; }
body.contact-page .context-flow-v2 div:nth-child(3) b{ color: var(--m03d, #E09070) !important; }
body.contact-page .context-flow-v2 span{ color: rgba(246,245,241,.9) !important; }
body.contact-page .contact-response-v2 > span{ color: var(--m01d, #6EC4C6) !important; }
body.contact-page .contact-response-v2 strong{ color: #F6F5F1 !important; }

/* Form panel */
body.contact-page .form-kicker{ color: var(--m01, #1F8A8D) !important; }
body.contact-page .form-heading-v2 h2{ color: var(--bold-neutral, #2A3A36) !important; }
body.contact-page .form-count-v2{ color: var(--m08, #7A8A3A) !important; }
body.contact-page .field-v2 label{ color: var(--m10, #6A7A8A) !important; font-weight: 600; }

/* Interest chips — distinct matte per option */
body.contact-page .interest-choice:nth-child(1) span i{ color: var(--m01, #1F8A8D) !important; background: rgba(31,138,141,.12) !important; }
body.contact-page .interest-choice:nth-child(2) span i{ color: var(--m02, #3D7A6A) !important; background: rgba(61,122,106,.12) !important; }
body.contact-page .interest-choice:nth-child(3) span i{ color: var(--m05, #5A6E9A) !important; background: rgba(90,110,154,.12) !important; }
body.contact-page .interest-choice:nth-child(4) span i{ color: var(--m12, #5A8A8A) !important; background: rgba(90,138,138,.12) !important; }
body.contact-page .interest-choice:nth-child(5) span i{ color: var(--m06, #8A5A72) !important; background: rgba(138,90,114,.12) !important; }
body.contact-page .interest-choice:nth-child(6) span i{ color: var(--m04, #A07A28) !important; background: rgba(160,122,40,.12) !important; }
body.contact-page .interest-choice:nth-child(7) span i{ color: var(--m03, #B45A3C) !important; background: rgba(180,90,60,.12) !important; }
body.contact-page .interest-choice:nth-child(8) span i{ color: var(--m10, #6A7A8A) !important; background: rgba(106,122,138,.12) !important; }
body.contact-page .interest-choice--unsure span i{ color: var(--m08, #7A8A3A) !important; background: rgba(122,138,58,.12) !important; }

/* What happens next */
body.contact-page .section-kicker-v2{ color: var(--m01, #1F8A8D) !important; }
body.contact-page .timeline-v2 article:nth-child(1) > b,
body.contact-page .timeline-v2 article:nth-child(1) h3{ color: var(--m01, #1F8A8D) !important; }
body.contact-page .timeline-v2 article:nth-child(2) > b,
body.contact-page .timeline-v2 article:nth-child(2) h3{ color: var(--m05, #5A6E9A) !important; }
body.contact-page .timeline-v2 article:nth-child(3) > b,
body.contact-page .timeline-v2 article:nth-child(3) h3{ color: var(--m03, #B45A3C) !important; }

/* Before you write FAQ */
body.contact-page .contact-faq-v2 .section-kicker-v2{ color: var(--m04, #A07A28) !important; }
body.contact-page .faq-grid-v2 article:nth-child(1) > span,
body.contact-page .faq-grid-v2 article:nth-child(1) h3{ color: var(--m01, #1F8A8D) !important; }
body.contact-page .faq-grid-v2 article:nth-child(2) > span,
body.contact-page .faq-grid-v2 article:nth-child(2) h3{ color: var(--m05, #5A6E9A) !important; }
body.contact-page .faq-grid-v2 article:nth-child(3) > span,
body.contact-page .faq-grid-v2 article:nth-child(3) h3{ color: var(--m02, #3D7A6A) !important; }

/* Route strip if present */
body.contact-page .contact-route-v2{ color: var(--m08, #7A8A3A) !important; }
body.contact-page .contact-route-v2 span:nth-of-type(2){ color: var(--m01, #1F8A8D) !important; }