.precon-page
{
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #202020;

    background: #ffffff;
}


.precon-container
{
    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}


.precon-narrow
{
    max-width: 900px;
}


.precon-section
{
    padding-top: 75px;
    padding-bottom: 75px;
}


.precon-section-alt
{
    background: #f7f7f5;
}


.precon-section-label
{
    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #8a7657;
}


.precon-section h2
{
    margin-top: 0;
    margin-bottom: 30px;

    font-size: 36px;
    line-height: 1.15;
}


.precon-section h3
{
    margin-top: 0;
}


.precon-muted
{
    color: #777777;
}


.precon-copy
{
    line-height: 1.75;

    color: #444444;
}


.precon-copy-large
{
    font-size: 18px;
}


/* ---------------------------------------------------------
   STANDARD HERO
   Used when there is NO latitude / longitude
--------------------------------------------------------- */

.precon-hero
{
    padding-top: 120px;
    padding-bottom: 80px;

    background: #efefeb;
}


.precon-hero-image
{
    min-height: 620px;

    padding: 0;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;
}


.precon-hero-image .precon-container
{
    width: min(
        1180px,
        calc(100% - 40px)
    );
}


.precon-hero-content
{
    width: 100%;

    padding-bottom: 65px;

    color: #ffffff;
}


.precon-eyebrow
{
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.precon-hero h1
{
    max-width: 900px;

    margin-top: 0;
    margin-bottom: 12px;

    font-size: 56px;
    line-height: 1.05;
}


.precon-hero-image h1
{
    color: #ffffff;
}


.precon-hero-image .precon-location
{
    color: #ffffff;
}



/* ---------------------------------------------------------
   HERO + MAP
   Used when latitude AND longitude exist
--------------------------------------------------------- */

.precon-hero-split
{
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 2.1fr)
        minmax(330px, 1fr);

    min-height: 610px;

    background: #eeeeee;
}


.precon-hero-visual
{
    position: relative;

    min-height: 610px;

    overflow: hidden;

    background: #333333;
}


.precon-hero-main-image
{
    position: absolute;

    width: 100%;
    height: 100%;

    left: 0;
    top: 0;

    object-fit: cover;
}


.precon-hero-overlay
{
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.66) 0%,
            rgba(0, 0, 0, 0.16) 55%,
            rgba(0, 0, 0, 0.04) 100%
        );
}


.precon-hero-text
{
    position: absolute;

    left: max(
        28px,
        calc(
            (100vw - 1180px) / 2
        )
    );

    right: 35px;

    bottom: 55px;

    z-index: 2;

    color: #ffffff;
}


.precon-hero-text h1
{
    margin-top: 0;
    margin-bottom: 12px;

    max-width: 760px;

    font-size: 54px;

    line-height: 1.05;

    color: #ffffff;
}


.precon-hero-text .precon-location
{
    font-size: 18px;

    color: rgba(
        255,
        255,
        255,
        0.92
    );
}


.precon-hero-map
{
    min-height: 610px;

    background: #e5e5e5;
}


.precon-hero-map iframe
{
    display: block;

    width: 100%;
    height: 100%;

    min-height: 610px;

    border: 0;
}



/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media
(
    max-width: 900px
)
{

    /* Standard hero */

    .precon-hero-image
    {
        min-height: 480px;
    }


    .precon-hero h1
    {
        font-size: 42px;
    }


    .precon-hero-content
    {
        padding-bottom: 40px;
    }



    /* Split hero + map */

    .precon-hero-split
    {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .precon-hero-visual
    {
        min-height: 480px;
    }


    .precon-hero-map
    {
        min-height: 330px;
    }


    .precon-hero-map iframe
    {
        min-height: 330px;
    }


    .precon-hero-text
    {
        left: 28px;
        right: 28px;
        bottom: 36px;
    }


    .precon-hero-text h1
    {
        font-size: 40px;
    }

}


/* ---------------------------------------------------------
   GALLERY
--------------------------------------------------------- */

.precon-gallery-section
{
    padding-top: 0;
}


.precon-gallery
{
    display: grid;

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

    gap: 16px;
}


.precon-gallery-item
{
    display: block;

    overflow: hidden;

    border-radius: 10px;

    background: #eeeeee;
}


.precon-gallery-featured
{
    grid-column:
        span 2;
}


.precon-gallery-item img
{
    display: block;

    width: 100%;
    height: 360px;

    object-fit: cover;

    transition:
        transform 0.25s ease;
}


.precon-gallery-featured img
{
    height: 520px;
}


.precon-gallery-item:hover img
{
    transform:
        scale(1.015);
}



/* ---------------------------------------------------------
   COLLECTIONS
--------------------------------------------------------- */

.precon-collection
{
    margin-bottom: 70px;
}


.precon-collection:last-child
{
    margin-bottom: 0;
}


.precon-collection-header
{
    margin-bottom: 20px;
}


.precon-collection-header h3
{
    margin-bottom: 6px;

    font-size: 28px;
}


.precon-collection-image
{
    margin-bottom: 30px;

    overflow: hidden;

    border-radius: 12px;
}


.precon-collection-image img
{
    display: block;

    width: 100%;
    max-height: 520px;

    object-fit: cover;
}



/* ---------------------------------------------------------
   MODEL CARDS
--------------------------------------------------------- */

.precon-model-grid
{
    display: grid;

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

    gap: 24px;
}


.precon-model-card
{
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 12px;
}


.precon-model-image
{
    display: block;

    background: #f4f4f4;

    text-decoration: none;
}


.precon-model-image img
{
    display: block;

    width: 100%;
    height: 330px;

    object-fit: contain;
}


.precon-model-card-content
{
    padding: 22px;
}


.precon-model-code
{
    margin-bottom: 6px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.7px;

    color: #777777;
}


.precon-model-card h4
{
    margin-top: 0;
    margin-bottom: 8px;

    font-size: 21px;
}


.precon-model-size
{
    color: #666666;
}


.precon-floorplan-link
{
    display: inline-block;

    margin-top: 16px;

    color: #222222;

    font-weight: 700;

    text-decoration: none;
}


.precon-floorplan-link:hover
{
    text-decoration: underline;
}



/* ---------------------------------------------------------
   TABLE
--------------------------------------------------------- */

.precon-table-scroll
{
    overflow-x: auto;
}


.precon-table
{
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;
}


.precon-table th
{
    padding: 15px 14px;

    text-align: left;

    font-size: 12px;
    text-transform: uppercase;

    letter-spacing: 0.6px;

    background: #272523;
    color: #ffffff;
}


.precon-table td
{
    padding: 16px 14px;

    border-bottom: 1px solid #e5e5e5;
}


.precon-price
{
    font-weight: 700;

    white-space: nowrap;
}


.precon-disclaimer
{
    margin-top: 15px;

    font-size: 12px;

    color: #777777;
}



/* ---------------------------------------------------------
   DEPOSITS
--------------------------------------------------------- */

.precon-deposit-grid
{
    display: grid;

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

    gap: 24px;
}


.precon-deposit-card
{
    padding: 26px;

    border-radius: 12px;

    background: #ffffff;

    border: 1px solid #e2e2e2;
}


.precon-deposit-card h3
{
    margin-bottom: 20px;
}


.precon-deposit-row
{
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-top: 11px;
    padding-bottom: 11px;

    border-bottom: 1px solid #eeeeee;
}


.precon-deposit-row:last-child
{
    border-bottom: 0;
}


.precon-deposit-notes
{
    margin-top: 15px;

    font-size: 13px;

    color: #777777;
}



/* ---------------------------------------------------------
   FEATURES
--------------------------------------------------------- */

.precon-feature-grid
{
    display: grid;

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

    gap: 24px;
}


.precon-feature-card
{
    padding: 26px;

    background: #f7f7f5;

    border-radius: 12px;
}


.precon-feature-card h3
{
    margin-bottom: 18px;
}


.precon-feature-card ul
{
    margin: 0;

    padding-left: 20px;
}


.precon-feature-card li
{
    margin-bottom: 10px;

    line-height: 1.55;
}



/* ---------------------------------------------------------
   LOCATION
--------------------------------------------------------- */

.precon-location-layout
{
    display: grid;

    grid-template-columns:
        1fr 2fr;

    gap: 50px;
}


.precon-location-main h3
{
    font-size: 24px;
}


.precon-location-highlights
{
    display: grid;

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

    gap: 30px;
}


.precon-location-group ul
{
    margin: 0;

    padding-left: 18px;
}


.precon-location-group li
{
    margin-bottom: 9px;
}



/* ---------------------------------------------------------
   SITE PLAN
--------------------------------------------------------- */

.precon-site-plan
{
    display: block;

    overflow: hidden;

    border-radius: 12px;

    border: 1px solid #e2e2e2;
}


.precon-site-plan img
{
    display: block;

    width: 100%;
    height: auto;
}



/* ---------------------------------------------------------
   DOCUMENTS
--------------------------------------------------------- */

.precon-document-grid
{
    display: grid;

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

    gap: 18px;
}


.precon-document-card
{
    display: block;

    padding: 22px;

    color: #202020;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 10px;

    text-decoration: none;
}


.precon-document-card:hover
{
    border-color: #888888;
}


.precon-document-type
{
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    color: #8a7657;
}


.precon-document-title
{
    min-height: 45px;

    font-weight: 700;
}


.precon-document-action
{
    margin-top: 18px;

    font-size: 13px;

    color: #666666;
}



/* ---------------------------------------------------------
   ANALYSIS
--------------------------------------------------------- */

.precon-analysis-section
{
    background: #292724;

    color: #ffffff;
}


.precon-analysis-card
{
    padding: 45px;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 14px;
}


.precon-analysis-label
{
    margin-bottom: 20px;

    color: #d3b988;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.precon-analysis-commentary
{
    font-size: 20px;

    line-height: 1.65;
}


.precon-analysis-columns
{
    display: grid;

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

    gap: 50px;

    margin-top: 35px;
}


.precon-analysis-columns h3
{
    color: #ffffff;
}


.precon-analysis-columns li
{
    margin-bottom: 10px;

    line-height: 1.5;
}



/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.precon-cta
{
    padding-top: 70px;
    padding-bottom: 70px;

    background: #efe8dc;
}


.precon-cta-inner
{
    display: flex;

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

    gap: 50px;
}


.precon-cta h2
{
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 34px;
}


.precon-cta p
{
    max-width: 720px;

    margin-bottom: 0;

    line-height: 1.6;

    color: #555555;
}


.precon-cta-button
{
    display: inline-block;

    padding: 15px 24px;

    white-space: nowrap;

    color: #ffffff;

    background: #242321;

    border-radius: 6px;

    font-weight: 700;

    text-decoration: none;
}



/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media
(
    max-width: 900px
)
{

    .precon-section
    {
        padding-top: 55px;
        padding-bottom: 55px;
    }


    .precon-hero-image
    {
        min-height: 480px;
    }


    .precon-hero h1
    {
        font-size: 42px;
    }


    .precon-model-grid,
    .precon-deposit-grid,
    .precon-feature-grid,
    .precon-analysis-columns
    {
        grid-template-columns: 1fr;
    }


    .precon-document-grid
    {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .precon-location-layout
    {
        grid-template-columns: 1fr;
    }


    .precon-cta-inner
    {
        align-items: flex-start;

        flex-direction: column;
    }

}



@media
(
    max-width: 600px
)
{

    .precon-container
    {
        width:
            calc(
                100% - 28px
            );
    }


    .precon-hero-image
    {
        min-height: 410px;
    }


    .precon-hero-content
    {
        padding-bottom: 38px;
    }


    .precon-hero h1
    {
        font-size: 34px;
    }


    .precon-section h2
    {
        font-size: 29px;
    }


    .precon-gallery
    {
        grid-template-columns: 1fr;
    }


    .precon-gallery-featured
    {
        grid-column: auto;
    }


    .precon-gallery-item img,
    .precon-gallery-featured img
    {
        height: 280px;
    }


    .precon-model-image img
    {
        height: auto;
    }


    .precon-document-grid,
    .precon-location-highlights
    {
        grid-template-columns: 1fr;
    }


    .precon-analysis-card
    {
        padding: 28px 22px;
    }

}


/* =========================================================
   BUYER DECISION / ALAN'S TAKE
   Append this to the bottom of preconstruction.css
========================================================= */

.precon-analysis-top
{
    padding-top: 62px;
    padding-bottom: 62px;
}


.precon-analysis-top .precon-analysis-card
{
    padding: 42px;

    border-radius: 16px;
}


.precon-analysis-top h2
{
    max-width: 900px;
     color: #f5f3ef;

    margin-top: 8px;
    margin-bottom: 24px;

    font-size: 36px;
    line-height: 1.18;
}


.precon-analysis-top .precon-analysis-commentary
{
    margin-bottom: 28px;

    font-size: 17px;
    line-height: 1.7;
}


.precon-analysis-columns
{
    display: grid;

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

    gap: 22px;

    margin-top: 28px;
}


.precon-analysis-column
{
    padding: 26px;

    border-radius: 12px;
}


.precon-analysis-positive
{
    background: rgba(255,255,255,0.07);

    border: 1px solid rgba(255,255,255,0.11);
}


.precon-analysis-caution
{
    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.16);
}


.precon-analysis-column h3
{
    margin-top: 0;
    margin-bottom: 17px;
}


.precon-analysis-column ul
{
    margin: 0;

    padding-left: 20px;
}


.precon-analysis-column li
{
    margin-bottom: 12px;

    line-height: 1.6;
}


.precon-analysis-column li:last-child
{
    margin-bottom: 0;
}


.precon-analysis-cta
{
    display: flex;

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

    gap: 30px;

    margin-top: 32px;

    padding-top: 28px;

    border-top: 1px solid rgba(255,255,255,0.15);
}


.precon-analysis-cta-title
{
    margin-bottom: 6px;

    font-size: 18px;
    font-weight: 700;
}


.precon-analysis-cta-copy
{
    max-width: 680px;

    font-size: 14px;
    line-height: 1.6;

    opacity: 0.82;
}


.precon-analysis-cta-button
{
    flex: 0 0 auto;

    display: inline-flex;

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

    min-height: 48px;

    padding: 0 22px;

    border-radius: 7px;

    background: #ffffff;

    color: #222222;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.precon-analysis-cta-button:hover
{
    opacity: 0.92;
}


@media
(
    max-width: 820px
)
{

    .precon-analysis-columns
    {
        grid-template-columns: 1fr;
    }


    .precon-analysis-cta
    {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media
(
    max-width: 620px
)
{

    .precon-analysis-top .precon-analysis-card
    {
        padding: 28px 22px;
    }


    .precon-analysis-top h2
    {
        color: #f5f3ef;
        font-size: 29px;
    }


    .precon-analysis-cta-button
    {
        width: 100%;
    }

}