/* ==========================================================================
   ASCEE — Home (vanilla HTML/CSS)
   Design reference: Figma 1728px wide canvas.
   Naming uses BEM-ish blocks so each section maps cleanly to ACF flexible
   content blocks when ported to WordPress.

   Breakpoints used:
     >= 1280px  → desktop reference (Figma-like)
     1024–1279  → small desktop / large tablet
     768–1023   → tablet
     <= 767     → mobile
   ========================================================================== */

/* --- Design tokens --------------------------------------------------------- */
:root {
	--scale: 0.9;
    --color-white: #FFFFFF;
    --color-black: #111111;
    --color-blue: #4FA0CA;
    --color-green: #41A632;
    --color-gray-bg: #DCE2E4;
    --color-base-overlay: #D8D8D8;

    --gradient-brand: linear-gradient(82.92deg, #41A632 15.52%, #4FA0CA 88.6%);
    --gradient-brand-vertical: linear-gradient(to top, #41A632 0%, #4FA0CA 100%);

    --radius-small: 5px;
    --radius-medium: 10px;
    --radius-big: 20px;

    --container-max: calc(1728px * var(--scale));
    /* 1555.2px — Figma frame width × 0.9 */
    --container-pad-x: clamp(calc(20px * var(--scale)), calc(5vw * var(--scale)), calc(186px * var(--scale)));
    /* 18px / 4.5vw / 167.4px */

    --font-display: "korolev-condensed", "Oswald", "Anton", "Bebas Neue", "Arial Narrow", sans-serif;
    --font-body: "korolev", "Inter", "Helvetica Neue", Arial, sans-serif;

  	--fs-h1: clamp(calc(48px * var(--scale)), calc(6.5vw * var(--scale)), calc(100px * var(--scale)));
  	--fs-h2: clamp(calc(34px * var(--scale)), calc(4vw * var(--scale)), calc(60px * var(--scale)));
  	--fs-h3: clamp(calc(22px * var(--scale)), calc(2.1vw * var(--scale)), calc(30px * var(--scale)));
  	--fs-intro: clamp(calc(18px * var(--scale)), calc(1.5vw * var(--scale)), calc(22px * var(--scale)));
}

/* Krap-maar-passend zone: hier staat het desktopmenu nog op één regel, maar
   met weinig lucht. Ondergrens gelijkgetrokken met de overlay-grens hieronder
   (1200px), anders verkleinde dit het logo op breedtes waar het menu al in de
   hamburger zit. */
@media (min-width: 1200px) and (max-width: 1300px) {
	.navbar__logo > img {
		max-width: 120px;
		height: 30px !important;
	}
	.navbar__item a {
		font-size: 15px !important;
	}
	.navbar .btn {
		font-size: 15px !important;
	}
}


/* --- Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 28px;
    color: var(--color-black);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

p {
    margin: 0;
}


/* --- Typography utilities -------------------------------------------------- */
.h1,
.h2,
.h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

.h2 {
    font-size: var(--fs-h2);
}

.h3 {
    font-size: var(--fs-h3);
    line-height: 1.1;
}

.body {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
}

.body--light {
    color: var(--color-white);
}

.h2--light {
    color: var(--color-white);
}

.text-gradient {
    background: var(--gradient-brand-vertical);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient--solid {
    display: inline-block;
}

/* Decorative horizontal bar under cards */
.card-rule {
    display: block;
    width: 65px;
    height: 4px;
    background: var(--gradient-brand);
    border-radius: 2px;
}


/* --- Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 13px 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-medium);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.btn--gradient {
    border-radius: var(--radius-small);
    background-image: var(--gradient-brand);
    color: var(--color-white);
    box-shadow: 0 0 10px rgba(79, 160, 202, 0.4);
    border: 0;
}

.btn--gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(79, 160, 202, 0.55);
}

.btn--outline-light {
    border: 2px solid var(--color-blue);
    color: var(--color-white);
    background: transparent;
}

.btn--outline-light:hover {
    background: rgba(79, 160, 202, 0.15);
}

.btn--outline-dark {
    border: 2px solid var(--color-blue);
    color: var(--color-black);
    background: transparent;
}

.btn--outline-dark:hover {
    background: rgba(79, 160, 202, 0.12);
}


/* --- Generic section + container ------------------------------------------ */
.section {
    width: 100%;
}

/* Single shared container used by every section.
   Outer width = Figma frame (1728px). Inner content area = 1356px at desktop. */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad-x);
}


/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    width: 100%;
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

.hero__topstrip {
    height: 6px;
    width: 100%;
    background: var(--gradient-brand);
}

.hero__inner {
    position: relative;
    padding: 0 0 clamp(40px, 6vw, 80px);
    /* matches .hero--compact .hero__content margin-top */
    width: 100%;
    isolation: isolate;
    /* contain blend modes inside the hero */
}

/* Background gradient as a real DOM element — sits at the bottom layer */
.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(60.79deg, rgba(1, 0, 31, 0.9) 9%, rgba(125, 125, 125, 0) 96%),
        linear-gradient(69.27deg, rgba(79, 160, 202, 0.85) 30%, rgba(65, 166, 50, 0.85) 70%),
        var(--color-base-overlay);
}

/* Sound wave overlay sits ON TOP of the bg sibling, blends via mix-blend-mode */
.hero__waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero__waves video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    /* black bg drops out, white waves brighten gradient */
    opacity: 0.3;
}

/* Content above the background/wave layers */
.hero__inner>.topbar,
.hero__inner>.navbar-wrap,
.hero__inner>.breadcrumb,
.hero__inner>.hero__content,
.hero__inner>.hero__split,
.hero__inner>.trusted {
    position: relative;
    z-index: 1;
}

/* Lift the navbar wrap above all other hero content so its dropdown can
   overlay siblings (breadcrumb, hero content). Without this the dropdown
   gets painted under the breadcrumb because both stacking contexts sit at
   z-index 1 and DOM order wins. */
.hero__inner>.navbar-wrap {
    z-index: 10;
}

/* Zelfde verhaal een niveau hoger: .topbar krijgt z-index 1 en wordt daarmee
   een eigen stacking context, dus de taal-uitklap kan daar niet uit en viel
   achter de navbar (z-index 10). De topbar zelf overlapt niets, dus hem boven
   de navbar tillen is veilig. */
.hero__inner>.topbar {
    z-index: 20;
}

/* Top contact bar — sits inside a .container */
.topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 19px;
    padding-top: 24px;
    font-size: 17px;
    flex-wrap: wrap;
}

.topbar__contact {
    display: flex;
    gap: 33px;
    align-items: center;
    flex-wrap: wrap;
}

.topbar__item {
    display: inline-flex;
    gap: 15px;
    align-items: center;
    white-space: nowrap;
}

.topbar__label {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-blue);
}

.topbar__value {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-white);
}

.topbar__divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.5);
}

.topbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-white);
}

.topbar__lang-arrow {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: rotate(45deg);
    margin-top: -4px;
}

/* Navbar — sits inside a standard .section__inner container */
.navbar-wrap {
    margin-top: 32px;
}

.navbar {
    width: 100%;
    background: var(--color-white);
    color: var(--color-black);
    border-radius: var(--radius-medium);
    padding: 24px 37px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.navbar__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar__logo img {
    height: clamp(40px, 4.5vw, 69px);
    width: auto;
}

.navbar__menu {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 25px);
    flex-wrap: wrap;
    justify-content: center;
}

.navbar__item a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-black);
    transition: color .2s ease;
}

.navbar__item a:hover {
    color: var(--color-blue);
}

.navbar__item.has-submenu {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: relative;
}

/* Invisible "bridge" below the menu item so the cursor can travel into the
   submenu without leaving the .navbar__item hover area (prevents flicker-close). */
.navbar__item.has-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    height: 18px;
    pointer-events: auto;
}

/* Dropdown submenu (hover + keyboard-focus reveal).
   Sits below the bridge; together they form a continuous hover area. */
.navbar__submenu {
    position: absolute;
    top: calc(100% + 14px);
    left: -16px;
    margin: 0;
    padding: 12px 0;
    min-width: 220px;
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    /* CLOSE state: generous grace period before the menu disappears.
       Visibility stays "visible" for 400ms; opacity also delays 250ms then
       fades 200ms. Total dwell before fully hidden ≈ 450ms — plenty of room
       to traverse between submenu items even with hover-event flicker. */
    transition: opacity .2s ease .25s, transform .2s ease .25s, visibility 0s linear .4s;
    z-index: 50;
}

.navbar__item.has-submenu:hover .navbar__submenu,
.navbar__item.has-submenu:focus-within .navbar__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* OPEN state: snap in instantly so re-hover after brief mouse-out feels
       continuous (cancels any pending close transition). */
    transition: opacity .15s ease 0s, transform .15s ease 0s, visibility 0s linear 0s;
}

.navbar__submenu li {
    display: block;
}

.navbar__submenu a {
    display: block;
    padding: 10px 24px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-black);
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}

.navbar__submenu a:hover,
.navbar__submenu a:focus-visible {
    color: var(--color-blue);
    background: rgba(79, 160, 202, 0.08);
}

/* Rotate the caret when the parent item is hovered/focused */
.navbar__item.has-submenu:hover .navbar__caret,
.navbar__item.has-submenu:focus-within .navbar__caret {
    transform: rotate(225deg);
    margin-top: 2px;
}

.navbar__caret {
    transition: transform .15s ease, margin-top .15s ease;
}

.navbar__caret {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: rotate(45deg);
    margin-top: -4px;
}

.navbar__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 32px;
    padding: 4px;
}

.navbar__toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--color-black);
    border-radius: 2px;
}

/* Hero copy — sits inside a .container, fills full container width.
   Inner children (.hero__title / .hero__intro) constrain themselves to 731px. */
.hero__content {
    margin-top: clamp(60px, 12vw, 160px);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-h1);
    line-height: 1;
    color: var(--color-white);
    margin: 0 0 28px;
    max-width: 731px;
}

.hero__intro {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-intro);
    line-height: 1.3;
    color: var(--color-white);
    margin: 0 0 28px;
    max-width: 731px;
}

.hero__buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* Trusted by Engineers — sits inside a .container */
.trusted {
    margin-top: clamp(60px, 10vw, 120px);
    position: relative;
}

.trusted__head {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-bottom: 40px;
}

.trusted__label {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.3;
    color: var(--color-white);
    white-space: nowrap;
}

.trusted__rule {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
}

/* Infinite marquee viewport — content scrolls horizontally forever.
   Uses mask-image for the fade-edges instead of pseudo-element shadows,
   so the gradient ends are bg-agnostic (works on dark hero AND light page).
   Fade width is percentage-based (~22% per side) so the loop feels truly
   endless even on wide viewports. */
.trusted__logos {
    position: relative;
    height: 64px;
    overflow: hidden;
    --marquee-fade: clamp(100px, 22%, 280px);
    mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--marquee-fade),
            #000 calc(100% - var(--marquee-fade)),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--marquee-fade),
            #000 calc(100% - var(--marquee-fade)),
            transparent 100%);
}

.trusted__track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: marquee 35s linear infinite;
}

.trusted__track:hover {
    animation-play-state: paused;
}

/* Each "set" is one full row of logos; duplicate it twice in HTML so
   the loop wraps seamlessly when the track has scrolled exactly one set. */
.trusted__set {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    padding-right: clamp(32px, 4vw, 64px);
    /* gap to the duplicate set */
}

.trusted__set img {
    height: 64px;
    width: auto;
    max-width: 240px;
    /* Cap the Philips wordmark so it doesn't dominate */
    opacity: 0.6;
    object-fit: contain;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
}

@keyframes marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .trusted__track {
        animation: none;
    }
}

/* --- Hero variant: compact (subpages with smaller title + side image) -----
   Margin-top matches .hero__inner padding-bottom so top/bottom spacing around
   the hero copy is symmetrical for text-only heroes (Nieuws etc.). */
.hero--compact .hero__content {
    margin-top: clamp(40px, 6vw, 80px);
}

/* Homepage only: the big hero title gets a wider column so its two lines have
   room. The copy carries a hard line break, so this cannot move the break — it
   only has to stop either line from spilling into a third row. Longest line
   ("GEDRAG VOORSPELBAAR") is 766px at the 90px type cap, so 1000*0.9 = 900px
   leaves ~130px of headroom for webfont variance. Compact heroes on every other
   page keep the original 731px. */
.hero:not(.hero--compact) .hero__title {
    max-width: calc(1000px * var(--scale));
}

.hero--compact .hero__title {
    font-size: var(--fs-h2);
}

.hero--compact .hero__intro {
    font-size: clamp(18px, 1.5vw, 22px);
}

/* Hero split layout: text on the left, image on the right.
   Figma ratio: text 731px, image 505px (text column ≈ 59%, image ≈ 41%). */
.hero__split {
    display: grid;
    grid-template-columns: 731fr 505fr;
    gap: clamp(40px, 8vw, 120px);
    align-items: center;
    margin-top: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.hero__split .hero__content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
}

.hero__split .hero__title,
.hero__split .hero__intro {
    margin: 0;
}

.hero__image {
    width: 100%;
    aspect-ratio: 718 / 558;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Breadcrumb (subpage header) ----------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 28px;
}

.breadcrumb__rule {
    display: inline-block;
    width: 25px;
    height: 2px;
    background: var(--gradient-brand);
    border-radius: 1px;
}

.breadcrumb__link {
    color: inherit;
    transition: opacity .2s ease;
}

.breadcrumb__link:hover {
    opacity: 0.75;
}

.breadcrumb__sep {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}

/* --- Active navbar item -------------------------------------------------- */
.navbar__item--active>a {
    color: var(--color-blue);
}


/* ==========================================================================
   CHALLENGES SECTION
   ========================================================================== */
.section--challenges {
    background: var(--color-gray-bg);
    padding: clamp(60px, 10vw, 120px) 0;
}

.challenges {
    display: grid;
    grid-template-columns: minmax(280px, 423px) 1fr;
    gap: 46px;
    align-items: start;
}

.challenges__intro .h2 {
    color: var(--color-black);
    margin-bottom: 20px;
}

.challenges__intro .body {
    color: var(--color-black);
    margin-bottom: 24px;
}

.challenges__intro .body+.body {
    margin-top: -8px;
}

.challenges__cc-logo {
    height: clamp(64px, 6vw, 88px);
    width: auto;
    margin-top: 4px;
}

.challenges__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}

.challenge-card {
    background: var(--color-white);
    border: 1px solid rgba(65, 166, 50, 0.1);
    border-radius: var(--radius-big);
    padding: clamp(28px, 3vw, 45px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.challenge-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08);
}

/* Generic small icon badge (used on challenge cards, industries rows, etc.) */
.icon-badge {
    width: 45px;
    height: 45px;
    border-radius: var(--radius-small);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-badge--blue {
    background: rgba(79, 160, 202, 0.4);
}

.icon-badge--green {
    background: rgba(65, 166, 50, 0.3);
}

.icon-badge img {
    width: 27px;
    height: 28px;
}

.challenge-card__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.challenge-card__head .h3 {
    color: var(--color-black);
    max-width: 200px;
}

/* Arrow button on cards */
.arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-small);
    background: var(--gradient-brand);
    flex-shrink: 0;
}

.arrow-btn img {
    width: 22px;
    height: 18px;
    filter: brightness(0) invert(1);
}


/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.section--services {
    background: var(--color-white);
    padding-block: clamp(60px, 10vw, 120px);
}

/* Variant: hosts an overlapping .featured-cta from the NEXT section.
   Same pattern as .section--features--has-overlap. */
.section--services--has-overlap {
    padding-bottom: clamp(80px, 22vw, 384px);
}

.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.services__head {
    max-width: 853px;
    text-align: center;
}

.services__head .h2 {
    margin-bottom: 8px;
}

.services__head .body {
    color: var(--color-black);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--color-black);
}

.service-card__image {
    width: 100%;
    aspect-ratio: 423 / 331;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}


/* ==========================================================================
   INDUSTRIES LIST — stacked image+content rows
   ========================================================================== */
.section--industries {
    background: var(--color-white);
    padding-block: clamp(60px, 10vw, 120px);
}

.industries-list {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 4vw, 40.5px);
}

.industry-row {
    display: grid;
    grid-template-columns: 423px 1fr;
    gap: clamp(40px, 8vw, 128px);
    align-items: center;
    /* Same card surface as the homepage "uitdagingen" cards (.challenge-card). */
    background: var(--color-white);
    border: 1px solid rgba(65, 166, 50, 0.1);
    border-radius: var(--radius-big);
    padding: clamp(20px, 2.2vw, 32px);
    transition: transform .2s ease, box-shadow .2s ease;
}

.industry-row__image {
    width: 100%;
    aspect-ratio: 423 / 331;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.industry-row__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.industry-row__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.industry-row__head {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.industry-row__head .h3 {
    color: var(--color-black);
}


/* ==========================================================================
   FEATURES GRID — 3-column grid of icon + title + rule + body blocks
   (used on subpages like Laboratorium)
   ========================================================================== */
/* Default: clean white section with normal padding */
.section--features {
    background: var(--color-white);
    padding-block: clamp(60px, 10vw, 120px);
}

/* Variant: hosts an overlapping .featured-cta in the NEXT section.
   Extra bottom padding so the card has room to overflow into this section. */
.section--features--has-overlap {
    padding-bottom: clamp(80px, 22vw, 384px);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: clamp(32px, 3vw, 40.5px);
    width: 100%;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.feature .h3 {
    color: var(--color-black);
}

.feature__rule {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--gradient-brand);
    border-radius: 1px;
}


/* ==========================================================================
   ABOUT SECTION + Overlapping Featured CTA
   ========================================================================== */
.section--about {
    background: var(--color-gray-bg);
    padding-block: clamp(60px, 10vw, 120px);
    position: relative;
}

/* Variant: this section hosts an overlapping .featured-cta from above.
   Extra top padding to make room for the absolutely-positioned card. */
.section--about--featured {
    /* The featured-cta card is absolutely positioned and hangs ~360px into this
       section, so the padding has to clear it *plus* leave breathing room —
       at 22vw the heading ended up only ~55px below the card. */
    padding-top: clamp(80px, 34vw, 520px);
}

/* Generic white-background content section (mirrors .section--about) */
.section--content {
    background: var(--color-white);
    padding-block: clamp(60px, 10vw, 120px);
    position: relative;
}

/* Tight top when a content section follows another of the SAME bg, or when a
   gray .section--about is followed by a white .section--content (Simulaties
   pattern: gradient title block reads as continuation). The opposite direction
   (white→gray) keeps normal padding so the gray block has breathing room. */
.section--about+.section--about,
.section--about+.section--content,
.section--content+.section--content {
    padding-top: clamp(30px, 5vw, 60px);
}

/* When the SAME type of content section comes next, also tighten the bottom.
   Across different types (eg about → content) the bottom stays normal so the
   bg change has visible breathing room. */
.section--about:has(+ .section--about),
.section--content:has(+ .section--content) {
    padding-bottom: clamp(30px, 5vw, 60px);
}

/* Featured CTA (Impendance tube) — overlaps onto previous (white) section.
   Outer absolutely-positioned; uses a nested .container for horizontal layout. */
.featured-cta {
    position: absolute;
    top: clamp(-274px, -16vw, -160px);
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.featured-cta__inner {
    position: relative;
    border-radius: var(--radius-medium);
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
    /* contain blend modes inside the card */
    pointer-events: auto;
    padding: clamp(20px, 2.5vw, 31px);
}

/* Background gradient as separate sibling element */
.featured-cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(60.79deg, rgba(1, 0, 31, 0.8) 9%, rgba(125, 125, 125, 0) 96%),
        linear-gradient(58.99deg, rgba(79, 160, 202, 0.85) 30%, rgba(65, 166, 50, 0.85) 70%),
        var(--color-base-overlay);
}

/* Sound wave overlay on top of bg with blend mode */
.featured-cta__waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.featured-cta__waves video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.3;
}

.featured-cta__border {
    position: absolute;
    inset: clamp(20px, 2.5vw, 31px);
    border: 2px solid var(--color-green);
    border-radius: var(--radius-medium);
    pointer-events: none;
    z-index: 1;
}

.featured-cta__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.45fr);
    gap: 24px;
    align-items: center;
    padding: clamp(20px, 3vw, 40px);
}

.featured-cta__text {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 497px;
}

.featured-cta__text .h2 {
    font-size: var(--fs-h2);
}

/* Button inside the featured-cta lives in a flex column → default `stretch`
   would make it span the column width. Pin it to start + give it the design
   spec (height 45, padding 13/20, gap 10 between icon + label). */
.featured-cta__text .btn {
    align-self: flex-start;
    height: 45px;
    padding: 13px 20px;
    gap: 10px;
}

/* Tube image bleeds slightly off the right edge — anchored absolute inside
   .featured-cta__content (which is already position:relative). */
.featured-cta__image {
    width: 100%;
    max-width: 780px;
    max-height: 484px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sits in the grid's second column instead of floating absolutely: as an
       absolute box it kept its 780px width on narrower screens and slid left
       over the copy (the µZ cable ran through the text). The negative margin
       keeps the intended bleed past the card's right edge. */
    position: relative;
    justify-self: end;
    margin-right: -30px;
}

.featured-cta__image img {
    width: 100%;
    height: auto;
    max-height: 484px;
    object-fit: contain;
}

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 82px);
    align-items: center;
}

.about__image {
    width: 100%;
    aspect-ratio: 655 / 478;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about__content .h3 {
    color: var(--color-black);
}

.about__content .body {
    color: var(--color-black);
}

.about__content .btn {
    align-self: flex-start;
    margin-top: 8px;
}

/* Optional logo inside an about content column (eg. COMSOL certified) */
.about__content-logo {
    height: clamp(64px, 6vw, 88px);
    width: auto;
    margin-top: 12px;
    align-self: flex-start;
}

/* Variant: content on the LEFT, image on the RIGHT (Laboratorium bottom block) */
.about--reverse .about__image {
    order: 2;
}

.about--reverse .about__content {
    order: 1;
}

/* Variant: image stretches to the text column's height (text is leading).
   Container drops its aspect-ratio and uses align-self: stretch so the grid
   row sizes itself from the text column; the inner img is positioned absolute
   so it always fills whatever height the row ends up with. */
.about__image--cover {
    position: relative;
    aspect-ratio: auto;
    align-self: stretch;
    height: auto;
    min-height: 0;
}

.about__image--cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner {
    position: relative;
    padding-block: clamp(60px, 10vw, 120px);
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

/* Variant: hosts an overlapping .featured-cta card on top.
   - Extra top padding so the content underneath the card has breathing room.
   - overflow: visible so the absolutely-positioned card can stick out of the
     top of this section onto the preceding section. */
.cta-banner--with-featured {
    padding-top: clamp(80px, 22vw, 384px);
    overflow: visible;
}

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-brand-vertical);
    z-index: -2;
}

.cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 36, 41, 0.53);
    mix-blend-mode: multiply;
    z-index: -1;
}

.cta-banner__inner {
    max-width: 800px;
    /* narrow text block, lives inside .container */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.cta-banner__inner .h2 {
    font-size: var(--fs-h2);
    line-height: 1;
}

.cta-banner__buttons {
    display: flex;
    gap: 21px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}


/* ==========================================================================
   TABS — section heading with active tab indicator (Nieuws & publicaties)
   - Baseline: full-width gradient bar at bottom of .tabs (::after)
   - Active underline: thicker gradient bar that hovers 2px above the baseline,
     sized automatically to the label width via ::after on the item
   ========================================================================== */
.tabs {
    position: relative;
    display: flex;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0 0 33px;
    /* 24 (gap to underline) + 5 (underline) + 2 (gap) + 2 (baseline) */
    list-style: none;
}

.tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gradient-brand);
    border-radius: 1px;
}

.tabs__item {
    position: relative;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 28px;
    text-transform: uppercase;
    color: var(--color-black);
    cursor: pointer;
    transition: color .15s ease;
}

.tabs__item a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.tabs__item:hover,
.tabs__item:focus-within {
    color: var(--color-blue);
}

.tabs__item--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -31px;
    /* 24 (gap from text) + 5 (own height) = 29px below text;
                      sits 2px above the 2px baseline at -33 → visually floats */
    height: 5px;
    background: var(--gradient-brand);
}


/* ==========================================================================
   POST CARD — taller news/post listing card with flex-grow image
   (used on .section--posts; differs from .news-card which has a fixed aspect)
   ========================================================================== */

.nieuws-publicaties {
    margin-top: 56px;
}

.section--posts {
    background: var(--color-white);
    padding-block: clamp(60px, 10vw, 120px);
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 533px;
    color: var(--color-black);
}

.post-card__image {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.post-card__head .h3 {
    color: var(--color-black);
}

/* Post cards use the full-width variant of the gradient rule (matches Figma) */
.post-card .card-rule {
    width: 100%;
}


/* --- Publication card — text-only listing item (no image)
   Used on the Publicaties tab. Order: head (title + arrow), body, full rule. */
.publications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}

.publication-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    color: var(--color-black);
}

.publication-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.publication-card__head .h3 {
    color: var(--color-black);
}

.publication-card .card-rule {
    width: 100%;
}


/* ==========================================================================
   ARTICLE — news/publication detail page body
   Two-column layout: text content (flex-1) left, image+caption column right.
   ========================================================================== */
.section--article {
    background: var(--color-white);
    padding-block: clamp(40px, 5vw, 60px) clamp(60px, 10vw, 120px);
}

.article {
    display: flex;
    gap: clamp(32px, 4vw, 48px);
    align-items: flex-start;
    width: 100%;
}

.article__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 48px);
    color: var(--color-black);
}

.article__block {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.article__block .h3 {
    color: var(--color-black);
}

.article__block p {
    margin: 0 0 28px;
}

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

.article__aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 48px);
}

.figure {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 423px;
    max-width: 100%;
}

.figure__image {
    width: 100%;
    height: 320px;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.figure__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.figure__caption {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: var(--color-black);
    max-width: 235px;
}


/* ==========================================================================
   RELATED SECTION — header (title + button) + 2 post-cards grid
   ========================================================================== */
.section--related {
    background: var(--color-gray-bg);
    padding-block: clamp(60px, 10vw, 120px);
}

.related {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 56px);
    width: 100%;
}

.related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.related__head .h2 {
    color: var(--color-black);
}


/* ==========================================================================
   CONTACT — form (lives inside the hero) + address block
   ========================================================================== */

/* Hero variant: text on left + form on right.
   fr ratios match Figma: text col 421px, form col 870px → 421fr 870fr.
   (Using "1fr" for the form would shrink the text col proportionally — 421:1
   meant column 1 was 421× larger than column 2, squishing the form.) */
.hero__split--contact {
    grid-template-columns: 421fr 870fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
}

/* Form scaffolding */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.contact-form__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.contact-form__column {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.contact-form__field--grow {
    flex: 1 1 0;
    min-height: 0;
}

.contact-form__label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 28px;
    text-transform: uppercase;
    color: var(--color-white);
}

.contact-form__input,
.contact-form__textarea {
    background: #f0f0f0;
    border: 0;
    border-radius: var(--radius-small);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #111;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .15s ease;
}

.contact-form__input {
    height: 50px;
}

.contact-form__textarea {
    flex: 1 1 0;
    min-height: 124px;
    resize: vertical;
    font-family: var(--font-body);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: #505050;
}

/* Input with an inline icon (eg. calendar pickaday). The icon is rendered via
   a background-image so the field stays a real <input> with full a11y. */
.contact-form__input--with-icon {
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 26px 26px;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-blue);
}

.contact-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* When there's only a submit button (no checkbox), right-align it */
.contact-form__footer--end {
    justify-content: flex-end;
}

.contact-form__check {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 28px;
    text-transform: uppercase;
    color: var(--color-white);
    user-select: none;
}

.contact-form__check input {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    margin: 0;
    background: var(--color-white);
    border: 1px solid var(--color-green);
    border-radius: var(--radius-small);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease;
}

.contact-form__check input:checked {
    background: var(--color-green);
}

.contact-form__check input:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: rotate(45deg);
}


/* Address block — gradient title + lines + map with marker */
.section--contact-address {
    background: var(--color-gray-bg);
    padding-block: clamp(40px, 5vw, 60px) clamp(60px, 10vw, 120px);
}

.contact-address {
    display: flex;
    gap: clamp(40px, 6vw, 82px);
    align-items: center;
    width: 100%;
}

.contact-address__info {
    width: 415px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-address__lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-black);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
}

.contact-address__lines p {
    margin: 0;
}

.contact-address__contact {
    display: flex;
    gap: 15px;
    align-items: baseline;
}

.contact-address__contact b {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
}

.contact-map {
    flex: 1 1 0;
    min-width: 0;
    height: 322px;
    position: relative;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.contact-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-map__marker {
    position: absolute;
    left: var(--marker-x, 71%);
    top: var(--marker-y, 50%);
    width: 32px;
    /* visually balanced map pin (Figma 47px reads too large) */
    height: 32px;
    transform: translate(-50%, -100%);
    filter: drop-shadow(0 4px 8px rgba(17, 17, 17, 0.25));
}


/* ==========================================================================
   GENERIC SEAM-PADDING MODIFIERS
   Explicit overrides for content section padding (used where the automatic
   .section--about/--content adjacency rules don't fit the design).
   ========================================================================== */
.section--tight-top {
    padding-top: clamp(30px, 5vw, 60px);
}

.section--tight-bottom {
    padding-bottom: clamp(30px, 5vw, 60px);
}


/* ==========================================================================
   TRUSTED variant — light theme (dark text on a white section background)
   Used on About page above the Anne de Jong block.
   ========================================================================== */
.trusted--light {
    margin-top: 0;
    width: 100%;
}

.trusted--light .trusted__label {
    color: var(--color-black);
}

.trusted--light .trusted__rule {
    background: rgba(17, 17, 17, 0.15);
}

/* Stack wrapper used on About page: trusted strip + about block separated
   by the Figma gap-82, both within a single container. */
.about-with-trusted {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 82px);
}


/* ==========================================================================
   ABOUT content logos — row of small certification badges within the
   .about__content (replaces the single .about__content-logo when there are
   multiple, eg. 3 COMSOL CC badges on the About page).
   ========================================================================== */
.about__content-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    align-self: flex-start;
}

.about__content-logos img {
    height: clamp(48px, 5vw, 57px);
    width: auto;
}


/* ==========================================================================
   TEAM grid + card — image (flex-grow) + name + rule + role
   ========================================================================== */
.team {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 4vw, 56px);
    width: 100%;
}

.team__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.team__heading .h2 {
    color: var(--color-black);
}

.team__heading .h3 {
    color: var(--color-black);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 41px);
    width: 100%;
}

/* De kaart had een vaste hoogte van 440px met `flex: 1 1 0` op de foto, zodat
   de foto de restruimte opvulde. Liep één functietitel over twee regels — wat
   in smallere kolommen of bij ingezoomde tekst gebeurt — dan kreeg díe kaart
   een kortere foto en schoof de naam omhoog ten opzichte van de buren.
   Nu bepaalt de foto zelf de hoogte via een vaste verhouding (7:10, gelijk aan
   de bronuitsnede 616x880), en groeit de kaart mee met de tekst eronder. */
.team-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--color-black);
}

.team-card__image {
    flex: 0 0 auto;
    aspect-ratio: 7 / 10;
    width: 100%;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card__name {
    color: var(--color-black);
}

.team-card__role {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-black);
}


/* ==========================================================================
   LATEST NEWS + CASES
   ========================================================================== */
.section--news-cases {
    background: var(--color-gray-bg);
    padding: clamp(60px, 8vw, 96px) 0;
}

.news-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 47px;
    align-items: start;
}

.news-cases__column {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.news-cases__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.news-cases__head .h2 {
    color: var(--color-black);
}

.news-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--color-black);
}

.news-card__image {
    width: 100%;
    aspect-ratio: 653 / 306;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: var(--color-white);
    padding: clamp(60px, 8vw, 90px) 0;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.site-footer__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(32px, 5vw, 82px);
}

.site-footer__logo img {
    height: clamp(48px, 5vw, 69px);
    width: auto;
}

.site-footer__intro {
    color: var(--color-black);
}

.site-footer__cc {
    height: clamp(64px, 6vw, 88px);
    width: auto;
}

.site-footer__rule {
    border: 0;
    height: 2px;
    width: 100%;
    margin: 0;
    background: var(--gradient-brand);
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.site-footer__copy {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-black);
    max-width: 420px;
}

.site-footer__copy a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.site-footer__menu {
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
}


/* ==========================================================================
   RESPONSIVE — break complex layouts down for tablet + mobile
   ========================================================================== */

/* large tablet / small desktop: stack featured-cta into vertical */
@media (max-width: 1100px) {
    .featured-cta {
        position: static;
        margin-top: clamp(40px, 6vw, 80px);
    }

    /* In de gestapelde layout staat de kaart in de flow. Volgt er nog inhoud in
       dezelfde sectie (op Over Ascee het TEAM-blok), dan plakte die er direct
       tegenaan — de kaart had wel een margin-top maar geen margin-bottom.
       Is de kaart het laatste element, dan regelt de padding-bottom van de
       sectie de ruimte al en hoeft er niets bij. */
    .featured-cta:not(:last-child) {
        margin-bottom: clamp(40px, 6vw, 80px);
    }

    .section--services--has-overlap,
    .section--features--has-overlap {
        padding-bottom: clamp(60px, 10vw, 120px);
    }

    /* Below 1100px the .featured-cta becomes static, so the host section no
       longer needs extra top padding. Reset to the base section padding. */
    .section--about--featured {
        padding-top: clamp(60px, 10vw, 120px);
    }

    .cta-banner--with-featured {
        padding-top: clamp(60px, 10vw, 120px);
    }

    .featured-cta__content {
        grid-template-columns: 1fr;
        padding: clamp(20px, 4vw, 40px);
    }

    /* Stacked layout: image returns to flow, fills the column. */
    .featured-cta__image {
        position: static;
        transform: none;
        right: auto;
        max-width: 100%;
        max-height: 400px;
    }
}

/* tablet */
@media (max-width: 1024px) {
    .navbar {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px 24px;
        gap: 16px;
    }

    .navbar__menu {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 20px 24px;
    }

    .navbar>.btn {
        order: 2;
    }

    .challenges {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin: 0 auto;
    }

    .about__image {
        aspect-ratio: 16/10;
        max-height: 520px;
    }

    .news-cases {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 24px;
    }

    /* Hero split (subpages) stacks vertically */
    .hero__split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero__image {
        aspect-ratio: 16/10;
        max-height: 520px;
    }

    /* Industry rows stack vertically */
    .industry-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .industry-row__image {
        aspect-ratio: 423 / 280;
        max-height: 320px;
    }

    /* Posts grid: 2 → 1 col */
    .posts-grid {
        grid-template-columns: 1fr;
    }

    .post-card {
        height: auto;
    }

    .post-card__image {
        flex: 0 0 auto;
        aspect-ratio: 16/10;
    }

    /* Publications grid: 2 → 1 col */
    .publications-grid {
        grid-template-columns: 1fr;
    }

    /* Article: text + image column stack vertically */
    .article {
        flex-direction: column;
    }

    .article__aside {
        width: 100%;
    }

    .figure {
        width: 100%;
        max-width: 520px;
    }

    .figure__caption {
        max-width: none;
    }

    /* Team: 4 → 2 cols */
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Contact hero stacks vertically + form rows collapse to one column */
    .hero__split--contact {
        grid-template-columns: 1fr;
    }

    .contact-form__rows {
        grid-template-columns: 1fr;
    }

    .contact-form__textarea {
        min-height: 160px;
    }

    /* Address: info + map stack vertically */
    .contact-address {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-address__info {
        width: 100%;
    }

    .contact-map {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Features grid: 3 → 2 cols */
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* mobile */
@media (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 26px;
    }

    .topbar {
        justify-content: flex-start;
        gap: 12px 20px;
        padding-top: 16px;
    }

    .topbar__contact {
        gap: 16px;
        flex-wrap: wrap;
    }

    .topbar__divider {
        display: none;
    }

    .navbar {
        padding: 16px 20px;
    }

    .navbar__menu {
        gap: 12px 20px;
    }

    .navbar__menu .navbar__item {
        font-size: 15px;
    }

    .hero__buttons {
        gap: 12px;
    }

    .hero__buttons .btn {
        flex: 1 1 auto;
    }

    .trusted__head {
        gap: 20px;
    }

    .trusted__rule {
        display: none;
    }

    .trusted__logos {
        gap: 32px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .trusted__logos::-webkit-scrollbar {
        display: none;
    }

    .challenges__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .featured-cta__text .h2 br {
        display: none;
    }

    .cta-banner__buttons {
        width: 100%;
        flex-direction: column;
    }

    .cta-banner__buttons .btn {
        width: 100%;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__menu {
        justify-content: flex-start;
        gap: 12px 20px;
    }
}

/* very small mobile */
@media (max-width: 420px) {
    .hero__title {
        font-size: clamp(40px, 12vw, 56px);
    }

    .topbar__lang {
        margin-left: auto;
    }
}


/* ==========================================================================
   STICKY NAV  +  MOBILE MENU  +  HAMBURGER
   ========================================================================== */

/* ---- Hamburger button (in-hero navbar) ---- */
.navbar__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 35px;
    height: 35px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.navbar__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-black);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}


/* ---- Sticky navbar (body-level, fixed top, slides in after hero) ---- */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-white);
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
    transform: translateY(-100%);
    transition: transform .35s ease;
    pointer-events: none;
    padding-inline: var(--container-pad-x)
}

.is-scrolled .sticky-nav {
    transform: translateY(0);
    pointer-events: auto;
    padding-inline: var(--container-pad-x)
}

.sticky-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 16px;
}

.sticky-nav__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.sticky-nav__logo img {
    height: clamp(36px, 3.6vw, 52px);
    width: auto;
}

.sticky-nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ---- Mobile menu overlay ---- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 28px clamp(20px, 4vw, 48px) 64px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

/* When the menu is open, lock background scroll */
.menu-open {
    overflow: hidden;
}

/* Top bar (gradient rounded card with logo + close X) — Figma 432:11057.
   Same proportional rules as the in-hero/sticky navbar: pill height grows from
   padding + logo, no fixed height. */
.mobile-menu__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(20px, 2.5vw, 32px) clamp(24px, 4vw, 37px);
    border-radius: var(--radius-medium);
    background-image: var(--gradient-brand);
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.mobile-menu__logo {
    display: inline-flex;
    align-items: center;
}

.mobile-menu__logo img {
    height: clamp(37px, 3.6vw, 45px);
    width: auto;
    /* Invert dark navbar logo → white on the gradient bg */
    filter: brightness(0) invert(1);
}

.mobile-menu__close {
    position: relative;
    width: 35px;
    height: 35px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.mobile-menu__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
}

.mobile-menu__close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu__close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Menu list — centered, vertically stacked, big Korolev Condensed labels */
.mobile-menu__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 38px;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mobile-menu__list .navbar__item a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: var(--color-black);
    text-transform: uppercase;
}

.mobile-menu__list .navbar__item.has-submenu {
    /* dropdown submenu is not rendered in the mobile overlay (depth=1 in walker call) */
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.mobile-menu__list .navbar__caret {
    border-color: var(--color-black);
}

/* Hide submenu items entirely in mobile overlay (Services dropdown collapses to a single link) */
.mobile-menu__list .navbar__submenu {
    display: none;
}

.mobile-menu__cta {
    align-self: center;
    height: 45px;
    padding: 13px 20px;
    gap: 10px;
    flex-shrink: 0;
}


/* ---- Mobile responsive: navbar → floating rounded card, hamburger visible ---- */
/* Navigatie in "mobiele" modus: hamburger + overlay in plaats van de menubalk.
 *
 * Deze grens stond op 1024px, maar de menubalk zelf paste al niet meer onder
 * ~1160px: zes Nederlandse menu-items plus de CTA-knop braken dan naar twee of
 * drie regels binnen de witte pill, die daardoor uitdijde en bij de sticky nav
 * boven de viewport afliep. Tussen 1025px en 1160px zat dus een gat waarin geen
 * van beide layouts werkte. 1199px sluit dat gat en houdt marge voor langere
 * labels in andere talen. */
@media (max-width: 1199px) {

    /* Hamburger replaces the menu + CTA on mobile (both live in the overlay) */
    .navbar__hamburger {
        display: inline-flex;
    }

    .navbar__menu {
        display: none;
    }

    .navbar>.btn {
        display: none;
    }

    /* Topbar hidden on mobile (info lives in footer) */
    .topbar {
        display: none;
    }

    /* In-hero navbar = floating rounded card spanning the full container.
       Pill height is driven by `padding + logo height` (no fixed height) so
       proportions stay Figma-accurate at every viewport. */
    .navbar-wrap {
        margin-top: 0;
        padding-top: 28px;
    }

    .navbar {
        padding: clamp(20px, 2.5vw, 32px) clamp(24px, 4vw, 37px);
        box-shadow: 0 4px 7px rgba(0, 0, 0, 0.07);
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .navbar__logo img {
        /* Tight scale: Figma 37px on small mobile, only nudges up to 45px on tablet
           so the pill doesn't visually balloon. */
        height: clamp(37px, 3.6vw, 45px);
    }

    /* Sticky-nav: same full-width floating card style */
    .sticky-nav {
        background: transparent;
        box-shadow: none;
    }

    .sticky-nav__inner {
        background: var(--color-white);
        border-radius: var(--radius-medium);
        padding: clamp(20px, 2.5vw, 32px) clamp(24px, 4vw, 37px);
        margin-top: 16px;
        box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
    }

    .sticky-nav__menu {
        display: none;
    }

    .sticky-nav__inner>.btn {
        display: none;
    }

    .sticky-nav__logo img {
        height: clamp(37px, 3.6vw, 45px);
    }
}

/* Compact buttons in sticky nav, regardless of size */
.sticky-nav .btn {
    height: 40px;
    padding: 10px 16px;
}


/* ==========================================================================
   GRAVITY FORMS — themed to match the original .contact-form design.
   Targets the wrapper class `ascee-gf` (added per-form via the seed) so
   styling doesn't bleed into other GF instances elsewhere on the site.
   ========================================================================== */

/* Force the wrapper hierarchy to span the full grid column it sits in.
   GF's Orbital theme injects its own widths + grid layouts via CSS variables
   — !important on width AND on display: block ensures our 2-col grid wins
   over GF's default 12-col grid and that <form> isn't itself a grid container. */
.ascee-gf,
.ascee-gf .gform_wrapper,
.ascee-gf form,
.ascee-gf .gform_body,
.ascee-gf .gform-body {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* 2-column grid: name/phone/email on the left; message (+ date for appointment)
   on the right. GF Orbital theme defaults to `grid-template-columns: repeat(12, 1fr)`
   so we override with !important. */
.ascee-gf .gform_fields,
.ascee-gf .gform-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    row-gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    width: 100%;
}

/* Contact (5 fields): left col stacked, message fills right, checkbox spans bottom.
   Without !important, GF's `.gfield { grid-column: span 12 }` default beats ours. */
.ascee-gf--contact .gfield:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 !important; }
.ascee-gf--contact .gfield:nth-child(2) { grid-column: 1 / 2 !important; grid-row: 2 !important; }
.ascee-gf--contact .gfield:nth-child(3) { grid-column: 1 / 2 !important; grid-row: 3 !important; }
.ascee-gf--contact .gfield:nth-child(4) { grid-column: 2 / 3 !important; grid-row: 1 / span 3 !important; }
.ascee-gf--contact .gfield:nth-child(5) { grid-column: 1 / -1 !important; grid-row: 4 !important; }

/* Appointment (5 fields): date on row 1 right, message grows below it. */
.ascee-gf--appointment .gfield:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 !important; }
.ascee-gf--appointment .gfield:nth-child(2) { grid-column: 1 / 2 !important; grid-row: 2 !important; }
.ascee-gf--appointment .gfield:nth-child(3) { grid-column: 1 / 2 !important; grid-row: 3 !important; }
.ascee-gf--appointment .gfield:nth-child(4) { grid-column: 2 / 3 !important; grid-row: 1 !important; }
.ascee-gf--appointment .gfield:nth-child(5) { grid-column: 2 / 3 !important; grid-row: 2 / span 2 !important; }

/* Reset GF field wrapper styling. GF Orbital sets `grid-column: span 12` by
   default which conflicts with our 2-col grid — neutralise with `auto`. The
   nth-child rules above (with !important) then place fields in the right cells. */
.ascee-gf .gfield {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    width: 100% !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    grid-column: auto;
}

.ascee-gf .ginput_container,
.ascee-gf .ginput_container_text,
.ascee-gf .ginput_container_email,
.ascee-gf .ginput_container_phone,
.ascee-gf .ginput_container_date,
.ascee-gf .ginput_container_textarea {
    width: 100% !important;
    margin: 0 !important;
}

/* Labels — Figma `Desktop/H4 - Korolev Condensed` token: 22/28 Medium upper white.
   GF Orbital uses `.gform_wrapper .gfield label` (0,2,1 specificity) which beats
   our `.ascee-gf .gfield_label` (0,2,0). Hence !important on every prop. */
.ascee-gf .gfield_label,
.ascee-gf legend.gfield_label,
.ascee-gf .gfield label,
.ascee-gf .gchoice label {
    color: var(--color-white) !important;
    font-family: "Korolev Condensed", var(--font-display) !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: block;
}

/* Choice (checkbox) label sits inline with the box, not block */
.ascee-gf .gchoice label {
    margin: 0 !important;
    display: inline-block;
}

/* Replace GF's "(Required)" text with a simple blue asterisk */
.ascee-gf .gfield_required > * { display: none; }
.ascee-gf .gfield_required::after {
    content: '*';
    color: var(--color-blue);
    margin-left: 4px;
}

/* Inputs + textarea — light gray fill, dark text, rounded corners */
.ascee-gf .gfield input[type="text"],
.ascee-gf .gfield input[type="tel"],
.ascee-gf .gfield input[type="email"],
.ascee-gf .gfield input[type="date"],
.ascee-gf .gfield textarea {
    background: #f0f0f0;
    border: 0;
    border-radius: var(--radius-small);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #111;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow .15s ease;
}
.ascee-gf .gfield input { height: 50px; }
.ascee-gf .gfield textarea {
    min-height: 124px;
    resize: vertical;
}
.ascee-gf .gfield input::placeholder,
.ascee-gf .gfield textarea::placeholder {
    color: #505050;
}
.ascee-gf .gfield input:focus,
.ascee-gf .gfield textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-blue);
}

/* Datumveld — kalendericoon ín het invoerveld.

   Gravity Forms hangt de trigger als los <img> ná de input in dezelfde
   container. Beide staan static, dus het icoon belandde naast het witte veld
   op de achtergrond van de sectie. De container krijgt daarom position:
   relative en het icoon wordt rechts in het veld gepositioneerd; de input
   krijgt extra padding-right zodat "dd-mm-yyyy" er niet onder doorloopt. */
.ascee-gf .ginput_container_date {
    position: relative !important;
}

.ascee-gf .gfield input.datepicker,
.ascee-gf .gfield input.gform-datepicker {
    padding-right: 46px;
}

.ascee-gf .ginput_container_date .ui-datepicker-trigger {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Textarea field grows to fill its multi-row grid cell (contact: 3 rows, appointment: 2 rows) */
.ascee-gf .gfield--type-textarea {
    flex: 1 1 0;
    min-height: 0;
}
.ascee-gf .gfield--type-textarea .ginput_container,
.ascee-gf .gfield--type-textarea .ginput_container_textarea {
    flex: 1 1 0;
    display: flex;
    min-height: 0;
}
.ascee-gf .gfield--type-textarea textarea {
    flex: 1 1 0;
    height: 100%;
}

/* Custom checkbox (Ik wil een offerte aanvragen) */
.ascee-gf .gfield--type-checkbox legend.gfield_label { display: none; }
/* GF zet `.gchoice` zelf op `display: grid` met `column-gap: 0`, en wint dat
   van een gewone declaratie hier — het vinkje plakte daardoor tegen het label.
   Vandaar !important op display en gap. */
.ascee-gf .gfield--type-checkbox .gchoice {
    display: flex !important;
    align-items: center;
    gap: 20px !important;
    margin: 0;
}
.ascee-gf .gfield--type-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    margin: 0;
    background: var(--color-white);
    border: 1px solid var(--color-green);
    border-radius: var(--radius-small);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease;
}
.ascee-gf .gfield--type-checkbox input[type="checkbox"]:checked {
    background: var(--color-green);
}
.ascee-gf .gfield--type-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: rotate(45deg);
}
.ascee-gf .gfield--type-checkbox .gchoice label {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 28px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

/* Footer — right-aligned gradient submit button. !important on layout
   props because GF's Orbital theme positions the footer with its own grid. */
.ascee-gf .gform_footer,
.ascee-gf .gform-footer {
    margin-top: 16px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    position: static !important;
    grid-column: 1 / -1 !important;
}
.ascee-gf .gform_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 45px !important;
    padding: 13px 20px !important;
    gap: 10px;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap;
    border: 0 !important;
    border-radius: var(--radius-small) !important;
    background-image: var(--gradient-brand) !important;
    background-color: transparent !important;
    color: var(--color-white) !important;
    box-shadow: 0 0 10px rgba(79, 160, 202, 0.4) !important;
    cursor: pointer;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ascee-gf .gform_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(79, 160, 202, 0.55);
}

/* Validation + confirmation message colours */
.ascee-gf .validation_message,
.ascee-gf .gfield_description.validation_message {
    color: #ff8a8a;
    font-size: 14px;
    margin-top: 4px;
}
.gform_confirmation_wrapper {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 28px;
}

.industry-rows {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* In je stylesheet */
.btn--gradient {
    position: relative;
    border-radius: var(--radius-small);
    background-image: var(--gradient-brand);
    color: var(--color-white);
    box-shadow: 0 0 10px rgba(79, 160, 202, 0.4);
    border: 0;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn--gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(79, 160, 202, 0.55);
}
.btn__eq {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; gap: 2px;
    padding: 3px; box-sizing: border-box;
    opacity: 0; pointer-events: none; z-index: -1;
    transition: opacity 0.9s ease;
}
.btn__eq span {
    flex: 1; min-width: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px; height: 20%;
    animation: btn-eq-bounce var(--dur, 3.6s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
    animation-play-state: paused;
}
.btn--gradient:hover .btn__eq { opacity: 1; }
.btn--gradient:hover .btn__eq span { animation-play-state: running; }
@keyframes btn-eq-bounce {
    0%, 100% { height: 15%; }
    50%      { height: 90%; }
}

/* Mobile: collapse to single column.
   LET OP: de basisregel hierboven staat op `1fr 1fr !important` (nodig om GF's
   eigen 12-koloms grid te verslaan). Een gewone declaratie hier verliest het
   daarvan — ook vanuit een media query — dus deze moeten óók !important zijn.
   Zonder dat bleven de velden op telefoons in twee kolommen staan, halve
   breedte, met afgekapte placeholders. */
@media (max-width: 1024px) {
    .ascee-gf .gform_fields,
    .ascee-gf .gform-fields {
        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
    }
    .ascee-gf .gfield[class*="gfield"] {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    /* Op desktop vult het berichtveld een cel die meerdere rijen hoog is, via
       flex + `height: 100%`. In één kolom is de rij auto-hoog: de textarea
       droeg dan niet bij aan de rijhoogte, de rij kromp tot de labelhoogte en
       de textarea tekende eroverheen — met de verzendknop bovenop. Hier dus
       terug naar normale flow, zodat de rij met de textarea meegroeit. */
    .ascee-gf .gfield--type-textarea {
        flex: 0 0 auto;
        min-height: auto;
    }
    .ascee-gf .gfield--type-textarea .ginput_container,
    .ascee-gf .gfield--type-textarea .ginput_container_textarea {
        display: block;
        flex: 0 0 auto;
        min-height: auto;
    }
    .ascee-gf .gfield textarea {
        flex: 0 0 auto;
        min-height: 140px;
        height: auto;
    }
}

/* ==========================================================================
   Inline content links
   Base `a` is colour-inherit / no-underline because most links in this design
   are whole-card or button wrappers. Rich-text containers opt back in so
   hyperlinks inside body copy read as links, in the ASCEE light blue.
   ========================================================================== */
.body a,
.article__block a,
.hero__intro a,
.figure__caption a,
.address__lines a {
    color: var(--color-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.18s ease;
}

.body a:hover,
.article__block a:hover,
.hero__intro a:hover,
.figure__caption a:hover,
.address__lines a:hover {
    opacity: 0.7;
}

/* On the dark hero gradient the blue is too low-contrast — keep those white. */
.hero__intro a {
    color: var(--color-white);
}

/* MathJax: keep formulas from overflowing narrow columns. */
mjx-container[jax="CHTML"][display="true"] {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 4px 0;
}

/* [math] shortcode wrappers */
.ascee-formula {
    font-size: 1.02em;
}

.ascee-formula--block {
    display: block;
    margin: 20px 0;
    text-align: center;
    overflow-x: auto;
}

/* ==========================================================================
   Industry rows — card treatment + "Lees meer" link
   Scoped to .industry-row only: the arrow-button and card styles used by
   challenge / service / post cards elsewhere are deliberately untouched.
   ========================================================================== */

.industry-row--link {
    color: inherit;
    text-decoration: none;
}

.industry-row--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08);
}

.industry-row--link:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 4px;
}

/* "Lees meer ›" — replaces the gradient arrow button. */
.industry-row__more {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
    color: var(--color-blue);
}

.industry-row__more--green {
    color: var(--color-green);
}

.industry-row__more > span {
    font-size: 1.25em;
    line-height: 1;
    transition: transform .2s ease;
}

.industry-row--link:hover .industry-row__more > span {
    transform: translateX(3px);
}

/* ==========================================================================
   Article video (news / case blocks)
   ========================================================================== */
.article__video {
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--color-black);
}

.article__video-frame iframe,
.article__video-frame video,
.article__video-frame object,
.article__video-frame embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Uploaded file (ACF video field): no author-set size, so cap it and keep its
   own aspect ratio. Left-aligned, like the in-text shortcode. */
.article__video-file {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 70vh;
    margin: 0;
    border-radius: var(--radius-medium);
    background: var(--color-black);
}

/* Core [video] shortcode placed between paragraphs.
   The shortcode writes the author's size onto the wrapper (style="width:261px"),
   so the wrapper is left alone — that is what makes width="…" in the shortcode
   actually control the size. The video then fills that wrapper and takes its
   height from its own aspect ratio. Left-aligned with the body copy. */
/* Flex items default to min-width:auto, so an author-sized video would push the
   whole text column wider than the screen instead of scaling down. */
.article__block,
.article__body {
    min-width: 0;
}

.article__block .wp-video {
    max-width: 100%;
    margin: 24px 0;
}

/* On phones the author's pixel width is dropped entirely: the shortcode's
   inline width="…" would otherwise win over max-width and overflow the column. */
@media (max-width: 767px) {
    .article__block .wp-video {
        width: auto !important;
    }
}

.article__block video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-medium);
    background: var(--color-black);
}

/* ==========================================================================
   Legacy article markup (articles migrated from the old Angular/KaTeX site)
   Scoped to .article__block so nothing else on the site is affected.
   ========================================================================== */

/* Migrated prose sometimes sits inside a <pre>, whose default `white-space:
   pre` pushed a full paragraph 3600px wide out of a 710px column. Wrap it, and
   let genuinely long code scroll inside its own box instead of the page. */
.article__block pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
    max-width: 100%;
    margin: 20px 0;
}

.article__block code {
    overflow-wrap: anywhere;
}

/* KaTeX ships its own stylesheet that visually hides the MathML copy. It is
   loaded from the CDN only on articles that contain .katex markup; this is the
   fallback so the duplicate never shows even if that request fails. */
.article__block .katex-mathml {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Houdt gezichten in beeld als de box ooit breder uitvalt dan de bron. */
.team-card__image img {
    object-position: 50% 20%;
}

/* ==========================================================================
   TAALSCHAKELAAR (WEGLOT)

   Weglot rendert per schakelaar:
     <aside class="country-selector weglot-dropdown">
       <input class="weglot_choice" type="checkbox">     -- stuurt open/dicht
       <label class="wgcurrent" data-l="nl">...</label>   -- huidige taal
       <ul><li><a href="/en/">English</a></li>...</ul>    -- overige talen
     </aside>

   Twee plekken: de topbar (uitklap) en het mobiele menu (platte rij, omdat de
   topbar onder 768px verborgen is).

   Weglots eigen stylesheet mikt op `.country-selector.weglot-dropdown <el>`,
   specificiteit (0,2,1). Alles hieronder staat daarom onder een prefix van
   drie klassen — anders wint Weglot en vallen breedte, randen en positie terug
   op hun defaults.
   ========================================================================== */

/* Weglot plaatst afhankelijk van zijn instellingen ook zelf een schakelaar
   (zwevend of in een menu). Alles uit; hieronder zetten we alleen de twee
   exemplaren die wij bewust renderen weer aan. */
.country-selector {
    display: none;
}

/* --- Gedeelde reset van Weglots chrome ----------------------------------- */
.topbar__lang--weglot .country-selector.weglot-dropdown,
.topbar__lang--weglot .country-selector.weglot-dropdown .wgcurrent,
.topbar__lang--weglot .country-selector.weglot-dropdown ul,
.topbar__lang--weglot .country-selector.weglot-dropdown li,
.topbar__lang--weglot .country-selector.weglot-dropdown a,
.mobile-menu__lang .country-selector.weglot-dropdown,
.mobile-menu__lang .country-selector.weglot-dropdown .wgcurrent,
.mobile-menu__lang .country-selector.weglot-dropdown ul,
.mobile-menu__lang .country-selector.weglot-dropdown li,
.mobile-menu__lang .country-selector.weglot-dropdown a {
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-family: var(--font-body);
    list-style: none;
}

/* De checkbox stuurt het open/dicht-gedrag aan: onzichtbaar maken, niet
   verwijderen — anders werkt de schakelaar niet meer zonder JS. */
.topbar__lang--weglot .country-selector.weglot-dropdown .weglot_choice,
.mobile-menu__lang .country-selector.weglot-dropdown .weglot_choice {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Vlaggetjes (::before met een PNG van Weglots CDN) uit: tekst-only past bij
   het ontwerp, en een taal is geen land. */
.topbar__lang--weglot .country-selector.weglot-dropdown li::before,
.topbar__lang--weglot .country-selector.weglot-dropdown a::before,
.topbar__lang--weglot .country-selector.weglot-dropdown .wglanguage-name::before,
.mobile-menu__lang .country-selector.weglot-dropdown li::before,
.mobile-menu__lang .country-selector.weglot-dropdown a::before,
.mobile-menu__lang .country-selector.weglot-dropdown .wgcurrent::before,
.mobile-menu__lang .country-selector.weglot-dropdown .wglanguage-name::before {
    content: none;
    display: none;
}


/* --- Topbar: taalcode + chevron, uitklap eronder -------------------------- */
.topbar__lang--weglot {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.topbar__lang--weglot .country-selector.weglot-dropdown {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
}

/* Klikvlak: toont de taalcode uit data-l ("nl" -> NL) in plaats van de
   volledige naam, zodat het aansluit op het ontwerp. */
.topbar__lang--weglot .country-selector.weglot-dropdown .wgcurrent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: var(--color-white);
    text-transform: uppercase;
    cursor: pointer;
}

.topbar__lang--weglot .country-selector.weglot-dropdown .wgcurrent .wglanguage-name {
    display: none;
}

.topbar__lang--weglot .country-selector.weglot-dropdown .wgcurrent::before {
    content: attr(data-l);
}

/* Chevron. Weglot zet zijn eigen pijl op position:absolute; static houdt hem
   in de flex-rij naast de taalcode. */
.topbar__lang--weglot .country-selector.weglot-dropdown .wgcurrent::after {
    content: "";
    position: static;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease;
}

.topbar__lang--weglot .country-selector.weglot-dropdown .weglot_choice:checked ~ .wgcurrent::after {
    margin-top: 2px;
    transform: rotate(-135deg);
}

/* Uitklap. `left: auto` is nodig omdat Weglot left:0 zet; zonder dat hangt de
   kaart rechts buiten beeld. */
.topbar__lang--weglot .country-selector.weglot-dropdown ul {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 140px;
    padding: 4px;
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.topbar__lang--weglot .country-selector.weglot-dropdown .weglot_choice:checked ~ ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Weglot zet zelf een vaste hoogte op het taalitem. Padding en line-height
   verlagen deed daardoor niets aan de hoogte van het kaartje — een expliciete
   height met flex-centrering is de enige knop die wél werkt. */
.topbar__lang--weglot .country-selector.weglot-dropdown ul li a {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-small);
    color: var(--color-black);
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.topbar__lang--weglot .country-selector.weglot-dropdown ul li a:hover,
.topbar__lang--weglot .country-selector.weglot-dropdown ul li a:focus-visible {
    background: var(--color-gray-bg);
}

/* Geen focusring na een muisklik — die bleef als blauw blokje om NL staan.
   Toetsenbordgebruikers houden wel een duidelijke ring. */
.topbar__lang--weglot .country-selector.weglot-dropdown:focus {
    outline: none;
}

.topbar__lang--weglot .country-selector.weglot-dropdown:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 6px;
    border-radius: 3px;
}


/* --- Mobiel menu: platte rij, altijd zichtbaar ---------------------------- */
.mobile-menu__lang {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

.mobile-menu__lang .country-selector.weglot-dropdown {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 16px;
}

.mobile-menu__lang .country-selector.weglot-dropdown .wgcurrent {
    display: inline-flex;
    align-items: center;
    color: var(--color-black);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.mobile-menu__lang .country-selector.weglot-dropdown .wgcurrent::after {
    content: none;
}

.mobile-menu__lang .country-selector.weglot-dropdown ul {
    position: static;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mobile-menu__lang .country-selector.weglot-dropdown ul li a {
    display: block;
    padding: 0;
    color: var(--color-black);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.mobile-menu__lang .country-selector.weglot-dropdown ul li a:hover,
.mobile-menu__lang .country-selector.weglot-dropdown ul li a:focus-visible {
    opacity: 1;
}

/* Uitzondering op de uppercase-koppen.
   `text-transform: uppercase` mapt µ (U+00B5) naar de Griekse hoofdletter Μ,
   die als een Latijnse M oogt — "µZ" werd op het scherm "MZ". ascee_caps_safe()
   zet het teken in deze span; editors kunnen 'm via de stijlenlijst ook zelf
   op een stuk tekst toepassen als een titel in normale schrijfwijze moet. */
.no-caps {
    text-transform: none;
}

.about--full {
    grid-template-columns: 1fr;
}

.about--full .about__content {
    max-width: none; /* of bv. 72ch als je de regellengte wilt beperken */
}