/* theme vars */

:root {
    --brand-color: #D64136;
    /*globals*/
    --ink-color: #1E1E1E;
    --ink-color-inactive: #666;
    --card-bg: #fff;
    --card-border-color: #E2E2E2;
    --card-border-width: 1px;
    --card-radius: 40px;
    --card-shadow-x: 16px;
    --card-shadow-y: 16px;
    --card-shadow-blur: 20px;
    --card-shadow-color: rgb(0 0 0 / 10%);
    --card-shadow: var(--card-shadow-x) var(--card-shadow-x) var(--card-shadow-x) var(--card-shadow-color);
    --tag-background-color: #FFF;
    --link-color-active: var(--ink-color);
    --ui-card-text-color: var(--ink-color);
    --button-radius: 9999px;
    /*theme-switcher*/
    --theme-switcher-light-fill: var(--ink-color);
    --theme-switcher-dark-fill: none;
    --theme-switcher-toggle-bg: var(--card-bg);
    --theme-switcher-toggle-color: var(--brand-color);
    /*Hero*/
    --hero2-bg-image: url(/_res/themes/shoutdigital/hero2.png);
    --hero2-bg-color: #F4F4F4;
    --hero2-rect-bg-mobile: rgba(255, 255, 255, 0.85);
    --hero2-rect-bg-desktop: rgba(255, 255, 255, 0.05);
    --hero2-rect-border: #E2E2E2;
    --hero2-rect-shadow: var(--card-shadow);
    --hero2-heading-color: var(--ink-color);
    --hero2-strong-color: #73D6A5;
    --hero2-btn-bg: var(--brand-color);
    --hero2-btn-color: #ffffff;
    --hero2-edge-text-color: #000;
    --hero2-edge-strong-color: var(--brand-color);
    --hero-scaleX: 1.2;
    /*Body*/
    --body-bg: #F4F4F4;
    --main-bg: #F4F4F4;
    --main-bg-alt: #e7e6e6;
    --body-text-color: var(--ink-color);
    --header-bg: #F4F4F4;
    /*Heading*/
    --heading-color: var(--ink-color);
    /*IconCard*/
    --icon-card-bg: var(--card-bg);
    --icon-card-border-color: var(--card-border-color);
    --icon-card-shadow: var(--card-shadow);
    --icon-card-url: url(/_res/themes/shoutdigital/icon-card.svg);
    --icon-card-lightning-url: url(/_res/themes/shoutdigital/icon-card-lightning.svg);
    --icon-card-aichip-url: url(/_res/themes/shoutdigital/icon-card-aichip.svg);
    --icon-card-sliders-url: url(/_res/themes/shoutdigital/icon-card-sliders.svg);
    --icon-card-lightbulb-url: url(/_res/themes/shoutdigital/icon-card-lightbulb.svg);
    /*Hr*/
    --hr-url: url(/_res/themes/shoutdigital/hr.svg);
    /*cs-spot*/
    --cs-spot-bg: var(--card-bg);
    --cs-spot-border-color: var(--card-border-color);
    --cs-spot-border: var(--card-border-width) solid var(--cs-spot-border-color);
    --cs-spot-shadow: var(--card-shadow);
    --cs-spot-padding-bottom: calc(var(--card-shadow-blur) + 4px);
    /*newsletter*/
    --nl-card-radius: var(--card-radius);
    --nl-card-bg: var(--brand-color);
    
}

    :root:has(#dark-mode:checked) {
        /*globals*/
        --ink-color: #fff;
        --ink-color-inactive: #b2b2b2;
        --card-bg: #242424;
        --card-border-color: #4c4c4c;
        --tag-background-color: #494e55;
        /*theme-switcher*/
        --theme-switcher-light-fill: none;
        --theme-switcher-dark-fill: var(--ink-color);
        /*Hero*/
        --hero2-bg-image: url("/_res/themes/shoutDigital/dark/hero2.png");
        --hero2-bg-color: #17191b;
        --hero2-rect-bg-mobile: rgba(35, 37, 39, 0.85);
        --hero2-rect-bg-desktop: rgba(255, 255, 255, 0.05);
        --hero2-rect-border: #4c4c4c;
        --hero2-rect-shadow: 16px 16px 40px 0 rgba(0, 0, 0, 0.2);
        --hero2-strong-color: var(--accentColour, #e03c21);
        --hero2-edge-text-color: #ffffff;
        /*Body*/
        --body-bg: var(--color-mono-grey-7);
        --main-bg: var(--color-mono-grey-7);
        --main-bg-alt: #363636;
        --header-bg: var(--color-mono-grey-7);
        /*IconCard*/

        --icon-card-url: url(/_res/themes/shoutdigital/dark/icon-card.svg);
        --icon-card-lightning-url: url(/_res/themes/shoutdigital/dark/icon-card-lightning.svg);
        --icon-card-aichip-url: url(/_res/themes/shoutdigital/dark/icon-card-aichip.svg);
        --icon-card-sliders-url: url(/_res/themes/shoutdigital/dark/icon-card-sliders.svg);
        --icon-card-lightbulb-url: url(/_res/themes/shoutdigital/dark/icon-card-lightbulb.svg);
        /*Hr*/
        --hr-url: url(/_res/themes/shoutdigital/dark/hr.svg);
        /*cs-spot*/
    }

    /*Light Mode only*/
    :root:not(:has(#dark-mode:checked)) ui-container[style*="--ui-container-container-background-color"],
    :root:not(:has(#dark-mode:checked)) ui-container[style*="--ui-container-background-color"] {
        --ui-container-container-background-color: var(--main-bg-alt) !important;
        --ui-container-background-color: var(--main-bg-alt) !important;
    }

    :root:not(:has(#dark-mode:checked)) .table--theme-alternate tbody tr {
        --table-row-background: var(--main-bg);
    }
        :root:not(:has(#dark-mode:checked)) .table--theme-alternate tbody tr:nth-child(2n) {
            --table-row-background: var(--main-bg-alt);
        }

    :root:not(:has(#dark-mode:checked)) body .section-intro {
        background-image: linear-gradient(180deg, var(--main-bg-alt), var(--main-bg));
    }



    :root:not(:has(#dark-mode:checked)) ui-button[look=secondary] {
        --ui-button-color: var(--color-mono-white);
        --ui-button-background-color: var(--color-mono-black);
    }

    :root:not(:has(#dark-mode:checked)) ui-button[look=outline-primary] {
        --ui-button-color: var(--color-mono-white);
        --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--color-mono-white);
    }

    :root:not(:has(#dark-mode:checked)) ui-button[look=outline-secondary] {
        --ui-button-color: var(--color-mono-black);
        --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--color-mono-black);
    }
    :root:not(:has(#dark-mode:checked)) hr {
        --hr-color: var(--ink-color);
    }


    :root:not(:has(#dark-mode:checked)) .section-intro .section-intro__image {
        filter: drop-shadow(6px 3px 11px #c3c3c3);
    }

    :root .rte.rte--grey-rounded {
        background: var(--card-bg);
    }

    :root .rte.rte--code {
        border-color: var(--card-border-color);
        color: var(--ink-color);
    }

    /*section-intro*/
    :root body .section-intro {
        --ui-section-intro-background-color: var(--main-bg);
        --ui-section-intro-color: var(--ink-color);
        transition: opacity 1s ease-in-out;
    }

        :root body .section-intro h1 {
            color: var(--ui-section-intro-color);
        }

        :root body .section-intro ui-tag {
            --ui-tag-background-color: var(--tag-background-color);
        }

        :root body .section-intro p {
            line-height:1.4;
        }

    :root body ui-container.hr:after {
        border-bottom-color: var(--ink-color);
    }

    :root body ui-link-list ui-icon, :root body ui-link ui-icon {
        --ui-icon-color: var(--ink-color);
    }

    /*rte*/
    :root body :is(h1, h2, h3, h4, h5, h6, p, li, td, th, tr, input[type="text"], input[type="email"], select, picture, textarea, .c-forms .umbraco-forms-fieldset .umbraco-forms-container label):not(ui-footer *) {
        --text-colour: var(--ink-color);
        color: var(--ink-color);
        border-color: var(--ink-color);
    }

    :root body :is(h1 + div, h2 + div, h3 + div, h4+ div, h5+ div, h6+ div) {
        color: var(--ink-color);
    }

    :root body ol a, :root body p a, :root body ul a {
        --link-color: var(--brand-color);
    }

        :root body ol a:hover, :root body p a:hover, :root body ul a:hover {
            text-decoration: underline;
            --link-color: var(--ink-color);
        }

body {
    background-color: var(--body-bg) !important;
}

#site-header {
    background-color: transparent !important;
    --ui-button-border-base-radius: var(--button-radius);
}

@media (min-width: 1200px) {
    #site-header {
        height: 145px;
    }
}

#site-header ui-overlay.menu-overlay {
    --overlay-background: var(--body-bg);
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .1);
}

#site-header ui-accordion-menu[look=menu] ui-nav-item {
    --ui-nav-item-background-color: transparent;
    --ui-nav-item-hover-background-color: transparent;
}

#site-header > ui-group {
    padding: 0 16px;
}

@media (min-width: 1200px) {
    #site-header > ui-group {
        padding: 0 24px;
    }
}

#site-header .site-header__links {
    flex: 1 0 50%;
    max-width: 50%;
    justify-content: flex-end;
    gap: 16px;
}

@media (min-width: 1200px) {
    #site-header .site-header__links {
        max-width: 80%;
    }
}

#site-header ui-grid h3, #site-header ui-grid p {
    --content-text-primary: var(--ink-color);
    color: var(--ink-color);
    --ui-icon-color: transparent;
}

#site-header ui-content-card[look=summaryCard]::part(article) {
    gap: 24px;
}

#site-header ui-content-card[look=summaryCard] img[slot=head] {
    height: 200px;
    flex: 0 0 200px;
    max-width: 200px;
}

#site-header ui-grid ui-link a, #site-header ui-grid ui-link a {
    --ui-link-color: var(--brand-color);
    --ui-icon-color: var(--brand-color);
}

#site-header ui-content-card[look=summaryCard] [slot=body] h3 {
    font-size: 20px;
}

#site-header ui-grid ui-icon::part(path) {
    fill: transparent;
    stroke: var(--ink-color);
}

#site-header ui-content-card[look=summaryCard] {
    --ui-card-background-color: var(--body-bg)
}

#site-header ui-button[look=outline-secondary] {
    --ui-button-color: var(--ink-color);
    --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--ink-color);
}

#site-header ui-button svg {
    fill: transparent;
}

    #site-header ui-button svg path {
        stroke: var(--ink-color);
    }

#site-header ui-overlay.menu-overlay ui-tabbed-megamenu::part(tabControls) {
    border-color: var(--ink-color);
}

#site-header ui-overlay.menu-overlay ui-tabbed-megamenu {
    --tabbed-components-tab-color: var(--ink-color-inactive);
    --tabbed-components-active-tab-color: var(--ink-color);
    --tabbed-components-list-background-color: transparent;
    --tabbed-components-tab-content-background-color: transparent;
    --tabbed-megamenu-background-color: var(--body-bg);
    --tabbed-components-tab-content-padding: 64px 32px;
    --tabbed-components-list-padding: 55px 32px;
    background-color: var(--body-bg);
    box-shadow: inset 0px 20px 20px -20px rgba(0, 0, 0, .1);
}

@media (min-width: 1440px) {
    #site-header ui-overlay.menu-overlay ui-tabbed-megamenu {
        --tabbed-components-tab-content-padding: 64px 64px;
    }
}

#site-header ui-overlay.menu-overlay ui-tabbed-megamenu > div > ui-icon::part(path) {
    fill: var(--ink-color) !important;
}

#site-header > ui-group div:nth-child(2) ui-nav {
    display: none;
}

@media (min-width: 1200px) {
    #site-header > ui-group div:nth-child(2) ui-nav {
        flex: 1 1 auto; /* takes all remaining middle space */
        display: flex;
        justify-content: center; /* contents inside are centred */
        --ui-nav-justify-content: center;
    }
}

#site-header > ui-group div:nth-child(2) ui-nav ui-icon {
    --ui-icon-stroke-color: var(--ink-color) !important;
}

#site-header ui-nav-item {
    color: var(--ink-color) !important;
    font-weight: bold;
}

#site-header .header__brand {
    color: var(--ink-color) !important;
    padding-top: 7px;
    width: 150px;
}

@media (max-width: 400px) {
    #site-header .header__brand {
        padding-top: 12px;
        width: 120px;
    }
}

#mobilePrimaryNavigation-control {
    min-width: 48px;
}

#site-header .header__brand svg {
    fill: currentColor;
}

#engage-cockpit, body .loader {
    display: none !important;
}

:root ui-footer .footer__group.footer__group--0, :root ui-footer .footer__group.footer__group--1, :root ui-footer .footer__group.footer__group--2 {
    --footer-nav-group-width: 1300px;
    --ui-group-max-width: 1300px;
}

:root ui-footer .footer__group.footer__group--0 {
    padding: 40px var(--size-24) 30px;
}

:root ui-footer .footer__group.footer__group--1 {
    padding: 32px var(--size-24);
}

:root ui-footer .footer__group.footer__group--2 {
    padding: 0 var(--size-24);
}

    :root ui-footer .footer__group.footer__group--2 [part=footerText] {
        padding: 10px 0;
    }

    :root ui-footer .footer__group.footer__group--2 p {
        margin: 0 auto;
        font-size: var(--size-16);
    }

:root ui-footer .footer__group.footer__group--0 > div ui-image {
    --ui-image-width: 150px;
    padding: 0;
}

ui-footer .footer__group.footer__group--0 h4 {
    font-size: 20px;
    line-height: 30px;
}

.theme-switcher {
    width: 102px;
    display: flex !important;
    align-items: center;
    gap: 5px;
    color: var(--ink-color); /* drives currentColor */
}

.theme-switcher {
    stroke: currentColor;
    fill: currentColor;
}

    .theme-switcher .light, .theme-switcher .dark {
        cursor: pointer;
    }

    .theme-switcher .light {
        fill: var(--theme-switcher-light-fill);
    }

    .theme-switcher .dark {
        fill: var(--theme-switcher-dark-fill);
    }

.theme-switcher__toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

    .theme-switcher__toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .theme-switcher__toggle span {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: var(--theme-switcher-toggle-bg);
        border-radius: var(--button-radius);
        transition: background 0.2s;
    }

        .theme-switcher__toggle span::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 2px;
            top: 2px;
            background: var(--theme-switcher-toggle-color);
            border-radius: var(--button-radius);
            transition: transform 0.2s;
        }

    .theme-switcher__toggle input:checked + span::before {
        transform: translateX(18px);
    }

.hero2 {
    padding: 24px;
    background-color: var(--hero2-bg-color);
    background-image: var(--hero2-bg-image);
    background-position: left -24px;
    background-repeat: no-repeat;
    background-size: 1028px auto;
    margin-bottom: 48px;
    position: relative;
    overflow: clip;
}

@media (min-width: 960px) {
    .hero2 {
        /*background-image: var(--hero2-bg-image);*/
        padding: 24px 24px 48px;
        background-position: 340px 8px;
        background-size: auto 624px;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        min-height: 624px;
        display: grid;
        gap: 32px;
        grid-template-columns: 288px 1fr;
        align-items: stretch;
    }
}

@media (min-width: 1200px) {
    .hero2 {
        background-size: auto auto;
    }
}

@media (min-width: 1440px) {
    .hero2 {
        padding: 16px 64px 58px;
        max-width: 1408px;
        background-position: 380px -2px;
    }
}

.hero2__left {
    display: grid;
    grid-template-rows: auto 56px;
    gap: 32px;
    width: 100%;
}

@media (min-width: 960px) {
    .hero2__left {
        max-width: 288px;
    }
}

.hero2__rect {
    padding: 48px 32px;
    background: var(--hero2-rect-bg-mobile);
    border-radius: var(--card-radius);
    box-shadow: inset 0 0 0 1px var(--hero2-rect-border), var(--hero2-rect-shadow);
    display: flex;
    align-items: center;
}

@media (min-width: 960px) {
    .hero2__rect {
        background: var(--hero2-rect-bg-desktop);
        width: 288px;
        padding: 80px 40px 83px;
    }
}

.hero2__text {
    position: relative;
    z-index: 1;
    color: var(--hero2-heading-color);
}

@media (min-width: 960px) {
    .hero2__text {
        min-width: 720px;
    }
}

.hero2__rect .hero2__text h1, .hero2__rect .hero2__text h2, .hero2__rect .hero2__text h3 {
    margin: 0;
    font-weight: 400;
    line-height: 1.19;
    letter-spacing: 0.03em;
    font-size: clamp(20px, 6vw, 54px);
    max-width: 100%;
    color: inherit;
}

.hero2__rect .hero2__text h2 {
    font-size: clamp(18px, 6vw, 44px);
}

.hero2__rect .hero2__text h3 {
    font-size: clamp(16px, 6vw, 36px);
}

.hero2__text strong {
    color: var(--hero2-strong-color) !important;
}

.hero2 a.hero2__btn {
    display: inline-block;
    background: var(--hero2-btn-bg);
    color: var(--hero2-btn-color);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--button-radius);
    padding: 14px 22px;
    width: 100%;
    text-align: center;
}

.hero2__right {
    display: none;
}

@media (min-width: 1200px) {
    .hero2__right {
        display: flex;
        position: relative;
        height: 588px;
    }
}

.hero2 .hero2__edge-tag {
    display: none;
}

@media (min-width: 1200px) {
    .hero2 .hero2__edge-tag {
        display: flex;
        position: absolute;
        top: 210px;
        left: 1060px;
        width: 240px;
        height: 160px;
        transform: rotate(-90deg);
        transform-origin: 100% 100%;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-end;
        font-family: "Sora", sans-serif;
        font-weight: 300;
        font-size: 40px;
        line-height: 40px;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--hero2-edge-text-color);
        z-index: 1;
    }

        .hero2 .hero2__edge-tag strong {
            font-weight: 700;
            color: var(--hero2-edge-strong-color);
        }
}

@media (min-width: 1440px) {
    .hero2 .hero2__edge-tag {
        left: 1110px;
    }

        .hero2 .hero2__edge-tag strong {
            font-weight: 700;
            color: var(--hero2-edge-strong-color);
        }
}

#main {
    background-color: var(--main-bg);
    transition: none;
}

    #main > .main-content {
        background-color: transparent;
    }

.introSection {
    grid-column: 1 / -1; /* spans all columns */
    max-width: 800px;
    opacity: 0;
    transform: translateY(20px);
    animation: card-in 0.4s ease-out forwards;
    animation-delay: calc(var(--i) * 0.3s);
}

    .introSection h2 {
        font-weight: 400 !important;
        font-size: 40px !important;
        line-height: 36px !important;
        letter-spacing: -1.6px;
        margin-bottom: 20px !important;
        color: var( --heading-color) !important;
    }

    .introSection .h2--logo {
        padding-left: 64px;
        background: url("data:image/svg+xml,%3Csvg width='40' height='32' viewBox='0 0 40 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7.82398L6.35651 16.0862L17 24.176V32L15.6517 31.1164C11.4247 27.1014 6.13451 23.6585 1.9327 19.6964C-0.485861 17.4169 -0.733132 14.8312 1.75221 12.4779C5.64538 8.79384 11.1828 4.41452 15.4713 1.05963C15.955 0.681188 16.482 0.332673 17 0V7.82398Z' fill='%23D64136'/%3E%3Cpath d='M23 0L39.0122 13.2708C40.4652 15.4071 40.3365 17.6088 38.4849 19.4531C34.1422 23.7788 28.1363 27.5522 23.6015 31.7929L23 32V24.3097L33.6838 16.1752L23 7.86726V0Z' fill='%23D64136'/%3E%3C/svg%3E%0A") no-repeat;
    }

    .introSection p {
        color: var(--body-text-color) !important;
    }

@media (min-width: 700px) {
    .introSection p {
        font-size: 24px !important;
        line-height: 36px !important;
        margin-bottom: 0 !important;
    }
}

.icon-card-grid {
    display: grid;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
}

@media (min-width: 700px) {
    .icon-card-grid {
        grid-template-columns: 1fr 1fr;
    }

        .icon-card-grid[data-child-count="1"] {
            grid-template-columns: 1fr;
        }

            .icon-card-grid[data-child-count="1"] .card {
                max-width: 440px;
            }
}

@media (min-width: 1140px) {
    /* 1 item */
    .icon-card-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

        .icon-card-grid[data-child-count="1"] {
            grid-template-columns: 1fr;
        }

        .icon-card-grid[data-child-count="2"],
        .icon-card-grid[data-child-count="4"] {
            grid-template-columns: 1fr 1fr;
        }
}

.icon-card-grid .icon-card {
    background-color: var(--icon-card-bg);
    padding: 152px 40px 40px;
    border-radius: var(--card-radius);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: inset 0 0 1px 1.5px var(--icon-card-border-color), var(--icon-card-shadow);
    opacity: 0;
    transform: translateY(20px);
    animation: card-in 0.4s ease-out forwards;
    animation-delay: calc(var(--i) * 0.3s);
}

.icon-card-grid .icon-card__corner {
    left: -0.5px;
    top: -0.5px;
    position: absolute;
    background-color: var(--main-bg);
    background-image: var(--icon-card-url);
    background-position: top left;
    width: 380px;
    height: 408px;
    clip-path: polygon(0 0, 40% 0, 40% 38%, 0 38%);
}

.icon-card-grid .icon-card:before {
    content: "";
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    left: 40px;
    top: 40px;
    background-size: cover;
}

.icon-card-grid .icon-card:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    right: 44px;
    top: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='187.625 24.089 21.219 21.219' width='21.219px' height='21.219px'%3E%3Crect x='187.625' y='24.089' width='21.219' height='21.219' rx='20' fill='%23D64136' style='stroke-width: 1;' transform='matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)'%3E%3C/rect%3E%3Cpath d='M 195.749 30.36 C 195.468 30.363 195.226 30.604 195.222 30.882 C 195.219 31.159 195.456 31.354 195.736 31.351 L 200.937 31.287 L 193.932 38.269 C 193.73 38.47 193.725 38.788 193.923 38.983 C 194.121 39.179 194.441 39.175 194.643 38.974 L 201.648 32.032 L 201.585 37.185 C 201.581 37.463 201.818 37.698 202.098 37.694 C 202.378 37.691 202.582 37.411 202.585 37.133 L 202.663 30.751 C 202.664 30.672 202.665 30.632 202.626 30.553 C 202.587 30.434 202.469 30.317 202.349 30.279 C 202.27 30.24 202.23 30.241 202.15 30.242 L 195.749 30.32 L 195.749 30.36 Z' fill='white' style='stroke-width: 1;' transform='matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    background-size: cover;
}

.icon-card-grid .icon-card__content {
    position: relative;
    z-index: 3;
}

    .icon-card-grid .icon-card__content h3 {
        --title-margin-bottom: 10px;
        color: var( --heading-color) !important;
    }

    .icon-card-grid .icon-card__content p {
        --body-text-margin-bottom: 40px;
        line-height: 24px !important;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
        overflow-wrap: normal;
        color: var( --body-text-color) !important;
    }

@media (min-width: 700px) {
    .icon-card-grid .icon-card__content p {
        height: 96px;
    }
}

.icon-card-grid .icon-card__button {
    display: inline-block;
    padding: 11px 16px;
    border-radius: 25px;
    line-height: 1;
    background-color: #000;
    color: #fff;
    transition: 0.3s background-color;
}

.icon-card-grid .icon-card:hover .icon-card__button {
    background-color: #e03c21;
}

.icon-card-grid .icon-card--lightning:before {
    background-image: var(--icon-card-lightning-url);
}

.icon-card-grid .icon-card--aichip:before {
    background-image: var(--icon-card-aichip-url);
}

.icon-card-grid .icon-card--sliders:before {
    background-image: var(--icon-card-sliders-url);
}

.icon-card-grid .icon-card--lightbulb:before {
    background-image: var(--icon-card-lightbulb-url);
}

@keyframes card-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nl {
    max-width: 1300px;
    margin: auto;
    border-radius: var(--nl-card-radius);
    background: var(--nl-card-bg);
    color: #fff;
}
/* Desktop: 2 columns */
.nl__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 800px) {
    .nl__inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

.nl__form {
    padding: 24px 24px 40px 24px;
}

@media (min-width: 800px) {
    .nl__form {
        padding: 40px 0 40px 40px;
    }
}

.nl__logo {
    width: 40px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg width='40' height='32' viewBox='0 0 40 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7.82398L6.35651 16.0862L17 24.176V32L15.6517 31.1164C11.4247 27.1014 6.13451 23.6585 1.9327 19.6964C-0.485861 17.4169 -0.733132 14.8312 1.75221 12.4779C5.64538 8.79384 11.1828 4.41452 15.4713 1.05963C15.955 0.681188 16.482 0.332673 17 0V7.82398Z' fill='%23000000'/%3E%3Cpath d='M23 0L39.0122 13.2708C40.4652 15.4071 40.3365 17.6088 38.4849 19.4531C34.1422 23.7788 28.1363 27.5522 23.6015 31.7929L23 32V24.3097L33.6838 16.1752L23 7.86726V0Z' fill='%23000000'/%3E%3C/svg%3E%0A") no-repeat;
    margin-bottom: 40px;
}

.nl input[type="submit"], .nl input[type="email"] {
    height: 56px;
    border-radius: var(--button-radius);
    line-height: 28px;
    padding: 14px 24px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    border-width: 0;
}

    .nl input[type="email"]::placeholder {
        color: #fff;
        opacity: 0.9;
    }

.nl input[type="email"] {
    background: #d66b61;
    width: 100%;
}

@media (min-width: 660px) {
    .nl input[type="email"] {
        width: 320px;
    }
}

.nl input[type="submit"] {
    background: #000;
    width: 160px;
    cursor: pointer;
}

.nl .o-checkbox {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .nl .o-checkbox .o-label {
        line-height: 1.1;
    }

.nl .o-checkbox-wrap {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nl .o-checkbox-wrap:has(input[type=checkbox]:checked) {
        background-color: #000;
    }

.nl input[type="checkbox"] {
    width: 100%;
    height: 100%;
    border-width: 0;
    background: #fff;
}

.nl input[type=checkbox]:checked {
    accent-color: #000;
}

.nl input[type="email"] + label, .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nl__image {
    display: none;
}

@media (min-width: 800px) {
    .nl__image {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: flex-end;
        justify-content: flex-end;
        border-bottom-right-radius: 40px;
        overflow: hidden;
    }
}

@media (min-width: 1000px) {
    .nl__image {
        align-items: center;
    }
}

.nl .o-form-group__indicator {
    display: none;
}

@media (min-width: 660px) {
    .nl .c-forms__page > .o-row > .o-col-md-12 {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 0 24px;
    }
}

.nl h4.umbraco-forms-caption {
    grid-column: 1 / -1; /* spans all columns */
    font-weight: 300 !important;
    font-size: clamp(30px, 4.6vw, 56px) !important;
    line-height: clamp(36px, 4.6vw, 64px) !important;
    margin-bottom: 40px !important;
    text-transform: uppercase;
    font-family: var(--font-title) !important;
}

@media (min-width: 660px) {
    .nl .umbraco-forms-fieldset .umbraco-forms-container {
        height: 96px;
        position: relative;
    }
}

.nl .field-validation-error {
    margin-left: 23px;
    display: block;
    font-size: 12px;
    color: yellow;
}

.nl .o-form-group {
    margin-bottom: 20px;
}

@media (min-width: 660px) {
    .nl .o-form-group {
        margin-bottom: 0;
    }
}

.nl .o-form-group.checkbox .field-validation-error {
    margin-left: 40px;
    margin-top: -4px;
}

@media (min-width: 660px) {
    .nl .o-form-group.checkbox {
        position: absolute;
        bottom: -32px;
        width: 460px;
        height: 54px
    }
}

.hr-shout {
    border: 0;
    height: 19px;
    width: 100%;
    padding: 0;
    margin-block: clamp(16px, 4vw, 32px);
    background-image: var(--hr-url);
    background-repeat: no-repeat;
    background-position: center;
}

.hr-shout--small {
    margin-block: clamp(4px, 1vw, 8px);
}

.hr-shout--medium {
    margin-block: clamp(8px, 2vw, 16px);
}

.hr-shout--large {
    margin-block: clamp(16px, 4vw, 32px);
}

.hr-shout--xlarge {
    margin-block: clamp(32px, 6vw, 64px);
}

.cs-spot, .cs-spot__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
}

.cs-spot__items {
    grid-row-gap: 40px;
    padding-bottom: var(--cs-spot-padding-bottom);
}

@media (min-width: 1100px) {
    .cs-spot__items {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 60px;
    }
}

@media (min-width: 1200px) {
    .cs-spot__items {
        grid-template-columns: 512px 1fr;
        grid-column-gap: 88px;
    }
}

.cs-spot__item {
    border-radius: 24px;
    padding: 0;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

    .cs-spot__item.cs-spot__item--feature {
        grid-row: 1 / span 3; /* take the whole left column height */
        height: 100%;
        flex-direction: column;
        gap: 26px;
    }

.cs-spot__image {
    flex: 1 0 33%;
    aspect-ratio: 540 / 385;
    background-repeat: no-repeat;
    background-color: var(--cs-spot-bg);
    background-size: cover;
    background-position: center center;
    border-radius: 24px;
    display: block;
    border: var(--cs-spot-border);
    box-shadow: var(--cs-spot-shadow);
}

@media (min-width: 500px) {
    .cs-spot__image {
        flex: 1 0 216px;
        max-width: 216px;
    }
}

.cs-spot__item--feature .cs-spot__image {
    width: 100%;
    max-width: 768px;
}

.cs-spot__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    max-width: 768px;
    height: 100%;
}

    .cs-spot__content h3 {
        --font-size-title-m: 20px;
        --font-spacing-title-m: 32px;
        --title-margin-bottom: 0;
        --title-margin-top: 0;
        text-transform: uppercase;
        color: var( --heading-color) !important;
    }

.cs-spot__item--feature .cs-spot__content h3 {
    --font-size-title-m: 32px;
    --font-spacing-title-m: 44px;
}

.cs-spot__content p {
    --body-text-margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: normal;
    color: var( --body-text-color) !important;
}

.cs-spot__cta {
    display: flex;
    align-items: center;
    gap: 16px !important;
    margin-top: auto;
    margin-bottom: 2px;
}

.cs-spot__button {
    flex: 0 0 auto;
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--button-radius);
    color: #fff !important;
    font-size: 18px;
    text-decoration: none;
    position: relative;
}

.cs-spot__button {
    background: #292929;
}

.cs-spot__round {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' transform='matrix(1 0 0 -1 0 40)' fill='%23D64136'/%3E%3Cpath d='M15.3141 28.179C14.7863 28.1726 14.3283 27.7186 14.3219 27.1955C14.3155 26.6724 14.7634 26.3043 15.2913 26.3107L25.0947 26.4308L11.8894 13.2679C11.5078 12.8896 11.5005 12.2918 11.8729 11.9227C12.2454 11.5537 12.8487 11.5611 13.2303 11.9393L26.4347 25.0275L26.3158 15.3125C26.3094 14.7894 26.7564 14.3465 27.2842 14.353C27.8121 14.3594 28.1956 14.8872 28.202 15.4103L28.3493 27.442C28.3511 27.5914 28.352 27.6662 28.2784 27.8147C28.2058 28.038 27.9823 28.2594 27.757 28.3313C27.6071 28.4042 27.5316 28.4033 27.3808 28.4015L15.3151 28.2537L15.3141 28.179Z' fill='white'/%3E%3C/svg%3E%0A");
}

.cs-spot__item--feature .cs-spot__button {
    background: #D64136;
}

.cs-spot__item--feature .cs-spot__round {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' transform='matrix(1 0 0 -1 0 40)' fill='%23292929'/%3E%3Cpath d='M15.3141 28.179C14.7863 28.1726 14.3283 27.7186 14.3219 27.1955C14.3155 26.6724 14.7634 26.3043 15.2913 26.3107L25.0947 26.4308L11.8894 13.2679C11.5078 12.8896 11.5005 12.2918 11.8729 11.9227C12.2454 11.5537 12.8487 11.5611 13.2303 11.9393L26.4347 25.0275L26.3158 15.3125C26.3094 14.7894 26.7564 14.3465 27.2842 14.353C27.8121 14.3594 28.1956 14.8872 28.202 15.4103L28.3493 27.442C28.3511 27.5914 28.352 27.6662 28.2784 27.8147C28.2058 28.038 27.9823 28.2594 27.757 28.3313C27.6071 28.4042 27.5316 28.4033 27.3808 28.4015L15.3151 28.2537L15.3141 28.179Z' fill='white'/%3E%3C/svg%3E%0A");
}

.cs-spot__cta:hover .cs-spot__button {
    opacity: 0.9;
}

.cs-spot__cta:hover .cs-spot__round {
    opacity: 0.8;
}
[data-content-element-type-alias="richTextEditorComponent"] li {
    margin-bottom: 10px;
}

[data-content-element-type-alias="richTextEditorComponent"] :is(h1, h2, h3, h4, h5, h6, ol, ul, table) {
    margin-bottom: 18px;
}

[data-content-element-type-alias="richTextEditorComponent"] p + h2 {
    padding-top: 24px;
}
.body--home ui-embed-video {
    margin-top: -20px;
    margin-bottom: -20px;
}

@media (min-width: 965px) {
    .body--home  ui-embed-video {
        margin-top: -30px;
        margin-bottom: -30px;
    }
}