/**
 * Transport content accordion — layout & design tokens
 * Namespace: mol-tsca
 */

/* Global: prevent fixed-width images from causing horizontal overflow */
img.breakdance-image-object {
  max-width: 100% !important;
  height: auto !important;
}

/* Smooth-scroll for hero anchor CTA happens via JS handler on
   [data-mol-scroll-link]. Earlier attempts at html { scroll-behavior: smooth }
   bled into child scroll containers (history slider) and broke horizontal
   scroll. scroll-margin-top on [id^="mol-section-"] also caused widespread
   issues so we now apply scroll offset inside the JS handler instead. */

.mol-tsca {
  --mol-tsca-navy: #0a1628;
  --mol-tsca-muted: #6b7280;
  --mol-tsca-kobalt: #00235c;
  --mol-tsca-border: #e5e7eb;
  --mol-tsca-yellow: #f5c518;
  --mol-tsca-img-radius-tr: 80px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1512px;
  overflow: hidden;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 96px);
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mol-tsca__item {
  border-bottom: 1px solid var(--mol-tsca-border);
}

/* Target .mol-tsca__intro-title and .mol-tsca__type-body with Breakdance global styles / presets. */

.mol-tsca__item--lead.is-active {
  border-top: 0;
}

.mol-tsca__item--lead.is-active .mol-tsca__trigger--lead {
  display: none;
}

.mol-tsca__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--mol-tsca-kobalt);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

.mol-tsca__trigger:focus-visible {
  outline: 2px solid var(--mol-tsca-kobalt);
  outline-offset: 2px;
}

.mol-tsca__trigger-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mol-tsca-kobalt);
}

.mol-tsca__trigger-icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--mol-tsca-border);
  border-radius: 999px;
  background: transparent;
}

.mol-tsca__trigger-icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--mol-tsca-kobalt);
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

.mol-tsca__trigger-icon-line--h {
  width: 12px;
  height: 2px;
}

.mol-tsca__trigger-icon-line--v {
  width: 2px;
  height: 12px;
}

.mol-tsca__item.is-active .mol-tsca__trigger-icon-line--v {
  opacity: 0;
}

.mol-tsca__panel {
  overflow: hidden;
}

.mol-tsca__panel[hidden] {
  display: none;
}

.mol-tsca__panel-inner {
  padding-bottom: 2.5rem;
  max-width: 100%;
  overflow: hidden;
}

/* PageKings-feedback 2026-08-10 (must-have, desktop + mobiel): de tekst stond
   te dicht op de afbeelding. Was 1,75rem (28px) kolomruimte op een blok van
   ruim 1240px breed, en 2rem eronder op mobiel. Geldt voor alle
   oplossingspaginas, want dit blok staat overal. */
.mol-tsca__grid {
  display: grid;
  row-gap: 2.5rem;
  column-gap: 2rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .mol-tsca__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 64px);
  }
}

.mol-tsca__grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* image_position="right": swap media to second column via order */
.mol-tsca--image-right .mol-tsca__media {
  order: 2;
}
.mol-tsca--image-right .mol-tsca__body {
  order: 1;
}

/* background="transparent" */
.mol-tsca--transparent,
.mol-tsca--transparent .mol-tsca__panel-inner,
.mol-tsca--transparent .mol-tsca__item {
  background: transparent !important;
}

/* background="light" — soft grey surface (mission/vision section on /about/).
   The grey must bleed edge-to-edge, so it's painted on the section wrapper
   (.mol-logistics__section--strengths_grey / --strengths_right_grey) which is
   full-width, plus on .mol-tsca.mol-tsca--light (specificity 0,2,0 so it wins
   over the later `.mol-tsca { background:#fff !important }` rule). */
.mol-logistics__section--strengths_grey,
.mol-logistics__section--strengths_right_grey,
.mol-tsca.mol-tsca--light,
.mol-tsca.mol-tsca--light .mol-tsca__panel,
.mol-tsca.mol-tsca--light .mol-tsca__panel-inner,
.mol-tsca.mol-tsca--light .mol-tsca__item,
.mol-tsca.mol-tsca--light .mol-tsca__trigger {
  background: #f4f5f7 !important;
  background-color: #f4f5f7 !important;
  background-image: none !important;
}

.mol-tsca__media {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.mol-tsca__img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  border-top-right-radius: var(--mol-tsca-img-radius-tr);
}

/* Team-cards grid variant: replaces the single mol-tsca__img with a
   /our-specialists-style cards grid (photo + name + role) when the post
   has a `mission_team_cards` ACF repeater filled in. Reuses .mol-ps-card
   markup so the team-card design stays consistent across the site. */
.mol-tsca__media--team-grid {
  overflow: visible !important;
}
.mol-ps-team__grid--embedded {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.mol-ps-team__grid--embedded[data-card-count="3"],
.mol-tsca__media--team-grid[data-card-count="3"] .mol-ps-team__grid--embedded {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Scale the card down for the constrained mol-tsca media slot.
   Default mol-ps-card height (470px) is too tall here. */
.mol-ps-team__grid--embedded .mol-ps-card {
  height: 340px !important;
  padding: 10px !important;
  border-radius: 10px !important;
}
.mol-ps-team__grid--embedded .mol-ps-card__body {
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  padding: 12px 16px 14px !important;
  gap: 8px !important;
}
.mol-ps-team__grid--embedded .mol-ps-card__name {
  font-size: 18px !important;
}
.mol-ps-team__grid--embedded .mol-ps-card__role {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.mol-ps-team__grid--embedded .mol-ps-card__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}
@media (max-width: 720px) {
  .mol-ps-team__grid--embedded,
  .mol-tsca__media--team-grid[data-card-count] .mol-ps-team__grid--embedded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mol-ps-team__grid--embedded .mol-ps-card { height: 300px !important; }
}
@media (max-width: 480px) {
  .mol-ps-team__grid--embedded,
  .mol-tsca__media--team-grid[data-card-count] .mol-ps-team__grid--embedded {
    grid-template-columns: 1fr !important;
  }
  .mol-ps-team__grid--embedded .mol-ps-card { height: 380px !important; }
}

.mol-tsca__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
  justify-self: stretch;
}

.mol-tsca__intro-title {
  margin: 0;
  font-weight: inherit;
}

.mol-tsca__subtitle {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 700;
  color: #00235c !important;
  line-height: 1.2;
}

.mol-tsca.breakdance h3.mol-tsca__subtitle,
.mol-tsca.breakdance .mol-tsca__body h3,
.mol-tsca.breakdance h3.bde-heading-113-204,
.mol-tsca.breakdance .mol-tsca__body .bde-heading-113-204 {
  color: #00235c !important;
}

.mol-tsca__type-body {
  color: var(--mol-tsca-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.mol-tsca__type-body > p:first-child {
  margin-top: 0;
}

.mol-tsca__type-body > p:last-child {
  margin-bottom: 0;
}

.mol-tsca__type-body p {
  margin: 0 0 0.85em;
}

.mol-tsca__type-body ul {
  margin: 0.75em 0 0;
  padding: 0;
  list-style: none;
}

.mol-tsca__type-body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.mol-tsca__type-body ul li:last-child {
  margin-bottom: 0;
}

.mol-tsca__type-body ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  color: var(--mol-tsca-muted);
  line-height: 1.65;
}

.mol-tsca__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.35rem 0.55rem 0.35rem 1.1rem;
  border: 1px solid var(--mol-tsca-border);
  border-radius: 999px;
  background: transparent;
  color: #00235c !important;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  min-height: 0 !important;
  vertical-align: middle;
}

.mol-tsca__link.bde-container-link-113-245,
.mol-tsca__link.bde-container-link {
  min-height: unset !important;
  height: auto !important;
}

.mol-tsca__link:hover {
  opacity: 0.9;
}

.mol-tsca__link:focus-visible {
  outline: 2px solid var(--mol-tsca-kobalt);
  outline-offset: 2px;
}

.mol-tsca__link-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1.2;
}

.mol-tsca__link .bde-text-113-247 {
  color: #00235c !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
  font-size: inherit;
  font-weight: 600;
}

.mol-tsca__link .bde-icon-113-248 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 0;
  background: var(--mol-tsca-yellow);
  color: #00235c;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-tsca__link .bde-icon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.mol-tsca__link .bde-icon-icon svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
  fill: currentColor;
}

/* ─── Industry tabs (relationship industries_for_this_service) ─── */
/* Force the wrapping Breakdance section to white wherever the industries
   tabs block lives. Some product-page editors had set a grey section bg
   (#f9fafb) that bled through around the mol-tsci block. */
.bde-section:has(.mol-tsci) {
    --bde-background-color: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

.mol-tsci {
  /* Same tokens as .mol-tsca — needed when only the industry block is on the page */
  --mol-tsca-navy: #0a1628;
  --mol-tsca-muted: #6b7280;
  --mol-tsca-border: #e5e7eb;
  --mol-tsca-kobalt: #00235c;
  --mol-tsca-yellow: #f5c518;
  --mol-tsci-card-bg: #4478c3;
  --mol-tsci-card-bg-gradient: linear-gradient(145deg, #3568b5 0%, #4478c3 50%, #5589d4 100%);
  --mol-tsci-card-radius-tr: 80px;
  /* Force white bg — Breakdance class paints --bde-background-color (#f9fafb).
     Same fix pattern as .mol-tsca. Editor on warehousing page flagged the
     "Our Industries" block as having an unwanted grey background. */
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-sizing: border-box;
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 96px) clamp(64px, 8vw, 120px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mol-tsci__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin: 0 0 clamp(40px, 5vw, 64px) !important;
  max-width: 880px !important;
}

.mol-tsci__eyebrow {
  margin: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mol-tsca-kobalt) !important;
}

.mol-tsci__title {
  margin: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-tsca-kobalt) !important;
  text-transform: none !important;
}

.mol-tsci__intro {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--mol-tsca-muted) !important;
  max-width: 640px !important;
}

.mol-tsci__tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  width: 100%;
  margin-bottom: 2rem;
  border-top: 1px solid var(--mol-tsca-border);
  border-left: 1px solid var(--mol-tsca-border);
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  .mol-tsci__tablist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mol-tsci__tab {
  box-sizing: border-box;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 0.75rem;
  margin: 0;
  background: #fff;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  border-right: 1px solid var(--mol-tsca-border);
  border-bottom: 1px solid var(--mol-tsca-border);
  cursor: pointer;
  text-align: center;
  color: var(--mol-tsca-kobalt);
  box-shadow: inset 0 0 0 transparent;
  transition: box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.mol-tsci__tab:hover:not(.is-active) {
  opacity: 0.8;
}

.mol-tsci__tab:focus-visible {
  outline: 2px solid var(--mol-tsca-kobalt);
  outline-offset: 2px;
  border-radius: 4px;
}

.mol-tsci__tab:hover:not(.is-active) {
  background: #f5f7fb;
}

.mol-tsci__tab:focus-visible {
  outline: 2px solid var(--mol-tsca-kobalt);
  outline-offset: -2px;
}

.mol-tsci__tab.is-active {
  background: #f0f2f5;
  box-shadow: none;
  color: var(--mol-tsca-kobalt);
}

.mol-tsci__tab.is-active .mol-tsci__tab-label {
  font-weight: 700;
  color: var(--mol-tsca-kobalt);
}

.mol-tsci__tab-icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--mol-tsca-border);
  background: #f5f7fb;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.mol-tsci__tab-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.mol-tsci__tab.is-active .mol-tsci__tab-icon-ring {
  background: var(--mol-tsca-yellow);
  border-color: transparent;
}

.mol-tsci__tab.is-active .mol-tsci__tab-icon {
  filter: none;
}

.mol-tsci__tab-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  max-width: 100%;
  /* Labels like "Aerospace and Marine parts logistics" wrap to multiple
     lines on mobile instead of being ellipsis-truncated. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
}

@media (max-width: 899px) {
  /* Industries tablist switches to horizontal-scroll on mobile so it
     visually matches the homepage industries grid (mol-hp4) and avoids
     the chunky 2x4 grid that takes up half the viewport. */
  .mol-tsci__tablist {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 -24px !important;
    padding: 0 24px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%) !important;
            mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%) !important;
  }
  .mol-tsci__tablist::-webkit-scrollbar { display: none !important; }

  .mol-tsci__tab,
  button.mol-tsci__tab {
    aspect-ratio: auto !important;
    flex: 0 0 180px !important;
    width: 180px !important;
    min-height: 132px !important;
    padding: 16px 12px !important;
    border: 1px solid var(--mol-tsca-border) !important;
    scroll-snap-align: start !important;
  }
  .mol-tsci__tab-label {
    font-size: 0.8125rem;
  }
}

.mol-tsci__panels {
  position: relative;
}

.mol-tsci__panel {
  overflow: hidden;
}

.mol-tsci__panel[hidden],
.mol-tsci__panel.mol-tsci--panel-hidden {
  display: none !important;
}

.mol-tsci__panel-inner {
  padding-bottom: 2.5rem;
}

.mol-tsci__cards {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .mol-tsci__cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.mol-tsci__card {
  margin: 0;
  min-width: 0;
  border-radius: 0;
  border-top-right-radius: var(--mol-tsci-card-radius-tr);
  overflow: hidden;
}

.mol-tsci__card--copy,
.mol-tsci__card--visual {
  aspect-ratio: 1 / 1;
}

/* Mobile: drop the 1:1 aspect and inner scrollbar on the copy card.
   At <=412px width the square card couldn't fit the body copy, which
   surfaced an ugly vertical scrollbar inside the blue card. Let the
   card grow with its content instead. */
@media (max-width: 899px) {
  .mol-tsci__card--copy,
  .mol-tsci__card--visual {
    aspect-ratio: auto !important;
  }
  .mol-tsci__card--copy {
    overflow-y: visible !important;
    min-height: 0 !important;
  }
}

.mol-tsci__card--copy {
  background: var(--mol-tsci-card-bg-gradient);
  color: #fff;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.mol-tsci__card--copy::before,
.mol-tsci__card--copy::after {
  content: none;
}

.mol-tsci__heading {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
}

.mol-tsci.breakdance .mol-tsci__heading {
  color: #fff !important;
}

.mol-tsci__body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
}

.mol-tsci.breakdance .mol-tsci__body,
.mol-tsci.breakdance .mol-tsci__body p,
.mol-tsci.breakdance .mol-tsci__body li {
  color: rgba(255, 255, 255, 0.95) !important;
}

.mol-tsci__body > p:first-child {
  margin-top: 0;
}

.mol-tsci__body > p:last-child {
  margin-bottom: 0;
}

.mol-tsci__body p {
  margin: 0 0 0.85em;
}

.mol-tsci__body ul {
  margin: 0.75em 0 0;
  padding: 0;
  list-style: none;
}

.mol-tsci__body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.mol-tsci__body ul li:last-child {
  margin-bottom: 0;
}

.mol-tsci__body ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
}

.mol-tsci__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: transparent;
  color: #fff !important;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mol-tsci__link:hover {
  opacity: 0.92;
}

.mol-tsci__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mol-tsci__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--mol-tsca-yellow);
  color: #fff;
}

.mol-tsci__link-icon svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

/* Grid-stack: img + caption in the same cell → overlay at bottom, even if figure is flex from theme */
.mol-tsci__card--visual {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
  overflow: hidden;
}

.mol-tsci__visual-img {
  grid-row: 1;
  grid-column: 1;
  position: relative !important;
  width: 100%;
  height: 100%;
  inset: unset !important;
  z-index: 0;
  display: block;
  object-fit: cover;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
}

.mol-tsci__visual-caption {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.75rem;
  background: linear-gradient(to top, rgba(10, 22, 40, 0.88), transparent);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: none;
}

.mol-tsci__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.35rem 0.65rem;
  background: var(--mol-tsca-kobalt);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.mol-tsci__insight {
  margin: 0;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

/* ─── Shortcode wrapper (.mol-logistics-stack) ─── */
.mol-logistics-stack {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Sections butt directly against each other — every section template
   already supplies its own vertical padding/rhythm. */
.mol-logistics-stack > .mol-logistics__section:not(:last-child) {
  margin-bottom: 0;
}

/* What we do: no white “card” panel from the shortcode section (Breakdance blue stays visible). */
.mol-logistics-stack > .mol-logistics__section--what_we_do {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mol-logistics-stack > .mol-logistics__section--what_we_do.breakdance,
section.mol-logistics__section--what_we_do {
  background: transparent !important;
}

/* White panel: direct Breakdance wrapper around the slider (same column as title/filters). */
[class*="bde-column"]:has(.mol-wwd),
[class*="bde-div"]:has(.mol-wwd),
[class*="bde-row"]:has(.mol-wwd),
[class*="bde-columns"]:has(.mol-wwd) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mol-logistics-stack:has(.mol-wwd) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Core values EN: geen eigen paneel-achtergrond (pagina/Breakdance kleur blijft zichtbaar). */
.mol-logistics-stack > .mol-logistics__section--core_values_en {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mol-logistics-stack > .mol-logistics__section--core_values_en.breakdance,
section.mol-logistics__section--core_values_en {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.mol-core-values-en,
.mol-core-values-en__grid,
.mol-core-values-en__item,
.mol-core-values-en__card {
  background: transparent !important;
  background-color: transparent !important;
}

.mol-logistics-stack:has(.mol-core-values-en) {
  background: transparent !important;
  box-shadow: none !important;
}

[class*="bde-column"]:has(.mol-core-values-en),
[class*="bde-div"]:has(.mol-core-values-en),
[class*="bde-row"]:has(.mol-core-values-en),
[class*="bde-columns"]:has(.mol-core-values-en) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ─── FAQ (Figma: 2-col header on top, divider, then aside + accordion) ─── */
.mol-faq-section {
  --mol-faq-kobalt: #00235c;
  --mol-faq-divider: rgba(0, 35, 92, 0.25);
  --mol-faq-ice: #eef7ff;
  --mol-faq-sunflower: #f9b638;
  --mol-faq-pad-x: clamp(24px, 6vw, 96px);
  --mol-faq-pad-y: clamp(72px, 9vw, 145px);
  --mol-faq-content-max: 1512px;
  --mol-faq-section-gap: clamp(40px, 4.5vw, 64px);
  --mol-faq-aside-w: 424px;
  --mol-faq-aside-img-radius-tr: 40px;
  --mol-faq-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-faq-font-body: "Montserrat", system-ui, sans-serif;

  box-sizing: border-box;
  width: 100%;
  max-width: var(--mol-faq-content-max);
  margin: 0 auto;
  padding: var(--mol-faq-pad-y) var(--mol-faq-pad-x);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: var(--mol-faq-section-gap);
  font-family: var(--mol-faq-font-body);
  color: var(--mol-faq-kobalt) !important;
}

.mol-faq-section *,
.mol-faq-section *::before,
.mol-faq-section *::after {
  box-sizing: border-box !important;
}

/* Header — eyebrow LEFT (small column at viewport edge), title RIGHT */
.mol-faq-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px) clamp(24px, 4vw, 80px);
  align-items: start;
  margin: 0;
}

/* De header had andere kolommen dan de body eronder: 38% + een gap van 57px
   tegenover 424px + 24px. Daardoor begon de titel op 626px terwijl de intro en
   de vragen op 578px beginnen. Nu dezelfde kolommen als .mol-faq-section__body,
   plus dezelfde inspringing als .mol-faq-section__list, zodat eyebrow op de
   aside uitlijnt en de titel op de vragen.
   PageKings-feedback 2026-08-10, must-have, desktop. Op mobiel is alles al
   een kolom en stond het al goed. */
@media (min-width: 900px) {
  .mol-faq-section__header {
    grid-template-columns: var(--mol-faq-aside-w) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

}

.mol-faq-section__eyebrow {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  font-family: var(--mol-faq-font-body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-faq-kobalt) !important;
}

.mol-faq-section__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-faq-font-display) !important;
  font-weight: 400 !important;
  /* V2 (2026-05-08): even iets kleiner — Amarildo gaf opnieuw aan dat
     de FAQ-titel te groot voelt. Was clamp(28, 3vw, 38) na B5. */
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-faq-kobalt) !important;
  text-transform: none !important;
  max-width: 720px;
}

/* Zelfde inspringing als .mol-faq-section__list, zodat de titel op de intro en
   de vragen uitlijnt. Moet NA het blok hierboven staan: dat zet
   padding: 0 !important, en bij gelijke specificiteit wint de laatste regel. */
@media (min-width: 900px) {
  .mol-faq-section__title {
    padding-left: clamp(0px, 3vw, 48px) !important;
  }
}

/* Zonder expertkaart krijgt de body de klasse --solo en wordt hij een
   gecentreerde kolom van 920px. De header bleef daar een tweekolomsgrid, dus
   zweefde de titel rechts van de vragen. Op die pagina's volgt de header nu
   hetzelfde blok en krijgen eyebrow en titel dezelfde inspringing als de
   vragenlijst, zodat alles op één lijn begint. Twee van de drie FAQ-pagina's
   zijn solo (air-freight en road-transport), dus dit is geen randgeval. */
@media (min-width: 900px) {
  .mol-faq-section:has(.mol-faq-section__body--solo) .mol-faq-section__header {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
  }

  .mol-faq-section:has(.mol-faq-section__body--solo) .mol-faq-section__eyebrow {
    padding-left: clamp(0px, 3vw, 48px) !important;
  }
}

/* B5+V2: section wrapper white. Amarildo zag op sommige pages nog grijs
   doorlekken — we forceren wit nu ook op de Breakdance scoping en de
   parent-stack zodat geen --bde-background-color uitschuilt. */
.mol-logistics__section--faq,
.mol-logistics-stack > .mol-logistics__section--faq,
.mol-logistics-stack:has(.mol-faq-section),
.breakdance .mol-faq-section,
.mol-faq-section.breakdance {
  background: #ffffff !important;
}

/* B5: when no aside (no image, no expert block), accordion takes the
   center column with comfortable max-width. Triggers stay left-aligned
   for readability. */
.mol-faq-section__body--solo {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 900px) {
  .mol-faq-section__body--solo {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.mol-faq-section__body--solo .mol-faq-section__list {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

.mol-faq-section__divider {
  width: 100%;
  height: 1px;
  background: var(--mol-faq-divider);
  margin: 0;
}

/* Body — aside (image + expert) LEFT, accordion list RIGHT */
.mol-faq-section__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .mol-faq-section__body {
    grid-template-columns: var(--mol-faq-aside-w) minmax(0, 1fr);
    gap: 24px;
  }
}

.mol-faq-section__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: var(--mol-faq-aside-w);
}

.mol-faq-section__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0 var(--mol-faq-aside-img-radius-tr) 0 0;
  background: #f3f4f6;
}

.mol-faq-section__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Expert CTA — avatars pill + label + link with arrow */
.mol-faq-section__expert {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.mol-faq-section__avatars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--mol-faq-ice);
  box-shadow: 0px 5.76px 43.2px rgba(66, 76, 150, 0.05);
  border-radius: 144px;
  flex: none;
}

.mol-faq-section__avatars-stack {
  display: inline-flex;
  align-items: center;
}

.mol-faq-section__avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
  flex: none;
  margin-right: -16px;
  border: 2px solid #ffffff;
}

.mol-faq-section__avatar:last-child {
  margin-right: 0;
}

.mol-faq-section__expert-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mol-faq-section__expert-top {
  font-family: var(--mol-faq-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-faq-kobalt) !important;
}

.mol-faq-section__expert-link,
a.mol-faq-section__expert-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  font-family: var(--mol-faq-font-body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-faq-kobalt) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
}

.mol-faq-section__expert-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--mol-faq-kobalt);
}

.mol-faq-section__expert-link-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mol-faq-section__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

@media (min-width: 900px) {
  .mol-faq-section__list {
    padding-left: clamp(0px, 3vw, 48px);
  }
}

.mol-faq-section__intro {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-faq-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-faq-kobalt) !important;
  max-width: 720px;
}

.mol-faq {
  --mol-faq-border: var(--mol-faq-divider);
  box-sizing: border-box;
  width: 100%;
  font-family: var(--mol-faq-font-body);
  display: flex;
  flex-direction: column;
}

.mol-faq-section .mol-faq {
  /* alignment is on the outer .mol-faq-section now; reset legacy padding */
  max-width: none;
  margin: 0;
  padding: 0;
}

/* B5: more vertical breathing room per item — keep the divider line away
   from the +/- icon by padding both top and bottom of the trigger,
   regardless of expanded state. */
.mol-faq__item {
  border-top: 1px solid var(--mol-faq-divider) !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  /* V2-revisit (screenshot 2026-05-08): Breakdance was painting its
     --bde-background-color (light grey-50) on the .breakdance scoped
     accordion items. Force transparent so the section's white surface
     stays the only background. */
  background: transparent !important;
}

.mol-faq__panel,
.mol-faq__panel-inner,
.mol-faq__answer,
.mol-faq__answer.wp-content {
  background: transparent !important;
}

/* V2-revisit (2026-05-09): the .mol-faq wrapper itself (the <div> that
   contains the items) was still painted grey-50 by Breakdance's default
   --bde-background-color. Force transparent on that wrapper too. */
.mol-faq,
.mol-faq.breakdance,
.breakdance .mol-faq {
  background: transparent !important;
}

.mol-faq__item:first-child {
  border-top: 0 !important;
}

.mol-faq__item:last-child {
  border-bottom: 0 !important;
}

.mol-faq__trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 3vw, 48px) !important;
  padding: 28px 0 28px 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  font: inherit !important;
  color: var(--mol-faq-kobalt) !important;
}

.mol-faq__item:not(.is-active) .mol-faq__trigger {
  /* keep the same vertical rhythm whether expanded or collapsed */
  padding-bottom: 28px !important;
}

.mol-faq__trigger:focus-visible {
  outline: 2px solid var(--mol-faq-kobalt);
  outline-offset: 2px;
}

.mol-faq__question {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-faq-font-display) !important;
  font-size: clamp(18px, 1.7vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--mol-faq-kobalt) !important;
  text-transform: none !important;
}

.mol-faq__trigger-icon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.mol-faq__icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--mol-faq-kobalt);
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

.mol-faq__icon-line--h {
  width: 12px;
  height: 2px;
}

.mol-faq__icon-line--v {
  width: 2px;
  height: 12px;
  transition: opacity 0.2s ease;
}

.mol-faq__item.is-active .mol-faq__icon-line--v {
  opacity: 0;
}

.mol-faq__panel {
  overflow: hidden;
}

.mol-faq__panel[hidden] {
  display: none;
}

.mol-faq__panel-inner {
  padding: 0 0 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-width: calc(100% - 56px);
}

@media (max-width: 600px) {
  .mol-faq__panel-inner {
    padding: 0 0 16px 0 !important;
  }
}

.mol-faq__answer {
  margin: 0 !important;
  color: var(--mol-faq-kobalt) !important;
  font-family: var(--mol-faq-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-faq__answer > p:first-child {
  margin-top: 0 !important;
}

.mol-faq__answer > p:last-child {
  margin-bottom: 0 !important;
}

.mol-faq__answer p {
  margin: 0 0 0.6em !important;
}

.mol-faq__link {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 48px !important;
  height: 48px !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 8px 8px 8px 24px !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mol-faq-kobalt) !important;
  font-family: var(--mol-faq-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 160ms ease, border-color 160ms ease !important;
  box-sizing: border-box !important;
}

.mol-faq.breakdance .mol-faq__link.bde-container-link,
.mol-faq .mol-faq__link.breakdance-link {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: auto !important;
  min-height: unset !important;
  height: auto !important;
}

.mol-faq__link:hover {
  opacity: 0.92;
}

.mol-faq__link:focus-visible {
  outline: 2px solid var(--mol-faq-kobalt);
  outline-offset: 2px;
}

.mol-faq__link-label {
  display: inline !important;
  flex: 0 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
}

.mol-faq__link:hover,
.mol-faq__link:focus-visible {
  background: rgba(0, 35, 92, 0.04) !important;
  border-color: rgba(0, 35, 92, 0.4) !important;
}

.mol-faq__link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border-radius: 999px !important;
  background: var(--mol-faq-sunflower) !important;
  color: var(--mol-faq-kobalt) !important;
  box-sizing: border-box !important;
  transition: transform 160ms ease !important;
}

.mol-faq__link:hover .mol-faq__link-icon,
.mol-faq__link:focus-visible .mol-faq__link-icon {
  transform: translateX(2px);
}

.mol-faq__link-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

.mol-faq.breakdance .mol-faq__question {
  color: var(--mol-faq-kobalt) !important;
}

.mol-faq.breakdance .mol-faq__answer,
.mol-faq.breakdance .mol-faq__answer p {
  color: var(--mol-faq-kobalt) !important;
}

/* ─── Policies accordion (ACF repeater `policies`) — zelfde font-stack als FAQ ─── */
.mol-policies {
  --mol-policies-kobalt: #00235c;
  --mol-policies-desc: #4a5f7a;
  --mol-policies-border: #e0e6ed;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden;
}

.mol-policies *,
.mol-policies *::before,
.mol-policies *::after {
  box-sizing: border-box;
}

/* Zelfde als mol-hist-slider: voorkom horizontale page-scroll door flex-kolommen / content-box */
html:has(.mol-policies),
body:has(.mol-policies) {
  overflow-x: hidden;
  max-width: 100%;
}

main:has(.mol-policies),
article:has(.mol-policies) {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.mol-policies__item {
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid var(--mol-policies-border);
}

.mol-policies__item:last-child {
  border-bottom: 1px solid var(--mol-policies-border);
}

.mol-policies__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--mol-policies-kobalt);
}

.mol-policies__trigger:focus-visible {
  outline: 2px solid var(--mol-policies-kobalt);
  outline-offset: 2px;
}

.mol-policies__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.28rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--mol-policies-kobalt);
}

.mol-policies__trigger-icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--mol-policies-border);
  border-radius: 999px;
  background: transparent;
  box-sizing: border-box;
}

.mol-policies__icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--mol-policies-border);
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

.mol-policies__icon-line--h {
  width: 12px;
  height: 2px;
}

.mol-policies__icon-line--v {
  width: 2px;
  height: 12px;
  transition: opacity 0.2s ease;
}

.mol-policies__item.is-active .mol-policies__icon-line--v {
  opacity: 0;
}

.mol-policies__panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.mol-policies__panel[hidden] {
  display: none;
}

.mol-policies__panel-inner {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 0 min(3rem, 4vw) 1.75rem 0;
}

@media (max-width: 600px) {
  .mol-policies__panel-inner {
    padding: 0 0 1.5rem 0;
  }
}

.mol-policies__description {
  margin: 0;
  margin-top: -0.35rem;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: var(--mol-policies-desc);
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1rem);
  font-weight: 400;
  line-height: 1.65;
}

.mol-policies__description img,
.mol-policies__description video,
.mol-policies__description iframe {
  max-width: 100%;
  height: auto;
}

.mol-policies__description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.mol-policies__description > p:first-child {
  margin-top: 0;
}

.mol-policies__description > p:last-child {
  margin-bottom: 0;
}

.mol-policies__description p {
  margin: 0 0 0.85em;
}

.mol-policies.breakdance .mol-policies__title {
  color: var(--mol-policies-kobalt) !important;
}

.mol-policies.breakdance .mol-policies__description,
.mol-policies.breakdance .mol-policies__description p {
  color: var(--mol-policies-desc) !important;
}

/* Breakdance: geen wit/grijs paneel achter `[policies]` (zelfde patroon als team gallery) */
[class*="bde-column"]:has(.mol-policies),
[class*="bde-div"]:has(.mol-policies),
[class*="bde-row"]:has(.mol-policies),
[class*="bde-columns"]:has(.mol-policies),
[class*="bde-shortcode"]:has(.mol-policies),
[class*="bde-rich-text"]:has(.mol-policies),
[class*="bde-element"]:has(.mol-policies),
[class*="bde-container"]:has(.mol-policies),
[class*="bde-section"]:has(.mol-policies),
section:has(> .mol-policies),
section:has(.mol-policies) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* -------------------------------------------------------------------------- */
/* What we do — slider (ACF what_we_do_slider). Background: Breakdance section. */
/* -------------------------------------------------------------------------- */

.mol-wwd {
  --mol-wwd-kobalt: #00235c;
  --mol-wwd-muted: #5a6b85;
  --mol-wwd-border: #e5e7eb;
  --mol-wwd-yellow: #f5c518;
  --mol-wwd-card-border: 4px solid var(--mol-wwd-kobalt);
  --mol-wwd-strip-gap: 1.25rem;
  --mol-wwd-pad-inline: clamp(1rem, 4vw, 1.75rem);
  /* Extra left margin only for the slider strip (filters stay on --mol-wwd-pad-inline) */
  --mol-wwd-strip-inset-left: clamp(1rem, 4vw, 3rem);
  /* Reference: ~1.5 cards visible (second partially) → reads as slider, not two columns on white */
  --mol-wwd-visible-slots: 2.2;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem) 0;
  padding-inline: 0;
  background: transparent;
  overflow-x: clip;
  color: inherit;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: visible;
  position: relative;
}

/*
 * Breakdance often ties a white background / shadow / border to `section`.
 * This component’s root is itself a <section> — that can look like a “white panel”.
 */
section.mol-wwd,
section.mol-wwd.breakdance,
.breakdance section.mol-wwd {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* Sometimes a ::before fill color on sections */
section.mol-wwd::before,
section.mol-wwd::after,
section.mol-wwd.breakdance::before,
section.mol-wwd.breakdance::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mol-wwd *,
.mol-wwd *::before,
.mol-wwd *::after {
  box-sizing: border-box;
}

.mol-wwd__container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--mol-wwd-pad-inline);
}

.mol-wwd__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 0.75rem;
}

/* Default (light background): cobalt pills */
.mol-wwd__filter {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  border: 1px solid var(--mol-wwd-kobalt);
  border-radius: 999px;
  background: transparent;
  color: var(--mol-wwd-kobalt);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mol-wwd__filter:hover {
  background: rgba(0, 35, 92, 0.08);
}

.mol-wwd__filter:focus-visible {
  outline: 2px solid var(--mol-wwd-kobalt);
  outline-offset: 2px;
}

.mol-wwd__filter.is-active {
  background: var(--mol-wwd-kobalt);
  color: #fff;
  border-color: var(--mol-wwd-kobalt);
}

.mol-wwd__filter.is-active:hover {
  background: var(--mol-wwd-kobalt);
  filter: brightness(1.05);
}

/* On blue section: unselected = white border + white text (override Breakdance button styles) */
.mol-wwd--on-blue .mol-wwd__filter:not(.is-active),
.breakdance .mol-wwd--on-blue .mol-wwd__filter:not(.is-active),
.mol-wwd--on-blue button.mol-wwd__filter:not(.is-active) {
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #fff !important;
  background: transparent !important;
}

.mol-wwd--on-blue .mol-wwd__filter:not(.is-active) .mol-wwd__filter-text,
.breakdance .mol-wwd--on-blue .mol-wwd__filter:not(.is-active) .mol-wwd__filter-text {
  color: #fff !important;
}

.mol-wwd--on-blue .mol-wwd__filter:not(.is-active) .mol-wwd__filter-state {
  border-color: rgba(255, 255, 255, 0.95) !important;
}

.mol-wwd--on-blue .mol-wwd__filter:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: #fff !important;
}

.mol-wwd--on-blue .mol-wwd__filter:not(.is-active):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}

.mol-wwd--on-blue .mol-wwd__filter.is-active,
.breakdance .mol-wwd--on-blue .mol-wwd__filter.is-active {
  background: #fff !important;
  color: var(--mol-wwd-kobalt) !important;
  border: 1px solid #fff !important;
  border-color: #fff !important;
}

.mol-wwd--on-blue .mol-wwd__filter.is-active .mol-wwd__filter-text,
.breakdance .mol-wwd--on-blue .mol-wwd__filter.is-active .mol-wwd__filter-text {
  color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd--on-blue .mol-wwd__filter.is-active:hover {
  background: #fff !important;
  filter: none;
}

/* Light background variant — used by [transport-solutions] shortcode */
.mol-wwd--on-light .mol-wwd__filter:not(.is-active),
.breakdance .mol-wwd--on-light .mol-wwd__filter:not(.is-active) {
  border: 1px solid var(--mol-wwd-kobalt) !important;
  color: var(--mol-wwd-kobalt) !important;
  background: transparent !important;
}

.mol-wwd--on-light .mol-wwd__filter:not(.is-active) .mol-wwd__filter-text,
.breakdance .mol-wwd--on-light .mol-wwd__filter:not(.is-active) .mol-wwd__filter-text {
  color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd--on-light .mol-wwd__filter:not(.is-active) .mol-wwd__filter-state {
  border-color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd--on-light .mol-wwd__filter:not(.is-active):hover {
  background: rgba(0, 35, 92, 0.08) !important;
}

.mol-wwd--on-light .mol-wwd__filter.is-active,
.breakdance .mol-wwd--on-light .mol-wwd__filter.is-active {
  background: var(--mol-wwd-kobalt) !important;
  color: #fff !important;
  border-color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd--on-light .mol-wwd__filter.is-active .mol-wwd__filter-text,
.breakdance .mol-wwd--on-light .mol-wwd__filter.is-active .mol-wwd__filter-text {
  color: #fff !important;
}

.mol-wwd--on-light .mol-wwd__filter.is-active .mol-wwd__filter-state {
  background: var(--mol-wwd-yellow) !important;
  border-color: var(--mol-wwd-yellow) !important;
}

.mol-wwd--on-light .mol-wwd__viewport {
  background: transparent !important;
}

.mol-wwd--on-light .mol-wwd__cta,
.breakdance .mol-wwd--on-light .mol-wwd__cta,
.breakdance .mol-wwd--on-light a.mol-wwd__cta {
  color: var(--mol-wwd-kobalt) !important;
  border-color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd--on-light .mol-wwd__cta-label,
.breakdance .mol-wwd--on-light .mol-wwd__cta-label,
.breakdance .mol-wwd--on-light .mol-wwd__cta .mol-wwd__cta-label,
.breakdance .mol-wwd--on-light a.mol-wwd__cta span {
  color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd__filter-text {
  white-space: nowrap;
}

.mol-wwd__filter-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: transparent;
}

.mol-wwd__filter.is-active .mol-wwd__filter-state {
  border: 0;
  background: var(--mol-wwd-yellow);
  color: #fff;
}

.mol-wwd__filter.is-active .mol-wwd__filter-state::after {
  content: "";
  display: block;
  width: 0.35rem;
  height: 0.6rem;
  margin-top: -1px;
  border: solid var(--mol-wwd-kobalt);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Track: full-bleed to viewport, extra inset on left, flush to edge on right (reference) */
.mol-wwd__strip {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: calc(var(--mol-wwd-pad-inline) + var(--mol-wwd-strip-inset-left));
  padding-right: 0;
  min-width: 0;
  overflow: visible;
  background: transparent;
}

.mol-wwd__viewport {
  container-type: inline-size;
  container-name: mol-wwd-vp;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 35, 92, 0.35) transparent;
}

.mol-wwd--on-blue .mol-wwd__viewport {
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.mol-wwd__viewport:focus-visible {
  outline: 2px solid var(--mol-wwd-kobalt);
  outline-offset: 2px;
}

.mol-wwd--on-blue .mol-wwd__viewport:focus-visible {
  outline-color: #fff;
}

.mol-wwd__viewport::-webkit-scrollbar {
  height: 8px;
}

.mol-wwd__viewport::-webkit-scrollbar-thumb {
  background: rgba(0, 35, 92, 0.35);
  border-radius: 999px;
}

.mol-wwd--on-blue .mol-wwd__viewport::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
}

.mol-wwd__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--mol-wwd-strip-gap);
  padding-bottom: 0.25rem;
  width: max-content;
  min-width: 100%;
  background: transparent;
}

/*
 * Fixed card width (flex-shrink: 0) so the track is wider than the viewport → native scroll.
 * --mol-wwd-visible-slots ≈ number of visible cards (e.g. 2.4 = smaller slides).
 */
.mol-wwd__card {
  --mol-wwd-card-span: calc((100cqi - var(--mol-wwd-strip-gap)) / var(--mol-wwd-visible-slots));
  flex: 0 0 var(--mol-wwd-card-span);
  flex-shrink: 0;
  width: var(--mol-wwd-card-span);
  min-width: var(--mol-wwd-card-span);
  max-width: var(--mol-wwd-card-span);
  align-self: stretch;
}

@supports not (width: 1cqi) {
  .mol-wwd__card {
    --mol-wwd-card-span: calc(
      (
          100vw - var(--mol-wwd-pad-inline) - var(--mol-wwd-strip-inset-left) -
            var(--mol-wwd-strip-gap)
        ) / var(--mol-wwd-visible-slots)
    );
  }
}

.mol-wwd__card-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  min-height: 16rem;
  background: #fff;
  border: var(--mol-wwd-card-border);
  border-radius: 1rem;
  overflow: hidden;
}

.mol-wwd__card-media {
  flex: 0 0 45%;
  max-width: 45%;
  overflow: hidden;
  background: #e8eef5;
}

.mol-wwd__card-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.mol-wwd__card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(0.75rem, 2.5vw, 1.25rem);
  color: var(--mol-wwd-kobalt);
}

.mol-wwd__badge {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.6rem;
  background: var(--mol-wwd-kobalt);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.mol-wwd__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mol-wwd-kobalt);
}

.mol-wwd.breakdance .mol-wwd__title {
  color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd__excerpt {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mol-wwd-kobalt);
}

.mol-wwd__excerpt p {
  margin: 0 0 0.65em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.mol-wwd__excerpt p:last-child {
  margin-bottom: 0;
}

.mol-wwd__excerpt ul,
.mol-wwd__excerpt ol {
  margin: 0 0 0.65em;
  padding-left: 1.25rem;
}

.mol-wwd.breakdance .mol-wwd__excerpt {
  color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd.breakdance .mol-wwd__excerpt p,
.mol-wwd.breakdance .mol-wwd__excerpt li {
  color: var(--mol-wwd-kobalt) !important;
}

.mol-wwd__list {
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mol-wwd-kobalt);
}

.mol-wwd__list-item {
  position: relative;
  margin: 0 0 0.45rem;
  padding-left: 1.35rem;
}

.mol-wwd__list-item:last-child {
  margin-bottom: 0;
}

.mol-wwd__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.5rem;
  height: 0.28rem;
  border: solid var(--mol-wwd-kobalt);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.mol-wwd__cta {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-end;
  width: auto !important;
  max-width: 100%;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding: 0.4rem 0.6rem 0.4rem 1rem;
  border: 1px solid var(--mol-wwd-border);
  border-radius: 999px;
  background: #fff;
  color: var(--mol-wwd-kobalt) !important;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

.mol-wwd__cta:hover {
  opacity: 0.92;
}

.mol-wwd__cta:focus-visible {
  outline: 2px solid var(--mol-wwd-kobalt);
  outline-offset: 2px;
}

.mol-wwd__cta-label {
  white-space: nowrap;
}

.mol-wwd__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--mol-wwd-yellow);
  color: var(--mol-wwd-kobalt);
}

.mol-wwd__cta-icon svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

@media (max-width: 699px) {
  .mol-wwd__card-inner {
    flex-direction: column;
    min-height: 0;
  }

  .mol-wwd__card-media {
    flex: 0 0 9rem;
    max-width: none;
    height: 9rem;
  }

  .mol-wwd__card-body {
    padding-bottom: 1.25rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Transport solution slider (ACF transport_solution_slider + Show all filter) */
/* -------------------------------------------------------------------------- */

.mol-tss {
  --mol-tss-kobalt: #00235c;
  --mol-tss-muted: #5a6b85;
  --mol-tss-border: #e5e7eb;
  --mol-tss-yellow: #f5c518;
  --mol-tss-bg-page: #f0f7ff;
  --mol-tss-bg-active: #3d6ead;
  box-sizing: border-box;
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(24px, 6vw, 96px);
  background: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mol-tss *,
.mol-tss *::before,
.mol-tss *::after {
  box-sizing: border-box;
}

.mol-tss__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

@media (max-width: 899px) {
  .mol-tss__grid {
    grid-template-columns: 1fr;
  }
}

.mol-tss__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mol-tss-kobalt);
}

.mol-tss__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mol-tss-kobalt);
}

.mol-tss__figure {
  position: relative;
  margin: 0;
  border-radius: 0 4rem 0 0;
  overflow: hidden;
  background: #e8eef5;
}

.mol-tss__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.mol-tss__stat {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 35, 92, 0.12);
}

.mol-tss__stat-num {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mol-tss-kobalt);
}

.mol-tss__stat-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--mol-tss-muted);
}

.mol-tss__stat[hidden] {
  display: none !important;
}

.mol-tss__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mol-tss__filter {
  padding: 0.45rem 1rem;
  border: 1px solid var(--mol-tss-kobalt);
  border-radius: 999px;
  background: #fff;
  color: var(--mol-tss-kobalt);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mol-tss__filter.is-active {
  background: var(--mol-tss-kobalt);
  color: #fff;
}

.mol-tss__filter:focus-visible {
  outline: 2px solid var(--mol-tss-kobalt);
  outline-offset: 2px;
}

.mol-tss__lists {
  min-width: 0;
}

.mol-tss__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mol-tss__item {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--mol-tss-border);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mol-tss__item.is-active {
  border-color: var(--mol-tss-bg-active);
  box-shadow: 0 8px 28px rgba(0, 35, 92, 0.12);
}

.mol-tss__trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 0;
  background: #fff;
  color: var(--mol-tss-kobalt);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mol-tss__item.is-active .mol-tss__trigger {
  background: var(--mol-tss-bg-active);
  color: #fff;
}

.mol-tss__trigger-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.mol-tss__trigger-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  filter: none;
}

.mol-tss__item:not(.is-active) .mol-tss__trigger-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(40%) saturate(2500%) hue-rotate(190deg);
}

.mol-tss__item.is-active .mol-tss__trigger-icon {
  filter: brightness(0) invert(1);
}

.mol-tss__body {
  padding: 0 1rem 1rem;
  background: var(--mol-tss-bg-active);
  color: #fff;
}

.mol-tss__body[hidden] {
  display: none !important;
}

.mol-tss__intro {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}

.mol-tss__intro p {
  margin: 0 0 0.75em;
}

.mol-tss__intro p:last-child {
  margin-bottom: 0;
}

.mol-tss__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: transparent;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.mol-tss__cta:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mol-tss__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--mol-tss-yellow);
  color: var(--mol-tss-kobalt);
}

.mol-tss__cta-icon svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

.mol-tss__progress {
  margin-top: 1rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.mol-tss__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: #fff;
  border-radius: inherit;
  will-change: transform;
}

/* No white panel from <section> / Breakdance on this component */
section.mol-tss,
section.mol-tss.breakdance,
.breakdance section.mol-tss {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

section.mol-tss::before,
section.mol-tss::after,
section.mol-tss.breakdance::before,
section.mol-tss.breakdance::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mol-logistics-stack > .mol-logistics__section--transport_solution_slider {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.mol-logistics__section--transport_solution_slider {
  background: transparent !important;
}

[class*="bde-column"]:has(.mol-tss),
[class*="bde-div"]:has(.mol-tss),
[class*="bde-row"]:has(.mol-tss),
[class*="bde-columns"]:has(.mol-tss) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mol-logistics-stack:has(.mol-tss) {
  background: transparent !important;
  box-shadow: none !important;
}

/* History in Breakdance-kolom: flex min-width:auto voorkomen — anders geen maxScroll + body-overflow */
[class*="bde-column"]:has(.mol-hist-slider),
[class*="bde-div"]:has(.mol-hist-slider),
[class*="bde-row"]:has(.mol-hist-slider),
[class*="bde-columns"]:has(.mol-hist-slider) {
  min-width: 0 !important;
  max-width: 100%;
  overflow-x: hidden;
}

/**
 * History timeline — horizontaal scroll + GSAP truck op baan
 */
.mol-hist-slider {
  --mol-hist-navy: #001f3f;
  --mol-hist-muted: #8a96a8;
  --mol-hist-bar-h: 4px;
  /* Ruimte tussen bovenste kaarten en tijdlijn — ruimte voor de vrachtwagen */
  --mol-hist-above-line-gap: clamp(3.5rem, 9vw, 6rem);
  --mol-hist-slide-w: 300px;
  --mol-hist-pad-x: clamp(24px, 6vw, 96px);
  --mol-hist-content-max: 1512px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mol-hist-content-max);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 145px) var(--mol-hist-pad-x);
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: transparent;
  background-color: transparent;
  overflow-x: hidden;
}

.mol-hist-slider *,
.mol-hist-slider *::before,
.mol-hist-slider *::after {
  box-sizing: border-box;
}

.mol-hist-slider__inner {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-x: hidden;
}

.mol-hist-slider__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 3rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.mol-hist-slider__title {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: clamp(1.65rem, 3.8vw, 2.25rem);
  font-weight: 700;
  color: var(--mol-hist-navy);
  text-align: left;
  letter-spacing: -0.02em;
}

.mol-hist-slider__stage-h {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.mol-hist-slider__swiper-col {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 0.25rem;
  overflow-x: hidden;
}

.mol-hist-slider__track-wrap {
  position: relative;
  min-height: clamp(260px, 48vw, 360px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* Tijdlijn-as: één horizontale lijn op de verticale midden van de slides (door de rondjes) */
.mol-hist-slider__slides-stack {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: clamp(260px, 48vw, 360px);
  overflow-x: hidden;
}

.mol-hist-slider__timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1;
  height: var(--mol-hist-bar-h);
  margin-top: calc(var(--mol-hist-bar-h) / -2);
  background: var(--mol-hist-navy);
  border-radius: 2px;
  pointer-events: none;
}

/* Truck onder slide-inhoud; boven de tijdlijn */
.mol-hist-slider__truck-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

/* Onderkant van de truck (wielen) op de weg; kleiner = minder overlap met tekst */
.mol-hist-slider__truck {
  position: absolute;
  left: 0;
  top: auto;
  bottom: calc(50% + var(--mol-hist-bar-h) / 2);
  width: auto;
  height: clamp(42px, 11vw, 64px);
  max-width: min(220px, 42vw);
  display: block;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 3px 8px rgba(0, 31, 63, 0.12));
  will-change: transform;
}

/* Native horizontaal scrollen — geen externe Swiper-dependency (geen conflicten met theme).
   Geen zichtbare scrollbar; je sleept de tijdlijn met een "grijphandje" (zie JS). */
.mol-hist-slider__viewport {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0.5rem 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  outline: none;
  background: transparent;
  /* MOL-yellow grab "hand" cursor (navy outline so it reads on light + dark) */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23f9b638' stroke='%2300235c' stroke-width='0.9' stroke-linejoin='round' d='M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S13 3.17 13 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S17 .67 17 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z'/%3E%3C/svg%3E") 8 6, grab;
}

.mol-hist-slider__viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.mol-hist-slider.is-grabbing .mol-hist-slider__viewport,
.mol-hist-slider.is-grabbing .mol-hist-slider__viewport * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23f9b638' stroke='%2300235c' stroke-width='0.9' stroke-linejoin='round' d='M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S13 3.17 13 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S17 .67 17 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z'/%3E%3C/svg%3E") 8 6, grabbing !important;
}

.mol-hist-slider.is-grabbing .mol-hist-slider__viewport {
  scroll-behavior: auto;
}

.mol-hist-slider__strip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  /* Force max-content + explicit min-width as a belt-and-braces fallback for
     edge cases where the inner viewport gets wider than the natural content
     and overflow scroll silently disappears. 6 slides * 300 + 5 * 28 = 1940. */
  width: max-content !important;
  min-width: 1940px;
  min-height: 0;
  gap: 28px;
  box-sizing: border-box;
  background: transparent;
}

.mol-hist-slider__slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  width: var(--mol-hist-slide-w);
  max-width: min(var(--mol-hist-slide-w), calc(100vw - 2.5rem));
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

/* Lege eerste kolom: zelfde breedte als een jaarslide, geen inhoud (2025 staat waar eerst 2024 zat) */
.mol-hist-slider__slide--spacer {
  pointer-events: none;
}

.mol-hist-slider__slide-inner--spacer {
  min-height: clamp(268px, 50vw, 380px);
  width: 100%;
}

/* Rij 2 = gedeelde tijdlijn-as: dot altijd op dezelfde hoogte; om en om boven/onder */
.mol-hist-slider__slide-inner {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 100%;
  align-items: stretch;
  justify-items: start;
  flex: 1 1 auto;
  min-height: clamp(268px, 50vw, 380px);
  width: 100%;
  padding: 0 1rem 0 0.5rem;
  text-align: left;
}

/* Boven: kaart tegen de onderrand van het bovenste vlak = dicht bij de lijn (zoals mockup), niet hoog in de cel */
.mol-hist-slider__slide--above .mol-hist-slider__card {
  grid-row: 1;
  align-self: end;
  margin-bottom: var(--mol-hist-above-line-gap);
}

.mol-hist-slider__slide--above .mol-hist-slider__dot-wrap {
  grid-row: 2;
  align-self: center;
}

.mol-hist-slider__slide--below .mol-hist-slider__dot-wrap {
  grid-row: 2;
  align-self: center;
}

.mol-hist-slider__slide--below .mol-hist-slider__card {
  grid-row: 3;
  align-self: start;
  margin-top: 0.4rem;
}

.mol-hist-slider__card {
  width: 100%;
  max-width: 17rem;
  text-align: left;
  background: transparent;
  background-color: transparent;
}

/* Optional photo on a timeline item (timeline_items > image sub-field). */
.mol-hist-slider__photo {
  margin: 0 0 0.6rem;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #eef1f5;
}
.mol-hist-slider__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mol-hist-slider__card .mol-hist-slider__year,
.mol-hist-slider__card .mol-hist-slider__text,
.mol-hist-slider__card .mol-hist-slider__country {
  text-align: left;
}

.mol-hist-slider__year {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: var(--mol-hist-navy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.mol-hist-slider__text {
  margin: 0 0 0.3rem;
  font-size: clamp(0.8rem, 1.95vw, 0.9rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--mol-hist-navy);
}

.mol-hist-slider__country {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mol-hist-muted);
}

.mol-hist-slider__dot-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Marker: vaste ring (geen gradient — consistenter in WebKit/Firefox); kern = lijnkleur */
.mol-hist-slider__dot {
  box-sizing: border-box;
  display: block;
  width: clamp(24px, 6.5vw, 30px);
  height: clamp(24px, 6.5vw, 30px);
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--mol-hist-navy);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--mol-hist-navy);
}

.mol-hist-slider__a11y-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

section.mol-hist-slider,
section.mol-hist-slider.breakdance,
.breakdance section.mol-hist-slider {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.mol-logistics-stack > .mol-logistics__section--history_timeline {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile: push above/below cards further from the timeline so the truck
   (which sits on the bar and extends ~45px upward) doesn't visually
   overlap card text as it rolls past. Was ~18px gap above + ~26px gap
   below, way too tight for a 45px-tall truck. */
@media (max-width: 768px) {
  .mol-hist-slider {
    --mol-hist-above-line-gap: 6.5rem;
  }
  .mol-hist-slider__slide--below .mol-hist-slider__card {
    margin-top: 3rem;
  }
}

/* ─── Team gallery `[team_gallery]` — alleen beeld, ACF `team_gallery`, 3 kolommen ─── */
/* Breakdance / sectie-omlijning: witte panelen weg + kolom mag breed (zelfde patroon als mol-tss / mol-wwd) */
[class*="bde-column"]:has(.mol-team-gal),
[class*="bde-div"]:has(.mol-team-gal),
[class*="bde-row"]:has(.mol-team-gal),
[class*="bde-columns"]:has(.mol-team-gal),
[class*="bde-shortcode"]:has(.mol-team-gal),
[class*="bde-rich-text"]:has(.mol-team-gal),
[class*="bde-element"]:has(.mol-team-gal),
section:has(> .mol-team-gal),
section:has(.mol-team-gal) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  overflow-x: visible !important;
}

[class*="bde-column"]:has(.mol-team-gal) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  overflow-x: visible !important;
  overflow: visible !important;
}

[class*="bde-div"]:has(.mol-team-gal) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100% !important;
  overflow-x: visible !important;
  overflow: visible !important;
}

[class*="bde-row"]:has(.mol-team-gal),
[class*="bde-columns"]:has(.mol-team-gal) {
  width: 100% !important;
  max-width: none !important;
  overflow-x: visible !important;
  align-items: stretch !important;
}

/* Shortcode-/wrapper-vlak: vult ouders (Breakdance) in twee richtingen */
[class*="bde-shortcode"]:has(.mol-team-gal),
[class*="bde-code"]:has(.mol-team-gal) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  min-width: 0 !important;
}

.mol-team-gal {
  /* Aanpasbaar; voorkomt “minuscule cluster” in brede hero’s als ouder geen vaste hoogte heeft */
  --mol-team-gal-block-min: clamp(20rem, 55vh, 42rem);
  --mol-team-gal-radius: 14px;
  --mol-team-gal-gap: clamp(10px, 1.8vw, 15px);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: max(100%, var(--mol-team-gal-block-min));
  height: auto;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Volle viewportbreedte (optioneel via fullbleed="1") */
.mol-team-gal--fullbleed {
  position: relative;
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50vw);
  margin-right: calc(50% - 50dvw);
  left: auto;
  right: auto;
  height: auto;
  min-height: max(100%, var(--mol-team-gal-block-min));
  flex: 1 1 auto;
}

.mol-team-gal--no-fullbleed {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  height: auto;
  min-height: max(100%, var(--mol-team-gal-block-min));
}

.mol-team-gal::before,
.mol-team-gal::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.mol-team-gal.breakdance,
.breakdance .mol-team-gal {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.mol-team-gal__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  background-color: transparent !important;
}

.mol-team-gal__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--mol-team-gal-gap);
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-grow: 1;
  background: transparent !important;
  background-color: transparent !important;
}

.mol-team-gal__col {
  display: flex;
  flex-direction: column;
  gap: var(--mol-team-gal-gap);
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  background: transparent !important;
  background-color: transparent !important;
}

.mol-team-gal__cell {
  margin: 0;
  border-radius: var(--mol-team-gal-radius);
  overflow: hidden;
  line-height: 0;
  background: transparent;
}

/* Geen mosaic-7: cellen verdelen de kolomhoogte gelijk */
.mol-team-gal:not(.mol-team-gal--mosaic-7) .mol-team-gal__cell {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}

.mol-team-gal__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
  border-radius: var(--mol-team-gal-radius);
}

.mol-team-gal:not(.mol-team-gal--mosaic-7) .mol-team-gal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 7 foto’s: rechthoekig blok; midden onder (slot 4) + rechts onder (slot 6) elk 2 rijen hoog */
.mol-team-gal--mosaic-7 {
  --mol-team-gal-gap: 15px;
  --mol-team-gal-radius: 14px;
}

.mol-team-gal--mosaic-7 .mol-team-gal__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--mol-team-gal-gap);
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-grow: 1;
}

.mol-team-gal--mosaic-7 .mol-team-gal__col {
  display: contents;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-0 {
  grid-column: 1;
  grid-row: 1;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-1 {
  grid-column: 1;
  grid-row: 2;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-2 {
  grid-column: 1;
  grid-row: 3;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-3 {
  grid-column: 2;
  grid-row: 1;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-4 {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: stretch;
}

.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-5 {
  grid-column: 3;
  grid-row: 1;
}

/* Lang beeld rechtsonder over rij 2 + 3 */
.mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-6 {
  grid-column: 3;
  grid-row: 2 / span 2;
  align-self: stretch;
}

.mol-team-gal--mosaic-7 .mol-team-gal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mol-team-gal-radius);
}

/* MA-3: 7-foto mosaic naar 2-col layout op mobile zodat gezichten
   herkenbaar groot blijven. Alle slots krijgen een vaste aspect-ratio,
   slot 6 spant beide kolommen als feature-cell onderaan. */
@media (max-width: 768px) {
  .mol-team-gal--mosaic-7 .mol-team-gal__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
  }

  .mol-team-gal--mosaic-7 .mol-team-gal__cell {
    aspect-ratio: 1 / 1;
  }

  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-0 { grid-column: 1; grid-row: 1; }
  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-1 { grid-column: 2; grid-row: 1; }
  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-2 { grid-column: 1; grid-row: 2; }
  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-3 { grid-column: 2; grid-row: 2; }
  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-4 {
    grid-column: 1 / span 2;
    grid-row: 3;
    align-self: auto;
    aspect-ratio: 16 / 9;
  }
  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-5 { grid-column: 1; grid-row: 4; }
  .mol-team-gal--mosaic-7 .mol-team-gal__cell--slot-6 {
    grid-column: 2;
    grid-row: 4;
    align-self: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Solution navigator shortcode [mol_solution_nav]
   Breakdance / theme overrides often force column layout and block-level links — use explicit flex + !important. */
.mol-solution-nav.mol-sn {
  --mol-sn-navy: #00235c;
  --mol-sn-text: #00235c;
  --mol-sn-muted: #5b6b8a;
  --mol-sn-border: #c5d3e8;
  --mol-sn-pill-bg: #ffffff;
  --mol-sn-help-bg: #ffffff;
  --mol-sn-or: #8fa4c4;
  --mol-sn-orange: #ffb830;
  --mol-sn-pill-radius: 3rem;
  box-sizing: border-box !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: Montserrat, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif !important;
}

.mol-solution-nav *,
.mol-solution-nav *::before,
.mol-solution-nav *::after {
  box-sizing: border-box;
}

.mol-solution-nav__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mol-sn-navy);
}

.mol-solution-nav.mol-sn .mol-solution-nav__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem 1.25rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 640px) {
  .mol-solution-nav.mol-sn .mol-solution-nav__row {
    flex-wrap: nowrap !important;
  }
}

.mol-solution-nav__select-wrap {
  position: relative;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

@media (min-width: 640px) {
  .mol-solution-nav__select-wrap {
    flex: 1 1 0 !important;
    max-width: min(100%, 28rem) !important;
  }
}

.mol-solution-nav__select-wrap::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--mol-sn-muted);
  border-bottom: 2px solid var(--mol-sn-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.mol-solution-nav.mol-sn select.mol-solution-nav__select,
.mol-solution-nav.mol-sn .mol-solution-nav__select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 3.25rem !important;
  margin: 0 !important;
  padding: 0.9rem 2.85rem 0.9rem 1.5rem !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--mol-sn-text) !important;
  background-color: var(--mol-sn-pill-bg) !important;
  background-image: none !important;
  border: 1px solid var(--mol-sn-border) !important;
  border-radius: var(--mol-sn-pill-radius) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mol-solution-nav.mol-sn .mol-solution-nav__select option {
  color: var(--mol-sn-navy);
  background-color: #fff;
}

.mol-solution-nav.mol-sn .mol-solution-nav__select option:disabled {
  color: var(--mol-sn-text);
}

.mol-solution-nav.mol-sn .mol-solution-nav__select:focus {
  outline: none !important;
  border-color: var(--mol-sn-navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 35, 92, 0.15) !important;
}

.mol-solution-nav.mol-sn .mol-solution-nav__select:focus-visible {
  outline: 2px solid var(--mol-sn-navy) !important;
  outline-offset: 2px !important;
}

.mol-solution-nav.mol-sn .mol-solution-nav__or {
  display: inline !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--mol-sn-or) !important;
  background: transparent !important;
  border: 0 !important;
}

.mol-solution-nav.mol-sn a.mol-solution-nav__help,
.mol-solution-nav.mol-sn .mol-solution-nav__help {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 3.25rem !important;
  margin: 0 !important;
  padding: 0.75rem 1rem 0.75rem 1.5rem !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-align: center !important;
  color: var(--mol-sn-navy) !important;
  background-color: var(--mol-sn-help-bg) !important;
  border: 1px solid var(--mol-sn-border) !important;
  border-radius: var(--mol-sn-pill-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mol-solution-nav.mol-sn a.mol-solution-nav__help:hover,
.mol-solution-nav.mol-sn .mol-solution-nav__help:hover {
  color: var(--mol-sn-navy) !important;
  text-decoration: none !important;
  border-color: var(--mol-sn-navy) !important;
  background-color: #f7f9fc !important;
}

.mol-solution-nav.mol-sn a.mol-solution-nav__help:focus-visible,
.mol-solution-nav.mol-sn .mol-solution-nav__help:focus-visible {
  outline: 2px solid var(--mol-sn-navy) !important;
  outline-offset: 2px !important;
}

.mol-solution-nav__help-label {
  white-space: nowrap;
}

.mol-solution-nav.mol-sn .mol-solution-nav__help-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: var(--mol-sn-orange) !important;
  color: #0a1628 !important;
}

.mol-solution-nav.mol-sn .mol-solution-nav__help-icon svg {
  display: block !important;
  margin-left: 1px !important;
  flex-shrink: 0 !important;
}

/* ─── Staff picker ([staff_picker]) — Contacts + contact-category tabs ─── */
.mol-staff-picker.mol-tsci {
  overflow-x: hidden;
  max-width: 100%;
}

.mol-staff-picker .mol-staff-picker__root-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mol-staff-picker .mol-tsci__tab.is-active {
  background: #e8f2fb;
}

.mol-staff-picker .mol-staff-picker__tab-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.mol-staff-picker .mol-staff-picker__tab-arrow svg {
  display: block;
  width: 22px;
  height: 22px;
}

.mol-staff-picker .mol-tsci__tab:not(.is-active) .mol-staff-picker__tab-arrow {
  color: var(--mol-tsca-muted);
}

.mol-staff-picker .mol-tsci__tab.is-active .mol-staff-picker__tab-arrow {
  filter: none;
  color: #fff;
}

.mol-staff-picker .mol-staff-picker__panels {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mol-staff-picker .mol-staff-picker__panel-inner {
  padding-bottom: 1.5rem;
}

.mol-staff-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .mol-staff-picker__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mol-staff-picker__card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 2px;
  border-radius: 16px;
  background: linear-gradient(
    160deg,
    #4a8fd4 0%,
    #1b3f7b 50%,
    #00235c 100%
  );
  box-shadow:
    0 2px 4px rgba(0, 35, 92, 0.06),
    0 8px 20px rgba(0, 35, 92, 0.14);
}

.mol-staff-picker__card-inner {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.mol-staff-picker__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.mol-staff-picker__photo-wrap {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 240px;
  min-height: 240px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0;
  background: #cfd6e0;
}

.mol-staff-picker__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Themes (e.g. Breakdance) often cap img width — force full bleed in the frame */
.mol-staff-picker .mol-staff-picker__photo-wrap .mol-staff-picker__photo {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}

.mol-staff-picker__body {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin: 0;
  padding: 1.1rem 1.2rem 1.25rem;
  background: #fff;
  border-radius: 0;
}

.mol-staff-picker__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mol-tsca-kobalt);
}

.mol-staff-picker__job {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mol-tsca-muted);
}

.mol-staff-picker__meta {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.mol-staff-picker__meta-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0 0 0.45rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.mol-staff-picker__meta-row:last-child {
  margin-bottom: 0;
}

.mol-staff-picker__meta-ic {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
  color: var(--mol-tsca-kobalt);
}

.mol-staff-picker__meta-ic .mol-staff-picker__ico {
  display: block;
  flex-shrink: 0;
}

.mol-staff-picker__meta-txt {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--mol-tsca-navy);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mol-staff-picker__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mol-staff-picker__link:hover {
  color: var(--mol-tsca-kobalt);
}

.mol-staff-picker__empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--mol-tsca-muted);
  font-size: 0.9375rem;
}

/* ============================================================
   MOL News slider — mol-news
   Uses !important where Breakdance overrides are needed.
   ============================================================ */

.mol-news {
  --mol-news-navy: #00235c;
  --mol-news-dark: #0a1628;
  --mol-news-yellow: #f5c518;
  --mol-news-muted: #6b7280;
  --mol-news-radius: 12px;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
  background: transparent !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Nav buttons — top right */

.mol-news__nav {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
  z-index: 2 !important;
}

.mol-news__nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid #00235c !important;
  background: #ffffff !important;
  color: #00235c !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease;
  flex-shrink: 0 !important;
}

.mol-news__nav-btn:hover {
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-news__nav-btn:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* Horizontal scroll track */

.mol-news__track {
  display: flex !important;
  gap: 1.25rem !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0.5rem !important;
  /* hide scrollbar */
  scrollbar-width: none !important;
}

.mol-news__track::-webkit-scrollbar {
  display: none !important;
}

/* Card — fixed width so 3 fit with overflow hint */

.mol-news__card {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 calc(33.333% - 0.84rem) !important;
  min-width: 260px !important;
  border-radius: var(--mol-news-radius) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  background: #ffffff !important;
  scroll-snap-align: start !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mol-news__card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 35, 92, 0.12) !important;
}

/* Card image */

.mol-news__card-img-wrap {
  position: relative !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.mol-news__card-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  max-width: 100% !important;
}

.mol-news__card-cat {
  position: absolute !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 999px !important;
  background: var(--mol-news-yellow) !important;
  color: var(--mol-news-dark) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  text-transform: uppercase !important;
}

/* Card body */

.mol-news__card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 1.25rem 1.25rem 1.1rem !important;
  background: #ffffff !important;
}

.mol-news__card-title {
  margin: 0 0 0.6rem !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--mol-news-navy) !important;
}

.mol-news__card-excerpt {
  margin: 0 0 auto !important;
  padding: 0 0 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  color: var(--mol-news-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.mol-news__card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.75rem 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  font-size: 0.78rem !important;
  color: #9ca3af !important;
}

.mol-news__card-sep {
  opacity: 0.5;
}

/* ============================================================
   MOL Footer — mol-footer
   Transparent bg, 4 text columns + logo column, light text.
   ============================================================ */

.mol-footer {
  --mol-footer-border: rgba(255, 255, 255, 0.12);
  --mol-footer-muted: rgba(255, 255, 255, 0.55);
  --mol-footer-white: #ffffff;
  box-sizing: border-box;
  width: 100%;
  background: transparent !important;
  color: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
}

/* ---- Main columns section -------------------------------- */

.mol-footer__main {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  padding: 3rem 0 2.5rem !important;
  border-bottom: 1px solid var(--mol-footer-border) !important;
}

.mol-footer__cols {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem 3rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 1023px) {
  .mol-footer__main {
    flex-wrap: wrap !important;
    padding: 2.5rem 0 2rem !important;
  }
}

@media (max-width: 640px) {
  .mol-footer__cols {
    gap: 1.5rem 2rem !important;
  }
}

/* Nav column */

.mol-footer__col {
  min-width: 110px;
}

.mol-footer__col-title {
  margin: 0 0 0.85rem !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--mol-footer-white) !important;
}

.mol-footer__col-title--sub {
  margin-top: 1.5rem !important;
}

.mol-footer__col-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.mol-footer__col-link {
  color: var(--mol-footer-muted) !important;
  text-decoration: none !important;
  font-size: 0.8375rem !important;
  line-height: 1.4 !important;
  transition: color 0.18s ease;
}

.mol-footer__col-link:hover {
  color: var(--mol-footer-white) !important;
}

.mol-footer__col-text {
  color: var(--mol-footer-muted);
  font-size: 0.8375rem;
  line-height: 1.4;
}

/* Logo + social + ISO column (right) */

.mol-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1rem !important;
  flex-shrink: 0 !important;
  min-width: 160px !important;
}

.mol-footer__logo-wrap {
  display: block !important;
  text-decoration: none !important;
}

/* SVG is naturally 213×26 — inline white SVG, no filter needed */
.mol-footer__logo {
  display: block !important;
  width: 213px !important;
  height: auto !important;
  max-width: 100% !important;
}

.mol-footer__logo-wrap svg {
  display: block !important;
  width: 213px !important;
  height: auto !important;
  max-width: 100% !important;
}

.mol-footer__socials {
  display: flex !important;
  gap: 0.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--mol-footer-border) !important;
  color: var(--mol-footer-muted) !important;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mol-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--mol-footer-white) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.mol-footer__iso-wrap {
  display: block !important;
  margin-top: 0.75rem !important;
}

.mol-footer__iso {
  display: block !important;
  width: 70px !important;
  height: 70px !important;
}

/* ---- Bottom bar ------------------------------------------ */

.mol-footer__bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem 1.5rem !important;
  padding: 1.1rem 0 !important;
  background: transparent !important;
}

@media (max-width: 640px) {
  .mol-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

.mol-footer__copyright {
  margin: 0 !important;
  font-size: 0.78rem !important;
  color: var(--mol-footer-muted) !important;
}

.mol-footer__bottom-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.2rem 1rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-footer__bottom-link {
  font-size: 0.78rem !important;
  color: var(--mol-footer-muted) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.mol-footer__bottom-link:hover {
  color: var(--mol-footer-white) !important;
}

/* J2: social icons in footer bottom bar */
.mol-footer__socials {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-footer__social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--mol-footer-white) !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.mol-footer__social:hover,
.mol-footer__social:focus-visible {
  background: var(--mol-footer-white) !important;
  color: #00235c !important;
  outline: none !important;
}

.mol-footer__social svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

/* ============================================================
   /global-presence/ page — Figma "Globale aanwezigheid"
   ============================================================ */

.mol-gp-hero,
.mol-gp-hero.breakdance,
.breakdance .mol-gp-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    background: #EEF7FF !important;
    color: #ffffff !important;
    padding-top: 0 !important;
}

.mol-gp-hero__bg {
    position: absolute !important;
    inset: 0 0 96px 0 !important;
    background: linear-gradient(103.65deg, #299FDA -23.53%, #105697 100%) !important;
    border-radius: 0 0 0 80px !important;
    z-index: 0 !important;
}

/* Mobile: extend gradient all the way to the hero bottom. On desktop
   the 96px bottom inset leaves room for the offices module that sits
   beneath; on phones no such overlap exists and the "Get started"
   button ended up half on top of the ice-coloured page background. */
@media (max-width: 768px) {
    .mol-gp-hero__bg {
        inset: 0 !important;
    }
}

/* Decorative inset line (top-right arc) matching the office/page hero so the
   our-offices hero is consistent. Framed within the dark gradient region,
   which sits 96px above the section bottom on desktop. */
.mol-gp-hero__inset {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 0 !important;
    top: clamp(48px, 6vw, 96px) !important;
    right: clamp(24px, 6vw, 96px) !important;
    bottom: calc(96px + clamp(48px, 6vw, 96px)) !important;
    left: clamp(24px, 6vw, 96px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-top-right-radius: 65px !important;
    background: transparent !important;
    display: block !important;
}
@media (max-width: 768px) {
    .mol-gp-hero__inset {
        bottom: clamp(48px, 8vw, 96px) !important;
        border-top-right-radius: 32px !important;
    }
}

.mol-gp-hero__inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1512px !important;
    margin: 0 auto !important;
    padding: clamp(64px, 7vw, 112px) clamp(24px, 6vw, 96px) clamp(96px, 9vw, 160px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 637px) minmax(0, 1fr) !important;
    gap: clamp(24px, 4vw, 64px) !important;
    align-items: end !important;
}

.mol-gp-hero__crumb {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: clamp(48px, 6vw, 96px) !important;
}

.mol-gp-hero__crumb-home {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
    flex: 0 0 auto !important;
}

.mol-gp-hero__crumb-home svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

.mol-gp-hero__crumb-sep {
    opacity: 0.6 !important;
}

.mol-gp-hero__crumb-label {
    color: #ffffff !important;
}

.mol-gp-hero__copy {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(16px, 2.4vw, 32px) !important;
    align-items: flex-start !important;
}

.mol-gp-hero__title,
.mol-gp-hero.breakdance h1.mol-gp-hero__title {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(40px, 5.5vw, 72px) !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mol-gp-hero__intro,
.mol-gp-hero.breakdance p.mol-gp-hero__intro {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(15px, 1.3vw, 18px) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 637px !important;
}

.mol-gp-hero__image {
    position: relative !important;
    height: 100% !important;
    min-height: 600px !important;
    overflow: hidden !important;
    border-radius: 0 65px 0 0 !important;
    align-self: stretch !important;
}

.mol-gp-hero__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.mol-cta-btn--on-dark {
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

.mol-cta-btn--on-dark:hover,
.mol-cta-btn--on-dark:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

@media (max-width: 899px) {
    .mol-gp-hero__inner {
        grid-template-columns: 1fr !important;
        padding-bottom: clamp(48px, 7vw, 80px) !important;
    }
    .mol-gp-hero__image {
        min-height: 320px !important;
        border-radius: 0 32px 0 0 !important;
    }
    .mol-gp-hero__bg {
        border-radius: 0 0 0 48px !important;
    }
}

/* gp_intro — ice bg, halyard intro paragraph */
.mol-gp-intro,
.mol-gp-intro.breakdance,
.breakdance .mol-gp-intro {
    background: #EEF7FF !important;
    padding: 0 !important;
}

.mol-gp-intro__inner {
    max-width: 1176px !important;
    margin: 0 auto !important;
    /* 2026-07-03 (Amarildo #13): overmatige spatiëring rond de subtext onder de
       hero teruggebracht. Verticale padding van clamp(64-120px) naar
       clamp(40-72px) zodat de compacte intro niet in een zee van ijsblauw zweeft. */
    padding: clamp(40px, 5vw, 72px) clamp(24px, 6vw, 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.mol-gp-intro__heading {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 500 !important;
    /* Compact lead, consistent with the product/service page intros (Amarildo:
       offices intro was an oversized 56px statement vs. the small intros
       elsewhere — make it match). Wider max-width fixes the "narrow" feel. */
    font-size: clamp(18px, 1.5vw, 21px) !important;
    line-height: 1.4 !important;
    color: #00235c !important;
    margin: 0 !important;
    max-width: 52ch;
}

.mol-gp-intro__body,
.mol-gp-intro.breakdance .mol-gp-intro__body p {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(22px, 2.4vw, 32px) !important;
    line-height: 1.3 !important;
    color: #00235c !important;
    margin: 0 !important;
}

/* When a heading is present the body becomes a smaller supporting paragraph,
   so the section reads as big-tekst + small-eronder instead of one big block. */
.mol-gp-intro.has-heading .mol-gp-intro__body,
.mol-gp-intro.has-heading.breakdance .mol-gp-intro__body p {
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.55 !important;
    color: #2a3a66 !important;
    max-width: 64ch;
}

.mol-gp-intro.has-heading .mol-gp-intro__body p + p {
    margin-top: 14px !important;
}

/* gp_offices — H2 + filter pills + gradient card grid */
.mol-gp-offices,
.mol-gp-offices.breakdance,
.breakdance .mol-gp-offices {
    background: #ffffff !important;
    padding: 0 !important;
}

.mol-gp-offices__inner {
    max-width: 1512px !important;
    margin: 0 auto !important;
    padding: clamp(72px, 10vw, 145px) clamp(24px, 6vw, 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
}

.mol-gp-offices__title,
.mol-gp-offices.breakdance h2.mol-gp-offices__title {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.1 !important;
    color: #00235c !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mol-gp-offices__filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: center !important;
}

/* Type-filter row sits directly under the country-filter row, slightly
   smaller pills so the country selection stays the primary affordance. */
.mol-gp-offices__filters--type {
    margin-top: -8px !important;
    gap: 12px !important;
}

/* Group the country and type filter rows into a single horizontal bar on
   desktop, separated by a thin vertical divider. The bar wraps on narrow
   viewports so the two rows stack again on mobile. */
.mol-gp-offices__filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 16px 24px !important;
}

/* Dropdown filters (easier than the old pill rows — Amarildo). */
.mol-gp-offices__select-wrap {
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 220px !important;
}
.mol-gp-offices__select-label {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: rgba(0, 35, 92, 0.6) !important;
}
.mol-gp-offices__select-control {
    position: relative !important;
    display: block !important;
}
.mol-gp-offices__select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #00235c !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 35, 92, 0.2) !important;
    border-radius: 999px !important;
    padding: 12px 44px 12px 20px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.mol-gp-offices__select:hover {
    border-color: rgba(0, 35, 92, 0.4) !important;
}
.mol-gp-offices__select:focus-visible {
    border-color: #00235c !important;
    box-shadow: 0 0 0 3px rgba(0, 35, 92, 0.12) !important;
}
.mol-gp-offices__select-caret {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #00235c !important;
    pointer-events: none !important;
    display: inline-flex !important;
}
@media (max-width: 640px) {
    .mol-gp-offices__select-wrap { min-width: 0 !important; flex: 1 1 100% !important; }
}
.mol-gp-offices__filter-bar > .mol-gp-offices__filters--type {
    margin-top: 0 !important;
}
@media (min-width: 900px) {
    .mol-gp-offices__filter-bar > .mol-gp-offices__filters--type {
        padding-left: 24px !important;
        border-left: 1px solid rgba(0, 35, 92, 0.18) !important;
    }
}

.mol-gp-offices__filters--type .mol-gp-offices__filter {
    height: 40px !important;
    padding: 6px 6px 6px 18px !important;
    font-size: 13px !important;
}

.mol-gp-offices__filter,
button.mol-gp-offices__filter,
.breakdance .mol-gp-offices__filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 8px 8px 8px 20px !important;
    background: transparent !important;
    border: 1px solid rgba(0, 35, 92, 0.25) !important;
    border-radius: 999px !important;
    color: #00235c !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.mol-gp-offices__filter:hover:not(.is-active) {
    background: #f5f7fb !important;
}

.mol-gp-offices__filter.is-active,
.breakdance .mol-gp-offices__filter.is-active {
    background: #ffffff !important;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.08) !important;
    color: #00235c !important;
}

.mol-gp-offices__filter-label {
    color: inherit !important;
}

.mol-gp-offices__filter-state {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 1px solid #00235c !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    color: transparent !important;
}

.mol-gp-offices__filter.is-active .mol-gp-offices__filter-state {
    background: #F9B638 !important;
    border-color: transparent !important;
    color: #00235c !important;
}

.mol-gp-offices__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 24px !important;
}

.mol-gp-card,
a.mol-gp-card,
.breakdance .mol-gp-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(103.65deg, #299FDA -23.53%, #105697 100%) !important;
    box-shadow: 4px 4px 50px rgba(1, 53, 141, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-decoration: none !important;
    color: inherit !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    min-height: 470px !important;
}

.mol-gp-card:hover,
.mol-gp-card:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 4px 8px 60px rgba(1, 53, 141, 0.15) !important;
    outline: none !important;
}

/* Photo: top portion of the card so the office image is clearly visible.
   Per Figma 446px card-inner height with 200px photo + 246px info-card. */
.mol-gp-card__photo {
    flex: 0 0 200px !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.mol-gp-card__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Info-card: stretches to fill remaining height, lifted up 12px to slightly
   overlap the photo for the Figma drop-shadow look. */
.mol-gp-card__body {
    position: relative !important;
    flex: 1 1 auto !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 16px 24px 24px !important;
    margin-top: -12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    color: #00235c !important;
}

.mol-gp-card__head {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mol-gp-card__title,
.mol-gp-card.breakdance h3.mol-gp-card__title {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    color: #00235c !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mol-gp-card__company {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: rgba(0, 35, 92, 0.75) !important;
}

/* Tag pills under the title: country + (conditional) Warehouse. Subtle
   outline pills so they read as metadata, not action. */
.mol-gp-card__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

.mol-gp-card__tag {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0, 35, 92, 0.2) !important;
    background: transparent !important;
    color: #00235c !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.mol-gp-card__tag--type {
    background: #00235c !important;
    border-color: #00235c !important;
    color: #ffffff !important;
}

.mol-gp-card__lines,
.mol-gp-card__legal {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: #00235c !important;
}

.mol-gp-card__legal {
    border-top: 1px solid rgba(0, 35, 92, 0.25) !important;
    padding-top: 8px !important;
    gap: 4px !important;
}

.mol-gp-card__line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.mol-gp-card__line-icon {
    flex: 0 0 auto !important;
    color: #00235c !important;
    margin-top: 2px !important;
}

.mol-gp-card__line-text {
    color: inherit !important;
}

@media (max-width: 600px) {
    .mol-gp-offices__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Specificity-safe hide rule — must beat .breakdance .mol-gp-card display:flex */
a.mol-gp-card.is-hidden,
.breakdance a.mol-gp-card.is-hidden,
.breakdance .mol-gp-card.is-hidden {
    display: none !important;
}

/* ============================================================
   M3: Office detail extra sections (intro / facility+map / photos)
   ============================================================ */
.mol-of-intro,
.mol-of-intro.breakdance,
.breakdance .mol-of-intro {
    background: #ffffff !important;
    padding: 0 !important;
}

.mol-of-intro__inner {
    max-width: 1176px !important;
    margin: 0 auto !important;
    padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.mol-of-intro__body,
.mol-of-intro.breakdance .mol-of-intro__body p {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.65 !important;
    color: rgba(0, 35, 92, 0.85) !important;
    margin: 0 !important;
}

/* First paragraph in the office intro stays the big editorial size (Halyard,
   ~20-28px). Everything below sits at body size. The renderer doesn't split
   the WYSIWYG — this is just a CSS pattern so editors can write a "lede"
   paragraph and follow-up paragraphs in the same field. */
.mol-of-intro__body > p:first-child,
.mol-of-intro.breakdance .mol-of-intro__body > p:first-child {
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: #00235c !important;
    margin: 0 0 clamp(16px, 1.5vw, 24px) 0 !important;
}

.mol-of-intro__body > p + p,
.mol-of-intro.breakdance .mol-of-intro__body > p + p {
    margin-top: clamp(12px, 1.2vw, 18px) !important;
}

.mol-of-facility,
.mol-of-facility.breakdance,
.breakdance .mol-of-facility {
    background: #EEF7FF !important;
    padding: 0 !important;
}

.mol-of-facility__inner {
    max-width: 1512px !important;
    margin: 0 auto !important;
    padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 96px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(32px, 5vw, 80px) !important;
    align-items: start !important;
}

.mol-of-facility__col--main {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.mol-of-facility__title,
.mol-of-facility.breakdance h2.mol-of-facility__title {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.2vw, 40px) !important;
    line-height: 1.15 !important;
    color: #00235c !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mol-of-facility__intro {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(0, 35, 92, 0.85) !important;
    margin: 0 !important;
}

.mol-of-facility__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.mol-of-facility__item {
    display: grid !important;
    grid-template-columns: 24px minmax(160px, 220px) 1fr !important; /* icon | uniform label-kolom | value */
    align-items: start !important;
    gap: 12px !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #00235c !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(0, 35, 92, 0.12) !important;
}
@media (max-width: 640px) {
    .mol-of-facility__item { grid-template-columns: 24px 1fr !important; }
    .mol-of-facility__item-value { grid-column: 2 / -1 !important; }
}

.mol-of-facility__item:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.mol-of-facility__item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: #F9B638 !important;
    color: #00235c !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
}

.mol-of-facility__item-label {
    font-weight: 500 !important;
    flex: 1 1 auto !important;
    /* Amarildo 2026-06-09: label verticaal gecentreerd t.o.v. de check-icoon
       (was top-aligned terwijl de icoon midden-cell zat). */
    align-self: center !important;
}

.mol-of-facility__item-value {
    font-weight: 400 !important;
    color: rgba(0, 35, 92, 0.85) !important;
}

.mol-of-facility__col--side {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.mol-of-facility__contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 35, 92, 0.06) !important;
}

.mol-of-facility__contact-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #00235c !important;
}

.mol-of-facility__contact-icon {
    flex: 0 0 auto !important;
    color: #00235c !important;
    margin-top: 2px !important;
}

.mol-of-facility__contact-link,
.breakdance .mol-of-facility__contact-link {
    color: #00235c !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0, 35, 92, 0.25) !important;
}

.mol-of-facility__contact-link:hover {
    border-bottom-color: #00235c !important;
}

.mol-of-facility__map {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 35, 92, 0.08) !important;
    aspect-ratio: 4 / 3 !important;
    background: #ffffff !important;
}

.mol-of-facility__map iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

@media (max-width: 899px) {
    .mol-of-facility__inner {
        grid-template-columns: 1fr !important;
    }
}

.mol-of-photos,
.mol-of-photos.breakdance,
.breakdance .mol-of-photos {
    background: #ffffff !important;
    padding: 0 !important;
}

.mol-of-photos__inner {
    max-width: 1512px !important;
    margin: 0 auto !important;
    padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px) !important;
}

.mol-of-photos__title {
    margin: 0 0 clamp(20px, 2.5vw, 32px) 0 !important;
    font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.2vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: #00235c !important;
}

.mol-of-photos__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
}

.mol-of-photos__item {
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;
    background: rgba(0, 35, 92, 0.06) !important;
}

.mol-of-photos__trigger {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: zoom-in !important;
    overflow: hidden !important;
}

.mol-of-photos__trigger:focus-visible {
    outline: 2px solid #f9b638 !important;
    outline-offset: 2px !important;
}

.mol-of-photos__item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 280ms ease !important;
}

.mol-of-photos__trigger:hover img,
.mol-of-photos__trigger:focus-visible img {
    transform: scale(1.04) !important;
}

/* ---------------------------------------------------------------------------
 * Office brochure download — optional gated PDF block between the facility
 * photos and the office CTA. Uses the existing .mol-dlf form on the right
 * and an ice-blue intro card on the left.
 * ------------------------------------------------------------------------- */
.mol-of-brochure,
.mol-of-brochure.breakdance,
.breakdance .mol-of-brochure {
    background: #ffffff !important;
    padding: 0 !important;
}

.mol-of-brochure__inner {
    max-width: 1512px !important;
    margin: 0 auto !important;
    padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: center !important;
}

.mol-of-brochure__copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.mol-of-brochure__title {
    margin: 0 !important;
    font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.2vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: #00235c !important;
}

/* /complaints/ page (id 2963) — kill the Breakdance section/container
   wrapper around [mol_complaints_form] so the form lines up with contact
   (full-bleed hero + inner-constrained body). mol-pc-form has its own
   max-width inner. */
body.page-id-2963 .bde-section,
body.page-id-2963 .bde-section > .section-container,
body.page-id-2963 .bde-section .bde-container,
body.page-id-2963 .breakdance .section-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.mol-of-brochure__intro {
    margin: 0 !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: clamp(15px, 1.2vw, 17px) !important;
    line-height: 1.6 !important;
    color: rgba(0, 35, 92, 0.85) !important;
    max-width: 56ch !important;
}

.mol-of-brochure__form {
    width: 100% !important;
}

.mol-of-brochure__form .mol-dlf {
    max-width: none !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .mol-of-brochure__inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* ============================================================
   Hero — Figma node 573:6302
   ============================================================ */

.mol-hero {
  --mol-hero-kobalt: #00235c;
  --mol-hero-ice: #eef7ff;
  --mol-hero-white: #ffffff;
  --mol-hero-sunflower: #f9b638;
  --mol-hero-border: rgba(0, 35, 92, 0.25);
  --mol-hero-outline: rgba(0, 35, 92, 0.2);
  --mol-hero-muted: rgba(255, 255, 255, 0.85);
  --mol-hero-radius-tr: 80px;
  --mol-hero-inner-radius: 40px;
  --mol-hero-bg-inset-right: clamp(0px, 6.35vw, 96px);
  --mol-hero-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-hero-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  display: block !important;
  width: 100% !important;
  /* min-height (not fixed height) so translated languages with longer copy
     can grow the hero instead of being clipped. .mol-hero__bg keeps its own
     overflow:hidden for the rounded corner, so the visual stays correct.
     Editor wil de hero zo vol mogelijk in beeld — calc(100vh - 88px)
     compenseert de topbar + navbar zodat hij precies onder de menubalk
     stopt, op heel grote schermen capped op 1000px om niet te lang te worden.
     Op kleine viewports (laptops 768px) blijft min ~620px voor leesbaarheid. */
  min-height: clamp(620px, calc(100vh - 88px), 1000px) !important;
  overflow: visible !important;
  background: transparent !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero * {
  box-sizing: border-box !important;
}

/* Balanced wrap on display headings so long translations break at natural points. */
.mol-hero__title,
.mol-page-hero__title,
.mol-pf-hero__title,
.mol-cta__title,
.mol-values__title,
.mol-infographic__title,
.mol-pc-offices__title,
.mol-tsca__subtitle {
  text-wrap: balance;
}

/* (Removed) Lang-specific title shrink for cs/pl/de.
   Was needed when those locales had actual translated copy ~30% longer than
   English. Site switched to regionalized English (same EN copy on all
   subfolders), so titles are identical length now and should render at the
   same size everywhere. If a regional override later introduces a longer
   H1, re-introduce a targeted rule (per H1, not per locale). */

.mol-hero__bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: var(--mol-hero-bg-inset-right) !important;
  bottom: 0 !important;
  z-index: 0 !important;
  background: var(--mol-hero-kobalt) !important;
  border-top-right-radius: var(--mol-hero-radius-tr) !important;
  overflow: hidden !important;
}

.mol-hero__bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
}

.mol-hero__bg-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(234deg, rgba(0, 35, 92, 0.35) 0%, rgba(0, 35, 92, 1) 100%) !important;
}

.mol-hero__content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(28px, 4vw, 48px) !important;
  padding: clamp(56px, 6vw, 88px) clamp(24px, 6vw, 96px) clamp(40px, 5vw, 64px) !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  height: 100% !important;
}

.mol-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
  max-width: 929px !important;
}

/* Search dock stays pinned to the bottom so the copy block sits centred
   in the kobalt area, regardless of how tall the hero is. */
.mol-hero__search {
  margin-top: auto !important;
}

.mol-hero__title {
  margin: 0 !important;
  font-family: var(--mol-hero-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 6vw, 80px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__intro {
  max-width: 760px !important;
  font-family: var(--mol-hero-font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-muted) !important;
}

.mol-hero__intro p,
.mol-hero__intro div {
  margin: 0 0 0.6em !important;
}

.mol-hero__intro p:last-child,
.mol-hero__intro div:last-child {
  margin-bottom: 0 !important;
}

/* Expert CTA (optional — only renders when avatars exist) */

.mol-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(20px, 3vw, 48px) !important;
  align-self: flex-start !important;
}

.mol-hero__expert {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 4px !important;
  background: transparent !important;
  transition: opacity 0.18s ease;
}

a.mol-hero__expert:hover {
  opacity: 0.85 !important;
}

.mol-hero__video {
  display: inline-flex !important;
  align-items: center !important;
  /* W1: tighter gap because there's no longer a kicker/cta wrapper.
     icon -> label -> arrow are direct siblings now. */
  gap: 12px !important;
  padding: 4px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  color: inherit !important;
  font-family: var(--mol-hero-font-body) !important;
  text-align: left !important;
  transition: opacity 0.18s ease;
}

/* W1: label sits directly inside the button now (no .mol-hero__video-cta
   wrapper) so move its typography here. */
.mol-hero__video-cta-label {
  font-family: var(--mol-hero-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__video:hover,
.mol-hero__video:focus-visible {
  opacity: 0.85 !important;
}

.mol-hero__video-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--mol-hero-sunflower) !important;
  color: var(--mol-hero-kobalt) !important;
  flex: none !important;
}

.mol-hero__video-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  margin-left: 2px !important;
}

.mol-hero__video-text {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
}

.mol-hero__video-kicker {
  font-family: var(--mol-hero-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__video-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mol-hero-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__video-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mol-hero-white) !important;
}

/* Lightbox */
.mol-hero-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 4vw, 48px) !important;
  background: rgba(0, 14, 46, 0.85) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.mol-hero-lightbox.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.mol-hero-lightbox__inner {
  position: relative !important;
  width: 100% !important;
  max-width: 1080px !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.mol-hero-lightbox__iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

.mol-hero-lightbox__close {
  position: absolute !important;
  top: -44px !important;
  right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
}

.mol-hero-lightbox__close:hover,
.mol-hero-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.3) !important;
}

.mol-hero-lightbox__close svg {
  width: 16px !important;
  height: 16px !important;
}

body.mol-hero-lightbox-open {
  overflow: hidden !important;
}

.mol-hero__expert-avatars {
  display: inline-flex !important;
  padding: 4px !important;
  background: var(--mol-hero-white) !important;
  border-radius: 999px !important;
  box-shadow: 0 5.76px 43.2px 0 rgba(66, 76, 150, 0.05) !important;
}

.mol-hero__expert-avatar {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  margin-left: -16px !important;
  border: 2px solid var(--mol-hero-white) !important;
}

.mol-hero__expert-avatar:first-child {
  margin-left: 0 !important;
}

.mol-hero__expert-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  display: block !important;
}

.mol-hero__expert-text {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mol-hero__expert-kicker {
  font-family: var(--mol-hero-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__expert-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mol-hero-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__expert-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
}

.mol-hero__expert-cta-icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Solution search widget */

.mol-hero__search {
  align-self: flex-start !important;
  max-width: 560px !important;
  width: 100% !important;
  background: var(--mol-hero-ice) !important;
  color: var(--mol-hero-kobalt) !important;
  padding: clamp(24px, 2.5vw, 32px) !important;
  border-top-right-radius: var(--mol-hero-inner-radius) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.mol-hero__search-title {
  margin: 0 !important;
  font-family: var(--mol-hero-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-kobalt) !important;
}

.mol-hero__search-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.mol-hero__search-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 260px !important;
  min-width: 220px !important;
  height: 48px !important;
  padding: 0 44px 0 24px !important;
  background: var(--mol-hero-white) !important;
  border: 1px solid var(--mol-hero-border) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

.mol-hero__search-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  /* Strek select over de hele wrap incl. icoon-gebied zodat clicks op het
     pijltje ook de native dropdown openen (Amarildo 2026-06-09). */
  position: absolute !important;
  inset: 0 !important;
  padding: 0 44px 0 24px !important;
  margin: 0 !important;
  font-family: var(--mol-hero-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-kobalt) !important;
  cursor: pointer !important;
}

.mol-hero__search-select-icon {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mol-hero-kobalt) !important;
  pointer-events: none !important;
}

.mol-hero__search-or {
  font-family: var(--mol-hero-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hero-kobalt) !important;
  opacity: 0.55 !important;
}

.mol-hero__search-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  background: transparent !important;
  color: var(--mol-hero-kobalt) !important;
  border: 1px solid var(--mol-hero-outline) !important;
  border-radius: 999px !important;
  font-family: var(--mol-hero-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.mol-hero__search-cta:hover {
  background: var(--mol-hero-kobalt) !important;
  color: var(--mol-hero-white) !important;
}

.mol-hero__search-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hero-sunflower) !important;
  color: var(--mol-hero-kobalt) !important;
  border-radius: 999px !important;
}

.mol-hero__search-cta:hover .mol-hero__search-cta-icon {
  background: var(--mol-hero-sunflower) !important;
  color: var(--mol-hero-kobalt) !important;
}

.mol-hero__search-cta-icon svg {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 899px) {
  .mol-hero {
    --mol-hero-radius-tr: 64px;
    --mol-hero-bg-inset-right: 0px;
    /* Hero has a fixed height on desktop (clamp 520-720) which clips
       the search-block on mobile because portrait viewports can't fit
       title + intro + search + expert. Let the hero grow with its
       content; min-height keeps the kobalt area substantial. */
    height: auto !important;
    min-height: clamp(560px, 95vh, 720px) !important;
  }

  .mol-hero__content {
    padding-top: clamp(48px, 12vw, 80px) !important;
    gap: 32px !important;
    height: auto !important;
  }

  .mol-hero__search {
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .mol-hero__search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .mol-hero__search-select-wrap {
    flex-basis: auto !important;
    width: 100% !important;
  }

  .mol-hero__search-or {
    text-align: center !important;
  }

  .mol-hero__search-cta {
    justify-content: space-between !important;
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .mol-hero__title {
    font-size: clamp(38px, 12vw, 60px) !important;
  }

  .mol-hero__expert {
    flex-wrap: wrap !important;
  }

  .mol-hero__actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* ============================================================
   Homepage1 — Introduction (Figma desktop 573:6355 / mobile 1084:26402)
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--hero:has(+ .mol-logistics__section--homepage1) {
  margin-bottom: 0 !important;
}

/* Remove gap between any two consecutive homepage* sections (homepage1, homepage2, homepage3, ...). */
.mol-logistics-stack > [class*="mol-logistics__section--homepage"]:has(+ [class*="mol-logistics__section--homepage"]),
.mol-logistics-stack > .mol-logistics__section--hero:has(+ [class*="mol-logistics__section--homepage"]) {
  margin-bottom: 0 !important;
}


.mol-homepage1 {
  --mol-hp1-kobalt: #00235c;
  --mol-hp1-white: #ffffff;
  --mol-hp1-ice: #eef7ff;
  --mol-hp1-bg: var(--mol-hp1-ice);
  --mol-hp1-sunflower: #f9b638;
  --mol-hp1-outline: rgba(0, 35, 92, 0.2);
  --mol-hp1-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-hp1-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  background: var(--mol-hp1-bg) !important;
  color: var(--mol-hp1-kobalt) !important;
}

/* Homepage: intro-blok wit in plaats van ijsblauw. Het blok eronder
   (.mol-tss--homepage2) is ook #eef7ff, dus de twee secties liepen in elkaar
   over. Feedback PageKings 2026-08-06, must-have, desktop en mobiel. Alleen op
   de homepage: op /about-mol-logistics/ en de listing-paginas staat hetzelfde
   blok tegen een andere buur en blijft ijsblauw kloppen. */
body.home .mol-homepage1 {
  --mol-hp1-bg: var(--mol-hp1-white);
}

.mol-homepage1 * {
  box-sizing: border-box !important;
}

.mol-homepage1__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 120px clamp(24px, 6vw, 96px) !important;
}

.mol-homepage1__text {
  max-width: 984px !important;
  width: 100% !important;
}

.mol-homepage1__text,
.mol-homepage1__text p,
.mol-homepage1__text div {
  margin: 0 !important;
  font-family: var(--mol-hp1-font-display) !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
  color: var(--mol-hp1-kobalt) !important;
}

.mol-homepage1__text p + p,
.mol-homepage1__text div + div {
  margin-top: 0.6em !important;
}

/* --rich modifier: first paragraph keeps display lead style, subsequent
   paragraphs render as regular Montserrat body copy so editors can place
   long-form content underneath the big intro line. */
.mol-homepage1--rich .mol-homepage1__text p:not(:first-child),
.mol-homepage1--rich .mol-homepage1__text div:not(:first-child) {
  font-family: var(--mol-hp1-font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
}

.mol-homepage1--rich .mol-homepage1__text p:not(:first-child) + p,
.mol-homepage1--rich .mol-homepage1__text div:not(:first-child) + div {
  margin-top: 1em !important;
}

.mol-homepage1__button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  color: var(--mol-hp1-kobalt) !important;
  border: 1px solid var(--mol-hp1-outline) !important;
  border-radius: 999px !important;
  font-family: var(--mol-hp1-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.mol-homepage1__button:hover,
.mol-homepage1__button:focus-visible {
  background: var(--mol-hp1-kobalt) !important;
  color: var(--mol-hp1-white) !important;
}

.mol-homepage1__button-label {
  display: inline-block !important;
}

.mol-homepage1__button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hp1-sunflower) !important;
  color: var(--mol-hp1-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-homepage1__button:hover .mol-homepage1__button-icon,
.mol-homepage1__button:focus-visible .mol-homepage1__button-icon {
  background: var(--mol-hp1-sunflower) !important;
  color: var(--mol-hp1-kobalt) !important;
}

.mol-homepage1__button-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

@media (max-width: 899px) {
  .mol-homepage1__inner {
    padding: 64px 24px 80px !important;
    gap: 24px !important;
    max-width: 100% !important;
  }

  .mol-homepage1__text,
  .mol-homepage1__text p,
  .mol-homepage1__text div {
    font-size: 24px !important;
  }
}

/* ============================================================
   Header — Figma nodes 256:3183 (desktop) / 1084:26885 (mobile)
   ============================================================ */

.mol-header {
  --mol-hdr-kobalt: #00235c;
  --mol-hdr-ice: #eef7ff;
  --mol-hdr-white: #ffffff;
  --mol-hdr-sunflower: #f9b638;
  --mol-hdr-border: rgba(255, 255, 255, 0.35);
  --mol-hdr-border-light: rgba(0, 35, 92, 0.25);
  --mol-hdr-border-subtle: rgba(0, 35, 92, 0.2);
  --mol-hdr-muted: rgba(255, 255, 255, 0.85);
  --mol-hdr-font: "Montserrat", system-ui, sans-serif;
  --mol-hdr-z: 100;

  position: relative !important;
  z-index: var(--mol-hdr-z) !important;
  width: 100% !important;
  color: var(--mol-hdr-kobalt) !important;
  font-family: var(--mol-hdr-font) !important;
}

.mol-header * {
  box-sizing: border-box !important;
}

/* Topbar (utility) */

.mol-header__topbar {
  background: var(--mol-hdr-kobalt) !important;
  color: var(--mol-hdr-white) !important;
}

.mol-header__topbar-inner {
  max-width: 1512px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px clamp(24px, 6vw, 96px) !important;
  min-height: 40px !important;
}

.mol-header__topbar-tagline {
  color: var(--mol-hdr-white) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.mol-header__topbar-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: auto !important;
}

.mol-header__topbar-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--mol-hdr-white) !important;
  text-decoration: none !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: opacity 0.18s ease;
}

.mol-header__topbar-link:hover,
.mol-header__topbar-link:focus-visible {
  opacity: 0.7 !important;
  color: var(--mol-hdr-white) !important;
}

/* ---- Language switcher (TranslatePress) in the topbar ---- */
.mol-header__lang {
  position: relative !important;
  display: inline-block !important;
}
.mol-header__lang > summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important; /* match topbar-link gap voor uniforme spacing */
  cursor: pointer !important;
  color: var(--mol-hdr-white) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  /* Match topbar-link weight/padding for visual consistency in the topbar */
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  padding: 0 !important;
  transition: opacity .18s ease !important;
}
.mol-header__lang > summary::-webkit-details-marker { display: none !important; }
.mol-header__lang > summary::marker { content: "" !important; }
.mol-header__lang > summary:hover,
.mol-header__lang > summary:focus-visible { opacity: 0.7 !important; }
.mol-header__lang-flag {
  display: block !important;
  width: 18px !important;
  height: 12px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
/* White globe in the topbar region toggle (replaces the EU flag) so the
   header stays consistent. Inherits the topbar text colour via currentColor. */
.mol-header__lang-globe {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
}
.mol-header__lang-globe svg {
  width: 14px !important;
  height: 14px !important;
}
/* Amarildo 2026-06-09: language selector padding gelijk aan careers/search.
   Globe-icon voor de tekst weg, alleen "English ▼" overhouden zodat layout
   text-then-icon matched de andere twee topbar items. */
.mol-header__lang-globe {
  display: none !important;
}
.mol-header__lang-caret {
  display: inline-flex !important;
  transition: transform .18s ease !important;
}
.mol-header__lang[open] > summary .mol-header__lang-caret { transform: rotate(180deg) !important; }
.mol-header__lang-list {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 60 !important;
  min-width: 180px !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 35, 92, 0.18) !important;
}
.mol-header__lang-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  color: #00235c !important;
  text-decoration: none !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.mol-header__lang-option:hover,
.mol-header__lang-option:focus-visible {
  background: #f1f4f9 !important;
  color: #00235c !important;
}

.mol-header__topbar-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  width: 16px !important;
  height: 16px !important;
}

/* Search overlay (Figma: ice band with white pill input + kobalt button) */
.mol-header__search-overlay {
  display: none !important;
  width: 100% !important;
  background: #eef7ff !important;
  padding: 24px clamp(24px, 6vw, 96px) !important;
  position: relative !important;
}

.mol-header__search-close {
  display: none !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--mol-hdr-kobalt) !important;
  cursor: pointer !important;
  padding: 0 !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .mol-header__search-close {
    display: inline-flex !important;
  }
}

.mol-header__search-overlay[data-mol-search-overlay].is-open {
  display: block !important;
}

.mol-header__search-form {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}

.mol-header__search-pill {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 12px 12px 40px !important;
  gap: 24px !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.35) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.mol-header__search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hdr-kobalt) !important;
  padding: 0 !important;
  height: 24px !important;
}

.mol-header__search-input::placeholder {
  color: var(--mol-hdr-kobalt) !important;
  opacity: 0.7 !important;
}

.mol-header__search-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: var(--mol-hdr-kobalt) !important;
  border: 1px solid rgba(0, 35, 92, 0.35) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
  flex: none !important;
  transition: opacity 0.18s ease;
}

.mol-header__search-submit:hover,
.mol-header__search-submit:focus-visible {
  opacity: 0.9 !important;
}

.mol-header__search-submit-label {
  color: inherit !important;
}

.mol-header__search-submit-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f9b638 !important;
  color: var(--mol-hdr-kobalt) !important;
  flex: none !important;
}

.mol-header__search-submit-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

@media (max-width: 768px) {
  /* Search overlay must escape the document flow on mobile so it can
     sit on top of the fixed mobile drawer (z-index: hdr+10). Otherwise
     the drawer covers it and the user sees nothing happen when tapping
     "Search" inside the hamburger menu. */
  .mol-header__search-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--mol-hdr-z) + 20) !important;
    padding: 88px 16px 24px !important;
  }
  .mol-header__search-pill {
    padding: 8px 8px 8px 20px !important;
    gap: 12px !important;
  }
  .mol-header__search-submit-label {
    display: none !important;
  }
  .mol-header__search-submit {
    padding: 4px !important;
  }
}

.mol-header__topbar-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Navbar */

.mol-header__navbar {
  background: transparent !important;
}

.mol-header__navbar-inner {
  max-width: 1512px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 24px clamp(24px, 6vw, 96px) !important;
  flex-wrap: nowrap !important; /* keep logo + nav + CTA on one row (Amarildo: never 2 lines) */
}

.mol-header__logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.mol-header__logo img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 32px !important;
  width: auto !important;
  margin: 0 !important;
  filter: brightness(0) invert(1) !important;
}

.mol-header__nav {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.mol-header__nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important; /* nav items stay on one line; collapses to hamburger below 1024px */
}

.mol-header__nav-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-header__nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  color: var(--mol-hdr-white) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease;
}

.mol-header__nav-link:hover {
  opacity: 0.8 !important;
}

.mol-header__nav-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease;
}

.mol-header__nav-item.is-open > .mol-header__nav-link .mol-header__nav-caret {
  transform: rotate(180deg) !important;
}

/* Desktop dropdown panel */

.mol-header__dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 320px !important;
  background: var(--mol-hdr-white) !important;
  color: var(--mol-hdr-kobalt) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px 0 rgba(0, 35, 92, 0.15) !important;
  padding: 24px !important;
  z-index: 10 !important;
}

.mol-header__dropdown[hidden] {
  display: none !important;
}

.mol-header__dropdown-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 24px !important;
  min-width: 240px !important;
}

.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown {
  min-width: 720px !important;
}

.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown {
  min-width: 560px !important;
}

.mol-header__dropdown-heading {
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(0, 35, 92, 0.55) !important;
}

.mol-header__dropdown-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-header__dropdown-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: var(--mol-hdr-kobalt) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

.mol-header__dropdown-link:hover {
  background: var(--mol-hdr-ice) !important;
}

.mol-header__dropdown-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--mol-hdr-kobalt) !important;
  opacity: 0.6 !important;
}

/* CTA button (desktop) */

.mol-header__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  background: transparent !important;
  color: var(--mol-hdr-white) !important;
  border: 1px solid var(--mol-hdr-border) !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.mol-header__cta:hover {
  background: var(--mol-hdr-white) !important;
  color: var(--mol-hdr-kobalt) !important;
}

.mol-header__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hdr-sunflower) !important;
  color: var(--mol-hdr-kobalt) !important;
  border-radius: 999px !important;
}

.mol-header__cta-icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hamburger (mobile only) */

.mol-header__hamburger {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mol-hdr-white) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}

.mol-header__hamburger svg {
  width: 24px !important;
  height: 24px !important;
}

/* Mobile drawer — hidden by default */

.mol-header__mobile {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: calc(var(--mol-hdr-z) + 10) !important;
  background: var(--mol-hdr-ice) !important;
  color: var(--mol-hdr-kobalt) !important;
  display: none !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

.mol-header__mobile.is-open {
  display: flex !important;
}

.mol-header__mobile-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 25px !important;
  height: 72px !important;
  background: var(--mol-hdr-white) !important;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.04) !important;
  flex: 0 0 auto !important;
}

.mol-header__mobile-logo {
  display: inline-flex !important;
  align-items: center !important;
}

.mol-header__mobile-logo img {
  display: block !important;
  max-width: 171px !important;
  height: auto !important;
  max-height: 24px !important;
  margin: 0 !important;
}

.mol-header__mobile-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  color: var(--mol-hdr-kobalt) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-header__mobile-close-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.mol-header__mobile-body {
  flex: 1 1 auto !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-header__mobile-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-header__mobile-heading {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hdr-kobalt) !important;
}

.mol-header__mobile-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-header__mobile-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  background: var(--mol-hdr-white) !important;
  color: var(--mol-hdr-kobalt) !important;
  border: 1px solid var(--mol-hdr-border-subtle) !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

.mol-header__mobile-item:hover {
  background: var(--mol-hdr-ice) !important;
}

.mol-header__mobile-item--solo {
  font-weight: 500 !important;
}

.mol-header__mobile-item-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--mol-hdr-kobalt) !important;
  opacity: 0.7 !important;
}

.mol-header__mobile-utility {
  margin-top: 8px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--mol-hdr-border-subtle) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-header__mobile-utility-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  background: var(--mol-hdr-white) !important;
  color: var(--mol-hdr-kobalt) !important;
  border: 1px solid var(--mol-hdr-border-subtle) !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}

.mol-header__mobile-utility-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mol-hdr-kobalt) !important;
  opacity: 0.7 !important;
}

/* Language switcher inside the mobile menu (white panel) */
.mol-header__mobile-lang {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.mol-header__mobile-lang-label {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--mol-hdr-kobalt) !important;
  opacity: 0.6 !important;
}
.mol-header__mobile-lang-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.mol-header__mobile-lang-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--mol-hdr-border-subtle) !important;
  border-radius: 999px !important;
  background: var(--mol-hdr-white) !important;
  color: var(--mol-hdr-kobalt) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.mol-header__mobile-lang-pill img {
  display: block !important;
  width: 18px !important;
  height: 12px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
}
.mol-header__mobile-lang-pill.is-active {
  background: var(--mol-hdr-kobalt) !important;
  border-color: var(--mol-hdr-kobalt) !important;
  color: var(--mol-hdr-white) !important;
}

.mol-header__mobile-utility-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.mol-header__mobile-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 8px !important;
  padding: 12px 12px 12px 24px !important;
  background: var(--mol-hdr-kobalt) !important;
  color: var(--mol-hdr-white) !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}

.mol-header__mobile-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hdr-sunflower) !important;
  color: var(--mol-hdr-kobalt) !important;
  border-radius: 999px !important;
}

.mol-header__mobile-cta-icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Body scroll lock when mobile menu is open */

body.mol-header-menu-open {
  overflow: hidden !important;
}

/* Responsive: collapse to mobile at 1024px */

@media (max-width: 1023px) {
  .mol-header__topbar,
  .mol-header__nav,
  .mol-header__cta,
  .mol-header__mobile-cta {
    display: none !important;
  }

  .mol-header__navbar-inner {
    padding: 14px 16px !important;
    gap: 12px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  .mol-header__logo {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .mol-header__logo img {
    max-height: 24px !important;
    max-width: 100% !important;
  }

  .mol-header__hamburger {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* ============================================================
   Homepage2 — Transport solutions overview variant
   (Figma desktop 573:6625 / mobile 1084:26405)
   Scoped under .mol-tss--homepage2 to override default .mol-tss styling.
   ============================================================ */

/* Reset stack + Breakdance wrappers so the ice bg goes edge-to-edge. */
.mol-logistics-stack > .mol-logistics__section--homepage2 {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.mol-logistics__section--homepage2 {
  background: transparent !important;
}

[class*="bde-column"]:has(.mol-tss--homepage2),
[class*="bde-div"]:has(.mol-tss--homepage2),
[class*="bde-row"]:has(.mol-tss--homepage2),
[class*="bde-columns"]:has(.mol-tss--homepage2) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mol-logistics-stack:has(.mol-tss--homepage2) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ice bg on the section itself — beats the default .mol-tss transparent rule. */
section.mol-tss.mol-tss--homepage2,
section.mol-tss.mol-tss--homepage2.breakdance,
.breakdance section.mol-tss.mol-tss--homepage2 {
  background: #eef7ff !important;
  background-color: #eef7ff !important;
  background-image: none !important;
}

section.mol-tss.mol-tss--homepage2 {
  --mol-hp2-kobalt: #00235c;
  --mol-hp2-white: #ffffff;
  --mol-hp2-ice: #eef7ff;
  --mol-hp2-sunflower: #f9b638;
  --mol-hp2-border: rgba(0, 35, 92, 0.25);
  --mol-hp2-btn-border: rgba(255, 255, 255, 0.35);
  --mol-hp2-progress-track: rgba(255, 255, 255, 0.35);
  --mol-hp2-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-hp2-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  color: var(--mol-hp2-kobalt) !important;
  font-family: var(--mol-hp2-font-body) !important;
}

.mol-tss--homepage2 .mol-tss__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 145px) clamp(24px, 6vw, 96px) clamp(64px, 9vw, 125px) !important;
  box-sizing: border-box !important;
}

.mol-tss--homepage2 .mol-tss__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp2-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-hp2-kobalt) !important;
}

.mol-tss--homepage2 .mol-tss__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 592fr) minmax(0, 648fr) !important;
  gap: 80px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-tss--homepage2 .mol-tss__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  min-width: 0 !important;
}

.mol-tss--homepage2 .mol-tss__title {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 557px !important;
  font-family: var(--mol-hp2-font-display) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--mol-hp2-kobalt) !important;
}

.mol-tss--homepage2 .mol-tss__figure {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 40px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.mol-tss--homepage2 .mol-tss__img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 514px !important;
  aspect-ratio: 592 / 514 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 80px 0 0 !important;
  margin: 0 !important;
}

.mol-tss--homepage2 .mol-tss__stat {
  position: absolute !important;
  left: 40px !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 179px !important;
  max-width: calc(100% - 40px) !important;
  padding: 20px 24px !important;
  background: var(--mol-hp2-white) !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.05) !important;
}

.mol-tss--homepage2 .mol-tss__stat[hidden] {
  display: none !important;
}

.mol-tss--homepage2 .mol-tss__stat-num {
  position: relative !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 0 !important;
  padding-right: 24px !important;
  font-family: var(--mol-hp2-font-display) !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp2-kobalt) !important;
}

.mol-tss--homepage2 .mol-tss__item--no-plus .mol-tss__stat-num::after {
  content: none !important;
}

/* The visible stat lives in the left-hero panel (populated by JS from the
   active item), which is NOT inside a .mol-tss__item, so the rule above can't
   reach it. JS mirrors the active item's no-plus state onto the panel as
   .mol-tss__stat--no-plus; hide the "+" there too. (Amarildo 2026-06-18) */
.mol-tss--homepage2 .mol-tss__stat--no-plus .mol-tss__stat-num::after {
  content: none !important;
}

/* MA-1 + MA-4: homepage stats sectie stackt op mobile, stat-getal scaalt
   met clamp i.p.v. 42px hardcoded zodat het past op smalle viewports. */
@media (max-width: 899px) {
  .mol-tss--homepage2 .mol-tss__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

.mol-tss--homepage2 .mol-tss__stat-num {
  font-size: clamp(32px, 8vw, 42px) !important;
}

.mol-tss--homepage2 .mol-tss__stat-num::after {
  content: "+" !important;
  position: absolute !important;
  top: 2px !important;
  right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--mol-hp2-sunflower) !important;
  color: var(--mol-hp2-kobalt) !important;
  border-radius: 999px !important;
  font-family: var(--mol-hp2-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.mol-tss--homepage2 .mol-tss__stat-desc {
  display: block !important;
  margin: 0 !important;
  font-family: var(--mol-hp2-font-display) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--mol-hp2-kobalt) !important;
}

.mol-tss--homepage2 .mol-tss__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.mol-tss--homepage2 .mol-tss__filters {
  display: none !important;
}

.mol-tss--homepage2 .mol-tss__lists {
  min-width: 0 !important;
}

.mol-tss--homepage2 .mol-tss__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mol-tss--homepage2 .mol-tss__item {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mol-hp2-white) !important;
  border: 1px solid var(--mol-hp2-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

.mol-tss--homepage2 .mol-tss__item.is-active {
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-color: var(--mol-hp2-border) !important;
  color: var(--mol-hp2-white) !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.mol-tss--homepage2 .mol-tss__item.is-active::before {
  content: none !important;
}

.mol-tss--homepage2 .mol-tss__item > * {
  position: relative !important;
  z-index: 1 !important;
}

.mol-tss--homepage2 .mol-tss__trigger {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 40px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mol-hp2-kobalt) !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.mol-tss--homepage2 .mol-tss__item.is-active .mol-tss__trigger {
  padding: 32px 40px 0 !important;
  background: transparent !important;
  color: var(--mol-hp2-white) !important;
  cursor: default !important;
}

.mol-tss--homepage2 .mol-tss__trigger-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

.mol-tss--homepage2 .mol-tss__trigger-icon {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter: none !important;
}

.mol-tss--homepage2 .mol-tss__item:not(.is-active) .mol-tss__trigger-icon {
  filter: brightness(0) saturate(100%) invert(10%) sepia(40%) saturate(2500%) hue-rotate(200deg) !important;
}

.mol-tss--homepage2 .mol-tss__item.is-active .mol-tss__trigger-icon {
  filter: brightness(0) invert(1) !important;
}

.mol-tss--homepage2 .mol-tss__trigger-title {
  margin: 0 !important;
  font-family: var(--mol-hp2-font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--mol-hp2-kobalt) !important;
}

.mol-tss--homepage2 .mol-tss__item.is-active .mol-tss__trigger-title {
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp2-white) !important;
}

.mol-tss--homepage2 .mol-tss__body {
  padding: 24px 40px 32px !important;
  background: transparent !important;
  color: var(--mol-hp2-white) !important;
}

.mol-tss--homepage2 .mol-tss__body[hidden] {
  display: none !important;
}

/* Ewoud 2026-08-07: 'flip'-animatie bij het verspringen van content. De body
   toggelt van [hidden] (display:none) naar zichtbaar, dus deze entry-animatie
   draait bij elke wissel (autoplay en klik) en verzacht de harde sprong. */
@keyframes mol-tss-flip-in {
  from {
    opacity: 0;
    transform: perspective(900px) rotateX(-14deg) translateY(6px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateX(0) translateY(0);
  }
}

.mol-tss--homepage2 .mol-tss__body:not([hidden]) {
  transform-origin: top center !important;
  backface-visibility: hidden !important;
  animation: mol-tss-flip-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .mol-tss--homepage2 .mol-tss__body:not([hidden]) {
    animation: none !important;
  }
}

.mol-tss--homepage2 .mol-tss__intro {
  margin: 0 !important;
  max-width: 568px !important;
  font-family: var(--mol-hp2-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp2-white) !important;
}

.mol-tss--homepage2 .mol-tss__intro p {
  margin: 0 0 0.75em !important;
  color: var(--mol-hp2-white) !important;
}

.mol-tss--homepage2 .mol-tss__intro p:last-child {
  margin-bottom: 0 !important;
}

.mol-tss--homepage2 .mol-tss__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 24px 0 0 !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp2-btn-border) !important;
  border-radius: 999px !important;
  color: var(--mol-hp2-white) !important;
  font-family: var(--mol-hp2-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.mol-tss--homepage2 .mol-tss__cta:hover,
.mol-tss--homepage2 .mol-tss__cta:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
}

.mol-tss--homepage2 .mol-tss__cta-label {
  color: var(--mol-hp2-white) !important;
}

.mol-tss--homepage2 .mol-tss__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hp2-sunflower) !important;
  color: var(--mol-hp2-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-tss--homepage2 .mol-tss__cta-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.mol-tss--homepage2 .mol-tss__progress {
  /* Ewoud 2026-08-07: line-indicator weer aangezet. Toont de autoplay-
     voortgang (JS vult .mol-tss__progress-bar via scaleX) zodat zichtbaar is
     wanneer de module verspringt. (Was 2026-06-10 tijdelijk display:none.) */
  display: block !important;
  margin-top: 24px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  overflow: hidden !important;
}

.mol-tss--homepage2 .mol-tss__progress-bar {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  background: var(--mol-hp2-white) !important;
  border-radius: 0 !important;
  transform-origin: left center !important;
  will-change: transform !important;
}

@media (max-width: 899px) {
  .mol-tss--homepage2 .mol-tss__inner {
    gap: 24px !important;
    padding: 64px 24px 80px !important;
  }

  .mol-tss--homepage2 .mol-tss__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .mol-tss--homepage2 .mol-tss__title {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  .mol-tss--homepage2 .mol-tss__figure {
    padding-bottom: 32px !important;
  }

  .mol-tss--homepage2 .mol-tss__img {
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 0 40px 0 0 !important;
  }

  .mol-tss--homepage2 .mol-tss__stat {
    left: 20px !important;
    width: 160px !important;
    padding: 16px 20px !important;
  }

  .mol-tss--homepage2 .mol-tss__stat-num {
    font-size: 36px !important;
  }

  .mol-tss--homepage2 .mol-tss__trigger,
  .mol-tss--homepage2 .mol-tss__item.is-active .mol-tss__trigger {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mol-tss--homepage2 .mol-tss__body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mol-tss--homepage2 .mol-tss__item.is-active::before {
    width: 240px !important;
    height: 240px !important;
    right: -80px !important;
  }
}

/* ============================================================
   Homepage3 — Specialties & services (Swiper-based)
   Uses Swiper.js 11 for reliable horizontal swipe/drag.
   Classes: .mol-hp3, .mol-hp3__*
   ============================================================ */

/* Wrapper resets so gradient bg fills edge-to-edge */
.mol-logistics-stack > .mol-logistics__section--homepage3 {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.mol-logistics__section--homepage3 {
  background: transparent !important;
}

[class*="bde-column"]:has(.mol-hp3),
[class*="bde-div"]:has(.mol-hp3),
[class*="bde-row"]:has(.mol-hp3),
[class*="bde-columns"]:has(.mol-hp3) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.mol-logistics-stack:has(.mol-hp3) {
  background: transparent !important;
  box-shadow: none !important;
}

section.mol-hp3,
section.mol-hp3.breakdance,
.breakdance section.mol-hp3 {
  --mol-hp3-kobalt: #00235c;
  --mol-hp3-white: #ffffff;
  --mol-hp3-ice: #eef7ff;
  --mol-hp3-sunflower: #f9b638;
  --mol-hp3-btn-border: rgba(0, 35, 92, 0.2);
  --mol-hp3-chip-border: rgba(255, 255, 255, 0.25);
  --mol-hp3-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-hp3-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(72px, 9vw, 125px) 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  background-color: #105697 !important;
  background-image: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  color: var(--mol-hp3-white) !important;
  font-family: var(--mol-hp3-font-body) !important;
  overflow: hidden !important;
}

.mol-hp3 *,
.mol-hp3 *::before,
.mol-hp3 *::after {
  box-sizing: border-box !important;
}

/* Decorative ellipse — hidden per editor feedback. */
section.mol-hp3::before {
  content: none !important;
}

section.mol-hp3 > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Inner content wrapper with side padding (matches header navbar) */
.mol-hp3__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
}

/* Header (eyebrow + heading) */
.mol-hp3__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 872px !important;
  margin: 0 auto 32px !important;
  text-align: center !important;
}

.mol-hp3__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp3-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-hp3-white) !important;
}

.mol-hp3__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp3-font-display) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp3-white) !important;
}

/* Filter chips */
.mol-hp3__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
}

.mol-hp3__filter,
.breakdance .mol-hp3__filter,
button.mol-hp3__filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 8px 8px 8px 20px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp3-chip-border) !important;
  border-radius: 999px !important;
  color: var(--mol-hp3-white) !important;
  font-family: var(--mol-hp3-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-hp3__filter-text {
  display: inline-block !important;
  color: inherit !important;
}

.mol-hp3__filter-state {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp3-white) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-hp3__filter.is-active,
.breakdance .mol-hp3__filter.is-active {
  background: var(--mol-hp3-white) !important;
  border-color: var(--mol-hp3-chip-border) !important;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.08) !important;
  color: var(--mol-hp3-kobalt) !important;
}

.mol-hp3__filter.is-active .mol-hp3__filter-state {
  background: var(--mol-hp3-sunflower) !important;
  border-color: var(--mol-hp3-sunflower) !important;
}

.mol-hp3__filter.is-active .mol-hp3__filter-state::after {
  content: "" !important;
  display: block !important;
  width: 0.35rem !important;
  height: 0.6rem !important;
  margin-top: -1px !important;
  border: 0 !important;
  border-right: 2px solid var(--mol-hp3-kobalt) !important;
  border-bottom: 2px solid var(--mol-hp3-kobalt) !important;
  transform: rotate(45deg) !important;
}

/* Swiper wrapper — full-bleed within section, with left padding to align first slide */
.mol-hp3__swiper-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 clamp(24px, 6.35vw, 96px) !important;
}

.mol-hp3__swiper.swiper {
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mol-hp3__swiper .swiper-wrapper {
  align-items: stretch !important;
}

/* Card (Swiper slide) — width controlled by Swiper via slidesPerView */
.mol-hp3__swiper .mol-hp3__card.swiper-slide {
  height: auto !important;
  padding: 12px !important;
  background: var(--mol-hp3-kobalt) !important;
  border-radius: 12px !important;
  list-style: none !important;
}

.mol-hp3__card-inner {
  display: flex !important;
  align-items: stretch !important;
  height: 475px !important;
  max-height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.mol-hp3__card-media {
  flex: 0 0 45% !important;
  width: 45% !important;
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.mol-hp3__card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.mol-hp3__card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  /* flex-start in plaats van space-between: met space-between hing de
     ruimte tussen tag, titel en tekst af van de lengte van de tekst, dus
     kreeg elke kaart een andere marge. De CTA wordt onderaan gehouden met
     margin-top: auto, dus kaarten naast elkaar houden hun knop op één lijn.
     PageKings-feedback 2026-08-10. */
  justify-content: flex-start !important;
  gap: 16px !important;
  margin: 0 0 0 -5% !important;
  padding: 32px 40px !important;
  background: var(--mol-hp3-white) !important;
  color: var(--mol-hp3-kobalt) !important;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

.mol-hp3__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 7px 12px 8px !important;
  background: var(--mol-hp3-kobalt) !important;
  color: var(--mol-hp3-white) !important;
  border-radius: 4px !important;
  font-family: var(--mol-hp3-font-display) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

/* Geen eigen margin meer: de gap van .mol-hp3__card-body doet de ruimte.
   Samen telden ze op tot 40px onder de tag en 36px onder de titel. */
.mol-hp3__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp3-font-display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp3-kobalt) !important;
}

.mol-hp3__excerpt {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp3-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp3-kobalt) !important;
}

.mol-hp3__excerpt p {
  margin: 0 0 0.5em !important;
  color: inherit !important;
}

.mol-hp3__excerpt p:last-child {
  margin-bottom: 0 !important;
}

.mol-hp3__list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mol-hp3__list-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 24px !important;
  font-family: var(--mol-hp3-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp3-kobalt) !important;
}

.mol-hp3__list-item::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 7px !important;
  width: 12px !important;
  height: 7px !important;
  border: 0 !important;
  border-right: 2px solid var(--mol-hp3-kobalt) !important;
  border-bottom: 2px solid var(--mol-hp3-kobalt) !important;
  transform: rotate(45deg) !important;
}

/* Pill CTA */
.mol-hp3__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  align-self: flex-start !important;
  margin: auto 0 0 !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp3-btn-border) !important;
  border-radius: 999px !important;
  color: var(--mol-hp3-kobalt) !important;
  font-family: var(--mol-hp3-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-hp3__cta:hover,
.mol-hp3__cta:focus-visible {
  background: var(--mol-hp3-kobalt) !important;
  color: var(--mol-hp3-white) !important;
}

.mol-hp3__cta-label {
  color: inherit !important;
}

.mol-hp3__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hp3-sunflower) !important;
  color: var(--mol-hp3-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-hp3__cta:hover .mol-hp3__cta-icon,
.mol-hp3__cta:focus-visible .mol-hp3__cta-icon {
  background: var(--mol-hp3-sunflower) !important;
  color: var(--mol-hp3-kobalt) !important;
}

.mol-hp3__cta-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Footer (overview link) */
.mol-hp3__footer {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
}

.mol-hp3__overview {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--mol-hp3-white) !important;
  font-family: var(--mol-hp3-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.mol-hp3__overview:hover,
.mol-hp3__overview:focus-visible {
  opacity: 0.85 !important;
}

.mol-hp3__overview-label {
  color: inherit !important;
}

.mol-hp3__overview-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hp3-ice) !important;
  color: var(--mol-hp3-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-hp3__overview-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

@media (max-width: 899px) {
  /* Specificity bumped to match base rule (.breakdance section.mol-hp3
     0,1,2) so mobile padding wins over the desktop clamp(72px,9vw,…)
     base. Bottom 16px because the section bg (ice on TS pages, kobalt
     gradient on product-detail) is visually loud and a 40px strip read
     as "dikke rand" below the card. */
  section.mol-hp3,
  section.mol-hp3.breakdance,
  .breakdance section.mol-hp3 {
    padding: 56px 0 16px !important;
  }

  section.mol-hp3::before {
    width: 600px !important;
    height: 600px !important;
    left: -300px !important;
  }

  .mol-hp3__header {
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 0 24px !important;
  }

  .mol-hp3__heading {
    font-size: 32px !important;
  }

  .mol-hp3__filters {
    justify-content: flex-start !important;
    margin: 0 0 24px !important;
  }

  .mol-hp3__swiper-wrap {
    padding-left: 24px !important;
  }

  .mol-hp3__swiper .mol-hp3__card.swiper-slide {
    padding: 8px !important;
  }

  /* min-height 100% in plaats van alleen height auto: de swiper geeft elke
     slide de hoogte van de langste kaart, en met height auto bleef de witte
     binnenkaart korter. Daardoor stak de blauwe rand aan de onderkant 29px
     uit terwijl hij aan de zijkanten en bovenkant 8px is. Nu vult de
     binnenkaart de slide en is de rand overal 8px.
     PageKings-feedback 2026-08-10, must-have, mobiel. */
  .mol-hp3__card-inner {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    border-radius: 8px !important;
  }

  .mol-hp3__card-media {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 225px !important;
  }

  .mol-hp3__card-body {
    /* De negatieve marge laat de witte kaart op desktop over de afbeelding
       schuiven. Gestapeld op mobiel stak hij daardoor 8px links buiten de
       blauwe kaart, precies de rand die er hoort te zijn. */
    margin-left: 0 !important;
    padding: 24px !important;
    gap: 16px !important;
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.04) !important;
  }

  .mol-hp3__title {
    font-size: 24px !important;
  }

  .mol-hp3__cta {
    align-self: flex-start !important;
  }
}

/* ------------------------------------------------------------
   Transport-solution variant: ice background + kobalt text.
   Per Figma the specialties slider on transport-solution detail
   pages uses Primary/Ice (#EEF7FF) instead of the homepage gradient.
   ------------------------------------------------------------ */
body.single-transport-solution section.mol-hp3,
body.single-transport-solution section.mol-hp3.breakdance,
.breakdance body.single-transport-solution section.mol-hp3 {
  background: var(--mol-hp3-ice) !important;
  background-color: var(--mol-hp3-ice) !important;
  background-image: none !important;
  color: var(--mol-hp3-kobalt) !important;
}

body.single-transport-solution .mol-hp3__eyebrow,
body.single-transport-solution .mol-hp3__heading {
  color: var(--mol-hp3-kobalt) !important;
}

body.single-transport-solution .mol-hp3__filter,
body.single-transport-solution .breakdance .mol-hp3__filter,
body.single-transport-solution button.mol-hp3__filter {
  border-color: rgba(0, 35, 92, 0.25) !important;
  color: var(--mol-hp3-kobalt) !important;
}

body.single-transport-solution .mol-hp3__filter-state {
  border-color: var(--mol-hp3-kobalt) !important;
}

body.single-transport-solution .mol-hp3__filter.is-active,
body.single-transport-solution .breakdance .mol-hp3__filter.is-active {
  background: var(--mol-hp3-white) !important;
  border-color: rgba(0, 35, 92, 0.25) !important;
  color: var(--mol-hp3-kobalt) !important;
}

body.single-transport-solution .mol-hp3__overview {
  color: var(--mol-hp3-kobalt) !important;
}

body.single-transport-solution .mol-hp3__overview-icon {
  background: var(--mol-hp3-kobalt) !important;
  color: var(--mol-hp3-white) !important;
}

/* ============================================================
   Homepage4 — Industries tab grid (Figma)
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--homepage4 {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.mol-logistics__section--homepage4 {
  background: transparent !important;
}

[class*="bde-column"]:has(.mol-hp4),
[class*="bde-div"]:has(.mol-hp4),
[class*="bde-row"]:has(.mol-hp4),
[class*="bde-columns"]:has(.mol-hp4) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.mol-logistics-stack:has(.mol-hp4) {
  background: transparent !important;
  box-shadow: none !important;
}

section.mol-hp4,
section.mol-hp4.breakdance,
.breakdance section.mol-hp4 {
  --mol-hp4-kobalt: #00235c;
  --mol-hp4-white: #ffffff;
  --mol-hp4-sunflower: #f9b638;
  --mol-hp4-divider: rgba(0, 35, 92, 0.2);
  --mol-hp4-ring: rgba(0, 35, 92, 0.25);
  --mol-hp4-btn-border: rgba(255, 255, 255, 0.35);
  --mol-hp4-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-hp4-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(72px, 9vw, 145px) 0 !important;
  background: var(--mol-hp4-white) !important;
  color: var(--mol-hp4-kobalt) !important;
  font-family: var(--mol-hp4-font-body) !important;
}

.mol-hp4 *,
.mol-hp4 *::before,
.mol-hp4 *::after {
  box-sizing: border-box !important;
}

.mol-hp4__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 13.75vw, 208px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

/* Header */
.mol-hp4__header {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-hp4__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp4-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-hp4-kobalt) !important;
}

.mol-hp4__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp4-font-display) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp4-kobalt) !important;
}

/* Tile grid */
.mol-hp4__grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border-top: 1px solid var(--mol-hp4-divider) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-hp4__grid::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 77px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.mol-hp4__tile,
button.mol-hp4__tile,
.breakdance .mol-hp4__tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  min-height: 245px !important;
  margin: 0 !important;
  padding: 24px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--mol-hp4-divider) !important;
  border-bottom: 1px solid var(--mol-hp4-divider) !important;
  color: var(--mol-hp4-kobalt) !important;
  font: inherit !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.mol-hp4__tile:nth-child(4n) {
  border-right: 0 !important;
}

.mol-hp4__tile:hover:not(.is-active) {
  background: rgba(1, 53, 141, 0.03) !important;
}

.mol-hp4__tile.is-active,
.breakdance .mol-hp4__tile.is-active {
  /* Ewoud 2026-08-07: fade geflipt (tint bovenaan i.p.v. onderaan) om het
     design te matchen. */
  background: linear-gradient(0deg, rgba(1, 53, 141, 0) 0%, rgba(1, 53, 141, 0.05) 105.61%) !important;
}

.mol-hp4__tile.is-active::after {
  /* Ewoud 2026-08-07: actief-indicator onderaan i.p.v. bovenaan (mobiel stond
     al op bottom; desktop trok 'm nog naar boven). */
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -2px !important;
  height: 3px !important;
  background: var(--mol-hp4-kobalt) !important;
  z-index: 2 !important;
}

.mol-hp4__tile-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp4-ring) !important;
  border-radius: 999px !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.mol-hp4__tile.is-active .mol-hp4__tile-icon-wrap {
  background: var(--mol-hp4-sunflower) !important;
  border-color: var(--mol-hp4-sunflower) !important;
}

.mol-hp4__tile-icon {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(10%) sepia(40%) saturate(2500%) hue-rotate(200deg) !important;
}

.mol-hp4__tile-title {
  display: block !important;
  font-family: var(--mol-hp4-font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  color: var(--mol-hp4-kobalt) !important;
}

/* Info panel */
.mol-hp4__panels {
  margin: 0 !important;
  padding: 0 !important;
}

.mol-hp4__panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-hp4__panel[hidden] {
  display: none !important;
}

.mol-hp4__info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 48px !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 80px 0 0 !important;
  color: var(--mol-hp4-white) !important;
  min-height: 537px !important;
}

.mol-hp4__info-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-hp4__info-heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp4-font-display) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp4-white) !important;
}

.mol-hp4__info-text {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp4-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp4-white) !important;
}

.mol-hp4__info-text p {
  margin: 0 0 0.5em !important;
  color: inherit !important;
}

.mol-hp4__info-text p:last-child {
  margin-bottom: 0 !important;
}

.mol-hp4__info-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.mol-hp4__info-list-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 28px !important;
  font-family: var(--mol-hp4-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp4-white) !important;
}

.mol-hp4__info-list-item::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 8px !important;
  width: 14px !important;
  height: 8px !important;
  border: 0 !important;
  border-right: 2px solid var(--mol-hp4-white) !important;
  border-bottom: 2px solid var(--mol-hp4-white) !important;
  transform: rotate(45deg) !important;
}

.mol-hp4__info-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  /* W13: editor wants the "View industry" button left-aligned with the
     industry copy, not centred in the kobalt panel. */
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp4-btn-border) !important;
  border-radius: 999px !important;
  color: var(--mol-hp4-white) !important;
  font-family: var(--mol-hp4-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.mol-hp4__info-cta:hover,
.mol-hp4__info-cta:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
}

.mol-hp4__info-cta-label {
  color: inherit !important;
}

.mol-hp4__info-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hp4-sunflower) !important;
  color: var(--mol-hp4-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-hp4__info-cta-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Insight (right) */
.mol-hp4__insight {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 80px 0 0 !important;
  min-height: 537px !important;
  box-shadow: 4px 4px 50px rgba(1, 53, 141, 0.08) !important;
}

.mol-hp4__insight-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  display: block !important;
}

.mol-hp4__insight::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.mol-hp4__insight-content {
  position: absolute !important;
  left: 7.46% !important;
  right: 10.26% !important;
  bottom: 7.45% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  z-index: 2 !important;
}

.mol-hp4__insight-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 12px 8px !important;
  margin: 0 !important;
  background: var(--mol-hp4-kobalt) !important;
  color: var(--mol-hp4-white) !important;
  border-radius: 4px !important;
  font-family: var(--mol-hp4-font-display) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

.mol-hp4__insight-heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp4-font-display) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp4-white) !important;
}

/* Mobile */
@media (max-width: 899px) {
  section.mol-hp4 {
    padding: 80px 0 !important;
  }

  .mol-hp4__inner {
    gap: 40px !important;
    padding: 0 24px !important;
  }

  .mol-hp4__header {
    gap: 24px !important;
  }

  .mol-hp4__heading {
    font-size: 32px !important;
  }

  /* Tiles: horizontal scroll row on mobile.
     scroll-padding-left:24 makes scroll-snap align tiles 24px from the
     viewport edge instead of flush-left, so the first card has visual
     breathing room and doesn't read as cut off. (W12 fix.) */
  .mol-hp4__grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 24px !important;
    scrollbar-width: none !important;
    border-top: 0 !important;
    margin: 0 -24px !important;
    padding: 0 24px !important;
    /* F2: white fade on right edge so users see there's more to scroll */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%) !important;
            mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%) !important;
  }

  .mol-hp4__grid::-webkit-scrollbar {
    display: none !important;
  }

  .mol-hp4__grid::after {
    display: none !important;
  }

  .mol-hp4__tile,
  button.mol-hp4__tile {
    flex: 0 0 230px !important;
    width: 230px !important;
    min-height: 175px !important;
    padding: 24px 16px !important;
    border: 1px solid var(--mol-hp4-divider) !important;
    border-right: 1px solid var(--mol-hp4-divider) !important;
    scroll-snap-align: start !important;
  }

  .mol-hp4__tile.is-active::after {
    height: 2px !important;
    top: auto !important;
    bottom: -1px !important;
  }

  .mol-hp4__tile-icon-wrap {
    width: 48px !important;
    height: 48px !important;
  }

  .mol-hp4__tile-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .mol-hp4__tile-title {
    font-size: 22px !important;
  }

  /* Info panel: stacked. D3: give the kobalt info panel breathing room
     above the image insight card so they don't touch on mobile. */
  .mol-hp4__panel {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .mol-hp4__info {
    padding: 24px !important;
    gap: 24px !important;
    border-radius: 0 64px 0 0 !important;
    min-height: 0 !important;
  }

  .mol-hp4__info-heading {
    font-size: 28px !important;
  }

  .mol-hp4__insight {
    min-height: 400px !important;
    border-radius: 0 64px 0 0 !important;
  }

  .mol-hp4__insight-heading {
    font-size: 24px !important;
  }
}

/* ============================================================
   Who we are — corporate story (Figma)
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--who_we_are,
.mol-logistics-stack > .mol-logistics__section--homepage5 {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

[class*="bde-column"]:has(.mol-wwa),
[class*="bde-div"]:has(.mol-wwa),
[class*="bde-row"]:has(.mol-wwa),
[class*="bde-columns"]:has(.mol-wwa) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

section.mol-wwa,
section.mol-wwa.breakdance {
  --mol-wwa-kobalt: #00235c;
  --mol-wwa-sky: #01358d;
  --mol-wwa-ice: #eef7ff;
  --mol-wwa-white: #ffffff;
  --mol-wwa-sunflower: #f9b638;
  --mol-wwa-btn-border: rgba(0, 35, 92, 0.2);
  --mol-wwa-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-wwa-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(64px, 9vw, 160px) 0 clamp(48px, 6vw, 84px) !important;
  background: var(--mol-wwa-ice) !important;
  color: var(--mol-wwa-kobalt) !important;
  font-family: var(--mol-wwa-font-body) !important;
  overflow: hidden !important;
}

.mol-wwa *,
.mol-wwa *::before,
.mol-wwa *::after {
  box-sizing: border-box !important;
}

.mol-wwa__frame-wrap {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin-inline: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.mol-wwa__frame {
  position: absolute !important;
  top: calc(clamp(64px, 9vw, 160px) + 13px) !important;
  right: 6.42% !important;
  bottom: auto !important;
  left: calc(clamp(24px, 13.75vw, 208px) + 290px) !important;
  height: calc(100% - clamp(64px, 9vw, 160px) - 13px - clamp(48px, 6vw, 84px)) !important;
  border: 0 !important;
  border-top: 2px solid var(--mol-wwa-sky) !important;
  border-right: 2px solid var(--mol-wwa-sky) !important;
  border-radius: 0 80px 0 0 !important;
  pointer-events: none !important;
}

.mol-wwa__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 13.75vw, 208px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.mol-wwa__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-wwa-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-wwa-kobalt) !important;
}

.mol-wwa__eyebrow-text {
  display: inline-block !important;
  white-space: nowrap !important;
}

.mol-wwa__eyebrow-line {
  display: inline-block !important;
  flex: 1 1 auto !important;
  height: 2px !important;
  max-width: 280px !important;
  background: var(--mol-wwa-sky) !important;
}

.mol-wwa__intro,
.mol-wwa__intro p {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 984px !important;
  font-family: var(--mol-wwa-font-display) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mol-wwa-kobalt) !important;
}

.mol-wwa__intro p + p {
  margin-top: 0.6em !important;
}

.mol-wwa__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 536fr) minmax(0, 584fr) !important;
  align-items: flex-start !important;
  gap: clamp(32px, 5vw, 88px) !important;
}

.mol-wwa__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  min-width: 0 !important;
}

.mol-wwa__body,
.mol-wwa__body p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-wwa-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-wwa-kobalt) !important;
}

.mol-wwa__body p + p {
  margin-top: 0.6em !important;
}

.mol-wwa__links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-wwa__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-wwa-btn-border) !important;
  border-radius: 999px !important;
  color: var(--mol-wwa-kobalt) !important;
  font-family: var(--mol-wwa-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-wwa__link:hover,
.mol-wwa__link:focus-visible {
  background: var(--mol-wwa-kobalt) !important;
  color: var(--mol-wwa-white) !important;
}

.mol-wwa__link-label {
  display: inline-block !important;
  color: inherit !important;
}

.mol-wwa__link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-wwa-sunflower) !important;
  color: var(--mol-wwa-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-wwa__link:hover .mol-wwa__link-icon,
.mol-wwa__link:focus-visible .mol-wwa__link-icon {
  background: var(--mol-wwa-sunflower) !important;
  color: var(--mol-wwa-kobalt) !important;
}

.mol-wwa__link-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.mol-wwa__media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 535 / 488 !important;
  max-height: 488px !important;
}

.mol-wwa__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 80px 0 0 !important;
}

.mol-wwa__stat {
  position: absolute !important;
  left: -48px !important;
  bottom: -28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 179px !important;
  max-width: calc(100% - 40px) !important;
  padding: 20px 24px !important;
  background: var(--mol-wwa-white) !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.05) !important;
}

.mol-wwa__stat-num {
  position: relative !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding-right: 24px !important;
  font-family: var(--mol-wwa-font-display) !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-wwa-kobalt) !important;
}

.mol-wwa__stat-num::after {
  content: "+" !important;
  position: absolute !important;
  top: 2px !important;
  right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--mol-wwa-sunflower) !important;
  color: var(--mol-wwa-kobalt) !important;
  border-radius: 999px !important;
  font-family: var(--mol-wwa-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.mol-wwa__stat-label {
  display: block !important;
  margin: 0 !important;
  font-family: var(--mol-wwa-font-display) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--mol-wwa-kobalt) !important;
}

@media (max-width: 899px) {
  section.mol-wwa,
  section.mol-wwa.breakdance {
    padding: 80px 0 96px !important;
  }

  .mol-wwa__frame {
    display: none !important;
  }

  .mol-wwa__inner {
    padding: 0 24px !important;
    gap: 24px !important;
  }

  .mol-wwa__eyebrow-line {
    display: none !important;
  }

  .mol-wwa__intro,
  .mol-wwa__intro p {
    font-size: 24px !important;
  }

  .mol-wwa__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .mol-wwa__media {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
  }

  .mol-wwa__image {
    border-radius: 0 64px 0 0 !important;
  }

  .mol-wwa__stat {
    left: 24px !important;
    bottom: -40px !important;
    width: 175px !important;
    padding: 16px !important;
  }

  .mol-wwa__stat-num {
    font-size: 32px !important;
  }

  .mol-wwa__stat-num::after {
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
  }

  .mol-wwa__stat-label {
    font-size: 14px !important;
  }
}


/* ============================================================
   Homepage6 / Insights — blog swiper with kobalt gradient backdrop
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--homepage6,
.mol-logistics-stack > .mol-logistics__section--insights {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

[class*="bde-column"]:has(.mol-hp6),
[class*="bde-div"]:has(.mol-hp6),
[class*="bde-row"]:has(.mol-hp6),
[class*="bde-columns"]:has(.mol-hp6) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

section.mol-hp6,
section.mol-hp6.breakdance,
.breakdance section.mol-hp6 {
  --mol-hp6-kobalt: #00235c;
  --mol-hp6-white: #ffffff;
  --mol-hp6-sunflower: #f9b638;
  --mol-hp6-btn-border: rgba(255, 255, 255, 0.35);
  --mol-hp6-nav-border: rgba(0, 35, 92, 0.25);
  --mol-hp6-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-hp6-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(72px, 9vw, 145px) 0 0 !important;
  background: var(--mol-hp6-white) !important;
  color: var(--mol-hp6-white) !important;
  font-family: var(--mol-hp6-font-body) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.mol-hp6 *,
.mol-hp6 *::before,
.mol-hp6 *::after {
  box-sizing: border-box !important;
}

.mol-hp6__bg {
  position: absolute !important;
  top: clamp(72px, 9vw, 145px) !important;
  left: 0 !important;
  width: 71.42% !important;
  height: calc(100% - clamp(72px, 9vw, 145px)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.mol-hp6__bg-rect {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 80px 0 0 !important;
}

.mol-hp6__bg-ellipse {
  position: absolute !important;
  width: 1210px !important;
  height: 1210px !important;
  top: -160px !important;
  left: -555px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 999px !important;
  transform: rotate(-30deg) !important;
  opacity: 0.9 !important;
}

.mol-hp6__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(32px, 9vw, 145px) 0 0 clamp(24px, 6.78vw, 102.5px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.mol-hp6__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 32px !important;
  margin: 0 !important;
  padding-right: clamp(24px, 6.42vw, 97px) !important;
  max-width: 537px !important;
}

.mol-hp6__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp6-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-hp6-white) !important;
}

.mol-hp6__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp6-font-display) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp6-white) !important;
}

.mol-hp6__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 !important;
  padding-right: clamp(24px, 6.42vw, 97px) !important;
  flex-wrap: wrap !important;
}

.mol-hp6__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp6-btn-border) !important;
  border-radius: 999px !important;
  color: var(--mol-hp6-white) !important;
  font-family: var(--mol-hp6-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.mol-hp6__cta:hover,
.mol-hp6__cta:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
}

.mol-hp6__cta-label {
  color: inherit !important;
}

.mol-hp6__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-hp6-sunflower) !important;
  color: var(--mol-hp6-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-hp6__cta-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.mol-hp6__nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mol-hp6__nav-btn,
button.mol-hp6__nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--mol-hp6-nav-border) !important;
  border-radius: 999px !important;
  color: var(--mol-hp6-kobalt) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-hp6__nav-btn svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.mol-hp6__nav-btn--next {
  background: var(--mol-hp6-kobalt) !important;
  border-color: var(--mol-hp6-btn-border) !important;
  color: var(--mol-hp6-white) !important;
}

.mol-hp6__nav-btn:hover:not([disabled]) {
  opacity: 0.85 !important;
}

.mol-hp6__nav-btn[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

.mol-hp6__swiper {
  width: 100% !important;
  overflow: visible !important;
  margin: 0 !important;
  padding-bottom: 48px !important;
}

.mol-hp6__swiper .swiper-wrapper {
  align-items: stretch !important;
}

.mol-hp6__card.swiper-slide {
  height: auto !important;
  background: transparent !important;
  list-style: none !important;
}

.mol-hp6__card-link {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  color: var(--mol-hp6-kobalt) !important;
  filter: drop-shadow(4px 4px 50px rgba(1, 53, 141, 0.08)) !important;
  background: var(--mol-hp6-white) !important;
  transition: transform 0.2s ease !important;
}

.mol-hp6__card-link:hover {
  transform: translateY(-4px) !important;
}

.mol-hp6__card-media {
  position: relative !important;
  width: 100% !important;
  height: 275px !important;
  overflow: hidden !important;
  border-radius: 0 40px 0 0 !important;
}

.mol-hp6__card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
}

.mol-hp6__card-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  padding: 10px 16px 11px !important;
  background: var(--mol-hp6-kobalt) !important;
  color: var(--mol-hp6-white) !important;
  border-radius: 0 0 12px 0 !important;
  font-family: var(--mol-hp6-font-display) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

.mol-hp6__card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 28px !important;
  flex: 1 1 auto !important;
  padding: 24px !important;
  background: var(--mol-hp6-white) !important;
  color: var(--mol-hp6-kobalt) !important;
}

.mol-hp6__card-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-hp6__card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp6-font-display) !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--mol-hp6-kobalt) !important;
}

.mol-hp6__card-excerpt {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-hp6-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp6-kobalt) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.mol-hp6__card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-hp6__card-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mol-hp6-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hp6-kobalt) !important;
}

.mol-hp6__card-meta-item svg {
  flex: 0 0 auto !important;
  color: var(--mol-hp6-kobalt) !important;
}

@media (max-width: 899px) {
  section.mol-hp6 {
    padding-top: 80px !important;
  }

  .mol-hp6__bg {
    width: 75.62% !important;
  }

  .mol-hp6__bg-rect {
    border-radius: 0 64px 0 0 !important;
  }

  .mol-hp6__inner {
    padding: 80px 0 0 24px !important;
    gap: 32px !important;
  }

  .mol-hp6__header {
    padding-right: 24px !important;
    gap: 24px !important;
  }

  .mol-hp6__heading {
    font-size: 32px !important;
  }

  .mol-hp6__toolbar {
    padding-right: 24px !important;
  }

  .mol-hp6__nav {
    display: none !important;
  }

  .mol-hp6__card-media {
    height: 220px !important;
  }

  .mol-hp6__card-title {
    font-size: 22px !important;
  }
}


/* ============================================================
   CTA — mid-page two-column block (image + text/buttons)
   Figma: padding 145/96, image 648×503 rounded 0 80 0 0
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--cta {
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.mol-logistics__section--cta {
  background: transparent !important;
}

[class*="bde-column"]:has(.mol-cta),
[class*="bde-div"]:has(.mol-cta),
[class*="bde-row"]:has(.mol-cta),
[class*="bde-columns"]:has(.mol-cta) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.mol-cta--white,
.breakdance .mol-cta--white {
  --mol-cta-bg: #ffffff !important;
}

.mol-cta__title--small,
.mol-cta.breakdance h2.mol-cta__title--small {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.1 !important;
}

.mol-cta,
.breakdance .mol-cta {
  --mol-cta-kobalt: #00235c;
  --mol-cta-white: #ffffff;
  --mol-cta-ice: #eef7ff;
  --mol-cta-bg: var(--mol-cta-ice);
  --mol-cta-sunflower: #f9b638;
  --mol-cta-btn-border: rgba(0, 35, 92, 0.2);
  --mol-cta-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-cta-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(72px, 9vw, 145px) 0 !important;
  background: var(--mol-cta-bg) !important;
  color: var(--mol-cta-kobalt) !important;
  font-family: var(--mol-cta-font-body) !important;
}

/* Homepage: het CTA-blok "Volgende stappen" wit in plaats van ijsblauw. De
   sectie erboven (.mol-wwa, "Over MOL Logistics") en die eronder
   (.mol-footer-cta) staan allebei op #eef7ff, dus dit blok liep aan twee
   kanten naadloos door. Feedback PageKings 2026-08-06, must-have, desktop en
   mobiel. Gescoped op body.home omdat .mol-cta een generiek component is:
   op de acht paginas die ik nagelopen heb komt het verder niet voor, maar dat
   is geen garantie. Zie ook .mol-cta--white, de bestaande witte variant die
   render-offices.php gebruikt. */
body.home .mol-cta {
  --mol-cta-bg: var(--mol-cta-white);
}

.mol-cta *,
.mol-cta *::before,
.mol-cta *::after {
  box-sizing: border-box !important;
}

.mol-cta__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  /* align-items: start so the media stays its aspect-ratio height
     instead of stretching to body height. With stretch the browser
     used the stretched height to back-compute width via aspect-ratio
     and the image overflowed its grid cell on tablet widths. */
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
}

.mol-cta__media {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 80px 0 0 !important;
  aspect-ratio: 648 / 503 !important;
  background: transparent !important;
  width: 100% !important;
  min-width: 0 !important;
}

.mol-cta__img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.mol-cta__body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 32px !important;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 3vw, 48px) !important;
  margin: 0 !important;
}

.mol-cta__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-cta-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-cta-kobalt) !important;
}

.mol-cta__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-cta-font-display) !important;
  font-size: clamp(28px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-cta-kobalt) !important;
}

.mol-cta__text {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-cta-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-cta-kobalt) !important;
}

.mol-cta__buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-cta-btn-border) !important;
  border-radius: 999px !important;
  color: var(--mol-cta-kobalt) !important;
  font-family: var(--mol-cta-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-cta__btn:hover,
.mol-cta__btn:focus-visible {
  background: var(--mol-cta-kobalt) !important;
  color: var(--mol-cta-white) !important;
}

.mol-cta__btn-label {
  color: inherit !important;
}

.mol-cta__btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-cta-sunflower) !important;
  color: var(--mol-cta-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-cta__btn:hover .mol-cta__btn-icon,
.mol-cta__btn:focus-visible .mol-cta__btn-icon {
  background: var(--mol-cta-sunflower) !important;
  color: var(--mol-cta-kobalt) !important;
}

.mol-cta__btn-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

@media (max-width: 1023px) {
  .mol-cta {
    padding: 80px 24px !important;
  }

  .mol-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .mol-cta__media {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 64px 0 0 !important;
  }

  .mol-cta__body {
    padding: 0 !important;
    gap: 24px !important;
  }

  .mol-cta__title {
    font-size: clamp(28px, 4.5vw, 40px) !important;
  }
}

@media (max-width: 480px) {
  .mol-cta {
    padding: 56px 16px !important;
  }
  .mol-cta__body {
    gap: 16px !important;
  }
  .mol-cta__title {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .mol-cta__buttons {
    gap: 8px !important;
  }
}


/* ============================================================
   Footer-CTA — kobalt gradient card (above footer)
   Figma: rounded 0 80 0 0, decorative ellipses, title + expert + address
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--footer_cta {
  background: transparent !important;
  /* The strip above the gradient card must take the colour of the preceding
     section (Amarildo). We do NOT lift the card with a negative margin (that
     exposed the white page background in the gap). Instead the card sits flush
     and the preceding section's inner block keeps a coloured bottom padding
     (rule below) that fills the gap — so it is grey/ice/whatever automatically. */
  padding: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  z-index: 4 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The transparent section wrapper itself carries no colour, so zeroing it is
   fine — the coloured gap is owned by the inner block below. */
.mol-logistics-stack > .mol-logistics__section:has(+ .mol-logistics__section--footer_cta) {
  padding-bottom: 0 !important;
}

/* Give the preceding section's inner (coloured) block a fixed bottom padding.
   Strip boven de card inherit het background van dat block, dus matched
   automatisch met de section erboven. Pakt zowel <section> als <div>
   direct-child wrappers (Amarildo 2026-06-12). */
.mol-logistics-stack > .mol-logistics__section:has(+ .mol-logistics__section--footer_cta) > section,
.mol-logistics-stack > .mol-logistics__section:has(+ .mol-logistics__section--footer_cta) > div {
  padding-bottom: clamp(48px, 6vw, 96px) !important;
}

section.mol-logistics__section--footer_cta {
  background: transparent !important;
}

.mol-ftrcta {
  --mol-ftrcta-kobalt: #00235c;
  --mol-ftrcta-white: #ffffff;
  --mol-ftrcta-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-ftrcta-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  padding: 0 clamp(24px, 6.35vw, 96px) !important;
  background: transparent !important;
  margin: 0 auto !important;
  max-width: 1512px !important;
}

.mol-ftrcta *,
.mol-ftrcta *::before,
.mol-ftrcta *::after {
  box-sizing: border-box !important;
}

.mol-ftrcta__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 40px !important;
  padding: clamp(32px, 4vw, 56px) !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 80px 0 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: var(--mol-ftrcta-white) !important;
}

.mol-ftrcta__bg {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.mol-ftrcta__ellipse {
  position: absolute !important;
  width: 440px !important;
  height: 440px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 999px !important;
  opacity: 0.7 !important;
}

.mol-ftrcta__ellipse--1 {
  left: -200px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-60deg) !important;
}

.mol-ftrcta__ellipse--2 {
  right: 80px !important;
  top: -220px !important;
  transform: rotate(75deg) !important;
}

.mol-ftrcta__card > *:not(.mol-ftrcta__bg) {
  position: relative !important;
  z-index: 1 !important;
}

.mol-ftrcta__title {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 720px !important;
  font-family: var(--mol-ftrcta-font-display) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--mol-ftrcta-white) !important;
}

.mol-ftrcta__row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 32px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-ftrcta__expert {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.mol-ftrcta__avatars {
  display: inline-flex !important;
  padding: 4px !important;
  background: var(--mol-ftrcta-white) !important;
  border-radius: 999px !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
}

.mol-ftrcta__avatar {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  margin-left: -16px !important;
  border: 2px solid var(--mol-ftrcta-white) !important;
}

.mol-ftrcta__avatar:first-child {
  margin-left: 0 !important;
}

.mol-ftrcta__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  display: block !important;
}

.mol-ftrcta__contact {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mol-ftrcta__kicker {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ftrcta-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ftrcta-white) !important;
}

.mol-ftrcta__lines {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
}

.mol-ftrcta__line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mol-ftrcta-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ftrcta-white) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.mol-ftrcta__line:hover {
  opacity: 0.85 !important;
}

.mol-ftrcta__line svg {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}

.mol-ftrcta__address {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: right !important;
}

.mol-ftrcta__address-company {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ftrcta-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ftrcta-white) !important;
}

.mol-ftrcta__address-line {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ftrcta-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ftrcta-white) !important;
}

@media (max-width: 899px) {
  .mol-ftrcta {
    padding: 0 24px !important;
  }

  .mol-ftrcta__card {
    border-radius: 0 64px 0 0 !important;
    padding: 32px !important;
    gap: 24px !important;
  }

  .mol-ftrcta__title {
    font-size: 32px !important;
  }

  .mol-ftrcta__row {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mol-ftrcta__address {
    text-align: left !important;
  }
}

/* ============================================================
   Footer — kobalt section with 4 cols + brand + bottom bar
   Figma: padding 200px 96px 24px, typography 18/14 Montserrat
   ============================================================ */

.mol-logistics-stack > .mol-logistics__section--footer {
  background: #00235c !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.mol-logistics__section--footer {
  background: #00235c !important;
}

footer.mol-footer,
.mol-footer,
.breakdance footer.mol-footer {
  --mol-footer-kobalt: #00235c;
  --mol-footer-white: #ffffff;
  --mol-footer-muted: rgba(255, 255, 255, 0.75);
  --mol-footer-divider: rgba(255, 255, 255, 0.35);
  --mol-footer-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  /* Default smaller top padding when no footer-CTA card overhangs into
     the footer. Pages WITH a mol-ftrcta get the big padding via the
     body:has() override below. */
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6.35vw, 96px) 24px !important;
  background: var(--mol-footer-kobalt) !important;
  color: var(--mol-footer-white) !important;
  font-family: var(--mol-footer-font-body) !important;
  font-size: 14px !important;
}

/* Pages with an overhanging footer-CTA card need the big top padding
   so the card can overlap into the footer. */
body:has(.mol-ftrcta) .breakdance footer.mol-footer,
body:has(.mol-ftrcta) footer.mol-footer {
  padding-top: clamp(120px, 15vw, 200px) !important;
}

/* PageKings-feedback 2026-08-06 (mobiel, nice-to-have): onnodig groot gat
   tussen de CTA-kaart en de eerste footerkolom. De grote padding hierboven
   gaat ervan uit dat de kaart de footer in hangt, en op desktop klopt dat:
   de kaart steekt 230px onder z'n sectie uit, er zit 150px Breakdance-ruimte
   tussen die sectie en de footer, dus de kaart valt 80px over de footer heen
   en 200px padding laat er 120px zichtbaar van over. Op mobiel is de overhang
   maar clamp(80px, 18vw, 160px), dus de kaart haalt de footer niet eens en
   kwam er 70px kale ruimte bovenop de 120px padding: 190px leeg. Deze padding
   trekt dat terug naar ongeveer 100px, in lijn met desktop. */
@media (max-width: 768px) {
  body:has(.mol-ftrcta) .breakdance footer.mol-footer,
  body:has(.mol-ftrcta) footer.mol-footer {
    padding-top: clamp(28px, 10vw, 80px) !important;
  }
}

.mol-footer *,
.mol-footer *::before,
.mol-footer *::after {
  box-sizing: border-box !important;
}

.mol-footer__main {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: clamp(32px, 6vw, 87px) !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 0 64px !important;
  border-bottom: 0 !important;
}

.mol-footer__cols {
  display: grid !important;
  /* S4: accommodate optional offices column without forcing exactly 4 cells.
     auto-fit with 160px min keeps 4 cols on most desktops and steps up to 5
     when the offices column is enabled. The 1023px media query below still
     collapses to 2 on tablet/mobile. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 24px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mol-footer__col {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.mol-footer__col-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-footer-font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-footer-white) !important;
  text-transform: none !important;
}

.mol-footer__col-title--sub {
  margin-top: 16px !important;
}

.mol-footer__col-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-footer__col-link {
  font-family: var(--mol-footer-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-footer-white) !important;
  opacity: 0.75 !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease !important;
}

.mol-footer__col-link:hover,
.mol-footer__col-link:focus-visible {
  opacity: 1 !important;
  color: var(--mol-footer-white) !important;
}

.mol-footer__col-text {
  font-family: var(--mol-footer-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-footer-white) !important;
  opacity: 0.75 !important;
}

.mol-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: clamp(20px, 3vw, 32px) !important;
  width: 361px !important;
  max-width: 361px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* S2: socials below the MOL logo (was previously down in the bottom bar). */
.mol-footer__socials--brand {
  align-self: flex-end !important;
  margin: 0 !important;
}

.mol-footer__logo-wrap {
  display: block !important;
  text-decoration: none !important;
  width: 100% !important;
  max-width: 361px !important;
}

.mol-footer__logo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 361px !important;
  margin: 0 !important;
}

.mol-footer__iso-wrap {
  display: block !important;
  margin: 0 !important;
  align-self: flex-end !important;
}

.mol-footer__iso {
  display: block !important;
  width: 74px !important;
  height: auto !important;
  margin: 0 !important;
}

.mol-footer__socials {
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mol-footer-divider) !important;
  color: var(--mol-footer-white) !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease !important;
}

.mol-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Bottom bar with divider line above */
.mol-footer__bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--mol-footer-divider) !important;
  background: transparent !important;
}

.mol-footer__copyright {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-footer-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-footer-white) !important;
  opacity: 0.75 !important;
}

.mol-footer__bottom-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-footer__bottom-link {
  font-family: var(--mol-footer-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-footer-white) !important;
  opacity: 0.75 !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease !important;
}

.mol-footer__bottom-link:hover,
.mol-footer__bottom-link:focus-visible {
  opacity: 1 !important;
}

@media (max-width: 1023px) {
  .mol-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .mol-footer__main {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mol-footer__brand {
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  /* Inner padding-top stays minimal — the section above already reserves
     space (via .footer_cta + .footer rule) for the protruding ftrcta
     card, so we don't need more padding here. Bottom kept tight so the
     dark area below the copyright line doesn't grow. */
  footer.mol-footer,
  .mol-footer,
  .breakdance footer.mol-footer {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }

  .mol-footer__cols {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .mol-footer__main {
    padding: 0 0 8px !important;
  }

  .mol-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 0 0 !important;
  }
}


/* ============================================================
   Header Navbar + Drawer — light (Figma) overrides
   Navbar: white bg + kobalt text, logo in original blue/white.
   Drawer: white panel with Hoofdmenu + pill items + sunflower icons.
   ============================================================ */

/* Navbar wrapper — white bg */
.mol-header__navbar {
  background: #ffffff !important;
}

.mol-header__navbar-inner {
  max-width: 1512px !important;
  gap: 62px !important;
  padding: 24px clamp(24px, 6vw, 96px) !important;
  min-height: 96px !important;
}

/* Logo — show original blue/white, no filter */
.mol-header__logo img {
  max-height: 26px !important;
  filter: none !important;
}

/* Nav links — kobalt text */
.mol-header__nav-link,
.breakdance .mol-header__nav-link {
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  gap: 0 !important;
}

.mol-header__nav-link:hover,
.mol-header__nav-link:focus-visible {
  opacity: 0.7 !important;
  color: #00235c !important;
}

.mol-header__nav-caret {
  width: 24px !important;
  height: 24px !important;
  color: #00235c !important;
}

.mol-header__nav-caret svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* CTA button — transparent outline + kobalt text + sunflower icon */
.mol-header__cta,
.breakdance .mol-header__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  background: transparent !important;
  color: #00235c !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.mol-header__cta:hover,
.mol-header__cta:focus-visible {
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-header__cta-icon {
  width: 32px !important;
  height: 32px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  flex: 0 0 auto !important;
}

.mol-header__cta:hover .mol-header__cta-icon,
.mol-header__cta:focus-visible .mol-header__cta-icon {
  background: #f9b638 !important;
  color: #00235c !important;
}

/* Hamburger — kobalt icon on white */
.mol-header__hamburger {
  color: #00235c !important;
}

/* D2: re-hide CTA on mobile. The earlier @media block at L5184 already
   hides it, but the later inline-flex rule above (L8302) wins on
   specificity and pushed the CTA back into the navbar — squeezing the
   hamburger off-screen on narrow viewports. Reapply the hide here so
   only logo + hamburger remain on <=1023px. */
@media (max-width: 1023px) {
  .mol-header__cta,
  .breakdance .mol-header__cta {
    display: none !important;
  }
}

/* ---- Mobile drawer (Hoofdmenu) ---- */

.mol-header__mobile {
  background: #eef7ff !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-header__mobile-top {
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
}

.mol-header__mobile-logo img {
  max-height: 20px !important;
  width: auto !important;
  filter: none !important;
  display: block !important;
}

.mol-header__mobile-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
}

.mol-header__mobile-close-label {
  color: #00235c !important;
}

.mol-header__mobile-close-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #00235c !important;
}

.mol-header__mobile-close-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.mol-header__mobile-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-header__mobile-heading,
.mol-header__mobile-section .mol-header__mobile-heading {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

.mol-header__mobile-section {
  padding: 16px !important;
  background: #ffffff !important;
  border-radius: 0 40px 0 0 !important;
}

.mol-header__mobile-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-header__mobile-item,
.mol-header__mobile-item--solo {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  min-height: 48px !important;
  transition: background-color 0.18s ease !important;
}

.mol-header__mobile-item:hover,
.mol-header__mobile-item:focus-visible {
  background: #f7fbff !important;
}

.mol-header__mobile-item-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-header__mobile-item-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Utility row (Careers / Search / Language) — bottom of drawer */
.mol-header__mobile-utility {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.mol-header__mobile-utility-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  background: rgba(0, 35, 92, 0.04) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  min-height: 56px !important;
}

.mol-header__mobile-utility-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #00235c !important;
}

.mol-header__mobile-utility-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Mobile CTA (Aan de slag) — sunflower fill */
.mol-header__mobile-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: #f9b638 !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  min-height: 48px !important;
}

.mol-header__mobile-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #ffffff !important;
  color: #00235c !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-header__mobile-cta-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}


/* ============================================================
   Desktop dropdown — full-width ice panel with white cards per column
   Figma: padding 64 96, 3+1 column grid, columns are white cards
   rounded 0 40 0 0 with H5 title + divider + pill items.
   ============================================================ */

.mol-header__nav-item[data-mol-dropdown] {
  position: static !important;
}

.mol-header__dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(32px, 4vw, 64px) clamp(24px, 6vw, 96px) !important;
  background: #eef7ff !important;
  color: #00235c !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 40px rgba(0, 35, 92, 0.08) !important;
  z-index: 10 !important;
}

.mol-header__dropdown-inner,
.mol-header__nav-item[data-mol-dropdown] .mol-header__dropdown .mol-header__dropdown-inner,
.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown .mol-header__dropdown-inner,
.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown .mol-header__dropdown-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1320px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.mol-header__dropdown-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  padding: 32px !important;
  background: #ffffff !important;
  border-radius: 0 40px 0 0 !important;
}

.mol-header__dropdown-heading {
  margin: 0 !important;
  padding: 0 0 16px !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #00235c !important;
  border-bottom: 1px solid rgba(0, 35, 92, 0.1) !important;
  opacity: 1 !important;
}

.mol-header__dropdown-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mol-header__dropdown-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mol-header__dropdown-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  min-height: 48px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.mol-header__dropdown-link:hover,
.mol-header__dropdown-link:focus-visible {
  background: #f7fbff !important;
  color: #00235c !important;
}

.mol-header__dropdown-link > span:first-child {
  color: inherit !important;
}

.mol-header__dropdown-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
}

.mol-header__dropdown-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* If there are 2+ columns, make each column narrower so they fit side by side */
.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Make first column (often the transport solutions with pill items) wider on wide screens */
@media (min-width: 1200px) {
  .mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown-inner {
    grid-template-columns: 424fr 424fr 424fr !important;
  }
}

@media (max-width: 899px) {
  .mol-header__dropdown-inner {
    grid-template-columns: 1fr !important;
  }

  .mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown-inner,
  .mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown-inner {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   Dropdown variants — pills vs flat + FAQ card
   ============================================================ */

/* FLAT column: smaller links with tiny arrow-right (Specialties / Services) */
.mol-header__dropdown-col--flat .mol-header__dropdown-list {
  gap: 12px !important;
}

.mol-header__dropdown-col--flat .mol-header__dropdown-link {
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  color: #00235c !important;
}

.mol-header__dropdown-col--flat .mol-header__dropdown-link:hover,
.mol-header__dropdown-col--flat .mol-header__dropdown-link:focus-visible {
  background: transparent !important;
  color: #00235c !important;
  opacity: 0.7 !important;
}

.mol-header__dropdown-col--flat .mol-header__dropdown-icon {
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
  color: #00235c !important;
  border-radius: 0 !important;
}

.mol-header__dropdown-col--flat .mol-header__dropdown-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* PILLS column retains default pill styling (already set on base) */
.mol-header__dropdown-col--pills .mol-header__dropdown-list {
  gap: 10px !important;
}

/* FAQ card at bottom of dropdown */
.mol-header__dropdown-faq {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(20px, 3vw, 32px) !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 40px 0 0 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: opacity 0.2s ease !important;
}

/* 3-col dropdown MET FAQ: pills col spans both rows, FAQ spans cols 2-3 row 2.
   Zonder FAQ (current "What we do" setup) gewone 3-col side-by-side via A2b. */
.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col):has(.mol-header__dropdown-faq) .mol-header__dropdown-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
}

/* FAQ-card visueel verbergen — markup blijft staan voor de CSS-scoping
   (:has(.faq) → row-spanning regel blijft actief zodat Transport solutions
   col 1 over 2 rijen spant en Products/Services row 1 cols 2+3 vullen). */
.mol-header__dropdown-faq {
  display: none !important;
}

/* OLD: 3-col + FAQ design — pills col 1 + row-span 2. Inactief sinds
   Amarildo 2026-06-04 (3 pills-cols, geen FAQ). Selector blijft staan
   maar enkel actief WANNEER de dropdown een .faq-card heeft. */
.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col):has(.mol-header__dropdown-faq) .mol-header__dropdown-inner .mol-header__dropdown-col--pills {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.mol-header__nav-item[data-mol-dropdown]:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) .mol-header__dropdown-inner > .mol-header__dropdown-faq {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
}

/* Fewer-than-3 cols: FAQ spans full width below */
.mol-header__nav-item[data-mol-dropdown]:not(:has(> .mol-header__dropdown .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col)) .mol-header__dropdown-inner > .mol-header__dropdown-faq {
  grid-column: 1 / -1 !important;
}

.mol-header__dropdown-faq:hover,
.mol-header__dropdown-faq:focus-visible {
  opacity: 0.95 !important;
  color: #ffffff !important;
}

.mol-header__dropdown-faq-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background: #ffffff !important;
  color: #00235c !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-header__dropdown-faq-badge svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

.mol-header__dropdown-faq-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mol-header__dropdown-faq-title {
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
}

.mol-header__dropdown-faq-text {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  opacity: 0.85 !important;
}

.mol-header__dropdown-faq-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-header__dropdown-faq-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

@media (max-width: 899px) {
  .mol-header__dropdown-faq {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .mol-header__dropdown-faq-body {
    flex: 1 1 100% !important;
  }

  .mol-header__dropdown-faq-title {
    font-size: 20px !important;
  }
}

/* ============================================================
   Who we are — desktop megamenu
   Figma: ice section, 1320px content, left intro col + 848px white card,
   white card holds a 2-column pill grid (3 + 2 items).
   ============================================================ */

.mol-header__dropdown--mega {
  padding: 64px clamp(24px, 6vw, 96px) !important;
}

.mol-header__dropdown--mega .mol-header__dropdown-inner {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  max-width: 1320px !important;
}

.mol-header__mega {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}

.mol-header__mega-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 24px 0 !important;
  flex: 0 0 448px !important;
  min-width: 0 !important;
}

.mol-header__mega-intro {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mol-header__mega-title {
  margin: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #00235c !important;
}

.mol-header__mega-body {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-header__mega-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 32px !important;
  padding: 32px !important;
  background: #ffffff !important;
  border-radius: 0 40px 0 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mol-header__mega-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}

.mol-header__mega-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Pill button (used in megamenu desktop + mobile) */
.mol-header__pill {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  width: 100% !important;
  min-height: 48px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

.mol-header__pill:hover,
.mol-header__pill:focus-visible {
  background: #f7fbff !important;
  border-color: rgba(0, 35, 92, 0.35) !important;
}

.mol-header__pill--primary {
  background: transparent !important;
}

.mol-header__pill-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #00235c !important;
}

.mol-header__pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-header__pill-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Tablet: stack left intro above card. */
@media (max-width: 1199px) {
  .mol-header__mega {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mol-header__mega-left {
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
}

@media (max-width: 899px) {
  .mol-header__mega-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   Mobile drawer — nested panels (root + sub-panels with back link)
   ============================================================ */

.mol-header__mobile-body {
  position: relative !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: block !important;
}

.mol-header__mobile-panel {
  position: absolute !important;
  inset: 0 !important;
  padding: 24px !important;
  background: #eef7ff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  overflow-y: auto !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s ease !important;
  visibility: hidden !important;
}

.mol-header__mobile-panel--root {
  transform: translateX(0) !important;
  visibility: visible !important;
}

.mol-header__mobile-panel--root.is-hidden {
  transform: translateX(-100%) !important;
  visibility: hidden !important;
}

.mol-header__mobile-panel--sub.is-active {
  transform: translateX(0) !important;
  visibility: visible !important;
}

.mol-header__mobile-root-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-header__mobile-item--expand {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  text-align: left !important;
}

.mol-header__mobile-sub-title {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-header__mobile-mega {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-header__mobile-mega-intro {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-header__mobile-mega-title {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-header__mobile-mega-body {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-header__mobile-mega-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
  background: #ffffff !important;
  border-radius: 0 40px 0 0 !important;
}

.mol-header__mobile-mega-card .mol-header__pill {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* D1: equal-height pills under "What we do" (and other panels-variant
   megamenus) on mobile. Switching the card to a grid with
   grid-auto-rows: 1fr lets all pills stretch to the tallest one, so
   labels that wrap to two lines no longer create staggered heights
   versus single-line siblings. */
@media (max-width: 1023px) {
  .mol-header__mobile-mega-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
  }

  .mol-header__mobile-mega-card .mol-header__pill {
    height: 100% !important;
  }
}

.mol-header__mobile-back {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
  align-self: flex-start !important;
}

.mol-header__mobile-back-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
}

/* ---------------------------------------------------------------------------
 * Solution hero — transport-solution single secondary hero (Figma).
 * Full-bleed image w/ dark blue gradient, inset 1px frame, breadcrumb,
 * H1 + intro + pill CTA. Bottom-left rounded corner.
 * ------------------------------------------------------------------------- */

.mol-solution-hero {
  --mol-shero-kobalt: #00235c;
  --mol-shero-white: #ffffff;
  --mol-shero-sunflower: #f9b638;
  --mol-shero-border: rgba(255, 255, 255, 0.35);
  --mol-shero-border-hover: rgba(255, 255, 255, 0.55);
  --mol-shero-inset: rgba(255, 255, 255, 0.45);
  --mol-shero-radius-bl: 80px;
  --mol-shero-pad-x: clamp(24px, 6vw, 96px);
  --mol-shero-content-max: 1512px;
  --mol-shero-min-h: clamp(560px, 60vw, 775px);
  --mol-shero-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-shero-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  min-height: var(--mol-shero-min-h) !important;
  border-radius: 0 0 0 var(--mol-shero-radius-bl) !important;
  overflow: hidden !important;
  background: var(--mol-shero-kobalt) !important;
  color: var(--mol-shero-white) !important;
  font-family: var(--mol-shero-font-body) !important;
}

.mol-solution-hero *,
.mol-solution-hero *::before,
.mol-solution-hero *::after {
  box-sizing: border-box !important;
}

.mol-solution-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.mol-solution-hero__bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
}

.mol-solution-hero__bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    256.1deg,
    rgba(0, 35, 92, 0.35) -49.68%,
    #00235c 102.32%
  ) !important;
}

.mol-solution-hero__inset {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  left: var(--mol-shero-pad-x) !important;
  right: var(--mol-shero-pad-x) !important;
  top: clamp(72px, 9vw, 96px) !important;
  bottom: clamp(72px, 9vw, 96px) !important;
  border: none !important;
  border-top: 1px solid var(--mol-shero-inset) !important;
  border-right: 1px solid var(--mol-shero-inset) !important;
  border-top-right-radius: 80px !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: transparent !important;
}

.mol-solution-hero__inner {
  position: relative !important;
  z-index: 2 !important;
  min-height: var(--mol-shero-min-h) !important;
  padding: clamp(120px, 14vw, 200px) var(--mol-shero-pad-x) clamp(60px, 8vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: var(--mol-shero-content-max) !important;
  margin: 0 auto !important;
}

/* Breadcrumb */
.mol-solution-hero__breadcrumb {
  position: absolute !important;
  top: clamp(80px, 12vh, 112px) !important;
  left: var(--mol-shero-pad-x) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--mol-shero-font-body) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--mol-shero-white) !important;
  margin: 0 !important;
}

.mol-solution-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--mol-shero-white) !important;
  text-decoration: none !important;
  flex: none !important;
}

.mol-solution-hero__crumb-home-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mol-solution-hero__crumb-home-mark svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

.mol-solution-hero__crumb-sep {
  opacity: 0.75 !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-shero-white) !important;
}

.mol-solution-hero__crumb-link,
.mol-solution-hero__crumb-current {
  color: var(--mol-shero-white) !important;
  opacity: 0.75 !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-family: var(--mol-shero-font-body) !important;
}

a.mol-solution-hero__crumb-link:hover,
a.mol-solution-hero__crumb-link:focus-visible {
  opacity: 1 !important;
  text-decoration: underline !important;
  color: var(--mol-shero-white) !important;
}

/* Content stack */
.mol-solution-hero__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(20px, 2.6vw, 32px) !important;
  max-width: min(735px, 55%) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-solution-hero__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-shero-font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 5.4vw, 72px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--mol-shero-white) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.mol-solution-hero__intro {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-shero-font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-shero-white) !important;
  max-width: 100% !important;
}

.mol-solution-hero__intro p {
  margin: 0 !important;
  color: var(--mol-shero-white) !important;
}

.mol-solution-hero__intro p + p {
  margin-top: 0.6em !important;
}

.mol-solution-hero__intro a {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* CTA pill button */
.mol-solution-hero__cta,
a.mol-solution-hero__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  width: auto !important;
  max-width: max-content !important;
  border: 1px solid var(--mol-shero-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mol-shero-white) !important;
  font-family: var(--mol-shero-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important;
  margin: 0 !important;
}

.mol-solution-hero__cta:hover,
.mol-solution-hero__cta:focus-visible,
a.mol-solution-hero__cta:hover,
a.mol-solution-hero__cta:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--mol-shero-border-hover) !important;
  color: var(--mol-shero-white) !important;
  outline: none !important;
}

.mol-solution-hero__cta:focus-visible {
  outline: 2px solid var(--mol-shero-white) !important;
  outline-offset: 3px !important;
}

.mol-solution-hero__cta-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--mol-shero-white) !important;
  font-family: var(--mol-shero-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-solution-hero__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-shero-sunflower) !important;
  color: var(--mol-shero-kobalt) !important;
  flex: none !important;
  transition: transform 160ms ease !important;
}

.mol-solution-hero__cta:hover .mol-solution-hero__cta-icon,
.mol-solution-hero__cta:focus-visible .mol-solution-hero__cta-icon {
  transform: translateX(2px) !important;
}

.mol-solution-hero__cta-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Tablet — !important required because the desktop rule sets
   max-width: min(735px, 55%) !important. */
@media (max-width: 1023px) {
  .mol-solution-hero__content {
    max-width: 70% !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .mol-solution-hero {
    --mol-shero-radius-bl: 48px;
    --mol-shero-min-h: 560px;
    --mol-shero-pad-x: 24px;
  }
  .mol-solution-hero__inset {
    display: none !important;
  }
  .mol-solution-hero__inner {
    padding: clamp(120px, 30vw, 160px) var(--mol-shero-pad-x) 56px !important;
    justify-content: flex-end !important;
  }
  .mol-solution-hero__breadcrumb {
    top: clamp(96px, 14vh, 128px) !important;
  }
  .mol-solution-hero__content {
    max-width: 100% !important;
    gap: 20px !important;
  }
  .mol-solution-hero__cta {
    height: 44px !important;
  }
}

@media (max-width: 480px) {
  .mol-solution-hero {
    --mol-shero-radius-bl: 32px;
  }
}

/* ---------------------------------------------------------------------------
 * Highlights / USP strip — white bar with 3-4 icon + label items (Figma).
 * Used on homepage + transport-solution under the hero.
 * Renderer: render-highlights.php  |  ACF: highlights_items (icon, label)
 * ------------------------------------------------------------------------- */

.mol-highlights {
  --mol-hl-kobalt: #00235c;
  --mol-hl-bg: #ffffff;
  --mol-hl-ring: rgba(0, 35, 92, 0.25);
  --mol-hl-pad-x: clamp(24px, 6vw, 96px);
  --mol-hl-pad-y: 32px;
  --mol-hl-content-max: 1512px;
  --mol-hl-gap: clamp(24px, 4vw, 77px);
  --mol-hl-font: "Montserrat", system-ui, sans-serif;

  background: var(--mol-hl-bg) !important;
  padding: var(--mol-hl-pad-y) 0 !important;
  width: 100% !important;
  display: block !important;
  color: var(--mol-hl-kobalt) !important;
}

.mol-highlights *,
.mol-highlights *::before,
.mol-highlights *::after {
  box-sizing: border-box !important;
}

.mol-highlights__row {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: var(--mol-hl-content-max) !important;
  padding: 0 var(--mol-hl-pad-x) !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--mol-hl-gap) !important;
}

.mol-highlights__row > li::marker,
.mol-highlights__row > li::before {
  content: none !important;
}

.mol-highlights__item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mol-highlights__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mol-hl-ring) !important;
  flex: none !important;
  color: var(--mol-hl-kobalt) !important;
  background: transparent !important;
}

.mol-highlights__icon img,
.mol-highlights__icon svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.mol-highlights__label {
  font-family: var(--mol-hl-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-hl-kobalt) !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Tablet — 2 columns wrap */
@media (max-width: 1023px) {
  .mol-highlights {
    --mol-hl-gap: 24px;
  }
  .mol-highlights__row {
    justify-content: flex-start;
  }
  .mol-highlights__item {
    flex: 0 1 calc(50% - 12px);
  }
}

/* Mobile — single column */
@media (max-width: 640px) {
  .mol-highlights {
    --mol-hl-pad-x: 24px;
    --mol-hl-pad-y: 24px;
    --mol-hl-gap: 16px;
  }
  .mol-highlights__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mol-highlights__item {
    flex: 1 1 auto;
    width: 100%;
  }
  .mol-highlights__icon {
    width: 40px;
    height: 40px;
  }
  .mol-highlights__icon img,
  .mol-highlights__icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ---------------------------------------------------------------------------
 * Intro — two-column "Introduction + expert CTA" block (Figma).
 * Left: big Halyard lead + Montserrat body. Right: gradient blue card with
 * avatar group + question + small body + pill CTA. Background #EEF7FF.
 * ------------------------------------------------------------------------- */

.mol-intro {
  --mol-intro-bg: #eef7ff;
  --mol-intro-kobalt: #00235c;
  --mol-intro-card-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-intro-card-radius-tr: 40px;
  --mol-intro-card-border: rgba(255, 255, 255, 0.35);
  --mol-intro-card-border-hover: rgba(255, 255, 255, 0.55);
  --mol-intro-sunflower: #f9b638;
  --mol-intro-pad-x: clamp(24px, 6vw, 96px);
  --mol-intro-pad-y: clamp(64px, 8vw, 120px);
  --mol-intro-content-max: 1512px;
  --mol-intro-gap: clamp(40px, 9vw, 136px);
  --mol-intro-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-intro-font-body: "Montserrat", system-ui, sans-serif;

  background: var(--mol-intro-bg) !important;
  padding: var(--mol-intro-pad-y) 0 !important;
  width: 100% !important;
  display: block !important;
  color: var(--mol-intro-kobalt) !important;
  font-family: var(--mol-intro-font-body) !important;
}

.mol-intro *,
.mol-intro *::before,
.mol-intro *::after {
  box-sizing: border-box !important;
}

.mol-intro__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--mol-intro-gap) !important;
  width: 100% !important;
  max-width: var(--mol-intro-content-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--mol-intro-pad-x) !important;
}

.mol-intro__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Main intro wysiwyg block. First <p> styled as Halyard 32 lead, rest as
   Montserrat 16 body. Editor writes everything in one wysiwyg field. */
.mol-intro__text {
  font-family: var(--mol-intro-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-intro-kobalt) !important;
  margin: 0 !important;
}

.mol-intro__text p,
.mol-intro__text > div {
  margin: 0 0 1em !important;
  color: var(--mol-intro-kobalt) !important;
}

.mol-intro__text > p:first-child,
.mol-intro__text > div:first-child {
  font-family: var(--mol-intro-font-display) !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin-bottom: 0.6em !important;
}

@media (max-width: 899px) {
  .mol-intro__text > p:first-child,
  .mol-intro__text > div:first-child {
    font-size: 24px !important;
  }
}

.mol-intro__text > p:last-child,
.mol-intro__text > div:last-child {
  margin-bottom: 0 !important;
}

.mol-intro__text a {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Optional secondary body block (legacy intro_body field). */
.mol-intro__body {
  font-family: var(--mol-intro-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-intro-kobalt) !important;
  margin: 0 !important;
}

.mol-intro__body p {
  margin: 0 0 1em !important;
  color: var(--mol-intro-kobalt) !important;
}

.mol-intro__body p:last-child {
  margin-bottom: 0 !important;
}

.mol-intro__body a {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Expert side card (right column) */
.mol-intro__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
  flex: 0 0 312px !important;
  width: 312px !important;
  padding: 40px !important;
  background: var(--mol-intro-card-grad) !important;
  border-radius: 0 var(--mol-intro-card-radius-tr) 0 0 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* fit-content in plaats van 120px: 120px is precies de breedte van drie
   overlappende avatars (48 + 32 + 32 + 2x4 padding). Staat er maar een
   contactpersoon ingesteld, dan bleef de witte pil even breed en stak hij
   64px voorbij de foto uit. De avatarpillen in de vacaturekaart en het
   FAQ-blok stonden al op fit-content; deze was de uitzondering.
   PageKings-feedback 2026-08-10, must-have, desktop en mobiel. */
.mol-intro__avatars {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  height: 56px !important;
  padding: 4px !important;
  background: #ffffff !important;
  border-radius: 144px !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
}

.mol-intro__avatars-stack {
  display: inline-flex !important;
  align-items: center !important;
}

.mol-intro__avatar {
  display: inline-block !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  border: 2px solid #ffffff !important;
  flex: none !important;
}

.mol-intro__avatar + .mol-intro__avatar {
  margin-left: -16px !important;
}

.mol-intro__avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.mol-intro__card-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

.mol-intro__card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-intro-font-display) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.mol-intro__card-body {
  margin: 0 !important;
  font-family: var(--mol-intro-font-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-intro__card-body p {
  margin: 0 0 0.4em !important;
  color: #ffffff !important;
}

.mol-intro__card-body p:last-child {
  margin-bottom: 0 !important;
}

.mol-intro__cta,
a.mol-intro__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  width: auto !important;
  max-width: max-content !important;
  border: 1px solid var(--mol-intro-card-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: var(--mol-intro-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}

.mol-intro__cta:hover,
.mol-intro__cta:focus-visible,
a.mol-intro__cta:hover,
a.mol-intro__cta:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--mol-intro-card-border-hover) !important;
  color: #ffffff !important;
  outline: none !important;
}

.mol-intro__cta:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
}

.mol-intro__cta-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-family: var(--mol-intro-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-intro__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-intro-sunflower) !important;
  color: var(--mol-intro-kobalt) !important;
  flex: none !important;
  transition: transform 160ms ease !important;
}

.mol-intro__cta:hover .mol-intro__cta-icon,
.mol-intro__cta:focus-visible .mol-intro__cta-icon {
  transform: translateX(2px) !important;
}

.mol-intro__cta-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Tablet — important needed because the desktop rule above sets
   flex-direction: row !important. Without !important here the column
   override is silently dropped on mobile and copy gets squeezed into
   a tiny strip next to the 312px card. */
@media (max-width: 1023px) {
  .mol-intro {
    --mol-intro-gap: 48px;
  }
  .mol-intro__inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .mol-intro__card {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 480px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .mol-intro {
    --mol-intro-pad-x: 24px;
    --mol-intro-pad-y: 56px;
    --mol-intro-gap: 32px;
  }
  .mol-intro__card {
    padding: 32px 24px;
    border-radius: 0 24px 0 0;
  }
  .mol-intro__cta {
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
 * Strengths section (transport-solution single) — kobalt body + checks.
 * Scoped override so homepage/.mol-tsca styling stays untouched.
 * ------------------------------------------------------------------------- */

/* Strengths block (.mol-tsca) styling — applies on every detail template
   that uses the strengths section: transport-solution, specialty, service,
   industry. Originally scoped to single-transport-solution only which left
   the section unstyled on the other CPTs. */

/* A1: Force white background on strengths section.
   .mol-tsca carries the `breakdance` class, which paints
   `var(--bde-background-color)` = #f9fafb (grey-50). Override to white so the
   section reads as a clean panel on every detail page. */
.mol-logistics__section--strengths,
.mol-logistics__section--accordion,
.mol-tsca {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

.mol-tsca__type-body {
  color: var(--mol-tsca-kobalt) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-tsca__type-body ul {
  margin-top: 0.25em !important;
  padding-left: 0 !important;
  list-style: none !important;
}

/* A2: keep <li> in normal block flow so inline children like <strong>
   wrap naturally with the rest of the line. Previous flex layout treated
   each inline child as a separate flex item, which clipped trailing text
   when the leading <strong> was wide. */
.mol-tsca__type-body ul li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 4px !important;
  min-height: 24px !important;
  display: block !important;
  list-style: none !important;
}

.mol-tsca__type-body ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300235C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.mol-tsca__link {
  color: var(--mol-tsca-kobalt) !important;
  border-color: rgba(0, 35, 92, 0.2) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  gap: 12px !important;
}

/* Eyebrow + subtitle inside the strengths panel — match Figma typography
   regardless of Breakdance global heading overrides. */
.mol-tsca__eyebrow {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mol-tsca-kobalt) !important;
}

.mol-tsca__subtitle,
.mol-tsca.breakdance h3.mol-tsca__subtitle,
.mol-tsca.breakdance .mol-tsca__body h3.mol-tsca__subtitle {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-tsca-kobalt) !important;
  text-transform: none !important;
}

.mol-tsca__intro-title,
.mol-tsca.breakdance h2.mol-tsca__intro-title {
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-tsca-kobalt) !important;
  text-transform: none !important;
}

.mol-tsca__trigger-title {
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-tsca-kobalt) !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* ============================================================
   Industries — desktop megamenu (featured variant)
   Left: white list card (industries + arrow)
   Right: kobalt featured card with title, body, CTA + radial circles
   ============================================================ */

.mol-header__mega--featured {
  display: grid !important;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}

.mol-header__mega-list-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 32px !important;
  background: #ffffff !important;
  border-radius: 0 40px 0 0 !important;
}

.mol-header__mega-list-heading {
  margin: 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(0, 35, 92, 0.12) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-header__mega-flat-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.mol-header__mega-flat-list > li + li {
  border-top: 1px solid rgba(0, 35, 92, 0.08) !important;
}

.mol-header__mega-flat-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

.mol-header__mega-flat-link:hover,
.mol-header__mega-flat-link:focus-visible {
  color: rgba(0, 35, 92, 0.7) !important;
}

.mol-header__mega-flat-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  color: #00235c !important;
  flex: 0 0 auto !important;
}

.mol-header__mega-flat-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.mol-header__mega-feature {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 56px !important;
  background: #00235c !important;
  background-image:
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 22%, transparent 22.5%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 32%, transparent 32.5%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 44%, transparent 44.5%) !important;
  border-radius: 0 40px 0 0 !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.mol-header__mega-feature-title {
  margin: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-size: clamp(28px, 2.4vw, 36px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  max-width: 80% !important;
}

.mol-header__mega-feature-body {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 70% !important;
}

.mol-header__mega-feature-cta {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  min-height: 48px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

.mol-header__mega-feature-cta:hover,
.mol-header__mega-feature-cta:focus-visible {
  background: #f7fbff !important;
  border-color: rgba(0, 35, 92, 0.35) !important;
}

.mol-header__mega-feature-cta .mol-header__pill-label {
  color: #00235c !important;
}

@media (max-width: 1199px) {
  .mol-header__mega--featured {
    grid-template-columns: 1fr !important;
  }

  .mol-header__mega-feature {
    padding: 40px !important;
  }

  .mol-header__mega-feature-title {
    max-width: 100% !important;
  }

  .mol-header__mega-feature-body {
    max-width: 100% !important;
  }
}

/* ============================================================
   Industries — mobile sub-panel (featured variant)
   ============================================================ */

.mol-header__mobile-mega--featured {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mol-header__mobile-mega-list-card {
  padding: 24px !important;
  background: #ffffff !important;
  border-radius: 0 40px 0 0 !important;
}

.mol-header__mobile-mega-list-card .mol-header__mega-flat-link {
  font-size: 16px !important;
  padding: 12px 0 !important;
}

.mol-header__mobile-mega-feature {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 24px !important;
  background: #00235c !important;
  background-image:
    radial-gradient(circle at 92% 92%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 22%, transparent 22.5%),
    radial-gradient(circle at 92% 92%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 36%, transparent 36.5%) !important;
  border-radius: 0 40px 0 0 !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.mol-header__mobile-mega-feature-title {
  margin: 0 !important;
  font-family: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

.mol-header__mobile-mega-feature-body {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.mol-header__mobile-mega-feature .mol-header__mega-feature-cta {
  align-self: flex-start !important;
}

/* ---------------------------------------------------------------------------
 * Testimonial — pull-quote card on ice-blue background (Figma).
 * Outer wrap: ice bg, vertical 120px, full-width.
 * Inner:      max-width 1512 + clamp(24px, 6vw, 96px) padding (header align).
 * Card:       blue gradient, 0 80px 0 0 radius, padding 64, decorative
 *             ellipse top-right. Quote in Halyard 32 white. Author row
 *             with 48px white-pill avatar + name + role.
 * ------------------------------------------------------------------------- */

.mol-testimonial-wrap {
  --mol-tm-ice: #eef7ff;
  --mol-tm-kobalt: #00235c;
  --mol-tm-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-tm-ellipse: linear-gradient(180deg, #115999 0%, #248fcb 100%);
  --mol-tm-radius-tr: 80px;
  --mol-tm-pad-x: clamp(24px, 6vw, 96px);
  --mol-tm-pad-y: clamp(56px, 8vw, 120px);
  --mol-tm-content-max: 1512px;
  --mol-tm-card-pad: clamp(32px, 5vw, 64px);
  --mol-tm-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-tm-font-body: "Montserrat", system-ui, sans-serif;

  background: var(--mol-tm-ice) !important;
  padding: var(--mol-tm-pad-y) 0 !important;
  width: 100% !important;
  display: block !important;
  color: var(--mol-tm-kobalt) !important;
  font-family: var(--mol-tm-font-body) !important;
}

.mol-testimonial-wrap *,
.mol-testimonial-wrap *::before,
.mol-testimonial-wrap *::after {
  box-sizing: border-box !important;
}

.mol-testimonial-wrap__inner {
  width: 100% !important;
  max-width: var(--mol-tm-content-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--mol-tm-pad-x) !important;
  display: flex !important;
  justify-content: center !important;
}

.mol-testimonial {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 1096px !important;
  margin: 0 !important;
  padding: var(--mol-tm-card-pad) !important;
  background: var(--mol-tm-grad) !important;
  border-radius: 0 var(--mol-tm-radius-tr) 0 0 !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 32px !important;
  overflow: hidden !important;
}

.mol-testimonial__decor {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 446.75px !important;
  height: 446.75px !important;
  right: -160px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(60deg) !important;
  background: var(--mol-tm-ellipse) !important;
  border-radius: 50% !important;
  opacity: 0.55 !important;
}

.mol-testimonial__quote,
.mol-testimonial__quote p {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-tm-font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-transform: none !important;
  quotes: "“" "”" "‘" "’" !important;
}

.mol-testimonial__quote::before {
  content: open-quote !important;
}

.mol-testimonial__quote::after {
  content: close-quote !important;
}

.mol-testimonial__quote p + p {
  margin-top: 0.6em !important;
}

.mol-testimonial__author {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-testimonial__avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
  flex: none !important;
}

.mol-testimonial__avatar img {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.mol-testimonial__author-text {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.mol-testimonial__author-name {
  display: block !important;
  font-family: var(--mol-tm-font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-transform: none !important;
}

.mol-testimonial__author-role {
  display: block !important;
  font-family: var(--mol-tm-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  opacity: 0.75 !important;
  margin: 0 !important;
  text-transform: none !important;
}

@media (max-width: 768px) {
  .mol-testimonial-wrap {
    --mol-tm-pad-y: 56px;
  }
  .mol-testimonial {
    --mol-tm-radius-tr: 48px;
    --mol-tm-card-pad: 32px;
    gap: 24px !important;
  }
  .mol-testimonial__decor {
    right: -200px !important;
    opacity: 0.35 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Footer CTA — gradient card that overhangs the next section / footer.
 * Card sits on top with z-index, negative bottom margin pulls the footer up
 * so the lower half of the card overlays the dark footer behind it.
 * Header alignment: max-width 1512 + clamp(24px, 6vw, 96px) padding-x.
 * ------------------------------------------------------------------------- */

.mol-ftrcta {
  --mol-fc-kobalt: #00235c;
  --mol-fc-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-fc-ellipse: linear-gradient(180deg, #115999 0%, #248fcb 100%);
  --mol-fc-radius-tr: 80px;
  --mol-fc-pad-x: clamp(24px, 6vw, 96px);
  --mol-fc-content-max: 1512px;
  --mol-fc-card-pad: clamp(32px, 5vw, 56px);
  --mol-fc-overlap: clamp(120px, 16vw, 240px);
  --mol-fc-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-fc-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--mol-fc-content-max) !important;
  /* No positive top margin: the coloured gap is owned by the preceding
     section's bottom padding (see footer_cta section rules). Keep the negative
     bottom margin so the card still overlaps into the footer. */
  margin: 0 auto calc(var(--mol-fc-overlap) * -1) !important;
  padding: 0 var(--mol-fc-pad-x) !important;
  font-family: var(--mol-fc-font-body) !important;
  color: #ffffff !important;
}

.mol-ftrcta *,
.mol-ftrcta *::before,
.mol-ftrcta *::after {
  box-sizing: border-box !important;
}

.mol-ftrcta__card {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 40px !important;
  width: 100% !important;
  padding: var(--mol-fc-card-pad) !important;
  background: var(--mol-fc-grad) !important;
  border-radius: 0 var(--mol-fc-radius-tr) 0 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-ftrcta__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.mol-ftrcta__ellipse {
  position: absolute !important;
  width: 440px !important;
  height: 440px !important;
  border-radius: 50% !important;
  background: var(--mol-fc-ellipse) !important;
  opacity: 0.55 !important;
}

.mol-ftrcta__ellipse--1 {
  right: -180px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-60deg) !important;
}

.mol-ftrcta__ellipse--2 {
  right: 12% !important;
  top: -260px !important;
  transform: rotate(75deg) !important;
  opacity: 0.4 !important;
}

.mol-ftrcta__title {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 720px !important;
  font-family: var(--mol-fc-font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.mol-ftrcta__row {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  width: 100% !important;
}

.mol-ftrcta__expert {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.mol-ftrcta__avatars {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 4px !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
  flex: none !important;
}

.mol-ftrcta__avatar {
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  flex: none !important;
}

.mol-ftrcta__avatar + .mol-ftrcta__avatar {
  margin-left: -16px !important;
}

.mol-ftrcta__avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.mol-ftrcta__contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.mol-ftrcta__kicker {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-fc-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.mol-ftrcta__lines {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
}

.mol-ftrcta__line,
a.mol-ftrcta__line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-fc-font-body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: opacity 160ms ease !important;
}

.mol-ftrcta__line:hover,
.mol-ftrcta__line:focus-visible,
a.mol-ftrcta__line:hover,
a.mol-ftrcta__line:focus-visible {
  opacity: 0.8 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

.mol-ftrcta__line svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  fill: currentColor !important;
}

.mol-ftrcta__address {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.mol-ftrcta__address-company,
.mol-ftrcta__address-line {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-fc-font-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.mol-ftrcta__address-company {
  font-weight: 400 !important;
}

.mol-ftrcta__address-line {
  font-weight: 500 !important;
}

/* The next sibling section (footer) needs vertical padding to absorb the
   overhang so the gradient card sits cleanly above its dark background.
   Also paint the wrapper section kobalt so the overlap area is dark
   (matches the .mol-footer background) instead of the page white. */
.mol-logistics__section--footer {
  background: #00235c !important;
}

/* On dynamic pages where footer_cta + footer are direct siblings, the
   aside.mol-ftrcta's negative margin-bottom pulls the footer up by
   --mol-fc-overlap; this padding adds matching space inside the footer
   so the navigation columns don't end up underneath the card. */
.mol-logistics__section--footer_cta + .mol-logistics__section--footer {
  padding-top: var(--mol-fc-overlap, clamp(120px, 16vw, 240px)) !important;
}

/* Footer-CTA wrapper TRANSPARANT houden zodat de kobalt footer-sectie eronder
   doorkomt en de kaart met z'n onderhelft over de donkere footer hangt (de
   overlap). Het gat BOVEN de kaart wordt gevuld door de bottom-padding van de
   voorgaande sectie (zie .mol-logistics__section:has(+ ...footer_cta) > * rond
   regel 9331), dus er ontstaat geen losse strip.
   2026-06-16: de eerdere #eef7ff/#fff "matching" achtergrond dekte (met
   z-index:4) juist de kobalt af, waardoor de overlap onzichtbaar werd. Live
   geverifieerd op home, about en solution/faq-pagina's. */
.mol-logistics-stack > .mol-logistics__section--footer_cta {
  background: transparent !important;
}

@media (max-width: 768px) {
  .mol-ftrcta {
    --mol-fc-radius-tr: 48px;
    --mol-fc-card-pad: 32px;
    --mol-fc-overlap: clamp(80px, 18vw, 160px);
  }
  .mol-ftrcta__card {
    gap: 24px !important;
  }
  .mol-ftrcta__row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .mol-ftrcta__ellipse--1,
  .mol-ftrcta__ellipse--2 {
    width: 320px !important;
    height: 320px !important;
    opacity: 0.3 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Archive grid — 2-col card grid for solutions / specialties / services
 * landing pages. Cards together form one rounded rectangle: outer corners
 * (TL/TR/BL/BR) get 40px radii via per-card modifier classes computed in
 * PHP. Last card on solutions_grid is the kobalt gradient "Help me choose".
 * Header alignment: max-width 1512 + clamp(24px, 6vw, 96px).
 * ------------------------------------------------------------------------- */

.mol-archive-grid {
  --mol-ag-kobalt: #00235c;
  --mol-ag-ice: #eef7ff;
  --mol-ag-card-border: rgba(0, 35, 92, 0.1);
  --mol-ag-btn-border: rgba(0, 35, 92, 0.2);
  --mol-ag-sunflower: #f9b638;
  --mol-ag-help-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-ag-radius: 40px;
  --mol-ag-pad-x: clamp(24px, 6vw, 96px);
  --mol-ag-content-max: 1512px;
  --mol-ag-card-pad: clamp(32px, 5vw, 64px);
  --mol-ag-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-ag-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  color: var(--mol-ag-kobalt) !important;
  font-family: var(--mol-ag-font-body) !important;
}

.mol-archive-grid *,
.mol-archive-grid *::before,
.mol-archive-grid *::after {
  box-sizing: border-box !important;
}

.mol-archive-grid__inner {
  width: 100% !important;
  max-width: var(--mol-ag-content-max) !important;
  margin: 0 auto !important;
  padding: clamp(72px, 9vw, 145px) var(--mol-ag-pad-x) clamp(64px, 8vw, 120px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 48px !important;
}

.mol-archive-grid__title {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  font-family: var(--mol-ag-font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--mol-ag-kobalt) !important;
  text-transform: none !important;
}

.mol-archive-grid__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

.mol-archive-grid__card {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 299px !important;
  padding: var(--mol-ag-card-pad) !important;
  background: var(--mol-ag-ice) !important;
  border: 1px solid var(--mol-ag-card-border) !important;
  border-radius: 0 !important;
  color: var(--mol-ag-kobalt) !important;
  margin: 0 !important;
}

/* Corner modifiers — only outermost cards round their corners so the grid
   reads as a single shape. */
.mol-archive-grid__card--corner-tl { border-top-left-radius: var(--mol-ag-radius) !important; }
.mol-archive-grid__card--corner-tr { border-top-right-radius: var(--mol-ag-radius) !important; }
.mol-archive-grid__card--corner-bl { border-bottom-left-radius: var(--mol-ag-radius) !important; }
.mol-archive-grid__card--corner-br { border-bottom-right-radius: var(--mol-ag-radius) !important; }

.mol-archive-grid__card-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
}

.mol-archive-grid__card-title {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--mol-ag-font-display) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--mol-ag-kobalt) !important;
  text-transform: none !important;
}

.mol-archive-grid__card-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--mol-ag-kobalt) !important;
  flex: none !important;
}

.mol-archive-grid__card-icon svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
  fill: currentColor !important;
}

.mol-archive-grid__card-body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ag-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ag-kobalt) !important;
}

.mol-archive-grid__card-cta,
a.mol-archive-grid__card-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  width: auto !important;
  max-width: max-content !important;
  border: 1px solid var(--mol-ag-btn-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mol-ag-kobalt) !important;
  font-family: var(--mol-ag-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}

.mol-archive-grid__card-cta:hover,
.mol-archive-grid__card-cta:focus-visible,
a.mol-archive-grid__card-cta:hover,
a.mol-archive-grid__card-cta:focus-visible {
  background: rgba(0, 35, 92, 0.04) !important;
  border-color: rgba(0, 35, 92, 0.4) !important;
  color: var(--mol-ag-kobalt) !important;
  outline: none !important;
}

.mol-archive-grid__card-cta-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: inherit !important;
  font-family: var(--mol-ag-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-archive-grid__card-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-ag-sunflower) !important;
  color: var(--mol-ag-kobalt) !important;
  flex: none !important;
  transition: transform 160ms ease !important;
}

.mol-archive-grid__card-cta:hover .mol-archive-grid__card-cta-icon,
.mol-archive-grid__card-cta:focus-visible .mol-archive-grid__card-cta-icon {
  transform: translateX(2px) !important;
}

.mol-archive-grid__card-cta-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Help-me-choose card variant — kobalt gradient with white type */
.mol-archive-grid__card--help {
  background: var(--mol-ag-help-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.mol-archive-grid__card--help .mol-archive-grid__card-title,
.mol-archive-grid__card--help .mol-archive-grid__card-body {
  color: #ffffff !important;
}

.mol-archive-grid__card--help .mol-archive-grid__card-title {
  font-size: clamp(20px, 2vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.mol-archive-grid__card--help .mol-archive-grid__card-cta,
.mol-archive-grid__card--help a.mol-archive-grid__card-cta {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.mol-archive-grid__card--help .mol-archive-grid__card-cta:hover,
.mol-archive-grid__card--help .mol-archive-grid__card-cta:focus-visible,
.mol-archive-grid__card--help a.mol-archive-grid__card-cta:hover,
.mol-archive-grid__card--help a.mol-archive-grid__card-cta:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
}

.mol-archive-grid__card--help .mol-archive-grid__card-cta-label {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .mol-archive-grid__inner {
    gap: 32px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .mol-archive-grid__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mol-archive-grid__card {
    --mol-ag-card-pad: 32px;
    min-height: 0 !important;
  }
  /* Op mobiel staat de grid in een kolom met 16px ertussen, dus vormen de
     kaarten geen aaneengesloten rechthoek meer en slaan de hoekmodifiers uit
     PHP nergens meer op: kaart 1 kreeg alleen linksboven een radius, kaart 2
     allebei de bovenhoeken en de rest niets. Dat las als willekeur.
     PageKings-feedback 2026-08-10 (mobiel, nice-to-have): hoeken eraf op
     mobiel, dan zijn alle kaarten gelijk. */
  .mol-archive-grid__card--corner-tl,
  .mol-archive-grid__card--corner-tr,
  .mol-archive-grid__card--corner-bl,
  .mol-archive-grid__card--corner-br {
    border-radius: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Page hero — archive / landing-page hero (Figma).
 * Full kobalt gradient background, decorative ellipse top-right area.
 * Breadcrumb top-left, content (title + intro + CTA) on the left half.
 * Image card on the right with top-right 65px radius.
 * 4-sided 1px white opacity-0.45 inset frame at 6.35% / 12.39%.
 * Bottom-left 80px section radius, header alignment.
 * ------------------------------------------------------------------------- */

.mol-page-hero {
  --mol-phero-kobalt: #00235c;
  --mol-phero-white: #ffffff;
  --mol-phero-sunflower: #f9b638;
  --mol-phero-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-phero-ellipse-grad: linear-gradient(180deg, #115999 0%, #248fcb 100%);
  --mol-phero-border: rgba(255, 255, 255, 0.35);
  --mol-phero-border-hover: rgba(255, 255, 255, 0.55);
  --mol-phero-inset: rgba(255, 255, 255, 0.45);
  --mol-phero-radius-bl: 80px;
  --mol-phero-image-radius-tr: 65px;
  --mol-phero-pad-x: clamp(24px, 6vw, 96px);
  --mol-phero-content-max: 1512px;
  --mol-phero-min-h: clamp(560px, 60vw, 775px);
  --mol-phero-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-phero-font-body: "Montserrat", system-ui, sans-serif;

  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  min-height: var(--mol-phero-min-h) !important;
  border-radius: 0 0 0 var(--mol-phero-radius-bl) !important;
  overflow: hidden !important;
  background: var(--mol-phero-grad) !important;
  color: var(--mol-phero-white) !important;
  font-family: var(--mol-phero-font-body) !important;
}

.mol-page-hero *,
.mol-page-hero *::before,
.mol-page-hero *::after {
  box-sizing: border-box !important;
}

.mol-page-hero__decor {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: clamp(420px, 55vw, 836px) !important;
  height: clamp(420px, 55vw, 836px) !important;
  right: -20% !important;
  top: -10% !important;
  background: var(--mol-phero-ellipse-grad) !important;
  border-radius: 50% !important;
  transform: rotate(-60deg) !important;
  opacity: 0.55 !important;
}

.mol-page-hero__inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: var(--mol-phero-content-max) !important;
  margin: 0 auto !important;
  padding: clamp(120px, 14vw, 200px) var(--mol-phero-pad-x) clamp(60px, 8vw, 96px) !important;
  min-height: var(--mol-phero-min-h) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.mol-page-hero__inset {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  left: var(--mol-phero-pad-x) !important;
  right: var(--mol-phero-pad-x) !important;
  top: clamp(72px, 9vw, 96px) !important;
  bottom: clamp(72px, 9vw, 96px) !important;
  border: none !important;
  border-top: 1px solid var(--mol-phero-inset) !important;
  border-right: 1px solid var(--mol-phero-inset) !important;
  border-top-right-radius: var(--mol-phero-image-radius-tr) !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: transparent !important;
}

/* Breadcrumb */
.mol-page-hero__breadcrumb {
  position: absolute !important;
  top: clamp(80px, 12vh, 112px) !important;
  left: var(--mol-phero-pad-x) !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--mol-phero-font-body) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--mol-phero-white) !important;
  margin: 0 !important;
}

.mol-page-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--mol-phero-white) !important;
  text-decoration: none !important;
  flex: none !important;
}

.mol-page-hero__crumb-home-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mol-page-hero__crumb-home-mark svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

.mol-page-hero__crumb-sep {
  opacity: 0.75 !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-phero-white) !important;
}

.mol-page-hero__crumb-link,
.mol-page-hero__crumb-current {
  color: var(--mol-phero-white) !important;
  opacity: 0.75 !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-family: var(--mol-phero-font-body) !important;
}

a.mol-page-hero__crumb-link:hover,
a.mol-page-hero__crumb-link:focus-visible {
  opacity: 1 !important;
  text-decoration: underline !important;
  color: var(--mol-phero-white) !important;
}

/* Grid: content left, image right */
.mol-page-hero__grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 96px) !important;
  width: 100% !important;
}

.mol-page-hero__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(20px, 2.6vw, 32px) !important;
  max-width: 637px !important;
  margin: 0 !important;
}

.mol-page-hero__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-phero-font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 5.4vw, 72px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--mol-phero-white) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.mol-page-hero__intro {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-phero-font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-phero-white) !important;
  max-width: 100% !important;
}

.mol-page-hero__intro p {
  margin: 0 0 0.6em !important;
  color: var(--mol-phero-white) !important;
}

.mol-page-hero__intro p:last-child {
  margin-bottom: 0 !important;
}

.mol-page-hero__intro a {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* CTA pill button */
.mol-page-hero__ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

.mol-page-hero__cta,
a.mol-page-hero__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  width: auto !important;
  max-width: max-content !important;
  border: 1px solid var(--mol-phero-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mol-phero-white) !important;
  font-family: var(--mol-phero-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}

.mol-page-hero__cta:hover,
.mol-page-hero__cta:focus-visible,
a.mol-page-hero__cta:hover,
a.mol-page-hero__cta:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--mol-phero-border-hover) !important;
  color: var(--mol-phero-white) !important;
  outline: none !important;
}

.mol-page-hero__cta-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--mol-phero-white) !important;
  font-family: var(--mol-phero-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-page-hero__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-phero-sunflower) !important;
  color: var(--mol-phero-kobalt) !important;
  flex: none !important;
  transition: transform 160ms ease !important;
}

.mol-page-hero__cta:hover .mol-page-hero__cta-icon,
.mol-page-hero__cta:focus-visible .mol-page-hero__cta-icon {
  transform: translateX(2px) !important;
}

.mol-page-hero__cta-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Secondary "ghost" CTA — same shape, white outline, white icon-circle so it
   reads as a quieter scroll-down hint next to the primary "Contact" pill. */
.mol-page-hero__cta--ghost,
a.mol-page-hero__cta--ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: var(--mol-phero-white) !important;
}

.mol-page-hero__cta--ghost:hover,
.mol-page-hero__cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

.mol-page-hero__cta--ghost .mol-page-hero__cta-icon {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--mol-phero-white) !important;
}

.mol-page-hero__cta--ghost:hover .mol-page-hero__cta-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(2px) !important;
}

.mol-page-hero__cta-icon--down svg {
  /* Down-arrow already provided in markup — no rotation needed. */
}

/* Image card on the right */
.mol-page-hero__media {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 var(--mol-phero-image-radius-tr) 0 0 !important;
  overflow: hidden !important;
  aspect-ratio: 596 / 595 !important;
  width: 100% !important;
  max-width: 596px !important;
  justify-self: end !important;
  align-self: stretch !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

.mol-page-hero__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
}

@media (max-width: 1023px) {
  .mol-page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) !important;
    gap: 32px !important;
  }
}

/* Full variant — text-only hero (no image card) used on archive landings
   like /insights/. Single column with the copy filling roughly half the
   width to match the Figma. Inset L-shape and decor-ellipse stay. */
.mol-page-hero--full .mol-page-hero__grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.mol-page-hero--full .mol-page-hero__content {
  max-width: 540px !important;
}

@media (max-width: 768px) {
  .mol-page-hero {
    --mol-phero-radius-bl: 48px;
    --mol-phero-image-radius-tr: 40px;
    --mol-phero-min-h: 640px;
    --mol-phero-pad-x: 24px;
  }
  .mol-page-hero__inset {
    display: none !important;
  }
  /* Breadcrumb on mobile: drop into normal flow above the title so it
     doesn't sit on top of the H1 (the absolute-positioned breadcrumb
     was overlapping the title at y≈220 on small screens). */
  .mol-page-hero__inner {
    padding: 56px var(--mol-phero-pad-x) 56px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .mol-page-hero__breadcrumb {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mol-page-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .mol-page-hero__media {
    max-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    justify-self: stretch !important;
  }
  /* Hide the decorative blue orb on mobile — at 412px wide a 574px
     element overlaps the entire hero copy and makes the gradient
     read as a stripe. (Reported on /about-mol-logistics/.) */
  .mol-page-hero__decor {
    display: none !important;
  }
}

/* ─── Other specialties (specialty single, kobalt gradient cards) ─── */
.mol-other-cards {
  --mol-oc-kobalt: #00235c;
  --mol-oc-card-grad: linear-gradient(103.65deg, #299FDA -23.53%, #105697 100%);
  --mol-oc-card-shadow: 4px 4px 50px rgba(1, 53, 141, 0.08);
  --mol-oc-sunflower: #f9b638;
  --mol-oc-card-corner: 40px;
  --mol-oc-pad-x: clamp(24px, 6vw, 96px);
  --mol-oc-content-max: 1512px;
  --mol-oc-card-pad: clamp(32px, 5vw, 64px);
  --mol-oc-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-oc-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  color: var(--mol-oc-kobalt) !important;
  font-family: var(--mol-oc-font-body) !important;
}

.mol-other-cards *,
.mol-other-cards *::before,
.mol-other-cards *::after {
  box-sizing: border-box !important;
}

.mol-other-cards__inner {
  width: 100% !important;
  max-width: var(--mol-oc-content-max) !important;
  margin: 0 auto !important;
  padding: clamp(64px, 8vw, 120px) var(--mol-oc-pad-x) clamp(64px, 8vw, 120px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(32px, 4vw, 56px) !important;
}

.mol-other-cards__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 880px !important;
}

.mol-other-cards__eyebrow {
  margin: 0 !important;
  font-family: var(--mol-oc-font-display) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mol-oc-kobalt) !important;
  font-weight: 600 !important;
}

.mol-other-cards__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-oc-font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-oc-kobalt) !important;
  text-transform: none !important;
}

.mol-other-cards__overview,
a.mol-other-cards__overview {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mol-oc-kobalt) !important;
  font-family: var(--mol-oc-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 160ms ease, border-color 160ms ease !important;
  margin-top: 8px !important;
}

.mol-other-cards__overview:hover,
.mol-other-cards__overview:focus-visible {
  background: rgba(0, 35, 92, 0.04) !important;
  border-color: rgba(0, 35, 92, 0.4) !important;
  color: var(--mol-oc-kobalt) !important;
  outline: none !important;
}

.mol-other-cards__overview-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-oc-sunflower) !important;
  color: var(--mol-oc-kobalt) !important;
  flex: none !important;
}

.mol-other-cards__overview-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

.mol-other-cards__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important; /* alle rijen gelijke hoogte, ongeacht aantal cards */
  gap: 24px !important;
  width: 100% !important;
}

.mol-other-cards__grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 720px !important;
}

.mol-other-cards__card {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 345px !important;
  padding: var(--mol-oc-card-pad) !important;
  background: var(--mol-oc-card-grad) !important;
  box-shadow: var(--mol-oc-card-shadow) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* Per Figma — first card carries the bottom-left corner radius, last card
   the top-right. Together the row reads as a soft L-shape that mirrors the
   inset frames used elsewhere on the site. */
.mol-other-cards__card--first {
  border-bottom-left-radius: var(--mol-oc-card-corner) !important;
}
.mol-other-cards__card--last {
  border-top-right-radius: var(--mol-oc-card-corner) !important;
}

/* Card-text group: badge + title + body with 16px gap, then 24px gap to CTA */
.mol-other-cards__card-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
}

.mol-other-cards__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 12px 8px !important;
  background: var(--mol-oc-kobalt) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-family: var(--mol-oc-font-display) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.mol-other-cards__card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-oc-font-display) !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.mol-other-cards__card-body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-oc-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-other-cards__cta,
a.mol-other-cards__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin-top: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: var(--mol-oc-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}

.mol-other-cards__cta:hover,
.mol-other-cards__cta:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
  outline: none !important;
}

.mol-other-cards__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-oc-sunflower) !important;
  color: var(--mol-oc-kobalt) !important;
  flex: none !important;
  transition: transform 160ms ease !important;
}

.mol-other-cards__cta:hover .mol-other-cards__cta-icon,
.mol-other-cards__cta:focus-visible .mol-other-cards__cta-icon {
  transform: translateX(2px) !important;
}

.mol-other-cards__cta-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

@media (max-width: 768px) {
  .mol-other-cards__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* On mobile every card gets the standard radius; last card keeps the bigger TR */
  .mol-other-cards__card {
    min-height: 280px !important;
  }
}

/* ─── Infographic (about page bento slider) ─────────────────────────── */
.mol-infographic {
  --mol-ig-kobalt: #00235c;
  --mol-ig-white: #ffffff;
  --mol-ig-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-ig-ellipse-grad: linear-gradient(180deg, #115999 0%, #248fcb 100%);
  --mol-ig-overlay: linear-gradient(256.1deg, rgba(0, 35, 92, 0.35) -49.68%, #00235c 102.32%);
  --mol-ig-sunflower: #f9b638;
  --mol-ig-pad-x: clamp(24px, 6vw, 96px);
  --mol-ig-content-max: 1512px;
  --mol-ig-pad-y: clamp(96px, 10vw, 145px);
  --mol-ig-card-h: clamp(320px, 30vw, 363px);
  --mol-ig-card-w: clamp(260px, 22vw, 312px);
  --mol-ig-card-feature-w: clamp(280px, 28vw, 421px);
  --mol-ig-radius-tl-br: 80px;
  --mol-ig-radius-tr: 40px;
  --mol-ig-radius-img-tr: 60px;
  --mol-ig-radius-img-bl: 60px;
  --mol-ig-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-ig-font-body: "Montserrat", system-ui, sans-serif;
  display: block !important;
  width: 100% !important;
  background: var(--mol-ig-white) !important;
  color: var(--mol-ig-kobalt) !important;
  font-family: var(--mol-ig-font-body) !important;
}

.mol-infographic *,
.mol-infographic *::before,
.mol-infographic *::after {
  box-sizing: border-box !important;
}

.mol-infographic__inner {
  width: 100% !important;
  max-width: var(--mol-ig-content-max) !important;
  margin: 0 auto !important;
  padding: var(--mol-ig-pad-y) var(--mol-ig-pad-x) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(32px, 4vw, 48px) !important;
}

.mol-infographic__head {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 80px) !important;
  width: 100% !important;
}

.mol-infographic__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ig-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: var(--mol-ig-kobalt) !important;
  text-transform: none !important;
  max-width: 823px !important;
}

.mol-infographic__nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
}

.mol-infographic__nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: transparent !important;
  color: var(--mol-ig-kobalt) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

.mol-infographic__nav-btn:hover,
.mol-infographic__nav-btn:focus-visible {
  background: var(--mol-ig-kobalt) !important;
  color: var(--mol-ig-white) !important;
  border-color: var(--mol-ig-kobalt) !important;
  outline: none !important;
}

.mol-infographic__nav-btn--next {
  background: var(--mol-ig-kobalt) !important;
  color: var(--mol-ig-white) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.mol-infographic__nav-btn--next:hover,
.mol-infographic__nav-btn--next:focus-visible {
  background: #001a4a !important;
  border-color: var(--mol-ig-kobalt) !important;
}

.mol-infographic__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mol-infographic__track::-webkit-scrollbar {
  display: none !important;
}

.mol-infographic__note {
  margin: 20px 0 0 !important;
  max-width: 720px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  color: rgba(0, 35, 92, 0.55) !important;
}

.mol-infographic__note a { color: inherit !important; text-decoration: underline !important; }
.mol-infographic__note p { margin: 0 0 4px !important; color: inherit !important; }
.mol-infographic__note p:last-child { margin-bottom: 0 !important; }

.mol-infographic__card {
  position: relative !important;
  isolation: isolate !important;
  flex: 0 0 auto !important;
  width: var(--mol-ig-card-w) !important;
  height: var(--mol-ig-card-h) !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border-radius: 0 var(--mol-ig-radius-tr) 0 0 !important;
  margin: 0 !important;
}

.mol-infographic__card--feature {
  width: var(--mol-ig-card-feature-w) !important;
  background: var(--mol-ig-kobalt) !important;
  color: var(--mol-ig-white) !important;
  border-radius: 0 var(--mol-ig-radius-img-tr) 0 0 !important;
}

.mol-infographic__card--feature.mol-infographic__card--tall {
  height: calc(var(--mol-ig-card-h) * 2 + 24px) !important;
  border-radius: var(--mol-ig-radius-tl-br) 0 var(--mol-ig-radius-tl-br) 0 !important;
}

.mol-infographic__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

.mol-infographic__img-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: var(--mol-ig-overlay) !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.mol-infographic__feature-text {
  position: relative !important;
  z-index: 2 !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-infographic__feature-kicker {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ig-font-body) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ig-white) !important;
}

.mol-infographic__feature-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ig-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.1 !important;
  color: var(--mol-ig-white) !important;
  text-transform: none !important;
}

.mol-infographic__card--stat {
  background: var(--mol-ig-grad) !important;
  color: var(--mol-ig-white) !important;
}

.mol-infographic--no-decor .mol-infographic__decor {
  display: none !important;
}

/* Flush-top variant: drop the top padding so the section sits directly under
   the previous one (Figma stack-design pattern — only bottom padding). Used
   on /about/ where double padding-y between sections feels too airy. */
.mol-infographic--flush-top .mol-infographic__inner {
  padding-top: 0 !important;
}

.mol-infographic__decor {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 360px !important;
  height: 360px !important;
  top: 50% !important;
  left: 50% !important;
  background: var(--mol-ig-ellipse-grad) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -130%) rotate(-30deg) !important;
  opacity: 0.65 !important;
}

.mol-infographic__stat-text {
  position: relative !important;
  z-index: 2 !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-infographic__stat-number {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 4px !important;
  font-family: var(--mol-ig-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(56px, 7vw, 72px) !important;
  line-height: 1.1 !important;
  color: var(--mol-ig-white) !important;
  text-transform: none !important;
}

.mol-infographic__stat-num-text {
  display: inline-block !important;
  line-height: 1.1 !important;
}

.mol-infographic__stat-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--mol-ig-sunflower) !important;
  color: var(--mol-ig-kobalt) !important;
  margin-top: 6px !important;
  flex: none !important;
}

.mol-infographic__stat-label {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ig-font-body) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ig-white) !important;
}

@media (max-width: 700px) {
  .mol-infographic__card--feature.mol-infographic__card--tall {
    height: var(--mol-ig-card-h) !important;
  }
}

/* ─── Core values (about page) ─────────────────────────────────────── */
.mol-values {
  --mol-vl-kobalt: #00235c;
  --mol-vl-white: #ffffff;
  --mol-vl-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-vl-divider: rgba(0, 35, 92, 0.25);
  --mol-vl-pad-x: clamp(24px, 6vw, 96px);
  --mol-vl-pad-y: clamp(72px, 9vw, 145px);
  --mol-vl-content-max: 1512px;
  --mol-vl-quote-radius-tr: 40px;
  --mol-vl-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-vl-font-body: "Montserrat", system-ui, sans-serif;
  display: block !important;
  width: 100% !important;
  background: var(--mol-vl-white) !important;
  color: var(--mol-vl-kobalt) !important;
  font-family: var(--mol-vl-font-body) !important;
}

.mol-values *,
.mol-values *::before,
.mol-values *::after {
  box-sizing: border-box !important;
}

.mol-values__inner {
  width: 100% !important;
  max-width: var(--mol-vl-content-max) !important;
  margin: 0 auto !important;
  padding: var(--mol-vl-pad-y) var(--mol-vl-pad-x) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(32px, 4vw, 48px) !important;
  align-items: start !important;
}

/* R2/P6: optional partner logo strip below the values content. Centred,
   spans full width of the section's grid. */
.mol-values__partner {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: clamp(24px, 4vw, 48px) 0 0 !important;
}

.mol-values__partner-logo {
  display: block !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: 80px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (min-width: 900px) {
  .mol-values__inner {
    grid-template-columns: minmax(0, 424px) minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

.mol-values__lead {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 424px !important;
}

.mol-values__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-vl-font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(26px, 2.6vw, 32px) !important;
  line-height: 1.1 !important;
  color: var(--mol-vl-kobalt) !important;
  text-transform: none !important;
}

.mol-values__quote {
  margin: 0 !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  background: var(--mol-vl-grad) !important;
  border-radius: 0 var(--mol-vl-quote-radius-tr) 0 0 !important;
  color: var(--mol-vl-white) !important;
}

.mol-values__quote-text {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-vl-font-body) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-vl-white) !important;
  quotes: "\201C" "\201D" "\2018" "\2019" !important;
}

.mol-values__quote-text p {
  margin: 0 !important;
  color: inherit !important;
}

.mol-values__quote-text p:first-child::before {
  content: open-quote;
}

.mol-values__quote-text p:last-child::after {
  content: close-quote;
}

.mol-values__quote-author {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}

.mol-values__quote-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: var(--mol-vl-white) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
  padding: 4px !important;
  flex: none !important;
}

.mol-values__quote-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.mol-values__quote-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.mol-values__quote-name {
  font-family: var(--mol-vl-font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-vl-white) !important;
}

.mol-values__quote-role {
  font-family: var(--mol-vl-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-vl-white) !important;
  opacity: 0.75 !important;
}

.mol-values__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  width: 100% !important;
}

@media (min-width: 700px) {
  .mol-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 24px !important;
  }
}

@media (min-width: 900px) {
  .mol-values__grid {
    padding-left: 64px !important;
  }
}

/* --stacked: full-width single column layout (Amarildo Y5 batch).
   Head (title + optional mission quote) zit boven, grid 3x2 onder full width. */
.mol-values--stacked .mol-values__inner {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(40px, 5vw, 64px) !important;
}
@media (min-width: 900px) {
  .mol-values--stacked .mol-values__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(40px, 5vw, 64px) !important;
  }
}
.mol-values--stacked .mol-values__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 720px !important;
}
.mol-values--stacked .mol-values__title {
  font-size: clamp(28px, 3.2vw, 40px) !important;
}
.mol-values--stacked .mol-values__quote {
  width: 100% !important;
  max-width: 720px !important;
}
.mol-values--stacked .mol-values__grid {
  padding-left: 0 !important;
}
@media (min-width: 900px) {
  .mol-values--stacked .mol-values__grid {
    padding-left: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 40px 48px !important;
  }
}
@media (min-width: 700px) and (max-width: 899px) {
  .mol-values--stacked .mol-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.mol-values__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 32px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mol-values__item-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-vl-font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 1.8vw, 24px) !important;
  line-height: 1.1 !important;
  color: var(--mol-vl-kobalt) !important;
  text-transform: none !important;
}

.mol-values__item-divider {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  border-top: 1px solid var(--mol-vl-divider) !important;
}

.mol-values__item-body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-vl-font-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-vl-kobalt) !important;
}

.mol-values__item-body p {
  margin: 0 0 0.6em !important;
  color: inherit !important;
}

.mol-values__item-body p:last-child {
  margin-bottom: 0 !important;
}

/* ─── Team intro (about page kobalt section with 3-col photo bento) ── */
.mol-team-intro {
  --mol-ti-kobalt: #00235c;
  --mol-ti-white: #ffffff;
  --mol-ti-grad: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%);
  --mol-ti-ellipse-grad: linear-gradient(180deg, #115999 0%, #248fcb 100%);
  --mol-ti-sunflower: #f9b638;
  --mol-ti-tile-radius: 16px;
  --mol-ti-pad-x: clamp(24px, 6vw, 96px);
  --mol-ti-pad-y: clamp(72px, 9vw, 145px);
  --mol-ti-content-max: 1512px;
  --mol-ti-gallery-gap: 16px;
  --mol-ti-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-ti-font-body: "Montserrat", system-ui, sans-serif;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  background: var(--mol-ti-grad) !important;
  color: var(--mol-ti-white) !important;
  font-family: var(--mol-ti-font-body) !important;
}

.mol-team-intro *,
.mol-team-intro *::before,
.mol-team-intro *::after {
  box-sizing: border-box !important;
}

.mol-team-intro__decor {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: clamp(640px, 90vw, 1356px) !important;
  height: clamp(640px, 90vw, 1356px) !important;
  left: -45% !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-30deg) !important;
  background: var(--mol-ti-ellipse-grad) !important;
  border-radius: 50% !important;
  opacity: 0.65 !important;
}

/* Hide the decorative orb on phones — a 90vw kobalt circle behind the
   gallery thumbs reads as a giant blue bubble crowding the copy on
   /about-mol-logistics/. */
@media (max-width: 768px) {
  .mol-team-intro__decor {
    display: none !important;
  }
}

.mol-team-intro__inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: var(--mol-ti-content-max) !important;
  margin: 0 auto !important;
  padding: var(--mol-ti-pad-y) var(--mol-ti-pad-x) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(32px, 4vw, 24px) !important;
  align-items: center !important;
}

@media (min-width: 900px) {
  .mol-team-intro__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

.mol-team-intro__gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--mol-ti-gallery-gap) !important;
  width: 100% !important;
  max-width: 648px !important;
  align-items: stretch !important;
}

.mol-team-intro__col {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mol-ti-gallery-gap) !important;
  min-width: 0 !important;
}

.mol-team-intro__tile {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--mol-ti-tile-radius) !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.06) !important;
  width: 100% !important;
}

.mol-team-intro__tile img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  margin: 0 !important;
}

/* Bento heights per column — column 1 has three squares, column 2 has
   two equal halves, column 3 has one tall + one square. Heights are
   set on the tiles so each column totals roughly the same height. */
.mol-team-intro__col--1 .mol-team-intro__tile {
  aspect-ratio: 1 / 1 !important;
}

.mol-team-intro__col--2 .mol-team-intro__tile {
  aspect-ratio: 13 / 20 !important;
}

.mol-team-intro__col--3 .mol-team-intro__tile--c3-1 {
  aspect-ratio: 13 / 27 !important;
}

.mol-team-intro__col--3 .mol-team-intro__tile--c3-2 {
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 600px) {
  .mol-team-intro__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mol-team-intro__col--3 {
    display: none !important;
  }
}

.mol-team-intro__copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 648px !important;
  padding: clamp(0px, 4vw, 40px) clamp(0px, 6vw, 64px) !important;
  min-height: 100% !important;
}

.mol-team-intro__copy-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
}

.mol-team-intro__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ti-font-body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mol-ti-white) !important;
}

.mol-team-intro__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ti-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: var(--mol-ti-white) !important;
  text-transform: none !important;
}

.mol-team-intro__body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mol-ti-font-body) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--mol-ti-white) !important;
}

.mol-team-intro__body p {
  margin: 0 0 0.8em !important;
  color: inherit !important;
}

.mol-team-intro__body p:last-child {
  margin-bottom: 0 !important;
}

.mol-team-intro__cta,
a.mol-team-intro__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mol-ti-white) !important;
  font-family: var(--mol-ti-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}

.mol-team-intro__cta:hover,
.mol-team-intro__cta:focus-visible {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  outline: none !important;
}

.mol-team-intro__cta-label {
  display: inline-flex !important;
  align-items: center !important;
}

.mol-team-intro__cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--mol-ti-sunflower) !important;
  color: var(--mol-ti-kobalt) !important;
  flex: none !important;
}

/* ─── Insights archive grid (/insights/) ─────────────────────────── */
.mol-insights-grid {
  --mol-ig-kobalt: #00235c;
  --mol-ig-white: #ffffff;
  --mol-ig-ice: #eef7ff;
  --mol-ig-sunflower: #f9b638;
  --mol-ig-pill-border: rgba(0, 35, 92, 0.2);
  --mol-ig-pad-x: clamp(24px, 6vw, 96px);
  --mol-ig-pad-y: clamp(72px, 9vw, 145px);
  --mol-ig-content-max: 1512px;
  --mol-ig-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-ig-font-body: "Montserrat", system-ui, sans-serif;
  display: block !important;
  width: 100% !important;
  background: var(--mol-ig-ice) !important;
  color: var(--mol-ig-kobalt) !important;
  font-family: var(--mol-ig-font-body) !important;
}

.mol-insights-grid *,
.mol-insights-grid *::before,
.mol-insights-grid *::after {
  box-sizing: border-box !important;
}

.mol-insights-grid__inner {
  width: 100% !important;
  max-width: var(--mol-ig-content-max) !important;
  margin: 0 auto !important;
  padding: var(--mol-ig-pad-y) var(--mol-ig-pad-x) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(32px, 4vw, 48px) !important;
}

.mol-insights-grid__filters {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

.mol-insights-grid__pill,
a.mol-insights-grid__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mol-ig-pill-border) !important;
  background: transparent !important;
  color: var(--mol-ig-kobalt) !important;
  font-family: var(--mol-ig-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

.mol-insights-grid__pill:hover,
.mol-insights-grid__pill:focus-visible,
a.mol-insights-grid__pill:hover,
a.mol-insights-grid__pill:focus-visible {
  background: rgba(0, 35, 92, 0.05) !important;
  border-color: var(--mol-ig-kobalt) !important;
  outline: none !important;
}

.mol-insights-grid__pill.is-active,
a.mol-insights-grid__pill.is-active {
  background: var(--mol-ig-kobalt) !important;
  color: var(--mol-ig-white) !important;
  border-color: var(--mol-ig-kobalt) !important;
}

.mol-insights-grid__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  width: 100% !important;
}

@media (min-width: 700px) {
  .mol-insights-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1100px) {
  .mol-insights-grid__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Cards reuse .mol-hp6__card markup. Override the swiper-slide width
   constraint so the grid cells fill their column properly. */
.mol-insights-grid__card {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

.mol-insights-grid__empty {
  margin: 0 !important;
  padding: 40px 0 !important;
  font-family: var(--mol-ig-font-body) !important;
  font-size: 16px !important;
  color: var(--mol-ig-kobalt) !important;
  opacity: 0.7 !important;
}

.mol-insights-grid__pagination {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  padding-top: clamp(16px, 2vw, 24px) !important;
}

.mol-insights-grid__page-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  font-family: var(--mol-ig-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--mol-ig-kobalt) !important;
  letter-spacing: -0.02em !important;
}

.mol-insights-grid__page-btn,
a.mol-insights-grid__page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: transparent !important;
  color: var(--mol-ig-kobalt) !important;
  text-decoration: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

.mol-insights-grid__page-btn:hover,
.mol-insights-grid__page-btn:focus-visible,
a.mol-insights-grid__page-btn:hover,
a.mol-insights-grid__page-btn:focus-visible {
  background: var(--mol-ig-kobalt) !important;
  color: var(--mol-ig-white) !important;
  border-color: var(--mol-ig-kobalt) !important;
  outline: none !important;
}

.mol-insights-grid__page-btn.is-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* =========================================================
 * JOBS LANDING (Werken bij / page id 2068)
 * Shared tokens: kobalt #00235C, sunflower #F9B638, ice #EEF7FF
 * Container pattern: max-width 1512px + clamp(24px, 6vw, 96px)
 * Fonts: Halyard Display (display) + Montserrat (body)
 * ========================================================= */

/* Shared pill button — used across jobs sections */
.mol-cta-btn {
  --mol-btn-kobalt: #00235c;
  --mol-btn-sunflower: #f9b638;
  --mol-btn-white: #ffffff;
  --mol-btn-border: rgba(0, 35, 92, 0.2);

  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  border-radius: 999px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid var(--mol-btn-border) !important;
  background: transparent !important;
  color: var(--mol-btn-kobalt) !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  white-space: nowrap !important;
}

.mol-cta-btn--filled {
  background: var(--mol-btn-kobalt) !important;
  color: var(--mol-btn-white) !important;
  border-color: var(--mol-btn-kobalt) !important;
}

.mol-cta-btn--outline {
  background: transparent !important;
}

.mol-cta-btn--outline-white {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.mol-cta-btn:hover,
.mol-cta-btn:focus-visible {
  background: var(--mol-btn-kobalt) !important;
  color: var(--mol-btn-white) !important;
  border-color: var(--mol-btn-kobalt) !important;
}

.mol-cta-btn__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--mol-btn-sunflower) !important;
  color: var(--mol-btn-kobalt) !important;
  flex: 0 0 auto !important;
}

.mol-cta-btn__icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* ----- jobs_hero ---------------------------------------- */
.mol-jl-hero {
  position: relative !important;
  width: 100% !important;
  background: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.mol-jl-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(256.1deg, rgba(0, 35, 92, 0.35) -49.68%, #00235c 102.32%), #00235c;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 0 0 80px !important;
  z-index: 0 !important;
}

.mol-jl-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 6vw, 96px) 0 !important;
  min-height: 660px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-jl-hero__crumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin-top: 32px !important;
}

.mol-jl-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  color: #ffffff !important;
}

.mol-jl-hero__crumb-sep {
  opacity: 0.6 !important;
}

.mol-jl-hero__copy {
  max-width: 735px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  margin-top: clamp(48px, 8vw, 120px) !important;
}

.mol-jl-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-jl-hero__intro {
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-jl-hero__intro p {
  margin: 0 0 8px !important;
  color: #ffffff !important;
}

.mol-jl-hero__intro p:last-child {
  margin-bottom: 0 !important;
}

/* Filter card pinned bottom-left, ice fill, asymmetric rounded TR */
.mol-jl-hero__filter {
  align-self: flex-start !important;
  margin-top: auto !important;
  background: #eef7ff !important;
  border-radius: 0 40px 0 0 !important;
  padding: 32px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 997px !important;
  box-sizing: border-box !important;
}

.mol-jl-hero__filter-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 250px !important;
  flex: 0 0 auto !important;
}

.mol-jl-hero__filter-label {
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-jl-hero__filter-select {
  position: relative !important;
  display: block !important;
}

.mol-jl-hero__filter-select::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #00235c !important;
  border-bottom: 2px solid #00235c !important;
  transform: translateY(-70%) rotate(45deg) !important;
  pointer-events: none !important;
}

.mol-jl-hero__filter-select select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 48px !important;
  padding: 11px 44px 11px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  border-radius: 0 999px 999px 0 !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
}

.mol-jl-hero__filter-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.mol-jl-hero__filter-or {
  font-size: 14px !important;
  color: #00235c !important;
  opacity: 0.55 !important;
  letter-spacing: -0.02em !important;
}

/* ----- jobs_intro --------------------------------------- */
.mol-jl-intro {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-jl-intro__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

.mol-jl-intro__body {
  font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.3 !important;
  color: #00235c !important;
  max-width: 984px !important;
}

.mol-jl-intro__body p {
  margin: 0 0 16px !important;
}

.mol-jl-intro__body p:last-child {
  margin-bottom: 0 !important;
}

/* H2: optional smaller body paragraph below the lead. About-MOL-style typo. */
.mol-jl-intro__body--secondary {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  color: #00235c !important;
  max-width: 760px !important;
  margin-top: 24px !important;
}

.mol-jl-intro__body--secondary p {
  margin: 0 0 12px !important;
}

.mol-jl-intro__body--secondary p:last-child {
  margin-bottom: 0 !important;
}

/* ----- jobs_latest -------------------------------------- */
.mol-jl-latest {
  position: relative !important;
  width: 100% !important;
  padding: clamp(48px, 7vw, 120px) 0 !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Decorative ice panel that bleeds left, ends ~71% across (Figma 1080/1512).
 * Uses calc(50% + 324px) so the ice end aligns with the same x as the inner
 * container's 1080px column at any viewport width. */
.mol-jl-latest__panel {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: max(70%, calc(50% + 324px)) !important;
  background: #eef7ff !important;
  border-radius: 0 80px 0 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
}

/* Standard mol- container — same alignment as hero, feature, cta, news, etc. */
.mol-jl-latest__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.mol-jl-latest__header {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.mol-jl-latest__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-latest__title {
  font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-latest__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.mol-jl-latest__nav {
  display: inline-flex !important;
  gap: 8px !important;
}

.mol-jl-latest__nav-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: transparent !important;
  color: #00235c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-jl-latest__nav-btn--filled {
  background: #00235c !important;
  color: #ffffff !important;
  border-color: #00235c !important;
}

.mol-jl-latest__nav-btn:hover {
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-jl-latest__track {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
}

.mol-jl-latest__track::-webkit-scrollbar {
  display: none !important;
}

/* Vacancy card */
.mol-jl-card {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  min-width: 320px !important;
  max-width: 424px !important;
  height: 471px !important;
  position: relative !important;
  border-radius: 12px !important;
  background: #00235c !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  scroll-snap-align: start !important;
  display: block !important;
}

.mol-jl-card__photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  background-color: #102a52 !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}

.mol-jl-card__badge {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  background: #00235c !important;
  color: #ffffff !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  padding: 7px 12px 8px !important;
  border-radius: 4px !important;
}

.mol-jl-card__body {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mol-jl-card__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-jl-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

.mol-jl-card__meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-jl-card__meta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  flex: 0 0 auto !important;
}
/* Country flag fills the icon circle (round, edge-to-edge) instead of the globe. */
.mol-jl-card__meta-icon.mol-jl-card__meta-flag {
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.mol-jl-card__meta-flag img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;
}
/* Round country flag (shared) + vacancy-detail hero variant. */
.mol-flag-img {
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;
}
.mol-vd-hero__meta-icon--flag {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ----- jobs_diff ---------------------------------------- */
.mol-jl-diff {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-jl-diff__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.mol-jl-diff__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-diff__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.mol-jl-diff__card {
  position: relative !important;
  border-radius: 24px !important;
  padding: 32px !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  background-size: cover !important;
  background-position: center !important;
}

.mol-jl-diff__card--text {
  background: linear-gradient(135deg, #003c8e 0%, #00235c 100%) !important;
  color: #ffffff !important;
}

.mol-jl-diff__card--image {
  background-color: #102a52 !important;
}

.mol-jl-diff__card-eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  opacity: 0.85 !important;
}

.mol-jl-diff__card-body {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-jl-diff__card-body p {
  margin: 0 0 8px !important;
  color: inherit !important;
}

.mol-jl-diff__card-body p:last-child {
  margin-bottom: 0 !important;
}

.mol-jl-diff__card-overlay {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  background: rgba(0, 35, 92, 0.65) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(6px) !important;
}

/* ----- jobs_team ---------------------------------------- */
.mol-jl-team {
  width: 100% !important;
  background: #f6fbff !important;
}

.mol-jl-team__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 6vw, 80px) !important;
  align-items: center !important;
}

.mol-jl-team__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

.mol-jl-team__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-team__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  line-height: 1.15 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-team__body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
}

.mol-jl-team__body p {
  margin: 0 0 12px !important;
}

.mol-jl-team__media {
  margin: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.mol-jl-team__media img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* ----- jobs_diff2 --------------------------------------- */
.mol-jl-diff2 {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-jl-diff2__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 6vw, 80px) !important;
  align-items: center !important;
}

/* T2: kleiner formaat + 1 rounded corner (TR), in lijn met de andere
   image-cards op de site (mol-cta__media, mol-page-hero__media etc.). */
.mol-jl-diff2__media {
  margin: 0 !important;
  border-radius: 0 60px 0 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 480px !important;
  align-self: center !important;
  justify-self: start !important;
}

.mol-jl-diff2__media img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.mol-jl-diff2__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-jl-diff2__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  /* T2/V2: smaller per Amarildo feedback (was clamp(28, 3.5vw, 42)),
     in lijn met mol-faq-section__title clamp(24, 2.4vw, 32). */
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.15 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-diff2__intro {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

.mol-jl-diff2__intro p {
  margin: 0 0 8px !important;
  color: inherit !important;
}

.mol-jl-diff2__intro p:last-child {
  margin-bottom: 0 !important;
}

.mol-jl-diff2__panel p {
  margin: 0 0 8px !important;
}

.mol-jl-diff2__panel p:last-child {
  margin-bottom: 0 !important;
}

.mol-jl-diff2__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  border-top: 1px solid rgba(0, 35, 92, 0.15) !important;
}

.mol-jl-diff2__item {
  border-bottom: 1px solid rgba(0, 35, 92, 0.15) !important;
}

.mol-jl-diff2__toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 20px 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  cursor: pointer !important;
  text-align: left !important;
}

.mol-jl-diff2__toggle-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  position: relative !important;
  flex: 0 0 auto !important;
  transition: transform 0.2s ease !important;
}

.mol-jl-diff2__toggle-icon span {
  position: absolute !important;
  background: #00235c !important;
  border-radius: 1px !important;
}

.mol-jl-diff2__toggle-icon span:nth-child(1) {
  width: 12px !important;
  height: 2px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.mol-jl-diff2__toggle-icon span:nth-child(2) {
  width: 2px !important;
  height: 12px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 0.2s ease !important;
}

.mol-jl-diff2__toggle[aria-expanded="true"] .mol-jl-diff2__toggle-icon span:nth-child(2) {
  transform: translate(-50%, -50%) scaleY(0) !important;
}

.mol-jl-diff2__panel {
  padding: 0 0 20px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
  opacity: 0.85 !important;
}

.mol-jl-diff2__panel[hidden] {
  display: none !important;
}

/* ----- jobs_quote --------------------------------------- */
.mol-jl-quote {
  width: 100% !important;
  background: #ffffff !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
  box-sizing: border-box !important;
}

.mol-jl-quote__interview-link {
  display: inline-flex !important;
  width: auto !important;
  align-self: flex-start !important; /* voorkomt fullwidth-stretch in flex-parent */
  align-items: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: #00235c !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
}
.mol-jl-quote__interview-link:hover {
  background: #001a45 !important;
  color: #ffffff !important;
}
.mol-jl-quote__interview-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #f9b638 !important;
  color: #00235c !important;
}

.mol-jl-quote__card {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 64px) !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #00235c 80%) !important;
  border-radius: 24px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  position: relative !important;
}

.mol-jl-quote__mark {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.mol-jl-quote__text {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-style: italic !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  margin: 0 !important;
  max-width: 900px !important;
}

.mol-jl-quote__text p {
  margin: 0 0 12px !important;
  color: inherit !important;
}

.mol-jl-quote__text p:last-child {
  margin-bottom: 0 !important;
}

.mol-jl-quote__author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.mol-jl-quote__avatar {
  display: inline-flex !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

.mol-jl-quote__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mol-jl-quote__author-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mol-jl-quote__author-name {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.mol-jl-quote__author-role {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ----- jobs_culture ------------------------------------- */
.mol-jl-culture {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-jl-culture__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.mol-jl-culture__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-jl-culture__track {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.mol-jl-culture__item {
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
}

.mol-jl-culture__item img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.mol-jl-culture__item:hover img {
  transform: scale(1.04) !important;
}

.mol-jl-culture__open {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: zoom-in !important;
  appearance: none !important;
}

.mol-jl-culture__open:focus-visible {
  outline: 2px solid #f9b638 !important;
  outline-offset: 2px !important;
}

/* Image lightbox shared by mol-jl-culture and any future gallery using
   [data-mol-culture-lightbox]. Mirrors the hero-lightbox visual language. */
.mol-culture-lb {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 4vw, 48px) !important;
  background: rgba(0, 14, 46, 0.92) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.mol-culture-lb.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}
.mol-culture-lb__inner {
  position: relative !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mol-culture-lb__img {
  max-width: 100% !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
.mol-culture-lb__close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  z-index: 2 !important;
}
.mol-culture-lb__close:hover,
.mol-culture-lb__close:focus-visible {
  background: rgba(255, 255, 255, 0.3) !important;
}
.mol-culture-lb__close svg {
  width: 18px !important;
  height: 18px !important;
}
.mol-culture-lb__nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  z-index: 2 !important;
}
.mol-culture-lb__nav:hover,
.mol-culture-lb__nav:focus-visible {
  background: rgba(255, 255, 255, 0.3) !important;
}
.mol-culture-lb__nav svg {
  width: 22px !important;
  height: 22px !important;
}
.mol-culture-lb__nav--prev {
  left: 0 !important;
}
.mol-culture-lb__nav--next {
  right: 0 !important;
}
.mol-culture-lb__nav[hidden] {
  display: none !important;
}
body.mol-culture-lb-open {
  overflow: hidden !important;
}
@media (max-width: 768px) {
  .mol-culture-lb__close {
    top: -8px !important;
    right: -8px !important;
  }
  .mol-culture-lb__nav--prev {
    left: -8px !important;
  }
  .mol-culture-lb__nav--next {
    right: -8px !important;
  }
}

/* ----- responsive --------------------------------------- */
@media (max-width: 899px) {
  .mol-jl-hero__inner {
    min-height: 480px !important;
    padding-bottom: 0 !important;
  }
  .mol-jl-hero__title {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  .mol-jl-hero__filter {
    border-radius: 0 32px 0 0 !important;
    padding: 24px !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .mol-jl-hero__filter-field {
    width: 100% !important;
  }
  .mol-jl-hero__filter-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .mol-jl-hero__filter-actions .mol-cta-btn {
    justify-content: space-between !important;
  }
  .mol-jl-team__inner,
  .mol-jl-diff2__inner {
    grid-template-columns: 1fr !important;
  }
  .mol-jl-diff2__media {
    order: -1 !important;
  }
  .mol-jl-card {
    flex: 0 0 85% !important;
    min-width: 280px !important;
    height: 420px !important;
  }
  .mol-jl-latest__panel {
    width: 100% !important;
    border-radius: 0 32px 0 0 !important;
  }
}

/* =========================================================
 * VACATURE DETAIL (single `vacature` post)
 * Same tokens as jobs landing — kobalt/sunflower/ice, 1512+clamp.
 * ========================================================= */

/* ----- vac_hero ----------------------------------------- */
.mol-vd-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.mol-vd-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: #eef7ff !important;
  border-radius: 0 0 0 80px !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-vd-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) clamp(48px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: end !important;
  min-height: 660px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-vd-hero__crumb {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  opacity: 0.75 !important;
  align-self: start !important;
}

.mol-vd-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  color: #00235c !important;
}

.mol-vd-hero__crumb-link,
.mol-vd-hero__crumb-label {
  color: #00235c !important;
  text-decoration: none !important;
}

.mol-vd-hero__crumb-link:hover {
  text-decoration: underline !important;
}

.mol-vd-hero__back {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  text-decoration: none !important;
  align-self: start !important;
  margin-top: 16px !important;
  width: fit-content !important;
}

.mol-vd-hero__back-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-vd-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
  justify-self: start !important;
}

.mol-vd-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 4.5vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
  max-width: 640px !important;
}

.mol-vd-hero__meta {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

.mol-vd-hero__meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-vd-hero__meta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  color: #00235c !important;
  flex: 0 0 auto !important;
}

.mol-vd-hero__media {
  margin: 0 !important;
  border-radius: 0 65px 0 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  display: flex !important;
}

.mol-vd-hero__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
}

/* ----- vac_body ----------------------------------------- */
.mol-vd-body {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-vd-body__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: start !important;
}

.mol-vd-body__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-vd-body__intro-title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.3 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-body__intro-body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-vd-body__intro-body p {
  margin: 0 0 12px !important;
}

.mol-vd-body__intro-body p:last-child {
  margin-bottom: 0 !important;
}

.mol-vd-body__acc {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.mol-vd-body__acc-item {
  border-top: 1px solid rgba(0, 35, 92, 0.25) !important;
}

.mol-vd-body__acc-item:last-child {
  border-bottom: 1px solid rgba(0, 35, 92, 0.25) !important;
}

.mol-vd-body__acc-toggle {
  width: 100% !important;
  padding: 24px 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #00235c !important;
}

.mol-vd-body__acc-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.mol-vd-body__acc-icon span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: #00235c !important;
  border-radius: 1px !important;
}

.mol-vd-body__acc-icon span:nth-child(1) {
  width: 14px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
}

.mol-vd-body__acc-icon span:nth-child(2) {
  width: 2px !important;
  height: 14px !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 0.2s ease !important;
}

.mol-vd-body__acc-toggle[aria-expanded="true"] .mol-vd-body__acc-icon span:nth-child(2) {
  transform: translate(-50%, -50%) scaleY(0) !important;
}

.mol-vd-body__acc-panel {
  padding: 0 0 24px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-vd-body__acc-panel[hidden] {
  display: none !important;
}

.mol-vd-body__acc-panel p {
  margin: 0 0 12px !important;
}

.mol-vd-body__acc-panel p:last-child {
  margin-bottom: 0 !important;
}

.mol-vd-body__acc-panel ul,
.mol-vd-body__acc-panel ol {
  margin: 0 0 12px !important;
  padding-left: 24px !important;
}

.mol-vd-body__acc-panel li {
  margin-bottom: 8px !important;
}

/* Sidecard (kobalt gradient) */
.mol-vd-sidecard {
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 40px 0 0 !important;
  padding: 40px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: sticky !important;
  top: 120px !important;
}

.mol-vd-sidecard__avatars {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 4px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
}

.mol-vd-sidecard__avatar {
  display: inline-block !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: #d9d9d9 !important;
  margin: 0 -16px 0 0 !important;
  overflow: hidden !important;
  border: 2px solid #ffffff !important;
}

.mol-vd-sidecard__avatar:last-child {
  margin-right: 0 !important;
}

.mol-vd-sidecard__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mol-vd-sidecard__avatar--placeholder {
  background: linear-gradient(135deg, #d9d9d9, #b3c7e0) !important;
}

.mol-vd-sidecard__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-vd-sidecard__text {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-vd-sidecard__lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.mol-vd-sidecard__line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.mol-vd-sidecard__line:hover .mol-vd-sidecard__line-text {
  text-decoration: underline !important;
}

.mol-vd-sidecard__line-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  flex: 0 0 auto !important;
}

/* ----- vac_split ---------------------------------------- */
.mol-vd-split {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
}

.mol-vd-split__bg {
  position: absolute !important;
  inset: 0 !important;
  background: #eef7ff !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-vd-split__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 145px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: center !important;
}

.mol-vd-split__media {
  margin: 0 !important;
  border-radius: 0 80px 0 0 !important;
  overflow: hidden !important;
}

.mol-vd-split__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3.5 !important;
}

.mol-vd-split__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: clamp(0px, 4vw, 64px) !important;
}

.mol-vd-split__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-split__intro {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-split__acc {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mol-vd-split__acc-item {
  border-top: 1px solid rgba(0, 35, 92, 0.25) !important;
}

.mol-vd-split__acc-item:last-child {
  border-bottom: 1px solid rgba(0, 35, 92, 0.25) !important;
}

.mol-vd-split__acc-toggle {
  width: 100% !important;
  padding: 24px 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #00235c !important;
}

.mol-vd-split__acc-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.mol-vd-split__acc-icon span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: #00235c !important;
  border-radius: 1px !important;
}

.mol-vd-split__acc-icon span:nth-child(1) {
  width: 14px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
}

.mol-vd-split__acc-icon span:nth-child(2) {
  width: 2px !important;
  height: 14px !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 0.2s ease !important;
}

.mol-vd-split__acc-toggle[aria-expanded="true"] .mol-vd-split__acc-icon span:nth-child(2) {
  transform: translate(-50%, -50%) scaleY(0) !important;
}

.mol-vd-split__acc-panel {
  padding: 0 0 24px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #00235c !important;
}

.mol-vd-split__acc-panel[hidden] {
  display: none !important;
}

/* ----- vac_logos ---------------------------------------- */
.mol-vd-logos {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  border-top: 1px solid rgba(0, 35, 92, 0.15) !important;
}

.mol-vd-logos__bg {
  position: absolute !important;
  inset: 0 !important;
  background: #eef7ff !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-vd-logos__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 64px clamp(24px, 6vw, 96px) !important;
}

.mol-vd-logos__track {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(32px, 5vw, 88px) !important;
}

.mol-vd-logos__item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mol-vd-logos__item img {
  max-height: 42px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  filter: grayscale(100%) !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s ease !important;
}

.mol-vd-logos__item img:hover {
  opacity: 1 !important;
}

/* ----- vac_process -------------------------------------- */
.mol-vd-process {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-vd-process__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.mol-vd-process__header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
}

.mol-vd-process__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
  grid-column: 1 !important;
}

/* Q1: optional small intro line under the process title (default copy
   "Hoe ziet onze sollicitatieprocedure eruit? ..."). */
.mol-vd-process__intro {
  margin: 8px 0 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(0, 35, 92, 0.85) !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* Q1: optional footnote under the steps grid. */
.mol-vd-process__footnote {
  margin: clamp(24px, 3vw, 40px) 0 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(0, 35, 92, 0.7) !important;
  font-style: italic !important;
}

.mol-vd-process__nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #00235c !important;
  flex: 0 0 auto !important;
}

.mol-vd-process__nav-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}

.mol-vd-process__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.mol-vd-process__card {
  background: #eef7ff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mol-vd-process__card-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #00235c !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
}

.mol-vd-process__card-title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  line-height: 1.2 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-process__card-body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

/* ----- vac_midcta --------------------------------------- */
.mol-vd-midcta {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.mol-vd-midcta__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  z-index: -2 !important;
  display: block !important;
}

/* Decorative ellipse (Figma 931x931, rotate -30deg, offset left) */
.mol-vd-midcta__orb {
  position: absolute !important;
  width: 931px !important;
  height: 931px !important;
  left: calc(50% - 1132px) !important;
  top: calc(50% - 410px) !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  transform: rotate(-30deg) !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
}

.mol-vd-midcta__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 145px) clamp(24px, 6vw, 96px) clamp(48px, 7vw, 120px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: center !important;
}

/* White card with rounded TR 80 */
.mol-vd-midcta__card {
  width: 100% !important;
  max-width: 1096px !important;
  background: #ffffff !important;
  border-radius: 0 80px 0 0 !important;
  padding: 40px 48px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(24px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}

.mol-vd-midcta__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mol-vd-midcta__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-midcta__text {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  margin: 0 !important;
}

/* Yellow square primary button (Figma 175x175, rounded TR 40) */
.mol-vd-midcta__primary {
  flex: 0 0 auto !important;
  width: 175px !important;
  height: 175px !important;
  background: #f9b638 !important;
  border-radius: 0 40px 0 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.mol-vd-midcta__primary:hover,
.mol-vd-midcta__primary:focus-visible {
  background: #e3a52e !important;
}

.mol-vd-midcta__primary-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-vd-midcta__primary-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.mol-vd-midcta__primary-label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* Italic footnote on kobalt bg below the card */
.mol-vd-midcta__footnote {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  opacity: 0.75 !important;
  margin: 16px 0 0 !important;
  width: 100% !important;
  max-width: 1096px !important;
  text-align: left !important;
}

/* ----- vac_related -------------------------------------- */
.mol-vd-related {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(48px, 7vw, 120px) 0 !important;
}

.mol-vd-related__bg {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: max(70%, calc(50% + 324px)) !important;
  background: #eef7ff !important;
  border-radius: 0 80px 0 0 !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-vd-related__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.mol-vd-related__header {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mol-vd-related__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-related__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-vd-related__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.mol-vd-related__nav {
  display: inline-flex !important;
  gap: 8px !important;
}

.mol-vd-related__nav-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: transparent !important;
  color: #00235c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.mol-vd-related__nav-btn--filled {
  background: #00235c !important;
  color: #ffffff !important;
  border-color: #00235c !important;
}

.mol-vd-related__nav-btn:hover {
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-vd-related__track {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
}

.mol-vd-related__track::-webkit-scrollbar {
  display: none !important;
}

/* ----- responsive --------------------------------------- */
@media (max-width: 899px) {
  .mol-vd-hero__inner {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .mol-vd-hero__media {
    border-radius: 0 32px 0 0 !important;
  }
  .mol-vd-body__inner,
  .mol-vd-split__inner {
    grid-template-columns: 1fr !important;
  }
  .mol-vd-midcta__card {
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 0 40px 0 0 !important;
    padding: 32px !important;
  }
  .mol-vd-midcta__primary {
    width: 100% !important;
    height: auto !important;
    min-height: 140px !important;
    border-radius: 0 24px 0 0 !important;
  }
  .mol-vd-sidecard {
    position: relative !important;
    top: auto !important;
  }
  .mol-vd-midcta__primary {
    justify-self: start !important;
  }
  .mol-vd-related__bg {
    width: 100% !important;
    border-radius: 0 32px 0 0 !important;
  }
}

/* =========================================================
 * CONTACT PAGE (page id 1317) — namespace mol-pc-*
 * ========================================================= */

/* ----- contact_hero ------------------------------------- */
.mol-pc-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-pc-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 0 0 80px !important;
  z-index: -2 !important;
  display: block !important;
}

.mol-pc-hero__orb {
  position: absolute !important;
  width: 836px !important;
  height: 836px !important;
  left: calc(50% + 100px) !important;
  top: -8px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  transform: rotate(-60deg) !important;
  opacity: 0.85 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
}

.mol-pc-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) clamp(48px, 6vw, 96px) !important;
  min-height: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-pc-hero__crumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.mol-pc-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
}

.mol-pc-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 756px !important;
  margin-top: clamp(24px, 5vw, 80px) !important;
}

.mol-pc-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-pc-hero__intro {
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  max-width: 648px !important;
}

.mol-pc-hero__intro p {
  margin: 0 0 8px !important;
  color: inherit !important;
}

.mol-pc-hero__intro p:last-child {
  margin-bottom: 0 !important;
}

.mol-pc-hero__expert {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 80px) !important;
  margin-top: auto !important;
  color: #ffffff !important;
}

.mol-pc-hero__avatars {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 4px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  box-shadow: 0 5.76px 43.2px rgba(66, 76, 150, 0.05) !important;
}

.mol-pc-hero__avatar {
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: #d9d9d9 !important;
  margin-right: -16px !important;
  overflow: hidden !important;
  border: 2px solid #ffffff !important;
}

.mol-pc-hero__avatar:last-child {
  margin-right: 0 !important;
}

.mol-pc-hero__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mol-pc-hero__expert-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.mol-pc-hero__expert-label {
  margin: 0 !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-pc-hero__expert-lines {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.mol-pc-hero__expert-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.mol-pc-hero__expert-line:hover span:last-child {
  text-decoration: underline !important;
}

.mol-pc-hero__expert-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
}

.mol-pc-hero__expert-office {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mol-pc-hero__expert-office-label {
  margin: 0 !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-pc-hero__expert-office-addr {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

/* ----- thanks_hero (/thank-you/) ------------------------ */
.mol-pc-thanks {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.mol-pc-thanks__bg {
  position: absolute !important;
  inset: 0 !important;
  background: #eef7ff !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-pc-thanks__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) clamp(64px, 8vw, 120px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  min-height: 380px !important;
}

.mol-pc-thanks__crumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  opacity: 0.75 !important;
}

.mol-pc-thanks__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
}

.mol-pc-thanks__crumb-link,
.mol-pc-thanks__crumb-label {
  color: #00235c !important;
  text-decoration: none !important;
}

.mol-pc-thanks__crumb-link:hover {
  text-decoration: underline !important;
}

.mol-pc-thanks__back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: #00235c !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  margin-top: 16px !important;
}

.mol-pc-thanks__back-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #00235c !important;
  color: #ffffff !important;
}

.mol-pc-thanks__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 720px !important;
  margin-top: 8px !important;
}

.mol-pc-thanks__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pc-thanks__body {
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-pc-thanks__body p {
  margin: 0 0 12px !important;
}

.mol-pc-thanks__body p:last-child {
  margin-bottom: 0 !important;
}

/* ----- contact_form ------------------------------------- */
.mol-pc-form {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-pc-form__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 96px) clamp(72px, 10vw, 145px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: start !important;
}

.mol-pc-form__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  padding-right: clamp(0px, 4vw, 64px) !important;
}

.mol-pc-form__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pc-form__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pc-form__intro {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pc-form__alt-label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #00235c !important;
  opacity: 0.8 !important;
  margin: 0 !important;
}

/* Ice card hosting the form */
.mol-pc-form__card {
  background: #eef7ff !important;
  border-radius: 0 80px 0 0 !important;
  padding: 48px !important;
  box-sizing: border-box !important;
}

.mol-pc-form__embed {
  width: 100% !important;
}

/* Visual form shell */
.mol-pc-form__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-pc-form__row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
}

.mol-pc-form__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.mol-pc-form__field--full {
  grid-column: 1 / -1 !important;
}

.mol-pc-form__label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-pc-form__input {
  position: relative !important;
  display: block !important;
}

.mol-pc-form__input input,
.mol-pc-form__input select,
.mol-pc-form__input textarea {
  width: 100% !important;
  height: 51px !important;
  padding: 8px 56px 8px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.35) !important;
  border-radius: 0 999px 999px 0 !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.mol-pc-form__input--textarea textarea {
  height: 150px !important;
  border-radius: 0 !important;
  padding: 16px 24px !important;
  resize: vertical !important;
}

.mol-pc-form__input input::placeholder,
.mol-pc-form__input textarea::placeholder {
  color: #00235c !important;
  opacity: 0.5 !important;
}

.mol-pc-form__input input:focus,
.mol-pc-form__input select:focus,
.mol-pc-form__input textarea:focus {
  outline: 2px solid #00235c !important;
  outline-offset: 2px !important;
}

/* Trailing icon circle (kobalt for inputs, sunflower for selects) */
.mol-pc-form__icon {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 35px !important;
  height: 35px !important;
  border-radius: 999px !important;
  background: #00235c !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.mol-pc-form__icon--accent {
  background: #f9b638 !important;
  color: #00235c !important;
}

.mol-pc-form__divider {
  border: 0 !important;
  border-top: 1px solid rgba(0, 35, 92, 0.25) !important;
  margin: 0 !important;
}

.mol-pc-form__consent {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-pc-form__consent input[type="checkbox"] {
  width: 21px !important;
  height: 21px !important;
  margin-top: 2px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid #00235c !important;
  background: #eef7ff !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  position: relative !important;
}

.mol-pc-form__consent input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 8px !important;
  height: 12px !important;
  border: solid #00235c !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.mol-pc-form__consent a {
  color: #00235c !important;
  text-decoration: underline !important;
}

.mol-pc-form__submit {
  align-self: flex-start !important;
}

.mol-pc-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.mol-pc-form__notice {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

.mol-pc-form__notice strong {
  font-weight: 600 !important;
}

.mol-pc-form__notice--success {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #065f46 !important;
}

.mol-pc-form__notice--error {
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  color: #991b1b !important;
}

/* ----- contact_offices ---------------------------------- */
.mol-pc-offices {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(48px, 7vw, 145px) 0 !important;
}

/* Warehousing 'Our warehouses': white section base so it no longer blends
   with the page's ice background; the light-blue __bg panel stays as the
   accent overlay (Amarildo). Scoped to the warehouses section only. */
#mol-pc-offices-warehouses {
  background: #ffffff !important;
}

.mol-pc-offices__bg {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: max(70%, calc(50% + 324px)) !important;
  background: #eef7ff !important;
  border-radius: 0 80px 0 0 !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-pc-offices__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.mol-pc-offices__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pc-offices__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.mol-pc-offices__nav {
  display: inline-flex !important;
  gap: 8px !important;
}

.mol-pc-offices__nav-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: transparent !important;
  color: #00235c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.mol-pc-offices__nav-btn--filled {
  background: #00235c !important;
  color: #ffffff !important;
  border-color: #00235c !important;
}

.mol-pc-offices__track {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
}

.mol-pc-offices__track::-webkit-scrollbar {
  display: none !important;
}

/* Office card */
.mol-pc-office {
  flex: 0 0 calc((100% - 72px) / 4) !important;
  min-width: 320px !important;
  max-width: 349px !important;
  height: 470px !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  box-shadow: 4px 4px 50px rgba(1, 53, 141, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  position: relative !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.mol-pc-office__photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  background-color: #102a52 !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Make the whole office card a link to its detail page, while keeping the
   inner mailto:/tel: links clickable (they sit above the stretched overlay). */
.mol-pc-office__link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}
.mol-pc-office--linked a:not(.mol-pc-office__link) {
  position: relative !important;
  z-index: 2 !important;
}
.mol-pc-office--linked {
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.mol-pc-office--linked:hover {
  transform: translateY(-3px) !important;
  box-shadow: 6px 10px 50px rgba(1, 53, 141, 0.18) !important;
}

.mol-pc-office__body {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 16px 24px 24px !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-pc-office__head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-pc-office__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pc-office__company {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

.mol-pc-office__lines {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mol-pc-office__line {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 6px !important;
  align-items: start !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-pc-office__line-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #00235c !important;
  margin-top: 2px !important;
}

.mol-pc-office__line-text {
  color: #00235c !important;
  text-decoration: none !important;
}

a.mol-pc-office__line-text:hover {
  text-decoration: underline !important;
}

.mol-pc-office__legal {
  list-style: none !important;
  padding: 12px 0 0 !important;
  margin: 4px 0 0 !important;
  border-top: 1px solid rgba(0, 35, 92, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-pc-office__legal li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #00235c !important;
  opacity: 0.85 !important;
}

.mol-pc-office__legal-icon {
  width: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile */
@media (max-width: 899px) {
  .mol-pc-form__inner {
    grid-template-columns: 1fr !important;
  }
  .mol-pc-form__card {
    padding: 32px !important;
    border-radius: 0 32px 0 0 !important;
  }
  .mol-pc-form__row {
    grid-template-columns: 1fr !important;
  }
  .mol-pc-offices__bg {
    width: 100% !important;
    border-radius: 0 32px 0 0 !important;
  }
  .mol-pc-office {
    flex: 0 0 85% !important;
    height: 420px !important;
  }
}

/* =========================================================
 * OUR SPECIALISTS (page id 1168) — namespace mol-ps-*
 * ========================================================= */

/* ----- specialists_hero --------------------------------- */
.mol-ps-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-ps-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 0 0 80px !important;
  z-index: -2 !important;
  display: block !important;
}

.mol-ps-hero__orb {
  position: absolute !important;
  width: 836px !important;
  height: 836px !important;
  left: calc(50% + 100px) !important;
  top: -8px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  transform: rotate(-60deg) !important;
  opacity: 0.85 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
}

.mol-ps-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
  min-height: 660px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-ps-hero__crumb {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  align-self: start !important;
}

.mol-ps-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
}

.mol-ps-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
  max-width: 637px !important;
}

.mol-ps-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-ps-hero__intro {
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-ps-hero__intro p {
  margin: 0 0 8px !important;
  color: inherit !important;
}

.mol-ps-hero__intro p:last-child { margin-bottom: 0 !important; }

.mol-ps-hero__media {
  margin: 0 !important;
  border-radius: 0 65px 0 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  display: flex !important;
}

.mol-ps-hero__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
}

/* ----- specialists_intro -------------------------------- */
.mol-ps-intro {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
}

.mol-ps-intro__bg {
  position: absolute !important;
  inset: 0 !important;
  background: #eef7ff !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-ps-intro__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 145px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: center !important;
}

/* Photo collage — 3 columns of varying-height thumbs.
   minmax(0, 1fr) so the cols can shrink below their intrinsic content
   size; without it the implicit min-width: auto on grid items caused
   a ~20px overflow on a 412px viewport. */
.mol-ps-intro__collage {
  display: grid !important;
  /* Middencol iets groter dan zijkolommen — visuele focus zonder
     dat de zijkolommen klein worden. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
  width: 100% !important;
  /* Op desktop volledig uitvullen, capped op ~800 zodat foto's niet
     onevenredig groot worden. */
  max-width: 800px !important;
  min-width: 0 !important;
  align-items: center !important;
}

.mol-ps-intro__col {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
  align-self: start !important; /* niet uitrekken naar hoogte tallest col */
}

/* Geen asymmetrische offsets meer — alle kolommen starten op dezelfde
   hoogte, alle thumbs strikt vierkant, geen 1/2 portret-trick. */
.mol-ps-intro__col--1,
.mol-ps-intro__col--2,
.mol-ps-intro__col--3 {
  grid-template-rows: auto !important;
  padding-top: 0 !important;
}

.mol-ps-intro__thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background-color: #d6e5f4 !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 16px !important;
  aspect-ratio: 4 / 5 !important; /* corporate-portret ratio, niet vierkant */
  flex-shrink: 0 !important;
}

.mol-ps-intro__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
  padding: clamp(0px, 2vw, 32px) clamp(0px, 4vw, 64px) !important;
}

.mol-ps-intro__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-ps-intro__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-ps-intro__body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-ps-intro__body p { margin: 0 0 12px !important; }
.mol-ps-intro__body p:last-child { margin-bottom: 0 !important; }

/* ----- specialists_team --------------------------------- */
.mol-ps-team {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-ps-team__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 145px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.mol-ps-team__header {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-ps-team__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-ps-team__intro {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  max-width: 720px !important;
  margin: 0 !important;
}

/* Filter pills row — fixed-width tabs, ~5 per row at 1320px */
.mol-ps-team__filter {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(0, 264px)) !important;
  justify-content: start !important;
  gap: 0 !important;
  border-bottom: 1px solid rgba(0, 35, 92, 0.2) !important;
}

.mol-ps-team__pill {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 32px 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(0, 35, 92, 0.15) !important;
  border-bottom: 2px solid transparent !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #00235c !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background 0.2s ease !important;
}

.mol-ps-team__pill:last-child {
  border-right: 0 !important;
}

.mol-ps-team__pill.is-active {
  background: linear-gradient(180deg, rgba(1, 53, 141, 0) 0%, rgba(1, 53, 141, 0.06) 100%) !important;
  border-bottom-color: #00235c !important;
}

.mol-ps-team__pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: transparent !important;
  color: #00235c !important;
}

.mol-ps-team__pill.is-active .mol-ps-team__pill-icon {
  background: #f9b638 !important;
  border-color: #f9b638 !important;
}

.mol-ps-team__pill-label {
  text-align: center !important;
  line-height: 1.3 !important;
  /* Amarildo 2026-06-09: department-labels 18px (de 18px hoorde HIER, niet
     op de H2 "Connect with our regional experts"). */
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Card grid */
.mol-ps-team__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}

.mol-ps-card {
  position: relative !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  box-shadow: 4px 4px 50px rgba(1, 53, 141, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  height: 470px !important;
  box-sizing: border-box !important;
}

.mol-ps-card__photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  background-color: #102a52 !important;
  background-size: cover !important;
  background-position: center !important;
}

.mol-ps-card__body {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 16px 24px 24px !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-ps-card__head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-ps-card__name {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-ps-card__role {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  opacity: 0.75 !important;
  margin: 0 !important;
}

.mol-ps-card__lines {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-ps-card__line {
  display: grid !important;
  grid-template-columns: 16px 1fr !important;
  gap: 4px !important;
  align-items: center !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-ps-card__line-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #00235c !important;
}

.mol-ps-card__line-text {
  color: #00235c !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

a.mol-ps-card__line-text:hover { text-decoration: underline !important; }

/* Mobile */
@media (max-width: 899px) {
  .mol-ps-hero__inner {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .mol-ps-hero__media {
    border-radius: 0 32px 0 0 !important;
  }
  .mol-ps-intro__inner {
    grid-template-columns: 1fr !important;
  }
  .mol-ps-intro__copy {
    padding: 0 !important;
  }
  .mol-ps-team__filter {
    grid-template-columns: 1fr 1fr !important;
  }
  .mol-ps-team__pill {
    padding: 20px 16px !important;
    font-size: 18px !important;
    border-right: 1px solid rgba(0, 35, 92, 0.15) !important;
  }
  .mol-ps-team__pill:nth-child(2n) {
    border-right: 0 !important;
  }
  .mol-ps-card {
    height: 420px !important;
  }
}

/* =========================================================
 * FLEXIBLE PAGE TEMPLATE V2 (sustainability-policy, etc.)
 * Namespace mol-pf-* and mol-pf-bb-* (body blocks).
 * ========================================================= */

/* ----- flex_hero ---------------------------------------- */
.mol-pf-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-pf-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 0 0 80px !important;
  z-index: -2 !important;
  display: block !important;
}

.mol-pf-hero__orb {
  position: absolute !important;
  width: 836px !important;
  height: 836px !important;
  left: calc(50% + 100px) !important;
  top: -8px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  transform: rotate(-60deg) !important;
  opacity: 0.85 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
}

/* Thin white line tracing the inside of the hero with a rounded top-right
 * corner — mirrors .mol-page-hero__inset on the about-page hero so the
 * flexible-page hero (sustainability etc.) gets the same detail. */
.mol-pf-hero__inset {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  left: clamp(24px, 6vw, 96px) !important;
  right: clamp(24px, 6vw, 96px) !important;
  top: clamp(56px, 7vw, 96px) !important;
  bottom: clamp(56px, 7vw, 96px) !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-top-right-radius: 65px !important;
  background: transparent !important;
  display: block !important;
}

@media (max-width: 860px) {
  .mol-pf-hero__inset { display: none !important; }
}

.mol-pf-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
  min-height: 540px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-pf-hero__crumb {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  align-self: start !important;
}

.mol-pf-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
}

.mol-pf-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  max-width: 637px !important;
}

.mol-pf-hero__eyebrow {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.mol-pf-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-pf-hero__intro {
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin-top: 8px !important;
}

.mol-pf-hero__intro p { margin: 0 0 8px !important; color: inherit !important; }
.mol-pf-hero__intro p:last-child { margin-bottom: 0 !important; }

.mol-pf-hero__media {
  margin: 0 !important;
  border-radius: 0 65px 0 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  display: flex !important;
}

.mol-pf-hero__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
}

/* ----- flex_intro --------------------------------------- */
.mol-pf-intro {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-pf-intro__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 96px) !important;
}

.mol-pf-intro__body {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.4 !important;
  color: #00235c !important;
  max-width: 984px !important;
}

.mol-pf-intro__body p { margin: 0 0 16px !important; color: inherit !important; }
.mol-pf-intro__body p:last-child { margin-bottom: 0 !important; }

/* ----- flex_blocks: shared body-block container --------- */
.mol-pf-bb {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-pf-bb:nth-child(odd) {
  background: #f6fbff !important;
}

.mol-pf-bb__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px) !important;
}

.mol-pf-bb__heading {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.15 !important;
  color: #00235c !important;
  margin: 0 0 16px !important;
}

.mol-pf-bb__intro {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  margin: 0 0 32px !important;
  max-width: 720px !important;
}

.mol-pf-bb__body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
  max-width: 800px !important;
}

.mol-pf-bb__body p { margin: 0 0 12px !important; }
.mol-pf-bb__body p:last-child { margin-bottom: 0 !important; }
.mol-pf-bb__body h3 {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #00235c !important;
  margin: 24px 0 12px !important;
}
.mol-pf-bb__body ul, .mol-pf-bb__body ol { margin: 0 0 12px !important; padding-left: 24px !important; }
.mol-pf-bb__body li { margin-bottom: 6px !important; }

/* ----- block: pillars / values grid --------------------- */
.mol-pf-pillars {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.mol-pf-pillar {
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.1) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mol-pf-pillar__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
}

.mol-pf-pillar__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-pillar__body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

/* ----- block: stats row --------------------------------- */
.mol-pf-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 24px !important;
}

.mol-pf-stat {
  background: linear-gradient(103.65deg, #299fda -23.53%, #00235c 80%) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

.mol-pf-stat__number {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.mol-pf-stat__label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ----- block: accordion --------------------------------- */
.mol-pf-acc {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(0, 35, 92, 0.2) !important;
}

.mol-pf-acc__item {
  border-bottom: 1px solid rgba(0, 35, 92, 0.2) !important;
}

.mol-pf-acc__toggle {
  width: 100% !important;
  padding: 24px 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #00235c !important;
}

.mol-pf-acc__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.mol-pf-acc__icon span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: #00235c !important;
  border-radius: 1px !important;
}

.mol-pf-acc__icon span:nth-child(1) {
  width: 14px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
}

.mol-pf-acc__icon span:nth-child(2) {
  width: 2px !important;
  height: 14px !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 0.2s ease !important;
}

.mol-pf-acc__toggle[aria-expanded="true"] .mol-pf-acc__icon span:nth-child(2) {
  transform: translate(-50%, -50%) scaleY(0) !important;
}

.mol-pf-acc__panel {
  padding: 0 0 24px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
}

.mol-pf-acc__panel[hidden] { display: none !important; }
.mol-pf-acc__panel p { margin: 0 0 12px !important; }
.mol-pf-acc__panel p:last-child { margin-bottom: 0 !important; }
.mol-pf-acc__panel ul, .mol-pf-acc__panel ol { margin: 0 0 12px !important; padding-left: 24px !important; }

/* ----- block: callout ----------------------------------- */
.mol-pf-callout {
  border-radius: 16px !important;
  padding: 24px 32px !important;
  border-left: 4px solid #00235c !important;
}

.mol-pf-callout--info { background: #eef7ff !important; border-left-color: #105697 !important; }
.mol-pf-callout--warning { background: #fff7e6 !important; border-left-color: #f9b638 !important; }
.mol-pf-callout--success { background: #e6f7ee !important; border-left-color: #047857 !important; }

.mol-pf-callout__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  color: #00235c !important;
  margin: 0 0 8px !important;
}

.mol-pf-callout__body {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
}

.mol-pf-callout__body p { margin: 0 0 8px !important; }
.mol-pf-callout__body p:last-child { margin-bottom: 0 !important; }

/* ----- block: downloads --------------------------------- */
.mol-pf-dl {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}

.mol-pf-dl__link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 92, 0.15) !important;
  border-radius: 12px !important;
  color: #00235c !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
}

.mol-pf-dl__link:hover {
  border-color: #00235c !important;
  background: #eef7ff !important;
}

.mol-pf-dl__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  flex: 0 0 auto !important;
}

.mol-pf-dl__label { flex: 1 1 auto !important; font-weight: 500 !important; }
.mol-pf-dl__size { font-size: 12px !important; color: #00235c !important; opacity: 0.6 !important; }

/* ----- block: image + text ------------------------------ */
.mol-pf-imgtxt {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: center !important;
}

.mol-pf-imgtxt--left .mol-pf-imgtxt__media { order: 0 !important; }
.mol-pf-imgtxt--left .mol-pf-imgtxt__copy { order: 1 !important; }
.mol-pf-imgtxt--right .mol-pf-imgtxt__media { order: 1 !important; }
.mol-pf-imgtxt--right .mol-pf-imgtxt__copy { order: 0 !important; }

.mol-pf-imgtxt__media {
  margin: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.mol-pf-imgtxt__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
}

/* ----- block: FAQ --------------------------------------- */
.mol-pf-faq {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: start !important;
}

.mol-pf-faq__side {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  position: sticky !important;
  top: 120px !important;
}

.mol-pf-faq__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-faq__heading {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 36px) !important;
  line-height: 1.2 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-faq__media {
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  width: 100% !important;
}

.mol-pf-faq__media img {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.mol-pf-faq__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(0, 35, 92, 0.2) !important;
}

.mol-pf-faq__item { border-bottom: 1px solid rgba(0, 35, 92, 0.2) !important; }

.mol-pf-faq__toggle {
  width: 100% !important;
  padding: 20px 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #00235c !important;
}

.mol-pf-faq__icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.mol-pf-faq__icon span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: #00235c !important;
}

.mol-pf-faq__icon span:nth-child(1) { width: 12px !important; height: 2px !important; transform: translate(-50%, -50%) !important; }
.mol-pf-faq__icon span:nth-child(2) { width: 2px !important; height: 12px !important; transform: translate(-50%, -50%) !important; transition: transform 0.2s ease !important; }
.mol-pf-faq__toggle[aria-expanded="true"] .mol-pf-faq__icon span:nth-child(2) { transform: translate(-50%, -50%) scaleY(0) !important; }

.mol-pf-faq__panel {
  padding: 0 0 20px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #00235c !important;
  opacity: 0.9 !important;
}

.mol-pf-faq__panel[hidden] { display: none !important; }
.mol-pf-faq__answer p { margin: 0 0 8px !important; }
.mol-pf-faq__more {
  display: inline-block !important;
  margin-top: 8px !important;
  color: #00235c !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
}

/* ----- block: cta_card ---------------------------------- */
.mol-pf-ctacard {
  background: linear-gradient(103.65deg, #299fda -23.53%, #00235c 80%) !important;
  border-radius: 24px !important;
  padding: clamp(32px, 5vw, 64px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: center !important;
  color: #ffffff !important;
}

.mol-pf-ctacard__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-pf-ctacard__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-pf-ctacard__text {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.mol-pf-ctacard__actions {
  display: inline-flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.mol-pf-ctacard__primary {
  background: #f9b638 !important;
  color: #00235c !important;
  border-color: #f9b638 !important;
}

.mol-pf-ctacard__primary:hover,
.mol-pf-ctacard__primary:focus-visible {
  background: #e3a52e !important;
  color: #00235c !important;
  border-color: #e3a52e !important;
}

.mol-pf-ctacard__primary .mol-cta-btn__icon { background: #ffffff !important; }

/* Mobile */
@media (max-width: 899px) {
  .mol-pf-hero__inner { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mol-pf-hero__media { border-radius: 0 32px 0 0 !important; }
  .mol-pf-imgtxt { grid-template-columns: 1fr !important; }
  .mol-pf-imgtxt--left .mol-pf-imgtxt__media,
  .mol-pf-imgtxt--right .mol-pf-imgtxt__media { order: -1 !important; }
  .mol-pf-faq { grid-template-columns: 1fr !important; }
  .mol-pf-faq__side { position: relative !important; top: auto !important; }
  .mol-pf-ctacard { grid-template-columns: 1fr !important; }
}

/* =========================================================
 * FLEX BLOCKS (extra layouts)
 * accordion_card, quote_card, split_check, insights_swiper
 * ========================================================= */

/* ----- accordion_card ----------------------------------- */
.mol-pf-acccard {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: start !important;
}

.mol-pf-acccard__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.mol-pf-acccard__side {
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 40px 0 0 !important;
  padding: 40px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  position: sticky !important;
  top: 120px !important;
}

.mol-pf-acccard__avatars {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 4px !important;
  border-radius: 999px !important;
  width: fit-content !important;
}

.mol-pf-acccard__avatar {
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  margin-right: -12px !important;
  overflow: hidden !important;
  border: 2px solid #ffffff !important;
  background: #d6e5f4 !important;
}

.mol-pf-acccard__avatar:last-child { margin-right: 0 !important; }

.mol-pf-acccard__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mol-pf-acccard__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 2.2vw, 24px) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-pf-acccard__text {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

/* ----- mission (about page) ----------------------------- */
.mol-mission {
  background: #eef7ff !important;
  padding: clamp(72px, 9vw, 120px) clamp(24px, 6vw, 96px) !important;
}
.mol-mission__inner {
  position: relative !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 80px 0 0 !important;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}
.mol-mission__mark {
  display: block !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: clamp(96px, 12vw, 144px) !important;
  line-height: 0.6 !important;
  color: #f9b638 !important;
  margin: 0 0 12px !important;
}
.mol-mission__text {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 0 32px !important;
  max-width: 968px !important;
}
.mol-mission__author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.mol-mission__avatar {
  display: inline-flex !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.mol-mission__avatar img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
.mol-mission__author-text {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
}
.mol-mission__name {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important; font-weight: 600 !important; color: #ffffff !important;
}
.mol-mission__role {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important; color: rgba(255, 255, 255, 0.75) !important;
}

/* ----- quote_card --------------------------------------- */
.mol-pf-bb--quote { background: #eef7ff !important; }
.mol-pf-bb--quote .mol-pf-bb__inner { padding: clamp(56px, 8vw, 100px) clamp(24px, 6vw, 208px) !important; }

.mol-pf-quote {
  position: relative !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 80px 0 0 !important;
  padding: clamp(32px, 5vw, 64px) !important;
  color: #ffffff !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.mol-pf-quote__orb {
  position: absolute !important;
  width: 446px !important;
  height: 446px !important;
  right: -100px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(60deg) !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.mol-pf-quote__text {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 0 32px !important;
  max-width: 968px !important;
}

.mol-pf-quote__author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.mol-pf-quote__avatar {
  display: inline-flex !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

.mol-pf-quote__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mol-pf-quote__author-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mol-pf-quote__author-name {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.mol-pf-quote__author-role {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ----- split_check (image + checkmark list + accordion) -- */
.mol-pf-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: center !important;
}

.mol-pf-split--left .mol-pf-split__media { order: 0 !important; }
.mol-pf-split--right .mol-pf-split__media { order: 1 !important; }

.mol-pf-split__media {
  margin: 0 !important;
  border-radius: 0 80px 0 0 !important;
  overflow: hidden !important;
}

.mol-pf-split__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3.5 !important;
}

.mol-pf-split__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  padding: clamp(0px, 4vw, 64px) !important;
}

.mol-pf-split__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-split__heading {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-split__intro {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-split__bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mol-pf-split__bullet {
  display: grid !important;
  grid-template-columns: 20px 1fr !important;
  gap: 8px !important;
  align-items: start !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}

.mol-pf-split__bullet-icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #00235c !important;
  margin-top: 4px !important;
}

.mol-pf-bb__inner--tight {
  padding-top: 0 !important;
}

/* ----- insights_swiper ---------------------------------- */
.mol-pf-bb--insights {
  position: relative !important;
  background: #ffffff !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(48px, 7vw, 120px) 0 !important;
}

.mol-pf-insights__bg {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: max(70%, calc(50% + 324px)) !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 80px 0 0 !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-pf-insights__orb {
  position: absolute !important;
  width: 1210px !important;
  height: 1210px !important;
  left: -555px !important;
  top: -160px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  transform: rotate(-30deg) !important;
  opacity: 0.5 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  display: block !important;
}

.mol-pf-insights {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  color: #ffffff !important;
}

.mol-pf-insights__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-pf-insights__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.mol-pf-insights__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 8px 16px 8px 20px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
}

.mol-pf-insights__pill-icon {
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  align-items: center !important;
  justify-content: center !important;
}

.mol-pf-insights__nav {
  display: inline-flex !important;
  gap: 8px !important;
}

.mol-pf-insights__nav-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.mol-pf-insights__nav-btn--filled {
  background: #ffffff !important;
  color: #00235c !important;
  border-color: #ffffff !important;
}

.mol-pf-insights__track {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
}

.mol-pf-insights__track::-webkit-scrollbar { display: none !important; }

.mol-pf-insights__card {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  min-width: 280px !important;
  max-width: 360px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  scroll-snap-align: start !important;
  display: flex !important;
  flex-direction: column !important;
}

.mol-pf-insights__photo {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  background-color: #d6e5f4 !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}

.mol-pf-insights__cat {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

.mol-pf-insights__body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
}

.mol-pf-insights__card-title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pf-insights__excerpt {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #00235c !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

.mol-pf-insights__meta {
  display: flex !important;
  gap: 8px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #00235c !important;
  opacity: 0.7 !important;
  margin-top: auto !important;
}

@media (max-width: 899px) {
  .mol-pf-acccard { grid-template-columns: 1fr !important; }
  .mol-pf-acccard__side { position: relative !important; top: auto !important; }
  .mol-pf-split { grid-template-columns: 1fr !important; }
  .mol-pf-split--right .mol-pf-split__media { order: -1 !important; }
  .mol-pf-split__media { border-radius: 0 32px 0 0 !important; }
  .mol-pf-quote { border-radius: 0 32px 0 0 !important; }
  .mol-pf-insights__bg { width: 100% !important; border-radius: 0 32px 0 0 !important; }
  .mol-pf-insights__card { flex: 0 0 85% !important; }
}

/* =========================================================
 * QUOTE PAGE (page id 1980) — namespace mol-pq-*
 * ========================================================= */

.mol-pq-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-pq-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 0 0 80px !important;
  z-index: -2 !important;
  display: block !important;
}

.mol-pq-hero__orb {
  position: absolute !important;
  width: 836px !important;
  height: 836px !important;
  left: calc(50% + 100px) !important;
  top: -8px !important;
  background: linear-gradient(180deg, #115999 0%, #248fcb 100%) !important;
  border-radius: 50% !important;
  transform: rotate(-60deg) !important;
  opacity: 0.85 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
}

.mol-pq-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  min-height: 480px !important;
}

.mol-pq-hero__crumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.mol-pq-hero__crumb-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
}

.mol-pq-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
  max-width: 720px !important;
  margin-top: auto !important;
}

.mol-pq-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-pq-hero__intro {
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-pq-hero__intro p { margin: 0 0 8px !important; color: inherit !important; }
.mol-pq-hero__intro p:last-child { margin-bottom: 0 !important; }

/* Reuse contact form structure: same 2-col + ice card */
.mol-pq-form {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-pq-form__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 96px) clamp(72px, 10vw, 145px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: start !important;
}

.mol-pq-form__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
  padding-right: clamp(0px, 4vw, 64px) !important;
}

.mol-pq-form__eyebrow {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pq-form__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pq-form__intro,
.mol-pq-form__alt-label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  margin: 0 !important;
}

.mol-pq-form__alt-label { font-size: 14px !important; opacity: 0.8 !important; }

.mol-pq-form__card {
  background: #eef7ff !important;
  border-radius: 0 80px 0 0 !important;
  padding: 48px !important;
  box-sizing: border-box !important;
}

@media (max-width: 899px) {
  .mol-pq-form__inner { grid-template-columns: 1fr !important; }
  .mol-pq-form__card { padding: 32px !important; border-radius: 0 32px 0 0 !important; }
}

/* =========================================================
 * OFFICE DETAIL (single office post) — namespace mol-of-*
 * ========================================================= */

.mol-of-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-of-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 0 0 80px !important;
  z-index: -1 !important;
  display: block !important;
}

/* Decorative L-shape outline that frames the hero like the page-hero design
   on other detail pages. Hugs the top-right rounded corner of the image. */
.mol-of-hero__inset {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  /* Start below the breadcrumb instead of colliding with it. */
  top: clamp(72px, 8vw, 120px) !important;
  right: clamp(24px, 6vw, 96px) !important;
  bottom: clamp(48px, 6vw, 96px) !important;
  left: clamp(24px, 6vw, 96px) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-top-right-radius: 65px !important;
  background: transparent !important;
  display: block !important;
}

.mol-of-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  /* Smaller top padding so the breadcrumb sits above the inset line frame. */
  padding: clamp(32px, 4vw, 64px) clamp(24px, 6vw, 96px) clamp(48px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: center !important;
  min-height: 540px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-of-hero__crumb {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  align-self: start !important;
}

.mol-of-hero__crumb-home { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; }
.mol-of-hero__crumb-link, .mol-of-hero__crumb-label { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; }
.mol-of-hero__crumb-link:hover { text-decoration: underline !important; }

.mol-of-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.mol-of-hero__country {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: rgba(249, 182, 56, 0.2) !important;
  color: #f9b638 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

.mol-of-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-wrap: balance !important;
}

/* When the H1 contains a separator ("Tilburg (HQ) — MOL Logistics EU"),
   the renderer splits it into two spans: the place stays at full hero
   size, the company sits on its own smaller second line so the 2-line
   title reads as one location + one subtitle instead of a wrapped
   sentence. */
.mol-of-hero__title-main {
  display: block !important;
}

.mol-of-hero__title-sub {
  display: block !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-top: 4px !important;
  letter-spacing: -0.01em !important;
}

.mol-of-hero__company {
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.mol-of-hero__lines {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-of-hero__line {
  display: grid !important;
  grid-template-columns: 20px 1fr !important;
  gap: 8px !important;
  align-items: start !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-of-hero__line-icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-top: 2px !important;
}

.mol-of-hero__line-text {
  color: #ffffff !important;
  text-decoration: none !important;
}

a.mol-of-hero__line-text:hover { text-decoration: underline !important; }

.mol-of-hero__media {
  margin: 0 !important;
  border-radius: 0 65px 0 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  display: flex !important;
}

.mol-of-hero__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
}

.mol-of-details {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-of-details__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px) !important;
}

.mol-of-details__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.1 !important;
  color: #00235c !important;
  margin: 0 0 32px !important;
}

.mol-of-details__list {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 24px !important;
}

.mol-of-details__row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 24px !important;
  background: #eef7ff !important;
  border-radius: 16px !important;
}

.mol-of-details__label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  opacity: 0.75 !important;
  margin: 0 !important;
}

.mol-of-details__value {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  margin: 0 !important;
}

@media (max-width: 899px) {
  .mol-of-hero__inner { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mol-of-hero__media { border-radius: 0 32px 0 0 !important; }
  .mol-of-hero__inset { border-top-right-radius: 32px !important; }
}

/* =========================================================
 * TEAM-MEMBER DETAIL (single contact post) — namespace mol-tm-*
 * ========================================================= */

.mol-tm-hero {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.mol-tm-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  border-radius: 0 0 0 80px !important;
  z-index: -1 !important;
  display: block !important;
}

.mol-tm-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: center !important;
  min-height: 540px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-tm-hero__crumb {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  align-self: start !important;
}

.mol-tm-hero__crumb-home { display: inline-flex !important; width: 14px !important; height: 14px !important; align-items: center !important; justify-content: center !important; }
.mol-tm-hero__crumb-link, .mol-tm-hero__crumb-label { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; }
.mol-tm-hero__crumb-link:hover { text-decoration: underline !important; }

.mol-tm-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.mol-tm-hero__badge {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  background: rgba(249, 182, 56, 0.2) !important;
  color: #f9b638 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
}

.mol-tm-hero__title {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mol-tm-hero__role {
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.mol-tm-hero__lines {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mol-tm-hero__line {
  display: grid !important;
  grid-template-columns: 20px 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.mol-tm-hero__line-icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.mol-tm-hero__line-text { color: #ffffff !important; text-decoration: none !important; }
a.mol-tm-hero__line-text:hover { text-decoration: underline !important; }

.mol-tm-hero__media {
  margin: 0 !important;
  border-radius: 0 65px 0 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  display: flex !important;
}

.mol-tm-hero__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 5 !important;
}

.mol-tm-bio {
  width: 100% !important;
  background: #ffffff !important;
}

.mol-tm-bio__inner {
  width: 100% !important;
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.mol-tm-bio__body {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  line-height: 1.4 !important;
  color: #00235c !important;
  max-width: 800px !important;
}

.mol-tm-bio__body p { margin: 0 0 12px !important; }
.mol-tm-bio__body p:last-child { margin-bottom: 0 !important; }

.mol-tm-bio__meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 32px !important;
  border-top: 1px solid rgba(0, 35, 92, 0.15) !important;
  padding-top: 32px !important;
}

.mol-tm-bio__group {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mol-tm-bio__group-title {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00235c !important;
  opacity: 0.75 !important;
  margin: 0 !important;
}

.mol-tm-bio__chips {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.mol-tm-bio__chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  background: #eef7ff !important;
  color: #00235c !important;
  border-radius: 999px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.mol-tm-bio__chip--alt {
  background: #f9b638 !important;
  color: #00235c !important;
}

@media (max-width: 899px) {
  .mol-tm-hero__inner { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mol-tm-hero__media { border-radius: 0 32px 0 0 !important; }
}

/* Hide decorative gradient orbs/ellipses across heroes / CTA blocks. */
.mol-vd-midcta__orb,
.mol-pc-hero__orb,
.mol-ps-hero__orb,
.mol-pf-hero__orb,
.mol-pf-quote__orb,
.mol-pf-insights__orb,
.mol-pq-hero__orb,
.mol-ftrcta__ellipse,
.mol-ftrcta__ellipse--1,
.mol-ftrcta__ellipse--2 {
  display: none !important;
}

/* ============================================================
   Feature — two-column intro block (image + body)
   ============================================================ */
.mol-feature {
  --mol-feature-kobalt: #00235c;
  --mol-feature-white: #ffffff;
  --mol-feature-sunflower: #f9b638;
  --mol-feature-muted: rgba(0, 35, 92, 0.7);
  --mol-feature-border: rgba(0, 35, 92, 0.2);
  --mol-feature-pad-x: clamp(24px, 6vw, 96px);
  --mol-feature-content-max: 1512px;
  --mol-feature-img-radius-tr: 80px;
  --mol-feature-font-display: "Schibsted Grotesk", "Halyard Display", "Montserrat", system-ui, sans-serif;
  --mol-feature-font-body: "Montserrat", system-ui, sans-serif;

  display: block !important;
  width: 100% !important;
  background: transparent !important;
  font-family: var(--mol-feature-font-body) !important;
  color: var(--mol-feature-kobalt) !important;
  padding: clamp(48px, 7vw, 96px) 0 !important;
}

.mol-feature * {
  box-sizing: border-box !important;
}

.mol-feature__inner {
  max-width: var(--mol-feature-content-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--mol-feature-pad-x) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
}

@media (min-width: 900px) {
  .mol-feature--image-left .mol-feature__inner,
  .mol-feature--image-right .mol-feature__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

.mol-feature--image-right .mol-feature__media { order: 2 !important; }
.mol-feature--image-right .mol-feature__body  { order: 1 !important; }

.mol-feature--no-image .mol-feature__body {
  max-width: 984px !important;
}

.mol-feature__media {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.mol-feature__img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 0 var(--mol-feature-img-radius-tr) 0 0 !important;
}

.mol-feature__body {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
  min-width: 0 !important;
}

.mol-feature__eyebrow {
  margin: 0 !important;
  font-family: var(--mol-feature-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mol-feature-kobalt) !important;
}

.mol-feature__title {
  margin: 0 !important;
  font-family: var(--mol-feature-font-display) !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--mol-feature-kobalt) !important;
}

@media (max-width: 899px) {
  .mol-feature__title {
    font-size: 24px !important;
  }
}

.mol-feature__text,
.mol-feature__text * {
  /* Display font (Schibsted Grotesk) so the industry intro body matches the
     heading + the automotive lead text. Was Montserrat -> "ander lettertype"
     bij industrieën met een aparte body-paragraaf (Amarildo 2026-06-19). */
  font-family: var(--mol-feature-font-display) !important;
}
.mol-feature__text {
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
  color: var(--mol-feature-muted) !important;
}

.mol-feature__text > * { margin: 0 0 0.85em !important; }
.mol-feature__text > *:last-child { margin-bottom: 0 !important; }

.mol-feature__button {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  background: transparent !important;
  border: 1px solid var(--mol-feature-border) !important;
  border-radius: 999px !important;
  color: var(--mol-feature-kobalt) !important;
  font-family: var(--mol-feature-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mol-feature__button:hover,
.mol-feature__button:focus-visible {
  background: var(--mol-feature-kobalt) !important;
  color: var(--mol-feature-white) !important;
}

.mol-feature__button-label { color: inherit !important; }

.mol-feature__button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--mol-feature-sunflower) !important;
  color: var(--mol-feature-kobalt) !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.mol-feature__button-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* ============================================================
   Keuzehulp / Help-me-Choose lightbox (Figma 2026-05-08)
   ============================================================ */
.mol-keuzehulp-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  background: transparent !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
}
.mol-keuzehulp-trigger__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
}

.mol-keuzehulp {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9990 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
.mol-keuzehulp[hidden] { display: none !important; }
.mol-keuzehulp__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 35, 92, 0.45) !important;
}
.mol-keuzehulp__panel {
  position: relative !important;
  width: 100% !important;
  max-width: 648px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.16) !important;
  padding: 48px 48px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}
.mol-keuzehulp__close {
  position: absolute !important;
  top: 32px !important;
  right: 32px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  background: #fff !important;
  color: #00235c !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.mol-keuzehulp__head {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-right: 56px !important;
}
.mol-keuzehulp__title {
  margin: 0 !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  color: #00235c !important;
}
.mol-keuzehulp__intro {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}
.mol-keuzehulp__stage {
  background: #eef7ff !important;
  border-radius: 0 40px 0 0 !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.mol-keuzehulp__progress {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 32px !important;
  padding: 0 8px !important;
  /* Reserve room for the counter-pill that hangs under the active dot. */
  margin-bottom: 32px !important;
}
.mol-keuzehulp__progress-line {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 50% !important;
  height: 2px !important;
  background: #00235c !important;
  transform: translateY(-1px) !important;
}
.mol-keuzehulp__progress-step {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #eef7ff !important;
  border: 2px solid #00235c !important;
  z-index: 1 !important;
}
.mol-keuzehulp__progress-step.is-active {
  background: #00235c !important;
}
.mol-keuzehulp__progress-counter {
  position: absolute !important;
  z-index: 2 !important;
  background: #00235c !important;
  color: #fff !important;
  font-family: "Halyard Display", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  padding: 7px 12px 8px !important;
  border-radius: 999px !important;
  top: 100% !important;
  margin-top: 6px !important;
  left: 8px !important;
  transition: left 0.3s ease !important;
}
.mol-keuzehulp[data-step="1"] .mol-keuzehulp__progress-counter { left: 8px !important; }
.mol-keuzehulp[data-step="2"] .mol-keuzehulp__progress-counter { left: calc(50% - 21px) !important; }
.mol-keuzehulp[data-step="3"] .mol-keuzehulp__progress-counter { right: 8px !important; left: auto !important; }

.mol-keuzehulp__step {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mol-keuzehulp__step[hidden] { display: none !important; }
.mol-keuzehulp__field-label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
}
.mol-keuzehulp__select-wrap {
  position: relative !important;
}
.mol-keuzehulp__select {
  width: 100% !important;
  padding: 8px 60px 8px 24px !important;
  height: 51px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 35, 92, 0.35) !important;
  border-radius: 0 999px 999px 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  color: #00235c !important;
  cursor: pointer !important;
}
.mol-keuzehulp__select-arrow {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 35px !important;
  height: 35px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.mol-keuzehulp__step--results {
  gap: 16px !important;
}
.mol-keuzehulp__results {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mol-keuzehulp__result-link {
  display: grid !important;
  grid-template-columns: 28px 1fr auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 12px 12px 20px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 35, 92, 0.12) !important;
  text-decoration: none !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}
.mol-keuzehulp__result-icon {
  display: inline-flex !important;
  color: #00235c !important;
}
.mol-keuzehulp__result-label {
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
}
.mol-keuzehulp__result-match {
  font-weight: 400 !important;
  font-size: 16px !important;
  color: rgba(0, 35, 92, 0.75) !important;
}
.mol-keuzehulp__result-match span {
  font-weight: 700 !important;
  color: #00235c !important;
}
.mol-keuzehulp__result-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mol-keuzehulp__cta-card {
  margin-top: 8px !important;
  padding: 24px !important;
  border-radius: 0 24px 0 0 !important;
  background: linear-gradient(103.65deg, #299fda -23.53%, #105697 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.mol-keuzehulp__cta-text {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}
.mol-keuzehulp__cta-btn {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 20px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 999px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.mol-keuzehulp__cta-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
}

.mol-keuzehulp__nav {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 24px !important;
}
.mol-keuzehulp__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  border: 1px solid rgba(0, 35, 92, 0.2) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #00235c !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
/* De prev-knop staat in de markup al als [pijl][label], dus row-reverse draaide
   hem terug naar [label][pijl]: een pijl naar links aan de rechterkant, precies
   zoals de volgende-knop. De padding (24px rechts, 8px links) was wél op
   pijl-links geschreven, waardoor het label tegen de rand plakte en de pijl
   24px lucht kreeg. Zonder row-reverse klopt de knop met zijn eigen padding en
   is hij het spiegelbeeld van "volgende". PageKings-feedback 2026-08-06,
   must-have, desktop en mobiel. */
.mol-keuzehulp__btn--prev {
  padding: 8px 24px 8px 8px !important;
}
.mol-keuzehulp__btn[hidden] { display: none !important; }
.mol-keuzehulp__btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.mol-keuzehulp__btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #f9b638 !important;
  color: #00235c !important;
}

@media (max-width: 640px) {
  .mol-keuzehulp__panel {
    padding: 32px 24px 24px !important;
  }
  .mol-keuzehulp__close {
    top: 16px !important;
    right: 16px !important;
  }
  .mol-keuzehulp__title { font-size: 24px !important; }
  .mol-keuzehulp__head { padding-right: 40px !important; }
  .mol-keuzehulp__result-link {
    grid-template-columns: 24px 1fr auto !important;
    gap: 10px !important;
  }
  .mol-keuzehulp__result-arrow { display: none !important; }
}


/* ============================================================
   Vacature apply-now lightbox (mol-vd-apply)
   ============================================================ */
.mol-vd-apply {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 4vw, 48px) !important;
}
.mol-vd-apply.is-open {
  display: flex !important;
}
.mol-vd-apply[hidden] {
  display: none !important;
}
.mol-vd-apply__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 14, 46, 0.6) !important;
}
.mol-vd-apply__dialog {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.08) !important;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 64px) !important;
  width: 100% !important;
  max-width: 851px !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  color: #00235C !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
}
.mol-vd-apply__close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #00235C !important;
  cursor: pointer !important;
  padding: 0 !important;
  z-index: 2 !important;
}
.mol-vd-apply__close:hover { background: rgba(0, 35, 92, 0.04) !important; }
.mol-vd-apply__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.mol-vd-apply__head {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-right: 56px !important;
}
.mol-vd-apply__title {
  margin: 0 !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  line-height: 1.1 !important;
  color: #00235C !important;
}
.mol-vd-apply__sub {
  margin: 0 !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235C !important;
  opacity: 0.75 !important;
}
.mol-vd-apply__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
.mol-vd-apply__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.mol-vd-apply__label {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235C !important;
}
.mol-vd-apply__input {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 51px !important;
  padding: 0 56px 0 24px !important;
  border: 1px solid rgba(0, 35, 92, 0.35) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}
.mol-vd-apply__input input {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235C !important;
  height: 24px !important;
  padding: 0 !important;
}
.mol-vd-apply__input input::placeholder {
  color: #00235C !important;
  opacity: 0.5 !important;
}
.mol-vd-apply__icon {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 35px !important;
  height: 35px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #00235C !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}
.mol-vd-apply__divider {
  height: 1px !important;
  border: 0 !important;
  background: rgba(0, 35, 92, 0.25) !important;
  margin: 0 !important;
}
.mol-vd-apply__row--files {
  gap: 24px !important;
}
.mol-vd-apply__file {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 51px !important;
  padding: 0 8px 0 24px !important;
  border: 1px solid rgba(0, 35, 92, 0.25) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease !important;
}
.mol-vd-apply__file.is-dragover {
  border-color: #00235C !important;
  background: rgba(249, 182, 56, 0.08) !important;
}
.mol-vd-apply__file input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
.mol-vd-apply__file-label {
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235C !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.mol-vd-apply__file-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 35px !important;
  height: 35px !important;
  border-radius: 50% !important;
  background: #f9b638 !important;
  color: #00235C !important;
  flex: 0 0 auto !important;
}
.mol-vd-apply__consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: #00235C !important;
  cursor: pointer !important;
}
.mol-vd-apply__consent input[type="checkbox"] {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
  margin: 2px 0 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #eef7ff !important;
  border: 1px solid #00235C !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  position: relative !important;
}
.mol-vd-apply__consent input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 2px !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #00235C !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
.mol-vd-apply__consent a {
  color: #00235C !important;
  text-decoration: underline !important;
}
.mol-vd-apply__submit {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 24px !important;
  height: 48px !important;
  background: #00235C !important;
  border: 1px solid rgba(0, 35, 92, 0.35) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  cursor: pointer !important;
  transition: opacity 0.18s ease !important;
}
.mol-vd-apply__submit:hover { opacity: 0.92 !important; }
.mol-vd-apply__submit-label { color: inherit !important; }
.mol-vd-apply__submit-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #f9b638 !important;
  color: #00235C !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}
.mol-vd-apply__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
body.mol-vd-apply-open { overflow: hidden !important; }

@media (max-width: 768px) {
  .mol-vd-apply__row,
  .mol-vd-apply__row--files {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mol-vd-apply__dialog {
    padding: 32px 20px !important;
  }
  .mol-vd-apply__head {
    padding-right: 48px !important;
  }
  .mol-vd-apply__close {
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
  }
  .mol-vd-apply__title {
    font-size: 22px !important;
  }
  .mol-vd-apply__submit {
    align-self: stretch !important;
    justify-content: space-between !important;
  }
}

/* ===================================================================
   No-caps overrides (Martijn 2026-06-01): no ALL CAPS on nav links,
   primary CTA, hero H1's, and page breadcrumbs. Source text stays as-is.
   =================================================================== */
.mol-header__nav-link,
.mol-header__nav-link span,
.mol-header__nav-cta,
.mol-header__nav-cta__label,
.mol-header__nav-cta-label,
.mol-pc-hero__crumb,
.mol-pc-hero__crumb-link,
.mol-pc-hero__crumb a,
.mol-pc-hero__crumb span,
.mol-of-hero__crumb,
.mol-of-hero__crumb-link,
.mol-page-hero__crumb,
.mol-page-hero__crumb a,
.mol-page-hero__crumb span,
.mol-pc-hero__title,
.mol-of-hero__title,
.mol-page-hero__title,
.mol-hero__title,
.mol-iv-hero__title,
.mol-solution-hero__title,
.mol-pc-thanks__title {
  text-transform: none !important;
}

/* Extra no-caps: mega-menu pill labels, mega features, page eyebrows. */
.mol-header__pill-label,
.mol-header__mega-title,
.mol-header__mega-feature-title,
.mol-pc-hero__eyebrow,
.mol-of-hero__eyebrow,
.mol-page-hero__eyebrow,
.mol-iv-hero__eyebrow,
.mol-pc-hero__crumb-current,
.mol-page-hero__crumb-current,
.mol-of-hero__crumb-current {
  text-transform: none !important;
}

/* Force first-letter capitalisation on mega-menu / nav labels so lowercase
   post titles (douaneafhandeling, project en breakbulk cargo, etc.) always
   render with a capital first letter without affecting the rest. */
.mol-header__dropdown-link > span:first-child::first-letter,
.mol-header__mega-flat-link > span:first-child::first-letter,
.mol-header__pill-label::first-letter,
.mol-header__mega-list-heading::first-letter {
  text-transform: uppercase !important;
}

/* Extend ::first-letter capitalisation to footer links across locales. */
.mol-footer__col-link::first-letter,
.mol-footer__col-text::first-letter,
.mol-footer__col-title::first-letter {
  text-transform: uppercase !important;
}

/* Industry badges: force Title Case even when the underlying post title or
   translation is ALL CAPS (Amarildo wants Automotive not AUTOMOTIVE). */
.mol-hp4__insight-badge {
  text-transform: lowercase !important;
}
.mol-hp4__insight-badge::first-letter {
  text-transform: uppercase !important;
}

/* ===================================================================
   Amarildo meeting 2026-06-01 — sessie 1 tweaks
   =================================================================== */

/* A1: Hero H1 max 90px (was 80px) */
.mol-hero__title { font-size: clamp(40px, 6vw, 90px) !important; }

/* A2: Mega-menu Products + Services kolommen even breed */
.mol-header__mega-grid {
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
}
.mol-header__mega-list { min-width: 0 !important; }

/* A2b: "What we do" mega-menu — FAQ block weg, pills-cols side-by-side.
   De oude row-spanning override (regel ~10422) verwachtte 1 pills-col
   + FAQ; zonder FAQ collapsen alle 3 de pills-cols op col 1 row 1. Reset
   naar normal grid-flow wanneer er geen FAQ-card in de dropdown zit. */
.mol-header__nav-item[data-mol-dropdown]:not(:has(.mol-header__dropdown-faq)) .mol-header__dropdown-inner .mol-header__dropdown-col--pills {
  grid-column: auto !important;
  grid-row: auto !important;
}
.mol-header__nav-item[data-mol-dropdown]:not(:has(.mol-header__dropdown-faq)) .mol-header__dropdown-inner {
  grid-template-rows: auto !important;
  align-items: start !important;
}
/* Alleen op desktop forceer 3-col layout — mobiel houdt 1-col via de
   bestaande @media max-width:899px regel. */
@media (min-width: 900px) {
  .mol-header__nav-item[data-mol-dropdown]:not(:has(.mol-header__dropdown-faq)) .mol-header__dropdown-inner:has(> .mol-header__dropdown-col + .mol-header__dropdown-col + .mol-header__dropdown-col) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* A3: Our Specialists foto-grid — meer ruimte tussen kaarten.
   Verticale gap groter dan horizontale; bij 470px-hoge cards heeft het
   visueel ritme van rij-spacing voorrang. */
.mol-ps-team__grid {
  column-gap: 32px !important;
  row-gap: 56px !important;
}
@media (min-width: 1024px) {
  .mol-ps-team__grid {
    column-gap: 40px !important;
    row-gap: 72px !important;
  }
}

/* A4: Interview + Case study "Ready for next step" CTA-knop tekst wit */
.mol-iv-body .mol-bb-cta-card__btn,
.mol-iv-body .mol-bb-cta-card__btn--primary,
.mol-iv-body .mol-bb-cta-card__btn--secondary,
.mol-iv-body .mol-bb-cta-card__btn:hover,
.mol-iv-body .mol-bb-cta-card__btn:focus-visible,
.mol-cs-body .mol-bb-cta-card__btn,
.mol-cs-body .mol-bb-cta-card__btn--primary,
.mol-cs-body .mol-bb-cta-card__btn--secondary,
.mol-cs-body .mol-bb-cta-card__btn:hover,
.mol-cs-body .mol-bb-cta-card__btn:focus-visible {
  color: #ffffff !important;
}

/* Breakdance section-1231 wrapt op de homepage de footer-shortcode, maar
   op privacy/cookie/disclaimer (en andere kortere pages) hangt-ie LEEG
   ná de footer met alleen een whitespace-shortcodewrapper. Hide alleen
   wanneer de section geen footer bevat. Geen padding-overrides, dat
   sloopt de homepage-variant waar deze section juist de footer wrapt. */
.bde-section-1231-102:not(:has(footer)) {
  display: none !important;
}

/* Amarildo 2026-06-10/11: breadcrumbs in alle heros vergroten. De
   parent .__breadcrumb regel matched eerst, maar de child .crumb-link en
   .crumb-current hebben hun EIGEN font-size: 10px override gehad. We
   overschrijven die ook expliciet — anders geen visueel verschil. */
.mol-solution-hero__breadcrumb,
.mol-page-hero__breadcrumb,
.mol-cs-hero__breadcrumb,
.mol-vd-hero__breadcrumb,
.mol-of-hero__breadcrumb,
.mol-tm-hero__breadcrumb,
.mol-pc-thanks__breadcrumb {
  font-size: 13px !important;
  font-weight: 500 !important;
  gap: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.mol-solution-hero__crumb-link,
.mol-solution-hero__crumb-current,
.mol-page-hero__crumb-link,
.mol-page-hero__crumb-current,
.mol-cs-hero__breadcrumb-current,
.mol-vd-hero__crumb-link,
.mol-of-hero__crumb-link,
.mol-of-hero__crumb-label,
.mol-tm-hero__crumb-link,
.mol-tm-hero__crumb-label,
.mol-pc-thanks__crumb-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.9 !important;
}
.mol-solution-hero__crumb-home,
.mol-page-hero__crumb-home {
  width: 22px !important;
  height: 22px !important;
}
.mol-solution-hero__crumb-home-mark svg,
.mol-page-hero__crumb-home-mark svg {
  width: 14px !important;
  height: 14px !important;
}

/* Amarildo 2026-06-12: Knowledge & tools (single-tool pages) hadden een
   grijze body-bg van de Breakdance template. Forceer wit.
   2026-06-16: de `.breakdance`-selector raakte ook de footer (en footer-CTA),
   die zelf class="breakdance" dragen -> footer werd wit met witte tekst,
   onleesbaar. Sluit mol-footer + mol-ftrcta expliciet uit zodat hun eigen
   kobalt-achtergrond blijft staan. */
body.single-tool,
body.single-tool .breakdance:not(.mol-footer):not(.mol-ftrcta),
body.single-tool .bde-section,
body.single-tool .bde-section .section-container,
body.tool-template-default {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Herbevestig de kobalt footer-achtergrond op single-tool pagina's, voor het
   geval een Breakdance-wrapper de witregel alsnog erft. */
body.single-tool footer.mol-footer,
body.tool-template-default footer.mol-footer {
  background: #00235c !important;
  background-color: #00235c !important;
}

/* Amarildo 2026-06-09: Pagina's zonder eigen Breakdance template (zoals
   /message/) renderen in de "Page" global template (bde-section-13).
   Die wikkelt de content in een max-width section-container. Onze MOL
   section-renderers zijn al full-bleed; haal de container weg.
   GESCOPED op bde-section-13-* — NIET op bde-section-1231 (dat wrapt
   ftrcta + footer en heeft eigen overlap-logica). */
[class*="bde-section-13-"]:has(.mol-logistics-stack) {
  padding: 0 !important;
}
[class*="bde-section-13-"] > .section-container:has(.mol-logistics-stack) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
[class*="bde-section-13-"] .bde-code-block:has(.mol-logistics-stack),
[class*="bde-section-13-"] .bde-shortcodewrapper:has(.mol-logistics-stack) {
  padding: 0 !important;
  margin: 0 !important;
}

/* A5: Footer onder-ruimte gelijk trekken op interview + service detail
   + legal-body pagina's (privacy-policy + cookie-policy + disclaimer).
   Beide templates renderen wel een mol-ftrcta maar de body:has() hook
   valt niet altijd; forceer de juiste padding-top op de footer hier. */
body.single-interview footer.mol-footer,
body.single-service  footer.mol-footer,
body.page-id-3 footer.mol-footer,                /* privacy-policy */
body.page-id-2909 footer.mol-footer,             /* cookie-policy */
body.page-id-3031 footer.mol-footer,             /* disclaimer */
body:has(> .mol-legal-body) footer.mol-footer,
body:has(.mol-legal-body) footer.mol-footer,
.breakdance body.single-interview footer.mol-footer,
.breakdance body.single-service  footer.mol-footer {
  padding-top: clamp(120px, 15vw, 200px) !important;
}

/* A6: Insights category-badge — blauwe achtergrond, witte tekst */
.mol-hp6__card-badge {
  background: #00235c !important;
  color: #ffffff !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* A7: Office / location-foto's zwart-wit via CSS filter */
.mol-of-photos img,
.mol-of-photos__item img,
.mol-pf-card__img,
.mol-pc-office__photo img {
  filter: grayscale(100%) !important;
  transition: filter 0.25s ease;
}
.mol-of-photos img:hover,
.mol-of-photos__item:hover img {
  filter: grayscale(0%) !important;
}

/* B2 Values intro-body */
.mol-values__intro-body {
  max-width: 760px !important;
  margin: 0 0 32px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(0,35,92,0.85) !important;
}
.mol-values__intro-body p { margin: 0 0 0.8em !important; }

/* B3 Values video — 16:9 frame */
.mol-values__video {
  margin-top: 48px !important;
  width: 100% !important;
}
.mol-values__video-frame {
  position: relative !important;
  width: 100% !important;
  padding-top: 56.25% !important; /* 16:9 */
  background: #00235c !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.mol-values__video-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* B8 Careers under-hero image */
.mol-jl-under-hero {
  background: transparent !important;
  padding: 0 !important;
}
.mol-jl-under-hero__inner {
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
}
.mol-jl-under-hero__img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  margin: clamp(32px, 5vw, 64px) 0 !important;
}

/* ============================================================
   /global-network/ page — Pageking design "Gobal Network"
   (MOL-Logistics 2333:27020). Hero + stats + interactive map.
   ============================================================ */

/* ---------- gn_hero ---------- */

.mol-gn-hero,
.mol-gn-hero.breakdance,
.breakdance .mol-gn-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #EEF7FF !important;
    color: #ffffff !important;
    padding-top: 0 !important;
}

.mol-gn-hero__bg {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(103.65deg, #299FDA -23.53%, #105697 100%) !important;
    border-radius: 0 0 0 80px !important;
    z-index: 0 !important;
}

.mol-gn-hero__inset {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
    top: clamp(48px, 6vw, 96px) !important;
    right: clamp(24px, 6vw, 96px) !important;
    bottom: clamp(48px, 6vw, 96px) !important;
    left: clamp(24px, 6vw, 96px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-top-right-radius: 64px !important;
    background: transparent !important;
    display: block !important;
}

@media (max-width: 768px) {
    .mol-gn-hero__inset {
        border-top-right-radius: 32px !important;
    }
}

/* Dotted world map watermark, the designer's own artwork, faded top-left to
   bottom-right exactly like the gradient fill in the design (75% -> 2%). */
.mol-gn-hero__watermark {
    position: absolute !important;
    left: 18.9% !important;
    top: 20.9% !important;
    width: 72.6% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    color: #ffffff !important;
    -webkit-mask-image: linear-gradient(280deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.02) 100%) !important;
    mask-image: linear-gradient(280deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.02) 100%) !important;
}

.mol-gn-hero__watermark svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

@media (max-width: 900px) {
    .mol-gn-hero__watermark {
        left: 25% !important;
        width: 95% !important;
        top: 45% !important;
    }
}

.mol-gn-hero__inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1512px !important;
    margin: 0 auto !important;
    padding: clamp(64px, 7vw, 112px) clamp(24px, 6vw, 96px) clamp(72px, 8vw, 128px) !important;
}

.mol-gn-hero__crumb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: clamp(48px, 8vw, 141px) !important;
}

.mol-gn-hero__crumb-home {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
    flex: 0 0 auto !important;
}

.mol-gn-hero__crumb-home svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

.mol-gn-hero__crumb-sep {
    opacity: 0.6 !important;
}

.mol-gn-hero__crumb-label {
    color: #ffffff !important;
}

.mol-gn-hero__copy {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(16px, 2.4vw, 32px) !important;
    align-items: flex-start !important;
    max-width: 637px !important;
}

.mol-gn-hero__title,
.mol-gn-hero.breakdance h1.mol-gn-hero__title {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(40px, 5.5vw, 72px) !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mol-gn-hero__intro,
.mol-gn-hero.breakdance p.mol-gn-hero__intro {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(15px, 1.3vw, 18px) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- gn_stats ---------- */

.mol-gn-stats,
.mol-gn-stats.breakdance,
.breakdance .mol-gn-stats {
    background: #EEF7FF !important;
    padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 96px) !important;
}

.mol-gn-stats__inner {
    max-width: 1320px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.mol-gn-stats__item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 400px !important;
    padding-left: 32px !important;
    border-left: 1px solid #00235C !important;
}

.mol-gn-stats__label,
.mol-gn-stats.breakdance p.mol-gn-stats__label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(15px, 1.3vw, 18px) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: #00235C !important;
}

.mol-gn-stats__bullet {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: 0.5em !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #299FDA 0%, #105697 100%) !important;
}

.mol-gn-stats__number,
.mol-gn-stats.breakdance p.mol-gn-stats__number {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    line-height: 1.1 !important;
    color: #00235C !important;
}

@media (max-width: 1100px) {
    .mol-gn-stats__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 32px 24px !important;
    }
    .mol-gn-stats__item {
        min-height: 220px !important;
    }
}

@media (max-width: 640px) {
    .mol-gn-stats__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .mol-gn-stats__item {
        min-height: 160px !important;
        padding-left: 16px !important;
    }
}

/* ---------- gn_map ---------- */

.mol-gn-map,
.mol-gn-map.breakdance,
.breakdance .mol-gn-map {
    background: #00235C !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

.mol-gn-map__inner {
    position: relative !important;
    max-width: 1512px !important;
    margin: 0 auto !important;
    aspect-ratio: 1512 / 888 !important;
}

/* Copy block: x 96, y 515, width 424 in the 1512 x 888 design frame. */
.mol-gn-map__copy {
    position: absolute !important;
    left: 6.35% !important;
    top: 58% !important;
    width: 28% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(16px, 1.6vw, 24px) !important;
}

.mol-gn-map__title,
.mol-gn-map.breakdance h2.mol-gn-map__title {
    font-family: "Halyard Display", "Schibsted Grotesk", "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(30px, 3.2vw, 48px) !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mol-gn-map__body,
.mol-gn-map.breakdance p.mol-gn-map__body {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(14px, 1.1vw, 16px) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Map frame: x 308, y 120, 1287 x 648 in the design frame. It runs past the
   right edge there too, so the section clips it the same way. */
.mol-gn-map__stage {
    position: absolute !important;
    left: 20.37% !important;
    top: 13.5% !important;
    width: 85.12% !important;
    aspect-ratio: 1287 / 648 !important;
    z-index: 1 !important;
}

.mol-gn-map__art {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
}

.mol-gn-map__art svg {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    position: absolute !important;
    left: 0.21% !important;
    top: -16% !important;
    width: 99.68% !important;
    height: auto !important;
    display: block !important;
}

.mol-gn-map__pins {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    z-index: 2 !important;
}

.mol-gn-map__pin {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mol-gn-map__marker {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #00235C !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16) !important;
    transition: padding-right 0.28s ease, background-color 0.28s ease !important;
    font-family: "Montserrat", system-ui, sans-serif !important;
}

.mol-gn-map__marker-icon {
    flex: 0 0 auto !important;
    width: clamp(26px, 2.2vw, 32px) !important;
    height: clamp(26px, 2.2vw, 32px) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #00235C !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.28s ease !important;
}

.mol-gn-map__marker-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* Collapsed by default: the label column has zero width and animates open. */
.mol-gn-map__marker-text {
    display: grid !important;
    grid-template-columns: 0fr !important;
    transition: grid-template-columns 0.28s ease !important;
}

.mol-gn-map__marker-text > * {
    overflow: hidden !important;
    white-space: nowrap !important;
}

.mol-gn-map__marker-text {
    align-items: center !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    color: #00235C !important;
}

.mol-gn-map__marker-continent,
.mol-gn-map__marker-sep,
.mol-gn-map__marker-count {
    display: none !important;
}

.mol-gn-map__pin.is-open .mol-gn-map__marker {
    padding-right: 16px !important;
}

.mol-gn-map__pin.is-open .mol-gn-map__marker-icon {
    background: #F9B638 !important;
}

.mol-gn-map__pin.is-open .mol-gn-map__marker-text {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mol-gn-map__pin.is-open .mol-gn-map__marker-continent,
.mol-gn-map__pin.is-open .mol-gn-map__marker-count {
    display: inline !important;
}

.mol-gn-map__pin.is-open .mol-gn-map__marker-sep {
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #00235C !important;
}

.mol-gn-map__marker:focus-visible {
    outline: 2px solid #F9B638 !important;
    outline-offset: 3px !important;
}

/* Open pins sit above the rest so the pill is never overlapped. */
.mol-gn-map__pin.is-open {
    z-index: 3 !important;
}

/* Below the design width the absolute composition stops making sense: copy
   first, map underneath, both full width. */
@media (max-width: 1100px) {
    .mol-gn-map__inner {
        aspect-ratio: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(32px, 5vw, 56px) !important;
        padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 96px) !important;
    }
    .mol-gn-map__copy {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
    }
    /* The stage stays a positioned box: the pins are anchored to it. */
    .mol-gn-map__stage {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        order: 2 !important;
    }
    .mol-gn-map__copy {
        max-width: 560px !important;
    }
}

/* Phones: a full-width map would be ~170px tall, which makes the pins
   collide. Keep the map at a workable size and let it scroll sideways. */
@media (max-width: 760px) {
    .mol-gn-map__inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .mol-gn-map__inner::-webkit-scrollbar {
        display: none !important;
    }
    .mol-gn-map__stage {
        width: 700px !important;
        max-width: none !important;
        flex: 0 0 700px !important;
    }
    .mol-gn-map__marker-text {
        font-size: 11px !important;
    }
}

/* Melding wanneer een sollicitatie niet verstuurd kon worden (?apply=error).
   Stond er niet: de bezoeker kwam terug op een gewone pagina en zag niets. */
.mol-vd-apply__notice {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin: 0 0 24px !important;
  padding: 16px 20px !important;
  border: 1px solid rgba(197, 48, 48, 0.28) !important;
  border-left: 4px solid #c53030 !important;
  border-radius: 12px !important;
  background: #fdf4f4 !important;
  color: #00235c !important;
}
.mol-vd-apply__notice > svg {
  flex: 0 0 auto !important;
  color: #c53030 !important;
  margin-top: 2px !important;
}
.mol-vd-apply__notice-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.mol-vd-apply__notice strong {
  font-family: "Schibsted Grotesk", "Halyard Display", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #00235c !important;
}
.mol-vd-apply__notice p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #00235c !important;
}
.mol-vd-apply__notice a {
  color: #105697 !important;
  text-decoration: underline !important;
}
.mol-vd-apply__notice:focus-visible {
  outline: 2px solid #c53030 !important;
  outline-offset: 2px !important;
}

/* Een pin met bestemming rendert als <a> in plaats van <button>. De opmaak zit
   op de class, alleen de standaard link-onderstreping moet eruit. */
a.mol-gn-map__marker,
a.mol-gn-map__marker:hover,
a.mol-gn-map__marker:focus {
  text-decoration: none !important;
}

/* ============================================================
   ONE Express landingspagina (/one-express/)
   Navy als basis, amber uitsluitend voor de primaire CTA, conform de
   bestaande huisstijl van de site.
   ============================================================ */


/* --- Eigendomsverhouding --- */
.mol-oe-own { background: #ffffff !important; padding: clamp(48px, 6vw, 96px) 0 !important; }
.mol-oe-own__inner {
  max-width: 1512px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 96px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
}
.mol-oe-own__eyebrow {
  margin: 0 0 12px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6B7A96 !important;
}
.mol-oe-own__title {
  margin: 0 0 16px !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  color: #00235C !important;
}
.mol-oe-own__body p {
  margin: 0 0 14px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #3A4763 !important;
}
.mol-oe-own__bar {
  display: flex !important;
  width: 100% !important;
  height: 56px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.mol-oe-own__slice {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #ffffff !important;
}
.mol-oe-own__slice-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 0 8px !important;
}
.mol-oe-own__slice--1 { background: #00235C !important; }
.mol-oe-own__slice--2 { background: #105697 !important; }
.mol-oe-own__slice--3 { background: #299FDA !important; }
.mol-oe-own__legend {
  list-style: none !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.mol-oe-own__legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #00235C !important;
}
.mol-oe-own__dot { width: 12px !important; height: 12px !important; border-radius: 50% !important; flex: 0 0 auto !important; }
.mol-oe-own__dot--1 { background: #00235C !important; }
.mol-oe-own__dot--2 { background: #105697 !important; }
.mol-oe-own__dot--3 { background: #299FDA !important; }
.mol-oe-own__legend-name { flex: 1 1 auto !important; }
.mol-oe-own__legend-pct { font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }

/* --- Wat het betekent --- */
.mol-oe-value { background: #EEF7FF !important; padding: clamp(48px, 6vw, 96px) 0 !important; }
.mol-oe-value__inner { max-width: 1512px !important; margin: 0 auto !important; padding: 0 clamp(24px, 6vw, 96px) !important; }
.mol-oe-value__head { max-width: 68ch !important; margin: 0 0 clamp(28px, 3vw, 48px) !important; }
.mol-oe-value__title {
  margin: 0 0 12px !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  color: #00235C !important;
}
.mol-oe-value__intro {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #3A4763 !important;
}
.mol-oe-value__grid {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}
.mol-oe-value__item {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.mol-oe-value__item-title {
  margin: 0 !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  color: #00235C !important;
}
.mol-oe-value__item-text {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #3A4763 !important;
}

/* --- Vloot in cijfers --- */
.mol-oe-fleet { background: #00235C !important; color: #ffffff !important; padding: clamp(48px, 6vw, 96px) 0 !important; }
.mol-oe-fleet__inner { max-width: 1512px !important; margin: 0 auto !important; padding: 0 clamp(24px, 6vw, 96px) !important; }
.mol-oe-fleet__head { max-width: 68ch !important; margin: 0 0 clamp(28px, 3vw, 48px) !important; }
.mol-oe-fleet__title {
  margin: 0 0 12px !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
}
.mol-oe-fleet__body {
  margin: 0 0 14px !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.86) !important;
}
.mol-oe-fleet__stats {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 24px !important;
}
.mol-oe-fleet__stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.24) !important;
}
.mol-oe-fleet__number {
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 3.6vw, 52px) !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-variant-numeric: tabular-nums !important;
}
.mol-oe-fleet__label {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

/* --- Hoe een boeking loopt --- */
.mol-oe-proc { background: #ffffff !important; padding: clamp(48px, 6vw, 96px) 0 !important; }
.mol-oe-proc__inner { max-width: 1512px !important; margin: 0 auto !important; padding: 0 clamp(24px, 6vw, 96px) !important; }
.mol-oe-proc__head { max-width: 68ch !important; margin: 0 0 clamp(28px, 3vw, 48px) !important; }
.mol-oe-proc__title {
  margin: 0 0 12px !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  color: #00235C !important;
}
.mol-oe-proc__intro {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #3A4763 !important;
}
.mol-oe-proc__steps {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 28px !important;
}
.mol-oe-proc__step { display: flex !important; gap: 16px !important; align-items: flex-start !important; }
.mol-oe-proc__num {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #EEF7FF !important;
  color: #00235C !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-size: 18px !important;
}
.mol-oe-proc__step-body { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.mol-oe-proc__step-title {
  margin: 0 !important;
  font-family: "Halyard Display", "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  color: #00235C !important;
}
.mol-oe-proc__step-text {
  margin: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #3A4763 !important;
}

@media (max-width: 900px) {
  .mol-oe-own__inner { grid-template-columns: minmax(0, 1fr) !important; }
  .mol-oe-own__bar { height: 44px !important; }
}
.mol-oe-proc__cta { margin: 32px 0 0 !important; }