.elementor-kit-17102{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Georgia";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Georgia";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Helvetica", Sans-serif;}.elementor-kit-17102 e-page-transition{background-color:#FFBC7D;}.elementor-kit-17102 h1{font-family:"Georgia", Sans-serif;}.elementor-kit-17102 h2{font-family:"Georgia", Sans-serif;}.elementor-kit-17102 h3{font-family:"Georgia", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
   WILLIAM LOUEY
   HERO SECTION
   COMPLETE FINAL CSS
   ========================================================== */


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

.wl-hero {

    --wl-paper-light: #f2eee4;
    --wl-paper: #ded7c8;
    --wl-ink: #171717;
    --wl-red: #c8483d;

    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 710px;

    overflow: hidden;

    box-sizing: border-box;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(4rem, 8vw, 8.5rem)
        3.5rem;

    background:
        var(--wl-paper-light);

    color:
        var(--wl-ink);

    border-bottom:
        8px solid var(--wl-paper);
}


/* ==========================================================
   RESET / NORMALIZATION
   ========================================================== */

.wl-hero *,
.wl-hero *::before,
.wl-hero *::after {

    box-sizing: border-box;
}


.wl-hero img {

    display: block;

    max-width: none;

    height: auto;
}


.wl-hero h1,
.wl-hero p {

    margin-top: 0;
}


.wl-hero a {

    text-decoration: none;
}


/* ==========================================================
   THEATRE CURTAINS
   ========================================================== */

/*
   The curtains are real PNG artwork.

   They sit:
   - above the paper background
   - below all Dada artwork
   - below William
   - below the text layer
*/


.wl-hero-curtain {

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 3;

    height: 100%;

    width: auto;

    max-width: none;

    margin: 0;

    padding: 0;

    display: block;

    pointer-events: none;

    user-select: none;

    object-fit: contain;
}


/* LEFT CURTAIN */

.wl-hero-curtain-left {

    left: 0;

    transform: none;

    transform-origin:
        top left;
}


/* RIGHT CURTAIN */

.wl-hero-curtain-right {

    right: 0;

    transform: none;

    transform-origin:
        top right;
}


/* ==========================================================
   PINK NOTE
   ========================================================== */

.wl-hero-note {

    position: absolute;

    left: 35%;
    top: 4%;

    z-index: 5;

    padding:
        .75rem 1rem;

    background:
        #dda6b3;

    color:
        #171717;

    font-family:
        "Comic Sans MS",
        "Bradley Hand",
        cursive;

    font-size:
        .78rem;

    line-height:
        1.05;

    transform:
        rotate(-5deg);

    box-shadow:
        0 5px 12px rgba(0,0,0,.08);

    pointer-events:
        none;
}


/* ==========================================================
   DADA ARTWORK BASE
   ========================================================== */

.wl-hero-art {

    position: absolute;

    z-index: 4;

    height: auto;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================
   LIPS
   ========================================================== */

.wl-hero-mouth {

    right: 24%;

    top: 3%;

    width:
        clamp(92px, 12vw, 155px);

    transform:
        rotate(7deg);
}


/* ==========================================================
   POINTING HAND
   ========================================================== */

.wl-hero-point {

    right: -2%;

    top: 17%;

    width:
        clamp(180px, 26vw, 350px);

    transform:
        rotate(0deg);
}


/* ==========================================================
   LIGHTBULB / HAND
   ========================================================== */

.wl-hero-bulb {

    left: 4%;

    top: 13%;

    width:
        clamp(140px, 18vw, 230px);

    transform:
        rotate(-9deg);
}


/* ==========================================================
   ORANGE TAPE
   ========================================================== */

.wl-hero-orange-tape {

    left: 1%;

    top: 43%;

    width:
        clamp(120px, 17vw, 230px);

    transform:
        rotate(-7deg);
}


/* ==========================================================
   WILLIAM LOUEY CUTOUT
   ========================================================== */

.wl-hero-william {

    position: absolute;

    right: 5%;

    bottom: -2%;

    z-index: 8;

    width:
        clamp(390px, 48vw, 660px);

    height: auto;

    max-width: none;

    transform:
        rotate(-1deg);

    filter:
        drop-shadow(
            0 16px 18px rgba(0,0,0,.12)
        );

    pointer-events:
        none;

    user-select:
        none;
}


/* ==========================================================
   MAIN HERO COPY
   ========================================================== */

.wl-hero-copy {

    position: relative;

    z-index: 10;

    width:
        min(62%, 710px);

    margin:
        0 auto 0 16%;
}


/* ==========================================================
   KICKER
   ========================================================== */

.wl-hero-kicker {

    margin:
        0 0 1.1rem 1.5rem;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .68rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        #171717;
}


/* ==========================================================
   MAIN TITLE
   ========================================================== */

.wl-hero-title {

    margin:
        0;

    padding:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(4.7rem, 9.7vw, 9.4rem);

    font-weight:
        400;

    line-height:
        .67;

    letter-spacing:
        -.07em;

    color:
        var(--wl-ink);
}


/* OPPORTUNITY */

.wl-hero-title > span:first-child {

    display:
        block;
}


/* CHANGES */

.wl-hero-title em {

    display:
        block;

    margin-left:
        19%;

    color:
        var(--wl-red);

    font-size:
        .63em;

    font-style:
        normal;

    line-height:
        .78;
}


/* LIVES */

.wl-hero-title .wl-hero-last-line {

    display:
        block;

    margin-left:
        40%;

    font-size:
        .8em;
}


/* ==========================================================
   HAND DRAWN ARROW
   ========================================================== */

.wl-hero-arrow {

    position: absolute;

    left: 2%;

    top: 53%;

    z-index: 12;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        4rem;

    line-height:
        1;

    transform:
        rotate(18deg);

    pointer-events:
        none;
}


/* ==========================================================
   WILLIAM NAME CARD
   ========================================================== */

.wl-hero-name-card {

    position: relative;

    z-index: 12;

    width:
        max-content;

    margin:
        -.2rem 0 0 -1rem;

    padding:
        .45rem 1rem;

    background:
        #eee6d7;

    transform:
        rotate(-3deg);

    box-shadow:
        0 2px 4px rgba(0,0,0,.04);
}


.wl-hero-name-card strong {

    display:
        block;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .9rem;

    font-weight:
        800;

    letter-spacing:
        -.01em;

    text-transform:
        uppercase;
}


.wl-hero-name-card i {

    position: absolute;

    left: 15%;

    right: 10%;

    bottom: .1rem;

    height:
        1px;

    background:
        #171717;

    transform:
        rotate(-2deg);

    opacity:
        .7;
}


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

.wl-hero-intro {

    position: relative;

    z-index: 12;

    max-width:
        440px;

    margin:
        1.6rem 0 1rem 1.5rem;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .95rem;

    line-height:
        1.42;

    color:
        #262626;
}


.wl-hero-intro strong {

    font-weight:
        700;

    text-decoration:
        underline;

    text-decoration-color:
        #d99b28;

    text-decoration-thickness:
        2px;

    text-underline-offset:
        2px;
}


/* ==========================================================
   BUTTON AREA
   ========================================================== */

.wl-hero-actions {

    position:
        relative;

    z-index:
        15;

    display:
        flex;

    align-items:
        center;

    gap:
        1.1rem;

    margin:
        1.5rem 0 0 1.5rem;

    flex-wrap:
        wrap;
}


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

.wl-hero-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .85rem;

    min-height:
        45px;

    padding:
        .75rem 1.15rem;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .73rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .02em;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


/* BUTTON ARROW */

.wl-button-arrow {

    display:
        inline-block;

    font-size:
        1.1rem;

    line-height:
        1;

    transition:
        transform .25s ease;
}


/* DARK BUTTON */

.wl-hero-button-dark {

    background:
        #171717;

    color:
        #ffffff;
}


.wl-hero-button-dark:hover {

    background:
        #000000;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


/* PLAIN BUTTON */

.wl-hero-button-plain {

    padding-left:
        .2rem;

    padding-right:
        .2rem;

    color:
        #171717;

    border-bottom:
        1px solid #171717;
}


.wl-hero-button-plain:hover {

    color:
        var(--wl-red);

    border-color:
        var(--wl-red);

    transform:
        translateY(-2px);
}


/* ARROW HOVER */

.wl-hero-button:hover
.wl-button-arrow {

    transform:
        translateX(3px);
}


/* ==========================================================
   HANDWRITTEN NOTE
   ========================================================== */

.wl-hero-hand-note {

    position:
        absolute;

    right:
        15%;

    top:
        31%;

    z-index:
        11;

    font-family:
        "Comic Sans MS",
        "Bradley Hand",
        cursive;

    font-size:
        .85rem;

    line-height:
        1.25;

    font-style:
        italic;

    transform:
        rotate(-4deg);

    pointer-events:
        none;
}


.wl-hero-hand-note b {

    font-size:
        1.2rem;

    font-weight:
        400;
}


/* ==========================================================
   IMPACT STAMP
   ========================================================== */

.wl-hero-impact {

    position:
        absolute;

    right:
        30%;

    bottom:
        3%;

    z-index:
        10;

    width:
        106px;

    height:
        106px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid #171717;

    border-radius:
        50%;

    transform:
        rotate(-10deg);

    pointer-events:
        none;
}


/* Stamp text */

.wl-hero-impact span {

    font-family:
        "Comic Sans MS",
        "Bradley Hand",
        cursive;

    font-size:
        .63rem;

    line-height:
        1.15;

    text-align:
        center;
}


/* Stamp arrow */

.wl-hero-impact b {

    position:
        absolute;

    top:
        8px;

    right:
        13px;

    font-family:
        Georgia,
        serif;

    font-size:
        1rem;

    font-weight:
        400;
}


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

@media (max-width: 1100px) {

    .wl-hero {

        min-height:
            680px;

        padding:
            5rem 4rem 3rem;
    }


    .wl-hero-copy {

        width:
            66%;

        margin-left:
            8%;
    }


    .wl-hero-title {

        font-size:
            clamp(4.2rem, 10vw, 7.5rem);
    }


    .wl-hero-william {

        right:
            -2%;

        width:
            clamp(360px, 53vw, 560px);
    }


    .wl-hero-point {

        right:
            -8%;
    }


    .wl-hero-hand-note {

        right:
            12%;
    }


    .wl-hero-impact {

        right:
            27%;
    }
}


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

@media (max-width: 767px) {

    .wl-hero {

        min-height:
            720px;

        padding:
            4rem 1.25rem 2.5rem;

        overflow:
            hidden;
    }


    /* -----------------------------------------------
       CURTAINS
       ----------------------------------------------- */

    .wl-hero-curtain {

        height:
            100%;

        width:
            auto;
    }


    .wl-hero-curtain-left {

        left:
            -18px;
    }


    .wl-hero-curtain-right {

        right:
            -18px;
    }


    /* -----------------------------------------------
       COPY
       ----------------------------------------------- */

    .wl-hero-copy {

        width:
            100%;

        margin:
            0;

        position:
            relative;

        z-index:
            20;
    }


    /* -----------------------------------------------
       KICKER
       ----------------------------------------------- */

    .wl-hero-kicker {

        margin-left:
            .3rem;

        max-width:
            70%;

        font-size:
            .58rem;

        letter-spacing:
            .08em;
    }


    /* -----------------------------------------------
       TITLE
       ----------------------------------------------- */

    .wl-hero-title {

        font-size:
            clamp(4rem, 18vw, 6.5rem);

        line-height:
            .69;
    }


    .wl-hero-title em {

        margin-left:
            14%;
    }


    .wl-hero-title .wl-hero-last-line {

        margin-left:
            28%;
    }


    /* -----------------------------------------------
       INTRO
       ----------------------------------------------- */

    .wl-hero-intro {

        position:
            relative;

        z-index:
            20;

        max-width:
            330px;

        margin:
            1.25rem 0 .75rem .3rem;

        font-size:
            .82rem;

        line-height:
            1.42;
    }


    /* -----------------------------------------------
       BUTTONS
       ----------------------------------------------- */

    .wl-hero-actions {

        position:
            relative;

        z-index:
            25;

        margin:
            1.1rem 0 0 .3rem;

        gap:
            .7rem;
    }


    .wl-hero-button {

        min-height:
            41px;

        padding:
            .65rem .85rem;

        font-size:
            .67rem;
    }


    /* -----------------------------------------------
       NAME CARD
       ----------------------------------------------- */

    .wl-hero-name-card {

        margin-left:
            -.1rem;

        padding:
            .38rem .8rem;
    }


    .wl-hero-name-card strong {

        font-size:
            .78rem;
    }


    /* -----------------------------------------------
       WILLIAM
       ----------------------------------------------- */

    .wl-hero-william {

        right:
            -17%;

        bottom:
            -1%;

        z-index:
            8;

        width:
            92vw;

        max-width:
            none;
    }


    /* -----------------------------------------------
       PINK NOTE
       ----------------------------------------------- */

    .wl-hero-note {

        left:
            auto;

        right:
            7%;

        top:
            5%;

        font-size:
            .65rem;

        padding:
            .55rem .7rem;
    }


    /* -----------------------------------------------
       LIPS
       ----------------------------------------------- */

    .wl-hero-mouth {

        right:
            10%;

        top:
            15%;

        width:
            75px;
    }


    /* -----------------------------------------------
       POINTING HAND
       ----------------------------------------------- */

    .wl-hero-point {

        right:
            -24%;

        top:
            24%;

        width:
            220px;

        opacity:
            .85;
    }


    /* -----------------------------------------------
       LIGHTBULB
       ----------------------------------------------- */

    .wl-hero-bulb {

        left:
            -10%;

        top:
            26%;

        width:
            135px;

        opacity:
            .9;
    }


    /* -----------------------------------------------
       ORANGE TAPE
       ----------------------------------------------- */

    .wl-hero-orange-tape {

        left:
            -12%;

        top:
            49%;

        width:
            170px;
    }


    /* -----------------------------------------------
       HANDWRITTEN NOTE
       ----------------------------------------------- */

    .wl-hero-hand-note {

        right:
            5%;

        top:
            39%;

        z-index:
            15;

        font-size:
            .65rem;
    }


    /* -----------------------------------------------
       IMPACT STAMP
       ----------------------------------------------- */

    .wl-hero-impact {

        right:
            auto;

        left:
            4%;

        bottom:
            5%;

        width:
            76px;

        height:
            76px;

        z-index:
            15;
    }


    .wl-hero-impact span {

        font-size:
            .48rem;
    }


    .wl-hero-impact b {

        top:
            5px;

        right:
            9px;

        font-size:
            .75rem;
    }


    /* -----------------------------------------------
       HAND DRAWN ARROW
       ----------------------------------------------- */

    .wl-hero-arrow {

        display:
            none;
    }
}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 420px) {

    .wl-hero {

        min-height:
            700px;

        padding-top:
            3.5rem;
    }


    .wl-hero-title {

        font-size:
            clamp(3.65rem, 17.5vw, 5rem);
    }


    .wl-hero-intro {

        max-width:
            285px;
    }


    .wl-hero-william {

        right:
            -25%;

        width:
            105vw;
    }


    .wl-hero-hand-note {

        top:
            40%;

        right:
            3%;
    }
}


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

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

    .wl-hero-button,
    .wl-hero-button .wl-button-arrow {

        transition:
            none;
    }
}/* End custom CSS */