/* ==========================================================================
   Contact page (contact.html) — components used only on this page
   ========================================================================== */

/* ---- stats strip ---- */
.contact-stats-strip{background:var(--grad-dark);padding:36px 0;}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;}
.cstats li{text-align:center;color:#fff;}
.cstats strong{display:block;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700;font-family:var(--font-mono);}
.cstats span{display:block;font-size:.8rem;color:rgba(255,255,255,.62);margin-top:4px;}
@media(max-width:800px){.cstats{grid-template-columns:1fr 1fr;row-gap:28px;}}

/* ---- layout ---- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
.contact-form-panel{padding:44px;box-shadow:var(--shadow-md);border-radius:var(--radius-lg);}
.contact-side{display:flex;flex-direction:column;gap:16px;}

/* ---- form ---- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-field{margin-bottom:20px;}
.form-field label{display:block;font-size:.85rem;font-weight:600;color:var(--dark);margin-bottom:8px;}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:.92rem;outline:none;transition:border-color .3s ease, box-shadow .3s ease;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--red-light);box-shadow:0 0 0 4px rgba(240,90,75,.12);}
.form-fineprint{margin:16px 0 0;font-size:.78rem;color:var(--ink-light);}
.form-fineprint a{color:var(--red-dark);font-weight:600;}
[data-demo-only]{transition:opacity .3s ease, max-height .3s ease;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}

/* ---- toggle ---- */
.form-toggle{display:inline-flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:999px;margin-top:16px;}
.form-toggle-btn{padding:10px 20px;border-radius:999px;font-size:.86rem;font-weight:600;color:var(--ink-light);transition:background .3s ease,color .3s ease;}
.form-toggle-btn.active{background:var(--dark);color:#fff;}

/* ---- info cards ---- */
.contact-info-card{padding:22px 24px;display:flex;gap:16px;align-items:center;}
.contact-info-card .ic{width:44px;height:44px;border-radius:12px;background:var(--grad-red);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.contact-info-card .ic svg{width:20px;height:20px;}
.contact-info-card h5{margin-bottom:4px;font-size:.95rem;}
.contact-info-card p{margin:0;font-size:.88rem;}
.contact-info-card a{color:inherit;}
.contact-info-card a:hover{color:var(--red-dark);}

/* ---- why-us card ---- */
.contact-why{padding:26px 24px;background:var(--dark);color:#fff;}
.contact-why h5{color:#fff;margin-bottom:14px;font-size:1rem;}
.contact-why .check-list li{color:rgba(255,255,255,.82);}
.contact-why .check-list li::before{color:#fff;}

@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px;}.contact-form-panel{padding:28px;}}

/* Form submission states */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none;}
.form-field .is-invalid{border-color:var(--red)!important;box-shadow:0 0 0 4px rgba(228,58,41,.12)!important;}
.form-status{margin:14px 0 0;font-size:.88rem;font-weight:600;min-height:0;}
.form-status:empty{display:none;}
.form-status.is-success{color:#1E7A3E;}
.form-status.is-error{color:var(--red-dark);}
.contact-form button[disabled]{opacity:.7;cursor:wait;}