/*=========================================================
HOME - DETAILS
=========================================================*/

.home_details
{
    position:relative;

    padding:var(--space_3xl) 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(184,138,79,0.06),
            transparent 34rem
        ),
        #090806;

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

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


/*=========================================================
DETAILS HEADER
=========================================================*/

.home_details_header
{
    width:100%;
    max-width:54rem;

    margin:0 auto var(--space_2xl);

    text-align:center;
}

.home_details_eyebrow
{
    margin-bottom:var(--space_sm);

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

.home_details_header h2
{
    margin:0;

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

    font-family:var(--font_display);
    font-size:clamp(3rem,11vw,5.4rem);
    font-weight:500;
    letter-spacing:-0.025em;
    line-height:0.9;
}

.home_details_heading_accent
{
    display:block;

    margin-top:0.08em;

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

    font-family:var(--font_script);
    font-size:1.02em;
    font-weight:400;
    letter-spacing:0;
    line-height:0.9;
}


/*=========================================================
HEADER DIVIDER
=========================================================*/

.home_details_divider
{
    display:flex;

    width:min(100%,17rem);

    margin:1.4rem auto 1.5rem;

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

    gap:0.8rem;
}

.home_details_divider span:not(.home_details_divider_heart)
{
    display:block;

    height:1px;

    flex:1 1 auto;

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

.home_details_divider_heart
{
    display:block;

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

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

.home_details_intro
{
    max-width:42rem;

    margin:0 auto;

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

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


/*=========================================================
DETAILS STEPS
=========================================================*/

.home_details_steps
{
    display:grid;

    grid-template-columns:1fr;

    gap:2.75rem;
}


/*=========================================================
DETAILS STEP
=========================================================*/

.home_details_step
{
    position:relative;

    width:100%;

    text-align:center;
}

.home_details_step_top
{
    display:flex;

    min-height:5rem;

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

    gap:1rem;
}

.home_details_number
{
    display:flex;

    min-width:4.5rem;

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

    color:rgba(184,138,79,0.52);

    font-family:var(--font_display);
    font-size:clamp(4rem,15vw,5.8rem);
    font-weight:400;
    letter-spacing:-0.04em;
    line-height:0.8;

    text-align:center;
}

.home_details_line
{
    position:relative;

    display:none;

    height:1px;

    flex:1 1 auto;

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

.home_details_line::after
{
    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:0.42rem;
    height:0.42rem;

    background:var(--aob-gold);

    border-radius:50%;

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

.home_details_step h3
{
    margin:0 0 0.65rem;

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

    font-family:var(--font_body);
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.16em;
    line-height:1.4;
    text-transform:uppercase;
}

.home_details_step p
{
    max-width:17rem;

    margin:0 auto;

    color:rgba(247,243,237,0.82);

    font-size:0.95rem;
    line-height:1.65;
}


/*=========================================================
HOVER - POINTER DEVICES
=========================================================*/

@media (hover:hover) and (pointer:fine)
{
    .home_details_step
    {
        transition:
            transform 280ms ease,
            opacity 280ms ease;
    }

    .home_details_step:hover
    {
        transform:translateY(-0.35rem);
    }

    .home_details_step:hover .home_details_number
    {
        color:rgba(184,138,79,0.78);
    }
}


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

@media (min-width:40rem)
{
    .home_details_steps
    {
        grid-template-columns:repeat(2,minmax(0,1fr));

        column-gap:3rem;
        row-gap:3.5rem;
    }

    .home_details_step:nth-child(5)
    {
        grid-column:1 / -1;

        max-width:24rem;

        margin:0 auto;
    }
}


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

@media (min-width:68rem)
{
    .home_details
    {
        padding:var(--space_4xl) 0;
    }

    .home_details_header
    {
        margin-bottom:4rem;
    }

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

        column-gap:2rem;
        row-gap:3.75rem;
    }

    .home_details_step
    {
        grid-column:span 2;
    }

    .home_details_step:nth-child(4)
    {
        grid-column:2 / span 2;
    }

    .home_details_step:nth-child(5)
    {
        grid-column:4 / span 2;

        max-width:none;

        margin:0;
    }

    .home_details_step_top
    {
        min-height:6rem;
    }

    .home_details_number
    {
        min-width:5rem;

        font-size:5.8rem;
    }

    .home_details_line
    {
        display:block;
    }

    .home_details_step:nth-child(3) .home_details_line,
    .home_details_step:nth-child(5) .home_details_line
    {
        display:none;
    }

    /*
    The number is centred independently of the line.
    This prevents 02 from shifting off-centre.
    */

    .home_details_step_top
    {
        position:relative;

        display:grid;

        grid-template-columns:1fr;
        place-items:center;
    }

    .home_details_line
    {
        position:absolute;

        top:50%;
        left:calc(50% + 3.6rem);

        width:calc(50% - 3.6rem);

        transform:translateY(-50%);
    }
}


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

@media (min-width:90rem)
{
    .home_details_header h2
    {
        font-size:5.75rem;
    }

    .home_details_steps
    {
        column-gap:3rem;
    }

    .home_details_step p
    {
        max-width:19rem;
    }
}


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

@media (max-width:29.99rem)
{
    .home_details
    {
        padding:var(--space_2xl) 0;
    }

    .home_details_header
    {
        margin-bottom:var(--space_xl);
    }

    .home_details_header h2
    {
        font-size:clamp(2.8rem,14vw,3.75rem);
    }

    .home_details_steps
    {
        gap:2.25rem;
    }

    .home_details_step
    {
        padding-bottom:2.25rem;

        border-bottom:1px solid rgba(184,138,79,0.24);
    }

    .home_details_step:last-child
    {
        padding-bottom:0;

        border-bottom:0;
    }
}


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

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

    .home_details_step:hover
    {
        transform:none;
    }
}