/* =========================================================
   CONTACT
   ========================================================= */

.contact-page {
    width: 100%;
}


/* =========================================================
   INTRO
   ========================================================= */

.contact-intro {
    width: 100%;
    margin-bottom: 92px;
}


.contact-eyebrow {
    margin: 0 0 12px;

    color: var(--color-copper);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.contact-intro h1 {
    margin: 0;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: 1.04;
}


.contact-intro-copy {
    width: 100%;
    margin-top: 34px;
}


.contact-intro-copy p,
.contact-copy p,
.contact-directions p,
.contact-goodbye-copy p {
    width: 100%;
    margin: 0 0 20px;

    color: var(--color-text);

    font-size: 1.05rem;
    line-height: 1.8;
}


.contact-intro-copy p:last-child,
.contact-copy p:last-child,
.contact-directions p:last-child,
.contact-goodbye-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MAP
   ========================================================= */

.contact-map-section {
    width: 100%;
    margin-top: 100px;
}


.contact-map-canvas {
    width: 100%;
    height: clamp(420px, 52vw, 640px);

    background: rgba(31, 58, 46, 0.06);
}


.villa-map-marker {
    width: 44px;
    height: 44px;

    border: 4px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;

    background: var(--color-copper);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   DIRECTIONS
   ========================================================= */

.contact-directions {
    width: 100%;
    margin-top: 48px;
}


.contact-directions h2,
.contact-owner h2,
.contact-goodbye h2 {
    margin: 0 0 30px;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.15;
}


.contact-actions {
    margin-top: 34px;
}


/* =========================================================
   OWNER
   ========================================================= */

.contact-owner {
    width: 100%;
    margin-top: 120px;

    padding-top: clamp(48px, 7vw, 78px);

    border-top: 1px solid rgba(31, 58, 46, 0.12);
}


.contact-copy {
    width: 100%;
}


.contact-owner-details {
    margin-top: 40px;
}


.contact-owner-name {
    margin-bottom: 8px;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: 1.65rem;
}


.contact-owner-phone {
    display: inline-block;

    color: var(--color-copper);

    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.3;
    text-decoration: none;
}


.contact-owner-phone:hover {
    text-decoration: underline;
}


/* =========================================================
   ARRIVAL
   ========================================================= */

.contact-arrival {
    position: relative;

    width: 100%;
    height: clamp(440px, 58vw, 720px);

    margin: 125px 0 0;

    overflow: hidden;

    background: rgba(31, 58, 46, 0.05);
}


.contact-arrival img {
    position: absolute;

    top: -10%;
    left: 0;

    width: 100%;
    height: 120%;

    object-fit: cover;

    transform:
        translate3d(
            0,
            var(--parallax-y, 0px),
            0
        );

    will-change: transform;
}


/* =========================================================
   GOODBYE
   ========================================================= */

.contact-goodbye {
    width: 100%;
    margin-top: 100px;
}


.contact-goodbye-copy {
    width: 100%;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .contact-intro {
        margin-bottom: 68px;
    }


    .contact-map-section {
        margin-top: 72px;
    }


    .contact-map-canvas {
        height: 420px;
    }


    .contact-owner {
        margin-top: 82px;
    }


    .contact-arrival {
        height: 58vw;
        min-height: 280px;
        max-height: 430px;

        margin-top: 84px;
    }


    .contact-arrival img {
        top: 0;

        height: 100%;

        transform: none !important;

        will-change: auto;
    }


    .contact-goodbye {
        margin-top: 76px;
    }


    .contact-actions .button {
        width: 100%;
        text-align: center;
    }

}


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

    .contact-arrival img {
        top: 0;

        height: 100%;

        transform: none !important;

        will-change: auto;
    }

}