/* Contact scene: the same graphite, fine metal lines and cold light as the home hero. */
html .page--contacts .contacts-intro { padding-block: 54px 62px; border-bottom: 1px solid #3E505D; }
html .contacts-intro .contacts-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
.contact-signal { position: relative; width: 100%; min-width: 0; margin: 0; align-self: center; }
.contact-signal::before { content: ''; position: absolute; inset: 0 -15%; pointer-events: none; background: radial-gradient(ellipse, #2B3C48 0, transparent 67%); }
.contact-signal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; color: #ABBFCD; font: 11px/1.4 Consolas, monospace; letter-spacing: .045em; }
.contact-signal__head > span::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #B9D1E1; margin-right: 10px; vertical-align: 1px; }
.contact-signal__pause { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #546E7E; border-radius: 2px; color: #C2D6E4; background: transparent; cursor: pointer; }
.contact-signal__pause:hover { background: #354B59; border-color: #A4BDCE; }
.contact-signal__pause:disabled { visibility: hidden; }
.contact-signal__pause svg { width: 14px; height: 14px; }
.contact-signal__play { display: none; }
.contact-signal__pause[aria-pressed="true"] .contact-signal__play { display: block; }
.contact-signal__pause[aria-pressed="true"] .contact-signal__stop { display: none; }
.contact-signal__viewport { position: relative; width: calc(100% + 40px); margin-inline: -20px; aspect-ratio: 1.2; }
.contact-signal canvas, .contact-signal__fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.contact-signal canvas { opacity: 0; transition: opacity .5s; }
.contact-signal[data-ready="true"] canvas { opacity: 1; }
.contact-signal[data-ready="true"] .contact-signal__fallback { opacity: 0; }
.contact-signal__caption { display: flex; align-items: center; justify-content: space-between; gap: 18px; position: relative; color: #B2C5D3; font-size: 12px; padding: 15px 0 0; border-top: 1px solid #465D6C; }
.contact-signal__caption i { flex: 1; text-align: center; color: #728E9F; font: 18px/1 Consolas, monospace; }
@media (max-width: 1000px) {
    html .contacts-intro .contacts-hero { gap: 26px; }
    .contact-signal__head { font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 760px) {
    html .page--contacts .contacts-intro { padding-block: 32px 40px; }
    html .contacts-intro .contacts-hero { grid-template-columns: 1fr; gap: 0; }
    .contacts-intro .contacts-hero__copy { display: contents; }
    .contacts-hero__copy > .eyebrow { order: 0; }
    .contacts-hero__copy > h1 { order: 1; margin-bottom: 24px; }
    .contact-signal { order: 2; max-width: 540px; justify-self: center; margin-bottom: 26px; }
    .contacts-hero__copy > .hero__lead { order: 3; margin-bottom: 0; }
    .contacts-hero__copy > .contacts-hero__perks { order: 4; margin-top: 24px; }
    .contact-signal__viewport { aspect-ratio: 1.3; }
    .contact-signal__caption { font-size: 11px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .contact-signal canvas { transition: none; } }