/* Contacts page specific styles — lightweight and responsive */
:root{--panel-bg:linear-gradient(180deg,#ffffff,#fbfefe)}
/* Use global hero variables to keep look consistent across pages */
.hero.page-contact{padding:56px 0;min-height:320px;--hero-overlay:linear-gradient(180deg, rgba(var(--brand-rgb),0.48), rgba(var(--brand-rgb),0.30));--hero-watermark-opacity:0;color:var(--hero-foreground,#fff);text-shadow:0 6px 18px rgba(2,6,23,0.7)}
/* watermark is controlled with --hero-watermark-opacity */
.contact-top .contact-grid{grid-template-columns:1fr 1fr;gap:28px} 
.form-wrapper{margin-top:12px;display:grid;grid-template-columns:1fr;gap:12px}
#contact-form{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 10px 40px rgba(2,6,23,0.06)}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-weight:700;margin-bottom:8px}
.form-row input, .form-row textarea, .form-row select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(2,6,23,0.06);background:#fff}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:3px solid rgba(var(--brand-rgb),0.12);outline-offset:3px}
#msg-count{font-size:13px;margin-top:6px;color:var(--muted)}
.form-messages{margin-top:8px;font-weight:700}
.form-messages.error{color:#c53030}
.form-messages.success{color:var(--accent)}
@media (max-width:960px){.contact-top .contact-grid{grid-template-columns:1fr}}
/* small helpers for valid/invalid states */
.input-valid{border-color:rgba(var(--brand-rgb),0.6);box-shadow:0 6px 20px rgba(var(--brand-rgb),0.06)}
.input-invalid{border-color:rgba(var(--brand-danger-rgb),0.8);box-shadow:0 6px 20px rgba(var(--brand-danger-rgb),0.06)}
/* Modal basic */
#modal-root .modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.48);padding:20px}
#modal-root .modal-panel{max-width:520px;width:100%;background:var(--card);padding:18px;border-radius:10px;box-shadow:0 24px 80px rgba(2,6,23,0.18)}
#modal-root .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
/* Small screen polish */
@media (max-width:640px){
  .page-contact .hero{padding:32px 0}
  .contact-top .contact-grid{grid-template-columns:1fr}
  .form-row.two-cols{display:block}
}