/**
 * Homepage (nieuw design)
 *
 * Losstaande stylesheet uit de plugin Accent Homepage, alleen op de voorpagina.
 * Er wordt bewust niets van de bestaande SCSS/CSS overschreven; alle regels
 * hangen onder de eigen `okm-` classes.
 *
 * Breakpoints volgen de rest van de site (Bootstrap 4):
 * sm 576px | md 768px | lg 992px | xl 1200px | xxl 1380px
 */

.okm-home {
    --okm-magenta: #A51491;
    --okm-navy: #1C2B3C;
    --okm-navy-soft: #3F5164;
    --okm-grey: #F3F4F5;
    --okm-white: #FFFFFF;
    --okm-text: #545F6C;
    --okm-green: #27AE60;

    --okm-radius-sm: 10px;
    --okm-radius: 20px;
    --okm-radius-lg: 24px;

    --okm-shadow-card: 0 15px 30px 0 rgba(39, 56, 75, 0.08);

    --okm-section-space: 5rem;
}

@media (max-width: 767.98px) {
    .okm-home {
        --okm-section-space: 2.5rem;
    }
}

/* -------------------------------------------------------------------------
   Micro-animaties

   Eén systeem voor de hele pagina: elementen met [data-okm-reveal] komen op
   met een korte fade en beweging omhoog, zodra ze in beeld schuiven.
   `--okm-reveal-i` bepaalt de volgorde binnen een groep.

   De startstaat hangt onder .okm-anim, een class die JavaScript in de <head>
   op <html> zet. Zonder JavaScript staat alles dus gewoon zichtbaar.
   ---------------------------------------------------------------------- */

.okm-anim .okm-home [data-okm-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--okm-reveal-i, 0) * 80ms);
}

.okm-anim .okm-home [data-okm-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------
   Gedeelde onderdelen
   ---------------------------------------------------------------------- */

.okm-home .okm-section-title {
    color: var(--okm-navy);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 2rem;
}

@media (min-width: 768px) {
    .okm-home .okm-section-title {
        font-size: 2.25rem;
        margin-bottom: 2.5rem;
    }
}

.okm-home .okm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.25;
    text-decoration: none;
    /* De rand staat er altijd, alleen in dezelfde kleur als de vulling. Zo
       verspringt de knop niet zodra hij bij hover een zichtbare rand krijgt.
       De padding is 2px kleiner, zodat de knop niet groter wordt dan zonder rand. */
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.8125rem 1.625rem;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
                color 0.2s ease-in-out, transform 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
}

.okm-home .okm-btn:hover,
.okm-home .okm-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px 0 rgba(28, 43, 60, 0.22);
}

.okm-home .okm-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.okm-home .okm-btn--primary {
    background-color: var(--okm-magenta);
    border-color: var(--okm-magenta);
    color: var(--okm-white);
}

.okm-home .okm-btn--primary:hover,
.okm-home .okm-btn--primary:focus {
    background-color: var(--okm-navy);
    border-color: var(--okm-navy);
    color: var(--okm-white);
}

/* In het offerteblok is de achtergrond zelf donkerblauw; daar zou de knop bij
   hover wegvallen. Alleen daar dus een witte rand. */
.okm-home .okm-project .okm-btn--primary:hover,
.okm-home .okm-project .okm-btn--primary:focus {
    border-color: var(--okm-white);
}

.okm-home .okm-btn--dark {
    background-color: var(--okm-navy);
    border-color: var(--okm-navy);
    color: var(--okm-white);
}

.okm-home .okm-btn--dark:hover,
.okm-home .okm-btn--dark:focus {
    background-color: var(--okm-magenta);
    border-color: var(--okm-magenta);
    color: var(--okm-white);
}

/* Ronde pijlknop, gebruikt door de categorie-slider en de inspiratie slider */
.okm-home .okm-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--okm-white);
    color: var(--okm-navy);
    box-shadow: 0 10px 24px 0 rgba(28, 43, 60, 0.28);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Op een witte kaartenrij heeft de pijl juist een donkere vulling nodig. */
.okm-home .okm-arrow--solid {
    background-color: var(--okm-navy);
    color: var(--okm-white);
}

@media (min-width: 768px) {
    .okm-home .okm-arrow {
        display: flex;
    }
}

.okm-home .okm-arrow[hidden] {
    display: none;
}

.okm-home .okm-arrow:hover,
.okm-home .okm-arrow:focus-visible {
    background-color: var(--okm-magenta);
    color: var(--okm-white);
}

.okm-home .okm-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.okm-home .okm-arrow:disabled:hover {
    background-color: var(--okm-white);
    color: var(--okm-navy);
}

.okm-home .okm-arrow--solid:disabled:hover {
    background-color: var(--okm-navy);
    color: var(--okm-white);
}

.okm-home .okm-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.okm-home .okm-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--okm-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.okm-home .okm-check-list li:last-child {
    margin-bottom: 0;
}

.okm-home .okm-check-list--light li {
    color: var(--okm-white);
}

.okm-home .okm-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------------- */

.okm-home .okm-hero {
    background-color: var(--okm-grey);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 992px) {
    .okm-home .okm-hero {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
    }
}

.okm-home .okm-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .okm-home .okm-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 3rem;
    }
}

.okm-home .okm-hero__title {
    color: var(--okm-navy);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
    .okm-home .okm-hero__title {
        font-size: 2.75rem;
    }
}

@media (min-width: 1200px) {
    .okm-home .okm-hero__title {
        font-size: 3.5rem;
    }
}

.okm-home .okm-hero__title-accent {
    color: var(--okm-magenta);
}

.okm-home .okm-hero__text {
    color: var(--okm-text);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    max-width: 32rem;
}

.okm-home .okm-hero__note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    color: var(--okm-text);
    font-size: 0.9375rem;
}

.okm-home .okm-hero__visual {
    position: relative;
}

.okm-home .okm-hero__image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 20rem;
    margin: 0 auto;
    object-fit: contain;
}

@media (min-width: 992px) {
    .okm-home .okm-hero__image img {
        max-height: 28rem;
    }
}

.okm-home .okm-hero__card {
    background-color: var(--okm-white);
    border-radius: var(--okm-radius);
    box-shadow: var(--okm-shadow-card);
    padding: 1.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    .okm-home .okm-hero__card {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20rem;
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .okm-home .okm-hero__card {
        width: 22rem;
        padding: 2rem;
    }
}

.okm-home .okm-hero__card-title {
    color: var(--okm-magenta);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

/* -------------------------------------------------------------------------
   2. Categorieblok
   ---------------------------------------------------------------------- */

.okm-home .okm-categories {
    background-color: var(--okm-white);
    padding-top: var(--okm-section-space);
}

/* De blauwe balk loopt door tot onder de kaarten. De lijst heeft zelf al 2,5rem
   onderruimte voor de schaduw, dus hier volstaat een smallere strook. */
.okm-home .okm-categories__band {
    position: relative;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .okm-home .okm-categories__band {
        padding-bottom: 2.5rem;
    }
}

.okm-home .okm-categories__band::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    bottom: 0;
    background-color: var(--okm-navy);
}

.okm-home .okm-categories__scroller {
    position: relative;
    z-index: 1;

    /* Afstand van de containerrand tot de rand van het scherm. 50% is de helft
       van de containerbreedte, dus dit is precies de marge die de container aan
       die kant heeft. */
    --okm-inset: calc(50vw - 50%);
    --okm-bleed: calc(50% - 50vw);

    /* Mobiel: één kaart in beeld plus een stuk van de volgende, zodat meteen
       duidelijk is dat de rij doorloopt. Een percentage schaalt mee met de
       schermbreedte, want de container is hier nog vloeiend. */
    --okm-card-w: 72%;
}

@media (min-width: 576px) {
    .okm-home .okm-categories__scroller {
        --okm-card-w: 196px;
    }
}

/* Vanaf tablet dezelfde kaartbreedte als op desktop. */
@media (min-width: 768px) {
    .okm-home .okm-categories__scroller {
        --okm-card-w: 229px;
    }
}

/**
 * De rij is altijd zo breed als het scherm, met de containermarge als padding.
 *
 * Dat is bewust: de marge en padding veranderen dus niet op het moment van
 * uitklappen. Deden ze dat wel, dan corrigeert de browser de scrollpositie mee
 * met de layoutverschuiving en staat de rij direct helemaal naar links.
 *
 * Het resultaat blijft hetzelfde: de inhoudsbreedte is precies het stramien, dus
 * de eerste kaart staat bij scrollpositie 0 op de linker stramienrand en de
 * laatste kaart eindigt aan het eind van het scrollen op de rechter
 * stramienrand, waar de volgende-pijl staat.
 *
 * De bijbehorende `scroll-padding-left` staat niet hier maar wordt in
 * homepage.js in pixels gezet. Percentages in scroll-padding rekenen namelijk
 * tegen de breedte van de scrollport zelf (hier het volle scherm) en niet tegen
 * de container, waardoor `calc(50vw - 50%)` op 0 uitkomt. De snap points lagen
 * daardoor op de schermrand in plaats van op het stramien, en dat trok de rij
 * bij het opengaan meteen naar links.
 */
.okm-home .okm-categories__list {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    margin-left: var(--okm-bleed);
    margin-right: var(--okm-bleed);
    /* Ruimte onderin voor de schaduw van de kaarten: overflow-x maakt ook de
       y-as scrollbaar, dus de schaduw mag niet buiten de box vallen. */
    padding: 1rem var(--okm-inset) 2.5rem;
    overflow-x: auto;
    /* Proximity in plaats van mandatory: bij mandatory kan de laatste kaart niet
       tot de rechter stramienrand doorscrollen, omdat de browser dan altijd op
       een snap point moet uitkomen. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    /* Scroll anchoring uit, zodat de browser de scrollpositie niet bijstelt als
       de extra kaarten erbij komen. */
    overflow-anchor: none;

    /* Bewust geen `scroll-behavior: smooth` hier. Dat maakt ook het terugzetten
       naar positie 0 een animatie, en `behavior: auto` in JS valt dan terug op
       deze waarde. Het soepel scrollen regelen de pijlen zelf. */

    /* De scrollbar zelf is niet nodig; navigeren gaat via de pijlen en vegen. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.okm-home .okm-categories__list::-webkit-scrollbar {
    display: none;
}

/**
 * Ingeklapt op desktop: 4 kaarten plus de roze kaart, precies één rij.
 *
 * Ingeklapt verdelen de kaarten de ruimte in de verhouding 1:1:1:1:0,5.
 * Uitgeklapt krijgen ze een vaste breedte die daar exact gelijk aan is, zodat de
 * eerste vier kaarten op hun plek blijven en alleen de nieuwe kaarten rechts in
 * beeld schuiven. Bootstrap-containers hebben per breakpoint een vaste breedte,
 * dus deze waarden kloppen:
 * xl  = (1140 - 30 - 4 * 20) / 4.5 = 229px
 * xxl = (1320 - 30 - 4 * 20) / 4.5 = 269px
 */
@media (min-width: 1200px) {
    /* Padding en marge blijven staan; alleen de breedtes wisselen. Ingeklapt is
       dit geen scrollcontainer, dus bij uitklappen begint hij gegarandeerd op
       scrollpositie 0. */
    .okm-home .okm-categories__scroller:not(.is-expanded) .okm-categories__list {
        overflow-x: visible;
    }

    .okm-home .okm-categories__scroller:not(.is-expanded) .okm-categories__item {
        flex: 1 1 0;
    }

    .okm-home .okm-categories__scroller:not(.is-expanded) .okm-categories__item--all {
        flex: 0.5 0.5 0;
    }
}

@media (min-width: 1380px) {
    .okm-home .okm-categories__scroller {
        --okm-card-w: 269px;
    }
}

/* De extra categorieën staan al in de HTML, maar zijn pas zichtbaar na klikken. */
.okm-home .okm-categories__item--extra {
    display: none;
}

.okm-home .okm-categories__scroller.is-expanded .okm-categories__item--extra {
    display: block;
    animation: okm-category-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--okm-i, 0) * 70ms);
}

/* De roze kaart schuift na uitklappen naar het einde van de rij. */
.okm-home .okm-categories__scroller.is-expanded .okm-categories__item--all {
    order: 1;
}

/**
 * Onder xl bestaat het raster van 4 kaarten plus de roze kaart niet; de rij
 * scrollt daar toch al. Dus staan alle categorieën er meteen in en vervalt de
 * "Bekijk alles" kaart. Uitklappen is daar niet meer nodig.
 */
@media (max-width: 1199.98px) {
    .okm-home .okm-categories__item--extra {
        display: block;
        animation: none;
    }

    .okm-home .okm-categories__item--all {
        display: none;
    }
}

@keyframes okm-category-in {
    from {
        opacity: 0;
        transform: translateX(3rem) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.okm-home .okm-categories__arrow {
    position: absolute;
    /* De lijst heeft onderin ruimte voor de schaduw; die telt niet mee. */
    top: calc(50% - 0.75rem);
    transform: translateY(-50%);
    z-index: 3;
    animation: okm-arrow-in 0.4s ease 0.15s both;
}

/* Beide pijlen staan op de stramienrand, binnen de container. */
.okm-home .okm-categories__arrow--prev {
    left: 0;
}

.okm-home .okm-categories__arrow--next {
    right: 0;
}

@keyframes okm-arrow-in {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.7);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.okm-home .okm-categories__item {
    flex: 0 0 var(--okm-card-w, 11.5rem);
    min-width: 0;
    scroll-snap-align: start;
    padding: 0;
}

/* De roze kaart is smaller dan de rest, en even breed in beide standen. */
.okm-home .okm-categories__item--all {
    flex: 0 0 calc(var(--okm-card-w, 11.5rem) * 0.5);
}

.okm-home .okm-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    min-height: 15rem;
    padding: 1.25rem 1rem;
    background-color: var(--okm-white);
    border-radius: var(--okm-radius);
    box-shadow: var(--okm-shadow-card);
    text-decoration: none;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

@media (min-width: 768px) {
    .okm-home .okm-category-card {
        min-height: 20rem;
        padding: 2rem 1.25rem 1.5rem;
    }
}

.okm-home .okm-category-card:hover,
.okm-home .okm-category-card:focus-visible {
    box-shadow: 0 15px 30px 0 rgba(39, 56, 75, 0.2);
    transform: translateY(-2px);
}

.okm-home .okm-category-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 1rem;
}

.okm-home .okm-category-card__media img {
    width: 100%;
    height: 100%;
    max-height: 11rem;
    object-fit: contain;
}

.okm-home .okm-category-card__title {
    color: var(--okm-navy);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
}

/* Zelfde opbouw als de andere kaarten, alleen zonder afbeelding. Daardoor staat
   het label op precies dezelfde hoogte als de categorienamen. */
.okm-home .okm-category-card--all {
    background-color: var(--okm-magenta);
}

.okm-home .okm-category-card--all .okm-category-card__title {
    color: var(--okm-white);
}

.okm-home .okm-category-card--all:hover,
.okm-home .okm-category-card--all:focus-visible {
    background-color: var(--okm-navy);
}

/* -------------------------------------------------------------------------
   3. Populaire producten
   ---------------------------------------------------------------------- */

.okm-home .okm-products {
    background-color: var(--okm-grey);
    padding-top: var(--okm-section-space);
    padding-bottom: var(--okm-section-space);
}

.okm-home .okm-products__list {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

@media (min-width: 576px) {
    .okm-home .okm-products__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .okm-home .okm-products__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.okm-home .okm-products__item {
    padding: 0;
}

.okm-home .okm-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    background-color: var(--okm-white);
    border-radius: var(--okm-radius);
    box-shadow: var(--okm-shadow-card);
    transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.okm-home .okm-product-card:hover,
.okm-home .okm-product-card:focus-within {
    box-shadow: 0 15px 30px 0 rgba(39, 56, 75, 0.2);
    transform: translateY(-3px);
}

/* De foto komt bij hover iets naar voren. */
.okm-home .okm-product-card__media img {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.okm-home .okm-product-card:hover .okm-product-card__media img,
.okm-home .okm-product-card:focus-within .okm-product-card__media img {
    transform: scale(1.04);
}

.okm-home .okm-product-card__label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--okm-navy);
    color: var(--okm-white);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.5rem 1rem;
    border-radius: var(--okm-radius) 0 var(--okm-radius) 0;
}

.okm-home .okm-product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    min-height: 11rem;
}

.okm-home .okm-product-card__media img {
    width: 100%;
    max-height: 12rem;
    object-fit: contain;
}

.okm-home .okm-product-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--okm-navy);
    margin: 0 0 0.75rem;
}

.okm-home .okm-product-card__title a {
    color: inherit;
    text-decoration: none;
}

.okm-home .okm-product-card__title a:hover,
.okm-home .okm-product-card__title a:focus {
    color: var(--okm-magenta);
}

.okm-home .okm-product-card__price {
    color: var(--okm-text);
    font-size: 0.9375rem;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

.okm-home .okm-product-card__price .price,
.okm-home .okm-product-card__price p {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.okm-home .okm-product-card__price .woocommerce-Price-amount,
.okm-home .okm-product-card__price ins {
    font-weight: 700;
    color: var(--okm-navy);
}

.okm-home .okm-product-card__price del {
    font-weight: 400;
    color: var(--okm-text);
    opacity: 0.6;
}

.okm-home .okm-product-card__button {
    margin-top: auto;
    width: 100%;
}

/* -------------------------------------------------------------------------
   4. Offerte & contact
   ---------------------------------------------------------------------- */

/* De onderruimte is zo gekozen dat de blauwe achtergrond doorloopt tot achter de
   USP kaarten: de kaarten worden er met een negatieve marge overheen getrokken.
   Wijzig je die marge, pas dan ook deze padding aan. */
.okm-home .okm-project {
    position: relative;
    background-color: var(--okm-navy);
    padding-top: 3rem;
    padding-bottom: 10rem;
}

@media (min-width: 992px) {
    .okm-home .okm-project {
        padding-top: 4.5rem;
        padding-bottom: 9rem;
        background-image: linear-gradient(
            to right,
            var(--okm-navy) 0,
            var(--okm-navy) 55%,
            var(--okm-navy-soft) 55%,
            var(--okm-navy-soft) 100%
        );
    }
}

.okm-home .okm-project__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .okm-home .okm-project__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr) minmax(0, 0.9fr);
        gap: 2rem;
    }
}

.okm-home .okm-project__title,
.okm-home .okm-project__contact-title {
    color: var(--okm-white);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
    .okm-home .okm-project__title,
    .okm-home .okm-project__contact-title {
        font-size: 1.75rem;
    }
}

.okm-home .okm-project__text,
.okm-home .okm-project__contact-text {
    color: var(--okm-white);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}

.okm-home .okm-project__content .okm-check-list {
    margin-top: 2rem;
}

.okm-home .okm-project__image {
    position: relative;
    z-index: 1;
}

.okm-home .okm-project__image img {
    width: auto;
    max-width: 100%;
    max-height: 20rem;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .okm-home .okm-project__image {
        align-self: end;
        margin-bottom: -9rem;
    }

    /* Niet oprekken: de uitgesneden foto is 249px breed, groter maken maakt hem
       alleen wazig. Wil je hem groter in beeld, dan is een hi-res versie nodig. */
    .okm-home .okm-project__image img {
        width: auto;
        max-width: 100%;
        max-height: none;
    }
}

.okm-home .okm-project__contact-details {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.okm-home .okm-project__contact-details a {
    color: var(--okm-white);
    font-weight: 700;
    text-decoration: none;
    word-break: break-word;
}

.okm-home .okm-project__contact-details a:hover,
.okm-home .okm-project__contact-details a:focus {
    color: var(--okm-white);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   5. USP kaarten
   ---------------------------------------------------------------------- */

/* De kaarten schuiven over het offerteblok heen. Op mobiel loopt het blauw
   daardoor door tot ongeveer halverwege de eerste kaart. */
.okm-home .okm-usps {
    position: relative;
    z-index: 2;
    background-color: transparent;
    margin-top: -7rem;
    padding-bottom: var(--okm-section-space);
}

@media (min-width: 992px) {
    .okm-home .okm-usps {
        margin-top: -6rem;
    }
}

.okm-home .okm-usps__list {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .okm-home .okm-usps__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .okm-home .okm-usps__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.okm-home .okm-usps__item {
    padding: 0;
}

.okm-home .okm-usp-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 1.75rem;
    background-color: var(--okm-white);
    border-radius: var(--okm-radius);
    box-shadow: var(--okm-shadow-card);
    transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}

@media (min-width: 992px) {
    .okm-home .okm-usp-card {
        padding: 2rem;
    }
}

.okm-home .okm-usp-card:hover,
.okm-home .okm-usp-card:focus-within {
    box-shadow: 0 15px 30px 0 rgba(39, 56, 75, 0.2);
    transform: translateY(-3px);
}

.okm-home .okm-usp-card__icon {
    margin-bottom: 1.25rem;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.okm-home .okm-usp-card:hover .okm-usp-card__icon,
.okm-home .okm-usp-card:focus-within .okm-usp-card__icon {
    transform: translateY(-3px) scale(1.06);
}

.okm-home .okm-usp-card__icon img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.okm-home .okm-usp-card__title {
    color: var(--okm-magenta);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.35;
    margin: 0 0 0.75rem;
}

.okm-home .okm-usp-card__text {
    color: var(--okm-text);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.okm-home .okm-usp-card__button {
    margin-top: auto;
}

/* -------------------------------------------------------------------------
   6. Inspiratie slider
   ---------------------------------------------------------------------- */

.okm-home .okm-slider-section {
    position: relative;
    padding-top: 3rem;
    padding-bottom: var(--okm-section-space);
    background-color: white;
}

.okm-home .okm-slider-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9rem;
    background-color: var(--okm-navy);
}

@media (min-width: 992px) {
    .okm-home .okm-slider-section {
        padding-top: 5rem;
    }

    .okm-home .okm-slider-section::before {
        height: 12rem;
    }
}

.okm-home .okm-slider {
    position: relative;
    z-index: 1;
}

.okm-home .okm-slider__viewport {
    position: relative;
    border-radius: var(--okm-radius);
    overflow: hidden;
    background-color: var(--okm-navy);
}

.okm-home .okm-slide {
    display: none;
    position: relative;
    min-height: 20rem;
}

@media (min-width: 768px) {
    .okm-home .okm-slide {
        min-height: 26rem;
    }
}

@media (min-width: 1200px) {
    .okm-home .okm-slide {
        min-height: 30rem;
    }
}

.okm-home .okm-slide.is-active {
    display: block;
}

/* De nieuwe slide komt op: de foto zoomt subtiel uit, de tekst schuift mee. */
.okm-anim .okm-home .okm-slide.is-active .okm-slide__media img {
    animation: okm-slide-media 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.okm-anim .okm-home .okm-slide.is-active .okm-slide__content > * {
    animation: okm-slide-content 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.okm-anim .okm-home .okm-slide.is-active .okm-slide__content > :nth-child(2) {
    animation-delay: 80ms;
}

.okm-anim .okm-home .okm-slide.is-active .okm-slide__content > :nth-child(3) {
    animation-delay: 160ms;
}

@keyframes okm-slide-media {
    from {
        opacity: 0;
        transform: scale(1.06);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes okm-slide-content {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.okm-home .okm-slide__media {
    position: absolute;
    inset: 0;
}

.okm-home .okm-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.okm-home .okm-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(28, 43, 60, 0.92) 0%,
        rgba(28, 43, 60, 0.6) 55%,
        rgba(28, 43, 60, 0.35) 100%
    );
}

.okm-home .okm-slide__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: inherit;
    padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
    .okm-home .okm-slide__content {
        padding: 3rem;
    }
}

@media (min-width: 1200px) {
    .okm-home .okm-slide__content {
        padding: 4rem;
    }
}

/* Tot 1380px staan de pijlen nog binnen de kaart: de tekst houdt links en rechts ruimte vrij. */
@media (min-width: 768px) and (max-width: 1379.98px) {
    .okm-home .okm-slide__content {
        padding-left: 5.5rem;
        padding-right: 5.5rem;
    }
}

.okm-home .okm-slide__title {
    color: var(--okm-white);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 1rem;
    max-width: 40rem;
}

@media (min-width: 768px) {
    .okm-home .okm-slide__title {
        font-size: 2rem;
    }
}

.okm-home .okm-slide__text {
    color: var(--okm-white);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 40rem;
}

.okm-home .okm-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Binnen de kaart zolang er naast de container geen ruimte is, daarbuiten zodra dat wel kan */
.okm-home .okm-slider__arrow--prev {
    left: 1rem;
}

.okm-home .okm-slider__arrow--next {
    right: 1rem;
}

@media (min-width: 1380px) {
    .okm-home .okm-slider__arrow--prev {
        left: -1.5rem;
    }

    .okm-home .okm-slider__arrow--next {
        right: -1.5rem;
    }
}

.okm-home .okm-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.okm-home .okm-slider__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background-color: #C9CED4;
    transition: background-color 0.25s ease-in-out, width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.okm-home .okm-slider__dot:hover {
    background-color: #A7AFB8;
}

/* De actieve stip rekt uit naar een streepje. */
.okm-home .okm-slider__dot.is-active {
    width: 2rem;
    background-color: var(--okm-magenta);
}

/* Minder beweging voor bezoekers die dat instellen */
@media (prefers-reduced-motion: reduce) {
    .okm-home .okm-btn,
    .okm-home .okm-category-card,
    .okm-home .okm-product-card,
    .okm-home .okm-product-card__media img,
    .okm-home .okm-usp-card,
    .okm-home .okm-usp-card__icon,
    .okm-home .okm-arrow,
    .okm-home .okm-slider__dot {
        transition: none;
    }

    .okm-home .okm-btn:hover,
    .okm-home .okm-btn:focus-visible,
    .okm-home .okm-category-card:hover,
    .okm-home .okm-category-card:focus-visible,
    .okm-home .okm-product-card:hover,
    .okm-home .okm-product-card:focus-within,
    .okm-home .okm-usp-card:hover,
    .okm-home .okm-usp-card:focus-within {
        transform: none;
    }

    .okm-home .okm-product-card:hover .okm-product-card__media img,
    .okm-home .okm-product-card:focus-within .okm-product-card__media img,
    .okm-home .okm-usp-card:hover .okm-usp-card__icon,
    .okm-home .okm-usp-card:focus-within .okm-usp-card__icon {
        transform: none;
    }

    .okm-anim .okm-home [data-okm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .okm-home .okm-categories__scroller.is-expanded .okm-categories__item--extra,
    .okm-home .okm-categories__arrow,
    .okm-anim .okm-home .okm-slide.is-active .okm-slide__media img,
    .okm-anim .okm-home .okm-slide.is-active .okm-slide__content > * {
        animation: none;
    }
}