/* The title sits beside three groups: two QR profiles and stacked direct links. */
#contact .contact-main { grid-template-columns:minmax(0,1fr) minmax(0,680px); align-items:start; gap:clamp(32px,4.5vw,80px); padding:54px 0 10px; }
.contact-intro { min-width:0; }
#contact .contact-intro h2 { font-size:clamp(38px,3.6vw,64px); margin:0; }
.contact-intro > p { margin:32px 0 0; font-size:13px; line-height:1.9; }
#contact-methods { display:grid; grid-template-columns:minmax(0,164px) minmax(0,164px) minmax(0,220px); gap:24px; align-items:stretch; justify-self:end; min-width:0; width:100%; max-width:596px; }
.contact-socials { display:contents; }
.contact-social { margin:0; min-width:0; display:grid; justify-items:start; align-content:start; }
.contact-platform { display:flex; align-items:center; gap:10px; height:30px; margin:0 0 12px; }
#contact-methods .contact-platform span { font-size:13px; }
.contact-brand-icon { display:block; width:24px; height:24px; object-fit:contain; flex:none; }
.contact-qr { display:block; width:min(100%,164px); aspect-ratio:1; background:#fff; border-radius:var(--ui-radius,24px); overflow:hidden; }
.contact-qr img { display:block; width:100%; height:100%; object-fit:contain; }
.contact-profile { margin-top:16px; min-width:0; }
#contact-methods .contact-profile-name { margin:0; font-size:13px; line-height:1.5; font-weight:500; }
#contact-methods .contact-profile-detail { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
#contact-methods .contact-profile-detail span { font-size:inherit; white-space:nowrap; }
.contact-direct { display:flex; flex-direction:column; align-self:start; min-width:0; gap:14px; }
.contact-direct .contact-platform { margin:0; }
.contact-direct .contact-item { display:flex; align-items:center; gap:10px; min-height:26px; padding:0; border:0; text-decoration:none; color:var(--text); }
.contact-direct .contact-item::after{display:none}
.contact-direct .contact-item *{text-decoration:none}
#contact-methods .contact-value { font-size:14px; letter-spacing:-.02em; line-height:1.5; white-space:nowrap; }
.contact-item:is(:hover,:active) .contact-value { color:#6666ff; }
.contact-item:focus-visible,.contact-qr:focus-visible { outline:2px solid #6666ff; outline-offset:6px; }
@media(max-width:900px) {
  #contact .contact-main { grid-template-columns:minmax(0,1fr); gap:36px; }
  #contact .contact-intro h2 { font-size:clamp(38px,5.4vw,48px); }
  #contact-methods .contact-profile-name { font-size:14px; }
  #contact-methods .contact-value { font-size:15px; }
}
@media(max-width:680px) {
  #contact .contact-main { gap:32px; padding:30px 0 0; }
  #contact .contact-intro h2 { font-size:clamp(34px,10.5vw,48px); }
  .contact-intro > p { margin-top:20px; font-size:12px; }
  #contact-methods { justify-self:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
  .contact-direct { grid-column:1/-1; gap:18px; }
  #contact-methods .contact-value { font-size:14px; }
  #contact-methods .contact-profile-detail { font-size:10px; }
}