:root {
  --asp-font-family: "urw-form", Arial, sans-serif;
  --asp-navy: #141f33;
  --asp-blue: #003087;
  --asp-blue-deep: #002569;
  --asp-blue-dark: #001f57;
  --asp-blue-wash: #eef2fa;
  /* Merkrood uit de logogids. Wit hierop haalt 3,7:1 en dat is te weinig voor
     kleine tekst, dus vlakken met witte tekst (knoppen, badge) staan op
     --asp-red-deep, dat 4,6:1 haalt. Het merkrood blijft de accentkleur voor
     pijlen, opsommingstekens en gemarkeerde woorden. */
  --asp-red: #f93822;
  --asp-red-deep: #d92d16;
  --asp-red-dark: #c92516;
  --asp-ink: #243449;
  --asp-muted: #637185;
  --asp-light: #f1f4f8;
  --asp-white: #ffffff;
  --asp-line: rgba(0, 48, 135, 0.14);
  --asp-shadow: 0 18px 46px rgba(20, 31, 51, 0.13);
  --asp-radius: 14px;
}

html { scroll-behavior: smooth; }
body.asp-staging-site {
  --e-global-typography-primary-font-family: "urw-form";
  --e-global-typography-secondary-font-family: "urw-form";
  --e-global-typography-text-font-family: "urw-form";
  --e-global-typography-accent-font-family: "urw-form";
  margin: 0;
  overflow-x: hidden;
  background: var(--asp-white);
  color: var(--asp-ink);
  font-family: var(--asp-font-family);
  -webkit-font-smoothing: antialiased;
}

body.asp-staging-site,
body.asp-staging-site :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, legend, option, blockquote, cite, li, dt, dd, figcaption, summary, time) {
  font-family: var(--asp-font-family) !important;
}

body.asp-staging-site .elementor-element { --widgets-spacing: 0; }
body.asp-staging-site .elementor-widget { margin: 0; }
body.asp-staging-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.asp-site, .asp-site *, .asp-site *::before, .asp-site *::after { box-sizing: border-box; }
.asp-site { display: block !important; width: 100%; max-width: none !important; padding: 0 !important; gap: 0 !important; }
.asp-site a { color: inherit; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.asp-site a:focus-visible,
.asp-site button:focus-visible,
.asp-nav-dropdown > summary:focus-visible,
.asp-menu-toggle:focus-visible {
  outline: 3px solid rgba(249, 56, 34, .72);
  outline-offset: 4px;
}
.asp-site img { display: block; max-width: 100%; }
.asp-shell { width: min(1180px, calc(100% - 40px)) !important; max-width: 1180px !important; margin-inline: auto !important; padding: 0 !important; }
.asp-section { display: block !important; padding: 104px 0 !important; scroll-margin-top: 84px; }

.asp-kicker,
.asp-kicker .elementor-widget-container {
  /* 12 px in hoofdletters telt als kleine tekst. Op het lichtgrijze sectievlak haalt
     --asp-red-deep 4,39:1 en dat is net te weinig; --asp-red-dark haalt 5,06:1. */
  color: var(--asp-red-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.asp-kicker::before,
.asp-kicker .elementor-widget-container::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 12px 1px 2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  background: none;
  transform: rotate(45deg);
}
.asp-kicker-light, .asp-kicker-light .elementor-widget-container { color: rgba(255, 255, 255, .78); }
.asp-process .asp-kicker,
.asp-process .asp-kicker .elementor-widget-container { color: rgba(255, 255, 255, .78); }
.asp-section-title .elementor-heading-title {
  margin: 0;
  color: var(--asp-navy);
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.asp-title-light .elementor-heading-title { color: var(--asp-white); }
.asp-copy, .asp-copy .elementor-widget-container {
  color: var(--asp-muted);
  font-size: 17px;
  line-height: 1.7;
}
.asp-copy-large, .asp-copy-large .elementor-widget-container { font-size: 19px; }
.asp-copy-light, .asp-copy-light .elementor-widget-container { color: rgba(255, 255, 255, .72); }
.asp-section-heading { max-width: 780px; gap: 18px !important; margin-bottom: 48px; }
.asp-section-heading-center { margin-inline: auto; text-align: center; align-items: center; }
.asp-section-lead, .asp-section-lead .elementor-widget-container { max-width: 680px; }

.asp-button-row,
.asp-contact-actions { width: auto !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 12px !important; }
.asp-button { width: auto !important; }
.asp-button .elementor-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(20, 31, 51, .12);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.asp-button .elementor-button:hover { transform: translateY(-1px); }
.asp-button .elementor-button:active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 7px rgba(20, 31, 51, .12); }
.asp-button-primary .elementor-button { background: var(--asp-red-deep); color: var(--asp-white); box-shadow: 0 7px 18px rgba(249, 56, 34, .22); }
.asp-button-primary .elementor-button:hover { background: var(--asp-red-dark); color: var(--asp-white); box-shadow: 0 9px 21px rgba(217, 45, 22, .24); }
.asp-button-primary .elementor-button:active { background: var(--asp-red-dark); color: var(--asp-white); }
.asp-button-outline .elementor-button { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); color: var(--asp-white); }
.asp-button-outline .elementor-button:hover { border-color: var(--asp-white); background: var(--asp-white); color: var(--asp-blue); box-shadow: 0 7px 18px rgba(20, 31, 51, .14); }
.asp-button-outline .elementor-button:active { background: var(--asp-blue-wash); color: var(--asp-blue); }
.asp-button-red .elementor-button { background: var(--asp-red-deep); color: var(--asp-white); box-shadow: 0 7px 18px rgba(249, 56, 34, .2); }
.asp-button-red .elementor-button:hover { background: var(--asp-red-dark); color: var(--asp-white); box-shadow: 0 9px 21px rgba(217, 45, 22, .22); }
.asp-button-red .elementor-button:active { background: var(--asp-red-dark); color: var(--asp-white); }
.asp-button-light .elementor-button { background: var(--asp-white); color: var(--asp-blue); }
.asp-button-light .elementor-button:hover { border-color: #c4d2ec; background: var(--asp-blue-wash); color: var(--asp-blue-deep); box-shadow: 0 8px 20px rgba(20, 31, 51, .16); }
.asp-button-light .elementor-button:active { background: #dde5f4; color: var(--asp-blue-dark); }

/* Elementor 4 zet op elke container `z-index: var(--z-index)` met `--z-index: revert`.
   Die regel staat op `.e-con`, dezelfde specificiteit als een enkele eigen klasse, en
   laadt na dit bestand. Elke z-index die hieronder op een container met een enkele
   klasse staat, verliest daardoor en de container komt op `auto` te staan. Zichtbaar
   gevolg: de header kreeg geen eigen laag meer, waardoor het uitgeklapte menu en het
   Oplossingen-paneel achter de hero vielen en geen klik meer aannamen.

   De klasse verdubbelen tilt de specificiteit boven `.e-con` uit zonder van Elementors
   klassenamen af te hangen. Beide eigenschappen staan er: de variabele voor Elementors
   eigen regel, de losse z-index voor als die regel ooit verdwijnt. Selectors met twee
   klassen (.asp-process > .asp-shell) winnen al en staan hier niet bij. */
.asp-header.asp-header { --z-index: 30; z-index: 30; }
.asp-hero-grid.asp-hero-grid { --z-index: 2; z-index: 2; }
.asp-solution-content.asp-solution-content { --z-index: 2; z-index: 2; }
.asp-contact-inner.asp-contact-inner { --z-index: 1; z-index: 1; }
.asp-project-facts-grid.asp-project-facts-grid { --z-index: 3; z-index: 3; }

.asp-header {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  z-index: 30;
  width: 100%;
  min-height: 96px;
  padding: 17px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: var(--asp-blue);
  box-shadow: 0 8px 24px rgba(9, 29, 62, .13);
  overflow: visible !important;
}
.asp-header-inner {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  /* De header liep tot 22 px van de schermrand terwijl elke pagina eronder op de
     shell van 1180 px staat. Logo en menu lijnen nu uit met de content. De klasse
     asp-shell staat al op dit element; hier stonden alleen de overrides die hem
     buitenspel zetten. */
  overflow: visible !important;
}
.asp-logo-widget { width: 190px !important; flex: 0 0 190px !important; }
.asp-logo-widget img { width: 190px !important; height: auto; }
.asp-nav-widget { width: auto !important; margin-left: auto !important; overflow: visible !important; }
.asp-nav-widget .elementor-widget-container { position: static; overflow: visible !important; }
.asp-nav { display: flex; align-items: center; gap: 24px; }
.asp-nav a { color: rgba(255, 255, 255, .94); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.asp-nav a:hover, .asp-nav a:focus-visible { color: var(--asp-white); }
.asp-nav a:active { color: var(--asp-white); transform: translateY(1px); }
.asp-nav > a.is-active { color: var(--asp-white); }
.asp-nav-dropdown { position: relative; }
.asp-nav-dropdown > summary { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .94); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; list-style: none; transition: color .18s ease; }
.asp-nav-dropdown > summary::-webkit-details-marker { display: none; }
.asp-nav-dropdown > summary:hover,
.asp-nav-dropdown > summary:focus-visible,
.asp-nav-dropdown.is-active > summary,
.asp-nav-dropdown[open] > summary { color: var(--asp-white); }
.asp-nav-dropdown > summary span { display: inline-block; font-size: 16px; line-height: 1; transition: transform .18s ease; }
.asp-nav-dropdown[open] > summary span { transform: rotate(180deg); }
.asp-nav-panel { position: absolute; top: calc(100% + 24px); left: -24px; z-index: 40; width: 650px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 16px; border: 1px solid rgba(0, 48, 135, .12); border-radius: 12px; background: var(--asp-white); box-shadow: 0 24px 60px rgba(9, 29, 62, .24); }
.asp-nav-panel::before { content: ""; position: absolute; top: -24px; left: 0; width: 100%; height: 24px; }
.asp-nav-panel a { display: grid; gap: 5px; padding: 15px 16px; border-radius: 8px; color: var(--asp-navy); white-space: normal; }
.asp-nav-panel a:hover,
.asp-nav-panel a:focus-visible,
.asp-nav-panel a.is-active { background: var(--asp-blue-wash); color: var(--asp-blue); transform: none; }
.asp-nav-panel a strong { font-size: 15px; line-height: 1.2; }
.asp-nav-panel a span { color: var(--asp-muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.asp-nav-chevron { margin-left: 5px; font-size: 15px; }
.asp-nav .asp-nav-cta { padding: 15px 25px; border: 0; border-radius: 999px; background: var(--asp-red-deep); color: var(--asp-white); text-transform: uppercase; }
.asp-nav .asp-nav-cta:hover, .asp-nav .asp-nav-cta:focus-visible { background: var(--asp-red-dark); color: var(--asp-white); box-shadow: 0 7px 18px rgba(12, 23, 40, .18); }
.asp-nav .asp-nav-cta:active { background: var(--asp-red-dark); color: var(--asp-white); }
.asp-nav-icons { display: flex; align-items: center; gap: 16px; }
.asp-nav-icons svg { width: 26px; height: 26px; fill: none; stroke: var(--asp-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asp-menu-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.asp-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 13px 11px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  background: rgba(20, 31, 51, .34);
  cursor: pointer;
}
.asp-menu-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--asp-white); transition: transform .2s ease, opacity .2s ease; }
.asp-menu-toggle:hover { border-color: var(--asp-white); background: rgba(255, 255, 255, .12); }
.asp-menu-toggle:active { transform: scale(.96); background: rgba(255, 255, 255, .2); }
.asp-mobile-dock-widget { display: none !important; }
.asp-mobile-dock { display: grid; grid-template-columns: 1fr 1fr; }
.asp-mobile-dock a { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; color: var(--asp-white); text-align: center; text-decoration: none; }
.asp-mobile-dock a:first-child { background: var(--asp-blue-deep); }
.asp-mobile-dock a:last-child { background: var(--asp-red-deep); }
.asp-mobile-dock span { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .74; }
.asp-mobile-dock strong { font-size: 13px; line-height: 1.2; }

.asp-hero {
  display: block !important;
  overflow: hidden;
  padding: 56px 0 72px !important;
  background: linear-gradient(180deg, var(--asp-blue-wash) 0%, #f8fafd 100%);
}
.asp-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -250px;
  top: -260px;
  border: 1px solid rgba(0, 48, 135, .18);
  border-radius: 50%;
}
.asp-hero::after { display: none; }
.asp-hero-grid {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 40px)) !important;
  max-width: 1320px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  min-height: 650px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(20, 31, 51, .16);
}
.asp-hero-copy {
  justify-content: center !important;
  padding: 70px 64px !important;
  gap: 24px !important;
  background: linear-gradient(145deg, var(--asp-blue), var(--asp-blue-deep));
}
.asp-hero-title .elementor-heading-title {
  color: var(--asp-white);
  max-width: 650px;
  font-size: clamp(44px, 4vw, 60px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.01;
}
.asp-hero-title .elementor-heading-title span { color: var(--asp-red); }
.asp-hero-lead, .asp-hero-lead .elementor-widget-container { max-width: 610px; color: rgba(255, 255, 255, .76) !important; font-size: 18px; line-height: 1.62; }
.asp-hero-actions { margin-top: 5px; }
.asp-hero-proof {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  margin-top: 15px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.asp-hero-proof-item { padding-right: 16px !important; }
.asp-hero-proof-item + .asp-hero-proof-item { padding-left: 18px !important; border-left: 1px solid rgba(255, 255, 255, .18); }
.asp-hero-proof-item strong { display: block; color: var(--asp-white); font-size: 24px; line-height: 1; }
.asp-hero-proof-item span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .58); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.asp-hero-media { position: relative; min-width: 0; overflow: hidden; background: var(--asp-navy); }
.asp-hero-image { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.asp-hero-image .elementor-widget-container, .asp-hero-image img { width: 100%; height: 100% !important; }
.asp-hero-image img { object-fit: cover; object-position: 42% center; }
/* Videobanner in het beeldvlak van de hero. De foto blijft eronder liggen als
   terugval wanneer de video geblokkeerd wordt of nog laadt. De iframe vult het vlak
   met container-units; de twee regels ervoor zijn de terugval voor browsers die die
   units niet kennen. Autoplay staat aan en is gedempt, dus hoort er een knop bij om
   het beeld stil te zetten (WCAG 2.2.2). */
.asp-hero-video-widget { position: absolute !important; inset: 0; z-index: 1; width: 100% !important; height: 100% !important; }
.asp-hero-video { container-type: size; position: absolute; inset: 0; overflow: hidden; }
.asp-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Elementor zet `max-width: 100%; width: 100%` op elke iframe met dezelfde
     specificiteit als deze regel en laadt later; zonder !important knijpt dat de
     berekende breedte terug en krijg je zwarte balken in plaats van een gevuld vlak.
     De eerste twee regels zijn de terugval voor browsers zonder container-units. */
  width: 100% !important;
  height: 100% !important;
  width: max(100cqw, calc(100cqh * 16 / 9)) !important;
  height: max(100cqh, calc(100cqw * 9 / 16)) !important;
  max-width: none !important;
  max-height: none !important;
  border: 0;
  /* De speler zet zijn eigen titelbalk en logo over de video heen; die noemt het
     YouTube-kanaal waar de opname vandaan komt en dat hoort niet in de hero van ASP
     Noard. Door de iframe groter te schalen dan het vlak vallen die randen weg. De
     live site doet hetzelfde met een dekkende kleurlaag. */
  transform: translate(-50%, -50%) scale(1.42);
  pointer-events: none;
}
.asp-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 28, 59, .22), rgba(8, 28, 59, .42));
  pointer-events: none;
}
.asp-hero-video .asp-hero-video-toggle {
  /* hello-elementor styleert elke <button> met dezelfde specificiteit als een enkele
     klasse en laadt na dit bestand; vandaar de tweede klasse in de selector. */
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(9, 29, 62, .55);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.asp-hero-video .asp-hero-video-toggle:hover, .asp-hero-video .asp-hero-video-toggle:focus-visible { border-color: var(--asp-white); background: rgba(9, 29, 62, .78); }
.asp-hero-video .asp-hero-video-toggle span { width: 14px; height: 14px; display: block; border-left: 4px solid var(--asp-white); border-right: 4px solid var(--asp-white); }
.asp-hero-video .asp-hero-video-toggle[data-state="paused"] span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-right: 0;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--asp-white);
}

.asp-hero-badge {
  position: absolute !important;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  width: auto !important;
  max-width: 265px;
  padding: 18px 22px !important;
  border-left: 4px solid var(--asp-red);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 38px rgba(20, 31, 51, .22);
}
.asp-hero-badge span { display: block; color: var(--asp-blue); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.asp-hero-badge strong { display: block; margin-top: 5px; color: var(--asp-navy); font-size: 17px; line-height: 1.25; }

.asp-focus { background: var(--asp-white); }
.asp-focus-card-grid { gap: 24px !important; }
.asp-card-grid { display: grid !important; align-items: stretch !important; gap: 20px !important; }
.asp-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asp-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--asp-radius);
  background: var(--asp-white);
  box-shadow: 0 13px 40px rgba(20, 31, 51, .09);
  transition: transform .25s ease, box-shadow .25s ease;
}
.asp-card:hover { transform: translateY(-4px); box-shadow: var(--asp-shadow); }
.asp-card-image { flex: 0 0 auto; overflow: hidden; }
.asp-card-image img { width: 100%; height: 280px; object-fit: cover; transition: transform .35s ease; }
.asp-card:hover .asp-card-image img { transform: scale(1.025); }
.asp-card-body { flex: 1 1 auto; min-height: 350px; display: grid !important; grid-template-rows: auto minmax(62px, auto) minmax(84px, 1fr) auto; align-content: stretch !important; align-items: start !important; padding: 30px !important; gap: 16px !important; }
.asp-card-title { min-height: 62px; }
.asp-card-title .elementor-heading-title { color: var(--asp-navy); font-size: 27px; font-weight: 800; line-height: 1.13; }
.asp-card-body .asp-copy { min-height: 84px; flex-grow: 0; }
.asp-card-body .asp-copy, .asp-card-body .asp-copy .elementor-widget-container { font-size: 16px; line-height: 1.62; }
.asp-text-link { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; align-self: stretch; margin-top: auto !important; text-align: left !important; }
.asp-text-link .elementor-button-wrapper { width: 100% !important; display: flex !important; justify-content: flex-start !important; text-align: left !important; }
body.asp-staging-site .asp-text-link.elementor-widget-button { width: 100% !important; display: block !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 0 !important; padding-left: 0 !important; text-align: left !important; }
body.asp-staging-site .asp-text-link.elementor-widget-button > .elementor-button { width: max-content !important; display: inline-flex !important; margin-right: 0 !important; margin-left: 0 !important; text-align: left !important; }
.asp-card-body > .asp-text-link { align-self: end !important; justify-self: stretch !important; margin: 0 !important; padding: 0 !important; }
.asp-card-body > .asp-text-link .elementor-widget-container,
.asp-card-body > .asp-text-link .elementor-button-wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.asp-card-body > .asp-text-link .elementor-button { margin-right: auto !important; margin-left: 0 !important; }
body.asp-staging-site .asp-card-body > .asp-text-link.elementor-widget-button,
body.asp-staging-site .asp-project-body > .asp-text-link.elementor-widget-button { width: 100% !important; display: block !important; justify-self: stretch !important; align-self: end !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
body.asp-staging-site .asp-card-body > .asp-text-link.elementor-widget-button > .elementor-button,
body.asp-staging-site .asp-project-body > .asp-text-link.elementor-widget-button > .elementor-button { width: max-content !important; display: inline-flex !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.asp-text-link .elementor-button {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--asp-blue);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  box-shadow: none;
  margin: 0 !important;
  align-self: flex-start;
  flex: 0 0 auto !important;
}
.asp-text-link .elementor-button-content-wrapper { width: auto !important; display: inline-flex; align-items: center; justify-content: flex-start !important; flex: 0 0 auto !important; flex-grow: 0 !important; }
.asp-text-link .elementor-button::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-top: 2px solid var(--asp-red);
  border-right: 2px solid var(--asp-red);
  transform: rotate(45deg);
  transition: border-color .18s ease, transform .18s ease;
}
.asp-text-link .elementor-button:hover { color: var(--asp-red-deep); transform: translateX(3px); }
.asp-text-link .elementor-button:hover::after { border-color: var(--asp-red-deep); transform: translateX(2px) rotate(45deg); }
.asp-text-link .elementor-button:active { color: var(--asp-red-dark); transform: translateX(1px); }

.asp-about { background: var(--asp-white); }
.asp-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center !important;
  gap: 76px !important;
}
.asp-split-copy { gap: 24px !important; }
.asp-split-media { position: relative; min-width: 0; }
.asp-rounded-image img { width: 100%; min-height: 550px; max-height: 650px; object-fit: cover; border-radius: var(--asp-radius); box-shadow: var(--asp-shadow); }
.asp-image-badge {
  position: absolute !important;
  right: -22px;
  bottom: 30px;
  width: 174px !important;
  min-height: 174px;
  display: grid;
  place-items: center;
  padding: 25px;
  border-radius: 50%;
  background: var(--asp-red-deep);
  color: var(--asp-white);
  text-align: center;
  transform: rotate(-6deg);
  box-shadow: 0 16px 35px rgba(249, 56, 34, .3);
}
.asp-image-badge strong { display: block; font-size: 36px; line-height: 1; }
.asp-image-badge span { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.asp-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch !important; gap: 10px !important; }
.asp-stat { height: 100%; padding: 17px !important; border: 1px solid var(--asp-line); border-radius: 8px; background: var(--asp-light); }
.asp-stat strong { display: block; color: var(--asp-blue); font-size: 26px; line-height: 1; }
.asp-stat span { display: block; margin-top: 7px; color: var(--asp-muted); font-size: 12px; font-weight: 700; }

.asp-process { background: var(--asp-blue); color: var(--asp-white); }
.asp-process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 16%, rgba(249, 56, 34, .16), transparent 28%);
}
.asp-process > .asp-shell { position: relative; z-index: 1; }
.asp-process-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch !important; gap: 1px !important; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--asp-radius); background: rgba(255, 255, 255, .16); }
.asp-process-step {
  --asp-step-icon: none;
  height: 100%;
  min-height: 260px;
  padding: 30px !important;
  gap: 15px !important;
  background: rgba(20, 31, 51, .44);
  transition: background-color .2s ease, transform .2s ease;
}
.asp-process-step:hover { background: rgba(20, 31, 51, .62); }
.asp-process-step .asp-step-copy { margin-top: auto; }
.asp-process-step:nth-child(1) { --asp-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f93822' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a4 4 0 0 1-4 4H8l-5 3v-7a4 4 0 0 1-1-3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v5a4 4 0 0 1-1 3Z'/%3E%3Cpath d='M7 8h10M7 12h6'/%3E%3C/svg%3E"); }
.asp-process-step:nth-child(2) { --asp-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f93822' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.asp-process-step:nth-child(3) { --asp-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f93822' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.7 6.3 3-3a4 4 0 0 1-5 5l-7.4 7.4a2 2 0 0 0 2.8 2.8l7.4-7.4a4 4 0 0 1 5-5l-3 3'/%3E%3Cpath d='m5 19-2 2'/%3E%3C/svg%3E"); }
.asp-process-step:nth-child(4) { --asp-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f93822' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/svg%3E"); }
/* Het icoon zat op .elementor-widget-container; die wrapper bestaat sinds Elementor 4
   niet meer, waardoor er alleen een kaal nummer overbleef. De styling staat nu op de
   widget zelf. Het nummer blijft naast het icoon staan: het is een stappenplan, en de
   volgorde is de helft van de boodschap. */
.asp-step-number {
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
}
.asp-step-number::before {
  content: "";
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(249, 56, 34, .38);
  border-radius: 14px;
  background-color: rgba(249, 56, 34, .1);
  background-image: var(--asp-step-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.asp-process-step:hover .asp-step-number::before {
  border-color: rgba(249, 56, 34, .72);
  background-color: rgba(249, 56, 34, .16);
  transform: translateY(-2px);
}
.asp-step-title .elementor-heading-title { color: var(--asp-white); font-size: 29px; font-weight: 800; }
.asp-step-copy, .asp-step-copy .elementor-widget-container { color: rgba(255, 255, 255, .68); font-size: 15px; line-height: 1.6; }
.asp-process-detail {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: stretch !important;
  gap: 0 !important;
  margin-top: 34px;
  overflow: hidden;
  border-radius: var(--asp-radius);
  background: var(--asp-white);
  box-shadow: 0 24px 60px rgba(7, 22, 48, .25);
}
.asp-process-detail-copy { justify-content: center !important; padding: 48px !important; gap: 18px !important; }
.asp-process-detail-title .elementor-heading-title { color: var(--asp-navy); font-size: clamp(30px, 3.2vw, 43px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.asp-process-detail-image, .asp-process-detail-image .elementor-widget-container { height: 100%; }
.asp-process-detail-image img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; }

.asp-products { background: var(--asp-white); }

.asp-showcase { overflow: hidden; background: linear-gradient(180deg, var(--asp-white), var(--asp-blue-wash)); }
.asp-pro-slider {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 31, 51, .16);
}
.asp-pro-slider .swiper-slide { overflow: hidden; }
.asp-pro-slider .swiper-slide-inner { background: linear-gradient(90deg, rgba(7, 30, 66, .48), rgba(7, 30, 66, .04)); }
.asp-pro-slider .swiper-slide-contents { text-align: left; }
.asp-pro-slider .elementor-slide-heading { max-width: 680px; margin-bottom: 18px; color: var(--asp-white); font-size: clamp(39px, 4vw, 58px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-shadow: 0 3px 18px rgba(7, 22, 48, .28); }
.asp-pro-slider .elementor-slide-description { max-width: 650px; margin-bottom: 28px; color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.65; }
.asp-pro-slider .elementor-slide-button { min-height: 52px; display: inline-flex; align-items: center; padding: 0 24px; border: 0; border-radius: 6px; background: var(--asp-red); color: var(--asp-white); font-size: 14px; font-weight: 800; box-shadow: 0 7px 18px rgba(249, 56, 34, .2); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.asp-pro-slider .elementor-slide-button:hover { transform: translateY(-1px); background: var(--asp-red-deep); color: var(--asp-white); box-shadow: 0 9px 21px rgba(217, 45, 22, .22); }
.asp-pro-slider .elementor-slide-button:active { transform: translateY(1px) scale(.985); background: var(--asp-red-dark); }
.asp-pro-slider .elementor-swiper-button { position: absolute; top: 50% !important; width: 44px; height: 44px; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(11, 35, 72, .52); color: var(--asp-white); line-height: 0; transform: translateY(-50%) !important; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.asp-pro-slider .elementor-swiper-button-prev { left: 22px !important; }
.asp-pro-slider .elementor-swiper-button-next { right: 22px !important; }
.asp-pro-slider .elementor-swiper-button svg { position: absolute !important; top: 50% !important; left: 50% !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; fill: currentColor; }
.asp-pro-slider .elementor-swiper-button:hover { border-color: var(--asp-red); background: rgba(249, 56, 34, .72); transform: translateY(-50%) scale(1.04) !important; }
.asp-pro-slider .swiper-pagination-bullet { width: 9px; height: 9px; background: rgba(255, 255, 255, .65); opacity: 1; }
.asp-pro-slider .swiper-pagination-bullet-active { width: 28px; border-radius: 99px; background: var(--asp-red); }

.asp-testimonials { position: relative; overflow: hidden; background: var(--asp-navy); }
.asp-testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 31, 51, .98), rgba(0, 48, 135, .82)), url('/wp-content/uploads/asp-staging/asp-hero-source.jpg') center / cover no-repeat;
  opacity: .95;
}
.asp-testimonials > .asp-shell { position: relative; z-index: 1; gap: 34px !important; }
.asp-testimonial-grid { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr; align-items: stretch !important; gap: 16px !important; }
.asp-testimonial-card { height: 100%; min-height: 250px; justify-content: flex-end; padding: 30px !important; gap: 14px !important; border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--asp-radius); background: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.asp-testimonial-card:hover { transform: translateY(-3px); border-color: rgba(249, 56, 34, .5); background: rgba(255, 255, 255, .12); }
.asp-testimonial-featured { background: var(--asp-red); border-color: var(--asp-red); }
.asp-testimonial-featured:hover { border-color: #ff7566; background: var(--asp-red-deep); }
.asp-testimonial-card .asp-quote-copy { margin-top: auto; }
.asp-quote-text, .asp-quote-text .elementor-widget-container { color: var(--asp-white); font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.asp-quote-copy, .asp-quote-copy .elementor-widget-container { color: rgba(255, 255, 255, .68); font-size: 14px; line-height: 1.55; }

.asp-solutions { background: var(--asp-light); }
.asp-solution-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch !important; gap: 16px !important; }
.asp-solution-tile { position: relative; isolation: isolate; height: 100%; min-height: 320px; display: flex !important; flex-direction: column !important; overflow: hidden; justify-content: flex-end !important; border-radius: var(--asp-radius); background: var(--asp-navy); box-shadow: 0 10px 28px rgba(20, 31, 51, .11); transition: transform .22s ease, box-shadow .22s ease; }
.asp-solution-tile:hover { transform: none; box-shadow: 0 13px 32px rgba(20, 31, 51, .15); }
.asp-solution-image { position: absolute !important; z-index: 0; inset: 0; width: 100% !important; height: 100% !important; min-height: 100% !important; }
.asp-solution-image .elementor-widget-container { width: 100%; height: 100% !important; }
.asp-solution-image::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(8, 28, 59, .48), rgba(8, 28, 59, .7)); pointer-events: none; transition: background .2s ease; }
.asp-solution-image img { width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover; transition: transform .35s ease; }
.asp-solution-tile:hover .asp-solution-image::after { background: linear-gradient(180deg, rgba(8, 28, 59, .56), rgba(8, 28, 59, .78)); }
.asp-solution-tile:hover .asp-solution-image img { transform: none; }
.asp-solution-content { position: relative; z-index: 2; width: 100% !important; height: 100%; min-height: 320px; display: grid !important; grid-template-rows: minmax(64px, auto) auto; align-content: center !important; justify-items: center !important; gap: 16px !important; padding: 32px 24px !important; color: var(--asp-white); text-align: center; opacity: 1; }
.asp-solution-title { position: static; width: 100% !important; min-height: 64px; display: flex; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; text-align: center; }
.asp-solution-title .elementor-heading-title { width: 100%; color: var(--asp-white) !important; font-size: 27px; font-weight: 800; line-height: 1.05; text-align: center; text-shadow: 0 2px 14px rgba(7, 22, 48, .7); opacity: 1; }
.asp-solution-link { position: static; width: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; text-align: center !important; }
.asp-solution-link .elementor-widget-container,
.asp-solution-link .elementor-button-wrapper { width: 100% !important; display: flex !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
body.asp-staging-site .asp-solution-link.elementor-widget-button { width: auto !important; display: block !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; text-align: center !important; }
body.asp-staging-site .asp-solution-link.elementor-widget-button > .elementor-button { width: max-content !important; display: inline-flex !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; }
.asp-solution-link .elementor-button { width: auto !important; display: inline-flex; align-items: center; justify-content: center; align-self: center; flex: 0 0 auto !important; gap: 8px; margin: 0 auto !important; padding: 0; background: none; color: var(--asp-white) !important; font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap; text-shadow: 0 2px 10px rgba(7, 22, 48, .72); box-shadow: none; opacity: 1; }
.asp-solution-link .elementor-button-content-wrapper { width: auto !important; display: inline-flex; align-items: center; justify-content: flex-start !important; flex: 0 0 auto !important; flex-grow: 0 !important; }
.asp-solution-link .elementor-button::after { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-top: 2px solid var(--asp-red); border-right: 2px solid var(--asp-red); transform: rotate(45deg); transition: border-color .18s ease, transform .18s ease; }
.asp-solution-link .elementor-button:hover { color: var(--asp-white) !important; transform: translateX(3px); }
.asp-solution-link .elementor-button:hover::after { border-color: var(--asp-red); transform: translateX(2px) rotate(45deg); }
.asp-solution-link .elementor-button:active { color: rgba(255, 255, 255, .8); transform: translateX(1px); }
.asp-solution-link .elementor-button:focus-visible { outline: 2px solid var(--asp-red); outline-offset: 5px; border-radius: 2px; }

.asp-tour { position: relative; overflow: hidden; background: var(--asp-navy); }
.asp-tour::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 5% 75%, rgba(0, 48, 135, .9), transparent 42%); }
.asp-tour > .asp-shell { position: relative; z-index: 1; }
.asp-tour .asp-rounded-image img { min-height: 500px; }
.asp-tour-list ul { margin: 22px 0 0; padding: 0; list-style: none; }
.asp-tour-list li { position: relative; margin: 11px 0; padding-left: 25px; }
.asp-tour-list li::before { content: "›"; position: absolute; left: 0; color: var(--asp-red); font-size: 23px; font-weight: 900; line-height: 1; }

.asp-projects { background: var(--asp-white); }
.asp-project-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch !important; gap: 22px !important; }
.asp-project-card { display: flex !important; flex-direction: column !important; height: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--asp-line); border-radius: var(--asp-radius); background: var(--asp-white); box-shadow: 0 10px 30px rgba(20, 31, 51, .08); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.asp-project-card:hover { transform: translateY(-4px); border-color: rgba(249, 56, 34, .32); box-shadow: 0 17px 38px rgba(20, 31, 51, .13); }
.asp-project-image { height: 280px !important; min-height: 280px !important; flex: 0 0 280px !important; overflow: hidden; }
.asp-project-image .elementor-widget-container { width: 100%; height: 100% !important; }
.asp-project-image img { width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover; transition: transform .35s ease; }
.asp-project-card:hover .asp-project-image img { transform: scale(1.025); }
.asp-project-body { flex: 1 1 auto; min-height: 330px; display: grid !important; grid-template-rows: auto minmax(58px, auto) minmax(96px, 1fr) auto; align-content: stretch !important; align-items: start !important; padding: 26px !important; gap: 12px !important; }
.asp-project-title { min-height: 58px; }
.asp-project-body .asp-project-copy { min-height: 96px; margin: 0; }
.asp-project-body > .asp-text-link { align-self: end !important; justify-self: stretch !important; margin: 0 !important; padding: 0 !important; }
.asp-project-body > .asp-text-link .elementor-widget-container,
.asp-project-body > .asp-text-link .elementor-button-wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.asp-project-body > .asp-text-link .elementor-button { margin-right: auto !important; margin-left: 0 !important; }
.asp-project-title .elementor-heading-title { color: var(--asp-navy); font-size: 27px; font-weight: 800; line-height: 1.08; }
.asp-project-copy, .asp-project-copy .elementor-widget-container { color: var(--asp-muted); font-size: 15px; line-height: 1.6; }

.asp-partners { padding: 70px 0 !important; background: var(--asp-light); }
.asp-partners-title .elementor-heading-title { color: var(--asp-navy); font-size: 22px; font-weight: 800; text-align: center; }
.asp-partner-row { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch !important; gap: 24px !important; margin-top: 38px; }
.asp-partner-logo { width: 100% !important; height: 104px; display: grid; place-items: center; padding: 16px !important; border: 1px solid rgba(0, 48, 135, .08); border-radius: 10px; background: rgba(255, 255, 255, .68); }
.asp-partner-logo .elementor-widget-container { width: 170px; height: 64px; display: grid; place-items: center; }
.asp-partner-logo img { width: 170px !important; height: 64px !important; max-width: 170px !important; max-height: 64px !important; object-fit: contain; filter: grayscale(1); opacity: .64; transition: filter .22s ease, opacity .22s ease, transform .22s ease; }
.asp-partner-logo:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.035); }

.asp-news { background: var(--asp-blue-wash); }
.asp-news-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 500px; align-items: center !important; gap: 72px !important; }
.asp-news-copy { max-width: 560px !important; gap: 22px !important; }
.asp-facebook-feed { width: 500px !important; max-width: 100%; min-width: 0; justify-self: end; overflow: hidden; border: 1px solid rgba(0, 48, 135, .12); border-radius: 14px; background: var(--asp-white); box-shadow: 0 15px 36px rgba(20, 31, 51, .1); }
.asp-facebook-frame { width: 100%; min-height: 620px; display: flex; align-items: stretch; justify-content: center; overflow: hidden; background: var(--asp-white); }
.asp-facebook-frame iframe { width: 100% !important; max-width: 500px; min-height: 620px; }

.asp-contact {
  position: relative;
  overflow: hidden;
  display: block !important;
  padding: 94px 0 !important;
  background: var(--asp-blue) url('/wp-content/uploads/asp-staging/asp-cta-source.jpg') center 48% / cover no-repeat;
}
.asp-contact::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 31, 68, .94), rgba(0, 48, 135, .88) 60%, rgba(10, 30, 60, .72)); }
.asp-contact-inner { position: relative; z-index: 1; display: grid !important; grid-template-columns: 1fr auto; align-items: center !important; gap: 56px !important; }
.asp-contact-copy { max-width: 760px !important; gap: 18px !important; padding: 38px 42px !important; border-left: 4px solid var(--asp-red); border-radius: 10px; background: rgba(7, 27, 59, .82); box-shadow: 0 18px 44px rgba(7, 22, 48, .2); backdrop-filter: blur(5px); }
.asp-contact-copy .asp-kicker, .asp-contact-copy .asp-copy { color: rgba(255, 255, 255, .88) !important; }
.asp-contact-actions { align-items: stretch !important; justify-content: flex-end; }
.asp-contact-actions .asp-button, .asp-contact-actions .elementor-button { height: 100%; }

.asp-footer { display: block !important; padding: 64px 0 28px !important; background: #0c1728; color: var(--asp-white); }
.asp-footer-grid { display: grid !important; grid-template-columns: 1.35fr .75fr .75fr .9fr; align-items: start !important; gap: 54px !important; }
.asp-footer-brand { gap: 18px !important; }
.asp-footer-logo { width: 170px !important; }
.asp-footer-logo img { width: 170px !important; height: auto; }
.asp-footer-copy, .asp-footer-copy .elementor-widget-container { max-width: 390px; color: rgba(255, 255, 255, .56); font-size: 15px; line-height: 1.65; }
.asp-footer-title .elementor-heading-title { color: var(--asp-white); font-size: 16px; font-weight: 800; }
.asp-footer-column { gap: 17px !important; }
.asp-footer-links a, .asp-footer-links span { display: block; margin: 8px 0; color: rgba(255, 255, 255, .65); font-size: 14px; text-decoration: none; }
.asp-footer-links a:hover, .asp-footer-links a:focus-visible { color: var(--asp-white); transform: translateX(3px); }
.asp-footer-links a:active { color: var(--asp-white); transform: translateX(1px); }
.asp-footer-bottom { margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
/* op .38 haalde deze regel 3,55:1 tegen de donkere footer; .55 brengt hem op 6,08:1 */
.asp-footer-bottom, .asp-footer-bottom .elementor-widget-container { color: rgba(255, 255, 255, .55); font-size: 12px; }

/* Complete site pages */
.asp-subpage .asp-header { border-bottom-color: rgba(255, 255, 255, .1); }
.asp-page-hero {
  display: block !important;
  overflow: hidden;
  padding: 36px 0 72px !important;
  background: linear-gradient(180deg, var(--asp-blue) 0%, var(--asp-blue-deep) 100%);
}
.asp-page-hero-grid {
  display: grid !important;
  grid-template-columns: 1.02fr .98fr;
  min-height: 570px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--asp-blue);
  box-shadow: 0 20px 55px rgba(9, 29, 62, .22);
}
.asp-page-hero-copy {
  justify-content: center !important;
  gap: 26px !important;
  padding: 72px 62px !important;
}
.asp-page-hero-title .elementor-heading-title {
  max-width: 760px;
  margin: 0;
  color: var(--asp-white);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
}
.asp-page-hero-intro,
.asp-page-hero-intro .elementor-widget-container {
  max-width: 650px;
  color: rgba(255, 255, 255, .78);
  font-size: 19px;
  line-height: 1.65;
}
.asp-page-hero-image,
/* In de paginakop is de tekstkolom smaller dan op de homepage, waardoor
   "Vraag een offerte aan" over twee regels brak. De knoppen zijn hier een maat
   compacter zodat ze naast elkaar passen; wrapt het toch, dan gaan ze onder elkaar
   in plaats van dat de tekst breekt. */
.asp-page-hero-copy .asp-button-row { flex-wrap: wrap !important; gap: 11px !important; padding: 0 !important; }
/* Elementor geeft widgets in een container een flex-basis van 100%, waardoor elke knop
   een eigen regel pakte ook als er ruimte naast was. */
.asp-page-hero-copy .asp-button-row > .asp-button { flex: 0 0 auto !important; }
.asp-page-hero-copy .asp-button .elementor-button { padding: 14px 19px; white-space: nowrap; }

.asp-page-hero-image .elementor-widget-container,
.asp-page-hero-image img { height: 100% !important; }
.asp-page-hero-image { min-width: 0; overflow: hidden; }
.asp-page-hero-image img { width: 100%; object-fit: cover; transition: transform .5s ease; }
.asp-page-hero-grid:hover .asp-page-hero-image img { transform: scale(1.015); }

.asp-category-page .asp-page-overview-grid { border-color: rgba(255, 255, 255, .08); background: var(--asp-blue-deep); box-shadow: 0 15px 36px rgba(9, 29, 62, .18); }
.asp-category-page .asp-page-overview-item + .asp-page-overview-item { border-left-color: rgba(255, 255, 255, .12); }
.asp-category-page .asp-page-overview-title .elementor-heading-title { color: var(--asp-white); }
.asp-category-page .asp-page-overview-item .asp-text-link .elementor-button { color: var(--asp-white); }
.asp-category-page .asp-page-overview-item .asp-text-link .elementor-button:hover { color: rgba(255, 255, 255, .82); }
.asp-category-page .asp-page-overview-number,
.asp-category-page .asp-page-overview-number .elementor-widget-container { color: var(--asp-red); }
.asp-company-page .asp-page-hero-grid { grid-template-columns: .9fr 1.1fr; }
.asp-company-page .asp-page-hero-image img { filter: saturate(.86); }
.asp-product-page .asp-page-content { background: #f8fafd; }
.asp-product-page .asp-page-section-row { margin-bottom: 18px; padding: 42px 30px !important; border: 1px solid var(--asp-line); border-radius: 12px; background: var(--asp-white); }
.asp-product-page .asp-page-section-row:last-child { border-bottom: 1px solid var(--asp-line); }

.asp-project-facts { display: block !important; padding: 0 !important; background: var(--asp-white); }
.asp-project-facts-grid { position: relative; z-index: 3; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -42px !important; overflow: hidden; border: 1px solid var(--asp-line); border-radius: 12px; background: var(--asp-white); box-shadow: 0 14px 36px rgba(20, 31, 51, .11); }
.asp-project-fact { min-height: 132px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 24px !important; text-align: center; }
.asp-project-fact + .asp-project-fact { border-left: 1px solid var(--asp-line); }
.asp-project-fact strong { display: block; color: var(--asp-blue); font-size: 31px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.asp-project-fact span { display: block; color: var(--asp-muted); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.asp-project-facts + .asp-page-overview .asp-page-overview-grid { margin-top: 28px !important; }

.asp-page-overview { display: block !important; padding: 0 !important; background: var(--asp-white); }
.asp-page-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch !important;
  margin-top: -32px !important;
  border: 1px solid var(--asp-line);
  border-radius: 12px;
  background: var(--asp-white);
  box-shadow: 0 12px 34px rgba(20, 31, 51, .09);
}
.asp-page-overview-item {
  min-width: 0;
  min-height: 190px;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 30px !important;
}
.asp-page-overview-item + .asp-page-overview-item { border-left: 1px solid var(--asp-line); }
.asp-page-overview-number,
.asp-page-overview-number .elementor-widget-container { width: 16px !important; color: var(--asp-red); font-size: 0; line-height: 0; }
.asp-page-overview-number span,
.asp-page-section-number span { width: 10px; height: 10px; display: block; border-top: 3px solid var(--asp-red); border-right: 3px solid var(--asp-red); transform: rotate(45deg); }
.asp-page-overview-title { width: 100% !important; align-self: stretch !important; }
.asp-page-overview-title .elementor-heading-title { width: 100%; color: var(--asp-navy); font-size: 23px; font-weight: 800; line-height: 1.12; text-align: left; }
.asp-page-overview-item > .asp-text-link { --width: 100%; --align-self: stretch; --flex-grow: 0; width: 100% !important; max-width: none !important; flex: 0 0 auto !important; align-self: stretch !important; justify-self: stretch !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.asp-page-overview-item > .asp-text-link > .elementor-button { display: inline-flex !important; margin: 0 !important; }

.asp-page-content { display: block !important; padding: 110px 0 !important; background: var(--asp-white); }
.asp-page-content-heading { max-width: 720px; gap: 18px !important; margin-bottom: 62px; }
.asp-page-section-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 44px !important;
  padding: 48px 0 !important;
  border-top: 1px solid var(--asp-line);
  scroll-margin-top: 90px;
}
.asp-page-section-row:last-child { border-bottom: 1px solid var(--asp-line); }
.asp-page-section-number,
.asp-page-section-number .elementor-widget-container { width: 18px !important; color: var(--asp-red); font-size: 0; line-height: 0; }
.asp-page-section-number span { margin-top: 9px; }
.asp-page-section-copy { max-width: 780px !important; gap: 17px !important; }
.asp-page-section-title .elementor-heading-title { color: var(--asp-navy); font-size: clamp(30px, 3vw, 43px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.asp-page-section-text ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.asp-page-section-text li { position: relative; padding-left: 20px; color: var(--asp-ink); font-size: 15px; line-height: 1.45; }
.asp-page-section-text li::before { content: ""; position: absolute; top: .48em; left: 1px; width: 7px; height: 7px; border-top: 2px solid var(--asp-red); border-right: 2px solid var(--asp-red); transform: rotate(45deg); }
.asp-button-quiet { align-self: center; }
.asp-button-quiet .elementor-button { border-color: rgba(0, 48, 135, .22); background: transparent; color: var(--asp-blue); box-shadow: none; }
.asp-button-quiet .elementor-button:hover { border-color: var(--asp-blue); background: var(--asp-blue-wash); color: var(--asp-blue-deep); box-shadow: 0 7px 17px rgba(20, 31, 51, .08); }

/* Het middenstuk was op alle 43 subpagina's identiek opgebouwd. De productpagina's
   houden bewust dezelfde opbouw als elkaar (wens van de klant: de productlijn moet
   herkenbaar blijven), maar de bedrijfs- en categoriepagina's mogen een eigen ritme
   hebben. Vandaar drie verschillende opmaken van dezelfde rij:
   product = kaart, categorie = brede tekstrij met markering, bedrijf = titel links. */
@media (min-width: 901px) {
  .asp-company-page .asp-page-section-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start !important;
    gap: 10px 52px !important;
    max-width: none !important;
  }
  .asp-company-page .asp-page-section-title .elementor-heading-title { font-size: clamp(26px, 2.2vw, 33px); }
}
.asp-category-page .asp-page-section-row { padding-left: 26px !important; border-left: 3px solid var(--asp-red); }
.asp-category-page .asp-page-section-row:first-of-type { border-top: 0; }

/* Plekken die de klant zelf nog vult: de vier verkopers en de extra projecten.
   Bewust herkenbaar leeg, met een gestippelde rand en zonder verzonnen namen of
   foto's, zodat in een oogopslag te zien is wat er nog moet komen. */
.asp-team { background: var(--asp-light); }
.asp-team-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch !important; gap: 20px !important; }
.asp-project-open-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch !important; gap: 22px !important; }
.asp-team-card,
.asp-project-open-card {
  height: 100%;
  gap: 14px !important;
  padding: 18px !important;
  border: 2px dashed rgba(0, 48, 135, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
}
.asp-team-photo,
.asp-project-open-photo {
  width: 100% !important;
  min-height: 210px;
  display: grid !important;
  place-items: center;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(0, 48, 135, .05) 0 12px, rgba(0, 48, 135, .09) 12px 24px);
  color: var(--asp-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.asp-project-open-photo { min-height: 176px; }
.asp-team-name .elementor-heading-title,
.asp-project-open-title .elementor-heading-title { color: var(--asp-muted); font-size: 19px; font-weight: 800; }
.asp-team-region,
.asp-project-open-copy { color: var(--asp-muted); font-size: 14px; line-height: 1.5; }

.asp-page-related { display: block !important; padding: 96px 0 !important; background: var(--asp-light); }
.asp-page-related-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch !important; gap: 22px !important; }
.asp-page-related-card { height: 100%; overflow: hidden; border: 1px solid rgba(0, 48, 135, .1); border-radius: 12px; background: var(--asp-white); transition: transform .2s ease, box-shadow .2s ease; }
.asp-page-related-card:hover { transform: translateY(-3px); box-shadow: 0 15px 32px rgba(20, 31, 51, .11); }
.asp-page-related-image,
.asp-page-related-image .elementor-widget-container { height: 220px !important; overflow: hidden; }
.asp-page-related-image img { width: 100%; height: 220px !important; object-fit: cover; transition: transform .35s ease; }
.asp-page-related-card:hover .asp-page-related-image img { transform: scale(1.025); }
.asp-page-related-body { flex-grow: 1; gap: 22px !important; padding: 28px !important; }
.asp-page-related-title { flex-grow: 1; }
.asp-page-related-title .elementor-heading-title { color: var(--asp-navy); font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }

.asp-page-contact-band { display: block !important; padding: 78px 0 !important; background: linear-gradient(120deg, var(--asp-blue), var(--asp-blue-dark)); }
.asp-page-contact-band-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; gap: 50px !important; }
.asp-page-contact-band-copy { max-width: 760px !important; gap: 17px !important; }
.asp-page-contact-band .asp-section-title .elementor-heading-title { font-size: clamp(36px, 4vw, 54px); }

.asp-page-form-section { display: block !important; padding: 104px 0 !important; background: var(--asp-white); }
.asp-page-form-grid { display: grid !important; grid-template-columns: .8fr 1.2fr; align-items: start !important; gap: 80px !important; }
.asp-page-form-copy { position: sticky; top: 30px; gap: 20px !important; }
.asp-pro-form { padding: 38px !important; border: 1px solid var(--asp-line); border-radius: 12px; background: var(--asp-light); }
.asp-pro-form .elementor-form-fields-wrapper { row-gap: 18px; }
.asp-pro-form .elementor-field-label { margin-bottom: 7px; color: var(--asp-navy); font-size: 14px; font-weight: 800; }
.asp-pro-form .elementor-field,
.asp-pro-form select.elementor-field,
.asp-pro-form textarea.elementor-field { min-height: 52px; padding: 13px 15px; border: 1px solid rgba(0, 48, 135, .18); border-radius: 6px; background: var(--asp-white); color: var(--asp-ink); box-shadow: none; }
.asp-pro-form textarea.elementor-field { min-height: 150px; resize: vertical; }
.asp-pro-form .elementor-field:focus { border-color: var(--asp-blue); box-shadow: 0 0 0 3px rgba(0, 48, 135, .12); }
.asp-pro-form .elementor-button { min-height: 54px; padding: 0 26px; border: 0; border-radius: 6px; background: var(--asp-red-deep); color: var(--asp-white); font-weight: 800; box-shadow: 0 6px 15px rgba(217, 45, 22, .18); }
.asp-pro-form .elementor-button:hover { background: var(--asp-red-dark); transform: translateY(-1px); }

@media (min-width: 1025px) and (max-width: 1280px) {
  .asp-nav { gap: 13px; }
  .asp-nav a { font-size: 13px; }
  .asp-nav .asp-nav-cta { padding: 13px 17px; }
}

@media (max-width: 1024px) {
  .asp-section { padding: 82px 0 !important; }
  .asp-menu-toggle { display: block; }
  .asp-nav {
    position: absolute;
    top: 66px;
    right: 0;
    width: min(420px, calc(100vw - 40px));
    display: none;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(12, 23, 40, .98);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
  }
  .asp-nav-icons { padding: 10px 8px; }
  .asp-menu-state:checked ~ .asp-nav, .asp-nav.is-open { display: grid; }
  /* Met het Oplossingen-paneel open werd het menu hoger dan het scherm en vielen de
     onderste items (Contact, Offerte aanvragen) buiten beeld zonder dat er iets te
     scrollen viel. De nav krijgt daarom een eigen scrollgebied; 100dvh houdt rekening
     met de adresbalk van mobiele browsers. */
  .asp-nav { max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; }
  .asp-nav a { padding: 10px 8px; }
  .asp-nav-dropdown { width: 100%; }
  .asp-nav-dropdown > summary { padding: 10px 8px; }
  .asp-nav-panel { position: static; width: 100%; grid-template-columns: 1fr; margin-top: 5px; padding: 8px; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); box-shadow: none; }
  .asp-nav-panel::before { display: none; }
  .asp-nav-panel a { padding: 11px 12px; color: var(--asp-white); }
  .asp-nav-panel a:hover,
  .asp-nav-panel a:focus-visible,
  .asp-nav-panel a.is-active { background: rgba(255, 255, 255, .13); color: var(--asp-white); }
  .asp-nav-panel a span { color: rgba(255, 255, 255, .62); }
  .asp-nav .asp-nav-cta { margin-top: 6px; text-align: center; }
  .asp-menu-state:checked + .asp-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .asp-menu-state:checked + .asp-menu-toggle span:nth-child(2) { opacity: 0; }
  .asp-menu-state:checked + .asp-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .asp-hero-grid { grid-template-columns: 1fr; }
  .asp-hero-copy { padding: 64px !important; }
  .asp-hero-media { min-height: 480px; }
  .asp-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asp-card-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asp-card-grid-three > :last-child { grid-column: 1 / -1; }
  .asp-split { grid-template-columns: 1fr; gap: 50px !important; }
  .asp-split-reverse .asp-split-copy { order: 2; }
  .asp-split-reverse .asp-split-media { order: 1; }
  .asp-rounded-image img { min-height: 460px; }
  .asp-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asp-process-detail { grid-template-columns: 1fr; }
  .asp-process-detail-image img { min-height: 430px; }
  .asp-pro-slider .elementor-slide-heading { font-size: clamp(38px, 6vw, 52px); }
  .asp-testimonial-grid { grid-template-columns: 1fr 1fr; }
  .asp-testimonial-featured { grid-column: 1 / -1; }
  .asp-solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asp-project-grid { grid-template-columns: 1fr; }
  .asp-project-card { display: grid !important; grid-template-columns: .85fr 1.15fr; }
  .asp-project-image, .asp-project-image .elementor-widget-container, .asp-project-image img { height: 100% !important; }
  .asp-project-image { min-height: 320px !important; flex-basis: auto !important; }
  .asp-project-image img { min-height: 320px !important; }
  .asp-partner-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asp-contact-inner { grid-template-columns: 1fr; }
  .asp-contact-actions { justify-content: flex-start; }
  .asp-page-hero-grid { grid-template-columns: 1fr; }
  .asp-company-page .asp-page-hero-grid { grid-template-columns: 1fr; }
  .asp-page-hero-copy { padding: 62px 48px !important; }
  .asp-page-hero-image, .asp-page-hero-image .elementor-widget-container, .asp-page-hero-image img { height: 430px !important; }
  .asp-page-section-row { grid-template-columns: 1fr; }
  .asp-page-section-row > .asp-button-quiet { grid-column: 1; justify-self: start; }
  .asp-page-section-text ul { grid-template-columns: 1fr 1fr; }
  .asp-page-contact-band-inner { grid-template-columns: 1fr; }
  .asp-page-form-grid { grid-template-columns: 1fr; gap: 46px !important; }
  .asp-page-form-copy { position: static; }
  .asp-news-grid { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 46px !important; }
  .asp-news-copy,
  .asp-facebook-feed { width: 100% !important; max-width: 100% !important; }
  .asp-facebook-feed { justify-self: start; }
  .asp-facebook-frame,
  .asp-facebook-frame iframe { width: 100% !important; max-width: 100% !important; }
  .asp-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  body.asp-staging-site { padding-bottom: 62px; }
  .asp-shell { width: min(100% - 28px, 1180px) !important; }
  .asp-section { padding: 68px 0 !important; }
  .asp-section-title .elementor-heading-title { font-size: clamp(34px, 11vw, 47px); }
  .asp-header { min-height: 86px; padding: 16px 0 !important; }
  .asp-header-inner { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; }
  .asp-logo-widget, .asp-footer-logo { width: 142px !important; flex-basis: 142px !important; }
  .asp-logo-widget img, .asp-footer-logo img { width: 142px !important; }
  .asp-nav-widget { position: absolute !important; top: 50%; right: 0; width: 46px !important; flex: 0 0 46px !important; margin: 0 !important; transform: translateY(-50%); }
  .asp-menu-toggle { display: block !important; width: 46px; height: 46px; }
  .asp-mobile-dock-widget { position: fixed !important; right: 0; bottom: 0; left: 0; z-index: 90; width: 100% !important; display: block !important; }
  /* De snelcontactbalk staat hier vast onderin (51 px) en ligt met z-index 90 over het
     menu heen. Het menu stopt daar dus boven. */
  .asp-nav { max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); }
  .asp-mobile-dock { width: 100%; box-shadow: 0 -8px 24px rgba(9, 29, 62, .18); }
  .asp-hero { padding: 24px 0 54px !important; }
  .asp-hero::before { display: none; }
  .asp-hero-grid { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin-right: 10px !important; margin-left: 10px !important; border-radius: 16px; }
  .asp-hero-copy { width: 100% !important; max-width: 100% !important; min-width: 0; overflow: hidden; padding: 42px 24px !important; gap: 22px !important; }
  .asp-hero-copy > *, .asp-hero-copy .elementor-widget { width: 100% !important; min-width: 0; max-width: 100% !important; }
  .asp-hero-copy .asp-kicker, .asp-hero-copy .asp-hero-lead { overflow-wrap: anywhere; white-space: normal; }
  .asp-hero-title, .asp-hero-title .elementor-heading-title { width: 100%; max-width: 100%; }
  .asp-hero-title .elementor-heading-title { overflow-wrap: break-word; white-space: normal; font-size: 40px; line-height: 1.04; }
  .asp-hero-lead, .asp-hero-lead .elementor-widget-container { font-size: 16px; }
  .asp-hero-actions { display: grid !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .asp-hero-actions .asp-button, .asp-hero-actions .elementor-button { width: 100% !important; max-width: 100% !important; }
  .asp-hero-proof-item + .asp-hero-proof-item { padding-left: 12px !important; }
  .asp-hero-proof-item strong { font-size: 21px; }
  .asp-hero-proof-item span { font-size: 9px; }
  .asp-hero-media { display: block !important; height: 355px !important; min-height: 355px !important; }
  .asp-hero-badge { right: 16px; bottom: 16px; width: 200px !important; max-width: 200px; overflow: hidden; padding: 14px 16px !important; }
  .asp-hero-badge span { overflow-wrap: anywhere; font-size: 9px; }
  .asp-hero-badge strong { font-size: 15px; }
  .asp-focus-card-grid { grid-template-columns: 1fr; gap: 16px !important; }
  .asp-card-grid-three, .asp-solution-grid { grid-template-columns: 1fr; }
  .asp-card-grid-three > :last-child { grid-column: auto; }
  .asp-card-image img { height: 240px; }
  .asp-card-body { min-height: 0; padding: 25px !important; }
  .asp-card-body { grid-template-rows: auto auto auto auto; }
  .asp-card-body .asp-copy { min-height: 0; }
  .asp-card-title, .asp-project-title { min-height: 0; }
  .asp-rounded-image img { min-height: 380px; }
  .asp-image-badge { right: -4px; bottom: 18px; width: 138px !important; min-height: 138px; }
  .asp-image-badge strong { font-size: 29px; }
  .asp-stats { grid-template-columns: 1fr; }
  .asp-process-grid { grid-template-columns: 1fr; }
  .asp-process-step { min-height: 210px; }
  .asp-process-detail-copy { padding: 30px 24px !important; }
  .asp-process-detail-image img { min-height: 330px; }
  .asp-pro-slider { border-radius: 14px; }
  .asp-pro-slider .elementor-slide-heading { font-size: 36px; }
  .asp-pro-slider .elementor-slide-description { font-size: 16px; line-height: 1.55; }
  .asp-pro-slider .elementor-swiper-button { width: 38px; height: 38px; }
  .asp-pro-slider .elementor-swiper-button-prev { left: 12px !important; }
  .asp-pro-slider .elementor-swiper-button-next { right: 12px !important; }
  .asp-testimonial-grid { grid-template-columns: 1fr; }
  .asp-testimonial-featured { grid-column: auto; }
  .asp-project-card { display: flex !important; grid-template-columns: none; }
  .asp-project-body { min-height: 0; grid-template-rows: auto auto auto auto; }
  .asp-project-body .asp-project-copy { min-height: 0; }
  .asp-project-image, .asp-project-image .elementor-widget-container { height: 240px !important; min-height: 240px !important; }
  .asp-project-image { flex: 0 0 240px !important; }
  .asp-project-image img { height: 240px !important; min-height: 240px !important; }
  .asp-partner-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px !important; }
  .asp-partner-logo { height: 88px; padding: 12px !important; }
  .asp-partner-logo .elementor-widget-container { width: 130px; height: 50px; }
  .asp-partner-logo img { width: 130px !important; height: 50px !important; max-width: 130px !important; max-height: 50px !important; }
  .asp-contact { padding: 72px 0 !important; }
  .asp-contact-copy { padding: 30px 24px !important; }
  .asp-contact-actions { display: grid !important; width: 100% !important; }
  .asp-contact-actions .asp-button, .asp-contact-actions .elementor-button { width: 100% !important; }
  .asp-page-hero { padding: 18px 0 54px !important; }
  .asp-page-hero-grid { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; min-height: 0; margin-inline: 10px !important; border-radius: 14px; }
  .asp-page-hero-copy { min-width: 0; padding: 46px 24px !important; gap: 22px !important; }
  .asp-page-hero-title .elementor-heading-title { overflow-wrap: break-word; font-size: 42px; line-height: 1.01; }
  .asp-page-hero-intro, .asp-page-hero-intro .elementor-widget-container { font-size: 16px; line-height: 1.58; }
  .asp-page-hero-copy .asp-button-row { display: grid !important; width: 100% !important; }
  .asp-page-hero-copy .asp-button, .asp-page-hero-copy .elementor-button { width: 100% !important; }
  .asp-page-hero-image, .asp-page-hero-image .elementor-widget-container, .asp-page-hero-image img { height: 320px !important; }
  .asp-project-facts-grid { width: calc(100% - 28px) !important; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -28px !important; }
  .asp-project-fact { min-height: 104px; padding: 16px 8px !important; }
  .asp-project-fact strong { font-size: 19px; }
  .asp-project-fact span { font-size: 8px; letter-spacing: .07em; }
  .asp-team-grid, .asp-project-open-grid { grid-template-columns: 1fr; }
  .asp-page-overview-grid { grid-template-columns: 1fr; margin-top: -24px !important; }
  .asp-project-facts + .asp-page-overview .asp-page-overview-grid { margin-top: 20px !important; }
  .asp-page-overview-item { min-height: 0; padding: 24px !important; }
  .asp-page-overview-item + .asp-page-overview-item { border-top: 1px solid var(--asp-line); border-left: 0; }
  .asp-page-content { padding: 78px 0 !important; }
  .asp-page-content-heading { margin-bottom: 38px; }
  .asp-page-section-row { grid-template-columns: 1fr; gap: 18px !important; padding: 36px 0 !important; }
  .asp-page-section-row > .asp-button-quiet { grid-column: auto; }
  .asp-page-section-number, .asp-page-section-number .elementor-widget-container { font-size: 0; }
  .asp-page-section-title .elementor-heading-title { font-size: 32px; }
  .asp-page-section-text ul { grid-template-columns: 1fr; }
  .asp-page-related { padding: 72px 0 !important; }
  .asp-page-related-grid { grid-template-columns: 1fr; }
  .asp-page-related-image, .asp-page-related-image .elementor-widget-container, .asp-page-related-image img { height: 230px !important; }
  .asp-page-contact-band { padding: 66px 0 !important; }
  .asp-page-form-section { padding: 72px 0 !important; }
  .asp-pro-form { padding: 25px 20px !important; }
  .asp-pro-form .elementor-field-group { width: 100% !important; }
  .asp-facebook-frame, .asp-facebook-frame iframe { min-height: 560px; height: 560px; }
  .asp-product-page .asp-page-section-row { padding: 30px 24px !important; }
  .asp-category-page .asp-page-overview-item + .asp-page-overview-item { border-top-color: rgba(255, 255, 255, .12); }
  .asp-footer-grid { grid-template-columns: 1fr; gap: 34px !important; }
}

/* ==========================================================================
   Hero als videoband over de volle breedte (19 augustus 2026)

   Rick vroeg om iets in de trant van de huidige site: daar zit de video als
   rustige laag achter de tekst, niet als los blok ernaast. Zonder kader zie je
   nooit een ongelukkig frame, en dat was precies waar zijn meelezer over viel.

   Dit is die opzet, maar niet dezelfde uitvoering. De huidige site legt de video
   vrijwel dicht (92% dekking) en zet de tekst gecentreerd; hier loopt de
   kleurlaag schuin weg: links vrijwel dekkend zodat de kop altijd leesbaar is,
   rechts halfdoorzichtig zodat het beeld zichtbaar beweegt. De cijferregel loopt
   als glasbalk over de volle breedte langs de onderkant.

   Deze regels staan bewust achteraan het bestand. Ze overschrijven het oudere
   heroblok hierboven en zijn in een keer terug te draaien.
   ========================================================================== */

/* Elementor zet op elke container `z-index: var(--z-index)`, `overflow:
   var(--overflow)`, `min-height: var(--min-height)` en `position:
   var(--position)`, en laadt na dit bestand. Een enkele klasse verliest die tie,
   zie de toelichting bij .asp-header bovenin. Vandaar de verdubbelde klasse en
   de variabele naast de eigenschap zelf. Zonder dit viel de hele tekstkolom
   achter de beeldlaag. */
.asp-hero-grid.asp-hero-grid {
  --min-height: clamp(600px, 78vh, 760px);
  --overflow: visible;
  min-height: clamp(600px, 78vh, 760px);
  overflow: visible;
}
.asp-hero-copy.asp-hero-copy {
  --position: static;
  --overflow: visible;
  position: static;
  overflow: visible;
}
/* De tekstkolom is zelf niet gepositioneerd, dus tillen de widgets erin zichzelf
   boven de beeldlaag. De kolom is even hoog als de hele band en lag daardoor over de
   pauzeknop heen: die nam geen klik meer aan. Vandaar dat de kolom zelf geen
   muisaanwijzer vangt en de widgets erin wel. */
.asp-hero-copy.asp-hero-copy { pointer-events: none; }
.asp-hero-copy.asp-hero-copy > * {
  --z-index: 2;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.asp-hero-media.asp-hero-media {
  --position: absolute;
  --z-index: 0;
  --overflow: hidden;
  --width: 100%;
  --height: auto;
  position: absolute;
  z-index: 0;
  overflow: hidden;
}
.asp-hero-proof.asp-hero-proof {
  --position: absolute;
  --z-index: 3;
  position: absolute;
  z-index: 3;
}

.asp-hero {
  position: relative;
  padding: 0 !important;
  background: var(--asp-blue-dark);
}
/* De losse cirkel hoorde bij de lichte hero met kader; op een donkere band valt
   hij weg tegen het beeld. */
.asp-hero::before { display: none; }

.asp-hero-grid {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Zachte gloed achter de kop. Geeft diepte aan de tekstkant zonder het beeld
   verder dicht te leggen. */
.asp-hero-grid::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -25%;
  left: -12%;
  width: 62%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(0, 48, 135, .58), rgba(0, 48, 135, 0));
  pointer-events: none;
}

.asp-hero-copy {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  justify-content: center !important;
  margin-inline: auto !important;
  padding: 92px 0 152px !important;
  gap: 24px !important;
  background: none;
}
.asp-hero-title .elementor-heading-title {
  max-width: 15ch;
  font-size: clamp(46px, 4.4vw, 66px);
  text-shadow: 0 2px 26px rgba(0, 14, 40, .45);
}
/* `.e-con > .elementor-widget { max-width: 100% }` van Elementor telt twee klassen
   en laadt later; vandaar !important op de breedte. Zonder dat liep de zin over de
   volle 1180 pixels door. */
.asp-hero-lead, .asp-hero-lead .elementor-widget-container {
  max-width: 600px !important;
  color: rgba(255, 255, 255, .82) !important;
  text-shadow: 0 1px 14px rgba(0, 14, 40, .4);
}

/* Beeldlaag. Vult de hele band; de foto blijft eronder liggen als terugval
   wanneer de video nog laadt of geblokkeerd wordt. */
.asp-hero-media {
  inset: 0;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: var(--asp-blue-dark);
  /* Twee lagen: schuin van links dekkend naar rechts open, plus een verticale
     die de bovenkant losmaakt van de blauwe balk erboven en de onderkant donker
     genoeg maakt voor de cijferregel. */
  --asp-hero-veil:
    linear-gradient(100deg, rgba(0, 31, 87, .96) 0%, rgba(0, 31, 87, .9) 32%, rgba(0, 31, 87, .66) 60%, rgba(0, 31, 87, .46) 100%),
    linear-gradient(180deg, rgba(20, 31, 51, .5) 0%, rgba(20, 31, 51, 0) 28%, rgba(20, 31, 51, 0) 54%, rgba(20, 31, 51, .86) 100%);
}
.asp-hero-image::after,
.asp-hero-video::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--asp-hero-veil);
  pointer-events: none;
}
.asp-hero-image img { object-position: 50% center; }
/* Lichte onscherpte op het bewegende beeld. Het is sfeer achter de tekst, geen
   onderwerp: zo blijft het rustig bij elk willekeurig frame en steekt de kop er
   scherp bovenuit. De iframe staat al op scale(1.42), dus de zachte rand die blur
   geeft valt buiten het vlak. */
.asp-hero-video iframe { filter: blur(3px) saturate(1.06); }

/* De pauzeknop staat rechtsboven in de band, op dezelfde marge als de inhoud. */
.asp-hero-video .asp-hero-video-toggle {
  top: 26px;
  right: max(20px, calc((100% - 1180px) / 2));
  width: 42px;
  height: 42px;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(3, 20, 52, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Kaartje rechts, net boven de cijferregel. Glas in plaats van een wit vlak: een
   dekkende kaart op bewegend beeld leest als een plakker. */
.asp-hero-badge {
  z-index: 3;
  right: max(20px, calc((100% - 1180px) / 2)) !important;
  bottom: 124px !important;
  max-width: 252px;
  padding: 16px 20px !important;
  border: 1px solid rgba(255, 255, 255, .22);
  border-left: 3px solid var(--asp-red);
  border-radius: 10px;
  background: rgba(3, 20, 52, .52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 12, 34, .38);
}
.asp-hero-badge span { color: rgba(255, 255, 255, .7); }
.asp-hero-badge strong { color: var(--asp-white); font-size: 16px; }

/* Cijferregel als glasbalk langs de onderkant van de band. */
.asp-hero-proof {
  right: 0;
  bottom: 0;
  left: 0;
  display: grid !important;
  grid-template-columns: repeat(3, max-content);
  gap: 0 !important;
  width: 100%;
  margin: 0 !important;
  padding: 24px max(20px, calc((100% - 1180px) / 2)) !important;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(0, 20, 58, .16), rgba(0, 20, 58, .58));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.asp-hero-proof-item { padding-right: 34px !important; }
.asp-hero-proof-item + .asp-hero-proof-item { padding-left: 34px !important; border-left-color: rgba(255, 255, 255, .2); }
.asp-hero-proof-item strong { font-size: 26px; letter-spacing: -.02em; }
.asp-hero-proof-item span { color: rgba(255, 255, 255, .66); }

@media (max-width: 1024px) {
  .asp-hero-grid.asp-hero-grid { --min-height: 0; min-height: 0; }
  .asp-hero-proof.asp-hero-proof { --position: static; position: static; }
  .asp-hero { padding: 0 !important; }
  .asp-hero-grid {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0;
  }
  .asp-hero-grid::after { display: none; }
  .asp-hero-copy {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    padding: 64px 0 !important;
  }
  .asp-hero-media {
    inset: 0;
    height: auto !important;
    min-height: 0 !important;
    /* Smal scherm: de tekst ligt over het hele beeld, dus hier moet de laag
       rondom dekkend zijn in plaats van schuin weglopend. */
    --asp-hero-veil: linear-gradient(180deg, rgba(0, 31, 87, .92) 0%, rgba(0, 31, 87, .85) 52%, rgba(20, 31, 51, .93) 100%);
  }
  .asp-hero-badge { display: none !important; }
  .asp-hero-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100% !important;
    margin-top: 15px !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .asp-hero-proof-item { padding-right: 16px !important; }
  .asp-hero-proof-item + .asp-hero-proof-item { padding-left: 18px !important; }
  .asp-hero-video .asp-hero-video-toggle { top: 14px; right: 14px; width: 38px; height: 38px; }
}

@media (max-width: 680px) {
  .asp-hero-copy { padding: 48px 0 54px !important; gap: 22px !important; }
  .asp-hero-title .elementor-heading-title { max-width: none; font-size: 38px; }
  .asp-hero-proof-item { padding-right: 10px !important; }
  .asp-hero-proof-item + .asp-hero-proof-item { padding-left: 12px !important; }
  .asp-hero-proof-item strong { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
   Feedbackronde 28 augustus 2026 (Demi Ensing via Rick).
   --------------------------------------------------------------------------- */

/* Knoppen die na een klik onzichtbaar werden.
   Elementor levert in frontend.min.css de regel
   `.elementor-button:focus, .elementor-button:hover, .elementor-button:visited { color: #fff }`.
   Dat bestand laadt na asp.css en die selector heeft dezelfde specificiteit (0,2,0) als
   onze eigen `.asp-text-link .elementor-button`, dus won hij bij gelijkspel. Gevolg: elke
   knop met blauwe tekst op een witte ondergrond werd na een bezoek of na het klikken wit
   op wit en leek verdwenen. Onze hover-regels hebben (0,3,0) en bleven wel werken, dus het
   viel alleen op als de muis er niet op stond.
   Zelfde huispatroon als elders in dit bestand: klasse verdubbeld voor hogere specificiteit. */
.asp-text-link.asp-text-link .elementor-button:visited,
.asp-text-link.asp-text-link .elementor-button:focus { color: var(--asp-blue); }
.asp-button-quiet.asp-button-quiet .elementor-button:visited,
.asp-button-quiet.asp-button-quiet .elementor-button:focus { color: var(--asp-blue); }
.asp-button-light.asp-button-light .elementor-button:visited,
.asp-button-light.asp-button-light .elementor-button:focus { color: var(--asp-blue); }
.asp-category-page .asp-page-overview-item .asp-text-link.asp-text-link .elementor-button:visited,
.asp-category-page .asp-page-overview-item .asp-text-link.asp-text-link .elementor-button:focus { color: var(--asp-white); }

/* Een overzichtsbalk met twee items in plaats van drie. Het grid staat vast op drie
   kolommen, waardoor er anders een lege derde kolom overblijft. */
.asp-page-overview-grid.asp-page-overview-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Sectierij met een foto naast de tekst (draaistallen E100 en E300). De rij is normaal
   tekst | knop; met een foto wordt het tekst | foto en verhuist de knop naar binnen,
   onder de tekst. Vandaar de uitlijning hieronder: `.asp-button-quiet` staat verderop
   op `align-self: center`, wat in een kolomcontainer horizontaal centreren betekent. */
.asp-page-section-row.asp-page-section-row-media { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.asp-page-section-copy > .asp-button-quiet { align-self: flex-start !important; margin-top: 7px !important; }
.asp-page-section-media { align-self: center !important; }
.asp-page-section-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(20, 31, 51, .14);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* De pandfoto op Over ASP Noard, onder het verhaal. */
.asp-about-photo { display: block !important; padding: 0 0 96px !important; background: var(--asp-white); }
.asp-about-photo-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20, 31, 51, .16);
}

@media (max-width: 900px) {
  .asp-page-overview-grid.asp-page-overview-grid-2 { grid-template-columns: 1fr; }
  .asp-page-section-row.asp-page-section-row-media { grid-template-columns: 1fr; }
  .asp-about-photo { padding-bottom: 64px !important; }
}

/* ------------------------------------------------------------------------------------
   Ronde "Website teksten.docx" (15 sep 2026): het verhaal van de ToerBoertiek, de
   nieuwe pagina "Wat ligt er in de wagen?", de projectpagina's met fotogalerij, de
   automatische projectlijsten ([asp_projecten]) en het partnerblok op subpagina's.
   ------------------------------------------------------------------------------------ */

/* ToerBoertiek: een verhaal van vijf alinea's zonder foto of knop ernaast. De rij heeft
   dan maar een kolom nodig; de knop staat in de tekstkolom, onder de laatste alinea. */
.asp-page-section-row.asp-page-section-row-story { grid-template-columns: minmax(0, 1fr); }
.asp-page-section-row-story .asp-page-section-text p { margin: 0 0 1em; }
.asp-page-section-row-story .asp-page-section-text p:last-child { margin-bottom: 0; }
@media (min-width: 901px) {
  .asp-company-page .asp-page-section-row-story .asp-page-section-copy > .asp-button-quiet { grid-column: 2; }
}

/* Wat ligt er in de wagen? Per onderwerp de groepen links en de producten rechts. De
   bedrijfsopmaak (titel naast de tekst) past hier niet: naast de productfoto's blijft
   er te weinig breedte over voor twee groepen naast elkaar. */
.asp-assortment-page .asp-page-section-row.asp-page-section-row-media { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px !important; }
@media (min-width: 901px) {
  .asp-assortment-page.asp-company-page .asp-page-section-copy { display: flex !important; flex-direction: column; gap: 22px !important; }
}
.asp-assortment-row .asp-assortment-text { align-self: stretch !important; width: 100% !important; }
.asp-assortment-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.asp-assortment-groups.asp-assortment-groups-1 { grid-template-columns: minmax(0, 1fr); }
.asp-assortment-group h3 { margin: 0 0 10px; color: var(--asp-navy); font-size: 17px; font-weight: 800; line-height: 1.3; }
.asp-assortment-group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.asp-assortment-group li { position: relative; padding-left: 20px; color: var(--asp-ink); font-size: 15px; line-height: 1.5; }
.asp-assortment-group li::before { content: ""; position: absolute; top: .5em; left: 1px; width: 7px; height: 7px; border-top: 2px solid var(--asp-red); border-right: 2px solid var(--asp-red); transform: rotate(45deg); }
.asp-assortment-group strong { color: var(--asp-navy); font-weight: 800; }
.asp-assortment-media { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch !important; gap: 14px !important; }
.asp-assortment-media-3 > :last-child { grid-column: 1 / -1; }
.asp-assortment-media .elementor-widget-image { width: 100% !important; min-width: 0; }
/* Elementors widget-image.css komt na dit bestand en zet rand, radius en schaduw op nul;
   vandaar de verdubbelde klasse. */
.asp-assortment-media.asp-assortment-media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 12px; }
.asp-assortment-media.asp-assortment-media-3 > :last-child img { aspect-ratio: 2 / 1; }
.asp-assortment-photo.asp-assortment-photo img { object-fit: cover; }
.asp-assortment-packshot.asp-assortment-packshot img { padding: 18px; border: 1px solid var(--asp-line); background: var(--asp-white); box-shadow: none; object-fit: contain; }

/* Projectpagina's: de opsomming van geleverde oplossingen in twee kolommen, gevolgd door
   een fotogalerij. Foto's openen groot in de lightbox van Elementor. */
.asp-project-page .asp-page-section-text ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asp-project-page .asp-page-section-text ul:first-child { margin-top: 0; }
.asp-project-page .asp-page-section-text p { margin: 0 0 1em; }
.asp-project-page .asp-page-section-text p:last-child { margin-bottom: 0; }
.asp-project-page .asp-page-content { padding-bottom: 80px !important; }
.asp-project-gallery { padding: 0 0 104px !important; background: var(--asp-white); }
.asp-project-gallery-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; }
.asp-project-gallery-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asp-project-gallery-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asp-project-gallery-image { width: 100% !important; min-width: 0; }
.asp-project-gallery-image a { display: block; overflow: hidden; border-radius: 12px; }
.asp-project-gallery-image.asp-project-gallery-image img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; }
.asp-project-gallery-image.asp-project-gallery-image a:hover img { transform: scale(1.03); }

/* Projecttitels zijn zinnen met lange namen ("Terwisscha-van Scheltinga"). Naast de foto is
   de titelkolom maar 400 px breed; op de volle 72 px paste zo'n naam niet en bleven "bij" en
   "van" alleen op een regel staan. Onder 1025 px staat de foto eronder en past het wel. */
@media (min-width: 1025px) {
  .asp-project-page .asp-page-hero-title .elementor-heading-title { font-size: clamp(48px, 4vw, 58px); }
}
/* Voor "2 × 8-melkstal" in een titel: niet afbreken op het koppelteken. */
.asp-nowrap { white-space: nowrap; }

/* [asp_projecten]: dezelfde overzichtsbalk en kaarten als elders, maar door PHP
   opgebouwd. Elementor zet dan geen containerstijlen, dus de flexopmaak staat hier. */
.asp-projecten-shortcode, .asp-projecten-shortcode .elementor-shortcode { width: 100% !important; max-width: none !important; }
.asp-projecten-dynamisch .asp-page-overview-item { display: flex !important; flex-direction: column; }
.asp-page-overview-grid.asp-page-overview-grid-1 { grid-template-columns: minmax(0, 1fr); }
.asp-page-overview-title .elementor-heading-title a { color: inherit; text-decoration: none; }
.asp-page-overview-title .elementor-heading-title a:hover { color: var(--asp-blue); }
.asp-projecten-kaart { display: flex; flex-direction: column; }
.asp-projecten-kaart .asp-page-related-image { display: block; flex: 0 0 auto; }
.asp-projecten-kaart .asp-page-related-body { display: flex; flex-direction: column; gap: 12px !important; }
.asp-projecten-kaart .asp-kicker, .asp-projecten-kaart .asp-copy { margin: 0; }
.asp-projecten-kaart .asp-copy { font-size: 15px; line-height: 1.6; }
/* De vaste kaarten laten de titel groeien om de link omlaag te duwen; hier doet de link
   dat zelf, anders valt er een gat tussen titel en tekst. */
.asp-projecten-kaart .asp-page-related-title { margin: 0; flex-grow: 0; }
.asp-projecten-kaart .asp-page-related-title a { display: block; text-decoration: none; }
.asp-projecten-kaart .asp-page-related-title a:hover { color: var(--asp-blue); }
.asp-projecten-kaart .asp-text-link { margin-top: auto !important; padding-top: 8px; }

/* Partnerblok op subpagina's. Het staat tussen de lichtgrijze verwante pagina's en de
   blauwe contactband; wit houdt de drie vlakken uit elkaar. */
.asp-partners-embed, .asp-partners-embed .elementor-template, .asp-partners-embed .elementor { width: 100% !important; max-width: none !important; }
.asp-subpage .asp-partners { background: var(--asp-white); }

@media (max-width: 900px) {
  .asp-assortment-page .asp-page-section-row.asp-page-section-row-media { grid-template-columns: 1fr; gap: 26px !important; }
  .asp-assortment-media { max-width: 560px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .asp-assortment-media-3 > :last-child { grid-column: auto; }
  .asp-assortment-media.asp-assortment-media-3 > :last-child img { aspect-ratio: 1 / 1; }
  .asp-project-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asp-project-gallery-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .asp-assortment-groups { grid-template-columns: 1fr; gap: 22px; }
  .asp-assortment-media { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
  .asp-project-page .asp-page-section-text ul { grid-template-columns: 1fr; }
  .asp-project-page .asp-page-content { padding-bottom: 56px !important; }
  .asp-project-gallery { padding-bottom: 72px !important; }
  .asp-project-gallery-grid, .asp-project-gallery-grid-2, .asp-project-gallery-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
}

/* ------------------------------------------------------------------------------------
   Punten uit "Voortgang - ASP" (9 sep): Instagram naast Facebook op de homepage en
   Demi's eigen foto bij het voerstation.
   ------------------------------------------------------------------------------------ */

/* Knoprij onder "Volg waar we aan werken". Elementor geeft de container 10 px padding en
   elke widget een flex-basis van 100%; zonder deze regels schoof de rij in en brak elk
   knoplabel over twee regels. */
.asp-news-copy .asp-news-actions { flex-wrap: wrap !important; gap: 12px !important; padding: 0 !important; }
.asp-news-copy .asp-news-actions > .asp-button { flex: 0 0 auto !important; }
.asp-news-actions .asp-button .elementor-button { white-space: nowrap; }

/* Het DeLaval-bord en de koeienkop staan in de bovenste helft van de voerstationfoto.
   Waar de hero de foto in de hoogte bijsnijdt (tablet), blijven die zo in beeld. */
.asp-page-hero-image img[src$="/asp-voerstation.jpg"] { object-position: 50% 15%; }

@media (max-width: 680px) {
  .asp-news-copy .asp-news-actions { display: grid !important; width: 100% !important; }
  .asp-news-actions .asp-button, .asp-news-actions .elementor-button { width: 100% !important; }
}

/* ------------------------------------------------------------------------------------
   Achtergrondvideo van ASP zelf in de hero (mail "FW: video", 15 september 2026).
   De YouTube-iframe en de pauzeknop zijn uit de pagina gehaald; de oude regels voor
   .asp-hero-video iframe en .asp-hero-video-toggle hierboven raken niets meer.
   ------------------------------------------------------------------------------------ */

/* Vult de band zoals de iframe dat deed. Geen scale(1.42) meer: er zit geen
   spelerbalk om weg te schalen. De kleine vergroting houdt de zachte rand van de
   blur buiten beeld. Elementor en het thema zetten `max-width: 100%; height: auto`
   op video's en laden later, vandaar !important op de maten. */
.asp-hero-video video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 50%;
  filter: blur(3px) saturate(1.06);
  transform: scale(1.04);
  pointer-events: none;
}
/* iOS toont een afspeelknop als autoplay geblokkeerd is (energiebesparingsmodus).
   Dan blijft gewoon het posterbeeld staan. */
.asp-hero-video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.asp-hero-video video::-webkit-media-controls { display: none !important; }

/* Rode draaibadge ("700+ bedrijven in de regio") naast een foto. Op desktop steekt hij
   22 px over de fotorand; tussen 681 en 1024 px staat de foto op volle breedte met maar
   20 px marge, waardoor de gedraaide badge ruim 10 px buiten het scherm viel en de
   rechterrand werd afgesneden. Daar blijft hij nu binnen de foto. */
@media (min-width: 681px) and (max-width: 1024px) {
  .asp-image-badge { right: 0; }
}

/* Overzicht bovenaan categoriepagina's en de kaarten "Verwante onderwerpen". Tussen
   681 en 900 px zijn drie kolommen te smal voor lange samenstellingen als
   "Warmteterugwinning", "Kalverdrinkautomaten" en "energieterugwinning": die liepen
   over de kaartrand het scherm uit. Automatisch afbreken gaf verkeerde afbreekpunten
   ("energiete-rugwinning"), dus hier een kolom: het overzicht als lijst zoals op
   mobiel, de kaarten liggend met de foto links. De varianten met twee kolommen en de
   dynamische projectenlijst hebben dit niet nodig en blijven zoals ze zijn. */
@media (min-width: 681px) and (max-width: 900px) {
  .asp-page-overview-grid:not(.asp-page-overview-grid-2):not(.asp-projecten-dynamisch) { grid-template-columns: 1fr; }
  .asp-page-overview-grid:not(.asp-page-overview-grid-2):not(.asp-projecten-dynamisch) > .asp-page-overview-item { min-height: 0; padding: 24px 30px !important; }
  .asp-page-overview-grid:not(.asp-page-overview-grid-2):not(.asp-projecten-dynamisch) > .asp-page-overview-item + .asp-page-overview-item { border-top: 1px solid var(--asp-line); border-left: 0; }
  .asp-category-page .asp-page-overview-grid:not(.asp-page-overview-grid-2):not(.asp-projecten-dynamisch) > .asp-page-overview-item + .asp-page-overview-item { border-top-color: rgba(255, 255, 255, .12); }

  .asp-page-related-grid:not(.asp-projecten-dynamisch) { grid-template-columns: 1fr; gap: 18px !important; }
  .asp-page-related-grid:not(.asp-projecten-dynamisch) > .asp-page-related-card { --flex-direction: row; --flex-wrap: nowrap; flex-direction: row !important; flex-wrap: nowrap !important; }
  .asp-page-related-grid:not(.asp-projecten-dynamisch) .asp-page-related-image,
  .asp-page-related-grid:not(.asp-projecten-dynamisch) .asp-page-related-image .elementor-widget-container { --width: 260px; width: 260px !important; flex: 0 0 260px; height: auto !important; min-height: 190px; }
  .asp-page-related-grid:not(.asp-projecten-dynamisch) .asp-page-related-image img { height: 100% !important; min-height: 190px; }
  .asp-page-related-grid:not(.asp-projecten-dynamisch) .asp-page-related-body { --width: auto; flex: 1 1 0; width: auto !important; min-width: 0; justify-content: center !important; }
}