/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   SMLT — CASE PAGE  ·  loads after smlt5.css (reuses all design tokens)
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

/* ── hero ── */
.case-hero{padding:clamp(7rem,16vh,11rem) 0 clamp(1.5rem,4vh,3rem)}
.case-back{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.6rem;transition:color .3s var(--ease)}
.case-back:hover{color:var(--ink)}
.case-back .a{transition:transform .3s var(--ease)}.case-back:hover .a{transform:translateX(-.25em)}
.case-title{font-family:var(--display);font-size:var(--step-display);line-height:.86;letter-spacing:-.05em;font-variation-settings:"wght" 600,"opsz" 96;text-transform:lowercase;margin:.4rem 0 0}
.case-title .accent{color:var(--accent)}
.case-lead{max-width:42ch;margin-top:clamp(1.4rem,4vh,2.4rem);font-size:clamp(1.1rem,.95rem + .6vw,1.5rem);line-height:1.45}

/* ── cover image (full-bleed) ── */
.case-cover{margin:0;overflow:hidden}
.case-cover img,.case-cover video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ── content sheet: slides up over the cover (echoes the home overlap) ── */
.case-sheet{position:relative;z-index:2;background:var(--bg);border-radius:clamp(22px,3.5vw,44px) clamp(22px,3.5vw,44px) 0 0;margin-top:clamp(-4.5rem,-8vh,-2.5rem);box-shadow:0 -22px 52px -28px rgba(0,0,0,.4);padding-top:clamp(1.5rem,4vh,3rem)}

/* ── meta bar ── */
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(2rem,5vh,3.2rem);margin:0;border-bottom:1px solid var(--line)}
.case-meta dt{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.case-meta dd{margin:.5rem 0 0;font-family:var(--display);font-variation-settings:"wght" 540,"opsz" 40;font-size:clamp(1.02rem,.95rem + .4vw,1.3rem);line-height:1.2}
@media(max-width:720px){.case-meta{grid-template-columns:1fr 1fr;gap:1.4rem}}

/* ── prose sections ── */
.case-sec{padding-block:clamp(3.5rem,9vh,7rem)}
.case-sec .kicker{margin-bottom:1rem}
.case-h2{font-family:var(--display);font-size:var(--step-h2);line-height:.98;letter-spacing:-.04em;font-variation-settings:var(--melt-set);max-width:15ch}
.case-h2 .accent{color:var(--accent)}
.case-prose{max-width:60ch;margin-top:1.5rem;display:grid;gap:1.1rem;font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);line-height:1.6;color:var(--ink-soft)}
.case-prose strong{color:var(--ink);font-weight:600}
/* heading left, prose right */
.case-split{display:grid;grid-template-columns:.9fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:860px){.case-split{grid-template-columns:1fr;gap:1.5rem}}

/* ── steps: mini-index — rijen zoals "Wat we maken" (naam links, tekst rechts) ── */
.case-steps{margin-top:1.6rem}
.case-step{display:grid;grid-template-columns:2.4rem minmax(11ch,auto) 1fr;column-gap:clamp(.9rem,2vw,1.6rem);row-gap:.35rem;align-items:baseline;padding-block:clamp(.8rem,1.6vh,1.1rem);border-top:1px solid var(--line)}
.case-step:last-child{border-bottom:1px solid var(--line)}
.case-step > div{display:contents}
.case-step .n{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.case-step h3{font-family:var(--display);font-variation-settings:"wght" 560,"opsz" 60;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1;letter-spacing:-.01em}
.case-step p{margin:0;color:var(--ink-soft);font-size:.8rem;line-height:1.5}
@media(max-width:620px){
  .case-step{grid-template-columns:2.4rem 1fr}
  .case-step p{grid-column:2}
}

/* ── beeldlint: doorlopende strook frames (JS dupliceert de set via data-lint) ── */
.case-lint{overflow:hidden;padding-block:clamp(1.5rem,4vh,3rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.case-lint-track{display:flex;width:max-content;animation:lint var(--lint-dur,38s) linear infinite;will-change:transform}
.case-lint-track img,.case-lint-track video{height:clamp(220px,32vh,360px);width:auto;aspect-ratio:9/16;object-fit:cover;margin-right:clamp(.8rem,1.4vw,1.3rem);flex:none}
@keyframes lint{to{transform:translateX(-50%)}}

/* ── mix: één compositie — beelden overlappen elkaar via grid, scherpe hoeken ── */
.case-mix{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(38px,6vw,88px);margin-top:1.6rem}
.case-mix figure{margin:0;background:var(--surface);box-shadow:0 -18px 40px -26px rgba(0,0,0,.45),0 30px 60px -30px rgba(0,0,0,.4)}
.case-mix img,.case-mix video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.case-mix figure:hover img,.case-mix figure:hover video{transform:scale(1.03)}
.mix-1{grid-column:1/8;grid-row:1/8;z-index:1}
.mix-2{grid-column:7/13;grid-row:2/6;z-index:2}
.mix-3{grid-column:8/13;grid-row:5/10;z-index:3}
.mix-4{grid-column:2/5;grid-row:7/10;z-index:4}
.mix-5{grid-column:4/9;grid-row:8/11;z-index:2}

/* ── figures / stats ── */
.case-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);padding-block:clamp(3rem,7vh,5rem);border-block:1px solid var(--line)}
.case-fig .n{font-family:var(--num);font-size:clamp(3rem,2rem + 5vw,6rem);line-height:.82;color:var(--accent)}
.case-fig .l{margin-top:.7rem;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;max-width:22ch}
@media(max-width:620px){.case-figures{grid-template-columns:1fr;gap:1.6rem}}

/* ── quote ── */
.case-quote{padding-block:clamp(3.5rem,9vh,7rem)}
.case-quote blockquote{margin:0;max-width:22ch;font-family:var(--display);font-variation-settings:"wght" 500,"opsz" 96;font-size:clamp(1.9rem,1.2rem + 3.4vw,4.2rem);line-height:1.02;letter-spacing:-.03em}
.case-quote .cite{margin-top:1.6rem;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.06em;color:var(--ink-soft)}

/* ── next-case room ── */
.case-next{position:relative;z-index:3;background:var(--accent);color:var(--on-accent);padding-block:clamp(4rem,12vh,9rem);border-radius:clamp(22px,3.5vw,44px) clamp(22px,3.5vw,44px) 0 0;margin-top:clamp(-3.5rem,-6vh,-2rem);box-shadow:0 -22px 52px -28px rgba(0,0,0,.45)}
.case-next .kicker{color:rgba(255,255,255,.72)}
.case-next-title{font-family:var(--display);font-size:var(--step-display);line-height:.86;letter-spacing:-.05em;font-variation-settings:"wght" 620,"opsz" 96;text-transform:lowercase;margin:.4rem 0 0;transition:transform .45s var(--ease)}
/* teaser-link: big title left, tilted thumb right — the whole block is the link */
.case-next-link{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(1.5rem,4vw,4rem);color:inherit}
.case-next-link:hover .case-next-title{transform:translateX(.06em)}
.case-next-thumb{margin:0;width:clamp(150px,21vw,290px);aspect-ratio:4/5;overflow:hidden;transform:rotate(3deg);transition:transform .45s var(--ease);box-shadow:0 30px 70px -25px rgba(0,0,0,.5)}
.case-next-link:hover .case-next-thumb,.case-next-link:focus-visible .case-next-thumb{transform:rotate(0) scale(1.03)}
.case-next-thumb img,.case-next-thumb video{width:100%;height:100%;object-fit:cover}
@media(max-width:720px){.case-next-link{grid-template-columns:1fr}.case-next-thumb{display:none}}
.case-next-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.case-next .btn-accent{background:#fff;color:var(--ink)}
.case-next .btn-ghost{color:#fff}

/* ── fictief note ── */
.case-note{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:.4em .9em;margin-top:1.4rem}