/* ================= CONTACT PAGE (scoped .ct-* only; shared header/footer,
   form/dropzone/badge primitives come from styles.css untouched) ============ */
:root{
/* Same CTA-orange token as the About Us CTA banner (about.css) — reused
   here, not redefined as a different orange. */
--color-cta:#F97316;
}
/* #B42318 below matches the site's established error red
   (pill-st.bad / btn-ghost.danger in styles.css). */
.ct-wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.ct-grid{display:grid;gap:14px}

/* ---- S1: page header ---- */
.ct-head{background:var(--color-bg-light);padding-bottom:34px}
.ct-head-inner{padding-top:22px;text-align:left}
.ct-head-inner h1{font-size:30px;font-weight:800;letter-spacing:-.4px;color:var(--color-primary)}
.ct-head-inner h1 span{color:var(--color-accent)}
.ct-head-inner p{font-size:14px;color:var(--muted);line-height:1.65;margin-top:10px;max-width:640px}
.ct-head-inner p strong{color:var(--color-text)}

/* ---- S2: contact method cards ---- */
.ct-methods-sec{background:var(--color-bg);padding:30px 0 8px}
.ct-grid.methods{grid-template-columns:repeat(4,minmax(0,1fr))}
.ct-method{background:var(--color-bg);border:1px solid var(--line);border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;gap:0;transition:transform .15s,box-shadow .15s}
.ct-method:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,24,40,.1)}
.ct-method-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.ct-tile{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px}
.ct-tile.t-green{background:rgba(34,179,88,.14)}
.ct-tile.t-blue{background:rgba(37,99,235,.12)}
.ct-tile.t-peach{background:rgba(249,115,22,.14)}
.ct-tile.t-navy{background:rgba(11,31,58,.08)}
.ct-method h3{font-size:15px;color:var(--color-text);margin-bottom:6px}
.ct-method .ct-desc{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.ct-detail{font-size:14px;font-weight:800;color:var(--color-text);margin-bottom:14px;overflow-wrap:break-word}
.ct-btn{display:block;text-align:center;font-size:13.5px;font-weight:700;border-radius:9px;padding:12px 14px;margin-bottom:8px}
a.ct-btn:hover{filter:brightness(.95)}
.ct-btn.wa{background:var(--green);color:var(--color-bg)}
.ct-btn.call{background:var(--color-accent);color:var(--color-bg)}
.ct-btn[disabled]{opacity:.55;cursor:not-allowed}
.ct-cap{font-size:11.5px;color:var(--muted);text-align:center}

/* ---- S3: direct message form ---- */
.ct-form-sec{background:var(--color-bg);padding:26px 0 10px}
.ct-form-card{max-width:860px;margin:0 auto;background:var(--color-bg);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 10px 34px rgba(11,31,58,.07)}
.ct-form-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.ct-form-ico{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--color-bg-light);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.ct-form-titles{flex:1;min-width:0}
.ct-form-titles h2{font-size:19px;color:var(--color-text)}
.ct-form-titles p{font-size:13px;color:var(--muted);margin-top:3px}
.ct-ssl{flex-shrink:0;font-size:11px;font-weight:700;color:var(--green);background:rgba(34,179,88,.12);border-radius:14px;padding:4px 11px;white-space:nowrap}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-fld{display:block;margin-bottom:14px;min-width:0}
.ct-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:700;color:var(--color-text);margin-bottom:7px}
.ct-req{font-style:normal;font-size:11px;font-weight:700;color:#B42318}
.ct-opt{font-weight:500;color:var(--muted);font-size:12px}
.ct-hint{font-weight:500;color:var(--muted);font-size:11.5px;text-align:right}
.ct-inwrap{position:relative;display:flex;align-items:stretch}
.ct-inwrap .pm-input{padding-right:38px}
.ct-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;font-weight:700;pointer-events:none}
.ct-cc{display:flex;align-items:center;background:var(--color-bg-light);border:1px solid #dfe4ee;border-right:0;border-radius:9px 0 0 9px;padding:0 12px;font-size:13.5px;font-weight:700;color:var(--color-text);flex-shrink:0}
.ct-inwrap .ct-phone{border-radius:0 9px 9px 0;padding-right:12px}
.ct-area{min-height:110px;resize:vertical}
.ct-err{display:block;font-size:12px;color:#B42318;margin-top:5px}
.ct-form-err{background:#FEF3F2;border:1px solid #F1B0AA;color:#B42318;border-radius:9px;padding:10px 13px;font-size:13px;margin:4px 0 0}
.ct-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.ct-safe{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--green);font-weight:600}
.ct-submit{background:var(--color-cta);color:var(--color-bg);border:0;border-radius:10px;padding:14px 26px;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit;min-height:48px}
.ct-submit:hover{filter:brightness(1.07)}
.ct-submit:disabled{opacity:.7;cursor:wait}
/* success panel */
.ct-success{text-align:center;padding:26px 10px}
.ct-success-ico{width:54px;height:54px;border-radius:50%;background:rgba(34,179,88,.14);color:var(--green);font-size:26px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.ct-success h3{font-size:18px;color:var(--color-text);margin-bottom:6px}
.ct-success p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:480px;margin:0 auto 16px}
/* dropzone file row follows the order-widget .pm-files pattern */
#ctFileList li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- S4: trust cards ---- */
.ct-trust-sec{background:var(--color-bg-light);padding:38px 0;margin-top:30px}
.ct-grid.trust{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- responsive ---- */
@media(max-width:1024px){
.ct-grid.methods{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-grid.trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.ct-wrap{padding:0 12px}
.ct-head-inner h1{font-size:23px}
.ct-grid.methods,.ct-grid.trust{grid-template-columns:1fr}
.ct-row{grid-template-columns:1fr}
.ct-form-card{padding:20px 16px}
.ct-foot{flex-direction:column;align-items:stretch}
.ct-submit{width:100%}
.pm-drop{padding:22px 12px}
}