/* ============================================================
   ARVESTA — CONTACT PAGE
   Inherits arvesta.css. Simple, high-contrast, conversion-focused.
   ============================================================ */

.cmain{background:var(--ivory);position:relative;overflow:hidden}
.cmain__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(44px,6vw,96px);align-items:start}

/* ---------- LEFT ---------- */
.cstate{
  font-family:var(--serif);font-weight:400;color:var(--navy);
  font-size:clamp(1.95rem,3.6vw,3.05rem);line-height:1.12;letter-spacing:-.018em;
}
.cstate span{display:block;overflow:hidden}
.cstate span i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.cstate.is-in span:nth-child(1) i{transform:translateY(0);transition-delay:.05s}
.cstate.is-in span:nth-child(2) i{transform:translateY(0);transition-delay:.16s}
.cstate.is-in span:nth-child(3) i{transform:translateY(0);transition-delay:.27s}
.cstate em{font-style:italic;color:var(--emerald)}

.cgeo{
  margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--line);
}
.cgeo b{
  display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--emerald);font-weight:600;margin-bottom:12px;
}
.cgeo__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cgeo__row span{font-family:var(--serif);font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--navy)}
.cgeo__row i{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}

.cdetails{margin-top:clamp(30px,3.4vw,44px);display:grid;gap:2px}
.cdet{
  display:flex;align-items:center;gap:16px;padding:20px 22px;
  background:var(--white);border:1px solid var(--line);
  transition:border-color .4s var(--ease),transform .4s var(--ease-out);
}
.cdet:hover{border-color:var(--emerald);transform:translateX(4px)}
.cdet svg{width:19px;height:19px;stroke:var(--emerald);stroke-width:1.6;fill:none;flex:none}
.cdet b{display:block;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--body);font-weight:600;margin-bottom:5px}
.cdet span{font-family:var(--serif);font-size:1.06rem;color:var(--navy);word-break:break-word}
.cdet .arw{margin-left:auto;width:15px;height:15px;stroke:var(--body);opacity:.4;transition:.4s var(--ease-out)}
.cdet:hover .arw{opacity:1;stroke:var(--emerald);transform:translateX(4px)}

.cnote{
  margin-top:26px;padding-left:18px;border-left:2px solid var(--gold);
  font-size:.9rem;color:var(--body);max-width:38ch;
}

/* ---------- FORM ---------- */
.cform{
  background:var(--navy);padding:clamp(30px,4vw,52px);position:relative;overflow:hidden;
}
.cform::before{
  content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,143,117,.28),transparent 66%);
  top:-240px;right:-200px;pointer-events:none;
}
.cform__inner{position:relative;z-index:1}
.cform h2{color:#fff;font-size:clamp(1.4rem,2.1vw,1.78rem);margin-bottom:8px}
.cform > .cform__inner > p{color:rgba(255,255,255,.6);font-size:.93rem;margin-bottom:30px}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fld{margin-bottom:20px;position:relative}
.fld label{
  display:block;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;margin-bottom:9px;
}
.fld label .req{color:var(--gold);margin-left:3px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:14px 16px;border-radius:2px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-family:inherit;font-size:.96rem;font-weight:300;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.32)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:0;border-color:var(--teal);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(25,184,165,.14);
}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B8A5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.fld select option{background:var(--navy);color:#fff}
.fld textarea{resize:vertical;min-height:118px;line-height:1.6}
.fld .err{display:none;margin-top:7px;font-size:.78rem;color:#F2A5A5}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea{border-color:#D96C6C}
.fld.is-bad .err{display:block}

.cform .btn{width:100%;justify-content:center;margin-top:6px}
.cform__foot{
  margin-top:20px;font-size:.78rem;color:rgba(255,255,255,.42);
  text-align:center;line-height:1.55;
}
.cform__ok{
  display:none;text-align:center;padding:44px 20px;
}
.cform__ok svg{width:44px;height:44px;stroke:var(--teal);stroke-width:1.4;fill:none;margin:0 auto 20px}
.cform__ok h3{color:#fff;font-size:1.5rem;margin-bottom:10px}
.cform__ok p{color:rgba(255,255,255,.62);font-size:.95rem;max-width:34ch;margin-inline:auto}
.cform.is-sent .cform__inner form,
.cform.is-sent .cform__inner > h2,
.cform.is-sent .cform__inner > p{display:none}
.cform.is-sent .cform__ok{display:block}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .cmain__grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:620px){
  .frow{grid-template-columns:1fr}
  .cgeo{gap:20px}
}