/* W5 — Contact prototype v35 */
.contact-intro {
    max-width: 880px;
    margin: 0 auto;
    padding: 58px 24px 36px;
    text-align: center
}

.contact-intro__icon {
    display: block;
    width: clamp(112px, 11vw, 158px);
    height: auto;
    margin: 0 auto 16px;
    filter: drop-shadow(0 14px 24px #000)
}

.contact-intro .kicker {
    justify-content: center
}

.contact-intro h1 {
    margin: 4px 0 0;
    font-size: clamp(4.4rem, 7.5vw, 7rem);
    line-height: .9
}

.contact-intro__lead {
    max-width: 660px;
    margin: 20px auto 0;
    color: #aaa;
    font-size: clamp(1.08rem, 1.7vw, 1.3rem);
    line-height: 1.6
}

.contact-intro__rule {
    width: min(820px, 92%);
    height: 1px;
    margin: 34px auto 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), rgba(255, 102, 0, .5), rgba(255, 255, 255, .09), transparent)
}

.routing {
    position: relative;
    width: min(1000px, calc(100% - 48px));
    margin: 28px auto 84px
}

.routing__heading {
    text-align: center;
    margin-bottom: 46px
}

.routing__heading .kicker {
    justify-content: center
}

.routing__heading h2 {
    margin: 4px 0 0;
    font-size: clamp(2.7rem, 4.8vw, 4.8rem);
    line-height: 1
}

.routing__heading>p:last-child {
    margin: 12px 0 0;
    color: #686868
}

.routing__wire {
    position: absolute;
    top: 148px;
    bottom: 12px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(255, 102, 0, .48) 8%, rgba(255, 255, 255, .1) 48%, rgba(255, 102, 0, .32) 92%, transparent)
}

.route-list {
    display: grid;
    gap: 20px
}

.route {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 20px;
    width: calc(50% - 42px);
    padding: 22px 0
}

.route--left {
    justify-self: start
}

.route--right {
    justify-self: end
}

.route__marker {
    position: absolute;
    top: 48px;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(255, 102, 0, .75);
    border-radius: 50%;
    background: #080808;
    box-shadow: 0 0 18px rgba(255, 102, 0, .22)
}

.route--left .route__marker {
    right: -49px
}

.route--right .route__marker {
    left: -49px
}

.route img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    align-self: start
}

.route__label {
    margin: 0;
    color: var(--orange);
    font: 700 .62rem/1.2 var(--ui);
    letter-spacing: .11em
}

.route h3 {
    margin: 6px 0 8px;
    font-size: clamp(1.75rem, 2.7vw, 2.5rem);
    line-height: 1.05
}

.route div>p:not(.route__label) {
    margin: 0;
    color: #929292;
    line-height: 1.6
}

.route a,
.route__placeholder {
    display: inline-block;
    margin-top: 13px;
    color: var(--orange);
    font: 700 .62rem/1.2 var(--ui);
    letter-spacing: .08em;
    text-decoration: none
}

.route__placeholder {
    color: #666
}

.route a:hover {
    color: #fff
}

.before-writing {
    display: grid;
    grid-template-columns: 100px minmax(0, 720px);
    justify-content: center;
    gap: 32px;
    width: min(980px, calc(100% - 48px));
    margin: 0 auto 92px;
    padding: 44px 0;
    position: relative
}

.before-writing::before,
.before-writing::after {
    content: "";
    position: absolute;
    left: 50%;
    width: min(780px, 84%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), rgba(255, 102, 0, .35), rgba(255, 255, 255, .07), transparent)
}

.before-writing::before {
    top: 0
}

.before-writing::after {
    bottom: 0
}

.before-writing__ornament {
    color: #ff6600;
    font-size: 4rem;
    text-align: center;
    padding-top: 10px
}

.before-writing h2 {
    margin: 5px 0 12px;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1
}

.before-writing p {
    margin: .65rem 0;
    color: #999;
    line-height: 1.7
}

.before-writing__note {
    color: #666 !important;
    font-style: italic
}

.elsewhere {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 90px
}

.elsewhere__heading {
    text-align: center;
    margin-bottom: 36px
}

.elsewhere__heading .kicker {
    justify-content: center
}

.elsewhere__heading h2 {
    margin: 5px 0 0;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1
}

.elsewhere__heading>p:last-child {
    margin: 12px 0 0;
    color: #777
}

.social-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 22px 30px;
    padding: 12px 0
}

.social {
    position: relative;
    display: grid;
    justify-items: center;
    width: 126px;
    padding: 8px 4px;
    text-decoration: none;
    transition: transform .2s ease
}

.social::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(#f3f3f1, #0707078a) padding-box, linear-gradient(145deg, rgba(255, 102, 0, .98) 0%, rgba(255, 178, 112, .86) 20%, rgba(236, 239, 242, .96) 44%, rgba(159, 166, 173, .72) 67%, rgba(255, 102, 0, .88) 100%) border-box;
    box-shadow: 0 0 12px rgba(255, 255, 255, .11), 0 0 24px rgba(255, 102, 0, .10), inset 0 0 10px rgba(255, 255, 255, .04);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease
}

.social img {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin-top: 14px;
    border-radius: 50%;
    clip-path: circle(50%);
    filter: grayscale(1) brightness(0) invert(0) drop-shadow(0 0 5px rgba(255, 255, 255, .24));
    opacity: .92;
    transition: filter .2s ease, transform .2s ease, opacity .2s ease
}

.social span {
    position: relative;
    z-index: 1;
    margin-top: 17px;
    color: #9b9b9b;
    font: 700 .68rem/1.3 var(--ui);
    letter-spacing: .055em;
    text-align: center;
    transition: color .2s ease
}

.social:hover,
.social:focus-visible {
    transform: translateY(-4px)
}

.social:hover::before,
.social:focus-visible::before {
    background: linear-gradient(#f3f3f1, #f3f3f1) padding-box, linear-gradient(145deg, #050505 0%, rgba(84, 84, 84, .98) 20%, rgba(244, 246, 248, .98) 46%, rgba(130, 136, 142, .88) 70%, #090909 100%) border-box;
    box-shadow: 0 0 16px rgba(255, 255, 255, .25), 0 0 38px rgba(255, 255, 255, .14), inset 0 0 14px rgba(255, 255, 255, .05);
    transform: translateX(-50%) scale(1.025)
}

.social:hover img,
.social:focus-visible img {
    filter: grayscale(0) brightness(0) invert(1) drop-shadow(0 0 8px #ff6600);
    opacity: 1;
    transform: scale(1.025)
}

.social:hover span,
.social:focus-visible span {
    color: #f2f2ef
}

.social--placeholder {
    cursor: default
}

.elsewhere__note {
    text-align: center;
    color: #555;
    font-size: .85rem;
    font-style: italic;
    margin-top: 22px
}

.contact-desk {
    margin-top: 60px;
    background: linear-gradient(180deg, rgba(255, 102, 0, .045), transparent 42%), rgba(0, 0, 0, .32)
}

.contact-desk__heading {
    padding: 54px 36px 38px;
    text-align: center
}

.contact-desk__heading .kicker {
    justify-content: center
}

.contact-desk__heading h2 {
    margin: .35rem 0 0;
    font-size: clamp(2.8rem, 4.6vw, 4.8rem);
    line-height: 1
}

.contact-desk__links {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.contact-desk__links a {
    min-height: 315px;
    padding: 36px 24px;
    text-align: center;
    text-decoration: none;
    border-right: 1px solid #242424;
    background: linear-gradient(180deg, rgba(255, 102, 0, 0), rgba(255, 102, 0, 0));
    transition: background .2s ease
}

.contact-desk__links a:last-child {
    border-right: 0
}

.contact-desk__links a:hover,
.contact-desk__links a:focus-visible {
    background: linear-gradient(180deg, rgba(255, 102, 0, .08), rgba(255, 102, 0, .012))
}

.contact-desk__links img {
    display: block;
    width: 102px;
    height: 102px;
    object-fit: contain;
    margin: 0 auto 16px
}

.contact-desk__links span {
    display: block;
    color: var(--orange);
    font: 700 .62rem/1.2 var(--ui);
    letter-spacing: .12em
}

.contact-desk__links strong {
    display: block;
    margin-top: 11px;
    font: 400 1.65rem/1.1 var(--display)
}

.contact-desk__links small {
    display: block;
    max-width: 220px;
    margin: 10px auto 0;
    color: #777;
    font: 400 .9rem/1.45 var(--body)
}

@media(max-width:800px) {
    .routing__wire {
        left: 20px
    }

    .route {
        width: calc(100% - 52px);
        justify-self: end !important;
        grid-template-columns: 78px minmax(0, 1fr)
    }

    .route__marker,
    .route--left .route__marker,
    .route--right .route__marker {
        left: -39px;
        right: auto
    }

    .route img {
        width: 72px;
        height: 72px
    }

    .before-writing {
        grid-template-columns: 60px 1fr
    }

    .before-writing__ornament {
        font-size: 2.8rem
    }

    .contact-desk__links {
        grid-template-columns: repeat(2, 1fr)
    }

    .contact-desk__links a:nth-child(2) {
        border-right: 0
    }

    .contact-desk__links a:nth-child(n+3) {
        border-top: 1px solid #242424
    }
}

@media(max-width:560px) {

    .routing,
    .before-writing,
    .elsewhere {
        width: calc(100% - 28px)
    }

    .routing__wire {
        left: 8px
    }

    .route {
        width: calc(100% - 28px);
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 13px
    }

    .route__marker,
    .route--left .route__marker,
    .route--right .route__marker {
        left: -27px
    }

    .route img {
        width: 54px;
        height: 54px
    }

    .before-writing {
        grid-template-columns: 1fr;
        gap: 0
    }

    .before-writing__ornament {
        display: none
    }

    .social-cloud {
        gap: 18px 10px
    }

    .social {
        width: 100px
    }

    .social::before {
        top: 10px;
        width: 84px;
        height: 84px
    }

    .social img {
        width: 72px;
        height: 72px;
        margin-top: 8px
    }

    .social span {
        margin-top: 15px
    }

    .contact-desk__links {
        grid-template-columns: 1fr
    }

    .contact-desk__links a,
    .contact-desk__links a:nth-child(2) {
        min-height: 260px;
        border-right: 0;
        border-top: 1px solid #242424
    }

    .contact-desk__links a:first-child {
        border-top: 0
    }
}

@media(prefers-reduced-motion:reduce) {

    .social,
    .social img,
    .contact-desk__links a {
        transition: none
    }
}