/**
 * Theme Name: Block n Roll
 * Version: 1.1.1
 * Author: DIGIWEDO
 * Author URI: https://digiwedo.nl/
 * Text Domain: blocknroll
 */

:root {
    --swiper-navigation-size: 2rem;
    --swiper-pagination-bullet-size: 0.5rem;
    --swiper-pagination-bullet-color: #000000;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-inactive-color: #000000;
    --swiper-pagination-bullet-inactive-opacity: 0.25;
    --swiper-pagination-bullet-horizontal-gap: 0.5rem;
    --swiper-pagination-bullet-vertical-gap: 0.5rem;
	--transition-smooth: 1s cubic-bezier(0.23, 1, 0.32, 1);
	--transition-smooth-slow: 2s cubic-bezier(0.23, 1, 0.32, 1);
}



.marquee-block {
    overflow: hidden;
    width: 100%;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.marquee-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10rem;
    /*width: max-content;*/
}

.marquee-track .box {
    flex-shrink: 0;
    width: auto;
    max-height: 50vh;
    margin-top: 0 !important;
}

.marquee-track .box img {
    display: block;
    height: auto;
    width: auto;
    object-fit: cover;
    max-height: 50vh;
}

.w-full, .w-full img {
	width: 100%;
}

.privacy a {
    color: var(--wp--preset--color--yellow);
}

.events-none {
	pointer-events: none;
}

.single-post main, .single-werk main, .single-story main {
	margin-top: 0 !important;
}

.page-template-werk-archive main, .post-type-archive-werk main {
    margin-bottom: 0 !important;
}

.header-top-row p {
    text-wrap: nowrap !important;
}

.header-top-row {
    flex-wrap: nowrap !important;
}

ul.horizontal-list[data-is-drop-zone="true"] > li[data-wpml="language-item"]:first-of-type {
    margin-top: 0 !important;
}

.wpml-language-switcher-block ul.hasSpacing.isHorizontal.horizontal-list[data-is-drop-zone="true"] > li.wp-block-navigation-item:not(:last-child) {
    margin-right: 0 !important;
}

.mobile-language-menu {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}

.wpml-language-switcher-block a:hover:before {
    display: none !important;
    border: none;
}

.wpml-language-switcher-block a:before {
    height: 0 !important;
}

.wpml-language-switcher-block
a.wp-block-navigation-item__content[data-wpml="link"]:hover
span.wp-block-navigation-item__label.hasHoverColor {
    color: var(--wp--preset--color--white) !important;
}






li[data-wpml="current-language-item"] {
    display: none !important;
}




header.wp-block-template-part {
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
}

header.wp-block-template-part::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 0;
    background: #00000050;
    backdrop-filter: blur(8px);
    transition: height 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

header.wp-block-template-part.header-scrolled::before {
    height: 100%;
}

.header-top {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    max-height: var(--top-height);
    opacity: 1;
}

.header-top--hidden {
    max-height: 0;
    opacity: 0;
}

.header-bottom {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    max-height: var(--bottom-height);
    opacity: 1;
    overflow: hidden;
}
.header-bottom--hidden {
    max-height: 0;
    opacity: 0;
}


.scale-center {
    transform-origin: center;
}

.scale-left {
    transform-origin: left;
}

.scale-right {
    transform-origin: right;
}

.skew-right {
    transform-origin: right center;
}

.skew-left {
    transform-origin: left center;
}

.relative {
    position: relative;
}

.is-footer-cta {
    transform-origin: bottom;
    overflow: hidden;
}

.masonry-gallery {
    padding-left: 0;
    padding-right: 0
}

.masonry-gallery .wp-block-blocknroll-swiper {
    max-width: 100% !important;
}

.werk-featured-image{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


/* your manual “pin-spacer” */
.cases-pin-spacer {
    width: 100%;
    pointer-events: none;
    /* height will be set in JS */
}

.featured-cases-section {
    position: relative;
    padding: 0;
    overflow-x: clip;
}

.featured-cases-scroller {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.featured-cases-container {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: flex;
}

.ft-case-button {
    position: relative;
    display: flex;
    margin-left: auto;
    cursor: pointer;
    z-index: 3;
}

.ft-case-button a:after {
    content: "";
    position: absolute;
    background-image: url('/wp-content/uploads/2025/04/btn-arrow-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    right: -1.5rem;
    width: 1.5rem;
    height: 1rem;
    transform: translateY(-50%);
    transition: var(--transition-smooth);
}

.ft-case-button a:hover:after {
    right: -2rem;
}


.featured-button:hover .ft-case-button:after {
    transform: translateX(0.5rem) !important;
}

.wp-block-group.is-linked a.wp-block-group__link {
	min-width: 100%;
}

.featured-cases-container li.wp-block-post {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.featured-cases-main {
    height: 100vh;
    display: flex;
    position: relative;
}

.featured-cases-container li .featured-cases-main {
    transform-origin: center center;
}

.featured-cases-ft-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.featured-cases-ft-image img {
    /* make sure the image scales around its center */
    transform-origin: center center;
}

.featured-cases-ft-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.pin-spacer {
    min-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.categorie-werk-block {
    display: inline;
    margin: 0;
    padding: 0;
}

.categorie-werk-block .term {
    display: inline;
    color: var(--wp--preset--color--white) !important;
}

.categorie-werk-block .term:not(:last-child)::after {
    content: " | ";
    color: var(--wp--preset--color--white) !important;
}

.featured-cases-wrapper {
    width: 100%;
}

.is-error-page h2 {
	font-size: 10rem !important;
}


.wp-has-paragraph:empty, .wp-block-image:empty, .wp-block-buttons:empty{
    display: none !important;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
}

.no-margin-start, .no-margin-start ~ figure {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-top: 0 !important;
}


a.wp-block-navigation-item__content,
ul.werk-filter-list a,
.story-filter-list a, .tax-filter-list a {
    position: relative;
}

a.wp-block-navigation-item__content {
    font-weight: 600;
}

ul.werk-filter-list a,
.story-filter-list a, .tax-filter-list a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
    font-weight: 300;
    font-size: var(--wp--preset--font-size--heading-6);
    transition: var(--transition-smooth);
}

ul.werk-filter-list,
.story-filter-list, .tax-filter-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
}

a.wp-block-navigation-item__content::before,
ul.werk-filter-list a::before,
.story-filter-list a::before, .tax-filter-list a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -0.5rem;
    left: 0;
    background: linear-gradient(
            90deg,
            rgba(255, 239, 0, 0.3) 0%,
            rgba(255, 239, 0, 0.8) 40%,
            rgba(255, 239, 0, 1)   50%,
            rgba(255, 239, 0, 0.8) 60%,
            rgba(255, 239, 0, 0.3) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: 0.3s ease;
    border-radius: 999px;
}

a.wp-block-navigation-item__content:hover::before,
ul.werk-filter-list a:hover::before,
.story-filter-list a:hover::before,
ul.werk-filter-list .active::before,
.story-filter-list .active::before, .tax-filter-list a:hover::before, .tax-filter-list .active::before {
    animation-play-state: running;
    opacity: 1;
}

.is-footer-update-menu a.wp-block-navigation-item__content:hover::before {
    opacity: 0;
}

.is-footer-update-menu a.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--yellow);
}

@keyframes shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.is-footer {
    position: relative;
    overflow: hidden;
}

footer.wp-block-template-part {
    margin-block-start: 0 !important;
}

.is-footer-navigation a {
    font-weight: 300;
}

.is-footer-navigation {
    gap: 0;
}

.is-footer-navigation a.wp-block-navigation-item__content::before {
    height: 0;
}

.footer-video {
    border: none;
    bottom: 0;
    box-shadow: none;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: 100%;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    display: flex;
    align-items: stretch;
}

.footer-video video {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

.footer-nosuch-image, .footer-nosuch-image img {
    width: 100%;
}

body {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
	word-break: break-word;
    font-weight: 300 !important;
}

@property --gradient-factor {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

.is-style-button-icon-1 {

}

.is-style-button-icon-1 a {
    --gradient-factor: 0;
    background: transparent;
    padding: 1.25rem 1.25rem 1.25rem 0;
    border: none;
	border-radius: 0;
    border-bottom: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    min-width: 260px;
    max-width: 100%;
    border-image: linear-gradient(
            to right,
            color-mix(in srgb,
            currentColor calc(100% - 100% * var(--gradient-factor)),
            transparent
            ),
            currentColor calc(100% * var(--gradient-factor)),
            color-mix(in srgb,
            currentColor calc(100% * var(--gradient-factor)),
            transparent
            )
    ) 1 stretch;

    transition: --gradient-factor var(--transition-smooth);
}

.is-style-button-icon-1 a:after {
    content: "→";
    display: inline-block;
    transition: var(--transition-smooth);
    font-size: 1.5rem;
}

.is-style-button-icon-1:hover a:after {
    transform: translateX(1.25rem);
}

.is-style-button-icon-1 a:hover {
    --gradient-factor: 1;
}

.is-style-button-update {
    width: auto;
}

.is-style-button-update .wp-block-button__link, #gform_submit_button_2 input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
    padding: 2rem !important;
    border-radius: 0;
    background-color: var(--wp--preset--color--black);
    border: 1px solid currentColor !important;
    color: white; /* bepaalt ook de kleur van het icoon */
    text-decoration: none;
    position: relative;
    letter-spacing: 2px;
    font-family: var(--wp--preset--font-family--campton);
    font-weight: 550;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--s);
}

.is-style-button-update .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg fill='currentColor' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M0.535534 11.1421L11.1421 0.5355M11.1421 0.5355L11.1421 7.60657M11.1421 0.5355L4.07107 0.5355' stroke='currentColor'/></svg>") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml;utf8,<svg fill='currentColor' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M0.535534 11.1421L11.1421 0.5355M11.1421 0.5355L11.1421 7.60657M11.1421 0.5355L4.07107 0.5355' stroke='currentColor'/></svg>") no-repeat center;
    mask-size: contain;
}

.is-style-button-update .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--yellow);
    border-color: var(--wp--preset--color--yellow);
    color: black !important; /* tekst én icoon */
}

.is-style-button-update.footer-update {
    width: auto;
}

.link a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    font-size: inherit;
}


.kicker,
.quote-dash, .featured-cases-container .bedrijfsnaam-block  .term {
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.kicker, .featured-cases-container .bedrijfsnaam-block .term {
    padding-left: 70px;
}
.quote-dash {
    padding-left: 50px;
}

.kicker:before,
.quote-dash:before, .featured-cases-container .bedrijfsnaam-block .term:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background-color: var(--wp--preset--color--white);
}



.kicker:before, .featured-cases-container .bedrijfsnaam-block .term:before {
    width: 50px;
}
.quote-dash:before {
    width: 30px;
}

.werk-grid .term {
    font-size: var(--wp--preset--font-size--heading-5);
}

.our-steps {
    counter-reset: step-number;
}

.our-steps .has-steps {
    counter-increment: step-number;
    position: relative;
    padding-left: 70px;
}

.our-steps .has-steps::before {
    content: counter(step-number, decimal-leading-zero);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 1rem;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--wp--preset--color--white);
}

.has-quote .has-animated-text {
    width: 100%;
}


.font-light {
    font-weight: 300;
}


.span-wrapper {
    font-family: var(--wp--preset--font-family--junicode-vf);
    font-style: italic !important;
}

.width-50-50 {
    max-width: 50%;
    margin-left: auto;
}

.dynamic-contact-image {
    border-radius: 999px;
}

.dynamic-contact-links a {
    font-size: var(--wp--preset--font-size--heading-6);
}

.featured-services-wrapper, .services-wrapper, .vacature-wrapper, .contact-wrapper {
	position: relative;
	overflow: hidden;
}

.featured-services-wrapper:first-child, .services-wrapper:first-child, .contact-wrapper:first-child {
	border-top: 1px solid var(--wp--preset--color--white);
}

.featured-services-wrapper img, .vacature-wrapper img {
	width: clamp(1.375rem, calc(1.375rem + ((1vw - 0.2rem) * 4.1667)), 3.875rem) !important;
    min-width: clamp(1.375rem, calc(1.375rem + ((1vw - 0.2rem) * 4.1667)), 3.875rem);
	aspect-ratio: 5 / 4;
}

.featured-services-wrapper *, .services-wrapper *, .vacature-wrapper *, .contact-wrapper * {
	transition: var(--transition-smooth);
}

.featured-services-wrapper:hover h2, .services-wrapper:hover p, .vacature-wrapper:hover h2 {
	transform: translatex(1rem);
}

.featured-services-wrapper:hover img, .services-wrapper:hover img, .vacature-wrapper:hover img {
	transform: translatex(-1rem);
}

.featured-services-wrapper:after, .services-wrapper:after, .vacature-wrapper:after, .contact-wrapper:after {
	content: "";
	position: absolute;
 	inset: 0;
	background-image: url(/wp-content/uploads/2025/05/Ellipse-yellow.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 100% 0%;
	opacity: 0;
    z-index: -1;
	transition: 
    opacity var(--transition-smooth),
    background-size var(--transition-smooth);
	transform-origin: bottom center;
}

.featured-services-wrapper:hover:after, .services-wrapper:hover:after, .vacature-wrapper:hover:after, .contact-wrapper:hover:after {
    background-size: 100% 70%;
	opacity: 1;
	animation: breathe 5s ease-in-out 0.1s infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
}

.vacature-wrapper {
    margin-bottom: 0;
}

.vacature-wrapper:hover .seperator {
    transform: translateX(1rem);
}

.contact-wrapper:hover h2 {
    transform: translateX(-1rem);
}

.contact-wrapper:hover p {
    transform: translateX(1rem);
}



.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	object-fit: contain !important;
}

.opacity-50 {
	opacity: .5;
}

.contactform-cta {
	height: 100%;
    justify-content: space-between;
}

.is-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
}

.is-hero .wp-block-heading {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto 2rem;
    text-align: left;
}

.is-hero-centered {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
}

.is-hero-centered .wp-block-heading {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    margin: auto;
    text-align: center;
}

.is-hero-title {
    position: absolute;
    bottom: 2rem;
}

.is-hero__video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.wp-block-cover {
    min-width: 100%;
}

.has-animated-text {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    word-break: break-word;
}

.has-animated-text p {
    word-break: break-word;
}

.has-quote {
    width: 60%;
}

.news-items img, .stories-items img {
    transition: var(--transition-smooth);
}

.news-items li:hover img, .stories-items li:hover img {
    scale: 1.2;
}

.news-image-wrapper, .stories-items-wrapper {
    position: relative;
    overflow: hidden;
}

.werk-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    max-width: 1920px;
    margin: 0 auto;
}

.werk-image-wrapper .wp-block-group__link {
	min-width: 100%;
}

.werk-grid li:nth-child(3n+1),
.werk-grid li:nth-child(3n+2) {
  grid-column: span 6;
    aspect-ratio: 3 / 2;
}

.werk-grid li:nth-child(3n) {
  grid-column: span 12;
    aspect-ratio: 3 / 1;
}

.werk-grid li:nth-child(3n+1) .hover-video-medium,
.werk-grid li:nth-child(3n+1) .hover-thumbnail-medium,
.werk-grid li:nth-child(3n+2) .hover-video-medium,
.werk-grid li:nth-child(3n+2) .hover-thumbnail-medium {
  display: none;
}

.werk-grid li:nth-child(3n) .hover-video-small,
.werk-grid li:nth-child(3n) .hover-thumbnail-small {
  display: none;
}

.werk-grid li {
    display: flex;
    flex-direction: column;
    margin-block-start: 0;
    max-height: 640px;
    list-style: none;
}

.werk-grid li:hover img, .werk-grid li:hover video {
    filter: brightness(0.5);
}

.werk-grid img, .werk-grid figure {
    height: 100%;
    width: 100%;
    min-width: 100%;
    transition: var(--transition-smooth);
    margin-top: 0 !important;
}

.werk-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin-bottom: 0 !important;
}

.werk-grid-hover {
    position: absolute;
    z-index: 3;
    bottom: 2rem;
    left: 2rem;
    transform: translateY(150%);
    transition: var(--transition-smooth);
    transition-delay: .2s;
}


.werk-image-wrapper:hover .werk-grid-hover {
    transform: translateY(0%);
}



.werk-grid .is-style-button-icon-1 a:after {
    font-size:  var(--wp--preset--font-size--heading-5) !important;
}

.image-clip {
    clip-path: polygon(
            0%   0%,   /* top-left */
            100% 0%,   /* top-right */
            100% 70%,  /* punt op de rechterrand (75% naar beneden) */
            0%  100%, /* punt op de onderrand (75% van links) */
            0%   100%  /* bottom-left */
    );
	filter: brightness(0.7);
}



.story-hero {
    display: flex;
    min-height: 80vh;
}

.story-hero-back {
    z-index: 2;
}

.image-clip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: calc(50% - 5rem);
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    z-index: -1;
    margin-block-start: 0 !important;
}

.image-clip img {
    width: 100%;
    height: 100%;
	object-fit: cover;
}

.has-icon__arrow-left a, .has-icon__arrow-right a {
    background-color: transparent;
}

.has-icon__arrow-left a:hover span {
    transform: translateX(-0.5rem);
}

.has-icon__arrow-right a:hover span {
	transform: translateX(0.5rem);
}

.has-icon__arrow-left span, .has-icon__arrow-right span {
    transition: var(--transition-smooth);
}



.seperator {
    transition: var(--transition-smooth);
}

.seperator p {
    padding-top: 4px;
}

.seperator p:first-child {
    padding-right: 1rem;
    border-right: 1px solid var(--wp--preset--color--white);
}

.mobile-header {
    padding: 1.5rem 1rem !important;
}


figure.hover-video {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: var(--transition-smooth);
}

figure.hover-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.werk-image-wrapper:hover  .hover-video {
    opacity: 1;
}

.stories-items {
  display: grid;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 2rem;
}

.stories-items > li:nth-child(6n+1) {
  grid-column: 2 / span 4 !important;
}

.stories-items > li:nth-child(6n+2) {
  grid-column: 8 / span 4 !important;
}

.stories-items > li:nth-child(6n+3) {
  grid-column: 1 / span 4 !important;
}

.stories-items > li:nth-child(6n+4) {
  grid-column: 6 / span 4 !important;
}

.stories-items > li:nth-child(6n+5) {
  grid-column: 3 / span 4 !important;
}

.stories-items > li:nth-child(6n+6) {
  grid-column: 8 / span 4 !important;
}






/*UPDATE  ================================================*/



.fullwidth-image-col {
    position: relative;
    width: 100vw;              /* breedte van hele viewport */
    margin-left: calc(-50vw + 50%); /* haalt 'm uit de content container */
}

.fullwidth-image-col img {
    width: 100%;
    height: auto;
    object-fit: cover;         /* mooi bijsnijden bij vreemde verhoudingen */
    display: block;
    aspect-ratio: 1 / 1;
}

.fullwidth-txt-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.is-footer-update-menu a {
    font-family: var(--wp--preset--font-family--campton);
    font-weight: 300; /* Light */
    text-decoration: underline;
}

.is-footer-socials svg {
    width: 2rem !important;
    height: 2rem !important;
}

.is-footer-socials h2 {
    white-space: nowrap;
}

.is-update-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.no-wrap {
    text-wrap-mode: nowrap;
}

.is-footer-privacy a {
    font-weight: 300;
    font-size: var(--wp--preset--font-size--xs) !important;
}

/* ========== HERO + SCROLLING GRADIENT (drop-in) ========== */
:root{
    --hero-h: 94vh;   /* hoogte van de hero */
    --fade-h: 50vh;   /* hoogte van de zwarte fade */
}

/* HERO (alleen de afbeelding; blijft fixed onder alles) */
.is-case-hero-update {
    position: fixed;
    height: var(--hero-h);
    width: 100%;
    background: url('https://nosuch.nl/wp-content/uploads/2025/08/Hero-1.png') center/cover no-repeat;
    z-index: 0;               /* onder content & overlay van de scroller */
    overflow: hidden;
    padding: 0 !important;
    min-width: 100%;
}

/* HERO-TEKST (boven de gradient; leesbaar) */
.is-case-hero-update-txt {
    position: absolute;
    top: -8rem;
    z-index: 3;               /* boven de gradient die aan .is-case-content hangt */
}

/* SCROLLER (de rest van de pagina die over de hero heen gaat) */
.is-case-content {
    position: relative;
    margin-top: var(--hero-h);/* schuift voorbij de fixed hero */
    z-index: 1;               /* boven de hero-afbeelding */
    isolation: isolate;       /* maakt eigen stacking-context t.b.v. overlay */
}

/* MEE-SCROLLENDE GRADIENT (ligt in de scroller, onder de echte content) */
.is-case-content::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--fade-h)); /* start bovenaan de scroller, valt over hero */
    height: var(--fade-h);
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;               /* onder de content binnen deze context */
}

/* Zorg dat alle content in de scroller boven de gradient ligt */
.is-case-content > * {
    position: relative;
    z-index: 1;
}

.is-top-content {
    margin-block-start: 0 !important;
}

/* (BELANGRIJK) Verwijder je oude overlay op .is-case-content::after */
/* .is-case-content::after { ... }  */

/* ====== Optioneel: responsive tweaks ====== */
@media (max-width: 768px){
    :root{
        --hero-h: 65vh;
        --fade-h: 45vh;
    }
}



.is-fw-image-update {
    padding: 0 var(--wp--preset--spacing--s);
}

.is-vimeo-player-title {
    letter-spacing: 2px;
}

/* Wrapper: blok ipv inline-block, netjes content-breed gecentreerd */
.is-vimeo-wrapper {
    position: relative;
    display: block; /* was inline-block */
    width: 100%;
    max-width: var(--wp--style--global--content-size, 100%);
    margin-inline: auto;
}

/* 16:9 houder (zorg dat je iframe hierin staat) */
.is-vimeo-wrapper .video-ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* fallback (optioneel):
    padding-top: 56.25%;
    height: 0;
    */
}

/* Iframe vult de ratio; vangt GEEN pointer-events vóór play voor betere scroll */
.is-vimeo-wrapper iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
    pointer-events: none; /* vóór play: laat swipen/scroll door */
}

/* Overlay: bedek hele video; maak alleen de inhoud klikbaar */
.is-custom-play-button {
    position: absolute;
    inset: 0; /* i.p.v. top/left/transform */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: white;
    padding: .75rem 1rem;
    border-radius: 50px;
    transition: background .3s ease;
    z-index: 3;
    cursor: pointer;

    /* belangrijk: overlay zelf niet "blokkerend" voor scroll/gestures */
    pointer-events: none;
}
/* Alleen de content binnen de knop mag clicks krijgen */
.is-custom-play-button > * {
    pointer-events: auto;
}

.is-custom-play-button:hover {
    color: var(--wp--preset--color--white-900);
}

/* === Playing state === */
/* Overlay mag geen events meer vangen en gaat weg */
.is-vimeo-wrapper.is-playing .is-custom-play-button {
    display: none !important;
    pointer-events: none !important;
}

/* Iframe wordt interactief zodra we spelen (pauze/seek mogelijk) */
.is-vimeo-wrapper.is-playing iframe {
    pointer-events: auto;
}

/* Safety net voor Gutenberg-wrappers die anders boven je iframe liggen */
.is-vimeo-wrapper.is-playing > *:not(.video-ratio) {
    pointer-events: none !important;
}
.is-vimeo-wrapper.is-playing .video-ratio {
    pointer-events: auto !important;
}

.has-update-content-width {
    max-width: 1046px !important;
}

.has-case-update-custom-spacing {
    margin: 18rem 0;
}

.has-case-update-custom-spacing > div {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.footer-border {
    border-color: #404040 !important;
    margin: 0 3rem !important;
}

.footer-flex {
    display: flex;
    justify-content: flex-end;
}


/*-------------------------------------------------------------------- Gravity forms --------------------------------------------------------------------*/

.gform_wrapper * {
    all: revert;
}

.gform_wrapper.gravity-theme .gfield_label {
    display: inline-block;
    font-size: 1.125rem !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    margin-bottom: 30px !important;
	color: var(--wp--preset--color--white);
}


.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0 0 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--campton);
	border-radius: 0  !important;
}

.gform_wrapper.gravity-theme .gfield_required {
	display: none !important;
}

.gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 2rem !important;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px !important;
	border-bottom: 1px solid var(--wp--preset--color--yellow) !important;
	transition: var(--transition-smooth-slow);
}

::placeholder {
	color: white;
	opacity: 0.5;
	font-family: var(--wp--preset--font-family--campton);
}

.gform_wrapper.gravity-theme .gform_footer input {
    align-self: flex-end;
    background: transparent;
    color: white;
    border: none;
    font-size: 1.5rem;
    letter-spacing: 1px;
    font-weight: 300;
	font-family: var(--wp--preset--font-family--campton);
	cursor: pointer;
	transition: var(--transition-smooth);
	margin-top: 4rem;
}

.gform_wrapper.gravity-theme .gform_footer input:hover {
	letter-spacing: 2px;
	color: var(--wp--preset--color--yellow);
}

/*-------------UPDATE GFORM --------------------------*/

#gform_2 .gfield_label, #gform_2 .gform-field-label {
    display: inline-block;
    font-size: var(--wp--preset--font-size--s) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--campton);
    text-transform: uppercase;
}


#gform_2 input, #gform_2 textarea {
    margin-bottom: 0;
    margin-top: 0;
    padding: 1.5rem !important;
    background: white;
    border: none;
    border: 0;
    font-size: var(--wp--preset--font-size--s);
    color: var(--wp--preset--color--white-800);
    font-family: var(--wp--preset--font-family--campton);
    font-weight: 500;
    border-radius: 0  !important;
}

#gform_2 .gfield_required {
    display: none !important;
}

#gform_2 .gform_fields {
    grid-row-gap: 2rem !important;
}

#gform_2 :focus-visible {
    outline: -webkit-focus-ring-color auto 0px !important;
    border-bottom: 1px solid var(--wp--preset--color--yellow) !important;
    transition: var(--transition-smooth-slow);
}

#gform_2 ::placeholder {
    color: var(--wp--preset--color--white-800);
    font-family: var(--wp--preset--font-family--campton);
    font-size: var(--wp--preset--font-size--s);
    text-transform: uppercase;

}

/* Basisstijl */
#gform_2 .gform_footer input[type="submit"].gform_button {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    min-width: auto;
    text-align: left;
    text-transform: uppercase;

    /* spacing */
    padding: 2rem !important;
    padding-right: calc(6rem + 1.5em) !important; /* extra ruimte voor het icoon rechts */

    /* look */
    border-radius: 0;
    background-color: var(--wp--preset--color--black);
    border: 1px solid currentColor !important;
    color: white; /* stuurt ook de icoonkleur */
    letter-spacing: 2px;
    text-decoration: none;
    position: relative;
    appearance: none; /* zorg voor consistente styling */

    /* icoon rechts */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.535534 11.1421L11.1421 0.5355M11.1421 0.5355L11.1421 7.60657M11.1421 0.5355L4.07107 0.5355' stroke='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1em;

    /* transitions */
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Hover: geel vlak + zwarte tekst/icoon, border mee */
#gform_2 .gform_footer input[type="submit"].gform_button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.535534 11.1421L11.1421 0.5355M11.1421 0.5355L11.1421 7.60657M11.1421 0.5355L4.07107 0.5355' stroke='black'/%3E%3C/svg%3E");
    background-color: var(--wp--preset--color--yellow);
    border-color: var(--wp--preset--color--yellow) !important;
    color: black;
}

/*TESTIMONIALS =========================================================*/

.is-testimonial-name {
    font-family: var(--wp--preset--font-family--campton);
    font-weight: 600; /* SemiBold */
    line-height: 150%;
    letter-spacing: 0;
    text-transform: uppercase;
}

.is-testimonial-company {
    font-family: var(--wp--preset--font-family--campton);
    font-weight: 300; /* Light */
    line-height: 150%;
    letter-spacing: 0;
    text-transform: uppercase;
}

.is-testimonial-text {
    font-family: var(--wp--preset--font-family--campton);
    font-weight: 300; /* Light */
    line-height: 150%;
    letter-spacing: 0;
}

.wp-block-blocknroll-swiper * {
    margin-block-start: 0 !important;
}

/*============================= ARTIKELEN ==================================================*/

.taxonomy-category a {

    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: var(--wp--preset--color--white);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--campton);}

.is-article-query {
    padding: 0 2rem;
}

/*-------------------------------------------------------------------- Responsive --------------------------------------------------------------------*/

@media (min-width: 1980px) {
    .image-clip {
        position: relative;
        max-width: 100%;
    }
}

@media (max-width: 1168px) {
	.cta-contact-columns .is-style-button-icon-1 a {
	min-width: auto;
    }

    .has-case-update-custom-spacing {
        margin: 6rem 0;
    }
}

@media (max-width: 768px) {


    .footer-flex{
        justify-content: flex-start;

    }

    .is-footer-socials {
        text-align: left;
        justify-content: flex-start;
    }


    .width-50-50 {
        max-width: 100%;
        margin-left: inherit;
    }
    .has-animated-text, .has-quote {
        width: 100%;
    }

    .services-main-wrapper {
        gap: 0 !important;
    }
    .mob-noborder {
        border-top: none !important;
    }
    .werk-grid li {
        height: 300px;
        min-height: 300px;
    }
    .werk-grid .is-style-button-icon-1 a {
        min-width: auto;
    }
    .image-clip {
        width: 100%;
        max-width: 100%;
        filter: brightness(0.5);
    }
    .seperator p {
        font-size: 0.875rem;
    }
    .header-top {
        display: none;
    }
    .header-bottom {
        padding-top: 1.5rem !important;
    }
    .is-mobile-navigation a {
        font-size: 2.5rem;
        font-weight: 300;
    }
    .footer-grid--column {
        grid-column: span 6;
    }
    .wp-block-blocknroll-mobile-menu .mobile-menu-container {
        position: fixed;
        inset: 0;
        z-index: 50;
        width: 100%;
        right: 0;
        left: auto;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: var(--transition-smooth);
    }

    .wp-block-blocknroll-mobile-menu[aria-expanded="true"] .mobile-menu-container {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .wp-block-blocknroll-mobile-menu[aria-expanded="false"] .mobile-menu-container {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
    }

    .wp-block-blocknroll-mobile-menu[aria-expanded=false] .mobile-menu-container {
        display: block !important;
    }

    body.no-scroll {
        overflow: hidden;
        height: 100vh;
        touch-action: none;
    }
	.stories-items > li:nth-child(6n+1) {
  grid-column:  span 6 !important;
}

.stories-items > li:nth-child(6n+2) {
  grid-column:  span 6 !important;
}

.stories-items > li:nth-child(6n+3) {
  grid-column:  span 6 !important;
}

.stories-items > li:nth-child(6n+4) {
  grid-column:  span 6 !important;
}

.stories-items > li:nth-child(6n+5) {
  grid-column:  span 6 !important;
}

.stories-items > li:nth-child(6n+6) {
  grid-column:  span 6 !important;
}
    .is-hero {
        justify-content: center !important;
    }
    .is-hero .wp-block-heading {
        text-align: center;
    }
    .has-icon__arrow-left a {
        padding-left: 0;
    }
    .contact-wrapper h2 {
        text-align: left;
    }
    .ft-case-btn-wrapper {
        display: flex !important;
        justify-content: flex-start;
    }
    .ft-case-button {
        margin-left: 0;
    }
    .featured-services-wrapper * {
        color: var(--wp--preset--color--white) !important;
    }



}

@media (max-width: 425px) {
	.stories-items {
    display: block !important;
  }

    .is-style-button-update .wp-block-button__link, #gform_submit_button_2 input[type=submit] {
        gap: 2rem !important;
        padding: 1rem !important;
    }

    #gform_2 .gform_footer input[type="submit"].gform_button {

        padding-right: calc(2rem + 1.5em) !important; /* extra ruimte voor het icoon rechts */}


  .stories-items > li {
    grid-column: auto !important;
    width: 100%;
  }
    .werk-grid li {
        grid-column:  span 12 !important;
        aspect-ratio: 3 / 2;
        max-width: 100%;
    }
	
	.werk-grid li .hover-video-medium, .werk-grid li .hover-thumbnail-medium {
		display: none;
	}
    .werk-grid {
    overflow-x: hidden;
    }
    ul.werk-filter-list, .tax-filter-list {
        display: flex    ;
        justify-content: flex-start;
        padding-left: 0;
    }
    .marquee-track {
        gap: 2rem;
    }
}

/*-------------------------------------------------------------------- Cookiebot --------------------------------------------------------------------*/

/* Branding on the banner */
a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText {
  display: none;
}

/* Branding on the Privacy trigger */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
    display: none;
}