/* ============================================================
   Contact page redesign — impeccable pass.
   Scoped to body.contact-refined. Loaded AFTER styles.css.
   Same visual language as css/redesign.css (homepage).
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged, no form. Section rhythm,
   image sizes & 1200px container width preserved.
   ============================================================ */

/* ---- Design tokens (identical to redesign.css) ---- */
.contact-refined {
  --ink-900: #0c2143;
  --accent: #12457e;
  --rule: #e7ecf2;
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Themed browser surfaces ---- */
.contact-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.contact-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Section kickers (kept, restyled to refined tracked accent label) ---- */
.contact-refined .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--accent);
  margin: 0 0 12px;
}

/* ---- Content section headings — serif display, scoped to <section>s.
   NEVER the dark footer (white) or the photo banner (white sans). ---- */
.contact-refined section h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
}
.contact-refined .section-head { margin: 0 0 24px; }

/* ---- Content links inside sections: single restrained accent ---- */
.contact-refined section a { color: var(--accent); }
.contact-refined section a:hover { color: var(--ink-900); }

/* ============================================================
   PAGE BANNER — keep current height; lighter blue-hue overlay.
   Banner links already white + underlined in styles.css.
   ============================================================ */
.contact-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg,
    rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.37) 100%);
  opacity: 1;
}

/* ============================================================
   CONTACT BOXES — hairline cards, no thick colored side-tab,
   calm surface, subtle hover lift.
   ============================================================ */
.contact-refined .contact-box {
  border: 1px solid var(--rule);        /* thick 3px left tab -> hairline */
  border-radius: 12px;
  background: #fff;
  padding: 22px 24px;
  box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.contact-refined .contact-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
.contact-refined .contact-box h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--accent);
}
.contact-refined .contact-box .big {
  font-family: var(--serif);
  color: var(--ink-900);
}
.contact-refined .contact-box .big a { color: var(--ink-900); }
.contact-refined .contact-box .big a:hover { color: var(--accent); }
.contact-refined .contact-box .muted { color: var(--slate); }
.contact-refined .contact-box .muted a { color: var(--accent); }
.contact-refined .contact-box .muted a:hover { color: var(--ink-900); }

/* ============================================================
   GETTING HERE — calm paper surface, rounded map, refined labels.
   ============================================================ */
.contact-refined .section-soft { background: var(--paper); }

/* Match the map container corners to the card radius (iframe untouched) */
.contact-refined .map-wrap {
  border-radius: 12px;
  border: 1px solid var(--rule);
}

.contact-refined .directions h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--accent);
}
.contact-refined .directions p { color: var(--slate); }

/* Banner height reduced ~20% (owner request) */
.contact-refined .page-banner { padding: 40px 0; }