/* 2k Screen Device */
@media only screen and (min-width: 2000px) {
  .video__wrapper {
    height: 100vh;
  }
}

/* Big Screen Device */
@media only screen and (min-width: 1800px) {
  .error-404 {
    padding-block: 250px 160px;
  }
}

/* XXL+ Device. */
@media only screen and (max-width: 1799px) {}

/* XXL Device. */
@media only screen and (max-width: 1600px) {

  /* dev-1 */
  .hero__thumb__image {
    width: 64%;
  }

  .gallery__content {
    max-width: 100%;
    width: 100%;
    margin-bottom: 15px;
  }

  .gallery__column {
    max-width: 345px;
  }

  .gallery__card-img img {
    height: 292px;
  }

  .spaceTop-xl {
    margin-top: 100px;
  }

  .gallery__card-img-lg img {
    height: 382px;
  }

  .gallery__wrapper {
    gap: 100px;
  }

  .hero--commone .hero__content {
    margin: 0 0 0 25vw;
  }
}

/* Below large desktop. */
@media only screen and (max-width: 1450px) {

  /* contact.html */
  .hero--contact__media {
    top: -150px;
  }
}

/* XL Device :1280px. */
@media only screen and (max-width: 1399px) {

  /* dev-1 */
  .gallery__wrapper {
    gap: 100px;
  }

  .marquee-item img {
    max-width: 190px;
    width: 190px;
  }

  .testimonial__slideItem {
    width: 42vw;
  }

  /* Add this */
  .testimonial__slideItem--sm {
    width: 28vw;
  }

  .partner__content-thumbnail {
    width: 45vw;
    height: 460px;
  }

  .hero__thubmail img {
    width: 32vw;
    height: auto;
  }

  .hero--commone .hero__content {
    margin: 0 0 0 39vw;
  }

  .counter-item h2 {
    font-size: 55px;
  }
}

/* Large Device :992px. */
@media only screen and (max-width: 1199px) {
  .container {
    width: 960px;
  }

  /* dev-1 */
  .hero__vector {
    max-width: 28%;
  }

  .hero__thumb__image {
    width: 67%;
  }

  .gallery__column {
    max-width: 350px;
  }

  .gallery__content {
    max-width: 281px;
    margin-bottom: 30px;
  }

  .gallery__card-img img {
    height: 328px;
  }

  .gallery__card-img-lg img {
    height: 410px;
  }

  .spaceTop-xl {
    margin-top: 124px;
  }

  /* Dev 2 */
  .working--section {
    padding: 96px 0;
  }

  .footer__bottom__inner {
    padding: 32px 0;
  }

  /* about.html */
  .hero__about__content {
    margin-left: 48px;
    padding-bottom: 48px;
  }

  .aboutBlocks__item {
    gap: 48px;
  }

  .aboutBlocks__item--odd {
    margin-left: 0;
  }

  /* coaching.html */
  .coachingBlocks--section {
    padding: 80px 0;
  }
}

/* Below 1050px. */
@media only screen and (max-width: 1050px) {

  /* contact.html */
  .hero--contact {
    min-height: 45vh;
  }
}

/* Medium Device :768px. */
@media only screen and (max-width: 991px) {
  .container {
    width: 720px;
  }

  /* dev-1 */
  .hero__thumb__image {
    width: 100%;
    transform-origin: center;
    animation: heroThumbFadeIn 1.2s ease-out both;
  }

  @keyframes heroThumbFadeIn {
    from {
      opacity: 0;
      transform: scale(0.75);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

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

  /* Mobiele homepage-hero: zachte Ken Burns pan-zoom + fade-in.
     Gescoped met :not(.hero--about) zodat de about-hero ongemoeid blijft.
     .hero__thumb wordt full-bleed met overflow:hidden zodat het inzoomen
     geclipt wordt (geen horizontale overflow); de compositie blijft gelijk:
     de afbeelding blijft links-onder verankerd op 100% breedte. */
  .hero--section:not(.hero--about) .hero__thumb {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    animation: heroIntroZoom 1.4s ease-out both;
  }

  .hero--section:not(.hero--about) .hero__thumb__image {
    transform-origin: 50% 100%;
    will-change: opacity;
    /* heroPanZoom (Ken Burns) uitgezet: liep `infinite` en tikte elk frame
       door, ook buiten beeld — stal frames van de scroll. Alleen de eenmalige
       fade-in entrance blijft. */
    animation: heroFadeIn 1.1s ease-out both;
  }

  .hero__content {
    max-width: 362px;
    width: 100%;
    position: relative;
    margin: 0 0 0 auto;
    padding: 16px 20px 20px;
    /* Geen backdrop-filter op mobiel: dit blok ligt over de bewegende pagina en
       moest elke scroll-frame opnieuw blurren -> GPU-jank. De 2px blur was op
       deze donkere achtergrond toch nauwelijks zichtbaar; iets dekkender ipv. */
    background: #000000d9;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero--section {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .videobg__gallery .bg-video {
    width: 100%;
    left: auto;
    right: 0%;
    top: 0;
  }

  .racing__content {
    flex-shrink: 0;
    max-width: 282px;
    padding-top: 0;
  }

  .video__wrapper {
    height: 480px;
  }

  .gallery__wrapper {
    gap: 70px;
  }

  .gallery__column {
    max-width: 310px;
  }

  .gallery__card-img-lg img {
    height: 375px;
  }

  .gallery__content {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .coatching__videoBg.videobg .bg-video {
    width: 40vw;
    height: 28vh;
  }

  .partner__content {
    gap: 6vw;
  }

  .partner__content-inner {
    max-width: 326px;
    flex-shrink: 0;
  }

  /* Mobiel/tablet: staande slides met een vaste verhouding (overschrijft de
     liggende desktop-ratio uit style.css). De img vult de box (zie style.css). */
  .testimonial__slideItem {
    width: 55vw;
    aspect-ratio: 3 / 4;
  }

  .hero__thubmail img {
    width: 48vw;
    height: auto;
  }

  .partnership__item.active .partnership__item-thumbnail {
    display: none;
  }

  .partnership__item .partnership__item-thumbnail {
    display: none;
  }

  .partnership__item-content {
    max-width: 100%;
    padding: 23px 0px;
  }

  .partnership__header {
    margin: 0 auto;
    text-align: center;
  }

  /* Dev 2 */

  .quote__lightspeed__video {
    width: 100%;
  }

  .quote__content,
  .working--section,
  .footer__top {
    padding: 64px 0;
  }

  /* about.html */
  .hero--about {
    /* laat de hero meegroeien met de gestapelde inhoud i.p.v. de vaste
       45vh van .hero--section (anders klapt de tekst achter de header) */
    height: auto;
    align-items: stretch;
    padding-bottom: 0;
  }

  .hero--about .hero__thumb__image {
    height: auto;
    width: 90%;
    margin-right: 0;
  }

  .hero__about__content {
    margin-left: 0;
    padding-bottom: 48px;
  }

  .hero--about .text-lg {
    font-size: 16px;
    line-height: 1.5;
  }

  .light-video--aboutHero {
    width: 65%;
  }

  .aboutBlocks__item__box {
    border-radius: 16px;
    padding: 24px 16px;
    margin-left: 0;
    margin-right: 0;
  }

  .aboutBlocks--section {
    padding: 64px 0;
  }

  /* contact.html */
  .hero--contact__row {
    gap: 32px;
    padding-top: 64px;
  }

  .hero--contact__portrait {
    width: 30%;
    max-width: 260px;
  }

  .contact--section {
    padding: 90px 0 64px;
  }

  .contact__info {
    max-width: 100%;
  }

  .contact__form {
    padding: 36px;
  }
}

/* Small Device :550px. */
@media only screen and (max-width: 767px) {
  .container {
    width: 540px;
  }

  /* dev-1 */
  .racing__wrapper {
    gap: 38px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .videobg__racing .bg-video {
    top: auto;
    left: 0;
    height: 75vh;
    bottom: 0;
  }

  span.logo__main {
    display: none !important;
  }

  .logo__sm {
    opacity: 1 !important;
  }

  .header {
    padding: 20px 0px;
    /* Geen backdrop-filter op mobiel. De header is fixed en staat BUITEN
       #smooth-content; ScrollSmoother transformeert die content elk frame, dus
       een backdrop-filter moet de bewegende pagina elke scroll-frame opnieuw
       blurren -> zware mobiele scroll-jank. Op ~90% zwart was de blur toch
       nauwelijks zichtbaar; een iets steviger solide achtergrond vervangt 'm. */
    background: #000000e6 !important;
    transition:
      background 0.3s ease,
      padding 0.3s ease;
  }

  .coatching--section {
    padding: 50px 0px 0px;
  }

  .coatching__videoBg.videobg {
    display: none;
  }

  .coatching__profile {
    position: relative;
    left: 0;
    bottom: 0;
    width: 65vw;
    height: auto;
  }

  .partner__content {
    gap: 7vw;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .partner-section {
    padding-top: 9vh;
  }

  .partner__content-thumbnail {
    width: 100vw;
    height: 306px;
  }

  /* Tijdens de pin scrollt de sectie horizontaal terwijl 'ie bovenaan plakt.
     Met min-height:auto is de sectie KORTER dan het scherm (kop + één rij
     staande beelden ≈ halve viewport), waardoor de volgende sectie/footer in de
     ruimte ERONDER alvast omhoog kruipt -> dat was de witruimte + het "infaden".
     Daarom de sectie het scherm laten vullen, maar met svh i.p.v. vh: 100svh is
     gelijk aan de viewport mét uitgeschoven URL-balk (de kleinste hoogte) en
     wordt dus NOOIT hoger dan zichtbaar -> geen transform-pin-drift op touch.
     De vh-regel is alleen een fallback voor oudere browsers zonder svh.
     flex-centering houdt kop + beelden netjes in het midden van die hoogte. */
  .testimonial--section {
    padding: 8vh 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Kop strak boven de beelden (niet de grote desktop 10vh). */
  .testimonial__header {
    padding-bottom: 4vh;
  }

  .hero__thubmail img {
    width: 90vw;
    height: auto;
  }

  .hero__thubmail .bg-video {
    left: 0;
    top: 10vh;
  }

  .counter-item h2 {
    font-size: 44px;
    margin-bottom: 14px;
  }

  .hero--commone .hero__content {
    margin: 0 0 0 0vw;
  }

  .hero.hero--commone {
    min-height: 77vh;
  }

  .timeline--section {
    padding: 11vh 0 6vh;
  }

  /* Tijdlijn naar één kolom: lijn links, alles rechts ervan */
  .timeline__track::after {
    left: 7px;
    margin-left: 0;
  }

  .timeline__row,
  .timeline__row--left,
  .timeline__row--right {
    width: 100%;
    left: 0;
    padding-left: 32px;
    padding-right: 0;
    text-align: left;
  }

  .timeline__row--left::after,
  .timeline__row--right::after {
    left: 1px;
    right: auto;
  }

  .gallery--section {
    min-height: auto;
  }

  /* Dev 2 */
  .quote__box {
    max-width: 100%;
  }

  /* about.html */
  .hero__about__content {
    max-width: 100%;
    padding: 120px 0 48px;
  }

  .hero--about .hero__thumb__image {
    height: auto;
    width: 50%;
    margin: 0 auto;
  }

  /* coaching.html */
  .coachingBlocks--section {
    padding: 64px 0;
  }

  /* contact.html */
  .hero--contact {
    min-height: 50vh;
    padding-bottom: 100px;
  }

  /* Full-bleed media so it covers the whole hero on mobile */
  .hero--contact__media {
    inset: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .hero--contact__img {
    object-position: center;
  }

  .hero--contact__row {
    padding-top: 56px;
  }

  .contact--section {
    padding: 72px 0 56px;
  }

  .contact__form {
    padding: 28px 22px;
  }
}

/* Extra small Device. */
@media only screen and (max-width: 575px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  /* dev-1 */
  .coatching__profile {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: auto;
  }

  .partner__content-thumbnail {
    width: 100vw;
    height: 306px;
  }

  /* Dev 2 */
  .quote__content,
  .working--section,
  .footer__top {
    padding: 48px 0;
  }

  /* about.html */
  .hero--about .hero__thumb__image {
    width: 100%;
  }

  .aboutBlocks__item__thumb {
    max-width: 100%;
  }

  /* contact.html */
  .contact--section {
    padding: 56px 0 48px;
  }

  .contact__form {
    padding: 24px 16px;
    border-radius: 18px;
  }

  .contact__list-value {
    font-size: 16px;
  }

  .contact__socials {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 430px) {}

/* ===== Mega menu — mobiel/tablet ===== */
@media only screen and (max-width: 991px) {

  /* Scrollbaar met max-height i.p.v. content die over elkaar valt.
     Dekkende achtergrond op de scroll-container zelf, zodat je de site
     er niet doorheen ziet als je voorbij één schermhoogte scrollt. */
  .megamenu {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100dvh;
    background-color: #0b0b0b;
    -webkit-overflow-scrolling: touch;
  }

  /* Achtergrondvideo uit op mobiel (performance + leesbaarheid) */
  .megamenu__video {
    display: none;
  }

  /* Inner mag hoger worden dan het scherm en meescrollen */
  .megamenu__inner {
    height: auto;
    min-height: 100%;
    padding: 104px 20px 72px;
  }

  /* Eén kolom; verberg de hover-preview die op touch toch niets doet */
  .megamenu__body {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    padding: 16px 0 24px;
  }

  .megamenu__aside {
    display: none;
  }

  /* Bottom bar netjes onder elkaar */
  .megamenu__meta {
    gap: 20px;
  }

  /* Snellere, directere reveal op mobiel. De desktop-timing is afgestemd op de
     achtergrondvideo (4s fade) en de hover-preview, die hier allebei uit staan.
     Zonder die context voelen de lange delays als lag: het eerste item begon
     pas op 0.5s en de hele reveal duurde ~2.3s. We comprimeren alles zodat een
     tik direct beweging geeft en het menu binnen ~0.9s staat. */
  .megamenu__bg,
  .megamenu__inner {
    transition: opacity 0.32s ease;
  }

  .megamenu.is-open .megamenu__item {
    animation-duration: 0.42s;
  }
  .megamenu.is-open .megamenu__item:nth-child(1) { animation-delay: 0.08s; }
  .megamenu.is-open .megamenu__item:nth-child(2) { animation-delay: 0.14s; }
  .megamenu.is-open .megamenu__item:nth-child(3) { animation-delay: 0.20s; }
  .megamenu.is-open .megamenu__item:nth-child(4) { animation-delay: 0.26s; }
  .megamenu.is-open .megamenu__item:nth-child(5) { animation-delay: 0.32s; }
  .megamenu.is-open .megamenu__item:nth-child(6) { animation-delay: 0.38s; }

  .megamenu.is-open .megamenu__meta {
    animation-delay: 0.42s;
    animation-duration: 0.5s;
  }
}

/* ===== 404 — mobiel ===== */
@media only screen and (max-width: 767px) {
  .error-404 {
    padding-block: 150px 90px;
  }
}

/* ===== Touch-toestellen: header + scroll-lock =====
   Geldt voor ALLE touch-apparaten (telefoon én tablet), niet alleen <768px.
   Daar draait native scroll i.p.v. ScrollSmoother, dus de header mag NOOIT een
   backdrop-filter hebben: een fixed blur over de bewegende pagina re-blurt elk
   scroll-frame en dat is de zware mobiele scroll-jank. Een solide balk vervangt
   het glaseffect (de JS-glasanimatie is op touch al uitgeschakeld). */
@media (hover: none) and (pointer: coarse) {
  .header {
    background: #000000e6 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Mega-menu open: bevries de pagina-scroll. Op touch zetten we de normalizer
     uit (zie mega-menu.js) en dit zorgt dat de native scroll er ook niet meer
     doorheen lekt. Geen scrollbar-shift op touch (overlay-scrollbars). */
  body.menu-open {
    overflow: hidden;
  }
}

/* ===== Touch-toestellen: glas-kaarten zonder backdrop-filter =====
   Zelfde reden als de header hierboven: deze kaarten liggen over de pagina die
   op touch native scrollt (en op desktop door ScrollSmoother elk frame wordt
   getransformeerd). Een backdrop-filter blur moet dan elke scroll-frame de
   bewegende pagina erachter opnieuw blurren -> zware mobiele GPU-jank. De blur
   was op deze donkere, semi-transparante achtergronden toch nauwelijks
   zichtbaar; we vervangen 'm door een iets dekkendere solide achtergrond. */
@media (hover: none) and (pointer: coarse) {

  .gallery__card,
  .quote__box,
  .timeline__card,
  .aboutBlocks__item__box,
  .partnership__item::after,
  .contact__form {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Compenseer de weggevallen blur met een dekkendere achtergrond. */
  .gallery__card,
  .contact__form {
    background: #000000d9 !important;
    /* was #00000099 + blur(4px) */
  }

  .quote__box,
  .aboutBlocks__item__box {
    background: rgba(0, 0, 0, 0.88) !important;
    /* was 0.6 + blur(8px) */
  }

  .timeline__card,
  .partnership__item::after {
    background: #252525e6 !important;
    /* was #25252599 + blur(4px) */
  }
}

/* ===== Touch-toestellen: partner-kaarten zonder hover-highlight =====
   Op touch bestaat er geen hover-state, dus de "focus"-highlight kan niet
   zinvol getriggerd worden. De zwevende preview-afbeelding is al verborgen
   (zie ≤991px); hier zetten we ook de highlight-box (::after) uit. Anders
   houdt alleen de eerste kaart (die standaard .active in de HTML heeft) z'n
   donkere box en oogt dat als een losse, half-werkende hover. Zo ogen alle
   kaarten gelijk: een nette lijst met scheidingslijnen. */
@media (hover: none) and (pointer: coarse) {
  .partnership__item::after,
  .partnership__item:hover::after,
  .partnership__item.active::after {
    opacity: 0;
    height: 0;
  }

  .partnership__item {
    cursor: default;
  }
}
/* ===== Legal / Privacy page ===== */
@media only screen and (max-width: 767px) {
  .hero--legal {
    padding-block: 150px 32px;
  }

  .legal--section {
    padding: 24px 0 80px;
  }

  .legal__block h2 {
    font-size: 21px;
  }
}