/* ==========================================================
   EMPOWER HER WORKSHOPS
   File: workshops.css

   IMPORTANT:
   PHP controls whether workshops OR "Coming Soon" display.
   This CSS only controls the design.
========================================================== */


/* ==========================================================
   BRAND COLORS
========================================================== */

.eh-workshops-page {

    --ehw-deep-pink: #b9004c;
    --ehw-magenta: #d5075c;
    --ehw-pink: #ed176b;
    --ehw-bright-pink: #f23876;

    --ehw-coral: #ff675f;
    --ehw-peach: #ff8265;

    --ehw-orange: #ff861f;
    --ehw-orange-light: #f5a12b;

    --ehw-blush: #fff3f0;
    --ehw-light-blush: #fff9f7;

    --ehw-white: #ffffff;
    --ehw-black: #161014;

    --ehw-text: #39252c;
    --ehw-muted: #73545f;

    background: #ffffff;
    color: var(--ehw-text);

    overflow: hidden;
}


.eh-workshops-page *,
.eh-workshops-page *::before,
.eh-workshops-page *::after {
    box-sizing: border-box;
}


.ehw-container {

    width: min(
        1180px,
        calc(100% - 42px)
    );

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



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

.ehw-hero {

    position: relative;

    min-height: 630px;

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

    padding: 80px 0 75px;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(
            circle at 50% 34%,
            rgba(255,255,255,0.07),
            transparent 36%
        ),

        linear-gradient(
            112deg,
            #df0b62 0%,
            #d6075b 34%,
            #c80355 68%,
            #b6004c 100%
        );
}



/* ==========================================================
   LARGE EMPOWER HER LOGO BEHIND WORKSHOPS
========================================================== */

/*
   Put your transparent Empower Her logo here:

   /assets/images/empower-her-logo.png

   The logo should preferably be PNG with a transparent background.
*/

.ehw-hero::before {

    content: "";

    position: absolute;

    z-index: 1;

    left: 50%;
    top: 43%;

    width: min(920px, 78vw);
    height: 390px;

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

    background-image:
        url("assets/images/empower-her-logo.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    opacity: 0.16;

    filter:
        brightness(0)
        invert(1);

    pointer-events: none;
}



/*
   The PHP previously had a separate
   Empower Her wordmark above WORKSHOPS.

   We don't want that anymore because
   we're using the giant logo behind it.
*/

.ehw-wordmark {
    display: none !important;
}



/* ==========================================================
   ORANGE/CORAL CIRCLES
========================================================== */

.ehw-hero-orb {

    position: absolute;

    z-index: 0;

    border-radius: 50%;

    pointer-events: none;
}


.ehw-hero-orb-left {

    width: 430px;
    height: 430px;

    left: -230px;
    bottom: -220px;

    background:

        radial-gradient(
            circle at 70% 34%,

            #ff8e32 0%,

            #ff6e58 40%,

            rgba(245,65,104,0.84) 68%,

            transparent 70%
        );
}


.ehw-hero-orb-right {

    width: 420px;
    height: 420px;

    right: -205px;
    top: -215px;

    background:

        radial-gradient(
            circle at 35% 65%,

            #ff9c38 0%,

            #ff7455 47%,

            rgba(245,65,104,0.72) 69%,

            transparent 71%
        );
}



/* ==========================================================
   HERO DIAGONAL LINES
========================================================== */

.ehw-hero-lines {

    position: absolute;

    z-index: 1;

    width: 330px;
    height: 230px;

    opacity: 0.13;

    pointer-events: none;

    background:

        repeating-linear-gradient(
            145deg,

            rgba(255,255,255,0.9) 0px,

            rgba(255,255,255,0.9) 5px,

            transparent 5px,

            transparent 16px
        );
}


.ehw-hero-lines-left {

    left: -65px;
    top: 75px;

    transform: rotate(-5deg);
}


.ehw-hero-lines-right {

    right: -80px;
    bottom: 20px;

    transform: rotate(5deg);
}



/* ==========================================================
   HERO DOTS
========================================================== */

.ehw-hero-dots {

    position: absolute;

    z-index: 2;

    width: 150px;
    height: 150px;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 12% 25%,
            #ff9b31 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 35% 70%,
            #ff775f 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 72% 26%,
            rgba(255,255,255,0.95) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 84% 76%,
            #ffa02f 0 5px,
            transparent 6px
        ),

        radial-gradient(
            circle at 48% 10%,
            #ffffff 0 2px,
            transparent 3px
        );
}


.ehw-hero-dots-left {

    left: 42px;
    bottom: 44px;
}


.ehw-hero-dots-right {

    right: 42px;
    top: 40px;
}



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

.ehw-hero-content {

    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}



/* ==========================================================
   WORKSHOPS TITLE
========================================================== */

.ehw-hero h1 {

    position: relative;

    z-index: 5;

    margin: 0;

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            88px,
            10vw,
            150px
        );

    font-weight: 500;

    line-height: 0.86;

    letter-spacing: -4px;

    text-transform: uppercase;

    text-shadow:
        0 8px 30px
        rgba(120,0,46,0.16);
}



/* ==========================================================
   ORANGE SWIPE BELOW WORKSHOPS
========================================================== */

.ehw-hero-swipe {

    width: 150px;
    height: 11px;

    margin: 30px auto 18px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            #ff782c 15%,
            #ffa126 48%,
            #ff782c 82%,
            transparent 100%
        );

    clip-path:
        polygon(
            0 50%,
            16% 42%,
            37% 51%,
            58% 35%,
            80% 46%,
            100% 39%,
            100% 60%,
            81% 56%,
            60% 67%,
            38% 59%,
            17% 68%,
            0 62%
        );
}



/* ==========================================================
   HERO EYEBROW
========================================================== */

.ehw-hero-eyebrow {

    margin: 0 0 15px;

    color: #ff9b2d;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 5px;

    text-transform: uppercase;
}



/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.ehw-hero-description {

    max-width: 660px;

    margin: 0 auto;

    color:
        rgba(
            255,
            255,
            255,
            0.97
        );

    font-size: 17px;

    line-height: 1.72;
}



/* ==========================================================
   HERO BUTTONS
========================================================== */

.ehw-hero-buttons {

    display: flex;

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

    flex-wrap: wrap;

    gap: 17px;

    margin-top: 32px;
}



/* ==========================================================
   BUTTON BASE
========================================================== */

.ehw-btn {

    min-width: 195px;
    min-height: 52px;

    display: inline-flex;

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

    padding: 14px 25px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.5px;

    text-decoration: none !important;

    text-transform: uppercase;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.ehw-btn:hover {

    transform:
        translateY(-3px);
}



/* ==========================================================
   PRIMARY HERO BUTTON
========================================================== */

.ehw-btn-primary {

    color: #ffffff !important;

    border: 0;

    background:

        linear-gradient(
            105deg,

            #ff8b32 0%,

            #ff6b55 45%,

            #ec246e 100%
        );

    box-shadow:
        0
        13px
        26px
        rgba(101,0,39,0.18);
}


.ehw-btn-primary:hover {

    color: #ffffff !important;

    box-shadow:
        0
        17px
        32px
        rgba(101,0,39,0.26);
}



/* ==========================================================
   SECONDARY HERO BUTTON
========================================================== */

.ehw-btn-outline {

    color: #ffffff !important;

    border:
        1.5px solid
        rgba(255,255,255,0.96);

    background:
        transparent;
}


.ehw-btn-outline:hover {

    color:
        var(--ehw-deep-pink) !important;

    background:
        #ffffff;
}



/* ==========================================================
   VALUE STRIP
========================================================== */

.ehw-values {

    position: relative;

    padding: 38px 0;

    background:

        linear-gradient(
            90deg,

            #fff8f6 0%,

            #fff0ee 50%,

            #fff8f6 100%
        );
}


.ehw-values-grid {

    display: grid;

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



/* ==========================================================
   VALUE ITEM
========================================================== */

.ehw-value {

    position: relative;

    padding: 10px 30px;

    text-align: center;
}


.ehw-value:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 7%;
    right: 0;

    width: 1px;
    height: 86%;

    background:
        rgba(214,7,91,0.12);
}


.ehw-value-icon {

    width: 58px;
    height: 58px;

    margin: 0 auto 14px;

    color:
        var(--ehw-pink);
}


.ehw-value-icon svg {

    width: 100%;
    height: 100%;

    display: block;
}


.ehw-value h3 {

    margin: 0 0 8px;

    color: #41111f;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.ehw-value p {

    margin: 0;

    color: #362529;

    font-size: 13px;

    line-height: 1.65;
}



/* ==========================================================
   WORKSHOP SECTION
========================================================== */

.ehw-workshops {

    padding: 72px 0 82px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,111,91,0.05),
            transparent 35%
        ),

        #ffffff;
}



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

.ehw-section-heading {

    margin-bottom: 39px;

    text-align: center;
}


.ehw-section-eyebrow {

    display: block;

    margin-bottom: 7px;

    color: var(--ehw-pink);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 3.5px;

    text-transform: uppercase;
}


.ehw-section-heading h2 {

    margin: 0;

    color: #161014;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            44px,
            5vw,
            62px
        );

    font-weight: 600;

    line-height: 1;
}


.ehw-heading-swipe {

    width: 185px;
    height: 11px;

    margin: 8px auto 0;

    background:

        linear-gradient(
            90deg,

            transparent,

            var(--ehw-pink),

            #ff536e,

            transparent
        );

    clip-path:
        polygon(
            0 54%,
            17% 40%,
            38% 53%,
            60% 36%,
            81% 51%,
            100% 43%,
            100% 62%,
            82% 58%,
            61% 70%,
            39% 60%,
            17% 70%,
            0 63%
        );
}



/* ==========================================================
   WORKSHOP GRID
   ONLY EXISTS WHEN PHP HAS WORKSHOPS
========================================================== */

.ehw-workshop-grid {

    display: grid;

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

    gap: 18px;
}



/* ==========================================================
   ACTUAL WORKSHOP CARD
========================================================== */

.ehw-workshop-card {

    min-height: 430px;

    padding: 29px 24px 31px;

    text-align: center;

    background: #ffffff;

    border:
        1px solid
        rgba(110,20,48,0.09);

    box-shadow:
        0 8px 20px
        rgba(72,15,34,0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.ehw-workshop-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 17px 36px
        rgba(72,15,34,0.13);
}



/* ==========================================================
   WORKSHOP ICON AREA
========================================================== */

.ehw-workshop-icon-area {

    position: relative;

    width: 138px;
    height: 122px;

    margin: 0 auto 20px;

    display: flex;

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



/* watercolor */

.ehw-watercolor {

    position: absolute;

    width: 115px;
    height: 105px;

    border-radius:
        50% 44% 57% 43%
        /
        45% 55% 45% 55%;

    background:

        radial-gradient(
            circle at 35% 38%,

            rgba(242,56,118,0.22),

            rgba(255,159,158,0.27) 45%,

            rgba(255,215,206,0.38) 66%,

            transparent 72%
        );
}


.ehw-watercolor::before {

    content: "";

    position: absolute;

    width: 82px;
    height: 62px;

    left: -17px;
    top: 21px;

    border-radius: 50%;

    background:
        rgba(238,41,111,0.08);
}


.ehw-watercolor::after {

    content: "";

    position: absolute;

    width: 72px;
    height: 60px;

    right: -15px;
    bottom: 12px;

    border-radius: 50%;

    background:
        rgba(255,132,44,0.10);
}



/* ==========================================================
   WORKSHOP ICON
========================================================== */

.ehw-workshop-icon {

    position: relative;

    z-index: 2;

    width: 73px;
    height: 73px;

    color: var(--ehw-pink);
}


.ehw-workshop-card:nth-child(4n)
.ehw-workshop-icon {

    color:
        var(--ehw-orange);
}


.ehw-workshop-icon svg {

    width: 100%;
    height: 100%;
}



/* ==========================================================
   WORKSHOP CARD CONTENT
========================================================== */

.ehw-workshop-card h3 {

    margin: 0;

    color: #171013;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.05;
}


.ehw-card-line {

    display: block;

    width: 33px;
    height: 2px;

    margin: 13px auto 18px;

    background:
        var(--ehw-pink);
}


.ehw-workshop-card p {

    min-height: 82px;

    margin: 0;

    color: #38292d;

    font-size: 13px;

    line-height: 1.7;
}



/* ==========================================================
   LEARN MORE
========================================================== */

.ehw-learn-more {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 21px;

    color:
        var(--ehw-pink) !important;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.5px;

    text-decoration: none !important;

    text-transform: uppercase;
}


.ehw-learn-more:hover {

    color:
        var(--ehw-orange) !important;
}



/* ==========================================================
   NO WORKSHOPS / COMING SOON
========================================================== */

.ehw-coming-soon {

    position: relative;

    max-width: 900px;

    min-height: 295px;

    margin: 0 auto;

    padding: 38px 58px;

    display: grid;

    grid-template-columns:
        0.8fr
        1.4fr;

    align-items: center;

    gap: 45px;

    background:

        linear-gradient(
            115deg,

            #fff9f8 0%,

            #fff3f1 52%,

            #fffaf8 100%
        );

    border:
        1px solid
        rgba(242,91,104,0.28);

    box-shadow:
        0 12px 30px
        rgba(91,19,40,0.07);
}



/* top color edge */

.ehw-coming-soon::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:

        linear-gradient(
            90deg,

            var(--ehw-pink),

            var(--ehw-coral),

            var(--ehw-orange)
        );
}



/* ==========================================================
   COMING SOON ICON
========================================================== */

.ehw-coming-icon {

    position: relative;

    width: 180px;
    height: 180px;

    margin: 0 auto;

    display: flex;

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

    color:
        var(--ehw-pink);
}


.ehw-coming-circle {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

            rgba(255,215,210,0.77),

            rgba(255,237,232,0.75)
        );
}


.ehw-coming-icon svg {

    position: relative;

    z-index: 2;

    width: 105px;
    height: 105px;
}


.ehw-coming-icon svg path:nth-child(n+2) {

    stroke:
        var(--ehw-orange);
}



/* ==========================================================
   COMING SOON COPY
========================================================== */

.ehw-coming-copy {

    text-align: center;
}


.ehw-coming-script {

    display: block;

    margin-bottom: -2px;

    color:
        var(--ehw-pink);

    font-family:
        "Brittany Signature",
        "Amsterdam Four",
        "Allura",
        "Great Vibes",
        "Segoe Script",
        cursive;

    font-size: 54px;

    font-weight: 400;

    line-height: 1;
}


.ehw-coming-copy h3 {

    margin: 4px 0 15px;

    color:
        var(--ehw-magenta);

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.ehw-coming-copy p {

    max-width: 470px;

    margin: 0 auto;

    color: #51343d;

    font-size: 14px;

    line-height: 1.65;
}



/* ==========================================================
   GET NOTIFIED
========================================================== */

.ehw-coming-button {

    min-width: 155px;
    min-height: 43px;

    margin-top: 20px;

    display: inline-flex;

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

    padding: 10px 22px;

    color: #ffffff !important;

    background:

        linear-gradient(
            105deg,

            var(--ehw-magenta),

            var(--ehw-pink)
        );

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.6px;

    text-decoration: none !important;

    text-transform: uppercase;

    box-shadow:
        0 8px 18px
        rgba(162,0,66,0.16);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.ehw-coming-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(162,0,66,0.22);
}



/* ==========================================================
   FINAL CTA
========================================================== */

.ehw-final-cta {

    position: relative;

    overflow: hidden;

    padding: 52px 0;

    color: #ffffff;

    background:

        linear-gradient(
            108deg,

            #c50050 0%,

            #d9085e 38%,

            #ee356e 68%,

            #ff694d 100%
        );
}



/* orange circle */

.ehw-final-orb {

    position: absolute;

    width: 350px;
    height: 350px;

    left: -205px;
    bottom: -250px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

            #ff8c2c,

            #ff6754 49%,

            transparent 72%
        );
}



/* white decorative lines */

.ehw-final-lines {

    position: absolute;

    width: 270px;
    height: 185px;

    right: -35px;
    bottom: -40px;

    opacity: 0.15;

    background:

        repeating-linear-gradient(
            145deg,

            rgba(255,255,255,0.9) 0px,

            rgba(255,255,255,0.9) 5px,

            transparent 5px,

            transparent 15px
        );
}



/* ==========================================================
   FINAL CTA GRID
========================================================== */

.ehw-final-grid {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        1.2fr
        1fr
        0.8fr;

    align-items: center;

    gap: 38px;
}



/* ==========================================================
   FINAL HEADING
========================================================== */

.ehw-final-script {

    display: block;

    margin-bottom: -7px;

    color:
        #ff9e2e;

    font-family:
        "Brittany Signature",
        "Amsterdam Four",
        "Allura",
        "Great Vibes",
        "Segoe Script",
        cursive;

    font-size: 45px;

    line-height: 1;
}


.ehw-final-heading h2 {

    margin: 0;

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            42px,
            4vw,
            59px
        );

    font-weight: 600;

    line-height: 0.95;

    text-transform: uppercase;
}


.ehw-final-swipe {

    display: block;

    width: 150px;
    height: 10px;

    margin-top: 13px;

    background:

        linear-gradient(
            90deg,

            transparent,

            #ff892c,

            #ffa82b,

            transparent
        );
}



/* ==========================================================
   FINAL COPY
========================================================== */

.ehw-final-copy {

    padding-left: 35px;

    border-left:
        1px solid
        rgba(255,255,255,0.55);
}


.ehw-final-copy p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.97
        );

    font-size: 15px;

    line-height: 1.72;
}



/* ==========================================================
   FINAL REGISTER BUTTON
========================================================== */

.ehw-final-button {

    text-align: center;
}


.ehw-btn-final {

    color: #ffffff !important;

    border: 0;

    background:

        linear-gradient(
            105deg,

            #ff8a32,

            #ff6752,

            #ee2c71
        );

    box-shadow:
        0 10px 24px
        rgba(106,0,42,0.18);
}



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

@media (max-width: 1024px) {


    .ehw-hero {

        min-height: 580px;
    }


    .ehw-hero::before {

        width: 760px;

        height: 330px;
    }


    .ehw-values-grid {

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

        row-gap: 30px;
    }


    .ehw-value:nth-child(2)::after {

        display: none;
    }


    .ehw-workshop-grid {

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

        gap: 22px;
    }


    .ehw-coming-soon {

        max-width: 790px;

        padding:
            38px
            40px;
    }


    .ehw-final-grid {

        grid-template-columns:
            1fr
            1fr;
    }


    .ehw-final-button {

        grid-column:
            1 / -1;

        margin-top: 8px;
    }

}



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

@media (max-width: 767px) {


    .ehw-container {

        width:
            calc(100% - 30px);
    }



    /* HERO */

    .ehw-hero {

        min-height: auto;

        padding:
            70px
            0
            62px;
    }


    .ehw-hero::before {

        width: 520px;
        height: 250px;

        top: 37%;

        opacity: 0.13;
    }


    .ehw-hero h1 {

        font-size:
            clamp(
                58px,
                18vw,
                86px
            );

        letter-spacing: -2px;
    }


    .ehw-hero-swipe {

        margin-top: 24px;
    }


    .ehw-hero-eyebrow {

        font-size: 12px;

        letter-spacing: 3px;
    }


    .ehw-hero-description {

        font-size: 15px;

        line-height: 1.7;
    }


    .ehw-hero-buttons {

        flex-direction: column;

        gap: 11px;
    }


    .ehw-btn {

        width: 100%;
        max-width: 330px;
    }



    /* VALUES */

    .ehw-values {

        padding: 24px 0;
    }


    .ehw-values-grid {

        grid-template-columns: 1fr;

        row-gap: 0;
    }


    .ehw-value {

        padding:
            25px
            10px;
    }


    .ehw-value::after {

        display: none !important;
    }


    .ehw-value:not(:last-child) {

        border-bottom:
            1px solid
            rgba(215,7,93,0.10);
    }



    /* WORKSHOPS */

    .ehw-workshops {

        padding:
            58px
            0
            65px;
    }


    .ehw-section-heading h2 {

        font-size: 40px;
    }


    .ehw-workshop-grid {

        grid-template-columns: 1fr;
    }


    .ehw-workshop-card {

        min-height: 0;
    }


    .ehw-workshop-card p {

        min-height: 0;
    }



    /* COMING SOON */

    .ehw-coming-soon {

        grid-template-columns: 1fr;

        gap: 10px;

        padding:
            36px
            24px;
    }


    .ehw-coming-icon {

        width: 145px;
        height: 145px;
    }


    .ehw-coming-icon svg {

        width: 90px;
        height: 90px;
    }


    .ehw-coming-script {

        font-size: 43px;
    }


    .ehw-coming-copy h3 {

        letter-spacing: 3px;
    }



    /* FINAL CTA */

    .ehw-final-cta {

        padding:
            55px
            0;
    }


    .ehw-final-grid {

        grid-template-columns: 1fr;

        gap: 27px;

        text-align: center;
    }


    .ehw-final-script {

        font-size: 40px;
    }


    .ehw-final-heading h2 {

        font-size: 44px;
    }


    .ehw-final-swipe {

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


    .ehw-final-copy {

        padding:
            24px
            0
            0;

        border-left: 0;

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


    .ehw-final-button {

        grid-column: auto;

        margin-top: 0;
    }

}



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

@media (max-width: 480px) {


    .ehw-hero {

        padding-top: 58px;
    }


    .ehw-hero::before {

        width: 420px;
        height: 210px;
    }


    .ehw-hero h1 {

        font-size: 54px;

        letter-spacing: -1px;
    }


    .ehw-section-heading h2 {

        font-size: 35px;
    }


    .ehw-coming-script {

        font-size: 38px;
    }


    .ehw-final-heading h2 {

        font-size: 39px;
    }

}
/* MOVE WORKSHOP TITLE LEFT — MOBILE ONLY */
@media (max-width: 500px) {

    .ehw-hero h1 {
        position: relative !important;
        left: -20px !important;
        transform: none !important;
    }

}