/* ============================================================
   Dutch Tech Campus — custom CSS (plain, no @apply)
   Single source of truth for non-utility styles.
   Linked directly in the HTML for preview, and pulled into the
   Tailwind build via src/input.css (@import).
   ============================================================ */

:root {
  --dtc-cyan: #00c1de;
  --dtc-cyan-dark: #009fb8;
  --dtc-ink: #0a0a0a;
  --dtc-gray: #5c5c5c;
  --dtc-border: #e5e5e5;
  --dtc-header-bar-pad-top: 1.75rem;
  --dtc-header-logo-height: 100px;
  --dtc-header-logo-height-xl: 112px;
  --dtc-hero-header-gap: 1.25rem;
  --dtc-scroll-offset: calc(
    var(--dtc-header-bar-pad-top) + var(--dtc-header-logo-height) + var(--dtc-hero-header-gap)
  );
}

@media (min-width: 1280px) {
  :root {
    --dtc-scroll-offset: calc(
      var(--dtc-header-bar-pad-top) + var(--dtc-header-logo-height-xl) + var(--dtc-hero-header-gap)
    );
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--dtc-scroll-offset);
}

#swup section[id],
#swup [id].dtc-section {
  scroll-margin-top: var(--dtc-scroll-offset);
}
body { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }

/* Logo (header + footer) */
.dtc-logo {
  display: block;
  height: auto;
  width: auto;
}

.site-header__logo .dtc-logo {
  height: 100px;
}

@media (min-width: 1280px) {
  .site-header__logo .dtc-logo {
    height: 112px;
  }
}

.dtc-logo--on-dark {
  filter: brightness(0) invert(1);
}

footer .dtc-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: none;
  aspect-ratio: 111 / 154;
  align-self: flex-start;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---- Site header + navigatie ------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  pointer-events: none;
}

.site-header__bar {
  padding-top: 1.75rem;
  padding-bottom: 0.75rem;
  pointer-events: auto;
}

/* Gedeeld glass-effect (level 1 pill + mobiel menu) */
.site-nav,
.site-nav-toggle,
.site-mobile-nav__inner {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.site-nav {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  align-items: center;
  gap: 1.65rem;
  margin-top: 0.5rem;
  border-radius: 9999px;
  padding: 0.95rem 1.65rem 0.95rem 1.75rem;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.site-nav__item {
  position: relative;
}

.site-nav__item--has-sub:hover .site-nav__sub,
.site-nav__item--has-sub:focus-within .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav__link.is-active,
.site-nav__link:hover {
  color: var(--dtc-cyan-dark);
}

.site-nav__chevron {
  width: 10px;
  height: 10px;
  margin-top: 1px;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav__item--has-sub:hover .site-nav__chevron,
.site-nav__item--has-sub:focus-within .site-nav__chevron {
  opacity: 1;
  transform: rotate(180deg);
}

.site-nav__sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 60;
  min-width: 240px;
  padding: 0.55rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.site-nav__sublink {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav__sublink:hover,
.site-nav__sublink.is-active,
.site-nav__sublink:focus-visible {
  color: var(--dtc-cyan-dark);
  background: rgba(0, 193, 222, 0.1);
  outline: none;
}

.site-nav__sublink.is-active {
  color: var(--dtc-cyan-dark);
}

.site-nav__sub::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.site-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.15rem;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.site-nav__lang a:last-child {
  font-weight: 800;
}

.site-nav__lang-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d9d9d9;
}

.site-nav-toggle {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 0.5rem;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  pointer-events: auto;
}

.site-nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.site-nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}

.site-nav-toggle__bars span:nth-child(1) { top: 0; }
.site-nav-toggle__bars span:nth-child(2) { top: 6px; }
.site-nav-toggle__bars span:nth-child(3) { top: 12px; }

.site-mobile-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 49;
  padding-top: 0.5rem;
  pointer-events: auto;
}

.site-mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.25rem;
  padding: 1rem 1.15rem;
  font-size: 13px;
  font-weight: 700;
}

.site-mobile-nav__section {
  padding-bottom: 0.55rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.site-mobile-nav__section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.site-mobile-nav__link {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-mobile-nav__link:hover,
.site-mobile-nav__link.is-active {
  color: var(--dtc-cyan-dark);
  background: rgba(255, 255, 255, 0.4);
}

.site-mobile-nav__link--parent {
  margin-bottom: 0.1rem;
}

.site-mobile-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.1rem 0 0.15rem 0.85rem;
  margin-left: 1rem;
  border-left: 2px solid rgba(0, 193, 222, 0.35);
}

.site-mobile-nav__sub a {
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dtc-gray);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-mobile-nav__sub a:hover,
.site-mobile-nav__sub a.is-active {
  color: var(--dtc-cyan-dark);
  background: rgba(255, 255, 255, 0.4);
}

.site-mobile-nav__lang {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dtc-border);
  font-size: 13px;
  color: var(--dtc-gray);
}

/* Avoid the pre-animation hidden state when JS/GSAP is unavailable
   (no-JS, print, reduced motion fallbacks) */
.no-js [data-anim],
.no-js [data-reveal],
.no-js [data-hero] { opacity: 1 !important; transform: none !important; }

/* Scroll reveals — content staat volledig in HTML (SEO).
   Verborgen state alleen met .reveal-enabled (JS + motion), niet bij crawlers zonder JS. */
[data-anim],
[data-reveal] {
  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.reveal-enabled [data-anim]:not(.is-inview),
html.reveal-enabled [data-reveal]:not(.is-inview) {
  opacity: 0;
  transform: translateY(22px);
}

[data-anim].is-inview,
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Optionele stagger binnen een sectie */
html.reveal-enabled [data-reveal-stagger] > .reveal-item:not(.is-inview) {
  opacity: 0;
  transform: translateY(18px);
}

[data-reveal-stagger] > .reveal-item {
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-reveal-stagger] > .reveal-item.is-inview {
  opacity: 1;
  transform: none;
}

/* ---- GLightbox (Ontwikkeling carousel videos) ---- */
.glightbox-container .gslide-description {
  background: #0a0a0a;
}

.glightbox-container .gslide-title {
  color: #fff;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {
  background: rgb(0 193 222 / 92%);
}

.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
  background: #00c1de;
}

/* ---- Video carousel (Innovatie in beweging) ---- */
.dtc-carousel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.dtc-carousel__nav {
  display: flex;
  gap: 0.75rem;
}

.dtc-carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(255 255 255 / 60%);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.dtc-carousel__btn:hover:not(:disabled) {
  background: rgb(255 255 255 / 10%);
  border-color: #fff;
}

.dtc-carousel__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.dtc-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.dtc-carousel__track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.dtc-carousel__slide {
  position: relative;
  flex: 0 0 88%;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

@media (min-width: 640px) {
  .dtc-carousel__slide {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

.dtc-carousel__shade {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 82%), transparent 58%);
}

.dtc-carousel__play {
  pointer-events: none;
  position: absolute;
  left: 1.5rem;
  bottom: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--dtc-cyan);
}

.dtc-carousel__caption {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}

/* ---- Homepage hosted brandmovie (midden) ---- */
.dtc-hosted-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}

/* ---- Homepage hero (video/photo + vormentaal SVG) ---- */
.hero-home {
  --hero-copy-max: 560px;
  --hero-site-max: 1160px;
  /* Mobiel: beeld alleen rechts van titelkolom */
  --hero-media-left: max(38%, calc(1.25rem + min(var(--hero-copy-max), 72vw)));
  min-height: 620px;
  background-color: #fff;
}

.hero-home:not(.hero-home--compact) {
  --hero-copy-max: 540px;
}

@media (min-width: 640px) {
  .hero-home {
    --hero-media-left: max(36%, calc(2rem + var(--hero-copy-max)));
  }
}

@media (min-width: 1024px) {
  .hero-home {
    --hero-copy-offset: calc((100vw - min(100vw, var(--hero-site-max))) / 2);
    --hero-copy-end: calc(var(--hero-copy-offset) + var(--hero-copy-max));
    --hero-media-left: var(--hero-copy-end);
  }

  .hero-home:not(.hero-home--compact) {
    min-height: 700px;
  }

  .hero-home__content {
    max-width: var(--hero-copy-max) !important;
  }
}

@media (min-width: 1280px) {
  .hero-home {
    --hero-site-max: 1240px;
  }
}

@media (min-width: 1536px) {
  .hero-home {
    --hero-site-max: 1320px;
  }
}

@media (min-width: 1920px) {
  .hero-home {
    --hero-site-max: 1400px;
  }
}

.hero-home__stage {
  z-index: 1;
}

/* Grijze onderlaag achter foto/video — zichtbaar vóór beeld infadet */
.hero-home__stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--hero-media-left);
  background-color: #f8f8f8;
  z-index: 0;
}

.hero-home__video,
.hero-home__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--hero-media-left);
  width: calc(100% - var(--hero-media-left));
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center right;
  z-index: 1;
}

/* Voorkom flash vóór GSAP — beeld infadet als laatste achter overlay */
html:not(.no-js) .hero-home__video,
html:not(.no-js) .hero-home__photo,
html:not(.no-js) .hero-home__shapes {
  opacity: 0;
}

.no-js .hero-home__video,
.no-js .hero-home__photo,
.no-js .hero-home__shapes {
  opacity: 1;
}

.hero-home__shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
}

.hero-home__content {
  position: relative;
}

.hero-home:not(.hero-home--compact) .hero-home__content {
  max-width: 540px;
  padding-top: 7.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  .hero-home:not(.hero-home--compact) .hero-home__content {
    padding-top: 11.5rem;
    padding-bottom: 5rem;
  }
}

/* Title line reveal (GSAP yPercent): mask needs room for descenders (g, j, p, y) */
.hero-home__content h1 > span.block.overflow-hidden {
  line-height: 1.18;
  padding-bottom: 0.1em;
}

.hero-home__content h1 [data-hero-line] {
  display: block;
  line-height: inherit;
}

.hero-home__content h1 > span.block.overflow-hidden + span.block.overflow-hidden {
  margin-top: -0.06em;
}

/* Compact subpage hero (e.g. nieuws) — short title, less vertical space */
.hero-home--compact {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.hero-home--compact .hero-home__inner {
  flex: 1;
  justify-content: flex-end;
  padding-top: calc(
    var(--dtc-header-bar-pad-top) + var(--dtc-header-logo-height) + var(--dtc-hero-header-gap)
  );
  padding-bottom: 3.5rem;
}

.hero-home--compact .hero-home__content {
  padding: 0;
}

.hero-home--compact .hero-home__photo {
  object-position: center 35%;
}

@media (min-width: 1024px) {
  .hero-home--compact {
    min-height: 360px;
  }

  .hero-home--compact .hero-home__inner {
    padding-bottom: 5rem;
  }
}

@media (min-width: 1280px) {
  .hero-home--compact .hero-home__inner {
    padding-top: calc(
      var(--dtc-header-bar-pad-top) + var(--dtc-header-logo-height-xl) + var(--dtc-hero-header-gap)
    );
  }
}

@media (max-width: 1023px) {
  .hero-home {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
    --hero-media-left: 0;
  }

  .hero-home .hero-home__stage {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    order: 2;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 11rem;
    max-height: 42vh;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 1;
  }

  .hero-home__stage::before {
    inset: 0;
    left: 0;
  }

  .hero-home__video,
  .hero-home__photo {
    left: 0;
    width: 100%;
    object-position: center 35%;
  }

  .hero-home__shapes {
    object-position: 42% top;
  }

  .hero-home > .relative,
  .hero-home > .hero-home__inner {
    order: 1;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    width: 100%;
    background: #fff;
  }

  .hero-home__content {
    max-width: none;
    padding-top: calc(
      var(--dtc-header-bar-pad-top) + var(--dtc-header-logo-height) + 0.75rem + var(--dtc-hero-header-gap)
    ) !important;
    padding-bottom: 1.25rem !important;
  }

  .hero-home:not(.hero-home--compact) {
    min-height: 0;
  }

  .hero-home--compact {
    min-height: 0;
  }

  .hero-home--compact .hero-home__inner {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 639px) {
  /* Smalle vormentaal-strip links — full-width SVG toont te veel wit op telefoon */
  .hero-home__shapes {
    inset: 0 auto 0 0;
    width: 28%;
    object-fit: cover;
    object-position: 100% center;
  }

  .hero-home__video,
  .hero-home__photo {
    object-position: 62% 35%;
  }
}

/* Nieuwsbrief — verborgen in platte HTML; in WP: Gravity Forms + Mailchimp */
.dtc-newsletter[hidden] {
  display: none !important;
}

/* ---- Cyan dot halftone (newsletter e.a.) -------------------- */
.dtc-halftone {
  background-image: radial-gradient(var(--dtc-cyan) 32%, transparent 33%);
  background-size: 18px 18px;
  background-position: 0 0;
}
.dtc-halftone-fade {
  -webkit-mask-image: linear-gradient(115deg, #000 18%, transparent 72%);
  mask-image: linear-gradient(115deg, #000 18%, transparent 72%);
}
/* diamond halftone used on the dark newsletter band — dots grow toward
   the corner, fading out toward the text */
.dtc-diamond {
  background-image: radial-gradient(var(--dtc-cyan) 45%, transparent 47%);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 130% at 100% 50%, #000 28%, transparent 68%);
  mask-image: radial-gradient(120% 130% at 100% 50%, #000 28%, transparent 68%);
}

/* Homepage ecosystem CTA — gray band + cyan diamond halftone (bottom-right) */
.dtc-ecosystem-band__pattern {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
  shape-rendering: geometricPrecision;
}

.dtc-ecosystem-band > .relative {
  position: relative;
  z-index: 1;
}

.dtc-ecosystem-band .dtc-cta-duo__card {
  border: none;
}

.dtc-ecosystem-band .dtc-cta-duo__card:hover {
  border: none;
}

/* ---- Marquee / ticker (optional reuse) ---------------------- */
@keyframes dtc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Homepage secties (vast uitgeklapt) -------------------- */
.dtc-section > .mx-auto > h2 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.dtc-section > .mx-auto > .dtc-section__body-wrap {
  padding-bottom: 5rem;
}

.dtc-section--dark {
  background-color: #000;
  color: #fff;
}

.dtc-section--light {
  background-color: #fff;
  color: #000;
}

.dtc-section--dark .dtc-section-body {
  color: rgba(255, 255, 255, 0.85);
}

.dtc-section--light .dtc-section-body {
  color: rgba(10, 10, 10, 0.85);
}

.dtc-section--dark .dtc-section-link:hover {
  color: #fff;
}

.dtc-section--light .dtc-section-link:hover {
  color: #000;
}

/* Legacy accordion (niet meer op homepage; behouden voor eventueel hergebruik) */
.dtc-acc-item--dark {
  background-color: #000;
  color: #fff;
}

.dtc-acc-item--light {
  background-color: #fff;
  color: #000;
}

.dtc-acc-item--dark .dtc-acc-body {
  color: rgba(255, 255, 255, 0.85);
}

.dtc-acc-item--light .dtc-acc-body {
  color: rgba(10, 10, 10, 0.85);
}

.dtc-acc-item--dark .dtc-acc-link:hover {
  color: #fff;
}

.dtc-acc-item--light .dtc-acc-link:hover {
  color: #000;
}

.dtc-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.dtc-acc-panel > .dtc-acc-inner { overflow: hidden; min-height: 0; }
.dtc-acc-item.is-open .dtc-acc-panel { grid-template-rows: 1fr; }
.dtc-acc-item.is-open .dtc-acc-bar-v { transform: scaleY(0); }
.dtc-acc-bar-v { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

html.acc-scroll-lock {
  overflow: hidden;
}

body.acc-scroll-lock {
  overflow: hidden;
  touch-action: none;
}

/* Bedrijven-grid (community) */
.dtc-company-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.dtc-company-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--dtc-border, #e5e5e5);
  background: #fff;
  padding: 1.5rem;
  transition: border-color 0.2s ease;
}

.dtc-company-card:hover {
  border-color: var(--dtc-cyan);
}

.dtc-company-card__logo {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
}

.dtc-company-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  line-height: 1.25;
}

.dtc-company-card__addr {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dtc-gray);
}

.dtc-company-card__link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dtc-cyan-dark, #009fb8);
  transition: color 0.2s ease;
}

.dtc-company-card:hover .dtc-company-card__link {
  color: #000;
}

/* ---- Site container (max-w-site) --------------------------- */
/* Tailwind-token = 1160px; schaalt mee op grotere schermen */
.max-w-site {
  max-width: 1160px !important;
}

@media (min-width: 1280px) {
  .max-w-site {
    max-width: 1240px !important;
  }
}

@media (min-width: 1536px) {
  .max-w-site {
    max-width: 1320px !important;
  }
}

@media (min-width: 1920px) {
  .max-w-site {
    max-width: 1400px !important;
  }
}

/* ---- Swup page transitions — 3D skew/scale grid ---- */
#dtc-page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: transparent;
}

#dtc-page-transition.is-active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.dtc-page-transition__stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 0% 0%;
}

.dtc-page-transition__grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 185vmax;
  height: 185vmax;
  display: grid;
  grid-template-columns: repeat(var(--dtc-transition-cols, 24), 1fr);
  grid-template-rows: repeat(var(--dtc-transition-rows, 16), 1fr);
  gap: 0;
  transform: translate(-32%, -28%);
  transform-style: preserve-3d;
}

.dtc-page-transition__tile {
  background: #f8f8f8;
  transform-origin: 0% 0%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.04);
}

/* Tegelkleur: zet TRANSITION_TILE_COLOR op "cyan" in js/swup-init.js */
html.dtc-swup-tiles-cyan .dtc-page-transition__tile {
  background: #02c1de;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.06);
}

/*
 * Optioneel: logo + menu blijven boven de Swup-transitie.
 * Aan/uit via KEEP_HEADER_ABOVE_TRANSITION in js/swup-init.js
 */
html.dtc-swup-persist-header .site-header {
  z-index: 10001;
}

@media (prefers-reduced-motion: reduce) {
  #dtc-page-transition {
    display: none;
  }
}

/* ---- Interactieve campusplattegrond (homepage) ---- */
.dtc-campus-map {
  position: relative;
  overflow: hidden;
  background: #f8f8f8;
}

.dtc-campus-map__stage {
  position: relative;
  line-height: 0;
}

.dtc-campus-map__img {
  display: block;
  width: 100%;
  height: auto;
}

.dtc-campus-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dtc-campus-map__shape {
  fill: rgba(0, 0, 0, 0.001);
  stroke: transparent;
  stroke-width: 0;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.22s ease, stroke 0.22s ease, stroke-width 0.22s ease;
}

[data-campus-map].is-interacting .dtc-campus-map__shape.is-dimmed {
  fill: rgb(255 255 255 / 52%);
}

[data-campus-map].is-interacting .dtc-campus-map__shape.is-active {
  fill: rgba(0, 0, 0, 0.001);
  stroke: #00c1de;
  stroke-width: 2;
}

.dtc-campus-map__shape:focus-visible {
  fill: rgba(0, 193, 222, 0.12);
  stroke: #00c1de;
  stroke-width: 2;
  outline: none;
}

/* Tooltip volgt de cursor (geen overlay op de kaart) */
.dtc-campus-map__cursor-tip {
  position: fixed;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 14px;
  background: #0a0a0a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
}

.dtc-campus-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dtc-campus-tile {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  padding: 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.25s ease, box-shadow 0.2s ease;
}

@media (min-width: 640px) {
  .dtc-campus-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dtc-campus-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .dtc-campus-tile:nth-child(6n) {
    border-right: 0;
  }
}

@media (max-width: 1023px) {
  .dtc-campus-tile:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 639px) {
  .dtc-campus-tile:nth-child(3n) {
    border-right: 1px solid #e5e5e5;
  }

  .dtc-campus-tile:nth-child(2n) {
    border-right: 0;
  }
}

.dtc-campus-tile:hover,
.dtc-campus-tile.is-active {
  background: #f8f8f8;
  box-shadow: inset 0 0 0 2px #00c1de;
}

.dtc-campus-tile.is-dimmed {
  opacity: 0.38;
}

.dtc-campus-tile__logo {
  max-width: 140px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.dtc-campus-tile__name {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #5c5c5c;
}

.dtc-campus-tile.is-active .dtc-campus-tile__name {
  color: #0a0a0a;
}

/* Ruimte huren — flipbook */
.dtc-flipbook__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.dtc-flipbook__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dtc-gray);
}

.dtc-flipbook__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--dtc-cyan-dark, #009fb8);
  text-decoration: none;
}

.dtc-flipbook__link:hover {
  text-decoration: underline;
  color: #000;
}

.dtc-flipbook__frame {
  min-height: 520px;
  background: #eee;
  border: 1px solid var(--dtc-border, #e5e5e5);
}

.dtc-flipbook__frame ._df_book {
  min-height: 520px;
}

/* ---- Play button hover ------------------------------------- */
.dtc-play { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.group:hover .dtc-play { transform: scale(1.08); }

/* ---- Card image zoom on hover ------------------------------ */
.dtc-zoom { transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.group:hover .dtc-zoom { transform: scale(1.05); }

/* ---- Nav underline slide-in -------------------------------- */
.dtc-navlink { position: relative; }
.dtc-navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 100%;
  background: var(--dtc-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dtc-navlink:hover::after { transform: scaleX(1); }

/* ---- Card system (new IA) ---------------------------------- */
.dtc-section-band {
  padding: 5rem 0;
}

@media (min-width: 1024px) {
  .dtc-section-band {
    padding: 8rem 0;
  }
}

.dtc-section-band--dark {
  background: #000;
  color: #fff;
}

.dtc-section-band--light {
  background: #fff;
  color: #0a0a0a;
}

.dtc-section-band--gray {
  background: #f8f8f8;
  color: #0a0a0a;
}

.dtc-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.dtc-eyebrow__line {
  width: 1.5rem;
  height: 2px;
  background: var(--dtc-cyan);
  flex-shrink: 0;
}

.dtc-eyebrow__text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dtc-cyan);
  white-space: nowrap;
}

.dtc-section-band--dark .dtc-eyebrow__text {
  color: var(--dtc-cyan);
}

/* Stat cards */
.dtc-stat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .dtc-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dtc-stat-card {
  border: 1px solid var(--dtc-border);
  background: #fff;
  padding: 1.75rem 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.dtc-stat-card:hover {
  border-color: var(--dtc-cyan);
  transform: translateY(-3px);
}

.dtc-section-band--dark .dtc-stat-card {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 14%);
}

.dtc-section-band--dark .dtc-stat-card:hover {
  border-color: var(--dtc-cyan);
  background: rgb(0 193 222 / 8%);
}

.dtc-stat-card__value {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000;
}

.dtc-section-band--dark .dtc-stat-card__value {
  color: #fff;
}

.dtc-stat-card__label {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dtc-gray);
}

.dtc-section-band--dark .dtc-stat-card__label {
  color: rgb(255 255 255 / 72%);
}

/* Domain / focus — bento mosaic (always-visible copy) */
.dtc-domain-mosaic {
  display: grid;
  gap: 0;
}

@media (min-width: 1024px) {
  .dtc-domain-mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(148px, auto);
  }

  .dtc-domain-panel:nth-child(1) {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }

  .dtc-domain-panel:nth-child(2) {
    grid-column: 8 / 13;
    grid-row: 1;
  }

  .dtc-domain-panel:nth-child(3) {
    grid-column: 8 / 13;
    grid-row: 2;
  }

  .dtc-domain-panel:nth-child(4) {
    grid-column: 1 / 5;
    grid-row: 3;
  }

  .dtc-domain-panel:nth-child(5) {
    grid-column: 5 / 13;
    grid-row: 3;
  }
}

.dtc-domain-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  padding: 1.5rem 1.75rem;
  border: none;
  background: color-mix(in srgb, var(--dtc-cyan) 45%, #fff);
  overflow: hidden;
  transition: background-color 0.25s ease;
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(1) {
  background: color-mix(in srgb, var(--dtc-cyan) 16%, #fff);
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(2) {
  background: color-mix(in srgb, var(--dtc-cyan) 44%, #fff);
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(3) {
  background: var(--dtc-cyan);
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(4) {
  background: color-mix(in srgb, var(--dtc-cyan-dark) 68%, var(--dtc-cyan));
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(5) {
  background: var(--dtc-ink);
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(1):hover,
.dtc-domain-mosaic .dtc-domain-panel:nth-child(1):focus-within {
  background: color-mix(in srgb, var(--dtc-cyan) 24%, #fff);
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(2):hover,
.dtc-domain-mosaic .dtc-domain-panel:nth-child(2):focus-within {
  background: color-mix(in srgb, var(--dtc-cyan) 52%, #fff);
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(3):hover,
.dtc-domain-mosaic .dtc-domain-panel:nth-child(3):focus-within {
  background: color-mix(in srgb, var(--dtc-cyan-dark) 22%, var(--dtc-cyan));
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(4):hover,
.dtc-domain-mosaic .dtc-domain-panel:nth-child(4):focus-within {
  background: color-mix(in srgb, var(--dtc-cyan-dark) 78%, var(--dtc-cyan));
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(5):hover,
.dtc-domain-mosaic .dtc-domain-panel:nth-child(5):focus-within {
  background: color-mix(in srgb, var(--dtc-cyan-dark) 18%, var(--dtc-ink));
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(n + 3) .dtc-domain-panel__title {
  color: #fff;
}

.dtc-domain-mosaic .dtc-domain-panel:nth-child(n + 3) .dtc-domain-panel__body {
  color: rgb(255 255 255 / 78%);
}

.dtc-domain-panel__content {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.dtc-domain-panel__title {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dtc-ink);
}

.dtc-domain-panel__body {
  margin-top: 0.65rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dtc-gray);
}

.dtc-domain-panel--wide {
  min-height: 148px;
}

@media (min-width: 768px) {
  .dtc-domain-panel--wide {
    justify-content: flex-start;
  }

  .dtc-domain-panel--wide .dtc-domain-panel__content {
    display: grid;
    grid-template-columns: minmax(160px, 34%) 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
    max-width: none;
  }

  .dtc-domain-panel--wide .dtc-domain-panel__body {
    margin-top: 0;
  }
}

.dtc-section-band--dark .dtc-domain-panel {
  background: color-mix(in srgb, var(--dtc-cyan) 14%, transparent);
  border: none;
}

.dtc-section-band--dark .dtc-domain-panel__title {
  color: #fff;
}

.dtc-section-band--dark .dtc-domain-panel__body {
  color: rgb(255 255 255 / 72%);
}

/* Pillar cards — Verbinden / Bouwen / Ontvouwen */
.dtc-pillar-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .dtc-pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dtc-pillar-card {
  border: 1px solid var(--dtc-border);
  background: #fff;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.dtc-pillar-card:hover {
  border-color: var(--dtc-cyan);
  background: rgb(0 193 222 / 6%);
}

.dtc-pillar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  background: var(--dtc-cyan);
}

.dtc-pillar-card__title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.dtc-pillar-card__body {
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dtc-gray);
}

/* Dual CTA block */
.dtc-cta-duo {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .dtc-cta-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dtc-cta-duo__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 4%);
  padding: 2rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.dtc-cta-duo__card:hover {
  border-color: var(--dtc-cyan);
  background: rgb(0 193 222 / 10%);
}

.dtc-cta-duo__card--light {
  border-color: var(--dtc-border);
  background: #fff;
}

.dtc-cta-duo__card--light:hover {
  border-color: var(--dtc-cyan);
  background: rgb(0 193 222 / 4%);
}

.dtc-cta-duo__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.dtc-cta-duo__card--light .dtc-cta-duo__title {
  color: #000;
}

.dtc-cta-duo__body {
  font-size: 15px;
  line-height: 1.55;
  color: rgb(255 255 255 / 75%);
}

.dtc-cta-duo__card--light .dtc-cta-duo__body {
  color: var(--dtc-gray);
}

/* Person card */
.dtc-person-card {
  display: flex;
  gap: 1.25rem;
  border: 1px solid var(--dtc-border);
  background: #fff;
  padding: 1.5rem;
}

.dtc-person-card__photo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.dtc-person-card__initials {
  display: flex;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dtc-cyan);
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

.dtc-person-card__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dtc-cyan-dark);
}

.dtc-person-card__name {
  margin-top: 0.35rem;
  font-size: 17px;
  font-weight: 700;
  color: #000;
}

.dtc-person-card__contact {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dtc-gray);
}

/* Info card */
.dtc-info-card {
  border: 1px solid var(--dtc-border);
  background: #fff;
  padding: 1.5rem;
}

.dtc-info-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.dtc-info-card__body {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dtc-gray);
}

.dtc-info-card__body ul {
  margin-top: 0.5rem;
  list-style: disc;
  padding-left: 1.25rem;
}

.dtc-info-card__body li + li {
  margin-top: 0.35rem;
}

/* Light-surface cards inside dark sections inherit white text — reset */
.dtc-section-band--dark .dtc-info-card,
.dtc-section-band--dark .dtc-person-card,
section.bg-black .dtc-info-card,
section.bg-black .dtc-person-card {
  color: var(--dtc-ink);
}

.dtc-section-band--dark .dtc-info-card dl,
section.bg-black .dtc-info-card dl {
  color: var(--dtc-ink);
}

.dtc-section-band--dark .dtc-info-card dt,
section.bg-black .dtc-info-card dt {
  color: var(--dtc-gray);
}

.dtc-section-band--dark .dtc-info-card dd:not([class*="text-dtc-gray"]),
section.bg-black .dtc-info-card dd:not([class*="text-dtc-gray"]) {
  color: var(--dtc-ink) !important;
}

.dtc-section-band--dark .dtc-info-card__body,
.dtc-section-band--dark .dtc-info-card__body > :not([class*="text-"]),
section.bg-black .dtc-info-card__body,
section.bg-black .dtc-info-card__body > :not([class*="text-"]) {
  color: var(--dtc-gray);
}

.dtc-section-band--dark .dtc-person-card__contact,
section.bg-black .dtc-person-card__contact {
  color: var(--dtc-gray);
}

/* Logo grid */
.dtc-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--dtc-border);
  border: 1px solid var(--dtc-border);
}

@media (min-width: 640px) {
  .dtc-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dtc-logo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.dtc-logo-grid__item {
  display: flex;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 1.25rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dtc-logo-grid__item:hover {
  background: #f8f8f8;
  box-shadow: inset 0 0 0 2px var(--dtc-cyan);
}

.dtc-logo-grid__item img {
  max-width: 120px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.dtc-logo-grid__placeholder {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--dtc-gray);
}

/* Filter chips (community directory) — pill buttongroup, nav-stijl */
.dtc-filter-bar {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dtc-filter-bar::-webkit-scrollbar {
  display: none;
}

.dtc-filter-bar__indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  background: #02c1de;
  border-radius: 9999px;
  pointer-events: none;
  transition:
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, width;
}

.dtc-filter-chip {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0.75rem 1.15rem;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.dtc-filter-chip:hover,
.dtc-filter-chip:focus-visible {
  color: var(--dtc-cyan-dark);
  outline: none;
}

.dtc-filter-chip.is-active {
  color: #fff;
}

.dtc-filter-chip.is-active:hover,
.dtc-filter-chip.is-active:focus-visible {
  color: #fff;
}

@media (max-width: 639px) {
  .dtc-filter-chip {
    padding: 0.65rem 0.95rem;
    font-size: 11px;
  }
}

.dtc-company-card.is-hidden {
  display: none;
}

/* News card reuse */
.dtc-news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dtc-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}

.dtc-news-card:hover {
  border-color: var(--dtc-cyan);
}

.dtc-news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dtc-news-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  padding: 2rem;
}

.dtc-news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

/* News article detail — geen hero; ruimte onder absolute header */
.dtc-news-article.bg-white {
  padding-top: var(--dtc-scroll-offset);
}

@media (min-width: 1024px) {
  .dtc-news-article.bg-white {
    padding-top: var(--dtc-scroll-offset);
  }
}

.dtc-news-article__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dtc-news-article__body p + p {
  margin-top: 0;
}

/* Compact map preview on homepage */
.dtc-map-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dtc-border);
}

.dtc-map-preview__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, rgb(0 0 0 / 65%), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.reveal-enabled [data-anim],
  html.reveal-enabled [data-reveal],
  html.reveal-enabled [data-reveal-stagger] > .reveal-item,
  [data-anim], [data-reveal], [data-hero] { opacity: 1 !important; transform: none !important; }
}