/* On other pages (e.g., index.html) keep stat-item content visible and hide the plus */
  .page-index .stat-item::after { display: none; }
  .page-index .stat-item .stat-label-visible { display: block; }
/* ------------------ */
/* ROOT + BASE        */
/* ------------------ */


/* ------------------ */
/* RESPONSIVE: DESKTOP */
/* ------------------ */
@media (min-width: 1024px) {
  :root {
    --gap: 20px;
    --container-max-width: 1350px;
    --sticky-top-offset: 80px;
    --header-height: 80px;
    --header-height-scrolled: 62px;
  }

  .mobile-only { display: none !important; visibility: hidden; }
}

/* ------------------ */
/* RESPONSIVE: TABLET */
/* ------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gap: 15px;
    --sticky-top-offset: 70px;
    --header-height: 80px;
    --header-height-scrolled: 60px;
  }

  html, body { font-size: 18px; }
  .font_large p, .hero-subtitle { font-size: 1.2em !important; }
  h1.hero-title { font-size: 2.8em !important;  }
  h1 { font-size: 2em !important;  }
  h2, h2.section-title { font-size: 1.6rem !important; line-height: 1.3;}
  h2.mobile-section-title { font-size: 2.4rem !important; line-height: 1.3; margin-left: auto; margin-right: auto; max-width: 300px; }


  /* Reset all columns to full width by default */
  [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* Tablet Grid */
  .t-col-12 { flex: 0 0 100%;  max-width: 100%; }
  .t-col-6 { flex: 0 0 calc((100% - var(--gap)) / 2);  max-width: calc((100% - var(--gap)) / 2); }
  .t-col-4 { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); max-width: calc((100% - 2 * var(--gap)) / 3); }
  .t-col-3 { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); max-width: calc((100% - 3 * var(--gap)) / 4); }

  /* Tablet Visibility */
  .hide-tablet, .hide-mobile { display: none !important; }
  .tablet-only, .show-tablet { display: block !important; }

  /* Tablet Carousel - Full viewport approach */
  .carousel-wrapper { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; overflow: hidden !important; }
  .carousel { width: 100vw !important; left: 0 !important; transform: none !important; overflow: hidden !important;  }
  .slick-list { width: 100vw !important; overflow: hidden !important; }
  .slick-track { width: 100vw !important; display: flex !important; flex-direction: row !important;}
  .slick-slide { width: 100vw !important; display: block !important; }
  .carousel_slide { width: 100vw !important; margin: 0 !important; padding: 0 !important; }
  /* Keep text and image side by side on tablet */
  .carousel_slide .row { flex-direction: row; align-items: center; width: 100vw !important; }
  .carousel_slide .col-6 { flex: 0 0 50%; max-width: 50%; }
  .carousel-image img { width: 100%; height: 50vw; max-height: 50vw; object-fit: cover; margin-left: 25px; }
  .slick-prev { left: 20px; }
  .slick-next { left: 100px; }

  /* header */
  .header-right .btn  { margin-right: 30px !important;  }


}

/* ------------------ */
/* MOBILE (< 768px) */
/* ------------------ */
@media (max-width: 767px) {
  :root {
    --gap: 10px;
    --sticky-top-offset: 79px;
    --header-height: 79px;
    --header-height-scrolled: 79px;
  }

  html, body { font-size: 16px; }
  .hero-subtitle { font-size: 1em !important; }
  .font_large p { font-size: 1.3em !important; }
  h1.hero-title { font-size: 2.5em !important;  }
  h1 { font-size: 1.6em !important;  }
  h2, h2.section-title { font-size: 1.6rem !important; line-height: 1.3;}
  h2.mobile-section-title { font-size: 2.2rem !important; line-height: 1.3; margin-left: auto; margin-right: auto; max-width: 250px; }
  h2.mobile_heading { font-size: 2.2em !important; }
  p.font_small { font-size: 1rem; }
  p.font_quote, p.font_quote_small { font-size: 1.1rem; font-style: italic; line-height: 1.6; padding-top: 1em; }

    /* Mobile Grid */
  [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .m-col-12 { flex: 0 0 100%; max-width: 100%; }
  .m-col-9 { flex: 0 0 calc(75% - var(--gap) * 0.75); max-width: calc(75% - var(--gap) * 0.75); }
  .m-col-8 { flex: 0 0 calc(66.666667% - var(--gap) * 0.666667); max-width: calc(66.666667% - var(--gap) * 0.666667); }
  .m-col-6 { flex: 0 0 calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); }
  .m-col-4 { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); max-width: calc((100% - 2 * var(--gap)) / 3); }
  .m-col-3 { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); max-width: calc((100% - 3 * var(--gap)) / 4); }
  .col-fullbleed { margin: 0 16px; }

  /* components */
  .btn { padding: 1rem 1.5rem; }

  /* header */
  .site-header, .site-header.scrolled { padding: 14px 0; margin: 0 !important; }
  .site-header { height: var(--header-height); box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.1); }
  .site-header.scrolled { height: var(--header-height-scrolled); }
  .site-header .logo, .site-header.scrolled .logo { position: relative; top: 2px; width: 92px; height: 36px; left: 12px; padding: 0;}
  .site-header .logo a { height: 36px; background-image: url(../images/logo_dvg_mobile.svg); margin-top: 0 !important; }
  .site-header.scrolled .logo a { transform: none; }
  .menu-open .logo , .menu-open .scrolled .logo { top: 7px;  }
  .site-header .btn, .site-header.scrolled .btn { padding: 0.8rem 0.75rem;  font-size: 15px; margin-right: 35px; margin-top: 2px !important;}
  .hero-section { padding: 2rem 0 2rem 0; }

  /* Mobile Visibility */
  .hide-mobile { display: none !important; }
  .mobile-only { display: block !important; }

  /* carousel */
  .carousel-wrapper { width: 100vw !important; margin-left: calc(-48vw + 50%) !important; overflow: hidden !important; }
  .carousel { width: 100vw !important; left: 0 !important; transform: none !important; overflow: hidden !important; }
  .slick-list { width: 100vw !important; overflow: hidden !important; }
  .slick-track { width: 100vw !important; display: flex !important; flex-direction: row !important; }
  .slick-slide { width: 100vw !important; display: block !important; }
  .carousel_slide { width: 100vw !important; margin: 0 !important; padding: 0 !important}
  /* Move text above image on mobile */
  .carousel_slide .row { flex-direction: column; align-items: center; width: 100vw !important; }
  .carousel_slide .col-6 { flex: 0 0 100%; max-width: 100%; }
  /*text and image*/
  .carousel-image { width: 95vw; height: 90vw;  }
  .carousel-image img { position: relative; width: 90%; height: 90%; max-height: 100%; object-fit: cover; left: 5vw; }
  h2.carousel-title { font-size: 7vw; line-height: 1;}
  .carousel-content p { font-size: 16px;}
  .slick-prev { bottom: 55px; left: 20px; }
  .slick-next { bottom: 55px; left: 100px; }

  /* specific */
  .handwriting { font-size: 30px; }
  .avatar_wrap { min-width: 20vw; }
  .avatar { width: 90px !important; }

  /* investeerders */
  .rounded-image {  }
  .name_large { margin-top: 1.8rem; font-size: 1.1rem; line-height: 1;}
  .name_function { margin-top: 0.4rem; margin-bottom: 2.7rem; font-size: 0.9em !important;line-height: 1;}


  /* contact */
  .contact-option {}
  .contact-content { width: 100%; }
  .contact-content ul { line-height: 1.5 !important;}
  .contact-content li { line-height: 1.5 !important; padding: 0; margin: 0 0 0 0 !important; height: 23px;}
  .contact-content i.icon { margin: 0  !important; }

  /* alignment */
  .align-left-mobile { align-items: left !important;}
  .icon { width: 28px !important; height: 28px !important;  }
  .mobile-align-center { align-items: center !important;  text-align: center !important; justify-content: center !important; }
  .mobile-fullwidth { width: 100%; }

  /* backgrounds */
  .bg_wrapper.bg_regio { background: none; }
  .bg_wrapper.bg_regio .bg_gradient{ background: linear-gradient(to bottom, rgba(246, 245, 247, 1) 30% 0%, rgba(229, 233, 255, 0.3) 60%, rgba(229, 233, 255, 0) 100%); }
  .bg_pattern_left { background-repeat: no-repeat; background-position: left 200px; background-size: auto 172px; background-image: url(../images/bg_pattern_left.svg); }
  .bg_pattern_left.no_pattern_mobile { background-image: none;}

  /* spacing */
  .padding_top_s { padding-top: 1em; }
  .padding_top { padding-top: 2em; }
  .padding_bottom { padding-bottom: 2em; }
  .padding_left { padding-left: 2em; }
  .padding_right, .padding_right_mobile { padding-right: 1em; }
  .padding_full { padding: 1em 2em; }
  .no_padding_mobile { padding: 0; }
  .no_padding_sides_mobile { padding-left: 0; padding-right: 0; }
  .no_padding_top_mobile { padding-top: 0; }
  .no_padding_bottom_mobile { padding-bottom: 0; }
  .padding_bottom_mobile_xs { padding-bottom: 0.7em; }
  .padding_inside { padding: 0.5em 0.5em; }
  .page-quote.padding_inside { padding: 1em 2em;  }
  .mobile_spacing_s { padding: 0 0.4em; }
  .mobile_spacing_m { padding: 0 1em; }
  .mobile_padding_left_s { padding-left: 0.3em !important; }
  .mobile_padding_right_s { padding-right: 0.3em!important; }
  .mobile_padding_left_m { padding-left: 0.5em !important; }
  .mobile_padding_right_m { padding-right: 0.5em !important; }
  .padding_top_mobile { padding-top: 2em; }
  .padding_top_mobile_s { padding-top: 1em; }
  .padding_bottom_mobile_s { padding-bottom: 1em; }
  .padding_mobile_s { padding-left: 1.5em; padding-right: 1.5em; }
  .padding_mobile_xs { padding-left: 0.9em; padding-right: 0.9em; }
  .margin_top_mobile_s { margin-top: 1em; }


  /* Accordion for stat-item (mobile) */
  .page-sluitjeaan .stat-item, .stat-item {  position: relative;  cursor: pointer;  padding: 1rem 1.5rem; /* tighter vertical spacing */ border-radius: 16px;}
  .page-sluitjeaan .stat-item h3 { margin: 0 2.25rem 0.25rem 0; }
  .page-sluitjeaan .stat-item::after {  content: "";  position: absolute; right: 16px; top: 32px; width: 30px; height: 30px; background: url(../images/ic_add.svg) no-repeat center / contain; transform: translateY(-50%) rotate(0deg);  transition: transform .2s ease;}
  .page-sluitjeaan .stat-item .stat-label, .page-sluitjeaan .stat-item .stat-label-visible { display: none; }
  .page-sluitjeaan .stat-item.is-open .stat-label, .page-sluitjeaan .stat-item.is-open .stat-label-visible { clear: both; display: block; margin-top: 15px;  }
  .page-sluitjeaan .stat-item.is-open::after { transform: translateY(-50%) rotate(45deg); }
  .page-sluitjeaan .stat-item .icon {  width: 25px !important; height: 25px !important; padding: 0; margin: 1px 10px 10px 0; }

  /* other stat items */
  .stat-number { padding-bottom: 0; margin-bottom: 0;}

  /* footer */
  .site-footer h4 { font-size: 12px !important; line-height: 1 !important; padding: 0; margin: 0 0 1.2rem 0;}
  .site-footer a { font-size: 16px !important; line-height: 1 !important;}
  .copyright { text-align: center; }

}

/* ------------------------ */
/* SMALL MOBILE (< 480px) */
/* ------------------------ */
@media (max-width: 480px) {

}