/* =========================================
   CONTACT PAGE
   ========================================= */

/* --- Page hero --- */
.contact-hero{
  padding: calc(var(--navbar-h) + 70px) 40px 60px;
  text-align:center;
  background:
    radial-gradient(ellipse at top, rgba(201,168,76,0.08) 0%, transparent 60%),
    var(--dark);
  border-bottom:1px solid rgba(201,168,76,0.1);
}
.contact-hero-inner{max-width:640px;margin:0 auto;}
.contact-hero-inner h1{
  font-size:clamp(34px,5vw,52px);
  font-weight:700;
  color:var(--white);
  margin:16px 0 16px;
  line-height:1.1;
}
.contact-hero-inner h1 span{color:var(--gold);font-style:italic;}
.contact-hero-inner p{color:var(--muted);font-size:15px;line-height:1.8;max-width:480px;margin:0 auto;}

/* --- Layout --- */
.contact-section{padding-top:70px;}
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:50px;
  align-items:start;
}

/* --- Info column --- */
.contact-info h2{font-size:28px;font-weight:600;color:var(--white);margin:8px 0 14px;}
.contact-lead{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:30px;max-width:420px;}

.contact-cards{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;}
.contact-card{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;
  background:var(--dark-2);
  border:1px solid rgba(201,168,76,0.1);
  border-radius:var(--radius);
  transition:var(--transition);
}
a.contact-card:hover{border-color:rgba(201,168,76,0.4);transform:translateY(-2px);}
.contact-card.no-hover{cursor:default;}
.cc-icon{
  width:38px;height:38px;flex-shrink:0;
  border-radius:50%;
  background:rgba(201,168,76,0.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.cc-label{display:block;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px;font-weight:600;}
.cc-value{display:block;font-size:14px;color:var(--white);line-height:1.5;}
.contact-socials{margin-top:6px;}

/* --- Form column --- */
.contact-form-wrap{
  background:var(--dark-2);
  border:1px solid rgba(201,168,76,0.1);
  border-radius:14px;
  padding:40px;
}
.contact-form-wrap h2{font-size:28px;font-weight:600;color:var(--white);margin:8px 0 26px;}

.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:12px;letter-spacing:0.4px;color:var(--text);font-weight:500;}
.field input,
.field select,
.field textarea{
  background:var(--dark-3);
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px 16px;
  font-size:13.5px;
  color:var(--white);
  font-family:var(--font-body);
  outline:none;
  transition:border-color .2s, background .2s;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted);}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold);
  background:rgba(201,168,76,0.05);
}
.field select{appearance:none;cursor:pointer;
  color-scheme:dark;
  background-color:var(--dark-3);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:36px;
}
.field select option{
  background-color:#1e1e1e;
  color:#f5f0e8;
}

.contact-submit{
  align-self:flex-start;
  margin-top:6px;
  border:none;
}

/* --- Map --- */
.contact-map-section{padding-top:0;}
.contact-map{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(201,168,76,0.1);
  height:360px;
}
.contact-map iframe{width:100%;height:100%;border:0;filter:grayscale(0.3) contrast(1.05);}

/* --- Responsive --- */
@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .contact-form-wrap{padding:30px;}
}
@media (max-width:768px){
  .contact-hero{padding:calc(var(--navbar-h) + 50px) 24px 46px;}
  .contact-section{padding-top:46px;}
  .form-row{grid-template-columns:1fr;gap:14px;}
  .contact-form-wrap{padding:24px;}
  .contact-map{height:260px;}
}
@media (max-width:480px){
  .contact-hero{padding:calc(var(--navbar-h) + 40px) 16px 36px;}
}