/* ==========================================================
   RADENSYS — stylesheet
   Kleurenschema afgeleid van het echte logo: blauw (#167BD6),
   zwart/inkt, en wit. Donkere navbar/hero (waar het logo van
   nature op staat), de rest van de site is licht en helder.
   ========================================================== */

:root {
    /* Kleuren */
    --navy: #0a1826;        /* donker navy voor navbar, hero, footer */
    --navy-soft: #12283b;
    --bg: #ffffff;          /* hoofdachtergrond: licht */
    --bg-soft: #f3f6fa;     /* lichte sectie-achtergrond ter afwisseling */
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --border-color-strong: #c9d4e0;
    --text-main: #10202f;   /* bijna zwart, ietsje navy getint */
    --text-muted: #5b6b7c;
    --text-on-dark: #eef4fb;
    --text-on-dark-muted: #9db3c7;

    --accent: #167bd6;      /* het echte logo-blauw */
    --accent-dark: #0f5ea8;
    --accent-soft: rgba(22, 123, 214, 0.12);

    /* Typografie */
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    --max-width: 1200px;
}

/* --- Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* De navbar is sticky en dekt anders de bovenkant van een sectie af bij het
   springen naar een anker (bv. Contact). scroll-margin-top laat er ruimte
   voor, zodat de sectietitel onder de balk zichtbaar blijft. Waarde =
   navbarhoogte (105px desktop / 65px mobiel) plus wat lucht. */
section[id] {
    scroll-margin-top: 130px;
}

@media (max-width: 768px) {
    section[id] {
        scroll-margin-top: 84px;
    }
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

a {
    color: inherit;
}

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel overschrijft een
   class met een eigen display-waarde (bv. .contact-form { display: flex }) de
   standaardregel van de browser, waardoor element.hidden = true niets doet. */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Eyebrow: klein label boven een titel */
/* Eyebrow / kicker: klein en met ruime letterafstand, zodat het label
   present en bewust oogt maar de sectiekop laat domineren. Presence komt
   hier van de spatiëring en het gewicht, niet van pure grootte. */
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

/* De hero- en whitepaper-labels zijn geen sectietitels maar kickers boven
   de grote titel; die houden hun oorspronkelijke, kleine maat (anders
   breekt de lange 'RADIATION ENGINEERING SYSTEMS' op mobiel af). */
.eyebrow--on-dark {
    color: #6db4f2;
    font-size: 0.8rem;
}

/* --- Knop --- */
.btn {
    display: inline-block;
    background-color: var(--accent);
    color: #ffffff;
    text-decoration: none;
    padding: 15px 30px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px var(--accent-soft);
}

.btn--block {
    width: 100%;
    text-align: center;
}

.btn--outline {
    background-color: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    align-self: flex-start;
    margin-top: 8px;
}

.btn--outline:hover {
    background-color: var(--accent);
    color: #ffffff;
}

/* Rustige, secundaire knop: leesbaar maar duidelijk ondergeschikt aan
   .btn--outline, zodat de hiërarchie tussen de twee acties klopt. */
.btn--quiet {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color-strong);
    padding: 12px 22px;
    font-size: 0.88rem;
    font-weight: 500;
}

.btn--quiet:hover {
    background-color: transparent;
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: none;
}

/* ==========================================================
   SCROLL REVEAL
   ========================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* transform: none (en niet translateY(0)) na afloop: een ancestor met een
   transform-waarde wordt een containing block, en dat zit position: sticky
   binnen de sectie (de liftanimatie op sbds.html) in de weg. Visueel is er
   geen verschil en de overgang animeert identiek. */
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================
   NAVBAR (blijft donker — het logo is hiervoor gemaakt)
   ========================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px max(2rem, (100vw - var(--max-width)) / 2);
    background-color: var(--navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .logo img {
    height: 88px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    color: var(--text-on-dark-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--text-on-dark);
}

.nav-links a.nav-cta {
    color: #ffffff;
    background-color: var(--accent);
    padding: 10px 20px;
    border-radius: 8px;
}

.nav-links a.nav-cta:hover {
    background-color: var(--accent-dark);
    color: #ffffff;
}

.nav-links a.active-link {
    color: var(--accent);
}

.nav-links a.nav-cta.active-link {
    color: #ffffff;
}

/* ---- Navigatie-dropdown (Areas of expertise) ----
   Desktop: een zwevend paneel onder het item, zichtbaar bij hover, focus of
   een klik (klik 'pint' hem open voor touch/toetsenbord). De afhandeling
   staat in main.js; hover en focus-within worden puur door CSS geregeld. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-on-dark-muted);
    transition: color 0.2s;
}

.nav-dropdown-toggle:hover {
    color: var(--text-on-dark);
}

.nav-caret {
    font-size: 0.7em;
    transition: transform 0.2s;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

/* ---- Taalkeuze: wereldbol + taalcode, zelfde dropdown-mechaniek ---- */
.nav-lang .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-globe {
    width: 17px;
    height: 17px;
    display: block;
}

.nav-lang-code {
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* De taal waarop de bezoeker nu zit, gemarkeerd in het lijstje. */
.nav-lang .nav-dropdown-menu a[aria-current="true"] {
    color: var(--accent);
    font-weight: 600;
}

/* Onzichtbare brug over de tussenruimte, zodat de hover niet wegvalt als
   de muis van het item naar het paneel beweegt. */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 210px;
    list-style: none;
    padding: 8px;
    background-color: var(--navy-soft);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
}

/* Bewust geen :focus-within: dat zou het paneel openhouden zolang de knop
   focus heeft, waardoor Escape (via JS) hem niet kan sluiten. Toetsenbord
   opent via Enter/Space op de knop, muis via hover, allebei plus de klik. */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    white-space: nowrap;
    color: var(--text-on-dark-muted);
    font-size: 0.9rem;
}

.nav-dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* Ondertitel bij een menu-item (nu alleen bij Projects) */
.nav-item-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-on-dark-muted);
    letter-spacing: 0.01em;
}

/* Taalmenu: smaller paneel dan het expertise-menu, en rechts uitgelijnd
   onder de knop: gecentreerd zou het als laatste navigatie-item buiten de
   schermrand kunnen steken. Staat NA de basisregels hierboven, omdat de
   open-toestand op gelijke specificiteit wint via de bronvolgorde. */
.nav-lang .nav-dropdown-menu {
    min-width: 150px;
    left: auto;
    right: 0;
    transform: translateY(-6px);
}

.nav-lang:hover .nav-dropdown-menu,
.nav-lang.open .nav-dropdown-menu {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .nav-caret,
    .nav-dropdown-menu {
        transition: none;
    }
}

/* Hamburger (verborgen op desktop) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--text-on-dark);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ==========================================================
   HERO (donker, effen navy: slogan boven de twee activiteitenkaarten)
   ========================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: var(--navy);
}

.hero-content {
    position: relative;
    /* Zelfde breedte als de rest van de site: met drie activiteitenkaarten
       naast elkaar moet 'Spreader Bar Detection System' op één regel passen. */
    max-width: var(--max-width);
    width: 100%;
    padding: 84px 2rem 96px;
    color: var(--text-on-dark);
}

.hero-content h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: #ffffff;
}

.hero-content h1 span {
    color: #6db4f2;
    display: block;
}

.hero-lead {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-on-dark-muted);
    max-width: 640px;
    margin: 0 auto 44px auto;
}

/* ---- De twee activiteiten als klikbare kaarten ----
   Foto boven, titel + pijl eronder. De hele kaart is een link naar het
   relevante deel van de site. */
.hero-activities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 44px;
    text-align: left;
}

/* Blauwe titelbalk boven; de foto vult de rest van de kaart tot de
   onderrand. De 'Learn more'-knop zweeft ín de foto (absoluut
   gepositioneerd), dus er is geen blauwe zone onder de foto. */
.activity-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    background-color: var(--accent);
    border: 1.5px solid var(--accent);
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.activity-card:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

/* Vaste beeldverhouding zodat beide kaarten even hoog zijn, ook al
   verschillen de bronfoto's van formaat. */
.activity-card img {
    width: 100%;
    /* height:auto laat het height-attribuut van de img los; zonder dit wint
       dat attribuut van aspect-ratio en rendert de foto op volle hoogte. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

/* Titel boven de foto, 'Learn more'-knop eronder. */
.activity-title {
    display: block;
    padding: 18px 20px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    /* Licht responsief: de langste titel (Spreader Bar Detection System)
       moet op elke desktopbreedte op één regel blijven. */
    font-size: clamp(0.98rem, 1.35vw, 1.15rem);
    color: #ffffff;
}

/* Zweeft onderin de foto. De donkere, licht geblurde achtergrond houdt
   de witte tekst leesbaar op elke foto. */
.activity-cta {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background-color: rgba(10, 24, 38, 0.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: border-color 0.2s, background-color 0.2s;
}

.activity-card:hover .activity-cta {
    border-color: #ffffff;
    background-color: rgba(10, 24, 38, 0.75);
}

/* Wit in plaats van accentblauw: op de blauw gevulde kaart zou een
   accentblauwe pijl wegvallen. */
.activity-arrow {
    color: #ffffff;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.activity-card:hover .activity-arrow {
    transform: translateX(4px);
}

/* Derde kaart zonder foto: bewust een eigen opmaak. Groot 'Projects'
   links uitgelijnd rond het midden van de kaart, met de tekst eronder.
   Het grid rekt de kaart tot de hoogte van de fotokaarten; de padding
   onderaan houdt de tekst vrij van de zwevende Learn more-knop. */
.activity-card--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 24px 72px;
}

.activity-card--text .activity-title {
    padding: 0;
    margin-bottom: 14px;
    text-align: left;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem);
    line-height: 1.1;
}

.activity-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    line-height: 1.55;
    text-align: left;
}

/* Tussenmaat: twee kolommen fotokaarten, de tekstkaart eronder over de
   volle breedte. */
@media (max-width: 1000px) and (min-width: 701px) {
    .hero-activities {
        grid-template-columns: 1fr 1fr;
    }

    /* Onderpadding blijft 72px uit de basisregel: minder dan de hoogte
       van de zwevende knop (ca. 61px) en de tekst loopt eronderdoor. */
    .activity-card--text {
        grid-column: 1 / -1;
    }
}

/* Op smalle schermen onder elkaar. */
@media (max-width: 700px) {
    .hero-activities {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   PRODUCT — Spreader Bar Detection System
   ========================================================== */
.product-section {
    max-width: var(--max-width);
    margin: 0 auto;
    /* Onderaan bewust minder lucht: de voetnoot bleef anders te ver van
       de How it works-sectie hangen. */
    padding: 110px 2rem 48px;
}

.product-intro {
    max-width: 760px;
    margin: 0 auto 56px auto;
    text-align: center;
}

.product-intro h2 {
    font-size: 2.1rem;
    margin-bottom: 20px;
}

/* :not(.eyebrow) zodat de uitvulling en de gedempte tekstkleur alleen de
   body-alinea raken, niet het 'OUR PRODUCT'-label. Dat label houdt zo zijn
   eigen .eyebrow-stijl (accentblauw, gecentreerd) en blijft in lijn met de
   andere sectietitels. */
.product-intro p:not(.eyebrow) {
    color: var(--text-muted);
    font-size: 1.08rem;
    text-align: justify;
    hyphens: auto;
}

/* In een smalle telefoonkolom geeft uitvullen te brede woordgaten;
   daar links uitlijnen. */
@media (max-width: 600px) {
    .product-intro p:not(.eyebrow) {
        text-align: left;
    }
}

.product-showcase {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    background-color: var(--bg-soft);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
}

.product-showcase img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Foto in de showcase met de folderdownloads zwevend rechtsonder,
   in dezelfde chip-stijl als de Learn more-knop op de herokaarten. */
.product-photo {
    position: relative;
}

.product-photo-downloads {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.product-photo-downloads a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background-color: rgba(10, 24, 38, 0.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.product-photo-downloads a:hover {
    background-color: rgba(10, 24, 38, 0.8);
    border-color: #ffffff;
}

/* Smalle schermen: de foto is te smal voor zwevende knoppen met deze
   labels; dan als volle donkere knoppen onder de foto. */
@media (max-width: 640px) {
    .product-photo-downloads {
        position: static;
        margin-top: 12px;
        align-items: stretch;
    }

    .product-photo-downloads a {
        justify-content: center;
        text-align: center;
        background-color: var(--navy);
        border-color: var(--navy);
    }
}

.product-stats {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.stat {
    border-left: 3px solid var(--accent);
    padding-left: 20px;
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Bronvermelding bij elk cijfer — zichtbaar, maar ondergeschikt aan het label.
   Geen cijfer op de site zonder bron. */
.stat-source {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

/* Knoprij onder de cijfers: 'Learn More' is de primaire actie,
   de folderdownload staat er bewust rustiger naast. */
.product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.product-actions .btn--outline {
    align-self: auto;
    margin-top: 0;
}

.product-footnote {
    max-width: 760px;
    margin: 40px auto 0 auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

/* ==========================================================
   HOW IT WORKS
   Lichte sectie-achtergrond zodat de drie stappen zich visueel
   losmaken van het productblok erboven.
   ========================================================== */
.how-section {
    background-color: var(--bg-soft);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 100px 2rem;
    margin-bottom: 110px;
}

.how-intro {
    max-width: 720px;
    margin: 0 auto 54px auto;
    text-align: center;
}

.how-intro h2 {
    font-size: 2.1rem;
    margin-bottom: 18px;
}

.how-intro p:not(.eyebrow) {
    color: var(--text-muted);
    font-size: 1.05rem;
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: var(--max-width);
    margin: 0 auto;
    list-style: none;
}

.how-step {
    position: relative;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 32px 28px;
    overflow: hidden;
}

/* Accentbalkje dat bij hover van boven naar beneden invult — dezelfde
   subtiele interactie-taal als de kaarten in Services. */
.how-step::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s;
}

.how-step:hover::after {
    transform: scaleY(1);
}

.how-step-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: #c4d6ea;
    line-height: 1;
    margin-bottom: 16px;
}

.how-step h3 {
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.how-step p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.how-footnote {
    max-width: 720px;
    margin: 44px auto 0 auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

/* ==========================================================
   LIFTCYCLUS-ANIMATIE (sbds.html)
   Links een vastgepinde illustratie op navy (waar het logo van
   nature op staat), rechts de drie stappen met ruime tussen-
   afstand: die afstand IS de tijdlijn van de animatie.
   ========================================================== */
.how-scroll {
    display: grid;
    grid-template-columns: minmax(380px, 460px) 1fr;
    gap: 56px;
    align-items: start;
    max-width: var(--max-width);
    margin: 0 auto;
}

.how-visual {
    position: sticky;
    /* Zelfde offset als de navbar-vrijruimte elders (105px balk + lucht) */
    top: 130px;
    background-color: var(--navy);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 24px 48px -24px rgba(8, 35, 63, 0.45);
}

.how-visual svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Tekst in de illustratie erft de sitefonts; fills passen bij het navy vlak. */
.lift-status-text {
    font: 600 13px var(--font-body);
    fill: var(--text-on-dark);
    letter-spacing: 0.02em;
}

.lift-axis-label {
    font: 500 10px var(--font-body);
    fill: var(--text-on-dark-muted);
    letter-spacing: 0.04em;
}

.lift-peak-title {
    font: 600 12px var(--font-body);
    fill: var(--text-on-dark);
}

.lift-peak-sub {
    font: 600 9px var(--font-body);
    fill: #5aa9f0;
    letter-spacing: 0.08em;
}

.lift-peak-sub--muted {
    fill: var(--text-on-dark-muted);
}

.lift-lock {
    transition: fill 0.25s;
}

/* In de scroll-opstelling staan de stappen onder elkaar; de tussenruimte
   bepaalt hoeveel scrollweg de animatie krijgt. */
.how-scroll .how-steps {
    display: flex;
    flex-direction: column;
    row-gap: clamp(120px, 22vh, 220px);
    max-width: 560px;
    padding: 6vh 0 10vh 0;
}

/* De stap die nu 'aan de beurt' is licht op met dezelfde interactietaal
   als de hover (accentbalkje links). */
.how-scroll .how-step.is-active {
    border-color: var(--border-color-strong);
    box-shadow: 0 14px 34px -18px rgba(16, 32, 47, 0.25);
}

.how-scroll .how-step.is-active::after {
    transform: scaleY(1);
}

.how-scroll .how-step.is-active .how-step-num {
    color: var(--accent);
}

@media (max-width: 900px) {
    .how-scroll {
        display: block;
    }

    /* De illustratie blijft ook op mobiel plakken (onder de lagere navbar)
       terwijl de stappen eronderdoor scrollen. */
    .how-visual {
        top: 76px;
        z-index: 5;
        width: min(100%, 420px);
        margin: 0 auto 30px auto;
    }

    .how-scroll .how-steps {
        row-gap: clamp(90px, 16vh, 160px);
        max-width: none;
        padding: 2vh 0 6vh 0;
    }

    /* Op mobiel vervalt de spectrumgrafiek: te klein om te lezen, en het
       bronpunt plus de statusregel vertellen het verhaal daar al. De
       bijpassende viewBox-crop staat in main.js (kan niet in CSS). */
    .lift-svg #liftChart {
        display: none;
    }
}

/* ==========================================================
   FAQ (sbds.html)
   Native details/summary-elementen: geen JavaScript nodig en
   toetsenbordtoegankelijk. Zelfde kaartstijl als de rest.
   ========================================================== */
.faq-section {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 2rem 110px 2rem;
}

.faq-section h2 {
    font-size: 2.1rem;
    margin-bottom: 34px;
}

.faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 14px;
}

.faq-item summary {
    cursor: pointer;
    padding: 18px 48px 18px 22px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    position: relative;
    list-style: none; /* geen standaard driehoekje; we tekenen zelf een + */
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Plusje dat bij openklappen naar een kruisje draait */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--accent);
    transition: transform 0.2s;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
    padding: 0 22px 20px 22px;
    color: var(--text-muted);
    font-size: 0.97rem;
}

.faq-item a {
    color: var(--accent-dark);
}

/* ==========================================================
   YOUR CONTACTS
   ========================================================== */
.people-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 110px 2rem;
}

.people-intro {
    text-align: center;
    margin-bottom: 50px;
}

.people-intro h2 {
    font-size: 2.1rem;
}

/* Breed genoeg voor drie kaarten naast elkaar (3 x 320 + 2 x 24 = 1008);
   daaronder valt auto-fit vanzelf terug op twee en dan één kolom. */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

/* Foto links, gegevens rechts. */
.person {
    display: flex;
    align-items: center;
    gap: 22px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 26px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.person:hover {
    border-color: var(--accent);
    box-shadow: 0 16px 32px -20px rgba(16, 32, 47, 0.25);
}

.person-photo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-soft);
}

.person-info h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.person-role {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.person-contact {
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
}

/* Ruime tapzone voor e-mail en telefoon; de sectie wordt ook op
   telefoons gelezen en een tel:-link moet comfortabel raakbaar zijn. */
.person-contact a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 0;
    color: var(--text-muted);
    text-decoration: none;
    word-break: break-word;
}

.person-contact a:hover {
    color: var(--accent);
}

/* Op smalle schermen wordt de tekstkolom naast de foto te krap voor een
   volledig e-mailadres; daar stapelen we foto en gegevens onder elkaar. */
@media (max-width: 600px) {
    .person {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .person-contact {
        align-self: center;
    }

    .person-contact a {
        justify-content: center;
    }
}

/* ==========================================================
   SERVICES
   ========================================================== */
.services-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 110px 2rem;
    text-align: center;
}

.services-section h2 {
    font-size: 2.1rem;
    margin-bottom: 50px;
}

/* Expliciete kolommen in plaats van auto-fit: de uitklappanelen moeten
   op een voorspelbare breedte van "onder de eigen kaart" naar "onder de
   hele rij" schakelen, en dat kan niet als het kolomaantal zelf varieert. */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
}

@media (min-width: 600px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 32px 28px;
    border-radius: 10px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -20px rgba(16, 32, 47, 0.25);
}

/* De kaart waarvan het paneel openstaat, blijft gemarkeerd. */
.card.is-open {
    border-color: var(--accent);
    box-shadow: 0 16px 32px -20px rgba(16, 32, 47, 0.25);
}

/* Subtiele tekstknop: bewust lichter dan de gevulde knoppen elders.
   margin-top:auto lijnt hem onderaan uit, ook als de kaarten
   verschillend lange teksten hebben. */
/* De extra padding-bottom vergroot het tapgebied tot ruim 44px; de
   negatieve marge haalt die ruimte visueel weer weg, zodat de knop
   op dezelfde plek blijft staan als voorheen. */
.card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: -14px;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
}

.card-more:hover {
    color: var(--accent-dark);
}

.card-more-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.card-more[aria-expanded="true"] .card-more-arrow {
    transform: rotate(90deg);
}

/* Het paneel loopt over de volledige breedte van de rij. Hoogte wordt
   door main.js gezet (0 <-> scrollHeight) zodat de animatie klopt bij
   een onbekende tekstlengte. */
.cap-panel {
    grid-column: 1 / -1;
    height: 0;
    overflow: hidden;
    transition: height 0.25s ease;
    background-color: var(--bg-soft);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.cap-panel-inner {
    padding: 28px 30px;
}

.cap-panel-inner p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 80ch;
}

.cap-panel-inner em {
    color: var(--text-main);
    font-style: italic;
}

/* Vanaf twee kolommen schuiven de panelen achter alle kaarten, zodat het
   paneel onder de volledige rij opent in plaats van de rij open te breken.
   Op mobiel (1 kolom) blijft de bronvolgorde staan: daar opent het paneel
   direct onder de kaart waar je op klikte. */
@media (min-width: 600px) {
    .cap-panel {
        order: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cap-panel,
    .card-more-arrow {
        transition: none;
    }
}

.card-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    background-color: var(--accent-soft);
    border-radius: 50%;
    margin-bottom: 18px;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ==========================================================
   ABOUT
   ========================================================== */
/* Bovenruimte hoort bij de sectie zelf: sinds de productsectie naar
   sbds.html is verhuisd, volgt About direct op de donkere hero. */
.about-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 110px 2rem;
}

.about-frame {
    margin: 0 auto;
    padding: 56px 64px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-soft);
}

.about-frame h2 {
    font-size: 2rem;
    margin-bottom: 24px;
}

/* De kaart loopt nu over de volle contentbreedte. Eén tekstkolom zou dan
   ~130 tekens per regel worden - te lang om prettig te lezen. Twee kolommen
   houden de regellengte comfortabel en vullen de breedte echt op.
   Uitvullen + hyphens maken de randen recht zonder brede woordgaten. */
.about-text {
    column-count: 2;
    column-gap: 56px;
    text-align: justify;
    hyphens: auto;
    margin-top: 24px;
}

.about-frame p:not(.eyebrow) {
    color: var(--text-muted);
    font-size: 1.05rem;
    /* Een alinea niet over de kolomgrens laten breken. */
    break-inside: avoid;
}

/* De globale reset zet alle marges op 0; losse alinea's hebben dus
   expliciet ruimte nodig. */
.about-frame p:not(.eyebrow) + p {
    margin-top: 18px;
}

/* Op een telefoon is er geen ruimte voor twee kolommen, en uitvullen geeft
   in een smalle kolom te brede woordgaten; terug naar een enkele, links
   uitgelijnde kolom. */
@media (max-width: 700px) {
    .about-text {
        column-count: 1;
        text-align: left;
    }
}

/* ==========================================================
   CTA — LET'S WORK TOGETHER / CONTACT
   ========================================================== */
.cta-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 110px 2rem;
}

.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.contact-intro h2 {
    font-size: 2.1rem;
    margin-bottom: 20px;
}

.contact-intro p:not(.eyebrow) {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 32px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-details a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
}

.contact-details a:hover {
    color: var(--accent);
}

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-soft);
    font-size: 1rem;
}

/* --- Contactkaart --- */
.contact-card {
    background-color: var(--bg-soft);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 36px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Duidelijk ondergeschikt aan het label zelf: de bezoeker moet in een
   oogopslag zien welke velden hij mag overslaan. */
.field-optional {
    font-weight: 400;
    color: var(--text-muted);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color-strong);
    background-color: #ffffff;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1rem;
    resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Downloadknop voor de folder in de succesmelding van het formulier */
.form-status-download {
    display: inline-block;
    margin-top: 16px;
}

.form-status {
    margin-top: 18px;
    font-size: 0.92rem;
    font-weight: 500;
}

.form-status.success { color: var(--accent-dark); }
.form-status.error { color: #c0392b; }

/* ==========================================================
   LAND SANITATION PAGE (land-sanitation.html)
   Foto bovenaan, daaronder de tekst in een leesbare kolom.
   Uitvullen + hyphens, consistent met About en de SBDS-intro.
   ========================================================== */
.land-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 90px 2rem 110px;
}

/* De foto staat onder de tekst. */
.land-photo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 44px;
    display: block;
}

/* Tussenkop op tekstpagina's die deze layout gebruiken (projects.html) */
.land-text h2 {
    font-size: 1.7rem;
    margin-bottom: 24px;
}

.land-text p {
    color: var(--text-muted);
    font-size: 1.05rem;
    text-align: justify;
    hyphens: auto;
}

.land-text p + p {
    margin-top: 18px;
}

/* In een smalle telefoonkolom geeft uitvullen te brede woordgaten;
   daar links uitlijnen. */
@media (max-width: 600px) {
    .land-text p {
        text-align: left;
    }
}

/* ==========================================================
   FOOTER (donker, zoals de navbar)
   ========================================================== */
/* Logo links, gegevens gecentreerd. Drie kolommen (1fr auto 1fr) met een
   lege derde kolom: doordat de buitenste kolommen even breed zijn, staat
   het middelste blok precies in het midden van de pagina - niet in de
   ruimte die overblijft naast het logo.
   De horizontale padding gebruikt dezelfde berekening als de navbar,
   zodat het footerlogo uitlijnt met het logo bovenaan de pagina. */
footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    background-color: var(--navy);
    padding: 44px max(2rem, (100vw - var(--max-width)) / 2);
    color: var(--text-on-dark-muted);
    font-size: 0.9rem;
}

.footer-logo {
    height: 88px;
    width: auto;
    justify-self: start;
}

.footer-info {
    grid-column: 2;
    text-align: center;
}

/* Rechterkolom: uitnodiging om de LinkedIn-pagina te volgen. Het blok
   staat rechts in het grid, maar binnenin lijnt alles links uit zodat
   de kop met de linkerrand van de knop spoort. */
.footer-follow {
    grid-column: 3;
    justify-self: end;
    text-align: left;
}

.footer-follow p {
    margin-bottom: 12px;
    color: var(--text-on-dark);
    font-size: 1.05rem;
}

/* Knop met het LinkedIn-embleem ervoor; currentColor volgt de knoptekst */
.footer-follow .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.footer-follow .btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    display: block;
}

footer p {
    margin-bottom: 10px;
}

footer p:last-child {
    margin-bottom: 0;
}

/* Op smalle schermen onder elkaar: naast elkaar wordt het daar te krap.
   Alles gecentreerd, ook het logo - links uitgelijnd oogt het daar zwevend. */
@media (max-width: 640px) {
    footer {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-info {
        grid-column: 1;
    }

    .footer-logo {
        height: 68px;
        justify-self: center;
    }

    .footer-follow {
        grid-column: 1;
        justify-self: center;
    }
}

footer a {
    color: var(--text-on-dark);
    text-decoration: none;
}

footer a:hover {
    color: #6db4f2;
}

footer .copyright {
    margin-top: 20px;
    color: var(--text-on-dark-muted);
    font-size: 0.85rem;
}

/* Focus states voor toetsenbordgebruik */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ==========================================================
   COOKIEBANNER (analytics.js)
   Vaste balk onderaan; boven de mobiele cta-balk (z-index) tot
   de bezoeker kiest. Accept is de primaire knop, Decline een
   rustige tekstknop: gelijkwaardig, maar zonder te duwen.
   ========================================================== */
.consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    padding: 16px max(2rem, (100vw - var(--max-width)) / 2);
    background-color: var(--navy-soft);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.45);
    color: var(--text-on-dark);
}

.consent-text {
    margin: 0;
    font-size: 0.92rem;
    max-width: 720px;
}

.consent-text a {
    color: #6db4f2;
    text-decoration: underline;
}

.consent-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.consent-decline {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-on-dark-muted);
    text-decoration: underline;
    padding: 8px 4px;
}

.consent-decline:hover {
    color: #ffffff;
}

/* --- Back to top knop --- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color-strong);
    background-color: #ffffff;
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
    box-shadow: 0 8px 24px -8px rgba(16, 32, 47, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Sticky mobiele CTA-balk (verborgen op desktop) --- */
.mobile-cta-bar {
    display: none;
}

/* ==========================================================
   WHITEPAPER PAGE (sbds-whitepaper.html)
   ========================================================== */
.paper-hero {
    background-color: var(--navy);
    text-align: center;
    padding: 80px 2rem 70px 2rem;
    color: var(--text-on-dark);
}

.paper-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: #ffffff;
    margin-bottom: 16px;
}

.paper-subtitle {
    max-width: 640px;
    margin: 0 auto;
    color: var(--text-on-dark-muted);
    font-size: 1.1rem;
    font-style: italic;
}

.paper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 70px 2rem 120px 2rem;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
    align-items: start;
}

.paper-toc {
    position: sticky;
    /* Onder de sticky navbar (105px hoog) blijven, met wat lucht -
       zelfde offset als scroll-margin-top elders. Op 100px schoof de
       'On this page'-kop bij het scrollen onder de balk. */
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
}

.paper-toc-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.paper-toc a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.4;
}

.paper-toc a:hover {
    color: var(--accent);
}

.paper-content {
    max-width: 720px;
}

.paper-content h2 {
    font-size: 1.5rem;
    margin-top: 48px;
    margin-bottom: 18px;
    scroll-margin-top: 100px;
}

.paper-content h2:first-child {
    margin-top: 0;
}

.paper-content p {
    color: var(--text-main);
    font-size: 1.02rem;
    margin-bottom: 20px;
}

.paper-content strong {
    color: var(--navy);
}

.citation {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
}

.citation:hover {
    text-decoration: underline;
}

.paper-references {
    list-style: none;
    counter-reset: refs;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.paper-references li {
    counter-increment: refs;
    position: relative;
    padding-left: 34px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    scroll-margin-top: 100px;
}

.paper-references li::before {
    content: "[" counter(refs) "]";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.88rem;
}

.paper-references a {
    color: var(--accent);
    word-break: break-all;
}

.paper-cta {
    margin-top: 48px;
    padding: 32px;
    background-color: var(--bg-soft);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: center;
}

.paper-cta p {
    margin-bottom: 18px;
    color: var(--text-main);
    font-weight: 500;
}

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

    .paper-toc {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 20px;
        gap: 8px 20px;
    }

    .paper-toc-label {
        width: 100%;
    }
}

/* ==========================================================
   LINKS PAGE (links.html)
   Standalone landingspagina achter de QR-code op de visitekaartjes.
   Mobiel-eerst: dit wordt vrijwel altijd op een telefoon geopend.
   Donkere achtergrond omdat logo.png de lichte logoversie is — die
   hoort op navy, net als in de navbar, hero en footer.
   ========================================================== */
.link-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 44px 20px;
    background-color: var(--navy);
}

.link-card {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.link-logo {
    display: block;
    width: 210px;
    max-width: 72%;
    height: auto;
    margin: 0 auto 18px auto;
}

.link-tagline {
    color: var(--text-on-dark-muted);
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 36px;
}

.link-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

/* Volle breedte en een ruime tapzone — ruim boven de 44px die je
   op een telefoon minimaal wilt raken. */
.link-btn {
    width: 100%;
    padding: 18px 22px;
    font-size: 1rem;
    text-align: center;
}

/* De drie vervolgacties: leesbaar op navy, maar duidelijk
   ondergeschikt aan 'Save contact'. */
.link-btn--secondary {
    background-color: transparent;
    color: var(--text-on-dark);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 500;
}

.link-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

/* Persoonlijke contactkaarten. Mobiel-eerst: één kolom, naast elkaar
   zodra er ruimte is. Alleen tekst, geen foto's. */
.link-people {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
    text-align: left;
}

.person-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 20px 22px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
}

.person-card h2 {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 1px;
}

.person-card-role {
    color: #6db4f2;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

/* Ruime tapzone: dit wordt vrijwel altijd op een telefoon geopend, dus
   e-mail en telefoonnummer moeten comfortabel raakbaar zijn. */
.person-card a {
    color: var(--text-on-dark-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 11px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.person-card a:hover {
    color: var(--accent);
}

.person-card-save {
    margin-top: 4px;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.85rem !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 7px;
    padding: 11px 18px !important;
    justify-content: center;
    align-self: stretch;
}

.person-card-save:hover {
    color: var(--accent) !important;
    border-color: var(--accent);
    background-color: rgba(255, 255, 255, 0.05);
}

.link-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.85rem;
    color: var(--text-on-dark-muted);
}

.link-meta a {
    color: var(--text-on-dark-muted);
    text-decoration: none;
}

.link-meta a:hover {
    color: var(--accent);
}

/* Vanaf tabletbreedte staan de twee contactkaarten naast elkaar. De
   kolom met knoppen blijft daarbij op zijn oorspronkelijke breedte,
   zodat de knoppen niet onnodig uitrekken. */
@media (min-width: 700px) {
    .link-card {
        max-width: 660px;
    }

    .link-logo,
    .link-tagline,
    .link-actions {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .link-people {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* Vanaf deze breedte passen de drie contactkaarten op één rij, wat er
   evenwichtiger uitziet dan twee kaarten met een losse derde eronder. */
@media (min-width: 920px) {
    .link-card {
        max-width: 900px;
    }

    .link-people {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 900px) {
    .product-showcase {
        grid-template-columns: 1fr;
    }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .navbar .logo img {
        height: 48px;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--navy);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    /* Ruim genoeg voor alle items met de dropdown uitgeklapt. */
    .nav-links.open {
        max-height: 30rem;
    }

    .nav-links > li {
        padding: 16px 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-links a.nav-cta {
        display: inline-block;
    }

    /* ---- Dropdown op mobiel: inklapbaar in de kolom ----
       Geen zwevend paneel maar een accordeon onder het item. */
    .nav-dropdown {
        position: static;
        display: flex;
        flex-direction: column;
    }

    .nav-dropdown::after {
        display: none;
    }

    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        font-size: 1rem;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        min-width: 0;
        margin-top: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease, margin-top 0.2s ease;
    }

    /* transform: none is hier essentieel: de desktopregel voor de open
       stand zet translateX(-50%) (centreren onder het menu-item), en die
       wint anders ook op mobiel - waardoor de lijst een halve breedte
       naar links buiten beeld schuift en het submenu leeg lijkt. */
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown.open .nav-dropdown-menu {
        transform: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        visibility: visible;
        pointer-events: auto;
        max-height: 140px;
        margin-top: 12px;
    }

    /* Het taalmenu heeft drie items en dus iets meer hoogte nodig. */
    .nav-lang.open .nav-dropdown-menu {
        max-height: 200px;
    }

    .nav-dropdown-menu li {
        padding: 0;
        border-top: none;
    }

    .nav-dropdown-menu a {
        padding: 12px 0 12px 1.25rem;
        font-size: 0.95rem;
    }

    /* Sticky contact-balk onderaan het scherm op mobiel */
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        gap: 10px;
        padding: 12px 16px;
        background-color: var(--navy);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-cta-bar a {
        flex: 1;
        text-align: center;
        padding: 12px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .mobile-cta-bar a:first-child {
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: var(--text-on-dark-muted);
    }

    /* Ruimte onderaan zodat de sticky balk niets bedekt */
    body {
        padding-bottom: 72px;
    }

    .back-to-top {
        bottom: 84px;
    }
}

@media (max-width: 600px) {
    .hero {
        min-height: 74vh;
    }

    .about-frame {
        padding: 40px 24px;
    }

    .contact-card {
        padding: 24px;
    }
}