/* ==========================================================================
   Wouters.be — professioneel portfolio
   Licht thema · schermvullende projectgrid met live screenshots
   ========================================================================== */

:root {
    --bg: #ffffff;
    --bg-soft: #f6f8fb;
    --bg-softer: #eef2f8;
    --surface: #ffffff;
    --text: #0b1220;
    --muted: #5b6472;
    --muted-2: #8a93a3;
    --border: #e6e9ef;
    --border-strong: #d7dce6;
    --accent: #4f46e5;
    --accent-strong: #4338ca;
    --accent-soft: rgba(79, 70, 229, 0.10);

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 14px 40px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 30px 70px rgba(16, 24, 40, 0.14);

    --radius: 20px;
    --radius-sm: 14px;
    --nav-h: 72px;

    --gradient-1: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --gradient-2: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
    --gradient-3: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --gradient-4: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-5: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);

    /* Aliassen voor variabelen die de case-study-pagina's inline gebruiken */
    --bg-dark: var(--bg-soft);
    --bg-card: var(--bg-soft);
    --text-main: var(--text);
    --text-muted: var(--muted);
    --accent-hover: var(--accent-strong);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
}

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

::selection {
    background: var(--accent);
    color: #fff;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    background: var(--text);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 16px;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Zachte kleurwas op de achtergrond (vervangt de oude donkere glow) */
.bg-glow {
    position: fixed;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
    top: -22vw;
    left: -18vw;
    z-index: -1;
    pointer-events: none;
}
.bg-glow-2 {
    position: fixed;
    width: 45vw;
    height: 45vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
    bottom: -16vw;
    right: -14vw;
    z-index: -1;
    pointer-events: none;
}

/* ---------------------------------- Navbar --------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 clamp(16px, 4vw, 48px);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

.logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--text);
}
.logo span {
    color: var(--accent);
}

/* Menu: logo links, de woorden work · with · me + Contact rechts */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Plat menu zoals op rikdo.com: ruime, klikbare woorden naast elkaar */
.nav-links a {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.25s ease, background 0.25s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--text);
    background: var(--bg-soft);
}

/* Actieve pagina: zacht accentvlak in plaats van een streep onder het woord */
.nav-links a[aria-current="page"] {
    color: var(--accent-strong);
    font-weight: 600;
    background: var(--accent-soft);
}

/* Scheidingslijn tussen de menuwoorden en de Contact-knop */
.nav-sep {
    width: 1px;
    height: 18px;
    background: var(--border-strong);
    margin: 0 10px;
}

/* De Contact-knop houdt binnen het menu zijn eigen knopstijl */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible,
.nav-links a.nav-cta[aria-current="page"] {
    padding: 11px 22px;
    color: #fff;
    background-color: var(--text);
    background-image: none;
    font-weight: 600;
}

/* ---------------------------------- Buttons -------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 30px;
    background-color: var(--text);
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-sm {
    padding: 11px 22px;
    font-size: 0.9rem;
}

.btn-outline {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}
.btn-outline:hover {
    border-color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* -------------------------------- Typografie ------------------------------- */
.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.12;
    margin-bottom: 16px;
}

.section-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 620px;
    line-height: 1.7;
}

.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}
.section-head .section-subtitle {
    margin: 0 auto;
}

/* ----------------------------------- Hero ---------------------------------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 60px) 24px 90px;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
    pointer-events: none;
    z-index: -1;
}

.hero-content {
    max-width: 830px;
    animation: fadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 26px;
    letter-spacing: 0.4px;
}
.badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

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

.hero p {
    font-size: 1.2rem;
    color: var(--muted);
    margin: 0 auto 38px;
    max-width: 640px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-note {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    color: var(--muted-2);
    font-size: 0.9rem;
}
.hero-note span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-note span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
}

/* ------------- Hero met de projecten als achtergrond (index.html) ----------- */
/* De hele index is één scherm hoog: geen paginascroll, enkel het raster met   */
/* projecten verschuift mee — in alle vier richtingen, met slepen, scrollen    */
/* of de pijlknoppen.                                                          */
body.page-home {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* Op de index ligt het menu over het raster: geen balk maar een zachte was,
   net als de overlay-nav van rikdo.com. De lege ruimte in de balk is
   klik-doorlaatbaar, zo blijft het raster erachter te verslepen. */
body.page-home .navbar {
    height: calc(var(--nav-h) + 18px);
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.82) 58%,
        rgba(255, 255, 255, 0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
}
body.page-home .navbar > * {
    pointer-events: auto;
}

.hero--home {
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    align-items: center;
    padding: calc(var(--nav-h) + 20px) 24px 96px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.hero--home.is-dragging {
    cursor: grabbing;
}

/* Het raster met projecten achter de hero (tegels worden door script.js opgebouwd) */
.hero-bg {
    --tile-w: 380px;
    --tile-h: 274px;
    --gap: 22px;
    --cols: 16;
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile-w));
    grid-auto-rows: var(--tile-h);
    gap: var(--gap);
    padding: var(--gap);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Waas over de projecten, zodat de hero-tekst overal leesbaar blijft */
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 68% 58% at 50% 46%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.88) 42%,
        rgba(255, 255, 255, 0.66) 76%,
        rgba(255, 255, 255, 0.42) 100%);
}

.hero-content--home {
    position: relative;
    z-index: 2;
}

/* De hero-tekst verdwijnt zodra je het raster verschuift — net als de intro
   op work.html en de overlay op de index van rikdo.com. */
.hero-content--home,
.hero-veil {
    transition: opacity 1s ease;
}
.hero--home.is-dismissed .hero-content--home {
    animation: none;
    opacity: 0;
    pointer-events: none;
}
.hero--home.is-dismissed .hero-veil {
    opacity: 0;
}

/* Bedieningsbalk onderaan: blijft staan als de hero-tekst al verdwenen is.
   De balk zelf is klik-doorlaatbaar, zodat je het raster er ook achter kan
   blijven verslepen; enkel de hint en de pijlknoppen vangen de klik op. */
.hero-ui {
    position: absolute;
    z-index: 3;
    left: clamp(16px, 3vw, 34px);
    right: clamp(16px, 3vw, 34px);
    bottom: clamp(16px, 3vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    pointer-events: none;
}
.hero-ui .hero-hint,
.hero-ui .hero-pan {
    pointer-events: auto;
}
.hero .hero-hint {
    margin: 0;
    max-width: none;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--muted-2);
}
.hero-pan {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   Projecten — schermvullende, sleepbare projectgrid
   "Sleep of scroll om te verkennen", geïnspireerd op de index van rikdo.com
   ========================================================================== */
.explore {
    --tile-w: 440px;
    --tile-h: 360px;
    --gap: 26px;
    --cols: 4;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 540px;
    overflow: hidden;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.explore.is-dragging {
    cursor: grabbing;
}
.explore:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* Fijn stippenraster als achtergrond van de speelruimte */
.explore::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(11, 18, 32, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.explore-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--tile-w));
    grid-auto-rows: var(--tile-h);
    gap: var(--gap);
    padding: var(--gap);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* ---------------------------------- Tegels --------------------------------- */
.tile {
    position: relative;
    display: block;
    width: var(--tile-w);
    height: var(--tile-h);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.tile:hover,
.tile:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
    outline: none;
    z-index: 4;
}
.tile:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lg);
}

/* Screenshot van de volledige website — bij hover scrollt het beeld door de pagina */
.tile-shot {
    position: absolute;
    inset: 0;
    background-color: var(--bg-softer);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 0%;
    opacity: 0;
    transition: background-position var(--pan-dur, 9s) cubic-bezier(0.33, 0.12, 0.34, 1),
                opacity 0.45s ease;
}
.tile.is-shot .tile-shot {
    opacity: 1;
}
.tile:hover .tile-shot,
.tile:focus-visible .tile-shot {
    background-position: 50% 100%;
}

/* Lokale thumbnail (foto van het venster): die moet het kader altijd vullen,
   ook in de hoge portrettegels op gsm. Bij hover schuift het beeld nog steeds
   van boven naar onder. */
.tile.is-thumb .tile-shot {
    background-size: cover;
}

/* Bewegende preview: de hero-video van de website speelt in de tegel, als een
   levend beeld in plaats van een screenshot. De screenshot blijft eronder
   staan en dient als terugval wanneer de video niet kan laden. */
.tile-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    -webkit-user-drag: none;
}
.tile.is-video .tile-video {
    opacity: 1;
}

/* Laadindicator */
.tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
    z-index: 2;
    pointer-events: none;
}
.tile.is-shot::after,
.tile.is-failed::after,
.tile.is-video::after,
.tile.is-local-pending::after,
.tile--brand::after {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Donkere voet zodat de projectnaam op elke screenshot leesbaar blijft */
.tile-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0) 40%, rgba(11, 18, 32, 0.8) 100%);
    pointer-events: none;
}
.tile-info {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
}
.tile-tag--badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-weight: 600;
}
.tile-name {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.tile-tag {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
}
.tile-arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-size: 1rem;
    transition: transform 0.3s ease, background 0.3s ease;
}
.tile:hover .tile-arrow,
.tile:focus-visible .tile-arrow {
    transform: translateX(3px);
    background: #fff;
}

/* Merktegel: projecten zonder live URL krijgen een gestileerd naambord */
.tile--brand {
    background: var(--tile-grad, var(--gradient-1));
    border-color: transparent;
    cursor: default;
}
.tile--brand:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}
.tile-brand {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px;
    text-align: center;
    color: #fff;
}
.tile-brand strong {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.1;
}
.tile-brand span {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.75);
}
.tile--brand .tile-shade {
    display: none;
}

/* Achtergrondtegel (index): enkel het beeld, zonder bijschrift of bediening.
   De tegels zijn wél aanklikbaar: een klik opent het project. */
.tile--decor {
    border-radius: 16px;
    box-shadow: none;
    cursor: inherit;
}
.tile--decor:hover,
.tile--decor:focus-visible {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}
.tile--decor::after,
.tile--decor .tile-shade {
    display: none;
}
a.tile--decor {
    cursor: pointer;
    -webkit-user-drag: none;
}
.hero--home.is-dragging a.tile--decor {
    cursor: grabbing;
}
a.tile--decor:hover,
a.tile--decor:focus-visible {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

/* De projectnaam verschijnt pas bij hover, en enkel nadat de hero-tekst weg
   is — daarvoor ligt er nog een waas over het raster. */
.tile-caption {
    position: absolute;
    z-index: 3;
    left: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 28px);
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.tile-caption strong {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
}
.tile-caption span {
    font-size: 0.76rem;
    color: var(--muted-2);
}
.hero--home.is-dismissed a.tile--decor:hover .tile-caption,
.hero--home.is-dismissed a.tile--decor:focus-visible .tile-caption {
    opacity: 1;
    transform: none;
}

/* -------------------------------- Bediening -------------------------------- */
.explore-ui {
    position: absolute;
    z-index: 6;
    left: clamp(16px, 3vw, 34px);
    right: clamp(16px, 3vw, 34px);
    bottom: clamp(16px, 3vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    pointer-events: none;
}
.explore-hint,
.explore-actions {
    pointer-events: auto;
}
.explore-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    font-size: 0.85rem;
    color: var(--muted);
}
.explore-hint strong {
    color: var(--text);
    font-weight: 700;
}
.explore-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.explore-pad {
    display: flex;
    gap: 8px;
}
.pad-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.pad-btn:hover:not(:disabled) {
    background: #fff;
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.pad-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.explore-skip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--text);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.explore-skip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ------------------------------- Intro-overlay ------------------------------ */
.explore-intro {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
.explore-intro.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.explore-intro h1,
.explore-intro h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1.08;
}
.explore-intro p {
    max-width: 560px;
    color: var(--muted);
    font-size: 1.04rem;
}
.explore-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}
.explore-cta::after {
    content: '';
    width: 44px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(9px); }
}
.explore-intro .explore-skip {
    margin-top: 10px;
}

/* Zonder JavaScript: een gewone, leesbare projectlijst */
.project-index {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 110px 24px 70px;
}
.project-index a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}
.project-index__item {
    padding: 18px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 600;
}
.project-index em {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--muted);
}

/* --------------------------------- Footer ---------------------------------- */
footer {
    padding: 100px 0 44px;
    text-align: center;
    scroll-margin-top: var(--nav-h);
}
footer h2 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 14px;
}
footer p {
    color: var(--muted);
    margin-bottom: 34px;
    font-size: 1.06rem;
}
.copyright {
    margin-top: 70px !important;
    font-size: 0.88rem;
    color: var(--muted-2) !important;
}

/* ==========================================================================
   Binnenpagina's — work, with, me, contact
   ========================================================================== */
.page {
    padding: calc(var(--nav-h) + 76px) 0 100px;
}
.page-head {
    max-width: 780px;
}
.page-head h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.08;
    margin-bottom: 18px;
}
.page-lede {
    max-width: 700px;
    font-size: 1.12rem;
    line-height: 1.8;
    color: var(--muted);
}
.page-lede strong {
    color: var(--text);
}

.page-section {
    margin-top: 74px;
}
.page-section h2 {
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.9px;
    margin-bottom: 12px;
}
.page-section__intro {
    max-width: 720px;
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 6px;
}
.page-section__intro strong {
    color: var(--text);
    font-weight: 700;
}

/* Kaarten (klanten, merken, contactwegen) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
    margin-top: 26px;
}
.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
a.card:hover,
a.card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    outline: none;
}
.card h3 {
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}
.card p {
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.7;
}
.card__tag {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}
.card__meta {
    margin-top: auto;
    padding-top: 16px;
    font-size: 0.84rem;
    color: var(--muted-2);
}
.card--soon {
    background: var(--bg-soft);
    border-style: dashed;
    border-color: var(--border-strong);
    box-shadow: none;
}
.card--soon .card__tag {
    color: var(--muted);
}

/* Previewbeeld bovenaan een kaart: de site zelf, met dezelfde trage
   pagina-scroll bij hover als de tegels op work.html. Het beeld loopt tot
   tegen de rand van de kaart, zodat het als een venster op de site leest. */
.card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin: -26px -24px 20px;
    background-color: var(--bg-softer);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100% auto;
    border-bottom: 1px solid var(--border);
    transition: background-position var(--pan-dur, 6s) cubic-bezier(0.33, 0.12, 0.34, 1);
}
a.card:hover .card__media,
a.card:focus-visible .card__media {
    background-position: 50% 100%;
}

/* Geen beeld beschikbaar (en geen terugvalbron): dan geen leeg vlak. */
.card__media.is-empty {
    display: none;
}

/* Merktegel voor projecten zonder site, in dezelfde stijl als de grid. */
.card__media--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--media-grad, var(--gradient-1));
    border-bottom: 0;
    color: #fff;
}
.card__media--brand strong {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.4px;
}

/* Labels en feiten */
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}
.tag {
    padding: 7px 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--muted);
    font-size: 0.86rem;
}

.fact-list {
    list-style: none;
    display: grid;
    max-width: 760px;
    margin-top: 30px;
}
.fact-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
}
.fact-list li:last-child {
    border-bottom: 1px solid var(--border);
}
.fact-list strong {
    min-width: 118px;
    color: var(--text);
    font-weight: 700;
}

/* Genummerde stappen */
.steps {
    list-style: none;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 26px;
}
.steps li {
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.steps li::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.95rem;
    font-weight: 700;
}
.steps h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.steps p {
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.7;
}

/* Afsluitende strook met oproep */
.cta-band {
    margin-top: 80px;
    padding: 52px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    text-align: center;
}
.cta-band h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.9px;
    margin-bottom: 12px;
}
.cta-band p {
    max-width: 560px;
    margin: 0 auto 28px;
    color: var(--muted);
    font-size: 1.06rem;
}
.page-foot {
    margin-top: 70px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted-2);
}

/* Work-pagina: het sleepbare raster vult het scherm onder de vaste navigatie */
.page-work {
    padding-top: var(--nav-h);
}
.page-work .explore {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    min-height: 420px;
}

/* ==========================================================================
   Case-study pagina's (project-*.html)
   ========================================================================== */
.project-header {
    padding: calc(var(--nav-h) + 90px) 0 40px;
    text-align: center;
}
.project-header h1 {
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -1.6px;
    margin-bottom: 22px;
}
.project-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.meta-item {
    font-size: 0.88rem;
    color: var(--muted);
    background: var(--bg-soft);
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.project-banner {
    width: 100%;
    height: 340px;
    border-radius: var(--radius);
    margin: 46px 0 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    box-shadow: var(--shadow-md);
}
.project-banner h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.6px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.project-details {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 56px;
    padding-bottom: 110px;
}

.detail-block {
    margin-bottom: 38px;
}
.detail-block h3 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.detail-block p {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.85;
    margin-bottom: 18px;
}

.sidebar-block {
    background: var(--surface);
    padding: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    margin-bottom: 24px;
}
.sidebar-block h4 {
    font-size: 1.05rem;
    margin-bottom: 16px;
    font-weight: 700;
}
.sidebar-block p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.tech-tag {
    background: var(--bg-soft);
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.94rem;
    font-weight: 500;
    transition: color 0.25s ease, gap 0.25s ease;
    margin-bottom: 22px;
}
.back-link:hover {
    color: var(--text);
    gap: 12px;
}

/* --------------------------------- Animaties -------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------- Responsief ------------------------------- */
@media (max-width: 1024px) {
    .explore {
        --tile-w: 380px;
        --tile-h: 330px;
        --gap: 22px;
        --cols: 3;
    }
    .project-details {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 760px) {
    .navbar {
        gap: 12px;
    }
    .logo {
        font-size: 1.1rem;
    }
    .nav-links {
        gap: 0;
    }
    .nav-links a {
        padding: 7px 9px;
        font-size: 0.85rem;
    }
    .nav-sep {
        margin: 0 5px;
    }
    .nav-links a.nav-cta {
        padding: 9px 15px;
        font-size: 0.82rem;
    }
    .explore {
        --tile-w: min(320px, 78vw);
        --tile-h: 300px;
        --gap: 16px;
        --cols: 3;
        min-height: 480px;
    }
    .explore-ui {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .explore-hint {
        display: none;
    }
    .explore-intro p {
        font-size: 0.98rem;
    }
    .pad-btn {
        width: 46px;
        height: 46px;
    }
    .hero:not(.hero--home) {
        min-height: auto;
        padding-top: calc(var(--nav-h) + 70px);
        padding-bottom: 70px;
    }
    .hero p {
        font-size: 1.08rem;
    }
    /* De hero op de index moet ook op gsm volledig boven de vouw passen */
    .hero--home {
        padding: calc(var(--nav-h) + 10px) 20px 82px;
    }
    .hero--home h1 {
        font-size: clamp(1.7rem, 6.9vw, 2.3rem);
        letter-spacing: -0.8px;
        margin-bottom: 14px;
    }
    .hero--home p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 22px;
    }
    .hero--home .hero-note {
        display: none;
    }
    .hero--home .badge {
        margin-bottom: 14px;
        padding: 6px 14px;
        font-size: 0.76rem;
    }
    .hero--home .hero-actions .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    .hero-ui {
        gap: 8px;
    }
    .hero--home .hero-hint {
        font-size: 0.78rem;
    }
    .page {
        padding: calc(var(--nav-h) + 46px) 0 80px;
    }
    .page-section {
        margin-top: 56px;
    }
    .cta-band {
        margin-top: 60px;
        padding: 40px 22px;
    }
}

/* ------------------------- Minder beweging (a11y) -------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .tile-shot {
        transition: opacity 0.2s linear;
    }
    .tile:hover .tile-shot,
    .tile:focus-visible .tile-shot {
        background-position: 50% 0%;
    }
    .card__media,
    a.card:hover .card__media,
    a.card:focus-visible .card__media {
        transition: none;
        background-position: 50% 0;
    }
    .explore-cta::after {
        animation: none;
    }
    .explore-intro {
        transition: none;
    }
    .tile-caption {
        transform: none;
        transition: none;
    }
    .hero-content,
    .reveal {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn:hover,
    .tile:hover,
    .tile:hover .tile-arrow,
    .explore-skip:hover,
    .pad-btn:hover:not(:disabled),
    a.card:hover,
    a.card:focus-visible {
        transform: none;
    }
}

/* Zeer korte schermen (of sterk ingezoomd): de index mag dan wél scrollen,
   zodat de inhoud altijd bereikbaar blijft. */
@media (max-height: 680px) {
    body.page-home {
        height: auto;
        overflow: auto;
    }
    .hero--home {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        touch-action: pan-y;   /* op zulke schermen moet de pagina nog kunnen scrollen */
    }
}

/* Korte schermen: de hero houdt alles boven de vouw */
@media (min-width: 761px) and (max-height: 820px) {
    .hero--home {
        padding: calc(var(--nav-h) + 12px) 24px 36px;
    }
    .hero--home h1 {
        font-size: clamp(2rem, 4.6vw, 3.3rem);
        margin-bottom: 18px;
    }
    .hero--home p {
        font-size: 1.04rem;
        margin-bottom: 26px;
    }
    .hero--home .badge {
        margin-bottom: 18px;
    }
    .hero--home .hero-note {
        display: none;
    }
    .hero--home {
        padding-bottom: 88px;
    }
}