/* PureTesting – responsive corporate stylesheet */
:root {
    color-scheme: dark;
    --bg: #071426;
    --bg-deep: #050d19;
    --surface: #0d1d32;
    --text: #f4f7fb;
    --muted: #a8b5c6;
    --muted-2: #7f90a5;
    --accent: #13c9f3;
    --accent-2: #168bd0;
    --line: rgba(148, 184, 216, .18);
    --radius: 22px;
    --content: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { min-width: 320px; overflow-x: hidden; background: var(--bg-deep); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.navbar { position: fixed; z-index: 1000; top: 16px; left: 50%; transform: translateX(-50%); width: min(90%, var(--content)); min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px 26px; border: 1px solid rgba(92,178,220,.2); border-radius: 18px; background: rgba(5,15,29,.92); backdrop-filter: blur(18px); box-shadow: 0 14px 45px rgba(0,0,0,.25); }
.logo, .footer-logo { display: flex; flex: 0 0 auto; align-items: center; text-decoration: none; }
.logo img { display: block; width: auto; height: 48px; object-fit: contain; }
.menu { display: flex; align-items: center; justify-content: center; gap: clamp(15px,2.2vw,32px); }
.menu a { color: #d7e1ed; font-size: 13px; font-weight: 600; text-decoration: none; transition: color .2s; white-space: nowrap; }
.menu a:hover, .menu a:focus-visible { color: var(--accent); }
.cv-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 11px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.cv-btn { flex: 0 0 auto; padding: 12px 17px; background: var(--accent); color: #041321; }
.cv-btn:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30,166,220,.2); }
.hero { position: relative; isolation: isolate; width: min(100%,1500px); min-height: 720px; margin: 0 auto; padding: 180px clamp(28px,6vw,90px) 100px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); align-items: center; gap: clamp(45px,6vw,90px); }
.hero::before { position: absolute; z-index: -1; top: 60px; right: -150px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle,rgba(22,139,208,.17),transparent 68%); content: ""; }
.hero-content { max-width: 690px; }
.eyebrow, .section-sub { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 2.7px; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.eyebrow-dot, .availability i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(19,201,243,.8); }
.hero h1 { margin-bottom: 22px; font-size: clamp(58px,7vw,92px); font-weight: 800; letter-spacing: -5px; line-height: 1.04; }
.hero-period, .footer-brand span { color: var(--accent); }
.hero-specialties { display: grid; gap: 10px; margin: 0 0 22px; list-style: none; }
.hero-specialties li { display: flex; align-items: center; gap: 13px; color: #e5edf6; font-size: clamp(16px,1.6vw,22px); font-weight: 650; }
.specialty-icon { display: inline-grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; color: var(--accent); font-size: 25px; font-weight: 700; }
.hero-description { max-width: 650px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.buttons { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.btn { min-height: 48px; padding: 13px 20px; }
.btn-primary { background: linear-gradient(110deg,#08c5e9,#29d5ee); color: #031321; }
.btn-secondary { border: 1px solid rgba(190,213,235,.35); color: var(--text); background: rgba(255,255,255,.025); }
.hero-panel { padding: 25px; border: 1px solid rgba(19,201,243,.28); border-radius: 26px; background: linear-gradient(145deg,rgba(16,36,61,.94),rgba(7,20,36,.96)); box-shadow: 0 25px 80px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04); }
.panel-heading, .panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading { padding-bottom: 21px; border-bottom: 1px solid var(--line); color: #dce8f4; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.availability { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 9px; letter-spacing: 1px; }
.availability i { width: 6px; height: 6px; }
.stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.stat { min-height: 150px; padding: 20px 18px; border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat:nth-child(n+3) { border-bottom: 0; }
.stat-icon { margin-bottom: 4px; color: var(--accent); font-size: 27px; font-weight: 700; line-height: 1.2; }
.stat h2 { color: #f7fbff; font-size: clamp(35px,4vw,48px); font-weight: 800; letter-spacing: -2px; line-height: 1.15; }
.stat h2 span { color: var(--accent); }
.stat p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.stat-qualification h2 { font-size: 28px; letter-spacing: -1px; }
.panel-footer { padding-top: 20px; color: var(--muted-2); font-size: 10px; }
.panel-footer span:last-child { color: var(--accent); font-size: 17px; }
section:not(.hero) { padding: 100px 0; }
.container { width: min(90%,var(--content)); margin: 0 auto; }
.section-alt { background: rgba(12,29,49,.48); border-top: 1px solid rgba(255,255,255,.025); border-bottom: 1px solid rgba(255,255,255,.025); }
.section-heading { max-width: 760px; margin: 0 auto 45px; text-align: center; }
.section-heading-inline { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 25px; text-align: left; }
.section-sub { margin-bottom: 12px; }
.section-title { color: var(--text); font-size: clamp(30px,4vw,44px); font-weight: 700; letter-spacing: -1.6px; line-height: 1.2; }
.section-intro { max-width: 650px; margin: 15px auto 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.section-heading-inline .section-intro { margin-left: 0; }
.all-tech-link { flex: 0 0 auto; margin-bottom: 7px; color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; }
.all-tech-link:hover { text-decoration: underline; }
.skills-container { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; max-width: 1100px; margin: 0 auto; }
.skill-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 13px; border: 1px solid rgba(142,180,212,.48); border-radius: 30px; color: #e6f0fa; background: rgba(255,255,255,.025); font-size: 12px; font-weight: 600; text-decoration: none; transition: transform .2s,border-color .2s,background .2s; }
.skill-link:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(19,201,243,.09); }
.skill-link img { width: 19px; height: 19px; object-fit: contain; }
.skill-link .external-icon { margin-left: 3px; color: #a8c5d9; font-size: 12px; }
.skills-note { margin-top: 15px; color: var(--muted-2); font-size: 10px; }
.projects, .expertise-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); gap: 22px; }
.card, .expertise-card, .timeline-card { min-width: 0; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(16,36,61,.82),rgba(8,22,39,.9)); transition: transform .2s,border-color .2s,box-shadow .2s; }
.card:hover, .expertise-card:hover, .timeline-card:hover { transform: translateY(-4px); border-color: rgba(19,201,243,.35); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.card-header { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.company-logo { display: block; width: 105px; height: 65px; flex: 0 0 auto; object-fit: contain; border-radius: 7px; }
.period { display: inline-block; padding: 6px 11px; border: 1px solid var(--line); border-radius: 30px; color: var(--accent); background: rgba(19,201,243,.06); font-size: 11px; font-weight: 600; white-space: nowrap; }
.card h3, .timeline-card h3 { margin-bottom: 10px; color: #f2f7fc; font-size: 22px; line-height: 1.3; }
.card p { margin-bottom: 14px; color: var(--muted); }
.role { margin-bottom: 15px; color: #dce7f2; font-size: 13px; font-weight: 600; line-height: 1.6; }
.card ul { margin: 14px 0 0 18px; }
.card li { margin-bottom: 8px; color: #bdcada; font-size: 13px; line-height: 1.65; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tags span { padding: 5px 9px; border: 1px solid rgba(19,201,243,.16); border-radius: 20px; color: #8ddcf5; background: rgba(19,201,243,.07); font-size: 10px; }
.expertise-card h3 { margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #f3f8fc; font-size: 19px; }
.expertise-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.expertise-item:last-child { border-bottom: 0; }
.expertise-item > span { color: #c4d1df; font-size: 12px; }
.level { display: flex; flex: 0 0 auto; gap: 5px; }
.level i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.13); }
.level i.active { background: var(--accent); box-shadow: 0 0 9px rgba(19,201,243,.55); }
.timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.timeline-item { min-width: 0; }
.timeline-marker { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 0 16px 22px; border: 1px solid rgba(19,201,243,.4); border-radius: 12px; color: var(--accent); background: rgba(19,201,243,.08); font-size: 12px; font-weight: 800; }
.timeline-card { min-height: 190px; padding: 22px; }
.timeline-card .period { margin-bottom: 16px; }
.timeline-card h3 { font-size: 18px; }
.timeline-card p { color: var(--muted); font-size: 13px; line-height: 1.8; }
footer { padding: 38px 0; border-top: 1px solid var(--line); background: #040c16; }
.footer-inner { display: flex; width: min(90%,var(--content)); align-items: center; justify-content: space-between; gap: 25px; margin: 0 auto; }
.footer-logo img { display: block; width: auto; height: 43px; max-width: 210px; object-fit: contain; }
.footer-contact { display: flex; flex-direction: column; gap: 4px; }
.footer-contact span, .footer-copy { color: var(--muted-2); font-size: 11px; }
.footer-contact a { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width:1050px) {
    .navbar { gap: 18px; padding-inline: 18px; }
    .menu { gap: 15px; }
    .menu a { font-size: 12px; }
    .hero { grid-template-columns: minmax(0,1fr) minmax(300px,.85fr); gap: 38px; padding-inline: 5%; }
    .timeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
    html { scroll-padding-top: 145px; }
    .navbar { top: 10px; width: 90%; min-height: 0; flex-wrap: wrap; justify-content: space-between; gap: 10px 15px; padding: 10px 14px; }
    .logo img { height: 34px; max-width: min(42vw, 190px); }
    .cv-btn { padding: 9px 11px; font-size: 10px; gap: 6px; }
    .menu { order: 3; width: 100%; justify-content: space-between; gap: 12px; overflow-x: auto; padding: 4px 1px 2px; scrollbar-width: none; }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { font-size: 11px; }
    .hero { min-height: auto; grid-template-columns: 1fr; gap: 38px; padding: 165px 6% 80px; }
    .hero-content { max-width: 100%; }
    .hero h1 { font-size: clamp(54px,12vw,76px); letter-spacing: -3px; }
    .hero-panel { max-width: 560px; width: 100%; margin: 0 auto; }
    section:not(.hero) { padding: 78px 0; }
    .section-heading-inline { align-items: flex-start; flex-direction: column; }
    .footer-inner { flex-wrap: wrap; }
}
@media (max-width:520px) {
    .navbar { width: 88%; gap: 8px 10px; padding: 9px 11px; border-radius: 14px; }
    .logo img { height: 29px; max-width: 43vw; }
    .cv-btn { padding: 8px 9px; font-size: 10px; }
    .menu { gap: 16px; justify-content: flex-start; }
    .menu a { font-size: 10px; }
    .hero { padding-top: 160px; }
    .hero-description { font-size: 14px; }
    .buttons { flex-direction: column; align-items: stretch; max-width: 340px; }
    .btn { width: 100%; }
    .hero-panel { padding: 18px; border-radius: 20px; }
    .stat { min-height: 125px; padding: 18px 13px 15px; }
    .stat h2 { font-size: 37px; }
    .stat-qualification h2 { font-size: 25px; }
    .stat p { font-size: 11px; }
    .container { width: 88%; }
    .section-title { font-size: 30px; }
    .projects, .expertise-grid, .timeline { grid-template-columns: 1fr; }
    .card, .expertise-card { padding: 21px; }
    .company-logo { width: 88px; height: 58px; }
    .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Technology brand marks */
.skill-link { min-height: 48px; padding: 8px 14px; }
.skill-logo {
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    object-fit: contain;
}
.skill-logo-fallback {
    border-radius: 6px;
    color: #071426;
    background: var(--brand-color, #a9c6d8);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.4px;
    line-height: 1;
}
.skill-link .external-icon { font-size: 14px; }

@media (max-width:360px) {
    .logo img { height: 26px; max-width: 40vw; }
    .cv-btn { padding: 7px 8px; font-size: 9px; }
    .menu { gap: 14px; }
    .menu a { font-size: 9px; }
}


/* v5 alignment and technology icon corrections */
.navbar {
    width: min(90%, 1500px);
    left: 50%;
    right: auto;
}
@media (max-width: 760px) {
    .navbar {
        width: calc(100% - 28px);
        left: 50%;
        right: auto;
    }
}
@media (max-width: 520px) {
    .navbar {
        width: calc(100% - 20px);
    }
}


/* v6: navigation aligned to the same content edges as the page sections */
.navbar {
    width: min(90%, var(--content));
    max-width: var(--content);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
@media (max-width: 1050px) {
    .navbar {
        width: min(94%, var(--content));
    }
}
@media (max-width: 760px) {
    .navbar {
        width: 90%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}
@media (max-width: 520px) {
    .navbar {
        width: 88%;
    }
}


/* v7: hero content clears the fixed navbar; navigation itself remains unchanged */
.hero {
    padding-top: 195px;
    min-height: 650px;
    padding-bottom: 55px;
}
@media (max-width: 760px) {
    .hero {
        padding-top: 175px;
        padding-bottom: 48px;
    }
}
@media (max-width: 520px) {
    .hero {
        padding-top: 165px;
    }
}

/* Product icons: consistent sizing and clear contrast inside technology pills */
.skill-link .skill-logo {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    object-fit: contain;
    border-radius: 5px;
}
.skill-link .skill-logo-fallback {
    display: inline-grid;
    place-items: center;
    background: var(--brand-color, #167bb5);
    color: #061321;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -.3px;
}


/* Career logo showcase – horizontal, responsive carousel */
.career-showcase {
    padding: 18px 0 70px;
}
.career-carousel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(245px, 1.05fr) 42px minmax(0, 3.4fr) 42px;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 8px 16px;
    min-height: 112px;
    padding: 18px 20px;
    border: 1px solid rgba(19,201,243,.28);
    border-radius: 22px;
    background: linear-gradient(115deg, rgba(12,31,51,.96), rgba(5,18,33,.96));
    box-shadow: 0 18px 55px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025);
}
.career-caption {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 68px;
    padding-right: 18px;
    border-right: 1px solid rgba(148,184,216,.22);
}
.career-caption-icon {
    color: var(--accent);
    font-size: 31px;
    line-height: 1;
}
.career-caption h2 {
    color: var(--text);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 750;
}
.career-caption p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}
.career-viewport {
    min-width: 0;
    overflow: hidden;
    grid-row: 1;
}
.career-track {
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform .55s cubic-bezier(.2,.75,.25,1);
    will-change: transform;
}
.career-logo-item {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 12px;
    color: #e8f1fa;
}
.career-logo-item img {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 39px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}
.career-logo-item > .career-company-name {
    display: none;
    color: #16324a;
    font-size: 16px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}
.career-logo-item img.logo-failed + .career-company-name { display: inline; }
.career-logo-item .career-brand span {
    display: inline;
    color: inherit;
    font: inherit;
    white-space: inherit;
}
.career-logo-item img:not([src]), .career-logo-item img[src=""] { display: none; }
.career-logo-item img.logo-failed { display: none; }
.career-logo-item img.logo-failed + span { display: inline; }
.career-arrow {
    grid-row: 1;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(120,165,200,.45);
    border-radius: 50%;
    color: #dceaf7;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.career-arrow:hover, .career-arrow:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(19,201,243,.08);
}
.career-arrow span { font-size: 27px; line-height: 1; margin-top: -3px; }
.career-dots {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding-top: 3px;
}
.career-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(145,166,190,.38);
    cursor: pointer;
}
.career-dots button.active {
    width: 9px;
    height: 9px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(19,201,243,.65);
}
@media (max-width: 760px) {
    .career-showcase { padding: 8px 0 55px; }
    .career-carousel {
        grid-template-columns: 1fr 38px 38px;
        grid-template-rows: auto auto auto;
        gap: 12px;
        padding: 17px;
    }
    .career-caption {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 0;
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(148,184,216,.22);
    }
    .career-viewport { grid-column: 1; grid-row: 2; }
    .career-prev { grid-column: 2; grid-row: 2; }
    .career-next { grid-column: 3; grid-row: 2; }
    .career-dots { grid-column: 1 / -1; grid-row: 3; }
    .career-logo-item { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 420px) {
    .career-logo-item { flex-basis: 100%; }
    .career-logo-item img { max-height: 35px; }
}


/* v9 – bilingual CV links */
.cv-language-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.cv-language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(117,164,198,.42);
    border-radius: 11px;
    color: #e7f1fa;
    background: rgba(255,255,255,.035);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, background .2s, transform .2s;
}
.cv-language-link:hover,
.cv-language-link:focus-visible {
    border-color: var(--accent);
    background: rgba(19,201,243,.10);
    transform: translateY(-1px);
}
.cv-language-primary {
    border-color: transparent;
    background: var(--accent);
    color: #041321;
}
.cv-language-primary:hover,
.cv-language-primary:focus-visible {
    background: #35d5f7;
    color: #041321;
}
.nav-cv-links .cv-language-link {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
}
.hero-cv-links .cv-language-link { min-height: 48px; padding: 12px 15px; }
@media (max-width: 1050px) {
    .nav-cv-links { gap: 5px; }
    .nav-cv-links .cv-language-link { padding-inline: 7px; font-size: 10px; }
}
@media (max-width: 760px) {
    .nav-cv-links { width: 100%; justify-content: flex-end; }
}
@media (max-width: 520px) {
    .nav-cv-links .cv-language-link { min-height: 34px; font-size: 10px; }
    .hero-cv-links { flex-wrap: wrap; }
}

/* Career brand wordmarks: remove opaque image tiles and use a consistent baseline */
.career-logo-item {
    flex-direction: column;
    gap: 2px;
    min-height: 66px;
    height: auto;
    padding: 4px 8px;
}
.career-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    color: #f3f7fb;
    font-size: clamp(18px, 1.8vw, 25px);
    font-weight: 750;
    letter-spacing: -.8px;
    line-height: 1;
    white-space: nowrap;
}
.career-brand .brand-symbol {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -.4px;
}
.ayvens-brand { color: #9be9ef; font-weight: 650; }
.ayvens-brand .brand-symbol {
    color: #00b8c8;
    background: transparent;
    font-size: 30px;
    font-style: italic;
}
.kvk-brand { color: #f5fbff; font-size: 16px; letter-spacing: -.3px; }
.kvk-brand .brand-symbol {
    color: white;
    background: #006b83;
    border-radius: 2px;
    font-size: 12px;
}
.belasting-brand { color: #e9efff; font-size: 16px; letter-spacing: -.3px; }
.belasting-brand span { border-bottom: 2px solid #5473d6; padding-bottom: 3px; }
.ing-brand { color: white; font-size: 27px; font-weight: 850; font-style: italic; }
.ing-symbol { color: #ff6500; font-size: 27px; font-style: normal; }
/* Official organization logos are rendered from image assets below. */
@media (max-width: 760px) {
    .career-logo-item { min-height: 58px; }
    .career-brand { font-size: 19px; }
}


/* Rabobank wordmark in the career carousel */
.rabobank-brand { color: #f4f8ff; font-size: clamp(17px, 1.65vw, 23px); letter-spacing: -.65px; }
.rabobank-symbol { display: inline-flex; align-items: center; gap: 2px; height: 27px; }
.rabobank-symbol i { display: block; width: 7px; height: 20px; border: 2px solid #1594d2; border-radius: 6px 6px 2px 2px; transform: skewY(-18deg); }
.rabobank-symbol i:nth-child(2) { height: 25px; }
.rabobank-symbol i:nth-child(3) { height: 20px; }


/* =========================================================
   PureTesting refresh – visual direction based on approved
   concept: full-width glass navigation, compact hero, logo row.
   ========================================================= */
:root { --content: 1500px; }
body { overflow-x: hidden; }
.navbar {
    position: sticky; top: 0; left: auto; transform: none;
    width: 100%; max-width: none; min-height: 94px; margin: 0 auto;
    padding: 10px clamp(22px,5.5vw,90px);
    display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(300px,1fr);
    gap: 24px; border: 1px solid rgba(19,201,243,.48);
    border-radius: 0 0 20px 20px; background: rgba(4,17,32,.94);
    box-shadow: 0 12px 36px rgba(0,0,0,.22); backdrop-filter: blur(18px);
}
.logo { position: relative; display:flex; flex-direction:row; align-items:center; gap:0; }
.logo img { display:block; height:48px; width:auto; max-width:255px; object-fit:contain; }
.logo-tagline { display:none !important; }
.menu { gap: clamp(17px,3.1vw,48px); height:100%; }
.menu a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; height:72px; color:#d7e6f5; font-size:13px; }
.menu a > span { color:#9cc9e6; font-size:22px; line-height:1; font-weight:600; }
.menu a.active, .menu a:hover { color:var(--accent); }
.menu a.active > span, .menu a:hover > span { color:var(--accent); }
.menu a.active::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:4px; background:var(--accent); box-shadow:0 0 14px rgba(19,201,243,.6); }
.nav-cv-links { justify-self:end; gap:12px; }
.nav-cv-links .cv-language-link { min-height:46px; padding:10px 15px; border:1px solid var(--accent); border-radius:24px; background:transparent; color:#eaf5ff; font-size:12px; }
.nav-cv-links .cv-language-link:first-child > span:first-child { font-size:17px; }
.nav-cv-links .cv-language-link:hover { background:rgba(19,201,243,.12); transform:translateY(-1px); }
.hero {
    width:min(100%,1500px); min-height:0; padding:54px clamp(28px,6vw,90px) 48px;
    grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
    gap:clamp(35px,5vw,80px); align-items:center;
}
.hero::before { top:10px; right:32%; width:550px; height:430px; background:radial-gradient(ellipse,rgba(0,174,226,.13),transparent 68%); }
.hero::after {
    content:""; position:absolute; z-index:-1; top:30px; left:38%; width:34%; height:330px;
    opacity:.42; pointer-events:none;
    background-image:radial-gradient(circle,rgba(0,195,235,.72) 1px,transparent 1.7px);
    background-size:10px 10px;
    mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 72%);
    transform:skewY(-13deg);
}
.hero-content { max-width:720px; }
.eyebrow { margin-bottom:12px; }
.hero h1 { font-size:clamp(64px,7vw,96px); margin-bottom:16px; letter-spacing:-5px; }
.hero-specialties { gap:7px; margin-bottom:16px; }
.hero-specialties li { font-size:clamp(17px,1.65vw,23px); }
.specialty-icon { width:34px; flex-basis:34px; font-size:27px; }
.hero-description { max-width:720px; font-size:15px; line-height:1.7; }
.buttons { margin-top:22px; align-items:center; }
.hero-cv-links { gap:12px; }
.hero-cv-links .cv-language-link { min-height:49px; padding:12px 18px; border:1px solid var(--accent); border-radius:12px; }
.hero-cv-links .cv-language-primary { color:#041321; background:linear-gradient(110deg,#08c5e9,#29d5ee); }
.hero-cv-links .cv-language-link:not(.cv-language-primary) { background:rgba(255,255,255,.025); color:#f1f7ff; }
.btn-secondary { min-height:49px; border-color:var(--accent); border-radius:12px; }
.hero-panel { padding:24px 27px; border-radius:24px; }
.panel-heading { font-size:11px; letter-spacing:1.2px; }
.availability { font-size:10px; letter-spacing:.6px; }
.stat { min-height:132px; padding:18px 20px; }
.stat p { font-size:13px; }
.panel-footer { font-size:12px; }
section:not(.hero) { padding:76px 0; }
.career-showcase { padding:12px 0 12px !important; }
.career-carousel {
    display:grid; grid-template-columns:minmax(260px,1.1fr) 42px minmax(0,4fr) 42px;
    grid-template-rows:1fr auto; gap:8px 16px; min-height:142px; padding:22px 26px;
    border:1px solid rgba(0,190,235,.55); border-radius:24px;
    background:linear-gradient(110deg,rgba(8,31,52,.97),rgba(3,20,36,.97));
    box-shadow:0 18px 55px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
}
.career-caption { grid-row:1/3; gap:18px; min-height:80px; padding-right:22px; }
.career-caption-icon { font-size:36px; }
.career-caption h2 { font-size:21px; }
.career-caption p { font-size:12px; max-width:210px; }
.career-viewport { grid-row:1; }
.career-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:12px; transition:none; }
.career-logo-item {
    min-width:0; height:70px; padding:10px 8px; display:flex; flex-direction:row;
    align-items:center; justify-content:center; gap:7px; overflow:hidden;
    border-radius:12px; background:#f9fbff; color:#102b45;
    box-shadow:0 4px 16px rgba(0,0,0,.12); transition:transform .25s,box-shadow .25s,outline-color .25s;
}
.career-logo-item.active { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,190,235,.2); outline:2px solid rgba(0,190,235,.7); }
.brand-name { display:flex; flex-direction:column; align-items:flex-start; color:#173653; font-size:clamp(12px,1.1vw,17px); font-weight:800; line-height:1.02; white-space:nowrap; }
.brand-mark { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; }
.ayvens-card .brand-mark { width:30px; height:30px; border-radius:50% 50% 50% 5px; background:#006b83; color:#fff; font-size:23px; font-weight:800; font-style:italic; }
.ayvens-card .brand-name { color:#007f92; font-size:clamp(17px,1.65vw,24px); letter-spacing:-1px; }
.kvk-card .brand-name { align-items:center; color:#153d5a; }
.kvk-card .brand-name strong { font-size:clamp(23px,2.1vw,31px); letter-spacing:1px; line-height:.9; }
.kvk-card .brand-name small { margin-top:4px; font-size:clamp(8px,.75vw,11px); font-weight:750; }
.belasting-card .brand-mark { width:30px; height:38px; color:#fff; background:#176aa0; font-size:23px; }
.belasting-card .brand-name { color:#263a4e; font-family:Georgia,serif; font-size:clamp(10px,1vw,14px); }
.rabobank-card .brand-mark { width:28px; height:28px; border:3px solid #f58220; border-radius:50%; color:#f58220; font-size:22px; }
.rabobank-card .brand-name { color:#164b9a; font-size:clamp(13px,1.25vw,18px); font-style:italic; }
.ing-card .brand-name { color:#173b78; font-family:Georgia,serif; font-size:clamp(25px,2.3vw,34px); letter-spacing:2px; }
.ing-card .brand-mark { color:#ed6b22; font-size:30px; }
.career-arrow { width:40px; height:40px; border-color:rgba(130,181,215,.55); }
.career-arrow span { font-size:30px; }
.career-dots { grid-column:3; grid-row:2; padding-top:8px; }
.career-dots button { width:8px; height:8px; }
.career-dots button.active { width:10px; height:10px; }
#skills { padding-top:50px !important; }
.section-heading { margin-bottom:34px; }
@media (max-width:1100px) {
    .navbar { grid-template-columns:auto 1fr; row-gap:6px; padding:10px 4vw; }
    .logo { grid-column:1; grid-row:1; }
    .menu { grid-column:2; grid-row:1; justify-self:end; }
    .nav-cv-links { grid-column:1/-1; grid-row:2; justify-self:center; }
    .hero { padding-top:45px; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); }
    .career-carousel { grid-template-columns:minmax(210px,1fr) 36px minmax(0,3fr) 36px; }
    .career-track { gap:8px; }
}
@media (max-width:760px) {
    .navbar { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; padding:12px 16px; border-radius:0 0 16px 16px; }
    .logo { width:100%; align-items:center; }
    .logo img { height:40px; }
    .menu { width:100%; justify-content:space-around; gap:8px; }
    .menu a { height:52px; font-size:11px; }
    .menu a > span { font-size:18px; }
    .nav-cv-links { width:100%; justify-content:center; flex-wrap:wrap; }
    .nav-cv-links .cv-language-link { min-height:38px; padding:8px 12px; font-size:11px; }
    .hero { display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:42px 22px 34px; }
    .hero::after { display:none; }
    .hero h1 { font-size:clamp(56px,13vw,76px); }
    .hero-panel { width:100%; }
    .career-carousel { display:grid; grid-template-columns:1fr 38px 38px; grid-template-rows:auto auto auto; gap:12px; padding:16px; }
    .career-caption { grid-column:1/-1; grid-row:1; min-height:0; padding:0 0 12px; border-right:0; border-bottom:1px solid rgba(148,184,216,.22); }
    .career-viewport { grid-column:1/-1; grid-row:2; }
    .career-track { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .career-logo-item { height:64px; }
    .career-prev { grid-column:2; grid-row:3; }
    .career-next { grid-column:3; grid-row:3; }
    .career-dots { grid-column:1; grid-row:3; justify-content:flex-start; }
    #skills { padding-top:52px !important; }
}
@media (max-width:420px) {
    .menu a { font-size:10px; }
    .hero-cv-links { flex-wrap:wrap; }
    .career-track { grid-template-columns:1fr; }
    .career-logo-item { max-width:100%; }
}


/* Career carousel fix: authentic image logos + actual sliding motion */
.career-caption-icon {
    width:38px; height:38px; display:flex; align-items:flex-end; justify-content:center;
    gap:4px; flex:0 0 38px; padding:4px 2px;
}
.career-caption-icon i {
    display:block; width:7px; border-radius:1px 1px 0 0;
    background:var(--accent); box-shadow:0 0 10px rgba(19,201,243,.18);
}
.career-caption-icon i:nth-child(1) { height:12px; }
.career-caption-icon i:nth-child(2) { height:22px; }
.career-caption-icon i:nth-child(3) { height:32px; }
.career-track {
    display:flex !important; gap:16px !important;
    transition:transform .65s cubic-bezier(.22,.75,.25,1) !important;
    will-change:transform;
}
.career-logo-item {
    flex:0 0 calc((100% - 32px) / 3) !important;
    min-width:0; height:82px; padding:14px 18px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border-radius:15px; overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,.16);
}
.career-logo-item img {
    display:block; width:auto; max-width:100%; height:auto; max-height:54px;
    object-fit:contain;
}
.career-logo-item:nth-child(1) img { max-width:90%; max-height:52px; }
.career-logo-item:nth-child(2) img { max-width:92%; max-height:48px; }
.career-logo-item:nth-child(3) img { max-width:88%; max-height:55px; }
.career-logo-item:nth-child(4) img { max-width:92%; max-height:50px; }
.career-logo-item:nth-child(5) img { max-width:88%; max-height:52px; }
.career-logo-item img.logo-failed { display:none; }
.career-logo-item.logo-unavailable::after {
    content:attr(data-company); color:#183b58; font-size:16px; font-weight:750;
}
.career-arrow { z-index:2; }
@media (max-width:760px) {
    .career-track { gap:10px !important; }
    .career-logo-item { flex-basis:calc((100% - 10px) / 2) !important; height:68px; padding:10px; }
    .career-logo-item img { max-height:46px; }
}
@media (max-width:420px) {
    .career-logo-item { flex-basis:100% !important; }
}


/* Final refinement: hero layout and career logo strip */
.hero {
    width: min(100%, 1500px);
    min-height: 0;
    padding: 48px clamp(28px, 4vw, 60px) 42px;
    grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
}
.hero-content { max-width: 760px; align-self: center; }
.hero h1 { font-size: clamp(64px, 6.7vw, 92px); }
.hero-description { max-width: 760px; font-size: 16px; line-height: 1.55; }
.hero-panel {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 0 0 clamp(28px, 3.4vw, 52px);
    border: 0;
    border-left: 2px solid rgba(87, 151, 191, .48);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.stat {
    min-height: 150px;
    padding: 20px 24px;
    border: 1px solid rgba(0, 174, 226, .78);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(5, 47, 78, .94), rgba(5, 29, 53, .96));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.13);
}
.stat-icon { margin-bottom: 4px; font-size: 30px; }
.stat h2 { font-size: clamp(39px, 3.5vw, 52px); line-height: 1.05; }
.stat p { margin-top: 5px; font-size: 16px; color: #d4dfeb; }
.stat-qualification h2 { font-size: clamp(30px, 2.8vw, 42px); }
.career-showcase { padding-top: 20px !important; padding-bottom: 40px !important; }
.career-logo-item {
    position: relative;
    background: #f8fbff;
    border: 1px solid rgba(220, 232, 244, .85);
}
.career-logo-item img {
    display: block !important;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    filter: none;
}
.career-logo-item img.logo-failed { display: none !important; }
.career-logo-item.logo-unavailable::after {
    content: attr(data-company);
    display: block;
    color: #183b58;
    font-size: 16px;
    font-weight: 750;
}
.career-logo-item:nth-child(1) img { max-width: 92%; max-height: 54px; }
.career-logo-item:nth-child(2) img { max-width: 92%; max-height: 50px; }
.career-logo-item:nth-child(3) img { max-width: 90%; max-height: 54px; }
.career-logo-item:nth-child(4) img { max-width: 92%; max-height: 52px; }
.career-logo-item:nth-child(5) img { max-width: 90%; max-height: 54px; }
@media (max-width: 1100px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: 28px; }
    .hero-panel { padding-left: 24px; }
    .stats { gap: 12px; }
    .stat { padding: 17px; min-height: 135px; }
}
@media (max-width: 760px) {
    .hero { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 42px 22px 34px; }
    .hero-panel { border-left: 0; border-top: 1px solid rgba(87,151,191,.48); padding: 24px 0 0; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { min-height: 125px; padding: 15px; border-radius: 18px; }
    .stat p { font-size: 13px; }
    .career-logo-item { flex-basis: calc((100% - 10px) / 2) !important; }
}
@media (max-width: 420px) {
    .stats { gap: 10px; }
    .stat { min-height: 112px; padding: 12px; }
    .stat h2 { font-size: 34px; }
    .stat-qualification h2 { font-size: 27px; }
    .career-logo-item { flex-basis: 100% !important; }
}

/* v15 – final header, stats icons and robust local career wordmarks */
.logo { margin-right: 42px; }
.logo::after {
    content:""; position:absolute; top:50%; right:-34px; width:4px; height:82px;
    background:linear-gradient(180deg,transparent 0%,#08c9ee 50%,transparent 100%);
    transform:translateY(-50%) skewX(-34deg); border-radius:3px;
}
.hero-content { padding-top: 8px; }
.hero h1 { margin-top: 0; }
.stat-icon { width:38px; height:38px; display:flex; align-items:center; margin-bottom:8px; color:var(--accent); }
.stat-icon svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.career-logo-item { padding:10px 16px !important; }
.career-brand-svg { display:block; width:100%; max-width:235px; height:58px; object-fit:contain; }
.career-logo-item.ayvens-card .career-brand-svg { max-width:225px; }
.career-logo-item.kvk-card .career-brand-svg { max-width:205px; }
.career-logo-item.belasting-card .career-brand-svg { max-width:230px; }
.career-logo-item.rabobank-card .career-brand-svg { max-width:235px; }
.career-logo-item.ing-card .career-brand-svg { max-width:205px; }
@media (max-width:760px) {
  .logo { margin-right:0; }
  .logo::after { display:none; }
}

/* Final polish: keep the original PureTesting logo untouched and add a separate slanted divider. */
.navbar .logo {
    position: relative;
    width: max-content;
    min-width: 250px;
    margin-right: 42px;
}
.navbar .logo img {
    height: 48px;
    max-width: 255px;
    object-fit: contain;
}
.navbar .logo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -37px;
    width: 5px;
    height: 88px;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent, #08c9ee 18%, #08c9ee 82%, transparent);
    transform: translateY(-50%) skewX(-34deg);
}
/* Four consistent outline icons: medal, code, layers and graduation cap. */
.stat-icon { width: 42px; height: 42px; margin-bottom: 7px; }
.stat-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* The five organization marks are embedded in the page: no remote logo requests. */
.career-track {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    width: 100%;
    transition: transform .6s cubic-bezier(.22,.75,.25,1) !important;
}
.career-logo-item {
    flex: 0 0 calc((100% - 48px) / 5) !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
    flex-direction: row !important;
    background: #f9fbff !important;
    border: 1px solid rgba(20,52,82,.08);
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.16);
}
.career-brand-svg {
    display: block !important;
    width: 100% !important;
    max-width: 235px !important;
    height: 58px !important;
    object-fit: contain;
}
.career-logo-item img { display: none !important; }
@media (max-width: 1200px) {
    .career-logo-item { flex-basis: calc((100% - 24px) / 3) !important; }
}
@media (max-width: 760px) {
    .navbar .logo { width: 100%; min-width: 0; margin-right: 0; align-items: center; }
    .navbar .logo::after { display: none; }
    .career-track { gap: 10px !important; }
    .career-logo-item { flex-basis: calc((100% - 10px) / 2) !important; height: 68px !important; min-height: 68px !important; }
    .career-brand-svg { height: 48px !important; }
}
@media (max-width: 420px) {
    .career-logo-item { flex-basis: 100% !important; }
}


/* v18: use the exact supplied company logo artwork. */
.career-logo-item img.career-logo-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 58px !important;
    object-fit: contain !important;
    flex: 0 1 auto;
}
.career-logo-item .ayvens-logo { max-width: 235px !important; max-height: 54px !important; }
.career-logo-item .kvk-logo { width: 62px !important; height: 62px !important; max-width: 62px !important; max-height: 62px !important; }
.career-logo-item .belasting-logo { max-width: 235px !important; max-height: 48px !important; }
.career-logo-item .ing-logo { max-width: 215px !important; max-height: 58px !important; }
.career-logo-item.rabobank-card .career-brand-svg { display:block !important; }


/* PureTesting v23 – integrated CV expertise tiles and category filters */
#skills {
    position: relative; overflow: hidden; padding: 42px 0 64px;
    background: radial-gradient(ellipse at 10% 5%, rgba(0,180,225,.075), transparent 40%), linear-gradient(180deg,#061321 0%,#04101c 100%);
}
#skills::before {
    content:""; position:absolute; left:-5%; right:-5%; bottom:-100px; height:220px; pointer-events:none; opacity:.32;
    background:radial-gradient(ellipse at 65% 100%,rgba(0,177,230,.25),transparent 58%);
}
#skills .container {position:relative;z-index:1}
#skills .section-heading-inline {display:grid;grid-template-columns:minmax(260px,.8fr) minmax(500px,1.8fr);align-items:end;gap:24px;margin-bottom:24px}
#skills .section-heading-inline .section-sub {color:#12cce9;font-size:11px;font-weight:800;letter-spacing:3px}
#skills .section-heading-inline .section-title {margin:8px 0 7px;font-size:clamp(25px,3vw,38px);letter-spacing:-.9px}
#skills .section-heading-inline .section-intro {margin:0;color:#9db0c3;font-size:13px}
#skills .all-tech-link {display:none!important}
#skills-container {width:100%}
#skills-container .expertise-toolbar {margin-bottom:22px}
#skills-container .expertise-tabs {
 display:flex;align-items:stretch;width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(0,197,232,.45) transparent;
 border:1px solid rgba(49,128,168,.42);border-radius:15px;background:linear-gradient(180deg,rgba(9,31,50,.96),rgba(5,20,35,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.14)
}
#skills-container .expertise-tab {
 position:relative;display:flex;flex:1 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:112px;min-height:65px;padding:8px 12px;
 border:0;border-right:1px solid rgba(80,135,170,.18);background:transparent;color:#c5d5e3;font:inherit;font-size:11px;font-weight:650;white-space:nowrap;cursor:pointer;transition:color .2s,background .2s
}
#skills-container .expertise-tab:last-child {border-right:0}
#skills-container .expertise-tab:hover {color:#fff;background:rgba(17,196,230,.08)}
#skills-container .expertise-tab.is-active {color:#062033;background:linear-gradient(135deg,#13d2ed,#00b8df);box-shadow:0 0 20px rgba(0,199,235,.18)}
#skills-container .tab-icon {font-size:20px;font-weight:700;line-height:1}
#skills-container .technology-tiles {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}
#skills-container .technology-tile {
 position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:116px;padding:12px 8px 9px;overflow:hidden;
 border:1px solid rgba(45,129,171,.43);border-radius:16px;
 background:radial-gradient(circle at 50% 0%,rgba(25,157,205,.15),transparent 72%),linear-gradient(145deg,rgba(12,39,61,.98),rgba(5,23,40,.98));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 6px 15px rgba(0,0,0,.16);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
#skills-container .technology-tile::before {content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,211,239,.8),transparent);opacity:.75}
#skills-container .technology-tile:hover {transform:translateY(-4px);border-color:rgba(0,207,239,.82);box-shadow:0 13px 25px rgba(0,0,0,.24),0 0 18px rgba(0,195,232,.09)}
#skills-container .technology-tile[hidden] {display:none!important}
#skills-container .technology-logo-wrap {display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px}
#skills-container .technology-logo {display:block;width:100%;height:100%;padding:4px;border-radius:9px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}
#skills-container .technology-logo-fallback {display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(18,207,235,.35);border-radius:11px;background:rgba(13,193,225,.13);color:#43d9f1;font-size:12px;font-weight:850}
#skills-container .technology-logo-fallback[hidden] {display:none!important}
#skills-container .technology-name {display:-webkit-box;width:100%;min-height:28px;overflow:hidden;color:#e5eff8;font-size:11px;font-weight:650;line-height:1.25;text-align:center;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#skills-container .technology-level {display:flex;align-items:center;justify-content:center;gap:4px;min-height:7px}
#skills-container .technology-level i {display:block;width:6px;height:6px;border-radius:50%;background:rgba(128,162,187,.24)}
#skills-container .technology-level i.active {background:#13cce9;box-shadow:0 0 7px rgba(19,204,233,.45)}
#skills-container .technology-empty {padding:20px;color:#91a7ba;text-align:center}
#expertise[hidden] {display:none!important}
@media(max-width:1450px){#skills-container .technology-tiles{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:1050px){
 #skills .section-heading-inline{grid-template-columns:1fr;gap:16px}
 #skills-container .technology-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:680px){
 #skills{padding:34px 0 48px}
 #skills-container .technology-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 #skills-container .technology-tile{min-height:104px;padding:10px 6px 8px;border-radius:13px}
 #skills-container .technology-logo-wrap{width:36px;height:36px;flex-basis:36px}
 #skills-container .technology-name{font-size:10px}
 #skills-container .expertise-tab{min-width:100px;min-height:58px;font-size:10px}
}
@media(max-width:390px){#skills-container .technology-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact navigation: icon above label, active underline */
.navbar{min-height:68px;padding-top:6px;padding-bottom:6px;border-radius:0 0 16px 16px}
.menu{align-items:stretch}
.menu a{min-width:76px;height:58px;gap:4px;font-size:12px}
.menu a>span{font-size:21px}
.nav-cv-links .cv-language-link{min-height:42px}
@media(max-width:760px){
 .navbar{border-radius:0 0 14px 14px}
 .menu a{min-width:58px;height:48px}
 .menu a>span{font-size:18px}
}



/* Uitgelichte opdrachten: kop links uitlijnen, gelijk aan Expertise */
#projects .section-heading {
    max-width: none;
    margin: 0 0 34px;
    text-align: left;
}
#projects .section-heading .section-intro {
    margin: 15px 0 0;
}


/* Header correction: keep the original three-column grid intact.
   The separator is decorative and must not become a grid item. */
.navbar .nav-cv-links {
    position: relative;
    padding-left: clamp(22px, 2vw, 34px);
}
.navbar .nav-cv-links::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 3px;
    height: 72px;
    transform: translateY(-50%) skewX(-32deg);
    transform-origin: center;
    background: linear-gradient(180deg, transparent 0%, #16c8e8 16%, #16c8e8 84%, transparent 100%);
    box-shadow: 0 0 10px rgba(22, 200, 232, .42);
    pointer-events: none;
}
@media (max-width: 1100px) {
    .navbar .nav-cv-links { padding-left: 0; }
    .navbar .nav-cv-links::before { display: none; }
}


/* Header polish: slightly bolder separators, aligned to the header */
.navbar .logo::after {
    width: 6px !important;
    height: 78px !important;
    right: -37px !important;
}

/* Matching outline illustrations for the three hero specialties */
.hero-specialties .specialty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: var(--accent);
}
.hero-specialties .specialty-icon svg {
    display: block;
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-specialties li {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-cv-divider {
    flex-basis: 4px !important;
}


/* CV-knoppen in de header: identieke, rustige downloadstijl */
.nav-cv-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.nav-cv-links .cv-language-link {
    min-height: 42px;
    min-width: 0;
    padding: 9px 15px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: #e7f1fa;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}
.nav-cv-links .cv-language-link:hover,
.nav-cv-links .cv-language-link:focus-visible {
    background: rgba(19,201,243,.10);
    border-color: #35d5f7;
}


/* Final header and hero CTA corrections */
/* Inline SVG navigation icons: explicit outline styling keeps them visible. */
.navbar .menu a > .nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #9cc9e6;
    line-height: 1;
}
.navbar .menu a > .nav-icon svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.navbar .menu a.active > .nav-icon,
.navbar .menu a:hover > .nav-icon,
.navbar .menu a:focus-visible > .nav-icon { color: var(--accent); }

/* The right divider mirrors the logo divider: backslash direction (\). */
.navbar .nav-cv-links::before {
    transform: translateY(-50%) skewX(32deg) !important;
    width: 4px;
    height: 78px;
}

/* Equal LinkedIn and Contact CTA dimensions; constrain the LinkedIn artwork. */
.buttons > .btn-secondary,
.buttons .linkedin-hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 220px;
    min-width: 220px;
    height: 54px;
    min-height: 54px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.2;
}
.buttons .linkedin-hero-link img {
    display: block;
    width: 28px !important;
    height: 28px !important;
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
    flex: 0 0 28px;
}
@media (max-width: 520px) {
    .buttons > .btn-secondary,
    .buttons .linkedin-hero-link {
        width: min(100%, 260px);
        min-width: 0;
    }
}


/* Herstel ontbrekende opmaak voor Over mij en Contact */
/* About section */
.about-section { scroll-margin-top: 110px; }
.about-heading { max-width: 820px; }
.about-content { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: clamp(28px,5vw,68px); align-items: start; }
.about-copy { color: #c3cfdd; font-size: 15px; line-height: 1.9; }
.about-copy p + p { margin-top: 18px; }
.about-highlights { display: grid; gap: 12px; }
.about-highlight { display: flex; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,rgba(16,36,61,.82),rgba(8,22,39,.9)); }
.about-highlight > span { flex: 0 0 auto; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.about-highlight h3 { margin-bottom: 4px; color: #f2f7fc; font-size: 15px; }
.about-highlight p { color: var(--muted); font-size: 12px; line-height: 1.7; }
@media (max-width:760px) { .about-content { grid-template-columns: 1fr; } .about-copy { font-size: 14px; } }


/* Over mij: kop links uitlijnen, gelijk aan Uitgelichte projecten */
#about .section-heading {
    max-width: none;
    margin: 0 0 34px;
    text-align: left;
}
#about .section-heading .section-intro {
    margin: 15px 0 0;
}


/* Prominente contactsectie */
.contact-section { padding: 82px 0 100px !important; }
.contact-panel { position: relative; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); align-items: center; gap: 55px; overflow: hidden; padding: clamp(30px,5vw,58px); border: 1px solid rgba(19,201,243,.38); border-radius: 26px; background: radial-gradient(circle at 100% 0%,rgba(19,201,243,.14),transparent 42%),linear-gradient(135deg,rgba(16,42,68,.98),rgba(7,20,36,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04); }
.contact-copy { max-width: 720px; }
.contact-copy .section-sub { margin-bottom: 14px; }
.contact-copy .section-title { max-width: 680px; }
.contact-copy .section-intro { max-width: 680px; margin: 18px 0 0; }
.contact-action { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 8px 0 8px 30px; border: 0; border-left: 2px solid rgba(19,201,243,.55); border-radius: 0; background: transparent; box-shadow: none; }
.contact-action p { color: #d5e1ed; font-size: 15px; line-height: 1.8; margin: 0; max-width: 390px; }
.contact-email-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 20px; border: 1px solid var(--accent); border-radius: 12px; color: #041321; background: var(--accent); font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s,box-shadow .2s; }
.contact-email-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(19,201,243,.2); }
.contact-email-address { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.contact-email-address:hover { text-decoration: underline; }
@media (max-width:760px) { .contact-section { padding: 65px 0 78px !important; } .contact-panel { grid-template-columns: 1fr; gap: 28px; } .contact-action { padding: 22px 0 0; border-left: 0; border-top: 2px solid rgba(19,201,243,.55); } }



/* Consistente, subtiele overgang tussen alle hoofdsecties */
main > section:not(.hero) { position: relative; }
main > section:not(.hero)::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, rgba(19,201,243,0) 0%, rgba(19,201,243,.12) 18%, rgba(19,201,243,.55) 50%, rgba(19,201,243,.12) 82%, rgba(19,201,243,0) 100%);
    box-shadow: 0 0 18px rgba(19,201,243,.12); pointer-events: none; z-index: 2;
}


/* Hero statistics: clearer meanings and paired testing-method wordmarks */
.stat-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.stat-qualification .qualification-marks {
    width: auto;
    min-height: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.qualification-mark {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    font-weight: 850;
    letter-spacing: -.7px;
    line-height: 1;
}
.qualification-mark sup { font-size: 9px; margin-left: 1px; }
.istqb-mark { color: #f5f8fc; font-size: 21px; }
.tmap-mark { color: #12c8ef; font-size: 23px; }
.stat-qualification h2 { font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.5px; }
.stat-qualification p { font-size: 14px; }
@media (max-width: 760px) {
    .stat-qualification .qualification-marks { gap: 8px; }
    .istqb-mark { font-size: 17px; }
    .tmap-mark { font-size: 19px; }
    .stat-qualification h2 { font-size: 18px; }
}


/* Mobile header: keep the complete navigation permanently visible while scrolling. */
@media (max-width: 760px) {
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        padding: max(10px, env(safe-area-inset-top)) 12px 9px !important;
        border-radius: 0 0 15px 15px !important;
        background: rgba(5, 15, 29, .97) !important;
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
    }
    .navbar .logo {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px;
        margin: 0 !important;
        justify-content: center !important;
    }
    .navbar .logo img {
        height: 38px !important;
        max-width: min(68vw, 260px) !important;
    }
    .navbar .logo::after,
    .navbar .nav-cv-links::before {
        display: none !important;
    }
    .navbar .nav-cv-links {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 9px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .navbar .nav-cv-links .cv-language-link {
        min-height: 37px !important;
        padding: 7px 13px !important;
        font-size: 11px !important;
    }
    .navbar .menu {
        order: 3 !important;
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 2px !important;
        overflow: visible !important;
        padding: 2px 0 0 !important;
        margin: 0 !important;
    }
    .navbar .menu a {
        position: relative;
        display: flex !important;
        flex: 1 1 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        width: auto !important;
        height: 57px !important;
        padding: 2px 0 5px !important;
        font-size: clamp(9px, 2.7vw, 11px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }
    .navbar .menu a > .nav-icon {
        width: 25px !important;
        height: 25px !important;
        flex: 0 0 25px !important;
    }
    .navbar .menu a > .nav-icon svg {
        width: 25px !important;
        height: 25px !important;
    }
    .navbar .menu a.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 12%;
        right: 12%;
        height: 3px;
        border-radius: 3px;
        background: var(--accent);
        box-shadow: 0 0 9px rgba(19,201,243,.45);
    }
    /* Keep anchor targets and the hero below the fixed, three-row header. */
    html { scroll-padding-top: 155px !important; }
    body { padding-top: 0 !important; }
    .hero { padding-top: 185px !important; }
}
@media (max-width: 390px) {
    .navbar { gap: 7px !important; padding-left: 8px !important; padding-right: 8px !important; }
    .navbar .logo img { height: 35px !important; }
    .navbar .nav-cv-links .cv-language-link { padding-inline: 10px !important; font-size: 10px !important; }
    .navbar .menu a { font-size: 9px !important; }
    .navbar .menu a > .nav-icon,
    .navbar .menu a > .nav-icon svg { width: 23px !important; height: 23px !important; }
    .hero { padding-top: 178px !important; }
}

/* Robot icon: cyan outline, matching the site's other specialty illustrations. */
.hero-specialties .specialty-icon svg {
    width: 46px !important;
    height: 46px !important;
    stroke-width: 2.5 !important;
}

/* ISTQB / TMap qualification card: official logos, then one matching stat heading. */
.stats .stat-qualification .qualification-logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    height: 42px;
    min-height: 42px;
    margin: 0 0 8px;
}
.stats .stat-qualification .qualification-logos img {
    display: block;
    width: auto;
    max-width: 105px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
}
.stats .stat-qualification h2 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(35px,4vw,48px);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.15;
    white-space: normal;
}
@media (max-width: 520px) {
    .stats .stat-qualification .qualification-logos {
        gap: 10px;
        height: 38px;
        min-height: 38px;
        margin-bottom: 7px;
    }
    .stats .stat-qualification .qualification-logos img {
        max-width: 82px;
        height: 29px;
    }
    .stats .stat-qualification h2 {
        font-size: clamp(28px,7vw,36px);
        letter-spacing: -1px;
    }
}


/* Testmethodieken: dezelfde typografie als de andere statistieklabels. */
.stats .stat-qualification h2 {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
}
@media (max-width: 760px) {
    .stats .stat-qualification h2 {
        font-size: 13px !important;
    }
}


/* CV-knoppen: Nederlands en English altijd exact even breed */
.nav-cv-links .cv-language-link {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}


/* Laatste typografie-afwerking: footer en contactknop gebruiken overal Inter. */
footer,
footer a,
footer span,
footer p,
.footer-inner,
.footer-links,
.footer-copy,
.contact-email-button {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.qualification-certification {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 12px 0 4px;
    color: #dce6f2;
}

.qualification-check {
    color: #12c7e8;
    font-weight: 700;
    margin-left: 4px;
}

.stat-qualification h2 {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

/* Hero specialty: code-screen icon for Test Automation & Quality Engineering. */
.hero-specialties .specialty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero-specialties .specialty-icon svg {
    width: 46px !important;
    height: 46px !important;
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 15+ automation statistic: a gear, not a sun. */
.stats .stat:nth-child(3) .stat-icon svg {
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Qualification card: restrained editorial layout, without oversized badge icons. */
.stats .stat-qualification {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}
.stats .stat-qualification .qualification-logos {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    width: 100%;
    min-height: 70px;
    height: 70px;
    margin: 0 0 12px !important;
}
.stats .stat-qualification .qualification-logos img {
    display: block !important;
    width: auto !important;
    max-width: 116px !important;
    height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
    flex: 0 1 auto;
}
.stats .stat-qualification .qualification-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 12px;
    background: linear-gradient(90deg, rgba(19,201,243,.65), rgba(19,201,243,.08));
}
.stats .stat-qualification .qualification-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.stats .stat-qualification .qualification-kicker {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    line-height: 1.3;
}
.stats .stat-qualification .qualification-certification {
    margin: 0 !important;
    color: #e5edf6;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.4 !important;
}
@media (max-width: 760px) {
    .stats .stat-qualification .qualification-logos {
        min-height: 52px;
        height: 52px;
        gap: 14px;
        margin-bottom: 9px !important;
    }
    .stats .stat-qualification .qualification-logos img {
        height: 43px !important;
        max-width: 90px !important;
    }
    .stats .stat-qualification .qualification-divider {
        margin-bottom: 9px;
    }
    .stats .stat-qualification .qualification-certification {
        font-size: 12px !important;
    }
}


/* Statistiekkaarten: dezelfde scheidingslijn en uppercase label als Testmethodieken. */
.stats .stat:not(.stat-qualification) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.stats .stat:not(.stat-qualification) .stat-divider {
    width: 100%;
    height: 1px;
    flex: 0 0 1px;
    margin: 10px 0 11px;
    background: linear-gradient(90deg, rgba(19,201,243,.65), rgba(19,201,243,.08));
}
.stats .stat:not(.stat-qualification) .stat-kicker {
    margin: 0 !important;
    color: var(--accent);
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.7px !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
}
@media (max-width: 760px) {
    .stats .stat:not(.stat-qualification) .stat-divider {
        margin: 7px 0 8px;
    }
    .stats .stat:not(.stat-qualification) .stat-kicker {
        font-size: 9px !important;
        letter-spacing: 1.3px !important;
    }
}


/* ISTQB-certificering: iets compacter zodat de volledige titel in de kaart past. */
.stats .stat-qualification .qualification-certification {
    font-size: 13px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal;
    word-break: normal;
}
@media (max-width: 760px) {
    .stats .stat-qualification .qualification-certification {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}


/* Footer: dezelfde turquoise uppercase typografie als de statistieklabels. */
footer .footer-links a,
footer .footer-copy {
    color: var(--accent) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    line-height: 1.5 !important;
    text-transform: uppercase !important;
}
footer .footer-links a:hover {
    color: #eafaff !important;
}
@media (max-width: 760px) {
    footer .footer-links a,
    footer .footer-copy {
        font-size: 9px !important;
        letter-spacing: 1px !important;
    }
}


/* Footer terug naar wit: links en copyright rustig en goed leesbaar. */
footer .footer-links a,
footer .footer-copy {
    color: #dce6f2 !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}
footer .footer-links a:hover {
    color: #ffffff !important;
}
@media (max-width: 760px) {
    footer .footer-links a,
    footer .footer-copy {
        font-size: 11px !important;
    }
}


/* Persoonlijke certificering direct onder de naam in de hero. */
.hero-certification {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -11px 0 22px 3px;
    color: #cbd8e6;
    font-size: clamp(13px, 1.25vw, 16px);
    font-weight: 500;
    line-height: 1.4;
}
.hero-certification svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero h1 { margin-bottom: 15px; }

/* De testmethodiekenkaart toont alleen de logo's en het label; onderkant uitlijnen met de andere kaarten. */
.stats .stat-qualification {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.stats .stat-qualification .qualification-logos {
    margin-top: 0 !important;
}
.stats .stat-qualification .qualification-divider {
    margin-top: auto;
    margin-bottom: 12px;
}
.stats .stat-qualification .qualification-copy {
    min-height: 18px;
}
@media (max-width: 760px) {
    .hero-certification {
        margin-top: -7px;
        margin-bottom: 16px;
        font-size: 12px;
    }
}


/* Hero-certificering: uitlijnen op de linkerrand van de naam. */
.hero-certification {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Klein certificeringssymbool boven de ISTQB- en TMap-logo's. */
.stats .stat-qualification .qualification-icon {
    display: block;
    width: 23px;
    height: 23px;
    margin: 0 0 9px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stats .stat-qualification {
    justify-content: flex-start !important;
}
.stats .stat-qualification .qualification-divider {
    margin-top: 12px;
}


/* ISTQB/TMap-kaart: logo's nemen dezelfde bovenruimte in als de iconen van de andere kaarten. */
.stats .stat-qualification {
    justify-content: flex-start !important;
}
.stats .stat-qualification .qualification-icon {
    display: none !important;
}
.stats .stat-qualification .qualification-logos {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    width: 100%;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 4px !important;
}
.stats .stat-qualification .qualification-logos img {
    display: block !important;
    width: auto !important;
    max-width: 112px !important;
    height: 40px !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.stats .stat-qualification .qualification-divider {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}


/* Hero-certificering: compact formaat, passend bij de ISTQB-certificeringstekst. */
.hero-certification {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -11px 0 22px 0 !important;
    color: #cbd8e6 !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
.hero-certification svg {
    display: block;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 760px) {
    .hero-certification {
        font-size: 13px !important;
        gap: 7px;
        margin-bottom: 16px !important;
    }
    .hero-certification svg {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px;
    }
}


/* Certificering onder de naam: exact dezelfde typografie en icoonmaat als de specialisaties. */
.hero-certification {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: -11px 0 22px 0 !important;
    color: #e5edf6 !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(17px, 1.65vw, 23px) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
.hero-certification svg {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 760px) {
    .hero-certification {
        gap: 13px !important;
        font-size: clamp(16px, 1.6vw, 22px) !important;
    }
    .hero-certification svg {
        width: 43px !important;
        height: 43px !important;
        flex-basis: 43px !important;
    }
}


/* Verticale afstand certificering -> eerste specialisatie gelijkmatiger maken. */
.hero-certification {
    margin-bottom: 10px !important;
}
@media (max-width: 760px) {
    .hero-certification {
        margin-bottom: 8px !important;
    }
}


/* Certificeringsicoon naast de ISTQB- en TMap-logo's op één horizontale lijn. */
.stats .stat-qualification .qualification-logos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 20px !important;
}
.stats .stat-qualification .qualification-logos .qualification-icon {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    margin: 0 2px 0 0 !important;
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stats .stat-qualification .qualification-logos img {
    flex: 0 1 auto !important;
}
@media (max-width: 760px) {
    .stats .stat-qualification .qualification-logos {
        gap: 12px !important;
    }
    .stats .stat-qualification .qualification-logos .qualification-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex-basis: 24px !important;
    }
}


/* Certificeringskaart: icoon bovenaan, logo's eronder en label onderaan uitgelijnd. */
.stats .stat-qualification {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.stats .stat-qualification > .qualification-icon {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 0 13px !important;
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stats .stat-qualification .qualification-logos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
}
.stats .stat-qualification .qualification-logos img {
    display: block !important;
    width: auto !important;
    height: 58px !important;
    max-width: 118px !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.stats .stat-qualification .qualification-divider {
    width: 100% !important;
    height: 1px !important;
    flex: 0 0 1px !important;
    margin: auto 0 12px !important;
}
.stats .stat-qualification .qualification-copy {
    min-height: 18px !important;
    margin: 0 !important;
}
@media (max-width: 760px) {
    .stats .stat-qualification > .qualification-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-basis: 34px !important;
        margin-bottom: 9px !important;
    }
    .stats .stat-qualification .qualification-logos {
        height: 54px !important;
        min-height: 54px !important;
        gap: 14px !important;
    }
    .stats .stat-qualification .qualification-logos img {
        height: 46px !important;
        max-width: 92px !important;
    }
}


/* Testmethodieken: scheidingslijn en label circa 14px hoger uitlijnen met de andere kaart. */
.stats .stat-qualification .qualification-divider {
    margin-top: auto !important;
    margin-bottom: 26px !important;
}


/* Correctie: herstel de compacte afstand onder de scheidingslijn. */
.stats .stat-qualification .qualification-divider {
    margin-bottom: 12px !important;
}


/* Laat de certificeringstekst exact starten op dezelfde tekstlijn als de specialisaties. */
.hero-certification {
    gap: 23px !important;
}

/* Logo's en het certificeringsicoon in de rechterkaart heel subtiel omhoog. */
.stats .stat-qualification > .qualification-icon,
.stats .stat-qualification .qualification-logos {
    transform: translateY(-4px);
}


/* CV-knoppen: naast elkaar op mobiel, oorspronkelijke horizontale rij op desktop. */
.navbar .nav-cv-links {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto;
    gap: 10px !important;
}
.navbar .nav-cv-links .cv-language-link {
    width: auto;
    min-width: 0;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .navbar .nav-cv-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 9px !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }
    .navbar .nav-cv-links .cv-language-link {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 8px 7px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        font-size: clamp(10px, 2.7vw, 12px) !important;
    }
}
@media (max-width: 360px) {
    .navbar .nav-cv-links { gap: 6px !important; }
    .navbar .nav-cv-links .cv-language-link {
        padding-inline: 3px !important;
        font-size: 9px !important;
    }
}


/* Hero-knoppen: LinkedIn en Contact naast elkaar op mobiel, desktop blijft gelijk. */
@media (max-width: 760px) {
    .hero .buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .hero .buttons > .cv-language-links,
    .hero .buttons > .btn-secondary {
        display: flex !important;
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .hero .buttons .linkedin-hero-link,
    .hero .buttons > .btn-secondary {
        display: inline-flex !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 7px 5px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        font-size: clamp(10px, 3.1vw, 13px) !important;
    }
    .hero .buttons .linkedin-hero-link img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex-basis: 22px !important;
    }
}
@media (max-width: 360px) {
    .hero .buttons { gap: 7px !important; }
    .hero .buttons .linkedin-hero-link,
    .hero .buttons > .btn-secondary {
        font-size: 10px !important;
        padding-inline: 3px !important;
    }
    .hero .buttons .linkedin-hero-link img {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
        flex-basis: 19px !important;
    }
}


/* Contactpagina: CTA dezelfde rustige outline-stijl als de overige knoppen. */
.contact-email-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 10px 20px !important;
    border: 1px solid var(--accent) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
    background: rgba(255,255,255,.025) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.contact-email-button:hover {
    color: #ffffff !important;
    background: rgba(19,201,243,.08) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(19,201,243,.12) !important;
}
@media (max-width: 760px) {
    .contact-email-button {
        min-height: 52px !important;
        height: 52px !important;
        padding: 8px 18px !important;
        font-size: 14px !important;
    }
}


/* Definitieve mobiele uitlijning hero-knoppen: twee gelijke kolommen zonder overflow. */
@media (max-width: 760px) {
    .hero .buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }
    .hero .buttons > .hero-cv-links {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .hero .buttons > .hero-cv-links .linkedin-hero-link,
    .hero .buttons > .btn-secondary {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex: none !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        font-size: clamp(10px, 2.8vw, 13px) !important;
        line-height: 1.1 !important;
    }
    .hero .buttons .linkedin-hero-link img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex: 0 0 20px !important;
    }
}
@media (max-width: 360px) {
    .hero .buttons { gap: 6px !important; }
    .hero .buttons > .hero-cv-links .linkedin-hero-link,
    .hero .buttons > .btn-secondary {
        font-size: 9px !important;
        padding-inline: 2px !important;
    }
    .hero .buttons .linkedin-hero-link img {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        flex-basis: 17px !important;
    }
}


/* Mobiel: expertise-filterknoppen volledig binnen het scherm tonen in twee rijen. */
@media (max-width: 760px) {
    #skills-container .expertise-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }
    #skills-container .expertise-tab {
        display: flex !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 64px !important;
        box-sizing: border-box !important;
        padding: 8px 5px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        line-height: 1.2 !important;
    }
    #skills-container .expertise-tab:nth-child(2n) {
        border-right: 0 !important;
    }
    #skills-container .expertise-tab:nth-child(n+3) {
        border-top: 1px solid rgba(80,135,170,.18) !important;
    }
}


/* Mobiel: technologiekaarten altijd de volledige beschikbare breedte laten vullen.
   Zo blijven Testmethoden-kaarten even breed als de kaarten in andere categorieën. */
@media (max-width: 680px) {
    #skills-container .technology-tiles {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        gap: 9px !important;
        box-sizing: border-box !important;
    }
    #skills-container .technology-tile {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 390px) {
    #skills-container .technology-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Mobiel: toon de volledige filterbalk met alle categorieën; desktop blijft origineel. */
@media (max-width: 680px) {
    .expertise-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    .expertise-tabs > .expertise-tab {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
        justify-content: center !important;
        overflow-wrap: anywhere !important;
        padding: 8px 5px !important;
    }
    .expertise-tabs > .expertise-tab:nth-child(2n) {
        border-right: 0 !important;
    }
    .expertise-tabs > .expertise-tab:nth-child(n+3) {
        border-top: 1px solid rgba(80,135,170,.18) !important;
    }
}


/* Definitieve uitlijning expertisefilters en technologieraster */
#skills-container .expertise-tabs {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#skills-container .expertise-tabs > .expertise-tab {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 8px 5px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    border-right: 1px solid rgba(80,135,170,.18) !important;
    border-top: 0 !important;
}
#skills-container .expertise-tabs > .expertise-tab:nth-child(8n) {
    border-right: 0 !important;
}
#skills-container .technology-tiles {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    box-sizing: border-box !important;
}
#skills-container .technology-tile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 1450px) and (min-width: 1051px) {
    #skills-container .technology-tiles {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 1050px) and (min-width: 681px) {
    #skills-container .expertise-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    #skills-container .expertise-tabs > .expertise-tab:nth-child(4n) {
        border-right: 0 !important;
    }
    #skills-container .expertise-tabs > .expertise-tab:nth-child(n+5) {
        border-top: 1px solid rgba(80,135,170,.18) !important;
    }
    #skills-container .technology-tiles {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 680px) {
    #skills-container .expertise-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #skills-container .expertise-tabs > .expertise-tab {
        min-height: 62px !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        padding: 8px 5px !important;
    }
    #skills-container .expertise-tabs > .expertise-tab:nth-child(2n) {
        border-right: 0 !important;
    }
    #skills-container .expertise-tabs > .expertise-tab:nth-child(n+3) {
        border-top: 1px solid rgba(80,135,170,.18) !important;
    }
    #skills-container .technology-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
}
@media (max-width: 390px) {
    #skills-container .technology-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Herstel zichtbaar code-monitoricoon bij Test Automation & Quality Engineering. */
.hero-specialties li:first-child .specialty-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    color: var(--accent) !important;
}
.hero-specialties li:first-child .specialty-icon svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* Hero: force the monitor/code icon to render at the same scale as the other specialty icons. */
.hero-specialties > li.specialty-automation {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}
.hero-specialties > li.specialty-automation > .specialty-automation-icon {
    display: inline-flex !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #13c9f3 !important;
}
.hero-specialties > li.specialty-automation > .specialty-automation-icon > svg {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    fill: none !important;
    stroke: #13c9f3 !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Filters: align their outer edges with the technology-card grid on every screen. */
#skills-container .expertise-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 680px) {
    #skills-container .expertise-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
    }
    #skills-container .expertise-tabs > .expertise-tab {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }
}


/* Menu: turquoise underline on hover/focus, matching the active-page indicator. */
.navbar .menu a { position: relative; }
.navbar .menu a:hover,
.navbar .menu a:focus-visible { color: var(--accent) !important; }
.navbar .menu a:hover > span,
.navbar .menu a:focus-visible > span { color: var(--accent) !important; }
.navbar .menu a:hover::after,
.navbar .menu a:focus::after,
.navbar .menu a:focus-visible::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    border-radius: 4px; background: var(--accent);
    box-shadow: 0 0 14px rgba(19,201,243,.6);
}
/* Legal pages deliberately have no active navigation item; hover remains available. */

/* CV-downloadknoppen: compact, even breed en altijd naast elkaar. */
.navbar .nav-cv-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min-content !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 10px !important;
    width: min(100%, 560px) !important;
    min-width: 0 !important;
}
.navbar .nav-cv-links > .cv-language-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    min-width: 0 !important;
    padding: 8px 14px !important;
    border-width: 1px !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
}
@media (max-width: 760px) {
    .navbar .nav-cv-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-self: center !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
    }
    .navbar .nav-cv-links > .cv-language-link {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 6px 5px !important;
        gap: clamp(3px, 1vw, 7px) !important;
        font-size: clamp(9px, 2.7vw, 12px) !important;
    }
    .navbar .nav-cv-links > .cv-language-link > span:first-child {
        font-size: clamp(15px, 4vw, 19px) !important;
        flex: 0 0 auto !important;
    }
}
@media (max-width: 360px) {
    .navbar .nav-cv-links { gap: 5px !important; }
    .navbar .nav-cv-links > .cv-language-link {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding-inline: 3px !important;
        font-size: 9px !important;
    }
}


/* Legal pages: offset content below the fixed mobile navigation.
   Desktop layout is intentionally unchanged. */
@media (max-width: 760px) {
    body:has(main.privacy-page) main.privacy-page {
        padding-top: 220px !important;
    }
}