html,body{background:#0a0a0b}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

/* Page */
.contact-page{padding-top:5rem}
.contact-hero{
  position:relative;overflow:hidden;padding:8rem 0;
}
.hero-layer-one{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,26,31,.3),transparent)}
.hero-layer-two{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,11,.6),rgba(10,10,11,.8),#0a0a0b)}
.hero-inner{
  position:relative;max-width:56rem;margin:0 auto;padding:0 2rem;text-align:center
}
.hero-inner h1{
  margin:0 0 1rem;font-size:3.75rem;line-height:1;font-weight:700;color:#f5f5f7
}
.hero-inner p{
  margin:0;font-size:1.25rem;line-height:1.75rem;color:#9a9aa3
}

.contact-container{
  max-width:72rem;margin:0 auto;padding:0 2rem 5rem
}
.contact-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem
}
.section-heading{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem
}
.section-heading h2{
  margin:0;font-size:1.75rem;line-height:2.25rem;font-weight:700;color:#f5f5f7
}
.section-icon{color:#e11d2a;font-size:1.25rem}

/* Info */
.info-stack{display:flex;flex-direction:column;gap:1rem}
.info-card{
  display:flex;align-items:center;gap:1rem;padding:1.25rem;border-radius:1rem;
  background:#131316;border:1px solid #2a2a30
}
.info-icon{
  width:3rem;height:3rem;flex:0 0 3rem;border-radius:.75rem;background:rgba(225,29,42,.1);
  display:flex;align-items:center;justify-content:center;color:#e11d2a
}
.info-copy{min-width:0}
.info-copy p{margin:0 0 .125rem;font-size:.75rem;color:#9a9aa3}
.info-copy a,.info-copy span{font-size:.875rem;font-weight:500;color:#f5f5f7;text-decoration:none}
.info-copy a:hover{color:#e11d2a}
.social-card{
  padding:1.25rem;border-radius:1rem;background:#131316;border:1px solid #2a2a30;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap
}
.social-card a{
  width:2.75rem;height:2.75rem;border-radius:.75rem;border:1px solid #2a2a30;
  display:flex;align-items:center;justify-content:center;color:#9a9aa3;text-decoration:none;
  transition:.25s
}
.social-card a:hover{border-color:#e11d2a;color:#e11d2a}

/* Form */
.contact-form{
  display:flex;flex-direction:column;gap:1rem;padding:1.5rem;
  border-radius:1rem;background:#131316;border:1px solid #2a2a30
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field label{
  display:block;margin-bottom:.375rem;font-size:.875rem;font-weight:500;color:#f5f5f7
}
.field input,.field select,.field textarea{
  width:100%;background:#1a1a1f;border:1px solid #2a2a30;border-radius:.75rem;
  padding:.625rem .75rem;color:#f5f5f7;font-size:.875rem;outline:none;
  transition:border-color .2s
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(225,29,42,.55)
}
.field textarea{resize:none}
.field-error{margin:.25rem 0 0;font-size:.75rem;color:#f87171}
.submit-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;border:0;border-radius:.75rem;background:#e11d2a;color:#fff;
  font-size:.875rem;font-weight:500;cursor:pointer;transition:.2s
}
.submit-btn:hover{background:#ff2d3f}
.submit-btn:disabled{opacity:.5;cursor:not-allowed}

.status-box{
  display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:1rem;margin-bottom:1rem
}
.status-box p{margin:0;font-size:.875rem}
.status-box.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#4ade80}
.status-box.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#f87171}

/* Responsive */
@media(max-width:1023px){
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .contact-hero{padding:6rem 0}
  .hero-inner{padding:0 1rem}
  .hero-inner h1{font-size:2.25rem}
  .hero-inner p{font-size:1rem}
  .contact-container{padding:0 1rem 5rem}
  .form-grid{grid-template-columns:1fr}
}