/* ============================================================
   MILANITY — CONTACT PAGE (layout for this page only)
   Loads after style.css. Nav and footer are NOT styled here:
   they come from style.css so every page matches exactly.
   ============================================================ */

.contact-page{ overflow-x:hidden; }
.contact-page .contact-hq-email{ text-decoration:none; }

/* ---------- HERO ---------- */
.contact-hero{
  position:relative; min-height:600px; display:flex; align-items:center;
  isolation:isolate; overflow:hidden; background:var(--ground);
  border-bottom:1px solid var(--rule-soft);
}
.contact-hero-grid{
  position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.9;
  background-image:
    linear-gradient(rgba(88,124,157,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,124,157,.10) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to right, transparent 0%, black 40%, black 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 40%, black 100%);
}
.contact-hero-glow{
  position:absolute; z-index:-1; top:5%; right:-10%; width:650px; height:650px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(232,120,58,.12) 0%, rgba(232,120,58,.035) 38%, transparent 70%);
}
.contact-hero-inner{
  position:relative; z-index:1; width:100%;
  padding-top:clamp(64px,10vw,118px); padding-bottom:clamp(56px,7vw,92px);
}
.legal-crumb{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}
.legal-crumb a{ color:var(--ink-3); text-decoration:none; }
.legal-crumb a:hover{ color:var(--flame); }
.nodash{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--flame);
  display:flex; align-items:center; gap:11px;
  margin-bottom: 22px;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--flame);
  display:flex; align-items:center; gap:11px;
  margin-bottom: 22px;
}
.contact-eyebrow{
  display:flex; align-items:center; gap:11px; margin-bottom:22px;
  color:var(--flame); font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.17em; line-height:1.5; text-transform:uppercase;
}
.contact-eyebrow-line{ width:26px; height:1px; flex:none; background:var(--flame-line); }
.contact-hero h1{
  max-width:18ch; font-size:clamp(40px,6.2vw,80px); font-weight:900;
  font-stretch:118%; line-height:.96; letter-spacing:-.033em;
}
.contact-hero h1 span{ color:var(--flame); }
.contact-hero-copy{
  max-width:60ch; margin-top:26px; color:var(--ink-2);
  font-size:clamp(17px,1.7vw,20px); line-height:1.58;
}
.contact-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:34px; }
.contact-hero-actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; }

/* ---------- HEADQUARTERS + MAP ---------- */
.contact-details{ background:var(--ground-2); }
.contact-details-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; align-items:stretch;
  gap:clamp(28px,4vw,56px);
}
.contact-headquarters{
  position:relative; padding:36px; border:1px solid var(--rule); border-radius:4px;
  background:linear-gradient(145deg, rgba(232,120,58,.055), transparent 55%), var(--panel);
}
.contact-hq-header{
  display:flex; align-items:center; gap:12px; color:var(--ink-3);
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.13em;
}
.contact-hq-icon{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:50%; color:var(--flame); font-size:20px;
}
.contact-hq-country{
  margin-top:38px; color:var(--flame); font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.15em;
}
.contact-headquarters h3{
  margin:12px 0 14px; font-size:clamp(21px,2.4vw,27px); font-weight:700;
  font-stretch:106%; line-height:1.2; letter-spacing:-.015em;
}
.contact-headquarters address{ margin:0; color:var(--ink-2); font-size:15px; font-style:normal; line-height:1.62; }
.contact-hq-divider{ height:1px; margin:28px 0 22px; background:var(--rule); }
.contact-hq-email{
  display:flex; align-items:center; gap:11px; color:var(--ink);
  font-size:14.5px; font-weight:500; transition:color .25s ease;
}
.contact-hq-email span{ color:var(--flame); font-size:17px; }
.contact-hq-email:hover{ color:var(--flame); }

.contact-map-box{
  position:relative; min-height:420px; overflow:hidden;
  border:1px solid var(--rule); border-radius:4px; background:var(--ground);
}
.contact-map-box iframe{
  position:absolute; inset:0; display:block; width:100%; height:100%; border:0;
  filter:saturate(.9) brightness(.69); opacity:1;
}
.contact-map-caption{
  position:absolute; left:18px; bottom:18px;
  display:flex; align-items:center; gap:11px; padding:13px 17px;
  border:1px solid var(--rule); border-radius:3px; background:var(--ground);
  color:var(--ink-2); font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em;
}
.contact-map-dot{
  width:7px; height:7px; flex:0 0 7px; border-radius:50%;
  background:var(--flame); box-shadow:0 0 12px rgba(232,120,58,.55);
}
a.contact-map-caption{ text-decoration:none; }
a.contact-map-caption:hover{ border-color:var(--flame); color:var(--ink); }

/* ---------- TABLET ---------- */
@media (max-width:1024px){
  .contact-hero{ min-height:560px; }
  .contact-headquarters{ padding:32px; }
}

/* ---------- MOBILE ---------- */
@media (max-width:767px){
  .contact-hero{ min-height:520px; }
  .contact-hero-inner{ padding-top:70px; padding-bottom:70px; }
  .contact-hero h1{ font-size:clamp(38px,9vw,58px); }
  .contact-hero-copy{ font-size:17px; }
  .contact-hero-actions{ align-items:stretch; flex-direction:column; max-width:290px; }
  .contact-hero-actions .btn{ width:100%; }
  .contact-details-grid{ grid-template-columns:1fr; }
  .contact-headquarters{ padding:28px; }
  .contact-hq-country{ margin-top:30px; }
  .contact-map-box{ min-height:320px; }
  .contact-map-caption{ font-size:10.5px; }
}
@media (max-width:420px){
  .contact-hero h1{ font-size:38px; }
  .contact-headquarters{ padding:24px; }
}