body[data-page="contact"]{
  --bg:#0A0A0A;
  --card:#141414;
  --ink:#F5F4F1;
  --muted:#9A9A9A;
  --accent:#22D3EE;
}
body[data-page="contact"] .site-nav{ background:rgba(10,10,10,0); border-bottom:1px solid transparent; }
body[data-page="contact"] .site-nav.scrolled{ background:rgba(10,10,10,.9); border-bottom:1px solid rgba(255,255,255,.08); }
body[data-page="contact"] .nav-brand .dot{ background:var(--accent); }
body[data-page="contact"] .nav-links a:hover{ background:rgba(255,255,255,.08); }
body[data-page="contact"] .nav-links a.active{ background:var(--ink); color:var(--bg); }
body[data-page="contact"] .nav-toggle span{ background:var(--ink); }
@media (max-width:880px){ body[data-page="contact"] .nav-links{ background:#101010; } }
body[data-page="contact"] .btn{ border-color:rgba(255,255,255,.3); color:var(--ink); }
body[data-page="contact"] .btn.primary{ background:var(--accent); border-color:var(--accent); color:#04262c; }

.contact-shell{
  min-height:82vh;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 60px;
  position:relative;
  overflow:hidden;
}
.contact-shell::before{
  content:'';
  position:absolute; left:-10%; top:-20%;
  width:640px; height:640px;
  background:radial-gradient(circle, rgba(34,211,238,.14), transparent 70%);
  pointer-events:none;
}
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:1;
}
.contact-shell h1{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  font-size:clamp(2.4rem,6vw,4.2rem);
  letter-spacing:-.02em;
  line-height:1.03;
  color:var(--ink);
}
.contact-shell p.lede{
  margin-top:20px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.65;
  max-width:44ch;
}
.contact-card{
  border-radius:20px;
  background:var(--card);
  border:1px solid rgba(34,211,238,.2);
  padding:38px 34px;
}
.contact-item{ padding:20px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.contact-item:last-child{ border-bottom:none; padding-bottom:0; }
.contact-item:first-child{ padding-top:0; }
.contact-item .l{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.contact-item a, .contact-item span.v{ font-size:1.2rem; font-weight:600; color:var(--ink); }
.contact-item a{ transition:opacity .2s ease, color .2s ease; }
.contact-item a:hover{ color:var(--accent); }
.social-row{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }