.contact-page main { display: flex; flex-direction: column; background: #111a17; }
.contact-studio { position: relative; isolation: isolate; flex: 1; overflow: hidden; background: #111a17; color: #f7faf6; }
.contact-studio::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(90deg, rgba(12,20,17,.35), rgba(12,20,17,.18)), url("../img/contacts-technical-background.468d014db680.webp"); background-size: cover; background-position: center top; background-repeat: no-repeat; mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); }
.contact-studio__content { padding-block: 48px 55px; }
.contact-studio__heading { max-width: 700px; margin-bottom: 28px; }
.contact-studio__heading p { margin: 0 0 12px; color: #eca287; font: 700 11px/1.4 'Courier New', monospace; }
.contact-studio__heading h1 { margin: 0 0 12px; font: 700 40px/1.15 Arial, sans-serif; }
.contact-studio__heading div { color: #d1dbd4; font-size: 15px; }
.contact-studio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.contact-tile { display: flex; flex-direction: column; min-width: 0; padding: 23px 26px; border: 1px solid #d96542; border-radius: 8px; background: #fafaf8; color: #25302a; transition: border-color 180ms ease; }
.contact-tile:hover { border-color: #ee9575; }
.contact-tile__top { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.contact-tile__top > span, .contact-tile--callback > div > span, .contact-tile--messengers > span { color: #9b4b32; font-size: 11px; font-weight: 700; }
.contact-tile__top svg { flex: 0 0 23px; width: 23px; height: 23px; stroke: #ba5b3e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-tile strong { display: block; margin-top: 17px; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.contact-tile--phone { grid-column: span 7; min-height: 178px; justify-content: center; background: rgba(25,35,30,.93); color: #fff; }
.contact-tile--phone .contact-tile__top > span { color: #eda58b; }
.contact-tile__phone { margin-top: 19px; color: #fff; font-size: 33px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.contact-tile__phone span, .contact-tile__extra span { color: #e89373; }
.contact-tile__extra { margin-top: 8px; color: #e1e9e2; font-size: 16px; font-weight: 700; }
.contact-tile--address { grid-column: span 5; min-height: 178px; }
.contact-tile--hours { grid-column: span 5; min-height: 150px; }
.contact-tile__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 17px; color: #a94c30; font-size: 13px; font-weight: 700; }
.contact-tile__link span, .contact-tile--callback .btn span { display: inline-block; transition: transform 180ms ease; }
.contact-tile__link:hover span, .contact-tile__link:focus-visible span, .contact-tile--callback .btn:hover span, .contact-tile--callback .btn:focus-visible span { transform: translate(3px, -3px); }
.contact-tile--callback { grid-column: span 7; min-height: 150px; flex-direction: row; justify-content: space-between; align-items: center; gap: 18px; }
.contact-tile--callback h2 { margin: 7px 0 4px; font-size: 20px; line-height: 1.3; }
.contact-tile--callback p { margin: 0; color: #58695e; font-size: 14px; }
.contact-tile--callback .btn { flex-shrink: 0; }
.contact-tile--messengers { grid-column: 1 / -1; padding-block: 18px; }
.contact-tile--messengers > div { display: flex; flex-wrap: wrap; gap: 18px; }
.contact-tile--messengers .contact-tile__link { margin-top: 10px; }
.contact-studio a:focus-visible { outline: 3px solid #d96542; outline-offset: 4px; }
.contact-tile--phone a:focus-visible { outline-color: #f4ad91; }
@media (max-width: 800px) {
    .contact-studio::before { background-position: 40% top; }
    .contact-studio__content { padding-block: 40px 48px; }
    .contact-tile--phone, .contact-tile--address, .contact-tile--hours, .contact-tile--callback { grid-column: span 6; }
    .contact-tile--callback { align-items: start; flex-direction: column; }
    .contact-tile__phone { font-size: 27px; }
}
@media (max-width: 540px) {
    .contact-studio::before { background-size: auto 700px; background-position: 35% top; opacity: .7; }
    .contact-studio__content { padding-block: 34px 40px; }
    .contact-studio__heading h1 { font-size: 32px; }
    .contact-studio__grid { grid-template-columns: 1fr; gap: 12px; }
    .contact-tile--phone, .contact-tile--address, .contact-tile--hours, .contact-tile--callback, .contact-tile--messengers { grid-column: auto; min-height: 0; padding: 21px; }
    .contact-tile__phone { font-size: 25px; }
    .contact-tile--callback .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .contact-tile, .contact-tile__link span, .contact-tile--callback .btn span { transition: none; } .contact-tile__link:hover span, .contact-tile--callback .btn:hover span { transform: none; } }