.elementor-8995 .elementor-element.elementor-element-87e5c34{--display:flex;--min-height:110vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:1;--margin-top:-105px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0128px;--padding-left:64px;--padding-right:64px;}.elementor-8995 .elementor-element.elementor-element-87e5c34:not(.elementor-motion-effects-element-type-background), .elementor-8995 .elementor-element.elementor-element-87e5c34 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-af422b1 ) 0%, var( --e-global-color-7992ee8 ) 100%);}.elementor-8995 .elementor-element.elementor-element-87e5c34::before, .elementor-8995 .elementor-element.elementor-element-87e5c34 > .elementor-background-video-container::before, .elementor-8995 .elementor-element.elementor-element-87e5c34 > .e-con-inner > .elementor-background-video-container::before, .elementor-8995 .elementor-element.elementor-element-87e5c34 > .elementor-background-slideshow::before, .elementor-8995 .elementor-element.elementor-element-87e5c34 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8995 .elementor-element.elementor-element-87e5c34 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #FFFFFF00 66%, #000000 100%);}/* Start custom CSS for html, class: .elementor-element-ad25526 *//* =========================================================
   HERO TYPOGRAPHY
   Alleen desktop en tablet
   Maximale ontwerpbreedte: 1440px
   ========================================================= */

.hero-typography {
    --digital-size: clamp(110px, 16.5vw, 238px);
    --marketing-size: clamp(102px, 14.4vw, 207px);

    --intro-baseline-correction: 0px;
    --tagline-baseline-correction: 0px;
    --agency-baseline-correction: 0px;

    width: 100%;
    max-width: 1440px;
    margin-inline: auto;

    padding:
        clamp(54px, 5vw, 72px)
        clamp(24px, 3vw, 44px)
        clamp(64px, 6vw, 86px);

    color: #fff;
    font-family: "Space Grotesk", sans-serif;

    overflow: visible;
}

.hero-typography,
.hero-typography * {
    box-sizing: border-box;
}

.hero-typography span,
.hero-typography p,
.hero-typography h1 {
    color: inherit;
}

/* =========================================================
   BOVENSTE REGEL
   ========================================================= */

.hero-typography__top {
    display: flex;
    align-items: baseline;

    width: 100%;
    min-width: 0;
}

/* =========================================================
   WE + ARE A
   ========================================================= */

.hero-typography__intro {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;

    position: relative;
    top: var(--intro-baseline-correction);
}

.hero-typography__we {
    display: inline-block;

    margin: 0;
    padding: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(56px, 7.2vw, 104px);
    font-style: normal;
    font-weight: 600;

    line-height: 0.82;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.hero-typography__are {
    display: inline-block;

    margin: 0 0 0 clamp(7px, 0.65vw, 10px);
    padding: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(15px, 1.65vw, 24px);
    font-style: normal;
    font-weight: 600;

    line-height: 0.9;
    letter-spacing: -0.02em;
    white-space: nowrap;

    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* =========================================================
   DIGITAL
   ========================================================= */

.hero-typography__digital {
    display: inline-block;
    flex: 0 0 auto;

    margin: 0 0 0 clamp(15px, 1.3vw, 19px);
    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-size: var(--digital-size);
    font-style: italic;
    font-weight: 700;

    line-height: 0.84;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

/* =========================================================
   TAGLINE MET ACCOLADES
   ========================================================= */

.hero-typography__tagline {
    display: inline-block;
    position: relative;

    flex: 1 1 auto;
    min-width: 220px;

    margin:
        0
        clamp(34px, 3.5vw, 50px)
        0
        clamp(44px, 3.7vw, 56px);

    padding: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(14px, 1.3vw, 19px);
    font-style: normal;
    font-weight: 400;

    line-height: 1.45;
    letter-spacing: -0.015em;
    text-align: center;
    white-space: nowrap;

    top: var(--tagline-baseline-correction);
}

.hero-typography__tagline::before,
.hero-typography__tagline::after {
    position: absolute;
    top: 50%;

    color: inherit;

    font-family: Georgia, serif;
    font-size: 2.15em;
    font-style: normal;
    font-weight: 400;
    line-height: 1;

    transform: translateY(-50%);
}

.hero-typography__tagline::before {
    content: "{";
    left: -0.72em;
}

.hero-typography__tagline::after {
    content: "}";
    right: -0.72em;
}

/* =========================================================
   ONDERSTE REGEL
   ========================================================= */

.hero-typography__bottom {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: nowrap;

    gap: clamp(14px, 1.4vw, 20px);

    width: 100%;
    min-width: 0;

    margin-top: clamp(50px, 4.5vw, 66px);
}

/* =========================================================
   MARKETING
   ========================================================= */

.hero-typography__marketing {
    display: block;
    flex: 0 1 auto;

    width: auto;
    min-width: 0;

    margin: 0;
    padding: 0 0.08em 0 0;

    font-family: "Montserrat", sans-serif;
    font-size: var(--marketing-size);
    font-style: italic;
    font-weight: 700;

    line-height: 0.84;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

/* =========================================================
   AGENCY
   ========================================================= */

.hero-typography__agency {
    display: block;
    flex: 0 0 auto;

    position: relative;
    top: var(--agency-baseline-correction);

    margin: 0;
    padding: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(29px, 3.2vw, 46px);
    font-style: normal;
    font-weight: 700;

    line-height: 0.85;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

/* =========================================================
   VERBORGEN H1
   ========================================================= */

.screen-reader-text {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;

    border: 0 !important;
}

/* =========================================================
   ELEMENTOR OVERRIDES
   ========================================================= */

.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container,
.elementor-widget-html .hero-typography {
    overflow: visible !important;
}

/* =========================================================
   MIDDELGROTE DESKTOPS
   1280px tot en met 1399px
   ========================================================= */

@media (min-width: 1280px) and (max-width: 1399px) {
    .hero-typography {
        --digital-size: clamp(195px, 15.6vw, 218px);
        --marketing-size: clamp(166px, 12.9vw, 181px);

        padding-inline: 36px;
    }

    .hero-typography__we {
        font-size: clamp(82px, 6.9vw, 97px);
    }

    .hero-typography__are {
        font-size: clamp(18px, 1.55vw, 22px);
    }

    .hero-typography__tagline {
        min-width: 210px;

        margin-right: 34px;
        margin-left: 38px;

        font-size: clamp(14px, 1.2vw, 17px);
    }

    .hero-typography__bottom {
        gap: 16px;
    }

    .hero-typography__marketing {
        padding-right: 0.07em;
    }

    .hero-typography__agency {
        font-size: clamp(32px, 2.9vw, 41px);
    }
}

/* =========================================================
   KLEINERE DESKTOPS
   1025px tot en met 1279px
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1279px) {
    .hero-typography {
        --digital-size: clamp(158px, 14.8vw, 189px);
        --marketing-size: clamp(132px, 12vw, 154px);

        padding-top: 52px;
        padding-right: 30px;
        padding-bottom: 66px;
        padding-left: 30px;
    }

    .hero-typography__we {
        font-size: clamp(68px, 6.6vw, 84px);
    }

    .hero-typography__are {
        font-size: clamp(16px, 1.5vw, 19px);
    }

    .hero-typography__digital {
        margin-left: 13px;
        letter-spacing: -0.052em;
    }

    .hero-typography__tagline {
        min-width: 190px;

        margin-right: 30px;
        margin-left: 34px;

        font-size: clamp(13px, 1.2vw, 15px);
    }

    .hero-typography__tagline::before,
    .hero-typography__tagline::after {
        font-size: 2em;
    }

    .hero-typography__bottom {
        gap: 14px;
        margin-top: 50px;
    }

    .hero-typography__marketing {
        padding-right: 0.08em;
        letter-spacing: -0.06em;
    }

    .hero-typography__agency {
        font-size: clamp(28px, 2.7vw, 34px);
    }
}

/* =========================================================
   TABLET
   768px tot en met 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    .hero-typography {
        --digital-size: clamp(100px, 17.2vw, 176px);
        --marketing-size: clamp(82px, 13.6vw, 139px);

        padding-top: 48px;
        padding-right: 28px;
        padding-bottom: 58px;
        padding-left: 28px;
    }

    .hero-typography__top {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        row-gap: 36px;
    }

    .hero-typography__intro {
        grid-column: 1;
        grid-row: 1;
        align-items: center;
    }

    .hero-typography__we {
        font-size: clamp(54px, 8.4vw, 86px);
    }

    .hero-typography__are {
        font-size: clamp(14px, 2vw, 20px);
    }

    .hero-typography__digital {
        grid-column: 2;
        grid-row: 1;

        margin-left: 12px;
    }

    .hero-typography__tagline {
        grid-column: 1 / -1;
        grid-row: 2;

        justify-self: end;

        width: max-content;
        min-width: 0;

        margin-right: 42px;
        margin-left: 0;

        font-size: clamp(14px, 1.7vw, 17px);
    }

    .hero-typography__bottom {
        gap: 12px;
        margin-top: 44px;
    }

    .hero-typography__marketing {
        padding-right: 0.08em;
    }

    .hero-typography__agency {
        font-size: clamp(23px, 2.8vw, 29px);
    }
}

/* =========================================================
   VERBERG DEZE HERO OP MOBIEL
   ========================================================= */

@media (max-width: 767px) {
    .hero-typography {
        display: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87e5c34 */.hero-title-140 .elementor-heading-title {
    font-size: clamp(36px, 9.72vw, 140px);
    line-height: 0.85;
}

.hero-title-36 .elementor-heading-title {
    font-size: clamp(16px, 2.5vw, 36px);
    line-height: 1.1;
}

.hero-title-220 .elementor-heading-title {
    font-size: clamp(52px, 15.28vw, 220px);
    line-height: 0.8;
}

.hero-title-65 .elementor-heading-title {
    font-size: clamp(20px, 4.51vw, 65px);
    line-height: 0.95;
}/* End custom CSS */