.floorplan-section {
    width: 100%;
    overflow: hidden;

    background: #e4d5b8;
}


.floorplan-layout {
    width: 100%;

    min-height:
        clamp(
            36rem,
            48vw,
            50rem
        );

    display: grid;

    grid-template-columns:
        26%
        74%;
}


.floorplan-sidebar {
    position: relative;

    z-index: 5;

    width: 100%;

    background: #31597d;

    color: #ffffff;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(2.5rem, 4vw, 4rem)
        clamp(3rem, 5vw, 5rem);

    display: flex;

    flex-direction: column;
}


.floorplan-title-wrap h2 {
    margin: 0;

    color: #eadbc6;

    font-family: 'Big Caslon';

    font-size:
        clamp(
            1.8rem,
            2.4vw,
            2.7rem
        );

    line-height: 1;
}


.floorplan-details-wrap {
    position: relative;

    flex: 1;

    display: grid;

    margin-top:
        clamp(
            4rem,
            7vw,
            7rem
        );
}


.floorplan-details {
    grid-area: 1 / 1;

    width: 100%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}


.floorplan-details.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.floorplan-details h3 {
    margin: 0;

    color: #ffffff;

    font-family: 'Big Caslon';

    font-size:
        clamp(
            1.35rem,
            1.9vw,
            2rem
        );

    line-height: 1.15;
}


.floorplan-details span{
	font-size: 33pt;
}

.floorplan-title-line {
    position: relative;

    width: 100%;

    height: 0.08rem;

    margin:
        0.5rem
        0
        clamp(2rem, 3vw, 3rem);

    background: #eadbc6;
}


.floorplan-title-line::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 0.3rem;
    height: 0.3rem;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background: #eadbc6;
}


.floorplan-spec {
    display: flex;

    flex-direction: column;

    margin-bottom:
        clamp(
            1rem,
            1.8vw,
            1.5rem
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.floorplan-spec-label {
    margin-bottom: 0.15rem;

    font-size:
        clamp(
            0.65rem,
            0.8vw,
            0.82rem
        ) !important;
	font-family: 'Avenir';
}


.floorplan-spec strong {
    font-size:
        clamp(
            0.95rem,
            1.25vw,
            1.25rem
        );

    line-height: 1.15;
	
	font-family: 'Avenir';
}


.floorplan-room-image {
    width: 100%;

    margin-top:
        clamp(
            1.8rem,
            3vw,
            3rem
        );
}


.floorplan-room-image picture {
    display: block;

    width: 100%;
}


.floorplan-room-image img {
    display: block;

    width:
        clamp(
            8rem,
            13vw,
            13rem
        );

    max-width: 100%;

    height: auto;

    object-fit: contain;
}


.floorplan-main {
    position: relative;

    width: 100%;

    min-width: 0;

    background: #e4d5b8;
}


.floorplan-visual {
    position: relative;

    width: 100%;

    min-height:
        clamp(
            36rem,
            48vw,
            50rem
        );

    display: grid;

    overflow: hidden;
}


.floorplan-picture {
    grid-area: 1 / 1;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        clamp(3.5rem, 5vw, 5rem)
        clamp(12rem, 17vw, 16rem)
        clamp(3.5rem, 5vw, 5rem)
        clamp(3rem, 5vw, 5rem);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}


.floorplan-picture.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.floorplan-picture img {
    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height:
        clamp(
            27rem,
            38vw,
            39rem
        );

    object-fit: contain;

    margin: auto;
}


.floorplan-tabs {
    position: absolute;

    z-index: 20;

    right:
        clamp(
            2rem,
            3.5vw,
            4rem
        );

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    gap:
        clamp(
            0.55rem,
            1vw,
            0.8rem
        );
}


.floorplan-tab {
    width:
        clamp(
            8.5rem,
            12vw,
            11rem
        );

    padding:
        clamp(
            0.42rem,
            0.7vw,
            0.62rem
        )
        clamp(
            0.7rem,
            1vw,
            1rem
        );

    border:
        0.08rem solid
        #31597d;

    background: transparent;

    color: #31597d;

    font-family: 'Avenir';

    font-size:
        clamp(
            0.52rem,
            0.7vw,
            0.72rem
        );

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


.floorplan-tab.active {
    background: #31597d;

    color: #ffffff;
}


.floorplan-virtual-button {
    position: absolute;

    z-index: 25;

    top:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    right:
        clamp(
            2rem,
            4vw,
            4rem
        );

    width:
        clamp(
            4rem,
            6vw,
            6rem
        );

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    transition:
        transform 0.25s ease;
}


.floorplan-virtual-button:hover {
    transform:
        scale(1.05);
}


.floorplan-virtual-button picture,
.floorplan-virtual-button img {
    display: block;

    width: 100%;

    height: auto;
}


/* Portrait - Phone + Tablet */

@media (max-width: 1024px) and (orientation: portrait) {

    .floorplan-section {
        width: 100%;
        overflow: hidden;
        background: #e4d5b8;
    }

    .floorplan-layout {
        width: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
    }

    .floorplan-sidebar {
        display: contents;
    }

    .floorplan-title-wrap {
        order: 1;

        width: 100%;

        padding:
            clamp(1.6rem, 7vw, 2.5rem)
            5%
            clamp(1rem, 4vw, 1.4rem);

        background: #073760;

        text-align: center;
    }

    .floorplan-title-wrap h2 {
        margin: 0;

        color: #eadbc6;

        font-family: "Big Caslon";

        font-size:
            clamp(
                1.5rem,
                6vw,
                2.2rem
            );

        font-weight: 400;

        line-height: 1;
    }

    .floorplan-main {
        order: 2;

        position: relative;

        width: 100%;

        display: flex;
        flex-direction: column;

        background: #e4d5b8;
    }

    .floorplan-tabs {
        position: relative;

        order: 1;

        top: auto;
        right: auto;

        transform: none;

        z-index: 20;

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0;

        padding:
            0
            10%;

        background: #073760;
    }

    .floorplan-tab {
        width: 100%;

        min-width: 0;

        padding:
            clamp(
                0.35rem,
                1.8vw,
                0.5rem
            )
            0.2rem;

        border:
            0.08rem solid
            #e4d5b8;

        background: #e4d5b8;

        color: #073760;

        font-family: "Avenir";

        font-size:
            clamp(
                0.52rem,
                2.2vw,
                0.7rem
            );

        font-weight: 600;

        white-space: nowrap;

        text-align: center;
    }

    .floorplan-tab.active {
        background: #e4d5b8;

        color: #073760;
    }

    .floorplan-visual {
        position: relative;

        order: 2;

        width: 100%;

        min-height: 0;
        height: auto;

        display: block;

        overflow: visible;

        background: #e4d5b8;
    }

    .floorplan-picture {
        position: relative;

        width: 100%;
        height: auto;

        display: none;

        padding:
            clamp(
                1.2rem,
                5vw,
                2rem
            )
            13%
            clamp(
                2.5rem,
                9vw,
                3.5rem
            );

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }

    .floorplan-picture.active {
        display: block;
    }

    .floorplan-picture img {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;
        max-height: none;

        margin: 0 auto;

        object-fit: contain;
    }

    .floorplan-virtual-button {
        position: absolute;

        z-index: 40;

        top: auto;
        right: auto;

        left:
            clamp(
                0.7rem,
                5vw,
                1.4rem
            );

        bottom:
            clamp(
                -2.1rem,
                -8vw,
                -1.4rem
            );

        width:
            clamp(
                3.5rem,
                16vw,
                4.8rem
            );

        padding: 0;

        border: 0;

        background: transparent;
    }

    .floorplan-virtual-button picture,
    .floorplan-virtual-button img {
        display: block;

        width: 100%;
        height: auto;
    }

    .floorplan-details-wrap {
        order: 3;

        position: relative;

        width: 100%;

        min-height: 0;

        margin: 0;

        display: block;

        background: #31597d;
    }

    .floorplan-details {
        width: 100%;

        display: none;

        padding:
            clamp(
                1.15rem,
                5vw,
                1.8rem
            )
            4.5%;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }

        .floorplan-details.active {
        display: grid;
        grid-template-columns: 28% 0.08rem 35% 28%;
        grid-template-rows: auto auto;
        column-gap: 2%;
        row-gap: clamp(1.45rem, 2vw, 0.8rem);
        align-items: center;
    }

    .floorplan-details h3 {
        grid-column: 1;

        grid-row: 1 / 3;

        align-self: center;

        margin: 0;

        color: #eadbc6;

        font-family: "Big Caslon";

        font-size:
            clamp(
                0.95rem,
                4.3vw,
                1.45rem
            );

        font-weight: 400;

        line-height: 1.05;
    }

    .floorplan-title-line {
        grid-column: 2;

        grid-row: 1 / 3;

        position: relative;

        align-self: stretch;

        width: 0.08rem;

        min-height:
            clamp(
                5rem,
                23vw,
                7rem
            );

        height: 100%;

        margin: 0;

        background: #eadbc6;
    }

    .floorplan-title-line::after {
        content: "";

        position: absolute;

        top: 0;

        left: 50%;

        right: auto;

        width:
            clamp(
                0.32rem,
                1.6vw,
                0.45rem
            );

        height:
            clamp(
                0.32rem,
                1.6vw,
                0.45rem
            );

        transform:
            translate(-50%, -50%);

        border-radius: 50%;

        background: #eadbc6;
    }

    .floorplan-spec {
        grid-column: 3;

        display: flex;

        flex-direction: column;

        min-width: 0;

        margin: 0;

        padding: 0;

        border: 0;
    }

    .floorplan-title-line + .floorplan-spec {
        grid-row: 1;

        align-self: end;
    }

    .floorplan-spec + .floorplan-spec {
        grid-row: 2;

        align-self: start;
    }

    .floorplan-spec-label {
        display: block;

        margin:
            0
            0
            0.1rem;

        color: #eadbc6;

        font-family: "Avenir";

        font-size:
            clamp(
                0.48rem,
                2vw,
                0.65rem
            );

        font-weight: 400;

        line-height: 1.1;
    }

    .floorplan-spec strong {
        display: block;

        color: #ffffff;

        font-family: "Avenir";

        font-size:
            clamp(
                0.72rem,
                3.1vw,
                1rem
            );

        font-weight: 700;

        line-height: 1.08;

        white-space: normal;

        word-break: normal;
    }

    .floorplan-room-image {
        grid-column: 4;

        grid-row: 1 / 3;

        align-self: center;

        width: 100%;

        margin: 0;
    }

    .floorplan-room-image picture {
        display: block;

        width: 100%;
    }

    .floorplan-room-image img {
        display: block;

        width: 100%;

        max-width:
            clamp(
                4.2rem,
                19vw,
                6.2rem
            );

        height: auto;

        margin: 0 auto;

        object-fit: contain;
    }
}


@media (max-width: 480px) and (orientation: portrait) {

    .floorplan-title-wrap {
        padding:
            1.5rem
            5%
            1rem;
    }

    .floorplan-title-wrap h2 {
        font-size:
            clamp(
                1.25rem,
                5.5vw,
                1.7rem
            );
    }

    .floorplan-tabs {
        padding:
            0
            10%;
    }

    .floorplan-tab {
        padding:
            0.32rem
            0.15rem;

        font-size:
            clamp(
                0.45rem,
                2.1vw,
                0.6rem
            );
    }

    .floorplan-picture {
        padding:
            1rem
            13%
            2.8rem;
    }

    .floorplan-virtual-button {
        left: 0.7rem;

        bottom: -2rem;

        width:
            clamp(
                3.3rem,
                16vw,
                4rem
            );
    }

    .floorplan-details {
        padding:
            1.15rem
            3.5%;
    }

   .floorplan-details.active {
        grid-template-columns: 26% -1.93rem 48% 29%;
        column-gap: 2%;
    }

        .floorplan-details h3 {
        font-size: clamp(1.5rem, 4.2vw, 5.1rem);
    }

    .floorplan-title-line {
        width: 0.07rem;

        min-height:
            clamp(
                4.8rem,
                24vw,
                6rem
            );
    }

    .floorplan-title-line::after {
        width: 0.34rem;

        height: 0.34rem;
    }

    .floorplan-spec-label {
        font-size:
            clamp(
                0.43rem,
                2vw,
                0.55rem
            );
    }

        .floorplan-spec strong {
        font-size: clamp(1.3rem, 1vw, 0.82rem);
        line-height: 1.05;
    }

    .floorplan-room-image img {
        max-width:
            clamp(
                5.5rem,
                19vw,
                4.8rem
            );
    }
}
@media (max-width: 1024px) and (orientation: portrait) {

    .floorplan-tabs {
        position: relative;

        order: 1;

        top: auto;
        right: auto;

        transform: none;

        z-index: 20;

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items: end;

        gap: 0.35rem;

        padding:
            0
            12%;

        margin: 0;

        background: #073760;
    }


    .floorplan-tab {
        position: relative;

        width: 100%;

        min-width: 0;

        margin: 0;

        padding:
            0.8rem
            0.35rem
            0.95rem;

        border:
            0.08rem solid
            rgba(234, 219, 198, 0.65);

        border-bottom: 0;

        background: transparent;

        color: #ffffff;

        font-family: "Avenir";

        font-size:
            clamp(
                0.72rem,
                3vw,
                1rem
            );

        font-weight: 600;

        line-height: 1;

        white-space: nowrap;

        text-align: center;

        cursor: pointer;

        box-sizing: border-box;

        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease;
    }


    .floorplan-tab.active {
        border-color: #e4d5b8;

        background: #e4d5b8;

        color: #073760;
    }


    .floorplan-tab.active::after {
        content: "";

        position: absolute;

        left: 50%;

        bottom: 0.28rem;

        width: 72%;

        height: 0.12rem;

        transform:
            translateX(-50%);

        background: #073760;
    }


    .floorplan-tab:not(.active)::after {
        display: none;
    }

}


@media (max-width: 480px) and (orientation: portrait) {

    .floorplan-tabs {
        gap: 0.25rem;

        padding:
            0
            11%;
    }


    .floorplan-tab {
        padding:
            0.65rem
            0.15rem
            0.82rem;

        font-size:
            clamp(
                0.62rem,
                3vw,
                0.8rem
            );
    }


    .floorplan-tab.active::after {
        bottom: 0.22rem;

        width: 74%;

        height: 0.1rem;
    }

}

.zoomin {
    display: block;

    transform-origin: center;

    animation:
        zoomin
        1.5s
        cubic-bezier(.36, .07, .57, .99)
        infinite;
}


@keyframes zoomin {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}

.virtual-tour-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.virtual-tour-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.virtual-tour-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.8
        );

    backdrop-filter:
        blur(0.2rem);
}


.virtual-tour-box {
    position: relative;

    z-index: 2;

    width: min(90vw, 75rem);

    aspect-ratio: 16 / 9;

    background: #000;

    overflow: hidden;

    box-shadow:
        0 1rem 3rem
        rgba(
            0,
            0,
            0,
            0.35
        );
}


.virtual-tour-box iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


.virtual-tour-close {
    position: absolute;

    z-index: 10;

    top: 0.7rem;
    right: 0.7rem;

    width: 2.5rem;
    height: 2.5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.7
        );

    color: #ffffff;

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;
}


.virtual-tour-close:hover {
    background:
        rgba(
            0,
            0,
            0,
            0.95
        );
}


body.virtual-tour-open {
    overflow: hidden;
}


@media (max-width: 1024px) and (orientation: portrait) {

    .virtual-tour-modal {
        padding: 4%;
    }


    .virtual-tour-box {
        width: 100%;

        aspect-ratio: 9 / 14;

        max-height: 88vh;
    }


    .virtual-tour-close {
        top: 0.5rem;
        right: 0.5rem;

        width: 2.3rem;
        height: 2.3rem;

        font-size: 1.6rem;
    }

}


@media (max-width: 1024px) and (orientation: landscape) {

    .virtual-tour-modal {
        padding: 2%;
    }


    .virtual-tour-box {
        width: 92vw;

        max-height: 92vh;
    }

}