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

:root{
  --brand:#7f1d1d; --brand-600:#991b1b;
  --text:#0f172a; --muted:#475569;
  --bg:#f8fafc; --card:#ffffff; --line:#e5e7eb;
  --shadow:0 10px 24px rgba(0,0,0,.08); --radius:16px;
}

.contact-page{ background:var(--bg); color:var(--text); font-family:var(--font,"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif); }

.contact-page .container{ max-width:1200px; margin:0 auto; padding:0 16px; box-sizing:border-box; }

.contact-page .pattern-grid{ position:relative; isolation:isolate; }
.contact-page .pattern-grid::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(127,29,29,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127,29,29,.05) 1px, transparent 1px);
  background-size:44px 44px; z-index:-1; pointer-events:none;
}

.contact-page .contact-hero{
  padding:56px 0;
  background:
    radial-gradient(800px 400px at 20% -10%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(135deg, #fff, #f3f4f6);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.contact-page .contact-hero-content h1{ font-size:36px; font-weight:900; margin:0 0 8px; letter-spacing:-.01em; color:var(--text); }
.contact-page .contact-hero-content p{ font-size:18px; color:#334155; margin:0 auto; max-width:720px; }

.contact-page .contact-section{ padding:28px 0 0; }

.contact-page .contact-wrapper{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
  grid-auto-rows:auto;
}
@media (min-width:980px){
  .contact-page .contact-wrapper{
    grid-template-columns:1.15fr .85fr;
    gap:28px;
  }
}

.contact-page .contact-right{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
}
.contact-page .contact-right > .contact-info,
.contact-page .contact-right > .locations-card{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0;
}
.contact-page .contact-info{ max-width:none !important; }

.contact-page .contact-form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; height:auto;
}
.contact-page .contact-form h2{ margin:0 0 16px; font-size:22px; font-weight:900; letter-spacing:.2px; }
.contact-page .form-group{ margin-bottom:14px; }
.contact-page .form-group label{ display:block; font-size:14px; color:#374151; font-weight:700; margin-bottom:6px; }
.contact-page .form-group input,
.contact-page .form-group textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-page .form-group textarea{ resize:vertical; min-height:120px; }
.contact-page .form-group input:focus,
.contact-page .form-group textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(127,29,29,.15); }
.contact-page .g-recaptcha{ margin:8px 0 6px; }
.contact-page .btn-main{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 18px; background:var(--brand); color:#fff; border:1px solid transparent;
  border-radius:12px; font-weight:800; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 10px 24px rgba(127,29,29,.20); transition:transform .15s, background .15s, box-shadow .15s;
}
.contact-page .btn-main:hover{ background:var(--brand-600); transform:translateY(-1px); }

.contact-page .contact-info{
  background:linear-gradient(135deg, var(--brand,#7f1d1d), var(--brand-600,#991b1b));
  color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(127,29,29,.25); padding:24px; height:auto;
  align-self:start;
}
.contact-page .contact-info h2{ color:#fff; margin:0 0 14px; font-size:22px; font-weight:900; }
.contact-page .contact-info ul{ list-style:none; margin:0 0 14px; padding:0; color:#fff; }
.contact-page .contact-info li{ display:flex; align-items:center; gap:10px; font-size:15px; color:#fff; margin-bottom:10px; }
.contact-page .contact-info i{ color:#fff; }
.contact-page .contact-info a{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); }
.contact-page .contact-info a:hover{ border-bottom-color:rgba(255,255,255,.65); }
.contact-page .contact-info .social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; background:transparent;
  border:1px solid rgba(255,255,255,.45); color:#fff; margin-right:8px; transition:all .15s ease;
}
.contact-page .contact-info .social-links a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.75); }

.contact-page .locations-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin:0;
}
.contact-page .locations-card h2{
  margin:0 0 6px; font-size:22px; font-weight:900; text-align:center;
}
.contact-page .loc-sub{
  margin:0 0 16px; font-size:15px; color:#334155; text-align:center;
}
.contact-page .loc-pills{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.contact-page .loc-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; background:var(--brand); color:#fff;
  text-decoration:none; font-weight:700; font-size:14px; border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 18px rgba(127,29,29,.18); white-space:nowrap;
}
.contact-page .loc-pill:hover{ background:var(--brand-600); transform:translateY(-1px); }

.contact-page .contact-map{ margin-top:28px; border-top:1px solid var(--line); }
.contact-page .contact-map iframe{ width:100%; height:420px; border:0; display:block; filter:none; }

.contact-page .popup-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:1000; }
.contact-page .popup-overlay.show{ display:flex; }
.contact-page .popup-box{ background:#fff; color:#0f172a; border-radius:16px; padding:18px 18px 14px; box-shadow:0 20px 50px rgba(0,0,0,.25); width:min(560px,92vw); border:1px solid var(--line); }
.contact-page .popup-icon{ font-size:28px; }
.contact-page .popup-text{ margin:8px 0 14px; color:#334155; line-height:1.6; }
.contact-page .popup-close{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:10px; cursor:pointer;
  background:var(--brand); color:#fff; border:1px solid transparent; font-weight:800;
}
.contact-page .popup-close:hover{ background:var(--brand-600); }

@media (max-width:980px){
  .contact-page .contact-hero-content h1{ font-size:32px; }
  .contact-page .contact-wrapper{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:700px){
  .contact-page .contact-hero{ padding:44px 0; }
  .contact-page .contact-hero-content h1{ font-size:28px; }
  .contact-page .contact-hero-content p{ font-size:16px; }
  .contact-page .contact-form, .contact-page .contact-info{ padding:18px; }
}