/*=========================================================
HOME - LOGO AND HERO
=========================================================*/

.home_hero
{
    position:relative;

    display:grid;

    min-height:47rem;

    align-items:end;

    overflow:hidden;

    background:var(--aob-black);

    color:var(--aob-soft-white);
}


/*=========================================================
DESKTOP HERO BACKGROUND IMAGE
=========================================================*/

.home_hero::before,
.home_hero::after
{
    content:"";

    position:absolute;

    inset:0;
}

.home_hero::before
{
    background-image:
        url("../images/home/hero.jpg?v=20260806-5");

    background-repeat:no-repeat;
    background-position:68% center;
    background-size:cover;

    filter:
        saturate(.88)
        contrast(1.04);

    transform:scale(1.01);
}


/*=========================================================
DESKTOP HERO OVERLAY
=========================================================*/

.home_hero::after
{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.18) 36%,
            rgba(0,0,0,.9) 100%
        );
}


/*=========================================================
MOBILE HERO IMAGE

Hidden on desktop.

On mobile this becomes a genuine image rather than a CSS
background. Its natural aspect ratio therefore controls
its height automatically.
=========================================================*/

.home_hero_mobile_image
{
    display:none;
}

.home_hero_mobile_image img
{
    display:block;

    width:100%;
    height:auto;
}


/*=========================================================
HERO CONTENT
=========================================================*/

.home_hero_content
{
    position:relative;

    z-index:2;

    padding:10rem 0 3.2rem;
}

.home_hero_inner
{
    max-width:37rem;
}


/*=========================================================
HERO HEADING
=========================================================*/

.home_hero h1
{
    margin-bottom:1.15rem;

    font-family:var(--font_display);
    font-size:clamp(3.1rem,12vw,5.7rem);
    font-weight:500;
    letter-spacing:-.025em;
    line-height:.88;
}

.home_hero h1 .script_text
{
    display:block;

    margin-top:.2rem;

    font-family:var(--font_script);
    font-size:1.17em;
    font-weight:400;
    line-height:.75;
}


/*=========================================================
HERO INTRODUCTION
=========================================================*/

.home_hero_intro
{
    max-width:31rem;

    margin-bottom:1.55rem;

    font-size:1.05rem;
}

.home_hero_intro strong
{
    color:var(--aob-champagne-gold);
}


/*=========================================================
HERO ACTIONS
=========================================================*/

.home_hero_actions
{
    display:flex;

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

    gap:1.35rem;
}


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

@media (max-width:47.99rem)
{

    /*=====================================================
    MOBILE HERO STRUCTURE
    =====================================================*/

    .home_hero
    {
        display:block;

        min-height:0;

        /*
        Only compensate for the fixed navigation.

        The photograph's height is now determined naturally
        by the actual image rather than a CSS calculation.
        */
        padding-top:5.5rem;

        overflow:hidden;

        background:var(--aob-ivory);

        color:var(--aob-black);

        border-bottom:0;
    }


    /*=====================================================
    REMOVE DESKTOP BACKGROUND IMAGE
    =====================================================*/

    .home_hero::before,
    .home_hero::after
    {
        display:none;
    }


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

    No fixed height.
    No aspect-ratio.
    No object-fit.
    No cropping.

    Whatever proportions hero.jpg has will determine the
    displayed height automatically.
    =====================================================*/

    .home_hero_mobile_image
    {
        position:relative;

        display:block;

        width:100%;

        margin:0;
        padding:0;

        overflow:hidden;

        background:transparent;

        line-height:0;
    }

    .home_hero_mobile_image img
    {
        display:block;

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

        margin:0;
        padding:0;

        border:0;

        filter:
            saturate(.88)
            contrast(1.04);
    }


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

    .home_hero_content
    {
        position:relative;

        width:100%;

        margin:0;

        padding:
            3rem
            1.25rem
            3.25rem;

        background:var(--aob-ivory);

        text-align:center;
    }

    .home_hero_inner
    {
        width:100%;
        max-width:34rem;

        margin:0 auto;

        text-align:center;
    }


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

    .home_hero h1
    {
        max-width:30rem;

        margin:
            0
            auto
            1.5rem;

        color:var(--aob-black);

        font-size:clamp(
            2.75rem,
            11.5vw,
            4.1rem
        );

        line-height:.98;

        text-align:center;
    }

    .home_hero h1 .script_text
    {
        display:block;

        margin-top:.25rem;

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

        font-family:var(--font_script);
        font-size:1.18em;
        font-weight:400;

        line-height:.78;
    }


    /*=====================================================
    DECORATIVE HEART DIVIDER
    =====================================================*/

    .home_hero h1::after
    {
        content:"♡";

        display:flex;

        width:min(100%,15rem);

        margin:
            1.75rem
            auto
            0;

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

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

        font-family:var(--font_display);
        font-size:1.1rem;
        font-weight:400;
        line-height:1;

        background:
            linear-gradient(
                var(--aob-gold),
                var(--aob-gold)
            )
            left center /
            calc(50% - 1.25rem)
            1px
            no-repeat,

            linear-gradient(
                var(--aob-gold),
                var(--aob-gold)
            )
            right center /
            calc(50% - 1.25rem)
            1px
            no-repeat;
    }


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

    .home_hero_intro
    {
        max-width:26rem;

        margin:
            0
            auto
            1.75rem;

        color:var(--aob-text);

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

        text-align:center;
    }

    .home_hero_intro strong
    {
        color:var(--aob-champagne-gold);
    }


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

    .home_hero_actions
    {
        width:100%;

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

        gap:1.5rem;

        text-align:center;
    }

    .home_hero_actions .button
    {
        width:min(100%,22rem);

        min-height:3.6rem;

        margin:0 auto;
    }


    /*=====================================================
    WATCH CLIENT STORIES
    =====================================================*/

    .home_hero_actions .text_link
    {
        display:inline-flex;

        margin:0 auto;

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

        gap:.75rem;

        color:var(--aob-black);

        font-size:.75rem;
        font-weight:700;
        letter-spacing:.14em;
        line-height:1.3;

        text-align:center;
        text-decoration:none;
        text-transform:uppercase;

        border:0;
        border-bottom:0;
    }

    .home_hero_actions .text_link:hover,
    .home_hero_actions .text_link:focus-visible
    {
        color:var(--aob-champagne-gold);

        border:0;
        border-bottom:0;

        text-decoration:none;
    }

    .home_hero_actions .text_link_icon
    {
        display:inline-flex;

        width:2.15rem;
        height:2.15rem;

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

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

        border-radius:50%;

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

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


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

@media (min-width:30rem) and (max-width:47.99rem)
{
    .home_hero
    {
        /*
        Navigation is slightly taller at this breakpoint.
        */
        padding-top:6rem;
    }

    .home_hero_content
    {
        padding:
            3.5rem
            2rem
            3.75rem;
    }

    .home_hero h1
    {
        font-size:clamp(
            3.25rem,
            10vw,
            4.5rem
        );
    }
}


/*=========================================================
TABLET AND DESKTOP
=========================================================*/

@media (min-width:48rem)
{
    .home_hero
    {
        min-height:48rem;

        padding-top:0;

        align-items:center;

        background:var(--aob-black);

        color:var(--aob-soft-white);
    }


    /*=====================================================
    MOBILE IMAGE IS NOT REQUIRED ON DESKTOP
    =====================================================*/

    .home_hero_mobile_image
    {
        display:none;
    }


    /*=====================================================
    DESKTOP BACKGROUND IMAGE
    =====================================================*/

    .home_hero::before
    {
        display:block;

        inset:0;

        width:auto;
        height:auto;

        background-image:
            url("../images/home/hero.jpg?v=20260806-5");

        background-repeat:no-repeat;
        background-position:center 42%;
        background-size:cover;

        filter:
            saturate(.88)
            contrast(1.04);

        transform:scale(1.01);
    }


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

    .home_hero::after
    {
        display:block;

        inset:0;

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.92) 0%,
                rgba(0,0,0,.5) 47%,
                rgba(0,0,0,.18) 100%
            );
    }


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

    .home_hero_content
    {
        padding:10rem 0 3.2rem;

        background:transparent;

        text-align:left;
    }

    .home_hero_inner
    {
        width:50%;

        margin-left:auto;

        text-align:left;
    }

    .home_hero h1
    {
        color:var(--aob-soft-white);

        text-align:left;
    }

    .home_hero h1::after
    {
        display:none;
    }

    .home_hero h1 .script_text
    {
        color:inherit;
    }

    .home_hero_intro
    {
        margin-right:0;
        margin-left:0;

        color:var(--aob-soft-white);

        text-align:left;
    }

    .home_hero_intro strong
    {
        color:var(--aob-champagne-gold);
    }

    .home_hero_actions
    {
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;

        text-align:left;
    }

    .home_hero_actions .button
    {
        width:auto;
    }

    .home_hero_actions .text_link
    {
        margin:0;
    }
}


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

@media (prefers-reduced-motion:reduce)
{
    .home_hero::before
    {
        transform:none;
    }
}