/* Contact: same hero sizing, cover fit, and image layers as VPS.
   The only hero-specific difference is a stronger left fade over the bright sky. */
.page--contact .photo-hero::before {
  background: linear-gradient(90deg, #020912 0%, #020912 32%, rgba(2,9,18,.97) 42%, rgba(2,9,18,.75) 51%, rgba(2,9,18,.24) 64%, transparent 81%);
}
.page--contact .contact-options { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(16rem,.85fr); gap: 1.5rem; align-items: stretch; }
.page--contact .contact-panel { border: 1px solid rgba(122,168,206,.23); border-radius: 1.15rem; background: rgba(9,22,40,.82); padding: 1.65rem; min-width: 0; }
.page--contact .contact-panel h2 { margin: 0 0 .75rem; }
.page--contact .contact-panel p { margin-top: .6rem; }
.page--contact .contact-panel__note { color: #b4c9d9; font-size: .91rem; }
.page--contact .contact-map-link { display: block; margin: 1.1rem 0 .85rem; overflow: hidden; border-radius: .75rem; border: 1px solid rgba(133,176,212,.3); }
.page--contact .contact-map-link img { display:block; width:100%; height:auto; background:#e9f0f7; }
.page--contact .contact-map-link:focus-visible { outline: 3px solid #38baff; outline-offset:3px; }
.page--contact .contact-map-actions { display:flex; flex-wrap:wrap; gap: .75rem; align-items:center; margin-top:1.1rem; }
.page--contact .contact-panel--ticket { display:flex; flex-direction:column; justify-content:center; }
.page--contact .contact-panel--ticket .button { align-self: flex-start; margin-top: .9rem; }
@media (max-width: 62rem) { .page--contact .contact-options { grid-template-columns:1fr; } }
@media (max-width: 40rem) { .page--contact .contact-panel { padding:1.2rem; } }