.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-honeypot input {
  width: 1px !important;
  height: 1px !important;
}

.page-hero {
  position: relative;
  padding: 50px clamp(20px, 5vw, 70px);
  color: var(--white);
  background:
    linear-gradient(rgba(16, 24, 47, 0.64), rgba(16, 24, 47, 0.75)),
    radial-gradient(circle at 72% 22%, rgba(217, 183, 111, 0.45), transparent 20%),
    linear-gradient(135deg, #10182f 0%, #243b73 62%, #7fa7d9 100%);
  overflow: hidden;
}

.featured-song,
.song-card,
.playlist-box,
.now-playing-card,
.contact-card,
.contact-panel {
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,250,240,0.72));
  border: 1px solid rgba(217, 183, 111, 0.34);
  box-shadow:
    0 24px 70px rgba(16, 24, 47, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.contact-card::before {
  margin: -40px -40px 30px;
}

.featured-song::before,
.now-playing-card::before,
.contact-card::before {
  content: "";
  display: block;
  height: 3px;
  margin: -34px -34px 28px;
  border-radius: 34px 34px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

.contact-layout{

display:grid;
grid-template-columns:2fr 1fr;
gap:40px;

align-items:start;

}

.contact-card,
.contact-panel{

background:var(--card);

border:1px solid var(--border);

border-radius:30px;

padding:40px;

box-shadow:var(--shadow);

}

.contact-card h2{

margin-bottom:10px;

}

.intro{

color:var(--muted);

margin-bottom:35px;

}

.field{

margin-bottom:24px;

}

.field label{

display:block;

font-weight:600;

margin-bottom:8px;

color:var(--navy);

}

.field input,
.field textarea{

width:100%;

padding:16px 20px;

font-size:16px;

font-family:inherit;

background:white;

border:1px solid rgba(0,0,0,.08);

border-radius:18px;

transition:.25s;

outline:none;

}

.field textarea{

resize:vertical;

min-height:220px;

}

.field input:hover,
.field textarea:hover{

border-color:#c5d7f2;

}

.field input:focus,
.field textarea:focus{

border-color:var(--gold);

box-shadow:
0 0 0 5px rgba(217,183,111,.18);

}

.actions{

margin-top:30px;

display:flex;

justify-content:flex-end;

}

.actions button{

min-width:190px;

}

.contact-panel{

position:sticky;

top:110px;

}

.contact-panel hr{

margin:30px 0;

border:none;

height:1px;

background:rgba(0,0,0,.08);

}

.contact-panel p{

line-height:1.8;

color:var(--muted);

}

@media(max-width:900px){

.contact-layout{

grid-template-columns:1fr;

}

.contact-panel{

position:static;

}

.actions{

justify-content:stretch;

}

.actions button{

width:100%;

}

.form-notice {
  margin: 0 0 28px;
  padding: 18px 20px;
  border-radius: 18px;
  line-height: 1.6;
}

.form-notice strong {
  color: inherit;
}

.form-notice ul {
  margin: 10px 0 0;
  padding-left: 22px;
}

.form-notice-success {
  color: #24563a;
  background: rgba(211, 239, 219, 0.8);
  border: 1px solid rgba(62, 133, 85, 0.28);
}

.form-notice-error {
  color: #7b2d2d;
  background: rgba(255, 231, 229, 0.85);
  border: 1px solid rgba(170, 60, 60, 0.25);
}