:root{
  --gold:#c7a34b; --bg:#000; --fg:#fff;
  --panel:#0b0b0b; --panel-2:#121212; --line:#1f1f1f;
  --wrap:1200px; --radius:22px;
  --shadow-lg:0 30px 70px rgba(0,0,0,.45);
  --shadow-md:0 18px 40px rgba(0,0,0,.35);
}

html{scroll-behavior:smooth}
.container{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:24px}

/* ===== HERO (match look/feel from other pages) ===== */
.contact-hero{
  position:relative; margin-top:0;
  height:min(90vh, 860px); min-height:600px;
  background:var(--bg); overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
}
.contact-hero__bg{
  position:absolute; inset:0;
  background:center/cover no-repeat var(--contact-hero, url('/assets/contact/hero.png'));
  transform:scale(1.02);
}
.contact-hero__grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.75) 100%);
  mix-blend-mode:multiply;
}
.contact-hero__noise{ position:absolute; inset:-10%; background-image:url('/assets/noise.png'); opacity:.08; pointer-events:none; }
.contact-hero__sheen{
  position:absolute; left:-40%; top:-40%; width:180%; height:180%;
  background:radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  transform:rotate(8deg); animation:sheen 12s linear infinite; opacity:.35; pointer-events:none;
}
@keyframes sheen{ 0%{transform:translateX(-10%) rotate(8deg)} 100%{transform:translateX(10%) rotate(8deg)} }

.contact-hero__inner{
  position:relative; z-index:1;
  width:min(var(--wrap),100%); margin-inline:auto;
  padding:0 24px 42px;
  display:flex; flex-direction:column; align-items:flex-start;
  transform: translateY(calc(-1 * clamp(5px, 3vh, 220px)));
}
@media (max-height:700px){ .contact-hero__inner{ transform: translateY(-64px); } }
@media (max-width:560px){ .contact-hero__inner{ padding:0 20px 28px; transform: translateY(-48px); } }

.eyebrow{ font:600 13px/1.1 'Rajdhani',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.85; margin-bottom:10px; }
.contact-hero h1{
  font-family:'Montserrat',sans-serif; font-weight:700;
  line-height:.95; font-size:clamp(48px,7.8vw,92px); color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.55); margin:0 0 10px 0;
}
.hero-sub{ color:#d9d9d9; font-family:'Rajdhani',sans-serif; max-width:720px }

/* ===== LAYOUT ===== */
.contact-section{ padding:48px 0; background:#000; }
.contact-grid{
  display:grid; gap:20px;
  grid-template-columns: 1.2fr .8fr;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Card surface */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px;
}

/* Info block */
.contact-info h2,
.contact-form h2{ 
  font-family:'Montserrat',sans-serif; font-weight:700; color:var(--gold);
  font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 8px;
}
.muted{ color:#cfcfcf; font-family:'Rajdhani',sans-serif }

.info-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
  margin: 12px 0 10px;
}
@media (max-width:720px){ .info-grid{ grid-template-columns: 1fr; } }

.info-grid dt{
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.info-grid dd{
  color:#e6e6e6; font-family:'Rajdhani',sans-serif;
}
.info-grid a{ color:#e6e6e6; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25) }
.info-grid a:hover{ color:var(--gold); border-bottom-color:var(--gold) }

.quick-links{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }

.info-grid + .quick-links {
  margin-top: 20px; /* adjust to taste */
}

/* Buttons (match site) */
.btn{
  display:inline-block; padding:.9rem 1.15rem; border-radius:12px; border:none;
  background:linear-gradient(180deg, var(--gold), #a9892f); color:#111;
  font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.04em;
  box-shadow:0 8px 28px rgba(199,163,75,.25); transition:transform .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-ghost{
  background: transparent; color:#eaeaea; border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ color:#111; background:linear-gradient(180deg, var(--gold), #a9892f) }

/* Form */
.contact-form .form-grid{
  display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: 12px;
}
.contact-form .field-full{ grid-column: 1 / -1; }

.field span{ display:block; color:#dcdcdc; font-family:'Rajdhani',sans-serif; margin-bottom:6px }
.field input,
.field select,
.field textarea{
  width:100%; background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:#fff; border-radius:12px; padding:12px 12px;
  font-family:'Rajdhani',sans-serif;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea{ resize:vertical }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#383838; box-shadow:0 0 0 6px rgba(255,255,255,.04);
}

.field select {
  background: #2a2a2a;   /* solid grey so options are readable */
  color: #fff;           /* keep text white */
}

.field select option {
  background: #2a2a2a;   /* also grey for the dropdown list */
  color: #fff;
}

.field .err{
  display:none; color:#ff8a8a; font-size:12px; margin-top:6px; font-family:'Rajdhani',sans-serif;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea{
  border-color:#b74141; box-shadow:0 0 0 6px rgba(183,65,65,.15);
}
.field.invalid .err{ display:block }
.field [data-opt]{ opacity:.6 }

/* Actions */
.form-actions{ display:flex; align-items:center; gap:12px; margin-top:6px }
.tiny{ font-size:12px }

/* Map */
.contact-map{ padding:0; overflow:hidden }
#contactMap{
  width:100%; height:100%;
  min-height: 520px;
  border-radius: calc(var(--radius) - 2px);
  filter: brightness(1.35) contrast(1) saturate(1.2);
}

/* Header behavior (reuse) */
.site-header.scrolled{ backdrop-filter:blur(8px); background:rgba(0,0,0,.35); transition:background .3s ease, backdrop-filter .3s ease }
.site-header.hide{ transform:translateY(-100%); transition:transform .3s ease }

/* Smooth slide for header */
#site-header{
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform;
}
#site-header.hide{
  transform: translateY(-100%);
  opacity: .98;           /* optional */
  pointer-events: none;   /* optional */
}