/* Case pages (/cases/<slug>, /en/cases/<slug>) in the Webfluencer layout (featured-work/REFERENCE-WEBFLUENCER.md §3):
   a dark case, a framed full-bleed hero with the name bottom left, then three text blocks (De case, Het resultaat,
   De oplossing) alternated with large image blocks, "Volgende case" with two large cards, and the closing call to action.
   TCL's own: Inter only (no serif), no decorative gradients (the one gradient is the functional scrim under white text),
   meaning never by colour alone (the archive state is a word plus a hollow square).
   One template, content from world1/_src/cases/<slug>.json. <article class="case"> is the portable unit the Project
   Showcase lifts out, so it sets its own ground, face and ink. */
.cs{background:#181818;color:#F2F1EC;position:relative;-webkit-font-smoothing:antialiased}
.case{--c-bg:#181818;--c-ink:#F2F1EC;--c-body:#C9C7C1;--c-grey:#A8A6A0;--c-line:rgba(255,255,255,.12);--c-ease:cubic-bezier(.16,1,.3,1);
  background:var(--c-bg);color:var(--c-ink);font-family:var(--font,"Inter",system-ui,sans-serif);font-feature-settings:var(--font-features)}
.case *{box-sizing:border-box}
.case a{color:inherit}
.cs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the breadcrumb sits on the hero, top left, like the reference's navigation */
.cs-crumb{position:absolute;z-index:3;top:104px;left:48px;display:flex;gap:10px;align-items:center;font-size:13px;color:rgba(255,255,255,.86)}
.cs-crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* the shared light header over a dark photo: a firmer ground under its dark type while it sits on the hero (legibility, not decoration) */
body:has(main.cs) .wfn[data-wfn-theme="light"]:not(.is-scrolled) .wfn-bar{background-color:rgba(252,252,250,.88)}   /* case pages only: case.css is also loaded by the showcase on the homepage */

/* ---------------------------------------------------------------- hero */
.cs-hero{padding:20px}
.cs-hero-frame{position:relative;height:calc(100vh - 40px);height:calc(100svh - 40px);min-height:520px;max-height:1100px;border-radius:12px;overflow:hidden;background:#222}
.cs-hero-frame picture{display:contents}
.cs-hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* a flat tint plus the functional scrim under the white name */
.cs-hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,0) 60%),rgba(0,0,0,.2);pointer-events:none}
.cs-hero-copy{position:absolute;left:clamp(20px,2.8vw,40px);right:clamp(20px,2.8vw,40px);bottom:clamp(24px,2.8vw,40px);color:#fff}
.cs-hero-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.cs-h1{margin:0;font-size:clamp(44px,6.4vw,96px);font-weight:400;line-height:1;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.cs-kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.cs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.cs-tags li{display:inline-flex;align-items:center;gap:8px;height:33px;padding:0 15px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);font-size:12px;font-weight:500;line-height:1;color:#fff;white-space:nowrap}
.cs-tag-archive i,.cs-archive-k i{display:inline-block;width:9px;height:9px;border:1.5px solid currentColor;border-radius:2px}

/* ---------------------------------------------------------------- text blocks: eyebrow, one statement, a short body */
.cs-block{padding:clamp(96px,11vw,170px) 20px}
.cs-block-in{width:min(720px,100%);margin-left:max(0px,calc(50% - 300px))}
.cs-eyebrow{margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;color:var(--c-grey)}
.cs-statement{margin:0;font-size:clamp(26px,2.9vw,42px);font-weight:600;line-height:1.28;letter-spacing:-.025em;color:var(--c-ink);text-wrap:pretty}
.cs-p{margin:28px 0 0;font-size:16px;line-height:1.65;color:var(--c-body);text-wrap:pretty}
.cs-p+.cs-p{margin-top:14px}
.cs-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--c-line)}
.cs-list li{padding:16px 0;border-bottom:1px solid var(--c-line)}
.cs-h3{margin:0;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)}
.cs-list p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--c-body)}
.cs-sub{margin:40px 0 0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-grey)}
.cs-sub+.cs-list{margin-top:16px}
.cs-note{margin:24px 0 0;font-size:14px;line-height:1.6;color:var(--c-grey)}
.cs-archive-k{display:inline-flex;align-items:center;gap:8px;margin-right:6px;font-weight:600;color:var(--c-ink)}
.cs-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:36px 0 0;padding-top:20px;border-top:1px solid var(--c-line)}
.cs-facts dt{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-grey)}
.cs-facts dd{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--c-ink)}
.cs-stats{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--c-line)}
.cs-stats li{padding:14px 0;border-bottom:1px solid var(--c-line);font-size:15px;line-height:1.5;color:var(--c-body)}
.cs-stats b{font-weight:600;color:var(--c-ink);font-variant-numeric:tabular-nums}
.cs-demo{margin:32px 0 0}
.cs-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:#F2F1EC;color:#181818!important;
  font-size:15px;font-weight:500;text-decoration:none;transition:background-color .2s ease}
.cs-btn:hover{background:#fff}
/* the one link from the case to its Creative Studio service (build-case-pages.py service_html): a plain underlined link in the body */
.cs-service{margin-top:18px}
.cs-link{color:var(--c-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cs-link:hover{text-decoration-thickness:2px}
.case a:focus-visible,.cs-crumb a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

/* ---------------------------------------------------------------- image blocks: render only when their slot is filled */
.cs-img{margin:0}
.cs-img img{display:block;width:100%;height:auto;object-fit:cover;border-radius:10px;background:#222}
.cs-img-wide,.cs-img-full{padding:0 20px}
.cs-img-wide img{aspect-ratio:7/3}
.cs-img-full img{aspect-ratio:16/9}
.cs-img-full+.cs-img-duo{margin-top:20px}
.cs-img-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 20px}
.cs-img-duo img{aspect-ratio:4/3}
.cs-img-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-img-tri img{aspect-ratio:3/4;border-radius:0}

/* ---------------------------------------------------------------- Volgende case: two large cards */
.cs-next{padding:clamp(96px,10vw,150px) 20px 0}
.cs-next-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3vw,52px)}
.cs-next-h{margin:0;font-size:clamp(32px,2.8vw,42px);font-weight:300;line-height:1.05;letter-spacing:-.04em;color:var(--c-ink)}
.cs-all{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--c-ink)}
.cs-all i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);transition:background-color .4s var(--c-ease),color .4s var(--c-ease)}
.cs-all svg{width:14px;height:14px}
.cs-nx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.cs-nx-card{position:relative;display:block;aspect-ratio:686/748;border-radius:10px;overflow:hidden;background:#222;text-decoration:none;isolation:isolate}
.cs-nx-card picture{display:contents}
.cs-nx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--c-ease)}
.cs-nx-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 45%),rgba(0,0,0,.18);transition:opacity .9s var(--c-ease)}
.cs-nx-name{position:absolute;left:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px);right:20px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  font-size:clamp(28px,3vw,44px);font-weight:400;line-height:1.05;letter-spacing:-.04em;color:#fff}
/* per-project accent: --cs-accent (and its 55 % alpha) come from the case data (theme.accent) as inline custom properties
   on <article data-case>, so the Project Showcase carries them along with the article. Spent on small details only: the
   CASE kicker next to the name, the border of the tag pills, and a thin line that draws under a next-case card on hover.
   Without an accent everything renders exactly as before (the fallbacks are the old values). Never meaning by colour. */
.cs-kicker{color:var(--cs-accent,rgba(255,255,255,.78))}
.cs-tags li{border-color:var(--cs-accent-55,rgba(255,255,255,.24))}
.cs-nx-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;background:var(--cs-accent,#F2F1EC);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--c-ease);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .cs-all:hover i{background:#F2F1EC;color:#181818}
  .cs-nx-card:hover .cs-nx-shade{opacity:.6}
  .cs-nx-card:hover::after{transform:scaleX(1)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cs-nx-card:hover img{transform:scale(1.05)}
}

/* ---------------------------------------------------------------- the closing call to action */
.cs-cta{padding:clamp(96px,10vw,150px) 20px clamp(80px,8vw,120px)}
.cs-cta-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(24px,4vw,80px);align-items:start;padding-top:clamp(24px,2.4vw,36px);border-top:1px solid var(--c-line)}
.cs-cta-h{margin:0;grid-row:1/3;font-size:clamp(30px,3.3vw,52px);font-weight:400;line-height:1.05;letter-spacing:-.035em;color:var(--c-ink)}
.cs-cta .cs-p{margin:0;max-width:620px}
.cs-cta-a{margin:8px 0 0}

/* a missing piece in a local TCL_FEATURED_LOCAL=1 build only (build-public.py refuses to ship it) */
.cs-devnote{margin:24px 20px;padding:16px 20px;border:1.5px dashed rgba(255,255,255,.5);border-radius:14px;font-size:15px;line-height:1.5;color:var(--c-ink)}
.cs-devnote b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}

@media (max-width:1023px){
  .cs-block-in{margin-left:0}
  .cs-cta-in{grid-template-columns:1fr}.cs-cta-h{grid-row:auto}
}
@media (max-width:767px){
  .cs-crumb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cs-hero{padding:16px}
  .cs-hero-frame{height:calc(100vh - 32px);height:calc(100svh - 32px);min-height:480px}
  /* the site's fixed "Vraag het de studio" button sits bottom right on a phone: the name and tags stay above it */
  .cs-hero-copy{bottom:84px}
  .cs-block{padding:88px 16px}
  .cs-img-wide,.cs-img-full,.cs-img-duo{padding:0 16px}
  .cs-img-duo{grid-template-columns:1fr;gap:16px}
  .cs-img-tri{grid-template-columns:1fr}
  .cs-next{padding:88px 16px 0}
  .cs-nx{grid-template-columns:1fr;gap:16px}
  .cs-cta{padding:88px 16px 72px}
  .cs-facts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cs-nx-card img,.cs-nx-shade,.cs-nx-card::after,.cs-all i,.cs-btn{transition:none}}

/* ---------------------------------------------------------------- the editorial impression page (build-case-pages.py editorial_block; Solara)
   Red Wing rhythm: statements (.cs-block) alternated with large photography. No screenshots (owner, 27 okt 2026).
   A generated image carries a small word label on a firm dark ground: meaning never by colour alone. */
.cs-hero-line{margin:14px 0 0;max-width:34em;font-size:clamp(16px,1.35vw,20px);line-height:1.45;color:rgba(255,255,255,.92);text-wrap:pretty}
.cs-editorial .cs-block .cs-p{max-width:620px}
.cs-ei{position:relative;margin:0;min-width:0}
.cs-ei img{display:block;width:100%;height:auto;object-fit:cover;border-radius:10px;background:#222}
.cs-ei-wide,.cs-ei-full{padding:0 20px}
.cs-ei-wide img{aspect-ratio:7/3}
.cs-ei-full img{aspect-ratio:16/9}
.cs-ei-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 20px;margin-top:20px}
.cs-ei-4x3 img{aspect-ratio:4/3}
.cs-ei-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-ei-tri .cs-ei-3x4 img{aspect-ratio:3/4;border-radius:0}
.cs-ei-duo .cs-ei-3x4 img{aspect-ratio:3/4}
.cs-ei-bleed{margin-top:clamp(96px,11vw,170px)}
.cs-ei-bleed img{aspect-ratio:16/9;border-radius:0}
/* the label of a generated image: small, legible, bottom left inside the image */
.cs-gen{position:absolute;left:clamp(12px,1.6vw,20px);bottom:clamp(12px,1.6vw,20px);margin:0;pointer-events:none}
.cs-ei-wide .cs-gen,.cs-ei-full .cs-gen{left:calc(20px + clamp(12px,1.6vw,20px))}
.cs-gen span{display:inline-block;padding:5px 9px;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.04em}
@media (max-width:767px){
  .cs-ei-wide,.cs-ei-full,.cs-ei-duo{padding:0 16px}
  .cs-ei-wide .cs-gen,.cs-ei-full .cs-gen{left:28px}
  .cs-ei-duo{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .cs-ei-tri{grid-template-columns:1fr}
  .cs-ei-tri .cs-ei-3x4 img{aspect-ratio:4/5}
}