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

    background: #31597d;
}


.siteplan-layout {
    width: 100%;

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

    display: grid;

    grid-template-columns:
        64%
        36%;
}


.siteplan-map-area {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;
}


.siteplan-map-stage {
    position: absolute;

    inset:
        8%
        4%
        8%
        4%;

    display: flex;

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

    overflow: hidden;

    touch-action: none;

    user-select: none;
}


.siteplan-map-image {
    display: block;

    width: 90%;
    height: auto;

    max-height: 100%;

    object-fit: contain;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transform-origin: center center;

    transition:
        transform 0.3s ease;

    user-select: none;

    -webkit-user-drag: none;
}


.siteplan-map-image.zoomed {
    cursor: grab;
}


.siteplan-map-image.dragging {
    cursor: grabbing;

    transition: none;
}


.siteplan-map-controls {
    position: absolute;

    left: 4%;
    bottom: 10%;

    z-index: 20;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;
}


.siteplan-zoom-btn {
    width:
        clamp(
            1.8rem,
            2.3vw,
            2.3rem
        );

    aspect-ratio: 1 / 1;

    display: flex;

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

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #ead9bb;

    color: #31597d;

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

    font-size: 1.4rem;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.siteplan-zoom-btn:hover {
    transform: scale(1.08);
}


.siteplan-zoom-btn:active {
    transform: scale(0.92);
}


.siteplan-info {
    width: 100%;

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

    display: flex;

    flex-direction: column;

    color: #ffffff;
}


.siteplan-title {
    order: 1;

    margin:
        0
        0
        clamp(2rem, 3.5vw, 3.5rem);

    color: #ead9bb;

    font-family: 'Big Caslon';

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

    line-height: 1;
}


.siteplan-legend {
    order: 2;
}


.siteplan-divider {
    order: 3;

    position: relative;

    width: 100%;

    height: 0.08rem;

    margin:
        clamp(1.5rem, 2.5vw, 2.2rem)
        0;

    background: #ead9bb;
}


.siteplan-divider::before,
.siteplan-divider::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 0.3rem;
    height: 0.3rem;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #ead9bb;
}


.siteplan-divider::before {
    left: 0;
}


.siteplan-divider::after {
    right: 0;
}


.siteplan-types {
    order: 4;

    display: grid;

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

    column-gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );
}


.siteplan-type-column {
    display: flex;

    flex-direction: column;

    gap: 0.65rem;
}


.siteplan-type-row {
    display: grid;

    grid-template-columns:
        2.5rem
        1.5rem
        minmax(0, 1fr);

    align-items: center;

    column-gap: 0.45rem;

    color: #ffffff;

    font-family: 'Avenir';

    font-size:
        clamp(
            0.58rem,
            0.5vw,
            0.78rem
        );

    line-height: 1.18;
}


.siteplan-type-row strong {
    font-weight: 600;
}


.siteplan-swatch {
    width: 1.5rem;

    aspect-ratio: 1 / 1;

    display: flex;

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

    color: #ffffff;

    font-size: 0.65rem;

    font-weight: 700;
}


.type-a {
    background: #f4e8c6;
}


.type-a1 {
    background: #f0b889;
}


.type-a2 {
    background: #ead985;
}


.type-b {
    background: #c89cc4;
}


.type-c {
    background: #afc76c;
}


.type-c1 {
    background: #acc7d5;
}


.type-c2 {
    background: #e88791;
}


.type-bumi {
    background: transparent;
}


.type-bungalow {
    background: #c9d9de;
}


.siteplan-legend h3 {
    margin:
        0
        0
        0.8rem;

    color: #ead9bb;

    font-family: 'Big Caslon';

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.3rem
        );
}


.siteplan-legend-grid {
    display: grid;

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

    column-gap:
        clamp(
            1rem,
            2vw,
            2rem
        );
}


.siteplan-legend-column {
    display: flex;

    flex-direction: column;

    gap: 0.4rem;
}


.siteplan-legend-row {
    display: grid;

    grid-template-columns:
        1.35rem
        minmax(0, 1fr);

    align-items: center;

    gap: 0.35rem;

    color: #ffffff;

   font-family: 'Avenir';

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

    line-height: 1.15;
}


.siteplan-number {
    width: 1rem;
    height: 1rem;

    display: flex;

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

    border-radius: 50%;

    background: #000000;

    color: #ffffff;

    font-size: 0.6rem;

    font-weight: 700;
}


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

    .siteplan-layout {
        min-height: 0;

        display: flex;

        flex-direction: column;
    }


    .siteplan-info {
        display: contents;
    }


    .siteplan-title {
        order: 1;

        width: 100%;

        margin: 0;

        padding:
            clamp(2.5rem, 10vw, 4rem)
            10%
            clamp(2rem, 7vw, 3rem);

        text-align: center;

        font-size:
            clamp(
                1.8rem,
                7vw,
                2.6rem
            );
    }


    .siteplan-types {
        order: 2;

        width: 100%;

        padding:
            0
            9%
            clamp(2rem, 7vw, 3rem);

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

        column-gap:
            clamp(
                1rem,
                6vw,
                2.5rem
            );
    }


    .siteplan-type-column {
        gap:
            clamp(
                0.7rem,
                2.5vw,
                1rem
            );
    }


    .siteplan-type-row {
        grid-template-columns:
            clamp(2.5rem, 12vw, 3.5rem)
            clamp(1rem, 4.5vw, 1.4rem)
            minmax(0, 1fr);

        column-gap:
            clamp(
                0.3rem,
                1.8vw,
                0.5rem
            );

        font-size:
            clamp(
                0.56rem,
                2.4vw,
                0.76rem
            );
    }


    .siteplan-swatch {
        width:
            clamp(
                1rem,
                4.5vw,
                1.35rem
            );
    }


    .siteplan-divider {
        order: 3;

        width: 82%;

        margin:
            0
            auto
            clamp(2.5rem, 9vw, 4rem);
    }


    .siteplan-map-area {
        order: 4;

        width: 100%;

        min-height:
            clamp(
                17rem,
                85vw,
                34rem
            );
    }


    .siteplan-map-stage {
        inset:
            0
            3%
            7%;
    }


    .siteplan-map-image {
        width: 96%;

        max-height: 95%;
    }


    .siteplan-map-controls {
        left: 11%;

        bottom: 1%;
    }


    .siteplan-zoom-btn {
        width:
            clamp(
                2rem,
                9vw,
                2.7rem
            );

        font-size:
            clamp(
                1.2rem,
                5vw,
                1.6rem
            );
    }


    .siteplan-legend {
        order: 5;

        width: 100%;

        padding:
            clamp(2.5rem, 9vw, 4rem)
            8%
            clamp(3rem, 10vw, 5rem);
    }


    .siteplan-legend h3 {
        margin-bottom:
            clamp(
                1rem,
                4vw,
                1.5rem
            );

        padding-left: 7%;

        font-size:
            clamp(
                1.3rem,
                5vw,
                1.8rem
            );
    }


    .siteplan-legend-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap:
            clamp(
                1rem,
                5vw,
                2rem
            );
    }


    .siteplan-legend-column {
        gap:
            clamp(
                0.35rem,
                1.5vw,
                0.55rem
            );
    }


    .siteplan-legend-row {
        grid-template-columns:
            clamp(1rem, 5vw, 1.3rem)
            minmax(0, 1fr);

        gap:
            clamp(
                0.25rem,
                1.2vw,
                0.4rem
            );

        font-size:
            clamp(
                0.62rem,
                2.7vw,
                0.85rem
            );
    }


    .siteplan-number {
        width:
            clamp(
                1rem,
                4.6vw,
                1.3rem
            );

        height:
            clamp(
                1rem,
                4.6vw,
                1.3rem
            );

        font-size:
            clamp(
                0.55rem,
                2.3vw,
                0.72rem
            );
    }

}


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

    .siteplan-title {
        padding:
            2.2rem
            8%
            1.8rem;
    }


    .siteplan-types {
        padding:
            0
            7%
            2rem;
    }


    .siteplan-type-row {
        grid-template-columns:
            2.7rem
            1.05rem
            minmax(0, 1fr);

        font-size:
            clamp(
                0.52rem,
                2.5vw,
                0.67rem
            );
    }


    .siteplan-divider {
        width: 86%;

        margin-bottom: 2.5rem;
    }


    .siteplan-map-area {
        min-height:
            clamp(
                16rem,
                82vw,
                24rem
            );
    }


    .siteplan-legend {
        padding:
            2.5rem
            6%
            3.5rem;
    }


    .siteplan-legend-row {
        font-size:
            clamp(
                0.6rem,
                2.65vw,
                0.76rem
            );
    }

}


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

    .siteplan-layout {
        grid-template-columns:
            63%
            37%;

        min-height:
            clamp(
                30rem,
                90vh,
                42rem
            );
    }


    .siteplan-info {
        padding:
            3rem
            5%
            2.5rem
            4%;
    }


    .siteplan-title {
        margin-bottom: 2rem;

        font-size:
            clamp(
                1.5rem,
                3vw,
                2rem
            );
    }


    .siteplan-map-image {
        width: 92%;
    }


    .siteplan-map-controls {
        left: 4%;

        bottom: 8%;
    }


    .siteplan-legend-row {
        font-size:
            clamp(
                0.5rem,
                1.1vw,
                0.7rem
            );
    }


    .siteplan-type-row {
        grid-template-columns:
            2.5rem
            1.5rem
            minmax(0, 1fr);

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

}

.siteplan-bumi-row {
    grid-template-columns:
        2.5rem
        1.3rem
        minmax(0, 1fr);

    column-gap: 0.55rem;

    align-items: center;
}


.siteplan-bumi-mark {
    width:1.5rem;
    height: 1.5rem;

    display: flex;

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

    position: relative;

    overflow: hidden;

    background-color: #31597d;

    background-image:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 0.38rem,
            #ead9bb 0.38rem,
            #ead9bb 0.44rem,
            transparent 0.44rem,
            transparent 0rem
        );
}


.siteplan-bumi-b {
    position: relative;

    z-index: 2;

    color: #ffffff;

    font-family: 'Avenir';

    font-size: 0.8rem;

    font-weight: 700;

    line-height: 1;
}

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

    .siteplan-bumi-row {
        grid-template-columns:
            clamp(2.5rem, 9vw, 3.5rem)
            3rem
            minmax(0, -1fr);
		
		

        column-gap: 0.5rem;
    }


    .siteplan-bumi-mark {
        width: 1.3rem;
        height: 1.3rem;
    }


    .siteplan-bumi-b {
        font-size: 1rem;
    }

}