/* ==========================================================================
   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 {
    --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: 1728px;
    /* Figma frame width — outer container */
    --container-pad-x: clamp(20px, 5vw, 186px);
    /* gives 1356px content at max */

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

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


/* --- 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;
}

/* 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;
    aspect-ratio: 150 / 37;
}

.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);
}

.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;
}

.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 {
    padding-top: clamp(80px, 22vw, 384px);
}

/* 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;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.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%;
}

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

.team-card__image {
    flex: 1 1 0;
    min-height: 0;
    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);
    }

    .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;
    }

    .team-card {
        height: 360px;
    }

    /* 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;
    aspect-ratio: 150/37;
}

.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;
    aspect-ratio: 150 / 37;
    /* 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 ---- */
@media (max-width: 1024px) {

    /* 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);
        aspect-ratio: 150 / 37;
    }

    /* 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);
}

/* 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; }
.ascee-gf .gfield--type-checkbox .gchoice {
    display: flex;
    align-items: center;
    gap: 20px;
    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;
}

/* Mobile: collapse to single column */
@media (max-width: 1024px) {
    .ascee-gf .gform_fields,
    .ascee-gf .gform-fields {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }
    .ascee-gf .gfield[class*="gfield"] {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .ascee-gf .gfield textarea {
        min-height: 140px;
    }
}