/* Table of Content
=================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================= */


/* #Site Styles
================================================= */
:root {
	--width-base: 1280px;
	--width-large: 1700px;
	--primary: #fab70a;
	--secondary: #003e4c;
	--white: #fff;
	--black: #000;
	--grey: #f9f9f9;
	--grey-100: #707070;
	--info: #f3f3f3;
	--yellow: #edad06;
	--stone: #005868;
	--skobeloff: #006d7f;
	--font-size-base: 16px;
	--font-family-base: 'Poppins', sans-serif;
	--font-family-heading: 'Bebas Kai', sans-serif;
	--font-family-icons: 'icomoon', sans-serif;
	--line-height-base: 1.8;
	--font-size-h1: 45px;
	--font-size-h2: 40px;
	--font-size-h3: 28px;
	--font-size-h4: 22px;
	--font-size-h5: 18px;
	--font-size-h6: 16px;
	--width: 100%;
	--height: 100%;
	--gutter-left: 20px;
	--gutter-right: 20px;
	--line-height-heading: 1.1;
	--line-decoration-none: none;
	--duration: all 0.25s ease-in-out;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* =============================================================================
 * SCROLLBALK BINNEN KAARTEN
 * =============================================================================
 *
 * Kaarten met een vaste hoogte laten hun tekst scrollen. Op macOS is de
 * systeembalk onzichtbaar tot je scrolt, dus zie je niet dat er meer tekst is
 * en ga je ook niet scrollen. Vandaar een eigen, altijd zichtbare balk.
 *
 * scrollbar-width/-color is de standaard (Firefox, en Chrome/Edge 121+).
 * De ::-webkit-regels zijn voor oudere WebKit, met name Safari.
 * ============================================================================= */

.js-scroll-tekst { scrollbar-width: thin; scrollbar-color: rgba(0, 62, 76, 0.28) transparent; }
.js-scroll-tekst::-webkit-scrollbar { width: 6px; }
.js-scroll-tekst::-webkit-scrollbar-track { border-radius: 3px; background-color: rgba(0, 62, 76, 0.07); }
.js-scroll-tekst::-webkit-scrollbar-thumb { border-radius: 3px; background-color: rgba(0, 62, 76, 0.28); }
.js-scroll-tekst::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }

/* Vervagende rand onderaan zolang er nog tekst onder de vouw zit. De class
 * is-onderaan wordt door js/main.js gezet zodra je uitgescrold bent. De
 * wrapper is relatief gepositioneerd; het verloop ligt erboven maar vangt
 * geen muis af. */
.scroll-tekst { position: relative; flex: 1; min-height: 0; display: flex; }
.scroll-tekst:after { position: absolute; right: 0; bottom: 0; left: 0; height: 36px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--white) 85%); content: ''; pointer-events: none; opacity: 1; transition: var(--duration); }
.scroll-tekst.is-onderaan:after,
.scroll-tekst.is-kort:after { opacity: 0; }
html,
body { font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: 400; line-height: var(--line-height-base); color: var(--secondary); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.is-menu-open { overflow: hidden; }
label { margin-bottom: 5px; display: block; font-size: 18px; font-weight: 400; }
input,
select,
textarea { padding: 16px 20px; position: relative; width: var(--width); min-height: 55px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: 500; color: var(--white); border-radius: 55px; background-color: var(--white); }
textarea { height: 152px; resize: none; }
textarea::placeholder,
input::placeholder { color: var(--secondary); }
:focus { outline: none; }
img { display: block; max-width: var(--width); height: auto; }
ul,
li { list-style-position: outside; }
p { margin-bottom: 20px; }
a { display: inline-block; transition: var(--duration); }
h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 20px; font-family: var(--font-family-heading), sans-serif; font-weight: 400; line-height: var(--line-height-heading); color: var(--secondary); }
h1,
.h1 { font-size: var(--font-size-h1); text-transform: uppercase; }
h2,
.h2 { font-size: var(--font-size-h2); text-transform: uppercase; }
h3,
.h3 { font-size: var(--font-size-h3); }
h4,
.h4 { font-size: var(--font-size-h4); }
h5,
.h5 { font-size: var(--font-size-h5); }
h6,
.h6 { font-size: var(--font-size-h6); }
h1 strong,
h2 strong,
h3 strong { font-weight: 500; color: var(--primary); }

/* ### button ### */
.button { padding: 10px 25px; display: inline-flex; align-items: center; justify-content: center; min-height: 55px; font-family: var(--font-size-base), sans-serif; font-size: var(--font-size-base); font-weight: 500; text-decoration: var(--line-decoration-none); color: var(--secondary); border: 0; border-radius: 20px; background-color: var(--primary); transition: var(--duration); cursor: pointer; }
.button i { margin-top: -3px; margin-right: 9px; font-size: 22px; font-weight: 500; }
.button:focus,
.button:hover { background-color: var(--yellow); }
.button.button-small { min-height: 54px; border-radius: 20px; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.centered,
.centered-lg { padding-right: var(--gutter-right); padding-left: var(--gutter-left); }

/* ### wrapper ### */
.wrapper { position: relative; display: block; width: var(--width); min-height: var(--height); overflow: hidden; }

/* ### header ### */
.header { padding-top: 14px; padding-bottom: 14px; position: fixed; top: 0; left: 0; z-index: 11; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: var(--width); transition: var(--duration); }
.header-logo { width: 150px; transition: var(--duration); position: relative; z-index: 2; }
.header-logo img { width: var(--width); }
.header.sticky { background-color: rgba(0, 109, 127, 0.5); }

/* ### header-menu ### */
.header-menu { display: flex; flex-wrap: wrap; align-items: center; }
.header-menu ul { display: flex; flex-wrap: wrap; list-style: none; }
.header-menu li { padding: 5px 0; position: relative; transition: var(--duration); }
.header-menu li a { padding: 2px 16px; font-size: 18px; font-weight: 500; text-decoration: none; color: var(--white); border-radius: 25px; }
.header-menu li:hover > a,
.header-menu li.is-active a,
.header-menu li a:hover { background-color: rgba(0, 109, 127, 0.32); }
.header-menu li ul { position: absolute; top: 100%; left: 0; display: block; opacity: 0; visibility: hidden; width: max-content; border-radius: 10px; background-color: var(--white); overflow: hidden; transition: var(--duration); }
.header-menu li:hover ul { opacity: 1; visibility: visible; }
.header-menu li li { padding: 0; }
.header-menu li li a { padding: 10px 20px; display: block; font-size: 18px; color: var(--secondary); border-radius: 0; }
.header-menu li li a:hover { color: var(--white); background-color: var(--skobeloff); }
.header-menu li li:not(:last-child) { margin-right: 0; }
.header-menu .icon-arrow { display: none; }
.header-menu .js-close-menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; position: absolute; top: 10px; left: 20px; color: var(--white); transform: rotate(-180deg); border-bottom: 0; }
.header-menu .button { padding: 10px 24px; width: 100%; }

/* ### mobileMenu ### */
.mobileMenu { margin-top: -1px; position: absolute; top: 50%; right: 20px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 55px; background-color: var(--primary); transform: translateY(-50%); cursor: pointer; }
.mobileMenu span { position: relative; display: flex; align-items: center; justify-content: center; width: 25px; height: 3px; border-radius: 5px; background-color: var(--secondary); transition: var(--duration); }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; width: var(--width); height: 3px; border-radius: 5px; background-color: var(--secondary); transition: var(--duration); content: ''; }
.mobileMenu span:before { top: -8px; }
.mobileMenu span:after { bottom: -8px; }
.mobileMenu.is-active span { background: none; }
.mobileMenu.is-active span:before { top: auto; transform: rotate(45deg); }
.mobileMenu.is-active span:after { bottom: auto; transform: rotate(-45deg); }

/* ### foto-credit ###
 * Copyright-label rechtsonder op een foto, uit podtrips_foto_credit(). De
 * containers hieronder krijgen position: relative zodat het label binnen de
 * foto valt. Semi-transparant: leesbaar, maar niet dominant.
 * Muis: alleen bij hover — zie @media (hover: hover).
 * Touch: binnen een link altijd zichtbaar (een tik opent de link), elders
 * pas na een tik, een paar seconden lang — zie @media (hover: none) en
 * js/main.js (.is-credit). */
.foto-credit { padding: 3px 8px; position: absolute; right: 12px; bottom: 12px; z-index: 5; max-width: calc(100% - 24px); font-family: var(--font-family-base), sans-serif; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, 0.9); background-color: rgba(0, 0, 0, 0.35); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: var(--duration); }
.foto-credit.is-desktop { display: none; }
.is-speelt .foto-credit { visibility: hidden; }
.card-trips-photo,
.card-project-image,
.concept-photo,
.image-text-photo,
.cta-image,
.gallery-column a,
.download-tegel { position: relative; }
.hero-bg-image > .foto-credit { right: 24px; bottom: 24px; }
.hero-bg-media > .foto-credit { bottom: 72px; }
.download-video > .foto-credit { bottom: 56px; }

/* ### hero ### */
.hero { padding-top: 0px; padding-bottom: 30px; margin-right: 0px; margin-left: 0px; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; text-align: center; min-height: 310px; }
.hero h1 { color: var(--white); margin-bottom: 10px; }
.hero-block { position: relative; z-index: 3; width: var(--width); }
.hero-items { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.hero-button { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hero-bg-image {  position: relative; top: 0; left: 0; z-index: 2; max-width: 1760px; width: var(--width); height: var(--height); border-radius: 0 0 24px 24px; overflow: hidden; margin: 0 auto; }
.hero-bg-image img { width: var(--width); height: calc(100vh - 160px); object-fit: cover; }
.hero:after { display: none; position: absolute; bottom: 0; left: -80px; z-index: -1; width: calc(100% + 160px); height: 80px; background-color: var(--grey); content: ''; pointer-events: none; }
.hero:before { display: none; position: absolute; right: -30px; bottom: -93px; z-index: 1; width: 295px; height: 372px; background: url('../images/komma.png') no-repeat; content: ''; pointer-events: none; }
/* Breedte en hoogte moeten hier expliciet staan. Een absoluut geplaatst
 * <video> of <iframe> rekt NIET uit door top/right/bottom/left op 0 te zetten:
 * dat geldt niet voor replaced elements, die houden hun eigen formaat en de
 * browser verdeelt de ruimte eromheen. Zonder deze twee waardes staat er een
 * video van 1920x1080 in een vlak van 1760x1151 en heeft object-fit niets te
 * croppen. */
.hero-bg-media video,
.hero-bg-media iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; width: var(--width); height: var(--height); border: 0; opacity: 0; object-fit: cover; transition: opacity 0.8s ease; }
/* Een iframe trekt zich niets aan van object-fit: die houdt koppig 16:9 aan en
 * laat de foto er onderuit piepen. js/main.js meet het vlak op en zet daarom
 * breedte en hoogte in pixels — groot genoeg om te vullen, de rest snijdt de
 * overflow: hidden hierboven weg. Deze regel is alleen het vertrekpunt. */
.hero-bg-media iframe { top: 50%; left: 50%; right: auto; bottom: auto; width: var(--width); height: var(--height); transform: translate(-50%, -50%); }
/* Een achtergrondvideo is decor: geen klikken, geen YouTube-overlay bij hover.
 * De muis komt de iframe niet binnen, dus tekent YouTube zijn titelbalk en logo
 * niet. Het glasplaatje eronder vangt af wat er ooit langs mocht komen —
 * modestbranding werkt sinds 2023 niet meer, dus daar rekenen we niet op. */
.hero-bg-media.is-auto video,
.hero-bg-media.is-auto iframe { pointer-events: none; }
.hero-bg-media.is-auto:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; content: ''; }
/* display: contents laat de <img> binnen de <picture> gewoon de regels van
 * .hero-bg-image img pakken — de picture zelf doet niet mee aan de layout. */
.hero-bg-image picture { display: contents; }
.hero-video-knoppen[hidden] { display: none; }
/* Eigen bediening voor een achtergrondvideo: alleen pauze en geluid. Zit boven
 * het glasplaatje van .is-auto:after, anders is er niets aan te klikken. */
.hero-video-knoppen { position: absolute; right: 24px; bottom: 24px; z-index: 4; display: flex; gap: 10px; }
.hero-video-knoppen button { padding: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background-color: var(--primary); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.24); cursor: pointer; transition: var(--duration); }
.hero-video-knoppen button:hover { background-color: var(--yellow); }
.hero-video-knoppen svg { width: 16px; height: 16px; color: var(--secondary); fill: var(--secondary); }
.hero-bg-media .icoon-play,
.hero-bg-media .icoon-geluid-aan { display: none; }
.hero-bg-media.is-gepauzeerd .icoon-play,
.hero-bg-media.is-geluid .icoon-geluid-aan { display: block; }
.hero-bg-media.is-gepauzeerd .icoon-pauze,
.hero-bg-media.is-geluid .icoon-geluid-uit { display: none; }
.hero-bg-media:has(.hero-vlak) { background-color: var(--secondary); }
.hero-bg-media.is-speelt video,
.hero-bg-media.is-speelt iframe { opacity: 1; }
/* Introscherm, alleen op de homepage met een autoplay-video in de hero (zie
 * podtrips_hero_media()). Ligt over de banner, ook over de knoppen; de pagina
 * zelf blijft scrollbaar. Het logo popt op, en zodra de video beeld heeft
 * vervaagt het geheel — js/main.js zet .is-weg. */
.intro-scherm { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background-color: var(--secondary); transition: opacity 0.8s ease, visibility 0.8s ease; }
.intro-scherm.is-weg { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-scherm-logo { width: 200px; max-width: 60vw; animation: intro-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }
.hero .hero-bg-image .intro-scherm-logo img { display: block; width: var(--width); height: auto; object-fit: contain; }
@keyframes intro-pop {
	0% { opacity: 0; transform: scale(0.6); }
	100% { opacity: 1; transform: scale(1); }
}
.hero .stripe-lead { font-size: 12px; }
.hero .stripe-lead span { font-size: 10px; }

/* ### hero inner ### */
.hero.inner { margin-bottom: 50px; flex-direction: column-reverse; text-align: left; }
.hero.inner:after { display: none; }
.hero.geen-balk:after { display: none; }
.hero.inner .hero-bg-image { position: absolute; }
.hero.inner .hero-bg-image img { height: var(--height); }
.hero-text { position: absolute; bottom: 20px; z-index: 3; width: 100%; }


/* ### hero ### */
.hero.is-alt { padding-top: 0px; padding-bottom: 0px; margin-right: 0px; margin-left: 0px; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; text-align: center; min-height: 310px; }
.hero.is-alt h1 { color: var(--white); margin-bottom: 10px; }
.hero.is-alt .hero-block { position: relative; z-index: 3; width: var(--width); display: none; }
.hero.is-alt .hero-items { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.hero.is-alt .hero-button { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hero.is-alt .hero-bg-image {  position: relative; top: 0; left: 0; z-index: 2; max-width: 1760px; width: var(--width); height: var(--height); border-radius: 0; overflow: hidden; margin: 0 auto; }
.hero.is-alt .hero-bg-image img { width: var(--width); height:calc(100vh - 120px); object-fit: cover; }
.hero.is-alt .hero:after { position: absolute; bottom: 0; left: -80px; z-index: -1; width: calc(100% + 160px); height: 80px; background-color: var(--grey); content: ''; pointer-events: none; }
.hero.is-alt:before { position: absolute; right: -30px; bottom: -133px; z-index: 1; width: 295px; height: 372px; background: url('../images/komma.png') no-repeat; content: ''; pointer-events: none; }
.hero.is-alt .stripe-lead { font-size: 12px; }
.hero.is-alt .stripe-lead span { font-size: 10px; }


.hero.is-alt { min-height: 390px; }
.hero.is-alt:before { display: none!important;}


/* ### trips ### */
.trips { margin-bottom: 50px; padding-top: 25px; padding-bottom: 55px; background-color: var(--grey); }
.trips h2 { margin-bottom: 12px; }
.trips-block { position: relative; }
.trips .swiper { overflow: visible; margin-bottom: 30px; }
.trips .swiper-slide { width: 417px; height: auto; }
.trips-bottom { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.trips-nav { display: flex; gap: 6px; }
.trips-nav button { padding: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 40px; font-size: 12px; color: var(--secondary); border: solid 1px var(--secondary); background-color: var(--white); cursor: pointer; transition: var(--duration); }
.trips-prev { border-radius: 20px 0 0 20px; }
.trips-prev i { display: inline-block; transform: rotate(180deg); }
.trips-next { border-radius: 0 20px 20px 0; }
.trips-nav button:focus,
.trips-nav button:hover { border-color: var(--primary); background-color: var(--primary); }
.trips-nav .swiper-button-disabled { opacity: 0.4; pointer-events: none; }

/* ### concept ### */
.concept { margin-right: 15px; margin-bottom: 50px; margin-top: 50px; margin-left: 15px; border-radius: 24px; }
.concept-bg { max-width: 1760px; width: var(--width); height: var(--height); margin: 0 auto; border-radius: 24px; background: linear-gradient(to right, rgba(0, 62, 76, 1) 0%, rgba(0, 109, 127, 1) 100%); }
.concept h2 { margin-bottom: 13px; color: var(--white); }
.concept .card-intro { color: var(--white); }
.concept-block { padding-top: 50px; padding-bottom: 50px; position: relative; }
.concept-holder { margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.concept-photo { display: flex; align-self: flex-start; width: var(--width); border-radius: 24px; overflow: hidden; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); }
.concept-photo img { width: var(--width); }
.concept-info { color: var(--white); }
.concept-info h4 { margin-bottom: 7px; color: var(--white); }
.concept-items { display: flex; flex-wrap: wrap; }
.concept-icon { margin-right: 20px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 20px; color: var(--primary); border: solid 1px var(--primary); border-radius: 100%; }
.concept-text { padding-top: 1px; flex: 1; color: var(--white); }
.concept-text p:last-of-type { margin-bottom: 0; }
.concept-items:not(:last-child) { margin-bottom: 30px; }
.concept-bottom { display: flex; justify-content: center; }

/* ### reviews ### */
.reviews { position: relative; z-index: 1; background-color: var(--info); border-radius: 0 105px 0 0; overflow: hidden; }
.reviews h2 { margin-bottom: 11px; }
.reviews-block { padding-top: 70px; padding-bottom: 50px; position: relative; }
.reviews-bottom { display: flex; justify-content: center; }
.reviews .swiper { overflow: visible; margin-bottom: 30px; }
.reviews .swiper-slide { width: 417px; height: auto; } /* alle kaarten even hoog, ook als naam/functie over meer regels loopt */
.reviews.is-alt { margin-bottom: 140px; }
.reviews-svg { z-index: 1; position: absolute; top: -5px; right: -9px; width: 103px; height: 103px; transform: rotate(-7deg) }
.image-text.reverse:after,
.reviews:after { content: ""; position: absolute; top: -24px; right: 70px; width: 180px; height: 250px; background: radial-gradient(ellipse at top right, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.07) 35%, rgba(0, 0, 0, 0.03) 58%, rgba(0, 0, 0, 0) 75%); filter: blur(18px); transform: translate(18px, 18px) scaleX(0.9) scaleY(0.5) rotate(-28deg); transform-origin: top right; pointer-events: none; }

/* ### .partner ### */
.partner { margin-bottom: 50px; padding-top: 29px; padding-bottom: 28px; background-color: var(--secondary); }
.partner h5 { margin-bottom: 25px; text-align: center; }
.partner:not(.is-alt) h5 { color: var(--white); }
.partner-block { padding-top: 38px; border-top: solid 1px rgba(0, 62, 76, 0.1); }
.partner .swiper { overflow: visible; }
.partner .swiper-wrapper { align-items: center; transition-timing-function: linear !important; }
.partner .swiper-slide { width: 170px; }
.partner img { min-height: 43px; }
.partner.is-alt { margin-bottom: 160px; padding-top: 0; padding-bottom: 50px; background-color: var(--info); }

/* ### image-text ### */
.image-text { margin-right: 15px; margin-bottom: 70px; margin-left: 15px; }
.image-text-bg { max-width: 1760px; width: var(--width); height: var(--height); margin: 0 auto; border-radius: 24px; background: linear-gradient(to right, rgba(0, 62, 76, 1) 0%, rgba(0, 109, 127, 1) 100%); }
.image-text h2 { margin-bottom: 13px; color: var(--white); }
.image-text .card-intro { color: var(--white); }
.image-text-block { padding-top: 50px; padding-bottom: 50px; display: flex; flex-direction: column-reverse; flex-wrap: wrap; align-items: center; }
.image-text-left { flex: 1; color: var(--white); max-width: 1760px; width: var(--width); }
.image-text-left p { margin-bottom: 25px; }
.image-text-photo { margin-bottom: 40px; display: flex; align-self: flex-start; width: var(--width); border-radius: 24px; overflow: hidden; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); }
.image-text-photo img { width: var(--width); }
.image-text.reverse { margin: 0 0 130px 0; position: relative; z-index: 1; background: var(--info); border-radius: 0 105px 0 0; overflow: hidden; }
.image-text.reverse h2 { color: var(--secondary); }
.image-text.reverse .image-text-block { padding-top: 80px; margin-bottom: 0; }
.image-text.reverse .image-text-left { color: var(--secondary); }
.image-text.reverse.inner { margin-bottom: 50px; }
.image-text.reverse.inner2 { margin-bottom: 50px; border-radius: 105px 0 0; }
.image-text.reverse.inner2 .reviews-svg { top: -11px; right: unset; left: -3px; transform: rotate(7deg) scaleX(-1); }
.image-text.reverse.inner2:after { top: -40px; right: unset; left: -200px; width: 220px; height: 340px; transform: translate(18px, 18px) scaleX(0.9) scaleY(0.5) rotate(-35deg); }


/* ### cta ### */
.cta { margin-right: 15px; margin-bottom: 50px; margin-left: 15px; }
.cta-bg { max-width: 1760px; width: var(--width); border-radius: 24px; margin: 0 auto; background-color: var(--primary); }
.cta h2 { margin-bottom: 10px; }
.cta h2 strong { color: var(--white); }
.cta-block { padding-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; }
.cta-image { margin: -80px auto 40px; display: flex; align-self: flex-start; width: 100%; max-width: 230px; }
.cta-intro { color: var(--white); }
.cta-bottom { display: flex; flex-wrap: wrap; gap: 11px; }
.cta-app { padding: 10px 24px; display: flex; align-items: center; width: 100%; max-width: 176px; min-height: 68px; text-decoration: var(--line-decoration-none); color: var(--secondary); border-radius: 24px; background-color: var(--white); }
.cta-icon { margin-right: 14px; }
.cta-icon img { min-height: 29px; }
.cta-lead { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.4; }
.cta-lead span { display: block; font-size: 10px; font-weight: 500; }

/* ### support ### */
.support { padding-top: 30px; padding-bottom: 60px; background-color: var(--grey); }
.support h1 { margin-bottom: 7px; }
.support-intro { margin-bottom: 40px; }
.support-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.support-right { position: relative; z-index: 2; width: var(--width); }
.support-point { margin-bottom: 20px; padding: 23px 30px 21px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-radius: 24px; background-color: var(--white); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); }
.support-address { display: flex; flex-direction: column; }
.support-point address { margin-bottom: 29px; display: block; font-family: var(--font-family-heading), sans-serif; font-size: 22px; font-style: normal; line-height: 1.4; text-transform: uppercase; }
.support-point img { width: 50px; }
.support-link { margin-top: auto; font-family: var(--font-family-heading), sans-serif; font-size: 18px; font-weight: 500; text-transform: uppercase; text-decoration: var(--line-decoration-none); color: var(--primary); }
.support-link span { text-decoration: underline; transition: var(--duration); }
.support-link i { margin-left: 6px; font-size: 17px; }
.support-link:focus,
.support-link:hover { color: var(--secondary); }
.support-link:focus span,
.support-link:hover span { text-decoration: var(--line-decoration-none); }
.support-category { margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 6px 16px; width: var(--width); }
.support-tag { padding: 7px 8px; display: flex; align-items: center; border: solid 2px var(--primary); border-radius: 16px; background-color: var(--white); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); text-decoration: var(--line-decoration-none); color: var(--secondary); }
.support-tag img { margin-right: 9px; width: 24px; height: 24px; object-fit: contain; }
.support-tag:focus,
.support-tag:hover { background-color: var(--primary); }
.support-voice { display: flex; flex-wrap: wrap; gap: 10px; width: var(--width); }
.support-voice a { padding: 2px 14px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); color: var(--white); border: 0; border-radius: 10px; background-color: var(--skobeloff); text-decoration: var(--line-decoration-none); }
.support-voice a:focus,
.support-voice a:hover { background-color: var(--secondary); }


/* ### download ### */
.download { margin-bottom: 60px; padding-top: 60px; padding-bottom: 0px; background: linear-gradient(to right, rgba(0, 62, 76, 1) 0%, rgba(0, 109, 127, 1) 100%); position: relative; }
.download h2 { margin-bottom: 13px; color: var(--white); }
.download-intro { margin-bottom: 50px; width: var(--width); color: var(--white); }
.download-info { margin-bottom: 15px; display: flex; flex-wrap: wrap; align-items: stretch; border-radius: 12px; background-color: var(--stone); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); overflow: hidden; color: var(--white); text-decoration: var(--line-decoration-none); }
.download-icon { display: flex; align-items: center; justify-content: center; width: 66px; background-color: var(--skobeloff); }
.download-text { padding: 10px 22px; flex: 1; font-size: 14px; line-height: 1.35; }
.download-text strong { font-size: 18px; font-weight: 700; }
.download-text p:last-of-type { margin-bottom: 0; }
.download-button { margin-top: 27px; }
.download-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; align-items: center; width: var(--width); position: relative; z-index: 2; }
.download-tegel { margin-bottom: 15px; display: flex; width: var(--width); border-radius: 24px; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); overflow: hidden; }
.download-tegel > * { flex: 1; min-width: 0; }
.download-tegel img { margin-bottom: 0; display: block; width: var(--width); height: var(--height); object-fit: cover; }
.download-tegel .download-video { margin-bottom: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto !important; } /* !important wint van de inline poster-verhouding: de wrapper bepaalt het formaat */
.download-photo:nth-child(1) > .download-tegel:nth-child(1) { aspect-ratio: 308 / 226; }
.download-photo:nth-child(1) > .download-tegel:nth-child(2) { aspect-ratio: 308 / 362; }
.download-photo:nth-child(1) > .download-tegel:nth-child(3) { aspect-ratio: 308 / 214; }
.download-photo:nth-child(2) > .download-tegel:nth-child(1) { aspect-ratio: 308 / 427; }
.download-photo:nth-child(2) > .download-tegel:nth-child(2) { aspect-ratio: 308 / 460; }
.download-video { margin-bottom: 15px; position: relative; width: var(--width); border-radius: 24px; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); background-color: var(--secondary); overflow: hidden; }
.download-video img,
.download-video video,
.download-video iframe { margin-bottom: 0; display: block; width: var(--width); height: var(--height); border: 0; border-radius: 0; object-fit: cover; }
/* Zelfde bediening als in de hero, alleen kleiner — een tegel is geen hero. */
.download-video-knoppen { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 8px; }
.download-video-knoppen button { padding: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background-color: var(--primary); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.24); cursor: pointer; transition: var(--duration); }
.download-video-knoppen button:hover { background-color: var(--yellow); }
.download-video-knoppen svg { width: 14px; height: 14px; color: var(--secondary); fill: var(--secondary); }
.download-video .icoon-play,
.download-video .icoon-geluid-aan { display: none; }
.download-video.is-gepauzeerd .icoon-play,
.download-video.is-geluid .icoon-geluid-aan { display: block; }
.download-video.is-gepauzeerd .icoon-pauze,
.download-video.is-geluid .icoon-geluid-uit { display: none; }
.download:after{ content: ''; width: 100%; height: 50px; background-color: #ffffff; position: absolute; left:0; bottom:0; z-index: 1; }



/* ### place ### */
.place { margin-bottom: 60px; }
.place h2 { margin-bottom: 12px; }
.place .card-intro { margin-bottom: 20px; }
.place .swiper { overflow: visible; }
.place-button { margin-top: 28px; display: flex; justify-content: center; }

/* ### card-intro ### */
.card-intro { margin-bottom: 19px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.card-intro p:last-of-type { margin-bottom: 0; }

/* ### .card-trips ### */
.card-trips { display: block; width: var(--width); text-decoration: var(--line-decoration-none); color: var(--secondary); border-radius: 24px; background-color: var(--white); transition: var(--duration); overflow: hidden; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); height: 100%; }
.card-trips-photo { width: var(--width); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); overflow: hidden; height: 240px; }
.card-trips-photo img { width: var(--width); height: var(--height); object-fit: cover; transition: var(--duration); }
.card-trips-photo span { padding: 2px 31px 1px; position: absolute; top: 20px; left: 20px; display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-family-heading), sans-serif; font-size: 16px; text-transform: uppercase; border-radius: 12px; background-color: var(--primary); }
.card-trips-info { padding: 25px 20px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; height: calc(100% - 240px) }
.card-trips-info span { position: absolute; top: 30px; right: 20px; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; font-size: 8px; border-radius: 55px; background-color: var(--primary); transition: var(--duration); }
.card-trips-info strong { margin-bottom: 15px; display: block; font-family: var(--font-family-heading), sans-serif; font-size: 30px; font-weight: 500; line-height: var(--line-height-heading); text-transform: uppercase; }
.card-trips-bottom { padding-top: 22px; display: flex; flex-wrap: wrap; border-top: solid 1px rgba(0, 62, 76, 0.1); margin-top: auto; }
.card-trips-lead { padding-left: 26px; position: relative; font-size: 16px; }
.card-trips-lead:not(:last-child) { margin-right: 20px; }
.card-trips-lead:before { position: absolute; top: 5px; left: 0; width: 19px; height: 19px; background-image: var(--icoon, url('../images/trip.svg')); background-repeat: no-repeat; background-size: 100% 100%; content: ''; }
.card-trips:focus .card-trips-info span,
.card-trips:hover .card-trips-info span { background-color: var(--yellow); }
.card-trips:hover .card-trips-photo img { transform: scale(1.05); }
/* Icoon van de categorie in het label. Losmaken van de regels voor de foto
 * hierboven: geen volle breedte, geen zoom bij hover. */
.card-trips-photo span img,
.card-trips:hover .card-trips-photo span img { width: 20px; height: 20px; object-fit: contain; transform: none; }
/* Met icoon minder ruimte links, anders zweeft het icoon midden in het label. */
.card-trips-photo span:has(img) { padding-left: 12px; }

/* ### card-reviews ### */
.card-reviews { padding: 20px 25px; position: relative; display: flex; flex-direction: column; height: var(--height); border-radius: 24px; background-color: var(--white); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); overflow: hidden; }
.card-reviews:after { position: absolute; top: -84px; right: -68px; width: 198px; height: 242px; background: url('../images/komma.png') no-repeat; background-size: 100% 100%; content: ''; pointer-events: none; }
.card-reviews-lead { margin-bottom: 14px; display: flex; align-items: center; }
.card-reviews-lead img { margin-right: 10px; width: 28px; }
.card-reviews-lead span { font-size: 16px; font-weight: 500; color: var(--primary); }
.card-reviews-text .scroll-tekst { margin-right: -15px; margin-bottom: 21px; }
.card-reviews-text p { margin-bottom: 0; padding-right: 25px; font-style: italic; line-height: 1.75; height: 110px; overflow: hidden auto; }
/* Geen margin-top: auto: de lijn staat dan op elke kaart op dezelfde hoogte en
 * de extra ruimte van een langere naam/functie valt onderaan. */
.card-reviews-name { padding-top: 25px; line-height: 1.5; border-top: solid 1px rgba(0, 62, 76, 0.1); min-height: 74px; }
.card-reviews-name strong { display: block; font-weight: 500; }

/* ### card-place ### */
/* Vaste hoogte zodat alle kaarten gelijk zijn ongeacht de tekstlengte. De
 * kaart is een flexkolom: nummer en titel houden hun hoogte, de tekst krijgt
 * de rest en scrollt als hij niet past. min-height: 0 is nodig omdat een
 * flex-item anders niet kleiner wordt dan zijn inhoud en dus niet scrollt. */
.card-place { padding: 20px 30px; height: 280px; display: flex; flex-direction: column; color: var(--secondary); border-radius: 24px; background-color: var(--white); box-shadow: 0 0 16px rgba(0, 0, 0, 0.08); }
.card-place-number { margin-bottom: 16px; font-family: var(--font-family-heading), sans-serif; font-size: 48px; font-weight: 400; line-height: var(--line-height-heading); color: var(--primary); }
.card-place strong { margin-bottom: 10px; display: block; font-family: var(--font-family-heading), sans-serif; font-size: 26px; font-weight: 500; line-height: var(--line-height-heading); }
/* overflow: hidden auto i.p.v. alleen overflow-y — zet je één as op auto en
 * laat je de andere op visible staan, dan rekent de browser die visible om
 * naar auto en krijg je er een horizontale scrollbalk bij. De padding-right
 * houdt de tekst van de scrollbalk af. */
.card-place p { flex: 1; min-height: 0; padding-right: 10px; overflow: hidden auto; }
.card-place p:last-of-type { margin-bottom: 0; }

/* ### stripe ### */
.stripe { padding: 8px 10px; position: fixed; bottom: 0; left: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; width: var(--width); text-align: center; background-color: var(--skobeloff); flex-direction: column; }
.stripe h3 { margin-bottom: 0; font-size: 30px; color: var(--white); }
.stripe-trips { display: flex; flex-wrap: wrap; }
.stripe-small { padding-left: 26px; position: relative; font-size: 16px; color: var(--white); }
.stripe-small:before { position: absolute; top: 5px; left: 0; width: 19px; height: 19px; background-image: var(--icoon, url('../images/trip.svg')); background-repeat: no-repeat; background-size: 100% 100%; content: ''; filter: brightness(0) invert(1); }
.stripe-small:not(:last-child) { margin-right: 20px; }
.stripe-right { display: flex; gap: 10px; }
.stripe-app { padding: 10px 18px; display: flex; align-items: center; text-decoration: var(--line-decoration-none); color: var(--white); border-radius: 15px; background-color: var(--primary); text-align: start; }
.stripe-icon { margin-right: 10px; }
.stripe-icon img { width: 20px; filter: brightness(0) invert(1); }
.stripe-lead { flex: 1; font-size: 10px; font-weight: 600; line-height: 1.4; }
.stripe-lead span { display: block; font-size: 8px; font-weight: 500; }
.stripe-app:focus,
.stripe-app:hover { background-color: var(--yellow); }
.stripe .card-trips-bottom { padding-top: 0; }

/* ### footer ### */
.footer { padding-top: 50px; padding-bottom: 20px; font-size: var(--font-size-base); color: rgba(255, 255, 255, 0.6); background-color: var(--secondary); }
.footer ul { list-style: none; }
.footer-block { margin-bottom: 30px; }
.footer-title { margin-bottom: 10px; font-family: var(--font-family-heading), sans-serif; font-size: 24px; font-weight: 500; line-height: 1.6; text-transform: uppercase; color: var(--white); }
.footer-info { margin-bottom: 20px; width: var(--width); }
.footer-info p { margin-bottom: 4px; }
.footer-info li a { padding-left: 26px; position: relative; text-decoration: var(--line-decoration-none); color: rgba(255, 255, 255, 0.6); }
.footer-info li a i { position: absolute; top: 6px; left: -2px; }
.footer-info li a i.icon-envelope { top: 9px; font-size: 14px; }
.footer-info li a:focus,
.footer-info li a:hover { color: var(--white); }
.footer-image { margin-bottom: 15px; width: 60px; }
.footer-image img { width: var(--width); }
.footer-info-text { flex: 1; }
.footer-menu { margin-bottom: 20px; width: var(--width); }
.footer-menu li a { text-decoration: var(--line-decoration-none); color: rgba(255, 255, 255, 0.6); }
.footer-menu li a:focus,
.footer-menu li a:hover { color: var(--white); }
.footer-newsletter { margin-bottom: 24px; padding-top: 8px; padding-bottom: 15px; border-top: solid 1px rgba(255, 255, 255, 0.6); border-bottom: solid 1px rgba(255, 255, 255, 0.6); }
.footer-newsletter span { font-family: var(--font-family-heading), sans-serif; font-size: 24px; font-weight: 500; text-transform: uppercase; color: var(--white); }
/* Gravity Forms — GF's eigen theme- en legacy-CSS staat uit via filters in functions.php.
 * Daardoor moeten we zelf verbergen wat die stylesheets normaal wegwerken: het
 * honeypot spam-veld, verborgen velden en screen-reader tekst. Niet cosmetisch —
 * een zichtbaar honeypot-veld wordt door bezoekers ingevuld en dan ziet GF de
 * inzending als spam. Buiten .footer-newsletter gezet zodat het voor elk
 * formulier op de site geldt. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper li.gform_validation_container,
.gform_wrapper .gform_hidden,
.gform_wrapper .gf_invisible { display: none !important; position: absolute !important; left: -9999px; }
.gform_wrapper .screen-reader-text { position: absolute !important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; word-wrap: normal; }

/* Gravity Forms wrappers plat maken */
.footer-newsletter .gform_wrapper { margin: 0; }
.footer-newsletter .gform_heading { display: none; }
.footer-newsletter .gfield_label { display: none; }
.footer-newsletter .gform_fields { margin: 0; padding: 0; list-style: none; }
.footer-newsletter .gform_fields li { margin: 0; padding: 0; }
.footer-newsletter .gfield { margin-bottom: 10px; }
.footer-newsletter .gform_footer { margin: 0; padding: 0; }
/* De submit is bij GF een <input type="submit">, in het ontwerp een <button> — vandaar de :not() */
.footer-newsletter input:not([type="submit"]) { margin-bottom: 10px; width: var(--width); border: solid 1px rgba(255, 255, 255, 0.6); background-color: transparent; }
.footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.6); }
.footer-newsletter input[type="submit"] { padding: 10px 25px; display: inline-flex; align-items: center; justify-content: center; width: var(--width); min-height: 55px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: 500; text-decoration: var(--line-decoration-none); color: var(--secondary); border: 0; border-radius: 75px; background-color: var(--primary); transition: var(--duration); cursor: pointer; }
.footer-newsletter input[type="submit"]:focus,
.footer-newsletter input[type="submit"]:hover { background-color: var(--yellow); }
.footer-newsletter .gfield_validation_message,
.footer-newsletter .validation_message { margin-top: 4px; font-size: 14px; color: var(--white); }
.footer-newsletter .gform_validation_errors { margin-bottom: 12px; padding: 8px 16px; font-size: 14px; color: var(--white); border: solid 1px rgba(255, 255, 255, 0.6); border-radius: 10px; }
.footer-newsletter .gform_validation_errors h2 { margin-bottom: 0; font-size: 16px; color: var(--white); }
.footer-newsletter .gform_confirmation_message { color: var(--white); }
.footer-copyright { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; font-size: 14px; }
.footer-copyright-link { display: flex; flex-wrap: wrap; justify-content: center; }
.footer-copyright-link li { position: relative; }
.footer-copyright-link li a { text-decoration: var(--line-decoration-none); color: rgba(255, 255, 255, 0.6); }
.footer-copyright-link li:not(:last-child):after { margin: 0 13px; display: inline-block; width: 1px; height: 12px; vertical-align: middle; background-color: rgba(255, 255, 255, 0.6); content: ''; }
.footer-copyright-link li a:focus,
.footer-copyright-link li a:hover { color: var(--white); }
.footer-social-media { display: flex; flex-wrap: wrap; }
.footer-social-media li a { font-size: 26px; text-decoration: var(--line-decoration-none); color: rgba(255, 255, 255, 0.6); }
.footer-social-media li a:focus,
.footer-social-media li a:hover { color: var(--white); }
.footer-social-media li:not(:last-child) { margin-right: 21px; }

/* ### discover ### */
.discover { margin-bottom: 40px; }
.discover-block { position: relative; }
.discover-tag { padding: 7px 8px; display: flex; align-items: center; text-decoration: var(--line-decoration-none); color: var(--secondary); border: solid 2px var(--primary); border-radius: 16px; background-color: var(--white); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); }
.discover-tag img { margin-right: 9px; width: 24px; }
.discover-tag:focus,
.discover-tag:hover { background-color: var(--primary); }
.discover-wrap { margin-bottom: 41px; padding: 0 54px; position: relative; display: flex; align-items: center; }
.discover-items { margin-bottom: 35px; }
.discover-bottom { display: flex; flex-wrap: wrap; justify-content: center; }
.discover .swiper-slide { width: auto; }
.discover .swiper-navigation-icon { display: none; }
.discover .swiper-button-next,
.discover .swiper-button-prev { margin: 0; top: 0; left: 0; width: 48px; height: 48px; color: var(--skobeloff); border: solid 2px var(--primary); border-radius: 16px; background-color: var(--white); transition: var(--duration); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); }
.discover .swiper-button-prev { transform: rotate(180deg); }
.discover .swiper-button-next { right: 0; left: unset; }
.discover .swiper-button-next:hover,
.discover .swiper-button-prev:hover { background-color: var(--primary); }

/* ### card-project ### */
.card-project { display: flex; flex-wrap: wrap; align-items: center; }
.card-project h3 { margin-bottom: 15px; }
.card-project-image { margin-bottom: 30px; display: flex; align-self: flex-start; width: var(--width); border-radius: 24px; overflow: hidden; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); }
.card-project-image img { width: 100%; height: 100%; object-fit: cover; }
.card-project-intro { padding: 35px 20px; position: relative; z-index: 1; flex: 1; line-height: 1.75; border-radius: 24px 70px 24px 24px; background-color: var(--info); overflow: hidden; }
.card-project-svg { position: absolute; top: 0; right: -17px; z-index: 1; width: 80px; height: 60px; transform: rotate(1deg); pointer-events: none; }
.card-project-intro:after { position: absolute; top: -45px; right: 50px; width: 100px; height: 230px; background: radial-gradient(ellipse at top right, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.03) 58%, rgba(0, 0, 0, 0) 75%); transform: translate(18px, 18px) scaleX(0.9) scaleY(0.5) rotate(-18deg); content: ''; pointer-events: none; filter: blur(18px); transform-origin: top right; }

/* Filter + om-en-om kleur (niet in designer HTML — toegevoegd voor het projecten-filter) */
.discover-items { display: grid; row-gap: 30px; }
.discover-tag.is-active { background-color: var(--primary); }
.card-project[hidden] { display: none; }
.card-project.is-dark .card-project-intro { color: var(--white); background-color: var(--secondary); }
.card-project.is-dark h3 { color: var(--white); }
.card-project.is-dark .card-project-svg path { fill: var(--primary); }

/* ### intro ### */
.intro { margin-bottom: 50px; }
.intro h5 { font-family: var(--font-family-base), sans-serif; font-size: 18px; font-weight: 500; line-height: 1.73; }
.intro-right { color: var(--grey-100); }
.intro h2 { margin-bottom: 12px; }
.intro .button { margin-top: 10px; }

/* ### videos ### */
.videos { margin-bottom: 50px; }
.videos-image { margin: 0 auto; position: relative; max-width: 1440px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); }
.videos-image img { width: 100%; height: 100%; max-height: 700px; object-fit: cover; }
/* De video draait via de hero-media (podtrips_hero_media). Die regels zijn
 * gemaakt voor een schermvullende hero; hier volgt de hoogte de afbeelding en
 * zorgt .videos-image voor de afronding. */
.videos-image .hero-bg-image { max-width: none; border-radius: 0; }
.videos-image .hero-bg-image img { display: block; height: auto; max-height: 700px; aspect-ratio: 16 / 9; }
.videos .card-intro { max-width: 1440px; margin-right: auto; margin-left: auto; }
.videos-play { padding-left: 5px; position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; font-size: 20px; text-decoration: var(--line-decoration-none); color: var(--primary); border-radius: 100%; background-color: var(--white); transform: translate(-50%, -50%); transition: var(--duration); }
.videos-play:focus,
.videos-play:hover { color: var(--white); background-color: var(--skobeloff); }
.videos-bestand.lity-hide { display: none; }
.videos-bestand video { display: block; width: 90vw; max-width: 1280px; max-height: 85vh; }

/* ### approach ### */
.approach { margin-top: 50px; margin-bottom: 50px; }
.approach h2 { margin-bottom: 12px; }
.approach .card-project-intro { margin-top: 15px; }
.approach .card-project-intro .button { margin-top: 10px; }

/* ### tab ### */
.tab-menu { margin-bottom: 40px; }
.tab-menu ul { list-style: none; }
.tab-menu li { margin-bottom: 10px; }
.tab-menu li a { padding: 8px 21px; width: 100%; text-align: center; text-decoration: var(--line-decoration-none); color: var(--secondary); border: 2px solid var(--primary); border-radius: 16px; }
.tab-menu li a:focus,
.tab-menu li a:hover { font-weight: 500; background-color: var(--primary); }
.tab-menu li a.active { font-weight: 500; background-color: var(--primary); }
.tab-content { display: none; }
/* Schuif-in na een veeg op mobiel, zie de tabs in js/main.js. */
.tab-content.is-van-rechts { animation: tab-van-rechts 0.3s ease-out; }
.tab-content.is-van-links { animation: tab-van-links 0.3s ease-out; }
@keyframes tab-van-rechts { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes tab-van-links { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* ### gallery ### */
.gallery { margin-bottom: 50px; }
.gallery h2 { margin-bottom: 13px; }
.gallery .card-intro { margin-bottom: 30px; }
.gallery-holder { display: grid; grid-template-columns: repeat(1, 1fr); align-items: center; }
.gallery-column a { margin-bottom: 10px; display: block; }
.gallery-column img { width: var(--width); border-radius: 24px; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); }
.gallery-column img:not(:last-of-type) { margin-bottom: 15px; }
.gallery-column img { display: block; height: auto; aspect-ratio: 468 / 343; object-fit: cover; }
.gallery-column a.is-groot img { aspect-ratio: 468 / 550; }
.gallery-column.is-staand img { aspect-ratio: 468 / 673; }

/* ### travel ### */
.travel { margin-bottom: 150px; padding-top: 50px; padding-bottom: 50px; background-color: var(--grey); }
.travel h2 { margin-bottom: 12px; }
.travel-holder { margin-bottom: 50px; display: grid; grid-row-gap: 34px; grid-column-gap: 17px; grid-template-columns: repeat(1, 1fr); }
.travel-btn { display: flex; justify-content: center; }
.travel .card-trips { position: relative; }
/* Grijs blok als laatste op de pagina: direct tegen de footer, geen witte strook. */
.travel:last-child { margin-bottom: 0; }

/* ### trailer ###
 * Audioblok: embed-code van een podcasthost, of een eigen speler bij een
 * eigen MP3 (bediening in js/main.js onder TRAILER-SPELER). Mobiel toont de
 * golf de helft van de balkjes, vanaf 768px allemaal. Mobiel zijn balkjes en
 * tussenruimte 1px: met 2px is de golf minimaal 158px breed en schuift hij
 * onder de tijd door. */
.trailer { margin-bottom: 50px; }
.trailer-intro { margin-bottom: 30px; text-align: center; }
.trailer-intro h2 { margin-bottom: 12px; }
.trailer-intro p:last-of-type { margin-bottom: 0; }
.trailer-embed { margin: 0 auto; max-width: 900px; }
.trailer-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.trailer-speler { margin: 0 auto; padding: 15px; display: flex; gap: 15px; align-items: center; max-width: 900px; border-radius: 24px; background-color: var(--white); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); }
.trailer-speler-image { flex-shrink: 0; width: 64px; border-radius: 12px; overflow: hidden; }
.trailer-speler-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.trailer-speler-body { flex: 1; min-width: 0; }
.trailer-speler-naam { margin-bottom: 8px; display: block; font-family: var(--font-family-heading), sans-serif; font-size: 22px; font-weight: 400; line-height: var(--line-height-heading); text-transform: uppercase; color: var(--secondary); }
.trailer-speler-bediening { display: flex; gap: 12px; align-items: center; }
.trailer-play { padding: 0; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background-color: var(--secondary); cursor: pointer; transition: var(--duration); }
.trailer-play:focus-visible,
.trailer-play:hover { background-color: var(--skobeloff); }
.trailer-play svg { width: 16px; height: 16px; fill: var(--white); }
.trailer-play .icoon-pauze,
.trailer-speler.is-speelt .trailer-play .icoon-play { display: none; }
.trailer-speler.is-speelt .trailer-play .icoon-pauze { display: block; }
.trailer-golf { flex: 1; display: flex; gap: 1px; align-items: center; min-width: 0; height: 44px; cursor: pointer; }
.trailer-golf span { flex: 1; min-width: 1px; border-radius: 2px; background-color: #d9d9d9; transition: background-color 0.15s; pointer-events: none; }
.trailer-golf span:nth-child(2n) { display: none; }
.trailer-golf span.is-gespeeld { background-color: var(--primary); }
.trailer-golf:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.trailer-tijd { flex-shrink: 0; font-size: 13px; color: var(--grey-100); font-variant-numeric: tabular-nums; }
.trailer-button { margin-top: 30px; display: flex; justify-content: center; }
.trailer.is-links .trailer-intro { text-align: left; }
.trailer.is-links .trailer-embed,
.trailer.is-links .trailer-speler { margin-left: 0; }
.trailer.is-links .trailer-button { justify-content: flex-start; }

/* ### formulier ###
 * Geen designer-ontwerp: opgebouwd uit de bestaande stijl (card-intro,
 * .button, input-basis) en gescoped op .formulier. GF eigen CSS staat uit.
 * Veldbreedtes volgen de GF instelling per veld (gfield--width-*). */
.formulier { margin-bottom: 50px; }
.formulier h2 { margin-bottom: 13px; }
.formulier-form { padding: 60px 20px 30px; position: relative; z-index: 1; border-radius: 24px; background-color: var(--info); overflow: hidden; }
/* Groene variant (veld 'kleur'): donkere kaart, lichte teksten */
.formulier-form.is-dark { background-color: var(--secondary); }
.formulier-form.is-dark .gfield_label,
.formulier-form.is-dark legend.gfield_label,
.formulier-form.is-dark .gchoice label,
.formulier-form.is-dark .ginput_container_consent label,
.formulier-form.is-dark .gfield_description,
.formulier-form.is-dark .ginput_complex label,
.formulier-form.is-dark .gfield_required .gfield_required_text { color: var(--white); }
.formulier-form.is-dark .gfield_validation_message,
.formulier-form.is-dark .validation_message { color: #ff8a7a; }
.formulier .gform_heading { display: none; }
.formulier .gform_fields { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 20px; list-style: none; }
.formulier .gfield { margin: 0; padding: 0; grid-column: span 12; min-width: 0; border: 0; }
.formulier .gfield_label,
.formulier legend.gfield_label { margin-bottom: 8px; padding: 0; display: block; font-size: 16px; font-weight: 500; color: var(--secondary); }
.formulier .gfield_required { margin-left: 3px; color: var(--primary); }
.formulier .gfield_required .gfield_required_text { font-size: 12px; font-weight: 400; color: var(--grey-100); }
.formulier .gfield_description { margin-top: 6px; font-size: 14px; color: var(--grey-100); }
.formulier input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formulier select,
.formulier textarea { color: var(--secondary); border: solid 2px var(--white); transition: var(--duration); }
/* Losse velden: GF basis-CSS overschrijft de globale input-stijl (hoogte,
 * padding, radius), daarom hier expliciet en met !important. */
.formulier .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formulier .gform_wrapper select { padding: 16px 24px !important; min-height: 60px !important; font-size: var(--font-size-base) !important; line-height: 1.5 !important; border-radius: 20px !important; background-color: var(--white) !important; box-shadow: none !important; }
.formulier .gform_wrapper select { padding-right: 50px !important; }
.formulier .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formulier .gform_wrapper select,
.formulier .gform_wrapper textarea { border: solid 2px var(--white) !important; outline: none; }
.formulier .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.formulier .gform_wrapper select:focus,
.formulier .gform_wrapper textarea:focus { border-color: var(--primary) !important; }
.formulier .gform_wrapper .gfield_error input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formulier .gform_wrapper .gfield_error select,
.formulier .gform_wrapper .gfield_error textarea { border-color: #c0392b !important; }
.formulier .gform_wrapper textarea { padding: 16px 24px !important; font-size: var(--font-size-base) !important; border-radius: 20px !important; background-color: var(--white) !important; box-shadow: none !important; }
.formulier input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.formulier select:focus,
.formulier textarea:focus { border-color: var(--primary); }
.formulier textarea { border-radius: 24px; }
.formulier select { padding-right: 50px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003e4c' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 22px center; background-size: 12px 8px; cursor: pointer; }
.formulier input::placeholder,
.formulier textarea::placeholder { font-weight: 400; color: var(--grey-100); }
.formulier .gfield_checkbox,
.formulier .gfield_radio { display: flex; flex-direction: column; gap: 10px; }
.formulier .gchoice { display: flex; align-items: center; }
.formulier .gchoice label,
.formulier .ginput_container_consent label { margin: 0 0 0 10px !important; font-size: 16px; }
.formulier .ginput_container_consent { display: flex; align-items: flex-start; }
.formulier input[type="checkbox"],
.formulier input[type="radio"] { margin: 0; padding: 0; flex-shrink: 0; width: 20px; height: 20px; min-height: 0; accent-color: var(--secondary); cursor: pointer; }
.formulier .ginput_complex { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
.formulier .ginput_complex label { margin-top: 6px; font-size: 14px; color: var(--grey-100); }
.formulier .gform_footer,
.formulier .gform_page_footer { margin-top: 30px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.formulier .gform_footer input[type="submit"],
.formulier .gform_footer button,
.formulier .gform_page_footer input[type="button"],
.formulier .gform_page_footer input[type="submit"] { padding: 10px 25px !important; min-height: 55px !important; width: auto !important; font-family: var(--font-family-base), sans-serif !important; font-size: var(--font-size-base) !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--secondary) !important; border: 0 !important; border-radius: 20px !important; background-color: var(--primary) !important; box-shadow: none !important; transition: var(--duration); cursor: pointer; }
.formulier .gform_footer input[type="submit"]:hover,
.formulier .gform_footer input[type="submit"]:focus,
.formulier .gform_footer button:hover,
.formulier .gform_footer button:focus { background-color: var(--yellow) !important; }
.formulier .gform_ajax_spinner { width: 24px; height: 24px; }
.formulier .gfield_error input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.formulier .gfield_error select,
.formulier .gfield_error textarea { border-color: #c0392b; }
.formulier .gfield_validation_message,
.formulier .validation_message { margin-top: 6px; font-size: 14px; color: #c0392b; }
.formulier .gform_validation_errors { margin-bottom: 20px; padding: 12px 20px; border: solid 2px #c0392b; border-radius: 16px; background-color: var(--white); }
.formulier .gform_validation_errors h2 { margin: 0; font-family: var(--font-family-base), sans-serif; font-size: 16px; font-weight: 500; text-transform: none; color: #c0392b; }
.formulier .gform_confirmation_message { padding: 20px; font-size: 18px; font-weight: 500; border-radius: 24px; background-color: var(--white); }

/* ### facts ### */
.facts { margin-top: 50px; margin-bottom: 55px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.facts h2 { margin-bottom: 15px; line-height: 1; }
.facts-intro { width: var(--width); }
.facts-right { display: grid; flex: 1; grid-template-columns: repeat(1, 1fr); column-gap: 15px; row-gap: 15px; }

/* ### card-fact ### */
.card-fact { padding: 26px 30px; line-height: 1.5; border-radius: 24px; background-color: var(--white); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08); }
.card-fact h3 { margin-bottom: 5px; }
.card-fact-number { margin-bottom: 1px; font-family: var(--font-family-heading), sans-serif; font-size: 60px; line-height: 0.8; color: var(--primary); }
.card-fact p:last-of-type { margin-bottom: 0; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 767px) {
	.header:after { position: absolute; top: 0; left: 0; opacity: 1; visibility: hidden; width: var(--width); height: var(--height); background-color: var(--skobeloff); transition: var(--duration); content: ''; }
	.header-menu { padding: 90px 20px 30px; position: fixed; top: 0; left: 100%; z-index: 1; flex-direction: column; flex-wrap: unset; align-items: unset; opacity: 0; visibility: hidden; width: var(--width); height: 100dvh; background-color: var(--skobeloff); transition: var(--duration); overflow-x: scroll; }
	.header-menu ul { display: block; }
	.header-menu li:first-of-type { border-top: 1px solid var(--white);  }
	.header-menu li { margin-left: -20px; padding: 0; width: calc(100% + 40px); border-bottom: 1px solid var(--white); }
	.header-menu li a { padding: 10px 20px; width: 100%; border-radius: 0; }
	.header-menu li ul { padding: 90px 20px 30px; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; opacity: 1; visibility: visible; transform: translateX(100%); overflow-y: scroll; border-radius: 0; background-color: var(--skobeloff); }
	.header-menu li:hover > a,
	.header-menu li a:focus,
	.header-menu li a:hover { background-color: transparent; }
	.header-menu li li { margin-bottom: 0; }
	.header-menu li li:first-of-type { border-top: 0; }
	.header-menu li li:nth-child(2) { border-top: 1px solid var(--white); }
	.header-menu li li a { color: var(--white); }
	.header-menu li li a:focus,
	.header-menu li li a:hover { background-color: transparent; }
	.header-menu .js-close-menu { display: flex; }
	.header-menu.active { z-index: 3; }
	.header-menu.active li ul { transform: translateX(0); }
	.header-menu .button { margin-top: auto; }
	.header-menu .icon-arrow { position: absolute; top: 50%; right: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 45px; height: 54px; font-size: 14px; color: var(--white); transition: var(--duration); transform: translateY(-50%); border-left: solid 1px var(--white); }
	.is-menu-open .header-menu { left: 0; opacity: 1; visibility: visible; }
	.is-menu-open .header:after { opacity: 1; visibility: hidden; }
	/* Alle banners op mobiel schermbreed en met rechte hoeken: home-hero,
	 * simpele hero en podtrip-hero zien er aan de randen hetzelfde uit. */
	.hero.inner { padding-top: 70px; }
	.hero .hero-bg-image { border-radius: 0; }
	/* Home-hero: geen witte strook onder de foto/video — het grijze vlak
	 * (.hero:after) dat die ruimte vanaf 768px opvult bestaat op mobiel niet. */
	.hero:not(.inner) { padding-bottom: 0; }
	/* Dezelfde hero op een andere pagina dan de homepage: witruimte naar het
	 * blok eronder, net als de simpele hero. .home zet WordPress op de voorpagina. */
	body:not(.home) .hero:not(.inner):not(.is-alt) { margin-bottom: 50px; }
	.cta-image { margin-top: -40px; }
	.trips-nav { display: none; }
	/* Approach mobiel: tabknoppen op één swipebare rij tot tegen de schermrand,
	 * en foto + tekst als één kaart (geen hoekje, geen gat). Desktop ongewijzigd. */
	.approach .tab-menu { margin-right: calc(var(--gutter-right) * -1); margin-left: calc(var(--gutter-left) * -1); padding-left: var(--gutter-left); position: relative; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.approach .tab-menu::-webkit-scrollbar { display: none; }
	.approach .tab-menu ul { display: flex; gap: 10px; }
	.approach .tab-menu li { margin-bottom: 0; flex-shrink: 0; }
	.approach .tab-menu li:last-child { margin-right: var(--gutter-right); }
	.approach .tab-menu li a { width: auto; white-space: nowrap; }
	.approach .card-project { border-radius: 24px; overflow: hidden; box-shadow: 0 0 32px rgba(0, 0, 0, 0.16); }
	.approach .card-project-image { margin-bottom: 0; border-radius: 0; box-shadow: none; }
	.approach .card-project-intro { margin-top: 0; border-radius: 0; }
	.approach .card-project-svg,
	.approach .card-project-intro:after { display: none; }
	/* Simpele hero: geen tekst op mobiel. Visueel verborgen, niet display: none —
	 * de <h1> blijft zo bestaan voor screenreaders en zoekmachines. */
	.hero-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
	/* Intro mobiel: knop altijd onderaan, ook als hij op desktop links staat.
	 * De kolommen vallen weg (display: contents), zodat de knop via order
	 * achter de tekst rechts komt. Kleur van .intro-right erft gewoon door. */
	.intro { display: flex; flex-direction: column; }
	.intro-left,
	.intro-right { display: contents; }
	.intro .button { order: 1; align-self: flex-start; }
	/* Pagina's mobiel: geen copyright-label op foto's. Dezelfde foto's staan
	 * op de PodTrip-pagina's, en daar blijft de credit wél staan.
	 * body.page zet WordPress alleen op pagina's, niet op de podtrip-CPT. */
	body.page .foto-credit { display: none; }
}



@media only screen and (min-width: 440px) {
	.gallery-holder { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.gallery-column a { margin-bottom: 10px; }
	.facts-right { flex: 1; grid-template-columns: repeat(2, 1fr); }
	.hero-bg-image img { width: var(--width); height: calc(100vh - 112px); }
}

@media only screen and (min-width: 768px) {
	.trailer-speler { padding: 20px 25px; gap: 25px; }
	.trailer-speler-image { width: 110px; }
	.trailer-golf { gap: 2px; }
	.trailer-golf span { min-width: 2px; }
	.trailer-golf span:nth-child(2n) { display: block; }
	.formulier-form { padding: 70px 50px 50px; }
	.formulier .gfield--width-half { grid-column: span 6; }
	.formulier .gfield--width-third { grid-column: span 4; }
	.formulier .gfield--width-two-thirds { grid-column: span 8; }
	.formulier .gfield--width-quarter { grid-column: span 3; }
	.formulier .gfield--width-three-quarter { grid-column: span 9; }
	.formulier .ginput_complex { grid-template-columns: repeat(2, 1fr); }
	.travel-holder { grid-template-columns: repeat(2, 1fr); }
	.gallery-holder { grid-template-columns: repeat(4, 1fr); }
	.gallery-column a { margin-bottom: 16px; }
	.tab-menu ul { display: flex; }
	.tab-menu li { margin-right: 15px; margin-bottom: 0; }
	.tab-menu li a { width: auto; }
	.videos-play { padding-left: 9px; width: 92px; height: 92px; font-size: 38px; }
	.intro { margin-bottom: 50px; display: grid; grid-template-columns: 46% 44.7%; justify-content: space-between; }
	.intro > h2 { grid-row: 1; grid-column: 1; }
	.intro-left { grid-row: 2; grid-column: 1; }
	.intro-right { grid-row: 2; grid-column: 2; font-size: 20px; }
	.discover-wrap { padding: 0 74px; }
	.card-project-image { margin-bottom: 0; width: 49.4%; }
	.card-project-intro { margin-top: 30px; margin-bottom: 30px; margin-left: -40px; padding: 55px 60px; border-radius: 24px 177px 24px 24px; }
	.card-project-intro p { margin-bottom: 28px; }
	.card-project-intro p:last-of-type { margin-bottom: 21px; }
	.card-project-svg { right: -6px; width: 140px; height: 150px; }
	.card-project-intro:after { top: 15px; right: 60px; width: 200px; height: 350px; content: ''; }
	.facts-intro { width: 36%; font-size: 18px; }
	.header-menu li a { padding: 2px 12px; font-size: 16px; }
	.header-menu li li a { padding: 8px 16px; font-size: 16px; }
	.header-menu .button { padding: 10px 17px; font-size: 14px; width: auto; }
	.header-menu .button i { font-size: 16px; }

	.mobileMenu { display: none; }

	
	.card-trips-info { padding: 25px 30px; }
	.card-trips-info strong { font-size: 32px; }
	.card-trips-info span { right: 31px; }
	.card-trips-lead:not(:last-child) { margin-right: 30px; }
	.concept-photo { display: flex; align-self: flex-start; width: 50%; }
	.concept-info { flex: 1; }
	.image-text-block { flex-direction: row; }
	.image-text-photo { margin-bottom: 0; margin-left: 20px; width: 49.3%; }
	.image-text.reverse { border-radius: 0 202px 0 0; }
	.image-text.reverse .image-text-block { flex-direction: row-reverse; }
	.image-text.reverse .image-text-photo { margin-right: 20px; margin-left: 0; }
	.image-text.reverse.inner { border-radius: 0 165px 0 0; }
	.image-text.reverse.inner .reviews-svg { top: -2px; right: -13px; width: 140px; height: 80px; transform: unset; }
	.image-text.reverse.inner:after { top: 0; right: 70px; width: 222px; height: 290px; }
	.image-text.reverse.inner2 { border-radius: 165px 0 0; }
	.image-text.reverse.inner2 .image-text-block { flex-direction: row; }
	.image-text.reverse.inner2 .image-text-photo { margin-right: 0; margin-left: 30px; }
	.image-text.reverse.inner2 .reviews-svg { width: 150px; height: 170px; }
	.cta-image { margin-right: 30px; margin-bottom: 0; }
	.cta-intro { padding: 50px 0; flex: 1; font-size: 18px; }
	.cta-block { padding-bottom: 0; }
	.support { padding-bottom: 90px; display: flex; flex-wrap: wrap; }
	.reviews { border-radius: 0 202px 0 0; }
	.reviews-svg { top: -15px; right: 10px; width: 170px; height: 170px; transform: rotate(-10deg) }
	.image-text.reverse:after,
	.reviews:after { width: 220px; height: 340px; top: -40px; right: 90px; }
	.image-text.reverse .image-text-left { padding-top: 25px; }
	.support-intro { margin-bottom: 0; flex: 1; }
	.support-right { margin-top: -3px; margin-left: 30px; width: 49.3%; }
	.stripe{ flex-direction: row; gap: 20px; justify-content: space-between; text-align: unset; }
	.stripe h3 { font-size: 36px; }
	.footer-block { display: flex; gap: 20px; }
	.footer-info { width: 33.33%; }
	.footer-menu { width: 20%; }
	.footer-newsletter .gform_wrapper form { display: flex; gap: 16px; align-items: center; }
	.footer-newsletter .gform-body,
	.footer-newsletter .gform_body { flex: 1; }
	.footer-newsletter .gform_fields { display: flex; gap: 16px; }
	.footer-newsletter .gfield { margin-bottom: 0; flex: 1; }
	.footer-newsletter .gform_footer { width: 33.33%; flex-shrink: 0; }
	.footer-newsletter input:not([type="submit"]) { margin-bottom: 0; width: var(--width); }
	.footer-copyright { justify-content: space-between; }
	.footer-copyright-link { justify-content: start; }
	
	.trips { padding-top: 55px; }
	
	.hero:before { display:block;}
	.hero:after { display:block;}
	.hero-bg-image img { width: var(--width); height: calc(100vh - 10px); object-fit: cover; }
	.hero { padding-top: 70px; padding-bottom: 30px; margin-right: 35px; margin-left: 35px;}

	.hero.is-alt .hero-block { display: none; }
	.hero.is-alt .hero-bg-image {border-radius: 0 0 24px 24px; }
}

@media only screen and (min-width: 1025px) {
	.trailer { margin-bottom: 80px; }
	.foto-credit.is-desktop { display: block; }
	.foto-credit.is-mobiel { display: none; }
	.intro-scherm-logo { width: 300px; }
	.formulier { margin-bottom: 80px; }
	.formulier-form { padding: 70px 70px 60px; }
	.travel { padding-top: 70px; padding-bottom: 70px; }
	.gallery { margin-bottom: 80px; }
	.approach { margin-top: 80px; margin-bottom: 70px; }
	.videos { margin-bottom: 80px; }
	.discover { margin-bottom: 40px; padding-top: 40px; }
	.card-project-intro { margin-left: -108px; }
	.facts { margin-top: 80px; gap: 64px; }
	.card-fact { font-size: 18px; }
	.card-fact-number { font-size: 80px; }
	:root {
		--font-size-h1: 48px;
		--font-size-h2: 48px;
		--font-size-h3: 32px;
		--font-size-h4: 26px;
		--gutter-left: 60px;
		--gutter-right: 60px;
	}
	input,
	select,
	textarea { min-height: 64px; }
	.button { padding: 10px 34px; min-height: 54px; }
	.header { padding-top: 20px; padding-bottom: 20px; }
	.header-logo { width: 200px; }
	.header.sticky { padding-top: 8px; padding-bottom: 8px; }
	.header-menu li a { padding: 2px 16px; font-size: 18px; }
	.header-menu .button { margin-left: 16px; padding: 10px 24px; font-size: 16px; }
	.header-menu .button i { font-size: 22px; }

	.hero { padding-top: 0; padding-bottom: 0;  min-height: auto; }
	.hero-block { display: none; }
	.hero-bg-image { position: relative; top: unset; left: unset;  }
	.hero.inner { margin-bottom: 80px; }
	.hero.inner .hero-bg-image { position: relative; }
	.trips { margin-bottom: 80px; padding-top: 25px; padding-bottom: 80px; }
	.trips .swiper { margin-bottom: 0; }
	.card-intro { font-size: 18px; }
	.concept { margin-bottom: 80px; }
	.concept-holder { margin-bottom: 0; }
	.concept-block { padding-top: 71px; padding-bottom: 80px; }
	.concept-icon { width: 60px; height: 60px; }
	.reviews-block { padding-top: 70px; padding-bottom: 80px; }
	.reviews .swiper { margin-bottom: 0; }
	.reviews.is-alt { margin-bottom: 160px; }
	.card-reviews { padding: 22px 30px 24px; }
	.partner { margin-bottom: 80px; }
	.partner .swiper { overflow: hidden; }
	.partner .swiper-slide { display: flex; align-items: center; justify-content: center; }
	.partner.is-alt { padding-bottom: 76px; }

	/* Vanaf laptop lopen de kaarten niet meer buiten de container door: de
	 * slider klipt. De padding + negatieve marge houdt de kaartschaduwen
	 * zichtbaar — zonder die twee snijdt overflow: hidden ze af aan de rand.
	 * De halve kaart als hint dat er meer is, blijft alleen mobiel/tablet. */
	.trips .swiper,
	.reviews .swiper,
	.place .swiper { margin: -24px; padding: 24px; overflow: hidden; }
	.trips .swiper-slide,
	.reviews .swiper-slide { width: auto; }
	.image-text { margin-bottom: 145px; }
	.image-text-block { padding-top: 80px; padding-bottom: 80px; }
	.image-text-photo { margin-left: 50px; }
	.image-text.reverse { margin-bottom: 160px;  }
	.image-text.reverse .image-text-left { padding-top: 0; }
	.image-text.reverse .image-text-photo { margin-right: 64px; margin-left: 0; }
	.image-text.reverse.inner { margin-bottom: 80px; }
	.image-text.reverse.inner2 { margin-bottom: 80px; }
	.image-text.reverse.inner2 .image-text-photo { margin-right: 0; margin-left: 64px; }
	.cta { margin-bottom: 80px; }
	.cta-image { margin-right: 81px; max-width: 308px; }
	.support { padding-top: 112px; padding-bottom: 78px; }
	.support-intro { font-size: 18px; }
	.support-right { margin-left: 65px; }
	.support-category { width: 85%; }
	.support-voice { display: flex; gap: 20px; width: 85%; }
	.support-voice button { font-size: 18px; }
	.support-point img { width: 75px; }
	.support-link { font-size: 22px; }
	.place { margin-top: -48px; margin-bottom: 80px; }
	.place .card-intro { width: 50%; }
	.stripe-trips { display: flex; flex-wrap: wrap; }
	.discover-bottom,
	.reviews-bottom,
	.concept-bottom,
	.trips-bottom { position: absolute; top: 62px; right: 0; }
	.discover-bottom { top: 69px; }
	.trips-bottom { align-items: flex-end; gap: 12px; }
	.concept-bottom { top: 132px; }
	.reviews-bottom { top: 131px; }
	.discover .card-intro,
	.reviews .card-intro,
	.concept .card-intro,
	.trips .card-intro { width: 65%; }
	.footer { padding-top: 76px; font-size: 18px; }
	.footer.is-alt { padding-bottom: 80px; }
	.footer-block { margin-bottom: 66px; }
	.footer-info { margin-right: 20px; display: flex; flex-wrap: wrap; }
	.footer-title { margin-bottom: 15px; }
	.footer-menu { margin-left: auto; width: 15.6%; }
	.footer-image { margin-top: 4px; margin-right: 22px; margin-bottom: 0; width: 96px; }
	.footer-newsletter { padding-bottom: 8px; }
	.footer-newsletter input:not([type="submit"]) { min-width: 254px; }
	.footer-newsletter input[type="submit"] { padding: 10px 34px; min-height: 64px; }
	
	/* Tot 1875px hangen komma (aan de hero-rand) en de knoppen rechtsboven in
	 * het volgende blok (aan de inhoudsrand) niet aan dezelfde rand, en
	 * schuiven ze per schermbreedte over elkaar. Vandaar hoger: de komma
	 * stopt boven de knop van trips (25px padding + top 62px). */
	.hero:before { bottom: -55px;}
}

@media only screen and (min-width: 1200px) {
	.travel-holder { grid-template-columns: repeat(3, 1fr); }
	.discover-items { margin-bottom: 76px; }
	.support-right { margin-bottom: 50px; }
	.download { margin-bottom: 158px; padding-top: 88px; padding-bottom: 84px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
	.download:after { display: none; }
	.download-intro { width: 46%; }
	.download-right { margin-top: -166px; margin-bottom: -166px; width: 49.4%; align-self: stretch; align-items: stretch; }
	.download-photo { display: flex; flex-direction: column; }
	.download-photo:nth-child(1) { margin-top: calc(13.8% - 7.5px); margin-bottom: calc(13.8% - 7.5px); }
	.download-photo:nth-child(1) > .download-tegel:nth-child(1) { flex-grow: 226; }
	.download-photo:nth-child(1) > .download-tegel:nth-child(2) { flex-grow: 362; }
	.download-photo:nth-child(1) > .download-tegel:nth-child(3) { flex-grow: 214; }
	.download-photo:nth-child(2) > .download-tegel:nth-child(1) { flex-grow: 427; }
	.download-photo:nth-child(2) > .download-tegel:nth-child(2) { flex-grow: 460; }
	.header-menu li:not(:last-child) { margin-right: 15px; }
	.header-menu .button { margin-left: 34px; }
	.concept-photo { margin-right: 50px; width: 49.4%; }
	.discover .card-intro,
	.reviews .card-intro,
	.concept .card-intro,
	.trips .card-intro,
	.approach .card-intro,
	.travel .card-intro,
	.gallery .card-intro,
	.formulier .card-intro { width: 50%; }
}

@media only screen and (min-width: 1400px) {
	.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
	.footer-newsletter { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
	.footer-newsletter > span { flex-shrink: 0; }
	.footer-newsletter .gform_wrapper { flex: 1; }
}

@media only screen and (min-width: 1875px) {
	.centered-lg { padding-right: calc((100% - var(--width-large)) / 2); padding-left: calc((100% - var(--width-large)) / 2); }
	.hero:before { left: 50%; right: unset; width: 295px; height: 372px; margin-left: 772px; transform: translateX(-50%); }
	.hero:before { bottom: -125px;}

}

@media only screen and (min-width: 1910px) {
	.cta,
	.concept,
	.image-text,
	.hero { margin-right: 72px; margin-left: 72px; height: auto; }
}

/* Muis: credit pas tonen bij hover. Bij de hero via de hele sectie, omdat
 * de titel en knoppen over de foto liggen. */
@media (hover: none) {
	.foto-credit { opacity: 0; }
	a .foto-credit,
	.is-credit > .foto-credit { opacity: 1; }
}

@media (hover: hover) {
	.foto-credit { opacity: 0; }
	:hover > .foto-credit,
	.hero:hover .foto-credit { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.intro-scherm-logo { animation: none; }
}