/*=========================================================
HOME - SAFE PLACE
=========================================================*/

.home_safe_place
{
    position:relative;

    width:100%;

    overflow:hidden;

    background:#050505;

    border-bottom:1px solid var(--aob-gold);
}

.home_safe_place_container
{
    width:min(100% - 2rem,90rem);

    margin:0 auto;
    padding:2rem 0;
}


/*=========================================================
COMMON IMAGE STYLES
=========================================================*/

.home_safe_place figure
{
    position:relative;

    width:100%;

    margin:0;

    overflow:hidden;

    background:#0d0a08;

    border:1px solid var(--aob-gold);
}

.home_safe_place figure img
{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        filter 450ms ease,
        transform 650ms ease;
}


/*=========================================================
TOP ROW - MOBILE FIRST
=========================================================*/

.home_safe_place_top
{
    display:grid;

    width:100%;

    grid-template-columns:1fr;

    gap:1rem;
}


/*=========================================================
MAIN BEDROOM IMAGE
=========================================================*/

.home_safe_place_bedroom
{
    width:100%;
}

.home_safe_place_bedroom img
{
    width:100%;
    height:auto;

    aspect-ratio:1347 / 757;

    object-fit:cover;
    object-position:center;
}


/*=========================================================
CREAM TEXT PANEL
=========================================================*/

.home_safe_place_panel
{
    display:flex;

    width:100%;
    min-height:34rem;

    padding:3rem 1.5rem;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:var(--aob-ivory);

    border:1px solid var(--aob-gold);

    box-shadow:
        0 1.5rem 3rem rgba(0,0,0,0.26),
        0 0.35rem 0.9rem rgba(0,0,0,0.18);

    color:var(--aob-black);

    text-align:center;
}


/*=========================================================
PANEL HEADER
=========================================================*/

.home_safe_place_header
{
    width:100%;
}

.home_safe_place_header .section_eyebrow
{
    color:var(--aob-champagne-gold);
}

.home_safe_place_header .section_divider_line
{
    background:rgba(184,138,79,0.75);
}

.home_safe_place_header .section_divider_heart
{
    color:var(--aob-champagne-gold);
}

.home_safe_place_header h2
{
    margin:0 0 1.5rem;

    color:var(--aob-black);

    font-family:var(--font_display);
    font-size:clamp(2.75rem,12vw,4.5rem);
    font-weight:500;
    letter-spacing:-0.025em;
    line-height:0.95;
    text-transform:uppercase;
}

.home_safe_place_header h2 span
{
    display:block;
}


/*=========================================================
PANEL COPY
=========================================================*/

.home_safe_place_panel_copy
{
    width:100%;
    max-width:28rem;

    margin:0 auto;
}

.home_safe_place_panel_copy p
{
    margin:0 auto 0.35rem;

    color:var(--aob-text);

    font-family:var(--font_display);
    font-size:1rem;
    line-height:1.65;
}

.home_safe_place_script
{
    margin:1.25rem auto 0;

    color:var(--aob-champagne-gold);

    font-family:var(--font_script);
    font-size:clamp(2.7rem,12vw,4rem);
    font-weight:400;
    line-height:0.95;
}

.home_safe_place_panel_heart
{
    display:block;

    margin:0.85rem auto 1.25rem;

    color:var(--aob-champagne-gold);

    font-size:1.25rem;
    line-height:1;
}


/*=========================================================
FEATURE LIST
=========================================================*/

.home_safe_place_features
{
    display:flex;

    width:100%;
    max-width:29rem;

    margin:0 auto;
    padding:0;

    flex-direction:column;
    align-items:center;

    gap:0.75rem;

    list-style:none;
}

.home_safe_place_features li
{
    display:flex;

    width:100%;

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

    gap:0.75rem;

    color:var(--aob-black);

    font-family:var(--font_display);
    font-size:0.82rem;
    letter-spacing:0.045em;
    line-height:1.35;
    text-align:center;
    text-transform:uppercase;
}

.home_safe_place_feature_heart
{
    flex:0 0 auto;

    color:var(--aob-champagne-gold);

    font-family:var(--font_display);
    font-size:1rem;
    line-height:1;
}


/*=========================================================
LOWER GALLERY - MOBILE FIRST
=========================================================*/

.home_safe_place_gallery
{
    display:grid;

    width:100%;

    margin-top:1.25rem;

    grid-template-columns:1fr;

    gap:1rem;
}


/*=========================================================
GALLERY IMAGES
=========================================================*/

.home_safe_place_lamp,
.home_safe_place_bed,
.home_safe_place_album
{
    min-height:18rem;
}

.home_safe_place_lamp img
{
    aspect-ratio:1.48 / 1;

    object-position:center;
}

.home_safe_place_bed img
{
    aspect-ratio:1.07 / 1;

    object-position:center;
}

.home_safe_place_album img
{
    aspect-ratio:2.2 / 1;

    object-position:center;
}


/*=========================================================
DESIGNED FOR PANEL
=========================================================*/

.home_safe_place_designed
{
    display:flex;

    min-height:25rem;

    padding:2.75rem 1.5rem;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(184,138,79,0.11),
            transparent 70%
        ),
        #090806;

    border:1px solid var(--aob-gold);

    color:var(--aob-champagne-gold);

    text-align:center;
}

.home_safe_place_designed_label
{
    margin:0 0 0.85rem;

    color:var(--aob-champagne-gold);

    font-family:var(--font_display);
    font-size:0.78rem;
    letter-spacing:0.14em;
    line-height:1.4;
    text-transform:uppercase;
}

.home_safe_place_designed_divider
{
    display:flex;

    width:min(100%,12rem);

    margin:0 auto 1rem;

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

    gap:0.65rem;
}

.home_safe_place_designed_divider span:first-child,
.home_safe_place_designed_divider span:last-child
{
    display:block;

    height:1px;

    flex:1 1 auto;

    background:rgba(184,138,79,0.82);
}

.home_safe_place_designed_divider span:nth-child(2)
{
    color:var(--aob-champagne-gold);

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

.home_safe_place_designed_words
{
    display:flex;

    margin:0;

    flex-direction:column;
    align-items:center;

    color:var(--aob-champagne-gold);

    font-family:var(--font_script);
    font-size:clamp(2.65rem,12vw,4rem);
    font-weight:400;
    line-height:0.92;
}

.home_safe_place_designed_words span
{
    display:block;
}

.home_safe_place_designed_heart
{
    display:block;

    margin-top:1.15rem;

    color:var(--aob-champagne-gold);

    font-size:1.35rem;
    line-height:1;
}


/*=========================================================
QUOTE PANEL
=========================================================*/

.home_safe_place_quote
{
    display:flex;

    width:100%;
    min-height:12rem;

    margin:1.25rem 0 0;
    padding:2.5rem 1.5rem;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:var(--aob-ivory);

    border:1px solid var(--aob-gold);

    box-shadow:
        0 1.25rem 2.5rem rgba(0,0,0,0.22),
        0 0.35rem 0.9rem rgba(0,0,0,0.14);

    text-align:center;
}

.home_safe_place_quote_divider
{
    display:flex;

    width:min(100%,22rem);

    margin:0 auto 1rem;

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

    gap:0.8rem;
}

.home_safe_place_quote_divider span:first-child,
.home_safe_place_quote_divider span:last-child
{
    display:block;

    height:1px;

    flex:1 1 auto;

    background:var(--aob-gold);
}

.home_safe_place_quote_divider span:nth-child(2)
{
    color:var(--aob-champagne-gold);

    font-size:1.35rem;
    line-height:1;
}

.home_safe_place_quote p
{
    max-width:54rem;

    margin:0;

    color:var(--aob-black);

    font-family:var(--font_script);
    font-size:clamp(2rem,9vw,3.4rem);
    font-weight:400;
    line-height:1.05;
}

.home_safe_place_quote p span
{
    display:block;
}

.home_safe_place_quote_heart
{
    display:block;

    margin-top:0.85rem;

    color:var(--aob-champagne-gold);

    font-size:1.35rem;
    line-height:1;
}


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

@media (min-width:30rem)
{
    .home_safe_place_container
    {
        width:min(100% - 3rem,90rem);
    }

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

    .home_safe_place_lamp,
    .home_safe_place_bed
    {
        min-height:20rem;
    }

    .home_safe_place_designed,
    .home_safe_place_album
    {
        min-height:21rem;
    }

    .home_safe_place_album img
    {
        aspect-ratio:auto;
    }
}


/*=========================================================
TABLET
=========================================================*/

@media (min-width:48rem)
{
    .home_safe_place_container
    {
        width:min(100% - 4rem,90rem);

        padding:3rem 0;
    }

    .home_safe_place_top,
    .home_safe_place_gallery
    {
        gap:1.25rem;
    }

    .home_safe_place_gallery
    {
        margin-top:1.5rem;
    }

    .home_safe_place_quote
    {
        margin-top:1.5rem;
        padding:3rem 2rem;
    }

    .home_safe_place_panel
    {
        min-height:34rem;

        padding:4rem 2.5rem;
    }
}


/*=========================================================
DESKTOP
=========================================================*/

@media (min-width:68rem)
{
    .home_safe_place_container
    {
        width:min(100% - 6rem,90rem);

        padding:4rem 0;
    }


    /*=====================================================
    TOP GRID
    =====================================================*/

    .home_safe_place_top
    {
        grid-template-columns:repeat(12,minmax(0,1fr));

        gap:1.5rem;

        align-items:stretch;
    }

    .home_safe_place_bedroom
    {
        grid-column:span 8;

        min-height:0;
    }

    .home_safe_place_panel
    {
        grid-column:span 4;

        min-height:0;
        height:100%;

        padding:2.25rem 2rem;
    }

    .home_safe_place_bedroom img
    {
        width:100%;
        height:auto;

        aspect-ratio:1347 / 757;

        object-fit:cover;
        object-position:center;
    }


    /*=====================================================
    DESKTOP PANEL
    =====================================================*/

    .home_safe_place_header h2
    {
        font-size:clamp(2.8rem,3.2vw,4.4rem);

        margin-bottom:1.1rem;
    }

    .home_safe_place_panel_copy p
    {
        font-size:clamp(0.86rem,0.88vw,1rem);

        line-height:1.55;
    }

    .home_safe_place_script
    {
        margin-top:0.9rem;

        font-size:clamp(2.35rem,2.55vw,3.35rem);
    }

    .home_safe_place_panel_heart
    {
        margin:0.65rem auto 0.9rem;
    }

    .home_safe_place_features
    {
        gap:0.55rem;
    }

    .home_safe_place_features li
    {
        font-size:clamp(0.66rem,0.7vw,0.8rem);
    }


    /*=====================================================
    LOWER TWELVE-COLUMN GRID
    =====================================================*/

    .home_safe_place_gallery
    {
        grid-template-columns:repeat(12,minmax(0,1fr));

        margin-top:1.75rem;

        gap:1.25rem;
    }

    .home_safe_place_lamp
    {
        grid-column:span 3;
    }

    .home_safe_place_bed
    {
        grid-column:span 3;
    }

    .home_safe_place_designed
    {
        grid-column:span 2;
    }

    .home_safe_place_album
    {
        grid-column:span 4;
    }

    .home_safe_place_lamp,
    .home_safe_place_bed,
    .home_safe_place_designed,
    .home_safe_place_album
    {
        min-height:21rem;
    }

    .home_safe_place_lamp img,
    .home_safe_place_bed img,
    .home_safe_place_album img
    {
        aspect-ratio:auto;
    }

    .home_safe_place_designed
    {
        padding:2rem 0.65rem;
    }

    .home_safe_place_designed_words
    {
        font-size:clamp(1.9rem,2.05vw,2.75rem);
    }


    /*=====================================================
    QUOTE PANEL
    =====================================================*/

    .home_safe_place_quote
    {
        min-height:10rem;

        margin-top:1.75rem;
        padding:2.25rem 4rem;
    }

    .home_safe_place_quote p
    {
        font-size:clamp(2.1rem,2.55vw,3.2rem);
    }
}


/*=========================================================
LARGE DESKTOP
=========================================================*/

@media (min-width:90rem)
{
    .home_safe_place_container
    {
        width:min(100% - 8rem,96rem);
    }

    .home_safe_place_top
    {
        gap:1.75rem;
    }

    .home_safe_place_gallery
    {
        margin-top:2rem;

        gap:1.5rem;
    }

    .home_safe_place_quote
    {
        margin-top:2rem;
    }

    /*
    Do not force the top row taller here.
    The bedroom image's natural ratio now controls the row height
    and the cream panel stretches to match it.
    */

    .home_safe_place_panel
    {
        padding:2.5rem 2.5rem;
    }

    .home_safe_place_lamp,
    .home_safe_place_bed,
    .home_safe_place_designed,
    .home_safe_place_album
    {
        min-height:23rem;
    }
}


/*=========================================================
IMAGE HOVER - POINTER DEVICES ONLY
=========================================================*/

@media (hover:hover) and (pointer:fine)
{
    .home_safe_place figure:hover img
    {
        filter:brightness(1.04);

        transform:scale(1.025);
    }
}


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

@media (max-width:29.99rem)
{
    .home_safe_place_container
    {
        width:min(100% - 1.25rem,90rem);

        padding:1.25rem 0;
    }

    .home_safe_place_top,
    .home_safe_place_gallery
    {
        gap:0.75rem;
    }

    .home_safe_place_gallery,
    .home_safe_place_quote
    {
        margin-top:0.9rem;
    }

    .home_safe_place_panel
    {
        min-height:32rem;

        padding:2.5rem 1rem;
    }

    .home_safe_place_header h2
    {
        font-size:clamp(2.4rem,13vw,3.3rem);
    }

    .home_safe_place_features li
    {
        font-size:0.7rem;
    }

    .home_safe_place_lamp,
    .home_safe_place_bed,
    .home_safe_place_album
    {
        min-height:16rem;
    }

    .home_safe_place_designed
    {
        min-height:22rem;
    }

    .home_safe_place_quote
    {
        min-height:10rem;

        padding:2rem 1rem;
    }
}


/*=========================================================
REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce)
{
    .home_safe_place figure img
    {
        transition:none;
    }

    .home_safe_place figure:hover img
    {
        filter:none;
        transform:none;
    }
}