.contact-intro{width:100%;max-width:1280px;margin:0 auto;padding:clamp(24px,3.5vw,40px) clamp(20px,5vw,48px) 0}
.contact-intro-inner{max-width:680px;animation:riseIn .6s ease both}
.contact-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:0}
.contact-eyebrow-line{width:26px;height:2px;background:linear-gradient(90deg,#5b6bff,#a855f7)}
.contact-eyebrow-text{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b6b74}
.contact-headline{margin:0;font-size:clamp(32px,4.6vw,54px);line-height:1.06;font-weight:600;letter-spacing:-.025em}
.contact-sub{margin:24px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--muted);max-width:520px;text-wrap:pretty}

.contact-body{width:100%;max-width:1280px;margin:0 auto;padding:clamp(12px,2vw,20px) clamp(20px,5vw,48px) clamp(64px,9vw,104px)}
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:stretch}

/* ---- left: reach us ---- */
.contact-aside{display:flex;flex-direction:column;gap:18px}
.contact-card{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:clamp(24px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(20,20,40,.03);flex:1;justify-content:center}
.contact-card-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.contact-email{font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.contact-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted-2)}
.contact-card--dark{background:radial-gradient(130% 130% at 12% 6%,rgba(255,255,255,.06),transparent 44%),linear-gradient(155deg,#242029 0%,#131318 100%);border-color:#201d27;color:#f3f3f7;gap:16px}
.contact-card--dark .contact-card-label{color:#8b8cf0}
.contact-card--dark p{color:#c4c4cf;font-size:15.5px}
.contact-book{--grad-angle:96deg;display:inline-flex;align-items:center;align-self:flex-start;height:48px;padding:0 24px;border-radius:9px;background:linear-gradient(var(--grad-angle),#4d5cff,#8b5cf6 65%,#a855f7);color:#fff;font-size:15px;font-weight:600;box-shadow:0 10px 30px -12px rgba(109,76,232,.6);transition:--grad-angle .4s ease}
.contact-book:hover{--grad-angle:276deg;color:#fff}
/* ---- right: form ---- */
.contact-form-card{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:clamp(26px,3vw,40px);box-shadow:0 18px 50px -30px rgba(20,20,40,.28)}
.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:14px;font-weight:600;color:var(--ink-3)}
.contact-input,.contact-textarea{padding:0 16px;border-radius:10px;border:1px solid #e0ddd4;background:var(--bg);font-family:var(--font);font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.contact-input{height:50px}
.contact-textarea{padding:14px 16px;line-height:1.55;resize:vertical;min-height:150px}
.contact-input::placeholder,.contact-textarea::placeholder{color:#a9a9b2}
.contact-input:focus,.contact-textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.contact-submit-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.contact-submit{--grad-angle:96deg;display:inline-flex;align-items:center;height:54px;padding:0 30px;border-radius:10px;border:none;background:linear-gradient(var(--grad-angle),#5b6bff,#8b5cf6 65%,#a855f7);color:#fff;font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 14px 40px -14px rgba(139,92,246,.7);transition:--grad-angle .4s ease}
.contact-submit:hover{--grad-angle:276deg;color:#fff}
.contact-submit-note{font-size:13.5px;color:var(--mono-ink)}
.contact-submit-note a{color:var(--violet-deep);font-weight:600}

.contact-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.field-error{font-size:13px;color:#c0392b}

.contact-success{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:clamp(20px,4vw,48px) 0;animation:riseIn .5s ease both}
.contact-success-mark{width:54px;height:54px;border-radius:12px;background:var(--grad-badge);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:600}
.contact-success h2{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.015em}
.contact-success p{margin:0;font-size:16px;line-height:1.6;color:var(--muted-2);max-width:420px}
.contact-success a{margin-top:6px;font-size:15px;font-weight:600;color:var(--violet-deep)}

.contact-form-loc-below{display:none}

@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .contact-form-loc-right{display:none}
  .contact-form-loc-below{display:inline}
}
@media (max-width:520px){
  .contact-form-row{grid-template-columns:1fr}
}