/* Contact page — split navy/photo layout. Loaded on contact.html only. */

/* Only above the styles.css 800px stacking breakpoint — an unconditional
   rule here would win the cascade (loaded after styles.css) and break the
   mobile single-column stack defined there. */
/* .contact-layout is a <section>, which picks up styles.css's global
   section{padding:64px 0} — that's what was pushing the navy panel/photo
   down and making the white header area look taller than Home's. */
.contact-layout{padding:0;}

@media (min-width:801px){
  .contact-layout{grid-template-columns:39% 61%;}
}

.contact-info{
  background:var(--brand-navy);
  color:#f2efe8;
}

.contact-info h1{
  color:#ffffff;
  font-size:clamp(2rem, 3.4vw, 2.6rem);
  margin:0;
}

.contact-rule{width:52px; height:1px; background:var(--brand-gold); margin:22px 0 28px;}

.contact-info .lede{
  font-family:'Inter', sans-serif;
  color:#c7cfd6;
  font-size:1.08rem; line-height:1.75;
  margin-bottom:40px;
}

.contact-item .label{
  font-family:'Inter', sans-serif;
  text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem;
  color:var(--brand-gold); font-weight:600; margin-bottom:6px;
}

.contact-item .value{
  font-family:'Inter', sans-serif;
  color:#ffffff; font-size:1.15rem; font-weight:500;
}

.contact-item .value a{border-bottom:1px solid transparent; transition:border-color .15s ease, color .15s ease;}
.contact-item .value a:hover{color:var(--brand-gold); border-bottom-color:var(--brand-gold);}

.contact-photo img{filter:none;}