/* ===================================================
   Codensec — Contact page
   =================================================== */
.contact-hero { padding: 104px 0 72px; border-bottom: 1px solid var(--line-soft); }
.contact-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:end; }
.page-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); font:var(--step--1) var(--font-mono); margin-bottom:18px; }
.page-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--text); }
.contact-hero h1 { font-size:clamp(2.5rem,6vw,4.5rem); max-width:760px; }
.contact-hero-copy { color:var(--text-dim); font-size:var(--step-1); max-width:540px; }
.contact-main { padding:88px 0 104px; }
.contact-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:72px; }
.contact-form-wrap { background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.contact-form-head { margin-bottom:28px; }
.contact-form-head h2 { font-size:var(--step-2); margin-bottom:8px; }
.contact-form-head p { color:var(--text-dim); font-size:var(--step--1); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field-full { grid-column:1 / -1; }
.field label { font-size:.8125rem; color:var(--text-dim); }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-inset); color:var(--text); font:inherit; padding:12px 14px; transition:border-color .15s ease, background .15s ease; }
.field textarea { min-height:160px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color:var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--text-faint); background:var(--bg); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color:var(--danger); }
.field-error { min-height:18px; color:var(--danger); font-size:.75rem; }
.form-actions { display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap; }
.form-note { color:var(--text-faint); font-size:.75rem; max-width:430px; }
.form-status { display:none; margin-top:20px; padding:13px 14px; border:1px solid var(--line); background:var(--bg-inset); color:var(--text-dim); font-size:.8125rem; }
.form-status.is-visible { display:block; }
.form-status.is-success { border-color:var(--success); color:var(--success); }
.form-status.is-error { border-color:var(--danger); color:var(--danger); }
.contact-aside { display:flex; flex-direction:column; gap:20px; }
.contact-card { padding:26px; border:1px solid var(--line); background:var(--bg-raised); border-radius:var(--radius); }
.contact-card h3 { font-size:var(--step-1); margin-bottom:8px; }
.contact-card p { color:var(--text-dim); font-size:var(--step--1); }
.contact-card .meta { display:block; margin-top:16px; color:var(--text); font:var(--step--1) var(--font-mono); }
.contact-list { margin-top:28px; border-top:1px solid var(--line-soft); }
.contact-list-item { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.contact-list-item span:first-child { color:var(--text-faint); font: .75rem var(--font-mono); }
.contact-list-item span:last-child { text-align:right; color:var(--text-dim); font-size:var(--step--1); }
.hp-field { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.contact-cta { padding-top:0; }
@media (max-width:900px) { .contact-hero-grid,.contact-grid { grid-template-columns:1fr; gap:40px; } .contact-hero { padding-top:80px; } }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; } .field-full { grid-column:auto; } .contact-form-wrap { padding:22px; } .contact-main { padding:64px 0 80px; } .contact-hero { padding:72px 0 56px; } }


/* Shared responsive grid and overflow guardrails */
@media (max-width: 700px) {
  .grid-3,.grid-4,.cards-grid,.services-grid,.tools-grid,.research-grid,.tech-grid,.team-grid,.footer-grid { grid-template-columns: 1fr !important; }
  .hero-grid,.split-grid,.feature-panel,.content-grid,.two-col,.two-column { grid-template-columns: 1fr !important; }
  .card { min-width: 0; }
  table { display: block; width: 100%; overflow-x: auto; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .grid-3,.grid-4,.cards-grid,.services-grid,.tools-grid,.research-grid,.tech-grid,.team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}