/* ==========================================================
   VALU5 PUBLIC POLISH V1
   Scope: uitsluitend body.v5-public-ui

   Doel:
   - uniforme typografie
   - compactere schaal
   - kleinere maximale websitebreedte
   - rustigere witruimte
   - responsive

   NIET wijzigen:
   - kleuren
   - afbeeldingen
   - inhoud
   - ingelogde applicatie
   ========================================================== */


/* ----------------------------------------------------------
   BASIS
   ---------------------------------------------------------- */

body.v5-public-ui {
    --v5-public-width: 1120px;
    --v5-public-reading-width: 760px;

    --v5-public-body-size: 16px;
    --v5-public-small-size: 14px;

    --v5-public-h1-size: 42px;
    --v5-public-h2-size: 30px;
    --v5-public-h3-size: 20px;

    font-size: var(--v5-public-body-size);
    line-height: 1.65;
}


/* ----------------------------------------------------------
   ÉÉN LETTERTYPE
   Behoud het bestaande VALU5-bodylettertype en laat alle
   publieke elementen dit consequent erven.
   ---------------------------------------------------------- */

body.v5-public-ui main,
body.v5-public-ui header,
body.v5-public-ui nav,
body.v5-public-ui footer,
body.v5-public-ui button,
body.v5-public-ui input,
body.v5-public-ui select,
body.v5-public-ui textarea {
    font-family: inherit !important;
}


/* ----------------------------------------------------------
   WEBSITE MINDER BREED
   Geldt ook voor header en footer zodat alles één visuele
   verticale lijn krijgt.
   ---------------------------------------------------------- */

body.v5-public-ui .container {
    width: min(calc(100% - 48px), var(--v5-public-width)) !important;
    max-width: var(--v5-public-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ----------------------------------------------------------
   TYPOGRAFISCHE HIËRARCHIE
   ---------------------------------------------------------- */

body.v5-public-ui main h1 {
    font-family: inherit !important;
    font-size: var(--v5-public-h1-size) !important;
    line-height: 1.14 !important;
}

body.v5-public-ui main h2 {
    font-family: inherit !important;
    font-size: var(--v5-public-h2-size) !important;
    line-height: 1.22 !important;
}

body.v5-public-ui main h3 {
    font-family: inherit !important;
    font-size: var(--v5-public-h3-size) !important;
    line-height: 1.32 !important;
}

body.v5-public-ui main h4,
body.v5-public-ui main h5,
body.v5-public-ui main h6 {
    font-family: inherit !important;
}


/* ----------------------------------------------------------
   NORMALE TEKST
   ---------------------------------------------------------- */

body.v5-public-ui main p,
body.v5-public-ui main li {
    font-family: inherit !important;
    font-size: var(--v5-public-body-size);
    line-height: 1.65;
}

body.v5-public-ui main small,
body.v5-public-ui footer {
    font-size: var(--v5-public-small-size);
}


/* ----------------------------------------------------------
   NAVIGATIE
   Iets kleiner en rustiger dan de huidige grote uitstraling.
   ---------------------------------------------------------- */

body.v5-public-ui .topbar .public-link {
    font-family: inherit !important;
    font-size: 14px !important;
}


/* ----------------------------------------------------------
   KNOPPEN
   ---------------------------------------------------------- */

body.v5-public-ui main button,
body.v5-public-ui main .btn,
body.v5-public-ui main .button,
body.v5-public-ui main a.btn,
body.v5-public-ui main a.button {
    font-family: inherit !important;
    font-size: 14px !important;
}


/* ----------------------------------------------------------
   LEESBREEDTE
   Bekende tekstcontainers krijgen een prettig maximum.
   Dit verandert geen grids of afbeeldingen.
   ---------------------------------------------------------- */

body.v5-public-ui main .prose,
body.v5-public-ui main .reading-width,
body.v5-public-ui main .text-content,
body.v5-public-ui main .article-content {
    max-width: var(--v5-public-reading-width);
}


/* ----------------------------------------------------------
   VERTICALE RUST
   Conservatief: alleen directe hoofdsecties.
   Bestaande specifieke componentstyling blijft leidend.
   ---------------------------------------------------------- */

body.v5-public-ui main > section {
    padding-top: clamp(52px, 5.5vw, 72px);
    padding-bottom: clamp(52px, 5.5vw, 72px);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
    body.v5-public-ui {
        --v5-public-h1-size: 38px;
        --v5-public-h2-size: 28px;
    }
}


/* ----------------------------------------------------------
   MOBIEL
   ---------------------------------------------------------- */

@media (max-width: 767px) {
    body.v5-public-ui {
        --v5-public-h1-size: 34px;
        --v5-public-h2-size: 26px;
        --v5-public-h3-size: 19px;
    }

    body.v5-public-ui .container {
        width: min(calc(100% - 32px), var(--v5-public-width)) !important;
    }

    body.v5-public-ui main > section {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}

/* ==========================================================
   VALU5 PUBLIC POLISH V2
   Fixes:
   - navigatie rustiger en breder
   - expliciete uniforme font-family
   - minder lege ruimte
   - compactere hero's
   ========================================================== */

body.v5-public-ui {
    --v5-public-header-width: 1260px;
    --v5-public-main-width: 1080px;
    --v5-public-reading-width: 720px;

    --v5-public-body-size: 15.5px;
    --v5-public-small-size: 13.5px;

    --v5-public-h1-size: 38px;
    --v5-public-h2-size: 28px;
    --v5-public-h3-size: 19px;

    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: var(--v5-public-body-size) !important;
    line-height: 1.6 !important;
}

/* expliciet één lettertype voor publieke onderdelen */
body.v5-public-ui :is(
    h1,h2,h3,h4,h5,h6,
    p,a,li,span,small,strong,em,label,
    button,input,select,textarea
) {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
}

/* header breder houden dan de content */
body.v5-public-ui .topbar .container {
    width: min(calc(100% - 40px), var(--v5-public-header-width)) !important;
    max-width: var(--v5-public-header-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* main en footer rustiger/smaller */
body.v5-public-ui main .container,
body.v5-public-ui footer .container {
    width: min(calc(100% - 40px), var(--v5-public-main-width)) !important;
    max-width: var(--v5-public-main-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* navigatie compacter en op één regel */
body.v5-public-ui .topbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

body.v5-public-ui nav {
    align-items: center !important;
}

body.v5-public-ui .brand-logo {
    width: 220px !important;
    height: auto !important;
}

body.v5-public-ui .public-links {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
}

body.v5-public-ui .topbar .public-link {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

body.v5-public-ui .topbar .public-link.is-active {
    padding: 12px 14px !important;
    border-radius: 14px !important;
}

body.v5-public-ui .topbar .public-link + .public-link {
    margin-left: 0 !important;
}

/* inloggen knop iets rustiger */
body.v5-public-ui .topbar .btn,
body.v5-public-ui .topbar .button,
body.v5-public-ui .topbar a[href*="login"],
body.v5-public-ui .topbar a[href*="inloggen"] {
    font-size: 14px !important;
    padding: 10px 18px !important;
    border-radius: 14px !important;
}

/* koppen kleiner en consistenter */
body.v5-public-ui main h1 {
    font-size: var(--v5-public-h1-size) !important;
    line-height: 1.12 !important;
    margin-bottom: 18px !important;
}

body.v5-public-ui main h2 {
    font-size: var(--v5-public-h2-size) !important;
    line-height: 1.18 !important;
    margin-bottom: 14px !important;
}

body.v5-public-ui main h3 {
    font-size: var(--v5-public-h3-size) !important;
    line-height: 1.28 !important;
}

body.v5-public-ui main p,
body.v5-public-ui main li {
    font-size: var(--v5-public-body-size) !important;
    line-height: 1.6 !important;
}

/* leesbreedte voor langere tekst */
body.v5-public-ui main .prose,
body.v5-public-ui main .reading-width,
body.v5-public-ui main .text-content,
body.v5-public-ui main .article-content {
    max-width: var(--v5-public-reading-width) !important;
}

/* algemene sectieruimte omlaag */
body.v5-public-ui main > section {
    padding-top: clamp(40px, 4vw, 56px) !important;
    padding-bottom: clamp(40px, 4vw, 56px) !important;
}

/* eerste hero nog compacter */
body.v5-public-ui main > section:first-child {
    padding-top: clamp(28px, 3vw, 40px) !important;
    padding-bottom: clamp(28px, 3vw, 40px) !important;
    min-height: auto !important;
}

/* knoppen iets compacter */
body.v5-public-ui main .btn,
body.v5-public-ui main .button,
body.v5-public-ui main button,
body.v5-public-ui main a.btn,
body.v5-public-ui main a.button {
    font-size: 14px !important;
    padding: 12px 22px !important;
    border-radius: 14px !important;
}

/* tablet */
@media (max-width: 1200px) {
    body.v5-public-ui {
        --v5-public-header-width: 1180px;
        --v5-public-main-width: 1020px;
    }

    body.v5-public-ui .brand-logo {
        width: 205px !important;
    }

    body.v5-public-ui .public-links {
        gap: 6px !important;
    }

    body.v5-public-ui .topbar .public-link {
        font-size: 13.5px !important;
        padding: 9px 10px !important;
    }
}

/* mobiel / small tablet */
@media (max-width: 900px) {
    body.v5-public-ui {
        --v5-public-h1-size: 34px;
        --v5-public-h2-size: 25px;
        --v5-public-h3-size: 18px;
    }

    body.v5-public-ui .topbar .container,
    body.v5-public-ui main .container,
    body.v5-public-ui footer .container {
        width: min(calc(100% - 28px), 100%) !important;
    }

    body.v5-public-ui .public-links {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body.v5-public-ui .topbar .public-link {
        white-space: normal !important;
    }

    body.v5-public-ui main > section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }
}

/* ==========================================================
   VALU5 PUBLIC POLISH V3
   Desktop only — compactere tekstafstand
   Tablet, mobiel en navigatie blijven ongewijzigd
   ========================================================== */

@media (min-width: 1201px) {

    body.v5-public-ui main p,
    body.v5-public-ui main li {
        line-height: 1.48 !important;
    }

    body.v5-public-ui main p {
        margin-bottom: 12px !important;
    }

    body.v5-public-ui main h1 {
        margin-bottom: 14px !important;
    }

    body.v5-public-ui main h2 {
        margin-bottom: 12px !important;
    }

    body.v5-public-ui main h3 {
        margin-bottom: 10px !important;
    }

    body.v5-public-ui main > section {
        padding-top: clamp(34px, 3.2vw, 46px) !important;
        padding-bottom: clamp(34px, 3.2vw, 46px) !important;
    }

    body.v5-public-ui main > section:first-child {
        padding-top: clamp(24px, 2.5vw, 34px) !important;
        padding-bottom: clamp(24px, 2.5vw, 34px) !important;
    }
}

/* ==========================================================
   VALU5 PUBLIC POLISH V4
   Voor managers — font weights uniformer met overige website
   ========================================================== */

body.v5-public-ui .managers-page .m-eyebrow {
    font-weight: 700 !important;
}

body.v5-public-ui .managers-page .m-hero h1 {
    font-weight: 700 !important;
}

body.v5-public-ui .managers-page .m-hero-sub {
    font-weight: 600 !important;
}

body.v5-public-ui .managers-page .m-hero-copy > p:last-of-type {
    font-weight: 400 !important;
}

body.v5-public-ui .managers-page .m-lead {
    font-weight: 400 !important;
}

body.v5-public-ui .managers-page p,
body.v5-public-ui .managers-page li {
    font-weight: 400;
}

body.v5-public-ui .managers-page h2,
body.v5-public-ui .managers-page h3 {
    font-weight: 700 !important;
}

/* labels mogen duidelijk blijven, maar niet extreem zwaar */
body.v5-public-ui .managers-page [class*="label"],
body.v5-public-ui .managers-page [class*="eyebrow"] {
    font-weight: 700 !important;
}

/* knoppen */
body.v5-public-ui .managers-page a,
body.v5-public-ui .managers-page button {
    font-weight: inherit;
}

body.v5-public-ui .managers-page .btn,
body.v5-public-ui .managers-page .button,
body.v5-public-ui .managers-page a[class*="button"],
body.v5-public-ui .managers-page a[class*="cta"] {
    font-weight: 700 !important;
}


/* ==========================================================
   VALU5 PUBLIC POLISH V6
   Herstel originele mobiele navigatie
   ========================================================== */

@media (max-width: 900px) {

    /* Standaard gesloten */
    body.v5-public-ui .topbar nav.is-guest .public-links {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin-left: 0 !important;
    }

    /* Alleen openen via bestaande menu-toggle / JavaScript */
    body.v5-public-ui .topbar nav.is-guest .public-links.is-open {
        display: flex !important;
    }

    /* Mobiele links weer als nette lijst */
    body.v5-public-ui .topbar .public-link {
        width: 100% !important;
        white-space: normal !important;
        padding: 11px 12px !important;
    }
}


/* ==========================================================
   VALU5 PUBLIC POLISH V7
   Desktop hero-uniformiteit
   - zelfde beeldhoogte
   - zelfde hero-uitlijning
   - mobiel/tablet ongemoeid
   ========================================================== */

@media (min-width: 1201px) {

    :root {
        --v5-public-hero-media-height: 500px;
    }

    /* ======================================================
       VOOR MANAGERS
       ====================================================== */

    body.v5-public-ui .managers-page .m-hero > .m-container {
        min-height: var(--v5-public-hero-media-height) !important;
        display: flex !important;
        align-items: center !important;
    }

    body.v5-public-ui .managers-page .m-hero-grid {
        align-items: center !important;
    }

    body.v5-public-ui .managers-page .m-hero-copy {
        min-height: var(--v5-public-hero-media-height) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    body.v5-public-ui .managers-page .m-hero-visual {
        height: var(--v5-public-hero-media-height) !important;
        min-height: var(--v5-public-hero-media-height) !important;
        max-height: var(--v5-public-hero-media-height) !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: stretch !important;
    }

    body.v5-public-ui .managers-page .m-hero-visual img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* ======================================================
       VOOR ORGANISATIES - V2
       Ondersteunt zowel org-v2hero als org-v2-hero varianten
       ====================================================== */

    body.v5-public-ui .org-v2hero,
    body.v5-public-ui .org-v2-hero {
        min-height: var(--v5-public-hero-media-height) !important;
    }

    body.v5-public-ui .org-v2hero-content,
    body.v5-public-ui .org-v2-hero-content {
        min-height: var(--v5-public-hero-media-height) !important;
        display: flex !important;
        align-items: center !important;
    }

    body.v5-public-ui .org-v2hero-copy,
    body.v5-public-ui .org-v2-hero-copy {
        min-height: var(--v5-public-hero-media-height) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    body.v5-public-ui .org-v2hero-media,
    body.v5-public-ui .org-v2-hero-media {
        height: var(--v5-public-hero-media-height) !important;
        min-height: var(--v5-public-hero-media-height) !important;
        max-height: var(--v5-public-hero-media-height) !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: stretch !important;
    }

    body.v5-public-ui .org-v2hero-media img,
    body.v5-public-ui .org-v2-hero-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* ======================================================
       VOOR ORGANISATIES - OUDE VARIANT
       Alleen wanneer deze nog ergens actief is
       ====================================================== */

    body.v5-public-ui .org-clean-hero {
        min-height: var(--v5-public-hero-media-height) !important;
        display: flex !important;
        align-items: center !important;
    }

    body.v5-public-ui .org-clean-hero-inner {
        min-height: var(--v5-public-hero-media-height) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* ==========================================================
   VALU5 PUBLIC POLISH V8
   Definitieve uniforme desktop herohoogte
   Alleen desktop >= 1201px
   ========================================================== */

@media (min-width: 1201px) {

    body.v5-public-ui {
        --v5-public-hero-height: 620px;
    }

    /* ======================================================
       HOME V3
       ====================================================== */

    body.v5-public-ui .home-v3-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }

    body.v5-public-ui .home-v3-hero-media,
    body.v5-public-ui .home-v3-hero-content {
        height: 100% !important;
        min-height: 100% !important;
    }

    body.v5-public-ui .home-v3-hero-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* ======================================================
       HOME V2 - indien actief
       ====================================================== */

    body.v5-public-ui .home-v2-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }


    /* ======================================================
       VOOR ORGANISATIES V2
       ====================================================== */

    body.v5-public-ui .org-v2-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }

    body.v5-public-ui .org-v2-hero-media,
    body.v5-public-ui .org-v2-hero-content {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }

    body.v5-public-ui .org-v2-hero-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* V7 min-height op copy terug neutraliseren */
    body.v5-public-ui .org-v2-hero-copy {
        min-height: 0 !important;
        height: auto !important;
    }


    /* ======================================================
       VOOR MANAGERS
       ====================================================== */

    body.v5-public-ui .managers-page .m-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }

    body.v5-public-ui .managers-page .m-hero > .m-container,
    body.v5-public-ui .managers-page .m-hero-grid {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }

    body.v5-public-ui .managers-page .m-hero-copy {
        min-height: 0 !important;
        height: auto !important;
        justify-content: center !important;
    }

    body.v5-public-ui .managers-page .m-hero-visual {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.v5-public-ui .managers-page .m-hero-visual img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }


    /* ======================================================
       JOUW UITKOMST V2
       ====================================================== */

    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }

    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero-media,
    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero-content {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }

    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* ======================================================
       ONS VERHAAL V2
       ====================================================== */

    body.v5-public-ui .story-v2-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }

    body.v5-public-ui .story-v2-hero-photo,
    body.v5-public-ui .story-v2-hero-content {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }

    body.v5-public-ui .story-v2-hero-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* ======================================================
       DE VIJF FASEN V2
       Geen foto, maar zelfde herohoogte
       ====================================================== */

    body.v5-public-ui .phases-v2-hero {
        height: var(--v5-public-hero-height) !important;
        min-height: var(--v5-public-hero-height) !important;
        max-height: var(--v5-public-hero-height) !important;
        overflow: hidden !important;
    }

    body.v5-public-ui .phases-v2-hero-grid {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        align-items: center !important;
    }

    body.v5-public-ui .phases-v2-visual {
        min-height: 500px !important;
        max-height: 560px !important;
    }
}


/* ==========================================================
   VALU5 PUBLIC MOBILE CANON V1
   Scope: telefoons <= 650px

   Uitgangspunten:
   - desktop en tablet niet wijzigen
   - mobiele navigatie niet wijzigen
   - foto + tekst blijven één hero
   - foto bovenin duidelijk zichtbaar
   - voldoende contrast achter tekst
   - consistente tekstpositie
   - Home bewust iets donkerder
   - Jouw uitkomst tekst iets hoger
   ========================================================== */

@media (max-width:650px) {

    /* ------------------------------------------------------
       GEDEELDE HERO-STRUCTUUR
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero,
    body.v5-public-ui .org-v2-hero,
    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero,
    body.v5-public-ui .story-v2-hero {
        position:relative !important;
        display:block !important;
        width:100% !important;

        height:auto !important;
        min-height:850px !important;
        max-height:none !important;

        padding:0 !important;
        overflow:hidden !important;
    }


    /* ------------------------------------------------------
       FOTO BLIJFT VOLLEDIGE HERO-ACHTERGROND
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero-media,
    body.v5-public-ui .org-v2-hero-media,
    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero-media,
    body.v5-public-ui .story-v2-hero-photo {
        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        min-height:0 !important;
        max-height:none !important;

        overflow:hidden !important;
    }

    body.v5-public-ui .home-v3-hero-media img,
    body.v5-public-ui .org-v2-hero-media img,
    body.v5-public-ui [data-public-page="outcome-v2"] .outcome-hero-media img,
    body.v5-public-ui .story-v2-hero-photo img {
        display:block !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }


    /* ------------------------------------------------------
       BRONPUNT PER FOTO
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero-media img {
        object-position:50% center !important;
    }

    body.v5-public-ui .org-v2-hero-media img {
        object-position:54% center !important;
    }

    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-media img {
        object-position:68% center !important;
    }

    body.v5-public-ui .story-v2-hero-photo img {
        object-position:72% center !important;
    }


    /* ------------------------------------------------------
       STANDAARD GRADIENT
       Foto bovenin blijft zichtbaar.
       Onderste deel wordt geleidelijk donker voor tekst.
       ------------------------------------------------------ */

    body.v5-public-ui .org-v2-hero-media::after,
    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-media::after {
        content:"" !important;
        position:absolute !important;
        inset:0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(3,18,36,.22) 0%,
                rgba(3,18,36,.12) 48%,
                rgba(3,18,36,.02) 82%
            ),
            linear-gradient(
                180deg,
                rgba(3,18,36,.01) 0%,
                rgba(3,18,36,.03) 27%,
                rgba(3,18,36,.17) 38%,
                rgba(3,18,36,.48) 49%,
                rgba(3,18,36,.78) 61%,
                rgba(3,18,36,.94) 76%,
                rgba(3,18,36,.985) 100%
            ) !important;
    }


    /* ------------------------------------------------------
       HOME
       Bewust iets donkerder dan andere hero's
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero-media::after {
        content:"" !important;
        position:absolute !important;
        inset:0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(3,18,36,.40) 0%,
                rgba(3,18,36,.27) 48%,
                rgba(3,18,36,.06) 84%
            ),
            linear-gradient(
                180deg,
                rgba(3,18,36,.04) 0%,
                rgba(3,18,36,.08) 27%,
                rgba(3,18,36,.27) 38%,
                rgba(3,18,36,.60) 49%,
                rgba(3,18,36,.84) 61%,
                rgba(3,18,36,.96) 76%,
                rgba(3,18,36,.99) 100%
            ) !important;
    }


    /* ------------------------------------------------------
       ONS VERHAAL
       Deze pagina gebruikt eigen hero-overlay
       ------------------------------------------------------ */

    body.v5-public-ui .story-v2-hero-photo::before {
        display:none !important;
    }

    body.v5-public-ui .story-v2-hero::after {
        content:"" !important;
        display:block !important;

        position:absolute !important;
        inset:0 !important;
        z-index:1 !important;

        background:
            linear-gradient(
                90deg,
                rgba(3,18,36,.22) 0%,
                rgba(3,18,36,.12) 48%,
                rgba(3,18,36,.02) 82%
            ),
            linear-gradient(
                180deg,
                rgba(3,18,36,.01) 0%,
                rgba(3,18,36,.03) 27%,
                rgba(3,18,36,.17) 38%,
                rgba(3,18,36,.48) 49%,
                rgba(3,18,36,.78) 61%,
                rgba(3,18,36,.94) 76%,
                rgba(3,18,36,.985) 100%
            ) !important;
    }


    /* ------------------------------------------------------
       TEKSTPOSITIE
       Eén consistente hoogte voor Home / Organisaties / Story
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero-content,
    body.v5-public-ui .org-v2-hero-content,
    body.v5-public-ui .story-v2-hero-content {
        position:relative !important;
        z-index:2 !important;

        width:100% !important;

        height:auto !important;
        min-height:850px !important;
        max-height:none !important;

        display:flex !important;
        align-items:flex-start !important;

        padding:300px 0 32px !important;
    }


    /* ------------------------------------------------------
       JOUW UITKOMST
       Bewust iets hoger dan voorheen
       ------------------------------------------------------ */

    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-content {
        position:relative !important;
        z-index:2 !important;

        width:100% !important;

        height:auto !important;
        min-height:850px !important;
        max-height:none !important;

        display:flex !important;
        align-items:flex-start !important;

        padding:265px 0 32px !important;
    }


    /* ------------------------------------------------------
       COPY RESET
       Oude animatie/transforms mogen positie niet verstoren
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero-copy,
    body.v5-public-ui .org-v2-hero-copy,
    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-copy,
    body.v5-public-ui .story-v2-hero-copy {
        position:relative !important;

        top:auto !important;
        bottom:auto !important;

        width:100% !important;
        max-width:100% !important;

        min-height:0 !important;

        transform:none !important;
    }


    /* ------------------------------------------------------
       LEESBAARHEID
       Subtiel; geen zware schaduw
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero-copy {
        text-shadow:
            0 1px 2px rgba(0,0,0,.38),
            0 4px 14px rgba(0,0,0,.22) !important;
    }

    body.v5-public-ui .org-v2-hero-copy,
    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-copy,
    body.v5-public-ui .story-v2-hero-copy {
        text-shadow:
            0 1px 2px rgba(0,0,0,.25),
            0 3px 10px rgba(0,0,0,.14) !important;
    }


    /* ------------------------------------------------------
       MOBIELE TYPOGRAFIE
       Alleen hero's; algemene site blijft ongemoeid
       ------------------------------------------------------ */

    body.v5-public-ui .home-v3-hero h1,
    body.v5-public-ui .org-v2-hero h1,
    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-title,
    body.v5-public-ui .story-v2-hero h1 {
        font-size:clamp(34px,9.4vw,43px) !important;
        line-height:1.03 !important;
    }

    body.v5-public-ui .home-v3-hero-lead,
    body.v5-public-ui .org-v2-hero-lead,
    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-text,
    body.v5-public-ui .story-v2-hero-lead {
        font-size:15.5px !important;
        line-height:1.52 !important;
    }
}


/* ----------------------------------------------------------
   KLEINE TELEFOONS
   ---------------------------------------------------------- */

@media (max-width:390px) {

    body.v5-public-ui .home-v3-hero,
    body.v5-public-ui .org-v2-hero,
    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero,
    body.v5-public-ui .story-v2-hero {
        min-height:830px !important;
    }

    body.v5-public-ui .home-v3-hero-content,
    body.v5-public-ui .org-v2-hero-content,
    body.v5-public-ui .story-v2-hero-content {
        min-height:830px !important;
        padding-top:280px !important;
    }

    body.v5-public-ui
    [data-public-page="outcome-v2"]
    .outcome-hero-content {
        min-height:830px !important;
        padding-top:245px !important;
    }
}