/* ==========================================================================\n   CONTACT PAGE\n   ========================================================================== */\n\n/* -------------------------
   CONTACT PAGE
   ------------------------- */
.page--contact .masthead{ background: var(--masthead-bg); color: var(--masthead-ink); }
.page--contact{ background: var(--masthead-bg); }
.contact-hero{ padding-block: clamp(28px, 6vw, 64px); padding-top: 120px; }
.contact-card{
  background: var(--page-bg); color: var(--page-ink);
  border-radius: 22px; padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-1);
  display:grid; grid-template-columns: minmax(420px, 1fr) minmax(360px, .9fr);
  gap: clamp(22px, 4vw, 44px); align-items: start;
}
.contact-left{ display:flex; flex-direction:column; gap: clamp(16px, 2.2vw, 24px); }
.contact-right{ display:grid; }
.contact-title{ font-family:"Griffiths", serif; font-weight:400; line-height:1.02; letter-spacing:-.01em; margin:0; font-size: clamp(38px, 8.6vw, 90px); }
.contact-title .accent{ color: var(--accent); }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.contact-list li{ display:flex; align-items:center; gap:12px; }
.contact-list a{ color: var(--page-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-list a:hover{ border-color: color-mix(in srgb, var(--page-ink) 26%, transparent); }
.contact-icon{ inline-size: 40px; block-size: 40px; display:grid; place-items:center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.contact-icon svg{ width:20px; height:20px; }
.contact-socials{ display:flex; gap:16px; margin-top: 4px; }
.contact-socials a{ inline-size:44px; block-size:44px; display:grid; place-items:center; border-radius:999px; background: var(--masthead-ink); color:#0b1b34; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .18s ease, box-shadow .18s ease; }
.contact-socials a:hover{ transform: translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.contact-socials :is(img,svg){ width:22px; height:22px; display:block; }
.contact-photo{ border-radius: 22px; overflow:hidden; min-height: 520px; box-shadow: var(--shadow-1); display:grid; place-items:center; }
.contact-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:1024px){
  .contact-card{ grid-template-columns: 1fr; }
  .contact-photo{ min-height: 440px; }
}