/* ============================================================================
   leylive — case pages (/werk/<slug>/), layout after nexola.framer.website
   (captured 2026-10-26 with the reference-match pipeline): a 4-column page
   grid (its hairline rules removed on Maxim's call, 10-26), 30px outer gutter,
   text inset 10px inside each column. Leylive's own type + colour tokens.
   Motion (case.js): appear = opacity 0→1 + rise 20px, 600ms; words = per word
   rise 20px, 515ms as each line enters; cover = scale 1→1.2 scrubbed by scroll.
   ========================================================================== */

.nx-page { --nx-gutter: 30px; --nx-pad: 10px; --nx-ease: cubic-bezier(.44,0,.56,1); --nx-rule: var(--line); }

/* ---------- bands ---------- */
.nx { position: relative; color: var(--ink); background: var(--bg); }
.nx-dark { --nx-rule: var(--dark-line); color: var(--dark-text); background: var(--dark); }
.nx-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--nx-gutter);
}
.nx-in > * { padding-left: var(--nx-pad); padding-right: var(--nx-pad); }

/* ---------- shared type ---------- */
.nx-h2 { grid-column: 1 / -1; font-size: clamp(48px, 6.25vw, 90px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.nx-statement { font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; max-width: 26ch; }
.nx-small { font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--text-muted); max-width: 48ch; }
.nx-dark .nx-small { color: var(--dark-muted); }
ul.nx-small { list-style: none; display: grid; gap: var(--s3); }
ul.nx-small li { display: flex; gap: var(--s3); align-items: baseline; }
ul.nx-small li::before { content: "→"; flex: 0 0 auto; font-size: 13px; }
.nx-small + .nx-small { margin-top: var(--s4); }
.nx-label { display: flex; align-items: center; gap: var(--s3); font-size: 14px; font-weight: 400; color: var(--text-muted); margin-bottom: var(--s4); }
.nx-dark .nx-label { color: var(--dark-muted); }
/* the label dots = four Leylive colours (the .tc set): they pop in one by one,
   then ripple every few seconds so a label never sits dead on the page */
.nx-dots { display: inline-flex; gap: 4px; transform: translateY(1px); } /* optical centre on lowercase text */
.nx-dots i { width: 6px; height: 6px; border-radius: 50%; }
.nx-dots i:nth-child(1) { background: #FB6F92; }
.nx-dots i:nth-child(2) { background: #1CD2F4; }
.nx-dots i:nth-child(3) { background: #80ED99; }
.nx-dots i:nth-child(4) { background: #FFD91B; }
.nx-js .nx-label[data-nx="appear"] .nx-dots i { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.nx-js .nx-label.nx-on .nx-dots i { transform: none; animation: nx-ripple 3.2s var(--nx-ease) infinite; }
.nx-js .nx-label.nx-on .nx-dots i:nth-child(1) { transition-delay: .2s; animation-delay: 1.2s; }
.nx-js .nx-label.nx-on .nx-dots i:nth-child(2) { transition-delay: .3s; animation-delay: 1.32s; }
.nx-js .nx-label.nx-on .nx-dots i:nth-child(3) { transition-delay: .4s; animation-delay: 1.44s; }
.nx-js .nx-label.nx-on .nx-dots i:nth-child(4) { transition-delay: .5s; animation-delay: 1.56s; }
@keyframes nx-ripple { 0%, 20%, 100% { translate: 0 0; } 10% { translate: 0 -5px; } }

/* list arrows on dark bands cycle through the same colours */
.nx-dark ul.nx-small li:nth-child(4n+1)::before { color: #FFD91B; }
.nx-dark ul.nx-small li:nth-child(4n+2)::before { color: #FB6F92; }
.nx-dark ul.nx-small li:nth-child(4n+3)::before { color: #1CD2F4; }
.nx-dark ul.nx-small li:nth-child(4n+4)::before { color: #80ED99; }

/* ---------- hero ---------- */
.nx-hero .nx-in { grid-template-rows: auto 1fr auto; min-height: clamp(460px, 56vw, 560px); padding: 110px 0 var(--s9); }
.nx-title { grid-column: 1 / -1; font-size: clamp(64px, 9vw, 130px); font-weight: 500; line-height: .92; letter-spacing: -0.045em; }
.nx-by { grid-column: 1 / 2; grid-row: 2; align-self: end; font-size: 20px; font-weight: 400; line-height: 1.3; }
.nx-k { display: block; font-size: 14px; font-weight: 400; color: var(--text-muted); margin-bottom: 2px; }
.nx-facts { grid-column: 4 / 5; grid-row: 2; align-self: center; display: grid; gap: var(--s5); }
.nx-facts dt { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.nx-facts dd { font-size: 20px; font-weight: 400; line-height: 1.3; }
/* the real site, right under the name: a clear pill, not a footnote (Maxim 10-27) */
.nx-live {
  grid-column: 1 / 3; grid-row: 2; align-self: start; justify-self: start; margin: var(--s5) 0 0 var(--nx-pad);
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 400; text-decoration: none;
  transition: background .25s var(--nx-ease), color .25s var(--nx-ease);
}
.nx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #80ED99; box-shadow: 0 0 0 0 rgba(128, 237, 153, .6); animation: nx-live-pulse 2.4s var(--nx-ease) infinite; }
@keyframes nx-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(128, 237, 153, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(128, 237, 153, 0); } }
.nx-live:hover { background: var(--accent); color: var(--accent-ink); }
.nx-live:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nx-in > .nx-live { padding-left: 22px; padding-right: 22px; }
/* no site to link (fictive case): the same spot, but clearly not a button */
.nx-live--none { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line); }
.nx-live--none:hover { background: transparent; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .nx-live-dot { animation: none; } }

/* ---------- cover (zooms while scrolling, case.js) ---------- */
/* width: 100% — without it max-height also shrinks the width (aspect-ratio), leaving a blank strip on wide screens */
.nx-cover { width: 100%; margin: 0; overflow: hidden; aspect-ratio: 1.8333 / 1; max-height: 92vh; background: var(--surface); }
.nx-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }

/* ---------- intro ---------- */
.nx-intro .nx-in { grid-template-rows: auto auto; row-gap: var(--s9); padding: var(--s9) 0; }
.nx-intro .nx-statement { grid-column: 1 / 4; max-width: 30ch; }
.nx-aside { grid-column: 3 / 5; grid-row: 2; }
.nx-note { font-size: 14px; }

/* ---------- dark "de case" band ---------- */
.nx-case .nx-in { grid-template-rows: auto auto; row-gap: var(--s9); padding: var(--s10) 0; }
.nx-case:has(.nx-strip) .nx-in { padding-bottom: var(--s9); }
.nx-chal { grid-column: 3 / 5; grid-row: 1; align-self: end; }
.nx-case .nx-h2 { grid-column: 1 / 3; grid-row: 1; align-self: start; }
/* de aanpak: statement left, its points right (filled the empty right half, 10-27) */
.nx-sol { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; row-gap: 0; align-items: end; padding: 0; }
.nx-sol > * { padding-left: var(--nx-pad); padding-right: var(--nx-pad); }
.nx-sol .nx-label, .nx-sol .nx-statement { grid-column: 1 / 3; }
.nx-sol > div[data-nx] { grid-column: 3 / 5; grid-row: 2; }
/* ---------- text + photo pairs (11-10): one short text, one image, zig-zag ---------- */
/* intro: photo left, "de zaak" right · case: "de uitdaging" left, photo right */
.nx-in > .nx-pic { grid-row: 2; margin: 0 var(--nx-pad); padding: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--surface); align-self: center; }
.nx-dark .nx-in > .nx-pic { background: var(--dark-line); }
.nx-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-pic--left { grid-column: 1 / 3; }
.nx-pic--right { grid-column: 3 / 5; }
.nx-in > .nx-pic.is-tall { aspect-ratio: 4 / 5; width: min(100% - 2 * var(--nx-pad), 56vh); justify-self: center; }
.nx-intro.has-pic .nx-aside { align-self: center; }
/* case: "de case" top-left, "de uitdaging" bottom-left, the photo spans both on the right */
.nx-case.has-pic .nx-in { row-gap: var(--s6); }
.nx-case.has-pic .nx-in > .nx-pic { grid-row: 1 / 3; }
.nx-case.has-pic .nx-chal { grid-column: 1 / 3; grid-row: 2; align-self: end; }
.nx-case.has-pic .nx-sol { grid-row: 3; margin-top: var(--s9); }

.nx-strip { display: grid; gap: 6px; padding: 0 var(--nx-gutter) var(--s10); }
.nx-strip figure { margin: 0; overflow: hidden; aspect-ratio: 5.6 / 1; background: var(--dark-line); border-radius: 4px; }
.nx-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* device mockups are shown whole (16:9); two halves sit side by side */
.nx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-strip figure { grid-column: 1 / -1; }
.nx-strip figure.is-mock { aspect-ratio: 16 / 9; }
.nx-strip figure.is-mock img { object-position: 50% 50%; }
.nx-strip figure.is-tall { aspect-ratio: 4 / 5; }
.nx-strip figure.is-half { grid-column: auto; }
.nx-js [data-nx="slice"] { opacity: 0; transition: opacity .7s var(--nx-ease) var(--d, 0s); }
.nx-js [data-nx="slice"] img { transform: scale(1.2); transition: transform .7s var(--nx-ease) var(--d, 0s); }
.nx-js [data-nx="slice"].nx-on { opacity: 1; }
.nx-js [data-nx="slice"].nx-on img { transform: none; }

/* ---------- wat er verandert: pinned key changes (case.js adds .is-pinned) ----------
   Base = a plain list with each UI element under its text (phones, reduced
   motion, no JS). Pinned: the stage sticks for --keys x 60vh of scroll; the
   list lights up one change at a time and its element swaps in on the left. */
.nx-keys .keys-head { padding: var(--s9) 0 var(--s7); }
.keys-grid { padding-bottom: var(--s9); }
.keys-figs { display: none; }
.keys-side { grid-column: 1 / -1; position: relative; }
.keys-rail { display: none; }
.keys-list { list-style: none; padding: 0; display: grid; gap: var(--s7); }
.key { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
/* one Leylive colour per point (same set as the .tc chips in main.css; all take dark ink) */
.key:nth-child(5n+1) { --key-c: #FFD91B; }
.key:nth-child(5n+2) { --key-c: #FB6F92; }
.key:nth-child(5n+3) { --key-c: #1CD2F4; }
.key:nth-child(5n+4) { --key-c: #80ED99; }
.key:nth-child(5n+5) { --key-c: #F77F00; }
.key-ico {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  background: var(--key-c, var(--accent)); color: #101010; font-size: 13px; font-weight: 500;
  transition: background .4s var(--nx-ease), color .4s var(--nx-ease), transform .4s var(--nx-ease);
}
.key-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.key-t { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; margin-top: 8px; }
.key-na { margin-top: var(--s2); font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.key-more { display: grid; grid-template-rows: 1fr; }
.key-more > * { overflow: hidden; }
.key-voor { margin-top: var(--s3); display: flex; gap: var(--s3); align-items: baseline; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text-muted); max-width: 52ch; }
.key-k { flex: none; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; font-weight: 400; line-height: 1.4; }
.key-fig-m { grid-column: 1 / -1; margin: var(--s5) 0 0; padding: var(--s5); display: grid; place-items: center; background: var(--surface); border-radius: var(--radius-panel); }
.key-fig-m img, .key-fig-m video { display: block; max-width: 100%; height: auto; border-radius: var(--radius-field); box-shadow: var(--shadow-lift); }

.nx-keys.is-pinned .keys-track { height: calc(100vh + var(--keys) * 60vh); }
/* the stage is only as tall as its content and sticks where that content sits centred,
   so it starts right under the heading instead of after ~280px of centring space */
.nx-keys.is-pinned .keys-stage { position: sticky; top: max(84px, calc((100vh - min(70vh, 640px)) / 2)); display: flex; }
.nx-keys.is-pinned .keys-grid { width: calc(100% - 2 * var(--nx-gutter)); padding: 0; align-items: center; }
.nx-keys.is-pinned .keys-figs {
  grid-column: 1 / 3; display: grid; place-items: center; height: min(70vh, 640px);
  background: var(--surface); border-radius: var(--radius-panel); overflow: hidden; margin-right: var(--s5);
}
.keys-fig { grid-area: 1 / 1; margin: 0; padding: clamp(24px, 3vw, 48px); display: grid; place-items: center; width: 100%; height: 100%; opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .5s var(--nx-ease), transform .7s var(--nx-ease); }
.keys-fig.is-on { opacity: 1; transform: none; }
.keys-fig img, .keys-fig video { display: block; max-width: 100%; max-height: calc(min(70vh, 640px) - 2 * clamp(24px, 3vw, 48px)); width: auto; height: auto; border-radius: var(--radius-field); box-shadow: var(--shadow-lift); }
.nx-keys.is-pinned .keys-side { grid-column: 3 / 5; padding-left: var(--s7); }
.nx-keys.is-pinned .keys-rail { display: block; position: absolute; left: var(--nx-pad); top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.nx-keys.is-pinned .keys-rail i { display: block; height: var(--prog, 0%); border-radius: 2px; background: var(--rail-c, var(--accent)); transition: background .4s var(--nx-ease); }
/* the progress line takes the colour of the point that is on */
.keys-side:has(.key:nth-child(5n+2).is-on) { --rail-c: #FB6F92; }
.keys-side:has(.key:nth-child(5n+3).is-on) { --rail-c: #1CD2F4; }
.keys-side:has(.key:nth-child(5n+4).is-on) { --rail-c: #80ED99; }
.keys-side:has(.key:nth-child(5n+5).is-on) { --rail-c: #F77F00; }
.nx-keys.is-pinned .keys-list { gap: var(--s5); }
.nx-keys.is-pinned .key-fig-m { display: none; }
.nx-keys.is-pinned .key { opacity: .32; transition: opacity .4s var(--nx-ease); }
.nx-keys.is-pinned .key.is-lit { opacity: .6; }
.nx-keys.is-pinned .key.is-on { opacity: 1; }
.nx-keys.is-pinned .key.is-on .key-ico { transform: scale(1.06); }
.nx-keys.is-pinned .key-more { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--nx-ease); }
.nx-keys.is-pinned .key.is-on .key-more { grid-template-rows: 1fr; }

/* ---------- gallery (cases with figures) ---------- */
.nx-figures { padding: var(--s9) var(--nx-gutter); }
.nx-figures figcaption { margin-top: var(--s3); font-size: 14px; color: var(--text-muted); }

/* ---------- dark results band ---------- */
.nx-results .nx-in { grid-template-rows: auto auto auto; row-gap: var(--s8); padding: var(--s10) 0 var(--s9); }
.nx-results .nx-h2 { grid-column: 1 / 3; grid-row: 1; align-self: start; }
.nx-res { grid-column: 3 / 5; grid-row: 1; align-self: end; }
.nx-nums { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.nx-nums > div { padding: 0 var(--nx-pad); }
.nx-nums dt { font-size: clamp(56px, 6.25vw, 90px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.nx-nums > div { position: relative; border-top: 1px solid var(--dark-line); padding-top: var(--s5); }
/* each number gets a Leylive-colour bar that draws in with its count */
.nx-nums > div::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--bar, var(--accent)); transform-origin: 0 50%; }
.nx-nums > div:nth-child(4n+2) { --bar: #FB6F92; }
.nx-nums > div:nth-child(4n+3) { --bar: #1CD2F4; }
.nx-nums > div:nth-child(4n+4) { --bar: #80ED99; }
.nx-js .nx-nums > div::before { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .15s); }
.nx-js .nx-nums > div.nx-on::before { transform: none; }
.nx-nums dd { margin-top: var(--s3); font-size: 14px; line-height: 1.35; color: var(--dark-muted); max-width: 18ch; }
.nx-ctas { grid-column: 1 / 3; grid-row: 3; display: flex; gap: var(--s3); flex-wrap: wrap; }
.nx-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 14px 24px; border-radius: var(--radius-pill);
  border: 1px solid var(--dark-line); color: var(--dark-text); text-decoration: none; font-size: 15px;
  transition: background .25s var(--nx-ease), color .25s var(--nx-ease), border-color .25s var(--nx-ease);
}
.nx-btn span { transition: transform .25s var(--nx-ease); }
.nx-btn:hover span { transform: translateX(3px); }
.nx-btn:hover { border-color: var(--dark-text); }
.nx-btn--solid { background: var(--dark-text); color: var(--dark); border-color: var(--dark-text); }
.nx-btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- quote ---------- */
.nx-quote .nx-in { padding: var(--s9) 0; row-gap: var(--s5); }
.nx-quote .nx-label, .nx-quote blockquote, .nx-quote cite { grid-column: 2 / 5; }
.nx-quote cite { font-style: normal; }

/* ---------- meer werk ---------- */
.nx-more .nx-in { padding: var(--s9) 0; row-gap: var(--s7); }
.nx-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
.nx-card { display: block; color: var(--ink); text-decoration: none; padding: 0 var(--nx-pad); }
.nx-card-img { display: block; aspect-ratio: 1.8333 / 1; overflow: hidden; background: var(--surface); }
.nx-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--nx-ease); }
.nx-card:hover .nx-card-img img { transform: scale(1.04); }
.nx-card-meta { position: relative; display: grid; padding: var(--s3) 0 0; }
.nx-card-t { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.nx-card-s { font-size: 14px; color: var(--text-muted); }
.nx-arrow { position: absolute; right: 0; top: var(--s3); font-size: 18px; transition: transform .25s var(--nx-ease); }
.nx-card:hover .nx-arrow { transform: translate(2px, -2px); }
.nx-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- motion states (only with JS + motion allowed) ---------- */
.nx-js [data-nx="appear"] { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--nx-ease) var(--d, 0s), transform .6s var(--nx-ease) var(--d, 0s); }
.nx-js [data-nx="appear"].nx-on { opacity: 1; transform: none; }
/* statements: words rise one after another, 40ms apart (--w = word index, case.js) */
.nx-js .nx-word { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .6s var(--nx-ease), transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--w, 0) * 40ms); }
.nx-js .nx-on .nx-word { opacity: 1; transform: none; }
/* headings: each word slides up out of its own mask, 60ms apart */
.nx-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.nx-js .nx-mask .nx-word { opacity: 1; transform: translateY(110%); transition: transform .95s cubic-bezier(.2, .7, .2, 1) calc(var(--w, 0) * 60ms); }
.nx-js .nx-on .nx-mask .nx-word { transform: none; }
/* points and stacked paragraphs follow one by one (--c = index, case.js); arrows slide in after */
.nx-js [data-nx="appear"] li, .nx-js [data-nx="appear"] > .nx-small:not(ul) { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--nx-ease), transform .6s var(--nx-ease); transition-delay: calc(var(--d, 0s) + .12s + var(--c, 0) * 110ms); }
.nx-js [data-nx="appear"].nx-on li, .nx-js [data-nx="appear"].nx-on > .nx-small:not(ul) { opacity: 1; transform: none; }
.nx-js [data-nx="appear"] li::before { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--nx-ease), transform .5s var(--nx-ease); transition-delay: calc(var(--d, 0s) + .3s + var(--c, 0) * 110ms); }
.nx-js [data-nx="appear"].nx-on li::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nx-js [data-nx="appear"], .nx-js .nx-word, .nx-js .nx-mask .nx-word, .nx-js [data-nx="slice"], .nx-js [data-nx="slice"] img, .nx-js .nx-dots i,
  .nx-js [data-nx="appear"] li, .nx-js [data-nx="appear"] li::before, .nx-js [data-nx="appear"] > .nx-small, .nx-js .nx-nums > div::before { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ---------- small screens: 2 columns ---------- */
@media (max-width: 760px) {
  .nx-page { --nx-gutter: 16px; --nx-pad: 8px; }
  .nx-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-in > *, .nx-sol > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .nx-sol { row-gap: var(--s5); }
  .nx-hero .nx-in { min-height: 0; padding: 104px 0 var(--s8); row-gap: var(--s7); }
  .nx-facts { grid-template-columns: 1fr 1fr; }
  .nx-intro .nx-in, .nx-case .nx-in, .nx-results .nx-in { row-gap: var(--s7); padding: var(--s8) 0; }
  .nx-nums { grid-template-columns: 1fr 1fr; row-gap: var(--s6); }
  .nx-keys .keys-head { padding: var(--s8) 0 var(--s6); }
  .key { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s4); }
  .key-ico { width: 40px; height: 40px; border-radius: 12px; }
  .key-t { margin-top: 6px; }
  .key-fig-m { margin-left: calc(-40px - var(--s4)); padding: var(--s4); } /* full width under the icon column */
  .nx-strip { gap: 4px; padding-bottom: var(--s8); }
  .nx-strip figure { aspect-ratio: 3.2 / 1; }
  .nx-strip figure.is-half { grid-column: 1 / -1; }
  /* stacked: text, photo, text, photo (the intro photo moves under "de zaak") */
  .nx-intro.has-pic .nx-pic { order: 1; }
  .nx-case.has-pic .nx-in { row-gap: var(--s7); }
  .nx-case.has-pic .nx-sol { margin-top: 0; }
  .nx-in > .nx-pic.is-tall { width: auto; justify-self: stretch; }
  /* the cover is a photo of the site in its setting: a little taller so the screen in it stays readable */
  .nx-cover { aspect-ratio: 4 / 3; }
  .nx-cards { grid-template-columns: 1fr; row-gap: var(--s6); }
}