/* ------------------------------------------------------------------
   Crombruggen - begin screen (aperture) + mask-distortion hero
------------------------------------------------------------------ */

:root {
    --ink: #0a0a0b;          /* near-black, matches screen.jpeg (begin screen) */
    --paper: #fbfaf8;        /* warm white - hero background */
    --text: #131211;         /* near-black lettering on white */
    --muted: #7a766f;
    --muted-light: #8a8783;  /* for text on the black begin screen */
    --olive: #8f8a6f;        /* olive-gold accent (kickers, hover, accents) */
    --hairline: rgba(19, 18, 17, 0.14);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Space Grotesk", system-ui, sans-serif;
    --font-hero: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;

    /* driven by JS: 0 = shutter closed, 1 = fully open */
    --iris: 0%;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* guard: nothing may widen the page on mobile */
}

body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

/* page is locked on the begin screen; JS unlocks after the intro */
body.is-locked { overflow: hidden; height: 100vh; height: 100svh; }

/* skip to main content - hidden until keyboard focus */
.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 10000;
    padding: 0.7rem 1.4rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: transform 0.2s ease;
}
.skip-link:focus {
    transform: translate(-50%, 0);
    outline: 2px solid var(--paper);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Scroll stage - tall track, sticky viewport inside
------------------------------------------------------------------ */

/* single-screen page: the intro plays in place, no scroll track needed */
.stage {
    height: 100vh;
    height: 100svh;
}

.stage-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */

.hero {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--ink);
}

/* autoplaying video background */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* dark scrim so the white text/nav stay legible over any frame */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(10, 10, 11, 0.7) 0%,
        rgba(10, 10, 11, 0.15) 42%,
        rgba(10, 10, 11, 0.4) 100%);
}

/* centered headline + CTA */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(1.5rem, 5vw, 3.5rem);
    pointer-events: none;
}
.hero-content > * { pointer-events: auto; }

.hero-heading {
    font-family: var(--font-hero);
    font-weight: 500;
    font-style: normal;
    color: var(--paper);
    /* smaller + cleaner than before - reads as a refined title, not shouting */
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 34px rgba(0, 0, 0, 0.35);
    animation: hero-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.hero-cta {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-top: clamp(1.8rem, 4vh, 2.8rem);
    padding: 1rem 2.6rem;
    border: 1px solid rgba(251, 250, 248, 0.85);
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.74rem;
    color: var(--paper);
    isolation: isolate;
    transition: color 0.35s ease;
    animation: hero-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.hero-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--paper);
    z-index: -1;
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.hero-cta:hover, .hero-cta:focus-visible { color: var(--ink); }
.hero-cta:hover::before, .hero-cta:focus-visible::before { transform: translateY(0); }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

/* Header */

.hero-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem clamp(1.5rem, 4vw, 3.5rem);
    z-index: 4;
}

/* H1 wraps the brand logo (name = Crombruggen) with no visual change */
.hero-title {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-weight: inherit;
}

.hero-brand {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.hero-brand-logo {
    height: clamp(28px, 3.6vw, 46px);
    width: auto;
    display: block;
}

.hero-nav { display: flex; gap: 2rem; }

.hero-nav a {
    color: var(--muted-light);
    text-decoration: none;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: 0.5rem 0;
    transition: color 200ms ease;
}

.hero-nav a:hover,
.hero-nav a:focus-visible { color: #ffffff; }

.hero-nav a:focus-visible,
.hero-brand:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 4px;
}

/* Hamburger (mobile + tablet) */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #ffffff; /* header blend flips it dark on white */
}

.menu-toggle:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 4px;
}

/* ------------------------------------------------------------------
   Loading screen - black; "Crombruggen" writes itself, slides up on scroll
------------------------------------------------------------------ */

.loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}

.loader.is-up { transform: translateY(-100%); }

/* the white symbol: a dim "ghost" copy with a bright copy on top that JS
   reveals left-to-right (clip-path) as the load progresses - pikeproductions.be */
.loader-logo {
    position: relative;
    height: clamp(88px, 15vh, 150px);
    aspect-ratio: 993 / 1967;   /* trimmed symbol-white.png */
    opacity: 0;
    transform: scale(0.96);
    animation: loader-logo-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes loader-logo-in {
    to { opacity: 1; transform: scale(1); }
}

.loader-logo-ghost,
.loader-logo-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.loader-logo-ghost { opacity: 0.18; }

/* revealed by JS: right inset goes 100% -> 0% with progress */
.loader-logo-fill { clip-path: inset(0 100% 0 0); }

.loader-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.loader-bar-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: #8f8a6f;        /* olive-gold accent */
    transform: scaleX(0);       /* driven by JS: 0 -> 1 */
    transform-origin: 0 center;
}

/* ------------------------------------------------------------------
   Over Senne - cinematic portrait, statement + signature reveal on scroll
------------------------------------------------------------------ */

/* ink band that gives the Over section room to breathe below the hero */
.over-gap {
    height: clamp(9vh, 14vh, 18vh);
    background: var(--ink);
}

.over {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ink);
}

/* full-bleed grayscale portrait, pushes in as the section enters */
.over-photo {
    position: absolute;
    inset: 0;
    transform: scale(1.12);
    opacity: 0;
    transition: transform 1.6s ease, opacity 1.2s ease;
    will-change: transform, opacity;
}

.over.is-in .over-photo { transform: scale(1); opacity: 1; }

.over-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.02); /* full colour (was grayscale) */
}

/* gradient scrim keeps the bottom text legible over any photo */
.over-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(10, 10, 11, 0.55) 0%,
        rgba(10, 10, 11, 0)    30%,
        rgba(10, 10, 11, 0.35) 55%,
        rgba(10, 10, 11, 0.92) 100%);
}

.over-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: clamp(2rem, 7vw, 5rem);
    padding-bottom: clamp(3rem, 8vh, 6rem);
}

.over-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--muted-light);
    margin-bottom: 1.3rem;
}

.over-text {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.35rem, 2.8vw, 2.6rem);
    line-height: 1.15;
    color: var(--paper);
}

.over-accent { color: #8f8a6f; }

/* each word brightens one by one once the section is in view (JS-wrapped) */
.over-word {
    opacity: 0.14;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

/* handwritten signature writes itself left-to-right */
.over-sig {
    font-family: "Mrs Saint Delafield", cursive;
    font-size: clamp(3.2rem, 8vw, 5.5rem);
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    margin-top: 1.1rem;
    transform: rotate(-6deg);
    transform-origin: left center;
    clip-path: inset(-30% 100% -30% 0);
    transition: clip-path 1.4s cubic-bezier(.4, 0, .15, 1) .3s;
    will-change: clip-path;
}

.over.is-in .over-sig { clip-path: inset(-30% 0% -30% 0); }

/* count-up stats at the end of Over Senne - white numerals in the photo's
   monochrome palette, olive "+" accent, muted labels */
.over-stats {
    /* grid (not flex-wrap) so pairs never split onto a lonely line:
       4 across on desktop, 2×2 on smaller screens - "200K+ views" and
       "5+ jaar achter de lens" always stay on the same row */
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: clamp(1.4rem, 4vw, 3.4rem) clamp(1.6rem, 5vw, 3.4rem);
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
    padding-top: clamp(1.4rem, 3vh, 1.8rem);
    border-top: 1px solid rgba(251, 250, 248, 0.16);
}

@media (max-width: 720px) {
    .over-stats { grid-template-columns: repeat(2, auto); }
}

.over-stat-n {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1;
    color: var(--paper);
    font-variant-numeric: tabular-nums; /* digits don't jitter while counting */
    letter-spacing: 0.005em;
}

.over-stat-n i { color: #8f8a6f; font-style: normal; }

.over-stat-l {
    margin-top: 0.5rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted-light);
    max-width: 16ch;
}

/* ------------------------------------------------------------------
   Van idee tot beeld - 4-step process (editorial list, ink section)
------------------------------------------------------------------ */

.process {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    /* extra top room so it isn't crowding the Over Senne section above */
    padding: clamp(9rem, 26vh, 18rem) 0 clamp(3rem, 8vh, 6rem);
}

.process-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 6vw, 7rem);
}

.process-head { margin-bottom: clamp(3rem, 8vh, 5.5rem); }

.process-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    color: var(--olive);
    margin-bottom: 1.4rem;
}
.process-eyebrow::before {
    content: "";
    width: clamp(28px, 6vw, 60px);
    height: 1px;
    background: var(--olive);
    opacity: 0.6;
}

.process-title {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.98;
    font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem);
    text-wrap: balance;
}
.process-title .over-accent { color: var(--olive); }

.process-lead {
    margin-top: 1.3rem;
    max-width: 52ch;
    font-size: clamp(1rem, 0.95rem + 0.28vw, 1.18rem);
    line-height: 1.65;
    color: var(--muted-light);
}

/* Timeline: a vertical spine on the left with a scroll-driven olive fill,
   and each step carries an oversized ghost number that lights up when active. */
.process-list {
    list-style: none;
    position: relative;
    padding-left: clamp(1.4rem, 5vw, 3.6rem);
}

.process-spine {
    position: absolute;
    left: 0;
    top: clamp(2rem, 4vh, 3rem);
    bottom: clamp(2rem, 4vh, 3rem);
    width: 2px;
    background: rgba(251, 250, 248, 0.14);
    overflow: hidden;
}
.process-spine-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--olive);
    transform: scaleY(var(--p, 0));
    transform-origin: top;
}

.process-step {
    position: relative;
    overflow: hidden;
    padding: clamp(2.2rem, 5.5vh, 3.8rem) 0;
    border-top: 1px solid rgba(251, 250, 248, 0.14);
}
.process-step:last-child { border-bottom: 1px solid rgba(251, 250, 248, 0.14); }

/* dot on the spine, aligned to each step; lights olive when active */
.process-step::before {
    content: "";
    position: absolute;
    left: calc(clamp(1.4rem, 5vw, 3.6rem) * -1 - 4px);
    top: clamp(2.6rem, 6vh, 4.2rem);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid rgba(251, 250, 248, 0.3);
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
    z-index: 2;
}
.process-step.is-active::before {
    background: var(--olive);
    border-color: var(--olive);
    transform: scale(1.3);
}

/* oversized outlined ghost number behind the copy */
.process-ghost {
    position: absolute;
    top: 50%;
    right: clamp(-0.5rem, 1vw, 1rem);
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(5.5rem, 19vw, 14rem);
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(143, 138, 111, 0.28);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 0;
    transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step.is-active .process-ghost {
    color: rgba(143, 138, 111, 0.16);
    -webkit-text-stroke-color: var(--olive);
    transform: translateY(-50%) scale(1.04);
}

.process-body {
    position: relative;
    z-index: 1;
    max-width: 34ch;
}

.process-step-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--olive);
    margin-bottom: 0.9rem;
}

.process-name {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.02;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
    margin-bottom: 0.7rem;
}

.process-desc {
    max-width: 46ch;
    font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
    line-height: 1.65;
    color: var(--muted-light);
}

/* Reveal on scroll: header first, then each step rises + its ghost number
   scales in. JS adds .is-in and sets --d (per-step stagger). NOT gated behind
   prefers-reduced-motion (same decision as the case-study count-up). */
.process-eyebrow,
.process-title,
.process-lead,
.process-step {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.process.is-in .process-eyebrow,
.process.is-in .process-title,
.process.is-in .process-lead,
.process.is-in .process-step { opacity: 1; transform: none; }

.process-ghost {
    /* extends the base transition above with an entrance offset */
    opacity: 0;
}
.process.is-in .process-ghost { opacity: 1; }
.process-step .process-ghost {
    transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease,
                opacity 0.9s ease calc(var(--d, 0s) + 0.2s),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-spine-fill { transition: transform 0.2s linear; }

@media (max-width: 640px) {
    .process-ghost { font-size: clamp(4.5rem, 26vw, 8rem); right: -0.5rem; opacity: 0.9; }
    .process-body { max-width: 100%; }
    .process-step::before { top: clamp(2.4rem, 6vh, 4rem); }
}

/* ------------------------------------------------------------------
   Samenwerking: Crombruggen x Sensan Productions (dark, follows Over)
   A bold, centered collaboration lockup + one cinematic feature card.
------------------------------------------------------------------ */
.sensan {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    padding: clamp(7rem, 20vh, 14rem) 0 clamp(4rem, 10vh, 7rem);
}

/* faint olive glow behind the lockup for depth, slowly breathing */
.sensan-glow {
    position: absolute;
    top: clamp(6rem, 16vh, 12rem);
    left: 50%;
    width: min(820px, 92vw);
    height: min(820px, 92vw);
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(143, 138, 111, 0.2) 0%, rgba(143, 138, 111, 0) 62%);
    pointer-events: none;
    z-index: 0;
    animation: sensan-glow-breathe 8s ease-in-out infinite;
}
@keyframes sensan-glow-breathe {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(0.92); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

.sensan-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 6vw, 7rem);
    text-align: center;
}

/* kicker with a short olive rule on each side */
.sensan-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    color: var(--olive);
    margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.sensan-kicker::before,
.sensan-kicker::after {
    content: "";
    width: clamp(24px, 6vw, 54px);
    height: 1px;
    background: var(--olive);
    opacity: 0.6;
}

/* the collaboration lockup: two big names stacked around a large olive x */
.sensan-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.4rem, 1.4vh, 1rem);
}
.sensan-name {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.96;
    font-size: clamp(2.1rem, 1.2rem + 5.6vw, 5.2rem);
    text-wrap: balance;
}
.sensan-x {
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 0.7;
    font-size: clamp(2.8rem, 1.5rem + 6.6vw, 6rem);
    color: var(--olive);
    margin: clamp(-0.3rem, -0.6vh, 0rem) 0;
    text-shadow: 0 0 40px rgba(143, 138, 111, 0.5);
}

/* Lockup entrance: names slide in from opposite sides, the x pops + pulses.
   Driven by .sensan.is-in (not gated behind prefers-reduced-motion). */
.sensan-name { opacity: 0; }
.sensan-x { opacity: 0; display: inline-block; }
.sensan.is-in .sensan-name:nth-child(1) {
    animation: sensan-in-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.sensan.is-in .sensan-name:nth-child(3) {
    animation: sensan-in-right 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.sensan.is-in .sensan-x {
    animation: sensan-x-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both,
               sensan-x-pulse 3.2s ease-in-out 1.5s infinite;
}
@keyframes sensan-in-left {
    from { opacity: 0; transform: translateX(-70px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sensan-in-right {
    from { opacity: 0; transform: translateX(70px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sensan-x-in {
    0%   { opacity: 0; transform: scale(0.2) rotate(-140deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes sensan-x-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

.sensan-lead {
    margin: clamp(1.8rem, 4.5vh, 3rem) auto clamp(2.6rem, 6.5vh, 4.5rem);
    max-width: 58ch;
    font-size: clamp(1rem, 0.95rem + 0.28vw, 1.18rem);
    line-height: 1.75;
    color: var(--muted-light);
}

/* cinematic feature card: full-width video with overlaid title + stats */
a.sensan-feature {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sensan-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #14140f;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
a.sensan-feature:hover .sensan-media,
a.sensan-feature:focus-visible .sensan-media {
    transform: translateY(-6px);
    box-shadow: 0 50px 110px -36px rgba(0, 0, 0, 0.95),
                0 0 0 1px rgba(143, 138, 111, 0.4);
}
.sensan-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
a.sensan-feature:hover .sensan-media video,
a.sensan-feature:focus-visible .sensan-media video { transform: scale(1.07); }

.sensan-media-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 6, 5, 0.86) 0%, rgba(6, 6, 5, 0.28) 42%, rgba(6, 6, 5, 0) 72%);
}

.sensan-tag {
    position: absolute;
    top: clamp(1rem, 3vw, 1.8rem);
    left: clamp(1rem, 3vw, 1.8rem);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--paper);
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(251, 250, 248, 0.4);
    border-radius: 999px;
    backdrop-filter: blur(3px);
}

.sensan-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.4rem clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.4rem, 4vw, 2.6rem);
    text-align: left;
}
.sensan-stats {
    display: flex;
    gap: clamp(1.8rem, 5vw, 3.4rem);
}
.sensan-stat { display: flex; flex-direction: column; }
.sensan-stat-n {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1;
    font-size: clamp(1.6rem, 1rem + 3vw, 3.2rem);
    color: var(--paper);
}
.sensan-stat-l {
    margin-top: 0.5rem;
    font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.82rem);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--olive);
}
.sensan-project-cta {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--paper);
    border-bottom: 1px solid var(--olive);
    padding-bottom: 4px;
    transition: color 0.3s ease;
}
a.sensan-feature:hover .sensan-project-cta,
a.sensan-feature:focus-visible .sensan-project-cta { color: var(--olive); }

/* Reveal (same fade+rise pattern as the process section; NOT gated behind
   prefers-reduced-motion, matching that section's decision). */
.sensan-kicker,
.sensan-lead,
.sensan-feature {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.sensan.is-in .sensan-kicker,
.sensan.is-in .sensan-lead,
.sensan.is-in .sensan-feature { opacity: 1; transform: none; }

/* the olive rules beside the kicker draw outward on reveal */
.sensan-kicker::before,
.sensan-kicker::after { transform: scaleX(0); transform-origin: center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; }
.sensan.is-in .sensan-kicker::before,
.sensan.is-in .sensan-kicker::after { transform: scaleX(1); }

@media (max-width: 640px) {
    .sensan-overlay { flex-direction: column; align-items: flex-start; }
    .sensan-stats { gap: 1.6rem; }
}

/* black spacer between about and projecten (stays ink so the fade is seamless) */
.section-gap {
    height: 28vh;
    background: var(--ink);
}

/* ------------------------------------------------------------------
   Projects - horizontal scroll with a black→white fade on entry
------------------------------------------------------------------ */

.projects {
    position: relative;
    background: var(--paper);
    color: var(--text);
    /* long white tail so you scroll well past the last panel before the
       footer appears, and the overlap wipes over empty space, not a panel */
    padding-bottom: 50vh;
}

/* tall track drives the horizontal travel; sticky pins one screen */
.projects-hscroll { position: relative; height: 420vh; }

.projects-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--ink); /* JS interpolates ink→paper on entry */
    will-change: background-color;
}

.projects-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

/* one full-viewport panel each - keeps the layout identical on any laptop */
.hpanel {
    position: relative;
    flex: 0 0 100vw;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
    padding: clamp(3rem, 10vh, 9rem) clamp(1.5rem, 6vw, 7rem);
}

.hpanel-media {
    position: relative;
    overflow: hidden;
    height: min(70vh, 600px);
    background: #e7e4dd;
}

.hpanel-media img {
    position: absolute;
    /* oversized on all sides so the horizontal parallax never exposes the
       beige media background as a light strip on the left/right edge */
    top: -9%;
    left: -9%;
    width: 118%;
    height: 118%;
    object-fit: cover;
    will-change: transform;
}

.hpanel-info { display: flex; flex-direction: column; align-items: flex-start; }

.hpanel-num {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    color: var(--olive, #8f8a6f);
    margin-bottom: clamp(1rem, 2vh, 1.6rem);
}

.hpanel-name {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* rem-anchored so it stays consistent across laptop widths */
    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4.4rem);
    line-height: 1.02;
    color: var(--panel-text, var(--text));
}

.hpanel-desc {
    margin-top: clamp(1rem, 2vh, 1.6rem);
    max-width: 34ch;
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
    line-height: 1.6;
    color: var(--panel-muted, var(--muted));
}

.hpanel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: clamp(1.4rem, 3vh, 2.2rem);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-decoration: none;
    color: var(--panel-text, var(--text));
    border-bottom: 1px solid rgba(19, 18, 17, 0.35);
    padding-bottom: 0.35rem;
    transition: gap 200ms ease, border-color 200ms ease;
}

.hpanel-link::after { content: "→"; }
.hpanel-link:hover,
.hpanel-link:focus-visible { gap: 1rem; border-color: var(--panel-text, var(--text)); }

/* label + progress bar */
.projects-hlabel {
    position: absolute;
    top: clamp(1.5rem, 4vh, 3rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--panel-muted, var(--muted));
}

.projects-progress {
    position: absolute;
    left: clamp(1.5rem, 6vw, 7rem);
    right: clamp(1.5rem, 6vw, 7rem);
    bottom: clamp(1.5rem, 4vh, 3rem);
    height: 1px;
    background: rgba(19, 18, 17, 0.18);
    z-index: 2;
}

.projects-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--text);
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* ------------------------------------------------------------------
   Footer - signature left, contact form right
------------------------------------------------------------------ */

.footer {
    position: relative;
    z-index: 5;
    /* slides up over the empty tail of the projects section */
    margin-top: -20vh;
    color: var(--ink);
    will-change: transform;
}

/* ---- Variant 3 contact CTA ---- */
.footer-cta {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(4rem, 11vh, 8rem) clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vh, 3rem);
}

.fc3-kick {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(10, 10, 11, 0.6);
}

.fc3-head {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.98;
    font-size: clamp(2.8rem, 10vw, 8rem);
    margin: 1.4rem 0 2.6rem;
    color: var(--ink);
}
.fc3-head .w { display: inline-block; overflow: hidden; vertical-align: top; }
.fc3-head .w span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.fc3-head.in .w span { transform: none; }

/* pill button with fill sweep */
.fc3-btn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.85rem 2.1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    color: var(--ink);
    isolation: isolate;
    transition: color 0.35s ease;
}
.fc3-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    z-index: -1;
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.fc3-btn:hover, .fc3-btn:focus-visible { color: #8f8a6f; }
.fc3-btn:hover::before, .fc3-btn:focus-visible::before { transform: translateY(0); }
.fc3-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.fc3-row {
    display: flex;
    justify-content: center;
    gap: 1.8rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.fc3-row a { text-decoration: none; color: rgba(10, 10, 11, 0.7); transition: color 0.3s ease; }
.fc3-row a:hover, .fc3-row a:focus-visible { color: var(--ink); }

.fc3-socials { display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.4rem; }
.fc3-socials a {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(10, 10, 11, 0.28);
    border-radius: 50%;
    color: var(--ink);
    transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
}
.fc3-socials a:hover, .fc3-socials a:focus-visible {
    background: var(--ink); color: #8f8a6f; transform: translateY(-4px);
}
.fc3-socials svg { width: 19px; height: 19px; }

.fc3-sign {
    display: block;
    height: clamp(34px, 4.8vw, 58px);
    width: auto;
    margin: 3rem auto 0;
}

.fc3-bottom {
    display: flex;
    justify-content: center;
    gap: 0.6rem 1.8rem;
    flex-wrap: wrap;
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 1.6rem;
    border-top: 1px solid rgba(10, 10, 11, 0.2);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(10, 10, 11, 0.6);
}
.fc3-bottom a {
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid rgba(10, 10, 11, 0.35);
    padding-bottom: 0.1rem;
    transition: border-color 0.2s ease;
}
.fc3-bottom a:hover { border-color: var(--ink); }

/* footer reveal (fade + rise) */
.footer-rv {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-rv.in { opacity: 1; transform: none; }

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 8rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(4rem, 9vh, 7rem) clamp(1.5rem, 4vw, 3.5rem);
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

.footer-sign {
    font-family: "Mrs Saint Delafield", cursive;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    color: var(--ink);
}

.footer-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(10, 10, 11, 0.72);
}

.footer-link {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 10, 11, 0.35);
    padding-bottom: 0.3rem;
    transition: border-color 200ms ease;
}

.footer-link:hover,
.footer-link:focus-visible { border-color: var(--ink); }

.footer-socials {
    display: flex;
    gap: 0.9rem;
}

.footer-socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(10, 10, 11, 0.35);
    border-radius: 50%;
    color: var(--ink);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.footer-socials svg {
    width: 19px;
    height: 19px;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    background: var(--ink);
    color: #8f8a6f;
    border-color: var(--ink);
}

.footer-socials a:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 3px;
}

.footer-copy {
    margin-top: auto;
    padding-top: 2.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(10, 10, 11, 0.72);
}

/* bottom bar: designed-by credit + privacy link */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
    border-top: 1px solid rgba(10, 10, 11, 0.2);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(10, 10, 11, 0.72);
}

.footer-credit a,
.footer-privacy {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 10, 11, 0.35);
    padding-bottom: 0.15rem;
    transition: border-color 200ms ease;
}

.footer-privacy { color: var(--ink); }

.footer-credit a:hover,
.footer-credit a:focus-visible,
.footer-privacy:hover,
.footer-privacy:focus-visible { border-color: var(--ink); }

/* Contact form */

.footer-form-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2.2rem;
    color: var(--ink);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-field label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(10, 10, 11, 0.72);
}

.form-field input,
.form-field textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(10, 10, 11, 0.35);
    padding: 0.55rem 0;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink);
    border-radius: 0;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--ink);
}

.form-submit {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.9rem 2.4rem;
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.form-submit:hover,
.form-submit:focus-visible {
    background: var(--ink);
    color: #8f8a6f;
}

.form-submit:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 4px;
}

.form-status {
    min-height: 1em;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(10, 10, 11, 0.72);
}
.form-status.is-ok { color: var(--ink); }
.form-status.is-err { color: #7a2e22; }

/* ------------------------------------------------------------------
   Mobile / tablet menu overlay
------------------------------------------------------------------ */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    background: var(--ink);
    color: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease, visibility 0s linear 350ms;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 350ms ease;
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.mobile-menu-nav a {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--paper);
    text-decoration: none;
    padding: 0.4rem 1rem;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible { color: var(--muted-light); }

.mobile-menu-nav a:focus-visible {
    outline: 1px solid var(--paper);
    outline-offset: 4px;
}

.mobile-menu-sign {
    position: absolute;
    bottom: 2.4rem;
    height: 34px;
    width: auto;
    opacity: 0.85;
}

.mobile-menu-close {
    position: absolute;
    top: 1.6rem;
    right: clamp(1.5rem, 4vw, 3.5rem);
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
}

.mobile-menu-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 1.5px;
    background: var(--paper);
}

.mobile-menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu-close:focus-visible {
    outline: 1px solid var(--paper);
    outline-offset: 4px;
}

/* ------------------------------------------------------------------
   Responsive & motion preferences
------------------------------------------------------------------ */

/* tablet & mobile: hamburger replaces the inline nav */
@media (max-width: 1024px) {
    .hero-nav { display: none; }
    .menu-toggle { display: flex; }

    /* Projects on mobile/tablet: a natural side-swipe carousel instead of the
       scroll-jacked horizontal effect (people found it confusing - scrolling
       DOWN moved panels sideways). The section now sits in normal vertical
       flow: you scroll the PAGE down as usual, and swipe the cards sideways. */
    .projects { padding-bottom: clamp(5.5rem, 18vh, 10rem); }
    .projects-hscroll { height: auto; }               /* un-pin the 420vh track */
    .projects-sticky {
        position: static;
        height: auto;
        overflow: visible;
        background: var(--paper);                      /* fixed white, no JS fade */
        --panel-text: var(--text);
        --panel-muted: var(--muted);
    }
    .projects-track {
        height: auto;
        transform: none !important;                    /* ignore any JS transform */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* leading/trailing padding matches scroll-padding so EVERY card (incl.
           the first) rests at the same left inset — panel 01 no longer sits
           flush while the others are inset. gap adds space between cards. */
        gap: clamp(1.8rem, 8vw, 3rem);
        /* trailing pad = viewport - panel - leading pad, so the LAST card can
           scroll to the same left inset as the others (uniform snap) */
        padding-left: clamp(1.2rem, 5vw, 2rem);
        padding-right: calc(100vw - 82vw - clamp(1.2rem, 5vw, 2rem));
        scroll-padding-left: clamp(1.2rem, 5vw, 2rem);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;                         /* peek hints replace the scrollbar */
    }
    .projects-track::-webkit-scrollbar { display: none; }

    /* "Projecten" becomes a normal centered heading above the row */
    .projects-hlabel {
        position: static;
        transform: none;
        display: block;
        text-align: center;
        padding: clamp(2rem, 6vh, 3rem) 0 clamp(1rem, 3vh, 1.6rem);
    }
    /* progress bar sits statically below the swipeable row and fills as you
       swipe through the cards (same visual as the desktop scrub bar) */
    .projects-progress {
        position: static;
        display: block;
        left: auto; right: auto; bottom: auto;
        width: min(78vw, 420px);
        margin: clamp(1.6rem, 5vh, 2.6rem) auto 0;
        background: rgba(19, 18, 17, 0.16);
    }

    /* each panel is a swipeable card; 86vw lets the next one peek in so it's
       obvious you can swipe sideways */
    .hpanel {
        flex: 0 0 82vw;
        scroll-snap-align: start;
        height: auto;
        min-height: 62vh;
        grid-template-columns: 1fr;
        gap: 1.4rem;
        align-content: center;
        padding: clamp(1.5rem, 5vh, 3rem) 0;
    }
    .hpanel-media { height: 38vh; }
    /* drop the parallax overscan so the (now static) image sits clean */
    .hpanel-media img { top: 0; left: 0; width: 100%; height: 100%; }

    /* no scroll-overlap trick on mobile - footer just stacks below */
    .footer { margin-top: 0; }
}

@media (max-width: 640px) {
    /* footer stacks and stays compact enough to fit the viewport, so the
       "Crombruggen" signature at the top never scrolls off when you reach
       the bottom of the page */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 3rem;
        padding-bottom: 2.4rem;
    }
    .footer-left { gap: 0.7rem; }
    .footer-sign { font-size: 3rem; }
    .footer-copy { padding-top: 0.8rem; }
    .footer-form-title { margin-bottom: 1.3rem; }
    .contact-form { gap: 1.1rem; }
    .footer-bottom { padding-top: 1.1rem; padding-bottom: 1.1rem; }
}

/* Laptop / desktop: fixed display sizes so the big type renders identically
   on every laptop width instead of scaling with vw (which made it look bigger
   on one screen and smaller on another). Mobile/tablet keep their own sizes. */
@media (min-width: 1025px) {
    .footer-sign { font-size: 4.2rem; }
    .hpanel-name { font-size: 3.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .loader-logo { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Project category pages (video / fotografie / social)
------------------------------------------------------------------ */

.projectpage {
    background: var(--paper);
    color: var(--text);
    overflow-x: hidden;
}

.pp-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem clamp(1.5rem, 4vw, 3.5rem);
    background: rgba(251, 250, 248, 0.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(19, 18, 17, 0.1);
}

.pp-brand {
    display: block;
    line-height: 0;
    text-decoration: none;
}
.pp-brand img {
    height: clamp(26px, 3.2vw, 38px);
    width: auto;
    display: block;
}

.pp-back {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
    text-decoration: none;
    transition: color 200ms ease;
}

.pp-back:hover,
.pp-back:focus-visible { color: var(--text); }

/* page intro */
.pp-intro {
    padding: clamp(5rem, 16vh, 12rem) clamp(1.5rem, 6vw, 7rem) clamp(3rem, 8vh, 6rem);
    max-width: 1400px;
    margin: 0 auto;
}

.pp-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--olive);
    margin-bottom: 1.4rem;
}

.pp-title {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1;
    font-size: clamp(2.6rem, 2rem + 4vw, 6rem);
}

.pp-lead {
    margin-top: 1.6rem;
    max-width: 46ch;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.6;
    color: var(--muted);
}

/* service copy under the lead: what the client can book, for whom, where */
.pp-copy {
    margin-top: 2.2rem;
    max-width: 62ch;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.pp-copy p {
    font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
    line-height: 1.7;
    color: var(--muted);
}
.pp-copy a {
    color: var(--olive, #8f8a6f);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.pp-copy a:hover, .pp-copy a:focus-visible { color: var(--ink); }

/* project sections */
.pp-projects {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 6vw, 7rem) clamp(6rem, 14vh, 12rem);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 10vh, 9rem);
}

.pp-project { position: relative; }

/* clickable project card → opens its detail page */
a.pp-project {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.pp-project .pp-media {
    transition: border-color 260ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.pp-project:hover .pp-media,
a.pp-project:focus-visible .pp-media {
    border-color: rgba(19, 18, 17, 0.5);
}

a.pp-project .pp-media img,
a.pp-project .pp-media video { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
a.pp-project:hover .pp-media img,
a.pp-project:focus-visible .pp-media img { transform: scale(1.04); }

a.pp-project .pp-name { transition: color 200ms ease; }
a.pp-project:hover .pp-name,
a.pp-project:focus-visible .pp-name { color: var(--olive); }

a.pp-project:focus-visible { outline: 1px solid var(--text); outline-offset: 6px; }

.pp-project-head {
    display: flex;
    align-items: baseline;
    gap: 1.4rem;
    margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
    flex-wrap: wrap;
}

/* "Bekijk →" cue pushed to the right of the head */
.pp-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}
.pp-cta::after { content: "→"; transition: transform 220ms ease; }
a.pp-project:hover .pp-cta { color: var(--text); }
a.pp-project:hover .pp-cta::after { transform: translateX(5px); }

.pp-num {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    color: var(--olive);
}

.pp-name {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.04;
    font-size: clamp(1.8rem, 1.4rem + 2.2vw, 3.4rem);
}

/* media placeholder - swap in <video>/<img> later */
.pp-media {
    position: relative;
    overflow: hidden;
    background: #e7e4dd;
    border: 1px solid rgba(19, 18, 17, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-media--video { aspect-ratio: 16 / 9; }
.pp-media--photo { aspect-ratio: 3 / 2; }

.pp-media img,
.pp-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-media-note {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}

.pp-desc {
    margin-top: 1.2rem;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
}

/* page footer */
.pp-foot {
    border-top: 1px solid rgba(19, 18, 17, 0.12);
    padding: 2.4rem clamp(1.5rem, 4vw, 3.5rem);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}

.pp-foot a { color: var(--text); text-decoration: none; }
.pp-foot a:hover { color: var(--olive); }

/* project detail - the actual work (photo grid / video stack) */
.work {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 6vw, 7rem) clamp(6rem, 14vh, 12rem);
}

.work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin-bottom: clamp(2rem, 5vh, 4rem);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
}
.work-meta strong { color: var(--text); font-weight: 500; }

/* photo gallery - masonry columns so portrait & landscape keep their shape */
.work-grid {
    columns: 3 300px;
    column-gap: clamp(0.6rem, 1.4vw, 1.2rem);
}
.work-item {
    break-inside: avoid;
    margin: 0 0 clamp(0.6rem, 1.4vw, 1.2rem);
    overflow: hidden;
    background: #e7e4dd;
    border: 1px solid rgba(19, 18, 17, 0.08);
}
.work-item img { width: 100%; height: auto; display: block; }
/* placeholder tile keeps a box when there's no photo yet */
.work-item--ph {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.work-note {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}
.work-empty {
    padding: clamp(3rem, 10vh, 8rem) 0;
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}

/* videos placed next to each other */
.work-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.work-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e7e4dd;
    border: 1px solid rgba(19, 18, 17, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.work-video video,
.work-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* vertical (social) clips in a row */
.work-videos--vertical {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.work-video--vertical { aspect-ratio: 9 / 16; flex: 0 1 clamp(180px, 24vw, 300px); }

@media (max-width: 640px) {
    .work-item--wide { grid-column: span 1; aspect-ratio: 3 / 4; }
}

/* Instagram embeds (social detail) */
.social-embeds {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 1.6rem);
    justify-content: center;
}
.social-embeds .instagram-media {
    margin: 0 !important;
    min-width: 300px !important;
    flex: 0 1 340px;
}

/* outlined button (case study link etc.) */
.pp-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: clamp(2rem, 5vh, 3.5rem);
    padding: 0.95rem 2.4rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    transition: background 200ms ease, color 200ms ease, gap 200ms ease;
}
.pp-button::after { content: "→"; }
.pp-button:hover,
.pp-button:focus-visible { background: var(--ink); color: var(--paper); gap: 1rem; }

/* Case study page */
.cs-results {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2rem, 6vw, 5rem);
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1rem, 3vh, 3rem) clamp(1.5rem, 6vw, 7rem) clamp(2rem, 5vh, 4rem);
    border-bottom: 1px solid rgba(19, 18, 17, 0.12);
}
.cs-stat-num {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1;
    color: var(--ink);
}
.cs-stat-label {
    margin-top: 0.7rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
    max-width: 22ch;
}
.cs-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(3rem, 7vh, 6rem) clamp(1.5rem, 6vw, 7rem) clamp(6rem, 14vh, 12rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
}
.cs-item-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--olive);
    margin-bottom: 0.9rem;
}
.cs-item-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
}

/* scroll-reveal for case study elements (fade + rise, staggered by JS) */
.cs-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-reveal.in {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------------
   Lightbox - click a fotografie gallery photo to enlarge it
------------------------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(10, 10, 11, 0.93);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}
.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    transform: scale(0.93);
    opacity: 0.5;
    cursor: default;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.lightbox.open .lightbox-img { transform: scale(1); opacity: 1; }
.lightbox-close {
    position: absolute;
    top: clamp(1rem, 3vw, 1.8rem);
    right: clamp(1rem, 3vw, 1.8rem);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--paper);
    font-size: 2.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.lightbox-close:hover { opacity: 1; }