/* ── 11. PAGE HEADER (internal pages) ─────────────────────── */
.page-header {
    position: relative; overflow: hidden;
    padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, var(--blue-50) 0%, #F6FAFD 55%, var(--blue-50) 100%);
}
.page-header .section-inner { position: relative; z-index: 1; }
.page-header__lead { max-width: 62ch; font-size: 1.08rem; margin-top: .8rem; }
.page-header__lead--wide { max-width: 82ch; }

/* Contact: photo gallery under the form. Cards are capped at ~420px each so
   a lone photo isn't blown up past its resolution (stays sharp), and the row
   grows to 2–3 photos as more are added. Hover = lift + deeper shadow only:
   no scale/rotate/will-change, which is what softens raster photos. */
.contact-gallery { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.contact-gallery__grid {
    display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem);
    max-width: calc(var(--cols, 1) * 420px + (var(--cols, 1) - 1) * 1.6rem); margin: 0 auto;
}
.contact-gallery__item {
    margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.contact-gallery__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
    .contact-gallery__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
/* Bento: portrait photo left (natural shape), two landscape photos stacked
   right; the right column fills the portrait's height. */
.contact-gallery__grid--bento {
    grid-template-columns: 1.07fr 1fr; grid-template-rows: 1fr 1fr;
    max-width: 920px;
}
.contact-gallery__grid--bento .contact-gallery__item:first-child { grid-row: 1 / 3; }
.contact-gallery__grid--bento .contact-gallery__item:first-child img { aspect-ratio: 4 / 5; }
.contact-gallery__grid--bento .contact-gallery__item picture { display: block; height: 100%; }
.contact-gallery__grid--bento .contact-gallery__item img { height: 100%; }
.contact-gallery__grid--bento .contact-gallery__item:not(:first-child) img { aspect-ratio: auto; }
/* Three landscape photos stay in one row down to phone width (two columns
   would leave the third one orphaned), then stack. */
@media (max-width: 900px) {
    .contact-gallery__grid--n1 { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 600px) {
    .contact-gallery__grid { grid-template-columns: 1fr; max-width: 460px; }
    .contact-gallery__grid--bento { grid-template-rows: none; }
    .contact-gallery__grid--bento .contact-gallery__item:first-child { grid-row: auto; }
    .contact-gallery__grid--bento .contact-gallery__item:not(:first-child) img { aspect-ratio: 3 / 2; height: auto; }
}