.contact-page{
  background:transparent; /* use global inner-page backdrop */
  color:var(--text);
  padding:70px 0;
  margin-top:var(--nav-height);
}
.contact-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:18px 0 28px;
}
.contact-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 16px;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:0 18px 36px rgba(0,0,0,.32);
  color:var(--text);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.contact-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px rgba(0,0,0,.44);
  border-color:rgba(255,255,255,.16);
}
.contact-card .icon{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--gold-2);
}
.contact-card svg{ width:22px; height:22px; }
.contact-card .card-title{ margin-top:8px; font-weight:700; letter-spacing:.02em; }
.contact-card .card-sub{ margin-top:2px; color:var(--sub); font-size:.95rem; }
.section-title{
  text-align:center;
}
.contact-page .section-title::after{
  left:50%;
  transform:translateX(-50%);
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:38px;
}
.panel{
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  padding:26px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.contact-info h3,
.contact-form h3{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:0.95rem;
  margin-bottom:18px;
  color:var(--gold-2);
}
.contact-info h4{
  color:var(--text);
  margin:14px 0 6px;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.contact-info p,
.contact-info address{
  color:var(--sub);
  line-height:1.6;
  font-style:normal;
}
.contact-info a{color:var(--gold-2);text-decoration:none;}
.contact-info a:hover{text-decoration:underline;}
.contact-form form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-form input,
.contact-form textarea{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px 14px;
  color:var(--text);
  font-size:.95rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.55);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--gold-2);
  box-shadow:0 0 0 1px rgba(255,206,69,.35);
}
.contact-form textarea{resize:vertical;min-height:140px;}
.contact-form button{
  align-self:flex-start;
}
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-cards{grid-template-columns:1fr;}
  .contact-form button{width:100%;justify-content:center;}
}
