/* ==========================================================
   ELARA & CO EVENTS
   HOME
========================================================== */


/* ==========================================================
   SECTION 01 — HERO
========================================================== */


.home-hero {

    min-height:
        calc(100svh - 96px);

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(380px, 0.88fr);

    background:
        var(--elara-ivory);

}



/* ==========================================================
   LEFT SIDE
========================================================== */


.hero-copy {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(75px, 9vh, 125px)
        clamp(45px, 7vw, 115px)
        clamp(75px, 9vh, 125px)
        var(--page-padding);

}



/* EYEBROW */


.hero-eyebrow {

    margin:
        0 0 30px;

    color:
        var(--elara-cocoa);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.6;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;

}



/* TITLE */


.hero-title {

    max-width:
        850px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(58px, 6.6vw, 106px);

    font-weight:
        400;

    line-height:
        0.86;

    letter-spacing:
        -0.045em;

}


.hero-title span {

    display:
        block;

    padding-left:
        clamp(25px, 5vw, 90px);

    color:
        var(--elara-cocoa);

    font-style:
        italic;

}



/* DESCRIPTION */


.hero-description {

    max-width:
        455px;

    margin:
        38px 0 0;

    color:
        rgba(45, 33, 27, 0.72);

    font-size:
        var(--body-copy-size);

    font-weight:
        300;

    line-height:
        var(--body-copy-line-height);

}



/* ACTIONS */


.hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        28px;

    margin-top:
        40px;

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        rgba(45, 33, 27, 0.35);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* ==========================================================
   RIGHT EDITORIAL PANEL
========================================================== */


.hero-editorial {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        46px
        clamp(32px, 4vw, 64px);

    background:
        var(--elara-cocoa);

    color:
        var(--elara-ivory);

}



/* NUMBER */


.hero-number {

    position:
        absolute;

    top:
        -55px;

    right:
        -12px;

    font-family:
        var(--font-display);

    font-size:
        clamp(180px, 22vw, 380px);

    line-height:
        1;

    color:
        rgba(245, 240, 232, 0.045);

}



/* CENTER COPY */


.hero-editorial-content {

    position:
        relative;

    z-index:
        2;

    margin:
        auto 0;

}


.hero-small-label {

    display:
        block;

    margin-bottom:
        28px;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.32em;

    opacity:
        0.65;

}


.hero-editorial-content p {

    max-width:
        470px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(52px, 5vw, 82px);

    font-weight:
        400;

    line-height:
        0.95;

    letter-spacing:
        -0.035em;

}


.hero-editorial-content em {

    display:
        block;

    color:
        var(--elara-champagne);

}



/* PANEL FOOTER */


.hero-editorial-footer {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        18px;

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    opacity:
        0.65;

}


.hero-line {

    height:
        1px;

    background:
        rgba(245, 240, 232, 0.32);

}



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


@media (max-width: 1100px) {

    .home-hero {

        min-height:
            auto;

        grid-template-columns:
            1fr;

    }


    .hero-copy {

        min-height:
            calc(100svh - 96px);

    }


    .hero-editorial {

        min-height:
            600px;

    }

}



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


@media (max-width: 620px) {

    .hero-copy {

        min-height:
            calc(100svh - 78px);

        padding:
            65px
            var(--page-padding);

    }


    .hero-title {

        font-size:
            clamp(52px, 16vw, 74px);

        line-height:
            0.89;

    }


    .hero-title span {

        padding-left:
            15px;

    }


    .hero-description {

        margin-top:
            30px;

    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            34px;

    }


    .hero-editorial {

        min-height:
            520px;

        padding:
            35px
            var(--page-padding);

    }


    .hero-editorial-content p {

        font-size:
            clamp(48px, 15vw, 66px);

    }

}

/* ==========================================================
   HOME — SECTION 01
   HERO ENTRANCE MOTION
========================================================== */


/* LEFT SIDE */

.hero-eyebrow {

    animation:
        hero-rise
        0.7s
        0.10s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}


.hero-title {

    animation:
        hero-title-rise
        1s
        0.18s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;

}


.hero-title span {

    animation:
        hero-considered
        1s
        0.34s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;

}


.hero-description {

    animation:
        hero-rise
        0.75s
        0.47s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}


.hero-actions {

    animation:
        hero-rise
        0.75s
        0.58s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}



/* ==========================================================
   RIGHT PANEL
========================================================== */


.hero-editorial {

    animation:
        hero-panel-reveal
        1s
        cubic-bezier(0.76, 0, 0.24, 1)
        both;

}


.hero-small-label {

    animation:
        hero-rise
        0.7s
        0.48s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}


.hero-editorial-content p {

    animation:
        hero-editorial-rise
        0.9s
        0.58s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;

}


.hero-number {

    animation:
        hero-number-drift
        1.4s
        0.30s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;

}


.hero-editorial-footer {

    animation:
        hero-rise
        0.75s
        0.72s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}


.hero-line {

    transform-origin:
        left center;

    animation:
        hero-line-grow
        1.1s
        0.85s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}



/* ==========================================================
   KEYFRAMES
========================================================== */


@keyframes hero-rise {

    from {

        opacity:
            0;

        transform:
            translateY(22px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



@keyframes hero-title-rise {

    from {

        opacity:
            0;

        transform:
            translateY(38px);

        filter:
            blur(5px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}



@keyframes hero-considered {

    from {

        opacity:
            0;

        transform:
            translateX(-32px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}



@keyframes hero-panel-reveal {

    from {

        clip-path:
            inset(0 0 0 100%);

    }

    to {

        clip-path:
            inset(0 0 0 0);

    }

}



@keyframes hero-editorial-rise {

    from {

        opacity:
            0;

        transform:
            translateY(34px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



@keyframes hero-number-drift {

    from {

        opacity:
            0;

        transform:
            translateX(70px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}



@keyframes hero-line-grow {

    from {

        opacity:
            0;

        transform:
            scaleX(0);

    }

    to {

        opacity:
            1;

        transform:
            scaleX(1);

    }

}



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


@media (prefers-reduced-motion: reduce) {

    .hero-eyebrow,
    .hero-title,
    .hero-title span,
    .hero-description,
    .hero-actions,
    .hero-editorial,
    .hero-small-label,
    .hero-editorial-content p,
    .hero-number,
    .hero-editorial-footer,
    .hero-line {

        animation:
            none !important;

    }

}

/* ==========================================================
   HOME — SECTION 02
   INTRODUCTION
========================================================== */


.home-intro {

    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(85px, 10vw, 165px)
        var(--page-padding)
        clamp(70px, 8vw, 125px);

    background:
        var(--elara-champagne);

    color:
        var(--elara-espresso);

}



/* ==========================================================
   SECTION TOPLINE
========================================================== */


.intro-topline {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        24px;

    margin-bottom:
        clamp(65px, 8vw, 120px);

}


.intro-index,
.intro-label {

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.intro-index {

    color:
        var(--elara-cocoa);

}


.intro-label {

    color:
        rgba(45, 33, 27, 0.62);

}


.intro-rule {

    height:
        1px;

    background:
        rgba(45, 33, 27, 0.22);

}



/* ==========================================================
   MAIN GRID
========================================================== */


.intro-grid {

    max-width:
        1480px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    gap:
        clamp(70px, 9vw, 150px);

    align-items:
        end;

}



/* ==========================================================
   LARGE STATEMENT
========================================================== */


.intro-statement {

    max-width:
        920px;

}


.intro-kicker {

    margin:
        0 0 26px;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

    color:
        var(--elara-cocoa);

}


.intro-statement h2 {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(58px, 6.6vw, 104px);

    font-weight:
        400;

    line-height:
        0.91;

    letter-spacing:
        -0.04em;

}


.intro-statement h2 em {

    display:
        block;

    padding-left:
        clamp(25px, 5vw, 90px);

    color:
        var(--elara-cocoa);

    font-weight:
        400;

}



/* ==========================================================
   SUPPORTING COPY
========================================================== */


.intro-copy {

    max-width:
        420px;

    padding-bottom:
        8px;

}


.intro-lead {

    margin:
        0 0 24px;

    font-family:
        var(--font-display);

    font-size:
        clamp(25px, 2.2vw, 35px);

    line-height:
        1.15;

    color:
        var(--elara-cocoa);

}


.intro-copy > p:not(.intro-lead) {

    margin:
        0;

    font-size:
        var(--body-copy-size);

    font-weight:
        300;

    line-height:
        var(--body-copy-line-height);

    color:
        rgba(45, 33, 27, 0.72);

}



/* ==========================================================
   INTRO LINK
========================================================== */


.intro-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        22px;

    margin-top:
        38px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(45, 33, 27, 0.38);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* ==========================================================
   SECTION FOOTER
========================================================== */


.intro-footer {

    max-width:
        1480px;

    margin:
        clamp(80px, 10vw, 140px)
        auto
        0;

    padding-top:
        24px;

    border-top:
        1px solid
        rgba(45, 33, 27, 0.18);

    display:
        grid;

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

    gap:
        30px;

}


.intro-footer span {

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    color:
        rgba(45, 33, 27, 0.58);

}


.intro-footer span:nth-child(2) {

    text-align:
        center;

}


.intro-footer span:last-child {

    text-align:
        right;

}



/* ==========================================================
   SECTION 02 — TABLET
========================================================== */


@media (max-width: 950px) {

    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .intro-copy {

        max-width:
            520px;

        margin-left:
            auto;

    }

}



/* ==========================================================
   SECTION 02 — MOBILE
========================================================== */


@media (max-width: 620px) {

    .home-intro {

        padding-top:
            80px;

        padding-bottom:
            70px;

    }


    .intro-topline {

        grid-template-columns:
            auto
            1fr;

        margin-bottom:
            60px;

    }


    .intro-label {

        display:
            none;

    }


    .intro-statement h2 {

        font-size:
            clamp(50px, 15vw, 72px);

        line-height:
            0.94;

    }


    .intro-statement h2 em {

        padding-left:
            15px;

    }


    .intro-copy {

        margin-left:
            0;

    }


    .intro-footer {

        grid-template-columns:
            1fr;

        gap:
            15px;

        margin-top:
            70px;

    }


    .intro-footer span,
    .intro-footer span:nth-child(2),
    .intro-footer span:last-child {

        text-align:
            left;

    }

}

/* ==========================================================
   HOME — SECTION 02
   INTRODUCTION MOTION
========================================================== */


@media (prefers-reduced-motion: no-preference) {


    /* ======================================================
       INITIAL STATE
       ONLY WHEN JS IS AVAILABLE
    ====================================================== */


    .motion-enabled .home-intro .intro-index,
    .motion-enabled .home-intro .intro-label,
    .motion-enabled .home-intro .intro-kicker,
    .motion-enabled .home-intro .intro-statement h2,
    .motion-enabled .home-intro .intro-statement h2 em,
    .motion-enabled .home-intro .intro-lead,
    .motion-enabled .home-intro .intro-copy > p:not(.intro-lead),
    .motion-enabled .home-intro .intro-link,
    .motion-enabled .home-intro .intro-footer span {

        opacity:
            0;

    }



    /* ======================================================
       TOP RULE
    ====================================================== */


    .motion-enabled .home-intro .intro-rule {

        transform:
            scaleX(0);

        transform-origin:
            left center;

    }



    .motion-enabled .home-intro.is-visible .intro-rule {

        animation:
            intro-rule-grow
            1.15s
            0.08s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }



    /* ======================================================
       INDEX + LABEL
    ====================================================== */


    .motion-enabled .home-intro.is-visible .intro-index {

        animation:
            intro-rise
            0.65s
            0.10s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible .intro-label {

        animation:
            intro-rise
            0.65s
            0.18s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }



    /* ======================================================
       LEFT EDITORIAL STATEMENT
    ====================================================== */


    .motion-enabled .home-intro.is-visible .intro-kicker {

        animation:
            intro-rise
            0.7s
            0.28s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible .intro-statement h2 {

        animation:
            intro-heading-rise
            1s
            0.34s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible .intro-statement h2 em {

        animation:
            intro-emphasis-drift
            1s
            0.50s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }



    /* ======================================================
       RIGHT COPY
    ====================================================== */


    .motion-enabled .home-intro.is-visible .intro-lead {

        animation:
            intro-rise
            0.8s
            0.52s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible
    .intro-copy > p:not(.intro-lead) {

        animation:
            intro-rise
            0.8s
            0.62s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible .intro-link {

        animation:
            intro-rise
            0.75s
            0.72s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }



    /* ======================================================
       BOTTOM THREE LABELS
    ====================================================== */


    .motion-enabled .home-intro.is-visible
    .intro-footer span:nth-child(1) {

        animation:
            intro-rise
            0.7s
            0.82s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible
    .intro-footer span:nth-child(2) {

        animation:
            intro-rise
            0.7s
            0.90s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .home-intro.is-visible
    .intro-footer span:nth-child(3) {

        animation:
            intro-rise
            0.7s
            0.98s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }

}



/* ==========================================================
   SECTION 02 KEYFRAMES
========================================================== */


@keyframes intro-rule-grow {

    from {

        transform:
            scaleX(0);

        opacity:
            0;

    }

    to {

        transform:
            scaleX(1);

        opacity:
            1;

    }

}



@keyframes intro-rise {

    from {

        opacity:
            0;

        transform:
            translateY(22px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



@keyframes intro-heading-rise {

    from {

        opacity:
            0;

        transform:
            translateY(38px);

        filter:
            blur(4px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}



@keyframes intro-emphasis-drift {

    from {

        opacity:
            0;

        transform:
            translateX(34px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */


@media (prefers-reduced-motion: reduce) {

    .home-intro .intro-index,
    .home-intro .intro-label,
    .home-intro .intro-kicker,
    .home-intro .intro-statement h2,
    .home-intro .intro-statement h2 em,
    .home-intro .intro-lead,
    .home-intro .intro-copy > p:not(.intro-lead),
    .home-intro .intro-link,
    .home-intro .intro-footer span {

        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;

        animation:
            none !important;

    }


    .home-intro .intro-rule {

        transform:
            scaleX(1) !important;

        animation:
            none !important;

    }

}

/* ==========================================================
   HOME — SECTION 03
   SERVICES
========================================================== */


.home-services {

    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(90px, 10vw, 160px)
        var(--page-padding);

    background:
        var(--elara-espresso);

    color:
        var(--elara-ivory);

}



/* ==========================================================
   SECTION HEADING
========================================================== */


.services-heading {

    max-width:
        1480px;

    margin:
        0 auto
        clamp(80px, 10vw, 150px);

}


.services-heading-meta {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        24px;

    margin-bottom:
        clamp(55px, 7vw, 95px);

}


.services-heading-meta span {

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

    color:
        rgba(245, 240, 232, 0.6);

}


.services-heading-line {

    height:
        1px;

    background:
        rgba(245, 240, 232, 0.18);

}


.services-heading-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    gap:
        clamp(70px, 9vw, 150px);

    align-items:
        end;

}


.services-heading h2 {

    max-width:
        850px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(58px, 6vw, 96px);

    font-weight:
        400;

    line-height:
        0.92;

    letter-spacing:
        -0.04em;

}


.services-heading h2 em {

    display:
        block;

    padding-left:
        clamp(20px, 4vw, 75px);

    color:
        var(--elara-champagne);

    font-weight:
        400;

}


.services-heading-grid > p {

    max-width:
        430px;

    margin:
        0;

    font-size:
        var(--body-copy-size);

    font-weight:
        300;

    line-height:
        var(--body-copy-line-height);

    color:
        rgba(245, 240, 232, 0.68);

}



/* ==========================================================
   SERVICE CARDS
========================================================== */


.service-card {

    max-width:
        1480px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    gap:
        clamp(45px, 7vw, 110px);

    align-items:
        center;

}


.service-card + .service-card {

    margin-top:
        clamp(110px, 13vw, 190px);

}



/* ==========================================================
   SERVICE IMAGE FRAMES
========================================================== */


.service-image-frame {

    position:
        relative;

    min-height:
        clamp(420px, 46vw, 720px);

    overflow:
        hidden;

    background:
        var(--elara-cocoa);

    border:
        1px solid
        rgba(245, 240, 232, 0.12);

    border-radius:
        var(--frame-radius);

}


.service-image-frame img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

}


/* ==========================================================
   SERVICE CONTENT
========================================================== */


.service-content {

    max-width:
        470px;

}


.service-number {

    display:
        block;

    margin-bottom:
        35px;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.2em;

    color:
        var(--elara-gold);

}


.service-content h3 {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(48px, 4.6vw, 74px);

    font-weight:
        400;

    line-height:
        0.95;

    letter-spacing:
        -0.03em;

}


.service-content p {

    margin:
        30px 0 0;

    font-size:
        var(--body-copy-size);

    font-weight:
        300;

    line-height:
        var(--body-copy-line-height);

    color:
        rgba(245, 240, 232, 0.66);

}


.service-content a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        36px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(245, 240, 232, 0.3);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}



/* ==========================================================
   STAGGERED LAYOUT
========================================================== */


.service-card-two {

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);

}


.service-card-two .service-image-frame {

    order:
        2;

}

.service-card-two .service-content {

    order:
        1;

    margin-left:
        auto;

}



/* ==========================================================
   CARD THREE
========================================================== */


.service-card-three .service-image-frame {

    min-height:
        clamp(360px, 40vw, 620px);

    margin-right:
        clamp(30px, 8vw, 120px);

}


/* ==========================================================
   SECTION BOTTOM
========================================================== */


.services-bottom {

    max-width:
        1480px;

    margin:
        clamp(120px, 14vw, 210px)
        auto
        0;

    padding-top:
        clamp(40px, 5vw, 70px);

    border-top:
        1px solid
        rgba(245, 240, 232, 0.18);

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        60px;

}


.services-bottom p {

    max-width:
        650px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(34px, 3.5vw, 54px);

    line-height:
        1;

}


.services-bottom p em {

    color:
        var(--elara-champagne);

}


.services-bottom a {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        20px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(245, 240, 232, 0.3);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}



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


@media (max-width: 950px) {

    .services-heading-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .service-card,
    .service-card-two {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


.service-card-two .service-image-frame,
.service-card-two .service-content {
    
        order:
            initial;

    }


    .service-card-two .service-content {

        margin-left:
            0;

    }


.service-card-three .service-image-frame {

    margin-right:
        0;

}
    


    .service-content {

        max-width:
            560px;

    }

}



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


@media (max-width: 620px) {

    .home-services {

        padding-top:
            80px;

        padding-bottom:
            80px;

    }


    .services-heading-meta {

        grid-template-columns:
            auto
            1fr;

    }


    .services-heading-meta span:last-child {

        display:
            none;

    }


    .services-heading h2 {

        font-size:
            clamp(50px, 14vw, 70px);

    }


    .services-heading h2 em {

        padding-left:
            15px;

    }


.service-image-frame {

    min-height:
        440px;

}

    .service-card + .service-card {

        margin-top:
            90px;

    }


    .services-bottom {

        margin-top:
            100px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}

/* ==========================================================
   SERVICE IMAGE FOCAL POSITIONS
========================================================== */


.service-card-one .service-image-frame img {

    object-position:
        center 45%;

}


.service-card-two .service-image-frame img {

    object-position:
        center center;

}


.service-card-three .service-image-frame img {

    object-position:
        center center;

}

/* ==========================================================
   HOME — SECTION 03
   SERVICES MOTION
========================================================== */


@media (prefers-reduced-motion: no-preference) {


    /* ======================================================
       INITIAL STATES
    ====================================================== */


    .motion-enabled .services-heading .services-heading-meta,
    .motion-enabled .services-heading h2,
    .motion-enabled .services-heading-grid > p,

    .motion-enabled .service-card .service-image-frame,
    .motion-enabled .service-card .service-number,
    .motion-enabled .service-card h3,
    .motion-enabled .service-card .service-content p,
    .motion-enabled .service-card .service-content a,

    .motion-enabled .services-bottom p,
    .motion-enabled .services-bottom > a {

        opacity:
            0;

    }



    /* ======================================================
       SECTION HEADING
    ====================================================== */


    .motion-enabled .services-heading.is-visible
    .services-heading-meta {

        animation:
            services-rise
            0.7s
            0.05s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .services-heading.is-visible h2 {

        animation:
            services-heading-rise
            1s
            0.16s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }


    .motion-enabled .services-heading.is-visible
    .services-heading-grid > p {

        animation:
            services-rise
            0.8s
            0.34s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }



    /* ======================================================
       SERVICE IMAGES
    ====================================================== */


    .motion-enabled .service-card-one.is-visible
    .service-image-frame,

    .motion-enabled .service-card-three.is-visible
    .service-image-frame {

        animation:
            service-image-left
            1.05s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }


    .motion-enabled .service-card-two.is-visible
    .service-image-frame {

        animation:
            service-image-right
            1.05s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }



    /* ======================================================
       SERVICE COPY
    ====================================================== */


    .motion-enabled .service-card.is-visible
    .service-number {

        animation:
            services-rise
            0.65s
            0.18s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .service-card.is-visible h3 {

        animation:
            service-title-rise
            0.9s
            0.26s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }


    .motion-enabled .service-card.is-visible
    .service-content p {

        animation:
            services-rise
            0.75s
            0.40s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }


    .motion-enabled .service-card.is-visible
    .service-content a {

        animation:
            services-rise
            0.7s
            0.52s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }



    /* ======================================================
       BOTTOM STATEMENT
    ====================================================== */


    .motion-enabled .services-bottom.is-visible p {

        animation:
            services-heading-rise
            0.9s
            cubic-bezier(0.16, 1, 0.3, 1)
            both;

    }


    .motion-enabled .services-bottom.is-visible > a {

        animation:
            services-rise
            0.7s
            0.24s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;

    }



    /* ======================================================
       IMAGE HOVER
    ====================================================== */


    .service-image-frame img {

        transition:
            transform
            1.1s
            cubic-bezier(0.16, 1, 0.3, 1);

    }


    .service-image-frame:hover img {

        transform:
            scale(1.035);

    }

}



/* ==========================================================
   SECTION 03 KEYFRAMES
========================================================== */


@keyframes services-rise {

    from {

        opacity:
            0;

        transform:
            translateY(24px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



@keyframes services-heading-rise {

    from {

        opacity:
            0;

        transform:
            translateY(40px);

        filter:
            blur(4px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}



@keyframes service-title-rise {

    from {

        opacity:
            0;

        transform:
            translateY(30px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



@keyframes service-image-left {

    from {

        opacity:
            0;

        transform:
            translateX(-45px)
            scale(0.985);

        clip-path:
            inset(0 8% 0 0);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);

        clip-path:
            inset(0 0 0 0);

    }

}



@keyframes service-image-right {

    from {

        opacity:
            0;

        transform:
            translateX(45px)
            scale(0.985);

        clip-path:
            inset(0 0 0 8%);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);

        clip-path:
            inset(0 0 0 0);

    }

}



/* ==========================================================
   SECTION 03 REDUCED MOTION
========================================================== */


@media (prefers-reduced-motion: reduce) {

    .services-heading .services-heading-meta,
    .services-heading h2,
    .services-heading-grid > p,

    .service-card .service-image-frame,
    .service-card .service-number,
    .service-card h3,
    .service-card .service-content p,
    .service-card .service-content a,

    .services-bottom p,
    .services-bottom > a {

        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;

        clip-path:
            none !important;

        animation:
            none !important;

    }


    .service-image-frame img {

        transform:
            none !important;

        transition:
            none !important;

    }

}