/* ============================================================================================
   CASES · lichte proef op de gedeelde basis (ronde 1, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Alleen wat van deze pagina is: de galerij (hero), het dossier, de transformatie, het slot,
   de lightbox. Teksten staan in cases.html en zijn niet gewijzigd.
   ER IS GEEN LICHT BEELD: de plaat is een schema uit de vakken van het compositievoorstel (§7). Plaatprocenten:
     L liggend, of breder dan 1100 px   tekstzone x 5-36; projectscherm x 40-70, bovenkant 22 (plint 43-67 x 64-70);
                                        pauw x 74-84, y 30-64; sleep x 70,5-85, y 58-84  -> vogelvak x 70,5-85, y 30-84
     S staand tot 1100 px breed         kop en projecttekst boven; projectscherm x 12-88, bovenkant 27;
                                        pauw x 14-40, y 60-84; sleep x 30-66, y 78-93    -> vogelvak x 14-66, y 60-93
   L: de plaat staat op de volle breedte in haar eigen verhouding (16:9); niets van de plaat valt weg.
   S: kop, projecttekst, knop en bediening staan in de stroom boven de plaat; de plaat begint 26 % van haar hoogte boven
      de onderkant van de bediening, zodat het scherm (27 %) er direct onder begint. Boven de plaat loopt de lucht door.
   Het glazen scherm is .glas van de basis (er ligt beeld achter); het werk erin is dekkend en houdt zijn eigen kleuren;
   de heldere strook onder het werk draagt de link "Bekijk project".
   Met script (html.cs-js): één project tegelijk; wisselen antwoordt direct (alleen dekking, 160 ms; niet bij beweging uit).
   Zonder script: de drie projecten onder elkaar in de tekstkolom, het scherm toont het eerste; de bediening is weg.
   ============================================================================================ */

.cs{background:#f7f3ec;color:var(--nx-inkt)}
.cs .kw{font:inherit;color:inherit}
.cs .tekstlink,.cs-lightbox .tekstlink{flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere}
.cs .eyebrow{flex-wrap:wrap;row-gap:6px;overflow-wrap:anywhere}
.site-footer .legal a{overflow-wrap:anywhere}
.cs-nw{white-space:nowrap}
/* één linkerlijn voor logo, vloersecties en footer (in de basis drie lijnen; hier per pagina opgelost, zoals Investering) */
.cs .nx-vloer{--nx-rand:max(20px,calc(var(--edge) - 12px))}
.site-footer{padding-inline:max(20px,calc(var(--edge) - 12px))}

/* ---------------------------------------------------------------- galerij, gedeeld */
.csg{position:relative;isolation:isolate;overflow:clip;background:#f7f3ec}
.csg-scene{position:relative;z-index:0;width:100%}
.csg-plaatbeeld{position:absolute;inset:0;display:block}
.csg-plaat{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.csg-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(64px,7%);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(247,243,236,0),#f7f3ec)}
.cs-schema{position:absolute;z-index:4;margin:0;padding:3px 9px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:400 10px/1.3 var(--sans);letter-spacing:.04em;color:var(--nx-inkt);background:rgba(255,253,248,.9);box-shadow:inset 0 0 0 1px rgba(176,138,69,.4)}
.cs-schema b{margin-right:6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

.csg-kop,.csg-info{--steun:.42;--steun-veer:20px;--steun-uit:-14px -22px}
.csg-kop .eyebrow{margin:0 0 12px;font-size:.8125rem;letter-spacing:.32em;color:var(--nx-inkt-diep)}
.csg-kop .eyebrow::after{width:48px;background:#b18243}
.csg-kop h1{font:400 clamp(2rem,3.5vw,4rem)/1.05 var(--serif);letter-spacing:-.006em;color:var(--nx-inkt-diep);overflow-wrap:anywhere}
.csg-kop h1 .kw{display:block}

/* projecttekst */
.csg-case{scroll-margin-top:calc(var(--header-h) + 28px)}
.cs-status{display:inline-flex;align-items:center;gap:8px;margin:0;font:500 .75rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-inkt)}
.cs-status--live{color:#073c38}
.cs-dot{flex:0 0 auto;width:7px;height:7px;transform:rotate(45deg);border:1px solid #735416;background:transparent}
.cs-status--live .cs-dot{transform:none;border:0;border-radius:50%;background:#0e7566}
.csg-case h2{margin-top:6px;font:400 clamp(1.75rem,2.5vw,2.75rem)/1.08 var(--serif);color:var(--nx-inkt-diep);overflow-wrap:anywhere}
.cs-discipline{margin-top:6px;font:500 .9375rem/1.35 var(--sans);letter-spacing:.02em;color:var(--nx-inkt)}
.cs-desc{margin-top:10px;max-width:30em;font-size:1.0625rem;line-height:1.5;color:var(--nx-inkt);text-wrap:pretty}
.cs-cta{margin-top:16px}
/* bediening: twee heldere ronde knoppen en de teller */
.csg-bediening{display:flex;align-items:center;gap:10px;margin-top:14px}
.csg-knop svg{width:20px;height:20px}
.csg-knop.glas-knop{--kn-bg:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 52%,rgba(214,244,246,.10) 100%) rgba(255,255,255,.6);
  --kn-schaduw:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(11,44,41,.3),0 1px 2px rgba(11,44,41,.12),0 8px 14px -10px rgba(11,44,41,.45)}
.csg-knop.glas-knop:active{--kn-bg:rgba(206,228,230,.92);--kn-schaduw:inset 0 2px 5px rgba(11,44,41,.26),inset 0 0 0 1px rgba(11,44,41,.34),0 1px 1px rgba(11,44,41,.10)}   /* na de eigen kleurregel: indrukken wint */
.csg-teller{display:inline-flex;align-items:baseline;gap:6px;min-width:3.6rem;margin:0;justify-content:center;font:400 .9375rem/1 var(--sans);letter-spacing:.08em;color:var(--nx-inkt)}
.csg-teller b{font:400 1.375rem/1 var(--serif);letter-spacing:0;color:var(--nx-inkt-diep)}
/* met script: één project tegelijk; zonder script: alle drie onder elkaar, zonder bediening */
html.cs-js .csg-case:not(.is-actief){display:none}
html:not(.cs-js) .csg-bediening{display:none}
html:not(.cs-js) .csg-case + .csg-case{margin-top:26px;padding-top:20px;border-top:1px solid rgba(138,106,43,.5)}
@media (prefers-reduced-motion:no-preference){
  html.cs-js:not(.beweging-uit) .csg-case.is-actief.cs-wissel,html.cs-js:not(.beweging-uit) .csg-werk.is-actief.cs-wissel{animation:nx-op var(--t-op) ease-out}
}

/* het glazen scherm */
.csg-scherm{--g-r:22px;position:absolute;z-index:2;display:flex;flex-direction:column;padding:10px 10px 0}
.csg-glas{position:relative;overflow:hidden;border-radius:13px;background:#fffdf8;box-shadow:0 0 0 1px rgba(11,44,41,.16)}
.csg-werk{display:none;position:absolute;inset:0;margin:0}
.csg-werk.is-actief{display:block}
.csg-werk img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
html.cs-js .csg-werk{cursor:zoom-in}
.csg-bekijk{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-radius:8px;
  font:600 .875rem/1.2 var(--sans);letter-spacing:.02em;color:var(--nx-inkt-diep);text-decoration:underline;text-decoration-color:rgba(115,84,22,.75);text-decoration-thickness:1px;text-underline-offset:5px}
.csg-bekijk svg{flex:0 0 auto;width:16px;height:16px}
.csg-bekijk:active{opacity:.62}
@media (hover:hover) and (pointer:fine){.csg-bekijk:hover{text-decoration-thickness:2px}}

/* ---------------------------------------------------------------- L · liggend, of breder dan 1100 px */
@media (min-width:1101px),(orientation:landscape){
  .csg{display:grid;grid-template-columns:minmax(0,1fr)}
  .csg-scene{grid-area:1 / 1;align-self:start;aspect-ratio:16 / 9}
  /* tekstzone van de schets: plaat x 5-36 %, bovenkant 14 % (7,875 % van de breedte); links nooit vóór de lijn van het logo */
  .csg-inner{--kl:max(5%,calc(var(--edge) - 12px));grid-area:1 / 1;align-self:start;position:relative;z-index:1;width:36%;
    padding:max(calc(var(--header-h) + 24px),7.875%) 0 28px var(--kl)}
  .csg-info{margin-top:clamp(18px,2.2vw,36px)}
  .csg-scherm{left:40%;width:30%;top:22%}
  .csg-glas{aspect-ratio:3 / 2}
  .cs-schema{right:2%;top:86.5%}                 /* ronde 1b: rechtsonder; links lag het label zonder script over de tweede projecttekst */
}
@media (min-width:861px) and (max-width:1100px) and (orientation:landscape){
  .csg-info{margin-top:16px}
  .cs-desc{font-size:1rem;margin-top:8px}
  .cs-cta{margin-top:12px}
  .csg-scherm{padding:8px 8px 0;--g-r:18px}
}
/* liggend en smal of laag (telefoon liggend, desktop op zoom 200 %) */
@media (orientation:landscape) and (max-width:860px),(orientation:landscape) and (max-height:520px){
  .csg-inner{padding-top:calc(var(--header-h) + 10px);padding-bottom:12px}
  .csg-kop .eyebrow{margin-bottom:4px;font-size:.6875rem;letter-spacing:.24em}
  .csg-kop h1{font-size:1.5rem}
  .csg-info{margin-top:8px}
  .cs-status{font-size:.6875rem;letter-spacing:.14em}
  .csg-case h2{margin-top:2px;font-size:1.375rem}
  .cs-discipline{margin-top:2px;font-size:.8125rem}
  .cs-desc{margin-top:4px;font-size:.875rem;line-height:1.4}
  .cs-cta{margin-top:8px;min-height:44px;padding:.4em 14px .4em 18px;gap:10px;font-size:.9375rem}
  .csg-bediening{margin-top:6px;gap:8px}
  .csg-knop.glas-knop--rond{width:44px;height:44px;min-height:44px}
  .csg-scherm{padding:6px 6px 0;--g-r:16px}
  .csg-glas{border-radius:10px}
  .csg-bekijk{font-size:.8125rem}
  .cs-schema{font-size:8px}
}

/* ---------------------------------------------------------------- S · staand tot 1100 px breed */
@media (max-width:1100px) and (orientation:portrait){
  .csg{display:flex;flex-direction:column;background:#dbe7ee}           /* boven de plaat loopt de lucht door (bovenkleur van het schema) */
  .csg-inner{order:1;position:relative;z-index:1;padding:calc(var(--header-h) + 16px) 20px 0}
  .csg-kop .eyebrow{margin-bottom:6px;letter-spacing:.3em}
  .csg-kop h1{font-size:2rem;line-height:1.08}
  .csg-info{margin-top:12px}
  .csg-case h2{margin-top:3px;font-size:1.75rem}
  .cs-discipline{margin-top:3px}
  .cs-desc{margin-top:6px;font-size:1rem;line-height:1.45}
  .cs-cta{margin-top:12px}
  .csg-bediening{margin-top:8px}
  .csg-knop.glas-knop--rond{width:44px;height:44px;min-height:44px}
  /* de plaat begint 26 % van haar hoogte (46,22 % van de breedte) boven de onderkant van de bediening: het scherm (27 %) begint 1 % eronder */
  .csg-scene{order:2;flex:0 0 auto;aspect-ratio:9 / 16;margin-top:-46.22%}
  .csg-scherm{left:12%;width:76%;top:27%;padding:8px 8px 0;--g-r:18px}
  .csg-glas{aspect-ratio:auto;border-radius:11px}
  /* het scherm eindigt op 56 % van de plaat (schets): hoogte van het werk = 29 % van de plaathoogte min rand en strook */
  .csg-glas{height:calc(100vw * 16 / 9 * .29 - 8px - 44px)}
  .cs-schema{left:4%;top:88.2%}
  .cs-schema__lang{display:none}
}
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .csg-inner{padding:calc(var(--header-h) + 30px) 8% 0}
  .csg-kop h1{font-size:3rem}
  .csg-case h2{font-size:2.25rem}
  .cs-desc{font-size:1.0625rem}
}
@media (min-width:861px) and (max-width:1100px) and (orientation:portrait){.csg-kop h1{font-size:3.5rem}}
@media (max-width:375px) and (orientation:portrait){.csg-kop h1{font-size:1.875rem}}
@media (max-width:339px) and (orientation:portrait){.csg-kop h1{font-size:1.625rem}.csg-inner{padding-inline:16px}.csg-case h2{font-size:1.5rem}}

/* ---------------------------------------------------------------- vervolgsecties op de vloer */
.cs .nx-vloer p{text-wrap:pretty}
.cs-head,.cs-trans-kop,.cs-finale-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px clamp(32px,4.4vw,96px);align-items:start}
.csg-dossier{padding-top:clamp(56px,6vw,104px)}
.cs-head{margin-bottom:clamp(32px,3.6vw,56px)}
.cs-note{margin-top:14px;max-width:40em;font-size:.9375rem;line-height:1.5;color:var(--nx-tekst)}

/* dossier: naam en status op één regel, vier feiten naast elkaar; dunne lijnen, geen kaarten */
.csg-dos{padding:22px 0 26px;border-top:1px solid var(--nx-goud-lijn)}
.csg-dos:last-child{border-bottom:1px solid var(--nx-goud-lijn)}
html.cs-js .csg-dos:not(.is-actief){display:none}
html.cs-js .csg-dos.is-actief{border-bottom:1px solid var(--nx-goud-lijn)}
.csg-dos-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.csg-dos-kop h3{font-size:clamp(1.625rem,2.1vw,2.125rem)}
.csg-dos-status{margin:0;font:500 .75rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.csg-dos-status--live{color:#073c38}
.csg-feiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(20px,2.6vw,48px);margin:20px 0 0}
.csg-feiten dt{display:flex;align-items:center;gap:10px;font:500 .78125rem/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.csg-feiten dt::before{content:"";flex:0 0 auto;width:18px;height:1px;background:var(--nx-goud)}
.csg-feiten dd{margin:10px 0 0;font-size:1.0625rem;line-height:1.55;color:var(--nx-tekst);overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){
  html.cs-js:not(.beweging-uit) .csg-dos.is-actief.cs-wissel{animation:nx-op var(--t-op) ease-out}
}

.cs-trans-kop{padding-top:clamp(36px,4vw,56px)}
.cs-trans-copy .tekstlink{margin-top:14px}

/* slot: één primaire handeling */
.cs-finale{padding-bottom:clamp(72px,7.5vw,128px)}
.cs-finale-grid{padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--nx-goud-lijn)}
.cs-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px;margin-top:26px}
.cs-finale .cta-mail{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px}
.cs .nx-vloer .cta-note{color:var(--nx-tekst)}

/* ---------------------------------------------------------------- lightbox (native dialog) */
.cs-lightbox{width:min(1100px,calc(100vw - 24px));max-width:none;height:min(92vh,92svh);max-height:none;margin:auto;padding:0;border:0;border-radius:18px;overflow:hidden;
  color:var(--nx-inkt);background:var(--nx-ivoor-licht);box-shadow:0 0 0 1px rgba(11,44,41,.2),0 40px 80px -30px rgba(11,44,41,.6)}
.cs-lightbox[open]{display:flex;flex-direction:column}
.cs-lightbox::backdrop{background:rgba(11,44,41,.55)}
.cs-lb-kop{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--nx-goud-zacht)}
.cs-lb-titel{margin:0;font:400 1.25rem/1.2 var(--serif);color:var(--nx-navy);overflow-wrap:anywhere}
.cs-lb-sluit{flex:0 0 auto;--kn-schaduw:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(11,44,41,.3),0 1px 2px rgba(11,44,41,.12)}
.cs-lb-sluit svg{width:20px;height:20px}
.cs-lb-doek{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:#efe7d8}
.cs-lb-doek:focus-visible{outline-offset:-3px;box-shadow:none}
.cs-lb-img{display:block;width:100%;max-width:none;height:auto;margin:0 auto;cursor:zoom-in}
.cs-lb-doek.is-groot .cs-lb-img{width:auto;cursor:zoom-out}
.cs-lb-voet{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 20px;padding:4px 20px;border-top:1px solid var(--nx-goud-zacht)}
.cs-lb-hint{margin:0;font-size:.875rem;color:var(--nx-tekst)}
.cs-lightbox .tekstlink{color:var(--nx-navy)}

/* ---------------------------------------------------------------- 861-1100 px */
@media (min-width:861px) and (max-width:1100px){
  .csg-feiten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------------------------------------------------------------- tot 860 px: alles in één kolom */
@media (max-width:860px){
  .cs-head,.cs-trans-kop,.cs-finale-grid{grid-template-columns:minmax(0,1fr)}
  .cs-head{margin-bottom:28px}
  .csg-feiten{grid-template-columns:minmax(0,1fr);gap:18px}
  .csg-feiten dd{margin-top:6px;font-size:1rem}
  .cs-finale{padding-bottom:88px}
  .cs-acties{flex-direction:column;align-items:flex-start}
  .cs-lightbox{width:calc(100vw - 12px);border-radius:14px}
  .cs-lb-kop{padding-left:14px}
  .cs-lb-voet{padding-inline:14px}
}
@media (prefers-contrast:more){
  .csg-dos,.csg-dos:last-child,html.cs-js .csg-dos.is-actief{border-color:#131d33}
  .csg-glas{box-shadow:0 0 0 2px #0b2c29}
  .csg-bekijk{text-decoration-color:currentColor;text-decoration-thickness:2px}
}
@media (forced-colors:active){
  .csg-glas{border:1px solid CanvasText}
  .cs-dot{border-color:CanvasText}
  .cs-status--live .cs-dot{background:CanvasText;forced-color-adjust:none}
}

/* ============================================================================================
   RONDE 2 (05-10-2026, B139). bevroren-r1 blijft staan.
   1  staand met script: status en projectnaam BOVEN het scherm, discipline, uitleg, projectknop en bediening ERONDER;
      "Bekijk project" op het glas is dan de eerste actie. Zonder script blijft de indeling van ronde 1 (drie projecten boven de plaat).
   2  het werk wordt niet meer bijgesneden: het scherm is een venster waarin het hele ontwerp verticaal scrolt.
   3  veegbediening (cases-licht.js): het scherm laat verticaal scrollen aan de browser (touch-action).
   5  de pagina houdt 28 px vrij onder een element dat de focus krijgt (de onderste rij links stond precies op de schermrand).
   ============================================================================================ */
html{scroll-padding-bottom:28px}
.csg-glas{overflow-y:auto;scrollbar-width:thin}
.csg-werk{position:static}
.csg-werk img{height:auto;object-fit:fill}
.csg-scherm{touch-action:pan-y}
/* liggende telefoon: de plaat 12 px omhoog, zodat de sleep (onderkant 84 % van de plaat) boven de vouw eindigt */
@media (orientation:landscape) and (max-height:420px){.csg-scene{margin-top:-12px}}
@media (max-width:1100px) and (orientation:portrait){
  html.cs-js .csg-inner,html.cs-js .csg-info,html.cs-js .csg-projecten,html.cs-js .csg-case.is-actief{display:contents}
  html.cs-js :is(.csg-kop,.cs-status,.csg-case h2,.cs-discipline,.cs-desc,.cs-cta,.csg-bediening){position:relative;z-index:1}
  html.cs-js .csg-kop{order:1;padding:calc(var(--header-h) + 16px) 20px 0}
  html.cs-js .csg-case .cs-status{order:2;align-self:flex-start;margin:12px 20px 0}
  html.cs-js .csg-case h2{order:3;margin:3px 20px 0}
  html.cs-js .csg-scene{order:4}
  /* onder de plaat staat de rest van het project op marmer */
  html.cs-js .csg-scene::before{content:"";position:absolute;left:0;right:0;top:100%;height:200vh;background:#f7f3ec}
  html.cs-js .cs-discipline{order:5;margin:10px 20px 0}
  html.cs-js .cs-desc{order:6;margin:6px 20px 0}
  html.cs-js .cs-cta{order:7;align-self:flex-start;margin:12px 20px 0}
  html.cs-js .csg-bediening{order:8;margin:8px 20px 14px}
}
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  html.cs-js .csg-kop{padding:calc(var(--header-h) + 30px) 8% 0}
  html.cs-js .csg-case .cs-status,html.cs-js .csg-case h2,html.cs-js .cs-discipline,html.cs-js .cs-desc,html.cs-js .cs-cta,html.cs-js .csg-bediening{margin-inline:8%}
}
@media (max-width:339px) and (orientation:portrait){
  html.cs-js .csg-kop{padding-inline:16px}
  html.cs-js .csg-case .cs-status,html.cs-js .csg-case h2,html.cs-js .cs-discipline,html.cs-js .cs-desc,html.cs-js .cs-cta,html.cs-js .csg-bediening{margin-inline:16px}
}